/* Forderungs-Monitor (C-06) – Welt: Hängeregistratur.
   Lavendelgrauer Grund, Hängemappen mit Reitern in Salbei, Sand, Malve und Schiefer, Tinte.
   Schriften: Instrument Serif (große Überschriften) + Inter (Lesetext, Etiketten). Kein Rot, keine Drohung. */

/* ---------- 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:#2a2738}
  ::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-style: normal; font-display: swap; }
@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-italic-400-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ground: #e6e3ee; --ground-2: #dcd8e6; --ground-3: #cfcadc;
  --paper: #fbfaf7; --line: #e6e2ec;
  --ink: #2a2738; --ink-2: #545066;
  --rail: #8f8a9f; --rail-2: #aaa5b9;
  --sage: #a9b99c; --sage-d: #93a587; --sage-t: #dfe6d8;
  --sand: #d9c39c; --sand-d: #c4ab82; --sand-t: #f0e6d2;
  --mauve: #b693b0; --mauve-d: #a07c9a; --mauve-t: #ecdeea;
  --slate: #6c7684; --slate-d: #5a6371; --slate-t: #d9dde3;
  --mauve-ink: #6a4665;
  --gut: clamp(16px, 5vw, 64px);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: min(1200px, 100% - 2 * var(--gut)); margin-inline: auto; }
.label { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

/* Reiter-Farben je Mappe */
.f0, .rf0, .t-b0, .chip.b0 { --c: var(--sage); --cd: var(--sage-d); --ct: var(--sage-t); }
.f1, .rf1, .t-b1, .chip.b1 { --c: var(--sand); --cd: var(--sand-d); --ct: var(--sand-t); }
.f2, .rf2, .t-b2, .chip.b2 { --c: var(--mauve); --cd: var(--mauve-d); --ct: var(--mauve-t); }
.f3, .rf3, .t-lk, .chip.lk { --c: var(--slate); --cd: var(--slate-d); --ct: var(--slate-t); }

/* ---------- Kopf ---------- */
.skip { position: absolute; left: var(--gut); top: -80px; z-index: 30; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
/* links „← Profil“, rechts „Demo“ und der Name als Weg zur Startseite
   (eine Grammatik für alle Projektseiten, 31.10.2026: volle Breite, gleicher Seitenabstand, jedes Ziel ≥ 44 px) */
.top { display: flex; align-items: center; gap: 16px; padding: 18px clamp(16px, 3vw, 40px); }
.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: 999px;
  border: 1px solid rgba(42, 39, 56, .22); background: rgba(251, 250, 247, .5); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .2s, border-color .2s;
}
.back:hover { background: var(--paper); border-color: rgba(42, 39, 56, .4); }
.back.demo{margin-left:auto;white-space:nowrap;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-mahnwesen.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.owner { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); text-decoration: none; }
.owner:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
/* schmale Handys: alle drei Ziele in einer Zeile, der Name ungekürzt */
@media (max-width: 399.98px) {
  .top { gap: 8px; }
  .top .back { padding: 8px 12px; }
  .owner { letter-spacing: .06em; }
}
@media (max-width: 359.98px) { .owner { font-size: 11px; letter-spacing: .04em; } }

/* ---------- Hero ---------- */
.hero { padding-block: clamp(24px, 6vh, 72px) clamp(64px, 11vh, 120px); overflow-x: clip; }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ""; flex: none; width: 34px; height: 10px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--sage) 0 25%, var(--sand) 25% 50%, var(--mauve) 50% 75%, var(--slate) 75%); }
h1 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(50px, 7.4vw, 108px); line-height: .94; letter-spacing: -.012em; }
.hook { margin-top: 22px; max-width: 21ch; font-family: var(--serif); font-style: italic; font-size: clamp(27px, 2.9vw, 38px); line-height: 1.14; color: var(--mauve-ink); text-wrap: balance; }
.desc { margin-top: 18px; max-width: 46ch; color: var(--ink-2); font-size: 18px; text-wrap: pretty; }
.cue { margin-top: 26px; display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--ink-2); }
.cue::before { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-3px) rotate(45deg); margin-left: 4px; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); } }

