@font-face{font-family:"Source Serif 4";src:url("assets/fonts/source-serif-4-400.woff2?v=02194deb") format("woff2");font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-400.woff2?v=8909904a") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/inter-700.woff2?v=6f56409f") format("woff2");font-weight:700;font-display:swap}

:root{--paper:#f2eee4;--ink:#10241d;--panel:#062c23;--acid:#d6ff3f;--white:#fffdf8;--muted:#b9c8c0;--line:#c9cec8}
*{box-sizing:border-box} html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif}
button,a,input{font:inherit} a{color:inherit} button{cursor:pointer}

.work{height:100dvh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:clip}.topbar{width:min(94vw,1540px);margin:auto;min-height:76px;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;border-bottom:1px solid var(--line)}
.back{font-size:1.5rem;text-decoration:none}.titleblock{min-width:0}.eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#61736a}.titleblock h1{margin:3px 0 0;font-size:clamp(1.3rem,1.5vw,1.85rem);line-height:1;font-weight:700;letter-spacing:-.035em}
.quicklinks{display:flex;align-items:center;gap:8px}.quicklinks-primary{display:flex;gap:8px}.quicklinks a,.quick-film{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:transparent;text-decoration:none;font-size:.72rem;font-weight:700}.film-play{width:9px;height:11px;margin-left:6px;flex:none;fill:currentColor;stroke:none}

