/* Geräte-Anpassung (KASKADE 8.2): Smartphone quer (niedrige Höhe)
   Bereich: (orientation: landscape) and (max-height: 500px) and (max-width: 1023px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {

  /* ---------- Raster: 360–430 px Höhe → kompakter Rhythmus. Ränder mindestens so breit wie die Notch (viewport-fit=cover) ---------- */
  :root {
    --rand: max(var(--s-5), env(safe-area-inset-left), env(safe-area-inset-right));
    --section-pad: var(--s-8);
    --head-gap: var(--s-6);
    --block-pad: var(--s-5);
    --header-h: 56px;
    --fs-h2: clamp(1.75rem, 1rem + 2.2vw, 2.25rem);
  }

  /* ---------- Header: Tap-Flächen 44 px; Sticky-CTA entfällt (CTA steht schon im Header, sonst 35 % der Höhe fest belegt) ---------- */
  .site-header .btn { min-height: 44px; }
  .site-header .tel-link { width: 44px; height: 44px; }
  .sticky-cta { display: none; }

  /* ---------- §1 Hero: Foto links (bleibt beim Lesen stehen), Text rechts.
     Fotospalte höchstens so breit wie hoch (≈ 1:1): bei 3:2-Fotos bleibt so ≥ 62 % der Bildbreite sichtbar, der Bus wird nicht angeschnitten.
     Reihenfolge wie Handy hoch: Headline → Preis → CTA → Beschreibung (Subgrid: Zeilen stehen beim Slide-Wechsel still). ---------- */
  .hero { display: grid; grid-template-columns: min(100svh, 52%) minmax(0, 1fr); height: auto; min-height: 100svh; max-height: none; }
  .hero__bilder { position: sticky; inset: auto; top: 0; grid-area: 1 / 1; align-self: start; height: 100svh; min-height: 0; overflow: hidden; }
  .hero__bilder::before { height: 112px; }
  .hero__bilder::after { inset: 0 -1px 0 auto; width: 12%; height: auto; background: linear-gradient(to left, var(--graphit), rgba(22, 23, 26, 0)); }
  .hero__bild[data-slide="0"] .media img { object-position: 47% 60%; }
  .hero__bild[data-slide="1"] .media img { object-position: 58% 70%; }
  .hero__bild[data-slide="2"] .media img { object-position: 85% 70%; }
  .hero__inhalt {
    grid-area: 1 / 2; position: relative; inset: auto; align-self: center; max-width: none; margin: 0; gap: var(--s-2);
    padding: calc(var(--header-h) + var(--s-4)) var(--rand) var(--s-4) var(--s-5); text-align: left;
  }
  .hero__texte { grid-template-rows: repeat(5, auto); }
  .hero__text { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .hero__fuss { display: contents; }
  .hero__titel { grid-row: 1; align-self: end; display: block; min-height: 0; font-size: clamp(1.25rem, 0.9rem + 1vw, 1.5rem); }
  .hero__zitat-nachsatz { grid-row: 2; margin-top: var(--s-3); }
  .hero__meta { grid-row: 3; justify-self: stretch; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); text-align: left; }
  /* schmaler Innenabstand: bei 667 px bleibt „Fahrzeug unverbindlich anfragen“ zweizeilig statt dreizeilig */
  .hero__cta { grid-row: 4; justify-self: start; width: auto; max-width: 100%; margin-top: var(--s-3); padding-inline: var(--s-4); gap: var(--s-2); white-space: normal; }
  .hero__sub { grid-row: 5; order: 0; max-width: 60ch; margin: var(--s-4) 0 0; font-size: 13px; text-align: left; }
  .hero__sub > p:first-child { min-height: 0; }
  /* Karussell-Punkte unter den Text, 44 px Tap-Höhe; Linie bündig mit dem Text */
  .hero__punkte { order: 2; justify-content: flex-start; margin: 0 0 0 calc(-1 * var(--s-2)); }
  .hero__punkt { height: 44px; }

  /* ---------- §1b Übersicht ---------- */
  .uebersicht__titel { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.25rem); }

  /* ---------- §1c „Sofort“: Wortbild + Aufkleber an der Höhe ausrichten (sonst füllt der rote Bus allein den Screen) ---------- */
  .sofort { padding: var(--s-7) 0 var(--s-8); }
  .sofort__buehne { --wort: min(21.5vw, 32svh); }
  .sofort__sticker { width: min(64%, calc(var(--wort) * 2.8)); }
  .sofort__unterzeile { margin-top: var(--s-6); }
  .sofort__titel { max-width: 30ch; font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); }

  /* ---------- §3 Fahrzeuge: zwei Karten pro Reihe (ab 768 über .t-4); Spitzenmodell quer: Foto 4:3 links, Daten rechts ---------- */
  .karten > .karte:not(.karte--quer) { grid-column: span 2; }
  .karte--quer {
    flex-direction: row; align-items: center;
    background: radial-gradient(rgba(243, 240, 234, .07) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(to right, color-mix(in srgb, var(--farbe) 22%, var(--karte-bg)) 0%, var(--karte-bg) 60%);
  }
  .karte--quer .karte__media { flex: 0 0 52%; aspect-ratio: 4 / 3; }
  .karte--quer .karte__media > :not(.karte__striche) { -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%); mask-image: linear-gradient(to right, #000 60%, transparent 100%); }
  .karte--quer .karte__body { align-self: stretch; justify-content: center; margin-top: 0; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-2); }

  /* ---------- §4 Ausstattung: drei Karten pro Reihe, Fokus-Block zweispaltig ---------- */
  .vorteile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vorteil { min-height: 280px; padding: var(--s-4); }
  .vorteil p { font-size: 13px; }
  .vorteil-fokus { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--s-6); padding: var(--s-6); }
  .vorteil-fokus__zahlen { justify-self: center; font-size: clamp(4.5rem, 1rem + 11vw, 7rem); }

  /* ---------- §5 Zwei Wege: Foto 4:3 und Karte nebeneinander (Foto 16:9 in voller Breite war höher als der Screen) ---------- */
  .wege { gap: var(--s-6); }
  .weg { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
  .weg--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .weg__bild { grid-area: 1 / 1; aspect-ratio: 4 / 3; }
  .weg__karte { grid-area: 1 / 2; width: auto; margin: 0 0 0 calc(-1 * var(--s-6)); padding: var(--s-5); }
  .weg--b .weg__bild { grid-column: 2; }
  .weg--b .weg__karte { grid-column: 1; margin: 0 calc(-1 * var(--s-6)) 0 0; }
  .weg__thumb { display: none; }
  .weg__titel { margin-top: var(--s-2); }

  /* ---------- §6 Bildkarte: so hoch wie der Screen (statt 560–600 px). Foto nur in der rechten Hälfte (≈ 3:2, Bus ganz sichtbar),
     Text links auf Graphit: über die volle Breite lag die Headline auf dem Dach ---------- */
  .indiv__kopf { margin-bottom: var(--s-5); }
  .indiv__karte {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto;
    min-height: max(300px, calc(100svh - var(--header-h) - var(--s-6))); padding: var(--s-6) calc(54% + var(--s-5)) var(--s-6) var(--s-6);
  }
  .indiv__karte > .media { left: 46%; -webkit-mask-image: linear-gradient(to right, transparent, #000 22%); mask-image: linear-gradient(to right, transparent, #000 22%); }
  .indiv__karte > .media img { object-position: 44% 100%; }
  .indiv__karte::before { background: linear-gradient(to top, rgba(14, 15, 17, .45) 0%, rgba(14, 15, 17, 0) 30%); }
  .indiv__titel { grid-column: 1; font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); }
  .indiv__unten { grid-row: 2; justify-content: flex-start; margin-top: var(--s-4); }
  .indiv__marke { grid-row: 3; align-self: end; margin: var(--s-4) 0 0; }
  .indiv__text { font-size: var(--fs-small); }
  .indiv__spalten { grid-template-columns: 1fr 1fr; margin-top: var(--s-5); }
  .indiv__spalte { padding: var(--s-5) 0; }
  .indiv__spalte:first-child { padding-right: var(--s-6); border-right: 1px solid var(--text-dunkel); }
  .indiv__spalte:last-child { padding-left: var(--s-6); }

  /* ---------- §7 Weida-Szene: Fenster passt unter den Header (statt 560/680 px), Headline zweizeilig ---------- */
  .weida { margin-bottom: var(--s-7); }
  .weida__fenster { height: max(280px, calc(100svh - var(--header-h) - var(--s-5))); }
  /* Headline links vom Erkennungsrahmen (beginnt bei 56 % der Breite), sonst liegt sie auf dem Etikett */
  .weida__titel { max-width: min(24ch, 50%); font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); }
  /* Video + Belege nebeneinander: Video 16:9 in voller Breite wäre höher als der Screen */
  .werkstatt { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .werkstatt > * { grid-column: auto; }
  .werkstatt__zitat { margin-top: var(--s-7); }
  .werkstatt__zitat blockquote { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); }

  /* ---------- §8 Schritte: Foto 4:3 links, Titel/Fakt/Text rechts (wie Tablet hoch, hier auch für 640–767) ---------- */
  .schritte__rechts { gap: var(--s-7); }
  .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-3); 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-3) var(--s-4);
  }
  .schritt__text { grid-area: text; font-size: var(--fs-body); }
  .schritt__fuss { grid-area: fuss; }

  /* ---------- §9 Anfrage: Foto 4:3 und „Direkt sprechen“ nebeneinander (Foto war bis 420 px hoch), Flow rückt nach oben ---------- */
  .anfrage__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anfrage__bild { height: auto; aspect-ratio: 4 / 3; }
  .anfrage__kontakt { display: flex; flex-direction: column; justify-content: center; border-top: 0; padding: var(--s-5) var(--rand) var(--s-5) var(--s-5); }
  .anfrage__kontakt-spalten { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  /* Nach einem CTA-Sprung landete man auf Foto + Kontakt, die Fragen lagen 2 Screens tiefer. Daher: Flow zuerst
     (Foto + Kontakt folgen darunter), Intro links neben dem Panel → Frage und erste Kacheln stehen direkt unter dem Header. */
  .anfrage__links { order: 2; }
  .anfrage__inhalt { padding-block: var(--s-5) var(--s-7); }
  .flow { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; column-gap: var(--s-6); align-items: start; }
  .flow__zeile { display: contents; }
  .flow__intro { grid-area: 1 / 1; gap: var(--s-3); padding-bottom: var(--s-5); border-bottom: 0; }
  .flow__intro .h2 { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem); }
  .flow__intro .lead { font-size: var(--fs-body); }
  .flow__seite { grid-area: 2 / 1; position: static; padding-top: var(--s-5); border-top: 1px solid var(--line); }
  .flow__panel { grid-area: 1 / 2 / 3 / 3; }
  .flow.is-angestossen .flow__panel { animation: flow-puls 900ms var(--ease) 1; }
  .flow__zurueck { min-height: 44px; }
  .flow__schliessen { width: 44px; height: 44px; }
  /* Vollbild-Flow (640–767, flow.js): Leiste schmaler, damit mehr Kacheln auf den Screen passen */
  .flow.is-vollbild .flow__leiste { padding-block: var(--s-1); }
  .flow.is-vollbild .flow__fortschritt { margin-bottom: var(--s-4); }

  /* ---------- §11 Abschluss: Bildbühne an der Höhe begrenzt (mobil 125vw = über 800 px) ---------- */
  .abschluss { --szene-h: min(66.667vw, 112svh); }
  .abschluss__szene::after { height: 16%; }

  /* ---------- Footer: Tablet-Raster auch unter 768, ohne Platz für die Sticky-CTA ---------- */
  .site-footer { padding-bottom: var(--s-7); }
  .footer {
    grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: var(--s-7);
    grid-template-areas: "marke marke marke marke marke marke marke marke" "nav nav kontakt kontakt kontakt recht recht recht" "ruf ruf ruf ruf ruf unten unten unten" "hoch hoch hoch hoch hoch hoch hoch hoch";
  }
  .footer__unten { align-self: end; }
  .footer__nav a, .footer__recht a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__spalte li + li { margin-top: 0; }

  /* ---------- Consent-Banner: Text links, Buttons rechts untereinander (gestapelt belegte er 60–70 % der Höhe) ---------- */
  .consent { padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); }
  .consent__zeile { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-5); }
  .consent__titel { margin-bottom: 4px; font-size: 1rem; }
  .consent__text p { font-size: 13px; line-height: 1.45; }
  .consent__links { margin-top: 4px !important; }
  .consent__aktionen { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .consent__btn { min-height: 44px; }
  .consent__mehr { grid-column: auto; justify-self: center; min-height: 44px; }

}