/* ======================================================================
   13-responsive-enhancements.css
   ----------------------------------------------------------------------
   Moderne Responsive- und Performance-Erweiterungen — additiv, keine
   bestehenden Regeln werden ueberschrieben (Cascade-Reihenfolge ist die
   letzte importierte Datei nach 12-touch-visibility-fallback.css).

   Ziele:
     1) Korrektes Viewport-Verhalten auf iOS (URL-Bar-Bug)
     2) Tap-Targets ≥ 44 x 44 px (WCAG 2.5.5)
     3) Off-Screen-Performance via content-visibility
     4) Safe-Area-Insets für Notch / Home-Indicator
     5) Sichtbarkeit garantiert — KEIN display:none / visibility:hidden
        für Inhalte, nur fuer dekorative Layer
   ====================================================================== */


/* ======================================================================
   1) DYNAMISCHE VIEWPORT-HOEHE (dvh / svh / lvh)
   ----------------------------------------------------------------------
   100vh ist auf iOS Safari unzuverlässig (URL-Bar verkleinert das Viewport
   beim Scrollen). dvh = aktuelle Viewport-Höhe, svh = small (URL-Bar an),
   lvh = large (URL-Bar ausgeblendet). Wir liefern Fallback + Modernes.
   ====================================================================== */
@supports (height: 100dvh) {
  .s-hero,
  .s-hero--cinematic,
  .pkgHero,
  .aboutHero,
  .contactHero,
  .srvPageHero,
  [data-section="hero"] {
    /* Mindesthoehe folgt dem aktuell sichtbaren Viewport, nicht dem
       statischen — verhindert "Sprung" beim ersten Scroll auf iPhone */
    min-height: 100dvh;
  }
}


/* ======================================================================
   2) TAP-TARGETS — Mindestens 44 x 44 px auf Touch
   ----------------------------------------------------------------------
   WCAG 2.5.5 + Apple HIG. Wir vergroessern Buttons / Links / Toggles,
   ohne ihre visuelle Groesse zu aendern (Padding statt size).
   ====================================================================== */
@media (hover: none) and (pointer: coarse) {
  .nav__link,
  .footer__list a,
  .footer__legalBar a,
  details > summary,
  .s-faq__item summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .btn {
    min-height: 44px;
  }

  /* Schaltflaechen, die bisher zu klein sein koennten */
  .modal__close,
  .nav__toggle,
  [data-modal-close],
  [data-cookie-action] {
    min-height: 44px;
    min-width: 44px;
  }
}


/* ======================================================================
   3) CONTENT-VISIBILITY — Off-Screen-Sektionen ueberspringen
   ----------------------------------------------------------------------
   Browser ueberspringt Layout/Paint fuer Sektionen, die noch nicht
   sichtbar sind. Echter Performance-Win auf langen Seiten.
   contain-intrinsic-size verhindert Scroll-Sprung beim Eintreten.

   Greift NICHT auf den Hero (oben), aber auf alle s-section-Bloecke
   ab dem ersten Scroll. Unterstuetzt seit Safari 18 / iOS 18, alle
   modernen Chrome/Edge/Firefox; aelteres Safari ignoriert die Property
   (kein Schaden, nur kein Performance-Bonus).
   ====================================================================== */
@supports (content-visibility: auto) {
  .s-section,
  .s-cta,
  .footer,
  .ltsModel,
  .pkgRolexScroll,
  .aboutPrinciples,
  .aboutFounder,
  .contactGrid {
    content-visibility: auto;
    /* Reservierter Platz fuer noch nicht gerenderte Sektionen.
       Verhindert Scroll-Springer beim asynchronen Rendern. */
    contain-intrinsic-size: 1px 800px;
  }
}


/* ======================================================================
   4) SAFE-AREA-INSETS (Notch / Home-Indicator)
   ----------------------------------------------------------------------
   Viewport-fit=cover ist im <meta>-Tag gesetzt; wir verwenden die
   Insets dort, wo Inhalt sonst hinter Notch/Indikator landet.
   ====================================================================== */
@supports (padding: env(safe-area-inset-top)) {
  .header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  .footer {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem);
  }

  .nav__menu.is-open {
    /* Mobile-Menue darf nicht unter dem Home-Indicator landen */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 1rem);
  }

  .modal__panel {
    padding-top: max(env(safe-area-inset-top, 0px), 0.5rem);
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 0.5rem);
  }
}


