/* Geräte-Anpassung (KASKADE 8.2): Große Smartphones (iPhone 12–16, Pro Max, Pixel, Galaxy)
   Bereich: (min-width: 390px) and (max-width: 767px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (min-width: 390px) and (max-width: 767px) {

  /* ---------- Header: Tap-Flächen 44 px (wie phone-s) ---------- */
  .logo { padding-block: 4px; }
  .site-header .tel-link { width: 44px; height: 44px; }
  .site-header .btn { min-height: 44px; }

  /* ---------- §1 Hero ----------
     Safari zeigt auf 390×844 nur ca. 660 px: Preis und CTA lagen darunter. Reihenfolge daher
     Headline → Preis → CTA → Beschreibung + Hinweis. Subgrid über alle Slides: jede Zeile so hoch wie
     im längsten Slide, Preis und CTA stehen beim Wechsel still (ohne Subgrid nur Reihenfolge). */
  .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; font-size: clamp(1.5rem, 0.75rem + 2.9vw, 1.875rem); }
  .hero__zitat-nachsatz { grid-row: 2; margin-top: var(--s-4); }
  .hero__meta { grid-row: 3; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
  .hero__cta { grid-row: 4; margin-top: var(--s-3); }
  .hero__sub { grid-row: 5; margin-top: var(--s-4); }
  /* Karussell-Punkte: 44 px Tap-Höhe, nach oben verlängert, Linie bleibt an ihrer Stelle */
  .hero__punkte { margin-top: calc(-1 * var(--s-4)); }
  .hero__punkt { height: 44px; }

  /* ---------- §1b Panel ---------- */
  /* rechte Fakt-Zelle ohne Innenabstand rechts: „ab 49.200 €“ und „7-Gang-DSG“ brechen bei 390 sonst um */
  .hero__facts > li:nth-child(2n) { padding-right: 0; }
  /* Buttons untereinander (bei 540–767 standen sie nebeneinander und brachen dreizeilig um) */
  .hero-band .btn-row .btn { flex-basis: 100%; }
  /* 390–429: Panel ist 16 px schmaler als der Hero, „Fahrzeug unverbindlich anfragen“ brach zweizeilig um */
  @media (max-width: 429px) {
    .hero-band .btn-row .btn { padding-inline: var(--s-4); gap: var(--s-3); }
  }
  /* 540–767: 104-px-Vorschaubilder wirkten in der breiten Liste verloren */
  @media (min-width: 540px) {
    .fz-zeile__link { grid-template-columns: 136px max-content minmax(0, 1fr); column-gap: var(--s-5); }
  }

  /* ---------- Rhythmus: zwei dunkle Sektionen hintereinander ----------
     Abstände addierten sich zu 150–180 px leerem Graphit (§1c → §2, §4 → §5) */
  .sofort { padding-bottom: var(--s-8); }
  .sofort + .section { padding-top: var(--s-6); }
  #ausstattung + .zwei-wege { padding-top: 0; }

  /* ---------- §5 Zwei Wege ---------- */
  .weg__wechsel { min-height: 44px; }

  /* ---------- §9 Anfrage: Kontaktleiste + Flow ---------- */
  /* Tap-Fläche nach oben/unten verlängert, ohne das Layout zu verschieben */
  .anfrage__tel, .direkt__tel, .anfrage__karte, .footer__karte, .flow [data-flow-ueberspringen] { position: relative; }
  .anfrage__tel::after, .direkt__tel::after, .anfrage__karte::after, .footer__karte::after, .flow [data-flow-ueberspringen]::after {
    content: ""; position: absolute; inset: -12px -4px;
  }
  .flow__zurueck { min-height: 44px; }
  .flow__schliessen { width: 44px; height: 44px; }
  .wuensche .chip { min-height: 44px; }
  /* „Weiter mit CWT 27“: Flex-Gap des Buttons riss „mit“ und die Nummer 16 px auseinander */
  [data-flow-auswahl-label] { margin-left: calc(.3em - var(--s-4)); }

  /* ---------- Footer: Links 44 px hoch statt 16-px-Abstand ---------- */
  .footer__spalte li + li { margin-top: 0; }
  .footer__nav a, .footer__recht a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

  /* ---------- Consent: Tap-Flächen 44 px ---------- */
  .consent__mehr { min-height: 44px; }
  .consent__links a { display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); }
  .consent-dialog__zu { width: 44px; height: 44px; }

}