.stage{width:min(94vw,1540px);height:100%;min-height:0;margin:0 auto;padding:12px 0;display:grid}.track{position:relative;width:100%;height:100%;min-height:0}.slide{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);height:100%;min-height:0;background:var(--panel);color:var(--white);border-radius:16px;overflow:hidden;opacity:0;visibility:hidden;position:absolute;inset:0;pointer-events:none;transition:opacity .22s ease}.slide.is-active{position:relative;opacity:1;visibility:visible;pointer-events:auto}
.visual{min-width:0;min-height:0;background:#061d17;overflow:hidden}.visual>img{display:block;width:100%;height:100%;object-fit:cover}.visual-grid,.visual-pair,.collage{display:grid;width:100%;height:100%;gap:6px;padding:6px}.visual-grid{grid-template-columns:1.28fr .72fr;grid-template-rows:1fr 1fr}.visual-grid>img:first-child{grid-row:1/3}.visual-pair,.collage{grid-template-columns:1fr 1fr}.visual-grid img,.visual-pair img,.collage img{width:100%;height:100%;min-width:0;min-height:0;display:block;object-fit:cover}.final-visual{padding:0}.collage img{object-fit:contain;background:var(--paper)}.collage img:nth-child(2){object-fit:cover}

.copy{min-width:0;padding:clamp(28px,min(3.2vw,5vh),96px);align-self:center}.step{display:flex;align-items:baseline;gap:12px;margin-bottom:clamp(12px,1.2vh,20px)}.step b{font-size:clamp(3rem,min(4.2vw,8vh),6.8rem);line-height:.82;color:var(--acid)}.step span{font-size:clamp(.7rem,min(.58vw,1.3vh),.9rem);font-weight:700;letter-spacing:.14em;color:var(--muted)}
.copy h2{max-width:20ch;margin:0 0 clamp(14px,1.6vh,24px);font-family:"Source Serif 4",Georgia,serif;font-size:clamp(2.5rem,min(3.8vw,6.4vh),6rem);font-weight:400;line-height:.94;letter-spacing:-.045em;text-wrap:balance}.copy p{width:100%;max-width:min(100%,70ch);margin:0}.lead{font-size:clamp(1rem,min(1.2vw,2.1vh),1.5rem);line-height:1.43;color:rgba(255,253,248,.92)}.note,.detail{margin-top:clamp(12px,1.5vh,20px)!important;padding-top:clamp(12px,1.5vh,20px);border-top:1px solid rgba(255,255,255,.16);font-size:clamp(.88rem,min(.9vw,1.6vh),1.1rem);line-height:1.48;color:var(--muted)}.manifest,.thesis{margin-top:clamp(12px,1.5vh,20px)!important;padding:14px 16px;border-left:5px solid var(--acid);background:rgba(214,255,63,.09);font-size:clamp(.98rem,min(1vw,1.8vh),1.2rem);line-height:1.38}.intervention-bridge{margin:clamp(12px,1.5vh,20px) 0 0!important;font-size:clamp(.82rem,1.5vh,.92rem);line-height:1.4;color:var(--muted)}.process-link-wrap{margin-top:clamp(9px,1.1vh,15px)}.process-link{display:inline-flex;gap:8px;padding:10px 12px;background:var(--acid);color:var(--ink);font-size:clamp(.62rem,1.25vh,.72rem);font-weight:700;letter-spacing:.08em;text-decoration:none}.process-link-wrap--secondary .process-link{padding:0 0 4px;background:transparent;color:var(--acid);border-bottom:1px solid var(--acid)}.process-link-note{display:block;margin-top:7px;color:var(--muted);font-size:clamp(.62rem,1.2vh,.72rem)}

#system .copy{align-self:stretch;padding-block:clamp(24px,min(2.8vw,4vh),56px)}#system .copy h2{font-size:clamp(2.2rem,min(3.1vw,5.4vh),4.5rem);margin-bottom:clamp(10px,1.2vh,16px)}#system .lead{font-size:clamp(.96rem,min(1vw,1.8vh),1.2rem)}#system .detail{margin-top:clamp(9px,1.1vh,14px)!important;padding-top:clamp(9px,1.1vh,14px);font-size:clamp(.8rem,min(.82vw,1.5vh),1rem)}#system .thesis{margin-top:clamp(9px,1.1vh,14px)!important;font-size:clamp(.86rem,min(.88vw,1.6vh),1.08rem)}#system .intervention-bridge{margin-top:clamp(9px,1.1vh,14px)!important}.final .copy{justify-content:flex-start}

.controller{width:min(94vw,1540px);margin:auto;min-height:82px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border-top:1px solid var(--line)}.navbtn{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--panel-bright,var(--white));color:var(--ink)}.navbtn:disabled{opacity:.35}.progress{min-width:0}.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.steps a{display:block;padding:9px 4px 7px;border-top:3px solid transparent;text-align:center;text-decoration:none;font-size:.72rem;font-weight:700;color:#65776d}.steps a[aria-current="step"]{border-top-color:var(--ink);background:var(--acid);color:var(--ink)}.antline{position:relative;height:22px;margin-top:5px}.antline::before,.fill{position:absolute;top:10px;height:2px;left:0;right:38px;background:#b9c2bd;content:""}.fill{right:auto;width:calc(var(--p)*100%);max-width:calc(100% - 38px);background:var(--panel-dark,var(--ink))}.ant{position:absolute;top:10px;left:calc(var(--p)*(100% - 38px));width:28px;transform:translate(-50%,-50%) scaleX(var(--dir));transition:left .22s ease,transform .18s ease}.antline input{position:absolute;inset:0 38px 0 0;width:calc(100% - 38px);opacity:0}

.visual img{cursor:zoom-in}.visual img:focus-visible,.collage img:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--acid);outline-offset:3px;box-shadow:0 0 0 6px rgba(16,36,29,.55)}.note-dialog{width:min(96vw,1100px);height:min(90dvh,760px);padding:0;border:0;border-radius:12px;background:#061d17;color:var(--white)}.note-dialog::backdrop{background:rgba(0,0,0,.82)}.note-card,.note-card-inner,.note-face{height:100%}.note-front{display:grid;grid-template-columns:1.3fr .7fr}.note-front img{width:100%;height:100%;object-fit:contain}.note-front-meta,.note-back-content{padding:32px}.note-back{display:none}.note-card.is-flipped .note-front{display:none}.note-card.is-flipped .note-back{display:block}.note-actions{position:absolute;right:14px;bottom:14px;display:flex;gap:8px}.note-actions button{padding:9px 12px;border:1px solid rgba(255,255,255,.35);background:#08271f;color:#fff;border-radius:4px}

@media (min-width:1600px){.topbar,.stage,.controller{width:min(94vw,3200px)}.slide{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.copy{padding:clamp(38px,min(3.2vw,5vh),96px)}}
@media (min-width:821px) and (max-width:1600px){#system .copy{padding:26px 32px}#system .copy h2{font-size:clamp(2.05rem,min(3vw,5.2vh),3.45rem)}#system .lead{font-size:clamp(.92rem,min(1vw,1.7vh),1.08rem)}#system .detail{font-size:clamp(.76rem,min(.8vw,1.45vh),.92rem)}#system .thesis{font-size:clamp(.82rem,min(.84vw,1.5vh),.98rem)}#system .intervention-bridge{font-size:clamp(.72rem,1.35vh,.84rem)}.process-link{padding:8px 10px;font-size:clamp(.58rem,1.1vh,.68rem)}.process-link-note{margin-top:5px;font-size:clamp(.56rem,1vh,.66rem)}}
@media (min-width:821px) and (max-height:820px){.slide{min-height:calc(100dvh - 170px)}.copy{padding:24px 32px}.copy h2{font-size:clamp(2.3rem,min(3.5vw,5.8vh),4.2rem)}.lead{font-size:clamp(.94rem,min(1vw,1.8vh),1.15rem)}.note,.detail{font-size:clamp(.8rem,min(.78vw,1.45vh),.98rem);margin-top:10px!important;padding-top:10px}.manifest,.thesis{font-size:clamp(.84rem,min(.82vw,1.5vh),1rem);margin-top:10px!important;padding:10px 12px}#system .copy{padding:20px 28px}#system .copy h2{font-size:clamp(1.9rem,min(2.8vw,4.7vh),3rem)}}
@media (min-width:2200px){.copy h2{font-size:clamp(3.2rem,min(4.3vw,7vh),6.5rem);max-width:13ch}.lead{font-size:clamp(1.1rem,min(1.35vw,2.4vh),1.75rem);max-width:48ch}.note,.detail{font-size:clamp(1rem,min(1.05vw,1.9vh),1.35rem);max-width:48ch}.manifest,.thesis{font-size:clamp(1.05rem,min(1.1vw,2vh),1.35rem)}#system .copy{padding-block:clamp(32px,min(3vw,4.5vh),70px)}#system .copy p{max-width:54ch}#system .copy h2{font-size:clamp(2.6rem,min(3.35vw,5.8vh),5rem);max-width:16ch}#system .lead{font-size:clamp(1rem,min(1.1vw,2vh),1.5rem)}#system .detail{font-size:clamp(.9rem,min(.92vw,1.65vh),1.25rem)}#system .thesis{font-size:clamp(.98rem,min(1vw,1.8vh),1.35rem)}}
@media (min-width:821px) and (max-width:1600px) and (min-height:821px){#system .copy{padding:17px 28px}#system .copy p{max-width:48ch}#system .copy h2{font-size:clamp(1.95rem,min(2.6vw,4.4vh),3rem);margin-bottom:8px}#system .lead{font-size:clamp(.86rem,min(.95vw,1.55vh),1rem)}#system .detail{font-size:clamp(.72rem,min(.75vw,1.35vh),.85rem);margin-top:6px!important;padding-top:6px}#system .thesis{font-size:clamp(.76rem,min(.78vw,1.4vh),.9rem);margin-top:6px!important;padding:8px 10px}#system .intervention-bridge{font-size:clamp(.68rem,1.2vh,.78rem);margin-top:6px!important}.process-link-wrap{margin-top:6px}.process-link{padding:6px 8px;font-size:clamp(.55rem,1vh,.64rem)}.process-link-note{margin-top:3px;font-size:clamp(.52rem,.9vh,.6rem)}}

@media (min-width:821px){.copy{container-type:inline-size;display:flex;flex-direction:column;justify-content:center}.copy h2{max-width:20ch;font-size:clamp(2.5rem,min(8.5cqw,5.6vh),6rem)}.copy p{width:100%;max-width:100%}.lead{font-size:clamp(1rem,min(2.4cqw,1.92vh),1.5rem)}.note,.detail{font-size:clamp(.88rem,min(1.9cqw,1.52vh),1.1rem)}.manifest,.thesis{font-size:clamp(.98rem,min(2.05cqw,1.64vh),1.2rem)}#system .copy{padding-block:clamp(24px,min(3cqw,3.2vh),56px)}#system .copy h2{max-width:20ch;font-size:clamp(2.2rem,min(7.2cqw,4.8vh),4.9rem)}#system .copy p{width:100%;max-width:100%}#system .lead{font-size:clamp(.96rem,min(2.15cqw,1.72vh),1.35rem)}#system .detail{font-size:clamp(.8rem,min(1.75cqw,1.4vh),1.15rem)}#system .thesis{font-size:clamp(.86rem,min(1.9cqw,1.52vh),1.2rem)}}
@media (min-width:2200px){#system .copy{padding-block:clamp(42px,min(4cqw,4vh),104px)}#system .copy h2{max-width:24ch;font-size:clamp(3.2rem,min(7.5cqw,5.6vh),6rem)}#system .lead{font-size:clamp(1.2rem,min(2.8cqw,2.24vh),1.75rem);line-height:1.36}#system .detail{font-size:clamp(1.05rem,min(2.2cqw,1.76vh),1.4rem)}#system .thesis{font-size:clamp(1.1rem,min(2.3cqw,1.84vh),1.45rem)}#system .intervention-bridge{font-size:clamp(.9rem,min(1.8cqw,1.44vh),1.1rem)}#system .process-link{font-size:clamp(.68rem,min(1.35cqw,1.08vh),.84rem)}#system .process-link-note{font-size:clamp(.62rem,min(1.2cqw,0.96vh),.78rem)}}

@media (max-width:820px){body{overflow-x:hidden}.work{height:auto;min-height:100dvh;display:block;overflow:visible}.topbar{width:100%;min-height:72px;padding:10px 14px;grid-template-columns:26px minmax(0,1fr);gap:8px}.eyebrow{display:none}.titleblock{min-width:0}.titleblock h1{max-width:100%;font-size:clamp(1.02rem,4.6vw,1.28rem);line-height:1.04;text-wrap:balance}.quicklinks{grid-column:2;grid-row:2}.quicklinks a,.quick-film{min-height:36px;font-size:.65rem}.stage{width:100%;height:auto;min-height:0;padding:12px}.track{height:auto;display:grid;gap:14px}.slide,.slide.is-active{position:relative;display:block;height:auto;min-height:0;opacity:1;visibility:visible;pointer-events:auto;border-radius:12px}.visual{height:auto}.visual>img{height:auto;aspect-ratio:4/3}.visual-grid,.visual-pair,.collage{height:auto;grid-template-columns:1fr 1fr}.visual-grid{aspect-ratio:4/3}.visual-grid img,.visual-pair img,.collage img{height:auto;aspect-ratio:4/3}.visual-grid>img:first-child{grid-row:1/3}.copy,#system .copy{padding:24px 20px 28px;align-self:auto}.step{margin-bottom:12px}.step b{font-size:2.45rem}.step span{font-size:.64rem}.copy h2,#system .copy h2{font-size:clamp(2.15rem,9vw,3rem);line-height:.98;margin-bottom:14px}.lead,#system .lead{font-size:1rem;line-height:1.46}.note,.detail,#system .detail{font-size:.9rem;line-height:1.46}.manifest,.thesis,#system .thesis{font-size:.96rem}.controller{display:none}.note-dialog{width:100vw;height:100dvh;border-radius:0}.note-front{grid-template-columns:1fr;grid-template-rows:1fr auto}.note-front-meta,.note-back-content{padding:20px}.note-actions{right:10px;bottom:10px}}
@media (prefers-reduced-motion:reduce){.slide,.ant{transition:none}}

/* Dunkle Darstellung. Das Grün der Untersuchung bleibt der Grundton,
   nur die Richtung kehrt sich um. Flächen und Schrift sind getrennt. */
[data-theme="dark"] {
  --paper: #0e1a15;
  --ink: #e9efe9;
  --panel-dark: #10241d;
  --panel-bright: #16241e;
  --muted: #93a69c;
  --line: #2b3b34;
}


/* Auf der Signalfarbe bleibt die Schrift dunkel: --ink ist im dunklen
   Thema hell und verschwindet sonst auf dem Acid-Grund. */
[data-theme="dark"] .steps a[aria-current="step"] {
  color: #0e1a15;
  border-top-color: var(--acid);
}

/* Der Film-Knopf trug den alten dunklen Ton fest notiert. */
[data-theme="dark"] .quick-film {
  color: var(--ink);
  border-color: rgba(233, 239, 233, .28);
}

/* Auf der Signalfarbe bleibt die Schrift dunkel. --ink ist im dunklen
   Thema hell und verschwände sonst auf dem Acid-Grund. */
[data-theme="dark"] .process-link-wrap:not(.process-link-wrap--secondary) .process-link {
  color: #0e1a15;
}

/* ─────────────────────────────────────────────────────────────
   Schrift auf der Signalfarbe bleibt in beiden Darstellungen dunkel.
   --ink ist im dunklen Thema hell; ohne diese Regel verschwindet
   jede Beschriftung auf dem Acid-Grund. Vollständig erzeugt aus
   allen Stellen, die diesen Grund setzen.
   ───────────────────────────────────────────────────────────── */
[data-theme="dark"] .process-link-wrap:not(.process-link-wrap--secondary) .process-link { color: #101010; }
/* Die zweite Verknüpfung hat keinen Acid-Grund, sondern Acid als
   Schrift. Sie behält ihre Signalfarbe und bleibt damit lesbar. */
[data-theme="dark"] .process-link-wrap--secondary .process-link {
  color: var(--acid);
  border-bottom-color: var(--acid);
}
[data-theme="dark"] .steps a[aria-current="step"] { color: #101010; }

@media(max-width:340px){
  .topbar .quicklinks{grid-column:1/-1}
}

/* Wie auf allen uebrigen Seiten: auf sehr breiten Schirmen waechst die
   Wurzelgroesse mit. Ohne sie blieb der Bedienblock hier kleiner als
   ueberall sonst. */
@media(min-width:2200px){html{font-size:clamp(17px,.78vw,21px)}}