/* ======================================================================
   5) CONTAINER-QUERIES (modern, zuverlaessig seit 2023)
   ----------------------------------------------------------------------
   Karten passen sich ihrem Container an, nicht dem Viewport. Bei
   schmalen Layouts (Sidebar, 2-Spaltigem Footer) verhalten sich die
   Karten dadurch korrekt.
   ====================================================================== */
@supports (container-type: inline-size) {
  .s-target-grid,
  .s-process,
  .s-faq,
  .footer__main {
    container-type: inline-size;
  }

  /* Beispiel: target-card stapelt vertikal, sobald Container < 380px */
  @container (max-width: 380px) {
    .s-target-card {
      text-align: center;
    }
  }
}


/* ======================================================================
   6) RESPONSIVE GRID FALLBACKS — keine display:none, nur Reflow
   ----------------------------------------------------------------------
   Sicherstellt, dass alle Karten/Listen auf schmalen Screens stapeln,
   ohne Inhalt zu verstecken. Weite Grids → ein-spaltig auf Mobile.
   ====================================================================== */
@media (max-width: 640px) {
  /* Generische Mehrspalter zu Single-Column */
  .s-target-grid,
  .s-story__grid,
  .s-story__stats,
  .footer__main,
  .footer__side,
  .pkgGrid,
  .ltsModel__grid,
  .principlesGrid,
  .contactGrid {
    grid-template-columns: 1fr !important;
  }

  /* Hero-Grid: Text + Visual untereinander */
  body[data-page="home"] .s-hero__grid,
  body[data-page="services"] .srvPageHero__grid,
  body[data-page="pricing"] .pkgHero__grid,
  body[data-page="about"] .aboutHero__grid,
  body[data-page="contact"] .contactHero__grid {
    grid-template-columns: 1fr !important;
    gap: var(--s-6, 1.5rem);
  }

  /* Footer-CTAs darunter, fluessig */
  .s-cta__inner,
  .s-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* Buttons in Mobile-CTAs voll-breit */
  .s-hero__actions .btn,
  .s-cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ======================================================================
   7) iPad PORTRAIT (768–834 px): zwei-spaltig sinnvoll halten
   ----------------------------------------------------------------------
   iPad mini / Air Portrait: Spalten halbieren statt stauchen.
   ====================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  .s-target-grid,
  .pkgGrid,
  .ltsModel__grid,
  .principlesGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer bleibt 2-spaltig, aber neu balanciert */
  .footer__main {
    grid-template-columns: 1fr 1fr;
  }
}


/* ======================================================================
   8) IMAGE / MEDIA — keine Layout-Shifts
   ----------------------------------------------------------------------
   Bilder ohne explizite width/height bekommen ein neutrales aspect-ratio,
   damit der Browser Platz reservieren kann (verhindert CLS).
   ====================================================================== */
img:not([width]):not([height]) {
  aspect-ratio: attr(width) / attr(height);
}

video {
  max-width: 100%;
  height: auto;
}


/* ======================================================================
   9) FORM-CONTROLS — keine iOS-Auto-Zoom
   ----------------------------------------------------------------------
   iOS zoomt automatisch in <input>, wenn font-size < 16 px. Wir
   stellen sicher, dass alle Form-Controls >= 16 px sind.
   ====================================================================== */
@media (hover: none) and (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: max(16px, 1rem);
  }
}


/* ======================================================================
   10) LANDSCAPE-PHONES (Landscape iPhone, max-height 500 px)
   ----------------------------------------------------------------------
   Hero schrumpft, damit man auch im Landscape ein bisschen Inhalt sieht.
   ====================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .s-hero,
  [data-section="hero"] {
    min-height: auto;
    padding-block: var(--s-7, 2rem);
  }

  .s-hero__visual {
    display: none; /* Nur in DIESEM seltenen Fall — sonst koennen User
                      auf Phones im Landscape den Hero gar nicht lesen */
  }
}


