/* ============================================================
   CREAVENTIS × UG — geteiltes Design-System für die drei Ansichten
   Palette: reines Weiss / reines Schwarz als Grund, EIN Kupfer-Akzent.
   Type:    Archivo (display) + Inter (body) + JetBrains Mono (data).
   Struktur bewusst nah an htsc.css (Reamotion_Sales) —
   gleiche Shell, gleiche Komponenten-Namen, eigene Tokens.
   Spec: 20_projects/.../web_build/design.md
   ============================================================ */
/* Tag = reines Weiss, Nacht = reines Schwarz. Beide Modi sind durchgehend,
   auch der Hero — es gibt keine dunkle Flaeche im hellen Modus und umgekehrt.
   Rollen der Tokens: --bg Grundflaeche · --bg-2 abwechselnde Sektion, Tabellen-
   kopf, Hover · --surface jede Karte/Tafel · --surface-2 Hinweis/Klappe auf
   der Grundflaeche. */
:root{
  color-scheme:light;
  --bg:#FFFFFF; --bg-2:#F2F4F5; --bg-3:#E8EBED; --surface:#FFFFFF; --surface-2:#F7F9FA;
  --ink:#0B0E10; --text:#3A4348; --muted:#6A7479; --faint:#9AA3A9;
  --line:#E6E9EB; --line-2:#D5DADE;
  --acc:#A0511C; --acc-2:#BE6626; --acc-soft:#F5EBE3; --acc-ink:#5E2E0E;
  --pos:#2E6B4E; --pos-soft:#E6F0EA;
  --warn:#8A6320; --warn-soft:#F5EDDD;
  --neg:#9A3F33; --neg-soft:#F3E5E3;
  --info:#33587F; --info-soft:#E6ECF3;
  --conf:#8E3B36; --conf-soft:#F1E4E3; --conf-line:#D9BFBD;
  --hero-bg:#FFFFFF; --hero-ink:#0B0E10; --hero-text:rgba(11,14,16,.7);
  --hero-line:rgba(11,14,16,.13); --hero-fill:rgba(11,14,16,.025); --hero-chip:rgba(11,14,16,.045);
  --hero-grid:rgba(11,14,16,.05); --hero-meta:rgba(11,14,16,.5);
  --hero-glow-a:rgba(160,81,28,.13); --hero-glow-b:rgba(51,88,127,.08);
  --hero-veil:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.9));
  --sh-1:0 1px 2px rgba(20,24,27,.05), 0 1px 1px rgba(20,24,27,.03);
  --sh-2:0 4px 16px -6px rgba(20,24,27,.11), 0 2px 6px -3px rgba(20,24,27,.06);
  --sh-3:0 18px 44px -20px rgba(20,24,27,.22), 0 6px 16px -10px rgba(20,24,27,.12);
  --disp:"Archivo",-apple-system,system-ui,sans-serif;
  --sans:"Inter",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --e-out:cubic-bezier(.22,1,.36,1);
  --radius:14px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --bg-2:#0A0D0F; --bg-3:#1A1F22; --surface:#131719; --surface-2:#0E1214;
  --ink:#FFFFFF; --text:#B4BDC3; --muted:#7E888F; --faint:#59636A;
  --line:#22282C; --line-2:#30383E;
  --acc:#D98A4E; --acc-2:#EDA470; --acc-soft:rgba(217,138,78,.14); --acc-ink:#F0BE94;
  --pos:#68AF87; --pos-soft:rgba(104,175,135,.14);
  --warn:#C79B54; --warn-soft:rgba(199,155,84,.14);
  --neg:#C87365; --neg-soft:rgba(200,115,101,.14);
  --info:#7C9CCF; --info-soft:rgba(124,156,207,.14);
  --conf:#C97B72; --conf-soft:rgba(201,123,114,.14); --conf-line:rgba(201,123,114,.35);
  --hero-bg:#000000; --hero-ink:#FFFFFF; --hero-text:rgba(255,255,255,.8);
  --hero-line:rgba(255,255,255,.14); --hero-fill:rgba(255,255,255,.03); --hero-chip:rgba(255,255,255,.06);
  --hero-grid:rgba(255,255,255,.05); --hero-meta:rgba(255,255,255,.55);
  --hero-glow-a:rgba(217,138,78,.22); --hero-glow-b:rgba(124,156,207,.14);
  --hero-veil:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.88));
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 18px -6px rgba(0,0,0,.55);
  --sh-3:0 22px 50px -22px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.62; -webkit-font-smoothing:antialiased; font-size:15px; letter-spacing:-.005em; transition:background .4s var(--e-out), color .4s var(--e-out)}
