/* ============================================================
   meravis · Agenda 2030 — Die Bauanleitung
   Scrollytelling. Fixe Layer + unsichtbarer Scroll-Track.
   ============================================================ */

/* ---------- Fonts: echte Aktiv Grotesk ---------- */
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-lightitalic.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-mediumitalic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Aktiv;src:url(../assets/fonts/aktiv-xbold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}
/* Handschrift-Akzent (CD-Refresh §4): selbst gehostet, kein Google-CDN (DSGVO) */
@font-face{font-family:Caveat;src:url(../assets/fonts/caveat-600-latin.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Caveat;src:url(../assets/fonts/caveat-600-latin-ext.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  /* CD-Refresh 2026 (Barre&Meyer) — Hexwerte aus dem CI-PDF gesampelt */
  --red:#E61928;      /* meravis-Rot (bleibt) */
  --red-mid:#B90F20;  /* abgedunkeltes Rot (Hover/Tiefe) */
  --berry:#5A043A;    /* Berry: Pflaume/Aubergine (neu) */
  --greige:#B5AEA9;   /* mittleres Neutral-Greige */
  --greige-web:#EAE6E4; /* Greige-Ruheflaeche (neu, neutral) */
  --ink:#111111;      /* neutrales Fast-Schwarz */
  --txt:#3A3A3A;      /* Fliesstext auf hell */
  --txt-dim:#6E6A67;  /* Sekundaertext auf hell */
  --hair:rgba(20,20,20,.14); /* Hairlines auf hell */
  --paper:#FFFFFF;    /* Basis = Weiss, grosszuegiger Weissraum */
  --paper-dim:#DDD8D4;
  --r-ebene:clamp(20px,2.6vw,38px); /* Ebenen-Mechanik: EIN grosses rundes Eck */
  --r-soft:12px;
  --ease:cubic-bezier(.7,0,.2,1);
  --pad:clamp(20px,5vw,80px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  font-family:Aktiv,"Helvetica Neue",Arial,sans-serif;
  background:var(--ink); color:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--red);color:#fff}
img{max-width:100%;display:block}

/* ============================================================
   FIXE LAYER
   ============================================================ */
.layer{position:fixed;inset:0;pointer-events:none}

/* Hintergrund: Farbe + Foto-DOF-Buehnen (crossfade pro Akt) */
/* radialer Licht-Wash statt toter Flaeche -> Tiefe im Rot */
#bg{z-index:1;background:radial-gradient(120% 100% at 50% 38%,#F0212F 0%,#D3121F 52%,#9C0C18 100%)}
/* In der hellen Kapitel-Welt (Web-CI) sind die Fotos weiche, helle Waschungen */
#bg .bg-photo{position:absolute;inset:-8%;background-size:cover;background-position:center;
  opacity:0;filter:blur(18px) saturate(.9) brightness(1.08) contrast(.96);transform:scale(1.12);will-change:opacity,transform}
#bg .bg-vign{position:absolute;inset:0;opacity:0;
  background:radial-gradient(125% 95% at 50% 40%,transparent 38%,rgba(6,4,5,.72) 100%)}

/* Marken-Stage: die 3 fliegenden Teile */
#stage{z-index:3;display:grid;place-items:center;perspective:1500px}
#mark{position:relative;width:min(44vmin,440px);aspect-ratio:165/185;color:#fff;
  transform-style:preserve-3d;will-change:transform;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.34)) drop-shadow(0 4px 12px rgba(0,0,0,.22))}
/* jedes Teil ist ein eigenes, deckungsgleiches SVG -> echte px + 3D-Transforms */
#mark .part{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform,opacity,filter}
#mark .part path{fill:currentColor;stroke:currentColor;stroke-width:1.8;
  paint-order:stroke;stroke-linejoin:round}

/* Copy-Layer: Text-Overlays je Akt, gestapelt */
#copy{z-index:4}
.ac{position:absolute;inset:0;opacity:0;visibility:hidden;padding:var(--pad);
  display:grid;will-change:opacity}
.ac.is-live{visibility:visible}

/* Grain */
#grain{z-index:7;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Flash (Uebergaenge) */
#flash{z-index:8;background:#fff;opacity:0}

/* Feiner Rahmen wie Editorial-Print */
#frame{z-index:6}
#frame::before{content:"";position:absolute;inset:clamp(10px,1.6vw,22px);
  border:1px solid rgba(255,255,255,.16);mix-blend-mode:overlay}

/* ---------- HUD ---------- */
#hud{z-index:9;display:flex;justify-content:space-between;align-items:flex-start;
  padding:clamp(18px,2.4vw,30px) clamp(22px,3vw,40px);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:11px;
  color:#fff} /* Farbe wird per Timeline mit der Welt getauscht (hell/dunkel) */
#hud .hud__l,#hud .hud__r{display:flex;gap:14px;align-items:center}
#hud .hud__mark{width:20px;height:22px;color:currentColor;overflow:visible}
#hud .hud__mark .part{opacity:.22;transition:opacity .5s var(--ease)}
#hud .hud__mark .part.on{opacity:1}
#hud .hud__pct{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.05em}
#hud .hud__brand{font-weight:800;letter-spacing:.02em}

/* Scroll-Hinweis */
.scrollcue{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:9;
  display:flex;flex-direction:column;align-items:center;gap:9px;color:#fff;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;pointer-events:none;mix-blend-mode:difference}
.scrollcue .bar{width:1px;height:42px;background:linear-gradient(#fff,transparent);
  transform-origin:top;animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ============================================================
   COPY / TYPOGRAFIE je Akt
   ============================================================ */
.kicker{font-size:clamp(11px,1vw,13px);font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.7)}
.kicker .dot{color:var(--red);font-weight:800}

/* ============================================================
   INTRO-SCREEN (v30) · heller Papier-Auftakt, getippter Text, Vorhang-Oeffnung
   ============================================================ */
#intro{z-index:7;overflow:hidden;pointer-events:none}
/* EINE ruhige Papier-Flaeche (Weiss/Greige) wie die restliche Kapitel-Welt.
   V35 (Bennet): das gekippte Greige-Feld ("grauer Querbalken") ist raus, und die
   zwei Vorhang-Haelften ebenfalls — der Film erscheint einfach, er wird nicht
   aufgezogen. */
#intro .ibg{position:absolute;inset:0;
  background:radial-gradient(120% 100% at 50% 30%,#FFFFFF 0%,var(--greige-web) 100%)}
#intro .icopy{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;
  text-align:center;padding:0 var(--pad);gap:clamp(14px,2vh,26px)}
#intro .ibig{font-weight:800;font-size:clamp(28px,5vw,72px);line-height:1.04;letter-spacing:-.025em;
  color:var(--ink);max-width:17ch;text-wrap:balance}
#intro .ibig .akz{color:var(--red)}
#intro .ismall{font-weight:300;font-size:clamp(14px,1.7vw,22px);line-height:1.45;
  color:var(--txt);max-width:42ch;text-wrap:balance}
#intro .icue{display:flex;align-items:center;gap:12px;margin-top:clamp(12px,3vh,34px);
  font-size:clamp(10px,.95vw,12px);font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--txt-dim)}
#intro .icue .bar{width:34px;height:1px;background:var(--red)}

/* HERO */
#ac-hero{place-items:center;text-align:center}
#ac-hero .hero__spacer{display:none} /* Copy sitzt mittig, kein Platzhalter fuers Mark noetig */
/* Prolog spielt in der hellen Haus-Studio-Welt -> Typo dunkel, Frage-Rot als Akzent.
   Copy steht MITTIG auf der Position der spaeteren Bildmarke, nicht unten am Rand. */
#ac-hero .hero__wrap{position:relative;display:grid;gap:12px;justify-items:center}
/* weiche Aufheller-Platte hinter der Hero-Copy, damit sie ueber den Haus-Modulen lesbar bleibt */
#ac-hero .hero__wrap::before{content:"";position:absolute;inset:-52% -30%;z-index:-1;
  background:radial-gradient(58% 72% at 50% 52%,rgba(244,242,240,.94) 0%,rgba(244,242,240,.72) 42%,rgba(244,242,240,0) 78%)}
#ac-hero .hero__agenda{font-weight:800;font-size:clamp(22px,3vw,44px);letter-spacing:-.01em;
  line-height:1.1;color:#1D1D1B;text-wrap:balance}
#ac-hero .hero__sub{font-weight:300;font-size:clamp(13px,1.4vw,17px);letter-spacing:.02em;
  color:rgba(30,30,30,.78);max-width:44ch;text-wrap:balance}
#ac-hero .hero__sub em{font-style:italic;font-weight:400}

/* Kapitel-Layout: Marke = Grafik auf einer Seite, Text = editoriale Spalte auf der anderen */
.chap__inner{position:absolute;inset:0;padding:clamp(70px,7vw,96px) var(--pad) clamp(56px,6vh,90px);
  display:flex;align-items:center}
.chap.right .chap__inner{justify-content:flex-end}
.chap.left  .chap__inner{justify-content:flex-start}
.chap.center .chap__inner{justify-content:center;align-items:flex-end;padding-bottom:clamp(32px,5vh,70px)}
.chap.center .chap__title{font-size:clamp(46px,7vw,96px)}
.chap__head{position:relative;display:grid;gap:clamp(8px,1vw,13px);width:min(500px,46vw);text-align:left}
.chap.center .chap__head{width:min(760px,90vw);text-align:center}
/* weicher Backplate hinter dem Text -> garantierter Kontrast ohne Kasten-Look (helle Welt) */
/* Der Verlauf muss INNERHALB der eigenen Box auf 0 laufen, sonst schneidet ihn der
   Elementrand ab und man sieht eine gerade Kante ueber dem Haus-Hintergrund.
   Rechnung: Nullstopp 78% x Radius 72% = 56% Boxbreite >= 50% Abstand zur Kante. */
.chap__head::before{content:"";position:absolute;inset:-26% -34%;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 78% at 50% 50%,rgba(249,247,245,.97),rgba(249,247,245,.8) 50%,rgba(249,247,245,0) 78%)}
.chap.center .chap__head::before{inset:-14% -12%;background:radial-gradient(100% 120% at 50% 60%,rgba(248,245,241,.85),rgba(248,245,241,0) 74%)}
.chap__num{font-weight:800;font-size:clamp(11px,1vw,14px);letter-spacing:.28em;color:var(--red-mid);text-transform:uppercase}
.chap__title{font-weight:800;line-height:.84;letter-spacing:-.03em;text-wrap:balance;
  font-size:clamp(52px,8vw,110px);color:var(--red);text-transform:uppercase}
.chap__lead{font-weight:400;font-size:clamp(15px,1.55vw,21px);line-height:1.32;text-wrap:balance;
  color:var(--txt);max-width:32ch}
.chap.center .chap__lead{max-width:44ch}
.chap__claim{font-weight:500;font-style:italic;font-size:clamp(17px,1.7vw,23px);text-wrap:balance;
  line-height:1.3;color:#1D1D1B;border-left:2px solid var(--red);padding-left:15px;max-width:32ch}
.chap.center .chap__claim{border-left:0;padding-left:0}

/* Pillar-Statement: wofuer der Baustein steht.
   CD-Refresh Route 2: keine Schraegen mehr — rote Ebene mit EINEM runden Eck. */
.pillar{position:relative;width:fit-content;max-width:100%;display:grid;gap:3px;
  padding:clamp(11px,1.2vw,15px) clamp(24px,2.4vw,36px) clamp(12px,1.3vw,16px) clamp(14px,1.5vw,20px);
  background:var(--red);color:#fff;
  border-top-right-radius:var(--r-ebene);border-bottom-left-radius:var(--r-soft);
  box-shadow:0 14px 34px rgba(185,15,32,.26)}
.pillar__k{font-weight:700;font-size:clamp(10px,.95vw,12px);letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.85)}
.pillar__v{font-weight:800;font-size:clamp(19px,2vw,28px);line-height:1.05;
  letter-spacing:-.01em;text-transform:uppercase}
/* Textstand 24.07. (Anmerkungen Fenja): das Band traegt jetzt einen ganzen Claim-Satz
   statt eines Zwei-Wort-Labels. Versalien + 28px wuerden das Band sprengen. */
.pillar--claim{max-width:min(100%,32ch)}
.pillar--claim .pillar__v{font-size:clamp(16px,1.65vw,23px);line-height:1.16;
  letter-spacing:-.005em;text-transform:none;text-wrap:balance}

/* Bausteine */
.blocks{display:grid;gap:0;margin-top:clamp(10px,1.5vw,20px);border-top:1px solid var(--hair)}
.block{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.4vw,20px);
  padding:clamp(10px,1.2vw,14px) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.block>div{min-width:0}
.block__k{font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--red);
  font-variant-numeric:tabular-nums;padding-top:3px}
.block__h{font-weight:700;font-size:clamp(15px,1.5vw,19px);color:#1D1D1B;margin-bottom:3px}
.block__t{font-weight:400;font-size:clamp(13.5px,1.3vw,16px);line-height:1.42;color:var(--txt)}

/* DISSOLVE / Transitions Overlay */
#ac-dissolve{place-items:center;text-align:center}
#ac-dissolve .diss__line{font-weight:300;font-size:clamp(20px,3.2vw,44px);line-height:1.12;
  letter-spacing:-.01em;color:#1D1D1B;max-width:16ch;text-wrap:balance}
#ac-dissolve .diss__line b{font-weight:800;color:var(--red)}
#ac-dissolve .diss__tag{margin-top:22px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--txt-dim)}

/* PROLOG: Haus-Bau-Scrub (liegt ueber dem roten BG, unter der Marke) */
/* Prolog-Footage laeuft NICHT randlos, sondern als gerundete Karte auf heller Greige-Buehne
   (meravis-CD: abgerundete Formen). Die Buehne gehoert zum Layer, damit beim Dissolve
   Karte und Untergrund zusammen ausblenden. */
#haus-frames{--cardm:clamp(22px,3.2vw,46px);position:fixed;inset:0;z-index:2;opacity:1;
  pointer-events:none;background:radial-gradient(120% 100% at 50% 30%,#FFFFFF 0%,#EAE6E4 100%)}
/* canvas ist ein REPLACED element: inset allein dehnt es nicht, es bliebe auf 300x150.
   Deshalb Rand explizit ueber calc aus den Kanten rechnen. */
#haus-frames canvas{position:absolute;top:var(--cardm);left:var(--cardm);
  width:calc(100% - 2*var(--cardm));height:calc(100% - 2*var(--cardm));
  display:block;border-radius:clamp(20px,2.2vw,34px);
  box-shadow:0 26px 70px rgba(29,29,27,.20),0 2px 8px rgba(29,29,27,.10)}

/* FINALE */
#finale-frames{position:fixed;inset:0;z-index:2;opacity:0;pointer-events:none}
#finale-frames canvas{width:100%;height:100%;object-fit:cover;display:block}
#finale-frames::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,11,12,.5) 0%,rgba(14,11,12,.28) 42%,rgba(14,11,12,.82) 100%)}
#ac-finale{place-items:end center;text-align:center;padding-bottom:clamp(46px,9vh,120px)}
#ac-finale .fin__frage{color:var(--red);font-size:clamp(13px,1.3vw,17px);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.7)}
#ac-finale .fin__title{font-weight:800;font-size:clamp(44px,7.2vw,110px);letter-spacing:-.03em;
  color:#fff;line-height:.94;text-shadow:0 6px 40px rgba(0,0,0,.4)}
#ac-finale .fin__line{font-weight:300;font-size:clamp(16px,1.9vw,24px);line-height:1.32;
  color:rgba(255,255,255,.94);max-width:30ch;margin:16px auto 0;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.5)}
