:focus-visible { outline: 2px solid #2c8e8d; outline-offset: 2px; border-radius: 8px; }
html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; }

html {
  transition: background-color 0.25s ease, color 0.25s ease;
  scroll-padding-top: 4.5rem; /* sticky header height + buffer */
}

/* Transitions nur während des Dark-Mode-Toggles aktiv (via JS-Klasse) */
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition-property: background-color, border-color, color;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

.hero-glow {
  position: absolute; inset: auto; pointer-events: none;
  filter: blur(72px); opacity: .55;
}

.hero-enter {
  animation: fade-up-in 0.65s ease both;
}

@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 1s linear infinite; }

/* Mobile-Menü: Fade + Slide-down Animation */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.28s ease, opacity 0.22s ease, transform 0.22s ease;
}

#mobile-menu.menu-open {
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
}

/* Scrollspy: aktiver Nav-Link */
.nav-active {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}

/* Scroll fade-up — Klasse wird per JS gesetzt, daher kein Flash ohne JS */
@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
}
.fade-up.is-visible {
  animation: fade-up-in 0.6s ease both;
}

/* FAQ: Öffnen-Animation */
details[open] > p {
  animation: faq-reveal 0.28s ease forwards;
}

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes faq-hide {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-5px); }
}

/* Pakete-Karten: "Das erarbeiten wir gemeinsam" auf gleicher Höhe via CSS Subgrid */
@media (min-width: 768px) {
  .angebot-grid {
    grid-template-rows: auto auto 1fr auto auto auto;
  }
  .angebot-grid .angebot-karte {
    grid-row: span 6;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .fade-up {
    opacity: 1 !important;
    animation: none !important;
  }
  details[open] > p { animation: none !important; }
}