/* VoiceBau · Design-System „aiplusblue — Markierung" V1.0 · Signalgelb #ffc400
   Gemeinsames Stylesheet für index.html + blog.html (Fassung 2026-09).
   Schriften self-hosted (DSGVO). Signalgelb bleibt in beiden Themes einzige Akzentfarbe. */

@font-face { font-family:'Inter'; font-style:normal; font-weight:300 600;
  font-display:swap; src:local('Inter'), url('/fonts/InterVariable.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500;
  font-display:swap; src:local('JetBrains Mono'), url('/fonts/JetBrainsMono.woff2') format('woff2'); }

/* ═════════════════════ TOKENS ═════════════════════ */
:root {
  --sig:#ffc400; --sig-h:#ffd54d; --sig-dim:rgba(255,196,0,.10); --sig-ink:#0c0c0c;
  --a-grad:linear-gradient(135deg,#00ccff 0%,#0066ff 100%);   /* nur Signatur-Badge */
  /* Immer dunkle Flächen (Terminal, Footer, Beweis-Zahlen) */
  --d-0:#000; --d-1:#0f0f0f; --d-bd:rgba(255,255,255,.09);
  --d-txt-1:#fff; --d-txt-2:rgba(255,255,255,.62); --d-txt-3:rgba(255,255,255,.48);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,monospace;
  --nav-h:58px;
  --radius:10px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"] {
  --bg:#0c0c0c; --bg-2:#141414; --bg-3:#1c1c1c; --bg-4:#242424;
  --text-1:#fff; --text-2:rgba(255,255,255,.62); --text-3:rgba(255,255,255,.48);
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.16);
  --nav-bg:rgba(12,12,12,.78); --sig-text:#ffc400;
  --ht-dot:#efece4; --ht-ink:#0c0c0c;          /* Halbton: Punkte auf Grund / auf Gelb */
  --paper:#f6f4ee; --paper-ink:#141414; --paper-line:#d9d5ca;
  color-scheme:dark;
}
[data-theme="light"] {
  --bg:#fff; --bg-2:#f5f5f7; --bg-3:#ececef; --bg-4:#e3e3e7;
  --text-1:#141414; --text-2:#4f4f56; --text-3:#6b6b70;
  --border:#e6e6ea; --border-2:#d2d2d8;
  --nav-bg:rgba(255,255,255,.84); --sig-text:#8a6200;
  --ht-dot:#141414; --ht-ink:#141414;
  --paper:#fff; --paper-ink:#141414; --paper-line:#e2e2e6;
  color-scheme:light;
}

/* ═════════════════════ BASIS ═════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; background:var(--bg); transition:background .25s ease; }
body { font-family:var(--sans); background:var(--bg); color:var(--text-1); line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; transition:color .25s ease, background .25s ease; }
img,canvas,svg { display:block; max-width:100%; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
[id] { scroll-margin-top:calc(var(--nav-h) + 16px); }
.wrap { max-width:1120px; margin:0 auto; padding-inline:48px; }
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--sig-text); outline-offset:3px; border-radius:4px; }
.skip { position:absolute; left:16px; top:-60px; z-index:200; background:var(--sig); color:var(--sig-ink);
  padding:10px 16px; border-radius:6px; font-weight:500; text-decoration:none; }
.skip:focus { top:12px; }

/* Kicker (5.1) */
.kicker { font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
  display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.kicker::before { content:''; width:21px; height:1px; background:currentColor; flex:0 0 auto; }
.kicker.sig { color:var(--sig-text); }

/* ═════════════════════ NAV ═════════════════════ */
.nav { position:fixed; inset:0 0 auto; z-index:99; height:var(--nav-h);
  background:var(--nav-bg); -webkit-backdrop-filter:blur(16px) saturate(1.8); backdrop-filter:blur(16px) saturate(1.8);
  border-bottom:1px solid transparent; transition:background .25s ease, border-color .25s ease; }
.nav.is-scrolled { border-bottom-color:var(--border); }
.nav .wrap { height:100%; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-size:23px; font-weight:500; letter-spacing:-.02em; color:var(--text-1); text-decoration:none; }
.nav-logo b, .footer-logo b { font-weight:600; color:var(--sig); }
.nav-links { display:flex; align-items:center; gap:28px; list-style:none; }
.nav-links a { font-size:14px; color:var(--text-2); text-decoration:none; letter-spacing:-.01em; transition:color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--text-1); }
.nav-links a[aria-current="page"] { box-shadow:inset 0 -2px 0 var(--sig); padding-bottom:4px; }
.nav-cta { font-size:13px; font-weight:500; color:var(--text-1) !important; border:1px solid var(--border-2);
  padding:7px 18px; border-radius:6px; background:var(--bg-3); transition:border-color .15s, background .15s; }
.nav-cta:hover { border-color:var(--sig-text); background:var(--bg-4); }
.theme-toggle { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2);
  background:transparent; border:1px solid var(--border-2); border-radius:6px; padding:6px 12px; cursor:pointer; transition:color .15s, border-color .15s; }
