/* =====================================================================
   RESPONSIVE FEINSCHLIFF
   Die Basis ist mobil. Hier stehen nur Korrekturen, die das Grundlayout
   nicht schon selbst über Grid und clamp() löst.
   ===================================================================== */

/* --- Hero bis 60rem: gestapelt --------------------------------------- */

@media (max-width: 59.9375rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .hero__status {
    justify-self: stretch;
  }

  .status {
    min-width: 0;
  }

  /* Die Fußzeile des Heros braucht mobil keinen Scroll-Hinweis */
  .hero__scroll {
    display: none;
  }

  .hero__foot-inner {
    justify-content: center;
  }
}

/* --- Tippflächen auf Touch-Geräten ------------------------------------
   Textlinks sind von Haus aus nur so hoch wie ihre Zeile. Auf Touch
   bekommen sie Polster, bis 44px erreicht sind. */

/* Gilt für alle Touch-Geräte und zusätzlich bis 64rem, weil Tablets in
   der Emulation nicht immer „hover: none“ melden. */
@media (hover: none), (max-width: 64rem) {
  .arrow-link {
    min-height: 44px;
    padding-block: 0.6rem;
  }

  /* gilt auch für die Links in der Footer-Unterzeile (Impressum,
     Datenschutz) — das sind eigenständige Ziele, keine Links im Satz. */
  .footer .link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .nav__brand {
    padding-block: 0.8rem;
  }
}

@media (max-width: 47.9375rem) {
  /* Die Telefonnummer ist auf dem Handy die wichtigste Zeile der Seite —
     sie darf größer sein als die knappe vw-Rechnung erlaubt. */
  .finale__phone {
    font-size: clamp(2.6rem, 11vw, 4rem);
    padding-block: 0.3rem;
  }
}

/* --- Sehr schmale Geräte (bis 23.4375rem / 375px) --------------------- */

@media (max-width: 23.4375rem) {
  :root {
    --display-hero: min(clamp(3rem, 15.5vw, 4.4rem), 17svh);
  }

  .hero__sub {
    font-size: var(--step-0);
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .proof__value {
    font-size: clamp(3.6rem, 22vw, 5rem);
  }
}

/* --- Niedrige Viewports (Telefon quer, kleine Laptops) ---------------- */

@media (max-height: 34rem) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-top: var(--nav-h);
  }

  .hero__inner {
    padding-block: var(--space-l);
  }

  :root {
    --display-hero: min(clamp(2.2rem, 8vh, 3.6rem), 15svh);
  }

  .finale {
    min-height: auto;
    padding-block: var(--space-2xl);
  }
}

/* --- Feuer-Sektion: gestapelte Reihenfolge unter 60rem ---------------- */

@media (max-width: 59.9375rem) {
  .fire__media {
    aspect-ratio: 4 / 5;
    max-height: 68svh;
  }

  .fire__word {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
  }
}

/* --- Galerie: Zwischenstufe --------------------------------------------- */

@media (min-width: 30rem) and (max-width: 47.9375rem) {
  .gallery {
    gap: var(--space-s);
  }
}

/* --- Große Bildschirme ------------------------------------------------- */

@media (min-width: 100rem) {
  :root {
    --wrap: min(100% - var(--gutter) * 2, 1680px);
  }

  .hero__sub {
    max-width: 38ch;
  }
}

/* --- Zeigegeräte ohne Hover (Touch) ----------------------------------- */

@media (hover: none) {
  .btn::before {
    display: none;
  }

  .btn:active {
    transform: scale(0.985);
  }

  .frame--zoom:hover > img,
  .gallery__item:hover img {
    transform: none;
  }

  .menu-panel__link:hover {
    padding-left: 0;
  }
}

/* --- Druck --------------------------------------------------------------- */

@media print {
  .nav,
  .mobile-bar,
  .menu-panel,
  .preview-flag,
  .hero__haze,
  .hero__scroll {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .section--dark,
  .section--dark-alt,
  .finale,
  .footer {
    background: #fff !important;
    color: #000 !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}