/* C-02 Einkaufs-Dashboard – eigene Projektseite, Welt „Liefertermine auf Ocker“.
   Ockergrund wie ein Terminbrett, dunkelbraune Tinte, cremefarbene Bestellzettel und Endlospapier, Wareneingang als grüner
   Haken-Stempel, Überfälliges rot schraffiert, Rückfrage als Anhänger. Grün und Rot stehen nur auf Creme oder mit Tintenrand.
   Ohne JS und bei reduzierter Bewegung zeigt alles den Endzustand. */

/* ---------- 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:#2b1d0e}
  ::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:"Inter";src:url(../fonts/inter-normal-400_700-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(../fonts/inter-normal-400_700-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-normal-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ocker:#d9a51f;--ocker-h:#e3b23c;--notiz:#f3d27a;
  --creme:#f7eed6;--creme-2:#efe2bf;
  --tinte:#2b1d0e;--tinte-2:#4a3210;--tinte-3:#6b4f22;--braun:#8a5a1c;
  --gruen:#1f6a2c;--rot:#a8321c;--rot-h:#f0c2b0;
  --haar:rgba(43,29,14,.16);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --papier:0 1px 0 rgba(43,29,14,.28),0 22px 34px -22px rgba(43,29,14,.7);
  --schraffur:repeating-linear-gradient(-45deg,var(--rot) 0 3px,var(--rot-h) 3px 6px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ocker);color:var(--tinte);font:400 1.0625rem/1.6 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
em{font-style:normal}
h1,h2,h3{color:var(--tinte);font-weight:700;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;border-radius:3px}
.wrap{width:min(1240px,100% - 32px);margin-inline:auto}

.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--tinte);color:var(--creme);padding:12px 16px;border-radius:4px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* Kopf: links „← Profil“, rechts „Demo“ und der Name als Weg zur Startseite, dazwischen am Desktop das Fach-Etikett
   (eine Grammatik für alle Projektseiten, 31.10.2026: volle Breite, gleicher Seitenabstand, jedes Ziel ≥ 44 px) */
.kopf{position:relative;padding:14px 0;border-bottom:2px solid var(--tinte)}
.kopf-in{display:flex;align-items:center;gap:20px;padding-inline:clamp(16px,3vw,40px)}
.zurueck{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;border:2px solid var(--tinte);background:var(--creme);color:var(--tinte);font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 3px 0 var(--tinte);transition:transform .15s,box-shadow .15s}
.zurueck:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--tinte)}
.zurueck.demo{margin-left:auto;white-space:nowrap;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-einkauf.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.name{display:inline-flex;align-items:center;min-height:44px;font-size:.78rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:var(--tinte);text-decoration:none}
.name:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.code{position:absolute;left:50%;transform:translateX(-50%);font:500 .8rem/1 var(--mono);white-space:nowrap;color:var(--tinte-2)}
@media (max-width:1099px){.code{display:none}}
/* schmale Handys: alle drei Ziele in einer Zeile, der Name ungekürzt */
@media (max-width:399.98px){
  .kopf-in{gap:8px}
  .kopf .zurueck{padding:0 12px;font-size:.9375rem}
  .name{font-size:.75rem;letter-spacing:.04em}
}
@media (max-width:359.98px){
  .kopf .zurueck{padding:0 10px}
  .name{font-size:.6875rem}
}

/* Grundbausteine */
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--tinte-2)}
.marke{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 10px;border-radius:3px;border:1.5px solid var(--tinte);background:var(--creme);color:var(--tinte);font:500 .8125rem/1.1 var(--mono)}
.marke::before{content:"";width:10px;height:10px;border:1.5px solid var(--tinte);background:var(--creme)}
.marke-late::before{background:var(--schraffur);border-color:var(--rot)}
.marke-in::before{border-radius:50%;background:var(--gruen);border-color:var(--gruen)}
.marke-due::before{background:var(--tinte);transform:rotate(45deg) scale(.85)}
.marke-ki::before{border:0;background:var(--tinte);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.notiz{font-size:1rem;color:var(--tinte-2)}
.sec-kopf{display:grid;gap:18px;align-content:start}
.sec-kopf h2,.ub-text h2{font-size:clamp(2rem,1.15rem + 3.2vw,3.6rem);line-height:1.03;letter-spacing:-.04em}
.sec-kopf p:not(.marke):not(.eyebrow){max-width:58ch}
.sec-kopf .marke,.sec-kopf .eyebrow{justify-self:start}
.h2-lang{font-size:clamp(1.9rem,1.1rem + 2.4vw,3rem)!important}
section{position:relative}
.lage,.zeit,.vorjahr,.faellig,.ki,.ueberblick,.kennzahlen,.zusammen,.technik{padding-block:clamp(72px,9vw,150px);border-top:2px solid var(--tinte)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.lage,.kennzahlen,.zusammen,.technik,.weiter{overflow-x:clip}
.split{display:grid;gap:clamp(40px,5vw,88px);align-items:center}
.split>*,.zeit-grid>*,.hero-in>*{min-width:0}
@media (min-width:960px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .split-rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .split-rev .sec-kopf{order:2}
}

/* Papier: Bestellzettel und Endlospapier mit Führungslöchern */
.zettel,.blatt{position:relative;background-color:var(--creme);color:var(--tinte);border-radius:2px;box-shadow:var(--papier)}
.blatt{padding:22px 44px 26px;background-image:radial-gradient(circle,var(--ocker) 4px,transparent 4.6px),radial-gradient(circle,var(--ocker) 4px,transparent 4.6px),linear-gradient(90deg,transparent 29px,var(--haar) 29px 30px,transparent 30px calc(100% - 30px),var(--haar) calc(100% - 30px) calc(100% - 29px),transparent calc(100% - 29px));background-size:30px 24px,30px 24px,100% 100%;background-position:0 6px,right 0 top 6px,0 0;background-repeat:repeat-y,repeat-y,no-repeat}
.blatt-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:16px;border-bottom:3px double var(--tinte)}
.blatt-titel{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.blatt-sub{font:500 .75rem/1.2 var(--mono);color:var(--tinte-3)}
@media (max-width:599px){.blatt{padding:18px 34px 22px;background-size:24px 22px,24px 22px,100% 100%;background-image:radial-gradient(circle,var(--ocker) 3.4px,transparent 4px),radial-gradient(circle,var(--ocker) 3.4px,transparent 4px),linear-gradient(90deg,transparent 23px,var(--haar) 23px 24px,transparent 24px calc(100% - 24px),var(--haar) calc(100% - 24px) calc(100% - 23px),transparent calc(100% - 23px))}}

/* Hero */
.hero{overflow:hidden;background:repeating-linear-gradient(90deg,rgba(43,29,14,.07) 0 1px,transparent 1px 8.333%)}
.hero-in{position:relative;display:grid;gap:56px;padding-block:clamp(40px,7vw,96px) clamp(64px,8vw,120px)}
.hero h1{margin-top:22px;font-size:clamp(2.6rem,1rem + 5.6vw,6rem);line-height:.98;letter-spacing:-.05em}
.hero h1 .offen{text-decoration:underline dashed var(--tinte);text-decoration-thickness:.055em;text-underline-offset:.13em}
.lead{margin-top:28px;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;max-width:44ch;font-weight:500}
.stapel{position:relative;justify-self:center;width:min(100%,540px);padding:10px 4px 0}
.stapel::before,.stapel::after{content:"";position:absolute;inset:18px 10px -8px;background:var(--creme-2);border-radius:2px;box-shadow:var(--papier);transform:rotate(2.2deg)}
.stapel::after{inset:14px 6px -4px;background:#f2e6c8;transform:rotate(-1.2deg)}
.zettel{z-index:1;padding:26px clamp(18px,3vw,30px) 26px;transform:rotate(-.6deg)}
.zettel::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:radial-gradient(circle at 7px 6px,var(--ocker) 3.4px,transparent 3.9px) 0 0/14px 12px repeat-x}
.z-kopf{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:10px;border-bottom:2px solid var(--tinte);font:500 .75rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.z-felder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 8px}
.z-feld{position:relative;height:clamp(72px,6vw,88px);border:1.5px solid var(--tinte);border-radius:2px;padding:7px 8px}
.z-feld em{font:500 .75rem/1 var(--mono);color:var(--tinte-3)}
.z-feld b{position:absolute;right:10px;bottom:10px}
.z-haken{width:11px;height:20px;border:solid var(--tinte);border-width:0 3px 3px 0;transform:rotate(42deg);margin:0 4px 2px 0}
.z-raute{width:14px;height:14px;background:var(--tinte);transform:rotate(45deg);margin:0 4px 4px 0}
.z-leer{border-style:dashed}
.z-stempel{width:34px;height:34px;border:2px dashed rgba(43,29,14,.4);border-radius:50%;margin:-4px -2px}
.weg{--w:64;margin-top:44px}
.weg-bahn{position:relative;display:block;height:22px}
.weg-bahn::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--tinte) 0 6px,transparent 6px 12px)}
.weg-fill{position:absolute;left:0;top:50%;height:5px;margin-top:-2.5px;width:calc(var(--w) * 1%);background:var(--tinte);border-radius:3px}
.weg-chip{position:absolute;top:50%;left:calc(var(--w) * 1%);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--creme);border:4px solid var(--tinte)}
.weg-chip em{position:absolute;top:24px;left:50%;transform:translateX(-50%);font:500 .75rem/1 var(--mono);white-space:nowrap}
.weg-termin{position:absolute;top:50%;left:82%;width:0;height:0}
.weg-termin::before{content:"";position:absolute;width:12px;height:12px;left:-6px;top:-6px;transform:rotate(45deg);background:var(--tinte)}
.weg-termin em{position:absolute;bottom:14px;left:0;transform:translateX(-50%);font:500 .75rem/1 var(--mono);color:var(--tinte-3);white-space:nowrap}
.weg-ende{position:absolute;right:-8px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px dashed var(--tinte);background:var(--creme)}
.weg-skala{display:flex;justify-content:space-between;margin-top:12px;font:500 .75rem/1 var(--mono);color:var(--tinte-3)}
@media (min-width:960px){
  .hero-in{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(40px,6vw,96px);min-height:min(860px,calc(100svh - 74px))}
  .stapel{justify-self:end}
}

