@import url("zz-token.css");
/* =============================================================================
   ZZ CORPORATE — Chrome + Modul-Bibliothek (Fashion-Editorial)
   Eine Datei für alle Corporate-Flächen. Module sind Templates: das Layout
   steht hier, der Inhalt kommt aus dem Directus (zz.modules.corporate).
   Typo/Farbe/Haarlinien übernommen aus dem Haus-System (nav-zaba/footer-lab).

   DIE TOKEN STEHEN NICHT MEHR HIER, sondern in zz-token.css; die Zeile ganz
   oben holt sie. Grund: die Nav-Baureihe braucht dieselben Werte, teilt mit
   dieser Datei aber neununddreißig Klassennamen (.veil, .ico, .t, .k, .on,
   .open, .strip, .legal und weitere). Sie könnte die Bibliothek nicht laden,
   ohne ihre eigene abgenommene Gestaltung an neununddreißig Stellen zu
   verändern. Werte trennen, Bauteile nicht — hausbauteil-quelle ist beides.
   ============================================================================= */

@font-face{font-family:"NotoSerifDisplay";src:url("../fonts/NotoSerifDisplay_ExtraCondensed-ExtraLight.ttf") format("truetype");font-weight:200;font-display:block}
@font-face{font-family:"NotoSerifDisplay";src:url("../fonts/NotoSerifDisplay_ExtraCondensed-Regular.ttf") format("truetype");font-weight:400;font-display:block}
@font-face{font-family:"NotoSerifDisplay";src:url("../fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:block}
@font-face{font-family:"PPNeue";src:url("../fonts/PPNeueMontreal-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"PPNeue";src:url("../fonts/PPNeueMontreal-Semibold.otf") format("opentype");font-weight:600;font-display:swap}

/* -----------------------------------------------------------------------------
   DIE TINTE DER ANZEIGESCHRIFT — wieviel sie ueber ihre Zeile hinausragt.

   Noto Serif Display ExtraCondensed hat eine Inhaltsbox von 1,362 em
   (Anstieg 1069 + Abstieg 293 je 1000 Einheiten). Jede Zeilenhoehe unter 1,362
   laesst die Schrift also oben UND unten aus ihrer eigenen Zeile herausragen —
   das ist bei einer Anzeigeschrift Absicht und der Grund, warum die Strecken
   .8 bis 1.02 setzen. Solange nichts schneidet, sieht man davon nichts.

   Der Wortauftritt SCHNEIDET aber (`.w{overflow:hidden}`), und ein Fenster in
   Zeilenhoehe ist kleiner als die Tinte, die es zeigen soll.

   UNTEN — GEMESSEN. tools/mess-unterlaenge.mjs am gerenderten Blatt: 120 von
   131 aufgetretenen Woertern verloren unten 0,069 bis 0,163 em. Bei 72 px
   sind das 12 px, also drei Viertel der Unterlaenge von "g", "y", "p"; bei
   99 px auf der langen Strecke 14 px. Tiefste Stelle der Schrift: 0,241 em
   (g/j/J/p/q/y).

   OBEN — NICHT GEMESSEN, VORSORGE. Rechnerisch erreichbar: É/À/Â/Ê/Î/Ô/Û
   reichen auf 0,931 em, Ä/Ö/Ü auf 0,903, waehrend eine Zeile mit .92 nur
   0,848 em ueber der Grundlinie hergibt. Belegt ist dieser Fall aber NICHT:
   im Bestand traegt genau ein Wort in Anzeigegroesse eine Akzent-Versalie
   ("Uebergabe", Zeilenhoehe 1.0, rechnerisch 0,021 em zu wenig), und es tritt
   im Messlauf nie in den sichtbaren Zustand. Der Wert steht hier, weil die
   deutschen Flaechen wachsen — nicht, weil ein gemessener Defekt behoben
   waere. Wer ihn als belegt weitergibt, gibt eine Rechnung als Messung aus.

   Die zwei Zahlen sind daher KEINE Gestaltungswerte, sondern Metrik dieser
   Schrift: soviel Luft braucht ein Schnittfenster, damit es die Bewegung
   schneidet und nicht die Buchstaben. Sie stehen hier, weil hier die Schrift
   deklariert wird und weil zz-corporate.css das EINZIGE Stylesheet ist, das
   alle drei FEAR-Strecken laden — wer die Schrift tauscht, findet sie an
   derselben Stelle. Ein Fenster, das sie nicht benutzt, schneidet wieder.

   Die Zuschlaege tragen bis hinunter zu Zeilenhoehe .8. */
:root{
  --zz-tinte-oben:.18em;
  --zz-tinte-unten:.28em;
}

:root{
  --paper:#F5F2EA; --surface:#ECE7DB; --sage:#C9CDB2;
  /* --muted traegt 10-12px Beschriftungen. #8A857D ergab auf --paper nur
     3,27:1 und fiel damit unter AA (4,5:1) — gemessen am DOM, nicht geschaetzt.
     Der Wert muss auf der DUNKELSTEN hellen Flaeche halten, nicht auf --paper:
     auf --surface (#ECE7DB) blieb #6E6961 bei 4,41:1 knapp darunter. */
  --ink:#16130F; --ink2:#4A463E; --muted:#686359;
  /* BUEHNE: Grund fuer Bild-, Video- und Zitatflaechen, auf denen der Text
     hart #fff ist. Bewusst NICHT je Theme umdefiniert — --ink kippt im Dunkeln
     auf hell und machte aus der dunklen Buehne eine weisse Flaeche. */
  --stage:#16130F;
  --oxblood:#4C1019; --signal:#C63A21;
  --line:rgba(22,19,15,.14); --line-soft:rgba(22,19,15,.07);
  --mark:"NotoSerifDisplay",Didot,serif; --sans:"PPNeue",-apple-system,system-ui,sans-serif;
  --pad-x:clamp(1rem,2.6vw,2.4rem); --maxw:1480px; --ease:cubic-bezier(.22,1,.36,1);
  --gap:clamp(.8rem,1.6vw,1.4rem);

  /* hausbauteil-quelle — DIESE Datei ist die Bibliothek. Fehlt einem Modul ein
     Wert, kommt das Token HIERHER; ein Modul-Stilblatt (zz-modules-N.css)
     trägt weder eigene Token noch Farbliterale. Die Werte unten standen
     bisher als Zahl in je einem Modul und liefen darum auseinander: das Blatt
     der Navigation war 420px, der Schieber einmal 500 und einmal 520 ms. */
  --zz-tast:44px;        /* kleinste Tastfläche, R28b — gilt für JEDEN Knopf */
  --zz-blatt:420px;      /* Breite jedes Blatts ab Tablet */
  --zz-schieber:500ms;   /* Fahrzeit jedes Blatts */
  /* Schrift auf Film und Bild. Wie --stage bewusst NICHT je Thema umdefiniert:
     der Grund unter dem Film ist immer dunkel. */
  --auf-film:#fff;
  --auf-film-ink:#16130F;
  /* Der Schleier über dem Film. Er steht hier, weil ihn drei Bauteile
     brauchen (Kopf, Einschub, Abschluss) und ein vierter Wert sonst ein
     vierter Grauton wäre. */
  --zz-film-schleier:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.06) 34%,rgba(0,0,0,.58) 100%);
  --zz-film-schleier-fuss:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.62) 100%);
}
body[data-theme="dark"]{
  --paper:#141311; --surface:#1C1B18; --sage:#3A3F31;
  --ink:#F3EEE4; --ink2:#C9C2B4; --muted:#8F887A;
  --oxblood:#C98A5E; --signal:#E0512F;
  --line:rgba(243,238,228,.16); --line-soft:rgba(243,238,228,.07);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
html,body{scrollbar-width:none}::-webkit-scrollbar{display:none}
/* overflow-x:hidden stand hier und ist bewusst ENTFERNT.
   Es versteckte nicht nur den Ueberlauf, sondern auch jede Messung davon: die
   Wache lief gruen, weil sie strukturell blind war. Wo eine Flaeche breiter
   sein muss als das Fenster (Bildband, Filterleiste, ziehbare Strecke), steht
   das Abschneiden jetzt an DIESER Flaeche — dort, wo es hingehoert und wo es
   die Messung des Rests nicht mit stumm schaltet. */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.5;
     -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
/* R68 verlangt mindestens 2 px. 1,5 px rundete der Browser auf 1 px ab —
   gemessen an herkunft/ waren 138 Stellen betroffen, auf JEDER Seite des
   Hauses dieselbe. Der Wert steht hier einmal, deshalb wirkt er ueberall. */
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.ico{display:block}.ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad-x)}

