/* Geräte-Anpassung (KASKADE 8.2): Laptop / Desktop (1280–1919)
   Bereich: (min-width: 1280px) and (max-width: 1919px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (min-width: 1280px) and (max-width: 1919px) {

  /* ---------- §1 Hero: Fußzeile Preis | Text | CTA ----------
     Preis und Label nie umbrechen („ab / 49.200 €“, „VW / T6.1“). Bis 1455 px (Container < 1360) reicht die Breite nicht
     für zwei gleich breite Außenspalten: Spalten nach Inhalt, Text linksbündig als eigene Spalte, Höhe bleibt 3 Zeilen
     (sonst rutscht die Headline auf 1280×720 in die Räder). */
  /* Niedrige Fenster (Laptop im Browser: 1280 × ~600, 1366 × ~650): Das Foto ist immer breitenfüllend, der Bus ist also
     so hoch wie die Breite es vorgibt. Unter 16:9 Fensterhöhe ragte das Dach unter die Navigation und die Headline lag
     auf den Rädern. Hero daher mindestens 16:9 hoch: Bus ganz zwischen Header und Headline, die Fußzeile beginnt
     knapp an der Falz (Header-CTA bleibt sichtbar). Ab 16:9-Fenstern (1280×720, 1366×768, 1440×900 …) ändert sich nichts. */
  .hero { min-height: max(640px, 56.25vw); }

  .hero__meta { white-space: nowrap; }
  .hero__fuss { grid-template-columns: max-content minmax(0, 1fr) max-content; }
  .hero__sub { margin: 0; text-align: left; }

  @media (min-width: 1456px) {
    /* voller Container: Außenspalten gleich breit (≥ CTA), Text exakt mittig unter der Headline */
    .hero__fuss { grid-template-columns: minmax(max-content, 1fr) minmax(0, min(44rem, 100% - 2 * (22.5rem + var(--s-6)))) minmax(max-content, 1fr); }
    .hero__sub { margin: 0 auto; text-align: center; }
  }

  /* ---------- §1c „Sofort“: Akzent-Wortgruppen nicht trennen („FERTIG IN / WEIDA“) ---------- */
  .sofort__titel b { white-space: nowrap; }

  /* ---------- §5 Zwei Wege (Bühne) in sehr niedrigen Fenstern (≤ 700 px, z. B. 1280 × ~600 im Browser) ----------
     Karte war höher als der Platz unter der Überschrift: Karte B lag auf der 3. Titelzeile, die Bildunterschrift auf dem Button.
     Titel zweizeilig (rechts davon ist bei A die Karte, links bleibt Platz bis ~640 px), Karte kompakter. */
  @media (max-height: 700px) {
    .ist-scrolly .wege__titelzeile .h2 { max-width: 34ch; font-size: 1.75rem; }
    .wege.ist-scrolly .wege__buehne { --wege-kopf: 112px; }
    .ist-scrolly .weg__titel { margin: var(--s-2) 0; font-size: 1.25rem; }
    .ist-scrolly .weg__fuss { margin-top: var(--s-4); padding-top: var(--s-3); }
  }

  /* ---------- §6 Bildkarte: Text + Pfeil lagen unten rechts direkt auf der Front des Busses ----------
     Auf eine Graphit-Fläche oben rechts in den Himmel (KASKADE 1.5: Text auf Foto nur auf fester Graphit-Fläche, in der ruhigen Zone),
     Headline links daneben. Der Bus bleibt frei. */
  .indiv__titel { grid-column: 1; grid-row: 1; }
  .indiv__unten {
    grid-column: 2; grid-row: 1; align-self: start; justify-self: end; max-width: 30rem; margin: 0;
    padding: var(--s-5); border-radius: var(--r-3); background: var(--graphit);
  }
  .indiv__text { font-size: var(--fs-body); }

  /* ---------- §9 Anfrage auf niedrigen Laptops (Fensterhöhe bis 920 px) ----------
     Nach dem Sprung von einer CTA stand Schritt 1 erst bei ~570 px, die Kacheln lagen unter der Falz.
     Luft im Intro kürzer und Sprungziel unter das Intro legen: oben steht die Linie über „Anfrage | Frage“,
     Headline und Subline liegen direkt darüber (einmal hochscrollen). Zähler links bleibt sticky sichtbar. */
  @media (max-height: 920px) {
    .anfrage__inhalt { padding-top: var(--s-7); }
    .flow__intro { padding-bottom: var(--s-6); }
    .flow__zeile { padding-top: var(--s-6); }
    #anfrage { scroll-margin-top: calc(-1 * (var(--s-7) + var(--intro-h, 256px))); }
  }

  /* ---------- §10 FAQ: ab ~1600 px passte „Häufige Fragen“ einzeilig in die 4er-Spalte und stieß mit 24 px an die Fragenliste ---------- */
  .faq__kopf { padding-right: var(--s-6); }

  /* ---------- §11 Bildunterschrift an der Rasterkante statt am Fensterrand (ab 1456 px sichtbar) ---------- */
  .abschluss__szene .caption--ecke { right: max(var(--rand), (100% - var(--container)) / 2); }

  /* ---------- Einzelne Wörter allein in der letzten Zeile vermeiden ---------- */
  .faq__kopf p, .anfrage__status { text-wrap: pretty; }
}