/* Ausgangslage: zwei Spuren einer Bestellung, Ware und Geld, werden vermessen */
.spur{--k:1;--mk:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,2vw,20px);padding:6px 0 10px}
.spur+.spur{margin-top:8px;padding-top:16px;border-top:1.5px dashed rgba(43,29,14,.3)}
.sp-ware{--a:3;--d:76;--e:64}
.sp-geld{--a:38;--d:90;--e:80}
.sp-name{grid-row:1 / 3;display:grid;place-items:center;width:26px;border-left:2px solid var(--tinte);font:500 .75rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.sp-bahn{position:relative;display:block;height:20px;margin-top:34px}
.sp-bahn::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,var(--tinte) 0 6px,transparent 6px 12px);opacity:.5}
.sp-fill{position:absolute;top:50%;height:6px;margin-top:-3px;left:calc(var(--a) * 1%);width:calc((var(--e) - var(--a)) * var(--k) * 1%);background:var(--tinte);border-radius:3px}
.sp-pt{position:absolute;top:50%;width:0;height:0}
.sp-pt::before,.sp-pt::after{content:"";position:absolute}
.sp-start{left:calc(var(--a) * 1%)}
.sp-due{left:calc(var(--d) * 1%)}
.sp-end{left:calc(var(--e) * 1%)}
.sp-start::before{width:16px;height:16px;left:-8px;top:-8px;border-radius:50%;background:var(--creme);border:3.5px solid var(--tinte)}
.sp-due::before{width:12px;height:12px;left:-6px;top:-6px;background:var(--tinte);border:2px solid var(--creme);transform:rotate(45deg)}
.sp-end::before{width:28px;height:28px;left:-14px;top:-14px;border-radius:50%;background:var(--creme);border:2px solid var(--gruen);box-shadow:inset 0 0 0 2px var(--creme),inset 0 0 0 3.5px var(--gruen);transform:rotate(-12deg)}
.sp-end::after{left:-4px;top:-9px;width:6px;height:11px;border:solid var(--gruen);border-width:0 3px 3px 0;transform:rotate(45deg)}
.sp-geld .sp-end::before{border-color:var(--tinte);box-shadow:inset 0 0 0 2px var(--creme),inset 0 0 0 3.5px var(--tinte)}
.sp-geld .sp-end::after{border-color:var(--tinte)}
.sp-end::before,.sp-end::after{transition:transform .32s cubic-bezier(.5,0,.5,1.4),opacity .2s}
.is-motion .spur:not(.is-da) .sp-end::before{opacity:0;transform:rotate(-12deg) scale(1.8)}
.is-motion .spur:not(.is-da) .sp-end::after{opacity:0;transform:rotate(45deg) scale(1.8)}
.sp-pt em{position:absolute;top:13px;left:0;transform:translateX(-50%);font:500 .75rem/1 var(--mono);color:var(--tinte-2);white-space:nowrap}
.sp-end em{top:20px}
.sp-pt em.oben{top:auto;bottom:14px}
.sp-pt em.links{transform:translateX(-8px)}
.sp-pt em.rechts{transform:translateX(calc(-100% + 8px))}
.mass{position:relative;display:block;height:30px;margin:32px 0 2px calc(var(--a) * 1%);width:calc((var(--e) - var(--a)) * 1%)}
.mass::before,.mass::after{content:"";position:absolute;top:14px;bottom:0;width:1.5px;background:var(--tinte)}
.mass::before{left:0;opacity:var(--mk)}
.mass::after{right:0;opacity:var(--mk)}
.mass i{position:absolute;left:0;top:22px;height:1.5px;margin-top:-.75px;width:calc(var(--mk) * 100%);background:var(--tinte);opacity:var(--mk)}
.mass i::before,.mass i::after{content:"";position:absolute;top:-4.25px;border:5px solid transparent}
.mass i::before{left:0;border-left:0;border-right:8px solid var(--tinte)}
.mass i::after{right:0;border-right:0;border-left:8px solid var(--tinte)}
.mass em{position:absolute;left:50%;top:0;transform:translateX(-50%);font:500 .75rem/1 var(--mono);white-space:nowrap;opacity:var(--mk)}

