/* ============================================================
   JERRY DECK CSS — kanonisches Stylesheet für HTML-Präsentationen
   v0.4.0 · 2026-07-29 · EXTRAKT (1:1) aus Intro-Deck v0.9.0 index.html + Additiv-Blöcke (§7.2, Print, .pagefoot)
   Quelle der Werte: Workspace/Brand/tokens/ (No Hallucinated Design)
   Regeln & Komponenten-Manifest: DECK-MASTER.md (gleicher Ordner)
   STATUS: DRAFT — Ratifizierung/Aufnahme nach Brand/ = Theo-Gate
   ============================================================ */

/* ============ Fonts (lokal, wie Landing) ============ */
@font-face{font-family:"Poppins";src:url(assets/fonts/Poppins-Bold.woff2) format("woff2");font-weight:700 800;font-display:swap}
@font-face{font-family:"Poppins";src:url(assets/fonts/Poppins-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/Manrope-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/Manrope-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(assets/fonts/Manrope-Bold.woff2) format("woff2");font-weight:700 800;font-display:swap}

/* ============ Tokens — 1:1 Landing ============ */
:root{
  --green:#4cd494; --yellow:#ffcc33; --blue:#002dff;
  --ink:#000; --ink-soft:#101112; --alt:#0e0e0e; --white:#fff;
  --mut-d:#b1b2b4; --mut-l:#5a615e; --line-l:#e7eae8;
  --band:linear-gradient(90deg,#ffcc33 0%,#ffcc33 11%,#002dff 51%,#4cd494 89%,#4cd494 100%);
  --disp:"Poppins",Arial,sans-serif;
  --body:"Manrope","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.4,0,0,1);
  --pad:clamp(22px,96px,120px);
}
*{margin:0;padding:0;box-sizing:border-box}
#frame{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden}
#stage{position:relative;width:1600px;height:900px;overflow:hidden;background:var(--ink);transform-origin:center center;flex:none}
html,body{height:100%;overflow:hidden}
body{background:var(--ink);color:#fff;font-family:var(--body)}
img{max-width:100%;display:block}
::selection{background:var(--green);color:var(--ink-soft)}

/* ============ HUD: Progress + Kapitelmarke + Dots ============ */
.progress{position:fixed;top:0;left:0;right:0;height:5px;z-index:99;background:rgba(255,255,255,.06)}
.progress i{display:block;height:100%;width:0;background:var(--band)}
.chapter{position:absolute;top:22px;left:32px;z-index:99;font:800 13px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .4s}
body.lightzone .chapter{color:rgba(0,0,0,.5)}
body.lightzone .chapter b{color:rgba(0,0,0,.65)}
.chapter b{color:rgba(255,255,255,.75);font-weight:800}
.dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;z-index:99}
.dots a{width:9px;height:9px;border-radius:99px;background:rgba(255,255,255,.22);transition:.3s;display:block}
.dots a.on{background:var(--green);height:28px}
body.lightzone .dots a{background:rgba(0,0,0,.16)}
body.lightzone .dots a.on{background:var(--green)}
.hint{position:fixed;left:26px;bottom:16px;color:rgba(255,255,255,.35);font:600 11px/1 var(--body);z-index:99}
body.lightzone .hint{color:rgba(0,0,0,.3)}
@media (pointer:coarse){.hint{display:none}}

/* ============ Sektionen ============ */
.sec{position:absolute;inset:0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:104px var(--pad) 84px;opacity:0;visibility:hidden;transform:translateY(1.2%);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.sec.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sec.dark{background:var(--ink)}
.sec.alt{background:var(--alt)}
.sec.light{background:#fff;color:var(--ink-soft)}

/* Riesige Hintergrund-Ziffer (Editorial-Ebene) */
.bignum{position:absolute;top:-.08em;right:-.05em;font:800 clamp(14rem,544px,30rem)/1 var(--disp);color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.07);pointer-events:none;user-select:none}
.light .bignum{-webkit-text-stroke:2px rgba(0,0,0,.06)}

/* Scroll-Animationen */
.a{opacity:0;transform:translateY(30px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.fade{opacity:0;transition:opacity .9s var(--ease) .15s}
.sec.on .fade{opacity:1}
.sec.on .a{opacity:1;transform:none}
.sec.on [data-d="1"]{transition-delay:.05s}
.sec.on [data-d="2"]{transition-delay:.16s}
.sec.on [data-d="3"]{transition-delay:.3s}
.sec.on [data-d="4"]{transition-delay:.44s}
.sec.on [data-d="5"]{transition-delay:.58s}
.sec.on [data-d="6"]{transition-delay:.72s}

/* ============ Typo-Grammatik ============ */
.eyebrow{font:800 clamp(.72rem,17.6px,.95rem)/1 var(--body);letter-spacing:.36em;text-transform:uppercase;color:var(--green)}
.eyebrow.yel{color:var(--yellow)}
.mark{background:var(--green);color:var(--ink-soft);padding:0 .18em .06em;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone;position:relative;z-index:-1}
h1,h2,h3,.h2x,.giant{isolation:isolate}
.mark.yel{background:var(--yellow)}
.lead{font:600 22px/1.6 var(--body);color:var(--mut-d);margin-top:28px}
.light .lead{color:var(--mut-l)}

/* km-Box (Landing) */
.km-box>span{display:inline-block;background:#101112;color:#fff;font:800 clamp(1.4rem,36.8px,2rem)/1.4 var(--disp);padding:22px 30px;border-radius:12px;transform:skew(-4deg);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.km-box>span>i{display:inline-block;font-style:normal;transform:skew(4deg);text-wrap:balance}
.km-box b{color:var(--green)}
.km-box .kmnote{display:block;margin-top:12px;font:700 .68em/1.5 var(--body);opacity:.94}

/* ============ Kinetischer Ticker ============ */
.ticker{position:absolute;left:0;right:0;bottom:0;overflow:hidden;background:var(--ink-soft);padding:14px 0;transform:translateZ(0)}
.ticker::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--yellow) 0 33.3%,var(--blue) 33.3% 66.6%,var(--green) 66.6% 100%)}
.ticker .row{display:flex;width:max-content;animation:tick 26s linear infinite}
.ticker span{font:800 clamp(.95rem,24px,1.3rem)/1 var(--disp);color:#fff;letter-spacing:.14em;text-transform:uppercase;padding:0 28px;white-space:nowrap}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ 01 · HERO ============ */
.hero{justify-content:center;padding-bottom:150px}
.hero .blobs{position:absolute;inset:-25%;pointer-events:none;filter:blur(100px);opacity:.55}
.hero .blobs i{position:absolute;border-radius:50%}
.hero .blobs .b1{width:832px;height:832px;right:-160px;top:-128px;background:radial-gradient(circle,rgba(76,212,148,.42),transparent 65%);animation:drift1 13s ease-in-out infinite alternate}
.hero .blobs .b2{width:544px;height:544px;left:-128px;bottom:-192px;background:radial-gradient(circle,rgba(0,45,255,.42),transparent 65%);animation:drift2 17s ease-in-out infinite alternate}
.hero .blobs .b3{width:480px;height:480px;right:384px;bottom:-128px;background:radial-gradient(circle,rgba(255,204,51,.42),transparent 65%);animation:drift1 21s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-112px,45px) scale(1.14)}}
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(96px,-54px) scale(1.1)}}
.hero .eyebrow{color:#fff}
.uline{background:var(--band) left 96%/100% .09em no-repeat;padding-bottom:.1em}
.hero .wordmark{position:absolute;top:clamp(26px,45px,52px);right:var(--pad);width:clamp(120px,208px,200px)}
.hero h1{font:800 104px/1.18 var(--disp);letter-spacing:-.025em;max-width:22ch}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.5deg);animation:wordin .8s var(--ease) forwards}
@keyframes wordin{to{opacity:1;transform:none}}
.hero .sub{font:600 24px/1.6 var(--body);color:var(--mut-d);margin-top:58px;max-width:56ch;opacity:0;animation:wordin .8s var(--ease) 1.15s forwards}
.hero .sub b{color:#fff}
.hero .pers{display:none;margin-top:30px;border-left:6px solid var(--green)!important;font:700 clamp(.95rem,20.8px,1.2rem)/1.5 var(--body);color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:16px 22px;max-width:56ch;opacity:0;animation:wordin .8s var(--ease) 1.35s forwards}
.hero .pers b{color:var(--green)}
.haus-stack{position:absolute;right:96px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:44px;align-items:flex-start;opacity:0;animation:wordin .8s var(--ease) 1.3s forwards}
.haus-stack img{height:44px;width:auto}

/* ============ 02 · ANSPRUCH — Editorial, asymmetrisch ============ */
.anspruch .grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(30px,64px,70px);align-items:end}
.anspruch h2{font:800 clamp(2.4rem,86.4px,4.6rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:24px;max-width:15ch}
.anspruch .lead{margin-top:34px;max-width:46ch}
.anspruch .lead b{color:var(--ink-soft)}
.anspruch .km-box{margin-top:46px;margin-left:clamp(0px,96px,110px)}
.anspruch .photo{position:relative;align-self:stretch;min-height:468px}
.anspruch .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px}
.anspruch .photo .cap{position:absolute;left:18px;bottom:18px;background:rgba(16,17,18,.82);color:#fff;font:700 .78rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;padding:10px 14px;border-radius:8px}
@media screen and (max-width:900px){.anspruch .grid{grid-template-columns:1fr}.anspruch .photo{min-height:342px}}

/* ============ 03 · TRENNER — Vollbild, überlappend ============ */
.trenn{justify-content:flex-end;padding-bottom:clamp(60px,108px,140px)}
.trenn .bg,.trenn .ov{position:absolute;inset:0}
.trenn .bg{background-size:cover;background-position:center;transform:scale(1.08)}
.trenn .ov{background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.88))}
.trenn .znum{position:absolute;top:36px;right:var(--pad);left:auto;font:800 clamp(12rem,270px,22rem)/1 var(--disp);color:transparent;-webkit-text-stroke:3px var(--yellow);opacity:.85}
.trenn .inner{position:relative;max-width:900px}
.trenn h2{font:800 clamp(3rem,128px,7rem)/1.24 var(--disp);letter-spacing:-.02em}
.trenn .m2line{height:7px;width:min(240px,480px);border-radius:99px;background:var(--band);margin-top:34px}
.trenn .lead{margin-top:28px;max-width:60ch;font-size:26px}
.trenn .lead b{color:#fff}

/* ============ 04 · STORY — überlappendes Editorial ============ */
.story .frame{position:absolute;top:12%;bottom:12%;left:var(--pad);width:544px}
.story .frame img{width:100%;height:100%;object-fit:cover;border-radius:22px}

.story .txt{position:relative;margin-left:calc(544px + 54px);max-width:790px}
.story h2{font:800 clamp(2.2rem,80px,4.2rem)/1.08 var(--disp);letter-spacing:-.02em;margin-top:22px}
.story .quote{margin-top:36px;background:var(--yellow);border-radius:16px;padding:28px 34px;box-shadow:0 30px 70px rgba(0,0,0,.35)}

.story .quote p{font:800 clamp(1.3rem,33.6px,1.9rem)/1.35 var(--disp);color:var(--ink-soft)}
.story .quote p b{font-style:italic}
.story .body{margin-top:34px;font:600 22px/1.6 var(--body);color:var(--mut-d)}
.story .body b{color:#fff}
.story .body+.body{margin-top:20px}
.story .body.agent b{color:var(--yellow)}
@media screen and (max-width:900px){.story .frame{position:relative;width:100%;height:324px}.story .txt{margin-left:0;margin-top:30px}}

/* ============ 05 · SPARTEN — gestaffelte Kacheln ============ */
.sparten h2{font:800 clamp(2.4rem,92.8px,5rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:22px}
.sparten .lead{margin-top:22px}
.sparten .lead b{color:var(--ink-soft)}
.tiles{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:24px;margin-top:56px;align-items:stretch}
.tile{background:#fff;border:1px solid var(--line-l);border-radius:20px;box-shadow:0 20px 55px rgba(0,0,0,.09);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tile:hover{transform:translateY(-10px);box-shadow:0 34px 80px rgba(0,0,0,.15)}
.tile{position:relative}
.tile .ph{position:relative;height:clamp(130px,180px,210px);background-size:cover;background-position:center;border-radius:20px 20px 0 0;overflow:hidden}
.tiles .tile1 .ph{background-position:center 30%}
.tiles .tile3 .ph{background-position:center 22%}
.tiles .op{align-self:center;font:800 40px/1 var(--disp);color:var(--ink-soft)}
.tile .edge{height:7px}
.tile .bd{padding:28px 26px 32px}
.tile .lg{height:clamp(28px,37.8px,42px);display:flex;margin-bottom:18px}
.tile .lg img{height:100%;width:auto}
.tile h3{font:800 clamp(1.2rem,28.8px,1.5rem)/1.2 var(--disp);color:var(--ink-soft)}
.tile p{margin-top:10px;font:600 clamp(.9rem,18.4px,1.05rem)/1.55 var(--body);color:var(--mut-l)}
@media screen and (max-width:900px){.tiles{grid-template-columns:1fr}.tile:nth-child(2){transform:none}}

/* ============ km-Box auf dunklen Sektionen: grün ============ */
.dark .km-box>span,.alt .km-box>span{background:var(--green);color:var(--ink-soft)}
.dark .km-box b,.alt .km-box b{color:var(--ink-soft)}
.dark .km-box.inv>span,.alt .km-box.inv>span{background:#fff;color:var(--ink-soft)}
.dark .km-box.inv b,.alt .km-box.inv b{color:#27ae70}

/* ============ Parallelogramm-Bullets (Landing .klist) ============ */
.klist{display:grid;gap:16px;margin-top:28px}
.klist span{position:relative;padding-left:30px;font:600 20px/1.55 var(--body);color:var(--mut-d)}
.light .klist span{color:var(--mut-l)}
.klist span::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;background:var(--green);transform:skew(-12deg);border-radius:2.5px}
.klist.yel span::before{background:var(--yellow)}
.klist b{color:#fff}
.light .klist b{color:var(--ink-soft)}

/* ============ 06 · BILANZ — Zahlen-Bento ============ */
.bilanz h2{font:800 clamp(2.4rem,89.6px,4.8rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:22px}
.bilanz .lead{margin-top:20px}
.bilanz .lead b{color:var(--ink-soft)}
.cells{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,25.6px,24px);margin-top:48px}
.cell{background:var(--ink-soft);border-radius:18px;padding:clamp(20px,23.4px,30px) clamp(18px,25.6px,28px);color:#fff}
.cell:nth-child(1),.cell:nth-child(2){grid-column:span 3}
.cell:nth-child(3),.cell:nth-child(4),.cell:nth-child(5){grid-column:span 2}
.cell .n{font:800 clamp(2.6rem,54px,4rem)/1 var(--disp);color:#fff}
.cell .l{font:800 clamp(.72rem,16px,.85rem)/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-top:10px}
.cell .d{font:600 clamp(.82rem,16.8px,.95rem)/1.5 var(--body);color:var(--mut-d);margin-top:8px}
@media screen and (max-width:900px){.cells{grid-template-columns:1fr 1fr}.cell{grid-column:span 1!important}}

/* ============ Referenz-Marquee (Bilanz) ============ */
.lmarq{overflow:hidden;margin-top:38px;border-top:1px solid var(--line-l);padding-top:20px}
.lmarq .row{display:flex;width:max-content;animation:tick 28s linear infinite;align-items:center}
.lmarq img{height:36px;width:auto;max-width:130px;object-fit:contain;margin:0 30px;filter:grayscale(1);opacity:.72;align-self:center}

/* ============ 07 · GEGENPOL — Foto-Bleed rechts + Ink-Panel ============ */
.gegenpol .frame{position:absolute;top:12%;bottom:12%;right:var(--pad);width:480px}
.gegenpol .frame img{width:100%;height:100%;object-fit:cover;border-radius:22px}

.gegenpol .txt{position:relative;max-width:calc(100% - 480px - clamp(26px,48px,50px));z-index:1}
.gegenpol h2{font:800 clamp(2.3rem,83.2px,4.4rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:22px}
.gegenpol .lead{margin-top:20px;max-width:50ch}
.gegenpol .lead b{color:var(--ink-soft)}
.gegenpol .klist{margin-top:30px;max-width:56ch}
.gegenpol .panel{margin-top:36px;background:var(--ink-soft);border-radius:16px;padding:26px 30px;max-width:60ch;box-shadow:0 26px 60px rgba(0,0,0,.18)}
.gegenpol .panel p{font:800 clamp(1.05rem,27.2px,1.5rem)/1.45 var(--disp);color:#fff}
.gegenpol .panel p b{color:var(--yellow)}
@media screen and (max-width:900px){.gegenpol .frame{display:none}.gegenpol .txt{max-width:none}}

/* ============ 08 · SO ARBEITEN WIR — Split dunkel ============ */
.betrieb .grid{display:grid;grid-template-columns:5.4fr 6fr;gap:clamp(30px,64px,70px);align-items:center}
.betrieb h2{font:800 clamp(2.3rem,83.2px,4.4rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:22px}
.betrieb .lead{margin-top:26px;max-width:48ch}
.betrieb .lead b{color:#fff}
.betrieb .km-box{margin-top:42px}
.betrieb .photo{position:relative;min-height:450px}
.betrieb .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px}
.betrieb .photo .cap{position:absolute;left:18px;bottom:18px;background:rgba(16,17,18,.85);color:#fff;font:700 .78rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;padding:10px 14px;border-radius:8px}
@media screen and (max-width:900px){.betrieb .grid{grid-template-columns:1fr}.betrieb .photo{min-height:324px}}

/* ============ Orchestrierungs-Diagramm (Betrieb) ============ */
.orch{background:#1c1f1e;border:1px solid #343a37;border-radius:22px;padding:clamp(24px,36px,40px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,41.6px,40px);align-items:center}
.orch .hub{text-align:center;padding-right:clamp(10px,25.6px,26px);border-right:2px solid rgba(76,212,148,.35)}
.orch .hub img{width:84px;height:84px;margin:0 auto 14px}
.orch .hub b{display:block;font:800 1.1rem/1.2 var(--disp);color:#fff}
.orch .hub p{font:700 .72rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mut-d);margin-top:6px}
.olabel{font:800 .72rem/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--green);margin-bottom:14px}
.fleet{display:grid;gap:10px}
.fleet span{display:flex;align-items:center;gap:14px;background:#141616;border:1px solid #3a413e;border-radius:12px;padding:14px 20px;font:700 18px/1 var(--body);color:#fff;animation:pulseb 3.2s ease-in-out infinite}
.fleet span:nth-child(2){animation-delay:.5s}.fleet span:nth-child(3){animation-delay:1s}.fleet span:nth-child(4){animation-delay:1.5s}.fleet span:nth-child(5){animation-delay:2s}
.fleet img{width:40px;height:40px;object-fit:contain}
@keyframes pulseb{0%,100%{border-color:#262a28}50%{border-color:rgba(76,212,148,.55)}}

/* ============ 10 · ENTSCHEIDER — Split hell ============ */
.entscheider .grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(30px,64px,70px);align-items:center}
.entscheider h2{font:800 clamp(2.4rem,89.6px,4.8rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:22px}
.entscheider .klist{margin-top:32px;max-width:54ch}
.entscheider .km-box{margin-top:40px}
.entscheider .photo{position:relative;min-height:468px}
.entscheider .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px}
.entscheider .photo .cap{position:absolute;left:18px;bottom:18px;background:rgba(16,17,18,.85);color:#fff;font:700 .78rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;padding:10px 14px;border-radius:8px}
@media screen and (max-width:900px){.entscheider .grid{grid-template-columns:1fr}.entscheider .photo{min-height:324px}}

/* ============ Text-Zeilen (Anspruch) ============ */
.trows{margin-top:36px;display:grid;gap:22px}
.trow b{display:block;font:800 clamp(1.05rem,24px,1.3rem)/1.3 var(--disp);color:var(--ink-soft)}
.trow b i{color:#2bb277;font-style:italic}
.trow p{font:600 18px/1.5 var(--body);color:var(--mut-l);margin-top:5px}

/* ============ Icon-Zeilen ============ */
.irows{margin-top:34px;display:grid;gap:20px}
.irow{display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start}
.irow img{width:64px;height:64px;object-fit:contain}
.irow span{display:block}
.irow b{display:block;font:800 clamp(1rem,23.2px,1.25rem)/1.3 var(--disp);color:#fff}
.light .irow b{color:var(--ink-soft)}
.irow p{font:600 18px/1.5 var(--body);color:var(--mut-d);margin-top:4px}
.light .irow p{color:var(--mut-l)}

/* ============ Fakten-Pillen mit Icon ============ */
.fpills{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fpills span{display:flex;align-items:center;gap:10px;background:#171919;border:1px solid #2a2d2c;border-radius:99px;padding:10px 18px;font:700 clamp(.82rem,16.8px,.95rem)/1 var(--body);color:#fff}
.fpills img{width:28px;height:28px;object-fit:contain}

/* ============ Stagger-Animation für Kacheln/Karten/Listen ============ */
.stg>*{opacity:0;transform:translateY(20px) scale(.97);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.sec.on .stg>*{opacity:1;transform:none}








.sec.on .stg>*:nth-child(1){transition-delay:.35s}
.sec.on .stg>*:nth-child(2){transition-delay:.6s}
.sec.on .stg>*:nth-child(3){transition-delay:.85s}
.sec.on .stg>*:nth-child(4){transition-delay:1.1s}
.sec.on .stg>*:nth-child(5){transition-delay:1.35s}
.sec.on .stg>*:nth-child(6){transition-delay:1.6s}
.sec.on .stg>*:nth-child(7){transition-delay:1.85s}
.sec.on .stg>*:nth-child(8){transition-delay:2.1s}
.sec.on .stg>*:nth-child(9){transition-delay:2.35s}
.sec.on .stg>*:nth-child(10){transition-delay:2.6s}
.rungs.stg>*{transform:scaleX(.35);transform-origin:left center}
.sec.on .rungs.stg>*{transform:scaleX(1)}

/* ============ Key-Message-Abstand generisch ============ */
.km-box{margin-top:52px}

/* ============ Menü ============ */
.menu-btn{position:absolute;top:16px;right:24px;z-index:130;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#fff;width:38px;height:38px;border-radius:10px;font-size:15px;cursor:pointer}
body.lightzone .menu-btn{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.18);color:var(--ink-soft)}
.menu{position:fixed;inset:0;background:rgba(5,6,6,.96);z-index:140;display:none;align-items:center;justify-content:center}
.menu.open{display:flex}
.minner{display:flex;flex-direction:column;align-items:center;gap:20px;max-height:88vh}
.mfoot{display:flex;flex-direction:column;gap:8px;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:16px}
.mhelp{font:600 12px/1.4 var(--body);color:rgba(255,255,255,.45)}
.mkunde{font:700 13px/1.4 var(--body);color:rgba(255,255,255,.7)}
.mkunde a{color:var(--green);text-decoration:none;padding:2px 6px}
.mkunde a:hover{text-decoration:underline}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:6px 44px;max-height:738px;overflow:auto;padding:24px}
.mgrid a{display:flex;gap:12px;align-items:baseline;color:#fff;text-decoration:none;font:700 clamp(.85rem,16.8px,.98rem)/1.4 var(--body);padding:7px 10px;border-radius:8px}
.mgrid a:hover{background:rgba(255,255,255,.09)}
.mgrid a i{font:800 .68rem/1 var(--body);color:var(--green);font-style:normal;min-width:22px}
@media(max-width:900px){.mgrid{grid-template-columns:1fr 1fr}}

/* ============ Generische Bausteine (Batch 3–6) ============ */
.h2x{font:800 clamp(2.2rem,76.8px,4rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:22px}
.grid2{display:grid;grid-template-columns:6fr 5fr;gap:clamp(30px,64px,70px);align-items:center}
.gphoto{position:relative;min-height:432px}
.gphoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:22px}
.gphoto .cap{position:absolute;left:18px;bottom:18px;background:rgba(16,17,18,.85);color:#fff;font:700 .78rem/1 var(--body);letter-spacing:.22em;text-transform:uppercase;padding:10px 14px;border-radius:8px}
.ipanel{background:transparent;border:2px solid #3a413e;border-radius:16px;padding:20px 26px}
.ipanel p{font:700 21px/1.55 var(--body);color:var(--mut-d)}
.ipanel p b{color:var(--green)}
.ipanel p b{color:var(--green)}
@media screen and (max-width:900px){.grid2{grid-template-columns:1fr}.gphoto{min-height:324px}}

/* ============ Herausforderungs-Kacheln (Entscheider) ============ */
.chtiles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,28.8px,26px);margin-top:40px}
.cht{background:#fff;border:1px solid var(--line-l);border-radius:16px;padding:clamp(18px,25.2px,28px);display:grid;grid-template-columns:64px 1fr;gap:18px;align-items:start;box-shadow:0 14px 40px rgba(0,0,0,.06)}
.cht img{width:72px;height:72px;object-fit:contain}
.cht b{display:block;font:800 clamp(1rem,22.4px,1.2rem)/1.3 var(--disp);color:var(--ink-soft)}
.cht p{font:600 clamp(.88rem,17.6px,1rem)/1.5 var(--body);color:var(--mut-l);margin-top:5px}
@media screen and (max-width:900px){.chtiles{grid-template-columns:1fr}}

/* ============ 11 · MARKT-BENTO ============ */
.bento .glabel{font:800 clamp(.72rem,16px,.88rem)/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--mut-d);margin:30px 0 14px}
.bento .glabel b{color:#fff}
.bgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,19.2px,18px)}
.glabel.ga b{color:var(--yellow)}
.glabel.gb b{color:var(--green)}
.bcell.g4{border-top:4px solid var(--yellow)}
.bcell.g4 .t{color:var(--yellow)}
.bcell.g3{border-top:4px solid var(--green)}
.bcell{background:#151717;border:1px solid #232626;border-radius:16px;padding:clamp(14px,18px,22px) clamp(14px,22.4px,22px)}
.bcell.g4{grid-column:span 4}
.bcell.g3{grid-column:span 3}
.bcell .n{font:800 clamp(1.7rem,36px,2.6rem)/1.05 var(--disp);color:#fff}
.bcell .t{font:800 clamp(.85rem,18.4px,1.02rem)/1.4 var(--body);color:var(--green);margin-top:8px}
.bcell .s{font:700 clamp(.6rem,.128px,.7rem)/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7c8280;margin-top:8px}
.bento .km-box{margin-top:34px}
@media screen and (max-width:900px){.bcell.g4,.bcell.g3{grid-column:span 6}}

/* ============ 13 · KRAFT DES SPORTS (Duo) ============ */
.duo .pair{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(14px,28.8px,26px);align-items:stretch;margin-top:40px}
.duo .half{border-radius:22px;padding:clamp(22px,30.6px,36px) clamp(20px,32px,32px);color:var(--ink-soft)}
.duo .half.y{background:var(--yellow)}
.duo .half.g{background:var(--green)}
.duo .half .lb{font:800 17px/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase}
.duo .half h3{font:800 clamp(1.5rem,41.6px,2.2rem)/1.15 var(--disp);margin-top:12px}
.duo .half p{font:600 clamp(.92rem,19.2px,1.08rem)/1.5 var(--body);margin-top:12px}
.duo .x{align-self:center;font:800 clamp(2rem,36px,3rem)/1 var(--disp);color:#fff}
.duo .strip{margin-top:clamp(16px,21.6px,26px);height:clamp(90px,144px,150px);border-radius:18px;background-size:cover;background-position:center 30%}
.duo .km-box{margin-top:30px}
@media screen and (max-width:900px){.duo .pair{grid-template-columns:1fr}.duo .x{justify-self:center}}

/* ============ Konvergenz-Badge (Kraft des Sports) ============ */
.conv{position:relative;display:flex;justify-content:center;margin-top:0;padding-top:44px}
.conv .c1,.conv .c2{position:absolute;top:-12px;width:4px;height:78px;border-radius:2px;transform-origin:top center}
.conv .c1{left:calc(50% - 160px);background:var(--yellow);transform:rotate(-52deg)}
.conv .c2{right:calc(50% - 160px);background:var(--green);transform:rotate(52deg)}
.abadge{display:flex;align-items:center;gap:16px;background:#151717;border:2px solid var(--green);border-radius:18px;padding:16px 30px}
.abadge img{width:60px;height:60px;object-fit:contain}
.abadge b{font:800 clamp(1rem,24px,1.3rem)/1 var(--disp);color:#fff;letter-spacing:.04em;text-transform:uppercase}

/* ============ 14 · ENGINE-VERSPRECHEN ============ */
.ebrand{display:flex;align-items:center;gap:18px}
.ebrand .edisc{width:58px;height:58px;object-fit:contain;background:#fff;border-radius:12px;padding:6px}
.ebrand .ewm{height:34px;width:auto}
.ebrand span{font:800 13px/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--green)}
.promise .facts{margin-top:26px;font:800 clamp(.75rem,16px,.9rem)/1.7 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mut-d)}
.promise .gpanel{background:var(--green);border-radius:24px;padding:clamp(26px,36px,44px) clamp(24px,38.4px,40px);color:var(--ink-soft);box-shadow:0 30px 80px rgba(76,212,148,.18)}
.promise .gpanel h3{font:800 clamp(1.7rem,48px,2.6rem)/1.2 var(--disp)}
.promise .gpanel p{font:700 clamp(.95rem,20px,1.1rem)/1.55 var(--body);margin-top:16px}

/* ============ Fakten-Karten (Engine-Versprechen) ============ */
.facts3{display:grid;gap:26px}
.fc{background:#1c1f1e;border:1px solid #343a37;border-radius:16px;padding:30px 26px;display:grid;grid-template-columns:66px 1fr;gap:20px;align-items:center}
.fc img{width:66px;height:66px;object-fit:contain}
.fc b{display:block;font:800 clamp(1rem,23.2px,1.25rem)/1.25 var(--disp);color:#fff}
.fc p{font:600 clamp(.85rem,16.8px,.95rem)/1.5 var(--body);color:var(--mut-d);margin-top:4px}

/* ============ 16 · STACK (grüne Vollfläche) ============ */
.stack{background:var(--green);color:var(--ink-soft)}
.stack .eyebrow{color:var(--ink-soft)}
.stack .center{text-align:center;max-width:1560px;margin:0 auto}
.stack h2{font:800 clamp(2rem,57.6px,3.2rem)/1.28 var(--disp);letter-spacing:-.02em;margin-top:18px}
.stack .lead{color:rgba(16,17,18,.75);margin:18px auto 0;max-width:60ch}
.stack .lead b{color:var(--ink-soft)}
.sfacts{display:flex;flex-wrap:wrap;gap:16px 34px;justify-content:center;margin-top:30px}
.sfacts span{display:flex;align-items:center;gap:10px;font:800 clamp(.85rem,16.8px,1rem)/1.2 var(--body);color:var(--ink-soft)}
.sfacts img{width:46px;height:46px;object-fit:contain}
.stack .pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.stack .pills span{background:var(--ink-soft);color:#fff;border-radius:99px;padding:10px 18px;font:800 clamp(.72rem,.1520px,.88rem)/1 var(--body);letter-spacing:.06em}
.stack .steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:14px;margin-top:44px;text-align:left;align-items:stretch}
.stack .sarr{align-self:center;font:800 30px/1 var(--disp);color:var(--ink-soft)}
.loopback{position:relative;height:46px;margin:6px 40px 0;border:3px solid var(--ink-soft);border-top:none;border-radius:0 0 22px 22px}
.loopback::before{content:"";position:absolute;left:-12px;top:-20px;border:10px solid transparent;border-bottom:16px solid var(--ink-soft);transform:rotate(0deg)}
.loopback span{position:absolute;left:50%;transform:translate(-50%,50%);bottom:0;background:var(--green);padding:6px 22px;font:800 15px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.stack .step{background:#fff;border-radius:16px;padding:18px 16px;box-shadow:0 14px 34px rgba(0,0,0,.12)}
.stack .step .sn{font:800 24px/1 var(--disp);color:var(--green)}
.stack .step .si{width:64px;height:64px;object-fit:contain;margin-top:12px}
.stack .step h4{font:800 20px/1.25 var(--disp);margin-top:10px}
.stack .step p{font:600 16px/1.5 var(--body);color:var(--mut-l);margin-top:8px}
.stack .flyfoot{margin-top:26px;text-align:center;font:800 clamp(.7rem,.1520px,.85rem)/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:rgba(16,17,18,.7)}
@media screen and (max-width:900px){.stack .steps{grid-template-columns:1fr 1fr}}

/* ============ 17 · ARCHETYPEN ============ */
.arche .shot{position:relative}
.arche .shot img{width:100%;border-radius:18px;border:1px solid #2a2d2c;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.arche .shot .cap{position:absolute;left:14px;bottom:14px;background:rgba(16,17,18,.88);color:#fff;font:700 .68rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;padding:9px 12px;border-radius:8px}

/* ============ Match-Diagramm (Archetypen) ============ */
.match{display:grid;gap:16px}
.mrow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.node{background:#1c1f1e;border:1px solid #343a37;border-radius:16px;padding:26px 22px;text-align:center}
.node img{width:78px;height:78px;object-fit:contain;margin:0 auto 14px}
.node b{display:block;font:800 clamp(.9rem,19.2px,1.05rem)/1.25 var(--disp);color:#fff}
.node p{font:800 13px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-top:6px}
.mlink{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:clamp(90px,144px,150px)}
.mlink i{display:block;width:100%;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--green) 0 35%,rgba(76,212,148,.15) 50%,var(--green) 65% 100%);background-size:200% 100%;animation:dashmove 2.4s linear infinite}
@keyframes dashmove{to{background-position:-200% 0}}
.mlink span{font:800 .62rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--green);text-align:center}
.mengine{display:flex;align-items:center;gap:14px;justify-content:center;background:#101112;border:1px solid rgba(76,212,148,.5);border-radius:16px;padding:18px 28px;margin:0 auto}
.mengine img{width:46px;height:46px}
.mengine span{font:800 17px/1.35 var(--body);color:#fff}

/* ============ 18 · ROLLEN / 19 · AGENTEN ============ */
.cardrow{display:grid;gap:clamp(10px,19.2px,18px);margin-top:40px}
.cardrow.c5{grid-template-columns:repeat(5,1fr)}
.cardrow.c3{grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch}
.aarr{align-self:center;font:800 34px/1 var(--disp);color:var(--green)}
.dcard{background:#1c1f1e;border:1px solid #343a37;border-radius:16px;padding:clamp(16px,21.6px,24px) clamp(14px,22.4px,22px)}
.dcard .di{width:80px;height:80px;object-fit:contain;margin-bottom:16px}
.roles .dcard{border-top:4px solid var(--green)}
.roles .dcard:nth-child(2){border-top-color:var(--yellow)}
.roles .dcard:nth-child(2) .rn{color:var(--yellow)}
.roles .dcard:nth-child(3){border-top-color:#4d6bff}
.roles .dcard:nth-child(3) .rn{color:#7d97ff}
.roles .dcard:nth-child(4){border-top-color:#4d6bff}
.roles .dcard:nth-child(4) .rn{color:#7d97ff}
.roles .dcard:nth-child(5){border-top-color:#4d6bff}
.roles .dcard:nth-child(5) .rn{color:#7d97ff}
.dcard .rn{font:800 .78rem/1 var(--body);letter-spacing:.26em;color:var(--green)}
.dcard h4{font:800 24px/1.25 var(--disp);color:#fff;margin-top:10px}
.dcard p{font:600 17px/1.5 var(--body);color:var(--mut-d);margin-top:8px;text-wrap:balance}
.dcard .em{color:var(--green);font-weight:800}
@media screen and (max-width:900px){.cardrow.c5,.cardrow.c3{grid-template-columns:1fr 1fr}}

/* ============ Agenten-Folie luftiger ============ */
.agents .cardrow{margin-top:54px}
.agents .dcard{padding:40px 30px}
.agents .dcard .di{width:88px;height:88px;margin-bottom:20px}
.agents .ipanel{margin-top:48px}

/* ============ 21 · GARANTIE-LEITER ============ */
.ladder .rungs{margin-top:36px;display:grid;gap:10px}
.rung{display:flex;align-items:center;gap:16px;border-radius:12px;padding:19px 22px;border:1px solid var(--line-l);background:#f7f8f8}
.rung .lv{font:800 1rem/1 var(--disp);color:var(--mut-l);width:22px}
.rung .nm{font:800 clamp(.95rem,20px,1.15rem)/1.2 var(--disp);color:var(--ink-soft)}
.rung .st{margin-left:auto;font:800 .72rem/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--mut-l);white-space:nowrap}
.rung.mint{background:#e2f6ec;border-color:#bfe9d4}
.rung.go{background:var(--green);border-color:var(--green)}
.rung.go .nm,.rung.go .st,.rung.go .lv{color:var(--ink-soft)}
.ladder .mg{margin-top:26px;font:600 clamp(.92rem,19.2px,1.05rem)/1.6 var(--body);color:var(--mut-l);max-width:56ch}
.ladder .mg b{color:var(--ink-soft)}

/* ============ Make-Good-Karte ============ */
.ladder .h2x{font-size:clamp(1.9rem,54.4px,3rem)}
.mgcard{margin-top:64px;background:#f7f8f8;border:1px solid var(--line-l);border-left:6px solid var(--green);border-radius:14px;padding:22px;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:start}
.mgcard img{width:56px;height:56px;object-fit:contain}
.mgcard b{font:800 22px/1.3 var(--disp);color:var(--ink-soft)}
.mgcard p{font:600 19px/1.55 var(--body);color:var(--mut-l);margin-top:8px}
.mgcard p b{font:inherit;font-weight:800;color:var(--ink-soft)}

/* ============ 22 · READY·SET·GO ============ */
.rsg .cardrow{grid-template-columns:repeat(3,1fr);align-items:stretch}
.pcard{position:relative;background:#fff;border:1px solid var(--line-l);border-radius:20px;padding:clamp(20px,27px,30px) clamp(18px,28.8px,28px);box-shadow:0 18px 50px rgba(0,0,0,.07);display:flex;flex-direction:column}
.pcard .pi{position:absolute;top:20px;right:20px;width:62px;height:62px;object-fit:contain}
.pdesc{font:600 clamp(.85rem,16.8px,.95rem)/1.5 var(--body);color:var(--mut-l);margin-top:12px}
.plist{list-style:none;margin-top:14px;display:grid;gap:9px}
.plist li{position:relative;padding-left:24px;font:700 clamp(.85rem,16.8px,.95rem)/1.45 var(--body);color:var(--ink-soft)}
.plist li::before{content:"";position:absolute;left:0;top:.4em;width:10px;height:10px;background:var(--green);transform:skew(-12deg);border-radius:2px}
.pcard .badge{align-self:flex-start;border-radius:99px;padding:8px 14px;font:800 .72rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;background:var(--ink-soft);color:#fff}
.pcard .badge.free{background:var(--green);color:var(--ink-soft)}
.pcard .badge.mint{background:#e2f6ec;color:var(--ink-soft)}
.pcard .badge.go{background:var(--green);color:var(--ink-soft)}
.pcard h4{font:800 clamp(1.3rem,30.4px,1.7rem)/1.15 var(--disp);color:var(--ink-soft);margin-top:16px}
.pcard .pr{font:800 clamp(.95rem,20.8px,1.15rem)/1.3 var(--disp);color:var(--ink-soft);margin-top:6px}
.pcard p{font:600 clamp(.85rem,16.8px,.95rem)/1.55 var(--body);color:var(--mut-l);margin-top:12px}
.pcard p b{color:var(--ink-soft)}
@media screen and (max-width:900px){.rsg .cardrow{grid-template-columns:1fr}}

/* ============ 23 · SERVICES ============ */
.services .klist{grid-template-columns:1fr 1fr;column-gap:clamp(20px,38.4px,40px)}
.services .klist span{font-size:20px}
.services .klist{gap:19px}
@media screen and (max-width:900px){.services .klist{grid-template-columns:1fr}}

/* ============ Mittler-Diagramm (Services) ============ */
.mid{display:grid;gap:14px;justify-items:stretch}
.mnode{background:#1c1f1e;border:2px solid #3a413e;border-radius:16px;padding:16px 24px;text-align:center}
.mnode img{width:54px;height:54px;object-fit:contain;margin:0 auto 8px}
.mnode b{font:800 1rem/1.2 var(--disp);color:#fff;letter-spacing:.04em;text-transform:uppercase}
.mjerry{background:#fff;border:2px solid var(--green);border-radius:18px;padding:24px;text-align:center}
.mjerry .mdisc{width:64px;height:64px;object-fit:contain;margin:0 auto 10px}
.mjerry .mwm{height:26px;width:auto;margin:0 auto 10px}
.marr{text-align:center;font:800 26px/1 var(--disp);color:var(--green)}

.mjerry p{font:700 16px/1.5 var(--body);color:var(--mut-l)}

/* ============ 24 · TRUST (ISO·Datenschutz·Förder) ============ */
.trust .cardrow{grid-template-columns:repeat(3,1fr);align-items:stretch}
.tcard{background:#fff;border:1px solid var(--line-l);border-top:6px solid var(--blue);border-radius:16px;padding:clamp(20px,27px,28px) clamp(18px,25.6px,26px);box-shadow:0 16px 44px rgba(0,0,0,.06)}
.tcard .ti{width:70px;height:70px;object-fit:contain;margin-bottom:16px}
.tcard h4{font:800 clamp(1.05rem,24px,1.3rem)/1.2 var(--disp);color:var(--ink-soft)}
.tcard p{font:600 clamp(.85rem,16.8px,.96rem)/1.55 var(--body);color:var(--mut-l);margin-top:12px}
.tcard p b{color:var(--ink-soft)}
@media screen and (max-width:900px){.trust .cardrow{grid-template-columns:1fr}}

/* ============ 25/26 · JERRY OS (blaues Kapitel) ============ */
.mark.blu{background:var(--blue);color:#fff}
.os .klist span::before{background:#fff}
.oshead{display:flex}
.oshead img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:18px;padding:10px}
.os .km-box>span{background:var(--blue);color:#fff}
.os .km-box b{color:#fff}

/* ============ 27 · CTA ============ */
.cta .cardrow{grid-template-columns:1fr 1fr;align-items:stretch;max-width:900px}
.ccard{background:#fff;border:1px solid var(--line-l);border-radius:20px;padding:clamp(22px,27px,32px);box-shadow:0 18px 50px rgba(0,0,0,.07)}
.ccard .lb{font:800 .74rem/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--green)}
.ccard h4{font:800 clamp(1.2rem,28.8px,1.6rem)/1.2 var(--disp);color:var(--ink-soft);margin-top:12px}
.ccard p{font:600 clamp(.9rem,18.4px,1.02rem)/1.6 var(--body);color:var(--mut-l);margin-top:12px}
.ccard p b{color:var(--ink-soft)}
.cta .wrap{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,48px,60px);align-items:center}
.cta .qr{text-align:center}
.cta .qr img{width:clamp(120px,256px,200px);border-radius:14px;border:1px solid var(--line-l);margin:0 auto}
.cta .qr .ql{font:800 .68rem/1.5 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--mut-l);margin-top:12px}
@media screen and (max-width:900px){.cta .wrap{grid-template-columns:1fr}.cta .cardrow{grid-template-columns:1fr}}

/* ============ 28 · DISCLAIMER / ANHANG ============ */
.disc p{font:600 clamp(.85rem,17.6px,1rem)/1.7 var(--body);color:var(--mut-d);max-width:75ch;margin-top:18px}
.disc .firm{font:700 clamp(.7rem,.144px,.8rem)/1.8 var(--body);letter-spacing:.1em;text-transform:uppercase;color:#7c8280;margin-top:34px}
.appx .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,32px,34px);margin-top:36px}
.appx .cols2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,32px,34px);margin-top:36px}
.acol{background:#f7f8f8;border:1px solid var(--line-l);border-radius:16px;padding:clamp(18px,23.4px,26px)}
.acol h4{font:800 .78rem/1.3 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.acol ul{list-style:none;margin-top:14px;display:grid;gap:10px}
.acol li{position:relative;padding-left:22px;font:600 clamp(.88rem,17.6px,1rem)/1.55 var(--body);color:var(--mut-l)}
.acol li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--green);transform:skew(-12deg);border-radius:2px}
.appx .km-box{margin-top:30px}
@media screen and (max-width:900px){.appx .cols3,.appx .cols2{grid-template-columns:1fr}}

/* ============ KPI-Vergleichs-Matrix ============ */
.kpitab{margin-top:34px;border:1px solid #232626;border-radius:16px;overflow:hidden}
.kpitab table{width:100%;border-collapse:collapse;font:600 16.5px/1.45 var(--body)}
.kpitab th,.kpitab td{padding:17px 18px;text-align:left;border-bottom:1px solid #1d2020;border-right:1px solid #1d2020;color:var(--mut-d);vertical-align:top}
.kpitab th{font:800 14.5px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#151717}
.kpitab td b{color:#fff}
.kpitab th.jy,.kpitab td.jy{background:rgba(76,212,148,.1);border-left:2px solid var(--green)}
.kpitab th.jy{color:var(--green)}
.kpitab td.jy{color:#d9f3e6}
.kpitab td.jy b{color:var(--green)}
.kpitab td.jy .big{font:800 30px/1.15 var(--disp);color:var(--green)}
.kpitab td:not(.jy):not(.kz){opacity:.78;font-size:14.5px}
.kpitab td.jy{font-size:15.5px}
.kpitab tr:last-child td{border-bottom:none}
.kpitab td:last-child,.kpitab th:last-child{border-right:none}
.kpitab .kz{font:800 16px/1.3 var(--disp);color:#fff;white-space:nowrap}
.kpifoot{margin-top:18px;font:600 13px/1.55 var(--body);color:#8b918e;max-width:1400px}

/* ============ Marken + Menschen ============ */
.mm .mmgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:38px}
.mmcard{background:#fff;border:1px solid var(--line-l);border-radius:18px;padding:28px 30px;box-shadow:0 16px 44px rgba(0,0,0,.06)}
.mmcard .mmh{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.mmcard .mmh img{width:60px;height:60px;object-fit:contain}
.mmcard .mmh b{font:800 22px/1.2 var(--disp);color:var(--ink-soft)}
.mmcard ul{list-style:none;display:grid;gap:12px}
.mmcard li{position:relative;padding-left:24px;font:600 15.5px/1.5 var(--body);color:var(--mut-l)}
.mmcard li::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;background:var(--green);transform:skew(-12deg);border-radius:2px}
.mmgrid .mmcard:nth-child(2) li::before{background:var(--blue)}
.mmcard li b{color:var(--ink-soft)}

.pname{font:800 44px/1.1 var(--disp);color:#fff;margin-top:22px}
.pname span{color:var(--green)}

/* ============ 16:9-Feinjustierung überlaufender Folien ============ */
.gegenpol h2{font-size:56px!important}
.gegenpol .lead{max-width:none;margin-top:16px;font-size:17px}
.gegenpol .irows{margin-top:22px;gap:13px}
.gegenpol .irow{grid-template-columns:44px 1fr;gap:14px}
.gegenpol .irow img{width:44px;height:44px}
.gegenpol .irow p{font-size:16px}
.gegenpol .irow b{font-size:19px}
.gegenpol .panel{margin-top:36px;padding:24px 32px;max-width:820px}
.gegenpol .panel p{font-size:23px;text-wrap:balance}
.method .klist{margin-top:34px;gap:22px}
.method .klist span{font-size:21px;line-height:1.55}
.method .km-box{margin-top:28px}
.method .km-box>span{font-size:24px;padding:16px 24px}

/* ============ Print / PDF: 1 Sektion = 1 Seite 16:9 ============ */
@media print{
  @page{size:1600px 900px;margin:0}
  html,body{height:auto;overflow:visible}
  #frame{position:static;display:block;overflow:visible}
  #stage{transform:none!important;width:1600px;height:auto;overflow:visible;position:static}
  .sec{position:relative;inset:auto;width:1600px;height:900px;page-break-after:always;opacity:1!important;visibility:visible!important;transform:none!important}
  .a,.fade{opacity:1!important;transform:none!important}
  .stg>*{opacity:1!important;transform:none!important}
  .hero .blobs,.dots,.hint,.progress,.chapter,.menu,.menu-btn{display:none}
  .ticker .row,.lmarq .row,.fleet span,.mlink i{animation:none}
  .hero h1 .w,.hero .sub,.hero .pers,.haus-stack{opacity:1;animation:none}
  .haus-stack{transform:translateY(-50%)}
  .plx{transform:none!important}
}

/* ============================================================
   SAFEGUARDS — ADDITIV zu v0.1.0 (kein Teil des Intro-Deck-Extrakts)
   v0.1.1 · Karsten-Regel 28.07.: Highlight-Balken (.mark) dürfen
   NIEMALS andere Schriftsegmente überlagern (DECK-MASTER §7.2).
   ============================================================ */
.hero h1{margin-top:24px}                        /* Balken-Abstand zum Eyebrow im Hero */
.eyebrow:has(+h1,+h2,+.h2x){margin-bottom:.4em}  /* generischer Eyebrow→Headline-Abstand */
h1:has(.mark),h2:has(.mark),.h2x:has(.mark){line-height:1.2}  /* Zeilen-Balken berühren sich nie */

/* ============================================================
   SAFEGUARDS — ADDITIV zu v0.1.1 (kein Teil des Intro-Deck-Extrakts)
   v0.1.2 · 28.07.2026 · Design-System-Session — Umsetzung §7.2 (P0):
   Der v0.1.1-Abstand skalierte mit der EYEBROW-Größe (.4em ≈ 7px) —
   die ratifizierte Regel verlangt ≥ .3em der HEADLINE. Befund: Galerie
   Folie 02, 92px-h2-Balken überdeckte das Eyebrow trotz Safeguard.
   ============================================================ */
h1:has(.mark),h2:has(.mark),.h2x:has(.mark){margin-top:.3em}  /* Balken-Abstand skaliert mit Headline */

/* ============================================================
   PRINT-FREEZE — ADDITIV (kein Teil des Intro-Deck-Extrakts)
   v0.1.3 · 28.07.2026 · Design-System-Session — Lern-Log §9.5 +
   Karsten-Anforderung: PDF-Export muss dem HTML-Design 1:1 gleichen.
   Der Kanon-Freeze setzte bei .hero h1 .w nur opacity zurück — der
   Start-Transform (translateY(.5em) rotate(1.5deg)) blieb im PDF stehen.
   ============================================================ */
@media print{.hero h1 .w{transform:none!important}}

/* ============================================================
   PRINT-FARBEN — ADDITIV (kein Teil des Intro-Deck-Extrakts)
   v0.1.4 · 28.07.2026 · Design-System-Session — Karsten-Vorfall:
   ⌘P-Export lieferte WEISSE Folien (Browser druckt Hintergrund-
   farben standardmäßig nicht). Erzwingt Flächen/Farben im Druck —
   gilt automatisch für jedes Deck, das jerry-deck.css nutzt.
   ============================================================ */
@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .menu{display:none!important}  /* Kapitelübersicht/Folien-Index nie mitdrucken */
}

/* ============================================================
   .PAGEFOOT — KANON-KOMPONENTE (ADDITIV; Extrakt 1:1 aus
   OS-Fokus-Deck v0.3.3, der Referenz-Implementierung)
   v0.2.0 · 28.07.2026 · Karsten-Standard 28.07.: Fußzeile auf
   JEDER Folie — Dateiname LINKS · „© We are Jerry GmbH" MITTE ·
   Seitenzahl „07 / 24" RECHTS. Wird per JS injiziert (eine Quelle),
   Ticker-Folien (Hero/Schluss) ausgenommen. DECK-MASTER §7.13.
   ============================================================ */
.pagefoot{position:absolute;left:var(--pad);right:var(--pad);bottom:15px;display:flex;justify-content:space-between;align-items:baseline;font:700 11.5px/1 var(--body);letter-spacing:.08em;color:rgba(255,255,255,.38);z-index:6;pointer-events:none}
.light .pagefoot{color:rgba(0,0,0,.35)}
.pagefoot span:nth-child(2){letter-spacing:.2em;text-transform:uppercase}

/* ============================================================
   PRINT-SCOPE — ADDITIV · v0.2.1 · 28.07.2026 · Intro-Session-
   Befund 19:10: Fassungs-ausgeblendete Folien (.vhide) druckten
   in der Voll-URL mit. Scope-Folien im Druck hart ausblenden;
   SOP: Summary-PDF = Export der Summary-URL (DECK-MASTER §7.6).
   ============================================================ */
@media print{.sec.vhide{display:none!important}}

/* ============================================================
   LETTERBOX-ANGLEICH — ADDITIV · v0.2.2 · 28.07.2026 · Karsten
   18:55: „Keine schwarzen Ränder/Balken rechts/links, oben/unten."
   Bei Nicht-16:9-Fenstern füllt #frame die Ränder — diese Zonen
   tragen ab jetzt IMMER die Fläche der aktiven Folie (Deck-JS
   toggelt body.lightzone, wie im Kanon üblich). DECK-MASTER §7.13.
   ============================================================ */
body.lightzone #frame{background:#fff}
body.lightzone #stage{background:#fff}

/* ============================================================
   .MSDOC — MANAGEMENT-SUMMARY-DOKUMENTFORM (ADDITIV; Extrakt 1:1
   aus Intro-Deck v0.9.0 Build 19:55, Folien sx1/sx2)
   v0.3.0 · 28.07.2026 · Karsten 19:15: „Eine Management Summary
   ist immer in Dokument-Form geschrieben" — Memo-Layout statt
   Folien-Grammatik: Dokumentkopf · nummerierte Abschnitte mit
   Fließtext · Beschluss-Block. DECK-MASTER §7.6/§11.
   ============================================================ */
.msdoc{justify-content:center}
.msdoc>div{max-width:1240px;margin:0 auto;width:100%}
.msdoc .dochead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:3px solid var(--ink);padding-bottom:13px}
.msdoc .dochead .dh1{font:800 13px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.msdoc .dochead .dh2{font:600 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.7}
.msdoc h2{font:800 46px/1.2 var(--disp);color:var(--ink);margin-top:24px;letter-spacing:-.01em}
.msdoc .sect{margin-top:30px;display:grid;grid-template-columns:60px 1fr;gap:18px;align-items:start}
.msdoc .sno{font:800 32px/1.1 var(--disp);color:var(--green);font-variant-numeric:tabular-nums}
.msdoc .sect h3{font:800 24px/1.25 var(--disp);color:var(--ink)}
.msdoc .sect p{font:500 19px/1.65 var(--body);color:var(--ink-soft);margin-top:7px}
.msdoc .sect p b{color:var(--ink);font-weight:800}
.msdoc .beschluss{margin-top:34px;background:var(--ink);color:#fff;border-radius:14px;padding:24px 32px;font:700 21px/1.55 var(--body)}
.msdoc .beschluss b{color:var(--green)}

/* ============================================================
   TICKER × PAGEFOOT — ADDITIV · v0.3.1 · 28.07.2026 · Karsten
   21:20: Läuft unten das Keyword-Laufband (.ticker), verschwindet
   die Fußzeile IMMER (Kollision im Intro v0.9.0-Hero). Safeguard
   zusätzlich zur JS-Regel (Injektion überspringt Ticker-Folien).
   ============================================================ */
.sec:has(.ticker) .pagefoot{display:none!important}

/* ============================================================
   KANON-HÄRTUNG — ADDITIV · v0.4.0 · 29.07.2026 · Karsten-Findings
   28.07. abends (Inbox 19:11–20:33): Font-Guard, Progress-Track,
   pagefoot-Vereinheitlichung, km-box-/klist-/kpitab-Kontextfarben.
   Regeln: DECK-MASTER §7.3/§7.8/§7.11/§7.13 + §3 Farb-Harmonie.
   ============================================================ */
h1,h2,h3,h4{font-family:var(--disp)}                     /* Headlines fallen NIE auf Manrope zurück (Vorfall OS S13) */
.progress{background:transparent}                        /* Track unsichtbar — nur das wachsende Band ist sichtbar */
.pagefoot{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline}
.pagefoot span{font:700 11.5px/1 var(--body)!important;letter-spacing:.08em!important}  /* EIN Typo-Format, hart */
.pagefoot span:nth-child(2){letter-spacing:.2em!important;text-transform:uppercase;text-align:center}
.pagefoot span:nth-child(3){text-align:right}
.km-box.yel>span{background:var(--yellow);color:var(--ink-soft)}
.km-box.yel b{color:var(--ink-soft)}
.km-box.blu>span{background:var(--blue);color:#fff}
.km-box.blu b{color:#fff}
.klist.blu span::before{background:var(--blue)}          /* Bullets erben die Kontextfarbe (§3 Farb-Harmonie) */
.kpitab.blu th.jy,.kpitab.blu td.jy{background:rgba(0,45,255,.12);border-left:2px solid var(--blue)}
.kpitab.blu th.jy,.kpitab.blu td.jy,.kpitab.blu td.jy b,.kpitab.blu td.jy .big{color:#fff}  /* kleines Blau auf Dunkel → weiß (P0) */


/* ============================================================
   KOMPONENTEN-PAKET 29.07. — ADDITIV (Karsten-Sichtfreigabe 11:02)
   v0.5.0 · Design-System-Session · DECK-MASTER §7.6/§7.10/§7.15
   ① .stapel (Module sitzen AUF der Basis, Basis-zuerst-Animation)
   ② .msdoc-Gestaltung (.quad/.kfig/.diagslot)
   ③ .alert (Kern-Problem-Folientyp, Voll-Gelb + Schlag-Zeilen)
   ④ .split (geteilte Flächen — Matrix: Neutral × EIN Akzent)
   ⑤ .circwrap/.medal (Kreis-Portrait mit Band-Ring, Zahlen-Medaillon)
   Referenz-Anwendung: 2026-07-29_entwurf-stapel-msdoc_DE_v0.1.0.html
   ============================================================ */
.stapel{margin-top:56px}
.stapel .mods{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:0 48px;position:relative;z-index:2}
.stapel .chip{background:#fff;border-radius:16px 16px 8px 8px;border-top:5px solid var(--blue);
  padding:26px 16px 30px;text-align:center;margin-bottom:-30px;
  box-shadow:0 18px 30px rgba(0,20,90,.16),0 3px 8px rgba(0,20,90,.08)}
.stapel .chip img{width:60px;height:60px;margin:0 auto 13px;display:block}
.stapel .chip i{font:800 11px/1 var(--body);letter-spacing:.22em;color:#5a75ff;font-style:normal;display:block;margin-bottom:6px}
.stapel .chip b{font:800 17px/1.25 var(--disp);color:var(--ink-soft);display:block}
.stapel .basis{position:relative;z-index:1;background:var(--blue);border-radius:20px;padding:52px 40px 34px;color:#fff;
  box-shadow:inset 0 26px 30px rgba(0,10,60,.28),0 20px 44px rgba(0,20,90,.16)}
.stapel .basistag{display:inline-block;background:#fff;color:var(--blue);margin-bottom:18px;
  font:800 13px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;padding:10px 18px;
  transform:skew(-12deg);border-radius:4px;box-shadow:0 8px 20px rgba(0,20,90,.2)}
.stapel .basistag span{display:inline-block;transform:skew(12deg)}
.stapel .bcells{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stapel .bcell{background:#fff;border-radius:12px;padding:20px 20px;display:grid;grid-template-columns:58px 1fr;gap:15px;align-items:center}
.stapel .bcell img{width:58px;height:58px}
.stapel .bcell b{font:800 15.5px/1.2 var(--disp);color:var(--ink-soft);display:block}
.stapel .bcell p{font:600 13px/1.35 var(--body);color:var(--mut-l);margin-top:3px}
/* Erzähl-Animation: BASIS ZUERST, Module landen danach gestaffelt */
.stapel .basis,.stapel .chip{opacity:0}
.sec.on .stapel .basis{animation:st-base .65s var(--ease) .15s forwards}
.sec.on .stapel .chip{animation:st-land .6s var(--ease) forwards}
.sec.on .stapel .chip:nth-child(1){animation-delay:.95s}
.sec.on .stapel .chip:nth-child(2){animation-delay:1.10s}
.sec.on .stapel .chip:nth-child(3){animation-delay:1.25s}
.sec.on .stapel .chip:nth-child(4){animation-delay:1.40s}
.sec.on .stapel .chip:nth-child(5){animation-delay:1.55s}
@keyframes st-base{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes st-land{0%{opacity:0;transform:translateY(-52px)}70%{opacity:1;transform:translateY(7px)}100%{opacity:1;transform:none}}
@media print{.stapel .basis,.stapel .chip{opacity:1!important;animation:none!important;transform:none!important}}

/* ---------- ② MSDOC-GESTALTUNG ---------- */
.msdoc .quad{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.msdoc .qcard{border:1px solid var(--line-l);border-radius:14px;padding:28px 32px;background:#fff}
.msdoc .qcard .qk{font:800 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mut-l);margin-bottom:10px}
.msdoc .qcard.acc-y{border-top:4px solid var(--yellow)}
.msdoc .qcard.acc-b{border-top:4px solid var(--blue)}
.msdoc .qcard.acc-g{border-top:4px solid var(--green)}
.msdoc .qcard p{font:500 18px/1.6 var(--body);color:var(--ink-soft);max-width:46ch}
.msdoc .qcard p b{font-weight:800;color:var(--ink)}
.msdoc .kfig{font:800 58px/1.05 var(--disp);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:2px 0 6px}
.msdoc .kfig small{font:800 15px/1 var(--disp);color:var(--mut-l);letter-spacing:0}
.msdoc .klabel{font:700 15.5px/1.45 var(--body);color:var(--mut-l)}
.msdoc .diagslot{border:1px solid var(--line-l);border-radius:14px;padding:20px 24px;background:#fff;display:flex;flex-direction:column;align-self:stretch}
.msdoc .diagslot img{width:100%;flex:1;min-height:0;object-fit:contain}
.msdoc .diagslot .qk{font:800 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--mut-l);margin-bottom:8px}

/* ---------- ③ ALERT (Kern-Problem, Karsten 10:26 via Lidl) ---------- */
.alert{background:var(--yellow)!important;color:var(--ink-soft)}
.alert .eyebrow{color:var(--ink)}
.alert h2{font:800 88px/1.15 var(--disp);letter-spacing:-.02em;color:var(--ink)}
.alert .bignum{-webkit-text-stroke:3px rgba(0,0,0,.10)}
.alert .schlag{margin-top:40px;display:grid;gap:18px;max-width:1200px}
.alert .schlag span{font:800 26px/1.35 var(--disp);color:var(--ink);padding-left:36px;position:relative}
.alert .schlag span::before{content:"";position:absolute;left:0;top:.34em;width:15px;height:15px;background:var(--ink);transform:skew(-12deg);border-radius:3.5px} /* Kanon-Parallelogramm, skaliert */
.alert .schlag.icons span{padding-left:76px;min-height:48px;display:flex;align-items:center}
.alert .schlag.icons span::before{display:none}
.alert .schlag.icons img{position:absolute;left:0;top:50%;transform:translateY(-50%);width:54px;height:54px} /* Icons IMMER freigestellt (§7.3) */
.alert .pagefoot{color:rgba(0,0,0,.35)!important}
.alert .km-box>span{font-size:40px}
.alert .km-box b{color:var(--yellow)}

/* ---------- ④ SPLIT (geteilte Flächen; Matrix: Neutral × EIN Akzent) ---------- */
.split{padding:0!important;display:grid;grid-template-columns:1fr 1fr}
.split .half{padding:120px 64px 100px;display:flex;flex-direction:column;justify-content:center}
.split .half.wht{background:#fff;color:var(--ink-soft)}
.split .half.yel{background:var(--yellow);color:var(--ink-soft)}
.split .half.blu{background:var(--blue);color:#fff}
.split .half.grn{background:var(--green);color:var(--ink-soft)}
.split .half.ink{background:var(--ink);color:#fff}
.split .pagefoot{color:rgba(0,0,0,.35)!important;z-index:9}
.split h2{font:800 64px/1.2 var(--disp);letter-spacing:-.02em}
/* ---------- ⑤ KREIS (Rund führt: Portrait + Medaillon) ---------- */
.circwrap{width:352px;height:352px;border-radius:50%;padding:7px;background:var(--band);box-shadow:0 24px 60px rgba(0,0,0,.18)}
.circwrap img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 20%}
.medal{width:224px;height:224px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-content:center;text-align:center;gap:6px}
.medal .n{font:800 62px/1 var(--disp);font-variant-numeric:tabular-nums}
.medal .l{font:800 12.5px/1.4 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);max-width:150px;margin:0 auto}
.medal.grn{background:var(--green);color:var(--ink-soft)}
.medal.grn .l{color:var(--ink-soft);opacity:.75}

/* ============================================================
   EYEBROW-ABSTAND — ADDITIV · v0.5.2 · 29.07.2026 · Karsten 11:26:
   Abstand Eyebrow → Headline/Key Message generell zu eng (der
   v0.1.1-Safeguard von .4em ≈ 7px deckte nur den Balken-Fall).
   Grundabstand jetzt ≥ 1.2em der Eyebrow-Größe (~21px). §7.2.
   ============================================================ */
.eyebrow:has(+h1,+h2,+h3,+.h2x,+.giant){margin-bottom:1.2em}

/* ============================================================
   NOWRAP-UTILITY — ADDITIV · v0.5.3 · 29.07.2026 · Owner-Befund 13:28:
   ` ` verhindert KEINEN Umbruch nach einem Bindestrich —
   „Sport-Marketing & -Management" bricht trotzdem als „& -"/„Management".
   Wortgruppen, die zusammenbleiben MÜSSEN, in .nb setzen. §7.16.
   ============================================================ */
.nb{white-space:nowrap}

/* znum oben RECHTS — Karsten-Entscheidung 29.07. 13:52, §7.9. CSS v0.5.4 */

/* ============================================================
   §7.18 ZITAT-FOLIE — Kanon ab CSS v0.6.0 (Karsten-Freigabe 30.07., 08:50)
   Ersetzt die alte Regel „Zitat = gelbe Karte" (die war die Ursache der
   überladenen Lidl-Folie). Grundsatz: DAS ZITAT IST DIE FOLIE.
   Kein Kasten, keine Fläche um den Satz — die Größe trägt die Wucht.
   Sechs Flächenfassungen; Kontrast folgt §3 (auf Blau weiß, auf Gelb/Grün ink).
   ============================================================ */
.zitat{justify-content:center}
.zitat .zit{position:relative;z-index:2;max-width:1180px}
.zitat q{quotes:none}
.zitat .zq{font:800 clamp(3rem,78px,5rem)/1.14 var(--disp);letter-spacing:-.022em;display:block}
.zitat .zq.lang{font-size:clamp(2.6rem,62px,4rem);line-height:1.22}   /* > 18 Wörter */
.zitat .zsrc{margin-top:34px;padding-top:18px;border-top:2px solid currentColor;
  display:flex;gap:18px;align-items:baseline;flex-wrap:wrap}
.zitat .zsrc b{font:800 21px/1.3 var(--disp)}
.zitat .zsrc span{font:600 16px/1.4 var(--body);opacity:.72}
/* Anführungszeichen = Bildebene oben rechts (§7.9-Logik), NIE Zeichen im Satz.
   Karsten 30.07.: „nur mit etwas sichtbareren" → Kontur 4px, Deckkraft .9 */
.zitat .zmark{position:absolute;top:26px;right:var(--pad);font:800 300px/1 var(--disp);
  color:transparent;-webkit-text-stroke:4px var(--yellow);opacity:.9;
  pointer-events:none;user-select:none}

/* --- Flächenfassungen --- */
.zitat.ink{background:var(--ink);color:#fff}
.zitat.ink .zsrc{border-color:rgba(255,255,255,.28)}
.zitat.wht{background:#fff;color:var(--ink-soft)}
.zitat.wht .zq{color:var(--ink)}
.zitat.wht .zsrc{border-color:var(--line-l)}
.zitat.wht .zsrc b{color:var(--ink)}
.zitat.wht .zmark{-webkit-text-stroke-color:var(--yellow);opacity:1}
.zitat.yel{background:var(--yellow);color:var(--ink-soft)}
.zitat.yel .zq,.zitat.yel .zsrc b{color:var(--ink)}
.zitat.yel .zsrc{border-color:rgba(0,0,0,.22)}
.zitat.blu{background:var(--blue);color:#fff}
.zitat.blu .zsrc{border-color:rgba(255,255,255,.34)}
.zitat.grn{background:var(--green);color:var(--ink-soft)}
.zitat.grn .zq,.zitat.grn .zsrc b{color:var(--ink)}
.zitat.grn .zsrc{border-color:rgba(0,0,0,.22)}
.zitat.foto{background:var(--ink);color:#fff}
.zitat.foto .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.zitat.foto .ov{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.74) 46%,rgba(0,0,0,.4) 100%)}
.zitat.foto .zsrc{border-color:rgba(255,255,255,.3)}
/* Auf Vollton-Flächen trägt die Fläche den Kontrast — Balken und gelbe Kontur
   werden dort zu laut (👁-Befund 29.07.). Kontur in ink bzw. weiß, .mark aus. */
.zitat.yel .zmark,.zitat.grn .zmark{-webkit-text-stroke-color:rgba(0,0,0,.32);opacity:1}
.zitat.blu .zmark{-webkit-text-stroke-color:rgba(255,255,255,.5);opacity:1}
/* ---- Balken auf Vollton-Flächen: WEISS, Wort darin ink (Karsten 30.07., 11:13) ----
   Korrektur der ersten Fassung („kein Balken auf Vollton"): Der Balken bleibt das Betonungsmittel
   des Hauses, er wechselt nur die Farbe. Regel: auf Gelb/Grün/Blau weiß mit Ink-Wort;
   auf Ink/Weiß/Foto bleibt der Akzentbalken (gelb bzw. grün) unverändert. */
.zitat.yel .mark,.zitat.grn .mark,.zitat.blu .mark,
.trenn.yel .mark,.trenn.grn .mark,.trenn.blu .mark{background:#fff!important;color:var(--ink)!important}
/* Das Gradient-Band unter der Trenner-Headline: auf Vollton weiß statt Gradient — der Gradient
   trägt selbst Gelb/Blau/Grün und verschwindet dort teilweise in der Fläche. */
/* Das Band folgt der Fläche, nicht dem Balken: auf HELLEN Volltönen (Gelb/Grün) ink,
   auf Blau weiß. Weiß auf Hellgelb hat zu wenig Kontrast (Sichtprüfung 30.07., 11:20). */
.trenn.yel .m2line,.trenn.grn .m2line{background:var(--ink);opacity:1}
.trenn.blu .m2line{background:#fff;opacity:1}

/* ============================================================
   §7.9 TRENNER-FLÄCHENFASSUNGEN — Bibliothek ab CSS v0.6.0
   ⚠️ STANDARD BLEIBT FOTO + ABDUNKLUNG (Karsten 29.07., zweimal bestätigt).
   Die Farbfassungen sind ALTERNATIVEN für die Bibliothek (Karsten-Auftrag
   30.07., 08:50) — nie als Weg, eine Farbquote zu erfüllen (§7.20).
   ============================================================ */
.trenn.yel{background:var(--yellow);color:var(--ink-soft)}
.trenn.yel h2,.trenn.yel .lead b{color:var(--ink)}
.trenn.yel .znum{-webkit-text-stroke-color:rgba(0,0,0,.34);opacity:1}
.trenn.yel .lead{color:rgba(0,0,0,.72)}
.trenn.blu{background:var(--blue);color:#fff}
.trenn.blu .znum{-webkit-text-stroke-color:rgba(255,255,255,.52);opacity:1}
.trenn.blu .lead{color:rgba(255,255,255,.82)}
.trenn.grn{background:var(--green);color:var(--ink-soft)}
.trenn.grn h2,.trenn.grn .lead b{color:var(--ink)}
.trenn.grn .znum{-webkit-text-stroke-color:rgba(0,0,0,.34);opacity:1}
.trenn.grn .lead{color:rgba(0,0,0,.72)}
.trenn.wht{background:#fff;color:var(--ink-soft)}
.trenn.wht h2{color:var(--ink)}
.trenn.wht .znum{-webkit-text-stroke-color:var(--yellow);opacity:1}
.trenn.wht .lead{color:var(--mut-l)}
.trenn.ink{background:var(--ink);color:#fff}

/* Fußzeile auf hellen Vollton-Flächen — sonst weiß auf Gelb/Grün/Weiß = unlesbar.
   Befund der Musterseite 30.07.; gilt für ALLE neuen Flächenfassungen. */
.zitat.yel .pagefoot,.zitat.grn .pagefoot,.zitat.wht .pagefoot,
.trenn.yel .pagefoot,.trenn.grn .pagefoot,.trenn.wht .pagefoot{color:rgba(0,0,0,.42)!important}
/* Anführungszeichen auf Vollton kräftiger (Karsten: „etwas sichtbarere") */
.zitat.yel .zmark,.zitat.grn .zmark{-webkit-text-stroke-color:rgba(0,0,0,.45)}


/* ═══════════════════════════════════════════════════════════════════════════════════
   PATCH-VORSCHLAG für jerry-deck.css — fünf Bauteile aus dem Jerry-OS-Sales-Deck
   ───────────────────────────────────────────────────────────────────────────────────
   Erstellt 06.08.2026 · vorbereitet für Theo · NICHT eigenmächtig gemergt (Kanon = Theo-Gate)

   ANLASS. Karsten, 06.08.: „ich habe schon 100 mal nach dem Weg gefragt, wie wir das in den
   systemischen Deck Creator bringen." Der Weg existiert — sync-kanon.sh verteilt den Kanon an
   jedes Deck und sucht die Decks selbst. Er läuft nur leer, weil der erste Schritt fehlt:
   seit dem 30.07. ist keine Regel mehr in jerry-deck.css geschrieben worden.

   BEFUND, gemessen am 06.08.:
     jerry-deck.css  (Kanon, alle Decks)      711 Regeln · zuletzt 30.07.
     deck-local.css  (NUR Jerry-OS-Deck)      589 Regeln · zuletzt heute
   Fast die Hälfte der Gestaltung dieses Decks existiert nur in diesem Deck. Deshalb baut jedes
   neue Deck dieselben Bauteile neu — und macht dabei neue Fehler.

   WAS HIER DRIN IST. Die fünf Bauteile, die das Jerry-OS-Deck erfunden hat und die jedes
   weitere Deck brauchen wird, aus der folienspezifischen Verschachtelung herausgelöst:
     ① .zitat          Zitat-/Statement-Folie   (ersetzt .esatz/.ekern; ein Entwurf liegt seit
                                                 29.07. ungenutzt daneben: _entwurf-zitat_v0.1.0)
     ② .schichtung     Ordnungsschicht über Ausführungsschicht
     ③ .vglmatrix      Vergleichsmatrix, N Kategorien × M Kriterien
     ④ .prozband       Prozessleiste mit durchgehendem Verantwortungs-Band
     ⑤ .stapel         Stapel: Module über Basis über Bestandssystemen

   DAZU DREI GLOBALE KORREKTUREN, die heute je Deck einzeln gemacht werden mussten (§ G).

   ABNAHME-KRITERIUM. Nach dem Merge und `bash sync-kanon.sh` muss deck-local.css des
   Jerry-OS-Decks von 589 auf unter 100 Regeln schrumpfen. Alles darüber gehört per
   Definition in den Kanon.
   ═══════════════════════════════════════════════════════════════════════════════════ */


/* ═══ G · GLOBALE KORREKTUREN ══════════════════════════════════════════════════════ */

/* G1 · R-05, präzisiert (06.08.). Die Regel nannte bisher nur die automatische
   Silbentrennung. `overflow-wrap:break-word` ist der ZWEITE Mechanismus, der ein Wort
   selbsttätig teilt — und der schlimmere, weil kein Trennstrich die Bruchstelle markiert
   („Mandatsr aum", „mar kiert"). Deck-weit gesperrt sind beide.
   ⚠️ NEBENWIRKUNG, die in die Guard-Prüfung muss: ohne break-word wird zu langer Text nicht
   mehr hässlich gebrochen, sondern STILL ABGESCHNITTEN. Der Guard sieht das heute nicht.
   Nötig ist ein Check auf `scrollWidth > clientWidth` je textführendem Element. */
.sec, .sec *{overflow-wrap:normal;word-break:normal;hyphens:manual}

/* G2 · Status-Plakette auf farbiger Fläche. Die Kanon-.stat trägt background:#fff +
   Ink-Text und ist damit nur für helle Flächen gebaut. Auf Blau wurde sie im Deck zweimal
   falsch überschrieben — einmal weiß auf weiß, also unsichtbar. */
.blu .stat, .ordn .stat, .jband .stat, [class*="blau"] .stat{background:#fff;color:var(--ink-soft);border-color:#fff}

/* G3 · Wortmarke auf eigener Farbfläche. `.mark.blu` ist eine BLAUE Fläche mit weißer
   Schrift — auf einer blauen Fläche ist sie unsichtbar. Zweimal passiert am 06.08.
   Auf farbigem Grund gilt: Schrift direkt, keine zweite Fläche. */
.blu .mark.blu, .ordn .mark.blu, .jband .mark.blu{background:transparent;color:#fff;padding:0}
/* ⚠️ AUSNAHME ZUR AUSNAHME (08.08.): Liegt INNERHALB der farbigen Fläche eine WEISSE Kachel,
   gilt die Regel dort nicht — sonst steht weiße Schrift auf weißer Kachel und die Wortmarke
   verschwindet. Genau das ist am 08.08. auf der Pitch-Folie passiert, nachdem G3 eingeführt
   war. Die Regel „auf eigener Farbfläche keine zweite Fläche" meint die FLÄCHE, auf der die
   Marke tatsächlich sitzt — nicht die Fläche irgendwo darüber. */
.osk .mark.blu, .wht .mark.blu, .half.wht .mark.blu{background:var(--blue);color:#fff;padding:0 .18em .06em}


/* ═══ ① ZITAT / STATEMENT — NICHT NEU GEBAUT ══════════════════════════════════════
   🔴 KORREKTUR 06.08., 17:50. Der erste Patch hat hier ein eigenes .zitat definiert —
   auf der falschen Annahme, es gebe kein Zitat-Bauteil. **Es gibt eins, seit jeher, im
   Kanon** (§ .zitat mit .zit/.zq/.zsrc/.zmark und den Varianten .ink/.wht, 33 Regeln).
   Das Lidl-Teaserdeck nutzt es (`class="sec zitat ink"`). Mein Block hätte dort eine
   helle Kastenfläche über eine Vollton-Ink-Folie gelegt.
   Geprüft wurde damals nur der Entwurfs-Ordner und deck-local.css, nicht der Kanon selbst.
   → Block ersatzlos entfernt. Wer ein Statement braucht, nimmt `.sec.zitat`.
   Offen bleibt nur die Auszeichnung IM Zitat (Highlight-Fläche statt farbiger Schrift) —
   die gehört als Variante an das bestehende Bauteil, nicht als zweites Bauteil daneben. */

/* ═══ ② SCHICHTUNG ═════════════════════════════════════════════════════════════════
   Eine Ordnungsschicht liegt ÜBER einer Ausführungsschicht. Die Breitendifferenz ist die
   halbe Aussage: bei gleicher Breite liest niemand „darüber". */
.schichtung{margin-top:22px}
.schichtung .slab,.schichtung .oslab{font:800 13px/1.5 var(--body);letter-spacing:.2em;text-transform:uppercase}
.schichtung .slab{color:rgba(255,255,255,.66);margin-bottom:10px}
.schichtung .slab i,.schichtung .oslab i{font-style:normal;letter-spacing:.12em;opacity:.7}
.schichtung .ordn{background:var(--blue);border-radius:18px;padding:18px 30px 20px}
.schichtung .oslab{color:rgba(255,255,255,.86);margin-bottom:14px}
.schichtung .ordbody{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center}
.schichtung .osk{background:#fff;border-radius:14px;padding:14px 22px;display:flex;align-items:center;justify-content:center}
.schichtung .osk img{width:74px;height:74px;object-fit:contain;flex:0 0 auto;margin-right:16px}
.schichtung .opts{display:grid;gap:10px}
.schichtung .opts span{position:relative;padding-left:26px;font:600 20px/1.38 var(--body);color:#fff;min-width:0}
.schichtung .opts span::before{content:"";position:absolute;left:0;top:.42em;width:10px;height:10px;background:#fff;transform:skew(-12deg);border-radius:2.5px}
.schichtung .verb{margin-top:10px}
.schichtung .verb span{font:700 18px/1.4 var(--body);color:rgba(255,255,255,.8)}
.schichtung .verb b{color:#fff;font-weight:800}
/* Die Klammer: nach unten offen, schmaler als das Dach — sonst keine Schicht. */
.schichtung .untenwrap{position:relative;width:78%;margin:12px auto 0;padding:18px 20px 0;border:3px solid rgba(255,255,255,.45);border-bottom:none;border-radius:16px 16px 0 0}
.schichtung .untenwrap .kltext{position:absolute;left:50%;top:-9px;transform:translateX(-50%);background:var(--ink);padding:0 16px;font:800 13px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#fff;white-space:nowrap}
.schichtung .ausf{display:grid;gap:16px;align-items:stretch}
.schichtung .ausf[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.schichtung .ausf[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.schichtung .ak{background:#fff;border-radius:14px;border-top:5px solid var(--line-l);padding:14px 16px 16px;min-width:0}
.schichtung .ak b{font:800 19px/1.24 var(--disp);color:var(--ink-soft);display:block}
.schichtung .ak p{font:600 17px/1.42 var(--body);color:var(--mut-l);margin-top:6px;text-wrap:pretty}
/* Icons im Bauteil: EINE Größe, Kanon-Minimum 56 px (§7.3). Am 06.08. wurden sie mit
   44 px gebaut und vom Guard zu Recht beanstandet. */
.schichtung .ak img{width:56px;height:56px;object-fit:contain}


/* ═══ ③ VERGLEICHSMATRIX ═══════════════════════════════════════════════════════════
   N Kategorien als Spalten, M Kriterien als Zeilen. Die eigene Spalte ist die EINZIGE
   eingefärbte Fläche (R-13). Spalten sind Kategorien, keine Marken — damit die Folie
   unabhängig davon funktioniert, ob Wettbewerber namentlich genannt werden dürfen. */
.vglmatrix{margin-top:20px;border-top:1px solid var(--line-l)}
.vglmatrix .dhead,.vglmatrix .drow{display:grid;grid-template-columns:minmax(0,1.55fr) repeat(var(--spalten,4),minmax(0,.62fr));align-items:center}
.vglmatrix .dhead{border-bottom:2px solid var(--ink-soft)}
.vglmatrix .dh{font:800 16px/1.35 var(--body);color:var(--mut-l);text-align:center;padding:12px 8px}
.vglmatrix .dh.eigen{background:var(--blue);border-radius:12px 12px 0 0;color:#fff;font:800 18px/1.3 var(--disp);padding:13px 8px}
.vglmatrix .drow{border-bottom:1px solid var(--line-l)}
.vglmatrix .dl{padding:15px 22px 15px 0;min-width:0}
.vglmatrix .dl b{display:block;font:800 21px/1.28 var(--disp);color:var(--ink-soft)}
.vglmatrix .dl i{display:block;font:600 16.5px/1.38 var(--body);font-style:normal;color:var(--mut-l);margin-top:3px}
.vglmatrix .dc{font:700 17px/1.35 var(--body);color:var(--mut-l);text-align:center;padding:15px 6px;align-self:stretch;display:flex;align-items:center;justify-content:center}
.vglmatrix .dc.eigen{background:var(--blue);color:#fff;font-weight:800;font-size:18px}
.vglmatrix .drow:last-child .dc.eigen{border-radius:0 0 12px 12px}
.dark .vglmatrix{border-top-color:rgba(255,255,255,.22)}
.dark .vglmatrix .dhead{border-bottom-color:#fff}
.dark .vglmatrix .dh{color:rgba(255,255,255,.72)}
.dark .vglmatrix .drow{border-bottom-color:rgba(255,255,255,.18)}
.dark .vglmatrix .dl b{color:#fff}
.dark .vglmatrix .dl i{color:rgba(255,255,255,.74)}
.dark .vglmatrix .dc{color:rgba(255,255,255,.7)}


/* ═══ ④ PROZESSBAND ════════════════════════════════════════════════════════════════
   Eine Schrittleiste PLUS ein durchgehendes Band darunter, das zeigt, wer über die ganze
   Strecke wirkt. Ohne das Band liest sich der letzte Schritt als letzter Teilnehmer —
   genau der Befund vom 06.08.: „man versteht nicht, welche Rolle Jerry OS übernimmt". */
.prozband{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;background:var(--blue);border-radius:16px;padding:14px 26px;margin-top:14px}
.prozband .pbmark{font:800 26px/1.2 var(--disp);color:#fff;letter-spacing:.01em;white-space:nowrap;display:flex;align-items:center}
.prozband .pbtun{display:flex;gap:34px;flex-wrap:wrap}
.prozband .pbtun span{position:relative;padding-left:22px;font:700 19px/1.35 var(--body);color:#fff}
.prozband .pbtun span::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px;background:#fff;transform:skew(-12deg);border-radius:2px}
.prozband .pbwo{max-width:400px;border-left:1px solid rgba(255,255,255,.32);padding-left:22px}
.prozband .pbwo em{display:block;font:800 11.5px/1.5 var(--body);letter-spacing:.16em;text-transform:uppercase;font-style:normal;color:rgba(255,255,255,.7)}
.prozband .pbwo p{font:600 16px/1.36 var(--body);color:#fff;margin-top:3px}
/* Die Ergebnis-Zeile: eine Prozessfolie endet auf dem ERGEBNIS, nie auf dem letzten Schritt. */
.ergebnis{font:700 21px/1.45 var(--body);color:var(--ink-soft);margin-top:16px;max-width:1400px;border-left:5px solid var(--blue);padding-left:16px}
.ergebnis b{font-weight:800}


/* ═══ ⑤ MODULSTAPEL ═════════════════════════════════════════════════════════════════════
   Von oben nach unten gelesen, von unten nach oben verstanden: buchbare Module über der
   immer enthaltenen Basis über dem, was der Kunde heute schon hat.
   Die Mehrwert-Zeile sitzt auf EIGENER weißer Fläche im farbigen Band — sonst geht sie
   unter (Karsten 06.08.: „geht unter").
   🔴 HEISST .modulstapel, NICHT .stapel — der Kanon hat bereits ein .stapel (Module auf
   Basis, .mods/.chip/.basis/.bcells). Der erste Patch hatte den Namen doppelt belegt und
   mit display:flex das bestehende Bauteil gebrochen. Korrigiert 06.08., 17:50. */
.modulstapel{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.modulstapel .stapellab{font:800 12.5px/1.5 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin:2px 0 -2px}
.modulstapel .modulgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.modulstapel .mod{background:#fff;border:1px solid var(--line-l);border-top:5px solid var(--blue);border-radius:12px;padding:10px 15px 11px;min-width:0;box-shadow:0 10px 26px rgba(0,45,255,.07)}
.modulstapel .mod>b{display:block;font:800 18px/1.24 var(--disp);color:var(--ink-soft)}
.modulstapel .mod p{font:600 16px/1.38 var(--body);color:var(--mut-l);margin-top:4px;text-wrap:pretty}
.modulstapel .mod p b{display:inline;font-weight:800;color:var(--ink-soft)}
.modulstapel .basisband{background:var(--blue);border-radius:16px;padding:12px 24px 14px;color:#fff}
.modulstapel .basisband .bb-head{font:800 15.5px/1.4 var(--body);letter-spacing:.22em;text-transform:uppercase;margin-bottom:12px}
.modulstapel .basisband .bb-head .must{display:inline-block;font:800 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;background:#fff;color:var(--ink-soft);border-radius:999px;padding:7px 12px;margin-right:14px}
.modulstapel .basisband .bb-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 26px}
.modulstapel .basisband .bb-items span{position:relative;padding-left:22px}
.modulstapel .basisband .bb-items span::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:#fff;transform:skew(-12deg);border-radius:2px}
.modulstapel .basisband .bb-items span b{display:block;font:800 16px/1.28 var(--body);color:#fff}
.modulstapel .basisband .bb-items span i{display:block;font:600 14px/1.34 var(--body);font-style:normal;color:rgba(255,255,255,.8);margin-top:1px}
.modulstapel .mehrwert{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;background:#fff;border-radius:12px;padding:13px 22px;margin-top:14px}
.modulstapel .mehrwert b{display:block;font:800 23px/1.16 var(--disp);color:var(--blue);letter-spacing:-.01em}
.modulstapel .mehrwert p{font:600 16px/1.36 var(--body);color:var(--mut-l);margin-top:4px}
/* Die Bestands-Zeile braucht eine harte Kante, sonst ist sie Grau auf Grau. */
.modulstapel .toolzeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fff;border:2px solid var(--ink-soft);border-radius:12px;padding:11px 20px}
.modulstapel .toolzeile em{font:800 12.5px/1.5 var(--body);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--ink-soft);white-space:nowrap}
.modulstapel .toolzeile span{font:700 16.5px/1.4 var(--body);color:var(--ink-soft)}


/* ═══ NOCH NICHT HIER DRIN — bewusst, weil Entscheidung offen ══════════════════════
   · TINTS. green-tint/-soft, yellow-tint, blue-tint liegen in jerry-tokens.json und sind
     im Deck-Kanon nicht angeschlossen. Deshalb ist Schwarz heute die einzige leise Fläche.
     yellow-soft und blue-soft fehlen im Token-File ganz. → ClickUp 869eekz3z (E-12).
   · .mark-DEFAULT. `.mark` steht deck-weit auf Grün. Grün ist laut Karsten (06.08.) die
     ENGINE-Farbe (System, planbare/garantierte Wirkung). Damit betont ein Jerry-Digital-Deck
     fast alles in der Engine-Farbe — gemessen 11× Grün gegen 3× Gelb und 3× Blau.
     Karstens Regel: Farbe folgt dem THEMA des Inhalts, nicht dem Eigentümer des Decks.
     Offen: löst `.mark` künftig gar keine Farbe mehr auf, sodass sie je Fall gesetzt
     werden MUSS? Und wie verhält sich das zu R-18 (Icon-Farbe folgt der KAPITEL-Farbe)?
   · JERRY-OS-ICON. Existiert — aber unter website/wearejerry-landing/assets/icons/,
     nicht in Brand/icons/. Deshalb greift kein Deck darauf zu. Gehört in die Bibliothek.
     Für farbige Flächen fehlt zusätzlich eine echte Weiß-Variante: die _dunkel-Fassung hat
     einen blauen j-Körper, der Guard misst darauf „91 % des Motivs verschwinden".
   · FEHLENDE MOTIVE, am 06.08. durch Ansehen geprüft (nicht aus dem Katalog zitiert):
     `workflow` (Ablaufkette) · `assistenz-suite` · `bestandssysteme`.
     Ersatzversuche waren bedeutungsfremd: `planbarkeits-treppe` ist eine Wachstumstreppe,
     `offen-api` ein Steckerpaar. → ClickUp 869eed3g5.
   ═══════════════════════════════════════════════════════════════════════════════════ */