/* ---------------------------------------------------------------- CHROME
   Corporate-Header: Haus-Struktur, aber OHNE Warenkorb/Wunschliste/Konto.
   Utility traegt Haus-Themen (Investors/Press/Careers) statt Service-Themen. */
.chdr{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--paper);
      border-bottom:.5px solid var(--line-soft);transition:box-shadow .3s var(--ease)}
.chdr.cond{box-shadow:0 1px 0 var(--line-soft)}
.cutil{display:flex;align-items:center;justify-content:space-between;
       padding:.45rem var(--pad-x);font-size:11px;color:var(--muted);
       border-bottom:.5px solid var(--line-soft)}
.cutil a{cursor:pointer;display:flex;align-items:center;gap:.4rem}.cutil a:hover{color:var(--ink)}
.cutil-l,.cutil-r{display:flex;align-items:center;gap:1.4rem}
.cutil .ico{width:13px;height:13px;flex-shrink:0}
.cutil .emph{color:var(--ink)}
.cutheme{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:11px;letter-spacing:.02em}
.cutheme:hover{color:var(--ink)}.cutheme .ico{width:14px;height:14px}
.cutheme .sun{display:none}.cutheme .lbl-dark{display:none}
body[data-theme="dark"] .cutheme .sun{display:block}body[data-theme="dark"] .cutheme .moon{display:none}
body[data-theme="dark"] .cutheme .lbl-dark{display:inline}body[data-theme="dark"] .cutheme .lbl-light{display:none}
.cbrandrow{display:flex;flex-direction:column;align-items:center;position:relative;
           padding:1.15rem var(--pad-x) .35rem;transition:padding .3s var(--ease)}
