/* ============ CASE STUDY — Vorlage aller Cases (Inhalte src/data/cases/<marke>.json, Seite src/pages/work/[brand].astro) ============
   Figma /work/donna-carolina: Desktop 1020:3 (1440), Mobil DC-M1 1569:53, Widget zu/offen DC-M2 1571:35 / DC-M3 1571:215, Desktop-Widget W-3 (Sektion 1020:2).
   Desktop ab 1101 px in Design-Pixeln var(--u) (Figma 1440 = 1 px), Tablet 761–1100 px einfaches Fallback (nicht designt), Mobil bis 760 px nach DC-M1 (px).
   Schriften als Rollen aus typo.css; drei Größen gibt es dort nicht und sind hier als Variablen festgehalten (Lead/Kapiteltitel, Results-Zahl, Kapitel-Zahl). */
.cs-seite{
  --cs-lead:calc(28 * var(--u)); --cs-lead-lh:calc(31 * var(--u));     /* Lead About/Challenge/Approach: Archivo Medium 28/31, −2 % */
  --cs-ktitel:calc(28 * var(--u)); --cs-ktitel-lh:calc(31 * var(--u)); /* Kapiteltitel (H2), wie der Lead */
  --cs-zahl:calc(56 * var(--u)); --cs-zahl-lh:calc(64 * var(--u));     /* Results-Kennzahl im Überblick: 56/64, Laufweite 0 */
  --cs-kwert:var(--fs-titel-m); --cs-kwert-lh:var(--lh-titel-m);       /* Kennzahl im Kapitel: 32/35 */
  --cs-linie-hell:rgba(26,26,26,.18); --cs-linie-dunkel:rgba(247,244,240,.18);
  --cs-text:rgba(26,26,26,.78);                                         /* Fließtext auf Creme (Ink 78 %) */
}

/* ---------- Seitenkopf: Standard der Unterseiten (sub.css), „Case study“ in der Kerbe, H1 zweifarbig ---------- */
.cs-kopf{padding-left:var(--rand);padding-right:var(--rand)}

