/* Drei Zustände, zwei Layouts:
   ≥ 1280 px  Desktop, fluid (Raster skaliert proportional, 1920 = Screen)
   1024–1279  Desktop, fluid, Navigation als Leiste + Menü (Hauptnavigation passt nicht mehr in eine Zeile)
   < 1024 px  Mobil-Layout (Smartphone und Tablet hochkant), Rand wächst mit der Breite
   Mobil (Breakpoint < 1024 px Containerbreite).
   Ein Quelltext pro Modul: Module lesen nur Tokens. Unter 1280 / 1024 px werden die Tokens umgeschaltet.
   Container "vp" = Viewport der Seite (body) oder ein Vorschau-Rahmen im Katalog. */
body { container: vp / inline-size; }

:root {
  /* Sichtbarkeit: display:var(--show-d) nur Desktop, display:var(--show-m) nur Mobil */
  --show-d: flex; --show-m: none; --show-d-block: block; --show-m-block: none;
  --show-nav-d: flex; --show-nav-m: none;
}

@container vp (max-width: 1279px) {
  * {
    --show-nav-d: none; --show-nav-m: block;
    --section-pad: 96px; --module-gap: 96px; --row-gap: 96px;
    --card-gap: 40px; --entry-gap: 48px; --text-media-gap: 48px;
  }
}

@container vp (max-width: 1023px) {
  * {
    --show-d: none; --show-m: flex; --show-d-block: none; --show-m-block: block;

    /* Raster: 4 Spalten, Rand 20 px (390) bis 64 px (1023), 16 px Gutter.
       Textblöcke max. 640 px (--measure), damit Zeilen auf Tablet nicht zu lang werden. */
    --measure: 640px;
    --grid-columns: 4;
    --grid-gutter: 16px;
    --grid-margin: clamp(20px, 6.25cqw, 64px);
    --grid-container: calc(100cqw - 2 * var(--grid-margin));
    --span-3: 100%; --span-4: 100%; --span-5: 100%; --span-6: 100%; --span-7: 100%;
    --span-8: 100%; --span-10: 100%; --span-12: 100%;

    /* Stapeln: mehrspaltige Zeilen werden einspaltig, Medium zuerst */
    --stack-cols: minmax(0, 1fr);
    --stack-col: 1 / -1;
    --stack-row: auto;
    --stack-pad: 0;
    --stack-media-order: -1;
    --m-lead-max: 100%;
    --stack-dir: column;
    --stack-align: stretch;
    --stack-text-align: left;
    --m-start: flex-start;
    --m-pad: var(--grid-margin);

    /* Modul-Werte mobil (Desktop-Wert steht als Fallback im Modul) */
    --m-hero-top: 40px;
    --m-cta-top: 32px;
    --m-cta-gap: 8px;
    --m-tl-js: center;
    --m-h1-gap: 20px; --m-h1-max: 100%;
    --m-wrap: normal;
    --m-btn-top: 32px;
    --m-stoerer-pad: 56px;
    --m-stoerer-gap: 24px;
    --m-faq-gap: 16px;
    --m-answer-pr: 0px;
    --m-img-ratio: 4 / 3;
    --m-tc-pad: 28px 0 0; --m-tc-bl: none; --m-tc-bt: 2px solid var(--rule);
    --m-sp-gap: 24px;
    --m-ab-cols: minmax(0, 1fr); --m-ab-pt: 8px; --m-h2-gap: 32px;
    --m-btn-flex: 1;
    --m-q-gap: 24px; --m-sticky: static; --m-qi-w: 88px;
    --m-av: 56px; --m-av-gap: 16px; --m-av-pt: 0; --m-av-g: 12px;
    --m-qs-pad: 20px;
    --m-gi-h: auto;
    --m-nl-pad: 40px 24px; --m-nl-img: 140px; --m-nl-js: start;
    --m-ft-outer: 0 12px 12px; --m-ft-pad: 40px calc(var(--grid-margin) - 12px); --m-ft-cols: repeat(2, minmax(0, 1fr));
    --m-ft-link-h: 44px; --m-ft-btn: 1 1 100%; --m-ft-legal: 24px;
    --m-sq-h: 0; --m-sq-pad: 88px; --m-qm-w: 220px;
    --m-si-h: 0; --m-si-img-pos: relative; --m-si-img-h: auto; --m-si-pos: relative; --m-si-w: auto; --m-si-left: 0; --m-si-bottom: auto;
    --m-si-box-m: -56px var(--grid-margin) var(--grid-margin);
    --duo-shift: 4; --duo-rcol: 1;
    --m-duo-eb: 24px; --m-duo-copy: 20px;
    --m-about-h: 0; --m-about-pb: 0; --m-about-w: 100%; --m-about-gap: 20px;
    --m-about-pos: static; --m-about-img-w: min(70%, 300px); --m-about-img-top: 32px; --m-about-img-align: flex-end;

    /* Abstände */
    --section-pad: 64px;
    --module-gap: 64px;
    --row-gap: 56px;
    --card-gap: 16px;
    --entry-gap: 40px;
    --list-rule-gap: 24px;
    --text-media-gap: 28px;
    --card-pad: 24px;
    --card-pad-teaser: 20px;

    --button-height: 52px;
    --button-height-l: 56px;
    --nav-sticky-height: 64px;

    /* Typo-Skala mobil: Verhältnis H1 : Body ≈ 2,6 : 1, Headlines eng, Body bleibt 17 px */
    --type-display-hero: 800 46px/48px var(--font-display);
    --type-h1: 800 40px/43px var(--font-display);
    --type-h1-quote: 800 34px/38px var(--font-display);
    --type-h1-sub: 800 32px/36px var(--font-display);
    --type-quote-xl: 800 34px/40px var(--font-display);
    --type-stoerer-xl: 800 34px/38px var(--font-display);
    --type-h2: 800 30px/35px var(--font-display);
    --type-text-xl: 600 25px/32px var(--font-display);
    --type-h3: 800 23px/28px var(--font-display);
    --type-section-title: 800 23px/28px var(--font-display);
    --type-tile-title: 800 23px/28px var(--font-display);
    --type-quote-statement: 400 20px/27px var(--font-display);
    --type-teaser-title: 800 20px/25px var(--font-display);
    --type-lead: 400 18px/27px var(--font-body);
    --type-eyebrow: 800 14px/20px var(--font-display);
    --type-eyebrow-hero: 800 14px/20px var(--font-display);
    --tracking-eyebrow-hero: 0.2em;
    --type-digit-xl: 800 56px/60px var(--font-display);
    --type-digit-l: 400 56px/60px var(--font-display);
    --type-button-l: 400 18px/24px var(--font-body);
    --type-nav: 800 30px/36px var(--font-display);
  }
}