.theme-toggle:hover { color:var(--sig-text); border-color:var(--sig-text); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:10px 4px; flex-direction:column; gap:5px; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text-1); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav.open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity:0; }
.nav.open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ═════════════════════ STATUSHINWEIS (Rückbau 2026-08-19) ═════════════════════
   Bleibt bewusst prominent: volle Breite, direkt unter der Navigation, auf jeder Seite. */
.status { margin-top:var(--nav-h); background:var(--bg-3); border-bottom:1px solid var(--border-2); }
.status .wrap { display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-items:baseline; padding-block:18px; }
.status-label { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sig-ink);
  background:var(--sig); padding:4px 9px; border-radius:4px; white-space:nowrap; }
.status-title { font-weight:600; font-size:15px; color:var(--text-1); }
.status-text { grid-column:2; font-size:14px; line-height:1.55; color:var(--text-2); max-width:78ch; }

/* ═════════════════════ BUTTONS (5.4) ═════════════════════ */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:500 15px/1 var(--sans); letter-spacing:-.01em;
  background:var(--sig); color:var(--sig-ink); padding:13px 24px; border-radius:7px; border:none; text-decoration:none; cursor:pointer; transition:background .15s; }
.btn-primary:hover { background:var(--sig-h); }
.btn-secondary { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:400 14px/1 var(--sans); letter-spacing:-.01em;
  color:var(--text-1); border:1px solid var(--border-2); background:var(--bg-3); padding:12px 22px; border-radius:7px; text-decoration:none; cursor:pointer; transition:border-color .15s, background .15s; }
.btn-secondary:hover { border-color:var(--sig); background:var(--bg-4); }
.btn-link { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--text-2); text-decoration:none; transition:color .15s; }
.btn-link:hover { color:var(--text-1); }

/* ═════════════════════ HERO (5.2 + Ausnahme VB1) ═════════════════════ */
.hero { position:relative; overflow:hidden; }
.hero::before { /* 72px-Raster, blendet nach unten aus */
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:72px 72px; -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 85%); mask-image:linear-gradient(to bottom, #000 0%, transparent 85%); }
.hero .wrap { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px; align-items:center;
  padding-block:clamp(40px,7vw,88px) clamp(56px,7vw,88px); }
.hero h1 { font-size:clamp(44px,5.3vw,78px); font-weight:300; letter-spacing:-.045em; line-height:1.02; margin-bottom:28px; }
.hero h1 strong { font-weight:500; }
.hero h1 .dim { color:var(--text-3); }
.hero-sub { font-size:18px; line-height:1.7; color:var(--text-2); max-width:36em; margin-bottom:40px; letter-spacing:-.01em; }

.stage { position:relative; min-width:0; margin-right:-24px; }
.stage canvas { width:100%; aspect-ratio:1/1; touch-action:pan-y; cursor:crosshair; opacity:0; transition:opacity .6s var(--ease); }
.stage.is-ready canvas { opacity:1; }
.stage-tag { position:absolute; left:0; top:0; display:flex; flex-direction:column; gap:4px; pointer-events:none;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--text-3); }
.stage-tag .rec { color:var(--sig-text); display:flex; align-items:center; gap:8px; }
.stage-tag .rec::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--sig); animation:blink 1.4s steps(2) infinite; }

/* Zahlenblock (5.3) */
.stats { display:flex; flex-wrap:wrap; gap:20px 48px; border-top:1px solid var(--border); padding-top:28px; }
.stat-v { font-family:var(--mono); font-weight:500; font-size:clamp(32px,3.6vw,50px); letter-spacing:-.03em; color:var(--sig-text); line-height:1; margin-bottom:8px; font-variant-numeric:tabular-nums; }
.stat-l { font-size:13px; color:var(--text-3); letter-spacing:.01em; }