/* Zeitachse auf dem Ocker */
.zeit-grid{display:grid;gap:40px;margin-top:clamp(40px,5vw,64px)}
.zeit .sec-kopf{max-width:820px}
.tl{--t:80;--q:1;position:relative;padding-bottom:12px}
.tl-legende{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 .75rem/1.3 var(--mono);color:var(--tinte)}
.tl-legende span{display:inline-flex;align-items:center;gap:7px}
.tl-legende i{display:inline-block;flex:none}
.lg-plan{width:20px;height:11px;border:1.5px dashed var(--tinte);border-radius:2px}
.lg-due{width:10px;height:10px;background:var(--tinte);transform:rotate(45deg);margin:0 2px}
.lg-in{width:14px;height:14px;border-radius:50%;background:var(--gruen);border:2px solid var(--tinte)}
.lg-late{width:20px;height:11px;background:var(--schraffur);border:1.5px solid var(--tinte)}
.tl-feld{position:relative;margin-top:40px;border-top:2px solid var(--tinte);background:repeating-linear-gradient(90deg,rgba(43,29,14,.14) 0 1px,transparent 1px 10%)}
.tl-feld::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:repeating-linear-gradient(90deg,var(--tinte) 0 1.5px,transparent 1.5px 5%)}
.lane{--f:0;--x:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;row-gap:6px;padding:9px 0 9px;transition:opacity .35s}
.lane:first-child{padding-top:16px}
.lane .nm,.lane .st{position:relative;z-index:2;font:500 .75rem/1.2 var(--mono)}
.lane .nm{justify-self:start;background:var(--ocker);padding-right:4px}
.lane .st{justify-self:end;padding:3px 8px;border-radius:2px;border:1.5px solid var(--tinte);background:var(--creme);transition:transform .3s var(--ease)}
.st em{display:none}
.lane[data-state=geplant] .s0,.lane[data-state=offen] .s1,.lane[data-state=geliefert] .s2,.lane[data-state=ueberfaellig] .s3{display:inline}
.lane[data-state=geplant]{opacity:.55}
.lane[data-state=geplant] .st{border-style:dashed;background:transparent}
.lane[data-state=geliefert] .st{color:var(--gruen);border-color:var(--gruen);transform:rotate(-3deg)}
.lane[data-state=ueberfaellig] .st{color:var(--rot);border-color:var(--rot)}
.l1{--s:3;--d:30;--a:27;--f:24}
.l2{--s:10;--d:44;--a:44;--f:34}
.l3{--s:18;--d:50;--a:58;--f:40;--x:8}
.l4{--s:28;--d:62;--f:52;--x:18;padding-bottom:58px}
.l5{--s:46;--d:90;--f:34}
.bahn{grid-column:1 / -1;position:relative;height:18px}
.bahn i,.bahn b{position:absolute;display:block}
.plan{top:0;bottom:0;left:calc(var(--s) * 1%);width:calc((var(--d) - var(--s)) * 1%);border:1.5px dashed var(--tinte);border-radius:2px;background:rgba(247,238,214,.16)}
.fill{top:0;bottom:0;left:calc(var(--s) * 1%);width:calc(var(--f) * 1%);background:var(--creme) linear-gradient(90deg,transparent 7px,rgba(43,29,14,.35) 7px 8px,transparent 8px);border:1.5px solid var(--tinte);border-radius:2px;box-shadow:0 2px 0 rgba(43,29,14,.3)}
.ext{top:0;bottom:0;left:calc(var(--d) * 1%);width:calc(var(--x) * 1%);background:var(--schraffur);border:1.5px solid var(--rot);border-left:0;border-radius:0 2px 2px 0}
.due{top:50%;left:calc(var(--d) * 1%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:var(--tinte);border:2px solid var(--creme);transform:rotate(45deg);z-index:1}
.arr{top:50%;left:calc(var(--a) * 1%);width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--creme);border:2px solid var(--gruen);box-shadow:inset 0 0 0 2px var(--creme),inset 0 0 0 3.5px var(--gruen);z-index:2;opacity:0;transform:rotate(-12deg) scale(1.8);transition:transform .32s cubic-bezier(.5,0,.5,1.4),opacity .2s}
.arr::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid var(--gruen);border-width:0 3px 3px 0;transform:rotate(45deg)}
.lane[data-state=geliefert] .arr{opacity:1;transform:rotate(-12deg) scale(1)}
.cap{top:50%;left:calc((var(--s) + var(--f)) * 1%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--tinte);border:2px solid var(--creme);box-shadow:0 0 0 1.5px var(--tinte);z-index:2}
.lane[data-state=geliefert] .cap,.lane[data-state=geplant] .cap{display:none}
.lane[data-state=ueberfaellig] .cap{background:var(--rot)}
.frage{top:30px;left:calc((var(--s) + var(--f)) * 1%);padding:15px 10px 6px;border-radius:3px 3px 4px 4px;background:var(--creme);border:1.5px solid var(--rot);color:var(--rot);font:500 .75rem/1 var(--mono);white-space:nowrap;box-shadow:0 6px 10px -6px rgba(43,29,14,.6);transform-origin:50% -14px;transform:translateX(-50%) rotate(0deg) scale(1);opacity:1;transition:transform .5s cubic-bezier(.3,1.7,.5,1),opacity .2s;z-index:3}
.frage::before{content:"";position:absolute;left:50%;top:-16px;width:1.5px;height:21px;margin-left:-.75px;background:var(--tinte)}
.frage::after{content:"";position:absolute;left:50%;top:4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--ocker);box-shadow:0 0 0 1.5px var(--rot)}
.lane:not(.is-ask) .frage{opacity:0;transform:translateX(-50%) rotate(-28deg) scale(.6)}
.heute{position:absolute;top:-10px;bottom:0;left:calc(var(--t) * 1%);width:2px;margin-left:-1px;background:var(--tinte);z-index:1}
.heute em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;padding:4px 9px;border-radius:2px;background:var(--tinte);color:var(--creme);font:500 .75rem/1 var(--mono)}
.heute em::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:var(--tinte)}
.treue{margin-top:16px;padding-top:16px;border-top:2px solid var(--tinte);display:grid;gap:8px}
.tr-titel{font-size:.9375rem;font-weight:700}
.tr-achse{position:relative;height:28px}
.tr-achse::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:var(--tinte)}
.tr-achse::after{content:"";position:absolute;left:0;right:0;top:50%;height:7px;background:repeating-linear-gradient(90deg,var(--tinte) 0 1.5px,transparent 1.5px 10%)}
.tr-mitte{position:absolute;left:50%;top:0;bottom:0;width:3px;margin-left:-1.5px;background:var(--tinte)}
.dot{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;border:2px solid var(--tinte);background:var(--gruen);left:calc((var(--x0) * (1 - var(--q)) + var(--x1) * var(--q)) * 1%);transform:translate(-50%,calc(-50% + var(--dy,0) * (1 - var(--q)) * 1px));opacity:clamp(0,calc(var(--q) * 10),1);z-index:2}
.d1{--x0:27;--x1:39.5}
.d2{--x0:44;--x1:50}
.d3{--x0:58;--x1:78;background:var(--rot)}
.tr-skala{display:flex;justify-content:space-between;font:500 .75rem/1.2 var(--mono)}
.schritt{padding:28px 0;border-top:2px solid var(--tinte);display:grid;gap:16px;align-content:start}
.schritt h3{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.2rem);line-height:1.1;letter-spacing:-.035em}
.schritt .marke{justify-self:start;transition:box-shadow .3s}
.schritt p:not(.marke){max-width:52ch}
.schritt.is-aktiv .marke{box-shadow:3px 3px 0 var(--tinte)}
@media (min-width:960px){
  .zeit-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
  .buehne{grid-column:2;grid-row:1;position:sticky;top:max(24px,calc(50svh - 300px))}
  .schritte{grid-column:1;grid-row:1}
  .is-motion .schritt{min-height:82svh;align-content:center;border-top:0;border-left:3px solid rgba(43,29,14,.22);padding:0 0 0 28px;margin-bottom:6svh;transition:border-color .4s}
  .is-motion .schritt.is-aktiv{border-left-color:var(--tinte)}
  .is-motion .schritte{padding-block:4svh 10svh}
}
@media (max-width:959px){
  .lane .nm,.lane .st{font-size:.6875rem}
  .lane{padding-block:6px}
  .l4{padding-bottom:54px}
  .tl-legende{display:grid;grid-template-columns:1fr 1fr}
  .tl-feld{margin-top:36px}
}
@media (max-width:959px) and (min-height:760px){
  .is-motion .buehne{position:sticky;top:0;z-index:3;padding:10px 0 14px;background:var(--ocker);box-shadow:0 16px 16px -6px var(--ocker)}
  .is-motion .schritt{min-height:62svh;border-top:0;padding-top:12px}
}