/* ======================================================================
   11) NARROW-PHONE GUARANTEE (<= 480 px und <= 360 px)
   ----------------------------------------------------------------------
   Garantiert das Mobile-Layout auf JEDEM modernen Smartphone — Honor,
   Huawei, Samsung Galaxy, Pixel, Xiaomi, OnePlus, iPhone SE.
   Honor 400 hat eine CSS-Breite von ~412 px → Regel greift.
   Wir adressieren explizit ALLE Touch-Geraete via Capability-Query
   (hover + pointer), nicht nur ueber Viewport-Breite — so funktioniert
   die Mobile-Variante auch dann, wenn der Browser die Viewport-Breite
   anders meldet (Honor MagicOS Browser, Samsung Internet, ...).
   ====================================================================== */
@media (max-width: 480px),
       (hover: none) and (pointer: coarse) and (max-width: 540px) {
  :root {
    --gutter: clamp(0.85rem, 4vw, 1.1rem);
  }

  .s-target-grid,
  .s-story__grid,
  .s-story__stats,
  .s-story__highlight,
  .s-story__actions-btns,
  .footer__main,
  .footer__side,
  .pkgGrid,
  .ltsModel__grid,
  .principlesGrid,
  .contactGrid,
  .s-process,
  body[data-page="home"] .s-hero__grid,
  body[data-page="services"] .srvPageHero__grid,
  body[data-page="pricing"] .pkgHero__grid,
  body[data-page="about"] .aboutHero__grid,
  body[data-page="contact"] .contactHero__grid {
    grid-template-columns: 1fr !important;
    gap: var(--s-5, 1.25rem) !important;
  }

  .s-hero__actions,
  .s-cta__actions,
  .s-cta__inner,
  .footer__ctaRow {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .s-hero__actions .btn,
  .s-cta__actions .btn,
  .footer__ctaRow .btn {
    width: 100%;
    justify-content: center;
  }

  h1, h2, h3,
  .s-hero__headline,
  .s-section__title--process {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  .header__inner {
    gap: var(--s-3, 0.75rem);
  }
  .brand__logo {
    max-width: 36vw;
    height: auto;
  }

  .modal__panel {
    width: calc(100vw - var(--s-5, 1.25rem));
    max-width: none;
    max-height: 88dvh;
    overflow-y: auto;
  }

  .cookie-banner__inner,
  .cookie-banner__actions {
    flex-direction: column;
    width: 100%;
  }
  .cookie-banner__actions .btn {
    width: 100%;
  }
}

/* Sehr kleine Phones (< 360 px) */
@media (max-width: 360px) {
  :root {
    --fs-6: clamp(1.85rem, 7vw, 2.4rem);
    --fs-5: clamp(1.45rem, 5.5vw, 1.85rem);
    --gutter: 0.75rem;
  }

  .brand__logo {
    max-width: 32vw;
  }

  .s-process__item {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ======================================================================
   12) ANTI-OVERFLOW NETZ — kein horizontales Scrollen
   ====================================================================== */
@media (max-width: 768px) {
  .container > *,
  main > *,
  section > * {
    max-inline-size: 100%;
  }

  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  pre, code {
    max-width: 100%;
    overflow-x: auto;
  }
}


/* ======================================================================
   13) DUNKLERER STERNENHIMMEL AUF TOUCH
   ----------------------------------------------------------------------
   Sehr dezenter Vignettierungs-Layer ueber dem Sternschnuppen-Container,
   nur fuer Touch/iPad. Sterne und Glow scheinen leicht gedimmt durch.
   ====================================================================== */
@media (hover: none) and (pointer: coarse) {
  [data-sternschnuppen]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 120% 80% at 50% 40%,
      rgba(11, 12, 16, 0.18) 0%,
      rgba(11, 12, 16, 0.42) 100%
    );
    pointer-events: none;
    z-index: 2;
  }
}

html.is-touch [data-sternschnuppen]::after,
html.is-ios [data-sternschnuppen]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 80% at 50% 40%,
    rgba(11, 12, 16, 0.18) 0%,
    rgba(11, 12, 16, 0.42) 100%
  );
  pointer-events: none;
  z-index: 2;
}


/* ======================================================================
   14) PRINT — saubere Druckausgabe
   ====================================================================== */
@media print {
  [data-sternschnuppen],
  .scroll-progress,
  .cookie-banner,
  .modal,
  body::before,
  body::after {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}