/* Geräte-Anpassung (KASKADE 8.2): Kleine Smartphones (iPhone SE, Android 360, 320)
   Bereich: (max-width: 389px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (max-width: 389px) {

  /* §1 Hero: CTA-Text darf umbrechen, sonst drückt „Fahrzeug unverbindlich anfragen“ (nowrap) die Seite auf 371 px */
  .hero__texte, .hero__text { min-width: 0; }
  .hero__cta { white-space: normal; }
  /* Erster Screen (568–667 px hoch): Foto etwas niedriger, Preis + CTA direkt unter die Headline, Fließtext + Hinweis danach */
  .hero__bilder { min-height: min(80vw, 40svh); }
  .hero__sub { order: 2; }
  /* Slider-Punkte: Tap-Fläche 44 px hoch (Linie bleibt unten) */
  .hero__punkt { height: 44px; }

  /* Buttons: Innenabstand 16 statt 24, sonst bricht „Fahrzeug unverbindlich anfragen“ dreizeilig um */
  .btn { padding: 0 var(--s-4); gap: var(--s-3); }

  /* Fact-Strip 2×2: Werte ohne Umbruch (kein hängendes „€“, kein „7-Gang-/DSG“), Zellen-Innenabstand 12 */
  .fact-strip > li { padding-right: var(--s-3); }
  .fact-strip > li:nth-child(2n) { padding-left: var(--s-3); padding-right: 0; }
  .fact__wert { font-size: 1.25rem; white-space: nowrap; }

  /* Header: Logo + Telefon + CTA passen bei 360–389 nicht in die 16-px-Ränder (Button lief bis 369 px).
     Logo kleiner, Abstände 8, Tap-Flächen 44 px */
  .logo img { height: 30px; }
  .site-header .container, .header-actions { gap: var(--s-2); }
  .site-header .tel-link { width: 44px; height: 44px; }
  .site-header .btn { min-height: 44px; padding: 0 var(--s-2); }

  /* Fahrzeugliste: Bildspalte schmaler, damit Nr. + Farbe („Ascotgrau/Grün“) neben dem Bild Platz haben */
  .fz-zeile__link { grid-template-columns: 88px max-content minmax(0, 1fr); column-gap: var(--s-3); }
  .fz-zeile__nr { padding-right: var(--s-2); }

  /* §3 Schnellauswahl: drei Kacheln à ~90 px, Text kleiner und ausgewogen umbrochen */
  .filter { gap: var(--s-2); }
  .filter-kachel { padding: var(--s-2) var(--s-2) var(--s-3); border-radius: 12px; }
  .filter-kachel__name { font-size: 12px; hyphens: manual; }
  .filter-kachel__info { font-size: 10px; text-wrap: balance; }
  .filter-kachel__zahl { font-size: 2rem; }
  .filter-kachel__pfeil { width: 24px; height: 24px; }
  .filter-kachel--alle .filter-kachel__bild { gap: var(--s-2); }

  /* §4 Fokus-Block: „km“ direkt unter die 250 statt verloren am Kartenende */
  .vorteil-fokus__einheit { order: -1; margin: 0 0 var(--s-2); }
  .vorteil-fokus__beschreibung { text-wrap: pretty; }

  /* §5 Zwei Wege: Karte volle Breite, weniger Überlappung → Räder bleiben sichtbar, Text breiter */
  .weg__karte { margin: calc(-1 * var(--s-5)) 0 0; padding: var(--s-4); }
  .weg__thumb { width: 96px; }
  .weg__titel { margin-top: var(--s-5); }
  .weg__wechsel { min-height: 44px; }

  /* §6 Bildkarte: Text unter voller Breite, Pfeil-Button darunter (vorher 8 Zeilen neben dem Button über dem Bus) */
  .indiv__karte { padding: var(--s-5) var(--s-4); }
  .indiv__unten { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .indiv__text { font-size: 1rem; }
  .indiv__spalte { gap: var(--s-4); }
  /* Text liegt jetzt breiter über dem hellen Bus: unterer Verlauf kräftiger (gleiche Graphit-Töne wie im Basis-Stil) */
  .indiv__karte::before {
    background:
      linear-gradient(to bottom, rgba(14, 15, 17, .62) 0%, rgba(14, 15, 17, .18) 38%, rgba(14, 15, 17, 0) 55%),
      linear-gradient(to top, rgba(14, 15, 17, .9) 0%, rgba(14, 15, 17, .72) 42%, rgba(14, 15, 17, 0) 72%);
  }

  /* §7 Video: Label nicht in den Play-Ring; Zitat eine Stufe kleiner */
  .werkstatt__video .video-facade__play .label { left: var(--s-4); bottom: var(--s-3); }
  .werkstatt__zitat blockquote { font-size: 1.375rem; }

  /* §9 Kontaktleiste: zwei Spalten zu schmal (Telefonnummer lief in „Mo–Do“), daher untereinander */
  .anfrage__kontakt-spalten { grid-template-columns: minmax(0, 1fr); }
  /* §9 kompakter, damit der Flow nach dem Sprung (Karten-CTA → #anfrage) schneller erreicht ist */
  .anfrage__bild { height: 60vw; }
  .anfrage__inhalt { padding-top: var(--s-7); }
  .flow__intro { padding-bottom: var(--s-6); }
  .flow__zeile { padding-top: var(--s-6); }
  /* Flow-Leiste: Tap-Flächen 44 px (Zurück war 22 px hoch, Schließen 40) */
  .flow__zurueck { min-height: 44px; }
  .flow__schliessen { width: 44px; height: 44px; }
  .flow .chip { min-height: 44px; }
  .flow [data-flow-ueberspringen] { display: inline-flex; align-items: center; min-height: 44px; }
  /* Schritt 3: Fotos 16:9 statt 4:3, sieben Kacheln sind sonst fünf Bildschirme lang */
  .kachel--foto > picture img, .kachel--foto .media, .kachel--foto .foto-folgt { aspect-ratio: 16 / 9; }
  /* Danke: Intro ausblenden, damit die Bestätigung nach dem Scrollen oben steht (Überschrift bleibt für aria-labelledby im DOM) */
  .flow.is-fertig .flow__intro { display: none; }
  .flow.is-fertig .flow__zeile { padding-top: 0; }
  .anfrage__tel, .direkt__tel { padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); }

  /* §11: Bühne flacher (125vw schnitt das Heck ab), Bildunterschrift umbrechen statt links abgeschnitten */
  .abschluss { --szene-h: 96vw; }
  .abschluss__szene .caption--ecke { left: var(--rand); white-space: normal; text-align: right; }

  /* Footer: Navigation schmal, Rechtliches daneben breiter („Cookie-Einstellungen“ lief über den Rand); Links 44 px hoch */
  .footer { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "marke marke" "nav recht" "kontakt kontakt" "ruf ruf" "unten unten" "hoch hoch"; column-gap: var(--s-6); }
  .footer__spalte li + li { margin-top: 0; }
  .footer__nav a, .footer__recht a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__karte { display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(-1 * var(--s-3)); }

  /* Sticky-CTA flacher (76 → 64 px): Header + Leiste nahmen bei 568 px Höhe fast ein Viertel weg */
  .sticky-cta { padding: var(--s-2) var(--rand) calc(var(--s-2) + env(safe-area-inset-bottom)); }
  .sticky-cta .btn { min-height: 48px; }

  /* Cookie-Banner: deckte bei 320×568 über 80 % des ersten Screens. Kompakter, Buttons nebeneinander (gleichwertig) */
  .consent { padding: var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom)); }
  .consent__zeile { gap: var(--s-3); }
  .consent__titel { margin-bottom: var(--s-1); font-size: 1rem; }
  .consent__text p { font-size: 13px; line-height: 1.45; }
  .consent__links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; }
  .consent__aktionen { grid-template-columns: 1fr 1fr; }
  .consent__btn { min-height: 44px; padding: 0 var(--s-3); font-size: 14px; }
  .consent__mehr { min-height: 44px; }

  /* 320–359 (iPhone SE 1): noch enger */
  @media (max-width: 359px) {
    .logo img { height: 24px; }
    .site-header .tel-link { width: 40px; height: 40px; }
    .site-header .btn { font-size: 13px; }
    /* Farbe unter die Nr., sonst ragt sie über den Rand */
    .fz-zeile__link { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "bild name" "bild nr" "bild farbe" "bild preis"; }
    .fz-zeile__nr { padding-right: 0; }
    /* Status in die Nr.-Zeile (rechts), sonst stößt er an den Preis */
    .fz-zeile__status { grid-area: nr; align-self: center; }
    .fact__wert { font-size: 1.125rem; }
    .footer { column-gap: var(--s-4); }
  }

}