/* Vorjahr */
.chart-lg{display:inline-flex;align-items:center;gap:8px;font:500 .75rem/1.2 var(--mono);color:var(--tinte-3)}
.lg-bar{display:inline-block;width:10px;height:12px;background:var(--tinte)}
.lg-spur{display:inline-block;width:12px;height:12px;border:1.5px dashed var(--braun);border-bottom:0;margin-left:8px}
.chart-feld{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(3px,.8vw,10px);height:clamp(190px,24vw,280px);align-items:end;padding-top:8px;background:repeating-linear-gradient(0deg,rgba(43,29,14,.12) 0 1px,transparent 1px 25%);border-bottom:2px solid var(--tinte)}
.m{position:relative;height:100%}
.m i{position:absolute;bottom:0}
.vj{left:0;right:0;height:calc(var(--v) * 1%);border:1.5px dashed var(--braun);border-bottom:0;background:rgba(217,165,31,.2);clip-path:inset(calc((1 - var(--gv,1)) * 100%) -2px 0 -2px)}
.lj{left:24%;right:24%;height:calc(var(--h) * 1%);background:var(--tinte);clip-path:inset(calc((1 - var(--g,1)) * 100%) 0 0 0)}
.m:nth-child(1){--v:46;--h:50}.m:nth-child(2){--v:43;--h:36}.m:nth-child(3){--v:53;--h:66}.m:nth-child(4){--v:62;--h:76}
.m:nth-child(5){--v:72;--h:94}.m:nth-child(6){--v:79;--h:74}.m:nth-child(7){--v:60;--h:55}.m:nth-child(8){--v:58;--h:70}
.m:nth-child(9){--v:68;--h:84}.m:nth-child(10){--v:66;--h:60}.m:nth-child(11){--v:59;--h:73}.m:nth-child(12){--v:74;--h:89}
.monate{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(3px,.8vw,10px);margin-top:10px;text-align:center;font:500 .75rem/1 var(--mono);color:var(--tinte-3)}
@media (max-width:599px){.monate em{font-size:0}.monate em::before{content:attr(data-k);font-size:.75rem}}

/* Fälligkeit: Eingangskorb und Lineal */
.sort-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;margin-bottom:26px}
.sort-titel{font-size:1.0625rem;font-weight:700}
.sort-sub{font:500 .75rem/1.2 var(--mono);color:var(--tinte-2)}
.eingang{position:relative;height:96px;border:2.5px solid var(--tinte);border-top:0;border-bottom-width:6px;border-radius:0 0 6px 6px;background:rgba(43,29,14,.08)}
.eingang::before{content:"";position:absolute;left:-8px;right:-8px;top:0;height:2.5px;background:var(--tinte)}
.eingang em{position:absolute;left:0;top:-24px;font:500 .75rem/1.2 var(--mono)}
.leiste{position:relative;height:200px;margin-top:22px}
.r{--k:1;position:absolute;width:46px;height:60px;left:calc(23px + (100% - 46px) * var(--p) / 100);top:var(--top);border-radius:2px;background:var(--creme) linear-gradient(180deg,transparent 30px,rgba(43,29,14,.22) 30px 31.5px,transparent 31.5px 38px,rgba(43,29,14,.22) 38px 39.5px,transparent 39.5px 46px,rgba(43,29,14,.22) 46px 47.5px,transparent 47.5px) 50% 0/60% 100% no-repeat;border:1.5px solid var(--tinte);border-top:5px solid var(--band);box-shadow:0 8px 14px -8px rgba(43,29,14,.6);transform:translate(calc(-50% + var(--dx,0) * (1 - var(--k)) * 1px),calc(var(--dy,0) * (1 - var(--k)) * 1px)) rotate(calc(var(--rot,0) * (1 - var(--k)) * 1deg));z-index:calc(2 + var(--z,0))}
.r b{position:absolute;left:0;right:0;top:6px;text-align:center;font:500 .875rem/1 var(--mono);color:var(--tinte)}
.r::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;margin-left:-.75px;height:var(--pin);background:repeating-linear-gradient(180deg,var(--tinte) 0 3px,transparent 3px 6px);opacity:var(--k)}
.f1{--p:4;--top:10px;--pin:113px;--band:var(--tinte)}
.f2{--p:21;--top:94px;--pin:29px;--band:var(--tinte)}
.f3{--p:39;--top:10px;--pin:113px;--band:var(--braun)}
.f4{--p:58;--top:94px;--pin:29px;--band:var(--braun)}
.f5{--p:77;--top:10px;--pin:113px;--band:#c7a45e}
.f6{--p:96;--top:94px;--pin:29px;--band:#c7a45e}
.achse{position:absolute;left:0;right:0;bottom:12px;height:4px;background:var(--tinte)}
.achse::after{content:"";position:absolute;left:0;right:0;top:4px;height:8px;background:repeating-linear-gradient(90deg,var(--tinte) 0 2px,transparent 2px 5%)}
.achse-skala{display:flex;justify-content:space-between;margin-top:2px;font:500 .75rem/1.2 var(--mono)}
.achse-skala .jetzt{font-weight:500;text-decoration:underline;text-underline-offset:3px}

/* KI: Auswertung auf Endlospapier, Einschätzung als angehefteter Zettel */
.kpis{display:grid}
.kpi{--c:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:12px 0;border-bottom:1.5px dashed rgba(43,29,14,.3)}
.kl{font-size:.9375rem;font-weight:600}
.kv{display:flex;align-items:flex-end;gap:5px;height:34px;opacity:max(.15,var(--c))}
.k1 .kv i{width:12px}
.k1 .kv i:first-child{height:62%;border:1.5px dashed var(--braun);border-bottom:0}
.k1 .kv i:last-child{height:90%;background:var(--tinte)}
.k2 .kv{align-items:center}
.k2 .kv i{width:11px;height:11px;border-radius:50%;border:2px solid var(--tinte)}
.k2 .kv i:nth-child(4){background:var(--rot);border-color:var(--rot)}
.k3 .kv svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:rgba(43,29,14,.15);stroke-width:6}
.ring{fill:none;stroke:var(--gruen);stroke-width:6;stroke-dasharray:calc(var(--c) * 76) 100}
.rech{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}
.rech i{height:3px;background:rgba(43,29,14,.14);position:relative;overflow:hidden}
.rech i::after{content:"";position:absolute;inset:0;background:var(--tinte);transform-origin:0 50%;transform:scaleX(var(--c))}
.rech em{font:500 .75rem/1 var(--mono);color:var(--tinte-3);transition:color .3s}
.kpi.is-done .rech em{color:var(--gruen)}
.kpi.is-done .rech i::after{background:var(--gruen)}
.warn,.einsch{--w:1;opacity:var(--w)}
.warn{--w:var(--w1,1);display:flex;align-items:center;gap:14px;margin-top:18px;padding:12px 14px 12px 26px;border:1.5px solid var(--rot);border-radius:2px;color:var(--rot);font-weight:700;font-size:1.0625rem;background:var(--creme);position:relative;transform:translateY(calc((1 - var(--w)) * 18px))}
.warn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--schraffur);border-right:1.5px solid var(--rot)}
.warn b{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--rot);color:var(--creme);font-size:1rem}
.einsch{--w:var(--w2,1);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;margin:22px 4px 2px auto;max-width:300px;padding:16px 16px 14px;background:var(--notiz);border-radius:1px;box-shadow:0 12px 18px -12px rgba(43,29,14,.75);transform-origin:20% 0;transform:translateY(calc((1 - var(--w)) * -26px)) rotate(calc(1.6deg - (1 - var(--w)) * 9deg))}
.einsch::before{content:"";position:absolute;left:22px;top:-12px;width:12px;height:30px;border:2px solid var(--tinte-2);border-radius:6px;background:transparent}
.spark{grid-row:1 / 3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--tinte);transform:rotate(calc((1 - var(--w)) * -120deg))}
.spark path{fill:var(--tinte)}
.ek{font:500 .75rem/1.2 var(--mono);color:var(--tinte-2)}
.einsch strong{font-size:1.125rem;letter-spacing:-.01em}
@media (min-width:600px){
  .kpi{grid-template-columns:minmax(0,1fr) auto minmax(90px,150px) auto;gap:14px}
  .rech{display:contents}
}

