/* B-06 Bestandskorrektur – eigene Projektseite. Welt: Inventur-Klemmbrett.
   Hartfaserbraun als Grund, ein weißes liniertes Zählblatt unter der Stahlklammer, Bleistift-Graphit für die Strichliste,
   Rot für die Abweichung, Grün für die Korrektur. Instrument Serif für die großen Zahlen und Überschriften, Inter für alles Gedruckte.
   Weiter unten liegen Karteikarten (Im Detail), ein Blatt Rechenpapier (Zusammenspiel) und ein Projektblatt mit Stempel (Technik & Rolle).
   Grundzustand im CSS = fertig ausgefülltes Blatt (ohne JavaScript ist alles sichtbar); erst das Skript setzt Startzustände. */

/* ---------- Seitenwechsel: diese Welt fährt von unten herein, die vorige Seite tritt zurück (View Transitions; ohne Unterstützung oder bei reduzierter Bewegung normaler Seitenaufruf) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#f8f1e5}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:"LB Inter";src:url("../fonts/inter-normal-400_700-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"LB Serif";src:url("../fonts/instrument-serif-normal-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"LB Serif";src:url("../fonts/instrument-serif-italic-400-latin.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --board:#6b4a32;--board-d:#5a3c27;
  --paper:#fdfcf8;--line:rgba(88,126,166,.28);
  --ink:#24211e;--print:#5c544c;--frame:#a89f95;
  --graphite:#38393c;--red:#c0392b;--green:#1d7a46;
  --cream:#f8f1e5;--cream-2:#e9dac4;--grid:rgba(88,126,166,.2);
  --sans:"LB Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"LB Serif",Georgia,"Times New Roman",serif;
  --pad:clamp(16px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--board)}
body{margin:0;min-width:320px;background:transparent;color:var(--cream);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
/* Gedrehte Karten in ihrer Startlage dürfen den Rand nicht verbreitern (clip erzeugt keinen Scrollbereich, sticky bleibt intakt) */
main{display:block;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--cream);outline-offset:3px}
h1,h2,h3,p{margin:0}

/* Hartfaser-Struktur: feines Rauschen, liegt hinter allem */
.grain{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;opacity:.55;will-change:transform}
.grain-stage{position:absolute;z-index:0}

/* ---------- Kopf ----------
   Eine Grammatik auf allen Projektseiten (Freigabe 31.10.2026): links „← Profil“, ganz rechts der Name als Link zur
   Startseite (dieses Projekt hat keine Demo); volle Breite, jedes Ziel mindestens 44 px hoch. */
.skip{position:absolute;left:12px;top:-80px;z-index:20;padding:.6em 1em;border-radius:6px;background:var(--paper);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,3vw,40px)}
.back{display:inline-flex;flex:none;align-items:center;gap:.5em;min-height:44px;padding:.5em 1.05em;border-radius:4px;background:var(--paper);color:var(--ink);font-weight:600;font-size:1rem;line-height:1.3;white-space:nowrap;text-decoration:none;box-shadow:0 1px 0 rgba(0,0,0,.25),0 6px 14px -8px rgba(20,10,2,.7);transition:transform .2s}
.back:hover{transform:translateY(-1px)}
.back:focus-visible{outline-color:var(--paper)}
.owner{display:inline-flex;flex:none;align-items:center;min-height:44px;font-size:.8125rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--cream-2)}
.owner:hover{color:var(--cream)}

/* ---------- Geschichte: Klemmbrett + Text ---------- */
.story{position:relative}
.stage{position:sticky;top:0;z-index:2;height:min(60vh,600px);height:min(60svh,600px);min-height:340px;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;container-type:size;background:var(--board);box-shadow:0 10px 18px -12px rgba(25,12,3,.65)}
.copy{position:relative;z-index:1;padding:0 var(--pad)}

@media (min-width:960px){
  .top{position:absolute;left:0;right:0;top:0}
  .story{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr)}
  .stage{grid-column:2;grid-row:1;align-self:start;height:100vh;height:100svh;min-height:600px;max-height:none;background:transparent;box-shadow:none}
  .grain-stage{display:none}
  .copy{grid-column:1;grid-row:1;padding:0 clamp(24px,3vw,48px) 0 var(--pad)}
}

.wrap{position:relative;z-index:1;min-height:0;display:grid;place-items:center;container:lbwrap/size;padding-top:6px}