/* Tablet hochkant (600–1023 px): Mobil-Layout, aber Buttons in Inhaltsbreite statt vollflächig */
@container vp (min-width: 600px) and (max-width: 1023px) {
  * { --stack-align: flex-start; --m-btn-flex: none; --m-ft-btn: none; }
}

/* Gegenrichtung: Elemente, deren nächster Container breiter ist, setzen die Desktop-Werte selbst.
   Verhindert, dass Mobil-Werte aus einem schmaleren äußeren Container (z. B. Katalogseite) nach innen vererbt werden.
   Generiert aus den Mobil-Blöcken oben: jeder dort gesetzte Token bekommt hier seinen Desktop-Wert (oder initial = Modul-Fallback). */
@container vp (min-width: 1280px) {
  * {
    --show-nav-d: flex;
    --show-nav-m: none;
    --section-pad: 120px;
    --module-gap: 120px;
    --row-gap: 120px;
    --card-gap: 60px;
    --entry-gap: 60px;
    --text-media-gap: 60px;
  }
}
@container vp (min-width: 1024px) {
  * {
    --show-d: flex;
    --show-m: none;
    --show-d-block: block;
    --show-m-block: none;
    --measure: initial;
    --grid-columns: 12;
    --grid-gutter: clamp(24px, 2.083cqw, 40px);
    --grid-margin: clamp(48px, 10.104cqw, 194px);
    --grid-container: calc(100cqw - 2 * var(--grid-margin));
    --span-3: calc(3 * var(--grid-col) + 2 * var(--grid-gutter));
    --span-4: calc(4 * var(--grid-col) + 3 * var(--grid-gutter));
    --span-5: calc(5 * var(--grid-col) + 4 * var(--grid-gutter));
    --span-6: calc(6 * var(--grid-col) + 5 * var(--grid-gutter));
    --span-7: calc(7 * var(--grid-col) + 6 * var(--grid-gutter));
    --span-8: calc(8 * var(--grid-col) + 7 * var(--grid-gutter));
    --span-10: calc(10 * var(--grid-col) + 9 * var(--grid-gutter));
    --span-12: var(--grid-container);
    --stack-cols: initial;
    --stack-col: initial;
    --stack-row: initial;
    --stack-pad: initial;
    --stack-media-order: initial;
    --stack-dir: initial;
    --stack-align: initial;
    --stack-text-align: initial;
    --m-start: initial;
    --m-pad: initial;
    --m-hero-top: initial;
    --m-cta-top: initial;
    --m-cta-gap: initial;
    --m-tl-js: initial;
    --m-h1-gap: initial; --m-h1-max: initial;
    --m-wrap: initial;
    --m-btn-top: initial;
    --m-stoerer-pad: initial;
    --m-stoerer-gap: initial;
    --m-faq-gap: initial;
    --m-answer-pr: initial;
    --m-img-ratio: initial;
    --m-tc-pad: initial;
    --m-tc-bl: initial;
    --m-tc-bt: initial;
    --m-sp-gap: initial;
    --m-ab-cols: initial;
    --m-ab-pt: initial;
    --m-h2-gap: initial;
    --m-btn-flex: initial;
    --m-q-gap: initial;
    --m-sticky: initial;
    --m-qi-w: initial;
    --m-av: initial;
    --m-av-gap: initial;
    --m-av-pt: initial;
    --m-av-g: initial;
    --m-qs-pad: initial;
    --m-gi-h: initial;
    --m-nl-pad: initial;
    --m-nl-img: initial;
    --m-nl-js: initial;
    --m-ft-outer: initial;
    --m-ft-pad: initial;
    --m-ft-cols: initial;
    --m-ft-link-h: initial;
    --m-ft-btn: initial;
    --m-ft-legal: initial;
    --m-sq-h: initial;
    --m-sq-pad: initial;
    --m-qm-w: initial;
    --m-si-h: initial;
    --m-si-img-pos: initial;
    --m-si-img-h: initial;
    --m-si-pos: initial;
    --m-si-w: initial;
    --m-si-left: initial;
    --m-si-bottom: initial;
    --m-si-box-m: initial;
    --duo-shift: initial;
    --duo-rcol: initial;
    --m-duo-eb: initial;
    --m-duo-copy: initial;
    --m-about-h: initial;
    --m-about-pb: initial;
    --m-about-w: initial;
    --m-about-gap: initial;
    --m-about-pos: initial;
    --m-about-img-w: initial;
    --m-about-img-top: initial;
    --m-about-img-align: initial;
    --section-pad: 120px;
    --module-gap: 120px;
    --row-gap: 120px;
    --card-gap: 60px;
    --entry-gap: 60px;
    --list-rule-gap: 40px;
    --text-media-gap: 60px;
    --card-pad: 40px;
    --card-pad-teaser: 30px;
    --button-height: 50px;
    --button-height-l: 54px;
    --nav-sticky-height: 80px;
    --type-display-hero: 800 clamp(56px, 6.250cqw, 120px)/1.050 var(--font-display);
    --type-h1: 800 clamp(48px, 5.208cqw, 100px)/0.950 var(--font-display);
    --type-h1-quote: 800 clamp(36px, 3.646cqw, 70px)/1.071 var(--font-display);
    --type-h1-sub: 800 clamp(34px, 2.604cqw, 50px)/1.100 var(--font-display);
    --type-quote-xl: 800 clamp(36px, 3.906cqw, 75px)/1.200 var(--font-display);
    --type-stoerer-xl: 800 clamp(36px, 3.385cqw, 65px)/1.123 var(--font-display);
    --type-h2: 800 clamp(32px, 2.344cqw, 45px)/1.178 var(--font-display);
    --type-text-xl: 600 clamp(27px, 2.344cqw, 45px)/1.200 var(--font-display);
    --type-h3: 800 clamp(24px, 1.823cqw, 35px)/1.229 var(--font-display);
    --type-section-title: 800 30px/38px var(--font-display);
    --type-tile-title: 800 30px/35px var(--font-display);
    --type-quote-statement: 400 25px/32px var(--font-display);
    --type-teaser-title: 800 22px/26px var(--font-display);
    --type-lead: 400 20px/28px var(--font-body);
    --type-eyebrow: 800 16px/24px var(--font-display);
    --type-eyebrow-hero: 800 20px/24px var(--font-display);
    --tracking-eyebrow-hero: 0.3em;
    --type-digit-xl: 800 clamp(56px, 4.688cqw, 90px)/1.111 var(--font-display);
    --type-digit-l: 400 clamp(56px, 4.427cqw, 85px)/1.176 var(--font-display);
    --type-button-l: 400 20px/26px var(--font-body);
    --type-nav: 800 19px/24px var(--font-display);
  }
}