/* Funktionen und Ansicht der Demo */
.ub-text{display:grid;gap:18px;align-content:start}
.ub-text .eyebrow{justify-self:start}
.liste{list-style:none;margin:14px 0 0;padding:4px 22px;background:var(--creme);border-radius:2px;box-shadow:var(--papier)}
.liste li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;font-size:clamp(1.0625rem,1rem + .3vw,1.2rem);font-weight:600;letter-spacing:-.01em}
.liste li+li{border-top:1.5px dashed rgba(43,29,14,.3)}
.gl{flex:none;position:relative;width:28px;height:28px}
.gl::after{content:"";position:absolute;inset:0;margin:auto}
.gl-bar::after{width:18px;height:18px;background:linear-gradient(90deg,var(--tinte) 0 5px,transparent 5px 13px,var(--tinte) 13px);clip-path:polygon(0 35%,28% 35%,28% 100%,0 100%,0 35%,72% 0,100% 0,100% 100%,72% 100%)}
.gl-late::after{width:22px;height:22px;background:var(--schraffur);border:1.5px solid var(--rot)}
.gl-in{border-radius:50%;border:2px solid var(--gruen);box-shadow:inset 0 0 0 2px var(--creme),inset 0 0 0 3.5px var(--gruen);transform:rotate(-12deg)}
.gl-in::after{width:6px;height:11px;border:solid var(--gruen);border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg)}
.gl-due::after{width:14px;height:14px;background:var(--tinte);transform:rotate(45deg)}
.gl-ki::after{width:20px;height:20px;background:var(--tinte);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.motiv{margin:0;justify-self:center;width:min(100%,340px)}
.motiv-rahmen{display:block;padding:12px 12px 40px;background:var(--creme);box-shadow:var(--papier);transform:rotate(-1.4deg)}
.motiv-rahmen img{width:100%;height:auto}
.motiv figcaption{margin-top:20px;font-size:1rem;line-height:1.5}
.motiv figcaption a{display:inline-block;margin-top:4px;font-weight:600;text-underline-offset:3px}
@media (min-width:960px){.motiv{width:min(100%,360px)}}

/* Im Detail: Kennzahlen als Erklärzettel auf dunklem Brett */
.kennzahlen{background:var(--tinte);color:var(--creme)}
.kennzahlen .sec-kopf{max-width:820px}
.kennzahlen .sec-kopf h2{color:var(--creme)}
.kennzahlen .sec-kopf p:not(.marke){color:#ecdcb4}
.kz-grid{display:grid;gap:clamp(36px,4vw,56px) clamp(24px,3vw,44px);margin-top:clamp(44px,5vw,72px)}
@media (min-width:900px){
  .kz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  @supports (grid-template-rows:subgrid){.kz{grid-row:span 4;grid-template-rows:subgrid;row-gap:14px}.kz-szene{align-self:center}.kz h3{align-self:end}}
}
.kz{position:relative;display:grid;align-content:start;gap:14px;padding:28px clamp(18px,2.6vw,34px) 32px;background:var(--creme);color:var(--tinte);border-radius:2px;box-shadow:0 26px 40px -24px #000}
.kz::before{content:"";position:absolute;left:0;right:0;top:-6px;height:12px;background:radial-gradient(circle at 7px 6px,var(--tinte) 3.4px,transparent 3.9px) 0 0/14px 12px repeat-x}
.kz::after{content:"";position:absolute;right:26px;top:-14px;width:12px;height:32px;border:2px solid #c9b48a;border-radius:6px}
.kz-kopf{display:flex;justify-content:space-between;gap:4px 12px;padding-bottom:10px;border-bottom:2px solid var(--tinte);font:500 .75rem/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase}
@media (max-width:459px){.kz-kopf span+span{display:none}}
.kz h3{margin-top:4px;font-size:clamp(1.35rem,1.05rem + .9vw,1.8rem);line-height:1.12;letter-spacing:-.03em}
.kz p{max-width:62ch}
.kz a{font-weight:600;text-underline-offset:3px}
.kz-szene{position:relative;margin:10px 0 6px}
.kz-skala{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font:500 .75rem/1.2 var(--mono);color:var(--tinte-3)}
/* DPO: Rechnungen laufen bis zur Zahlung, darüber der Durchschnitt */
.dp-feld{--a:1;position:relative;display:grid;gap:12px;padding:30px 0 12px;border-bottom:2px solid var(--tinte)}
.dp-feld::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px;background:repeating-linear-gradient(90deg,var(--tinte) 0 1.5px,transparent 1.5px 10%)}
.dp-zeile{--k:1;position:relative;display:block;height:28px}
.dp-zeile:nth-child(1){--e:44}.dp-zeile:nth-child(2){--e:80}.dp-zeile:nth-child(3){--e:62}
.dp-zeile::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(43,29,14,.35) 0 5px,transparent 5px 10px)}
.dp-spur{position:absolute;left:0;top:50%;height:5px;margin-top:-2.5px;width:calc(var(--e) * var(--k) * 1%);background:var(--tinte);border-radius:0 3px 3px 0}
.dp-r{position:absolute;top:0;left:calc(var(--e) * var(--k) * 1%);width:22px;height:28px;margin-left:-11px;background:var(--creme) linear-gradient(180deg,transparent 10px,rgba(43,29,14,.3) 10px 11.5px,transparent 11.5px 15px,rgba(43,29,14,.3) 15px 16.5px,transparent 16.5px) 50% 0/60% 100% no-repeat;border:1.5px solid var(--tinte);border-top:4px solid var(--braun);border-radius:2px;box-shadow:0 5px 8px -5px rgba(43,29,14,.7);z-index:2}
.dp-ok{position:absolute;top:50%;left:calc(var(--e) * 1%);width:22px;height:22px;margin:-11px 0 0 16px;border-radius:50%;border:2px solid var(--gruen);transform:rotate(-12deg);transition:transform .3s cubic-bezier(.5,0,.5,1.4),opacity .2s}
.dp-ok::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid var(--gruen);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.is-motion .dp-zeile:not(.is-da) .dp-ok{opacity:0;transform:rotate(-12deg) scale(1.8)}
.dp-avg{position:absolute;top:2px;bottom:-2px;left:62%;width:0;border-left:2px dashed var(--tinte);opacity:var(--a);z-index:3}
.dp-avg em{position:absolute;top:0;left:-1px;transform:translateX(-50%);padding:3px 8px;background:var(--tinte);color:var(--creme);font:500 .75rem/1 var(--mono);border-radius:2px;white-space:nowrap}
/* Liefertreue: Stempel je Eingang, Anteil wächst mit */
.lt-zettel{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,1.4vw,14px);padding-top:6px}
.lt{--k:1;position:relative;display:block;height:clamp(54px,6vw,66px);background:var(--creme) linear-gradient(180deg,transparent 12px,rgba(43,29,14,.22) 12px 13.5px,transparent 13.5px 19px,rgba(43,29,14,.22) 19px 20.5px,transparent 20.5px) 50% 0/62% 100% no-repeat;border:1.5px solid var(--tinte);border-top:4px solid var(--tinte);border-radius:2px;box-shadow:0 6px 10px -6px rgba(43,29,14,.6)}
.lt-st{position:absolute;left:50%;bottom:6px;width:24px;height:24px;margin-left:-12px;border-radius:50%;border:2px solid var(--gruen);background:var(--creme);box-shadow:inset 0 0 0 1.5px var(--creme),inset 0 0 0 3px var(--gruen);transform:rotate(-12deg);transition:transform .3s cubic-bezier(.5,0,.5,1.4),opacity .2s}
.lt-st::after{content:"";position:absolute;left:7.5px;top:3.5px;width:5px;height:10px;border:solid var(--gruen);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.lt-spaet .lt-st{left:4px;right:4px;width:auto;margin:0;height:12px;bottom:10px;border-radius:1px;border:1.5px solid var(--rot);background:var(--schraffur);box-shadow:none;transform:rotate(-8deg)}
.lt-spaet .lt-st::after{display:none}
.is-motion .lt:not(.is-da) .lt-st{opacity:0;transform:rotate(-12deg) scale(1.8)}
.lt-anteil{display:flex;height:18px;margin-top:18px;border:1.5px solid var(--tinte);border-radius:2px;background:rgba(43,29,14,.06);overflow:hidden}
.lt-anteil i{flex:1;transform-origin:0 50%;transform:scaleX(var(--k,1))}
.ag{background:var(--gruen)}
.ag+.ag{box-shadow:inset 1.5px 0 0 var(--creme)}
.lt-anteil .ar{background:var(--schraffur);transform-origin:100% 50%;box-shadow:inset 1.5px 0 0 var(--rot)}
/* Median: Lieferzeiten der Länge nach ordnen, ein Ausreißer zieht nur den Durchschnitt */
.md-feld{--s:1;--mm:1;--am:1;--o:1;position:relative;display:grid;gap:9px;padding:30px 0 32px;border-bottom:2px solid var(--tinte)}
.md-feld::after{content:"";position:absolute;left:0;right:0;top:100%;height:7px;background:repeating-linear-gradient(90deg,var(--tinte) 0 1.5px,transparent 1.5px 10%)}
.md-zeile{position:relative;display:block;height:14px;transform:translateY(calc((var(--i) - var(--j)) * 23px * (1 - var(--s))))}
.md-zeile:nth-child(1){--l:22;--i:3;--j:0}.md-zeile:nth-child(2){--l:28;--i:0;--j:1}.md-zeile:nth-child(3){--l:34;--i:4;--j:2}.md-zeile:nth-child(4){--l:40;--i:1;--j:3}.md-zeile:nth-child(5){--l:46;--i:2;--j:4}
.md-zeile i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--l) * 1%);background:var(--creme) linear-gradient(90deg,transparent 6px,rgba(43,29,14,.35) 6px 7.5px,transparent 7.5px);border:1.5px solid var(--tinte);border-radius:2px;box-shadow:0 2px 0 rgba(43,29,14,.25)}
.md-mitte i{background:var(--tinte)}
.md-aus b{position:absolute;top:0;bottom:0;left:46%;width:54%;background:var(--schraffur);border:1.5px solid var(--rot);border-left:0;border-radius:0 2px 2px 0;clip-path:inset(-2px calc((1 - var(--o)) * 100%) -2px 0)}
.md-med,.md-avg{position:absolute;width:0;z-index:2}
.md-med{top:4px;bottom:24px;left:34%;border-left:2px solid var(--tinte);opacity:var(--mm)}
.md-avg{top:24px;bottom:4px;left:calc((34 + 10.8 * var(--o)) * 1%);border-left:2px dashed var(--rot);opacity:var(--am)}
.md-med em,.md-avg em{position:absolute;left:-1px;transform:translateX(-50%);padding:3px 8px;border-radius:2px;font:500 .75rem/1 var(--mono);white-space:nowrap}
.md-med em{top:-2px;background:var(--tinte);color:var(--creme)}
.md-avg em{bottom:-4px;background:var(--creme);color:var(--rot);border:1.5px solid var(--rot)}
/* KI: Empfehlungen ordnen sich nach Priorität */
.sz-prio{--s:1;--n:1;display:grid;gap:8px;padding:4px 0 2px}
.pr{--w:1;position:relative;display:flex;align-items:center;gap:12px;height:44px;padding:0 38px 0 8px;background:var(--notiz);border-radius:1px;box-shadow:0 8px 12px -8px rgba(43,29,14,.75);transform:translateY(calc((var(--i) - var(--j)) * 52px * (1 - var(--s)))) translateX(calc((1 - var(--w)) * -14px + var(--lift,0) * 22px * sin(calc(var(--s) * 180deg))));opacity:var(--w)}
.pr:nth-child(1){--i:2;--j:0;--lift:1;z-index:3}.pr:nth-child(2){--i:0;--j:1;z-index:2}.pr:nth-child(3){--i:1;--j:2} /* --i: Lage vor dem Ordnen, --j: Rang */
.pr b{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--tinte);font:500 .875rem/1 var(--mono);opacity:var(--n);transform:scale(calc(1.7 - .7 * var(--n))) rotate(calc((1 - var(--n)) * -40deg))}
.pr:nth-child(1) b{background:var(--tinte);color:var(--notiz)}
.pr em{min-width:0;font-size:.9375rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:14px;margin-top:-7px;background:var(--tinte);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:.8}
@media (max-width:399px){.pr{padding-right:10px}.pr::after{display:none}.pr em{font-size:.875rem}}
.kennzahlen :focus-visible{outline-color:var(--ocker)}
.kz :focus-visible{outline-color:var(--tinte)}