/* ---------- Zählblatt ---------- */
.sheet{position:relative;container-type:inline-size;width:min(90cqw,600px,75cqh);color:var(--ink)}
.sheet-bg{position:absolute;inset:0;border-radius:3px;background:linear-gradient(var(--paper),var(--paper)) top/100% 21cqw no-repeat,repeating-linear-gradient(180deg,transparent 0 calc(max(17px,5.4cqw) - 1px),var(--line) calc(max(17px,5.4cqw) - 1px) max(17px,5.4cqw)),var(--paper);box-shadow:0 1px 1px rgba(40,22,8,.3),0 22px 34px -18px rgba(28,14,3,.8)}
.clip{position:absolute;z-index:5;left:29%;top:-4.6cqw;width:42%;height:auto;filter:drop-shadow(0 3px 2px rgba(30,15,4,.45))}
.sheet-in{position:relative;display:flex;flex-direction:column;gap:max(8px,2.9cqw);padding:max(30px,11.5cqw) max(12px,5.5cqw) max(14px,5cqw)}
.lbl{display:block;width:fit-content;font-size:max(11px,2.45cqw);font-weight:500;line-height:1.25;color:var(--print)}
.hand{font-family:var(--serif);font-style:italic;font-size:max(13px,3.2cqw);line-height:1.1;color:var(--graphite)}

.f-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:max(6px,1.7cqw);border-bottom:1.5px solid var(--ink)}
.f-head b{font-size:max(11px,2.6cqw);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.f-head i{font-style:normal;font-size:max(9.5px,1.85cqw);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--print);border:1px solid var(--frame);padding:.2em .6em}