a{color:inherit; text-decoration:none}
::selection{background:var(--acc-soft); color:var(--acc-ink)}
h1,h2,h3,h4,h5{color:var(--ink); margin:0; font-family:var(--disp); font-weight:600; letter-spacing:-.022em}
img{display:block; max-width:100%}
p{margin:0 0 1em}
strong,b{color:var(--ink); font-weight:600}

/* ===== SHELL ===== */
.shell{display:grid; grid-template-columns:284px 1fr; min-height:100vh}

/* ===== SIDEBAR ===== */
.side{position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; background:var(--surface); border-right:1px solid var(--line); padding:26px 16px 22px; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.side::-webkit-scrollbar{width:5px} .side::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:6px}
.brand{padding:2px 8px 18px; border-bottom:1px solid var(--line); margin-bottom:12px}
.brand .logo{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.brand .mark{width:32px; height:32px; flex:none; border-radius:8px; background:var(--acc); display:grid; place-items:center; box-shadow:var(--sh-1)}
.brand .mark svg{width:17px; height:17px}
.brand .mk{font-size:10.5px; letter-spacing:.04em; color:var(--muted); font-weight:500; font-family:var(--mono); text-transform:uppercase}
.brand h1{font-family:var(--disp); font-size:19px; font-weight:700; letter-spacing:-.025em; line-height:1.1; margin:.15em 0 0}
.brand .sub{font-size:12px; color:var(--muted); line-height:1.5; margin-top:9px; max-width:30ch}
.conf-tag{display:inline-flex; align-items:center; gap:6px; margin-top:13px; font-size:10.5px; color:var(--conf); font-weight:600; border:1px solid var(--conf-line); background:var(--conf-soft); border-radius:7px; padding:4px 9px; font-family:var(--mono)}
.conf-tag svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.conf-tag.ok{color:var(--pos); border-color:var(--pos); background:var(--pos-soft)}
.navlabel{font-size:10.5px; letter-spacing:.05em; color:var(--faint); margin:16px 9px 6px; font-weight:600; font-family:var(--mono); text-transform:uppercase}
.tnav{display:flex; flex-direction:column; gap:1px}
.tnav a{position:relative; display:flex; gap:10px; align-items:center; padding:8px 11px; border-radius:9px; font-size:13.5px; font-weight:400; color:var(--text); transition:background .18s var(--e-out), color .18s var(--e-out)}
.tnav a .n{font-family:var(--mono); font-size:11px; color:var(--faint); min-width:18px; font-weight:400}
.tnav a:hover{background:var(--bg-2); color:var(--ink)}
.tnav a.active{background:var(--acc-soft); color:var(--acc-ink); font-weight:500}
[data-theme="dark"] .tnav a.active{color:var(--acc-2)}
.tnav a.active .n{color:var(--acc)}
.side .foot{margin-top:auto; padding-top:15px; border-top:1px solid var(--line); font-size:11px; color:var(--faint); line-height:1.7; font-family:var(--mono)}
.side .foot b{color:var(--muted); font-weight:500}
.side .foot a{color:var(--muted); border-bottom:1px solid var(--line-2)}
.side .foot a:hover{color:var(--acc)}

/* ===== MAIN ===== */
main{min-width:0; position:relative}
.wrap{padding:0 clamp(22px,4vw,68px)}
.maxw{max-width:1120px; margin:0 auto}

/* theme toggle */
.toggle{position:fixed; top:18px; right:22px; z-index:60; width:40px; height:40px; border-radius:10px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--sh-1); display:grid; place-items:center; cursor:pointer; color:var(--ink); transition:transform .3s var(--e-out), background .3s var(--e-out)}
.toggle:hover{transform:translateY(-1px); background:var(--bg-2)}
.toggle svg{width:17px; height:17px; stroke:currentColor; stroke-width:1.7; fill:none}
.toggle .moon{display:none} [data-theme="dark"] .toggle .sun{display:none} [data-theme="dark"] .toggle .moon{display:block}