/* Zusammenspiel: Verteiler auf dem Ocker */
@media (min-width:960px){.zusammen .split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.zs-text{display:grid;gap:30px}
.zs-liste{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.zs-link{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"gl code" "gl name" "gl satz";column-gap:16px;row-gap:2px;padding:16px 50px 18px 16px;background:var(--creme);border-radius:2px;box-shadow:var(--papier);text-decoration:none;transition:transform .2s var(--ease),box-shadow .2s}
.zs-link::after{content:"→";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:700;transition:transform .2s var(--ease)}
.zs-link:hover{transform:translateY(-2px)}
.zs-link:hover::after{transform:translate(5px,-50%)}
.zs-gl{grid-area:gl;width:42px;height:42px;padding:7px;border:1.5px solid var(--tinte);border-radius:50%;color:var(--tinte)}
.zs-code{grid-area:code;font:500 .8125rem/1.3 var(--mono);color:var(--tinte-3)}
.zs-link strong{grid-area:name;font-size:clamp(1.125rem,1.05rem + .3vw,1.3rem);letter-spacing:-.02em;line-height:1.25}
.zs-satz{grid-area:satz;margin-top:4px;font-size:1rem;line-height:1.5}
.netz{justify-self:center;width:min(100%,480px)}
.netz-kopf{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:14px;border-bottom:3px double var(--tinte);font:500 .75rem/1.2 var(--mono)}
.netz-svg{width:100%;height:auto;overflow:visible}
.nz-spur{fill:none;stroke:var(--tinte);stroke-width:1.5;stroke-dasharray:5 5;opacity:.5}
.nz-zug{fill:none;stroke:var(--tinte);stroke-width:3;stroke-linecap:round;stroke-dasharray:100 100}
.nz-ziel{fill:var(--tinte);stroke:var(--ocker);stroke-width:2}
.nz-knoten{color:var(--tinte)}
.nz-knoten rect{fill:var(--creme);stroke:var(--tinte);stroke-width:1.5;filter:drop-shadow(0 3px 0 rgba(43,29,14,.3))}
.nz-knoten text,.nz-lab{font:500 13px var(--mono);fill:var(--tinte)}
.nz-mitte{color:var(--creme)}
.nz-mitte rect{fill:var(--tinte);stroke-width:2}
.nz-mitte text{fill:var(--creme)}
.nz-lab{font-size:11.5px;paint-order:stroke;stroke:var(--ocker);stroke-width:5px;stroke-linejoin:round}
.nz-chip{opacity:0;fill:var(--creme);stroke:var(--tinte);stroke-width:3}
/* Liste und Verteiler zeigen auf dasselbe: Zeiger oder Fokus auf einem Eintrag hebt Knoten und Verbindung hervor */
.nz-knoten rect,.nz-zug{transition:fill .2s,stroke-width .2s}
.zusammen:has(.zs-liste li:nth-child(1) a:is(:hover,:focus-visible)) .nz-knoten:nth-of-type(1) rect,
.zusammen:has(.zs-liste li:nth-child(2) a:is(:hover,:focus-visible)) .nz-knoten:nth-of-type(2) rect,
.zusammen:has(.zs-liste li:nth-child(3) a:is(:hover,:focus-visible)) .nz-knoten:nth-of-type(3) rect{fill:var(--notiz);stroke-width:2.5}
.zusammen:has(.zs-liste li:nth-child(1) a:is(:hover,:focus-visible)) .nz-zug:nth-of-type(4),
.zusammen:has(.zs-liste li:nth-child(2) a:is(:hover,:focus-visible)) .nz-zug:nth-of-type(5),
.zusammen:has(.zs-liste li:nth-child(3) a:is(:hover,:focus-visible)) .nz-zug:nth-of-type(6){stroke-width:5}

/* Technik & Rolle: Stammblatt mit Betriebsstempel */
.stamm{justify-self:center;width:min(100%,620px);padding:26px clamp(18px,3vw,34px) 96px;transform:none}
.stamm-liste{margin:14px 0 0;display:grid}
.stamm-liste div{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);gap:2px 16px;padding:12px 0;border-bottom:1.5px dashed rgba(43,29,14,.3)}
.stamm-liste dt{padding-top:3px;font:500 .875rem/1.4 var(--mono);color:var(--tinte-3)}
.stamm-liste dd{margin:0;font-weight:500;line-height:1.5}
@media (max-width:479px){.stamm-liste div{grid-template-columns:1fr}}
.stempel{position:absolute;right:clamp(16px,3vw,32px);bottom:22px;padding:9px 16px 8px;border:3px double var(--gruen);border-radius:4px;color:var(--gruen);font:500 1rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;transform:rotate(-8deg);transition:transform .45s cubic-bezier(.5,0,.5,1.5),opacity .2s}
.stempel::before{content:"";position:absolute;inset:3px;border:1.5px solid rgba(31,106,44,.35);border-radius:2px}
.is-motion .stamm:not(.is-gestempelt) .stempel{opacity:0;transform:rotate(-26deg) scale(2)}
@media (min-width:960px){.stamm{justify-self:end}}
.datenweg{--k:1;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px;padding-top:34px;max-width:470px}
.dw-bahn{position:absolute;left:16.66%;right:16.66%;top:9px;height:2px;background:repeating-linear-gradient(90deg,var(--tinte) 0 6px,transparent 6px 12px)}
.dw-fill{position:absolute;left:0;top:-2px;height:6px;width:calc(var(--k) * 100%);background:var(--tinte);border-radius:3px}
.dw-chip{position:absolute;top:50%;left:calc(var(--k) * 100%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--creme);border:4px solid var(--tinte);opacity:calc((1 - var(--k)) * 8)}
.dw-pt{position:relative;display:grid;justify-items:center;gap:4px;text-align:center}
.dw-pt::before{content:"";position:absolute;top:-34px;left:50%;width:20px;height:20px;margin-left:-10px;background:var(--creme);border:2px solid var(--tinte);border-radius:2px;transform:rotate(45deg) scale(.8)}
.dw-pt:nth-child(2)::before{border-radius:50%;transform:none;border-width:3.5px;width:18px;height:18px;margin-left:-9px;top:-33px}
.dw-pt:nth-child(4)::before{width:28px;height:28px;margin-left:-14px;top:-38px;border-radius:50%;border-color:var(--gruen);box-shadow:inset 0 0 0 2px var(--creme),inset 0 0 0 3.5px var(--gruen);transform:rotate(-12deg)}
.dw-pt:nth-child(4)::after{content:"";position:absolute;top:-33px;left:50%;width:6px;height:11px;margin-left:-4px;border:solid var(--gruen);border-width:0 3px 3px 0;transform:rotate(45deg)}
.dw-pt:nth-child(4)::before,.dw-pt:nth-child(4)::after{opacity:calc((var(--k) - .94) * 17)}
.dw-pt b{font-size:1rem}
.dw-pt em{font:500 .75rem/1.3 var(--mono);color:var(--tinte-2)}

/* Weitere Projekte: Reihenfolge als Weg, bis hier gezogen, danach offen */
.weiter{padding-block:clamp(64px,8vw,120px);border-top:2px solid var(--tinte)}
.wp-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.wp-kopf h2{font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1.05;letter-spacing:-.04em}
.wp-alle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:2px solid var(--tinte);border-radius:4px;background:var(--creme);font-weight:700;text-decoration:none;box-shadow:0 3px 0 var(--tinte);transition:transform .15s,box-shadow .15s}
.wp-alle:hover{transform:translateY(2px);box-shadow:0 1px 0 var(--tinte)}
.wp-reihe{--f:50;position:relative;list-style:none;margin:36px 0 0;padding:0 0 0 38px;display:grid;gap:16px}
.wp-reihe::before,.wp-reihe::after{content:"";position:absolute;left:12px;top:0;width:3px;margin-left:-1.5px}
.wp-reihe::before{bottom:0;background:repeating-linear-gradient(180deg,var(--tinte) 0 6px,transparent 6px 12px)}
.wp-reihe::after{height:calc(var(--f) * 1%);background:var(--tinte);transition:height .45s var(--ease),width .45s var(--ease)}
.wp-reihe:has(.wp-nach a:hover,.wp-nach a:focus-visible)::after{height:100%}
.wp-reihe li{position:relative}
.wp-reihe li::before{content:"";position:absolute;left:-33px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--creme);border:3px solid var(--tinte);z-index:1}
.wp-reihe .wp-hier::before{width:22px;height:22px;margin-top:-11px;left:-36px;border-width:5px}
.wp-link,.wp-hier{display:grid;gap:4px;padding:18px 20px;border-radius:2px}
.wp-link{background:var(--creme);box-shadow:var(--papier);text-decoration:none;transition:transform .2s var(--ease)}
.wp-link:hover{transform:translateY(-3px)}
.wp-hier{border:2px dashed var(--tinte)}
.wp-richtung{font:500 .8125rem/1.3 var(--mono);color:var(--tinte-2)}
.wp-code{font:500 .8125rem/1.2 var(--mono)}
.wp-reihe strong{font-size:clamp(1.125rem,1rem + .5vw,1.4rem);letter-spacing:-.02em;line-height:1.2}
@media (min-width:720px){
  .wp-reihe{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;padding:46px 0 0}
  .wp-reihe::before,.wp-reihe::after{left:16.66%;top:16px;height:3px;width:auto;margin:-1.5px 0 0}
  .wp-reihe::before{right:16.66%;bottom:auto;background:repeating-linear-gradient(90deg,var(--tinte) 0 6px,transparent 6px 12px)}
  .wp-reihe::after{width:calc((var(--f) - 16.66) * 1%);height:3px}
  .wp-reihe:has(.wp-nach a:hover,.wp-nach a:focus-visible)::after{width:66.68%;height:3px}
  .wp-reihe li::before{left:50%;top:-30px;margin:-8px 0 0 -8px}
  .wp-reihe .wp-hier::before{left:50%;margin:-11px 0 0 -11px}
  .wp-hier{text-align:center;justify-items:center}
  .wp-nach .wp-link{text-align:right;justify-items:end}
}

