/* Zahlstatus-Prüfung – eigene Projektseite. Welt: Kontor bei Lampenlicht.
   Ochsenblut-Schreibunterlage mit Goldprägung, cremefarbene Belege, Messinglampe.
   Farbsprache: Grün = ausgeglichen, Ochsenblut-Rot auf Papier = offen, Lampengold = Licht und Akzent,
   gestrichelter Bernstein = möglicher Banktreffer (bleibt lose). */

/* ---------- 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:#f4ead8}
  ::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 Sans";src:url('../fonts/instrument-sans-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url('../fonts/instrument-sans-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}
@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-024F,U+1E00-1EFF,U+2C60-2C7F,U+A720-A7FF}

:root{
  --leather:#3a1420;--leather-dk:#2b0e17;--tool:rgba(230,180,90,.3);
  --text:#f4ead8;--soft:#e3d3bd;--mist:#c9ad97;
  --paper:#faf3e6;--paper-2:#f1e5cf;--tile:#fcf7ee;--rule:#e6d6ba;
  --ink:#2a1a14;--ink-2:#6b5648;--skel:#e3d3b6;
  --gold:#e6b45a;--amber:#f0a347;
  --green:#3c8d5a;--green-ink:#2b6b42;--green-soft:#dcebd7;--green-lt:#7fca97;
  --red-ink:#8e2b3b;--red-soft:#f1d9d4;--seal:#7a2333;--track:#f0e1c2;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --gut:clamp(16px,4vw,56px);--maxw:1480px;
  --shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(120,80,40,.1),0 34px 60px -30px rgba(18,0,6,.85),0 12px 24px -14px rgba(18,0,6,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;background:var(--leather);-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-width:320px;overflow-x:clip;font:400 1.0625rem/1.6 var(--sans);color:var(--text);background:radial-gradient(140% 90% at 70% 0%,#4a1a2a 0%,rgba(58,20,32,0) 55%) no-repeat,linear-gradient(180deg,#3a1420 0%,#341119 60%,#2b0e16 100%);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:10px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:12px;top:-90px;z-index:30;padding:10px 18px;border-radius:999px;background:var(--text);color:var(--ink);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.serif,.kicker,.step__no,.card-title,.h1-q em,.step h2 em,.answer h2 em,.thesis__big em{font-family:var(--serif);font-style:italic;font-weight:400}

/* ---------- Kopf: 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:12px;padding:18px clamp(16px,3vw,40px)}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:9px 20px 9px 16px;border:1px solid rgba(244,234,216,.3);border-radius:999px;background:rgba(34,10,18,.55);color:var(--text);font-weight:600;text-decoration:none;transition:background-color .25s,color .25s,border-color .25s}
.back:hover{background:var(--text);border-color:var(--text);color:var(--leather)}
.back.demo{margin-left:auto;white-space:nowrap;gap:0} /* Bedien-Demo mit Fantasiedaten (demo-zahlstatus.html), steht direkt vor dem Namen */
@media (max-width:599px){.demo-zusatz{display:none}}
.back span[aria-hidden]{font-size:1.15em;line-height:1}
.brand{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-left:.3em;font-size:.8125rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--mist)}
.brand::after{content:"";position:absolute;left:50%;bottom:5px;width:34px;height:1px;background:var(--gold);opacity:.7;transform:translateX(-50%)}
.brand:hover{color:var(--text)}
/* schmale Handys: alle drei Ziele in einer Zeile, der Name ungekürzt */
@media (max-width:399.98px){
  .top{gap:8px}
  .top .back{gap:6px;padding:9px 12px;font-size:.9375rem}
  .brand{padding-left:.1em;font-size:.75rem;letter-spacing:.1em}
}
@media (max-width:359.98px){
  .top .back{padding:9px 10px}
  .brand{padding-left:.04em;font-size:.6875rem;letter-spacing:.04em}
}

.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mist)}
.kicker{font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.2;color:var(--gold)}

