/* C-07 Versand & Vertrieb – eigene Projektseite.
   Welt: Wirtschaftsteil einer Zeitung. Lachsfarbenes Papier, Druckschwarz, ein Blau;
   Schlagzeilen in Instrument Serif, Text in Inter, Achsen und Kennungen in IBM Plex Mono;
   Spaltensatz mit Haarlinien. Leitmotiv: die Verkaufskurve als Zeitungsgrafik,
   bezahlte, noch nicht verschickte Aufträge als kleine Kästen, die zurückbleiben. */

/* ---------- 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:#15110e}
  ::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:"Instrument Serif";src:url('../fonts/instrument-serif-normal-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('../fonts/instrument-serif-normal-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:"Instrument Serif";src:url('../fonts/instrument-serif-italic-400-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url('../fonts/instrument-serif-italic-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@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-02FF}
@font-face{font-family:"IBM Plex Mono";src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}
/* Ersatzschriften mit den Maßen der Webschriften (Breite per size-adjust, Höhe per Overrides):
   bis die Webschriften geladen sind, fallen die Zeilen schon gleich – kein Sprung im Aufmacher (CLS) */
@font-face{font-family:"Instrument Serif Ersatz";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("Tinos"),local("Times");font-weight:400;font-style:normal;size-adjust:83.35%;ascent-override:118.8%;descent-override:37.2%;line-gap-override:0%}
@font-face{font-family:"Instrument Serif Ersatz";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Liberation Serif Italic"),local("Tinos Italic"),local("Times Italic");font-weight:400;font-style:italic;size-adjust:88.49%;ascent-override:111.9%;descent-override:35%;line-gap-override:0%}
@font-face{font-family:"Inter Ersatz";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");font-weight:400 500;size-adjust:106.13%;ascent-override:91.4%;descent-override:22.6%;line-gap-override:0%}
@font-face{font-family:"Inter Ersatz";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:600 700;size-adjust:101.37%;ascent-override:95.7%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:"Plex Ersatz";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono"),local("Cousine");font-weight:400 500;ascent-override:103%;descent-override:28%;line-gap-override:0%}

:root{
  --paper:#f3d6c4;--paper-2:#ecc8b2;--paper-3:#f8e6da;
  --ink:#15110e;--ink-2:#4f4038;
  --hair-soft:rgba(21,17,14,.28);
  --blue:#1f4f8f;
  --serif:"Instrument Serif","Instrument Serif Ersatz",Georgia,"Times New Roman",serif;
  --sans:Inter,"Inter Ersatz",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono","Plex Ersatz",ui-monospace,Consolas,monospace;
  --pad:clamp(16px,4vw,56px);
  --max:1280px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}

/* ---------- Kopfleiste: links „← Profil“, rechts der Name als Weg zur Startseite (keine Demo)
   (eine Grammatik für alle Projektseiten, 31.10.2026: volle Breite, gleicher Seitenabstand, jedes Ziel ≥ 44 px) ---------- */
.skip{position:absolute;left:var(--pad);top:-80px;z-index:30;padding:.6em 1em;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);font:600 1rem/1.3 var(--sans);text-decoration:none}
.skip:focus{top:12px}
.top{padding:14px clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.back{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:.45em .95em;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font:600 1rem/1.3 var(--sans);transition:background .2s,color .2s}
.back:hover{background:var(--ink);color:var(--paper)}
.who{display:inline-flex;align-items:center;min-height:44px;font:500 .8125rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none;color:var(--ink)}
.who:hover{color:var(--blue);text-decoration:underline}

/* ---------- Titelkopf und Aufmacher ---------- */
.front{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(48px,8vh,88px)}
.flag{border-top:1px solid var(--ink);padding-top:clamp(8px,1.4vw,16px);text-align:center}
.flag-name{font:400 clamp(2.7rem,7.6vw,6.6rem)/.95 var(--serif);letter-spacing:-.012em}
.flag-line{position:relative;display:flex;justify-content:space-between;gap:12px;margin-top:clamp(12px,1.6vw,18px);padding:7px 0 6px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font:500 .8125rem/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.flag-line::before{content:"";position:absolute;left:0;right:0;top:-6px;height:3px;background:var(--ink)}

/* Rubrikenleiste unter dem Titelkopf: Sprung zu den Abschnitten */
.ressorts{display:flex;flex-wrap:wrap;justify-content:center;padding:5px 0 6px;border-bottom:1px solid var(--ink)}
.ressorts a{position:relative;padding:6px clamp(10px,1.4vw,20px);font:500 1rem/1.3 var(--sans);text-decoration:none;transition:color .2s}
.ressorts a+a::before{content:"";position:absolute;left:0;top:30%;bottom:30%;width:1px;background:var(--ink);opacity:.35}
.ressorts a:hover{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}

.lead{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);grid-template-areas:"main index" "ticker ticker";column-gap:clamp(24px,3.4vw,48px);padding-top:clamp(26px,4.5vh,52px)}
.lead-main{grid-area:main}
.dach{font:700 .8125rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem}
.head{font:400 clamp(2.45rem,5.5vw,5.3rem)/1 var(--serif);letter-spacing:-.012em;text-wrap:balance}
.head em{font-style:italic}
.vorspann{margin-top:1.3rem;max-width:30.36em;font:600 clamp(1.06rem,1.45vw,1.28rem)/1.5 var(--sans)}

.index{grid-area:index;align-self:start;border-left:1px solid var(--ink);padding-left:clamp(18px,2.2vw,30px)}
.index-t{font:700 .8125rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding-bottom:.6rem;border-bottom:3px solid var(--ink)}
.index ol{list-style:none;margin:0;padding:0}
.index li{border-bottom:1px solid var(--hair-soft)}
.index a{display:grid;grid-template-columns:2.2em minmax(0,1fr);gap:.35em;padding:.7rem 0;text-decoration:none;font-size:1rem;line-height:1.4}
.index a:hover span:last-child{text-decoration:underline;text-underline-offset:.2em}
.index .n{font:500 .875rem/1.65 var(--mono);color:var(--blue)}

/* Kurve im Aufmacher */
.ticker{grid-area:ticker;position:relative;height:clamp(120px,19vh,190px);margin:clamp(34px,5vh,58px) 92px 30px 0}
.tk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tk-grid{fill:none;stroke:var(--ink);stroke-opacity:.3;stroke-width:1;stroke-dasharray:1 4;vector-effect:non-scaling-stroke}
.tk-v{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tk-s{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.tk-base{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tk-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;box-shadow:0 0 0 3px var(--paper)}
.tk-dot-v{left:100%;top:38.5%;background:var(--blue)}
.tk-dot-s{left:87%;top:56.4%;background:var(--ink)}
.tk-l{position:absolute;text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 5px var(--paper);font:italic 400 clamp(1.05rem,1.6vw,1.35rem)/1 var(--serif);white-space:nowrap}
.tk-l-v{left:calc(100% + 12px);top:38.5%;transform:translateY(-55%);color:var(--blue)}
.tk-l-s{right:calc(13% + 6px);top:calc(56.4% + 8px)}
.tk-gap{position:absolute;left:87%;right:0;top:6%;height:9px;border:1px solid var(--ink);border-bottom:0}
.tk-gap span{position:absolute;right:0;bottom:calc(100% + 5px);font:italic 400 1rem/1 var(--serif);white-space:nowrap}
.tk-a{position:absolute;top:calc(100% + 8px);font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tk-a-l{left:0}.tk-a-r{right:0}

/* ---------- Grafik-Teil ---------- */
.flow{max-width:var(--max);margin:0 auto;padding:clamp(64px,11vh,128px) var(--pad) 0}
.flow-head{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"dach dach" "h2 intro";column-gap:clamp(24px,3.4vw,48px);padding-top:16px;border-top:1px solid var(--ink)}
.flow-head::before{content:"";position:absolute;left:0;right:0;top:-6px;height:3px;background:var(--ink)}
.flow-head .dach{grid-area:dach}
.h2{font:400 clamp(2.05rem,4.3vw,3.8rem)/1.02 var(--serif);letter-spacing:-.01em}
.flow-head .h2{grid-area:h2}
.flow-text{grid-area:intro;border-left:1px solid var(--ink);padding-left:clamp(18px,2.2vw,30px)}
.flow-intro{font-size:1.0625rem;max-width:44ch}
.legend{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;font-size:1rem}
.legend li{display:flex;align-items:center;gap:.55em}
.lg{display:inline-block;flex:none}
.lg-v{width:22px;height:3px;background:var(--blue)}
.lg-s{width:22px;height:2px;background:var(--ink)}
.lg-o{width:12px;height:12px;border:1.5px solid var(--ink);background:var(--blue)}

.flow-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:clamp(34px,6vh,64px)}
.steps{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0 clamp(20px,3vw,44px) 62vh 0;border-right:1px solid var(--ink)}
.step{height:100vh;min-height:540px;position:relative}
.step-in{position:sticky;top:18vh;padding:.9rem 0 1.2rem;border-top:1px solid var(--ink)}
.step-k{display:flex;align-items:center;gap:.6em;margin-bottom:.7rem;font:500 .8125rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.step-k i{flex:none;width:11px;height:11px;border:1.5px solid var(--ink);transition:background-color .3s}
.step.is-on .step-k i{background:var(--blue)}
.step h3{font:400 clamp(1.6rem,2.5vw,2.3rem)/1.08 var(--serif);letter-spacing:-.005em;transition:color .3s}
.step.is-on h3{color:var(--blue)}
.step-p{margin-top:.75rem;max-width:44ch;font-size:1.0625rem;text-wrap:pretty}
.step-g{margin-top:.9rem;padding-top:.55rem;max-width:40ch;border-top:1px solid var(--hair-soft);font:italic 400 1.125rem/1.35 var(--serif);color:var(--ink-2)}

.stage-wrap{grid-column:2;grid-row:1;overflow-x:clip;position:sticky;top:5vh;height:90vh;min-height:520px;align-self:start;padding-left:clamp(20px,3vw,44px);z-index:2}
.chart{--mr:12.5%;--bs:12px;position:relative;height:100%;display:flex;flex-direction:column;padding-top:9px;border-top:3px solid var(--ink)}
.chart::before{content:"";position:absolute;left:0;right:0;top:2px;height:1px;background:var(--ink)}
.c-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 18px;padding:6px 0 10px;border-bottom:1px solid var(--ink)}
.c-title{font:400 clamp(1.25rem,1.9vw,1.7rem)/1.1 var(--serif)}
.c-title span{display:block;margin-top:4px;font:400 .75rem/1.3 var(--mono);letter-spacing:.06em;color:var(--ink-2)}
.tabs{position:relative;display:inline-grid;grid-template-columns:repeat(3,1fr);font:500 .75rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tab{padding:6px 10px 10px;text-align:center;color:var(--ink-2);white-space:nowrap;border-bottom:1px solid var(--hair-soft);transition:color .2s}
.tab.is-on{color:var(--ink)}
.tab-bar{position:absolute;left:0;bottom:0;width:33.3333%;height:3px;background:var(--blue);transform:translateX(200%)}
.chart[data-step="0"] .tab.is-on{color:var(--blue)}

.sums{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--ink);font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:color .3s}
.sum-t{height:11px;border:1px solid var(--ink);overflow:hidden}
.sum-b{display:block;height:100%;transform-origin:0 50%}
.sb-brutto{background:repeating-linear-gradient(-45deg,var(--ink) 0 1.3px,transparent 1.3px 4.5px)}
.sb-netto{background:var(--blue);transform:scaleX(.82)}
.chart[data-step="1"] .sums{color:var(--blue)}
.chart[data-step="1"] .sum-t{border-color:var(--blue)}

.plot{position:relative;flex:1;min-height:0;margin-top:12px}
.c-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.c-grid{fill:none;stroke:var(--ink);stroke-opacity:.3;stroke-width:1;stroke-dasharray:1 4;vector-effect:non-scaling-stroke}
.c-b1{fill:#e2b194}
.c-sale{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.c-ship{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.c-axl{fill:none;stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.c-brk{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.c-lead{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.c-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;box-shadow:0 0 0 3px var(--paper)}
.c-dot-v{background:var(--blue)}.c-dot-s{background:var(--ink)}
.c-lbl{position:absolute;padding:1px 3px;text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 5px var(--paper);font:italic 400 clamp(1rem,1.3vw,1.2rem)/1 var(--serif);white-space:nowrap;transform:translate(9px,-50%)}
.c-lbl-v{color:var(--blue)}
.c-lbl-s{transform:translate(9px,10%)}
/* Ruhebild ohne JavaScript (Endzustand); mit Skript setzt render() die Lage in Pixeln */
.c-dot-v,.c-lbl-v{left:87.5%;top:40.35%}
.c-dot-s,.c-lbl-s{left:76.17%;top:48.13%}
.c-note{left:39.55%;top:39.9%}
.boxes{position:absolute;inset:0}
.boxes .bx:nth-child(1){left:21.23%;top:50.47%}
.boxes .bx:nth-child(2){left:43.91%;top:44.23%}
.boxes .bx:nth-child(3){left:57.86%;top:54.2%}
.bx{position:absolute;width:var(--bs);height:var(--bs);margin:calc(var(--bs) / -2) 0 0 calc(var(--bs) / -2);border:1.5px solid var(--ink);background:var(--paper);transition:background-color .25s}
.bx.is-open{background:var(--blue)}
.c-note{position:absolute;padding:0 6px;text-shadow:0 0 2px var(--paper),0 0 3px var(--paper),0 0 5px var(--paper);font:italic 400 clamp(1rem,1.3vw,1.2rem)/1 var(--serif);white-space:nowrap;transform:translate(-50%,-100%)}
.c-card{position:absolute;left:8px;top:4px;width:clamp(150px,42%,250px);padding:9px 12px 7px;background:var(--paper-3);border:1px solid var(--ink);border-top-width:3px;z-index:1}
.cd-k{font:700 .6875rem/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.cd-h{margin:.25rem 0 .4rem;font:400 clamp(1.05rem,1.3vw,1.25rem)/1.08 var(--serif)}
.cd-r{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;padding:5px 0;border-top:1px solid var(--hair-soft);font:500 .75rem/1.2 var(--mono)}
.cd-sk{flex:1;max-width:55%;height:8px;background:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 3.5px)}
.cd-ok{width:14px;height:8px;margin-right:2px;border:solid var(--blue);border-width:0 0 2.5px 2.5px;transform:rotate(-45deg) translate(1px,-2px)}
.cd-r b{padding:1px 6px;border:1px solid var(--ink);font-weight:500;white-space:nowrap}

.c-ax{display:flex;justify-content:space-between;gap:12px;padding:8px var(--mr) 0 0;font:500 .75rem/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.c-legend{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:8px;border-top:1px solid var(--hair-soft);font:500 .75rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.c-legend span{margin-right:4px}
.sw{flex:none;width:24px;height:12px;border:1px solid var(--ink)}
.sw-1{background:#e2b194}
.sw-2{background:repeating-linear-gradient(45deg,var(--blue) 0 1.4px,transparent 1.4px 5px)}
.sw-3{background-image:radial-gradient(circle,var(--ink) 0 1px,transparent 1.3px);background-size:5px 5px}
.chart[data-step="2"] .c-legend{color:var(--blue)}


/* ---------- Gemeinsamer Abschnittskopf der neuen Teile ---------- */
.sec{max-width:var(--max);margin:0 auto;padding:clamp(64px,11vh,128px) var(--pad) 0}
.front+.sec{padding-top:clamp(24px,4vh,48px)}
.sec-head{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"dach dach" "h2 intro";column-gap:clamp(24px,3.4vw,48px);padding-top:16px;border-top:1px solid var(--ink)}
.sec-head::before{content:"";position:absolute;left:0;right:0;top:-6px;height:3px;background:var(--ink)}
.sec-head .dach{grid-area:dach}
.sec-head .h2{grid-area:h2;text-wrap:balance}
.sec-intro{grid-area:intro;align-self:end;max-width:44ch;padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--ink);font-size:1.0625rem;text-wrap:pretty}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Ausgangslage: Bericht mit Initial, daneben der Kasten „Stichwort“ ---------- */
.lage-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,3.4vw,48px);margin-top:clamp(28px,4.5vh,48px)}
.lage-text{max-width:62ch}
.lage-text p{font-size:1.125rem;line-height:1.66;text-wrap:pretty}
.lage-text p+p{margin-top:.55rem;text-indent:1.5em}
.lage-p1::first-letter{float:left;margin:.08em .1em 0 -.02em;font:400 4.6em/.76 var(--serif);color:var(--blue)}
.stw{align-self:start;border-left:1px solid var(--ink);padding-left:clamp(18px,2.2vw,30px)}
.stw-in{padding:14px clamp(14px,1.6vw,20px) 16px;background:var(--paper-3);border:1px solid var(--ink);border-top-width:3px}
.stw-k{font:700 .8125rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.stw-h{margin-top:.3rem;font:400 clamp(1.55rem,2.2vw,1.95rem)/1.05 var(--serif)}
.stw-g{position:relative;height:92px;margin:20px 8px 8px}
.stw-line{position:absolute;left:0;right:0;top:52px;height:1.5px;background:var(--ink)}
.stw-gap{position:absolute;left:42%;right:0;top:34px;height:18px;border:1px solid var(--blue);border-bottom:0;background:repeating-linear-gradient(-45deg,rgba(31,79,143,.55) 0 1.2px,transparent 1.2px 5px);transform-origin:0 50%}
.stw-t{position:absolute;top:46px;display:flex;flex-direction:column;align-items:center;gap:7px;font:500 .8125rem/1 var(--mono);letter-spacing:.04em;white-space:nowrap;transform:translateX(-50%)}
.stw-t i{width:1.5px;height:13px;background:var(--ink)}
.stw-t0{left:0;align-items:flex-start;transform:none}
.stw-t1{left:42%}
.stw-t2{left:auto;right:0;align-items:flex-end;transform:none;color:var(--ink-2)}
.stw-t1.is-on{color:var(--blue)}
.stw-t1.is-on i{background:var(--blue);width:2.5px}
.stw-box{position:absolute;left:72%;top:52.75px;width:14px;height:14px;margin:-7px 0 0 -7px;border:1.5px solid var(--ink);background:var(--blue)}
.stw-box.is-new{background:var(--paper-3)}
.stw-note{position:absolute;right:0;top:8px;font:italic 400 1.0625rem/1 var(--serif);white-space:nowrap}
.stw-p{font-size:1rem;line-height:1.55;text-wrap:pretty}

/* ---------- Im Detail: vier Meldungen im Spaltensatz ---------- */
.md-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(24px,3.4vw,48px);margin-top:clamp(30px,5vh,56px)}
.md{position:relative;min-width:0;padding:16px 0 clamp(40px,7vh,72px);border-top:1px solid var(--ink)}
.md-bericht{grid-column:1/span 6}
.md-abruf{grid-column:7/span 6}
.md-abruf::before{content:"";position:absolute;top:16px;bottom:clamp(40px,7vh,72px);left:calc(clamp(24px,3.4vw,48px) / -2);width:1px;background:var(--ink)}
.md-auto,.md-pap{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto auto 1fr;column-gap:clamp(24px,3.4vw,48px)}
.md-auto>*{grid-column:1}
.md-auto>.au{grid-column:2;grid-row:1/span 3;align-self:center}
.md-pap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.md-pap>*{grid-column:2}
.md-pap>.pp{grid-column:1;grid-row:1/span 3;align-self:center}
.md-k{display:flex;align-items:center;gap:.6em;font:500 .8125rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.md-k i{flex:none;width:11px;height:11px;border:1.5px solid var(--ink);background:var(--blue)}
.md-h{margin-top:.55rem;font:400 clamp(1.75rem,2.7vw,2.5rem)/1.04 var(--serif);letter-spacing:-.005em;text-wrap:balance}
.md-p{margin-top:.8rem;max-width:48ch;font-size:1.0625rem;text-wrap:pretty}

/* Tagesbericht: Fernschreiberstreifen, Zeile für Zeile */
.tb{position:relative;max-width:460px;margin-top:24px;padding-bottom:6px;overflow:hidden}
.tb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ink)}
.tb-paper{position:relative;margin:0 14px;padding:10px 16px 12px 30px;background:var(--paper-3);border:1px solid var(--ink);border-bottom:0}
.tb-paper::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:8px;background:radial-gradient(circle at 4px 4px,var(--ink) 0 1.6px,transparent 2px) 0 0/8px 14px repeat-y;opacity:.45}
.tb-l{display:grid;grid-template-columns:14ch minmax(0,1fr);align-items:center;column-gap:10px;padding:9px 0;border-top:1px dashed rgba(21,17,14,.32);font:500 .875rem/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tb-l:first-child{border-top:0}
.tb-head,.tb-foot{display:block}
.tb-head{letter-spacing:.16em;color:var(--blue)}
.tb-foot{font-size:.75rem;letter-spacing:.08em;color:var(--ink-2)}
.tb-t{display:inline-block;white-space:nowrap}
.tb-b{display:block;width:calc(var(--w) * 100%);height:11px;border:1px solid var(--ink);background:repeating-linear-gradient(-45deg,var(--ink) 0 1.2px,transparent 1.2px 4.5px);transform-origin:0 50%}
.tb-l:nth-child(2) .tb-b{--w:.86}
.tb-l:nth-child(3) .tb-b{--w:.62}
.tb-l:nth-child(4) .tb-b{--w:.74}

/* Auf Abruf: Versand-Ansicht, die sich auf Knopfdruck neu lädt */
.ab{max-width:460px;margin-top:24px}
.ab-card{padding:10px 14px 9px;background:var(--paper-3);border:1px solid var(--ink);border-top-width:3px}
.ab-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px}
.ab-top b{font:400 1.35rem/1.1 var(--serif)}
.ab-st{font:500 .75rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.ab-load{height:2px;margin:8px 0 12px;background:rgba(21,17,14,.16)}
.ab-load i{display:block;height:100%;background:var(--blue);transform-origin:0 50%}
.ab-bars{display:flex;align-items:flex-end;gap:clamp(4px,1vw,8px);height:96px;border-bottom:1.5px solid var(--ink)}
.ab-bars i{flex:1;height:calc(var(--h) * 100%);border:1px solid var(--ink);border-bottom:0;background:repeating-linear-gradient(-45deg,var(--ink) 0 1.2px,transparent 1.2px 4.5px);transform-origin:50% 100%;transition:height .35s}
.ab-bars i:nth-child(1){--h:.46}.ab-bars i:nth-child(2){--h:.62}.ab-bars i:nth-child(3){--h:.38}
.ab-bars i:nth-child(4){--h:.71}.ab-bars i:nth-child(5){--h:.55}.ab-bars i:nth-child(6){--h:.8}
.ab-bars i:nth-child(7){--h:.49}.ab-bars i:nth-child(8){--h:.67}.ab-bars i:nth-child(9){--h:.58}
.ab-bars .ab-now{background:var(--blue);border-color:var(--blue)}
.ab-ax{display:flex;justify-content:space-between;gap:10px;padding-top:6px;font:500 .75rem/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.ab-btn{display:inline-flex;align-items:center;gap:.6em;margin-top:14px;padding:.55em 1.05em;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 1rem/1.3 var(--sans);cursor:pointer;transition:background-color .2s,color .2s}
.ab-btn:hover{background:var(--ink);color:var(--paper)}
.ab-btn[hidden]{display:none}
.ab-ic{flex:none;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%}

/* Auftragsautomatik: erst zwei Prüfungen, dann drei Papiere */
.au{position:relative;padding-left:clamp(18px,2.2vw,30px);border-left:1px solid var(--ink)}
.au-track{display:flex;align-items:center;padding:6px 0 42px}
.au-st{position:relative;flex:none;display:flex;flex-direction:column;align-items:center}
.au-mk{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);background:var(--paper)}
.au-mk0{width:16px;height:16px;margin:6px}
.au-chk{background:var(--paper-3)}
.au-chk svg{width:22px;height:22px;overflow:visible}
.au-chk path,.pp-cb path{fill:none;stroke:var(--blue);stroke-width:3.2;stroke-linecap:square;stroke-dasharray:1 1}
.au-l{position:absolute;top:calc(100% + 9px);left:50%;display:flex;align-items:center;gap:6px;white-space:nowrap;font:500 .8125rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transform:translateX(-50%)}
.au-l b{display:grid;place-items:center;width:18px;height:18px;background:var(--ink);color:var(--paper);font-weight:500;letter-spacing:0}
.au-seg{position:relative;flex:1;min-width:24px;height:1.5px;background:var(--ink)}
.au-seg i{position:absolute;left:0;right:0;top:-.75px;height:3px;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--f,1))}
.au-out{flex:none;display:flex;flex-direction:column;gap:8px;padding:2px 0 2px 16px;border-left:1.5px solid var(--ink)}
.au-doc{position:relative;display:flex;flex-direction:column;gap:6px;width:clamp(168px,17vw,210px);padding:7px 10px 8px;background:var(--paper-3);border:1px solid var(--ink);border-top-width:3px;font:500 .75rem/1.15 var(--mono);letter-spacing:.03em;text-transform:uppercase}
.au-doc::before{content:"";position:absolute;right:100%;top:50%;width:17px;height:1.5px;background:var(--ink)}
.au-doc b{font-weight:500}
.au-doc i{display:block;width:70%;height:6px;background:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 3.5px)}
.au-box{position:absolute;left:0;top:0;z-index:1;display:none;width:16px;height:16px;margin:-8px 0 0 -8px;border:1.5px solid var(--ink);background:var(--paper)}
.au-box.is-live{display:block}
.au-box.is-paid{background:var(--blue)}
.au-cap{font:italic 400 1.0625rem/1.3 var(--serif);color:var(--ink-2)}

/* Kommissionierliste und Schlussrechnung: abgehakt, doppelt unterstrichen */
.pp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);padding-right:clamp(18px,2.2vw,30px);border-right:1px solid var(--ink)}
.pp-doc{position:relative;padding:10px 14px 14px;background:var(--paper-3);border:1px solid var(--ink);border-top-width:3px}
.pp-t{padding-bottom:8px;font:500 .75rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pp-r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--hair-soft)}
.pp-cb{flex:none;display:grid;place-items:center;width:19px;height:19px;border:1.5px solid var(--ink);background:var(--paper)}
.pp-cb svg{width:15px;height:15px;overflow:visible}
.pp-sk{flex:1;max-width:calc(var(--w) * 100%);height:8px;background:repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 3.5px)}
.pp-doc:first-child .pp-r:nth-child(2) .pp-sk{--w:.84}.pp-doc:first-child .pp-r:nth-child(3) .pp-sk{--w:.58}
.pp-doc:first-child .pp-r:nth-child(4) .pp-sk{--w:.72}.pp-doc:first-child .pp-r:nth-child(5) .pp-sk{--w:.46}
.pp-re .pp-r:nth-child(2) .pp-sk{--w:.7}.pp-re .pp-r:nth-child(3) .pp-sk{--w:.52}.pp-re .pp-r:nth-child(4) .pp-sk{--w:.62}
.pp-n{flex:none;width:24px;height:12px;margin-left:auto;border:1px solid var(--ink)}
.pp-a{flex:none;width:clamp(36px,5vw,56px);height:8px;margin-left:auto;background:var(--ink);transform-origin:100% 50%}
.pp-sum{border-top:1.5px solid var(--ink);font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.pp-as{width:clamp(48px,6.5vw,72px);height:10px;background:var(--blue)}
.pp-dbl{display:block;width:clamp(48px,6.5vw,72px);height:5px;margin:-4px 0 0 auto;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform-origin:0 50%}

/* ---------- Zusammenspiel: Querverweise mit kleiner Netzgrafik ---------- */
.zs-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3.4vw,48px);align-items:center;margin-top:clamp(30px,5vh,56px)}
.zs-g{position:relative;width:100%;max-width:520px;aspect-ratio:5/4;margin:0 auto}
.zs-ln{position:absolute;background:var(--ink);transition:background-color .25s}
.zs-ln-t,.zs-ln-b{left:50%;width:1.5px;margin-left:-.75px}
.zs-ln-t{top:12%;bottom:50%;transform-origin:50% 100%}
.zs-ln-b{top:50%;bottom:12%;transform-origin:50% 0}
.zs-ln-l,.zs-ln-r{top:50%;height:1.5px;margin-top:-.75px}
.zs-ln-l{left:8%;right:50%;transform-origin:100% 50%}
.zs-ln-r{left:50%;right:8%;transform-origin:0 50%}
.zs-ln.is-on{background:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.zs-n{position:absolute;display:flex;gap:9px;white-space:nowrap}
.zs-n::before{content:"";flex:none;width:14px;height:14px;border:1.5px solid var(--ink);background:var(--paper);box-sizing:border-box;transition:background-color .25s,border-color .25s}
.zs-n.is-on::before{background:var(--blue);border-color:var(--blue)}
.zs-n span{display:flex;flex-direction:column;gap:3px}
.zs-n b{font:500 .8125rem/1 var(--mono);letter-spacing:.06em}
.zs-n em{font:italic 400 clamp(1rem,1.5vw,1.125rem)/1 var(--serif)}
.zs-n-t{left:50%;top:12%;align-items:center;transform:translate(-7px,-50%)}
.zs-n-b{left:50%;top:88%;align-items:center;transform:translate(-7px,-50%)}
.zs-n-l{left:8%;top:50%;flex-direction:column;align-items:flex-start;transform:translate(-7px,-7px)}
.zs-n-r{right:8%;top:50%;flex-direction:column;align-items:flex-end;text-align:right;transform:translate(7px,-7px)}
.zs-n-c{left:50%;top:50%;transform:translate(-15px,-15px)}
.zs-n-c::before{width:30px;height:30px;background:var(--ink);border-color:var(--ink)}
.zs-n-c span{position:absolute;right:calc(100% - 4px);bottom:calc(100% + 10px);align-items:flex-end;text-align:right}
.zs-n-c em{font-size:clamp(1.05rem,1.6vw,1.25rem)}
.zs-list{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.zs-list li{padding:14px 0 16px;border-bottom:1px solid var(--ink)}
.zs-list a{display:flex;align-items:baseline;gap:.75em;text-decoration:none}
.zs-c{flex:none;font:500 .875rem/1 var(--mono);letter-spacing:.06em;color:var(--blue)}
.zs-name{font:400 clamp(1.6rem,2.4vw,2.15rem)/1.05 var(--serif);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:rgba(21,17,14,.35)}
.zs-arr{margin-left:auto;font:400 1.35rem/1 var(--sans);transition:transform .25s,color .25s}
.zs-list a:hover .zs-name,.zs-list a:focus-visible .zs-name{color:var(--blue);text-decoration-color:currentColor}
.zs-list a:hover .zs-arr,.zs-list a:focus-visible .zs-arr{color:var(--blue);transform:translateX(5px)}
.zs-list p{margin-top:.45rem;max-width:56ch;font-size:1.0625rem;text-wrap:pretty}

/* ---------- Technik & Rolle: Schaubild und Steckbrief ---------- */
.tech-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,3.4vw,48px);align-items:start;margin-top:clamp(30px,5vh,56px)}
.sb{position:relative;display:flex;flex-direction:column;max-width:460px}
.sb-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sb-cell,.sb-l{display:flex;flex-direction:column;gap:5px;padding:10px 12px 11px;background:var(--paper-3);border:1px solid var(--ink);transition:border-color .3s,box-shadow .3s}
.sb-l{align-items:center;text-align:center}
.sb-cell b,.sb-l b{font:400 1.45rem/1 var(--serif)}
.sb-cell em,.sb-l em{font:500 .75rem/1.2 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sb-cell.is-on{border-color:var(--blue);box-shadow:inset 0 3px 0 var(--blue)}
.sb-l.is-on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.sb-erp{border-top-width:3px}
.sb-c{position:relative;height:46px}
.sb-c i{position:absolute;top:0;bottom:0;border-left:1.5px dashed var(--ink)}
.sb-c1 i{left:calc(50% - .75px)}
.sb-c1>span{position:absolute;left:calc(50% + 12px);right:0;top:50%;font:italic 400 1.0625rem/1.1 var(--serif);transform:translateY(-50%)}
.sb-c1 .nw{white-space:nowrap}
.sb-c2 i:first-child{left:calc((100% - 12px) / 4 - .75px)}
.sb-c2 i:last-child{left:calc((100% - 12px) * .75 + 12px - .75px)}
.sb-pk{position:absolute;left:0;top:0;z-index:1;display:none;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--blue);box-shadow:0 0 0 2px var(--paper-3)}
.sb-pk.is-live{display:block}
.steck{margin:0;border-top:3px solid var(--ink)}
.steck div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);align-items:baseline;gap:4px 18px;padding:11px 0;border-bottom:1px solid var(--hair-soft)}
.steck dt{font:500 .8125rem/1.65 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.steck dd{margin:0;font-size:1.0625rem}

/* ---------- Weitere Projekte: Seitenverweise wie am Fuß einer Zeitungsseite ---------- */
.wp{padding-bottom:clamp(56px,10vh,110px)}
.wp .dach{margin-bottom:0}
.wp-list{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);margin:18px 0 0;padding:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.wp-list li{display:flex;min-width:0}
.wp-list li+li{border-left:1px solid var(--ink)}
.wp-list a{flex:1;display:flex;flex-direction:column;gap:.45rem;padding:22px clamp(14px,2vw,28px) 24px;text-decoration:none}
.wp-prev a{padding-left:0}
.wp-next a{align-items:flex-end;padding-right:0;text-align:right}
.wp-all a{align-items:center;text-align:center}
.wp-k{font:500 .8125rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.wp-n{font:400 clamp(1.7rem,3vw,2.7rem)/1.02 var(--serif)}
.wp-arr{display:inline-block;transition:transform .25s}
.wp-prev a:hover .wp-arr,.wp-prev a:focus-visible .wp-arr{transform:translateX(-5px)}
.wp-next a:hover .wp-arr,.wp-next a:focus-visible .wp-arr{transform:translateX(5px)}
.wp-list a:hover .wp-n,.wp-list a:focus-visible .wp-n{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--ink);position:relative;margin-top:8px}
.foot::before{content:"";position:absolute;left:0;right:0;top:-6px;height:3px;background:var(--ink)}
.foot-in{max-width:var(--max);margin:0 auto;padding:34px var(--pad) 46px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 32px}
.back-lg{font-size:1.0625rem;padding:.6em 1.15em}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 28px}
.foot-nav a{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.foot-nav a:hover{color:var(--blue)}
.foot-by{width:100%;font:500 .8125rem/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* ---------- Breiten ---------- */
@media (max-width:899.98px){
  .lead{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "ticker" "index"}
  .index{border-left:0;padding-left:0}
  .ticker{margin:36px 78px 44px 0}
  .flow-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"dach" "h2" "intro"}
  .flow-text{border-left:0;padding-left:0;margin-top:1rem}
  .flow-body{display:block}
  .stage-wrap{position:sticky;top:0;height:60vh;height:60svh;min-height:360px;margin:0 calc(var(--pad) * -1);padding:8px var(--pad) 10px;background:var(--paper);border-bottom:1px solid var(--ink)}
  .chart{padding-top:7px}
  .c-head{padding:4px 0 6px;gap:4px 12px}
  .c-title{font-size:1.15rem}
  .c-title span{display:inline;margin:0 0 0 .5em}
  .tabs{width:100%}
  .tab{padding:5px 4px 8px}
  .sums{padding:6px 0;gap:4px 10px}
  .sum-t{height:9px}
  .plot{margin-top:8px}
  .c-ax{padding-top:6px}
  .c-legend{margin-top:6px;padding-top:6px}
  /* Mobil: die Grafik klebt oben, die längeren Texte laufen darunter durch;
     nur mit Bewegung bekommt jeder Schritt eine Bildschirmhöhe Scrollweg */
  .steps{border-right:0;padding:0 0 26vh}
  .step{height:auto;min-height:0;padding-bottom:1.4rem}
  .lt-motion .step{display:flex;flex-direction:column;min-height:88vh;min-height:88svh;padding-bottom:0}
  .lt-motion .step-in{flex:1;display:flex;flex-direction:column}
  /* die Bildzeile bleibt wie eine Bildunterschrift unter der Grafik stehen, solange ihr Schritt läuft */
  .lt-motion .step-g{position:sticky;top:max(calc(60vh + 4px),364px);top:max(calc(60svh + 4px),364px);z-index:1;margin-top:.8rem;padding:.5rem 0 .6rem;background:var(--paper)}
  .step-in{position:relative;top:auto;padding:1.1rem 0 1rem;border-top:0}
  .step h3{font-size:1.55rem}
  .step-p{margin-top:.5rem;max-width:none;font-size:1rem;line-height:1.55}
  .step-g{max-width:none;font-size:1.0625rem}
  .c-card{top:auto;bottom:16px;width:clamp(160px,56%,250px);padding:7px 9px 5px}
  .cd-h{margin:.2rem 0 .3rem}
  .cd-r{padding:4px 0}
  .ressorts{justify-content:flex-start;padding:4px 0 5px}
  .ressorts a{padding:5px 12px}
  .ressorts a:first-child{padding-left:0}
  .sec-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"dach" "h2" "intro"}
  .sec-intro{align-self:start;margin-top:1rem;padding-left:0;border-left:0}
  .lage-body{grid-template-columns:minmax(0,1fr)}
  .lage-text p{font-size:1.0625rem}
  .stw{margin-top:2rem;padding-left:0;border-left:0}
  .md-grid{display:block}
  .md-abruf::before{display:none}
  .md-auto,.md-pap{display:block}
  .au{margin-top:26px;padding-left:0;border-left:0}
  .pp{margin-top:26px;padding-right:0;border-right:0}
  .zs-body,.tech-body{grid-template-columns:minmax(0,1fr)}
  .zs-g{max-width:440px;margin-bottom:28px}
  .sb{width:100%;margin:0 auto 34px}
}
@media (max-width:639.98px){
  /* Automatik senkrecht: Auftrag, Prüfungen und Papiere untereinander */
  .au-track{flex-direction:column;align-items:flex-start;padding:4px 0 10px}
  .au-st{flex-direction:row}
  .au-l{position:static;margin-left:12px;transform:none}
  .au-seg{flex:none;width:1.5px;min-width:0;height:30px;margin-left:13.25px}
  .au-seg i{left:-.75px;right:auto;top:0;bottom:0;width:3px;height:auto;transform-origin:50% 0;transform:scaleY(var(--f,1))}
  .au-out{margin-left:13.25px;padding:6px 0 4px 18px}
  .au-doc{width:auto;max-width:280px}
  .pp{grid-template-columns:minmax(0,1fr);max-width:420px}
  .wp-list{grid-template-columns:minmax(0,1fr)}
  .wp-list li+li{border-top:1px solid var(--ink);border-left:0}
  .wp-list a,.wp-prev a,.wp-next a{align-items:flex-start;padding:18px 0 20px;text-align:left}
  .wp-all a{align-items:flex-start;text-align:left}
}
@media (max-width:359.98px){
  .dach{letter-spacing:.08em}
}
@media (max-width:479.98px){
  .flag-line{font-size:.75rem;letter-spacing:.08em}
  .who{letter-spacing:.08em}
  .tabs{font-size:.6875rem;letter-spacing:.02em}
  .ressorts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .ressorts a,.ressorts a:first-child{padding:6px 0}
  .ressorts a+a::before{display:none}
  .steck div{grid-template-columns:minmax(0,1fr);gap:2px}
  .stw-t{font-size:.75rem;letter-spacing:.02em}
}