/* ---------- Eckdaten: drei Spalten ab x 200 / 600 / 1000, 61 unter der H1; Label grau, Wert Archivo 18/22 6 darunter ---------- */
/* Spalten dürfen unter 1440 schrumpfen, sonst läuft die dritte Eckdaten-Spalte bei 1101 bis 1439 px über den Rand */
.cs-fakten{display:grid;grid-template-columns:repeat(3,minmax(0,calc(400 * var(--u))));margin:calc(61 * var(--u)) 0 0;padding:0 var(--rand) 0 calc(200 * var(--u))}
.cs-fakt dt{color:var(--gedaempft)}
.cs-fakt dd{margin:calc(6 * var(--u)) 0 0;font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
.cs-extern{display:inline-block}
.cs-extern + .cs-extern{margin-left:calc(15 * var(--u))}
/* ↗ wie im Design: 10 × 11, oben an der Versalhöhe (Archivo hat das Zeichen nicht → SVG statt Ersatzschrift) */
.cs-pfeil-extern{display:inline-block;width:calc(10 * var(--u));height:calc(11 * var(--u));margin-left:calc(8 * var(--u));vertical-align:calc(4 * var(--u));overflow:visible;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cs-extern:hover .cs-pfeil-extern{transform:translate(2px,-2px)}

/* ---------- Hero: volle Inhaltsbreite (1380 × 758), 61 unter den Eckdaten ---------- */
.cs-hero{margin:calc(61 * var(--u)) var(--rand) 0;aspect-ratio:1380/758;border-radius:var(--radius);overflow:hidden}

/* ---------- About / Challenge / Approach: eine Spalte ab x 200, 760 breit; Label → Lead 15 → Absatz 22; Blöcke 97 auseinander ---------- */
.cs-intro{padding:calc(121 * var(--u)) var(--rand) 0 calc(200 * var(--u))}
.cs-intro-block{max-width:calc(760 * var(--u))}
.cs-intro-block + .cs-intro-block{margin-top:calc(97 * var(--u))}
.cs-lead{margin-top:calc(15 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--cs-lead);line-height:var(--cs-lead-lh);letter-spacing:-.02em}
.cs-absatz{margin-top:calc(22 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-m);line-height:var(--lh-text-m);letter-spacing:var(--ls-text-m);color:var(--cs-text)}
.cs-absatz + .cs-absatz{margin-top:calc(18 * var(--u))}

/* ---------- Results: drei Spalten à 240 (Abstand 20), Zahl 56/64, Definition 9 darunter, Stand grau 24 darunter ---------- */
.cs-results{padding:calc(97 * var(--u)) var(--rand) 0 calc(200 * var(--u))}
.cs-zahlen{display:grid;grid-template-columns:repeat(3,calc(240 * var(--u)));column-gap:calc(20 * var(--u));margin-top:calc(12 * var(--u))}
/* vier Einträge (ROHDE RO-C: drei KPIs + Auszeichnung): 2 × 2, Reihen 32 auseinander; mobil ohnehin zwei Spalten */
@media (min-width:761px){.cs-zahlen:has(> :nth-child(4)){grid-template-columns:repeat(2,calc(240 * var(--u)));row-gap:calc(32 * var(--u))}}
.cs-zahl-wert{font-family:var(--font-h);font-weight:500;font-size:var(--cs-zahl);line-height:var(--cs-zahl-lh);letter-spacing:0}
.cs-zahl-text{margin-top:calc(9 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text);line-height:var(--lh-text);letter-spacing:var(--ls-text);color:var(--cs-text)}
.cs-stand{margin-top:calc(24 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs);color:var(--gedaempft)}

/* ---------- Shootings: drei Kacheln ab x 200 (390 × 260, Abstand 20) → Imagery-Unterseiten; Saison grau 21 darunter, Titel 24/28;
   mehr als drei laufen in Reihen weiter, 56 auseinander (ROHDE RO-C: 9 Kacheln, 3 × 3) ---------- */
.cs-shootings{padding:calc(151 * var(--u)) var(--rand) 0 calc(200 * var(--u))}
.cs-sh-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(20 * var(--u));row-gap:calc(56 * var(--u));margin-top:calc(24 * var(--u))}
.cs-sh-karte{display:block}
.cs-sh-bild{aspect-ratio:390/260;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.cs-sh-bild img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cs-sh-karte:hover .cs-sh-bild img{transform:scale(1.04)}
.cs-sh-meta{margin-top:calc(21 * var(--u));color:var(--gedaempft)}
.cs-sh-titel{margin-top:calc(10 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-s);line-height:var(--lh-titel-s);letter-spacing:var(--ls-titel-s)}
.cs-sh-titel .arrow{display:inline-block;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cs-sh-karte:hover .cs-sh-titel .arrow{transform:translateX(4px)}
.cs-sh-karte:focus-visible{outline:none}
.cs-sh-karte:focus-visible .cs-sh-bild{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(3 * var(--u))}

/* ---------- Projects: Tabelle ab x 200, Haarlinie 18 % über jeder Zeile, Zeile 72; Nummer (grau) | Titel ab x 260 | Zeitraum unter der
   dritten Shooting-Kachel | ↓ rechtsbündig. Spalten wie das Kachelraster, damit der Zeitraum mit der dritten Kachel fluchtet ---------- */
.cs-projekte{padding:calc(121 * var(--u)) var(--rand) 0 calc(200 * var(--u))}
@media (min-width:1101px){.cs-results + .cs-projekte{padding-top:calc(151 * var(--u))}} /* ohne Shootings 151 unter den Results (VS-C, CPH-C, FA-C, WB-C) */
.cs-p-liste{list-style:none;margin-top:calc(24 * var(--u));border-bottom:1px solid var(--cs-linie-hell)}
.cs-p-zeile{display:grid;grid-template-columns:calc(60 * var(--u)) minmax(0,1fr) calc((100% - 40 * var(--u)) / 3);align-items:start;min-height:calc(72 * var(--u));padding-bottom:calc(20 * var(--u));border-top:1px solid var(--cs-linie-hell)}
.cs-p-nr{margin-top:calc(27 * var(--u));font-family:var(--font-b);font-weight:500;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:0;color:var(--gedaempft)}
.cs-p-titel{margin-top:calc(21 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-s);line-height:var(--lh-titel-s);letter-spacing:var(--ls-titel-s)}
.cs-p-ende{display:flex;justify-content:space-between;align-items:flex-start}
.cs-p-zeit{margin-top:calc(27 * var(--u));font-family:var(--font-b);font-weight:500;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:0}
.cs-p-pfeil{margin-top:calc(19 * var(--u));font-family:var(--font-b);font-weight:400;font-size:calc(25 * var(--u));line-height:calc(32 * var(--u));transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cs-p-zeile:hover .cs-p-pfeil{transform:translateY(calc(3 * var(--u)))}
.cs-p-zeile:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(-2 * var(--u))}

/* ---------- Dunkler Teil: ab dem randlosen Übergangsbild (1440 × 810) bis 150 unter dem letzten Kapitel; alle Schrift Creme 100 %, Linien 18 % ---------- */
.cs-dunkel{margin-top:calc(150 * var(--u));background:var(--dunkel);color:var(--creme)}
.cs-uebergang{aspect-ratio:1440/810;overflow:hidden}
.cs-uebergang video{display:block;width:100%;height:100%;object-fit:cover} /* Übergang als Loop-Video (BENLEE): Maß und Ausschnitt wie das Bild */

/* Kapitel: Linie (Anker-Ziel) → 63 → Nummer (32/35, Kerbe) | Zeitraum (20/24) +3 → Titel (28/31) → Absätze (18/25) → RESULT → Bilder 60 darunter;
   150 bis zur nächsten Linie. Erstes Kapitel ohne Linie, 153 unter dem Übergangsbild. Anker landet mit der Linie an der Nav-Unterkante */
.cs-kapitel{padding:calc(62 * var(--u)) var(--rand) calc(150 * var(--u));border-top:1px solid var(--cs-linie-dunkel);scroll-margin-top:calc(90 * var(--u))}
.cs-kapitel:first-of-type{margin-top:calc(90 * var(--u));border-top-color:transparent}
.cs-kapitel .label{color:var(--creme)}
.cs-k-raster{display:grid;grid-template-columns:calc(170 * var(--u)) minmax(0,calc(760 * var(--u)));align-items:start}
.cs-k-nr{font-family:var(--font-h);font-weight:500;font-size:var(--fs-titel-m);line-height:var(--lh-titel-m);letter-spacing:var(--ls-titel-m)}
.cs-k-zeit{margin-top:calc(3 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-link);line-height:var(--lh-link);letter-spacing:var(--ls-link)}
.cs-k-titel{margin-top:calc(21 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--cs-ktitel);line-height:var(--cs-ktitel-lh);letter-spacing:-.02em}
.cs-k-titel .grau{color:inherit} /* zweiter Teil auf Dunkel nicht grau (Artur 12.10.: Schrift auf Dunkel 100 %) */
.cs-k-absatz{margin-top:calc(18 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-m);line-height:var(--lh-text-m);letter-spacing:var(--ls-text-m)}
.cs-k-titel + .cs-k-absatz{margin-top:calc(30 * var(--u))}
.cs-k-ergebnis{margin-top:calc(41 * var(--u))}
.cs-k-zahlen{display:grid;grid-template-columns:repeat(3,calc(240 * var(--u)));column-gap:calc(20 * var(--u));margin-top:calc(15 * var(--u))}
.cs-k-wert{font-family:var(--font-h);font-weight:500;font-size:var(--cs-kwert);line-height:var(--cs-kwert-lh);letter-spacing:-.02em}
.cs-k-def{margin-top:calc(4 * var(--u));font-family:var(--font-b);font-weight:400;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs)}
/* drei Kennzahlen im Kapitel (ROHDE Atelier): auf dem Tablet schmaler statt über den Rand (761–1100 px, sonst seitliches Scrollen) */
@media (min-width:761px) and (max-width:1100px){.cs-kapitel:not(.cs-kapitel--mockups) .cs-k-zahlen:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,240px))}}
.cs-k-medien{margin-top:calc(60 * var(--u))}
.cs-k-medien > * + *{margin-top:calc(60 * var(--u))}