/* ===== HERO (bildlos, Struktur-Grafik) ===== */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--hero-bg)}
.hero .hgrid{position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--hero-grid) 1px, transparent 1px), linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size:64px 64px; background-position:center}
.hero .hglow{position:absolute; inset:0; background:
  radial-gradient(900px 520px at 12% 8%, var(--hero-glow-a), transparent 62%),
  radial-gradient(760px 520px at 92% 96%, var(--hero-glow-b), transparent 60%),
  var(--hero-veil)}
.hero .htext{position:relative; z-index:3; padding:clamp(52px,7vw,96px) clamp(22px,4vw,68px) clamp(44px,6vw,72px); max-width:1180px; margin:0 auto}
.hero .eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:11.5px; letter-spacing:.02em; color:var(--hero-text); font-weight:500; padding:6px 12px; border:1px solid var(--hero-line); border-radius:8px; background:var(--hero-chip); font-family:var(--mono)}
.hero .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--acc-2); box-shadow:0 0 0 4px rgba(217,138,78,.18)}
.hero h2{font-family:var(--disp); font-size:clamp(2.1rem,4.7vw,3.75rem); line-height:1.03; color:var(--hero-ink); margin:.5em 0 .34em; font-weight:700; letter-spacing:-.035em; max-width:19ch; text-wrap:balance}
.hero h2 em{font-style:normal; color:var(--acc)}
[data-theme="dark"] .hero h2 em{color:var(--acc-2)}
.hero p.hlead{font-size:clamp(15px,1.4vw,17.5px); color:var(--hero-text); max-width:64ch; line-height:1.62; font-weight:400}
.hero p.hlead b{color:var(--hero-ink); font-weight:600}
.hero .meta{margin-top:30px; display:flex; gap:0; flex-wrap:wrap; border:1px solid var(--hero-line); border-radius:12px; overflow:hidden; max-width:840px; background:var(--hero-fill)}
.hero .meta span{display:flex; flex-direction:column; gap:3px; padding:14px 20px; font-size:10.5px; letter-spacing:.03em; color:var(--hero-meta); font-weight:400; font-family:var(--mono); border-right:1px solid var(--hero-line); flex:1; min-width:140px; text-transform:uppercase}
.hero .meta span:last-child{border-right:0}
.hero .meta b{color:var(--hero-ink); font-weight:600; font-size:14px; font-family:var(--sans); letter-spacing:-.01em; text-transform:none}

/* ===== STAT RIBBON ===== */
.ribbon{display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border-bottom:1px solid var(--line)}
.ribbon .s{padding:26px clamp(16px,2vw,28px); border-right:1px solid var(--line)}
.ribbon .s:last-child{border-right:0}
.ribbon .v{font-family:var(--disp); font-size:clamp(1.5rem,2.3vw,2.1rem); font-weight:700; color:var(--ink); letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.ribbon .v small{font-family:var(--mono); font-size:13px; color:var(--acc); font-weight:500; letter-spacing:0; margin-left:2px}
.ribbon .l{font-size:11.5px; color:var(--muted); margin-top:11px; line-height:1.45}
.ribbon.r5{grid-template-columns:repeat(5,1fr)}
.ribbon.r3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .ribbon,.ribbon.r5,.ribbon.r3{grid-template-columns:repeat(2,1fr)} .ribbon .s:nth-child(2n){border-right:0} }

/* ===== SECTION BASE ===== */
section.block{padding:clamp(52px,7vw,88px) 0; border-bottom:1px solid var(--line); scroll-margin-top:8px}
section.block.alt{background:var(--bg-2)}
.seqlabel{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:.05em; color:var(--acc); font-weight:600; margin-bottom:16px; font-family:var(--mono); text-transform:uppercase}
.seqlabel::before{content:""; width:18px; height:1.5px; background:var(--acc); display:inline-block; opacity:.55}
section.block h3{font-family:var(--disp); font-size:clamp(1.65rem,3vw,2.35rem); font-weight:700; letter-spacing:-.033em; margin-bottom:16px; line-height:1.08; color:var(--ink); text-wrap:balance; max-width:24ch}
section.block h3 em{font-style:normal; color:var(--acc)}
.lead{font-size:clamp(15.5px,1.4vw,17.5px); color:var(--text); max-width:72ch; margin-bottom:36px; line-height:1.62}
.lead b{color:var(--ink); font-weight:600}
h4.subhead{font-family:var(--disp); font-size:1.28rem; font-weight:700; color:var(--ink); margin:38px 0 14px; letter-spacing:-.025em}
h5.minihead{font-size:11px; letter-spacing:.05em; color:var(--muted); font-weight:600; margin:30px 0 14px; font-family:var(--mono); text-transform:uppercase}