.chdr.cond .cbrandrow{padding:.6rem var(--pad-x) .2rem}
.clogo{font-family:var(--mark);font-weight:700;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.04em;
       text-transform:uppercase;white-space:nowrap;line-height:1;transition:font-size .3s var(--ease)}
.chdr.cond .clogo{font-size:clamp(18px,2vw,23px)}
/* Operator 2026-09-02: die Wortmarke traegt EIN Gewicht, kein Unterschied
   zwischen Mantel und Zeichen. Bis dahin lief der Mantel auf Regular 400,
   davor auf ExtraLight 200. Register: zz.marke im Directus. */
.clogo .a{font-weight:700}.clogo .l{font-weight:700}.clogo .amp{font-weight:700;padding:0 .08em}
/* ZZ-Monogramm-Kanon (zz-keychain zz3.css .brand-mini .zz) — nie neu erfinden */
.zz{font-family:var(--mark);font-weight:700;letter-spacing:-.2em;padding-right:.2em}
.cburger{position:absolute;left:var(--pad-x);top:50%;transform:translateY(-50%);display:none;padding:6px}
.cburger svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.cnav{display:flex;justify-content:center;align-items:center;gap:clamp(1rem,2.2vw,2.2rem);
      padding:.6rem var(--pad-x) .95rem}
.cnav-h{font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
        font-weight:500;padding:.4rem 0;position:relative;white-space:nowrap}
.cnav-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);
               transform:scaleX(0);transition:transform .3s var(--ease)}
.cnavitem.on .cnav-h::after{transform:scaleX(1)}
.cmega{position:fixed;left:0;right:0;top:calc(var(--chdr-h,150px) - 1px);z-index:55;background:var(--paper);
       border-bottom:.5px solid var(--line);overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.cmega.open{max-height:min(80vh,760px);overflow-y:auto}
.cmega-in{max-width:var(--maxw);margin:0 auto;padding:2rem var(--pad-x) 2.4rem}
.cmega-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.6vw,2.8rem)}
.cmega h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.1rem}
.cmega ul{list-style:none;padding:0}.cmega li{margin:.6rem 0}
.cmega a{font-size:13px}.cmega a:hover{color:var(--signal)}
.cmega-ed{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.cmega-ed .ec .ei{aspect-ratio:4/5;background:var(--surface) center/cover no-repeat;overflow:hidden}
.cmega-ed .ec .et{font-size:12.5px;margin-top:.5rem;text-transform:uppercase;letter-spacing:.02em}
.cscrim{position:fixed;inset:0;z-index:50;background:rgba(22,19,15,.3);opacity:0;visibility:hidden;
        transition:opacity .4s var(--ease),visibility 0s linear .4s}
.cscrim.open{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
.cdrawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,420px);z-index:80;background:var(--paper);
         transform:translateX(-100%);transition:transform .42s var(--ease);display:flex;flex-direction:column;visibility:hidden}
.cdrawer.open{transform:none;visibility:visible}
.cdrawer-top{display:flex;align-items:center;justify-content:space-between;padding:1.1rem var(--pad-x);
             border-bottom:.5px solid var(--line-soft)}