#ac-finale .fin__dicht{font-weight:300;font-size:clamp(14px,1.5vw,19px);line-height:1.5;
  color:rgba(255,255,255,.9);margin:18px auto 0;max-width:56ch;text-shadow:0 2px 20px rgba(0,0,0,.5)}
#ac-finale .fin__dicht b{font-weight:700;color:#fff}
#ac-finale .fin__aufbruch{font-weight:500;font-size:clamp(17px,2vw,26px);color:#fff;margin:22px auto 0;
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
#ac-finale .script-akzent{font-family:Caveat,"Bradley Hand","Marker Felt",cursive;font-weight:600;
  color:var(--red);font-size:1.5em;line-height:1;display:inline-block;transform:rotate(-2deg);
  text-shadow:0 2px 18px rgba(0,0,0,.35);padding-left:.1em}
#ac-finale .fin__sig{margin-top:26px;font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.65)}

/* ============================================================
   SCROLL-TRACK (unsichtbar, gibt nur Scroll-Distanz)
   ============================================================ */
#track{position:relative;z-index:0}
.seg{width:100%}

/* ============================================================
   FEATURE-STAGES: pro Unterpunkt eine Spezial-Szene
   ============================================================ */
.chap__stage{position:absolute;z-index:6;pointer-events:none}
/* Die Stages haengen nicht mehr stur am Rand: ab ~1440px zieht sie der zweite Term
   nach innen, sodass ihre Innenkante knapp vor der Mitte steht — dieselbe Relation
   wie auf dem MacBook. Darunter gewinnt der Rand-Term, Mac-Ansicht bleibt identisch.
   Das Baustein-Panel (.chap__inner) bleibt bewusst aussen. */
#fs-mensch{left:max(calc(var(--pad) + 0.5vw),calc(50% - 640px));top:50%;margin-top:-31vh;width:min(600px,42vw);height:62vh}
#fs-raum{right:max(calc(var(--pad) + 0.5vw),calc(50% - 640px));top:50%;margin-top:-31vh;width:min(600px,42vw);height:62vh}
#fs-vision{left:max(calc(var(--pad) + 0.5vw),calc(50% - 640px));top:50%;margin-top:-31vh;width:min(600px,42vw);height:62vh}
/* Ab 1800px darf die Stage noch ein Stueck weiter nach innen, bis ihre Innenkante
   knapp ueber die Mitte reicht. Der Schwellwert liegt bewusst ueber 1440px, damit
   die MacBook-Ansicht von dieser Regel gar nicht erst erfasst wird. */
@media (min-width:1800px){
  #fs-mensch,#fs-vision{left:calc(50% - 560px)}
  #fs-raum{right:calc(50% - 560px)}
}
.stage__in{position:absolute;inset:0}
.feat{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;
  will-change:transform,opacity}
.r{color:var(--red)}

/* M1 · Portrait-Faecher */
.f-fan{display:block}
.fan{position:absolute;width:38%;aspect-ratio:3/4;border-radius:6px;overflow:hidden;margin:0;
  box-shadow:0 22px 50px rgba(60,35,25,.28);border:1px solid var(--hair)}
.fan img{width:100%;height:100%;object-fit:cover}
.fan figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75))}
.fan:nth-child(1){left:0%;top:22%}
.fan:nth-child(2){left:21%;top:6%;z-index:2}
.fan:nth-child(3){left:42%;top:16%;z-index:3}
.fan:nth-child(4){left:60%;top:30%}

/* M2 · Routine -> ZEIT */
.kin{display:grid;justify-items:center;gap:6px;text-align:center}
.kin-away{font-weight:300;font-size:clamp(19px,2.2vw,32px);color:var(--txt-dim)}
.kin-big{font-weight:800;font-size:clamp(64px,7.5vw,120px);line-height:1;letter-spacing:-.02em;color:var(--red)}
.kin-sub{font-weight:500;font-style:italic;font-size:clamp(15px,1.5vw,21px);color:var(--txt)}

/* M3 · Treppe waechst */
.stairs{display:flex;align-items:flex-end;gap:14px;height:56%}
.stair{width:clamp(86px,9vw,132px);height:100%;position:relative;transform-origin:bottom;
  background:#fff;
  border:1px solid var(--hair);border-top:3px solid var(--red);border-radius:6px;
  box-shadow:0 18px 40px rgba(60,35,25,.16)}
.stair.s1{height:42%}.stair.s2{height:66%}.stair.s3{height:92%}
.stair span{position:absolute;left:12px;right:12px;top:12px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#2A2624;line-height:1.45}

/* R1 · Stadt-Etagen */
.city{display:grid;gap:8px;width:min(330px,26vw);justify-items:stretch}
.city__roof{height:36px;background:linear-gradient(120deg,#F0212F,var(--red));
  clip-path:polygon(0 100%,0 62%,100% 0,100% 100%);border-radius:3px;
  box-shadow:0 14px 30px rgba(160,15,35,.3)}
.floor{padding:15px 18px;background:#fff;border:1px solid var(--hair);
  border-radius:6px;display:flex;justify-content:space-between;
  align-items:baseline;box-shadow:0 16px 34px rgba(60,35,25,.14)}
.floor b{font-weight:700;font-size:clamp(15px,1.4vw,19px);color:#1D1D1B}
.floor span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-dim)}
.city__cap{margin-top:8px;text-align:center;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;font-weight:700;color:var(--txt-dim)}

/* R2 · App-Chat */
.phone{width:min(270px,22vw);aspect-ratio:9/17.5;border-radius:36px;background:#0f0f13;
  border:1px solid rgba(255,255,255,.2);box-shadow:0 44px 90px rgba(0,0,0,.6),inset 0 0 0 3px #1b1b20;
  overflow:hidden;display:flex;flex-direction:column}
.phone__head{padding:18px 16px 12px;font-weight:700;font-size:13px;color:#fff;display:flex;gap:8px;
  align-items:center;border-bottom:1px solid rgba(255,255,255,.08);letter-spacing:.02em}
.phone__dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84}
.phone__thread{display:flex;flex-direction:column;padding:10px 0}
.bub{max-width:80%;margin:6px 12px;padding:10px 13px;border-radius:15px;font-size:12.5px;line-height:1.4}
.bub.user{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.bub.app{align-self:flex-start;background:#1e1e24;color:#ececec;border-bottom-left-radius:4px}

/* R3 · Heute/2030-Wipe */
.cmp{position:relative;width:min(520px,38vw);aspect-ratio:16/10;border-radius:16px;overflow:hidden;
  box-shadow:0 34px 70px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16)}
.cmp__side{position:absolute;inset:0;display:grid;place-content:center;gap:10px;padding:24px;text-align:center}
.cmp__side.heute{background:#17171c}
.cmp__side.morgen{background:linear-gradient(135deg,#F0212F,#8E0C18)}
.cmp__year{font-weight:800;font-size:clamp(30px,3.4vw,52px);color:#fff;letter-spacing:-.01em}
.cmp__txt{font-weight:300;font-size:clamp(13px,1.3vw,17px);color:rgba(255,255,255,.9);max-width:26ch}
.cmp__bar{position:absolute;top:0;bottom:0;left:0;width:3px;background:#fff;
  box-shadow:0 0 18px rgba(255,255,255,.8)}

/* V1 · Durchstreichen -> NEU DENKEN */
.swap{display:grid;justify-items:center;gap:10px;text-align:center}
.swap__old{position:relative;font-weight:400;font-size:clamp(34px,3.8vw,60px);color:var(--ink)}
.swap__old .strike{position:absolute;left:-3%;right:-3%;top:53%;height:6px;background:var(--red);
  transform:scaleX(0);transform-origin:left;border-radius:3px;box-shadow:0 2px 10px rgba(185,15,32,.4)}
.swap__new{font-weight:800;font-size:clamp(50px,6vw,96px);line-height:1;letter-spacing:-.02em;color:var(--red)}

/* V2 · Timeline 2026 -> 2030 */
.tline{width:min(620px,66vw);display:grid;gap:0}
.tline__big{text-align:center;font-weight:800;font-size:clamp(52px,6.4vw,100px);line-height:1;
  color:var(--red);margin-bottom:24px;font-variant-numeric:tabular-nums}
.tline__bar{position:relative;height:3px;background:rgba(30,24,20,.18);border-radius:2px}
.tline__fill{position:absolute;inset:0 auto 0 0;width:0%;border-radius:2px;
  background:linear-gradient(90deg,#F0212F,var(--red));box-shadow:0 0 14px rgba(230,25,40,.45)}
.tline__dots{display:flex;justify-content:space-between;margin-top:-8px;padding:0 1px}
.tline__dots i{width:13px;height:13px;border-radius:50%;background:#fff;
  border:2px solid rgba(30,24,20,.4);display:block}
.tline__years{display:flex;justify-content:space-between;margin-top:12px;font-size:11.5px;
  letter-spacing:.12em;font-weight:700;color:var(--txt-dim)}

/* V3 · MACHEN-Slam */
.slam{display:grid;justify-items:center;gap:8px;text-align:center}
.slam>span:first-child{font-weight:800;font-size:clamp(56px,7vw,120px);line-height:1;
  letter-spacing:-.02em;color:var(--red)}
.slam__small{font-weight:500;font-style:italic;font-size:clamp(16px,1.7vw,24px);color:var(--txt)}

/* PEOPLE · 2 Personen pro Baustein (Bild + Video-O-Ton) */
.f-people{display:grid;place-items:center}
.people__k{position:absolute;top:calc(50% - 31vh - 4px);left:50%;transform:translateX(-50%);
  white-space:nowrap;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  font-weight:700;color:var(--txt-dim)}
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);
  width:100%;align-items:start}
.pcard{position:relative;margin:0;border-radius:4px;overflow:visible}
.pcard video{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;border-radius:4px;
  border:1px solid var(--hair);box-shadow:0 24px 54px rgba(60,35,25,.24)}
/* Namensschild: weisses Band mit diagonaler Kante, wie die Baender auf meravis.de */
.pcard__tag{position:absolute;left:-10px;bottom:clamp(12px,1.4vw,20px);max-width:96%;
  display:grid;gap:1px;background:#fff;padding:9px 26px 10px 13px;
  border-left:3px solid var(--red);
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%);
  box-shadow:0 12px 28px rgba(60,35,25,.22)}
.pcard__role{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--red)}
.pcard__name{font-weight:700;font-size:clamp(14px,1.35vw,17px);color:#1D1D1B}
.pcard__q{font-weight:400;font-style:italic;font-size:clamp(11.5px,1.05vw,13px);
  line-height:1.35;color:var(--txt-dim);margin-top:2px}

/* ---------- Mobile / Reduced ---------- */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  #mark{width:min(64vmin,400px)}
  .chap__head{width:auto;max-width:none}
  .chap__inner{inset:0;padding:26px 22px 90px;align-content:end}
  /* Head kompakt halten, damit er nicht in die Feature-Stage hochwaechst */
  .chap__title{font-size:clamp(36px,11vw,64px)}
  .chap__lead{display:none}
  .chap__claim{display:none} /* mobil traegt das Pillar-Band die Botschaft */
  .pillar__v{font-size:clamp(16px,4.6vw,20px)}
  #haus-frames{--cardm:12px}
  #haus-frames canvas{border-radius:16px}
  #frame::before{inset:8px}
  /* Feature-Stages: oben mittig, kompakt */
  #fs-mensch,#fs-raum,#fs-vision{left:50%;right:auto;top:6%;margin:0 0 0 -44vw;width:88vw;height:34vh}
  .fan{width:34%}
  .phone{width:min(220px,44vw)}
  .cmp{width:min(440px,86vw)}
  .city{width:min(300px,74vw)}
  .stairs{gap:10px}.stair{width:clamp(70px,22vw,100px)}
  .tline{width:82vw}
  .pillar{padding:10px 26px 11px 12px}
  .people{gap:10px;width:min(340px,74vw)}
  .people__k{top:0}
  .pcard__tag{left:-6px;bottom:8px;padding:7px 20px 8px 10px}
  .pcard__q{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scrollcue .bar{animation:none}
}
.no-motion #mark .part{filter:none!important}

/* ============================================================
   V5 · STORYFADEN: neue Akte + Komponenten (CD-Refresh 2026)
   ============================================================ */

/* Kapitel-Frage (roter Faden: Frage in Rot, Antwort in Dunkel) */
.frage{color:var(--red);font-weight:600;font-size:clamp(15px,1.7vw,22px);
  letter-spacing:.02em;line-height:1.2;text-wrap:balance}

/* Bauchbinde (Berry, wie Whitepaper-Lower-Third, ein rundes Eck) */
.bauchbinde{display:inline-block;background:var(--berry);color:#fff;
  border-top-left-radius:var(--r-soft);padding:.55em 1.2em .6em;
  font-size:clamp(11px,1.05vw,13.5px);line-height:1.3;text-align:left}
.bauchbinde strong{font-weight:700}
.bauchbinde span{opacity:.85;font-weight:400}

/* Wandel-Akt: Frage + zweite Zeile */
#ac-dissolve .diss__frage{margin-bottom:18px}
#ac-dissolve .diss__line--2{font-size:clamp(15px,1.8vw,24px);color:var(--txt);margin-top:14px}

/* ---- HALTUNG (GF-Duo) ---- */
#ac-haltung{place-items:center;text-align:center}
.halt{display:grid;gap:clamp(12px,1.6vh,20px);justify-items:center;max-width:min(1040px,92vw)}
.halt__k{font-weight:300;font-size:clamp(14px,1.5vw,19px);color:var(--txt)}
.halt__k b{font-weight:700;color:#1D1D1B}
.halt__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,36px);align-items:start;margin-top:6px}
.gf{position:relative;margin:0;text-align:left;background:#fff;
  border-bottom-right-radius:var(--r-ebene);border-top-left-radius:var(--r-soft);
  overflow:hidden;box-shadow:0 26px 60px rgba(40,20,30,.18)}
.gf img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block}
.gf figcaption{position:relative;padding:clamp(14px,1.6vw,22px);background:var(--red);color:#fff}
.gf.gf--berry figcaption{background:var(--berry)}
.gf blockquote{font-weight:400;font-size:clamp(12.5px,1.25vw,16px);line-height:1.42;margin:0 0 12px}
.gf .bauchbinde{background:rgba(255,255,255,.14);border-top-left-radius:8px}
.halt__ueber{margin-top:8px;font-weight:300;font-style:italic;font-size:clamp(14px,1.5vw,19px);color:var(--txt)}
.halt__ueber b{font-weight:700;font-style:normal;color:#1D1D1B}

/* ---- FUNDAMENT (Zahlen) ---- */
#ac-fundament{place-items:center;text-align:center}
.fund{display:grid;gap:clamp(12px,1.8vh,22px);justify-items:center;max-width:min(880px,92vw)}
.fund__h{font-weight:800;font-size:clamp(28px,4.4vw,58px);letter-spacing:-.02em;line-height:1.02;
  color:#1D1D1B;text-wrap:balance}
.fund__zahlen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);margin-top:8px}
.zahl{display:grid;gap:6px;background:var(--greige-web);padding:clamp(18px,2.2vw,30px) clamp(22px,2.8vw,40px);
  border-top-right-radius:var(--r-ebene);border-bottom-left-radius:var(--r-soft);text-align:left}
.zahl b{font-weight:800;font-size:clamp(24px,3vw,44px);letter-spacing:-.02em;color:var(--red);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.zahl > span{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--txt-dim)}
.zahl b span{font-size:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.fund__copy{font-weight:300;font-size:clamp(14px,1.5vw,19px);line-height:1.45;color:var(--txt);max-width:52ch}
.fund__ueber{font-weight:300;font-style:italic;font-size:clamp(14px,1.5vw,19px);color:var(--txt-dim)}
.fund__ueber b{font-weight:700;font-style:normal;color:var(--red)}

/* ---- FILM-SZENE (1 Main Person pro Baustein) ---- */
.f-film{display:grid;place-items:center}
.film{position:relative;margin:0;width:min(430px,34vw)}
.film img{width:100%;aspect-ratio:4/4.4;object-fit:cover;display:block;
  border-top-left-radius:var(--r-ebene);border-bottom-right-radius:var(--r-ebene);
  box-shadow:0 30px 66px rgba(40,20,30,.24)}
/* Frage sitzt UEBER dem Foto (nie auf dem Gesicht), einheitlich fuer alle Film-Personen */
.film__frage{position:absolute;left:clamp(-20px,-1.6vw,-12px);top:0;transform:translateY(-104%);max-width:94%;
  background:var(--red);color:#fff;font-weight:700;font-size:clamp(13px,1.3vw,17px);line-height:1.3;
  padding:.7em 1.1em .75em;border-top-left-radius:18px;border-bottom-right-radius:18px;border-bottom-left-radius:6px;
  box-shadow:0 14px 32px rgba(185,15,32,.3);text-align:left}
/* Play-Button unten-mittig (Koerper/Brust), immer gesichtsfrei */
.film__play{position:absolute;left:50%;top:auto;bottom:clamp(58px,7vw,84px);transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);color:#1D1D1B;
  font-weight:700;font-size:clamp(11.5px,1.05vw,13.5px);letter-spacing:.06em;
  padding:.75em 1.3em;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.32);
  backdrop-filter:blur(6px);white-space:nowrap}
/* V40 · Das Dreieck ist GEZEICHNET, nicht getippt. Vorher stand hier das
   Zeichen U+25B6 ("▶"): iOS und Android ersetzen es durch ein farbiges
   Emoji, dadurch sass ein blaues bzw. grelles Kaestchen im weissen Kreis
   und der Play-Knopf sah auf jedem Handy nach Fehler aus. Ein
   clip-path-Dreieck rendert auf jedem Geraet gleich. */
.film__play i{position:relative;display:block;width:22px;height:22px;border-radius:50%;
  background:var(--red);font-style:normal;font-size:0;flex:0 0 auto}
.film__play i::before{content:"";position:absolute;left:52%;top:50%;
  transform:translate(-50%,-50%);width:8px;height:9px;background:#fff;
  clip-path:polygon(0 0,100% 50%,0 100%)}
.film__binde{position:absolute;left:0;bottom:clamp(10px,1.2vw,18px)}

/* ---- MANNSCHAFT (8er-Raster, Weil-Overlay = Ebenen-Mechanik) ---- */
#ac-mannschaft{place-items:center;text-align:center}
.mann{display:grid;gap:clamp(10px,1.6vh,18px);justify-items:center;max-width:min(1180px,94vw)}
.mann__h{font-weight:300;font-size:clamp(15px,1.7vw,22px);color:var(--txt)}
.mann__h b{font-weight:800;color:#1D1D1B}
.mann__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);width:100%;margin-top:4px}
.tile{position:relative;margin:0;overflow:hidden;border-top-left-radius:var(--r-soft);
  border-bottom-right-radius:var(--r-ebene);box-shadow:0 18px 44px rgba(40,20,30,.16)}
.tile img{width:100%;aspect-ratio:1/1.06;object-fit:cover;display:block}
.tile__weil{position:absolute;inset:auto 0 0 0;padding:12px 12px 12px;
  background:color-mix(in srgb,var(--berry) 88%,transparent);color:#fff;text-align:left;
  border-top-right-radius:16px} /* Start-Offset setzt GSAP (yPercent), kein CSS-Transform (Konflikt) */
.tile:nth-child(even) .tile__weil{background:color-mix(in srgb,var(--red) 88%,transparent)}
.tile__weil span{display:block;font-weight:400;font-size:clamp(10.5px,.95vw,12.5px);line-height:1.35;margin-bottom:6px}
.tile__weil b{font-weight:700;font-size:clamp(10px,.9vw,12px);letter-spacing:.04em}
/* ---- Belegschafts-Band ----------------------------------------------------
   Ebenen-Mechanik: eine abgerundete, transparente Rot-Flaeche, die Menschen
   stehen davor und ragen oben darueber hinaus. Die Fotos sind freigestellt und
   laufen unten weich aus, damit die unterschiedlichen Anschnitte der Vorlagen
   nicht sichtbar werden. Zwei Reihen laufen gegenlaeufig -> die Reihe wirkt
   endlos und traegt beliebig viele Personen, ohne dass ein Raster aufgeht. */
.crew{position:relative;width:100%;height:clamp(128px,16vh,196px);overflow:hidden;
  margin-top:clamp(4px,1vh,12px);border-radius:12px 12px 12px var(--r-ebene)}
.crew__band{position:absolute;left:0;right:0;bottom:0;height:58%;
  background:linear-gradient(180deg,rgba(230,25,40,0),rgba(230,25,40,.74) 46%,rgba(230,25,40,.88))}
.crew__rail{position:absolute;left:0;bottom:0;height:100%;display:flex;pointer-events:none}
.crew__run{display:flex;align-items:flex-end;height:100%;gap:clamp(2px,.5vw,10px);
  will-change:transform;animation:crewDrift 52s linear infinite}
.crew__run img{height:100%;width:auto;display:block}
.crew__rail--back{height:76%}
.crew__rail--back .crew__run{animation-duration:78s;animation-direction:reverse}
/* hintere Reihe: kleiner, entsaettigt, minimal unscharf — dort fallen schwache
   Vorlagen (Handyfoto, 500px-Datei) nicht mehr auf */
.crew__rail--back img{filter:saturate(.42) brightness(1.07) blur(.6px);opacity:.62}
@keyframes crewDrift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@media (prefers-reduced-motion:reduce){ .crew__run{animation:none} }
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){ .crew{height:clamp(104px,14vh,150px)} .crew__rail--back{display:none} }
/* Auf flachen Displays (MacBook, 900px hoch) passten Raster + Band + Closer nicht
   mehr in eine Bildhoehe. Die Kacheln werden dort etwas flacher, das Band schmaler. */
