/* ═══════════════════════════════════════════════════════════════════════
staffOS Landingpage — KONZEPT C als Bausatz
Vorlage: outputs/mockups/2026-09-11-staffos-landing/codex/konzept-c.html
🔴 EIGENE DATEI, UND DAS IST DER PUNKT.
datenschutz.html, impressum.html und agb.html binden styles-v1.css ein.
Konzept C bringt eine eigene, dunkel gefuehrte Token-Welt mit; haette sie
das gemeinsame :root angefasst, haetten sich die drei Rechtsseiten
stillschweigend mitveraendert. Diese Datei wird NUR von landing.html
geladen — damit ist styles-v1.css unveraendert und die Rechtsseiten sind
bauartbedingt unberuehrt, nicht bloss hoffentlich.
🔴 SCHRIFTEN SELBST GEHOSTET, NICHT VON GOOGLE.
Konzept C laedt Geist ueber fonts.googleapis.com und sagt das in seiner
eigenen Technikkarte T14 auch dazu. Die Seite behauptet an derselben
Stelle: "Beim Seitenaufruf wird nichts bei Dritten nachgeladen." Beides
zusammen ginge nicht. Die woff2-Dateien liegen seit jeher in
landing-assets/fonts/ — die Familiennamen heissen hier bewusst "Geist"
und "Geist Mono", damit C's --sans/--mono unveraendert greifen.
═══════════════════════════════════════════════════════════════════════ */
@font-face { font-family:"Geist"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/geist-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/geist-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-style:normal; font-weight:600; font-display:swap;
src:url("fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-style:normal; font-weight:700; font-display:swap;
src:url("fonts/geist-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:400; font-display:swap;
src:url("fonts/geist-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-weight:500; font-display:swap;
src:url("fonts/geist-mono-latin-500-normal.woff2") format("woff2"); }
/* ─────────────── Ab hier Konzept C, unveraendert uebernommen ─────────── */
:root{--bg:#090e1a;--bg2:#0d1422;--panel:#101827;--panel2:#121c2d;--line:hsl(217 33% 20%);--line2:hsl(217 28% 28%);--ink:#f5f7fb;--muted:#9ca8ba;--dim:#6f7d92;--indigo:#4f46e5;--accent:hsl(243 75% 72%);--paper:#f6f4ee;--paper2:#fffefa;--dark:#101522;--green:#73d6af;--amber:#e6bd70;--shadow:0 24px 60px rgb(0 0 0/.22);--mono:"Geist Mono",monospace;--sans:"Geist",system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;background:var(--bg)}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 78% 9%,rgb(79 70 229/.065),transparent 32rem)}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--indigo);color:#fff}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{overflow-wrap:break-word}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto;min-width:0}
.mono,.eyebrow,.section-no,.status,.visual-label,.fact dt,.tech-id,.evidence,.price{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skip{position:fixed;top:10px;left:12px;z-index:1000;padding:.7rem 1rem;border-radius:8px;background:#fff;color:#111;transform:translateY(-150%)}
.skip:focus{transform:none}
.site-header{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid rgb(255 255 255/.07);background:rgb(9 14 26/.9);backdrop-filter:blur(16px)}
.navbar{position:relative;height:70px;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;font-size:1.18rem;font-weight:700;letter-spacing:-.04em;white-space:nowrap}
.brand:before{content:"";width:8px;height:8px;margin-right:10px;border-radius:2px;background:var(--indigo)}
.brand span{color:var(--accent)}
.site-nav{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-left:auto}
.site-nav a{padding:.5rem .62rem;border-radius:8px;color:#c0c9d7;font-size:.78rem;font-weight:500;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current="true"]{background:rgb(255 255 255/.06);color:#fff}
.site-nav .login{border:1px solid var(--line2);margin-left:3px}
.site-nav .admin{background:var(--indigo);border-color:var(--indigo);color:#fff}
.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;border:1px solid var(--line2);border-radius:10px;background:transparent}
.nav-toggle span,.nav-toggle:before,.nav-toggle:after{content:"";display:block;width:18px;height:1px;margin:5px auto;background:#fff;transition:.2s}
.nav-toggle[aria-expanded="true"] span{opacity:0}
.nav-toggle[aria-expanded="true"]:before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"]:after{transform:translateY(-6px) rotate(-45deg)}
.page-progress{position:absolute;right:0;bottom:-1px;left:0;height:2px;overflow:hidden}
.page-progress span{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.route-shell{position:relative;isolation:isolate;overflow:hidden}
.route-shell:before{content:"";position:absolute;z-index:2;top:0;bottom:0;left:max(20px,calc((100% - 1180px)/2 + 20px));width:1px;background:rgb(111 125 146/.24);pointer-events:none}
.journey{position:absolute;z-index:2;top:0;left:0;width:100%;pointer-events:none}
.journey path{fill:none;vector-effect:non-scaling-stroke}
.journey-base{stroke:rgb(111 125 146/.25);stroke-width:1.2}
.journey-done{stroke:var(--accent);stroke-width:2}
.scene{position:relative;--surface:var(--bg);--marker:var(--accent)}
.scene-inner{position:relative;z-index:3;padding-left:54px}
.route-anchor{position:absolute;z-index:4;top:var(--anchor-top,104px);left:max(6px,calc((100% - 1180px)/2 + 6px));display:grid;width:28px;height:28px;place-items:center;border:1px solid var(--marker);border-radius:50%;background:var(--surface);color:var(--marker);font:600 .64rem/1 var(--mono)}
.route-anchor.passed{background:var(--marker);color:var(--surface)}
.hero{min-height:100vh;padding:145px 0 68px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(500px,1.14fr);gap:52px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 21px;color:var(--accent);font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor}
h1{max-width:720px;margin-bottom:19px;font-size:clamp(2.7rem,5.3vw,5.45rem);line-height:.94;letter-spacing:-.066em}
h1 span{display:block}
h1 span:last-child{color:#b8b4ff}
.hero-original{margin-bottom:12px;color:#e0e5ed;font-weight:650}
.hero-copy{max-width:680px;margin-bottom:25px;color:var(--muted);font-size:1.02rem}
.actions{display:flex;flex-wrap:wrap;gap:11px}
.btn{display:inline-flex;min-height:47px;align-items:center;justify-content:center;gap:9px;padding:.72rem 1.05rem;border:1px solid var(--line2);border-radius:11px;font-weight:650;transition:transform .2s,border-color .2s,background .2s}
.btn:after{content:"↗";font:500 .84em var(--mono)}
.btn-primary{background:var(--indigo);border-color:var(--indigo);color:#fff;box-shadow:0 10px 26px rgb(79 70 229/.18)}
.btn-secondary{background:rgb(255 255 255/.035)}
.btn:hover{transform:translateY(-2px);border-color:var(--accent)}
.status{display:inline-flex;max-width:100%;align-items:center;gap:6px;padding:4px 7px;border:1px solid;border-radius:99px;font-size:.64rem;line-height:1.3;letter-spacing:.025em;white-space:nowrap}
.status:before{content:"";width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:currentColor}
.status-live{border-color:rgb(115 214 175/.35);background:rgb(115 214 175/.07);color:var(--green)}
.status-pilot{border-color:rgb(230 189 112/.35);background:rgb(230 189 112/.07);color:var(--amber)}
.status-comes{border-color:rgb(150 145 231/.35);border-style:dashed;background:rgb(150 145 231/.07);color:#bbb7ff}
.status-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 24px}
.status-legend-label{margin-right:3px;color:#728096;font:500 .64rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.legend-item{display:inline-flex;align-items:center;gap:6px;color:#8491a4;font-size:.63rem}
.console{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:21px;background:linear-gradient(145deg,#111a2b,#090e1a);box-shadow:var(--shadow)}
.console-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}
.console-title{font:500 .66rem var(--mono);letter-spacing:.08em;color:#b7c0ce}
.live-state{display:flex;align-items:center;gap:7px;color:var(--accent);font:500 .6rem var(--mono);text-transform:uppercase}
.live-state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.console-body{padding:19px}
.flow-labels,.flow-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,.9fr);gap:8px;align-items:center}
.flow-labels{padding:0 12px 8px;color:#8a98ad;font:500 .64rem var(--mono);letter-spacing:.09em}
.flow-row{width:100%;margin:5px 0;padding:10px 11px;border:1px solid transparent;border-radius:9px;background:rgb(255 255 255/.022);text-align:left;cursor:pointer;transition:border-color .2s,background .2s}
.flow-row span{min-width:0;color:#dce2ec;font:500 .68rem var(--mono)}
.flow-row span:nth-child(2){color:#b9b5f7}
.flow-row span:after{content:"";display:inline-block;width:5px;height:5px;margin-left:7px;border-radius:50%;background:#53617a;vertical-align:1px}
.flow-row:hover,.flow-row:focus-visible,.flow-row[aria-pressed="true"]{border-color:rgb(150 145 231/.43);background:rgb(79 70 229/.1)}
.flow-row[aria-pressed="true"] span:after{background:var(--accent)}
.flow-row span:before{display:none}
.context-stack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:13px}
.context-card{padding:10px;border:1px solid var(--line);border-radius:9px;background:#0a111e;opacity:.58;transition:opacity .2s,border-color .2s}
.context-card.active{border-color:var(--indigo);opacity:1}
.context-card b{display:block;margin-bottom:5px;color:#78879c;font:500 .64rem var(--mono);letter-spacing:.07em}
.context-card span{color:#d8deea;font-size:.66rem;line-height:1.4}
.process-caption{display:flex;justify-content:space-between;gap:12px;margin:21px 0 14px;padding-top:15px;border-top:1px solid var(--line);color:#7d8ba0;font:500 .64rem var(--mono)}
.process-caption strong{color:#dce3ee;font-weight:500}
.process-route ol{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.process-route ol:before,.process-route ol:after{content:"";position:absolute;top:7px;right:6.5%;left:6.5%;height:2px;transform-origin:left}
.process-route ol:before{background:#29374d}
.process-route ol:after{background:var(--accent);transform:scaleX(1)}
html.js.observe .process-route ol:after{transform:scaleX(0)}
html.js.observe .console.is-visible .process-route ol:after{animation:traceX 1.35s ease-out both}
html.js.observe .console.is-visible:hover .process-route ol:after,html.js.observe .console.is-visible:focus-within .process-route ol:after{animation-play-state:paused}
.process-route li{position:relative;z-index:1;min-width:0;text-align:center}
.process-route i{display:block;width:15px;height:15px;margin:0 auto 8px;border:2px solid var(--accent);border-radius:50%;background:#0c1422}
.process-route strong{display:block;color:#f2f4f9;font:600 .63rem var(--mono)}
.process-route small{display:inline-block;margin-top:5px;padding:2px 5px;border:1px solid rgb(150 145 231/.25);border-radius:99px;color:#aaa6ed;font:500 .64rem var(--mono)}
.process-route .status{display:flex;width:max-content;margin:5px auto 0;padding:2px 5px;font-size:.46rem}
.process-meta{margin-top:11px;color:#8a98ad;font:500 .64rem var(--mono);text-align:right}
.portal-docks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:14px}
.portal-dock{padding:9px 10px;border-top:1px solid #40506a;background:rgb(255 255 255/.022)}
.portal-dock.pending{border:1px dashed #52617a}
.portal-dock strong{display:block;color:#dfe5ef;font:500 .64rem var(--mono)}
.portal-dock small{display:block;margin-top:3px;color:#748298;font:400 .64rem var(--mono)}
.portal-dock .status{margin-left:3px;padding:2px 5px;font-size:.44rem}
.visual-note{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:11px;border-top:1px solid var(--line);color:#718097;font-size:.61rem}
.visual-label{color:var(--accent);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase}
.facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:42px 0 0;border:1px solid var(--line);border-radius:14px;background:rgb(13 20 34/.8)}
.fact{min-width:0;padding:14px;border-right:1px solid var(--line)}
.fact:last-child{border:0}
.fact dt{margin-bottom:4px;color:#8a98ad;font-size:.64rem;text-transform:uppercase}
.fact dd{margin:0;color:#dbe1eb;font-size:.72rem;font-weight:600;line-height:1.35}
.fact-status{display:flex;flex-wrap:wrap;gap:4px}
.fact .status{white-space:normal}
.architecture{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:14px;background:rgb(13 20 34/.7)}
.arch-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:15px}
.arch-head h2{margin:0;font-size:.98rem;letter-spacing:-.02em}
.arch-head p{margin:0;color:#728096;font-size:.65rem}
.arch-grid{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1.2fr);align-items:stretch}
.arch-arrow{display:grid;place-items:center;color:#7f7ad7;font-family:var(--mono)}
.arch-layer{padding:14px;border:1px solid var(--line2);border-radius:10px;background:#0c1321}
.arch-layer small{display:block;margin-bottom:4px;color:#718097;font:500 .64rem var(--mono);text-transform:uppercase}
.arch-layer strong{display:block;font-size:.84rem}
.arch-layer em{display:block;color:#99a6b8;font-size:.66rem;font-style:normal}
.arch-foot{margin:12px 0 0;color:#8a98ad;font:400 .64rem var(--mono)}
.section{padding:105px 0}
.section-top{display:grid;grid-template-columns:100px minmax(0,1fr);gap:20px;margin-bottom:39px}
.section-no{padding-top:7px;color:var(--accent);font-size:.72rem;letter-spacing:.08em}
.section-heading h2{max-width:920px;margin-bottom:17px;font-size:clamp(2.05rem,4.1vw,3.95rem);line-height:1.03;letter-spacing:-.057em}
.section-heading>p{max-width:910px;margin:0;color:var(--muted);font-size:.98rem}
.section-dark{border-top:1px solid var(--line)}
.paper-section{--surface:var(--paper);--marker:var(--indigo);background:var(--paper);color:var(--dark)}
.paper-section .section-no,.paper-section .visual-label{color:var(--indigo)}
.paper-section .section-heading>p{color:#596273}
.paper-section .status-live{color:#176b50;background:#edf8f3;border-color:#86bda9}
.paper-section .status-pilot{color:#79530d;background:#fff8e9;border-color:#d2af70}
.paper-section .status-comes{color:#4c43a8;background:#f2f0ff;border-color:#aaa5e1}
.inspector{overflow:hidden;border:1px solid #d5d7df;border-radius:18px;background:var(--paper2);box-shadow:0 20px 52px rgb(25 30 45/.08)}
.inspector-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid #dddfe5;background:#ececf1}
.rule-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
.rule-links a{padding:6px 9px;border:1px solid #d2d4dc;border-radius:7px;background:#f8f8fa;color:#586274;font:500 .64rem var(--mono)}
.rule-links a:hover,.rule-links a:focus-visible{border-color:var(--indigo);color:var(--indigo)}
.gate-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.gate-grid:before{content:"";position:absolute;z-index:0;top:42px;right:9%;left:9%;height:2px;background:#cbd0dc}
.gate{position:relative;z-index:1;padding:25px;border-right:1px solid #dddfe5;background:var(--paper2)}
.gate:last-child{border-right:0}
.gate:before{content:"";display:block;width:13px;height:13px;margin:10px 0 22px;border:2px solid var(--indigo);border-radius:50%;background:#fff}
.gate-id{display:block;margin-bottom:8px;color:#747d8c;font:500 .64rem var(--mono);letter-spacing:.07em}
.gate h3{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:11px;font-size:1.2rem;line-height:1.2;letter-spacing:-.03em}
.gate p{color:#596273;font-size:.84rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:17px}
.chip{padding:5px 8px;border:1px solid #d7d9e1;border-radius:6px;background:#fff;color:#40485a;font:500 .64rem var(--mono);line-height:1.3}
.version-label{margin:17px 0 8px!important;color:#747d8c!important;font:500 .64rem var(--mono)!important}
.version-line{display:flex;margin:0;padding:0;list-style:none}
.version-line li{position:relative;flex:1;padding-top:12px;color:#596273;font:500 .64rem var(--mono);text-align:center}
.version-line li:before{content:"";position:absolute;top:1px;left:50%;width:7px;height:7px;border:2px solid var(--indigo);border-radius:50%;background:#fff;transform:translateX(-50%)}
.version-line li:not(:last-child):after{content:"";position:absolute;top:4px;left:50%;width:100%;height:1px;background:var(--indigo)}
.compliance-note{margin:0;padding:13px 18px;border-top:1px solid #dddfe5;background:#f0eff5;color:#626b79;font-size:.72rem}
.mode-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:12px;padding:7px;border:1px solid var(--line);border-radius:13px;background:#0c1320}
.mode-tab{min-height:53px;padding:9px;border:1px solid transparent;border-radius:8px;background:transparent;color:#7e8ba0;font:500 .66rem var(--mono);cursor:pointer}
.mode-tab:hover,.mode-tab[aria-selected="true"]{border-color:var(--line2);background:#151f31;color:#fff}
.mode-tab[aria-selected="true"]{box-shadow:inset 0 -2px var(--accent)}
.switchyard{margin:0}
.switch-caption{display:flex;justify-content:space-between;gap:15px;margin-bottom:6px;color:#8794a7;font:500 .6rem var(--mono)}
.switch-caption strong{color:#dce2ec;font-weight:500}
.fork-map{width:100%;height:125px}
.fork-map path{fill:none;stroke:#29374d;stroke-width:2;vector-effect:non-scaling-stroke;transition:stroke .2s,stroke-width .2s,stroke-dashoffset 1s}
.fork-map path.active{stroke:var(--accent);stroke-width:3}
[data-draw]{stroke-dasharray:1;stroke-dashoffset:0}
html.js.observe [data-draw]{stroke-dashoffset:1}
html.js.observe .is-visible [data-draw]{stroke-dashoffset:0}
.workspace{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(250px,.58fr);gap:13px}
.mode-panels,.config{border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,#101929,#0c1320)}
.mode-panel{min-height:410px;padding:30px}
.mode-kicker{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:var(--accent);font:500 .61rem var(--mono);text-transform:uppercase}
.mode-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.mode-panel h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:11px;font-size:1.85rem;line-height:1.1;letter-spacing:-.043em}
.mode-panel>p{max-width:680px;color:#a6b1c1}
.mode-panel .mode-lead{color:#e5e9f0;font-weight:650}
.mode-data{display:grid;margin-top:22px;border-top:1px solid var(--line)}
.mode-data>div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:15px;padding:11px 0;border-bottom:1px solid var(--line)}
.mode-data dt{color:#8a98ad;font:500 .64rem var(--mono);text-transform:uppercase}
.mode-data dd{margin:0;color:#d7deea;font-size:.8rem}
.config{padding:23px}
.config .visual-label{display:block;margin-bottom:23px}
.config h3{margin-bottom:4px;font-size:1rem}
.config-sub{color:#758298;font:400 .64rem var(--mono)}
.config-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:21px}
.module-tag{display:flex;min-width:0;flex-direction:column;align-items:center;gap:6px;padding:9px 7px;border:1px solid var(--line2);border-radius:8px;background:#111c2d;color:#c0c9d7;font:500 .64rem var(--mono);text-align:center}
.module-tag .status{padding:2px 5px;font-size:.45rem;white-space:normal}
.config-foot{margin:20px 0 0;color:#8a98ad;font:400 .64rem var(--mono)}
.portals-shell{padding:27px;border:1px solid var(--line);border-radius:19px;background:linear-gradient(180deg,#0f1828,#0a101c)}
.portal-route{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#0a111d}
.domain{color:#d8dfeb;font:500 .67rem var(--mono);overflow-wrap:break-word}
.domain:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--green)}
.email-link{color:#748399;font:400 .64rem var(--mono)}
.portal-hub{width:max-content;max-width:100%;margin:auto;padding:8px 12px;border:1px solid var(--accent);border-radius:8px;color:#d8d5ff;font:500 .62rem var(--mono);text-align:center}
.portal-lines{width:100%;height:105px}
.portal-lines path{fill:none;stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.portal-lines .pending-line{stroke-dasharray:.035 .025}
.portal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.portal-window{overflow:hidden;border:1px solid var(--line2);border-radius:13px;background:#101a2a;transition:transform .2s,border-color .2s}
.portal-window:hover,.portal-window:focus-within{transform:translateY(-3px);border-color:var(--accent)}
.portal-window.pending{border-style:dashed;background:rgb(16 26 42/.52)}
.portal-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);background:#0e1726}
.portal-role{font:500 .64rem var(--mono);color:#c7d0dd}
.portal-content{min-height:207px;padding:19px}
.portal-content h3{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:9px;font-size:1.08rem}
.portal-content p{color:#9aa7b9;font-size:.8rem}
.portal-actions{display:grid;gap:6px;margin-top:17px}
.portal-actions>span{display:flex;align-items:center;gap:8px;padding:7px;border:1px solid var(--line);border-radius:7px;color:#77869a;font:400 .64rem var(--mono)}
.portal-actions>span:before{content:"";width:10px;height:2px;flex:none;background:#53627a}
.portal-actions .status{margin-left:auto;padding:2px 5px;font-size:.45rem}
.package-section{--surface:var(--paper);--marker:var(--indigo)}
.tier-map{margin-bottom:14px;padding:18px;border:1px solid #d5d7df;border-radius:15px;background:#ecebf0}
.tier-caption{display:flex;justify-content:space-between;gap:15px;color:#596273;font:500 .61rem var(--mono)}
.tier-caption strong{color:#202737;font-weight:600}
.tier-source{width:max-content;margin:15px auto 0;padding:6px 12px;border:1px solid var(--indigo);border-radius:7px;background:#fff;color:var(--indigo);font:600 .61rem var(--mono)}
.tier-lines{width:100%;height:55px}
.tier-lines path{fill:none;stroke:var(--indigo);stroke-width:2;vector-effect:non-scaling-stroke}
.tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.tier{padding:11px;border:1px solid #d2d4dc;border-radius:9px;background:#fff;text-align:center}
.tier strong{display:block}
.tier span{display:block;margin-top:3px;color:var(--indigo);font:600 .86rem var(--mono)}
.comparison{overflow:hidden;border:1px solid #d5d7df;border-radius:17px;background:var(--paper2);box-shadow:0 20px 52px rgb(25 30 45/.07)}
.comparison table{width:100%;border-collapse:collapse;table-layout:fixed}
.comparison caption{padding:13px 17px;border-bottom:1px solid #dddfe5;background:#ebebf0;color:#596171;font:500 .63rem var(--mono);text-align:left}
.comparison th,.comparison td{padding:14px 15px;border-right:1px solid #e0e1e7;border-bottom:1px solid #e0e1e7;text-align:center}
.comparison th:last-child,.comparison td:last-child{border-right:0}
.comparison thead th{background:#f4f3ef;font-size:.8rem;white-space:nowrap;hyphens:none}
.comparison thead th:first-child,.comparison tbody th,.comparison tfoot th{width:46%;text-align:left}
.comparison tbody th{font-weight:500;font-size:.79rem}
.comparison tbody td{color:#8a909c;font:600 .85rem var(--mono)}
.comparison tbody td.yes{color:var(--indigo)}
.comparison tbody tr:hover{background:#f5f3ff}
.comparison tfoot th,.comparison tfoot td{border-bottom:0;background:#111725;color:#fff}
.comparison tfoot th{font-size:.76rem}
.comparison tfoot td{color:#c5c1ff;font:600 clamp(.7rem,1.5vw,.96rem) var(--mono);white-space:nowrap}
.matrix-status{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.matrix-status .status{font-size:.47rem;white-space:normal}
.package-notes{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:14px;margin-top:15px}
.package-note{padding:18px;border:1px solid #d8dae1;border-radius:12px;background:#ebeaf0;color:#4f5868;font-size:.8rem}
.package-note strong{color:#171d29}
.value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:34px}
.value-card{min-height:175px;padding:22px;border:1px solid #d6d7de;border-radius:14px;background:#fff}
.value-card .visual-label{display:block;margin-bottom:27px}
.value-card h3{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:7px;font-size:1.13rem}
.value-card p{margin:0;color:#606979;font-size:.81rem}
.value-card.featured{background:var(--indigo);border-color:var(--indigo);color:#fff}
.value-card.featured .visual-label,.value-card.featured p{color:#dddafe}
.proof-note{display:block;margin-top:12px;color:#777f8d;font:400 .64rem var(--mono)}
.tech-section{border-top:1px solid var(--line)}
.tech-intro-note{margin-top:12px;color:#77869a;font:500 .6rem var(--mono)}
.tech-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:0 0 13px;padding:1px;background:var(--line);border-radius:13px;overflow:hidden}
.tech-metrics>div{min-width:0;padding:14px;background:#0c1320}
.tech-metrics dt{margin-bottom:4px;color:#8a98ad;font:500 .64rem var(--mono);text-transform:uppercase}
.tech-metrics dd{margin:0;color:#dcd9ff;font:600 .82rem var(--mono)}
.tech-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.tech-card{min-width:0;padding:18px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,#101929,#0c1320)}
.tech-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.tech-id{color:#827dd5;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase}
.tech-card h3{margin-bottom:8px;font-size:1rem;line-height:1.3;letter-spacing:-.022em}
.tech-card p{margin:0;color:#a5b0c0;font-size:.76rem}
.evidence{display:block;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:#738199;font-size:.64rem;line-height:1.45}
.tech-caveat{margin:14px 0 0;padding:13px 15px;border:1px solid var(--line);border-radius:10px;color:#8491a4;font-size:.69rem}
.why-grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:50px;align-items:start}
.why-copy h2{font-size:clamp(2.15rem,4.4vw,4.1rem);line-height:1;letter-spacing:-.057em}
.why-copy>p{color:#9ba7b8}
.why-action{margin-top:24px}
.replace-table{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#0e1625}
.replace-table table{width:100%;border-collapse:collapse}
.replace-table caption{padding:14px 17px;border-bottom:1px solid var(--line);color:var(--accent);font:500 .63rem var(--mono);text-align:left;text-transform:uppercase}
.replace-table th,.replace-table td{padding:17px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.replace-table thead th{color:#8a98ad;font:500 .64rem var(--mono);text-transform:uppercase;white-space:nowrap}
.replace-table tbody th{width:23%;color:#e5e9f0;font-size:.78rem}
.replace-table tbody th .status{margin-top:6px}
.replace-table td{color:#98a5b7;font-size:.77rem}
.replace-table td:last-child{color:#c3bffa;font-family:var(--mono)}
.replace-table tr:last-child th,.replace-table tr:last-child td{border-bottom:0}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:11px}
.faq-item{overflow:hidden;border:1px solid #d5d7df;border-radius:13px;background:var(--paper2);transition:border-color .2s,box-shadow .2s}
.faq-item[open]{border-color:#c6c2f5;box-shadow:0 12px 30px rgb(25 30 45/.07)}
.faq-item summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:74px;padding:18px 20px;list-style:none;cursor:pointer;font-weight:650;line-height:1.35}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";display:grid;width:27px;height:27px;place-items:center;border-radius:50%;background:#eceafc;color:var(--indigo);font:600 1rem var(--mono)}
.faq-item[open] summary:after{content:"−"}
.faq-answer{padding:0 20px 20px;color:#596273;font-size:.84rem}
.faq-answer p{margin:0}
.contact-section{--surface:#0d1422;background:linear-gradient(155deg,#111a2a,#090e1a 62%);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px}
.contact-copy h2{font-size:clamp(2.25rem,4.4vw,4.25rem);line-height:1;letter-spacing:-.058em}
.contact-copy>p{color:#9ba7b8}
.contact-details{display:grid;margin-top:31px;border-top:1px solid var(--line)}
.contact-item{display:grid;grid-template-columns:95px minmax(0,1fr);gap:13px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-item dt{color:#8a98ad;font:500 .64rem var(--mono);text-transform:uppercase}
.contact-item dd{margin:0;color:#d7deea;font-size:.79rem;overflow-wrap:break-word}
.demo-form{position:relative;padding:28px;border:1px solid var(--line2);border-radius:17px;background:#101929;box-shadow:var(--shadow)}
.form-head{display:flex;justify-content:space-between;gap:13px;margin-bottom:21px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.form-head strong{font-size:.98rem}
.form-head span{color:var(--green);font:500 .64rem var(--mono);text-transform:uppercase}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{color:#bfc8d6;font-size:.71rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;min-width:0;border:1px solid var(--line2);border-radius:8px;background:#0b1320;color:#f2f4f8;padding:10px 11px;outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgb(150 145 231/.1)}
.field textarea{min-height:122px;resize:vertical}
.consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:start;margin:18px 0;color:#98a5b8;font-size:.68rem}
.consent input{width:17px;height:17px;margin-top:2px;accent-color:var(--indigo)}
.consent a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.submit{width:100%;border:0;cursor:pointer}
.submit:after{content:"→"}
.hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.site-footer{--surface:#070b13;position:relative;background:#070b13;border-top:1px solid var(--line)}
.footer-inner{min-height:110px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.footer-copy{color:#78869a;font-size:.7rem}
.footer-copy strong{color:#c9d0db}
.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 18px}
.footer-links a{color:#8c99aa;font-size:.68rem}
.footer-links a:hover{color:#fff}
.reveal{opacity:1;transform:none}
html.js.observe .reveal{opacity:0;transform:translateY(13px);transition:opacity .5s,transform .5s}
html.js.observe .reveal.is-visible{opacity:1;transform:none}
@keyframes traceX{to{transform:scaleX(1)}}
@keyframes traceY{to{transform:scaleY(1)}}
@media(min-width:761px){html.js .mode-panel:not(.active){display:none}}
@media(max-width:1140px){
.hero-grid{grid-template-columns:minmax(0,1fr);gap:34px}.console{max-width:820px}.facts{grid-template-columns:repeat(3,minmax(0,1fr))}.fact:nth-child(3n){border-right:0}.fact:nth-child(-n+3){border-bottom:1px solid var(--line)}
.tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-nav a{padding:.45rem;font-size:.73rem}
}
@media(max-width:980px){
html.js .nav-toggle{display:block}
html.js .site-nav{position:absolute;top:70px;right:0;left:0;display:grid;gap:4px;padding:12px;border:1px solid var(--line2);border-radius:13px;background:#0e1625;box-shadow:var(--shadow)}
html.js .site-nav:not(.open){display:none}
.site-nav a{padding:.72rem .8rem}.site-nav .login{margin-left:0}
html:not(.js) .site-header{position:static}.why-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}.why-copy{max-width:720px}
.gate-grid{grid-template-columns:minmax(0,1fr)}.gate-grid:before{top:30px;bottom:30px;left:31px;width:2px;height:auto}.gate{padding-left:54px;border-right:0;border-bottom:1px solid #dddfe5}.gate:last-child{border-bottom:0}.gate:before{position:absolute;top:20px;left:24px;margin:0}
.tech-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
.wrap{width:calc(100% - 28px)}.scene-inner{padding-left:42px}.route-shell:before{left:20px}.route-anchor{left:6px}
.section{padding:76px 0}.section-top{grid-template-columns:minmax(0,1fr);gap:5px;margin-bottom:29px}.section-no{padding:0}.section-heading h2{font-size:2.24rem}
.hero{padding:112px 0 52px}.hero-original{font-size:.84rem}.hero-copy{font-size:.93rem}h1{font-size:clamp(2.4rem,12.5vw,3.85rem)}
.console-body{padding:13px}.flow-labels{display:none}.flow-row{grid-template-columns:minmax(0,1fr);gap:5px;padding:9px}.flow-row span{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:7px;font-size:.61rem}.flow-row span:before{content:attr(data-label);display:block;color:#8a98ad;font-size:.48rem;letter-spacing:.06em}.flow-row span:after{display:none}
.context-stack{grid-template-columns:minmax(0,1fr)}.process-caption{display:grid}
.process-route ol{grid-template-columns:minmax(0,1fr);gap:12px;padding-left:27px}
.process-route ol:before,.process-route ol:after{top:7px;right:auto;bottom:7px;left:7px;width:2px;height:auto;transform-origin:top}
.process-route ol:after{transform:scaleY(1)}
html.js.observe .process-route ol:after{transform:scaleY(0)}
html.js.observe .console.is-visible .process-route ol:after{animation-name:traceY}
.process-route li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;text-align:left}
.process-route i{position:absolute;top:0;left:-27px;margin:0}
.process-route strong{font-size:.65rem}.process-route small{grid-column:1;margin:2px 0 0;width:max-content}.process-route .status{grid-column:2;grid-row:1;margin:0}
.portal-docks{grid-template-columns:minmax(0,1fr)}.visual-note{display:grid}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact{border-bottom:1px solid var(--line)}.fact:nth-child(2n){border-right:0}.fact:nth-last-child(-n+2){border-bottom:0}.fact:nth-child(3){border-right:1px solid var(--line)}
.arch-head{display:grid}.arch-grid{grid-template-columns:minmax(0,1fr)}.arch-arrow{height:25px;transform:rotate(90deg)}
.inspector-bar{align-items:flex-start;flex-direction:column}.rule-links{justify-content:flex-start}
.mode-switch,.fork-map,.config{display:none}.workspace{grid-template-columns:minmax(0,1fr)}.mode-panels{display:grid;gap:10px;border:0;background:transparent}.mode-panel{display:block!important;min-height:0;padding:22px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,#101929,#0c1320)}.mode-panel h3{font-size:1.55rem}.mode-data>div{grid-template-columns:minmax(0,1fr);gap:3px}
.portal-route{align-items:flex-start;flex-direction:column}.portal-lines{display:none}.portal-grid{grid-template-columns:minmax(0,1fr);margin-top:20px;padding-left:15px;border-left:1px solid #485778}.portal-content{min-height:0}
.tier-lines{display:none}.tier-grid{margin-top:14px}.package-notes,.value-grid{grid-template-columns:minmax(0,1fr)}
.comparison{overflow:visible}.comparison table,.comparison tbody,.comparison tfoot{display:block;width:100%}.comparison thead{display:none}.comparison caption{display:block}.comparison tbody tr,.comparison tfoot tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-bottom:1px solid #d8dae1}.comparison tbody th,.comparison tfoot th{grid-column:1/-1;width:auto;padding:12px;text-align:left;border-right:0}.comparison tbody td,.comparison tfoot td{min-width:0;padding:9px 4px;border-bottom:0;font-size:.76rem}.comparison tbody td+td,.comparison tfoot td+td{border-left:1px solid #e0e1e7}.comparison tbody td:before,.comparison tfoot td:before{content:attr(data-tier);display:block;margin-bottom:3px;color:#717987;font:500 .49rem var(--mono);white-space:nowrap;hyphens:none}.comparison tfoot tr{border-bottom:0}.comparison tfoot th,.comparison tfoot td{background:#111725}.comparison tfoot td:before{color:#8e9aaf}.comparison tfoot td{font-size:.68rem;white-space:nowrap}.matrix-status .status{font-size:.45rem}
.tech-grid{grid-template-columns:minmax(0,1fr)}.replace-table{overflow:visible;border:0;background:transparent}.replace-table table,.replace-table tbody,.replace-table tr,.replace-table th,.replace-table td{display:block}.replace-table thead{display:none}.replace-table caption{border:1px solid var(--line);border-radius:10px 10px 0 0}.replace-table tr{padding:16px;border:1px solid var(--line);border-top:0}.replace-table tbody th{width:auto;padding:0 0 8px;border:0}.replace-table td{padding:6px 0;border:0}.replace-table td:before{display:block;margin-bottom:2px;color:#607087;font:500 .64rem var(--mono);text-transform:uppercase}.replace-table td:nth-child(2):before{content:"Was das heißt"}.replace-table td:nth-child(3):before{content:"Statt"}
.faq-list{grid-template-columns:minmax(0,1fr)}.faq-item summary{min-height:0;padding:16px}.faq-answer{padding:0 16px 16px}
.contact-grid{gap:33px}.demo-form{padding:20px}.form-grid{grid-template-columns:minmax(0,1fr)}.field.full{grid-column:auto}.footer-inner{align-items:flex-start;flex-direction:column;padding:28px 0}.footer-links{justify-content:flex-start}
}
@media(max-width:480px){
.wrap{width:calc(100% - 24px)}.scene-inner{padding-left:39px}.navbar{height:64px}html.js .site-nav{top:64px;right:0;left:0}.hero{padding-top:101px}.actions{display:grid}.btn{width:100%}.console-head{padding:12px}.console-title{font-size:.64rem}.live-state{font-size:.64rem}.section-heading h2{font-size:1.94rem}.facts{margin-top:28px}.fact{padding:11px}.tier-grid{gap:5px}.tier{padding:9px 3px}.tier span{font-size:.69rem}.contact-item{grid-template-columns:78px minmax(0,1fr)}.form-head{align-items:flex-start;flex-direction:column;gap:5px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}
html.js.observe .reveal{opacity:1;transform:none}html.js.observe [data-draw]{stroke-dashoffset:0}html.js.observe .process-route ol:after{transform:none}
}
.process-route ol:after{background:linear-gradient(90deg,var(--accent) 0 16.7%,rgb(129 140 248/.32) 16.7% 100%)}@media (max-width:760px){.process-route ol:after{background:linear-gradient(180deg,var(--accent) 0 16.7%,rgb(129 140 248/.32) 16.7% 100%)}}@media(max-width:520px){.tech-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}.status{font-size:.62rem!important}
/* ═══════════════════════════════════════════════════════════════════════
HAUS-ANPASSUNGEN — angehaengt, damit Konzept C darueber unveraendert
bleibt und jede Abweichung an EINER Stelle steht.
═══════════════════════════════════════════════════════════════════════ */
/* ── 1. DUNKLE FLAECHEN TRAGEN IHRE EIGENE SCHRIFT — in BEIDEN Modi ─────
Konzept C ist dunkel gefuehrt: Hero, Konsolen, Kontakt und Fuss sind
Flaechen mit eigener Farbe, so wie die cremefarbenen Dokumentflaechen
(.paper-section) welche sind. Im Hellmodus dreht nur der GRUND; diese
Flaechen bleiben, was sie sind. Ohne diese Pinnung erbt ihre Schrift die
gedrehte Grundfarbe und steht dunkel auf dunkel. */
/* 🔴 DIE FARBE RICHTET SICH NACH DEM GRUND, NICHT NACH DEM MODUS.
Erste Fassung pinnte hier nur `color`. Damit erbten die Flaechen im
Hellmodus weiter --accent, --muted und --dim in ihrer HELLGRUND-Fassung —
dunkles Indigo auf fast schwarzem Grund, gemessen 1,98:1 am Link
"Datenschutzerklaerung" in der Einwilligungszeile. Eine Einwilligung muss
informiert sein; der Verweis darauf muss lesbar sein.
Diese Flaechen bleiben in BEIDEN Modi dunkel, also setzen sie den ganzen
Tokensatz auf seine Dunkelfassung zurueck — einmal je Flaeche, statt je
Bauteil. Jeder Nachfahre traegt damit von selbst richtig. */
.hero, .contact-section, .site-footer,
.console, .facts, .architecture,
.mode-switch, .mode-panels, .config, .portals-shell,
.tech-metrics, .tech-card, .demo-form {
--bg: #090e1a;
--ink: #f5f7fb;
--muted: #9ca8ba;
--dim: #8593a8; /* heller als C's #6f7d92: das mass auf
.facts nur 4,44:1 */
--accent: hsl(243 75% 72%); /* die Akzentfarbe fuer DUNKLEN Grund */
color: var(--ink);
}
/* Der Hero ist die dunkle Prozesskonsole — auch im Hellmodus.
--surface und --marker gehoeren dazu, sonst steht die Wegmarke
(.route-anchor) weiss auf dunklem Grund. */
.hero {
background: #090e1a;
--surface: #090e1a;
--marker: hsl(243 75% 72%);
}
.hero .eyebrow { color: hsl(243 75% 72%); }
.hero .hero-original{ color: #e0e5ed; }
.hero .hero-copy { color: #9ca8ba; }
.contact-section, .site-footer { --marker: hsl(243 75% 72%); }
/* ── 2. HELLMODUS: nur der Grund dreht ──────────────────────────────────
--indigo bleibt fest (#4f46e5): darauf steht der weisse Knopftext mit
6,45:1. --line bleibt ebenfalls fest — es zeichnet die Raender INNERHALB
der dunklen Konsolen; gedreht wuerde es dort zur hellen Naht. */
@media (prefers-color-scheme: light) {
:root {
--bg: #ffffff;
--bg2: #f7f8fa;
--ink: #131a29; /* 15,8:1 auf Weiss */
--muted: #4a5568; /* 7,5:1 auf Weiss */
--dim: #5d6878; /* 5,4:1 auf Weiss */
--accent: hsl(243 75% 50%); /* 5,6:1 auf Weiss */
--shadow: 0 20px 52px rgb(25 30 45 / .10);
}
body:before { background: radial-gradient(circle at 78% 9%, rgb(79 70 229/.05), transparent 32rem); }
.site-header { background: rgb(255 255 255 / .92); border-bottom-color: hsl(214 32% 88%); }
.site-nav a { color: #3d4759; }
.site-nav a:hover, .site-nav a[aria-current="true"] { background: hsl(243 75% 50% / .08); color: hsl(243 75% 40%); }
.site-nav .login { border-color: hsl(215 16% 62%); }
.site-nav .admin { color: #fff; }
.nav-toggle { border-color: hsl(215 16% 62%); }
.nav-toggle span, .nav-toggle:before, .nav-toggle:after { background: #131a29; }
.section-dark, .tech-section { border-top-color: hsl(214 32% 88%); }
.route-shell:before { background: hsl(215 16% 72%); }
.journey-base { stroke: hsl(215 16% 76%); }
.skip { background: #131a29; color: #fff; }
.tech-intro-note, .tech-caveat { color: var(--muted); }
.tech-caveat { border-color: hsl(214 32% 88%); }
.why-copy > p { color: var(--muted); }
}
/* 🔴 DIE AUSKLAPP-OPTIK DES MENUES GEHOERT NUR INS MENUE. Die Hellfassung von
`html.js .site-nav` stand bis zum 15.09.2026 IM Hellblock und damit ohne
Breitenschranke — ihr dunkles Gegenstueck (Zeile 372) steht dagegen in
`@media(max-width:980px)`. Gemessen bei 1280 px im Hellmodus: die
DESKTOP-Navigation trug `background: rgb(255,255,255)` und
`box-shadow: rgba(25,30,45,.12) 0 20px 52px` — ein weisser Balken mit
Schlagschatten ueber der weissen Kopfleiste, den Konzept C nicht kennt.
Gefunden von der Rolle `oberflaeche` am gerenderten Stand (F0 zu 8cb4a8e9).
🔴 EIGENER OBERSTER @media-BLOCK, NICHT GESCHACHTELT: shared/farbschema.js
schreibt nur `sheet.cssRules` der OBERSTEN Ebene um; eine ins
max-width-Blatt geschachtelte Schema-Bedingung bliebe vom Umschalter
unberuehrt und die Klappe im Hellmodus dunkel. */
@media (prefers-color-scheme: light) and (max-width: 980px) {
html.js .site-nav { background: #fff; border-color: hsl(214 32% 85%); box-shadow: 0 20px 52px rgb(25 30 45/.12); }
}
/* ── 3. ELF PIXEL UNTERGRENZE FUER MIKROTEXTE ───────────────────────────
Konzept C geht bei den Statusperlen bis .44rem (7 px) herunter; gemessen
lag seine kleinste Schriftgroesse bei 9,6 px. Die Live-Seite steht bei
11 px, und dabei bleibt es. */
.status,
.process-route .status, .portal-dock .status, .module-tag .status,
.matrix-status .status, .portal-actions .status, .fact .status { font-size: .6875rem; }
.visual-label, .live-state, .console-title, .flow-labels, .flow-row span,
.context-card b, .context-card span, .process-caption, .process-meta,
.portal-dock strong, .portal-dock small, .visual-note, .fact dt, .fact dd,
.arch-layer small, .arch-layer em, .arch-foot, .gate-id, .chip,
.version-label, .version-line li, .mode-tab, .module-tag, .config-sub,
.config-foot, .switch-caption, .mode-data dt, .mode-data dd, .domain,
.email-link, .portal-role, .portal-actions > span, .tier-caption,
.tier-source, .tech-id, .evidence, .tech-metrics dt, .tech-intro-note,
.replace-table caption, .replace-table thead th, .comparison caption,
.footer-copy, .footer-links a, .contact-item dt, .contact-item dd,
.form-head span, .legend-item, .status-legend-label, .proof-note,
.compliance-note, .package-note, .next-note { font-size: .6875rem; }
/* ── 4. "Was als Naechstes kommt" — Absichtsliste, in C nicht vorgesehen
Sie steht auf der Live-Seite und traegt sechs "kommt"-Marken. Sie faellt
nicht weg, nur weil die Vorlage sie nicht kennt. Bauform wie .package-note. */
.next-lane { margin-top: 15px; padding: 20px; border: 1px solid #d8dae1; border-radius: 14px; background: #ebeaf0; }
.next-lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.next-lane-head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -.02em; }
.next-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.next-item { padding: 13px; border: 1px solid #d5d7df; border-radius: 10px; background: #fff; }
.next-item strong { display: block; margin-bottom: 5px; font-size: .82rem; }
.next-item span { color: #596273; font-size: .76rem; line-height: 1.45; }
.next-note { margin: 13px 0 0; color: #626b79; }
@media (max-width: 980px) { .next-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .next-items { grid-template-columns: minmax(0, 1fr); } }
/* ── 5. Belegkuerzel (A1, B7, T3 …) neben einer Aussage ─────────────── */
.beleg { font-family: var(--mono); font-size: .6875rem; color: var(--dim); white-space: nowrap; }
.paper-section .beleg { color: #6b7488; }
/* 🔴 EIN KUERZEL IST EIN WEG, KEIN ZEICHEN. Bis zum 14.09.2026 war es
Fliesstext: die Rolle `besucherpruefung` mass null Sprungziele, `title:
null`, `cursor: auto` an allen 40 Vorkommen. Jetzt fuehrt jedes zu seiner
Aufloesung — und weil ein Kuerzel im Fliesstext steht, traegt es seine
Unterstreichung dauerhaft: ohne sie sieht ein Weg wie Zierrat aus. */
.beleg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; text-decoration-color: rgb(129 140 248 / .55); }
.beleg a:hover, .beleg a:focus-visible { color: #b8b4ff; text-decoration-color: currentColor; }
/* 🔴 EIN KUERZEL IN EINEM CHIP IST DASSELBE KUERZEL. Vier Vorkommen standen
als `B1` in den Gate-Karten — neben
„18-Monats-Kette" und „Equal-Pay-Uebergang", also ununterscheidbar von einem
Merkmalsetikett. Der Umbau hatte nur `` gesehen, der
Riegel misst dieselbe Form: beide waren gegen die Geschwisterform blind.
Sie tragen jetzt zusaetzlich `.beleg` und damit dieselbe Ankerschrift; der
Chip-Rahmen bleibt, die Mono-Schrift des Kuerzels gewinnt. */
.chip.beleg { font-family: var(--mono); }
/* Das Belegverzeichnis am Fuss des Technik-Abschnitts. Es stand bis zum
14.09.2026 eingeklappt im Hero — warum es dort nicht trug, steht am Block
in landing.html. Sichtbar statt : ein Sprungziel, das erst
aufgeklappt werden muss, ist fuer den Anker darueber keines. */
.beleg-legende { margin: 22px 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, #101929, #0c1320); }
.beleg-legende-titel { margin: 0; font-size: .95rem; }
.beleg-legende-vor { margin: 6px 0 0; color: #8491a4; font-size: .72rem; line-height: 1.5; }
.beleg-legende ul { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
.beleg-eintrag { display: flex; align-items: baseline; gap: 9px; color: #a8b2c1; font-size: .74rem; line-height: 1.5; }
/* 🔴 DIE LEGENDE BRAUCHT EINE EIGENE MARKERFARBE — `--dim` reicht auf ihrem
Grund nicht. Gemessen 15.09.2026 ueber 10 Breiten im Dunkelmodus: die 13
Kennungen (A1 … B10) standen mit rgb(111,125,146) auf rgb(16,25,41) und
damit auf 4,21:1, unter der Schwelle 4,49 — 130 Verstoesse. `--dim` ist
gegen den SEITENgrund (#090e1a) gerechnet, die Legende hat aber einen
aufgehellten eigenen Grund (#101929). Dieselbe Bauform wie Befund 45b9b435:
eine Farbe, die ihre Flaeche nicht mitdreht. `--muted` misst dort 7,31:1. */
.beleg-eintrag .beleg { flex: none; min-width: 27px; color: var(--muted); }
/* Kein eigenes scroll-margin: `html` traegt oben bereits scroll-padding-top:88px
fuer den klebenden Kopf. Beides zusammen haette 178 px Luft ueber dem Ziel
gelassen — die Zeile waere aus dem Bild gerutscht, die ich anspringe.
Gemessen: Sprungziel landet auf beiden Breiten bei y 88. */
/* 🔴 AUFLEUCHTEN MUSS JEDES SPRUNGZIEL, nicht nur die Verzeichniszeile. Die
Regel galt bis zum 14.09.2026 nur `.beleg-eintrag`; die Fachrolle mass an
den Zielen A9, B7 und T2 `background-color: rgba(0,0,0,0)` und
`outline-style: none` — der Leser sprang hin und nichts sagte ihm, worauf.
Ein Ziel ohne Markierung ist ein halber Weg. */
.beleg-eintrag:target, .portal-window:target, .tech-card:target { background-image: linear-gradient(rgb(129 140 248 / .16), rgb(129 140 248 / .16)); border-radius: 7px; outline: 1px solid rgb(129 140 248 / .4); outline-offset: 3px; }
@media (min-width: 760px) { .beleg-legende ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 26px; } }
/* 🔴 HELL LAEUFT HIER UEBER DIE MEDIA-BEDINGUNG, NICHT UEBER EIN ATTRIBUT.
Der Umschalter dieser Seite schreibt den `mediaText` der
prefers-color-scheme-Bloecke um (Kopf von landing.html); `:root` traegt
KEIN data-farbschema — das steht nur an den drei Knoepfen. Eine Regel
`:root[data-farbschema="light"] …` waere hier tot und saehe wie Pflege aus. */
@media (prefers-color-scheme: light) {
.beleg-legende { border-color: hsl(214 32% 88%); background: #fff; }
.beleg-legende-vor { color: var(--muted); }
.beleg-eintrag { color: #4a5364; }
.beleg a { text-decoration-color: rgb(79 70 229 / .5); }
.beleg a:hover, .beleg a:focus-visible { color: #4f46e5; }
}
/* 🔴 EIN AUSWEG, DER WIE FLIESSTEXT AUSSIEHT, IST KEINER. Gemessen am
14.09.2026 an der Pilot-Karte: `Sprechen Sie uns an` hatte exakt die Farbe
des Absatzes (rgb(221,218,254)), `text-decoration: none`, Gewicht 400 — ein
Link von 121x15 px, den niemand als Fortsetzung erkennt. Es gab schlicht
keine Regel fuer `.value-card a`. */
.value-card a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.value-card.featured a { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
.value-card a:hover, .value-card a:focus-visible { text-decoration-color: currentColor; }
/* ── 6. Formular: die Fehlerbox und der Sendeknopf des echten Formulars
Konzept C fuehrt nur eine Attrappe; das hier ist das Formular, das
platform-contact-submit bedient. */
.form-error-box { margin: 14px 0 0; padding: 11px 13px; border: 1px solid #b4525f; border-radius: 9px; background: rgb(180 82 95 / .12); color: #ffb9c2; font-size: .78rem; }
.form-error-box.hidden, .spin.hidden { display: none; }
.form-actions { margin-top: 18px; }
.submit svg { width: 16px; height: 16px; }
.spin { animation: drehen 1s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.req { color: var(--accent); }
/* ── 7. NACHGEMESSEN AM GERENDERTEN STAND ──────────────────────────────
Drei Befunde aus der eigenen Messung. Alle drei waren nur am Bildschirm
zu sehen, keiner im Quelltext. */
/* 7a. Die echte Bildmarke misst 116x136, die Kopfleiste ist 70 px hoch —
ohne Groessenangabe sprengt sie den Kopf. Konzept C fuehrt an dieser
Stelle einen getippten Quadratpunkt; neben einer echten Marke ist er
doppelt gemoppelt. */
/* Kein gap am .brand: seine Flex-Kinder sind "staff" und "OS" — ein gap
reisst die Wortmarke auseinander ("staff OS"). Der Abstand gehoert an die
Bildmarke. */
.brand:before { display: none; }
.brand .mark { width: auto; height: 26px; margin-right: 10px; }
/* 7b. Konzept C setzt die Statusperle in seiner Runde-4b-Korrektur mit
!important auf .62rem (9,92 px). Eine gewoehnliche Regel kommt dagegen
nicht an — die Live-Seite steht bei 11 px, und dabei bleibt es. */
.status,
.process-route .status, .portal-dock .status, .module-tag .status,
.matrix-status .status, .portal-actions .status, .fact .status,
.legend-item .status { font-size: .6875rem !important; }
.version-label { font-size: .6875rem !important; }
/* Der Rest der gemessenen Mikrotexte unter 11 px. */
.mode-kicker, .portal-hub, .route-anchor, .rule-links a,
.process-route strong, .process-route small,
.consent, .consent span, .consent a,
.visual-label, .price-note,
.comparison tbody td:before, .comparison tfoot td:before { font-size: .6875rem; }
/* .arch-head p ist 0-1-1 und sticht .visual-label (0-1-0) — gemessen 10,40 px. */
.arch-head p, .arch-head p.visual-label { font-size: .6875rem; }
/* 7c. .domain traegt eine helle Schrift fuer dunkle Flaechen. In der
Portale-Einleitung steht sie auf dem GRUND — der ist im Hellmodus weiss,
und dort verschwindet sie. */
@media (prefers-color-scheme: light) {
.section-heading .domain { color: var(--ink); }
}
/* 7d. .brand ist inline-flex — "staff" und "OS" waeren zwei Flex-Kinder und
brechen umeinander ("staff" Umbruch "OS", gemessen). Sie gehoeren in EIN
Kind. C's .brand span faerbt jedes span accent, also wird der Wrapper
zurueckgesetzt und nur das b traegt die Akzentfarbe. */
.brand .wortmarke { color: inherit; white-space: nowrap; }
.brand .wortmarke b { color: var(--accent); font-weight: 700; }
/* 7e. Die Preiszeile faellt am Handy auf .68rem (10,88 px). */
@media (max-width: 760px) { .comparison tfoot td { font-size: .6875rem; } }
/* ── 8. KONTRASTBEHEBUNG, je Farbpaar gemessen ─────────────────────────
Feste Grautoene aus Konzept C, die auf ihrer Flaeche unter 4,5:1 liegen.
Diese Flaechen sehen in beiden Modi gleich aus, also gilt die Korrektur
fuer beide. */
/* 8a. Die Bildunterschrift der Weiche steht auf dem GRUND, nicht auf einer
Konsole — C faerbt sie fest hell (#8794a7 / #dce2ec). Im Hellmodus sind
das 3,08:1 und 1,30:1 auf Weiss. */
.switch-caption { color: var(--muted); }
.switch-caption strong { color: var(--ink); }
/* 8b. Helle Dokumentflaechen: zu blasse Grautoene auf Creme. */
.comparison tbody td { color: #5f6675; } /* war #8a909c -> 3,18:1 */
.proof-note { color: #5f6675; } /* war #777f8d -> 4,03:1 */
.gate-id { color: #5f6675; } /* war #747d8c -> 4,12:1 */
.version-label { color: #5f6675 !important; } /* C setzt !important */
/* 8c. Belegzeile auf den dunklen Portalkarten: 4,43:1. */
.evidence { color: #8a99b0; }
/* 8d. Die letzten vier: zwei Grautoene aus Konzept C auf dem HELLEN Stopp
des Konsolenverlaufs (.console, linear-gradient 145deg #111a2b -> #090e1a).
Gemessen gegen den schlechteren der beiden Stopps: #718097 = 4,34:1 und
#748298 = 4,47:1 — beide unter dem Live-Boden von 4,49:1.
#7f8ea6 misst dort 5,24:1. In beiden Modi dieselbe Flaeche, also eine
Korrektur fuer beide. */
.visual-note { color: #7f8ea6; }
.portal-dock small { color: #7f8ea6; }
/* ── 9. .replace-table: der Grund FAELLT unter 760 px WEG ───────────────
Konzept C setzt in @media(max-width:760px) .replace-table auf
background:transparent. Meine Sammelregel pinnte den Dunkel-Tokensatz
unbedingt — damit stand die Schrift dort in ihrer Dunkelgrund-Fassung auf
dem hellen SEITENGRUND. Gemessen 360 bis 760 px: 13 Vorkommen, 6 Paare,
schlechtester Wert 1,22:1. Eine Stelle hatte ICH verschlechtert: die
Tabellenueberschrift lag vorher bei rund 5,6:1 und danach bei 3,26:1.
🔴 Die Pinnung gehoert an dieselbe Bedingung wie der dunkle Grund —
sonst behauptet sie eine Flaeche, die es bei dieser Breite nicht gibt. */
@media (min-width: 761px) {
.replace-table {
--bg: #090e1a;
--ink: #f5f7fb;
--muted: #9ca8ba;
--dim: #8593a8;
--accent: hsl(243 75% 72%);
color: var(--ink);
}
}
/* Unter 760 px steht die Tabelle auf dem Seitengrund. Cs feste Farben sind
fuer dunklen Grund gewaehlt; hier folgen sie den GRUNDTOKEN und tragen
damit in beiden Modi. .replace-table caption nimmt var(--accent) schon in
C — ohne Pinnung ist das hier von selbst die Grundfassung. */
@media (max-width: 760px) {
.replace-table tbody th { color: var(--ink); } /* war #e5e9f0 -> 1,22:1 */
.replace-table td { color: var(--muted); } /* war #98a5b7 -> 2,50:1 */
.replace-table td:last-child { color: var(--accent); } /* war #c3bffa -> 1,73:1 */
.replace-table thead th { color: var(--muted); }
}
/* Die Statusperlen tragen auf hellem Grund die Papierfassung — dieselbe Form
wie .paper-section .status-* in Konzept C. Im Dunkelmodus bleibt der Grund
dunkel, dort gelten Cs Werte unveraendert. */
@media (max-width: 760px) and (prefers-color-scheme: light) {
.replace-table .status-live { color:#176b50; background:#edf8f3; border-color:#86bda9; }
.replace-table .status-pilot { color:#79530d; background:#fff8e9; border-color:#d2af70; }
.replace-table .status-comes { color:#4c43a8; background:#f2f0ff; border-color:#aaa5e1; }
}
/* ── 10. DEN BODEN UEBER DEN LIVE-STAND HEBEN ──────────────────────────
Der echte Live-Boden ist 4,49:1 hell und 4,64:1 dunkel (an staff-os.de
gemessen). Mit 4,50:1 lag dieser Zweig hell knapp darueber, dunkel aber
knapp DARUNTER — ueber WCAG AA, aber keine Verbesserung.
Es haengt an genau drei Elementen; alle drei stehen auf Flaechen, die in
beiden Modi gleich aussehen, also gilt die Korrektur fuer beide. */
.next-note { color: #555c68; } /* war #626b79 -> 4,50:1 auf #ebeaf0 */
.config-sub { color: #828fa5; } /* war #758298 -> 4,53:1 auf #101929 */
.arch-layer small { color: #7d8ba2; } /* war #718097 -> 4,63:1 auf #0c1321 */
/* ── 10. KETTE PLUS KENNZAHL-RUECKFLUSS (Chef 12.09.2026) ───────────────
Acht Stationen statt sieben: die Anfrage (CRM · Vertrieb) steht vorn,
jede Station traegt ihre Kennzahl, unter der Kette laeuft der Rueckfluss
zurueck zur Anfrage. Die Konsole ist in beiden Modi dunkel, deshalb feste
helle Toene (c5c1ff / b9c3d4 auf 0c1422: ueber 9:1). Die Akzentstrecke der
Linie deckt die drei lebenden Stationen: 2 von 7 Abstaenden = 28,6 %. */
.process-caption { margin-top: 26px; padding-top: 18px; }
.process-caption strong { color: #f2f4f9; font: 600 .86rem var(--sans); }
.process-lead { margin: 0 0 16px; color: #b9c3d4; font-size: .78rem; line-height: 1.5; }
@media (min-width: 761px) {
.process-route ol { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.process-route ol:before, .process-route ol:after { right: 6.25%; left: 6.25%; }
.process-route ol:after { background: linear-gradient(90deg, var(--accent) 0 28.6%, rgb(129 140 248/.32) 28.6% 100%); }
/* Im zweispaltigen Hero ist eine Station 66 bis 72 px breit; die Perle
"im Pilot" mass 74 px. Ohne Punkt und Laufweite passt sie in 63 px. */
.process-route .status { gap: 0; padding: 2px 5px; letter-spacing: 0; }
.process-route .status:before { display: none; }
.process-route strong { letter-spacing: 0; }
}
.process-route .kpi { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed rgb(129 140 248/.35); color: #c5c1ff; font: 500 .6875rem var(--mono); font-style: normal; overflow-wrap: anywhere; }
.process-return { position: relative; height: 16px; margin: 6px 6.25% 16px; border: 1px dashed rgb(129 140 248/.5); border-top: 0; border-radius: 0 0 12px 12px; }
.process-return:before { content: ""; position: absolute; top: -9px; left: -5px; border: 5px solid transparent; border-bottom: 8px solid hsl(243 75% 72%); }
.process-return span { position: absolute; right: 0; left: 0; bottom: -9px; margin: auto; width: max-content; padding: 2px 8px; background: #0c1422; color: #c5c1ff; font: 500 .6875rem var(--mono); }
.process-return-note { display: grid; gap: 5px; margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #0a111e; }
.process-return-note strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #dce3ee; font: 600 .74rem var(--sans); }
.process-return-note span:last-child { color: #b9c3d4; font-size: .72rem; line-height: 1.5; }
.comparison .matrix-note { display: block; margin-top: 5px; color: #4f5868; font: 400 .6875rem var(--mono); line-height: 1.4; }
@media (max-width: 760px) {
.process-route ol:after { background: linear-gradient(180deg, var(--accent) 0 28.6%, rgb(129 140 248/.32) 28.6% 100%); }
.process-route .kpi { grid-column: 1 / -1; margin-top: 4px; width: 100%; }
.process-return { display: none; }
.comparison .price-note { overflow-wrap: anywhere; }
}
/* ── 11. HELL/DUNKEL-UMSCHALTER (Chef 13.09.2026, Befund 6a9e1490) ──────
🔴 DER GEDRUECKTE ZUSTAND TRUEG BIS 15.09.2026 DIE KLEIDUNG EINER HANDLUNG
(Befund 8cb4a8e9): volle --accent-Flaeche, gemessen 8,87:1 hell und 5,92:1
dunkel gegen den Kopfgrund — lauter als der Admin-Login, der einzige
Handlungsknopf der Kopfleiste (6,29:1 / 3,07:1). Konzept C fuellt einen
ZUSTAND nirgends mit dem Akzent (.mode-tab und .flow-row tragen ihn als
Rahmen bzw. 10-Prozent-Tonung); voll gefuellt ist dort nur .site-nav .admin.
Der Zustand steht deshalb jetzt auf Rahmen + Symbolhelligkeit + aria-pressed,
nicht auf der Flaeche. Kein neuer Farbwert: Flaeche --bg2, Rahmen --dim,
Symbol --ink, alle drei schalten mit dem Thema um.
🔴 WARUM --bg2 UND NICHT DIE 6-PROZENT-TOENUNG DER NACHBARZEILE. Die erste
Fassung nahm `rgb(255 255 255 / .06)` woertlich von
.site-nav a[aria-current="true"]. pruefe_staffos_landing_tokenfarben.py
faellt darauf rot (Befund 45b9b435): `color` aus einem umgeschalteten Token
ueber einer FESTEN Flaeche — der Text folgt dem Thema, die Flaeche nicht.
Gemessen: 1 Verstoss, mit --bg2 null. Der F0-Rahmen nannte 1,16:1 / 1,14:1
als Sollflaeche; --bg2 liegt bei 1,06:1 / 1,05:1 und damit innerhalb der
Regel (Flaeche <= 1,3:1), nur leiser.
🔴 JEDE ZAHL NENNT IHREN BEZUG, sonst misst die naechste Abnahme einen
anderen und haelt das fuer eine Drift (FA 15.09.2026, Codex-Einwand). Zwei
Bezuege, und sie sind NICHT austauschbar:
KOPFGRUND — hell rgba(255,255,255,.92) mit blur(16px), rendert bei
Scrollstand 0 ueber dem dunklen Hero rgb(235,236,237), ueber einer
weissen Sektion rgb(255,255,255); dunkel rgb(8,14,25).
ZUSTANDSFLAECHE — --bg2, und die ist DECKEND (hell rgb(247,248,250),
dunkel rgb(13,20,34)). Was auf ihr liegt, haengt am Kopfgrund NICHT.
Gemessen am gerenderten Stand, 1280 px, 15.09.2026:
gegen den KOPFGRUND hell ueber Hero / ueber Weiss dunkel
Zustandsflaeche 1,11:1 / 1,06:1 1,05:1
Rahmen --dim 4,78:1 / 5,65:1 (WCAG 1.4.11) 4,61:1
Symbol offen --muted 6,36:1 / 7,53:1 8,01:1
Admin-Login 5,32:1 / 6,29:1 (unveraendert) 3,07:1
gegen die FLAECHE hell (beide Scrollstaende) dunkel
Symbol gedrueckt --ink 16,37:1 17,17:1
Rahmen --dim 5,32:1 4,41:1
Der Admin-Login ist in jeder Spalte das einzige Element der Kopfleiste mit
einer Flaeche ueber 3:1. In der offenen Klappe unter 981 px sitzt der Knopf
nicht auf dem Kopfgrund, sondern auf dem Panel — hell #fff, dunkel #0e1625;
der Rahmen misst dort gegen das Panel 5,65:1 hell und 4,33:1 dunkel.
Masse 38x38 / radius 8 = die der Nachbarn .login (gemessen 95x38) und .admin
(97x38), beide radius 8; die frueheren 40x40 / radius 9 hatten in der
Kopfleiste keine Verwandtschaft. border-box + transparenter 1-px-Rahmen
halten die Box in beiden Zustaenden bei 38 px. Fokusring bleibt global.
🔴 KEIN RIEGEL SIEHT DIESEN KNOPF: pruefe_staffos_landing_kontrast.py misst
nur Elemente mit eigenem Textknoten, und `.farbschema button span` ist am
Desktop display:none. Die Zahlen oben sind von Hand nachgemessen.
Die Gruppe ist das letzte Kind der Navigation: am Desktop rechts neben den
Logins, unter 981 px im eingeklappten Menue — dort mit sichtbarem Text, weil
title auf Touch nicht abrufbar ist (Befund besucherpruefung B1/B5).
Die Umschaltung selbst steht im Kopfskript von landing.html. */
.farbschema { display: flex; gap: 2px; margin-left: 8px; }
html:not(.farbschema-js) .farbschema { display: none; }
.farbschema button { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.farbschema button:hover { color: var(--ink); }
.farbschema button[aria-pressed="true"] { border-color: var(--dim); background: var(--bg2); color: var(--ink); }
.farbschema svg { width: 18px; height: 18px; }
.farbschema button span { display: none; }
@media (max-width: 980px) {
html.js .farbschema { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.farbschema button { width: auto; height: 44px; grid-auto-flow: column; gap: 7px; place-content: center; }
.farbschema button span { display: block; font-size: .78rem; font-weight: 500; }
}