/* prose */
.prose p{color:var(--text); max-width:72ch}
.prose ul{margin:0 0 1.2em; padding-left:0; list-style:none; max-width:74ch}
.prose ul li{position:relative; padding-left:22px; margin-bottom:9px; color:var(--text)}
.prose ul li::before{content:""; position:absolute; left:2px; top:11px; width:8px; height:1.5px; background:var(--acc); opacity:.75}
.prose ol{margin:0 0 1.2em; padding-left:20px; max-width:74ch; color:var(--text)}
.prose ol li{margin-bottom:9px}
.prose ol li::marker{color:var(--acc); font-family:var(--mono); font-size:.85em}
.prose a{color:var(--acc); border-bottom:1px solid var(--acc-soft)}

/* cards / grids */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media(max-width:860px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--sh-1); transition:box-shadow .3s var(--e-out), border-color .3s var(--e-out), transform .3s var(--e-out)}
section.block.alt .card{background:var(--surface)}
.card:hover{box-shadow:var(--sh-2); border-color:var(--line-2); transform:translateY(-2px)}
.card .ic{width:36px; height:36px; border-radius:9px; background:var(--acc-soft); color:var(--acc); display:grid; place-items:center; margin-bottom:14px}
.card .ic svg{width:18px; height:18px; stroke:currentColor; stroke-width:1.6; fill:none}
.card h5{font-family:var(--disp); font-size:15px; color:var(--ink); font-weight:700; margin-bottom:7px; letter-spacing:-.02em}
.card p{font-size:13.5px; color:var(--muted); line-height:1.58; margin:0 0 .7em}
.card p:last-child{margin-bottom:0}
.card .kv{font-family:var(--mono); font-size:11px; color:var(--acc); margin-top:12px; font-weight:500}
/* Karten-Rahmen bedeuten etwas — sie sind kein Blickfang.
   (kein Rahmen) = normale Information, gleichrangig in einer Aufzaehlung
   .hi   orange  = der Kernpunkt dieses Abschnitts, hoechstens einer je Gruppe
   .res  gruen   = ein Ergebnis oder Ertrag, also etwas, das entsteht
   .risk rot     = nicht verhandelbar / Gefahr
   Wer eine vierte Bedeutung braucht, braucht in Wahrheit einen eigenen Abschnitt. */
.card.hi{border-color:var(--acc); box-shadow:0 0 0 1px var(--acc-soft), var(--sh-1)}
.card.res{border-color:var(--pos); box-shadow:0 0 0 1px var(--pos-soft), var(--sh-1)}
.card.risk{border-color:var(--neg); box-shadow:0 0 0 1px var(--neg-soft), var(--sh-1)}
.card.res .kv{color:var(--pos)} .card.risk .kv{color:var(--neg)}

/* numbered cards */
.numbered{counter-reset:h}
.numbered .card{position:relative; padding-top:24px}
.numbered .card::before{counter-increment:h; content:counter(h,decimal-leading-zero); position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:12px; color:var(--faint); font-weight:500}