/* ═════════════════════ SEKTIONEN ═════════════════════ */
.section { padding-block:112px; border-top:1px solid var(--border); }
.section.alt { background:var(--bg-2); }
.s-intro { display:grid; grid-template-columns:200px minmax(0,1fr); gap:64px; margin-bottom:56px; align-items:start; }
.s-head { font-size:clamp(28px,3.4vw,44px); font-weight:300; letter-spacing:-.03em; line-height:1.1; margin-bottom:16px; }
.s-head strong { font-weight:600; }
.s-head .dim { color:var(--text-3); }
.s-body { font-size:17px; line-height:1.75; color:var(--text-2); letter-spacing:-.01em; max-width:62ch; }

/* Ablauf: drei Stationen auf einer Linie (Reihenfolge ist Inhalt) */
.flow { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; position:relative; counter-reset:step; }
.flow::before, .flow::after { content:''; position:absolute; left:0; right:0; top:31px; height:2px; background:var(--border-2); }
.flow::after { background:var(--sig); transform-origin:left; transform:scaleX(var(--p,1)); }
.flow li { position:relative; padding-right:40px; }
.flow-dot { position:relative; z-index:1; width:64px; height:64px; border-radius:50%; background:var(--bg); border:2px solid var(--border-2);
  display:grid; place-items:center; font-family:var(--mono); font-size:22px; font-weight:500; color:var(--sig-text); margin-bottom:32px; transition:background .4s var(--ease), border-color .4s, color .4s, transform .4s var(--ease); }
html:not(.motion) .flow li:last-child .flow-dot, .flow-dot.on { background:var(--sig); border-color:var(--sig); color:var(--sig-ink); transform:scale(1.06); }
.flow-where { font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-bottom:10px; }
.flow h3 { font-size:22px; font-weight:500; letter-spacing:-.02em; margin-bottom:10px; }
.flow p { font-size:15px; line-height:1.7; color:var(--text-2); }

/* Terminal-Karte (5.6) — immer dunkel */
.proof { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.term { background:var(--d-0); border:1px solid var(--d-bd); border-radius:12px; padding:18px 22px 22px; font-family:var(--mono); font-size:12.5px; line-height:1.8; overflow-x:auto; }
.term-bar { display:flex; align-items:center; gap:6px; margin-bottom:14px; }
.td { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.t-path { font-size:11px; color:var(--d-txt-3); margin-left:10px; }
.t { color:var(--d-txt-2); white-space:pre; }
.tc { color:var(--d-txt-3); font-style:italic; }
.tk { color:var(--d-txt-1); }
.tv { color:var(--sig); }
.cur { display:inline-block; width:6px; height:12px; background:var(--sig); vertical-align:text-bottom; animation:blink 1.2s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
.stats-proof { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--d-bd); border:1px solid var(--d-bd); border-radius:12px; overflow:hidden; }
.stats-proof > div { background:var(--d-1); padding:34px 30px 28px; display:flex; flex-direction:column; justify-content:flex-end; }
.stats-proof .stat-v { color:var(--sig); font-size:clamp(44px,4.8vw,72px); white-space:nowrap; margin-bottom:14px; }
.stats-proof .stat-l { font-size:14px; }
.stats-proof .stat-l { color:var(--d-txt-3); }

/* Input → Output */
.io { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:center; }
.io-col .flow-where { margin-bottom:14px; }
.io-col h3 { font-size:17px; font-weight:500; margin-bottom:8px; letter-spacing:-.01em; }
.io-col > p { font-size:15px; line-height:1.65; color:var(--text-2); max-width:40ch; }
.io-arrow { font-family:var(--mono); font-size:26px; color:var(--sig-text); text-align:center; }
.voice { margin-bottom:24px; background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); padding:20px 20px 16px; }
.section.alt .voice { background:var(--bg); }
.voice-head { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text-3); margin-bottom:14px; letter-spacing:.06em; }
.voice-head .rec { color:var(--sig-text); }
.wave { display:flex; align-items:center; gap:3px; height:72px; }
.wave i { flex:1 1 0; min-width:2px; background:var(--sig); border-radius:2px; height:calc(var(--h) * 1%); opacity:.9; transform-origin:center; }
.voice.is-live .wave i { animation:wave 1.3s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -70ms); }
@keyframes wave { from { transform:scaleY(.35); } to { transform:scaleY(1); } }
.voice-quote { margin-top:14px; font-size:13px; line-height:1.6; color:var(--text-2); font-style:italic; }