/* Mit Handy-Mockups: Text 440 breit, Mockups ab x 820 in zwei Spalten à 265 (Abstand 60), rechte Spalte 260 tiefer, untereinander 40;
   Mockups beginnen 3 über der Nummer. Absätze wie in den übrigen Kapiteln (Oh April OA-C; Donna Carolina hat dort größere Abstände) */
.cs-kapitel--mockups .cs-k-raster{grid-template-columns:calc(170 * var(--u)) calc(440 * var(--u)) calc(180 * var(--u)) calc(590 * var(--u))}
.cs-kapitel--mockups .cs-k-titel{margin-top:calc(21 * var(--u))}
/* Zeitraum → Titel 21 wie in Figma (OA, RO, VS, CPH, FA, WB, CS); nur Donna Carolina (DC-C, Vorlage) hat ohne Mockups 19 */
@media (min-width:761px){.cs-seite--donna-carolina .cs-kapitel:not(.cs-kapitel--mockups) .cs-k-titel{margin-top:calc(19 * var(--u))}}
.cs-kapitel--mockups .cs-k-ergebnis{margin-top:calc(57 * var(--u))}
.cs-kapitel--mockups .cs-k-zahlen{grid-template-columns:repeat(2,calc(200 * var(--u)));row-gap:calc(24 * var(--u))}
.cs-kapitel--mockups .cs-k-def{margin-top:calc(6 * var(--u))}
.cs-mockups{grid-column:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(60 * var(--u));margin-top:calc(-3 * var(--u))}
.cs-m-spalte{display:flex;flex-direction:column;gap:calc(40 * var(--u))}
.cs-m-spalte + .cs-m-spalte{padding-top:calc(260 * var(--u))}
.cs-mockup{aspect-ratio:265/572;border-radius:var(--radius);overflow:hidden}
/* Mockup mit Loop-Video (BENLEE): Video im Bildschirm des Rahmens 527 × 1137 (x 18–507 ab y 112; ad bis y 981 über der Ad-Leiste, screen bis y 1118,
   oben bündig wie tools/figma-case-builder/iphone-mockup.py), darüber der Rahmen mit durchsichtigem Bildschirm (/work/iphone-ad.png, iphone-screen.png) */
.cs-mockup--video{position:relative}
.cs-mockup--video video{position:absolute;left:3.4156%;top:9.8505%;display:block;width:92.9791%;height:76.5172%;object-fit:cover}
.cs-mockup--screen video{height:88.5664%;object-position:50% 0;border-radius:0 0 9.7959% 9.7959% / 0 0 4.7666% 4.7666%} /* untere Bildschirmecken r 48, sonst blitzt das Video außen am Gehäuse vorbei */
.cs-m-rahmen{position:absolute;inset:0;object-fit:fill;pointer-events:none}
/* Telefon-Kapitel ab 1101 px (Artur 14.10., Variante A): Unter 1440 schrumpft erst der Abstand zum Text (bis 60), damit nichts über den Rand läuft;
   darüber wächst die Telefon-Spalte bis zum rechten Rand und die Telefone wachsen mit, höchstens 80 % der Fensterhöhe, dann mittig in der Spalte. Bei 1440 × 900 unverändert. */
@media (min-width:1101px){
  .cs-kapitel--mockups .cs-k-raster{grid-template-columns:calc(170 * var(--u)) calc(440 * var(--u)) clamp(calc(60 * var(--u)),calc(100% - 1200 * var(--u)),calc(180 * var(--u))) minmax(0,1fr)}
  .cs-mockups{width:100%;max-width:max(calc(590 * var(--u)),calc(80vh * 530 / 572 + 60 * var(--u)));justify-self:center}
  .cs-m-spalte + .cs-m-spalte{padding-top:98.1132%}
  /* Text bleibt stehen, nur die Telefone scrollen (Artur 14.10., wie Basic): Nummer und Text kleben 150 unter der Fensteroberkante,
     bis die Telefon-Spalte endet; ist der Text höher als das Fenster, scrollt er normal mit (Klasse per case-study.js) */
  .cs-kapitel--mockups:not(.cs-text-lang) .cs-k-nr,.cs-kapitel--mockups:not(.cs-text-lang) .cs-k-text{position:sticky;top:calc(150 * var(--u))}
}

