/**
 * Animation styles for static GeileZeit site
 * Vanilla CSS – no frameworks
 */

/* Verhindert horizontalen Rand/Scroll beim Zoomen auf Mobile */
html, body {
  overflow-x: hidden;
  width: 100%;
}

#root, #root > * {
  max-width: 100%;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero fade-in-up */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .anim-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  /* Scroll-triggered: initial hidden state */
  .anim-init {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .anim-init.anim-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Simpler fade for testimonials/CTA */
  .anim-fade-init {
    opacity: 0;
    transition: opacity 0.6s ease-out;
  }

  .anim-fade-init.anim-visible {
    opacity: 1;
  }

  /* Trust-bar: pause when reduced motion */
  .reduce-motion-pause {
    animation-play-state: paused;
  }
}

/* Mobile-Nav-Akkordeon: ruckelfrei via CSS Grid, keine JS-Messung */
.mobile-nav-panel {
  grid-template-rows: 0fr;
}
.mobile-nav-panel.is-open {
  grid-template-rows: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-panel {
    transition: none;
  }
}

/* Felder bündig mit Fließtext, intern etwas Padding links vom Icon */
#root .space-y-4 > .flex.items-start {
  padding-left: 0.75rem; /* 12px Puffer zwischen Icon und linkem Rand der Bubble */
}

/* Aufzählungszeichen (space-y-3 mit Bullets) bündig mit Fließtext */
#root .space-y-3 > .flex.items-center {
  margin-left: 0;
}

/* Locations: Mobile – mehr Abstand zwischen Anfragen-Button und folgendem Bild */
/* Tailwind v4 nutzt margin-bottom auf :not(:last-child), daher Override hier */
@media (max-width: 1023px) {
  [data-locations-section] .space-y-12 > :not(:last-child) {
    margin-bottom: 12rem !important;
  }
  /* Zusätzlich: Padding unter dem Content-Bereich (rechtes Grid-Kind) mit Anfragen-Button */
  [data-locations-section] .bg-white.rounded-2xl .grid > div:last-child {
    padding-bottom: 4rem !important;
  }
}

/* Hero ueber-uns: Mobile – alle drei Köpfe sichtbar (iPhone 12 Pro, 16 Pro Max, iPad) */
@media (max-width: 1023px) {
  [data-hero="ueber-uns"] {
    background-position: 80% center; /* starker Fokus rechts = rechter Kopf vollständig */
  }
}

/* Mobile: Mehr Puffer links zum Rand (Margin/Padding) */
@media (max-width: 1023px) {
  #root .max-w-4xl,
  #root .max-w-7xl,
  header .max-w-7xl,
  footer[data-testid="footer"] .max-w-7xl {
    padding-left: 1.5rem; /* 24px statt 16px (px-4) */
  }
  [data-testid="mobile-menu"] .px-4 {
    padding-left: 1.5rem;
  }
}

/* Footer: Mobile – Blöcke untereinander (block), nicht im Grid nebeneinander */
/* :not(.footer-nav-panel) nötig – .footer-nav-panel braucht display:grid für Accordion */
@media (max-width: 1023px) {
  footer[data-testid="footer"] .grid:not(.footer-nav-panel) {
    display: block;
  }
  footer[data-testid="footer"] .footer-nav-block {
    display: block;
    width: 100%;
  }
  /* Mehr Abstand zwischen Adresse und erstem Menüpunkt (Logo-Block ist 1. Kind) */
  footer[data-testid="footer"] .grid:not(.footer-nav-panel) > .footer-nav-block:nth-child(2) {
    margin-top: 2rem;
  }
  /* Linie als Trenner zwischen jedem Menüpunkt */
  footer[data-testid="footer"] .footer-nav-block + .footer-nav-block {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* Footer-Nav-Akkordeon: Mobile einklappbar, Desktop immer offen */
.footer-nav-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 250ms ease-out;
}
.footer-nav-panel.is-open {
  grid-template-rows: 1fr;
}

@media (min-width: 1024px) {
  .footer-nav-panel {
    grid-template-rows: 1fr;
  }
  .footer-nav-chevron {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-nav-panel {
    transition: none;
  }
}