@media (max-height:1000px){
  .tile img{aspect-ratio:1/0.78}
  .mann__grid{gap:clamp(8px,.9vw,13px)}
  .crew{height:clamp(128px,15vh,168px)}
  .mann__closer{margin-top:2px;font-size:clamp(20px,2.5vw,32px)}
}

.mann__closer{margin-top:8px;font-weight:300;font-size:clamp(22px,3vw,40px);letter-spacing:-.01em;color:var(--txt)}
.mann__closer b{font-weight:800;color:var(--red)}

/* tline-Caption (Verdoppeln) */
.tline__cap{margin-top:12px;text-align:center;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;font-weight:700;color:var(--txt-dim)}

/* ---- Mobile ---- */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  /* Haltung: beide GF-Karten muessen als fixe Ebene in den Viewport passen -> HUD-Abstand + kompakt */
  #ac-haltung{align-content:start;padding-top:52px}
  .halt{gap:9px}
  .halt__frage{font-size:15px}
  .halt__k{font-size:12.5px}
  .halt__duo{grid-template-columns:1fr;gap:11px}
  .gf img{aspect-ratio:5/2.9;object-position:center 20%}
  .gf blockquote{font-size:11.5px;margin-bottom:9px}
  .gf figcaption{padding:11px 13px}
  .halt__ueber{font-size:13px}
  .fund__zahlen{grid-template-columns:1fr;gap:10px}
  /* Mannschaft muss als fixe Ebene in den Viewport passen -> HUD-Abstand + kompakter */
  #ac-mannschaft{align-content:start;padding-top:58px}
  .mann{gap:10px}
  .mann__frage{font-size:14px}
  .mann__h{font-size:13px}
  .mann__grid{grid-template-columns:repeat(2,1fr);gap:8px;margin-top:2px}
  .tile img{aspect-ratio:1/0.72}
  .tile__weil{padding:7px 9px}
  .tile__weil span{font-size:9px;margin-bottom:3px}
  .tile__weil b{font-size:9px}
  .mann__closer{font-size:17px;margin-top:2px}
  .film{width:min(320px,78vw)}
  .film__frage{left:-6px;font-size:12px}
  #ac-hero .hero__agenda{font-size:clamp(22px,7vw,32px)}
}

/* ============================================================
   V11 · 3D-SCROLLING-EXPERIENCE: Ambient-Ebenen + Wandel-Chips
   ============================================================ */

/* Ambient-Ebenen: riesige weiche CI-Flaechen tief im Raum, driften beim Scroll */
/* Die Flaechen sollen Tiefe geben, nicht als Rechteck lesbar sein. blur(2px) hat die
   geraden Kanten stehen lassen — vor allem ueber den unscharfen Haus-Hintergruenden
   sah man klare Abrisse. Die Maske laesst sie zum Rand hin auslaufen. */
.amb{position:absolute;border-top-right-radius:120px;border-bottom-left-radius:40px;
  will-change:transform;pointer-events:none;filter:blur(6px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,rgba(0,0,0,.5) 62%,transparent 86%);
          mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,rgba(0,0,0,.5) 62%,transparent 86%)}
.amb--1{width:44vw;height:44vw;left:-14vw;top:8vh;
  background:linear-gradient(135deg,rgba(230,25,40,.07),rgba(230,25,40,.02));transform:rotate(-6deg)}
.amb--2{width:36vw;height:36vw;right:-10vw;top:34vh;
  background:linear-gradient(135deg,rgba(90,4,58,.06),rgba(90,4,58,.015));transform:rotate(9deg)}
.amb--3{width:30vw;height:30vw;left:22vw;bottom:-18vh;
  background:linear-gradient(135deg,rgba(160,150,145,.12),rgba(160,150,145,.03));transform:rotate(-3deg)}

/* Wandel-Screen: klar geordnetes Grid statt Streutext */
.diss{display:grid;justify-items:center;gap:clamp(14px,2vh,24px);max-width:min(860px,92vw);text-align:center}
#ac-dissolve .diss__frage{margin-bottom:0}
.diss__drivers{display:flex;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;justify-content:center;
  perspective:900px}
.drv{display:inline-block;background:#fff;color:#1D1D1B;font-weight:700;
  font-size:clamp(12.5px,1.2vw,16px);letter-spacing:.02em;
  padding:.85em 1.5em .9em;box-shadow:0 16px 38px rgba(60,40,35,.14);
  border:1px solid var(--hair);will-change:transform}
.drv--1{border-top-left-radius:22px;border-bottom-right-radius:8px}
.drv--2{border-top-right-radius:22px;border-bottom-left-radius:8px}
.drv--3{border-bottom-right-radius:22px;border-top-left-radius:8px}
#ac-dissolve .diss__tag{margin-top:4px;font-size:clamp(14px,1.5vw,19px);letter-spacing:.01em;
  text-transform:none;color:var(--txt);font-weight:300}
#ac-dissolve .diss__tag b{font-weight:700;color:var(--red)}

@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  .diss__drivers{flex-direction:column;gap:8px}
  .amb--1{width:80vw;height:80vw}
  .amb--2{width:64vw;height:64vw}
}

/* ============================================================
   V11.1 · KONTRAST-FIX Feature-Szenen (Fund Moritz: "sieht man null")
   Text-basierte Features bekommen eine weiche Licht-Platte + dunklere Typo.
   ============================================================ */
.feat .kin,.feat .swap,.feat .slam,.feat .tline{position:relative}
.feat .kin::before,.feat .swap::before,.feat .slam::before,.feat .tline::before{
  content:"";position:absolute;inset:-16% -22%;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 82% at 50% 50%,rgba(250,248,246,.96),rgba(250,248,246,.6) 55%,rgba(250,248,246,0) 80%)}
.kin-away{color:#2E2D2C;font-weight:400}
.kin-sub{color:#2E2D2C}
.slam__small{color:#2E2D2C}
.tline__years{color:#4A4744}
.tline__cap{color:#4A4744}
.city__cap{color:#4A4744}

/* ---- Mannschaft-Hover: Zoom + Glanz-Sweep + O-Ton-Video der Person ---- */
.tile{cursor:pointer;transition:box-shadow .45s var(--ease)}
.tile__in{position:relative;height:100%;will-change:transform;transform-origin:50% 60%}
.tile__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tile__in::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.42) 50%,transparent 68%);
  transform:translateX(-130%) skewX(-8deg)}
.tile.is-hover .tile__in::after{animation:tsweep .85s var(--ease) forwards}
@keyframes tsweep{to{transform:translateX(130%) skewX(-8deg)}}
.tile.is-hover{box-shadow:0 30px 70px rgba(90,4,58,.32)}

/* ---- Film-Overlay: voller Interviewfilm im CI-Rahmen ---- */
.film-ov{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(16px,4vw,64px);
  background:rgba(17,17,17,.82);backdrop-filter:blur(8px);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s;pointer-events:none}
.film-ov.is-on{opacity:1;visibility:visible;pointer-events:auto}
.film-ov__box{position:relative;width:min(1100px,94vw);
  border-top-left-radius:var(--r-ebene);border-bottom-right-radius:var(--r-ebene);
  overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,.6);transform:scale(.96);transition:transform .4s var(--ease)}
.film-ov.is-on .film-ov__box{transform:scale(1)}
.film-ov__frame{display:block;width:100%;aspect-ratio:16/9;background:#000;border:0}
.film-ov__binde{position:absolute;left:0;top:clamp(14px,2vw,22px);z-index:2;background:var(--berry);color:#fff;
  border-top-right-radius:16px;border-bottom-right-radius:16px;padding:.55em 1.2em .6em;font-size:clamp(12px,1.15vw,15px);pointer-events:none}
.film-ov__binde strong{font-weight:700}
.film-ov__binde span{opacity:.85}
.film-ov__x{position:absolute;top:14px;right:16px;z-index:2;width:44px;height:44px;border:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.92);color:#111;font-size:26px;line-height:1;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.film-ov__x:hover{background:#fff}
/* Film-Karte im Kapitel als klickbar signalisieren */
.f-film .film{transition:transform .4s var(--ease)}
.f-film .film:hover{transform:translateY(-4px)}

/* Film-Overlay Platzhalter (solange kein Bunny-Film hinterlegt) */
.film-ov__soon{display:none}
.film-ov.is-empty .film-ov__frame{display:none}
.film-ov.is-empty .film-ov__soon{display:grid;place-items:center;width:min(1100px,94vw);aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--berry),#3a0326);color:#fff;font-weight:600;
  font-size:clamp(14px,1.6vw,20px);text-align:center;padding:2rem}

/* Play-Badge auf Mannschaft-Kacheln (Klick -> voller Film) */
.tile__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.6);
  width:clamp(44px,4vw,60px);height:clamp(44px,4vw,60px);border-radius:50%;
  background:rgba(230,25,40,.94);color:#fff;display:grid;place-items:center;z-index:3;
  box-shadow:0 10px 30px rgba(185,15,32,.5);opacity:0;pointer-events:none;transition:none}