.cdrawer-top .dlogo{font-family:var(--mark);font-weight:700;font-size:17px;letter-spacing:-.03em;text-transform:uppercase}
.cdrawer-top button{display:flex;align-items:center;gap:.5rem;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.cdrawer-top button .ico{width:17px;height:17px}
.cdrawer-body{flex:1;overflow-y:auto;padding:.6rem 0}
.cdacc{border-bottom:.5px solid var(--line-soft)}
.cdacc-h{width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.05rem var(--pad-x);
         font-size:1.45rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em;text-align:left}
.cdacc-h .chev{width:16px;height:16px;color:var(--muted);transition:transform .35s var(--ease)}
.cdacc.open .cdacc-h .chev{transform:rotate(90deg)}
.cdacc-sub{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.cdacc-sub-in{padding:.2rem var(--pad-x) 1rem}
.cdacc-sub a{display:block;padding:.5rem 0;font-size:13.5px}
.cdrawer-foot{padding:1.2rem var(--pad-x) calc(1.4rem + env(safe-area-inset-bottom));
              border-top:.5px solid var(--line-soft);display:flex;flex-direction:column;gap:.85rem;font-size:12.5px;color:var(--muted)}
@media(max-width:980px){.cnav{display:none}.cburger{display:block}.cmega{display:none}
  .cbrandrow{padding:.95rem var(--pad-x)}.cutil-l a:not(:first-child){display:none}}
@media(min-width:981px){.cdrawer{display:none}}

/* =============================================================================
   MODUL-BIBLIOTHEK — jedes Modul ist ein Template: Raster + Bildformate +
   Textposition stehen fest, der Inhalt kommt aus dem CMS.
   Gemeinsame Rhythmus-Regeln:
   - Sektionsluft: --sec (gross) fuer ruhige, 0 fuer randlose Module
   - Display = Serif Versalien, Body = Sans, Label = Sans 10px/.2em
   - die rote Linie (--signal) ist Grenz-Motiv: nur Linie/Marker, nie Flaeche
   ============================================================================= */
:root{--sec:clamp(3.6rem,9vh,7.5rem)}
.mod{position:relative}
.mod + .mod{margin-top:0}
.pad{padding:var(--sec) 0}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);font-weight:600}
.eyebrow .no{color:var(--signal)}
.dsp{font-family:var(--mark);font-weight:200;text-transform:uppercase;line-height:.94;letter-spacing:.005em;text-wrap:balance}
.dsp em{font-style:normal;font-weight:400}
.dsp-xl{font-size:clamp(2.6rem,7.2vw,6.4rem)}
.dsp-l{font-size:clamp(2rem,4.4vw,3.8rem)}
.dsp-m{font-size:clamp(1.5rem,2.6vw,2.4rem)}
.body{font-size:clamp(14px,1.15vw,16.5px);color:var(--ink2);max-width:62ch}
.body-s{font-size:13px;color:var(--ink2);max-width:56ch}
.lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* Eine Stoerungsmeldung erbt NICHT die Etikettschrift. 10px mit weiter
   Laufweite ist die Auszeichnung des Hauses fuer Beiwerk — wer eine Stoerung
   lesen soll, bekommt Fliesstextgroesse und den vollen Kontrast der Schrift,
   in beiden Themen ueber dieselben Token. */
/* Eine fehlende Pflichtangabe im Rechtstext wird SICHTBAR gemacht, nicht
   verschwiegen. Die Voreinstellung des Browsers fuer <mark> ist ein gelber
   Balken, der weder zum Haus gehoert noch in beiden Themen traegt — deshalb
   eigene Auszeichnung aus den Token, mit Kontrast in hell UND dunkel. */
mark.haus-offen{background:transparent;color:var(--ink);font-weight:600;
  border-bottom:2px solid var(--signal,#C8452B);padding:0 .1em}

.lbl.quelle-fehlt{font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);
  border-left:2px solid var(--line);padding-left:.7rem;max-width:62ch}

.rule{height:2px;width:min(150px,20vw);background:var(--signal)}
.link{display:inline-flex;align-items:center;gap:.55rem;font-size:11px;letter-spacing:.2em;
      text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:.35rem}
.link:hover{color:var(--signal)}
.ph{background:var(--surface) center/cover no-repeat;position:relative;overflow:hidden}
.ph.grade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.5))}
.cap{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.55rem}

/* 01 statement-hero — voll, Video oder Standbild, Aussage unten links */
.m-hero{height:100svh;min-height:520px;position:relative;overflow:hidden;background:var(--stage)}
.m-hero>video,.m-hero>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Der Schleier muss unten tragen, wo die Aussage steht — und zwar bei JEDEM
   Motiv. Mit .46 blieb die 10px-Vorzeile bei 2,2:1 auf einem hellen Bild. */