/* Fuß in Tinte */
.fuss{padding-block:52px 60px;background:var(--tinte);color:var(--creme)}
.fuss-in{display:grid;gap:24px}
.fuss-hinweis{max-width:68ch;font-size:1rem;color:#e9d8b0}
.fuss-nav{display:flex;flex-wrap:wrap;gap:12px}
.fuss-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;border:1.5px solid rgba(247,238,214,.5);color:var(--creme);text-decoration:none;font-weight:600;font-size:1rem}
.fuss-nav a:hover{border-color:var(--ocker);color:var(--ocker)}
.fuss :focus-visible{outline-color:var(--ocker)}
.fuss-name{font-size:.78rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--ocker)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Druck ----------
   Papier statt Ockerbrett: die Seite bleibt weiß, Zettel, Balken, Stempel und Schraffuren werden aber mitgedruckt
   (es sind Hintergründe, die die Aussage tragen). Dunkle Flächen (Kennzahlen-Brett, Fuß) entfallen, ihre helle Schrift
   wird Tinte. Zettel bekommen statt des tiefen Schattens einen feinen Rand nach innen (ein äußerer stünde am Seitenende
   der Vorseite), Heftstreifen und Klammer liegen innen. Die Bühne steht nicht mehr, Bewegungen setzt das Skript beim
   Drucken auf den Endzustand aus dem HTML. */