/* ---------- Karussell (wie /services/pop-up-space): läuft bis an den Bildschirmrand, Folien ab x 30, Abstand 20; Folienmaß aus den Daten
   (z. B. 540 × 810, 1240 × 827, 330 × 495); Zähler 21 darunter. Maus zieht mit Nachlauf (/ziehkarussell.js), Touch wischt nativ mit Einrasten ---------- */
/* overflow-x: clip hält den ruhenden Drag-Kreis im Bild (bei 1101 px lag er halb über dem Rand und erzeugte seitliches Scrollen) */
.cs-k-buehne{position:relative;margin:0 calc(-1 * var(--rand));overflow-x:clip}
.cs-k-spur{display:flex;gap:calc(20 * var(--u));padding-left:var(--rand);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-left:var(--rand)}
.cs-k-spur::-webkit-scrollbar{display:none}
.cs-k-spur::after{content:"";flex:0 0 calc(var(--rand) - 20 * var(--u))}
.cs-k-spur:focus-visible{outline:calc(2 * var(--u)) solid var(--creme);outline-offset:calc(4 * var(--u))}
.cs-k-folie{flex:0 0 auto;width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));margin:0;scroll-snap-align:start} /* Maße je Folie aus den Daten (--w/--h Desktop, --mw/--mh mobil) */
.cs-k-bild{width:100%;height:100%;border-radius:var(--radius);overflow:hidden;background:var(--tile)}
.cs-k-bild img{-webkit-user-drag:none;user-select:none}
.cs-k-zaehler{margin-top:calc(21 * var(--u))}
@media (pointer:coarse){.cs-k-spur{scroll-snap-type:x mandatory}}
.cs-k-buehne.zieht{user-select:none}
/* „Drag“-Kreis 96 (Creme, Ink-Schrift) nur ab 761 px mit Maus: ruht 88 vor der rechten unteren Ecke der ersten Folie, folgt der Maus;
   beim Ziehen 64 mit Pfeilen (wie Pop-up-Space) */
@media (min-width:761px){.cs-k-buehne.mit-cursor,.cs-k-buehne.mit-cursor *{cursor:none}}
.cs-k-cursor{position:absolute;left:0;top:0;z-index:2;display:none;pointer-events:none;will-change:transform}
@media (min-width:761px){.cs-k-buehne.mit-cursor .cs-k-cursor{display:block}}
.cs-k-kreis{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:calc(96 * var(--u));height:calc(96 * var(--u));border-radius:50%;background:var(--creme);transform:translate(-50%,-50%);transition:width .25s cubic-bezier(.28,0,.49,1),height .25s cubic-bezier(.28,0,.49,1)}
.cs-kapitel .cs-k-wort{color:var(--ink);transition:opacity .15s cubic-bezier(.28,0,.49,1)}
.cs-k-pfeile{position:absolute;top:50%;left:calc(14 * var(--u));right:calc(14 * var(--u));display:flex;justify-content:space-between;height:calc(12 * var(--u));margin-top:calc(-6 * var(--u));opacity:0;transform:scale(.6);transition:opacity .2s cubic-bezier(.28,0,.49,1),transform .2s cubic-bezier(.28,0,.49,1)}
.cs-k-pfeile svg{width:calc(6 * var(--u));height:calc(12 * var(--u));fill:var(--ink)}
.cs-k-buehne.zieht .cs-k-kreis{width:calc(64 * var(--u));height:calc(64 * var(--u))}
.cs-k-buehne.zieht .cs-k-wort{opacity:0}
.cs-k-buehne.zieht .cs-k-pfeile{opacity:1;transform:none}
/* Höchstens drei Hochformate (Klasse aus CaseMedium): ab 761 px eine feste Reihe über die volle Breite, gleiche Ränder links und rechts,
   ohne Ziehen, Kreis und Zähler (Artur 14.10., Cold Skin #product-photography); mobil bleibt es ein Karussell */
@media (min-width:761px){
  .cs-karussell--reihe .cs-k-buehne{margin:0;overflow:visible}
  .cs-karussell--reihe .cs-k-spur{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));padding-left:0;overflow:visible}
  .cs-karussell--reihe .cs-k-spur::after{content:none}
  .cs-karussell--reihe .cs-k-folie{width:auto;height:auto;aspect-ratio:var(--w)/var(--h)}
  .cs-karussell--reihe .cs-k-cursor,.cs-karussell--reihe .cs-k-zaehler{display:none}
  .cs-karussell--reihe .cs-k-buehne.mit-cursor,.cs-karussell--reihe .cs-k-buehne.mit-cursor *{cursor:auto}
}