/* Beispiel-PDF (Bautagebuch-Blatt) */
.sheet { margin-bottom:24px; background:var(--paper); color:var(--paper-ink); border-radius:4px; padding:22px 22px 18px;
  box-shadow:0 1px 0 var(--paper-line), 0 18px 40px -18px rgba(0,0,0,.45); font-size:12px; line-height:1.45; position:relative; }
.sheet-top { display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid var(--paper-ink); padding-bottom:8px; margin-bottom:10px; }
.sheet-top b { font-size:14px; letter-spacing:-.01em; }
.sheet-top span, .sheet-k { font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#6b6b70; }
.sheet-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 12px; padding-bottom:10px; border-bottom:1px solid var(--paper-line); margin-bottom:10px; }
.sheet-v { font-weight:500; }
.sheet-row { display:grid; grid-template-columns:84px minmax(0,1fr); gap:10px; padding:5px 0; border-bottom:1px dashed var(--paper-line); }
.sheet-row:last-of-type { border-bottom:none; }
.sheet-mark { background:linear-gradient(transparent 55%, rgba(255,196,0,.55) 55%); }
.sheet-sign { display:flex; justify-content:space-between; gap:16px; margin-top:14px; padding-top:22px; }
.sheet-sign span { flex:1; border-top:1px solid var(--paper-ink); padding-top:4px; font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:#6b6b70; }
.sheet-badge { position:absolute; top:-10px; right:16px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--sig); color:var(--sig-ink); padding:3px 8px; border-radius:3px; }

/* About / Story */
.about-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:64px; align-items:start; }
.about-p { font-size:16px; line-height:1.8; color:var(--text-2); margin-bottom:18px; max-width:62ch; }
.about-p strong { color:var(--text-1); font-weight:500; }
.about-p .sig { color:var(--sig-text); font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; list-style:none; }
.chip { font-family:var(--mono); font-size:11px; color:var(--text-2); background:var(--bg-3); border:1px solid var(--border); border-radius:100px; padding:5px 12px; }
.cost-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:6px 28px; list-style:none; }
.cost-item { display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--border); }
.cost-item:last-child { border-bottom:none; }
.cost-n { font-family:var(--mono); font-size:26px; font-weight:500; line-height:1; color:var(--sig-text); letter-spacing:-.03em; }
.cost-item h4 { font-size:17px; font-weight:500; margin-bottom:4px; letter-spacing:-.01em; }
.cost-item p { font-size:14px; line-height:1.6; color:var(--text-2); }

/* Blog-Liste */
.blog-head { border-top:none; padding-top:72px; }
.blog-h1 { font-size:clamp(40px,6.2vw,76px); font-weight:300; letter-spacing:-.04em; line-height:1.03; margin-bottom:20px; }
.blog-h1 strong { font-weight:500; } .blog-h1 .dim { color:var(--text-3); }
.post-list { margin-top:40px; border-top:1px solid var(--border); list-style:none; }
.post { display:grid; grid-template-columns:112px minmax(0,1fr) auto; gap:36px; align-items:baseline; padding:26px 0; border-bottom:1px solid var(--border); }
.post-date { font-family:var(--mono); font-size:12px; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.post-cat { display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--sig-text); margin-bottom:7px; }
.post-title { font-size:19px; font-weight:500; letter-spacing:-.02em; margin:0 0 6px; line-height:1.3; }
.post-excerpt { font-size:15px; color:var(--text-2); line-height:1.6; }
.post-state { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  border:1px solid var(--border-2); border-radius:100px; padding:4px 10px; white-space:nowrap; }