/* callout / pull / note */
.pull{border:1px solid var(--acc-soft); background:var(--acc-soft); padding:20px 24px; border-radius:12px; margin:26px 0; font-family:var(--disp); font-size:1.1rem; font-weight:600; color:var(--acc-ink); line-height:1.44; letter-spacing:-.02em}
[data-theme="dark"] .pull{color:var(--acc-2); border-color:rgba(217,138,78,.3)}
.note{border:1px solid var(--line-2); border-radius:12px; padding:15px 18px; margin:20px 0; background:var(--surface-2); font-size:13.5px; color:var(--muted); line-height:1.58; max-width:80ch}
section.block.alt .note{background:var(--surface)}
.note b{color:var(--text)}
.note.warn{border-color:var(--warn); background:var(--warn-soft); color:var(--warn)} .note.warn b{color:var(--warn)}
.note.pos{border-color:var(--pos); background:var(--pos-soft); color:var(--pos)} .note.pos b{color:var(--pos)}
.note.neg{border-color:var(--neg); background:var(--neg-soft); color:var(--neg)} .note.neg b{color:var(--neg)}
.note.acc{border-color:var(--acc); background:var(--acc-soft); color:var(--acc-ink)} .note.acc b{color:var(--acc-ink)}
[data-theme="dark"] .note.acc{color:var(--acc-2)} [data-theme="dark"] .note.acc b{color:var(--acc-2)}

/* click-to-expand */
details.xp{border:1px solid var(--line-2); border-radius:12px; background:var(--surface-2); margin:18px 0; overflow:hidden}
section.block.alt details.xp{background:var(--surface)}
details.xp>summary{list-style:none; cursor:pointer; padding:14px 18px; font-family:var(--disp); font-size:14.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:11px; transition:background .2s var(--e-out)}
details.xp>summary::-webkit-details-marker{display:none}
details.xp>summary::before{content:"+"; font-family:var(--mono); font-size:16px; line-height:1; color:var(--acc); font-weight:500; width:14px; text-align:center; flex:none}
details.xp[open]>summary::before{content:"–"}
details.xp>summary:hover{background:var(--bg-3)}
details.xp .xp-more{margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--acc); font-weight:500; border:1px solid var(--acc-soft); border-radius:6px; padding:2px 8px}
details.xp[open] .xp-more{opacity:0}
details.xp .xp-body{padding:2px 18px 16px 43px}
details.xp .xp-body p, details.xp .xp-body li{font-size:13.5px; color:var(--muted); line-height:1.64}
details.xp .xp-body p{margin:0 0 .7em; max-width:74ch}
details.xp .xp-body p:last-child{margin-bottom:0}

/* tables */
.tbl-wrap{overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-1); background:var(--surface)}
section.block.alt .tbl-wrap{background:var(--surface)}
table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px}
thead th{background:var(--bg-2); color:var(--muted); text-align:left; padding:12px 16px; font-size:10.5px; letter-spacing:.04em; font-weight:600; border-bottom:1px solid var(--line-2); font-family:var(--mono); text-transform:uppercase}
tbody td{padding:12px 16px; border-bottom:1px solid var(--line); color:var(--text); vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg-2)}
tbody td b{color:var(--ink)}
td.num,th.num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
td.mono{font-family:var(--mono); font-size:12px}
.tag{display:inline-block; font-size:10.5px; font-weight:500; padding:3px 9px; border-radius:6px; white-space:nowrap; font-family:var(--mono)}
.t-green{background:var(--pos-soft); color:var(--pos)} .t-amber{background:var(--warn-soft); color:var(--warn)}
.t-red{background:var(--neg-soft); color:var(--neg)} .t-acc{background:var(--acc-soft); color:var(--acc)}
.t-blue{background:var(--info-soft); color:var(--info)} .t-grey{background:var(--bg-3); color:var(--muted)}
strong.hl{color:var(--acc); font-weight:600}

/* ===== TIMELINE / PHASEN ===== */
.timeline{position:relative; margin:22px 0 8px; padding-left:6px}
.timeline::before{content:""; position:absolute; left:13px; top:8px; bottom:12px; width:1.5px; background:var(--line-2)}
.tphase{position:relative; padding:0 0 28px 44px}
.tphase::before{content:""; position:absolute; left:8px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--surface); border:2px solid var(--acc); box-shadow:0 0 0 4px var(--bg)}
section.block.alt .tphase::before{box-shadow:0 0 0 4px var(--bg-2)}
.tphase.done::before{background:var(--acc)}
.tphase .tp-k{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--acc); font-weight:600; margin-bottom:5px; text-transform:uppercase}
.tphase h5{font-family:var(--disp); font-size:15.5px; color:var(--ink); font-weight:700; margin-bottom:8px; letter-spacing:-.02em}
.tphase>p{font-size:13.5px; color:var(--muted); max-width:74ch; margin:0 0 .6em}
.tphase ul{margin:0; padding:0; list-style:none}
.tphase ul li{position:relative; padding-left:16px; font-size:13px; color:var(--muted); margin-bottom:5px}
.tphase ul li::before{content:"–"; position:absolute; left:0; color:var(--faint)}

