/* ============================================================
Regingada UG (haftungsbeschränkt) — site.css
Shared design system: index.html · trust-center.html · impressum.html
0 external loads. Fonts via funk-fonts.css / funk-mono.css.
DARK-PRIMARY (Theo-Direktive 2026-06-12):
ehem. Creme-Flächen -> Ink #15130F (Seiten-Grund) ·
ehem. Weiß-Flächen -> Creme #F2F0EA (Karten/helle Bänder).
Kontext-Token-Architektur: :root = Ink-Grund (dunkle Glass-Token
als Default), .light-band/.imp/.lg + Creme-Karten (inkl. TC-Ledger-
Karten) remappen auf die hellen Token. Trust-Center selbst ist seit
QA-Welle 2 ebenfalls Ink-Grund (Direktive: index + trust-center).
============================================================ */
:root{
/* Brand */
--ink:#1B1611; /* warm brown-black — text on cream + ground via --bg (was #15130F) */
--ink-2:#2E2A22;
--cream:#F2F0EA;
--neon:#BCFF1B; /* accent/CTA only on dark/ink grounds — never text on light */
--blue:#5695E9; /* 6.1:1 on ink — AA as text on the ink ground */
--violet:#918BB7; /* consumed by .dcis-mark brand gradient */
--muted:#5C5850; /* muted on cream surfaces (6.1:1) */
--muted-dark:#A9A5B8; /* muted on ink ground (7.8:1) */
--hairline-dark:rgba(255,255,255,.16);
--focus:#2F6FD6;
/* Surfaces (Theo-Direktive) */
--bg:#1B1611; /* page ground — warm brown-black (was #15130F; warmed so cream reads cream, not white) */
--surface:#F2F0EA; /* cards / light bands (ehem. weiß) */
/* Contextual text tokens — DEFAULT = on ink ground */
--tx:#F2F0EA; /* headings / strong text on dark */
--tx-body:#EDEAE2; /* body text on dark (weich) */
--mut:var(--muted-dark);
--hairline:rgba(255,255,255,.16);
--focus-ctx:var(--neon);
--link-hover:var(--neon);
--link-hover-bd:var(--neon);
--bd-accent:var(--blue); /* non-text UI borders/indicators: 6.07:1 on ink */
--pending-bd:rgba(255,255,255,.45);
--accent-bar:var(--neon);
/* Type */
--font-sans:'Funk Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--font-serif:'Funk Serif',Georgia,'Times New Roman',serif;
--font-mono:'Funk Mono','Consolas','Courier New',monospace;
/* Glassmorphism 2.0 — DEFAULT = dark variant (exact DCIS_v8 tokens) */
--card-glass-grad:linear-gradient(157deg, rgba(86,98,126,.62) 0%, rgba(66,76,100,.52) 26%, rgba(48,56,76,.44) 55%, rgba(40,47,64,.38) 80%, rgba(33,40,55,.34) 100%);
--card-glass-bd:rgba(255,255,255,.17);
--card-glass-shadow:inset 0 2px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(0,0,0,.45), inset 1px 0 0 rgba(255,255,255,.05), 0 2px 3px rgba(0,0,0,.42), 0 12px 26px -12px rgba(0,0,0,.52), 0 28px 64px -18px rgba(0,0,0,.62);
--card-glass-shadow-hover:var(--card-glass-shadow);
}
/* Light contexts: cream bands + documentary pages (imp) + Rechtsseiten (lg:
agb/datenschutz laden site.css mit, bleiben aber eigenständige helle Dokumente)
+ cream-solid cards (inkl. Trust-Center-Ledger-Karten/Accordions — die TC-Seite
selbst ist seit dem Dark-Flip Ink-Grund, nur ihre Karten sind Creme).
Remaps text/hairline/focus/glass tokens to the light set.
Glass-Stops 0/22%: ehem. Weiß -> Creme (Theo-Direktive "Weiß -> Creme";
die violett getönten Tiefen-Stops 50/78/100% bleiben unverändert). */
.light-band, .trust-teaser, .imp, .lg,
.int-card, .glass-card.coverage-card, .glass-card.step, .glass-card.founder,
.ledger-card, .tc details{
--tx:var(--ink);
--tx-body:var(--ink-2);
--mut:var(--muted);
--hairline:rgba(21,19,15,.14);
--focus-ctx:var(--focus);
--link-hover:#2A63BF; /* 5.0:1 on cream — #2F6FD6 was 4.22:1 (hover state WCAG 1.4.3) */
--link-hover-bd:var(--ink);
--bd-accent:#2A63BF; /* non-text borders on cream: 3.3:1 (1.4.11) — #5695E9 was 2.68:1 */
--pending-bd:rgba(21,19,15,.45);
--accent-bar:var(--blue);
--card-glass-grad:linear-gradient(157deg, rgba(242,240,234,.98) 0%, rgba(242,240,234,.9) 22%, rgba(250,249,254,.76) 50%, rgba(243,241,251,.62) 78%, rgba(237,234,248,.54) 100%);
--card-glass-bd:rgba(242,240,234,.95);
--card-glass-shadow:inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(23,10,49,.08), inset 1px 0 0 rgba(255,255,255,.6), inset -1px 0 0 rgba(23,10,49,.04), 0 2px 3px rgba(26,24,23,.06), 0 12px 26px -12px rgba(23,10,49,.20), 0 28px 64px -18px rgba(23,10,49,.32);
--card-glass-shadow-hover:inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(23,10,49,.08), inset 1px 0 0 rgba(255,255,255,.6), inset -1px 0 0 rgba(23,10,49,.04), 0 5px 10px rgba(26,24,23,.06), 0 20px 38px -14px rgba(23,10,49,.20), 0 42px 88px -20px rgba(23,10,49,.32);
color:var(--ink);
}
/* Dark re-assert: topbar (immer Ink-Glas, auch auf imp/lg) + Ink-Bänder + Footer.
Hinweis: aktuell ist nur .topbar load-bearing (Ink-Topbar innerhalb der
Light-Kontexte body.imp/body.lg); .dark-band/.final-cta/footer sind reine
Defensive gegen künftiges Nesting — nicht als tot entfernen. */
.topbar, .dark-band, footer.site-footer, .final-cta{
--tx:#F2F0EA;
--tx-body:#EDEAE2;
--mut:var(--muted-dark);
--hairline:var(--hairline-dark);
--focus-ctx:var(--neon);
--link-hover:var(--neon);
--link-hover-bd:var(--neon);
--bd-accent:var(--blue);
--pending-bd:rgba(255,255,255,.45);
--accent-bar:var(--neon);
--card-glass-grad:linear-gradient(157deg, rgba(86,98,126,.62) 0%, rgba(66,76,100,.52) 26%, rgba(48,56,76,.44) 55%, rgba(40,47,64,.38) 80%, rgba(33,40,55,.34) 100%);
--card-glass-bd:rgba(255,255,255,.17);
--card-glass-shadow:inset 0 2px 0 rgba(255,255,255,.13), inset 0 -2px 0 rgba(0,0,0,.45), inset 1px 0 0 rgba(255,255,255,.05), 0 2px 3px rgba(0,0,0,.42), 0 12px 26px -12px rgba(0,0,0,.52), 0 28px 64px -18px rgba(0,0,0,.62);
--card-glass-shadow-hover:var(--card-glass-shadow);
}
/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id], #tour, #main, details[id]{scroll-margin-top:84px}
@media(max-width:640px){section[id], #tour, #main, details[id]{scroll-margin-top:24px}}
body{
margin:0;
font-family:var(--font-sans);
font-size:17px;
line-height:1.6;
color:var(--tx-body);
background:var(--bg);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-serif);font-weight:600;line-height:1.12;margin:0 0 .5em;letter-spacing:-.01em;text-wrap:balance;color:var(--tx)}
h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.25rem;font-family:var(--font-sans);font-weight:700}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;height:auto}
figure{margin:0}
code,pre{font-family:var(--font-mono);font-size:.84em}
:focus-visible{outline:3px solid var(--focus-ctx);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--surface);color:var(--ink);padding:10px 18px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:84px 0}
.kicker{
font-family:var(--font-mono);
font-size:.74rem;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--mut);
display:block;
margin-bottom:14px;
}
.sec-sub{max-width:640px;color:var(--mut);font-size:1.06rem;text-wrap:pretty}
/* ---------- Bands ---------- */
/* ehem. weiße Bänder -> Creme-Bänder mit Ink-Text */
.light-band{background:var(--surface)}
/* ehem. .dark-band-Sektionen verschmelzen mit dem Ink-Grund;
Abhebung nur via Hairline + eigene dunkle Glass-Karten (keine neue Farbe) */
.dark-band{background:var(--bg);border-top:1px solid var(--hairline-dark)}
/* ---------- Topbar (Ink-Glas — backdrop-filter allowed: floating element) ---------- */
.topbar{
position:sticky;top:0;z-index:100;
background:rgba(27,22,17,.85);
border-bottom:1px solid var(--hairline-dark);
color:var(--tx-body);
}
@supports (backdrop-filter:blur(14px)){
/* Alpha .85 (nicht .6): über Creme-Bändern/Seiten komposittiert .6 zu rgb(109,107,103)
-> Nav-Links 4.40:1, lang-toggle 2.21:1, aria-current-Blau 1.73:1 (alle FAIL).
Bei .85 = rgb(54,52,48): alle Topbar-Paarungen AA-grün. */
.topbar{backdrop-filter:blur(14px) saturate(1.15);background:rgba(27,22,17,.85)}
}
.topbar-inner{display:flex;align-items:center;gap:22px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:1.05rem;letter-spacing:.01em;color:var(--tx)}
.brand img{display:block}
.topnav{display:flex;gap:22px;margin-left:auto;align-items:center;flex-wrap:wrap}
.topnav a{
text-decoration:none;font-size:.92rem;font-weight:600;color:var(--tx-body);
padding:6px 2px;border-bottom:2px solid transparent;
}
.topnav a:hover{border-bottom-color:var(--blue)}
.topnav a{transition:border-bottom-color .15s ease,color .15s ease}
.topnav a[aria-current="true"]{border-bottom-color:var(--blue);color:var(--blue)}
/* ---------- Language toggle (text only — no flag emoji; topbar = always ink) ---------- */
.lang-toggle{display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:.8rem}
.lang-toggle button{
background:none;border:1px solid transparent;border-radius:6px;
font:inherit;color:var(--muted-dark);padding:4px 8px;cursor:pointer;
min-width:44px;min-height:44px; /* WCAG 2.5.5 touch target */
}
.lang-toggle button{transition:background-color .15s ease,color .15s ease}
.lang-toggle button:hover{color:#fff;background:rgba(255,255,255,.08)}
.lang-toggle button[aria-pressed="true"]{color:#fff;background:rgba(255,255,255,.12);font-weight:700}
.lang-toggle .sep{color:var(--hairline-dark)}
/* ---------- Buttons ---------- */
.btn{
display:inline-block;text-decoration:none;font-weight:700;font-size:.95rem;
border-radius:999px;padding:12px 26px;border:1px solid transparent;
transition:transform .15s ease, box-shadow .15s ease;
cursor:pointer;
}
.btn-primary{background:var(--neon);color:var(--ink);border-color:rgba(21,19,15,.25)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--hairline);color:var(--tx);background:transparent}
.btn-ghost:hover{border-color:var(--bd-accent)}
.link-arrow{font-weight:700;text-decoration:none;color:var(--tx);border-bottom:2px solid var(--bd-accent);transition:color .15s ease,border-bottom-color .15s ease}
a.link-arrow:hover{color:var(--link-hover);border-bottom-color:var(--link-hover-bd)}
/* Pending (pre-go-live) CTAs — visibly disabled, no navigation, no false affordance */
.btn-pending,.link-pending{cursor:not-allowed;opacity:.78}
.btn-pending{display:inline-flex;align-items:center;gap:10px}
.link-pending{display:inline-flex;align-items:center;gap:8px;border-bottom-color:var(--hairline)}
.pending-tag{
font-family:var(--font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
border:1px dashed var(--pending-bd);border-radius:4px;padding:2px 7px;font-weight:600;white-space:nowrap;
}
.btn:active{transform:translateY(0) scale(.985);transition-duration:.06s}
/* Pending CTAs must not animate like clickable buttons (false affordance) */
.btn-pending{transition:none}
.btn-pending:hover,.btn-pending:active{transform:none;box-shadow:none}
.btn-ghost.btn-pending:hover{border-color:var(--hairline)}
.link-pending:hover{color:inherit;border-bottom-color:var(--hairline)}
/* quiet secondary pending tags — only the hero keeps the loud dashed chip */
.link-pending .pending-tag, .btn-ghost.btn-pending .pending-tag{border:none;padding:0;opacity:.8}
/* ---------- Glass card ---------- */
.glass-card{
background:var(--card-glass-grad);
border:1px solid var(--card-glass-bd);
box-shadow:var(--card-glass-shadow);
border-radius:16px;
}
.glass-card.hoverable{transition:box-shadow .2s ease, transform .2s ease}
.glass-card.hoverable:hover{box-shadow:var(--card-glass-shadow-hover);transform:translateY(-2px)}
/* Hero neon glow appended to the glass shadow (tokens untouched; 0-2-0 beats both single classes) */
.glass-card.glow-neon{box-shadow:var(--card-glass-shadow), 0 0 60px rgba(188,255,27,.18);transition:box-shadow .25s ease}
.glass-card.glow-neon:hover{box-shadow:var(--card-glass-shadow-hover), 0 0 80px rgba(188,255,27,.28)}
/* Creme-solid cards (ehem. weiß-solid; Theo-Direktive: int-card, coverage-card,
trust-tabellen, steps + Founder-Karte) — Ink-Text via Light-Kontext oben */
.glass-card.coverage-card, .glass-card.step, .glass-card.founder{
background:var(--surface);
border:1px solid rgba(21,19,15,.16);
box-shadow:0 2px 3px rgba(26,24,23,.10), 0 14px 30px -14px rgba(0,0,0,.40);
}
.glass-card.coverage-card.hoverable:hover{
box-shadow:0 5px 10px rgba(26,24,23,.10), 0 22px 44px -16px rgba(0,0,0,.45);
}
/* ---------- Screenshot frames ---------- */
.shot{display:block;width:100%;height:auto;border-radius:12px}
.shot-frame{padding:10px;border-radius:18px}
.shot-frame--ink{
background:#1B1826;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 2px 3px rgba(26,24,23,.08), 0 24px 60px -18px rgba(23,10,49,.35);
}
.shot-caption{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-top:10px}
/* ---------- Hero ---------- */
.hero{padding:72px 0 88px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:55fr 45fr;gap:54px;align-items:center}
.hero h1{margin:14px 0 18px}
.hero-sub{font-size:1.14rem;color:var(--tx-body);max-width:560px}
.hero-ctas{display:flex;gap:16px;align-items:center;margin:26px 0 22px;flex-wrap:wrap}
.trustline{
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--mut);border-top:1px solid var(--hairline);padding-top:14px;max-width:560px;
}
.hero-visual{position:relative}
.hero-visual .glass-card{padding:10px;position:relative;transition:transform .25s ease, box-shadow .25s ease}
/* 3D-Lift beim Drüberfahren — kräftige Elevation + hellerer Neon-Glow (war auf
Dunkel durch den Dark-Flip deaktiviert; hier eigens für die Hero-Video-Karte). */
.hero-visual .glass-card.glow-neon:hover{
transform:translateY(-5px) scale(1.012);
box-shadow:
0 10px 20px rgba(0,0,0,.42),
0 30px 56px -20px rgba(0,0,0,.6),
0 56px 110px -28px rgba(0,0,0,.72),
0 0 95px rgba(188,255,27,.32);
}
.hero-visual video{display:block;width:100%;height:auto;border-radius:12px;background:#10131D}
/* Play affordance — pointer-events:none keeps native controls usable; white triangle on dark scrim */
.hero-visual .glass-card::after{
content:"";position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
background:rgba(16,19,29,.62) url('data:image/svg+xml;utf8,') center/32px no-repeat;
border:1px solid rgba(255,255,255,.35);pointer-events:none;
transition:transform .2s ease,opacity .2s ease;
}
.hero-visual .glass-card:hover::after{transform:scale(1.06)}
.hero-visual .glass-card.playing::after{opacity:0;transform:scale(.9)}
/* Hero-Video: groß und zum rechten Rand ausgerichtet — ABER die rechte Kante
bleibt rechnerisch immer ~24px INNERHALB des Viewports (Rechtskante = 100vw−24),
also nie abgeschnitten und Vollbild-Button erreichbar (Firefox-Fix).
Herleitung: wrap-Inhalt-Rechtskante = 50vw+566 (max-width 1180, padding 24);
Ziel 100vw−24 ⇒ margin-right = 566+24 − 50vw = calc(590px − 50vw).
Der echte Über-den-Rand-Bleed bleibt den statischen Screenshots vorbehalten. */
.hero-visual{margin-right:0}
@media(min-width:1180px){ .hero-visual{margin-right:calc(590px - 50vw)} }
/* ---------- Stat band ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:40px}
.stat-tile{padding:22px 18px;text-align:left}
.stat-num{font-family:var(--font-serif);font-size:clamp(2rem,3.4vw,2.9rem);font-weight:700;line-height:1;display:block}
.stat-num,.crossreg-stat{font-variant-numeric:tabular-nums}
.stat-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);display:block;margin-top:8px;line-height:1.5}
.stats-note{font-size:.9rem;color:var(--mut);margin-top:22px}
/* ---------- Suite grid ---------- */
.suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.suite-card{padding:22px;display:flex;flex-direction:column;gap:12px}
.suite-card h3{margin:0}
/* p auf var(--tx-body) statt var(--mut): #A9A5B8 fiel am hellsten Dark-Glass-
Gradient-Stop auf 4.07:1; #EDEAE2 = 8.1:1 (WCAG AA) */
.suite-card p{color:var(--tx-body);font-size:.94rem;margin:0}
.suite-thumb{border-radius:10px;overflow:hidden;border:1px solid var(--hairline);margin-top:auto}
.suite-thumb img{display:block;width:100%;height:150px;object-fit:cover;object-position:top left}
/* ---------- Coverage grid ---------- */
.coverage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.coverage-card{padding:24px;display:flex;flex-direction:column;gap:8px}
.coverage-card .cov-icon{width:34px;height:34px;color:var(--tx-body)}
.coverage-card h3{margin:6px 0 0}
.coverage-card .cov-tag{font-family:var(--font-serif);font-size:1.2rem;font-weight:600}
.coverage-card p{color:var(--mut);font-size:.92rem;margin:0}
/* Hook-Zweitzeile unter dem Bestands-Absatz (Feature-Welle):
erbt var(--mut) = #5C5850 auf Creme-Karte (6.1:1, AA auch bei .84rem) */
.coverage-card .cov-hook{font-size:.84rem;margin-top:4px;padding-top:10px;border-top:1px dashed var(--hairline)}
.coverage-card.link-card{justify-content:center;align-items:flex-start}
/* ---------- Cross-reg band ---------- */
.crossreg-stat{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--neon);margin:8px 0 4px}
.crossreg-stat-note{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.bullets{list-style:none;padding:0;margin:24px 0}
.bullets li{position:relative;padding:7px 0 7px 34px;font-size:1rem}
.bullets li::before{
content:"";position:absolute;left:0;top:13px;width:18px;height:18px;border-radius:5px;
background:var(--neon);
-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* on cream grounds the chevron must not be neon-on-light: use ink
(aktuell keine .bullets in .light-band — bewusste Defensive, nicht tot) */
.light-band .bullets li::before{background:var(--ink)}
.crossreg-shotwrap{position:relative;margin-top:54px;margin-bottom:-84px} /* angeschnitten am Band-Rand */
.crossreg-shotwrap .floating-card{
position:absolute;right:2%;top:-120px;width:min(420px,44%);
padding:8px;border-radius:16px;
}
.crossreg-shotwrap .shot-frame--ink{max-height:520px;overflow:hidden}
.crossreg-shotwrap .shot-frame--ink .shot{border-radius:12px 12px 0 0}
/* ---------- Zig-zag deep dives ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .txt h2{margin-top:10px}
.split.rev .txt{order:2}
.split.rev .vis{order:1}
.inline-stat{
font-family:var(--font-mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
border-left:3px solid var(--accent-bar);padding:6px 0 6px 14px;margin:20px 0;display:block;color:var(--tx-body);
}
.vis{position:relative}
.vis .floating-card{
position:absolute;left:-28px;bottom:-30px;width:min(300px,52%);
padding:8px;border-radius:16px;
}
/* ---------- Funnel steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0}
.step{padding:18px}
.step .step-no{
font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;display:inline-block;
background:var(--ink);color:#fff;border-radius:999px;padding:3px 12px;margin-bottom:10px;
}
.step.step-final .step-no{background:var(--focus)} /* #2F6FD6: white text = 4.81:1 (WCAG 1.4.3); --blue failed at 3.06:1 */
.step h3{font-size:1rem;margin:0 0 6px}
.step p{font-size:.88rem;color:var(--mut);margin:0}
/* Workflow-Strip (#workflow, Creme-Band): 5 Karten — auto-fit bricht sauber um.
⚠ (0,2,0) schlägt die .steps-Regel der 640px-Query -> dort explizit re-overridet */
.steps.steps-5{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
/* ---------- Use-case archetypes (#usecases, Ink-Grund, Dark-Glass-Karten) ---------- */
.uc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:38px}
.uc-card{padding:18px;display:flex;flex-direction:column;gap:8px}
.uc-card h3{font-size:1rem;margin:0}
/* var(--tx-body) statt var(--mut): wie .suite-card p — #A9A5B8 fällt am hellsten
Dark-Glass-Gradient-Stop unter 4.5:1; #EDEAE2 = 8.1:1 (WCAG AA) */
.uc-card p{font-size:.88rem;color:var(--tx-body);margin:0}
.uc-note{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:18px 0 0}
/* ---------- Lawyer-built split ---------- */
.boundary-panel{display:grid;grid-template-columns:1fr auto 1fr;gap:0;margin-top:44px;align-items:stretch}
.bp-card{padding:30px}
.bp-card.regingada{border-top:5px solid var(--neon)}
.bp-card.kanzlei{border-top:5px solid var(--blue)}
.bp-card h3{font-family:var(--font-serif);font-size:1.3rem}
.bp-card ul{list-style:none;margin:14px 0 0;padding:0}
.bp-card li{padding:7px 0;border-bottom:1px solid var(--hairline);font-size:.94rem}
.bp-card li:last-child{border-bottom:none}
.boundary-divider{
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:0 18px;position:relative;
}
.boundary-divider::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px dashed var(--hairline)}
.boundary-label{
position:relative;background:var(--ink);color:#fff;font-family:var(--font-mono);
font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 10px;border-radius:6px;
writing-mode:vertical-rl;text-orientation:mixed;
}
.boundary-caption{
text-align:center;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--mut);margin-top:22px;
}
/* „Wenn es ernst wird“-Absatz unter der Boundary-Caption (Creme-Band:
var(--tx-body) = --ink-2, ruhige Lesefassung, kein Chip-Stil) */
.boundary-serious{
max-width:760px;margin:18px auto 0;text-align:center;
font-size:.98rem;color:var(--tx-body);text-wrap:pretty;
}
.founder{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;margin:54px 0 0;padding:30px}
.founder img{border-radius:14px;display:block;width:180px;height:auto;box-shadow:0 2px 3px rgba(26,24,23,.08), 0 12px 26px -12px rgba(23,10,49,.22)}
.founder-photo{position:relative;display:inline-block}
.founder blockquote{font-family:var(--font-serif);font-size:1.22rem;line-height:1.5;margin:0}
.founder figcaption{margin-top:12px;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
/* ---------- Integrations ---------- */
.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:42px}
.int-card{padding:22px;border:1px solid rgba(21,19,15,.16);border-radius:16px;background:var(--surface);display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;min-width:0;box-shadow:0 2px 3px rgba(26,24,23,.10), 0 14px 30px -14px rgba(0,0,0,.40)}
.int-card:hover{border-color:var(--bd-accent);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(0,0,0,.45)}
.int-card h3{margin:0}
.int-card p{font-size:.9rem;color:var(--mut);margin:0}
.int-card pre{
background:#1B1826;color:#D9F99D;border-radius:8px;padding:14px;overflow-x:auto;
font-size:.74rem;line-height:1.6;margin:auto 0 0;
}
.copy-btn{
align-self:flex-start;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
background:none;border:1px solid var(--hairline);border-radius:6px;padding:5px 14px;cursor:pointer;color:var(--mut);
min-height:44px;min-width:44px; /* WCAG 2.5.5 touch target */
}
.copy-btn:hover{border-color:var(--bd-accent);color:var(--tx)}
.copy-btn{transition:border-color .15s ease,color .15s ease,background-color .15s ease}
.copy-btn.copied{border-color:#3E7B27;color:#2F5E1E;background:rgba(62,123,39,.08)}
/* ---------- Trust teaser ---------- */
.trust-teaser{padding:56px 0;background:var(--surface)}
.teaser-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:22px}
.posture-chip{
font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
border:1px solid var(--ink);border-radius:6px;padding:8px 14px;background:var(--ink);color:var(--surface);
}
/* ---------- Final CTA ---------- */
.final-cta{text-align:center;padding:110px 0 90px;background:radial-gradient(560px 320px at 50% 32%, rgba(188,255,27,.08), transparent 70%), var(--bg)}
.dcis-mark{
font-family:var(--font-serif);font-weight:700;font-size:clamp(2rem,4vw,3rem);
background:linear-gradient(90deg,var(--neon),var(--violet));
-webkit-background-clip:text;background-clip:text;color:transparent;
display:inline-block;margin-bottom:8px;
}
.final-cta .hero-ctas{justify-content:center}
.cta-note{font-size:.85rem;color:var(--mut);margin-top:14px}
/* Kanzlei-Teaser-Zeile unter cta_sub (--mut = #A9A5B8 auf Ink, 7.8:1) */
.final-cta .cta-serious{max-width:620px;margin:14px auto 0}
/* ---------- Footer ---------- */
footer.site-footer{background:#100E18;color:#C9C5DA;padding:64px 0 34px;font-size:.92rem}
footer.site-footer a{color:#EDEBF5;text-decoration:none}
footer.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px}
.footer-grid h3,.footer-grid h4{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8B86A0;margin:0 0 14px;font-weight:600}
.footer-grid ul{list-style:none;margin:0;padding:0}
.footer-grid li{padding:4px 0}
.footer-bottom{
border-top:1px solid var(--hairline-dark);margin-top:46px;padding-top:22px;
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;
font-size:.8rem;color:#8B86A0;
}
.footer-sep{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
/* ---------- Impressum (§ 5 DDG) — sits at the foot of the page ---------- */
.footer-impressum{border-top:1px solid var(--hairline-dark);margin-top:46px;padding-top:32px}
.footer-impressum h3{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#8B86A0;margin:0 0 4px;font-weight:600}
.footer-impressum .imp-sub{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8B86A0;margin:0 0 18px}
.footer-impressum .imp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.footer-impressum p{margin:0;line-height:1.7}
@media(max-width:760px){.footer-impressum .imp-cols{grid-template-columns:1fr;gap:18px}}
/* ---------- Draft badge (default = dark-ground gold; light contexts override) ---------- */
.draft-badge{
display:inline-block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
border:1px dashed #C9A668;color:#E8D49A;background:rgba(201,166,104,.12);border-radius:4px;padding:1px 8px;vertical-align:2px;
}
/* TC-Seite ist seit Dark-Flip Ink-Grund: Light-Gold nur noch in den Creme-Ledger-Karten */
.light-band .draft-badge,.ledger-card .draft-badge,.imp .draft-badge,.lg .draft-badge{border-color:#B08D2F;color:#7A5C0A;background:#FBF6EC}
/* ---------- Reveal (CSS-only, reduced-motion safe) ---------- */
@media (prefers-reduced-motion: no-preference){
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}
/* ---------- Responsive ---------- */
@media(max-width:1020px){
.stats-grid{grid-template-columns:repeat(3,1fr)}
.suite-grid,.coverage-grid,.integration-grid{grid-template-columns:repeat(2,1fr)}
.hero-grid{grid-template-columns:1fr;gap:40px}
.hero-visual{margin-right:0}
.split{grid-template-columns:1fr;gap:36px}
.split.rev .txt{order:1}
.split.rev .vis{order:2}
.footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
section{padding:60px 0}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.suite-grid,.coverage-grid,.integration-grid{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}
.steps.steps-5{grid-template-columns:1fr} /* (0,2,0)-Falle: ohne Re-Override bliebe auto-fit aktiv */
.boundary-panel{grid-template-columns:1fr}
.boundary-divider{padding:18px 0}
.boundary-divider::before{left:0;right:0;top:50%;bottom:auto;border-left:none;border-top:2px dashed var(--hairline)}
.boundary-label{writing-mode:horizontal-tb}
.founder{grid-template-columns:1fr}
.topnav{gap:12px}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:4px 8px}
.topbar{position:static}
.topbar-inner{flex-wrap:wrap;row-gap:0;padding:8px 24px}
.topbar-inner .brand{order:0}
.topbar-inner .topnav{order:1;flex-basis:100%;justify-content:flex-start;row-gap:6px;padding-bottom:8px}
.topnav .btn-pending{white-space:nowrap}
.topnav .btn-pending .pending-tag{font-size:.52rem;padding:2px 5px;letter-spacing:.06em}
.vis .floating-card{position:static;width:100%;margin-top:12px}
.crossreg-shotwrap .floating-card{position:static;width:100%;margin-bottom:12px}
.final-cta{padding:72px 0 56px}
#stats figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
#stats figure .shot{min-width:760px;border-radius:8px}
}
/* ---------- Print (dunkle Flächen drucken hell) ---------- */
@media print{
html.js .reveal{opacity:1!important;transform:none!important}
.topbar,.skip-link,.chip-bar,.copy-btn,video,.btn-pending,.link-pending{display:none!important}
body,.dark-band,.light-band,.trust-teaser,.final-cta,footer.site-footer{background:#fff!important;color:#000!important}
h1,h2,h3,h4,p,li,blockquote,figcaption,.kicker,.sec-sub,.stat-label,.stats-note,.cta-note,.crossreg-stat-note,.shot-caption,.inline-stat,.trustline,.boundary-caption{color:#000!important}
.glass-card,.shot-frame--ink,.int-card,.step,.coverage-card,.founder{background:#fff!important;box-shadow:none!important;border:1px solid #999!important}
.posture-chip,.step .step-no,.boundary-label{background:#fff!important;color:#000!important;border:1px solid #999!important}
.crossreg-stat{color:#000!important}
footer.site-footer a{color:#000!important}
.footer-grid h3,.footer-grid h4,.footer-bottom{color:#000!important}
.footer-bottom{border-top-color:#999!important}
.footer-grid a[href^="http"]::after,.imp-wrap a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em}
/* Brand-Schriftzug: background-clip:text-Gradient druckt sonst unsichtbar */
.dcis-mark{background:none!important;color:#000!important;-webkit-text-fill-color:#000!important}
/* Links auf Dark-Ground (Hero/Final-CTA): --tx wäre fast-weiß auf Papier */
.link-arrow{color:#000!important;border-bottom-color:#999!important}
/* Snippet-Blöcke: Lime-auf-Ink wird ohne Hintergrunddruck unleserlich */
.int-card pre{background:#fff!important;color:#000!important;border:1px solid #999}
/* DRAFT-Badges: Dark-Gold-Default wäre blassgold auf Weiß */
.draft-badge{color:#000!important;border-color:#999!important;background:#fff!important}
/* Play-Kreis-Overlay auf der (leeren) Video-Karte unterdrücken */
.hero-visual .glass-card::after{display:none!important}
/* mask-basierte Chevrons drucken nicht: auf Listenmarker zurückfallen */
.bullets{list-style:disc;padding-left:20px}
.bullets li{padding-left:0}
.bullets li::before{display:none!important}
/* Trust-Center-Ledger (Dark-Flip): dunkle/getönte Flächen hell drucken */
.ledger-card,.tc details,.notyet-card,.flow-browser,.flow-path,.hl-claim,.status-chip,.tc-draft-banner,.boundary-cols{background:#fff!important;color:#000!important;border-color:#999!important;box-shadow:none!important}
.doc-meta,.doc-act,.feed-date,.feed-tag,.feed-anchor,.flow-route,.flow-note,.flow-default,.bc-tag,.notyet-label,.ck-yes,.ck-no,.tc-footer,.kv th,.det-body{color:#000!important}
}
/* ───────── Digital-Twin-Sektion (#twin) + per-Regime-Twin-Zeilen ───────── */
.twin-engine{
max-width:760px;margin:8px 0 6px;
font-family:var(--font-serif);font-size:clamp(1.12rem,2vw,1.42rem);
font-weight:600;line-height:1.32;color:var(--tx);
border-left:3px solid var(--neon);padding-left:16px;text-wrap:pretty;
}
.twin-steps .step-no{
display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;
background:var(--neon);color:#15130F;
font-family:var(--font-serif);font-weight:700;font-size:1.12rem;
}
.twin-shot{margin:6px 0 16px;max-height:560px;overflow:hidden}
.twin-shot .shot{border-radius:12px}
.twin-note{
max-width:780px;margin:8px 0 0;font-size:.86rem;line-height:1.55;color:var(--mut);
border-top:1px dashed var(--hairline);padding-top:12px;text-wrap:pretty;
}
.coverage-card .cov-twin{
font-size:.9rem;line-height:1.4;color:var(--tx);font-weight:600;margin:2px 0 8px;text-wrap:pretty;
}
/* ───────── RaaS — Nav-Dropdown ───────── */
.nav-dd{position:relative;display:inline-block}
.nav-dd-top::after{content:"▾";font-size:.7em;margin-left:4px;opacity:.7}
.nav-dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
min-width:212px;display:flex;flex-direction:column;gap:2px;padding:8px;
background:#241f1a;border:1px solid rgba(255,255,255,.16);border-radius:12px;
box-shadow:0 16px 38px -14px rgba(0,0,0,.65);opacity:0;visibility:hidden;
transition:opacity .15s ease,transform .15s ease;z-index:120}
.nav-dd:hover .nav-dd-menu,.nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px)}
.nav-dd-menu a{padding:9px 11px;border-radius:8px;font-size:.92rem;white-space:nowrap;color:#F2F0EA}
.nav-dd-menu a:hover{background:rgba(188,255,27,.12)}
/* ───────── RaaS — Sektion ───────── */
.raas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 18px}
.raas-card{padding:22px;display:flex;flex-direction:column;gap:8px}
.raas-art{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.raas-card h3{font-size:1.16rem;margin:0;color:var(--tx)}
.raas-card p{font-size:.9rem;color:var(--mut);margin:0;flex:1}
.raas-start{align-self:flex-start;background:none;border:none;cursor:pointer;color:var(--neon);font:inherit;font-size:.92rem;font-weight:600;padding:6px 0 0}
.raas-start:hover{text-decoration:underline}
/* ───────── RaaS — Wizard-Overlay ───────── */
.raas-ov{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;
padding:5vh 16px;overflow-y:auto;background:rgba(12,9,7,.74);backdrop-filter:blur(6px)}
.raas-ov[hidden]{display:none}
.raas-modal{position:relative;width:min(680px,100%);background:#241f1a;color:#F2F0EA;
border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:30px 30px 26px;
box-shadow:0 30px 84px -22px rgba(0,0,0,.72)}
.raas-x{position:absolute;top:11px;right:15px;background:none;border:none;color:#A9A5B8;font-size:1.7rem;line-height:1;cursor:pointer}
.raas-x:hover{color:#F2F0EA}
.raas-kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neon);margin-bottom:8px}
.raas-progress{font-family:var(--font-mono);font-size:.72rem;color:#A9A5B8;margin-bottom:6px}
.raas-q{font-family:var(--font-serif);font-size:1.3rem;line-height:1.32;margin:0 0 18px;color:#F2F0EA}
.raas-choices{display:flex;gap:12px;margin-bottom:12px}
.raas-choice{flex:1;padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.03);
color:#F2F0EA;font:inherit;font-weight:600;cursor:pointer;transition:border-color .12s,background .12s}
.raas-choice:hover{border-color:var(--neon);background:rgba(188,255,27,.09)}
.raas-back{background:none;border:none;color:#A9A5B8;font:inherit;font-size:.86rem;cursor:pointer;padding:4px 0;margin-top:4px}
.raas-back:hover{color:#F2F0EA}
.raas-verdict{font-size:1.04rem;line-height:1.5;margin:4px 0 12px;color:#F2F0EA}
.raas-verdict.is-req{font-weight:600}
.raas-coop{font-size:.82rem;line-height:1.5;color:#A9A5B8;border-left:3px solid var(--neon);padding-left:12px;margin:0 0 16px}
.raas-sub{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#A9A5B8;margin:16px 0 8px}
.raas-handoff{margin:6px 0 2px}
.raas-cta-primary{display:inline-block;background:var(--neon);color:#15130F;font-weight:700;padding:12px 18px;border-radius:10px;text-decoration:none}
.raas-cta-primary:hover{filter:brightness(1.06)}
.raas-book{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.raas-book-card{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;text-decoration:none;color:#F2F0EA;transition:border-color .12s,background .12s}
.raas-book-card:hover{border-color:var(--neon);background:rgba(188,255,27,.06)}
.rb-t{font-weight:600;font-size:.95rem}
.rb-p{color:var(--neon);font-family:var(--font-mono);font-size:.78rem}
.rb-d{color:#A9A5B8;font-size:.8rem;line-height:1.4}
.raas-sme{font-size:.76rem;color:#A9A5B8;margin:10px 0 0}
.raas-orient{font-size:.74rem;color:#A9A5B8;font-style:italic;margin:14px 0 0;border-top:1px dashed rgba(255,255,255,.16);padding-top:10px}
@media (max-width:860px){
.raas-grid{grid-template-columns:1fr}
.raas-book{grid-template-columns:1fr}
.raas-choices{flex-direction:column}
.nav-dd-menu{display:none} /* mobil: "RaaS"-Link scrollt zur #raas-Sektion */
}
/* ───────── Pricing / SaaS-Pläne ───────── */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:28px 0 16px}
.price-card{padding:24px 22px;display:flex;flex-direction:column;gap:6px;position:relative}
.price-card.price-pop{outline:2px solid var(--neon);outline-offset:-2px}
.price-most{position:absolute;top:-11px;left:22px;background:var(--ink);color:var(--neon);
font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.price-name{font-size:1.1rem;margin:0}
.price-amount{font-family:var(--font-serif);font-size:2rem;font-weight:700;color:var(--tx);line-height:1.05}
.price-per{font-size:.8rem;color:var(--mut);font-weight:400;font-family:var(--font-sans)}
.price-d{font-size:.9rem;color:var(--mut);margin:4px 0 8px;min-height:2.4em}
.price-feats{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-direction:column;gap:7px;flex:1}
.price-feats li{font-size:.85rem;line-height:1.4;padding-left:20px;position:relative;color:var(--tx-body,var(--tx))}
.price-feats li::before{content:"✓";position:absolute;left:0;color:#2A7D2E;font-weight:700}
.price-card.price-addon .price-feats li::before{content:"+";color:var(--mut)}
.price-cta{align-self:stretch;text-align:center;margin-top:auto}
.price-firms{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 26px;flex-wrap:wrap;margin-bottom:14px}
.price-firms h3{margin:0 0 4px;font-size:1.2rem}
.price-firms p{margin:0 0 10px;color:var(--mut);font-size:.92rem}
.price-feats-row{flex-direction:row;flex-wrap:wrap;gap:6px 22px;margin:0}
.pf-cta{text-align:center;min-width:180px}
.pricing-sep{text-align:center;max-width:680px;margin:18px auto 6px;font-size:.95rem;color:var(--tx);font-weight:600;text-wrap:pretty}
.pricing-note{text-align:center;font-size:.76rem;color:var(--mut);margin:0}
@media (max-width:980px){.pricing-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pricing-grid{grid-template-columns:1fr}.price-firms{flex-direction:column;align-items:flex-start}.price-feats-row{flex-direction:column}}
/* Pricing explainer video (lang-aware, src/poster swapped in site.js) */
.pricing-video{max-width:880px;margin:40px auto 0;text-align:center}
.pricing-video .pv-h{margin:6px 0 18px;font-size:1.5rem;text-wrap:balance}
.pv-frame{padding:10px;border-radius:18px;overflow:hidden}
.pv-vid{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#170A31}