.m-hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,.22) 40%,rgba(0,0,0,.64) 72%,rgba(0,0,0,.82) 100%)}
.m-hero .cnt{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:clamp(1.8rem,7vh,4rem);color:var(--auf-film);z-index:2;max-width:var(--maxw);margin:0 auto}
/* Volles Weiss: 72 % Deckkraft auf 10px ist kein Stil, sondern ein Lesefehler. */
.m-hero .cnt .eyebrow{color:var(--auf-film)}
.m-hero .cnt .dsp{margin-top:.7rem}
.m-hero .cnt .body{color:var(--auf-film); opacity:.86;margin-top:1rem}

/* 02 manifesto — nur Typo auf ruhiger Flaeche, maximaler Weissraum */
.m-manifesto{padding:calc(var(--sec)*1.4) 0;text-align:center}
.m-manifesto .rule{margin:0 auto clamp(1.6rem,4vh,2.6rem)}
.m-manifesto .body{margin:1.6rem auto 0;text-align:center}

/* 03 split-proof — These links, Beweisbild rechts, im selben Blickfeld */
.m-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.6rem,4vw,4.5rem)}
.m-split.rev>.txt{order:2}
.m-split .ph{aspect-ratio:4/5}
.m-split .rule{margin-bottom:1.4rem}
.m-split .body{margin-top:1.1rem}
.m-split .link{margin-top:1.6rem}

/* 04 editorial-spread — Doppelseite: zwei Bilder unterschiedlicher Hoehe + Fliesstext */
.m-spread{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end}
.m-spread .a{grid-column:1/6}.m-spread .a .ph{aspect-ratio:3/4}
.m-spread .b{grid-column:7/13;padding-bottom:clamp(1rem,5vh,3.4rem)}.m-spread .b .ph{aspect-ratio:4/3}
.m-spread .t{grid-column:7/12;padding-top:.4rem}

/* 05 offset-pair — versetztes Bildpaar, Text in der Lücke */
.m-offset{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.m-offset .p1{grid-column:1/7}.m-offset .p1 .ph{aspect-ratio:4/5}
.m-offset .p2{grid-column:8/13;margin-top:clamp(3rem,12vh,9rem)}.m-offset .p2 .ph{aspect-ratio:4/5}
.m-offset .t{grid-column:1/6;margin-top:clamp(1.4rem,4vh,2.6rem)}

/* 06 fullbleed-quote — Vollbild, Zitat gross zentriert */
/* Zitat: der Block sitzt auf der Mittelachse, der TEXT bleibt linksbuendig —
   durchgehend zentrierter Satz ist der generische Auftritt, den wir vermeiden. */
.m-quote{height:min(92svh,900px);min-height:420px;position:relative;display:grid;align-items:center;
         overflow:hidden;background:var(--stage)}
.m-quote>.bg{position:absolute;inset:0;background:center/cover no-repeat;filter:grayscale(.35)}
/* Zitat steht mittig, also liegt der Schleier dort als Streifen — eine
   gleichmaessige Lasur von .5 traegt die 10px-Quellenzeile nicht. */
.m-quote .veil{position:absolute;inset:0;
  background:radial-gradient(150% 34% at 50% 50%,rgba(15,14,12,.72) 0%,rgba(15,14,12,.56) 65%,rgba(15,14,12,.30) 100%),
             rgba(15,14,12,.34)}
.m-quote .cnt{position:relative;z-index:2;color:var(--auf-film);text-align:left;max-width:24ch;
              margin:0 auto;padding:0 var(--pad-x);width:100%;
              max-width:min(24ch,var(--maxw))}
.m-quote .src{margin-top:1.4rem;color:var(--auf-film)}
.m-quote .cnt .lbl{color:var(--auf-film)}

/* 07 figures — Beleg-Reihe: Zahl + Einheit + Quelle im selben Element */
.m-figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line)}
.m-figures .f{background:var(--paper);padding:clamp(1.2rem,3vh,2rem) clamp(1rem,1.6vw,1.5rem)}
.m-figures .n{font-family:var(--mark);font-weight:400;font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:1;font-variant-numeric:tabular-nums}
.m-figures .n em{font-style:normal;font-weight:700}
.m-figures .u{font-size:13px;color:var(--ink2);margin-top:.4rem}
.m-figures .src{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.8rem}

