/* Geräte-Anpassung (KASKADE 8.2): Große Monitore (1920+, 2560)
   Bereich: (min-width: 1920px)
   Nur Regeln innerhalb dieses Media-Queries. Wird nach flow.css geladen. */

@media (min-width: 1920px) {

  /* Außenkante des Inhalts: Rand des 12er-Rasters statt Fensterrand. Vollflächige Bühnen richten Titel, Karten
     und Bildunterschriften daran aus, sonst kleben sie bei 1920+ am Bildschirmrand, weit weg vom übrigen Inhalt. */
  :root { --xl-kante: max(var(--rand), calc((100% - var(--container)) / 2)); }

  /* §5 Zwei Wege (Scroll-Bühne): Überschrift und Seitenkarten auf die Rasterkante */
  .ist-scrolly .wege__titelzeile { left: var(--xl-kante); right: var(--xl-kante); }
  .ist-scrolly .weg--a .weg__karte { right: var(--xl-kante); }
  .ist-scrolly .weg--b .weg__karte { left: var(--xl-kante); }
  .ist-scrolly .wege__caption { left: var(--xl-kante); }

  /* §11 Abschluss: Bildunterschrift rechts an der Rasterkante statt am Fensterrand */
  .abschluss__szene .caption--ecke { right: var(--xl-kante); }

  /* §9 Anfrage: Kontaktleiste unter dem Foto nicht über die ganze (sehr breite) Bildspalte verteilen.
     Inhaltsspalte endet an der Rasterkante (wie Header-CTA und alle übrigen Sektionen) statt bei fest 920 px. */
  .anfrage__kontakt-spalten { max-width: 640px; }
  .anfrage__inhalt { max-width: none; padding-right: max(var(--s-8), calc((100vw - var(--container)) / 2)); }

  /* §10 FAQ: „Häufige Fragen“ füllt die 4er-Spalte bis zur Kante und stößt an die Fragenliste → Luft zur Liste */
  .faq__kopf { padding-right: var(--s-6); }

  /* §1 Hero auf Ultrawide (21:9, 32:9): Bei Vollbreite schneidet das 3:2-Foto Dach und Räder ab (Bildfläche ~3:1).
     Bildfläche daher höchstens 2,1 : 1, mittig, Seiten laufen weich in Graphit aus. Feste Fläche → feste Ausschnitte je Slide:
     sichtbar sind 71 % der Bildhöhe; Dach unter dem Header, Räder über der Headline. */
  @media (min-aspect-ratio: 9/4) {
    .hero__bild {
      width: min(100%, calc(2.1 * (min(100svh, 1400px) - clamp(96px, 13svh, 150px))));
      margin-inline: auto;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
      mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
    .hero__bild[data-slide="0"] .media img { object-position: 49% 73%; }
    .hero__bild[data-slide="1"] .media img { object-position: 52% 66%; }
    .hero__bild[data-slide="2"] .media img { object-position: 58% 56%; }

    /* §5 Bühne ebenso: Fotos höchstens 2,1 : 1 der Bildschirmhöhe, sonst Dach und Räder abgeschnitten und stark hochskaliert */
    .ist-scrolly .weg__bild {
      width: min(100%, calc(2.1 * 100svh)); margin-inline: auto;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
      mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
  }

  /* QHD und größer (2560 × 1440, 27"/34" mit ~110 ppi): Raster und Schrift moderat mitwachsen lassen,
     sonst steht der Inhalt als schmale 1360er-Spalte mit 600–1000 px Leerraum je Seite. */
  @media (min-width: 2400px) {
    :root {
      --container: 1520px;
      --section-pad: var(--s-11);
      --head-gap: var(--s-8);
      --fs-display: 6rem;
      --fs-h2: 4rem;
      --fs-h3: 2.125rem;
      --fs-lead: 1.5rem;
      --fs-body: 1.1875rem;
      --fs-small: 0.9375rem;
      --fs-label: 0.875rem;
      --fs-price: 2.5rem;
      --fs-stat: 6.5rem;
    }
    /* §6 Bildkarte: max-height 860 px würde sie bei 1520er Raster schmaler machen als die Spalten darunter */
    .indiv__karte { max-height: none; }
    .hero__titel { font-size: 3rem; }
    .hero__sub { font-size: 15px; }
    .hero__hinweis { font-size: 12px; }
  }
}