/* ===== ZONEN-KARTE ===== */
.zones{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0}
@media(max-width:860px){ .zones{grid-template-columns:1fr} }
.zone{border:1px solid var(--line); border-radius:var(--radius); padding:20px; background:var(--surface); position:relative; overflow:hidden}
section.block.alt .zone{background:var(--surface)}
.zone::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px}
.zone.a::after{background:var(--pos)} .zone.b::after{background:var(--warn)} .zone.c::after{background:var(--neg)}
.zone .zk{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px}
.zone.a .zk{color:var(--pos)} .zone.b .zk{color:var(--warn)} .zone.c .zk{color:var(--neg)}
.zone h5{font-family:var(--disp); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px; letter-spacing:-.02em}
.zone p{font-size:13px; color:var(--muted); margin:0 0 .6em; line-height:1.55}
.zone p:last-child{margin-bottom:0}

/* ===== AKTEUR-KARTEN ===== */
.actors{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0}
@media(max-width:960px){ .actors{grid-template-columns:1fr} }
.actor{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:24px; box-shadow:var(--sh-1)}
section.block.alt .actor{background:var(--surface)}
.actor .ah{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.actor .av{width:42px; height:42px; flex:none; border-radius:11px; display:grid; place-items:center; font-family:var(--disp); font-weight:700; font-size:16px; color:#fff; background:var(--acc); letter-spacing:-.02em}
.actor .av.c2{background:var(--info)} .actor .av.c3{background:var(--pos)}
.actor .an{font-family:var(--disp); font-size:17px; font-weight:700; color:var(--ink); letter-spacing:-.025em; line-height:1.2}
.actor .ar{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:2px}
.actor h6{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); font-weight:600; margin:16px 0 8px}
.actor ul{margin:0; padding:0; list-style:none}
.actor ul li{position:relative; padding-left:18px; font-size:13.5px; color:var(--text); margin-bottom:7px; line-height:1.5}
.actor ul li::before{content:""; position:absolute; left:1px; top:9px; width:7px; height:1.5px; background:var(--acc); opacity:.8}
.actor ul li b{color:var(--ink)}

/* ===== VORHER / NACHHER ===== */
.vsgrid{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:24px 0; background:var(--surface)}
@media(max-width:820px){ .vsgrid{grid-template-columns:1fr} }
.vscol{padding:24px}
.vscol+.vscol{border-left:1px solid var(--line)}
@media(max-width:820px){ .vscol+.vscol{border-left:0; border-top:1px solid var(--line)} }
.vscol .vh{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px}
.vscol.now .vh{color:var(--muted)} .vscol.next .vh{color:var(--acc)}
.vscol.next{background:var(--acc-soft)}
[data-theme="dark"] .vscol.next{background:rgba(217,138,78,.07)}
.vscol ul{margin:0; padding:0; list-style:none}
.vscol ul li{position:relative; padding-left:22px; font-size:14px; margin-bottom:10px; line-height:1.5; color:var(--text)}
.vscol.now ul li::before{content:"×"; position:absolute; left:3px; top:0; color:var(--faint); font-family:var(--mono)}
.vscol.next ul li::before{content:"→"; position:absolute; left:0; top:0; color:var(--acc); font-family:var(--mono)}
.vscol.next ul li{color:var(--ink)}

/* ===== HUB (index) ===== */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
@media(max-width:960px){ .doors{grid-template-columns:1fr} }
.door{display:block; border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:28px; box-shadow:var(--sh-1); transition:transform .3s var(--e-out), box-shadow .3s var(--e-out), border-color .3s var(--e-out); position:relative; overflow:hidden}
.door:hover{transform:translateY(-3px); box-shadow:var(--sh-3); border-color:var(--acc)}
.door .dn{font-family:var(--mono); font-size:11px; color:var(--acc); font-weight:600; letter-spacing:.05em}
.door h4{font-family:var(--disp); font-size:1.35rem; font-weight:700; color:var(--ink); margin:12px 0 10px; letter-spacing:-.03em; line-height:1.15}
.door p{font-size:13.5px; color:var(--muted); line-height:1.58; margin:0 0 16px}
.door .dfoot{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--acc); font-weight:500}
.door .dfoot .arw{transition:transform .3s var(--e-out)}
.door:hover .dfoot .arw{transform:translateX(4px)}
.door .dtag{position:absolute; top:22px; right:22px; font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:6px}