/* ═════════════════════ FOOTER (5.8) — immer dunkel ═════════════════════ */
.footer { background:var(--d-0); border-top:1px solid var(--d-bd); padding-block:56px; color:var(--d-txt-2); }
.footer-top { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.footer-logo { font-size:22px; font-weight:500; letter-spacing:-.02em; color:var(--d-txt-1); text-decoration:none; }
.sig-badge { display:inline-flex; align-items:center; gap:9px; border:1px solid var(--d-bd); border-radius:7px; padding:9px 16px;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; text-transform:lowercase; color:var(--d-txt-2); text-decoration:none; transition:border-color .15s; }
.sig-badge:hover { border-color:rgba(255,255,255,.22); }
.sig-glyph { width:14px; height:14px; border-radius:3.5px; background:var(--a-grad); flex:0 0 auto; }
.footer-links { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:20px; list-style:none; }
.footer-links a { font-size:13px; color:var(--d-txt-3); text-decoration:none; transition:color .15s; }
.footer-links a:hover { color:var(--d-txt-1); }
.footer-copy { font-family:var(--mono); font-size:12px; color:var(--d-txt-3); }
.footer a:focus-visible { outline-color:var(--sig); }

/* ═════════════════════ RECHTSTEXTE (Overlays) ═════════════════════ */
.legal-overlay { position:fixed; inset:0; z-index:1000; display:none; align-items:flex-start; justify-content:center; background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); padding:5vh 16px; overflow-y:auto; }
.legal-overlay.open { display:flex; }
.legal-panel { position:relative; width:100%; max-width:720px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid var(--sig);
  border-radius:12px; padding:40px 44px 44px; color:var(--text-1); overflow-wrap:break-word; }
.legal-close { position:absolute; top:14px; right:16px; width:40px; height:40px; background:none; border:none; cursor:pointer; font-size:24px; line-height:1; color:var(--text-3); transition:color .15s; }
.legal-close:hover { color:var(--sig-text); }
.legal-title { font-size:clamp(1.2rem,4.5vw,1.6rem); font-weight:600; letter-spacing:-.02em; margin:0 0 16px; padding-right:34px; }
.legal-rule { height:1px; background:var(--border); margin:0 0 26px; }
.legal-panel h3 { font-family:var(--mono); font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.12em; color:var(--sig-text); margin:24px 0 8px; }
.legal-panel h3:first-of-type { margin-top:0; }
.legal-panel p, .legal-panel li { color:var(--text-2); line-height:1.7; font-size:15px; }
.legal-panel p { margin:0 0 4px; }
.legal-panel ul { margin:4px 0 0; padding-left:20px; }
.legal-panel a { color:var(--sig-text); text-decoration:underline; text-underline-offset:2px; }
.legal-note { font-size:13px; color:var(--text-3); margin-top:22px; }
.legal-back { display:inline-flex; align-items:center; gap:6px; margin-top:30px; padding:11px 22px; font:inherit; font-size:14px; font-weight:500;
  color:var(--sig-ink); background:var(--sig); border:none; border-radius:7px; cursor:pointer; transition:background .15s; }
.legal-back:hover { background:var(--sig-h); }

/* ═════════════════════ COOKIE-HINWEIS ═════════════════════ */
.cookie-banner { position:fixed; left:0; right:0; bottom:0; z-index:980; display:none; background:var(--bg-2); border-top:1px solid var(--border-2);
  padding:18px 20px calc(18px + env(safe-area-inset-bottom,0px)); box-shadow:0 -12px 32px -16px rgba(0,0,0,.4); }
.cookie-banner.show { display:block; }
.cookie-inner { max-width:1120px; margin:0 auto; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.cookie-text { flex:1 1 340px; color:var(--text-2); font-size:14px; line-height:1.6; }
.cookie-text strong { color:var(--text-1); }
.cookie-text a { color:var(--sig-text); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cookie-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cookie-reject { background:none; border:none; color:var(--text-3); font:inherit; font-size:13px; font-weight:500; cursor:pointer; text-decoration:underline; padding:10px 8px; }
.cookie-reject:hover { color:var(--text-1); }

/* ═════════════════════ BEWEGUNG BEIM SCROLLEN (nur wenn motion.js läuft) ═════════════════════ */
.progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:120; background:var(--sig); transform-origin:left; transform:scaleX(0); pointer-events:none; }
.motion .rv { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s); }
.motion .rv.in { opacity:1; transform:none; }
.motion .term .t { opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .35s; transition-delay:calc(var(--i) * 280ms); }
.motion .term.in .t { opacity:1; transform:none; }
.motion .sheet-row, .motion .sheet-grid, .motion .sheet-sign { opacity:0; transition:opacity .4s; transition-delay:calc(var(--i) * 220ms + .3s); }
.motion .sheet.in .sheet-row, .motion .sheet.in .sheet-grid, .motion .sheet.in .sheet-sign { opacity:1; }
.motion .sheet-mark { background-size:0% 100%; background-repeat:no-repeat; transition:background-size .9s var(--ease) 1.6s; background-image:linear-gradient(transparent 55%, rgba(255,196,0,.55) 55%); }
.motion .sheet.in .sheet-mark { background-size:100% 100%; }