/* ---------- Einstieg ---------- */
.hero{position:relative;overflow:clip;padding:clamp(16px,4vh,56px) var(--gut) clamp(64px,11vh,128px)}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,96px);align-items:center;max-width:var(--maxw);min-height:min(calc(100svh - 170px),860px);margin:0 auto}
.h1-name{display:block;margin:20px 0 14px;font-size:clamp(1.125rem,.95rem + .6vw,1.5rem);font-weight:600;color:var(--text)}
.h1-q{display:block;font-size:clamp(2.75rem,1.1rem + 5.6vw,6.5rem);font-weight:700;line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.h1-q em{font-size:1.1em;letter-spacing:-.01em;color:var(--gold)}
.lead{max-width:27em;margin-top:clamp(20px,3vh,32px);font-size:clamp(1.125rem,1rem + .45vw,1.4rem);line-height:1.5;color:var(--soft)}
.cue{display:inline-flex;align-items:center;gap:14px;min-height:44px;margin-top:clamp(24px,4vh,40px);font-weight:600;text-decoration:none}
.cue i{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(244,234,216,.32);border-radius:50%;font-style:normal;transition:background-color .25s,color .25s,border-color .25s}
.cue:hover i{background:var(--gold);border-color:var(--gold);color:var(--leather)}

/* Lampe über den Belegen */
.stage{position:relative}
.stage--hero{justify-self:center;width:100%;max-width:540px;padding:150px 0 124px}
.lamp-hang{position:absolute;z-index:1;top:0;left:38%;width:150px;transform:translateX(-50%)}
.lamp-hang::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:2px;height:60vh;margin-left:-1px;background:linear-gradient(to top,#8a6224,rgba(138,98,36,0))}
.lamp-shade{width:100%;height:auto}
.lamp-cone{position:absolute;z-index:0;top:0;left:-27%;width:130%;height:calc(100% - 10px);pointer-events:none}
.pool{position:absolute;z-index:0;top:110px;left:-18%;right:-18%;bottom:-40px;background:radial-gradient(closest-side,rgba(230,180,90,.2),rgba(230,180,90,.07) 55%,rgba(230,180,90,0));pointer-events:none}

/* Papier (Belege) */
.paper{border-radius:16px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);color:var(--ink);box-shadow:var(--shadow)}
.skel{display:block;height:12px;border-radius:6px;background:var(--skel)}
.skel--ink{background:#cbb79a}.skel--green{background:#c4dfc0}.skel--red{background:#ebc7c1}
.pill{display:inline-flex;align-items:center;padding:8px 15px;border-radius:999px;font-size:.9375rem;font-weight:600;white-space:nowrap}
.pill--q{background:#f6e3b8;color:#6b4a12;box-shadow:inset 0 0 0 1.5px rgba(107,74,18,.35)}
.pill--open{background:var(--red-soft);color:var(--red-ink)}
.pill--paid{background:var(--green-soft);color:var(--green-ink)}
.card-head{display:flex;align-items:center;gap:14px;color:var(--ink)}
.card-title{font-size:clamp(1.5rem,1.3rem + .6vw,1.875rem);line-height:1}
.ico-box{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tile);box-shadow:0 0 0 1px var(--rule),0 2px 4px rgba(42,26,20,.08)}
.doc-s{width:20px;height:24px}
.dots{display:flex;gap:4px;margin-left:auto}
.dots i{width:5px;height:5px;border-radius:50%;background:#8d7764}

.h-stack{position:relative;z-index:2}
.h-stack::before{content:"";position:absolute;inset:10px -8px -10px 10px;border-radius:16px;background:linear-gradient(180deg,#eadcc2,#e0cfb0);box-shadow:0 26px 40px -26px rgba(18,0,6,.9);transform:rotate(2.4deg)}
.h-card{position:relative;padding:clamp(16px,2.2vw,28px)}
.inv-block{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,1.6vw,18px);margin-top:18px;padding:clamp(14px,1.8vw,20px);border-radius:14px;background:var(--tile);box-shadow:0 0 0 1px var(--rule)}
.doc{width:clamp(40px,4.4vw,58px);height:auto;aspect-ratio:40/48}
.inv-id{display:grid;gap:9px;min-width:0}
.k{font-size:.875rem;color:var(--ink-2)}
.skel--id{width:82%;height:20px;background:#d6c3a1}
.skel--sub{width:56%;height:9px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,12px)}
.tiles--hero{margin-top:12px}
.tile{padding:clamp(11px,1.3vw,16px);border-radius:12px;background:var(--tile);box-shadow:0 0 0 1px var(--rule)}
.tile__k{display:block;font-size:.875rem;font-weight:600;color:var(--ink)}
.tile .skel{width:72%;height:14px;margin-top:12px}
.h-pay{position:absolute;z-index:3;right:0;bottom:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 14px;width:min(78%,330px);padding:15px 20px;border:1px solid rgba(230,180,90,.42);border-radius:14px;background:linear-gradient(180deg,#4a1a29,#36111d);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 26px 50px -22px rgba(18,0,6,.9);transform:rotate(-2deg)}
.ico-in{grid-row:span 2;width:42px;height:42px;padding:8px;border-radius:10px;background:rgba(230,180,90,.16);color:var(--gold)}
.h-pay b{font-size:1.0625rem}
.h-pay small{font-size:.875rem;line-height:1.3;color:var(--mist)}
.h-tether{position:absolute;left:-50px;top:-46px;width:90px;height:44px;overflow:visible;clip-path:inset(0% 0% 0% 0%)}
.h-tether path{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:4 6;stroke-linecap:round}
.h-tether circle{fill:var(--leather);stroke:var(--amber);stroke-width:2}
.h-knot{position:absolute;left:-17px;top:-35px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--leather);box-shadow:inset 0 0 0 1.5px var(--amber);color:var(--amber);font-family:var(--serif);font-style:italic;font-size:1.125rem;line-height:1}

/* ---------- These ---------- */
.thesis{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,13vh,150px) var(--gut);border-top:3px double var(--tool)}
.thesis__lead{max-width:34em;font-size:clamp(1.125rem,1rem + .4vw,1.375rem);font-weight:500;line-height:1.45;color:var(--mist)}
.thesis__big{max-width:21em;margin-top:22px;font-size:clamp(1.75rem,1.05rem + 2.7vw,3.6rem);font-weight:600;line-height:1.12;letter-spacing:-.028em;text-wrap:balance}
.thesis__big em{font-size:1.08em;letter-spacing:0;color:var(--amber);text-decoration:underline dashed 2px;text-decoration-color:rgba(240,163,71,.8);text-underline-offset:.14em}

/* ---------- Neue Abschnitte: gemeinsame Köpfe und Lesetext ---------- */
.situation,.steps-head,.detail,.relate,.tech,.more{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut);border-top:3px double var(--tool)}
.steps-head{padding-bottom:0}
.situation h2,.steps-head h2,.detail h2,.relate h2,.tech h2{margin-top:12px;font-size:clamp(2rem,1.25rem + 2.9vw,4rem);font-weight:700;line-height:1.04;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
.situation h2 em,.steps-head h2 em,.detail h2 em,.relate h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.08em;letter-spacing:0;color:var(--gold)}
.sec__head{max-width:50rem}
.sec__lead,.situation__text p:not(.kicker),.dt__text p:not(.dt__no){max-width:33em;margin-top:18px;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);color:var(--soft)}
.situation__text h2+p{margin-top:26px}

/* ---------- Ausgangslage: der Stempel „bezahlt“ schwebt über dem Feld – ohne Zuordnung kein Abdruck ---------- */
.situation__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,112px);align-items:center}
.stage--stamp{--sw:clamp(100px,5vw + 60px,132px);width:100%;max-width:520px;justify-self:center;padding-top:calc(var(--sw) * 1.17 - 52px)}
.st-inv{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "pill field" "lines field";align-items:center;gap:10px 18px;padding:clamp(16px,2.4vw,26px)}
.st-inv .inv__head{grid-area:head;display:flex;align-items:center;gap:12px;min-width:0}
.st-inv .doc{width:34px}
.st-inv b{font-size:1.0625rem}
.st-inv .pill{grid-area:pill;justify-self:start;padding:6px 13px}
.st-field{grid-area:field;position:relative;display:grid;place-items:center;width:calc(var(--sw) + 16px);height:84px;border:2px dashed rgba(142,43,59,.42);border-radius:12px;background:rgba(241,217,212,.4)}
.st-ghost{font-family:var(--serif);font-style:italic;font-size:1.625rem;line-height:1;color:rgba(122,35,51,.74);transform:rotate(-7deg)}
.st-shadow{position:absolute;left:10%;right:10%;top:22%;bottom:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(58,20,32,.3),rgba(58,20,32,0))}
.stp{position:absolute;z-index:2;left:calc(50% - var(--sw) / 2);bottom:calc(100% + 16px);width:var(--sw);aspect-ratio:120/140;transform-origin:50% 100%;filter:drop-shadow(0 16px 14px rgba(18,0,6,.45))}
.stp>*{position:absolute;display:block}
.stp__knob{left:26.5%;top:0;width:47%;height:28.5%;border-radius:50% 50% 44% 44%/60% 60% 40% 40%;background:radial-gradient(circle at 36% 30%,#fff3d2 0,#ecc985 20%,#c8963f 55%,#6b4517 100%)}
.stp__neck{left:42.5%;top:24%;width:15%;height:30%;background:linear-gradient(90deg,#3b1f12,#80502e 45%,#4a2716)}
.stp__collar{left:31.5%;top:50%;width:37%;height:7%;border-radius:3px;background:linear-gradient(90deg,#5e3b12,#e9c87e 38%,#c8963f 58%,#4f3110)}
.stp__base{left:0;top:55.5%;width:100%;height:36%;display:grid;place-items:center;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#61392a,#3b1f12);box-shadow:inset 0 1px 0 rgba(255,220,170,.28)}
.stp__plate{padding:2px 10px 3px;border-radius:3px;background:linear-gradient(180deg,#f3dba2,#d3a552);color:#3b2410;font-family:var(--serif);font-style:italic;font-size:1rem;line-height:1.15}
.stp__rubber{left:5%;top:91.5%;width:90%;height:8.5%;border-radius:0 0 4px 4px;background:var(--seal)}
.st-lines{grid-area:lines;display:grid;gap:10px;margin-top:6px}
.st-lines .skel:nth-child(1){width:90%}.st-lines .skel:nth-child(2){width:72%}.st-lines .skel:nth-child(3){width:44%;height:9px}
.st-ways{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:18px}
.way{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;font-size:.9375rem;font-weight:600;line-height:1.3}
.way i{flex:none;width:16px;height:16px;border-radius:50%}
.way--miss{background:rgba(142,43,59,.34);color:#f6d6cf;box-shadow:inset 0 0 0 1.5px rgba(241,217,212,.28)}
.way--miss i{border:2px solid #eab0a7}
.way--loose{padding:6px 14px 6px 8px;border:2px dashed var(--amber);color:var(--amber)}
.way--loose i{border:2px dashed var(--amber)}

/* ---------- Funktionen im Detail: Kopf mit Registerreitern ---------- */
.register{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,40px)}
.register a{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 20px 6px 7px;border:1px solid rgba(230,180,90,.42);border-radius:999px;background:rgba(34,10,18,.42);font-weight:600;text-decoration:none;transition:background-color .25s,border-color .25s}
.register a span{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(230,180,90,.65);border-radius:50%;font-family:var(--serif);font-style:italic;font-size:1.125rem;line-height:1;color:var(--gold)}
.register a:hover{border-color:var(--gold);background:rgba(230,180,90,.14)}

/* ---------- Prüfschritte ---------- */
.step{position:relative;padding:clamp(56px,10vh,120px) var(--gut)}
.step__inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,112px);align-items:center;max-width:var(--maxw);margin:0 auto}
.step--flip .step__inner{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.step--flip .step__text{order:2}
.step__no{display:flex;align-items:center;gap:14px;font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.2;color:var(--gold)}
.step__no span{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid rgba(230,180,90,.65);border-radius:50%;font-size:1.375rem;line-height:1}
.step h2{margin-top:20px;font-size:clamp(1.75rem,1.15rem + 2.1vw,3.2rem);font-weight:700;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.step h2 em,.answer h2 em{font-size:1.08em;letter-spacing:0;color:var(--gold)}
.step__text p:not(.step__no){max-width:31em;margin-top:20px;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);color:var(--soft)}
/* Randnotiz im Kontobuch: die belegte Einzelheit zum Schritt */
.step__text p.step__note{margin-top:14px;padding-left:18px;border-left:2px solid rgba(230,180,90,.5);font-size:clamp(1rem,.97rem + .15vw,1.0625rem);color:var(--mist)}
.stage--compare,.stage--settle,.stage--merge,.stage--search{width:100%;max-width:680px;justify-self:center}
/* Lampenlicht auf der Unterlage: warmer Lichtfleck hinter jeder Szene */
.step .stage::before,.situation .stage::before,.dt .stage::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:130%;aspect-ratio:1.4;background:radial-gradient(closest-side,rgba(230,180,90,.14),rgba(230,180,90,.05) 55%,rgba(230,180,90,0));transform:translate(-50%,-50%);pointer-events:none}
.panel{padding:clamp(16px,2.4vw,30px)}

/* 1 Gegenüberstellen */
.stage--compare{--paid:.64}
.gauge{display:block;height:10px;margin-top:14px;overflow:hidden;border-radius:5px;background:#ece0c9}
.gauge i{display:block;height:100%;border-radius:inherit;background:#4a3428;transform-origin:left center}
.tile--paid .gauge i{background:var(--green);transform:scaleX(var(--paid))}
.tile--open .gauge i{background:var(--red-ink);transform:scaleX(calc(1 - var(--paid)))}
.brace{position:relative;height:34px;margin-top:clamp(22px,3vw,34px);border:2px solid #b9a07e;border-bottom:0;border-radius:10px 10px 0 0;transform-origin:center bottom}
.brace__k{position:absolute;left:50%;top:-13px;padding:0 10px;background:#f6ecdb;font-size:.875rem;font-weight:600;color:var(--ink-2);white-space:nowrap;transform:translateX(-50%)}
.split{position:relative;margin-top:6px}
.split__bar{position:relative;height:clamp(46px,5vw,60px);overflow:hidden;border-radius:12px;background:#ece0c9}
.split__paid,.split__open{position:absolute;inset:0}
.split__paid{background:linear-gradient(180deg,#46a068,#327c4d);transform-origin:left center;transform:scaleX(var(--paid))}
.split__open{background:repeating-linear-gradient(135deg,#efd2cc 0 9px,#e4bdb6 9px 18px);transform-origin:right center;transform:scaleX(calc(1 - var(--paid)))}
.split__mark{position:absolute;top:-7px;bottom:-7px;left:calc(var(--paid) * 100%);width:4px;margin-left:-2px;border-radius:2px;background:var(--ink);box-shadow:0 0 0 3px #f5eada}
.legend{display:flex;justify-content:space-between;margin-top:12px;font-size:.9375rem;font-weight:600}
.lg--paid{color:var(--green-ink)}.lg--open{color:var(--red-ink)}

/* 2 Ausgleich */
.track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:clamp(20px,2.6vw,30px) 8px;border-radius:14px;background:var(--track)}
.track__line{position:absolute;top:calc(clamp(20px,2.6vw,30px) + 22px);left:calc(100% / 6 + 4px);right:calc(100% / 6 + 4px);display:flex;height:4px;margin-top:-2px}
.seg{flex:1;background:var(--seal);transform-origin:left center;transform:scaleX(var(--s1,1))}
.seg--2{transform:scaleX(var(--s2,1))}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.dot{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:50%;background:var(--seal);color:var(--text);box-shadow:0 0 0 5px var(--track),inset 0 0 0 2px var(--seal)}
.dot svg{width:24px;height:24px}
.node b{font-size:1rem;color:var(--ink)}
.node small{font-size:.875rem;line-height:1.35;color:var(--ink-2)}
.op{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:14px;padding:14px 18px;border-radius:14px;background:var(--green-soft)}
.op__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--tile)}
.op__ico svg{width:20px;height:24px}
.op small{display:block;font-size:.875rem;color:var(--ink-2)}
.op__v{position:relative;display:block;font-size:1.25rem;font-weight:700;line-height:1.3;color:var(--green-ink)}
.v-open{position:absolute;left:0;top:0;color:var(--red-ink);visibility:hidden;opacity:0}
.op__chev{width:22px;height:22px;color:var(--ink-2)}
@media (max-width:540px){
  .track{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px}
  .node{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:center;text-align:left}
  .dot{grid-row:span 2;margin:0}
  .track__line{top:42px;bottom:42px;left:40px;right:auto;flex-direction:column;width:4px;height:auto;margin:0}
  .seg{transform-origin:center top;transform:scaleY(var(--s1,1))}
  .seg--2{transform:scaleY(var(--s2,1))}
}

/* 3 Zusammenführen: Belege rücken in die Kontoblatt-Ansicht */
.stage--merge{padding:clamp(28px,5vw,64px) 0}
.merge{position:relative;display:grid;gap:10px;max-width:min(460px,88%);margin:0 auto;padding:clamp(16px,2vw,24px)}
.merge::before{content:"";position:absolute;inset:0;border:3px double var(--tool);border-radius:18px}
.merge__frame{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,transparent 0 54px,rgba(142,43,59,.35) 54px 55px,transparent 55px 58px,rgba(142,43,59,.35) 58px 59px,transparent 59px),repeating-linear-gradient(180deg,transparent 0 33px,rgba(120,90,60,.12) 33px 34px),linear-gradient(180deg,var(--paper),var(--paper-2))}
.merge__head,.slip{position:relative;z-index:1}
.merge__head{margin-bottom:6px}
.slip{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:12px;background:var(--tile);color:var(--ink);box-shadow:0 0 0 1px var(--rule),0 12px 26px -16px rgba(42,26,20,.6)}
.slip b{font-size:1rem;white-space:nowrap}
.slip .skel{justify-self:end;width:min(100%,120px);height:10px}
.slip__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:10px}
.slip__ico svg{width:24px;height:24px}
.slip__ico--doc{background:#f3e6cc}.slip__ico--doc svg{width:20px}
.slip__ico--pay,.slip__ico--even{background:var(--green-soft);color:var(--green-ink)}
.slip__ico--op{background:var(--red-soft);color:var(--red-ink)}

/* 4 Suchen: Lampe, Liste nicht verbuchter Zahlungen, loser Treffer */
.stage--search{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(18px,2.6vw,36px);align-items:start}
.inv{padding:18px 18px 20px}
.inv__head{display:flex;align-items:center;gap:12px}
.inv__head .doc{width:34px}
.inv__head b{font-size:1.0625rem}
.inv__head .pill{margin-left:auto;padding:6px 13px}
.inv .skel{margin-top:14px}.skel--l{width:84%}.skel--s{width:52%;height:9px}
.tether{position:relative;width:0;height:40px;margin:16px 0 4px 34px;border-left:2px dashed var(--amber);transform-origin:center bottom}
.tether::before{content:"";position:absolute;left:-8px;top:-12px;width:14px;height:14px;border:2px solid var(--amber);border-radius:50%;background:var(--leather)}
.cand{position:relative;z-index:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 14px;padding:14px 16px;border:2px dashed var(--amber);border-radius:14px;background:rgba(58,20,32,.92);color:var(--amber);box-shadow:0 18px 34px -20px rgba(18,0,6,.9)}
.cand svg{grid-row:span 2;width:40px;height:40px;padding:8px;border-radius:10px;background:rgba(240,163,71,.16)}
.cand b{font-size:1rem;line-height:1.3}
.cand .skel{width:70%;height:9px;background:rgba(240,163,71,.32)}
.note{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:.9375rem;line-height:1.4;color:var(--soft)}
.note i{flex:none;width:18px;height:18px;border:2px dashed var(--amber);border-radius:50%}
.bank{position:relative;overflow:hidden;padding:16px;border:3px double var(--tool);border-radius:18px;background:linear-gradient(180deg,#2e0f19,#240b13);box-shadow:0 30px 60px -30px rgba(18,0,6,.85)}
.bank__head{display:flex;align-items:center;gap:12px;padding:4px 4px 14px;font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--soft)}
.lamp{flex:none;width:26px;height:14px;border-radius:13px 13px 3px 3px;background:linear-gradient(90deg,#5e3b12,#e9c87e 38%,#c8963f 58%,#4f3110);box-shadow:0 10px 16px -2px rgba(255,214,140,.55)}
.bank__list{display:grid;gap:8px}
.ln{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 44px;align-items:center;gap:12px;height:46px;padding:0 14px;border-radius:10px;background:rgba(244,234,216,.05)}
.ln i{display:block;border-radius:5px}
.ln__ico{width:28px;height:28px;border-radius:8px !important;background:rgba(244,234,216,.1)}
.ln__a{width:var(--w,72%);height:9px;background:rgba(244,234,216,.24)}
.ln__b{height:9px;background:rgba(244,234,216,.15)}
.ln:nth-child(2){--w:54%}.ln:nth-child(3){--w:80%}.ln:nth-child(4){--w:46%}.ln:nth-child(5){--w:64%}.ln:nth-child(6){--w:58%}
.ln--hit{background:rgba(240,163,71,.1)}
.ln--hit .ln__ico{background:rgba(240,163,71,.3)}.ln--hit .ln__a{background:rgba(240,163,71,.5)}
.ln__ring{position:absolute;inset:-3px;border:2px dashed var(--amber);border-radius:12px}
.beam{position:absolute;left:-20px;right:-20px;top:50%;height:130px;margin-top:-65px;background:radial-gradient(50% 50% at 50% 50%,rgba(255,214,140,.32),rgba(255,214,140,0) 72%);pointer-events:none;mix-blend-mode:screen}

/* ---------- Antwort ---------- */
.answer{max-width:var(--maxw);margin:0 auto;padding:clamp(72px,13vh,150px) var(--gut);border-top:3px double var(--tool)}
.answer h2{margin-top:12px;font-size:clamp(2.25rem,1.2rem + 4vw,5rem);font-weight:700;line-height:1;letter-spacing:-.04em;text-wrap:balance}
.verdicts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(32px,5vh,56px)}
.verdict{padding:clamp(22px,3vw,40px);border:3px double var(--tool);border-radius:20px;background:linear-gradient(180deg,rgba(255,240,220,.04),rgba(18,0,6,.12))}
.pair{display:flex;align-items:center;height:76px;margin-bottom:26px}
.mini{display:grid;place-items:center;flex:none;border-radius:12px}
.mini--inv{width:62px;height:74px;background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:0 14px 24px -14px rgba(18,0,6,.9)}
.mini--inv svg{width:28px;height:34px}
.mini--pay,.mini--cand{width:70px;height:56px}
.mini--pay{background:var(--green-soft);color:var(--green-ink)}
.mini--cand{border:2px dashed var(--amber);background:rgba(240,163,71,.1);color:var(--amber)}
.mini--pay svg,.mini--cand svg{width:30px;height:30px}
.link{position:relative;flex:0 0 clamp(56px,8vw,96px)}
.pair--joined .link{height:3px;background:var(--green);transform-origin:left center}
.knot{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--green);color:var(--text)}
.knot svg{width:18px;height:18px}
.pair--loose .link{height:0;margin:0 14px 0 12px;border-top:2px dashed var(--amber)}
.pair--loose .link::before{content:"";position:absolute;left:-14px;top:-8px;width:14px;height:14px;border:2px solid var(--amber);border-radius:50%;background:var(--leather)}
.verdict h3{font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:700;letter-spacing:-.02em}
.verdict--paid h3{color:var(--green-lt)}.verdict--loose h3{color:var(--amber)}
.verdict p{max-width:30em;margin-top:10px;color:var(--soft)}

/* ---------- Im Detail: kleine Szenen aus dem Kontor ---------- */
.dt{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,112px);align-items:center;margin-top:clamp(56px,10vh,120px)}
.dt--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.dt--flip .dt__text{order:2}
.dt__no{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);line-height:1.2;color:var(--gold)}
.dt__no::before{content:"";flex:none;width:30px;height:1px;background:currentColor;opacity:.7}
.dt h3{margin-top:14px;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.375rem);font-weight:700;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
.dt .stage{width:100%;max-width:640px;justify-self:center}

/* Workflows: Rohrpost durch n8n – je Ablauf eine Leitung, die Kapsel läuft von der Quelle zum Ziel */
.pipes{display:grid;gap:clamp(16px,2.2vw,24px);padding:clamp(16px,2.4vw,28px);border:3px double var(--tool);border-radius:20px;background:linear-gradient(180deg,#2e0f19,#240b13);box-shadow:0 30px 60px -30px rgba(18,0,6,.85)}
.lane{--p:1;--tw:clamp(66px,4vw + 46px,92px);display:grid;grid-template-columns:var(--tw) minmax(0,1fr) var(--tw);align-items:center;column-gap:10px}
.lane__k{grid-column:1 / -1;margin-bottom:8px;font-family:var(--serif);font-style:italic;font-size:1.1875rem;line-height:1.2;color:var(--gold)}
.tok{display:grid;justify-items:center;gap:3px;padding:9px 4px 8px;border-radius:12px;background:linear-gradient(180deg,var(--paper),var(--paper-2));color:var(--ink);font-size:.875rem;font-weight:600;line-height:1.2;text-align:center;box-shadow:0 12px 22px -14px rgba(18,0,6,.95)}
.tok svg{width:24px;height:24px;color:var(--red-ink)}
.tok--to svg{color:var(--green-ink)}
.duct{position:relative;height:36px}
.tube{position:absolute;left:-10px;right:-10px;top:50%;height:14px;margin-top:-7px;border-radius:7px;background:linear-gradient(180deg,rgba(255,240,220,.18),rgba(255,240,220,.05) 50%,rgba(0,0,0,.2));box-shadow:inset 0 0 0 1px rgba(230,180,90,.45)}
.cap{position:absolute;top:50%;left:calc((100% - 26px) * var(--p));width:26px;height:10px;margin-top:-5px;border-radius:5px;background:linear-gradient(180deg,#f6e0a8,#c8963f 60%,#7a531c);box-shadow:0 0 10px rgba(255,214,140,.6)}
.valve{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:50px;height:30px;margin:-15px 0 0 -25px;border-radius:7px;background:linear-gradient(180deg,#f0d28f,#c8963f 55%,#8a6224);color:#2b1a08;font-size:.875rem;font-weight:700;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px -4px rgba(18,0,6,.9),0 0 0 0 rgba(255,214,140,0)}

/* Meldung: der tägliche Brief – jede Zeile ein Direktlink; die nicht zuordenbare Zahlung führt in die Buchungsmaske */
.stage--letter{container-type:inline-size}
.lt{position:relative;display:grid;gap:16px}
.mail{--eh:clamp(74px,8cqi + 44px,100px);position:relative;overflow:hidden;padding-top:44px}
.env__back,.env__flap,.env__front,.env__seal{position:absolute;display:block}
.env__back{left:0;right:0;bottom:0;height:var(--eh);border-radius:12px 12px 14px 14px;background:linear-gradient(180deg,#cfb78d,#c3a87c)}
.env__flap{left:0;right:0;bottom:var(--eh);height:calc(var(--eh) * .9);background:linear-gradient(0deg,#cfb78d,#e2cda6);clip-path:polygon(0 100%,50% 0,100% 100%);transform-origin:50% 100%}
.sheet{position:relative;z-index:1;padding:16px 16px 18px}
.mail .sheet{margin:0 7%;padding-bottom:calc(var(--eh) + 10px);border-radius:10px 10px 4px 4px}
.env__front{z-index:2;left:0;right:0;bottom:0;height:var(--eh);border-radius:0 0 14px 14px;background:linear-gradient(180deg,#f0e2c6,#dfcaa4);clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%)}
.env__seal{z-index:3;left:50%;bottom:calc(var(--eh) * .54 - 16px);width:32px;height:32px;margin-left:-16px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#b04358,#7a2333 58%,#561321);box-shadow:0 2px 5px rgba(18,0,6,.45),inset 0 0 0 3px rgba(0,0,0,.14)}
.sheet__head{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.sheet__head .card-title{font-size:clamp(1.375rem,1.2rem + .5vw,1.625rem)}
.tag{margin-left:auto;padding:4px 11px;border-radius:999px;background:#f6e3b8;color:#6b4a12;font-size:.875rem;font-weight:600;white-space:nowrap}
.rows{display:grid;gap:8px;margin-top:12px}
.r{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:10px;background:var(--tile);box-shadow:0 0 0 1px var(--rule)}
.r__dot{width:12px;height:12px;border-radius:50%;background:var(--green)}
.r .skel{height:9px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#efe3cb;color:var(--ink);font-size:.875rem;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 0 0 0 rgba(230,180,90,0)}
.chip svg{width:14px;height:14px;color:var(--ink-2)}
.r--loose{background:#fcf1de;outline:2px dashed #d08a2c;outline-offset:-2px}
.r--loose .r__dot{background:none;border:2px dashed #c97d1e}
.r--loose .chip{background:#f6e0b8;color:#6b4a12}
.targets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tgt{display:grid;align-content:start;gap:10px;padding:14px}
.tgt__k{display:flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:700;line-height:1.2;color:var(--ink)}
.tgt .skel{height:9px}
.fld{display:block;height:18px;border-radius:5px;background:var(--tile);box-shadow:inset 0 0 0 1.5px #d6c29e}
.fld--s{width:58%}
.tgt--form{box-shadow:var(--shadow),0 0 0 2px rgba(240,163,71,.7)}
.threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.th{fill:none;stroke-width:2;stroke-linecap:round}
.th--rec{stroke:var(--gold)}.th--form{stroke:var(--amber)}
@container (min-width:540px){
  .lt{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);align-items:center;column-gap:clamp(28px,6cqi,52px)}
  .targets{grid-template-columns:minmax(0,1fr);gap:20px}
}
@container (max-width:329px){.targets{grid-template-columns:minmax(0,1fr)}}

/* Aktualisieren: Knopf im Brief → Impuls zu n8n → derselbe Workflow schickt den Brief frisch zurück */
.stage--button{display:grid;justify-items:center}
.stack{display:grid;width:min(100%,420px)}
.stack>.sheet{grid-area:1/1}
.sheet--old{--stub:0;transform:translate(-14px,10px) rotate(-3deg);filter:brightness(.92)}
.stack .skel{margin-top:12px;height:10px}.stack .skel--s{width:62%}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;width:max-content;max-width:100%;margin:18px auto 0;padding:10px 18px;border-radius:10px;background:linear-gradient(180deg,#4a1a29,#36111d);color:var(--text);font-size:.9375rem;font-weight:600;box-shadow:0 8px 16px -10px rgba(18,0,6,.9)}
.btn::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:19px;margin-left:-1px;background:var(--gold);opacity:var(--stub,1)}
.btn svg{width:18px;height:18px;color:var(--gold)}
.btn__ring{position:absolute;inset:-3px;border:2px solid var(--gold);border-radius:13px;opacity:0}
.wire{--q:1;--u:1;position:relative;display:block;width:2px;height:clamp(48px,6vw,64px);background:linear-gradient(180deg,var(--gold),#9b722e)}
.spark{position:absolute;left:50%;top:calc((100% - 12px) * var(--q));width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fff1cc;box-shadow:0 0 12px 4px rgba(255,214,140,.7);opacity:0}
.mini-env{position:absolute;left:50%;top:calc((100% - 22px) * (1 - var(--u)));display:grid;place-items:center;width:28px;height:22px;margin-left:-14px;border-radius:5px;background:var(--paper);color:var(--red-ink);opacity:0}
.mini-env svg{width:18px;height:18px}
.plaque{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;padding:10px 20px 10px 16px;border-radius:12px;background:linear-gradient(180deg,#f0d28f,#c8963f 55%,#8a6224);color:#2b1a08;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 18px 30px -16px rgba(18,0,6,.9)}
.plaque__lamp{grid-row:span 2;width:14px;height:14px;border-radius:50%;background:#6b4517;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),0 0 0 0 rgba(255,214,140,0)}
.plaque b{font-size:1.125rem;line-height:1.1}
.plaque small{font-size:.875rem;font-weight:600;line-height:1.2}

/* ---------- Zusammenspiel: die Prüfung sortiert – offen zum Forderungs-Monitor, bezahlt zu Versand & Vertrieb ---------- */
.relate{--rg:clamp(16px,2.4vw,32px)}
.stage--sort{margin-top:clamp(28px,5vh,56px)}
.srt{--hub:76px;--drop:58px;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--rg);padding-top:calc(var(--hub) + var(--drop))}
.srt__branch{position:absolute;top:calc(var(--hub) + 22px);left:calc((100% - var(--rg)) / 4);right:calc((100% - var(--rg)) / 4);height:calc(var(--drop) - 22px);border:2px solid rgba(230,180,90,.55);border-bottom:0;border-radius:14px 14px 0 0}
.srt__branch::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:24px;margin-left:-1px;background:rgba(230,180,90,.55)}
.srt__col{display:flex;flex-direction:column;align-items:center}
.srt__pile{position:relative;width:clamp(104px,8vw + 64px,168px);height:clamp(58px,3vw + 46px,78px)}
.srt__pile>i{position:absolute;inset:0;border-radius:10px;background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:0 14px 26px -14px rgba(18,0,6,.95)}
.srt__pile>i:nth-child(1){transform:rotate(-5deg) translate(-6px,8px);filter:brightness(.86)}
.srt__pile>i:nth-child(2){transform:rotate(3deg) translate(4px,4px);filter:brightness(.93)}
.fly{position:absolute;z-index:1;inset:0;display:grid;place-items:center}
.fly .pill{padding:6px 14px;box-shadow:0 6px 14px -8px rgba(18,0,6,.8)}
.srt__thread{display:block;width:2px;height:clamp(30px,5vh,52px);margin-top:16px;background:linear-gradient(180deg,var(--gold),rgba(230,180,90,.4));transform-origin:50% 0}
.srt__hub{position:absolute;top:0;left:0;right:0;display:grid;justify-items:center;width:max-content;margin:0 auto}
.srt__lamp{width:58px;height:18px;margin-bottom:-1px;border-radius:29px 29px 4px 4px;background:linear-gradient(90deg,#5e3b12,#e9c87e 38%,#c8963f 58%,#4f3110);box-shadow:0 14px 26px 4px rgba(255,214,140,.38)}
.srt__card{position:relative;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:14px}
.srt__card .ico-box{width:38px;height:38px;border-radius:10px}
.srt__card .card-title{font-size:1.375rem}
.rel-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--rg)}
.rel{position:relative;padding:clamp(22px,3vw,36px);border:3px double var(--tool);border-radius:20px;background:linear-gradient(180deg,rgba(255,240,220,.05),rgba(18,0,6,.12));transition:border-color .25s,background-color .25s}
.rel:hover{border-color:rgba(230,180,90,.75);background-color:rgba(230,180,90,.05)}
.rel:has(a:focus-visible){outline:2px solid var(--gold);outline-offset:4px}
.rel__code{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.2;color:var(--gold)}
.rel__code .pill{padding:5px 13px;font-family:var(--sans);font-style:normal;font-size:.9375rem}
.rel h3{display:flex;align-items:baseline;gap:12px;margin-top:12px;font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.rel h3 a{text-decoration:none}
.rel h3 a::after{content:"";position:absolute;inset:0;border-radius:18px}
.rel h3 a:focus-visible{outline:none}
.rel__arrow{color:var(--gold);transition:transform .25s}
.rel:hover .rel__arrow{transform:translateX(5px)}
.rel p:not(.rel__code){max-width:32em;margin-top:10px;color:var(--soft)}

/* ---------- Überblick: die Demo-Ansicht liegt als Abzug auf der Unterlage ---------- */
.overview{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,112px);align-items:center;max-width:var(--maxw);margin:0 auto;padding:clamp(64px,12vh,140px) var(--gut);border-top:3px double var(--tool)}
.shot{width:100%;max-width:464px;justify-self:center}
.shot a{display:block;padding:12px;border-radius:10px;background:linear-gradient(180deg,var(--paper),var(--paper-2));box-shadow:0 40px 80px -36px rgba(18,0,6,.95)}
.shot img{width:100%;height:auto;border-radius:3px}
.shot figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px;font-size:.9375rem;color:var(--soft)}
.badge{display:inline-flex;padding:4px 12px;border:1px solid rgba(230,180,90,.55);border-radius:999px;font-size:.875rem;font-weight:600;color:var(--gold)}
.ov__text h2{margin-top:12px;font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);font-weight:700;line-height:1.04;letter-spacing:-.035em}
.ov__desc{max-width:32em;margin-top:18px;font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);color:var(--soft)}
.ov__text h3{margin-top:34px;font-size:1.125rem;font-weight:700}
.checks{display:grid;gap:14px;margin-top:16px}
.checks li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:start;gap:14px;color:var(--soft)}
.checks svg{width:30px;height:30px;padding:6px;border-radius:50%;color:var(--gold);box-shadow:inset 0 0 0 1.5px rgba(230,180,90,.65)}

/* ---------- Technik & Rolle: Kontoblatt mit gezogenen Linien und Stempel ---------- */
.ledger{--dw:clamp(7rem,6vw + 3.5rem,9.5rem);--px:clamp(20px,4vw,56px);position:relative;max-width:1120px;margin:0 auto;padding:clamp(26px,4vw,52px) var(--px) clamp(28px,4vw,52px);overflow:hidden;border-radius:18px}
.ledger__head{display:flow-root}
.ledger__k{font-family:var(--serif);font-style:italic;font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);line-height:1.2;color:var(--red-ink)}
.tech h2{color:var(--ink);text-wrap:pretty}
.ledger__rows{position:relative;margin-top:clamp(18px,3vw,30px)}
.ledger__rows::before{content:"";position:absolute;top:0;bottom:-60px;left:calc(var(--dw) + 12px);width:4px;border-left:1px solid rgba(142,43,59,.42);border-right:1px solid rgba(142,43,59,.42)}
.ledger__rows::after{content:"";position:absolute;top:-3px;left:calc(var(--px) * -1);right:calc(var(--px) * -1);border-top:3px double rgba(142,43,59,.34)}
.lrow{position:relative;display:grid;grid-template-columns:var(--dw) minmax(0,1fr);gap:28px;padding:15px 0}
.lrow::after{content:"";position:absolute;left:calc(var(--px) * -1);right:calc(var(--px) * -1);bottom:0;height:1px;background:rgba(120,90,60,.3);transform-origin:left center;transform:scaleX(var(--r,1))}
.lrow dt{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--red-ink)}
.lrow dd{font-size:clamp(1.0625rem,1rem + .2vw,1.125rem);line-height:1.5;color:var(--ink)}
.seal-stamp{float:right;width:clamp(92px,6vw + 60px,144px);height:auto;margin:-4px 0 6px 16px;shape-outside:circle(50%) border-box;shape-margin:10px;color:var(--seal);opacity:.88;mix-blend-mode:multiply;transform:rotate(-12deg)}
.seal-stamp__ring{font:700 10.5px var(--sans);fill:currentColor}
.seal-stamp__mid{font:italic 400 22px var(--serif);fill:currentColor}

/* ---------- Weitere Projekte: das Lampenlicht wandert zum nächsten Projekt ---------- */
.more__list{--m:1;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);margin-top:clamp(20px,3vh,32px)}
.more__list::before{content:"";position:absolute;top:-18%;bottom:-18%;left:calc(var(--m) * 50%);width:50%;background:radial-gradient(closest-side,rgba(230,180,90,.17),rgba(230,180,90,0));pointer-events:none}
.more__list li{position:relative;display:grid}
.more__card{display:grid;align-content:start;gap:6px;padding:clamp(22px,3vw,36px);border:3px double var(--tool);border-radius:20px;background:linear-gradient(180deg,rgba(255,240,220,.04),rgba(18,0,6,.14));text-decoration:none;transition:border-color .25s,background-color .25s}
.more__card:hover{border-color:rgba(230,180,90,.75);background-color:rgba(230,180,90,.05)}
.more__card--next{justify-items:end;text-align:right}
.more__dir{font-size:1rem;font-weight:600;color:var(--mist)}
.more__code{margin-top:10px;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.1;color:var(--gold)}
.more__name{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);font-weight:700;line-height:1.1;letter-spacing:-.025em}
.more__hook{max-width:28em;margin-top:6px;color:var(--soft);text-wrap:pretty}
.more__all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:24px;font-weight:600;text-underline-offset:.22em}
.more__all:hover{color:var(--gold)}

/* ---------- Fuß ---------- */
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;max-width:var(--maxw);margin:0 auto;padding:40px var(--gut) 56px;border-top:3px double var(--tool)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 28px}
.foot nav a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:.22em}
.foot nav a:hover{color:var(--gold)}
.foot__sig{font-size:.8125rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--mist)}

/* ---------- Breiten ---------- */
@media (max-width:899px){
  .hero__in,.step__inner,.step--flip .step__inner,.overview,.situation__in,.dt,.dt--flip{grid-template-columns:minmax(0,1fr)}
  .hero__in{min-height:0}
  .step--flip .step__text,.dt--flip .dt__text{order:0}
  .stage--hero{padding-top:0}
  .lamp-hang,.lamp-cone{display:none}
  .h-stack::before{inset:8px -4px -8px 6px;transform:rotate(1.6deg)}
  .pool{top:-30px;left:-10%;right:-10%}
}
@media (max-width:760px){.verdicts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:699px){
  .rel-list,.more__list{grid-template-columns:minmax(0,1fr)}
  .srt__thread{display:none}
  .srt{padding-bottom:30px}
  .more__list::before{top:calc(var(--m) * 50%);bottom:auto;left:0;width:100%;height:50%}
  .more__card--next{justify-items:start;text-align:left}
}
@media (max-width:620px){
  .stage--search{grid-template-columns:minmax(0,1fr);gap:14px}
  .inv .skel--s{display:none}
  .tether{height:26px;margin-top:14px}
  .note{margin-top:10px}
  .bank__head{padding-bottom:10px}
  .ln{height:40px}
}
@media (max-width:599px){
  .lrow{grid-template-columns:minmax(0,1fr);gap:2px}
  .ledger__rows::before{display:none}
}
@media (max-width:380px){
  .inv-block{grid-template-columns:auto minmax(0,1fr)}
  .inv-block .pill{grid-column:1 / -1;justify-self:start}
  .tile__k{font-size:.8125rem}
  .h-pay{width:86%}
  .stage--stamp{--sw:96px}
  .way{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .register a,.rel,.rel__arrow,.more__card{transition:none}
}
/* Gepinnte Szenen nur mit Bewegung und genug Fläche (die Klasse setzt erst das Skript) */
@media (min-width:960px) and (min-height:620px){
  .zs-motion .step{display:grid;align-items:center;min-height:100vh}
}

/* ---------- Druck ----------
   Papier statt Lederunterlage: Hintergründe druckt der Browser nicht, darum Fließtext in dunkler Tinte statt Creme
   und Lampengold. Die Szenen bleiben Abbildungen ihrer Welt (eigener Ledergrund, Farben werden mitgedruckt), sonst
   verlören Belege, Balken und Rohrpost ihre Flächen. Die ruhige Fassung (Endzustände, keine Pins) setzt das Skript;
   Szenen und Karten werden nicht zerschnitten, Sprungmarken und Zurück-Knopf entfallen. */
@media print{
  :root{--text:#2a1a14;--soft:#4d3b30;--mist:#6b5648;--gold:#7a5212;--amber:#9a4f0c;--green-lt:#2b6b42;--tool:#d8c09a}
  html,body{background:#fff}
  .skip,.back,.cue,.register,.pool{display:none}
  .hero{padding-bottom:24px}
  .hero__in{min-height:0}
  .thesis,.situation,.steps-head,.detail,.relate,.tech,.more,.answer,.overview{padding-block:32px}
  .step{padding-block:28px}
  .dt{margin-top:32px}
  /* als Block statt einspaltigem Raster: so darf der Seitenumbruch zwischen Text und Szene fallen */
  .step__inner,.dt{display:block}
  .step .stage,.dt .stage{margin-top:24px}
  .stage{--text:#f4ead8;--soft:#e3d3bd;--mist:#c9ad97;--gold:#e6b45a;--amber:#f0a347;--green-lt:#7fca97;padding:28px;border-radius:20px;background:var(--leather);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .stage--hero{padding-bottom:110px}
  .stage--stamp{padding-top:calc(var(--sw) * 1.17)}
  .stage,.paper,.verdict,.rel,.more__card,.lrow,.shot,.checks li,.thesis__big{break-inside:avoid}
  h2,h3,.kicker,.step__no,.dt__no{break-after:avoid}
  h2,h3{break-inside:avoid}
}