@media print{
  :root{--papier:inset 0 0 0 1.5px rgba(43,29,14,.3)}
  html{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  html,body{background:#fff}
  body{zoom:.8}
  .zurueck,.skip,.motiv figcaption a{display:none}
  .code{display:block;position:static;transform:none;margin-left:auto}
  .lage,.zeit,.vorjahr,.faellig,.ki,.ueberblick,.kennzahlen,.zusammen,.technik,.weiter{padding-block:44px}
  .hero-in{min-height:0;padding-block:32px 48px}
  .buehne{position:static}
  .lane .nm{background:#fff}
  .nz-lab{stroke:#fff}
  .kennzahlen,.fuss{background:none;color:var(--tinte)}
  .kennzahlen .sec-kopf h2{color:var(--tinte)}
  .kennzahlen .sec-kopf p:not(.marke),.fuss-hinweis{color:var(--tinte-2)}
  .kz{box-shadow:var(--papier)}
  .kz::before,.kz::after{top:0}
  .fuss{padding-block:28px 0;border-top:2px solid var(--tinte)}
  .fuss-nav a{color:var(--tinte);border-color:var(--tinte)}
  .fuss-name{color:var(--tinte)}
  h1,h2,h3,.sec-kopf .marke,.eyebrow,.wp-kopf{break-after:avoid}
  h2,h3,.stapel,.blatt,.tl,.schritt,.zettel,.liste,.motiv,.kz,.zs-link,.netz,.stamm,.datenweg,.weiter{break-inside:avoid}
}