/* Laufband mit Begriffen aus dem Bautagebuch — bewegt sich mit dem Scrollen */
.band { overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding-block:26px; background:var(--bg); }
.band-track { display:flex; width:max-content; white-space:nowrap; will-change:transform; }
.band-track span { font-size:clamp(40px,7vw,104px); font-weight:300; letter-spacing:-.045em; line-height:1; color:var(--text-1); padding-right:.45em; }
.band-track span:nth-child(even) { color:var(--sig-text); font-weight:500; }
.band-track span::after { content:'·'; color:var(--text-3); padding-left:.45em; font-weight:300; }

/* Großes Wortzeichen im Footer */
.footer-mark { display:block; text-decoration:none; font-size:clamp(76px,18.5vw,258px); font-weight:500; letter-spacing:-.065em; line-height:.78; color:var(--d-txt-1);
  margin:8px 0 40px -.04em; user-select:none; white-space:nowrap; }
.footer-mark b { color:var(--sig); font-weight:500; }
.footer-mark { position:relative; }
.footer-mark.is-dotted .dw-text { position:absolute; left:0; top:0; opacity:0; pointer-events:none; }
.footer-mark canvas { display:block; max-width:none; touch-action:pan-y; }

/* ═════════════════════ RESPONSIVE ═════════════════════ */
@media (max-width:980px) {
  .wrap { padding-inline:32px; }
  .s-intro { grid-template-columns:1fr; gap:12px; margin-bottom:40px; }
  .proof { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; gap:40px; }
  .io { grid-template-columns:1fr; gap:8px; }
  .io-arrow { transform:rotate(90deg); padding-block:8px; }
  .nav-toggle { display:flex; }
  .nav-links { display:none; position:absolute; top:var(--nav-h); left:0; right:0; background:var(--bg); flex-direction:column; align-items:stretch;
    padding:8px 32px 20px; border-bottom:1px solid var(--border); gap:0; }
  .nav.open .nav-links { display:flex; }
  .nav-links a { display:block; padding:14px 0; font-size:16px; border-bottom:1px solid var(--border); color:var(--text-1); }
  .nav-links a[aria-current="page"] { box-shadow:none; color:var(--sig-text); }
  .nav-cta { text-align:center; margin-top:12px; border-bottom:1px solid var(--border-2) !important; }
  .theme-toggle { width:100%; margin-top:12px; padding:10px; }
}
@media (max-width:820px) {
  .stage { margin-right:0; }
  .hero .wrap { grid-template-columns:1fr; padding-block:24px 64px; gap:8px; }
  .stage { order:-1; width:100%; max-width:400px; margin-inline:auto; }
  .flow { grid-template-columns:1fr; gap:36px; }
  .flow::before, .flow::after { left:27px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .flow::after { transform-origin:top; transform:scaleY(var(--p,1)); }
  .flow li { padding:6px 0 0 80px; }
  .flow-dot { width:56px; height:56px; font-size:19px; }
  .flow-dot { position:absolute; left:0; top:0; margin:0; }
}
@media (max-width:600px) {
  :root { --nav-h:52px; }
  html { font-size:15px; }
  .wrap { padding-inline:20px; }
  .status .wrap { grid-template-columns:1fr; }
  .status-text { grid-column:1; }
  .nav-links { padding-inline:20px; }
  .hero h1 { font-size:clamp(36px,10.4vw,52px); letter-spacing:-.035em; margin-bottom:20px; }
  .hero-sub { font-size:16px; margin-bottom:30px; }
  .stats { gap:18px 32px; }
  .section { padding-block:72px; }
  .stats-proof > div { padding:20px 16px; }
  .term { font-size:11px; padding:14px 16px; }
  .cost-box { padding:4px 20px; }
  .sheet-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .post { grid-template-columns:minmax(0,1fr); gap:8px; }
  .legal-overlay { padding:0; }
  .legal-panel { min-height:100%; border-radius:0; padding:30px 18px 40px; }
  .legal-back { width:100%; justify-content:center; }
  .cookie-inner { flex-direction:column; align-items:stretch; gap:14px; }
  .cookie-actions { flex-direction:column-reverse; }
  .cookie-actions > * { width:100%; justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
}