/* ---------- Weitere Bild-Komponenten ---------- */
/* Querformate untereinander in voller Breite (z. B. Verpackung 1380 × 730), Abstand 20 */
.cs-bilder{display:grid;row-gap:calc(20 * var(--u))}
.cs-bild{border-radius:var(--radius);overflow:hidden}
/* bis zu drei Hochformate in einer Reihe */
.cs-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:calc(20 * var(--u));align-items:start}
/* Film: Standbild 16:9, „Play film“ unten links, Klick lädt YouTube ohne Cookies (case-study.js) */
.cs-film{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--radius);overflow:hidden;background:var(--tile);cursor:pointer}
.cs-film img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cs-film:hover img{transform:scale(1.015)}
.cs-film::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,rgba(26,26,26,.32),rgba(26,26,26,0));pointer-events:none}
.cs-film-tag{position:absolute;z-index:1;left:calc(20 * var(--u));bottom:calc(18 * var(--u))}
.cs-kapitel .cs-film-tag{color:#fff}
.cs-film:focus-visible{outline:calc(2 * var(--u)) solid var(--creme);outline-offset:calc(3 * var(--u))}
.cs-film-video{display:block;width:100%;height:100%;border:0}
/* Film mit Karussell direkt darunter: 20 Abstand statt 60 (ROHDE RO-C #one-life, #stay-real) */
.cs-k-medien > .cs-film + .cs-karussell{margin-top:calc(20 * var(--u))}
/* Zitat (EB Garamond 40/52) in der Textspalte (760, RO-C/VS-C), Name/Rolle als Label darunter (auf Dunkel Creme 60 %) */
.cs-zitat{margin:0 0 0 calc(170 * var(--u));max-width:calc(760 * var(--u))}
.cs-zitat blockquote{font-family:var(--font-z);font-weight:400;font-size:var(--fs-zitat);line-height:var(--lh-zitat);letter-spacing:var(--ls-zitat)}
.cs-zitat figcaption{margin-top:calc(24 * var(--u))}
.cs-kapitel .cs-zitat figcaption{color:rgba(247,244,240,.6)}

/* ---------- More work (wieder hell = Ende): Label 151 unter dem dunklen Teil, zwei Kacheln 675 × 427, Marke + Typ 25 darunter, Titel 20/24 (max. 450) ---------- */
.cs-mehr{padding:calc(151 * var(--u)) var(--rand) calc(146 * var(--u))}
.cs-mw-raster{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--rand);margin-top:calc(40 * var(--u))}
.cs-mw-karte{display:block}
.cs-mw-bild{aspect-ratio:675/427;border-radius:var(--radius);overflow:hidden;isolation:isolate}
.cs-mw-bild img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cs-mw-karte:hover .cs-mw-bild img{transform:scale(1.04)}
.cs-mw-meta{display:flex;justify-content:space-between;gap:calc(20 * var(--u));margin-top:calc(25 * var(--u));font-family:var(--font-b);font-weight:600;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);text-transform:uppercase}
.cs-mw-typ{margin-right:calc(7 * var(--u));color:var(--gedaempft)}
.cs-mw-titel{max-width:calc(450 * var(--u));margin-top:calc(14 * var(--u));font-family:var(--font-h);font-weight:500;font-size:var(--fs-kachel);line-height:var(--lh-kachel);letter-spacing:var(--ls-kachel)}
.cs-mw-karte:focus-visible{outline:none}
.cs-mw-karte:focus-visible .cs-mw-bild{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(3 * var(--u))}

/* ---------- Navigation über den dunklen Kapiteln: Leiste dunkel 92 %, Schrift Creme; blendet in 0,45 s um wie auf der BI-Seite (case-study.js: .cs-nacht) ---------- */
body.cs-seite .sub-nav{transition:padding .3s ease,transform .35s ease,background-color .45s ease}
body.cs-seite .sub-nav .wortmarke,body.cs-seite .sub-nav .nav-links > a,body.cs-seite .sub-nav .nav-dd-ausloeser,body.cs-seite .sub-nav .lang,body.cs-seite .sub-nav .menu-auf{transition:color .45s ease}
body.cs-seite.cs-nacht .sub-nav{background:rgba(26,26,24,.92)}
body.cs-seite.cs-nacht .sub-nav .wortmarke,
body.cs-seite.cs-nacht .sub-nav .nav-links > a,
body.cs-seite.cs-nacht .sub-nav .nav-dd-ausloeser,
body.cs-seite.cs-nacht .nav-links .nav-dd.offen > .nav-dd-ausloeser,
body.cs-seite.cs-nacht .sub-nav .lang,
body.cs-seite.cs-nacht .sub-nav .menu-auf{color:var(--creme)}

/* ---------- Kapitel-Widget W-3, Desktop ab 1101 px ---------- */
/* Karte 300 × 80 unten rechts (30 Rand): Creme, „Marke · 01 / 06“ (Ink 60 %), Kapitelname 18/22, „+“ — Explore-Widget der Imagery-Seiten, invertiert.
   Sichtbar nur über den dunklen Kapiteln und solange die Leiste zu ist */
.cs-w{position:fixed;right:var(--rand);bottom:var(--rand);z-index:55;width:calc(300 * var(--u));height:calc(80 * var(--u));padding:calc(18 * var(--u)) calc(20 * var(--u)) 0;border:0;border-radius:var(--radius);background:var(--creme);color:var(--ink);text-align:left;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
.cs-w.sichtbar{opacity:1;visibility:visible;transition:opacity .2s ease}
.cs-w-label{display:block;color:rgba(26,26,26,.6)}
.cs-w-titel{display:block;max-width:calc(230 * var(--u));margin-top:calc(7 * var(--u));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--font-h);font-weight:500;font-size:var(--fs-klein-h);line-height:var(--lh-klein-h);letter-spacing:var(--ls-klein-h)}
.cs-w-plus{position:absolute;left:calc(260 * var(--u));top:calc(16 * var(--u));font:500 calc(22 * var(--u))/calc(22 * var(--u)) var(--font-h)}
.cs-w:focus-visible{outline:calc(2 * var(--u)) solid var(--creme);outline-offset:calc(2 * var(--u))}