/* ===== RECHNER / INPUTS ===== */
.calc{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:24px; margin:24px 0; box-shadow:var(--sh-1)}
section.block.alt .calc{background:var(--surface)}
.calc .crow{display:grid; grid-template-columns:1fr 132px; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line)}
.calc .crow:last-of-type{border-bottom:0}
.calc .clab{font-size:13.5px; color:var(--text)}
.calc .clab small{display:block; color:var(--faint); font-size:11.5px; margin-top:2px; line-height:1.4}
.calc input[type=number]{width:100%; padding:8px 11px; border:1px solid var(--line-2); border-radius:8px; background:var(--bg); color:var(--ink); font-family:var(--mono); font-size:13.5px; text-align:right; -moz-appearance:textfield}
.calc input[type=number]:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft)}
.calc input[type=range]{width:100%; accent-color:var(--acc)}
.calc .cout{margin-top:20px; padding-top:18px; border-top:1.5px solid var(--line-2); display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:760px){ .calc .cout{grid-template-columns:1fr} .calc .crow{grid-template-columns:1fr 110px} }
.calc .cbox{background:var(--bg-2); border-radius:10px; padding:16px}
.calc .cbox.hi{background:var(--acc-soft)}
.calc .cbox .ck{font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px}
.calc .cbox .cv{font-family:var(--disp); font-size:1.5rem; font-weight:700; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.calc .cbox.hi .cv{color:var(--acc)}
[data-theme="dark"] .calc .cbox.hi .cv{color:var(--acc-2)}
.calc .cnote{font-size:12px; color:var(--faint); margin-top:14px; line-height:1.55}

/* ===== ENTSCHEIDUNGS-ZEILEN ===== */
.dlist{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); margin:22px 0}
section.block.alt .dlist{background:var(--surface)}
.drow{display:flex; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); align-items:flex-start}
.drow:last-child{border-bottom:0}
.drow .dk{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--acc); flex:none; width:46px; padding-top:2px}
.drow .dc h5{font-family:var(--disp); font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:5px; letter-spacing:-.02em}
.drow .dc p{font-size:13px; color:var(--muted); margin:0; line-height:1.55; max-width:80ch}
.drow .ds{margin-left:auto; flex:none}

/* ===== PFEIL-LISTE ===== */
/* Aufzaehlung mit Pfeil statt Punkt. Bewusst NICHT .vscol: dort bedeutet ein
   Kreuz "so ist es heute" — eine Liste, die nur aufzaehlt, darf nicht wie eine
   Negativliste aussehen. */
.flist{margin:0; padding:0; list-style:none}
.flist li{position:relative; padding-left:20px; margin-bottom:9px; font-size:13.5px; color:var(--muted); line-height:1.55}
.flist li::before{content:"\2192"; position:absolute; left:0; top:0; color:var(--acc); font-family:var(--mono); font-size:12px}
.flist li:last-child{margin-bottom:0}
.flist li b{color:var(--ink)}