.f-where{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:max(12px,5cqw);align-items:start}
.slots{--g:max(2px,.8cqw);position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--g);width:min(100%,44cqw);margin-top:max(4px,1.1cqw)}
.slots i{display:block;aspect-ratio:1.75;border:1px solid var(--frame);background:var(--paper)}
.loop{position:absolute;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Striche werden über stroke-dashoffset gezogen (1 = leer, 0 = fertig); Lücke 2, damit am Ende kein Punkt bleibt */
.loop path,.tick path,.tally path,.bar path,.sum-rule path,.scrib path,.ne path,.marks path,.ledger .cb path,
.qm path,.qm2 path,.waves path,.scr path,.strike path,.ul path,.sk .dr{stroke-dasharray:1 2}
.place-loop{width:calc((100% - 4 * var(--g)) / 5 * 1.7);height:calc((100% - 2 * var(--g)) / 3 * 1.9);left:calc((100% - 4 * var(--g)) / 5 * 1.65 + 2 * var(--g));top:calc((100% - 2 * var(--g)) / 3 * .55 + var(--g));stroke:var(--graphite);stroke-width:2}
.tag{position:relative;display:flex;flex-direction:column;justify-content:center;gap:max(3px,.9cqw);width:max(78px,23cqw);height:max(34px,10cqw);margin-top:max(4px,1.1cqw);padding:0 max(30px,8.5cqw) 0 max(8px,2.2cqw);border:1px solid var(--frame)}
.tag i{display:block;height:1.5px;background:var(--frame)}
.tag i+i{width:60%}
.tick{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.tag .tick{position:absolute;right:max(6px,1.8cqw);top:50%;width:max(18px,5.4cqw);height:max(18px,5.4cqw);transform:translateY(-50%);stroke:var(--graphite)}

.f-calc{display:flex;flex-direction:column;gap:max(6px,2cqw)}
.row{position:relative;display:grid;grid-template-columns:max(66px,17cqw) minmax(0,1fr) max(56px,19cqw);column-gap:max(8px,3cqw);align-items:center}
.mid{min-width:0}
.num{position:relative;justify-self:end;font-family:var(--serif);font-weight:400;font-size:max(30px,10.6cqw);line-height:.92;letter-spacing:-.01em;font-variant-numeric:lining-nums;transform-origin:50% 50%}
.n-sys{color:var(--ink)}
.n-cnt{color:var(--graphite);font-style:italic}
.n-dif{justify-self:stretch;text-align:right;color:var(--red);font-style:italic;padding-top:max(6px,1.8cqw)}
.dif-t{position:relative;display:inline-block}
.dif-n{display:inline-block}
.dif-loop{left:-38%;top:-16%;width:176%;height:132%;stroke:var(--red);stroke-width:2.2}
.sum-rule{position:absolute;left:-6%;top:0;width:112%;height:max(5px,1.4cqw);overflow:visible;fill:none;stroke:var(--graphite);stroke-width:2.2;stroke-linecap:round}

.bar,.tally{display:block;width:100%;height:auto;overflow:visible}
.bar{aspect-ratio:200/26}
.bar-frame{fill:none;stroke:var(--frame);stroke-width:1.2}
.bar path{fill:none;stroke:var(--graphite);stroke-width:1.5;stroke-linecap:round}
.bar .divider{stroke-width:2.4}
.bar-legend{display:flex;justify-content:space-between;gap:8px;margin-top:max(2px,.6cqw)}
.l-res{padding-left:1px}
.tally{aspect-ratio:290/80}
.tally path{fill:none;stroke:var(--graphite);stroke-width:2.3;stroke-linecap:round;opacity:.92}
.tally .ghosts path{stroke:var(--red);opacity:1}
@container (max-width:420px){.tally path{stroke-width:3.3}.bar path{stroke-width:2.2}}

.reason-line{position:relative;height:max(26px,8.4cqw);border-bottom:1.5px solid var(--frame)}
.scrib{position:absolute;left:1%;bottom:-2.2cqw;width:auto;height:max(30px,10cqw);aspect-ratio:140/30;overflow:visible;fill:none;stroke:var(--green);stroke-width:.95;stroke-linecap:round;stroke-linejoin:round}

.f-go{display:flex;align-items:center;justify-content:flex-end;gap:max(8px,2.4cqw)}
.box{position:relative;flex:0 0 auto;width:max(20px,5.6cqw);height:max(20px,5.6cqw);margin-right:max(4px,3cqw);border:1.5px solid var(--ink)}
.tick-go{position:absolute;left:-12%;top:-30%;width:135%;height:135%;stroke:var(--green);stroke-width:2.8}
.go-t{font-size:max(12px,2.9cqw);font-weight:600;color:var(--ink)}

.marks{position:absolute;inset:0;z-index:4;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.arrow,.arrow-head{stroke:var(--green);stroke-width:2.2}
.links path{stroke:var(--graphite);stroke-width:1.8}
.ne{position:absolute;left:0;top:0;z-index:4;width:max(34px,12cqw);height:auto;overflow:visible;fill:none;stroke:var(--red);stroke-width:4.2;stroke-linecap:round;opacity:0}
.pencil{position:absolute;left:0;top:0;z-index:6;width:max(150px,44cqw);transform-origin:0 50%;filter:drop-shadow(3px 6px 4px rgba(30,14,3,.4));opacity:0;pointer-events:none}
.pencil svg{display:block;width:100%;height:auto}
/* Randnotizen der Ausgangslage: der Bleistift beschriftet die großen Zahlen, Fragezeichen über dem ≠ (nur in der Bewegung sichtbar) */
.hn{position:absolute;left:0;top:0;z-index:4;font-family:var(--serif);font-style:italic;font-size:max(17px,5cqw);line-height:1.1;color:var(--graphite);white-space:nowrap;opacity:0;pointer-events:none}
.qm{position:absolute;left:0;top:0;z-index:4;width:max(22px,6.6cqw);height:auto;overflow:visible;fill:none;stroke:var(--graphite);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;pointer-events:none}

/* Kleine Telefone: Blatt verdichten, damit es in die Bühne passt */
@container lbwrap (max-height:420px){
  .sheet-in{gap:5px;padding:28px 10px 10px}
  .f-head{padding-bottom:4px}
  .slots,.tag{margin-top:3px}
  .f-calc{gap:4px}
  .n-dif{padding-top:4px}
  .reason-line{height:24px}
}

/* Kapitelleiste unter dem Klemmbrett */
.rail{position:relative;z-index:1;display:flex;gap:8px;width:min(100% - 32px,600px);margin:0 auto;padding:10px 0 12px;list-style:none}
.rail li{flex:1 1 0;min-width:0}
.rail i{display:block;height:2px;background:rgba(248,241,229,.25);overflow:hidden}
.rail b{display:block;height:100%;background:var(--cream);transform-origin:0 50%}
.rail span{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.rail li.on span{color:var(--cream)}
@media (max-width:599px){.rail span{display:none}.rail{padding:8px 0 10px}}
@media (max-width:959px) and (max-height:700px){.stage{height:63vh;height:63svh}}
@media (min-width:960px){.rail{padding:0 0 clamp(18px,3.4cqh,34px)}}

/* ---------- Text auf dem Brett ---------- */
.intro{padding:26px 0 18vh}
.eyebrow{font-size:.9375rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-2);margin-bottom:.9em}
h1{font-size:clamp(1.5rem,1.15rem + 1.3vw,2.2rem);font-weight:700;letter-spacing:-.015em;line-height:1.1;margin-bottom:.55em}
.hook{font-family:var(--serif);font-size:clamp(2.5rem,1.2rem + 4.6vw,5.4rem);font-weight:400;line-height:.98;letter-spacing:-.01em;color:var(--cream)}
.h-l{display:block;text-wrap:balance}
.hook em{font-style:italic;color:var(--cream-2)}
.step{min-height:80vh;min-height:80svh;padding-top:2vh}
.step:last-child{min-height:90vh;min-height:90svh}
.step-in{max-width:34rem}
.act{display:inline-flex;align-items:baseline;gap:.7em;margin-bottom:.9em;padding:.35em .8em;background:var(--paper);color:var(--graphite);font-size:.9375rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 1px 0 rgba(0,0,0,.2),0 8px 14px -10px rgba(20,10,2,.7)}
.act span{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--red)}
.step h2,.lage h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,1.35rem + 2vw,3.2rem);line-height:1.06;letter-spacing:-.005em;color:var(--cream);text-wrap:balance}
/* Ausgangslage und Schritt-Texte: Lesetext auf dem Brett */
.lage{padding:4vh 0 20vh}
.lage h2{margin-bottom:.55em}
.lp,.txt{max-width:34rem;font-size:1.0625rem;line-height:1.65;color:var(--cream)}
.lp+.lp{margin-top:1em}
.txt{margin-top:1em}