/* 08 process-chain — Kette mit echter Reihenfolge, rote Linie als Fortschritt */
.m-chain{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,2.2rem)}
.m-chain .s{border-top:2px solid var(--line);padding-top:1rem;position:relative}
.m-chain .s::before{content:"";position:absolute;top:-2px;left:0;width:40%;height:2px;background:var(--signal)}
.m-chain .k{font-size:11px;letter-spacing:.2em;color:var(--signal);font-variant-numeric:tabular-nums}
.m-chain h3{font-family:var(--mark);font-weight:400;text-transform:uppercase;font-size:clamp(1.2rem,1.9vw,1.7rem);margin:.5rem 0 .4rem}

/* 09 people — Portraitreihe, Name + Rolle unter dem Bild */
.m-people{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.2vw,2rem)}
.m-people .p .ph{aspect-ratio:3/4;filter:grayscale(1);transition:filter .5s var(--ease)}
.m-people .p:hover .ph{filter:grayscale(0)}
.m-people .nm{font-size:13.5px;margin-top:.6rem}
.m-people .ro{font-size:11.5px;color:var(--muted)}

/* 10 timeline — Herkunft/Zeitachse, Jahr links, Ereignis rechts */
.m-time{display:grid;gap:0}
.m-time .r{display:grid;grid-template-columns:110px 1fr;gap:clamp(1rem,3vw,3rem);
           padding:clamp(1rem,2.4vh,1.7rem) 0;border-top:.5px solid var(--line)}
.m-time .r:last-child{border-bottom:.5px solid var(--line)}
.m-time .y{font-family:var(--mark);font-weight:400;font-size:clamp(1.3rem,2vw,1.9rem);line-height:1;
           font-variant-numeric:tabular-nums;color:var(--ink)}
.m-time h3{font-size:15px;font-weight:600;margin-bottom:.3rem}

/* 11 card-grid — gleiche Anatomie je Karte, Zaehler am Filter.
   Feste drei Spalten: ein feineres Raster liest sich wie eine Shop-Liste. */
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem)}
.m-cards .c .ph{aspect-ratio:4/5}
.m-cards .c .t{font-family:var(--mark);font-weight:400;text-transform:uppercase;font-size:1.15rem;margin-top:.65rem}
.m-cards .c .l{font-size:12px;color:var(--ink2);margin-top:.2rem}
.m-chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.4rem}
.m-chip{border:.5px solid var(--line);border-radius:100px;padding:.34rem .95rem;font-size:12.5px;color:var(--ink2)}
.m-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.m-chip b{font-weight:400;margin-left:.45rem;font-size:11px;font-variant-numeric:tabular-nums}

/* 12 rail — horizontale Bildstrecke, laeuft ueber den Rand hinaus */
.m-rail{overflow-x:auto;display:flex;gap:var(--gap);padding-left:var(--pad-x);padding-right:var(--pad-x);
        scroll-snap-type:x mandatory}
.m-rail .i{flex:0 0 clamp(230px,26vw,380px);scroll-snap-align:start}
.m-rail .i .ph{aspect-ratio:3/4}
.m-rail .i .t{font-size:12.5px;margin-top:.5rem}

/* 13 sticky-duo — Text scrollt, Bild bleibt stehen */
.m-sticky{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,4rem);align-items:start}
.m-sticky .media{position:sticky;top:calc(var(--chdr-h,150px) + 1.5rem)}
.m-sticky .media .ph{aspect-ratio:4/5}
.m-sticky .blocks>*+*{margin-top:clamp(2rem,7vh,4rem)}
.m-sticky .blocks h3{font-family:var(--mark);font-weight:400;text-transform:uppercase;
                     font-size:clamp(1.4rem,2.2vw,2rem);margin-bottom:.6rem}

