/* Geräte-Anpassung (KASKADE 8.2): Tablet quer / kleiner Laptop (iPad quer, iPad Pro 12.9 hoch)
   Bereich: (min-width: 1024px) and (max-width: 1279px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (min-width: 1024px) and (max-width: 1279px) {

  /* ---------- §1 Hero quer (iPad quer, Laptops 1024–1279) ----------
     Foto 3:2 wird hier über die Breite skaliert; ohne Eingriff stehen Headline und Fußzeile auf den Rädern.
     Bildbühne endet daher höher (Dach bleibt unter dem Header), Fußzeile zweispaltig und flacher. */
  @media (min-aspect-ratio: 5/4) {
    .hero__bilder { bottom: auto; height: min(calc(100px + 40.8vw), calc(100svh - 140px)); }
    .hero__bilder::after { height: 34%; }
    .hero__fuss { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "sub meta" "sub cta"; column-gap: var(--s-7); row-gap: var(--s-3); align-items: center; }
    .hero__sub { grid-area: sub; max-width: 64ch; margin: 0; text-align: left; }
    .hero__meta { grid-area: meta; justify-self: end; align-self: end; text-align: right; }
    .hero__preis, .hero__meta > .label { white-space: nowrap; }
    .hero__cta { grid-area: cta; justify-self: end; align-self: start; }
  }
  /* Slides 2 + 3: Dach steht im Foto höher, Ausschnitt tiefer setzen, damit es nicht unter der Navigation liegt */
  @media (min-aspect-ratio: 5/4) and (min-height: 741px) {
    .hero__bild[data-slide="1"] .media img, .hero__bild[data-slide="2"] .media img { object-position: 55% 60%; }
  }
  /* niedrige Laptops (640–740 px hoch): Bühne etwas kürzer (Dachspitze darf unter den transparenten Header), Textblock dichter */
  @media (min-aspect-ratio: 5/4) and (max-height: 740px) {
    .hero__bilder { height: min(calc(100px + 40.8vw), calc(100svh - 160px)); }
    .hero__inhalt, .hero__text { gap: var(--s-3); }
    .hero__fuss { padding-top: var(--s-3); }
  }

  /* ---------- §1b Fakten-Leiste: Werte einzeilig, kein hängendes „€“ ---------- */
  .fact-strip > li, .fact-strip > li:nth-child(2n) { padding: var(--s-5) var(--s-4); }
  .fact-strip > li:first-child { padding-left: 0; }
  .fact__wert { font-size: clamp(1.25rem, 0.2rem + 1.6vw, 1.5rem); white-space: nowrap; }
  /* Buttons rechts untereinander, gleich breit (nebeneinander passen sie nicht neben die Trust-Liste) */
  .hero-band__zeile .btn-row { flex-direction: column; align-items: stretch; }

  /* Fahrzeugliste: Spalten fest nach Inhalt („Ascotgrau/Grün“, Status, Preis), Name bekommt den Rest,
     damit Status und Preis nicht kollidieren und die Meta-Zeile nicht in „7-/Gang-DSG“ bricht */
  .fz-zeile__link {
    grid-template-columns: calc(104px + (100vw - 1024px) * .2) minmax(0, 1fr) 56px 136px 88px 108px 40px;
    column-gap: var(--s-3);
  }
  .fz-zeile__pfeil { width: 40px; height: 40px; }

  /* ---------- §2 Knappheit: in 5 Spalten stand die Headline mit 2–3 Wörtern pro Zeile (6 Zeilen).
     Wie im Bauprotokoll vereinbart untereinander: Headline über die volle Breite, Text in Spalte 5–12 ---------- */
  .knapp__titel { grid-column: 1 / -1 !important; max-width: 22ch; margin-bottom: var(--s-5); }
  .knapp__text { grid-column: 5 / -1 !important; padding: 0; }

  /* ---------- §3 Karten: Titel auf 2 Zeilen statt 3 mit Trennung „Basis-/Transporter“ ---------- */
  .karte__titel { font-size: 1.375rem; }
  /* Spitzenmodell quer: Bildfläche ist hier fast hochkant, Ausschnitt nach links (Fahrzeugfront), das Heck läuft ohnehin in die Abdunklung */
  .karte--quer .karte__bild img { object-position: 10% 62%; }

  /* ---------- §5 Zwei Wege (Scroll-Bühne, nur quer): Karte passte auf 640–720 px Höhe nicht unter die Überschrift,
     überdeckte sie (Karte B) und lief unten aus dem Bild. Karte kompakter, Karte A (rechts) steht neben der Überschrift,
     Karte B direkt darunter; Fotoausschnitt so, dass der Bus neben der Karte steht. ---------- */
  .ist-scrolly .wege__buehne { --wege-kopf: calc(var(--s-6) + 3.15 * (1rem + 1.2vw) + var(--s-4)); }
  .ist-scrolly .wege__titelzeile .h2 { font-size: calc(1rem + 1.2vw); }
  .ist-scrolly .weg__karte { width: min(400px, 36vw); bottom: var(--s-6); padding: var(--s-4) var(--s-5) var(--s-5); }
  .ist-scrolly .weg--a .weg__karte { top: calc(var(--header-h) + var(--s-5)); }
  .ist-scrolly .weg__label { flex-direction: row; align-items: baseline; gap: var(--s-3); }
  .ist-scrolly .weg__titel { margin: var(--s-3) 0 var(--s-2); font-size: 1.375rem; }
  .ist-scrolly .weg__text { font-size: 13px; line-height: 1.5; }
  .ist-scrolly .weg__fuss { margin-top: var(--s-4); padding-top: var(--s-3); gap: var(--s-2) var(--s-3); }
  .ist-scrolly .weg--a .weg__bild .media img { object-position: 100% 55%; }
  .ist-scrolly .weg--b .weg__bild .media img { object-position: 20% 60%; }
  /* Bildunterschrift auf die freie Seite (Karte B steht links unten) */
  .ist-scrolly .wege__buehne:has(.weg--b.is-aktiv) .wege__caption { left: auto; right: var(--rand); }
  @media (max-height: 740px) {
    .ist-scrolly .weg__karte { width: min(400px, 40vw); }
  }

  /* ---------- §8 Schritte (Scroll-Bühne quer): „2 Werktage“ lief aus der Fakt-Kachel (Kachel nur ~110 px Innenbreite) ---------- */
  .ist-scrolly .schritt__medien { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .schritt__wert { font-size: clamp(1.25rem, 0.5rem + 1.2vw, 1.5rem); }

  /* ---------- §9 Anfrage quer: Foto im 4:3-Format statt auf die Resthöhe gestreckt (Front von CWT 12 war abgeschnitten),
     dunkle Kontaktleiste füllt den Rest, Inhalt mittig ---------- */
  @media (min-aspect-ratio: 5/4) {
    .anfrage__bild { flex: none; height: min(31.25vw, calc(100svh - var(--header-h) - 260px)); }
    .anfrage__kontakt { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
  }

  /* ---------- Hochformat in diesem Bereich (iPad Pro 12.9 hoch, 1024 × 1366): keine Scroll-Bühnen (main.js),
     §8 und §9 wie Tablet hoch statt Handy-Stapel bzw. 1300 px hoher Foto-Spalte ---------- */
  @media not all and (min-aspect-ratio: 5/4) {
    /* §8: links Foto 4:3, rechts Titel, Fakt-Kachel, Text, Fußzeile (6 + 6) */
    .schritte__rechts { gap: var(--s-8); }
    .schritt {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr;
      grid-template-areas: "foto titel" "foto kachel" "foto text" "foto fuss";
      column-gap: var(--gutter); row-gap: var(--s-4); align-items: start;
    }
    .schritt__medien { display: contents; }
    .schritt__foto { grid-area: foto; aspect-ratio: 4 / 3; }
    .schritt__titel { grid-area: titel; }
    .schritt__kachel {
      grid-area: kachel; aspect-ratio: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
      gap: var(--s-1) var(--s-3); padding: var(--s-4) var(--s-5);
    }
    .schritt__text { grid-area: text; font-size: var(--fs-body); }
    .schritt__fuss { grid-area: fuss; }

    /* §9: Foto (4:3) und „Direkt sprechen“ nebeneinander über dem Flow, nicht sticky */
    .anfrage { grid-template-columns: minmax(0, 1fr); }
    .anfrage__links { position: static; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .anfrage__bild { height: auto; min-height: 37.5vw; }
    .anfrage__kontakt { display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: var(--s-5) var(--s-6); }
    .anfrage__inhalt { max-width: none; padding: var(--s-8) var(--rand) var(--s-9); }
  }

  /* ---------- §11 Abschluss: Buttons volle Spaltenbreite, Text einzeilig ---------- */
  .abschluss__panel { padding-left: 0; }
  .abschluss .btn-row .btn { flex-basis: 100%; white-space: nowrap; }
}