/* Kapitelleiste: volle Breite unten, Creme 92 % + Unschärfe 24; Kopfzeile (Marke · Case study | Case overview ↑), Thumbnails 210 × 132 im Abstand 24,
   Nummer 14 darunter, Name 16/22 6 darunter; aktuelles Kapitel Ink 100 %, die anderen 60 %. Höhe 290 */
.cs-leiste{position:fixed;left:0;right:0;bottom:0;z-index:56;padding:calc(31 * var(--u)) 0;background:rgba(247,244,240,.92);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(calc(24 * var(--u)));transition:opacity .2s ease,visibility 0s linear .2s,transform 0s linear .2s}
.cs-leiste.offen{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease-out,transform .2s ease-out}
.cs-pfeil-hoch{font-family:var(--font-b)}
/* Kopfzeile entfernt (14.10.): Thumbnails sitzen mit gleichem Abstand oben und unten */
.cs-l-buehne{position:relative}
.cs-l-spur{display:flex;gap:calc(24 * var(--u));padding:0 var(--rand);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding:0 var(--rand)}
.cs-l-spur::-webkit-scrollbar{display:none}
.cs-l-spur::after{content:"";flex:0 0 calc(var(--rand) - 24 * var(--u))}
.cs-l-eintrag{flex:0 0 calc(210 * var(--u));display:block;color:var(--ink)}
.cs-l-bild{display:block;aspect-ratio:210/132;border-radius:var(--radius);overflow:hidden}
.cs-l-bild img{transition:transform .3s ease}
.cs-leiste.zoom .cs-l-eintrag:hover .cs-l-bild img{transform:scale(1.04)}
.cs-l-nr{display:block;margin-top:calc(14 * var(--u));line-height:calc(15 * var(--u))}
.cs-l-titel{display:block;margin-top:calc(6 * var(--u));font-family:var(--font-h);font-weight:500;font-size:calc(16 * var(--u));line-height:calc(22 * var(--u));letter-spacing:-.01em}
.cs-l-eintrag:not(.aktiv) .cs-l-nr,.cs-l-eintrag:not(.aktiv) .cs-l-titel{opacity:.6}
.cs-l-eintrag:focus-visible{outline:none}
.cs-l-eintrag:focus-visible .cs-l-bild{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(2 * var(--u))}
/* ab 7 Kapiteln: seitlich blättern — Pfeile (Ink-Kreis 44) nur in Richtung mit weiterem Inhalt, dort weiche Kante */
.cs-l-pfeil{position:absolute;top:calc(44 * var(--u));z-index:1;display:flex;align-items:center;justify-content:center;width:calc(44 * var(--u));height:calc(44 * var(--u));padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--creme);cursor:pointer}
.cs-l-pfeil[hidden]{display:none}
.cs-l-pfeil svg{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.cs-l-zurueck{left:var(--rand)}
.cs-l-vor{right:var(--rand)}
.cs-l-pfeil:focus-visible{outline:calc(2 * var(--u)) solid var(--ink);outline-offset:calc(2 * var(--u))}
.cs-leiste--blaettern .cs-l-spur{--kante-l:0px;--kante-r:0px;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--kante-l),#000 calc(100% - var(--kante-r)),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 var(--kante-l),#000 calc(100% - var(--kante-r)),transparent 100%)}
.cs-leiste--blaettern .cs-l-spur.mehr-links{--kante-l:calc(120 * var(--u))}
.cs-leiste--blaettern .cs-l-spur.mehr-rechts{--kante-r:calc(120 * var(--u))}
.cs-l-spur.zieht{cursor:grabbing;user-select:none}

/* Pille + Vollbild-Liste gibt es nur bis 1100 px */
.cs-pille,.cs-liste{display:none}

@media (prefers-reduced-motion:reduce){
  .cs-leiste,.cs-leiste.offen{transform:none}
  .cs-sh-karte:hover .cs-sh-bild img,.cs-mw-karte:hover .cs-mw-bild img,.cs-leiste.zoom .cs-l-eintrag:hover .cs-l-bild img,.cs-film:hover img{transform:none}
}

/* ============ TABLET 761–1100 px (nicht designt): Kerbe entfällt wie auf den anderen Unterseiten, Text 760 max., Mockups unter dem Text,
   Widget als Pille + Vollbild-Liste wie mobil ============ */
@media (max-width:1100px){
  .cs-fakten{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;padding:0 var(--rand)}
  .cs-intro,.cs-results,.cs-shootings,.cs-projekte{padding-left:var(--rand)}
  .cs-intro{padding-top:100px}
  .cs-intro-block + .cs-intro-block{margin-top:80px}
  .cs-results{padding-top:80px}
  .cs-zahlen{grid-template-columns:repeat(3,minmax(0,240px))}
  .cs-shootings{padding-top:100px}
  .cs-projekte{padding-top:100px}
  .cs-dunkel{margin-top:100px}
  .cs-kapitel{padding-top:50px;padding-bottom:100px}
  .cs-kapitel:first-of-type{margin-top:50px}
  .cs-k-raster,.cs-kapitel--mockups .cs-k-raster{grid-template-columns:90px minmax(0,760px)}
  .cs-mockups{grid-column:2;max-width:590px;margin-top:60px;column-gap:40px}
  .cs-m-spalte + .cs-m-spalte{padding-top:200px}
  .cs-k-folie{width:calc(var(--w) * .6667px);height:calc(var(--h) * .6667px)}
  .cs-zitat{margin-left:90px}
  .cs-mehr{padding-top:100px;padding-bottom:100px}
  .cs-w,.cs-leiste{display:none}

  /* Pille (DC-M2): Milchglas Creme 90 % + Unschärfe 24, 45 hoch, 20 vom Rand; „Marke · 01 / 06“ (Label) + „+“ */
  .cs-pille{position:fixed;right:20px;bottom:20px;z-index:57;display:flex;align-items:center;height:45px;padding:0 16px;border:0;border-radius:4px;background:rgba(247,244,240,.9);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);color:var(--ink);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .cs-pille.sichtbar{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
  html.cs-liste-offen .cs-pille{opacity:0;visibility:hidden}
  .cs-pille .label{white-space:nowrap}
  .cs-pille-plus{margin-left:20px;font:500 20px/22px var(--font-h)}
  .cs-pille:focus-visible{outline:2px solid var(--creme);outline-offset:2px}

  /* Vollbild-Liste (DC-M3, wie die Imagery-Seiten): dunkel, oben „Case overview ↑“, Kapitel als Bildkarten (350 × 220) untereinander,
     Name 10 darunter (Archivo 16/20, aktuelles Kapitel 100 %, die anderen 60 %), „Close“ fest unten auf einem Verlauf */
  html.cs-liste-offen{overflow:hidden}
  .cs-liste{position:fixed;inset:0;z-index:70;display:block;padding:20px var(--rand) 116px;background:var(--dunkel);color:var(--creme);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
  .cs-liste.offen{opacity:1;visibility:visible;transition:opacity .2s ease}
  .cs-li-top{display:inline-block;font-family:var(--font-h);font-weight:500;font-size:16px;line-height:20px;letter-spacing:-.01em;color:var(--creme)}
  .cs-li-eintrag{display:block;max-width:560px;margin-top:20px;color:var(--creme)}
  .cs-li-bild{display:block;aspect-ratio:350/220;border-radius:var(--radius);overflow:hidden}
  .cs-li-name{display:block;margin-top:10px;font-family:var(--font-h);font-weight:500;font-size:16px;line-height:20px;letter-spacing:-.01em;opacity:.6}
  .cs-li-eintrag.aktiv .cs-li-name{opacity:1}
  .cs-li-eintrag:focus-visible{outline:none}
  .cs-li-eintrag:focus-visible .cs-li-bild{outline:2px solid var(--creme);outline-offset:2px}
  .cs-li-top:focus-visible{outline:2px solid var(--creme);outline-offset:3px}
  .cs-li-zu{position:fixed;left:0;right:0;bottom:0;z-index:71;display:block;height:96px;padding:50px 0 0;border:0;background:linear-gradient(to top,var(--dunkel) 55%,rgba(26,26,24,0));color:var(--creme);font-family:var(--font-h);font-weight:500;font-size:16px;line-height:20px;letter-spacing:-.01em;text-align:center;cursor:pointer}
  .cs-li-zu:focus-visible{outline:none;text-decoration:underline;text-underline-offset:.2em}
}

/* ============ MOBIL bis 760 px (DC-M1): alles einspaltig ab x 20; Abstände zwischen Abschnitten 80 ============ */
@media (max-width:760px){
  .cs-seite{--cs-lead:20px;--cs-lead-lh:26px;--cs-ktitel:var(--fs-titel-m);--cs-ktitel-lh:var(--lh-titel-m);--cs-zahl:40px;--cs-zahl-lh:44px;--cs-kwert:24px;--cs-kwert-lh:26px}
  /* Eckdaten untereinander, 40 unter der H1 (wie OA-M1/CS-M1; DC-M1 hat 71, Rest einer H1-Zeile nach dem Entfernen des Einzugs);
     Label → Wert (Archivo 15/21) 6, nächstes Label 16; ↗ 9 × 10 */
  .cs-fakten{display:block;margin-top:40px}
  .cs-fakt + .cs-fakt{margin-top:16px}
  .cs-fakt dd{font-size:15px;line-height:21px}
  .cs-extern + .cs-extern{margin-left:13px}
  .cs-pfeil-extern{width:9px;height:10px;margin-left:5px;vertical-align:1px}
  .cs-hero{margin-top:40px;aspect-ratio:350/192}
  /* Überblick: Label → Lead 12 (20/26) → Absatz 16 (17/24); Blöcke 56 auseinander */
  .cs-intro{padding-top:80px}
  .cs-intro-block + .cs-intro-block{margin-top:56px}
  .cs-lead{margin-top:12px}
  .cs-absatz,.cs-absatz + .cs-absatz{margin-top:16px;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l)}
  /* Results: zwei Spalten à 165, Zahl 40/44, Definition 8 darunter (14/20), nächste Reihe 32 */
  .cs-results{padding-top:80px}
  .cs-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px;margin-top:32px}
  .cs-zahl-text{margin-top:8px;font-size:var(--fs-text-xs);line-height:var(--lh-text-xs);letter-spacing:var(--ls-text-xs)}
  /* Shootings untereinander (350 × 233), Saison 12 darunter, Titel 8 darunter (18/22), nächste Kachel 64 */
  .cs-shootings{padding-top:80px}
  .cs-sh-raster{grid-template-columns:minmax(0,1fr);row-gap:64px;margin-top:32px}
  .cs-sh-bild{aspect-ratio:350/233}
  .cs-sh-meta{margin-top:12px}
  .cs-sh-titel{margin-top:8px;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:-.02em}
  /* ab vier Kacheln zweispaltig (ROHDE RO-M1): 165 × 110, Titel 16/20 6 darunter, Reihen 32 auseinander */
  .cs-sh-raster:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px}
  .cs-sh-raster:has(> :nth-child(4)) .cs-sh-bild{aspect-ratio:165/110}
  .cs-sh-raster:has(> :nth-child(4)) .cs-sh-titel{margin-top:6px;font-size:16px;line-height:20px;letter-spacing:-.02em}
  /* Projects: Zeile 82; Nummer links, Titel (18/22) mit Zeitraum darunter ab x 52, ↓ rechts */
  .cs-projekte{padding-top:80px}
  .cs-p-liste{margin-top:32px}
  .cs-p-zeile{grid-template-columns:32px minmax(0,1fr) auto;grid-template-rows:auto auto;min-height:82px;padding-bottom:18px}
  .cs-p-nr{grid-column:1;grid-row:1;margin-top:19px}
  .cs-p-titel{grid-column:2;grid-row:1;max-width:270px;margin-top:17px;font-size:var(--fs-zeile);line-height:var(--lh-zeile);letter-spacing:-.02em}
  .cs-p-ende{display:contents}
  .cs-p-zeit{grid-column:2;grid-row:2;margin-top:4px}
  .cs-p-pfeil{grid-column:3;grid-row:1;margin-top:16px;font-size:19px;line-height:22px}
  /* Übergangsbild randlos 390 × 219, 79 unter der Tabelle */
  .cs-dunkel{margin-top:79px}
  .cs-uebergang{aspect-ratio:390/219}
  /* Kapitel: Linie → 40 → Nummer (22/24) links + Zeitraum (14/20) rechts → Titel 16 (22/24) → Absätze 20/16 (17/24) → RESULT 32 → Bilder 40; 80 bis zur nächsten Linie */
  .cs-kapitel{padding:39px var(--rand) 80px;scroll-margin-top:46px}
  .cs-kapitel:first-of-type{margin-top:40px}
  .cs-k-raster,.cs-kapitel--mockups .cs-k-raster{grid-template-columns:minmax(0,1fr) auto}
  .cs-k-text{display:contents}
  .cs-k-nr{grid-column:1;grid-row:1}
  .cs-k-zeit{grid-column:2;grid-row:1;margin-top:4px;text-align:right;font-size:14px;line-height:20px;letter-spacing:-.01em}
  .cs-k-titel,.cs-k-absatz,.cs-k-ergebnis,.cs-mockups{grid-column:1 / -1}
  .cs-k-titel,.cs-kapitel--mockups .cs-k-titel{margin-top:16px}
  .cs-k-absatz,.cs-kapitel--mockups .cs-k-absatz{margin-top:16px;font-size:var(--fs-text-l);line-height:var(--lh-text-l);letter-spacing:var(--ls-text-l)}
  .cs-k-titel + .cs-k-absatz,.cs-kapitel--mockups .cs-k-titel + .cs-k-absatz{margin-top:20px}
  .cs-k-ergebnis,.cs-kapitel--mockups .cs-k-ergebnis{margin-top:32px}
  .cs-k-zahlen,.cs-kapitel--mockups .cs-k-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:24px;margin-top:12px} /* Reihen 24 wie am Desktop (RO-M1, drei Kennzahlen) */
  .cs-k-def,.cs-kapitel--mockups .cs-k-def{margin-top:6px}
  /* Mockups zweispaltig unter dem Text (165 × 356): rechte Spalte 162 tiefer, untereinander 25 (Vorbild Basic, nicht wischen) */
  .cs-mockups{max-width:none;margin-top:40px;column-gap:20px}
  .cs-m-spalte{gap:25px}
  .cs-m-spalte + .cs-m-spalte{padding-top:162px}
  .cs-k-medien{margin-top:40px}
  .cs-k-medien > * + *{margin-top:40px}
  /* Karussells als Wischreihen ab x 20, Abstand 10, Folien mobil (z. B. 260 × 390, 330 × 220, 200 × 300); Zähler 24 darunter, kein Drag-Kreis */
  .cs-k-spur{gap:10px}
  .cs-k-spur::after{flex-basis:calc(var(--rand) - 10px)}
  .cs-k-folie{width:calc(var(--mw) * 1px);height:calc(var(--mh) * 1px)}
  .cs-k-zaehler{margin-top:24px}
  .cs-bilder{row-gap:10px}
  .cs-reihe{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .cs-film-tag{left:14px;bottom:12px}
  .cs-zitat{margin-left:0}
  .cs-zitat figcaption{margin-top:16px}
  .cs-k-medien:has(> .cs-zitat:first-child){margin-top:32px}
  .cs-k-medien > .cs-film + .cs-karussell{margin-top:10px}
  /* More work: 80 unter dem dunklen Teil, Kacheln untereinander (350 × 221), Abstand 64; Footer 80 darunter */
  .cs-mehr{padding:80px var(--rand)}
  .cs-mw-raster{grid-template-columns:minmax(0,1fr);row-gap:64px;margin-top:32px}
  .cs-mw-meta{margin-top:12px}
  .cs-mw-typ{margin-right:0}
  .cs-mw-titel{max-width:none;margin-top:8px}
  .cs-li-eintrag{max-width:none}
}