/* 14 macro-trio — drei Detail-Nahaufnahmen, gleiches Format, ohne Text */
.m-macro{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.m-macro .ph{aspect-ratio:1/1}

/* 15 closing-cta — Abschluss: eine Aufforderung, viel Luft */
.m-closing{padding:calc(var(--sec)*1.2) 0;border-top:.5px solid var(--line)}
.m-closing .in{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.m-closing .link{font-size:12px}

/* 16 press — Downloads/Meldungen als ruhige Liste */
.m-press{display:grid;gap:0}
.m-press .r{display:grid;grid-template-columns:120px 1fr auto;gap:clamp(1rem,2.6vw,2.4rem);align-items:baseline;
            padding:clamp(.9rem,2vh,1.35rem) 0;border-top:.5px solid var(--line)}
.m-press .r:last-child{border-bottom:.5px solid var(--line)}
.m-press .d{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.m-press .h{font-size:14.5px}
.m-press .a{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal);white-space:nowrap}

/* 17 duo-band — zwei randlose Flaechen nebeneinander (Kontrast hell/dunkel) */
.m-duo{display:grid;grid-template-columns:1fr 1fr;min-height:min(78svh,760px)}
.m-duo>div{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.4rem,4vw,3.4rem)}
/* Die dunkle Haelfte ist eine BUEHNE, keine Umkehrung des Textfarb-Tokens:
   mit background:var(--ink) wurde sie im Dunkel-Theme hell, waehrend der
   Absatz hell blieb — Text auf gleicher Farbe, 1,00:1. */
.m-duo .dark{background:var(--stage);color:var(--auf-stage)}
.m-duo .dark .body{color:rgba(243,238,228,.86)}
.m-duo .img{background:var(--surface) center/cover no-repeat;min-height:min(50svh,520px)}

/* 19 line-divider — das Grenz-Motiv als eigenes Modul mit Frequenz-Regel:
   hoechstens EIN Auftritt je drei aufeinanderfolgende Module (siehe Rhythmus-Regeln) */
.m-divider{display:flex;align-items:center;justify-content:center;height:clamp(40px,7vh,80px);position:relative}
.m-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--signal)}
.m-divider span{position:relative;background:var(--paper);padding:0 1rem;font-size:10px;letter-spacing:.28em;
                text-transform:uppercase;color:var(--signal)}
@media(max-width:560px){.m-divider span:empty{display:none}}

/* 20 label-index — Tueren in die Sub-Marken; N-fache Verallgemeinerung der
   FEAR/BELIEVE-Wahl (2 wird zu N Spalten, je eigene Farbwelt) */
.m-labels{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;min-height:min(88svh,860px)}
.m-labels a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
            padding:clamp(1.4rem,3vw,2.8rem);overflow:hidden;color:var(--auf-film)}
.m-labels a>.bg{position:absolute;inset:0;background:center/cover no-repeat;transition:transform 1.2s var(--ease)}
.m-labels a:hover>.bg{transform:scale(1.03)}
.m-labels a>.tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.62))}
.m-labels a>.cnt{position:relative;z-index:2;display:block}
.m-labels .wm{display:block;font-family:var(--mark);font-weight:200;text-transform:uppercase;line-height:.95;
              font-size:clamp(1.8rem,4vw,3.4rem);letter-spacing:-.01em}
.m-labels .tg{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.82;margin-top:.7rem}
@media(max-width:900px){.m-labels{grid-auto-flow:row;grid-auto-columns:auto}
  .m-labels a{min-height:min(58svh,460px)}}

/* 18 index-list — grosse Verzeichnis-Zeilen (Worlds/Kapitel), hover verschiebt */
.m-index{display:grid}
.m-index a{display:grid;grid-template-columns:56px 1fr auto;gap:1.2rem;align-items:baseline;
           padding:clamp(.9rem,2.4vh,1.5rem) 0;border-top:.5px solid var(--line);transition:padding-left .35s var(--ease)}
.m-index a:last-child{border-bottom:.5px solid var(--line)}
.m-index a:hover{padding-left:.9rem}
.m-index .n{font-size:11px;letter-spacing:.16em;color:var(--muted);font-variant-numeric:tabular-nums}
.m-index .t{font-family:var(--mark);font-weight:200;text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1}
.m-index a:hover .t{font-weight:400}
.m-index .m{font-size:11.5px;color:var(--muted)}

/* Mobiles Umbrechen: alle mehrspaltigen Module fallen kontrolliert um */
@media(max-width:900px){
  .m-split,.m-sticky,.m-duo{grid-template-columns:1fr}
  .m-split.rev>.txt{order:0}
  .m-sticky .media{position:static}
  .m-spread .a,.m-spread .b,.m-spread .t{grid-column:1/-1}
  .m-spread .b{padding-bottom:0}
  .m-offset .p1,.m-offset .p2,.m-offset .t{grid-column:1/-1}
  .m-offset .p2{margin-top:0}
  .m-chain{grid-template-columns:repeat(2,1fr)}
  .m-macro{grid-template-columns:repeat(3,1fr)}
  .m-index a{grid-template-columns:38px 1fr;}
  .m-index .m{display:none}
  .m-time .r{grid-template-columns:70px 1fr}
  .m-press .r{grid-template-columns:80px 1fr;row-gap:.3rem}
  .m-press .a{grid-column:2}
}
@media(max-width:900px){
  .m-cards{grid-template-columns:repeat(2,1fr)}
  .m-people{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .m-chain{grid-template-columns:1fr}
  .m-cards{grid-template-columns:1fr}
}

/* ---------------------------------------------------- FOOTER (Corporate)
   Struktur wie das Haus-Original mil-1, aber ohne Payment-Streifen. */
#zzfoot{border-top:.5px solid var(--line)}
#zzfoot .edi{display:grid;grid-template-columns:1fr 1fr;border-bottom:.5px solid var(--line)}
#zzfoot .edi .img{position:relative;min-height:420px;background:var(--surface) center/cover no-repeat;filter:grayscale(1) contrast(1.02)}
#zzfoot .edi .img .q{position:absolute;left:0;right:0;bottom:0;padding:2rem;color:var(--auf-film);
                     background:linear-gradient(180deg,transparent,rgba(15,14,12,.72))}