/* Dreieck gezeichnet statt getippt — siehe .film__play i (Emoji-Falle). */
.tile__play i{position:relative;display:block;width:100%;height:100%;font-size:0;font-style:normal}
.tile__play i::before{content:"";position:absolute;left:54%;top:50%;
  transform:translate(-50%,-50%);width:clamp(13px,1.3vw,17px);height:clamp(15px,1.5vw,19px);
  background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.tile.is-hover .tile__play{opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.tile:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* V40 · Auf Touch bleibt die Marke sichtbar (ohne Hover gibt es keinen anderen
   Hinweis, dass die Kachel einen Film oeffnet) — aber nicht mehr als roter
   Vollkreis mitten im Gesicht, sondern als ruhige Marke unten rechts, in
   derselben Sprache wie die Kapitel-Karten: weisser Kreis, rotes Dreieck.
   Dieser Block deckt auch das Handy im QUERFORMAT ab: 844x390 erfuellt weder
   `max-width:820px` noch `orientation:portrait`, landet also in der
   Desktop-Welt und wuerde sonst ganz ohne Play-Hinweis dastehen. */
@media (hover:none){
  .tile__play{opacity:1;top:auto;bottom:8px;right:8px;left:auto;transform:none;
    width:30px;height:30px;background:rgba(255,255,255,.95);
    box-shadow:0 6px 16px rgba(30,20,25,.30)}
  .tile__play i::before{width:10px;height:12px;background:var(--red)}
}

/* ============================================================
   V17 · f-zeit als saubere CI-Greige-Karte + Uhr-Sweep-Zeiteffekt (statt Flash)
   Fund Moritz: unscharfer Büro-BG raus, Text größer/klarer, cooler Zeit-Effekt.
   ============================================================ */
.feat .kin{position:relative;z-index:1;isolation:isolate;
  background:var(--greige);
  border-radius:10px 10px 10px var(--r-ebene);
  padding:clamp(30px,4.4vw,66px) clamp(34px,5.4vw,88px);
  box-shadow:0 34px 90px rgba(17,17,17,.16);
  overflow:hidden}
.feat .kin::before{content:none} /* alte Radial-Platte nicht mehr nötig, Karte ist solide */
.kin-away,.kin-big,.kin-sub{position:relative;z-index:3}
.kin-away{font-weight:500;font-size:clamp(30px,3.7vw,58px);line-height:1.02;color:#17140F;letter-spacing:-.01em}
.kin-big{font-weight:800;font-size:clamp(96px,12vw,190px);line-height:.9;letter-spacing:-.03em;color:var(--red)}
.kin-sub{font-weight:500;font-style:italic;font-size:clamp(19px,2vw,30px);color:#2A2621}

/* Uhr-Sweep + Zeit-Ringe (nur GPU-Transforms) */
.zeit-fx{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none;opacity:0}
.zeit-hand{position:absolute;width:150%;aspect-ratio:1;border-radius:50%;
  background:conic-gradient(from -90deg,rgba(230,25,40,0) 0deg,rgba(230,25,40,0) 292deg,rgba(230,25,40,.06) 320deg,rgba(230,25,40,.34) 352deg,rgba(230,25,40,.7) 360deg);
  transform:rotate(-100deg);will-change:transform}
.zeit-ring{position:absolute;width:38%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(230,25,40,.5);transform:scale(.2);opacity:0;will-change:transform,opacity}
.zeit-ring.r2{width:22%;border-color:rgba(90,4,58,.45)}

/* ============================================================
   V17 · Wandel-Payoff: "Unsere Antwort" als kräftiges rotes CI-Panel (statt blasser Fußzeile)
   ============================================================ */
#ac-dissolve .diss__tag{display:none} /* alte Fußzeile raus */
.diss__antwort{margin-top:clamp(26px,3.4vw,48px);display:inline-flex;flex-direction:column;gap:10px;
  align-items:flex-start;text-align:left;
  background:var(--red);color:#fff;
  padding:clamp(22px,2.6vw,38px) clamp(26px,3.4vw,52px);
  border-radius:12px 12px 12px var(--r-ebene);
  box-shadow:0 30px 74px rgba(185,15,32,.34)}
.diss__antwort-label{font-size:clamp(11px,1vw,13px);letter-spacing:.32em;text-transform:uppercase;font-weight:700;opacity:.86}
.diss__antwort-h{font-weight:300;line-height:1.04;font-size:clamp(30px,4.6vw,72px);letter-spacing:-.015em}
.diss__antwort-h b{font-weight:800}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){ .diss__antwort{width:100%} }

/* ============================================================
   V18 · Fundament ohne Zahlen: drei qualitative Säulen (meravis will keine €-Zahlen zeigen)
   ============================================================ */
.fund__saeulen{grid-template-columns:repeat(3,1fr)}
.fund__saeulen .zahl{gap:8px}
.fund__saeulen .zahl b{font-size:clamp(19px,2.1vw,30px);line-height:1.05;letter-spacing:-.01em}
.fund__saeulen .zahl > span{text-transform:none;letter-spacing:.01em;font-weight:400;font-size:clamp(12px,1.2vw,14px);color:var(--txt)}
.fund__copy{margin-bottom:6px}
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){ .fund__saeulen{grid-template-columns:1fr} }

/* ============================================================
   V19 · Emotional-Pass: ZEIT-Szene mit Mensch-Foto + CI-Überlagerung,
   Timeline auf Berry-Panel, GEMEINSAM mit Team-Chips auf Rot,
   Higgsfield-Architektur-Module als Ambient-Backgrounds.
   ============================================================ */

/* ---- ZEIT für Menschen: volle emotionale Foto-Bühne ---- */
.kin--emo{background:none;padding:clamp(44px,6vw,96px) clamp(38px,5.6vw,92px);
  min-height:min(66vh,620px);display:grid;align-content:center;justify-items:center;
  border-radius:14px 14px 14px var(--r-ebene);overflow:hidden;
  box-shadow:0 40px 110px rgba(17,17,17,.3)}
.kin__bg{position:absolute;inset:0;z-index:0}
.kin__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
/* CI-Überlagerung wie der Bauzaun im CD: Rot -> Berry, transparent über dem Foto */
.kin__tint{position:absolute;inset:0;z-index:1;
  background:linear-gradient(112deg,rgba(230,25,40,.82) 0%,rgba(230,25,40,.55) 46%,rgba(90,4,58,.5) 100%)}
.kin--emo .kin-away{color:#fff;text-shadow:0 2px 18px rgba(90,4,58,.35)}
.kin--emo .kin-big{color:#fff;font-size:clamp(100px,12.5vw,200px);text-shadow:0 6px 40px rgba(90,4,58,.4)}
.kin--emo .kin-big .r{color:#fff}
.kin--emo .kin-sub{color:#fff;font-size:clamp(22px,2.4vw,36px);font-weight:500}
.kin--emo .zeit-hand{background:conic-gradient(from -90deg,rgba(255,255,255,0) 0deg,rgba(255,255,255,0) 292deg,rgba(255,255,255,.08) 320deg,rgba(255,255,255,.4) 352deg,rgba(255,255,255,.85) 360deg)}
.kin--emo .zeit-ring{border-color:rgba(255,255,255,.7)}
.kin--emo .zeit-ring.r2{border-color:rgba(255,255,255,.5)}

/* ---- Verdoppeln-Timeline: Berry-CI-Panel statt weißer Waschfläche ---- */
.feat .tline{background:var(--berry);color:#fff;
  border-radius:14px 14px 14px calc(var(--r-ebene)*0.8);
  padding:clamp(30px,4vw,58px) clamp(34px,5vw,80px);
  box-shadow:0 34px 90px rgba(90,4,58,.35)}
.feat .tline::before{content:none}
.tline__big{color:#fff}
.tline__bar{background:rgba(255,255,255,.22)}
.tline__fill{background:var(--red)}
.tline__dots i{background:#fff;border-color:var(--berry)}
.tline__years span{color:rgba(255,255,255,.72)}
.tline__cap{color:#fff}

/* ---- GEMEINSAM: rotes CI-Panel + das echte Team klackt herein ---- */
.feat .swap{background:var(--red);color:#fff;
  border-radius:14px 14px 14px var(--r-ebene);
  padding:clamp(36px,5vw,72px) clamp(38px,5.4vw,88px);
  box-shadow:0 36px 100px rgba(185,15,32,.4);display:grid;justify-items:center;gap:14px}
.feat .swap::before{content:none}
.swap__old{color:rgba(255,255,255,.78)}
.swap__old .strike{background:#fff}
.swap__new{color:#fff;text-shadow:0 4px 30px rgba(90,4,58,.35)}
.swap__team{display:flex;gap:clamp(8px,1vw,14px);margin-top:clamp(10px,1.6vw,20px);flex-wrap:wrap;justify-content:center}
.swap__chip{width:clamp(44px,4.6vw,66px);height:clamp(44px,4.6vw,66px);object-fit:cover;
  border-radius:10px 10px 10px 20px;border:2px solid rgba(255,255,255,.65);
  box-shadow:0 10px 26px rgba(90,4,58,.35)}

/* ---- Architektur-Module (Higgsfield-Assets) als Ambient-Ebenen ---- */
.frag{position:absolute;pointer-events:none;opacity:.5;will-change:transform;
  filter:drop-shadow(0 30px 60px rgba(17,17,17,.18))}
.frag--1{width:clamp(180px,17vw,320px);left:-3vw;top:12vh}
.frag--2{width:clamp(200px,19vw,360px);right:-4vw;top:30vh}
.frag--3{width:clamp(230px,22vw,420px);left:6vw;bottom:-12vh;opacity:.42}
.frag--4{width:clamp(170px,16vw,300px);right:10vw;bottom:-20vh;opacity:.45}
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){ .frag{display:none} }
html.rm .frag{display:none}

/* ============================================================
   V20 · Menschen-Groß-Screen, ZEIT-3-Wort-Beats (cute Anims), GEMEINSAM 4+4
   ============================================================ */

/* ---- "Menschen." als eigener großer Moment (nach dem Fundament) ---- */
.fund__ueber{font-weight:300;font-style:italic;font-size:clamp(15px,1.6vw,21px);color:var(--txt-dim);margin-top:14px}
.fund__menschen{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(80px,15vw,260px);color:var(--red);z-index:6;pointer-events:none;opacity:0}

/* ---- ZEIT statt Routine: 3 Wort-Beats, cute Animationen, dann groß mittig ---- */
.feat .f-zeit,.f-zeit{overflow:visible}
.zeit3{position:relative;width:min(78vw,760px);min-height:min(60vh,560px);display:grid;place-items:center}
.zw{position:absolute;display:grid;justify-items:center;gap:clamp(20px,2.6vw,40px);text-align:center}
.zw__w{font-weight:700;font-size:clamp(38px,5.2vw,88px);letter-spacing:-.02em;color:#17140F;line-height:1}
.za{width:clamp(78px,8vw,120px);height:clamp(78px,8vw,120px);display:grid;place-items:center;position:relative}
/* Warteschleife: pulsierende Punkte */
.za-loader{gap:0}
.za-loader span{position:absolute;width:18%;height:18%;border-radius:50%;background:var(--red);
  left:50%;top:12%;transform-origin:0 190%;animation:zaWait 1.1s linear infinite}
.za-loader span:nth-child(1){transform:rotate(0deg);animation-delay:-.9s}
.za-loader span:nth-child(2){transform:rotate(120deg);animation-delay:-.55s}
.za-loader span:nth-child(3){transform:rotate(240deg);animation-delay:-.2s}
@keyframes zaWait{0%,100%{opacity:.25}45%{opacity:1}}
/* Formulare: Zeilen füllen sich, Haken setzt */
.za-form{flex-direction:column;gap:14%;border:2px solid rgba(23,20,15,.14);border-radius:12px;padding:16% 14%}
.za-form i{display:block;height:12%;min-height:5px;width:100%;border-radius:4px;background:rgba(23,20,15,.16);position:relative;overflow:hidden}
.za-form i::after{content:"";position:absolute;inset:0;width:0;background:var(--red);border-radius:4px;animation:zaFill 2.4s ease-in-out infinite}
.za-form i:nth-child(2)::after{animation-delay:.3s}
.za-form i:nth-child(3)::after{animation-delay:.6s;width:60%}
.za-form b{position:absolute;right:-10%;bottom:-10%;width:44%;height:44%;border-radius:50%;background:var(--red);
  display:grid;place-items:center;transform:scale(0);animation:zaCheck 2.4s ease-in-out infinite}
.za-form b::after{content:"";width:42%;height:22%;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(6%,-18%)}
@keyframes zaFill{0%{width:0}55%,100%{width:100%}}
@keyframes zaCheck{0%,60%{transform:scale(0)}72%{transform:scale(1.2)}80%,100%{transform:scale(1)}}
/* Routine: Kreispfeil dreht endlos */
.za-loop svg{width:100%;height:100%;fill:none;stroke:var(--red);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  animation:zaSpin 1.6s linear infinite;transform-origin:50% 50%}
@keyframes zaSpin{to{transform:rotate(360deg)}}
/* Zeit für Menschen: groß, mittig, dominant */
.zeit-big{position:absolute;display:grid;justify-items:center;gap:6px;text-align:center}
.zeit-big__z{font-weight:800;font-size:clamp(110px,15vw,240px);line-height:.85;letter-spacing:-.04em;color:var(--red)}
.zeit-big__z .r{color:var(--berry)}
.zeit-big__s{font-weight:500;font-style:italic;font-size:clamp(24px,2.8vw,44px);color:#2A2621}

/* ---- GEMEINSAM Team-Chips: sauberes 4+4-Raster statt 7+1 ---- */
.swap__team{display:grid !important;grid-template-columns:repeat(4,auto);justify-content:center;
  gap:clamp(10px,1.2vw,16px);max-width:min(88%,560px)}

/* ============================================================
   V21 · CI-Transparenz (Deckraft runter ~85%, Guideline: transparente Überlagerung),
   MACHEN als cooles CI-Panel, klarer Lade-Spinner, ZEIT 2 Beats
   ============================================================ */

/* ---- CI-Flächen halbtransparent statt solide (CD-Refresh: ~85% Überlagerung) ---- */
.feat .swap{background:rgba(230,25,40,.84)}          /* GEMEINSAM */
.feat .tline{background:rgba(90,4,57,.84)}           /* Verdoppeln-Timeline (Berry) */
.diss__antwort{background:rgba(230,25,40,.85)}       /* Wandel-Antwort */
#ac-mensch .chap__claimwrap,.chap__badge{}           /* (Label-Panels bleiben, kleine Akzente) */

/* ---- MACHEN: cooles rotes CI-Panel statt grauem Blur-Background ---- */
.feat .slam{position:relative;overflow:hidden;display:grid;justify-items:center;gap:clamp(14px,1.8vw,24px);
  background:rgba(230,25,40,.85);
  border-radius:14px 14px 14px var(--r-ebene);
  padding:clamp(40px,5.2vw,80px) clamp(40px,5.6vw,96px);
  box-shadow:0 40px 104px rgba(185,15,32,.4)}
.feat .slam::before{content:none}
.slam>span:first-child{color:#fff;text-shadow:0 6px 34px rgba(90,4,58,.4);position:relative}
.slam>span:first-child::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:.09em;
  background:#fff;border-radius:2px;transform:scaleX(0);transform-origin:left center}
.slam.is-stamped>span:first-child::after{transform:scaleX(1);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.slam__small{color:rgba(255,255,255,.92)}

/* ---- Warteschleife: klarer Lade-Spinner (statt undeutlicher Punkte) ---- */
.za-spin svg{width:100%;height:100%;fill:none;stroke-width:4.4;stroke-linecap:round}
.za-track{stroke:rgba(23,20,15,.12)}
.za-arc{stroke:var(--red);transform-origin:24px 24px;animation:zaSpin .85s linear infinite}
.za-loop svg{stroke-width:3.6}

/* ============================================================
   V22.1 · Finale zurückhaltender + roter Frage-Scrim (Fund Moritz: überzogen/unlesbar)
   ============================================================ */
/* stärkerer, gezielter Scrim unten (wo der ganze Outro-Text sitzt) */
#finale-frames::after{background:linear-gradient(180deg,rgba(12,10,11,.34) 0%,rgba(12,10,11,.16) 24%,rgba(12,10,11,.52) 56%,rgba(12,10,11,.9) 100%)}
#ac-finale::before{content:"";position:fixed;left:0;right:0;bottom:0;height:66%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,7,8,0) 0%,rgba(9,7,8,.5) 62%,rgba(9,7,8,.82) 100%)}
#ac-finale > div{position:relative;z-index:3}
/* Glow-Schatten deutlich zurücknehmen (weniger überzogen) */
#ac-finale .fin__frage{text-shadow:0 1px 10px rgba(0,0,0,.9);margin-bottom:12px}
#ac-finale .fin__title{text-shadow:0 2px 14px rgba(0,0,0,.45)}
#ac-finale .fin__line,#ac-finale .fin__dicht,#ac-finale .fin__aufbruch{text-shadow:0 1px 10px rgba(0,0,0,.5)}
/* Script-Akzent ruhiger: kleiner, kaum gedreht, weniger Schatten */
#ac-finale .script-akzent{font-size:1.22em;transform:rotate(-1deg);text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* V22.2 · GROSSE Frage "Und wer baut das alles?" vor dem grossen "Menschen." */
.fund__frage2{position:fixed;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  font-weight:800;letter-spacing:-.02em;line-height:.96;font-size:clamp(46px,8vw,132px);
  color:#141210;z-index:6;pointer-events:none;opacity:0;padding:0 5vw}

/* ---- f-klima · Bestand mit Klimapfad (Raum, Block 03) ---- */
.feat .klima{background:var(--berry);color:#fff;width:min(520px,40vw);border-radius:16px;
  padding:clamp(22px,2.2vw,32px);display:grid;gap:clamp(12px,1.4vw,18px);
  box-shadow:0 24px 60px -28px rgba(90,4,58,.6)}
.klima__big{font-weight:800;font-size:clamp(30px,3.4vw,50px);line-height:1;letter-spacing:-.01em}
.klima__big .r{color:var(--red)}
/* Harte Grenze: was im Diagramm schiefgeht, bleibt im Diagramm und landet nie
   als schwebender Punkt neben der Karte. */
.klima__chart{width:100%;overflow:hidden}
/* overflow:hidden als Netz: nichts im Diagramm ragt legitim heraus, und so kann
   ein Marker, dessen Motion-Animation nicht greift, nie ausserhalb der Karte landen. */
.klima__chart svg{width:100%;height:auto;display:block;overflow:hidden}
/* Startzustand = unsichtbar. Die Tweens laufen mit immediateRender:false, d.h. der
   From-State greift erst wenn der Scrub sie erreicht — ohne diese Werte blitzt das
   fertige Diagramm beim Eintritt kurz auf, verschwindet und zeichnet sich dann neu.
   WICHTIG: nur Deckkraft, keine CSS-Transforms. transform-origin am SVG-Kreis
   bezieht sich ohne transform-box:fill-box auf das SVG-Koordinatensystem, nicht auf
   den Kreis — dadurch sind die Punkte vorher aus dem Diagramm gewandert. Das Skalieren
   macht GSAP, das rechnet den Ursprung fuer SVG korrekt aus. */
.klima__path{stroke-dasharray:1;stroke-dashoffset:1}
/* transform-box:fill-box ist Pflicht, sobald etwas im SVG skaliert wird — ohne das
   bezieht sich der Ursprung auf das SVG-Koordinatensystem und die Form fliegt weg. */
.klima__stock rect{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.klima__dot{fill:#fff;opacity:0;transform-box:fill-box;transform-origin:50% 50%}
.klima__dot--end{fill:var(--red);stroke:#fff;stroke-width:2}
.klima__marker{fill:var(--red);stroke:#fff;stroke-width:2.5;opacity:0;visibility:hidden;
  filter:drop-shadow(0 0 7px rgba(230,25,40,.85))}
.klima__ax{fill:rgba(255,255,255,.72);font-size:13px;font-weight:600}
.klima__ax--end{fill:#fff;font-weight:800}
.klima__cap{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82)}
@media(max-width:900px){ .feat .klima{width:86vw} }

/* ============================================================
   V23 · People-Video eingebaut: Menschen-Moment (fullscreen) + Zeit-Backdrop
   ============================================================ */
#people-vid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;opacity:0;pointer-events:none}
.fund__menschen{color:#fff;text-shadow:0 6px 40px rgba(90,4,58,.55)}   /* weiß über dem Rot-People-Video */
.zeit3{position:relative;isolation:isolate}
.zeit-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:14px 14px 14px var(--r-ebene);z-index:0;opacity:0}
.zeit-big{z-index:3}
.zeit-big__z,.zeit-big__z .r,.zeit-big__s{color:#fff}
.zeit-big__s{text-shadow:0 2px 18px rgba(90,4,58,.5)}
.zeit-big__z{text-shadow:0 6px 40px rgba(90,4,58,.5)}

/* Fallback: rotes Feld hinter dem People-Video, falls Decode hakt */
#people-vid,.zeit-vid{background:#E61928}


/* ============================================================
   V24 · Video-IN-Text: das Wort ist das Fenster aufs People-Video (Masken-Effekt)
   ============================================================ */
#people-vid{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:6;opacity:0;pointer-events:none;background:#E61928;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201400%20360%27%3E%3Ctext%20x%3D%27700%27%20y%3D%27280%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-weight%3D%27900%27%20font-size%3D%27300%27%20letter-spacing%3D%27-6%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EUnser%20Team.%3C%2Ftext%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201400%20360%27%3E%3Ctext%20x%3D%27700%27%20y%3D%27280%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-weight%3D%27900%27%20font-size%3D%27300%27%20letter-spacing%3D%27-6%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EUnser%20Team.%3C%2Ftext%3E%3C%2Fsvg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.fund__menschen{display:none}

.zeit-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;background:#E61928;border-radius:0;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%20460%27%3E%3Ctext%20x%3D%27450%27%20y%3D%27350%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-weight%3D%27900%27%20font-size%3D%27380%27%20letter-spacing%3D%27-6%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EZeit.%3C%2Ftext%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20900%20460%27%3E%3Ctext%20x%3D%27450%27%20y%3D%27350%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-weight%3D%27900%27%20font-size%3D%27380%27%20letter-spacing%3D%27-6%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EZeit.%3C%2Ftext%3E%3C%2Fsvg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.zeit-big{display:none}

/* ---- f-werden · Rohfassung -> Reinform (Vision, Block 03) ---- */
.feat .werden{background:var(--berry);color:#fff;width:min(440px,32vw);border-radius:16px;
  padding:clamp(26px,2.6vw,38px);display:grid;justify-items:center;gap:clamp(16px,1.8vw,24px);
  box-shadow:0 24px 60px -28px rgba(90,4,58,.6);text-align:center}
.werden__kick{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.werden__kick .machen{color:#fff;font-weight:800}
.werden__mark{width:clamp(112px,11vw,158px)}
.werden__mark svg{width:100%;height:auto;display:block;overflow:visible}
.werden__p{fill:#fff;stroke:#fff;stroke-width:2.4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.werden__cap{font-size:clamp(15px,1.5vw,20px);line-height:1.2;color:#fff}
.werden__cap b{font-weight:800}
@media(max-width:900px){ .feat .werden{width:82vw} }

/* V24.1 · Menschen-Wort mit Rand (nicht bis zum Rand) */
#people-vid{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201780%20380%27%3E%3Ctext%20x%3D%27890%27%20y%3D%27292%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-weight%3D%27900%27%20font-size%3D%27300%27%20letter-spacing%3D%27-6%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EUnser%20Team.%3C%2Ftext%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201780%20380%27%3E%3Ctext%20x%3D%27890%27%20y%3D%27292%27%20font-family%3D%27Arial%2CHelvetica%2Csans-serif%27%20font-weight%3D%27900%27%20font-size%3D%27300%27%20letter-spacing%3D%27-6%27%20text-anchor%3D%27middle%27%20fill%3D%27%23ffffff%27%3EUnser%20Team.%3C%2Ftext%3E%3C%2Fsvg%3E")}

/* V26 · Punkt 3 (Machen) schlicht: klare Typo statt Logo-Zeichnen */
.werden--schlicht{display:grid;justify-items:center;gap:clamp(16px,2vw,30px);text-align:center;position:relative;z-index:3}
.werden--schlicht .werden__kick{font-size:clamp(12px,1.2vw,15px);letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--red)}
.werden__big{font-weight:800;font-size:clamp(76px,11vw,170px);line-height:.88;letter-spacing:-.035em;color:#17140F}
.werden__big .r{color:var(--red)}
.werden--schlicht .werden__cap{font-weight:300;font-size:clamp(16px,1.8vw,24px);line-height:1.35;color:#2A2621;max-width:34ch}
.werden--schlicht .werden__cap b{font-weight:700;color:#17140F}

/* V26.1 · schlicht heißt schlicht: kein Berry-Panel hinter "Machen." + dezente Leseplatte */
.werden--schlicht{background:none !important;box-shadow:none !important;padding:0 !important;border-radius:0 !important;
  isolation:isolate}
.werden--schlicht::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 80% at 50% 50%,rgba(250,248,246,.9),rgba(250,248,246,0) 75%)}

/* ============================================================
   V29 · DIE AUFSTELLUNG (#ac-struktur)
   Anordnung exakt wie auf der Handskizze des Kunden:
     GF ---- Strategischer Stab      (Stab haengt rechts an der GF)
      |
     OPERATIV <--> Business Partner  (der Doppelpfeil gehoert HIERHIN,
                                      Partner unterstuetzen die Umsetzung)
   Gebaut als Ebenen-Mechanik (CD-Refresh Route 2): abgerundete,
   halbtransparente Ebenen, duenne CI-Linien ziehen die Verbindung.
   ============================================================ */
#ac-struktur{place-items:center;text-align:center}
.struk{display:grid;gap:clamp(6px,1.1vh,14px);justify-items:center;
  max-width:min(1160px,94vw);width:100%}
.struk__h{font-weight:300;font-size:clamp(14px,1.6vw,21px);color:var(--txt);text-wrap:balance}
.struk__h b{font-weight:800;color:#1D1D1B}
.struk__dual{display:flex;align-items:center;gap:8px;margin-top:2px;
  font-size:clamp(9.5px,.85vw,11px);letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--txt-dim)}
.struk__dual i{width:7px;height:7px;border-radius:50%;background:var(--red);flex:0 0 auto}
.struk__closer{margin-top:clamp(2px,.6vh,8px);font-weight:300;
  font-size:clamp(15px,1.9vw,26px);line-height:1.2;color:var(--txt);text-wrap:balance}
.struk__closer b{font-weight:800;color:var(--red)}

.org{--org-gap:clamp(7px,1vw,15px);--org-mid:clamp(74px,7vw,112px);
  position:relative;width:100%;display:grid;justify-items:stretch;
  margin-top:clamp(2px,.8vh,10px);perspective:1200px}
/* beide Reihen teilen dieselbe Spalten-Geometrie -> GF sitzt exakt ueber Operativ,
   Stab exakt ueber Business Partner, die Stammlinie trifft ohne Magic Numbers */
.org__row{display:grid;grid-template-columns:1fr var(--org-mid) 1fr;
  gap:var(--org-gap);align-items:stretch}

/* ---- Ebenen (Panels) ---- */
.opan{position:relative;margin:0;text-align:left;width:100%;
  display:flex;flex-direction:column;
  padding:clamp(9px,1.1vw,15px) clamp(11px,1.3vw,19px) clamp(10px,1.2vw,16px);
  border-top-left-radius:var(--r-soft);border-bottom-right-radius:var(--r-ebene);
  box-shadow:0 16px 40px rgba(40,20,30,.12);will-change:transform,opacity}
.opan--gf{color:#fff;background:color-mix(in srgb,var(--red) 92%,transparent)}
.opan--stab{background:color-mix(in srgb,var(--berry) 13%,#fff)}
.opan--op{background:color-mix(in srgb,var(--red) 9%,#fff)}
.opan--bp{background:color-mix(in srgb,var(--greige-web) 86%,transparent)}
.opan__k{font-size:clamp(9px,.84vw,11.5px);letter-spacing:.26em;text-transform:uppercase;
  font-weight:800;color:var(--red)}
.opan--stab .opan__k{color:var(--berry)}
.opan--bp .opan__k{color:var(--txt-dim)}
.opan--gf .opan__k{color:#fff;opacity:.92}
/* Fussnoten aller Ebenen einer Reihe liegen auf einer Linie */
.opan__n{margin-top:auto;padding-top:clamp(6px,.8vw,12px);font-size:clamp(10px,.95vw,12.5px);
  font-weight:400;line-height:1.32;color:var(--txt-dim)}
.opan--gf .opan__n{color:rgba(255,255,255,.88)}

.opan__row{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(6px,.85vw,13px);margin-top:clamp(7px,.9vw,12px)}
/* GF hat nur zwei Koepfe: eine Reihe, dafuer etwas groessere Chips */
.opan--gf .opan__row{align-content:start}

/* ---- Person-Chip: abgerundeter Bild-Frame + leichter CI-Schleier ---- */
.pers{display:flex;align-items:center;gap:clamp(6px,.75vw,11px);margin:0;min-width:0;
  will-change:transform,opacity}
.pers__ph{flex:0 0 auto;position:relative;overflow:hidden;background:var(--paper-dim);
  width:clamp(38px,3.4vw,52px);height:clamp(46px,4.1vw,62px);
  border-top-left-radius:5px;border-bottom-right-radius:15px}
.pers__ph img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82)}
.pers__ph::after{content:"";position:absolute;inset:0;background:var(--red);
  opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.pers figcaption{min-width:0}
.pers b{display:block;font-weight:700;font-size:clamp(10px,.95vw,12.5px);
  line-height:1.18;color:#1D1D1B;letter-spacing:-.005em}
.pers span{display:block;margin-top:2px;font-size:clamp(8px,.72vw,9.5px);
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--txt-dim);
  line-height:1.24}
.opan--gf .pers b{color:#fff;font-size:clamp(11px,1.05vw,13.5px)}
.opan--gf .pers span{color:rgba(255,255,255,.78)}
/* Doppelrolle: derselbe Mensch traegt zwei Ebenen -> roter Punkt auf beiden Chips */
.pers--dual b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;
  border-radius:50%;background:var(--red);vertical-align:middle}

/* ---- Verbindungen ---- */
/* GF -> Stab: schlichte Linie (Zuordnung) */
.orgc--h{position:relative}
.ln{position:absolute;display:block;background:var(--red);opacity:.42}
.ln--h1{left:calc(-1 * var(--org-gap));right:calc(-1 * var(--org-gap));
  top:50%;margin-top:-1px;height:2px;transform-origin:0 50%}
/* GF -> Operativ: Stamm, sitzt per Grid exakt ueber der Mitte der linken Spalte */
.orgc--v{display:grid;grid-template-columns:1fr var(--org-mid) 1fr;gap:var(--org-gap);
  height:clamp(20px,3.2vh,42px)}
.ln--stem{position:relative;justify-self:center;width:2px;height:100%;transform-origin:50% 0}
/* Operativ <-> Business Partner: wechselseitig, deshalb der Doppelpfeil */
.org__sync{display:grid;place-items:center;align-content:center;gap:6px;text-align:center;
  color:var(--red);will-change:transform,opacity}
.sync__a{width:clamp(48px,5vw,72px);height:auto;display:block}
.sync__t{font-size:clamp(7.5px,.68vw,9px);letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--txt-dim)}

/* ---- Mobile: Ebenen stapeln, Verbindungen auf eine Mittelachse ---- */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  #ac-struktur{align-content:start;padding-top:54px}
  .struk{gap:7px}
  .struk__frage{font-size:14px}
  .struk__h{font-size:12.5px}
  .org__row{grid-template-columns:1fr;gap:7px}
  .orgc--h{height:14px}
  .ln--h1{left:50%;right:auto;margin-left:-1px;top:0;width:2px;height:100%;
    transform-origin:50% 0}
  .orgc--v{grid-template-columns:1fr;height:14px}
  .org__sync{grid-auto-flow:column;justify-content:center;grid-auto-columns:max-content;
    gap:9px;padding:1px 0}
  .sync__a{width:36px;transform:rotate(90deg)}
  .opan__row{gap:6px;margin-top:6px}
  .opan__n{font-size:10px;padding-top:6px}
  .pers__ph{width:34px;height:41px}
  .pers b{font-size:10px}
  .opan--gf .pers b{font-size:10.5px}
  .pers span{font-size:7.5px;letter-spacing:.08em}
  .struk__dual{font-size:8.5px;letter-spacing:.1em}
  .struk__closer{font-size:15px}
}


/* ============================================================
   V28 · PORTRAIT-NORMALISIERUNG
   Alle 15 Teamfotos wurden per Gesichtserkennung (YuNet) auf EIN Framing
   gerechnet: Augen auf 30 % der Bildhoehe, horizontal mittig, Kopf ~33 %
   der Hoehe, 900x1080. Damit braucht kein Bild mehr einen eigenen
   object-position-Wert, es gilt EIN Wert pro Verwendung, aus dem
   Seitenverhaeltnis des jeweiligen Rahmens gerechnet.
   Quell-Crops: scratchpad/normalize_portraits.py, Backup der alten
   Fassung in assets/img/team-backup-v26/.
   ============================================================ */
.gf img{object-position:center 11%}
.tile img{object-position:center 15%}
.film img{object-position:center 30%}
.swap__chip{object-position:center 10%}
.fan img{object-position:center center}
.pers__ph img{transform:scale(1.55);transform-origin:center 8%}

@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  .gf img{object-position:center 15%}  /* breites Mobile-Band: mehr Kopfluft */
  /* Mobil war die Kachel so flach (1/0.72), dass die Weil-Ebene das Kinn abschnitt.
     Hoehere Kachel + Crop weiter unten -> Gesicht steht frei ueber der Ebene. */
  .tile img{aspect-ratio:1/0.92;object-position:center 30%}
}

/* ============================================================
   V27 · "Menschen." kleiner + Video auf Gesichtshoehe
   Die Maske lief auf mask-size:contain, also volle Viewportbreite — dadurch war die
   Schrift so gross, dass durch die Buchstaben nur Oberkoerper zu sehen waren. Kleinere
   Maske zeigt mehr Video pro Buchstabe. Die Gesichter liegen im Clip bei ca. 32–47 %
   der Bildhoehe; das Video hat bei diesen Seitenverhaeltnissen vertikal keinen
   Spielraum, deshalb wandert die MASKE zu den Gesichtern statt umgekehrt.
   ============================================================ */
/* 76 % statt contain: deutlich kleiner als vorher, aber die Versalhoehe bleibt knapp
   groesser als ein Kopf im Clip — sonst schneiden die Buchstaben Scheitel und Kinn ab.
   37 % zentriert das Schriftband auf die Gesichter (die liegen bei ~40 % Bildhoehe). */
#people-vid{
  -webkit-mask-size:76% auto;mask-size:76% auto;
  -webkit-mask-position:center 37%;mask-position:center 37%}
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  #people-vid{-webkit-mask-size:92% auto;mask-size:92% auto;
    -webkit-mask-position:center 40%;mask-position:center 40%}
}

/* V29.1 · GF-Ebene hat nur zwei Koepfe und stand deshalb halb leer neben dem
   vierkoepfigen Stab: groessere Portraits, Chips vertikal mittig. */
.opan--gf .opan__row{align-content:center;flex:1;gap:clamp(8px,1vw,16px)}
.opan--gf .pers__ph{width:clamp(52px,4.6vw,70px);height:clamp(62px,5.5vw,84px)}
.opan--gf .pers b{font-size:clamp(12px,1.15vw,15px)}
/* Partner-Ebene war so transparent, dass die Haus-Grafik durchschien. */
.opan--bp{background:color-mix(in srgb,var(--greige-web) 94%,transparent)}

/* ============================================================
   V33 · KORREKTURSCHLEIFE V1 -> V2 (Feedback Bennet, 25.07.)
   Minimalistischer & cleaner · Headlines Rot, Subheads Dunkelrot ·
   Navigationsbar raus · Bildmarke zentriert im Hero · Kapitel zentriert ·
   Mannschafts-Zitate als Bauchbinde UNTER den Portraits · Impressum.
   ============================================================ */

/* ---- Navigationsbar raus (Punkt 1) ---- */
#hud{display:none!important}

/* ---- Bildmarke groesser (Punkt 2) — muss zu MW() in main.js passen ---- */
@media (min-width:821px){ #mark{width:min(56vmin,560px)} }

/* ---- Intro/Hero (Punkt 1): zentrierte Bildmarke, Headline rot, Sub dunkelrot ---- */
#intro .ilogo{width:clamp(58px,9vmin,104px);height:auto;fill:var(--red);color:var(--red);
  margin-bottom:clamp(4px,1.2vh,14px)}
#intro .ibig{color:var(--red);line-height:1.06;max-width:none}
/* exakt ZWEI Zeilen (Bennet): jede Zeile ist ein fester Block, kein Umbruch darin */
#intro .ibig .iline{display:block;white-space:nowrap}
#intro .ismall{color:var(--berry);font-weight:400}
/* Scroll-Symbol: kleine Maus mit wanderndem Rad */
#intro .icue{flex-direction:column;gap:10px;color:var(--berry)}
#intro .iscroll{position:relative;width:22px;height:34px;border:2px solid var(--berry);
  border-radius:12px;flex:0 0 auto;opacity:.85}
#intro .iscroll::before{content:"";position:absolute;left:50%;top:5px;width:4px;height:8px;
  margin-left:-2px;border-radius:2px;background:var(--red);animation:iwheel 1.7s var(--ease) infinite}
@keyframes iwheel{0%{transform:translateY(0);opacity:1}65%{transform:translateY(13px);opacity:0}100%{transform:translateY(13px);opacity:0}}
.no-motion #intro .iscroll::before{animation:none}

/* ---- Farb-Doktrin (Overall): Headlines Rot, Subheads/Fragen Dunkelrot ---- */
.frage{color:var(--berry)}
#ac-dissolve .diss__line{color:var(--red)}
#ac-dissolve .diss__line b{color:inherit}
.halt__k{font-weight:800;font-size:clamp(24px,3.6vw,52px);line-height:1.05;
  letter-spacing:-.02em;color:var(--red);text-wrap:balance}
.halt__k b{font-weight:inherit;color:inherit}
.fund__h{color:var(--red)}
.mann__h{font-weight:800;font-size:clamp(22px,3.2vw,46px);line-height:1.08;
  letter-spacing:-.02em;color:var(--red);text-wrap:balance}
.mann__h b{font-weight:inherit;color:inherit}
.struk__h{font-weight:800;font-size:clamp(20px,2.8vw,40px);line-height:1.08;
  letter-spacing:-.02em;color:var(--red);text-wrap:balance}
.struk__h b{font-weight:inherit;color:inherit}

/* ---- Kapitel Mensch/Raum/Vision (Punkte 8-10): zentriert + minimal ---- */
.chap.center .chap__inner{justify-content:center;align-items:flex-start;
  padding-top:22vh;padding-bottom:4vh}
.chap.center .chap__head{width:min(720px,92vw);text-align:center;justify-items:center;
  gap:clamp(8px,1.4vh,16px)}
.chap.center .chap__title{font-size:clamp(44px,6.5vw,92px)}
.chap.center .chap__lead{max-width:46ch;margin:0 auto}
/* Claim-Band wird zur ruhigen dunkelroten Subhead-Zeile (kein Panel mehr) */
.pillar--claim{background:none;box-shadow:none;padding:0;border-radius:0}
.pillar--claim .pillar__v{color:var(--berry);font-weight:700;
  font-size:clamp(17px,1.8vw,26px);line-height:1.15}
/* Film-Karte sitzt im Textfluss, sauber platziert. Der obere Margin traegt die
   ueberhaengende rote Frage-Kachel (translateY(-104%)), damit sie nie in den
   Claim-Text darueber laeuft. */
.chap__head .film{position:relative;width:min(270px,30vh);
  margin:clamp(52px,8vh,76px) auto 0}

/* ---- Mannschaft (Punkt 11): Zitat als Bauchbinde UNTER dem Portrait ---- */
.tile{display:flex;flex-direction:column;background:#fff}
/* height:100% stammt aus dem Overlay-Layout und wuerde die Bauchbinde aus der
   Kachel schieben (overflow:hidden clippt sie weg) -> auto. */
.tile .tile__in{flex:0 0 auto;height:auto}
/* flex:1 -> die Binde fuellt die Kachel bis zur Unterkante, egal wie lang das
   Zitat ist; so gibt es keine weissen Reststreifen bei kurzen Zitaten. */
.tile__weil{position:relative;inset:auto;flex:1 0 auto;padding:10px 12px 12px;
  border-top-right-radius:0;background:var(--berry)}
.tile:nth-child(even) .tile__weil{background:var(--red)}
@media (max-height:1000px){ .tile img{aspect-ratio:1/0.62} }
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){ .tile img{aspect-ratio:1/0.72} }

/* ---- Punkt 12: gleicher Schriftschnitt, Farben bleiben ---- */
.mann__closer{font-weight:700;color:var(--txt)}
.mann__closer .r{color:var(--red);font-weight:inherit}

/* ---- Finale (Punkt 13) + Impressum-Link ---- */
.fin__legal{margin-top:16px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.fin__legal a{color:rgba(255,255,255,.55);text-decoration:none;pointer-events:auto;
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;transition:color .3s var(--ease)}
.fin__legal a:hover{color:#fff}

/* ---- Mobile-Anpassungen V2 ---- */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  .chap.center .chap__inner{padding-top:22vh}
  .chap__head .film{width:min(240px,66vw)}
  #intro .ilogo{width:clamp(48px,14vmin,72px)}
  .tile__weil{padding:8px 10px 10px}
  /* Zitate muessen auch mobil lesbar bleiben (Kritiker-Fund) */
  .tile__weil span{font-size:12px;line-height:1.35;margin-bottom:4px}
  .tile__weil b{font-size:11px}
}

/* ============================================================
   V34 · KAPITEL ALS EBENEN-STACK (Design-Pick Moritz, 25.07.)
   CD-Refresh Route 2: drei transparente Farb-Ebenen (Rot/Berry/Greige)
   stapeln sich versetzt mit Multiply-Mischflaechen; Text auf der roten
   Ebene, Video klemmt zwischen den Ebenen, Bildmarken-Teil als grosse
   Stanze dahinter (dockt per Master-Timeline).
   ============================================================ */
.chap.center .chap__inner{padding:0;align-items:center;justify-content:center}
/* isolation: die Multiply-Ebenen mischen nur untereinander im Stack, nicht mit
   Karte/Text — sonst toent das Berry-Panel das Portrait violett. */
.stack{position:relative;width:min(1020px,92vw);height:min(620px,74vh);isolation:isolate;
  will-change:transform,opacity}
.stack__pan{position:absolute;mix-blend-mode:multiply;will-change:transform,opacity}
.stack__pan--greige{left:16%;top:4%;width:66%;height:56%;background:rgba(181,174,169,.5);
  border-top-right-radius:var(--r-ebene);border-bottom-left-radius:14px}
.stack__pan--berry{left:34%;top:24%;width:58%;height:60%;background:rgba(90,4,57,.82);
  border-top-left-radius:var(--r-ebene);border-bottom-right-radius:var(--r-ebene)}
.stack__pan--rot{left:4%;top:16%;width:52%;height:70%;background:rgba(230,25,40,.86);
  border-top-right-radius:var(--r-ebene);border-bottom-left-radius:14px;
  box-shadow:0 40px 90px rgba(185,15,32,.16)}
.stack__txt{position:absolute;left:9%;top:24%;width:42%;color:#fff;z-index:4;text-align:left;
  will-change:transform,opacity}
.stack__txt .chap__title{font-size:clamp(44px,6.4vw,100px);color:#fff;text-align:left}
.stack__claim{margin-top:clamp(10px,1.4vh,16px);font-weight:700;font-size:clamp(15px,1.6vw,23px);
  line-height:1.2;text-wrap:balance}
.stack__lead{margin-top:clamp(8px,1.2vh,14px);font-weight:400;font-size:clamp(13px,1.3vw,17px);
  line-height:1.42;color:rgba(255,255,255,.94);max-width:36ch}
.stack__zeile{margin-top:clamp(8px,1.2vh,14px);font-weight:400;font-style:italic;
  font-size:clamp(13px,1.3vw,17px);color:rgba(255,255,255,.9)}
.stack .film{position:absolute;right:6%;top:28%;width:min(260px,27vw);margin:0;z-index:5;
  isolation:isolate}
/* Frage-Kachel auf dem Berry-Panel: weiss statt rot, sonst saeuft sie ab */
.stack .film__frage{background:#fff;color:var(--berry);box-shadow:0 12px 28px rgba(40,20,30,.22)}
/* Mobile: Stack vertikal gedacht — Text oben auf Rot, Video unten rechts */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  .stack{width:94vw;height:min(560px,72vh)}
  .stack__pan--greige{left:8%;top:0;width:72%;height:32%}
  .stack__pan--berry{left:22%;top:30%;width:74%;height:54%}
  .stack__pan--rot{left:2%;top:8%;width:84%;height:58%}
  .stack__txt{left:9%;top:14%;width:72%}
  .stack__txt .chap__title{font-size:clamp(38px,11vw,54px)}
  .stack__claim{font-size:15px}
  .stack__lead{font-size:12.5px;max-width:100%}
  .stack__zeile{font-size:12.5px}
  .stack .film{right:2%;top:auto;bottom:0;width:min(200px,54vw)}
}

/* ============================================================
   V2.2 · SHIP-FIX (26.07.) — objektive Defekte aus dem web-qa-Gate.
   Bewusst am Ende: ueberschreibt gezielt, ohne die gewachsenen
   Bloecke darueber anzufassen.
   ============================================================ */

/* --- 1 · FUNDAMENT: drei Saeulen passten nicht in .fund (max 880px).
       Die Karten konnten wegen white-space:nowrap nicht schrumpfen ->
       das Raster lief nach rechts aus dem Container und riss Headline
       plus Karten um ~74px aus der Bildmitte. --- */
.fund__saeulen{width:100%}
.fund__saeulen .zahl{min-width:0}
.fund__saeulen .zahl b{white-space:normal;overflow-wrap:break-word}
.fund__h,.fund__copy,.fund__frage{max-width:100%}

/* --- 2 · MANNSCHAFT: der Block war hoeher als die fixe Ebene
       (Desktop 933px + 72px Rand bei 980px Viewport -> Schlusszeile
       abgeschnitten; Mobile 1147px bei 844px -> vierte Reihe, Crew-Band
       und Schlusszeile unerreichbar). Das Raster fuellt jetzt den
       verbleibenden Platz und die Kacheln skalieren mit.
       WICHTIG: der Platz kommt zuerst aus Rand, Crew-Band und Abstaenden,
       erst danach aus den Portraits. Erste Fassung hat pauschal die
       Kacheln geschrumpft (258 -> 211px), das war der Rueckschritt. --- */
/* Die Ebene bekommt eine definite Zeilenhoehe, sonst kann .mann kein
   height:100% aufloesen (Prozenthoehe gegen auto-Zeile = auto). */
#ac-mannschaft{grid-template-rows:minmax(0,1fr);align-items:stretch;justify-items:center;
  padding-top:clamp(16px,3.2vh,34px);padding-bottom:clamp(14px,2.6vh,28px)}
/* Das Crew-Band ist Deko und gibt als erstes Hoehe ab. */
#ac-mannschaft .crew{height:clamp(96px,11.5vh,150px);margin-top:clamp(2px,.6vh,8px)}
#ac-mannschaft .mann{gap:clamp(6px,1vh,12px)}
#ac-mannschaft .mann__closer{margin-top:clamp(2px,.5vh,6px);font-size:clamp(20px,2.6vw,34px)}
#ac-mannschaft .mann{height:100%;min-height:0;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;align-content:stretch}
.mann__grid{min-height:0;height:100%;grid-template-rows:repeat(2,minmax(0,1fr))}
.mann__grid .tile{min-height:0;height:100%;display:flex;flex-direction:column}
.mann__grid .tile > .tile__in{flex:1 1 auto;min-height:0;display:block}
.mann__grid .tile img,
.mann__grid .tile .tile__vid{height:100%;width:100%;aspect-ratio:auto;object-fit:cover;object-position:center 20%}

/* --- 2b · Zitat-Baender auf gleiche Hoehe: je nach Zitatlaenge starteten
       sie auf unterschiedlicher Hoehe (Desktop 64 vs. 81px), die Unterkante
       der Reihe wirkte unruhig. Reserviert werden zwei Zeilen; 2 x 1.35
       (line-height) = 2.7em der Zitat-Schriftgroesse, skaliert also mit der
       clamp-Stufe mit. --- */
.tile__weil span{min-height:2.7em}

/* --- 3 · Bauchbinde: "HR / People & Culture" brach mit haengendem
       "Culture" um. balance verteilt die Zeilen gleichmaessig. --- */
.bauchbinde{text-wrap:balance}
.stack .film__binde{font-size:clamp(11px,1.05vw,13px);line-height:1.28}

/* --- 4 · Bildrahmen: die zwei harten Ecken bekommen einen kleinen
       Radius. Die Diagonal-Signatur (zwei grosse Ecken) bleibt, aber
       nichts ist mehr komplett kantig (CD-Refresh §2). --- */
.film img{border-top-right-radius:10px;border-bottom-left-radius:10px}
.tile{border-top-right-radius:10px;border-bottom-left-radius:10px}

/* --- 5 · Mobile: das Crew-Band ist rein dekorativ (aria-hidden) und
       kostet 128px, die den acht Kacheln fehlen. Auf dem Handy raus. --- */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  .crew{display:none}
  /* Luft zwischen Headline und Raster: die Kacheln fahren beim Exit nach
     oben und stiessen sonst in die dritte Headline-Zeile. */
  #ac-mannschaft .mann{padding-bottom:6px;row-gap:8px}
  .mann__grid{margin-top:14px;margin-bottom:10px}
  .mann__grid{grid-template-rows:repeat(4,minmax(0,1fr))}
  .tile__weil{padding:6px 8px}
  /* Mobil laufen die langen Zitate auf drei Zeilen: 3 x 1.3 = 3.9em. */
  .tile__weil span{font-size:10.5px;line-height:1.3;margin-bottom:2px;min-height:3.9em}
  .tile__weil b{font-size:10.5px}
}

/* ============================================================
   V35 · KORREKTURSCHLEIFE BENNET (27.07.2026)
   Intro ohne Tippen und ohne Vorhang · kein grauer Querbalken ·
   Antwort-Panel in Weinrot · Fundament-Saeulen auf einer Linie ·
   Kapitel-Textebene wirklich transparent · Belegschafts-Band mit der
   ganzen Mannschaft und mittig sitzend · Closer raus · Finale zentriert.
   ============================================================ */

/* --- 1 · INTRO: Bildmarke ist das Startbild, sie steht allein in der Mitte.
       Sie loest sich auf, danach erscheint die Schrift an derselben Stelle.
       Beide Ebenen liegen deshalb absolut uebereinander, sonst wuerde die
       Schrift beim Verschwinden des Logos springen. --- */
#intro .ilogo{position:absolute;left:50%;top:50%;margin:0;
  width:clamp(96px,17vmin,190px);height:auto;
  transform:translate(-50%,-50%);transform-origin:50% 50%;
  fill:var(--red);color:var(--red);will-change:transform,opacity,filter}
#intro .icopy{position:absolute;inset:0;align-content:center;gap:clamp(12px,1.8vh,22px)}
#intro .ibig,#intro .ismall,#intro .icue{will-change:transform,opacity}
/* V37 (Moritz): offizielles Logo klein ueber dem Hero-Titel. Etwas mehr Abstand nach
   unten als der Grid-gap hergibt, sonst klebt die rote Wortmarke an der roten Headline
   und beide lesen sich als ein Block. */
#intro .ibrand{width:clamp(116px,13vw,172px);height:auto;
  margin-bottom:clamp(4px,1.2vh,14px);will-change:transform,opacity}
/* die Sub-Zeile darf ruhig etwas naeher an die Headline */
#intro .ismall{margin-top:calc(-1 * clamp(2px,.6vh,8px))}

/* --- 2 · WANDEL-ANTWORT in Weinrot (CD-Berry) statt Signalrot (Bennet).
       Der Schatten geht mit, sonst leuchtet ein rotes Kissen unter einem
       weinroten Panel. --- */
.diss__antwort{background:color-mix(in srgb,var(--berry) 88%,transparent);
  box-shadow:0 30px 74px rgba(90,4,58,.34)}

/* --- 3 · FUNDAMENT: die drei Saeulen haengen exakt gleich hoch.
       (Der Versatz kam aus dem gegenlaeufigen Drift, siehe main.js; hier
       zusaetzlich das Raster hart auf Oberkante ziehen.) --- */
.fund__saeulen{align-items:start}
.fund__saeulen .zahl{align-self:start;height:100%}

/* --- 4 · KAPITEL-STACK: die Ebene unter der Schrift ist wirklich
       transparent (CD-Refresh: transparente, ueberlappende Flaechen).
       Damit die weisse Typo trotzdem traegt, ist die Flaeche dort, wo der
       Text sitzt, etwas dichter und laeuft nach aussen weiter auf. --- */
.stack__pan--rot{background:linear-gradient(104deg,
    rgba(230,25,40,.84) 0%,rgba(230,25,40,.74) 52%,rgba(230,25,40,.56) 100%)}
.stack__pan--berry{background:rgba(90,4,57,.74)}
.stack__pan--greige{background:rgba(181,174,169,.42)}

/* --- 5 · BELEGSCHAFTS-BAND: die ganze Mannschaft laeuft durch.
       Die Reihe ist jetzt laenger als das Band (kein linksbuendiges
       Haeufchen mehr), die Koepfe haben oben Luft und die Koerper laufen
       unten weich in die rote Ebene aus. --- */
.crew__run{gap:clamp(4px,.7vw,12px)}
/* V38 (Moritz): KEINE CSS-Maske mehr auf den Bildern. Der weiche Auslauf ist jetzt in
   jedes WebP eingebacken und endet am EIGENEN Koerperende. Eine Maske auf fester
   Rahmenhoehe konnte das nicht: zehn der Cutouts hoeren schon bei 78 bis 90 % der
   Rahmenhoehe auf, ihre harte Schnittkante lag also dort, wo die Maske noch fast
   volle Deckkraft hatte. Zwei Verlaeufe uebereinander wuerden jetzt doppelt blenden. */
.crew__run img{height:100%;width:auto}
/* die hintere Reihe steht weiter hinten im Raum, bleibt aber ERKENNBAR: es sollen
   wirklich alle Kolleginnen und Kollegen zu sehen sein, nicht 51 Gesichter und 50
   Schemen. Nur kleiner, etwas kuehler und minimal weich. */
.crew__rail--back{height:78%}
.crew__rail--back .crew__run{gap:clamp(2px,.4vw,8px)}
.crew__rail--back img{filter:saturate(.72) brightness(1.04) blur(.45px);opacity:.72}

/* --- 6 · MANNSCHAFT ohne Closer: die Ebene hat eine Zeile weniger,
       das Raster darf den frei gewordenen Platz nehmen. --- */
#ac-mannschaft .mann{grid-template-rows:auto auto minmax(0,1fr) auto}
#ac-mannschaft .crew{height:clamp(110px,13.5vh,172px)}

/* --- 7 · FINALE: Logo kleiner (Skalierung in main.js), Text weiter hoch,
       Logo und Text sitzen zusammen mittig im Bild statt unten am Rand.
       Das padding-top verschiebt die Textgruppe genau so weit nach unten,
       dass sie unter der verkleinerten Marke steht. --- */
#ac-finale{place-items:center;padding-top:clamp(120px,21vh,230px);
  padding-bottom:clamp(16px,3vh,42px)}
#ac-finale .fin__title{font-size:clamp(40px,6.2vw,92px)}
#ac-finale .fin__aufbruch{margin-top:clamp(14px,2vh,22px)}
#ac-finale .fin__sig{margin-top:clamp(16px,2.4vh,26px)}
/* Scrim mittig statt nur unten, sonst steht der Text jetzt im hellen Teil */
#ac-finale::before{height:100%;
  background:radial-gradient(78% 62% at 50% 52%,rgba(9,7,8,.62) 0%,rgba(9,7,8,.34) 58%,rgba(9,7,8,.08) 100%)}

@media (max-width:820px),(orientation:portrait) and (max-width:1024px){
  #intro .ilogo{width:clamp(74px,22vmin,120px)}
  #ac-finale{padding-top:clamp(96px,19vh,180px)}
}

/* Die beiden Sichtfenster sind im Querformat vollstaendig wirkungslos:
   display:contents entfernt die Box aus dem Layout, die Kinder bleiben
   direkte Grid-Items ihrer Eltern. Der Desktop merkt von V39 nichts. */
.org__vp,.mann__vp{display:contents}

/* ============================================================
   V39 · HOCHFORMAT (28.07.2026)
   Das Handy bekommt eine eigene Uebersetzung, keine geschrumpfte
   Desktop-Seite. Drei Umbauten tragen den Block:
     1. Kapitel = Karten-Sequenz statt Ebenen-Stapel. Im Querformat
        liegen drei Ebenen NEBENEINANDER versetzt; im Hochformat gibt
        es diese Breite nicht, die Portraitkarte lief rechts aus dem
        Bild und der Fliesstext lag auf Berry auf Rot. Jetzt: eine
        Textkarte, Greige und Berry lugen als zweite und dritte Ebene
        hinter den Kanten hervor (Ebenen-Mechanik bleibt), Portrait
        darunter in voller Breite.
     2. Aufstellung und Mannschaft bekommen ein Sichtfenster
        (.org__vp / .mann__vp) und fahren als Ganzes hindurch. Damit
        duerfen Namen und Zitate lesbar gross sein, statt auf 9 px
        gequetscht in einen Bildschirm gepresst zu werden.
     3. Alles, was Rechenzeit kostet und mobil nichts beitraegt,
        faellt weg: mix-blend-mode, grosse Blur-Filter, Hover-Zustaende.
   Die Bedingung ist bewusst "Breite ODER Hochformat bis 1024 px":
     ein iPad hochkant ist 834 px breit und fiel vorher in die
     Desktop-Welt, also Querformat-Komposition auf Hochformat-Flaeche.
   ============================================================ */
@media (max-width:820px),(orientation:portrait) and (max-width:1024px){

  /* ---- 0 · Touch-Grundlagen ---- */
  /* Die Bildmarke: der 821px-Query oben griff auf dem iPad hochkant und machte
     sie zu gross. Hier gilt wieder das Hochformat-Mass — es MUSS zu MW() in
     main.js passen, sonst dockt die Stanze hinter den Kapiteln daneben. */
  #mark{width:min(64vmin,400px)}
  html,body{overscroll-behavior:none}
  body{-webkit-tap-highlight-color:transparent}
  .ac{padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px) + 12px)}

  /* ---- 0a · V40 · Browser-Leiste: die fixen Ebenen decken den GROSSEN Viewport ----
     Befund Moritz: "unten kommt immer was vom Browser hoch, teilweise was
     Schwarzes." Zwei Ursachen, die zusammenfallen.
     1. `inset:0` auf einer fixen Ebene bemisst sich in mobilem Safari/Chrome am
        KLEINEN Viewport (mit eingeblendeter Werkzeugleiste). Zieht sich die
        Leiste beim Scrollen zurueck, wird das Fenster hoeher als die Ebenen, und
        unter ihrer Unterkante liegt frei: `body{background:var(--ink)}` = #111.
        Das ist die schwarze Flaeche.
     2. Bei jedem Ein- und Ausblenden der Leiste aendert sich damit zusaetzlich die
        Layer-Hoehe mitten in der Fahrt, also springt die Komposition.
     Fix: die Ebenen sind so hoch wie der GROSSE Viewport (100lvh, Fallback 100vh
     = derselbe Wert). Dann liegt ihre Unterkante bei zurueckgezogener Leiste
     genau am Fensterrand und bei ausgefahrener Leiste dahinter — es entsteht
     nie eine Luecke, und die Hoehe aendert sich nicht mehr.
     Dazu: der Seitengrund ist nicht mehr Tinten-Schwarz, sondern das Greige der
     Kapitel-Welt. Blitzt beim Gummiband doch etwas durch, liest es sich als Papier
     und nicht als Loch. */
  html{background:var(--greige-web)}
  body{background:var(--greige-web)}
  .layer,#intro,.film-ov{height:100vh;height:100lvh}
  .scrollcue{bottom:calc(26px + env(safe-area-inset-bottom,0px))}

  /* ---- 0b · V40 · Compositing-Last raus ----
     Befund Moritz: "Scrollen bei den Menschen dahinter sehr laggy."
     Gemessen ist das keine Video-Last (die acht <video> haben preload="none" und
     bekommen mobil nie ein src), sondern Compositing:
     `mix-blend-mode` auf einer BILDSCHIRMFUELLENDEN Ebene zwingt den Browser, bei
     jedem Frame den ganzen Stapel unter ihr neu zu mischen — die GPU-Abkuerzung
     faellt weg. #grain lag als solche Ebene ueber allem, dazu der Rahmen und die
     Scroll-Marke. Genau waehrend die Kachelwand faehrt, ist das der teuerste
     Moment der Seite.
     Auf dem Handy ist Filmkorn bei 3x-Pixeldichte ohnehin nicht zu sehen. */
  #grain{display:none}
  #frame::before{mix-blend-mode:normal;border-color:rgba(255,255,255,.10)}
  .scrollcue{mix-blend-mode:normal}
  .pers__ph::after{mix-blend-mode:normal;opacity:.06}
  /* will-change auf ALLEN elf Akt-Ebenen haelt elf bildschirmgrosse Texturen im
     Grafikspeicher (bei 390x844 und DPR 3 rund 12 MB pro Ebene). Auf einem
     Mittelklasse-Handy raeumt der Treiber sie dann laufend aus und wieder ein,
     und das ist als Ruckeln zu sehen. Versprochen wird nur noch dort etwas, wo
     wirklich pro Frame eine Transformation laeuft. */
  .ac{will-change:auto}
  #mark .part{will-change:auto}
  #bg .bg-photo{will-change:auto}
  /* Diese vier bewegen sich im Hochformat nicht einzeln, sondern nur mit ihrem
     Sichtfenster bzw. ihrer Karte: .tile__in ist die Hover-Zoom-Ebene (mobil
     kein Hover), .pers und .opan fahren als Block im .org mit, .stack__pan hat
     seine Fahrt in der Karten-Sequenz und braucht kein Dauerversprechen.
     Uebrig bleiben die zwei, die wirklich pro Frame transformiert werden:
     .org und .mann__grid (weiter unten gesetzt). */
  .tile__in,.pers,.opan,.stack__pan{will-change:auto}

  /* ---- 1 · Ambient: Blur kostet auf dem Handy jedes Frame, bringt aber
         hier fast nichts (die Flaechen sind ohnehin weich maskiert). ---- */
  .amb{filter:none}
  .amb--1{width:78vw;height:78vw;left:-22vw}
  .amb--2{width:62vw;height:62vw;right:-18vw}
  .amb--3{width:56vw;height:56vw;left:14vw}

  /* ============================================================
     2 · KAPITEL: Karten-Sequenz
     ============================================================ */
  .chap.center .chap__inner{padding:calc(var(--pad) + 30px) var(--pad)
    calc(var(--pad) + env(safe-area-inset-bottom,0px) + 14px);
    align-items:center;justify-content:center}
  .stack{width:100%;max-width:520px;height:auto;margin:0 auto;isolation:auto;
    display:grid;grid-template-columns:100%;grid-template-rows:auto auto;
    row-gap:clamp(20px,3.4vh,30px)}
  /* Alle drei Ebenen liegen in Zeile 1 in DERSELBEN Grid-Zelle. Der Versatz
     kommt aus Margins, nicht aus transform: transform gehoert der Timeline.
     Negative Margins wachsen die Zeile nicht auf, weil die Ebenen leere
     Stretch-Items sind — die Zeilenhoehe macht allein die Textkarte. */
  .stack__pan{grid-column:1;grid-row:1;position:relative;left:auto;top:auto;
    width:auto;height:auto;mix-blend-mode:normal}
  /* Greige lugt oben links heraus, Berry unten rechts, Rot ist die Karte
     selbst und liegt ueber beiden — so beruehrt keine Ebene den Text und der
     Kontrast ist ueberall weiss auf Rot. */
  .stack__pan--greige{z-index:0;margin:-18px 30px 34px -14px;
    background:rgba(181,174,169,.55);
    border-top-right-radius:var(--r-ebene);border-bottom-left-radius:14px}
  .stack__pan--berry{z-index:1;margin:44px -12px -30px 36px;
    background:rgba(90,4,57,.9);
    border-top-left-radius:var(--r-ebene);border-bottom-right-radius:var(--r-ebene)}
  .stack__pan--rot{z-index:2;margin:0;
    background:linear-gradient(148deg,#E61928 0%,#D8141F 58%,#B90F20 100%);
    box-shadow:0 20px 44px rgba(185,15,32,.26);
    border-top-right-radius:var(--r-ebene);border-bottom-left-radius:16px}
  .stack__txt{grid-column:1;grid-row:1;position:relative;left:auto;top:auto;
    width:auto;z-index:4;text-align:left;
    padding:clamp(20px,5.4vw,28px) clamp(20px,5.4vw,28px) clamp(24px,6vw,30px)}
  .stack__txt .chap__title{font-size:clamp(40px,12vw,58px);line-height:.9;text-align:left}
  .stack__claim{margin-top:clamp(8px,1.6vh,14px);font-size:clamp(16px,4.4vw,19px);line-height:1.22}
  .stack__lead{margin-top:clamp(9px,1.6vh,14px);font-size:clamp(13.5px,3.7vw,15.5px);
    line-height:1.45;max-width:none}
  .stack__zeile{margin-top:clamp(9px,1.6vh,14px);font-size:clamp(13.5px,3.7vw,15.5px)}

  /* Portrait-Karte: eigene Zeile, volle Breite, nichts laeuft mehr raus. */
  .stack .film{grid-column:1;grid-row:2;position:relative;
    right:auto;left:auto;top:auto;bottom:auto;width:100%;margin:0;isolation:auto}
  .stack .film img{width:100%;aspect-ratio:3/2;object-position:center 24%}
  /* Die Frage-Kachel klemmt sich in die Fuge zwischen Textkarte und Portrait —
     derselbe Gedanke wie auf dem Desktop, nur vertikal statt seitlich. */
  .stack .film__frage{position:absolute;left:14px;right:auto;top:0;
    transform:translateY(-52%);max-width:calc(100% - 28px);
    font-size:13px;padding:7px 14px 8px}
  /* Play-Marke nach oben rechts und NUR als Symbol: mittig lag sie dem Menschen
     im Gesicht, und mit Schriftzug kollidierte sie in 390 px mit der Frage-Kachel
     ("Agenda 2030 erlebbar machen" wurde von ihr abgeschnitten). Die ganze Karte
     ist ohnehin anklickbar, der Schriftzug traegt hier keine Information mehr.
     backdrop-filter raus: unnoetige Compositing-Last auf dem Handy. */
  .stack .film__play{left:auto;right:12px;top:12px;bottom:auto;transform:none;
    font-size:0;gap:0;padding:0;width:40px;height:40px;border-radius:50%;
    justify-content:center;backdrop-filter:none;
    box-shadow:0 8px 22px rgba(40,20,30,.30)}
  .stack .film__play i{width:26px;height:26px;font-size:11px}
  .stack .film__binde{left:12px;bottom:12px;font-size:12px}

  /* ============================================================
     3 · AUFSTELLUNG: Ebenen fahren durch ein Sichtfenster
     ============================================================ */
  #ac-struktur{place-items:stretch;align-content:stretch;
    padding-top:calc(var(--pad) + 14px)}
  #ac-struktur .struk{width:100%;max-width:none;height:100%;min-height:0;
    grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:9px;align-content:stretch}
  #ac-struktur .struk__frage{font-size:13px;letter-spacing:.14em}
  #ac-struktur .struk__h{font-size:clamp(20px,5.6vw,26px);line-height:1.12}
  .org__vp{display:block;position:relative;width:100%;min-height:0;overflow:hidden;
    justify-self:stretch;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 24px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 20px,#000 calc(100% - 24px),transparent 100%)}
  #ac-struktur .org{margin-top:0;perspective:none;will-change:transform}
  #ac-struktur .org__row{grid-template-columns:1fr;gap:9px}
  /* Kompakt genug, dass alle VIER Ebenen zusammen ins Sichtfenster passen: sonst
     schneidet die Maske am Ende der Fahrt die oberste Ebene an. */
  #ac-struktur .opan{padding:11px 13px 12px;box-shadow:0 10px 26px rgba(40,20,30,.10)}
  #ac-struktur .opan__k{font-size:10.5px;letter-spacing:.18em}
  #ac-struktur .opan__row{grid-template-columns:1fr 1fr;gap:9px;margin-top:9px}
  #ac-struktur .opan__n{font-size:11.5px;padding-top:8px;line-height:1.32}
  #ac-struktur .pers{gap:8px}
  #ac-struktur .pers__ph{width:40px;height:50px}
  #ac-struktur .opan--gf .pers__ph{width:48px;height:59px}
  #ac-struktur .pers b{font-size:12.5px;line-height:1.16;overflow-wrap:anywhere}
  #ac-struktur .opan--gf .pers b{font-size:13.5px}
  /* 9 px statt 10,5 px, engere Sperrung, schmaleres Foto: bei 390 px bleiben so
     ~107 px Textbreite, und "PROJEKTENTWICKLUNG" braucht ~99 px. Vorher wurde es
     abgeschnitten bzw. mitten im Wort umgebrochen. hyphens greift dank lang="de"
     als saubere Trennung, overflow-wrap ist nur noch das Netz darunter. */
  #ac-struktur .pers span{font-size:9px;letter-spacing:.03em;line-height:1.26;
    hyphens:auto;overflow-wrap:anywhere}
  /* Die waagerechte Zuordnungslinie ist im Stapel eine senkrechte Fuge. */
  #ac-struktur .orgc--h{height:13px}
  #ac-struktur .orgc--v{grid-template-columns:1fr;height:13px}
  #ac-struktur .org__sync{grid-auto-flow:column;justify-content:center;
    grid-auto-columns:max-content;gap:9px;padding:2px 0}
  #ac-struktur .sync__a{width:38px;transform:rotate(90deg)}
  #ac-struktur .sync__t{font-size:9px}
  #ac-struktur .struk__dual{font-size:10px;letter-spacing:.07em}
  #ac-struktur .struk__closer{font-size:clamp(15px,4.3vw,19px);margin-top:4px}

  /* ============================================================
     4 · MANNSCHAFT: acht Gesichter, lesbare Zitate, Wand faehrt durch
     ============================================================ */
  #ac-mannschaft{place-items:stretch;align-content:stretch;
    padding-top:calc(var(--pad) + 14px)}
  #ac-mannschaft .mann{width:100%;max-width:none;height:100%;min-height:0;
    grid-template-rows:auto auto minmax(0,1fr);gap:9px;align-content:stretch;padding-bottom:0}
  #ac-mannschaft .mann__frage{font-size:13px;letter-spacing:.14em}
  #ac-mannschaft .mann__h{font-size:clamp(20px,5.6vw,26px);line-height:1.12}
  .mann__vp{display:block;position:relative;width:100%;min-height:0;overflow:hidden;
    justify-self:stretch;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(180deg,transparent 0,#000 18px,#000 calc(100% - 22px),transparent 100%)}
  #ac-mannschaft .mann__grid{height:auto;min-height:0;margin:0;will-change:transform;
    grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,auto);gap:9px}
  #ac-mannschaft .mann__grid .tile{height:auto;min-height:0}
  #ac-mannschaft .mann__grid .tile > .tile__in{flex:0 0 auto;height:auto}
  #ac-mannschaft .mann__grid .tile img{height:auto;aspect-ratio:1/0.8;
    object-fit:cover;object-position:center 22%}
  #ac-mannschaft .tile__weil{padding:9px 10px 11px}
  #ac-mannschaft .tile__weil span{font-size:11.5px;line-height:1.34;margin-bottom:4px;min-height:0}
  #ac-mannschaft .tile__weil b{font-size:11.5px;letter-spacing:.02em}
  /* V40 · Play-Marke: EINE Sprache auf der ganzen Seite.
     v39 hatte oben rechts einen roten Vollkreis. Zwei Probleme, beide auf den
     Belegen sichtbar (f430/m13_p87.png): die Maske des Sichtfensters schnitt die
     Marken der obersten Kachelreihe an (halbe Kreise = sieht kaputt aus), und auf
     den Kacheln mit roter Namensleiste stand Rot auf Rot.
     Jetzt: unten rechts IM Bild, direkt ueber der Namensleiste, weisser Kreis mit
     rotem Dreieck — genau die Marke, die auch auf den Kapitel-Karten sitzt. Dort
     kann die Maske nicht hineinschneiden (sie fadet nur die aeussersten 18/22 px
     des Fensters) und die Ecke ist bei diesem Bildausschnitt Schulter, nie Gesicht. */
  .tile__play{top:auto;bottom:8px;right:8px;left:auto;transform:none;opacity:1;
    width:28px;height:28px;background:rgba(255,255,255,.95);
    box-shadow:0 6px 16px rgba(30,20,25,.30)}
  .tile__play i::before{width:9px;height:11px;background:var(--red)}
  .tile.is-hover .tile__play{transform:none}

  /* ============================================================
     5 · HALTUNG: die zwei GF-Karten muessen ganz sichtbar sein
     ============================================================ */
  #ac-haltung{place-items:stretch;align-content:stretch;
    padding-top:calc(var(--pad) + 14px)}
  #ac-haltung .halt{width:100%;max-width:none;height:100%;min-height:0;
    grid-template-rows:auto auto minmax(0,1fr);gap:9px;align-content:stretch}
  #ac-haltung .halt__frage{font-size:13px;letter-spacing:.14em}
  #ac-haltung .halt__k{font-size:clamp(20px,5.6vw,26px);line-height:1.12}
  #ac-haltung .halt__duo{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr));
    gap:10px;margin-top:0;min-height:0;height:100%;align-items:stretch}
  #ac-haltung .gf{display:flex;flex-direction:column;min-height:0;overflow:hidden;
    border-top-right-radius:12px;border-bottom-left-radius:12px}
  #ac-haltung .gf img{flex:1 1 auto;min-height:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;object-position:center 16%}
  #ac-haltung .gf figcaption{flex:0 0 auto;padding:11px 13px 12px}
  #ac-haltung .gf blockquote{font-size:12px;line-height:1.38;margin-bottom:8px}

  /* ============================================================
     6 · FUNDAMENT, WANDEL, HERO, FINALE: Feinschliff
     ============================================================ */
  .fund__zahlen{gap:9px;width:100%}
  .zahl{padding:14px 16px 15px}
  .zahl b{font-size:clamp(19px,5.2vw,23px)}
  .zahl > span{font-size:11px;letter-spacing:.14em}
  .drv{font-size:14px;padding:.8em 1.4em .85em}
  #ac-dissolve .diss__line{font-size:clamp(26px,8vw,36px)}
  .diss__antwort-h{font-size:clamp(19px,5.6vw,25px)}
  /* Finale: die Signatur brach in drei ungleiche Zeilen und trennte dabei den
     Mitteltrenner vom Namen ("VISION. · MERAVIS"). Kleiner und enger gesperrt
     passt die ganze Zeile am Stueck: 47 Zeichen brauchen rund 300 px, bei
     375 px Geraetebreite stehen 337 px zur Verfuegung. */
  #ac-finale .fin__sig{font-size:9px;letter-spacing:.13em;max-width:none;
    line-height:1.7;text-wrap:balance}
  #ac-finale .fin__legal{margin-top:14px;font-size:11px}
  #ac-finale .fin__legal a{padding:6px 4px;display:inline-block}
  /* Intro: die Scroll-Aufforderung stand sehr tief und sehr klein. */
  #intro .icue{font-size:11.5px;letter-spacing:.14em;margin-top:clamp(16px,4vh,30px)}
}

/* ============================================================
   V39b · TABLET HOCHKANT (768 bis 1024 px)
   Dieselbe Choreografie wie auf dem Handy, aber die vorhandene Breite
   wird genutzt: groessere Typo, vier Gesichter pro Reihe (dann braucht
   die Kachelwand gar keine Fahrt mehr, der Weg rechnet sich von selbst
   auf 0) und die Bloecke stehen mittig statt randbuendig.
   ============================================================ */
@media (orientation:portrait) and (min-width:700px) and (max-width:1024px){
  .stack{max-width:min(620px,86vw)}
  .stack__txt{padding:30px 32px 34px}
  .stack__txt .chap__title{font-size:clamp(48px,7.4vw,68px)}
  .stack__claim{font-size:21px}
  .stack__lead,.stack__zeile{font-size:17px}
  .stack .film img{aspect-ratio:16/9}
  .stack .film__frage{font-size:15px}
  .stack .film__binde{font-size:13px}

  #ac-mannschaft .mann{justify-self:center;max-width:min(880px,94vw)}
  #ac-mannschaft .mann__grid{grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(2,auto);gap:12px}
  #ac-mannschaft .mann__grid .tile img{aspect-ratio:1/1.05}
  #ac-mannschaft .tile__weil span{font-size:12px}
  #ac-mannschaft .tile__weil b{font-size:12px}

  #ac-struktur .struk{justify-self:center;max-width:min(760px,92vw)}
  #ac-struktur .opan{padding:14px 18px 15px}
  #ac-struktur .opan__row{gap:14px;margin-top:11px}
  #ac-struktur .pers__ph{width:46px;height:57px}
  #ac-struktur .pers b{font-size:14px}
  #ac-struktur .pers span{font-size:10.5px}
  #ac-struktur .opan__n{font-size:13px}

  #ac-haltung .halt{justify-self:center;max-width:min(700px,92vw)}
  #ac-haltung .gf blockquote{font-size:15px}
  #ac-haltung .gf figcaption{padding:15px 18px 16px}

  .fund__zahlen{max-width:640px}
  .zahl b{font-size:26px}
  #ac-finale .fin__sig{font-size:10.5px}
}