@media (min-width:960px){
  .intro{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 8vh}
  .lage{padding:6vh 0 42vh}
  .lp,.txt{font-size:1.125rem}
  .step,.step:last-child{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:0}
}

/* ---------- Gemeinsamer Rahmen der vertiefenden Abschnitte ---------- */
.detail,.mit,.tech,.more{max-width:1240px;margin:0 auto;padding:clamp(80px,11vw,150px) var(--pad) 0}
.sec-head{max-width:48rem;margin-bottom:clamp(36px,5vw,72px)}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,1.3rem + 3.2vw,4.2rem);line-height:1.02;letter-spacing:-.01em;color:var(--cream);text-wrap:balance}

/* ---------- Im Detail: drei Karteikarten mit kleinen Szenen ---------- */
.dt{display:grid;gap:clamp(28px,4vw,72px);align-items:center}
.dt+.dt{margin-top:clamp(72px,10vw,140px)}
.dt-txt{max-width:34rem}
.dt-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.85rem,1.35rem + 1.7vw,2.75rem);line-height:1.06;color:var(--cream);text-wrap:balance;margin-bottom:.5em}
.dt-txt p{font-size:1.0625rem;line-height:1.65;color:var(--cream)}
@media (min-width:960px){
  .dt{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .dt-b{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
  .dt-b .kk{order:2}
  .dt .kk{justify-self:center}
  .dt-txt p{font-size:1.125rem}
}
/* Karteikarte: rote Kopflinie, blaue Linien; alles darin skaliert mit der Kartenbreite */
.kk{position:relative;container-type:inline-size;width:100%;max-width:560px;justify-self:start;aspect-ratio:3/2;color:var(--ink);transform:rotate(-1.1deg)}
.dt-b .kk{transform:rotate(.9deg)}
.dt-c .kk{transform:rotate(-.5deg)}
.kk-bg{position:absolute;inset:0;border-radius:2px;background:linear-gradient(var(--red),var(--red)) 0 15cqw/100% 1.5px no-repeat,repeating-linear-gradient(180deg,transparent 0 calc(6.6cqw - 1px),var(--line) calc(6.6cqw - 1px) 6.6cqw) 0 15cqw/100% 100% no-repeat,var(--paper);box-shadow:0 1px 1px rgba(40,22,8,.3),0 24px 36px -20px rgba(28,14,3,.85)}
.kk-head{position:absolute;left:5.5cqw;right:5.5cqw;top:4.4cqw;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kk-head b{font-size:max(11px,2.7cqw);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.kk-head i{font-style:normal;font-size:max(10px,2.1cqw);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--print);border:1px solid var(--frame);padding:.2em .6em}
.kk-body{position:absolute;left:5.5cqw;right:5.5cqw;top:19.5cqw;bottom:5.5cqw}

/* A · Scan am Etikett, Schallbögen, Aufgabenliste des Lager-Hubs */
.kk-scan .kk-body{display:grid;grid-template-columns:40% 8% minmax(0,1fr);align-items:center;column-gap:2.6cqw}
.etk{position:relative;padding:2.6cqw 2.6cqw 2.2cqw;background:#fff;border:1px solid var(--frame);box-shadow:0 1px 1px rgba(40,22,8,.15);transform:rotate(-2.5deg)}
.bc{display:block;width:100%;height:15cqw}
.bc path{fill:#2a2724}
.etk i{display:block;height:1.4px;margin-top:2.2cqw;background:var(--frame)}
.etk i+i{width:58%;margin-top:1.5cqw}
.beam{position:absolute;left:1.2cqw;right:1.2cqw;top:2.6cqw;height:2px;border-radius:1px;background:var(--red);box-shadow:0 0 5px 1px rgba(192,57,43,.5);opacity:0}
.waves{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--graphite);stroke-width:2.6;stroke-linecap:round}
.tasks{list-style:none;margin:0;padding:0;font-size:max(12px,3cqw);font-weight:500;line-height:1.2;color:var(--print)}
.tasks li{position:relative;display:flex;align-items:center;gap:1.8cqw;padding:1.25cqw 0;white-space:nowrap}
.tasks li>i{position:relative;flex:0 0 auto;width:max(10px,2.5cqw);height:max(10px,2.5cqw);border:1.3px solid var(--print)}
.tasks .on{color:var(--ink);font-weight:600}
.tasks .on>i{border-color:var(--ink)}
.tasks .tick{position:absolute;left:-18%;top:-40%;width:150%;height:150%;stroke:var(--green);stroke-width:3}
.t-loop{left:-5%;top:-4%;width:112%;height:108%;stroke:var(--graphite);stroke-width:1.7}

/* B · vier Zettel, eine Büroklammer */
.bundle{position:relative;display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:2.4cqw;width:82%;height:100%;margin:0 auto}
.slip{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.2cqw;padding:2.2cqw 2.6cqw 2.4cqw;background:#fff;border:1px solid var(--frame);box-shadow:0 1px 1px rgba(40,22,8,.16),0 8px 12px -10px rgba(28,14,3,.55)}
.slip>span:first-child{font-size:max(11px,2.7cqw);font-weight:500;line-height:1.2;color:var(--print)}
.ms{display:grid;grid-template-columns:repeat(4,1fr);gap:.9cqw;width:78%}
.ms i{display:block;aspect-ratio:1.6;border:1px solid var(--frame)}
.ms .t{border-color:var(--graphite);box-shadow:0 0 0 1.4px var(--graphite)}
.mc{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1cqw;width:78%;height:7.6cqw;padding:0 7cqw 0 1.6cqw;border:1px solid var(--frame)}
.mc i{display:block;height:1.3px;background:var(--frame)}
.mc i+i{width:60%}
.mc .tick{position:absolute;right:1.2cqw;top:50%;width:4.6cqw;height:4.6cqw;transform:translateY(-50%);stroke:var(--graphite)}
.md{font-family:var(--serif);font-style:italic;font-weight:400;font-size:max(22px,7.4cqw);line-height:.9;color:var(--red)}
.scr{display:block;width:62%;height:auto;overflow:visible;fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pclip{position:absolute;left:4%;top:-6.5cqw;width:4.4cqw;height:auto;overflow:visible;fill:none;stroke:#7f868d;stroke-width:2.3;stroke-linecap:round;filter:drop-shadow(1px 2px 1px rgba(30,15,4,.35))}

/* C · überschrieben gegen gebucht */
.kk-buch .kk-body{display:grid;grid-template-columns:1fr 1fr;gap:3.6cqw}
.vs{position:relative;display:flex;flex-direction:column;gap:1.6cqw;padding:2.4cqw 3cqw 2.6cqw;background:#fff;border:1px solid var(--frame);box-shadow:0 1px 1px rgba(40,22,8,.16),0 8px 12px -10px rgba(28,14,3,.55)}
.vs-h{font-size:max(10px,2.3cqw);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--print)}
.vs-n{position:relative;display:flex;align-items:baseline;gap:2.6cqw;font-family:var(--serif);font-size:max(28px,10cqw);line-height:.95}
.vs-n b{font-weight:400}
.vs-n .o{position:relative;color:var(--ink)}
.vs-n .w{font-style:italic;color:var(--graphite)}
.vs-a .vs-n{display:grid;justify-items:start}
.vs-a .vs-n b{grid-area:1/1}
.vs-a .o{opacity:0}
.strike{position:absolute;left:-12%;top:40%;width:124%;height:24%;overflow:visible;fill:none;stroke:var(--graphite);stroke-width:2.4;stroke-linecap:round}
.crumbs{position:absolute;left:0;top:100%;width:13cqw;height:3cqw}
.crumbs i{position:absolute;width:max(3px,.9cqw);height:max(2px,.6cqw);border-radius:45%;background:#c4bbb0}
.crumbs i:nth-child(1){left:4%;top:30%}.crumbs i:nth-child(2){left:22%;top:66%;transform:rotate(30deg)}.crumbs i:nth-child(3){left:40%;top:18%}
.crumbs i:nth-child(4){left:56%;top:72%;transform:rotate(-20deg)}.crumbs i:nth-child(5){left:72%;top:36%}.crumbs i:nth-child(6){left:90%;top:78%}
.vs-f{display:flex;align-items:center;gap:1.6cqw;min-height:6cqw;margin-top:1cqw;font-size:max(11px,2.6cqw);color:var(--print)}
.qm2{width:max(9px,2.6cqw);height:auto;overflow:visible;fill:none;stroke:var(--red);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.vs-f .d{font-family:var(--serif);font-style:italic;font-weight:400;font-size:max(20px,6cqw);line-height:1;color:var(--red)}
.vs-f .scr{width:48%}
.vs-ok{display:flex;align-items:center;gap:1.4cqw;margin-top:auto;font-size:max(11px,2.6cqw);font-weight:600}
.vs-ok .box{position:relative;flex:0 0 auto;width:max(12px,3.4cqw);height:max(12px,3.4cqw);border:1.4px solid var(--ink)}
.vs-ok .tick{position:absolute;left:-14%;top:-34%;width:140%;height:140%;stroke:var(--green);stroke-width:3}

/* ---------- Zusammenspiel: Bleistiftskizze auf Rechenpapier, daneben die Verweise ---------- */
.mit-grid{display:grid;gap:clamp(40px,5vw,88px);align-items:center}
@media (min-width:960px){.mit-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}.mit-grid .kar{justify-self:center}}
.kar{width:100%;max-width:420px;justify-self:start;padding:clamp(14px,2.6vw,26px);background:linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(var(--grid) 1px,transparent 1px) 0 0/16px 16px,var(--paper);box-shadow:0 1px 1px rgba(40,22,8,.3),0 26px 40px -22px rgba(28,14,3,.85);transform:rotate(-1.2deg)}
.sk{display:block;width:100%;height:auto;overflow:visible}
.sk .dr{fill:none;stroke:var(--graphite);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sk .fr.g{stroke:var(--green);stroke-width:2.4}
.sk .bars{fill:#2f2c29}
.sk .beam2{stroke:var(--red)}
.sk .min{fill:none;stroke:var(--red);stroke-width:1.6;stroke-dasharray:4 4}
.sk .lvl{stroke-width:2.2}
.sk .lb{font-family:var(--serif);font-style:italic;font-size:30px;fill:var(--graphite)}
.sk .lb.s{font-size:26px}
.sk .nt{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;fill:var(--print)}
.mit-lead{max-width:34rem;margin-bottom:clamp(28px,3.6vw,44px);font-size:1.0625rem;line-height:1.65;color:var(--cream)}
.mit-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(30px,3.8vw,46px)}
.mit-list a{display:inline-flex;flex-direction:column;gap:.35em;color:var(--cream);text-decoration:none}
.mit-list .code{font-size:.9375rem;font-weight:600;letter-spacing:.16em;color:var(--cream-2)}
.mit-list .nm{position:relative;padding-bottom:.2em;font-family:var(--serif);font-size:clamp(2.1rem,1.5rem + 1.8vw,3rem);line-height:1}
.mit-list .nm::after{content:"\00a0\2192"/"";font-family:var(--sans);font-size:.55em;vertical-align:.2em}
.ul{position:absolute;left:0;bottom:0;width:100%;height:.22em;overflow:visible;fill:none;stroke:var(--cream);stroke-width:2.2;stroke-linecap:round}
.mit-list a:hover .ul{stroke-width:3.2}
.mit-list p{max-width:34rem;margin-top:.7em;font-size:1.0625rem;line-height:1.65;color:var(--cream)}
@media (min-width:960px){.mit-lead,.mit-list p{font-size:1.125rem}}

/* ---------- Abschluss ---------- */
.finale{max-width:1240px;margin:0 auto;padding:clamp(72px,11vw,150px) var(--pad) clamp(56px,8vw,110px)}
.note{position:relative;max-width:980px;margin:0 auto clamp(48px,7vw,96px);padding:clamp(24px,5vw,64px) clamp(20px,5vw,72px) clamp(26px,4vw,52px);background:repeating-linear-gradient(180deg,transparent 0 31px,var(--line) 31px 32px),var(--paper);color:var(--ink);box-shadow:0 1px 1px rgba(40,22,8,.3),0 26px 40px -22px rgba(28,14,3,.85)}
.triad{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,1rem + 6.6vw,7.4rem);line-height:.98;letter-spacing:-.01em;color:var(--graphite);margin-bottom:.35em}
.triad .tw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .12em 0}
.triad .tw>span{display:inline-block}
.triad .k{color:var(--green);font-style:italic}
.note .desc{max-width:40rem;font-size:1.0625rem;line-height:1.6;color:var(--print)}
.finale-grid{display:grid;gap:clamp(40px,6vw,88px);align-items:start}
.finale-grid>.ledger{width:100%;max-width:980px;margin-inline:auto}
.ledger{padding:clamp(20px,4vw,40px) clamp(18px,4vw,44px);background:var(--paper);color:var(--ink);box-shadow:0 1px 1px rgba(40,22,8,.3),0 26px 40px -24px rgba(28,14,3,.85)}
.ledger h3{font-size:.875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.8em;padding-bottom:.6em;border-bottom:1.5px solid var(--ink)}
.ledger ul{list-style:none;margin:0;padding:0}
.ledger li{display:flex;align-items:flex-start;gap:.9em;padding:.8em 0;border-bottom:1px solid var(--line);font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);line-height:1.4}
.cb{position:relative;flex:0 0 auto;width:1.1em;height:1.1em;margin-top:.15em;border:1.5px solid var(--ink)}
.cb svg{position:absolute;left:-14%;top:-34%;width:140%;height:140%;overflow:visible;fill:none;stroke:var(--green);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Technik & Rolle: Projektblatt mit Stempel ---------- */
.blatt{position:relative;overflow:hidden;max-width:900px;padding:clamp(22px,4vw,48px) clamp(18px,4.4vw,56px) clamp(26px,4vw,48px);background:var(--paper);color:var(--ink);box-shadow:0 1px 1px rgba(40,22,8,.3),0 26px 40px -22px rgba(28,14,3,.85)}
.blatt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:.8em;border-bottom:1.5px solid var(--ink)}
.blatt-head b{font-size:.9375rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.blatt-head i{font-style:normal;font-size:.875rem;font-weight:600;letter-spacing:.14em;color:var(--print);border:1px solid var(--frame);padding:.2em .6em}
.rows{margin:0}
.tr{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.2em 1.5em;align-items:baseline;padding:1em 0;border-bottom:1px solid var(--line)}
.tr dt{font-size:.9375rem;font-weight:600;letter-spacing:.06em;color:var(--print)}
.tr dd{margin:0;font-size:1.0625rem;line-height:1.55}
.tr-stand{align-items:center;padding-bottom:0;border-bottom:0}
.stamp{display:inline-block;margin:.4em 0 .2em;padding:.35em .8em;border:2.5px solid var(--green);border-radius:4px;outline:1px solid var(--green);outline-offset:2.5px;color:var(--green);font-size:1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-4deg);transform-origin:0 50%}
@media (max-width:599px){.tr{grid-template-columns:minmax(0,1fr)}}
@media (min-width:960px){
  .tech{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(40px,5vw,88px);align-items:start}
  .tech .sec-head{position:sticky;top:12vh}
  .tr dd{font-size:1.125rem}
}

/* ---------- Weitere Projekte: Karteikarten mit Reiter ---------- */
.more{padding-bottom:clamp(64px,9vw,120px)}
.more>.act{margin-bottom:3.2em}
.more-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(44px,5vw,56px) clamp(16px,3vw,40px);align-items:center}
.mv-prev,.mv-next{width:100%;max-width:440px}
.mv-prev{transform:rotate(-1.2deg)}
.mv-next{transform:rotate(1.2deg);justify-self:end}
.mv a{display:block;color:var(--ink);text-decoration:none}
.mv-prev a,.mv-next a{position:relative;padding:clamp(18px,2.4vw,26px) clamp(18px,2.6vw,30px) clamp(16px,2vw,22px);background:var(--paper);box-shadow:0 1px 1px rgba(40,22,8,.3),0 18px 30px -18px rgba(28,14,3,.85);transition:transform .25s,box-shadow .25s}
.mv-prev a:hover,.mv-next a:hover,.mv-prev a:focus-visible,.mv-next a:focus-visible{transform:translateY(-5px);box-shadow:0 1px 1px rgba(40,22,8,.3),0 26px 36px -18px rgba(28,14,3,.9)}
.mv-code{position:absolute;bottom:100%;left:clamp(14px,2vw,22px);padding:.4em .9em .3em;border-radius:5px 5px 0 0;background:var(--paper);font-size:.875rem;font-weight:700;letter-spacing:.14em;color:var(--graphite)}
.mv-next .mv-code{left:auto;right:clamp(14px,2vw,22px)}
.mv-name{display:block;font-family:var(--serif);font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem);line-height:1.02}
.mv-dir{display:block;margin-top:.5em;font-size:.9375rem;font-weight:600;color:var(--print)}
.mv-next a{text-align:right}
.mv-all{justify-self:center}
.mv-all a{padding:.5em .2em;font-weight:600;color:var(--cream);text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(248,241,229,.55)}
.mv-all a:hover{text-decoration-color:var(--cream)}
@media (min-width:760px){.more-list{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.mv-prev{justify-self:start}}

/* ---------- Fuß ---------- */
.foot{max-width:1240px;margin:0 auto;padding:36px var(--pad) 48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px;border-top:1px solid rgba(248,241,229,.2)}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.foot-nav a{font-weight:500;text-underline-offset:.25em;text-decoration-color:rgba(248,241,229,.55)}
.foot-nav a:hover{text-decoration-color:var(--cream)}
.sig{width:100%;font-size:.9375rem;color:var(--cream-2)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ---------- Druck ----------
   Aufs Papier kommt das fertig ausgefüllte Blatt (projekt-lager-bestand.js setzt beim Drucken den CSS-Grundzustand ein und
   gibt dem Zählblatt seine Papierbreite). Das Hartfaserbraun und das feste Rauschen druckt der Browser nicht bzw. nicht
   auf jeder Seite: helle Schrift vom Brett wird dunkel (Tinte und Druckgrau, AA gegen Weiß). Die Papiere selbst
   (Zählblatt, Karteikarten, Rechenpapier, Notiz) behalten Linien und Kanten, sonst stünde ihr Inhalt lose im Weiß.
   Titel vor das Blatt, keine Bildschirmhöhen, Karten und Skizzen nicht zerschneiden. */
@page{margin:14mm 12mm}
@media print{
  html,body{background:#fff;color:var(--ink)}
  .grain,.skip,.back,.rail,.pencil{display:none}
  .sheet-bg,.kk-bg,.kar,.note,.ledger,.blatt,.act,.mv-prev a,.mv-next a,.mv-code{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top{position:static;padding-top:0}
  .owner{color:var(--print)}
  .story{display:flex;flex-direction:column}
  .copy{display:contents}
  .intro,.lage,.step{padding-inline:var(--pad)}
  .intro{order:-1;min-height:0;padding-top:4px;padding-bottom:20px}
  .stage{position:static;height:auto;min-height:0;overflow:visible;container-type:normal;background:none;box-shadow:none}
  .wrap{container-type:normal;padding:32px 0 20px}
  .lage{padding-top:12px;padding-bottom:8px}
  .step,.step:last-child{min-height:0;padding-top:14px}
  .eyebrow,.mit-list .code,.sig{color:var(--print)}
  .hook,.hook em,.step h2,.lage h2,.lp,.txt,.sec-head h2,.dt-txt h3,.dt-txt p,.mit-lead,.mit-list a,.mit-list p,.mv-all a{color:var(--ink)}
  .ul{stroke:var(--graphite)}
  .mv-all a{text-decoration-color:var(--frame)}
  .foot{border-top-color:var(--frame)}
  .foot-nav a{text-decoration-color:var(--frame)}
  .detail,.mit,.tech,.more{padding-top:36px}
  .finale{padding-top:36px;padding-bottom:20px}
  .sec-head{margin-bottom:22px}
  .note{margin-bottom:28px}
  /* Karteikarten und Skizze neben ihrem Text wie auf breiten Schirmen */
  .dt,.dt-b,.mit-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .dt+.dt{margin-top:36px}
  .tech .sec-head{position:static}
  /* Kapitelmarken stehen als Inline-Blöcke über ihren Überschriften: die Überschrift bleibt bei ihnen */
  h1,h2,h3{break-after:avoid}
  .act+h2,.more-list{break-before:avoid}
  .stage,.step,.dt,.kk,.kar,.mit-list li,.note,.ledger,.tr,.more-list{break-inside:avoid}
}