/* Registratur im Hero (Bild, aria-hidden) */
.reg {
  position: relative; aspect-ratio: 5 / 4.3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #d8d3e2 0%, #ccc6d9 100%);
  box-shadow: inset 0 0 0 1px rgba(42, 39, 56, .06), 0 50px 90px -60px rgba(42, 39, 56, .6);
}
.reg-rail { position: absolute; left: 3%; right: 3%; top: 22%; height: 6px; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail-2); }
.reg-f { position: absolute; top: calc(22% - 3px); bottom: 0; width: 20.6%; background: linear-gradient(180deg, rgba(42, 39, 56, 0), rgba(42, 39, 56, .14)), var(--cd); border-radius: 2px 2px 0 0; }
.reg-f::before { content: ""; position: absolute; left: -5px; right: -5px; top: -4px; height: 7px; border: 2px solid var(--rail); border-bottom: 0; border-radius: 7px 7px 0 0; }
.reg-f::after { content: ""; position: absolute; left: 0; right: 0; top: 34%; bottom: 0; background: var(--c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 -3px 8px -3px rgba(42, 39, 56, .3); }
.rf0 { left: 4.5%; } .rf1 { left: 27%; } .rf2 { left: 49.5%; } .rf3 { left: 74.9%; }
.tab { position: absolute; bottom: calc(100% + 2px); left: 7%; max-width: 96%; padding: 3px 4px 0; background: var(--c); border-radius: 6px 6px 0 0; }
.tab i { display: block; padding: 4px 6px; border-radius: 2px; background: var(--paper); color: var(--ink); font: 600 clamp(8px, 2.3vw, 11.5px)/1 var(--sans); font-style: normal; white-space: nowrap; overflow: hidden; }
.pp { position: absolute; left: 13%; right: 13%; height: 44%; background: var(--paper); border-radius: 2px; box-shadow: 0 0 0 1px rgba(42, 39, 56, .1); }
.pp.p1 { top: 14%; } .pp.p2 { top: 20%; left: 16%; } .pp.p3 { top: 25%; left: 11%; }
.bundle { position: absolute; left: 50%; bottom: 11%; width: 36%; aspect-ratio: 1 / 1.22; margin-left: -18%; z-index: 20; }
.sh { position: absolute; inset: 0; }
.pg {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: 50% 100%;
  background:
    linear-gradient(#cfcad9, #cfcad9) 12% 10% / 30% 3px no-repeat,
    repeating-linear-gradient(180deg, #e7e3ec 0 2px, transparent 2px 9px) 50% 70% / 76% 46% no-repeat,
    var(--paper);
  box-shadow: 0 0 0 1px rgba(42, 39, 56, .1), 0 12px 26px -16px rgba(42, 39, 56, .55);
}
.sh:nth-child(2) { transform: translate(-3px, 2px) rotate(-1.4deg); } .sh:nth-child(3) { transform: translate(4px, 1px) rotate(1.1deg); }
.sh:nth-child(4) { transform: translate(-2px, -1px) rotate(-.6deg); } .sh:nth-child(5) { transform: translate(3px, 3px) rotate(1.8deg); }
.sh:nth-child(6) { transform: translate(-4px, 1px) rotate(-2deg); } .sh:nth-child(7) { transform: translate(1px, -2px) rotate(.7deg); }
.sh:nth-child(8) { transform: translate(-1px, 2px) rotate(-1deg); } .sh:nth-child(9) { transform: translate(2px, 0) rotate(.4deg); }
.band { position: absolute; left: -8%; right: -8%; top: 40%; height: 16%; min-height: 24px; display: grid; place-items: center; background: var(--sand); color: var(--ink); font: 600 clamp(9px, 2.4vw, 12px)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(42, 39, 56, .14); transform-origin: 0 50%; }
.reg-front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15%; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #d5d0e0, #c5bfd3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 -12px 26px -14px rgba(42, 39, 56, .45);
}
.holder { position: relative; display: inline-block; padding: 3px 12px; border: 2px solid #a39db3; border-radius: 4px; background: var(--paper); color: var(--ink); font: 600 clamp(9px, 2.4vw, 12.5px)/1.3 var(--sans); white-space: nowrap; }
.grip { display: block; width: 64px; height: 8px; border-radius: 6px; background: #b2acc3; box-shadow: inset 0 2px 3px rgba(42, 39, 56, .35); }

/* ---------- Ausgangslage: ein Stapel, aus dem Signalreiter ragen ---------- */
.ag { padding-block: clamp(64px, 11vh, 132px); border-top: 1px solid rgba(42, 39, 56, .1); overflow-x: clip; }
.ag-grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
.ag-text h2 { max-width: 17ch; }
.ag-text p:not(.label) { margin-top: 16px; max-width: 58ch; color: var(--ink-2); text-wrap: pretty; }
.ag-text h2 + p:not(.label) { margin-top: 26px; color: var(--ink); font-size: 19px; }
.ag-note { position: absolute; right: 14px; bottom: 10px; color: var(--ink); font-size: 12px; }
.ag-fig {
  position: relative; width: 100%; max-width: 520px; justify-self: center; aspect-ratio: 5 / 4.4; overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #d9d4e3 0%, #cdc7da 100%); box-shadow: inset 0 0 0 1px rgba(42, 39, 56, .07), 0 40px 80px -56px rgba(42, 39, 56, .6);
}
.ag-pile { position: absolute; z-index: 0; left: 17%; top: 11%; width: 50%; height: 74%; }
.ag-s { position: absolute; inset: 0; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .1), 0 12px 26px -16px rgba(42, 39, 56, .55); }
.ag-s:nth-child(6) { transform: translate(-5px, 4px) rotate(-1.8deg); } .ag-s:nth-child(7) { transform: translate(4px, 2px) rotate(1.3deg); }
.ag-s:nth-child(8) { transform: translate(-2px, -1px) rotate(-.7deg); } .ag-s:nth-child(9) { transform: translate(3px, 3px) rotate(1.9deg); }
.ag-s:nth-child(10) { transform: translate(-3px, 1px) rotate(-1.1deg); }
.ag-s:nth-child(11) { background: linear-gradient(#cfcad9, #cfcad9) 12% 9% / 34% 3px no-repeat, repeating-linear-gradient(180deg, #e7e3ec 0 2px, transparent 2px 10px) 50% 78% / 76% 30% no-repeat, linear-gradient(#e7e3ec, #e7e3ec) 12% 22% / 54% 2px no-repeat, var(--paper); }
.ag-band { position: absolute; z-index: 2; left: -9%; right: -9%; top: 41%; height: 13%; min-height: 28px; display: grid; place-items: center; background: var(--sand); color: var(--ink); font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(42, 39, 56, .14); }
.ag-flag { position: absolute; z-index: -1; left: 56%; width: 72%; height: 7%; min-height: 14px; border-radius: 0 3px 3px 0; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px -4px rgba(42, 39, 56, .5); }
.ag-flag:nth-child(1) { top: 8%; } .ag-flag:nth-child(2) { top: 22%; } .ag-flag:nth-child(3) { top: 60%; } .ag-flag:nth-child(4) { top: 73%; } .ag-flag:nth-child(5) { top: 86%; }
.ag-flag svg { position: absolute; right: 14%; top: -8px; width: 8px; height: 22px; color: #3f4754; }
@media (min-width: 900px) { .ag-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }

/* ---------- Registratur (Scrollytelling) ---------- */
.sort { padding-top: clamp(56px, 10vh, 120px); border-top: 1px solid rgba(42, 39, 56, .1); }
.sec-head { max-width: 760px; }
h2 { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.sec-head > p:not(.label) { margin-top: 18px; color: var(--ink-2); max-width: 60ch; }

.scrolly { position: relative; margin-top: clamp(28px, 6vh, 72px); }
.stage-wrap { position: sticky; top: 0; z-index: 3; display: flex; height: 55vh; height: 55svh; padding: 10px 0 14px; background: var(--ground); }
.stage {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
  background: linear-gradient(180deg, #d9d4e3 0%, #cdc7da 100%);
  box-shadow: inset 0 0 0 1px rgba(42, 39, 56, .07), 0 40px 80px -56px rgba(42, 39, 56, .6);
}
.board { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.drawer {
  position: relative; z-index: 5; flex: none; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #d6d1e1, #c4bed3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 -14px 28px -16px rgba(42, 39, 56, .5);
}
.drawer .holder { min-width: 150px; height: 26px; padding: 0; }
.caps-box { position: absolute; inset: 0; }
.cap { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 10px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.drawer .note { position: absolute; right: 14px; bottom: 8px; font-size: 11px; color: var(--ink); }
.drawer .note .long { display: none; }

/* Belege (Papier) – ohne JavaScript ruhig in drei Mappen */
.t { background: var(--paper); border-radius: 2px; box-shadow: 0 0 0 1px rgba(42, 39, 56, .11), 0 8px 18px -12px rgba(42, 39, 56, .55); }
.t i { position: absolute; pointer-events: none; font-style: normal; }
.t-l { inset: 0; opacity: var(--l, 1); background: linear-gradient(#cfcad9, #cfcad9) 12% 12% / 32% 3px no-repeat, repeating-linear-gradient(180deg, #e7e3ec 0 2px, transparent 2px 8px) 50% 72% / 76% 48% no-repeat; }
.board:not(.is-live) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 54px 14px 0; }
.board:not(.is-live)::before { content: ""; position: absolute; left: 8px; right: 8px; top: 52px; height: 6px; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail-2); }
.fold { position: relative; background: var(--cd); border-radius: 2px 2px 0 0; padding-top: 14px; }
.fold::after { content: ""; position: absolute; left: 0; right: 0; top: 46%; bottom: 0; z-index: 2; background: var(--c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.fold .tab i { font-size: 11px; }
.papers { position: absolute; left: 0; right: 0; bottom: 48%; display: grid; justify-items: center; }
.fold .t { position: relative; width: 74%; height: 96px; margin-top: -82px; }
.fold .t:first-child { margin-top: 0; }
.fold .t-w, .fold .t-r, .fold .t-v, .fold .t-k { display: none; }

/* Lebende Bühne */
.board.is-live .t { position: absolute; left: 0; top: 0; transform-origin: 50% 100%; will-change: transform; --l: 1; --w: 0; --r: 0; --rx: 50px; --ry: -7px; --k: 0; --v: 0; }
.t-w { inset: 0; opacity: var(--w, 0); }
.t-w::before, .t-w::after { content: ""; position: absolute; top: calc(50% - 2.5px); height: 5px; border-radius: 3px; background: #dcd7e4; }
.t-w::before { left: 38px; width: 26%; }
.t-w::after { left: calc(50px + 26%); width: 22%; background: #e6e2ec; }
.t-r { left: var(--rx); top: var(--ry); width: 16px; height: 14px; margin-left: -8px; border-radius: 2px 2px 1px 1px; background: var(--ink); color: var(--paper); font: 700 9.5px/14px var(--sans); text-align: center; opacity: var(--r, 0); }
.t-v { right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); opacity: var(--v, 0); }
.t-k { right: 16%; top: -9px; width: 9px; height: 24px; color: #6f6a82; opacity: var(--k, 0); }
.t-k svg { display: block; width: 100%; height: 100%; }

.lbl { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; white-space: nowrap; }
.lbl.rail { z-index: 0; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail-2); }
.lbl.fb { z-index: 1; background: linear-gradient(180deg, rgba(42, 39, 56, 0), rgba(42, 39, 56, .14)), var(--cd); border-radius: 2px 2px 0 0; }
.lbl.fb::before { content: ""; position: absolute; left: -6px; right: -6px; top: -4px; height: 7px; border: 2px solid var(--rail); border-bottom: 0; border-radius: 7px 7px 0 0; }
.lbl.fb .tab i { font-size: 11.5px; }
.lbl.fb.f3 .tab { left: auto; right: 7%; }
.narrow .lbl.fb .tab { max-width: none; }
.narrow .lbl.fb.f1 .tab, .narrow .lbl.fb.f3 .tab { bottom: calc(100% + 26px); padding-bottom: 3px; border-radius: 6px; }
.narrow .lbl.fb.f1 .tab::after, .narrow .lbl.fb.f3 .tab::after { content: ""; position: absolute; top: 100%; width: 6px; height: 26px; background: var(--c); }
.narrow .lbl.fb.f1 .tab::after { left: 26px; }
.narrow .lbl.fb.f3 .tab::after { right: 18px; }
.narrow .lbl.fb .tab i { font-size: 10.5px; padding: 3px 5px; }
.lbl.ff { z-index: 30; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 28%), var(--c); border-radius: 2px 2px 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 -3px 8px -3px rgba(42, 39, 56, .3); }
.lbl.ff::after { content: ""; position: absolute; left: 0; right: 0; top: 36%; border-top: 1px solid rgba(42, 39, 56, .09); }
.lbl.band { z-index: 40; display: grid; place-items: center; background: var(--sand); color: var(--ink); font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 2px 0 rgba(42, 39, 56, .14); }
.lbl.slip { z-index: 45; padding: 6px 10px; border-radius: 2px; background: var(--paper); color: var(--ink); font: 600 12px/1.2 var(--sans); box-shadow: 0 1px 0 rgba(42, 39, 56, .12), 0 8px 18px -12px rgba(42, 39, 56, .6); }
.lbl.card { z-index: 40; padding: 12px 14px; border-radius: 4px; background: var(--paper); box-shadow: 0 1px 0 rgba(42, 39, 56, .1), 0 26px 44px -28px rgba(42, 39, 56, .6); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card-h b { font: 400 22px/1 var(--serif); }
.card-h span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }

.steps { position: relative; z-index: 1; padding-bottom: 34vh; }
.step { min-height: 74vh; min-height: 74svh; padding-top: 3vh; }
.step-in { max-width: 34rem; padding: 4px 0 6px 22px; border-left: 2px solid rgba(42, 39, 56, .14); position: relative; }
.step-in::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--ink); transform-origin: top; }
.is-live .step-in::before { transform: scaleY(0); transition: transform .6s cubic-bezier(.22, .7, .2, 1); }
.is-live .step.is-on .step-in::before { transform: scaleY(1); }
.step-n { display: inline-block; padding: 4px 10px 3px; border-radius: 6px 6px 0 0; background: var(--ground-3); font-size: 12px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; transition: background .4s; }
.is-live .step.is-on .step-n { background: var(--sand); }
.step h3 { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(25px, 2.7vw, 38px); line-height: 1.06; text-wrap: balance; }
.step p { margin-top: 12px; color: var(--ink-2); max-width: 46ch; font-size: 16px; line-height: 1.55; }

@media (min-width: 900px) {
  .scrolly { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 6vw, 96px); }
  .stage-wrap { order: 2; align-self: start; height: 100vh; height: 100svh; padding: 0; align-items: center; background: none; }
  .stage { height: min(80vh, 680px); }
  .steps { order: 1; padding-top: 6vh; padding-bottom: 38vh; }
  .step { min-height: 86vh; display: flex; align-items: center; padding-top: 0; }
  .step p { font-size: 17px; line-height: 1.6; }
  .drawer .note .long { display: inline; }
}

/* ---------- Arbeitsliste: Mappe mit Reitern ---------- */
.work { padding-block: clamp(72px, 12vh, 140px); }
.file { margin-top: clamp(40px, 6vh, 64px); position: relative; }
.tabs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 6px; padding: 0 14px; margin-bottom: -8px; }
.tabs[hidden] { display: none; }
.tb {
  position: relative; display: block; padding: 5px 5px 12px; border: 0; border-radius: 9px 9px 0 0; background: var(--c, var(--ground-3)); color: var(--ink);
  font: 600 15px/1.2 var(--sans); cursor: pointer; transform: translateY(6px); transition: transform .25s cubic-bezier(.22, .7, .2, 1), box-shadow .25s;
}
.tb > span { display: block; padding: 7px 12px; border-radius: 3px; background: var(--paper); }
.tb .n { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tb:hover { transform: translateY(2px); }
.tb[aria-pressed="true"] { z-index: 3; transform: translateY(0); box-shadow: 0 -6px 14px -10px rgba(42, 39, 56, .5); }
.tb[aria-pressed="true"] > span { font-weight: 700; box-shadow: inset 0 -2px 0 var(--ink); }
.t-all { --c: var(--ground-3); }
.file-body { position: relative; z-index: 2; padding: clamp(12px, 2.4vw, 26px); border-radius: 6px; background: linear-gradient(180deg, #d3cee0, #cbc5d9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 40px 80px -56px rgba(42, 39, 56, .6); }
.sheet { padding: clamp(16px, 3vw, 34px); border-radius: 3px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .08), 0 18px 36px -26px rgba(42, 39, 56, .55); }
.sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.sheet-head h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; }
.count { color: var(--ink-2); font-size: 15px; font-variant-numeric: tabular-nums; }
.wl { margin-top: 16px; }
.wl-row, .wl-headrow { display: grid; align-items: center; gap: 14px; grid-template-columns: 20px minmax(0, 1fr) minmax(0, .8fr) auto 10px; }
.wl-headrow { padding: 0 10px 10px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.wl-row { min-height: 60px; padding: 12px 10px; border-bottom: 1px solid var(--line); overflow: hidden; }
.wl-row:last-child { border-bottom: 0; }
.wl-row[hidden] { display: none; }
.wl-doc svg { display: block; width: 18px; height: 18px; }
.sk { height: 8px; border-radius: 4px; background: #e2deea; }
.sk.s1 { width: 78%; } .sk.s2 { width: 62%; } .sk.s3 { width: 86%; } .sk.s4 { width: 54%; } .sk.s5 { width: 70%; }
.c-kunde, .c-betrag { display: none; }
.age { height: 8px; border-radius: 4px; background: #ebe8f0; overflow: hidden; }
.age i { display: block; height: 100%; border-radius: 4px; background: var(--ink-2); opacity: .5; }
.age .a0 { width: 4%; } .age .a3 { width: 34%; } .age .a5 { width: 48%; } .age .a6 { width: 60%; } .age .a8 { width: 78%; } .age .a9 { width: 92%; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-left: 4px solid var(--c); border-radius: 3px; background: var(--ct); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.chip svg { width: 6px; height: 16px; color: var(--slate-d); }
.wl-row.locked { background: repeating-linear-gradient(135deg, rgba(217, 221, 227, .55) 0 9px, rgba(251, 250, 247, 1) 9px 18px); }
.chev { width: 8px; height: 8px; border-top: 2px solid var(--ink-2); border-right: 2px solid var(--ink-2); transform: rotate(45deg); }
.paper-note { margin-top: 16px; color: var(--ink-2); font-size: 16px; }
@media (min-width: 760px) {
  .wl-row, .wl-headrow { grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) 210px 10px; }
  .c-kunde, .c-betrag { display: block; }
}
@media (max-width: 459px) {
  .wl-row, .wl-headrow { grid-template-columns: minmax(0, 1fr) auto 8px; gap: 10px; }
  .wl-row { padding: 12px 4px; }
  .wl-headrow { padding: 0 4px 10px; }
  .wl-doc, .age, .age-h { display: none; }
  .chip { font-size: 13px; padding: 5px 9px 5px 8px; }
  .tb { font-size: 14px; }
  .tb > span { padding: 6px 9px; }
}

/* ---------- Im Detail: Kennzahlen als Karteikarten mit Staffelreitern ---------- */
.kz { padding-block: clamp(72px, 12vh, 140px); border-top: 1px solid rgba(42, 39, 56, .1); }
.kz-list { display: grid; gap: clamp(64px, 9vh, 96px); margin-top: clamp(64px, 9vh, 96px); }
.kz-card { position: relative; display: grid; align-items: center; border-radius: 4px 4px 6px 6px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .08), 0 30px 60px -44px rgba(42, 39, 56, .6); }
.kz-tab { position: absolute; bottom: 100%; left: 5%; padding: 6px 14px 5px; border-radius: 7px 7px 0 0; background: var(--sand); color: var(--ink); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.kz-card:nth-child(2) .kz-tab { left: 39%; }
.kz-card:nth-child(3) .kz-tab { left: auto; right: 5%; }
.kz-text { padding: 22px 18px 26px; }
.kz-text h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(27px, 2.7vw, 38px); line-height: 1.06; text-wrap: balance; }
.kz-text p { margin-top: 14px; max-width: 56ch; color: var(--ink-2); text-wrap: pretty; }
.kz-text a { color: var(--ink); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kz-text a:hover { text-decoration-thickness: 2px; }
.kz-fig i, .zs-map i { font-style: normal; }
.kz-card > * { min-width: 0; }
.kz-fig { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #d9d4e3 0%, #cdc7da 100%); box-shadow: inset 0 0 0 1px rgba(42, 39, 56, .07); }
.kz-end { position: absolute; top: 12px; left: 14px; font-size: 12.5px; font-weight: 600; line-height: 1.2; color: var(--ink); }
.kz-end.kz-r { left: auto; right: 14px; }
@media (min-width: 600px) { .kz-fig { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) {
  .kz-card { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 3.4vw, 52px); padding: 26px; }
  .kz-fig { border-radius: 6px; }
  .kz-text { padding: 0 8px 0 0; }
}

/* DSO: Belege laufen auf Schienen von der Rechnung bis zur Zahlung, der Mittelwert hängt als Reiter darunter */
.kd-rows { position: absolute; left: 6%; right: 6%; top: 44px; bottom: 46px; display: grid; grid-template-rows: repeat(5, 1fr); --sw: 13%; --m: .56; }
.kd-r { position: relative; --p: 1; border-top: 2px solid var(--rail); }
.kd-r::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid var(--rail-2); }
.kd-r:nth-child(1) { --to: .38; } .kd-r:nth-child(2) { --to: .62; } .kd-r:nth-child(3) { --to: .46; } .kd-r:nth-child(4) { --to: .8; } .kd-r:nth-child(5) { --to: .54; }
.kd-tr { position: absolute; z-index: 1; left: 0; top: -2px; width: 100%; height: 2px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(calc(var(--p) * var(--to) * .87 + .065)); }
.kd-s {
  position: absolute; z-index: 2; left: 0; top: 6px; height: 64%; min-height: 12px; width: var(--sw); border-radius: 2px; transform: translateX(calc(var(--p) * var(--to) * 669.23%));
  background: linear-gradient(#cfcad9, #cfcad9) 16% 38% / 44% 2px no-repeat, linear-gradient(#e7e3ec, #e7e3ec) 16% 66% / 60% 2px no-repeat, var(--paper);
  box-shadow: 0 0 0 1px rgba(42, 39, 56, .12), 0 6px 12px -8px rgba(42, 39, 56, .55);
}
.kd-s::before { content: ""; position: absolute; left: 14%; right: 14%; top: -6px; height: 6px; border: 2px solid var(--rail); border-bottom: 0; border-radius: 5px 5px 0 0; }
.kd-m { position: absolute; z-index: 3; top: -12px; bottom: -6px; width: 2px; margin-left: -1px; left: calc(var(--m) * (100% - var(--sw)) + var(--sw) / 2); --q: 1; }
.kd-m::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--ink) 0 5px, transparent 5px 9px); transform-origin: 50% 0; transform: scaleY(var(--q)); }
.kd-m b { position: absolute; top: 100%; left: 1px; transform: translate(-50%, 0); padding: 5px 9px 4px; border-radius: 0 0 6px 6px; background: var(--sand); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; opacity: var(--q); }

/* Aging: drei Mappen nach Alter, ein unbezahlter Beleg wandert von Mappe zu Mappe */
.ka-rail { position: absolute; left: 3%; right: 3%; top: 30%; height: 6px; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail-2); }
.ka-f { position: absolute; top: calc(30% - 3px); bottom: 0; width: 25%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(42, 39, 56, 0), rgba(42, 39, 56, .14)), var(--cd); }
.ka-f::before { content: ""; position: absolute; left: -5px; right: -5px; top: -4px; height: 7px; border: 2px solid var(--rail); border-bottom: 0; border-radius: 7px 7px 0 0; }
.ka-f::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 42%; bottom: 0; background: var(--c); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 -3px 8px -3px rgba(42, 39, 56, .3); }
.ka-f.f0 { left: 7%; } .ka-f.f1 { left: 37.5%; } .ka-f.f2 { left: 68%; }
.ka-tab { position: absolute; bottom: calc(100% + 3px); left: 5%; padding: 3px 6px; border: 3px solid var(--c); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.ka-p { position: absolute; z-index: 2; left: 14%; right: 14%; height: 48%; border-radius: 2px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .1); }
.ka-p:nth-of-type(1) { top: 12%; } .ka-p:nth-of-type(2) { top: 19%; left: 17%; } .ka-p:nth-of-type(3) { top: 26%; left: 11%; }
.ka-mov {
  position: absolute; z-index: 2; left: 10.5%; top: 38%; width: 18%; height: 34%; --x: 2; --lift: 0; border-radius: 2px; transform: translate(calc(var(--x) * 169.44%), calc(var(--lift) * -79.4%));
  background: linear-gradient(#cfcad9, #cfcad9) 14% 16% / 40% 3px no-repeat, repeating-linear-gradient(180deg, #e7e3ec 0 2px, transparent 2px 8px) 50% 70% / 74% 40% no-repeat, var(--paper);
  box-shadow: 0 0 0 2px var(--ink), 0 12px 20px -12px rgba(42, 39, 56, .7);
}
.ka-mov::before { content: ""; position: absolute; right: 12%; top: -7px; width: 14px; height: 7px; border-radius: 3px 3px 0 0; background: var(--ink); }

/* Betragsgewichtet: Belege bekommen die Größe ihres Betrags, der gewichtete Reiter rückt zur großen Rechnung */
.kw-rail { position: absolute; left: 4%; right: 4%; top: 26%; height: 6px; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail-2); }
.kw-t { position: absolute; left: 10%; right: 10%; top: calc(26% + 5px); bottom: 12px; --g: 1; }
.kw-s {
  position: absolute; z-index: 2; top: 3px; width: 13%; margin-left: -6.5%; left: calc(var(--x) * 100%); height: calc((.3 + var(--g) * (var(--a) - .3)) * 60%); border-radius: 2px;
  background: linear-gradient(#cfcad9, #cfcad9) 18% 14px / 46% 2px no-repeat, var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .12), 0 8px 14px -9px rgba(42, 39, 56, .55);
}
.kw-s::before { content: ""; position: absolute; left: 14%; right: 14%; top: -7px; height: 6px; border: 2px solid var(--rail); border-bottom: 0; border-radius: 5px 5px 0 0; }
.kw-s:nth-child(3) { --x: .06; --a: .34; } .kw-s:nth-child(4) { --x: .2; --a: .42; } .kw-s:nth-child(5) { --x: .34; --a: .34; }
.kw-s:nth-child(6) { --x: .5; --a: .5; } .kw-s:nth-child(7) { --x: .9; --a: 1; }
.kw-m { position: absolute; z-index: 1; top: -2px; bottom: 0; width: 2px; margin-left: -1px; }
.kw-m::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, var(--ink) 0 5px, transparent 5px 9px); }
.kw-m0 { z-index: 2; left: 40%; bottom: 32px; } .kw-m0::before { opacity: .45; }
.kw-m1 { left: calc((.4 + var(--g) * .127) * 100%); }
.kw-m b { position: absolute; left: 1px; transform: translateX(-50%); padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.kw-m0 b { bottom: 0; background: var(--paper); color: var(--ink-2); box-shadow: inset 0 0 0 1.5px var(--rail-2); }
.kw-m1 b { bottom: 0; background: var(--sand); color: var(--ink); }

/* ---------- Übersicht: die Demo-Ansicht als abgelegtes Dokument ---------- */
.view { padding-bottom: clamp(72px, 12vh, 140px); }
.view-grid { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
.shot { position: relative; padding: 14px 14px 18px; border-radius: 4px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .08), 0 40px 80px -50px rgba(42, 39, 56, .6); }
.shot-tab { position: absolute; bottom: 100%; left: 18px; padding: 6px 12px 5px; border-radius: 6px 6px 0 0; background: var(--sand); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.shot a { display: block; border-radius: 2px; overflow: hidden; text-decoration: none; }
.shot img { width: 100%; }
.shot figcaption { margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.shot figcaption b { color: var(--ink); font-weight: 600; }
.view-text h2 { font-size: clamp(32px, 3.8vw, 52px); }
.view-p { margin-top: 18px; max-width: 58ch; color: var(--ink-2); }
.feat-h { margin-top: 34px; }
.feat { margin-top: 12px; }
.feat li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid rgba(42, 39, 56, .14); }
.feat li::before { content: ""; position: absolute; left: 0; top: 18px; width: 20px; height: 12px; border-radius: 4px 4px 0 0; background: var(--sand); }
.feat li:nth-child(1)::before { background: linear-gradient(90deg, var(--sage) 50%, var(--sand) 50%); }
.feat li:nth-child(2)::before { background: linear-gradient(90deg, var(--sage) 33%, var(--sand) 33% 66%, var(--mauve) 66%); }
.feat li:nth-child(3)::before { background: var(--ink); }
.feat li:nth-child(4)::before { background: var(--slate); }
.feat li:nth-child(5)::before { background: var(--ground-3); box-shadow: inset 0 -2px 0 var(--ink); }
@media (min-width: 900px) { .view-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ---------- Zusammenspiel: Querverweise zu den Nachbarmappen ---------- */
.zs { padding-block: clamp(72px, 12vh, 140px); border-top: 1px solid rgba(42, 39, 56, .1); }
.zs-grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
.zs-text > p:not(.label) { margin-top: 18px; max-width: 54ch; color: var(--ink-2); }
.zs-links { display: grid; gap: 14px; margin-top: 28px; }
.zs-a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 14px; padding: 18px 50px 20px 18px; border-radius: 4px;
  background: var(--paper); text-decoration: none; box-shadow: 0 0 0 1px rgba(42, 39, 56, .08), 0 18px 36px -28px rgba(42, 39, 56, .55);
  transition: transform .25s cubic-bezier(.22, .7, .2, 1), box-shadow .25s;
}
.zs-a::after { content: ""; position: absolute; right: 22px; top: 27px; width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.zs-a:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(42, 39, 56, .14), 0 22px 40px -26px rgba(42, 39, 56, .6); }
.zs-code { padding: 4px 8px 3px; border-radius: 5px 5px 0 0; background: var(--ground-3); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.zs-name { font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--serif); }
.zs-why { grid-column: 1 / -1; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.zs-map {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 10px;
  background: linear-gradient(180deg, #d9d4e3 0%, #cdc7da 100%); box-shadow: inset 0 0 0 1px rgba(42, 39, 56, .07), 0 40px 80px -56px rgba(42, 39, 56, .6);
}
.zs-rail { position: absolute; left: 3%; right: 3%; top: 36%; height: 6px; border-top: 2px solid var(--rail); border-bottom: 2px solid var(--rail-2); }
.zs-th { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.zs-th path { fill: none; stroke: var(--ink-2); stroke-width: .34; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke .25s; }
.zs-f { position: absolute; top: calc(36% - 3px); bottom: 0; width: 24%; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgba(42, 39, 56, 0), rgba(42, 39, 56, .14)), var(--fb, #a9a3bb); transition: translate .3s cubic-bezier(.22, .7, .2, 1); }
.zs-f::before { content: ""; position: absolute; left: -5px; right: -5px; top: -4px; height: 7px; border: 2px solid var(--rail); border-bottom: 0; border-radius: 7px 7px 0 0; }
.zs-f::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 40%; bottom: 0; background: var(--ff, #bdb7cc); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 -3px 8px -3px rgba(42, 39, 56, .3); }
.zs-n0 { left: 8%; } .zs-n1 { left: 68%; }
.zs-me { left: 38%; --fb: var(--sand-d); --ff: var(--sand); }
.zs-me::after { background: linear-gradient(90deg, var(--sage) 0 25%, var(--sand) 25% 50%, var(--mauve) 50% 75%, var(--slate) 75%) 0 0 / 100% 5px no-repeat, var(--sand); }
.zs-tab { position: absolute; z-index: 4; left: 50%; top: 56%; transform: translateX(-50%); padding: 3px 9px; border: 2px solid #a39db3; border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.3; white-space: nowrap; }
.zs-ref { position: absolute; z-index: 2; top: 2%; width: 40%; height: 46%; display: grid; justify-items: center; padding-top: 10%; border-radius: 2px; background: var(--paper); color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 1px rgba(42, 39, 56, .12), 0 10px 18px -12px rgba(42, 39, 56, .6); transform-origin: 50% 100%; transition: rotate .3s cubic-bezier(.22, .7, .2, 1); }
.zs-ref::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 2px 2px 0 0; background: var(--slate); }
.zs-r0 { left: 8%; transform: rotate(-12deg); } .zs-r1 { right: 8%; transform: rotate(12deg); }
.zs-map.hot0 .zs-n0, .zs-map.hot1 .zs-n1 { translate: 0 -14px; }
.zs-map.hot0 .zs-r0 { rotate: -6deg; } .zs-map.hot1 .zs-r1 { rotate: 6deg; }
.zs-map.hot0 .zs-th path:first-child, .zs-map.hot1 .zs-th path:last-child { stroke: var(--ink); }
@media (min-width: 900px) { .zs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Technik & Rolle: Karteikarte im Kasten ---------- */
.tr { padding-block: clamp(72px, 12vh, 140px); border-top: 1px solid rgba(42, 39, 56, .1); }
.tr-grid { display: grid; gap: clamp(24px, 4vw, 80px); align-items: start; }
.tr-box { position: relative; padding: 8px 0 34px; overflow: hidden; }
.tr-card { position: relative; z-index: 1; padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 34px) 46px; border-radius: 4px; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .08), 0 24px 50px -34px rgba(42, 39, 56, .6); }
.tr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 14px; border-bottom: 2px solid var(--mauve); font: 400 clamp(26px, 2.6vw, 34px)/1.1 var(--serif); }
.tr-code { padding: 5px 8px 4px; border-radius: 4px; background: var(--ground-3); font: 700 12px/1 var(--sans); letter-spacing: .12em; }
.tr-dl { margin: 0; }
.tr-dl > div { display: grid; gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tr-dl dt { padding-top: 2px; color: var(--ink-2); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.tr-dl dd { margin: 0; }
.tr-front { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #d6d1e1, #c4bed3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 -14px 28px -16px rgba(42, 39, 56, .5); }
.tr-holder { padding: 3px 12px; border: 2px solid #a39db3; border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.3; }
.tr-grip { display: block; width: 64px; height: 8px; border-radius: 6px; background: #b2acc3; box-shadow: inset 0 2px 3px rgba(42, 39, 56, .35); }
@media (min-width: 600px) { .tr-dl > div { grid-template-columns: 8.5rem minmax(0, 1fr); } }
@media (min-width: 900px) { .tr-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

/* ---------- Fuß ---------- */
.foot { padding-block: clamp(48px, 8vh, 88px) 40px; background: var(--ground-2); border-top: 1px solid rgba(42, 39, 56, .1); }
.foot-title { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 22px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(42, 39, 56, .22); text-decoration: none; font-size: 15px; font-weight: 600; }
.foot-nav a:hover { background: var(--paper); }
/* Weitere Projekte: Nachbarmappen in der Reihenfolge der Projektliste */
.wp { margin-top: clamp(40px, 6vh, 64px); padding-top: 26px; border-top: 1px solid rgba(42, 39, 56, .14); }
.wp-row { display: grid; gap: 40px 18px; margin-top: 40px; }
/* Das Papier der Mappe liegt in ::after, damit der Reiter dahinter verschwinden kann */
.wp-a { position: relative; isolation: isolate; display: grid; gap: 6px; padding: 18px 20px 22px; border-radius: 3px 3px 6px 6px; text-decoration: none; transition: transform .3s cubic-bezier(.22, .7, .2, 1); }
.wp-a::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--paper); box-shadow: 0 0 0 1px rgba(42, 39, 56, .08), 0 18px 36px -28px rgba(42, 39, 56, .55); transition: box-shadow .3s; }
.wp-a:hover, .wp-a:focus-visible { transform: translateY(-6px); }
.wp-a:hover::after, .wp-a:focus-visible::after { box-shadow: 0 0 0 1px rgba(42, 39, 56, .14), 0 26px 44px -26px rgba(42, 39, 56, .6); }
.wp-tab { position: absolute; z-index: -1; bottom: 100%; left: 18px; padding: 5px 11px 4px; border-radius: 6px 6px 0 0; background: var(--sand); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.wp-next .wp-tab { left: auto; right: 18px; }
.wp-next { text-align: right; }
.wp-dir { color: var(--ink-2); font-size: 15px; font-weight: 600; }
.wp-name { font: 400 clamp(28px, 3vw, 38px)/1.05 var(--serif); }
.wp-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 22px; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 600; }
.wp-all:hover { background: #3b374d; }
@media (min-width: 700px) { .wp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.foot small { display: block; margin-top: 26px; color: var(--ink-2); font-size: 14px; }

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

/* ---------- Druck ----------
   Weißes Papier statt Lavendelgrund. Die Schaubilder (Registratur, Stapel, Mappen, Kennzahlen) drucken ihre Flächen
   mit, sonst blieben nur leere Rahmen. Die Bühne steht still über den sechs Schritten und zeigt das Ruhebild
   (das Skript legt die Belege beim Drucken in ihre Mappen); Filterreiter, Zurück-Knopf und Scrollhinweis entfallen. */
@media print {
  html, body, .foot { background: #fff; }
  .skip, .back, .cue, .tabs, .board .lbl { display: none; }
  .hero, .ag, .work, .kz, .zs, .tr { padding-block: 28px; }
  .sort { padding-top: 28px; }
  .view { padding-bottom: 28px; }
  .foot { padding-top: 28px; }
  .reg, .ag-fig, .stage, .file, .kz-card, .shot, .tr-box, .zs-map { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Reiter über Karte und Abzug in die Karte holen: freistehend blieben sie sonst am Fuß der vorigen Seite zurück */
  .kz-tab, .shot-tab { position: static; justify-self: start; display: inline-block; margin: 0 0 10px; }
  /* Kennzahlen zweispaltig wie am breiten Bildschirm: drei Karten passen auf eine Seite */
  .kz-list { gap: 24px; margin-top: 24px; }
  .kz-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 8px 24px; padding: 16px 20px 20px; }
  .kz-tab { grid-column: 1 / -1; }
  .kz-text { padding: 0; }
  .kz-text h3 { font-size: 24px; }
  .kz-text p { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .stage-wrap { position: static; height: auto; padding: 0; background: none; }
  .stage { height: 460px; }
  .steps { padding: 8px 0 0; }
  .step { min-height: 0; padding-top: 20px; }
  .wp-all { background: none; color: var(--ink); border: 1.5px solid var(--ink); }
  .reg, .ag-fig, .stage-wrap, .kz-card, .shot, .tr-card, .zs-map, .wp-a, .step, .wl-row { break-inside: avoid; }
  h1, h2, h3, .label, .eyebrow { break-after: avoid; }
}