/* Ruhige Fassung: keine Übergänge */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Druck ----------
   Aufs Papier kommt die Fassung ohne JavaScript (projekt-leitung.js setzt sie beim Drucken ein): Grafik und Schritte
   untereinander statt klebend, keine Bildschirmhöhen, keine Knöpfe. Lachspapier druckt der Browser ohne
   Hintergrundgrafik nicht, die Schrift ist ohnehin dunkel; nur die kleinen Grafiken behalten ihre Flächen
   (Kästen, Balken, Streifen tragen dort den Inhalt). Grafiken, Meldungen und Steckbrief werden nicht zerschnitten. */
@page{margin:14mm 12mm}
@media print{
  html,body{background:#fff}
  .skip,.back,.ab-btn{display:none}
  .ticker,.stw-in,.chart,.legend,.tb,.ab-card,.au,.pp,.zs-g,.sb{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .top{padding-top:0}
  .front{padding-bottom:20px}
  .flow,.sec,.front+.sec{padding-top:28px}
  .wp{padding-bottom:0}
  .flow-body{display:block;margin-top:24px}
  .stage-wrap{position:static;height:auto;min-height:0;margin:0 0 8px;padding:0;border-bottom:0;background:none}
  .chart{height:min(540px,62vh)}
  .c-card{top:4px;bottom:auto}
  .steps{padding:0;border-right:0}
  .step{height:auto;min-height:0;padding-bottom:6px}
  .step-in{position:static;padding:12px 0 10px;border-top:1px solid var(--ink)}
  .md{padding-bottom:28px}
  /* Netzgrafik neben ihrem Text wie auf breiten Schirmen, sonst füllt sie allein eine Seite */
  .zs-body{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .zs-g{margin-bottom:0}
  h1,h2,h3,.dach,.sec-head,.flow-head,.index-t{break-after:avoid}
  .ticker,.stw,.chart,.step,.md,.zs-g,.zs-list li,.sb,.steck div,.wp-list{break-inside:avoid}
}