/* ===== CONFIDENTIAL ZONE ===== */
.conf-banner{position:relative; overflow:hidden; padding:34px clamp(22px,4vw,68px); background:var(--conf-soft); border-bottom:1px solid var(--conf-line)}
.conf-banner .cb-in{position:relative; max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:18px}
.conf-banner .cb-lock{width:46px; height:46px; flex:none; border-radius:11px; background:var(--conf); display:grid; place-items:center; box-shadow:var(--sh-1)}
.conf-banner .cb-lock svg{width:21px; height:21px; stroke:#fff; fill:none; stroke-width:1.8}
.conf-banner .cb-k{font-size:11px; letter-spacing:.05em; color:var(--conf); font-weight:600; margin-bottom:5px; font-family:var(--mono); text-transform:uppercase}
.conf-banner h3{font-family:var(--disp); font-size:clamp(1.3rem,2.4vw,1.8rem); color:var(--ink); font-weight:700; margin:0 0 6px; letter-spacing:-.03em}
.conf-banner p{font-size:13.5px; color:var(--text); margin:0; max-width:76ch; line-height:1.55}
@media(max-width:560px){ .conf-banner .cb-in{flex-direction:column; align-items:flex-start} }

/* footer */
.end{padding:clamp(44px,6vw,60px) clamp(22px,4vw,68px) 64px; background:var(--bg-2); border-top:1px solid var(--line)}
.end .ein{max-width:1120px; margin:0 auto}
.end h4{font-family:var(--disp); font-size:1.45rem; color:var(--ink); font-weight:700; margin-bottom:14px; letter-spacing:-.03em}
.end p{font-size:13.5px; color:var(--muted); max-width:74ch; line-height:1.6}
.end .files{display:flex; flex-wrap:wrap; gap:9px; margin-top:22px}
.end .files a{font-family:var(--mono); font-size:12px; color:var(--text); border:1px solid var(--line-2); border-radius:8px; padding:8px 12px; transition:color .2s, border-color .2s, background .2s}
.end .files a:hover{color:var(--acc); border-color:var(--acc); background:var(--acc-soft)}
.end .legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:11.5px; color:var(--faint); line-height:1.7; font-family:var(--mono)}
.end .legal b{color:var(--muted); font-weight:500}

/* ===== STANDORT-KARTEN ===== */
.loc{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.loc .adr{font-family:var(--mono); font-size:12px; color:var(--ink); line-height:1.55}
.loc .adr b{color:var(--acc); font-weight:600}
.loc .way{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.5}
.loc .map{margin-top:11px; border:1px solid var(--line-2); border-radius:10px; overflow:hidden; background:var(--bg-2); aspect-ratio:16/10}
.loc .map iframe{display:block; width:100%; height:100%; border:0; filter:saturate(.85)}
[data-theme="dark"] .loc .map iframe{filter:saturate(.7) brightness(.86) contrast(1.05)}
.loc .maplink{display:inline-flex; align-items:center; gap:6px; margin-top:9px; font-family:var(--mono); font-size:11px; color:var(--acc); font-weight:500; border:1px solid var(--acc-soft); border-radius:7px; padding:4px 9px; transition:background .2s var(--e-out)}
.loc .maplink:hover{background:var(--acc-soft)}
.loc .nomap{display:grid; place-items:center; text-align:center; padding:18px; font-family:var(--mono); font-size:11px; color:var(--faint); line-height:1.7; height:100%}

/* Bildplatzhalter — Fotos folgen in der Feinschliff-Runde */
.imgslot{border:1px dashed var(--line-2); border-radius:var(--radius); background:var(--bg-2); min-height:150px; display:grid; place-items:center; text-align:center; padding:24px; margin:20px 0}
.imgslot .is{font-family:var(--mono); font-size:11px; color:var(--faint); line-height:1.7; max-width:52ch}
.imgslot .is b{color:var(--muted); font-weight:500}

/* mobile */
.mobar{display:none}
@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .mobar{display:flex; position:sticky; top:0; z-index:50; align-items:center; gap:12px; padding:13px 18px; background:var(--surface); border-bottom:1px solid var(--line)}
  .mobar .mark{width:28px;height:28px;border-radius:7px;background:var(--acc);display:grid;place-items:center}
  .mobar .mark svg{width:15px;height:15px}
  .mobar b{font-family:var(--disp); font-weight:700; font-size:14.5px; color:var(--ink); letter-spacing:-.02em}
  .mobar .mc{margin-left:auto; font-size:10px; color:var(--conf); font-weight:600; border:1px solid var(--conf-line); border-radius:7px; padding:4px 9px; font-family:var(--mono)}
  .mobar .mc.ok{color:var(--pos); border-color:var(--pos)}
  .hero .meta span{min-width:50%}
  .toggle{top:auto; bottom:18px; right:18px}
}
@media(prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }
@media print{ .side,.toggle,.mobar{display:none} .shell{grid-template-columns:1fr} section.block{page-break-inside:avoid} }