#zzfoot .edi .img .q em{font-family:var(--mark);font-weight:200;font-style:normal;
                        font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1.05;text-transform:uppercase;display:block}
#zzfoot .edi .img .q span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.8;display:block;margin-top:.6rem}
#zzfoot .edi .txt{padding:clamp(2.4rem,5vw,4.2rem) clamp(1.8rem,4vw,3.6rem);display:flex;flex-direction:column;justify-content:center}
#zzfoot .edi h2{font-family:var(--mark);font-weight:200;font-size:clamp(2rem,3.6vw,3rem);line-height:.98;
                text-transform:uppercase;margin:1rem 0 .9rem}
#zzfoot .edi p{font-size:14px;color:var(--muted);max-width:46ch;margin-bottom:1.6rem}
#zzfoot .edi form{display:flex;align-items:center;gap:.8rem;border-bottom:1px solid var(--ink);padding-bottom:.7rem;max-width:420px}
#zzfoot .edi input{flex:1;border:none;background:none;outline:none;font-size:15px}
#zzfoot .edi input::placeholder{color:var(--muted)}
#zzfoot .edi button{display:flex;align-items:center;gap:.5rem;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
#zzfoot .edi button .ico{width:16px;height:16px}
#zzfoot .edi .fine{font-size:10.5px;color:var(--muted);margin-top:.9rem}
#zzfoot .cols{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr) 1.4fr;
              gap:clamp(1.4rem,3vw,3rem);padding:clamp(2.4rem,5vw,3.6rem) var(--pad-x) 2.4rem}
#zzfoot .fcol h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1.2rem}
#zzfoot .fcol ul{list-style:none;padding:0}#zzfoot .fcol li{margin:.7rem 0}#zzfoot .fcol a{font-size:13px}
#zzfoot .fcol a:hover{color:var(--signal)}
#zzfoot .worlds a{display:flex;align-items:center;gap:.5rem}
#zzfoot .worlds .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45}
#zzfoot .fbrand{border-left:.5px solid var(--line-soft);padding-left:clamp(1.4rem,3vw,3rem)}
#zzfoot .fbrand .mk{font-family:var(--mark);font-weight:700;font-size:22px;letter-spacing:-.03em;text-transform:uppercase;margin-bottom:.6rem}
#zzfoot .fbrand .mot{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
#zzfoot .fbrand .ln{display:flex;align-items:center;gap:.6rem;font-size:12.5px;margin:.6rem 0}
#zzfoot .fbrand .ln .ico{width:15px;height:15px;color:var(--muted)}
#zzfoot .fbrand .hrs{font-size:11px;color:var(--muted);margin-top:.5rem;line-height:1.5}
#zzfoot .strip{max-width:var(--maxw);margin:0 auto;border-top:.5px solid var(--line-soft);display:flex;
               justify-content:space-between;gap:1.5rem;padding:1.4rem var(--pad-x);flex-wrap:wrap;align-items:center}
#zzfoot .strip .soc{display:flex;gap:1.3rem}#zzfoot .strip .soc .ico{width:19px;height:19px}
#zzfoot .strip .soc a:hover{color:var(--signal)}
#zzfoot .legal{border-top:.5px solid var(--line)}
#zzfoot .legal-in{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:1rem;
                  padding:1.1rem var(--pad-x);font-size:11px;color:var(--muted);flex-wrap:wrap}
#zzfoot .legal-in .r b{font-family:var(--mark);font-weight:700;color:var(--ink)}
@media(max-width:900px){
  #zzfoot .edi{grid-template-columns:1fr}#zzfoot .edi .img{min-height:280px}
  #zzfoot .cols{grid-template-columns:repeat(2,1fr)}
  #zzfoot .fbrand{grid-column:1/-1;border-left:none;border-top:.5px solid var(--line-soft);
                  padding-left:0;padding-top:1.5rem;margin-top:.8rem}
}