/* responsive.css — Breakpoints + reduced motion
   734.98px statt 734px: schliesst die 1px-Lücke zum JS-Breakpoint
   (min-width: 735px) bei fraktionalen Breiten (Windows-Skalierung, Zoom). */

/* Tablet ≤ 1068px */
@media (max-width: 1068px) {
  .rail-card { width: 78vw; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row-reverse .feature-media { order: 0; }
  .feature-row-reverse .feature-copy { order: 1; }
  .feature-media { aspect-ratio: 16 / 10; }
}

/* Mobile ≤ 734.98px */
@media (max-width: 734.98px) {
  /* Navigation: Linkliste weicht dem Burger-Menü */
  .localnav-title { display: none; }
  .localnav-links { display: none; }
  .navmenu { display: block; }
  .localnav-cta {
    margin-left: auto;
    margin-right: 6px;
    /* 40px statt 33px: wichtigster Knopf der Seite, Leiste ist 52px hoch */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Touch-Ziele: mindestens 44px hoch */
  .footer-links, .footer-social { gap: 2px 20px; }
  .footer-links a, .footer-social a,
  .loc-links a, .link-arrow {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Rail wird zum nativen Swipe-Slider */
  .rail-viewport { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .rail-viewport::-webkit-scrollbar { display: none; }
  .rail-track { padding: 0 24px; }
  .rail-card { width: 84vw; scroll-snap-align: center; }

  .specs-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .locations { grid-template-columns: 1fr; }
  .stats { gap: 2rem; }
}

/* Kürzere Scrub-Strecken auf Mobile (nur relevant, wenn JS + Bewegung aktiv) */
@media (max-width: 734.98px) and (prefers-reduced-motion: no-preference) {
  html.js #hero { height: 350vh; }
  html.js #zutaten { height: 300vh; }
  html.js #fladenbrot { height: 280vh; }
  html.js #statement { height: 220vh; }
}

/* Reduced Motion: alles statisch — Poster/Fallbacks sind bereits die
   Defaults (siehe sections.css), hier nur Restanimationen abschalten */
@media (prefers-reduced-motion: reduce) {
  .hero-copy-2 { display: none; }
  .hero-hint { animation: none; }
  html.js .reveal-group > * { opacity: 1; transform: none; }
}