/* =========================================================================
DESIGN SYSTEM "SPEZIFIKATION" — philipp-weigert.de
-------------------------------------------------------------------------
Leitidee: Die Seite liest sich wie ein technisches Spezifikationsblatt,
nicht wie eine Broschüre. Das Differenzierungsmerkmal ist "gebaut, nicht
beraten" — also spricht die Oberfläche die Sprache von Baudokumenten:
nummerierte Abschnitte, Metadaten am Rand, Signalfarbe als Markierung.
Signature: die Spec-Rail (§-Nummer + Status am linken Rand jedes
Abschnitts) und der Signal-Marker (Textmarkierung in Industriegelb).
Reihenfolge der Einbindung:
========================================================================= */
/* =========================================================
1 · TOKENS
========================================================= */
:root{
/* Farbe — Beton, Graphit, Signal */
--concrete: #E8EAEC; /* Canvas — kühles Grau, bewusst kein Creme */
--concrete-deep: #DDE0E3; /* alternierende Flächen */
--sheet: #FFFFFF; /* Karten, Blätter */
--graphite: #101317; /* Text & invertierte Blöcke */
--slate: #59616B; /* Sekundärtext */
--slate-soft: #8A929B; /* Metadaten */
--rule: #C9CED4; /* Haarlinien */
--rule-soft: #DFE2E6;
--signal: #DCE838; /* Industriegelb — nur als Fläche, nie als Text */
--signal-deep: #C2CE1E; /* Hover / Rahmen */
--alert: #C4402A; /* Fehler, seltene Akzente */
/* Legacy-Aliase — von consent.js referenziert, nicht entfernen */
--paper: var(--concrete);
--ink: var(--graphite);
--blue: var(--graphite);
--brass: var(--slate);
--brass-bright: var(--signal-deep);
--muted: var(--slate);
--line: var(--rule);
/* Typografie */
--font-display: "Bricolage Grotesque", "Schibsted Grotesk", system-ui, sans-serif;
--font-text: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
/* Fluid-Skala als rem + vw: skaliert mit dem Browser-Zoom und der
Nutzer-Schriftgröße, statt sie zu ignorieren wie reines vw.
Obergrenzen sind auf die Textspalte (~1000 px) abgestimmt, nicht auf den Viewport. */
--t-hero: clamp(2.75rem, 1.70rem + 3.90vw, 4.75rem); /* 44 → 76 px */
--t-h1: clamp(2.10rem, 1.48rem + 2.30vw, 3.25rem); /* 34 → 52 px */
--t-h2: clamp(1.60rem, 1.24rem + 1.35vw, 2.25rem); /* 26 → 36 px */
--t-h3: clamp(1.10rem, 1.03rem + 0.26vw, 1.28rem); /* 18 → 20 px */
--t-lead: clamp(1.05rem, 0.99rem + 0.24vw, 1.20rem); /* 17 → 19 px */
--t-body: 1.0625rem;
--t-small: 0.9375rem;
--t-meta: 0.6875rem;
/* Raster & Rhythmus — 8pt */
--maxw: 1240px;
--gutter: clamp(20px, 4vw, 44px);
--rail: 116px; /* Breite der Spec-Rail */
--s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
--s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
/* Form */
--r: 2px; /* fast eckig — Werkzeug, nicht App */
--r-lg: 4px;
--border: 1px solid var(--rule);
--shadow: 0 1px 0 var(--rule), 0 12px 32px -22px rgba(16,19,23,.5);
--ease: cubic-bezier(.2,.7,.3,1);
}
/* =========================================================
2 · RESET & BASIS
========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
margin:0; background:var(--concrete); color:var(--graphite);
font-family:var(--font-text); font-size:var(--t-body); line-height:1.6;
font-feature-settings:"ss01","cv01"; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.04;
letter-spacing:-0.032em; margin:0; text-wrap:balance;}
p{margin:0 0 var(--s2);}
a{color:inherit; text-underline-offset:3px; text-decoration-thickness:1px;}
:focus-visible{outline:2px solid var(--graphite); outline-offset:3px;
box-shadow:0 0 0 5px var(--signal);}
::selection{background:var(--signal); color:var(--graphite);}
hr{border:0; border-top:var(--border); margin:var(--s5) 0;}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--graphite);
color:var(--concrete); padding:12px 20px; font-family:var(--font-mono); font-size:var(--t-small);}
.skip:focus{left:12px; top:12px;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter);}
.stack > * + *{margin-top:var(--s3);}
.hide{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
/* =========================================================
3 · TYPO-BAUSTEINE
========================================================= */
.mono{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; color:var(--slate);}
.lead{font-size:var(--t-lead); line-height:1.5; color:var(--slate); max-width:62ch;}
.small{font-size:var(--t-small); color:var(--slate);}
.num{font-family:var(--font-mono); font-weight:500; font-variant-numeric:tabular-nums;}
/* Signature 1 — Signal-Marker: markierter Text wie mit Textmarker */
.marker{background:linear-gradient(to top, var(--signal) 0.62em, transparent 0.62em);
padding-inline:.06em;}
.marker--full{background:var(--signal); padding:.06em .28em; border-radius:1px;}
/* =========================================================
4 · SPEC-RAIL — Signature 2
Jeder Abschnitt trägt links seine Kennung wie ein Bauplan.
========================================================= */
.sec{padding-block:var(--s7); border-top:var(--border); position:relative;}
.sec--flat{border-top:0;}
.sec--tint{background:var(--concrete-deep);}
.sec--dark{background:var(--graphite); color:var(--concrete); border-top:0;}
.sec--dark h1,.sec--dark h2,.sec--dark h3{color:var(--concrete);}
.sec--dark .lead,.sec--dark .mono,.sec--dark .small{color:#A7AEB6;}
.sec-grid{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:var(--s5);}
.rail{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; color:var(--slate-soft); position:sticky; top:96px;
align-self:start; display:flex; flex-direction:column; gap:6px;}
.rail b{color:var(--graphite); font-weight:500; font-size:0.8125rem; letter-spacing:.08em;}
.sec--dark .rail b{color:var(--signal);}
.rail-mark{width:24px; height:3px; background:var(--signal); margin-bottom:4px;}
.sec-head{max-width:26ch; margin-bottom:var(--s5);}
.sec-head .lead{margin-top:var(--s3); max-width:56ch;}
/* =========================================================
5 · NAVIGATION
========================================================= */
.topbar{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--concrete) 88%, transparent);
backdrop-filter:blur(10px); border-bottom:var(--border);}
.topbar-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); min-height:76px;}
.brand{display:flex; flex-direction:column; gap:3px; text-decoration:none; line-height:1;}
.brand b{font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:-0.02em;}
.brand span{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
text-transform:uppercase; color:var(--slate);}
.menu{display:flex; align-items:center; gap:clamp(14px, 1.6vw, 26px);}
.menu a:not(.btn){font-size:var(--t-small); text-decoration:none; color:var(--slate); padding-block:4px;
border-bottom:2px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease);}
.menu a:not(.btn):hover{color:var(--graphite); border-bottom-color:var(--signal);}
.menu .btn{margin-left:var(--s1); white-space:nowrap;}
.nav-toggle{display:none; background:none; border:var(--border); border-radius:var(--r);
padding:9px 13px; font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; cursor:pointer; color:var(--graphite);}
/* =========================================================
6 · BUTTONS (Klassennamen fix — tracking.js hängt daran)
========================================================= */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
white-space:nowrap; font-family:var(--font-text);
font-size:var(--t-small); font-weight:600; letter-spacing:-0.005em; line-height:1;
padding:15px 22px; border-radius:var(--r); border:1.5px solid var(--graphite);
background:transparent; color:var(--graphite); text-decoration:none; cursor:pointer;
transition:transform .16s var(--ease), background .18s var(--ease), color .18s var(--ease);}
.btn .arw{transition:transform .2s var(--ease);}
.btn:hover .arw{transform:translateX(4px);}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--graphite); color:var(--concrete);}
.btn-primary:hover{background:#000;}
.btn-signal{background:var(--signal); border-color:var(--graphite); color:var(--graphite);}
.btn-signal:hover{background:var(--signal-deep);}
.btn-ghost{border-color:var(--rule); color:var(--graphite);}
.btn-ghost:hover{border-color:var(--graphite); background:var(--sheet);}
.btn-sm{padding:10px 15px; font-size:0.875rem;}
.sec--dark .btn{border-color:var(--concrete); color:var(--concrete);}
.sec--dark .btn-primary{background:var(--signal); color:var(--graphite); border-color:var(--signal);}
.sec--dark .btn-primary:hover{background:var(--signal-deep); border-color:var(--signal-deep);}
.sec--dark .btn-primary::before{display:none;}
.sec--dark .btn-ghost:hover{color:var(--graphite);}
.sec--dark .btn-signal{background:var(--signal); color:var(--graphite); border-color:var(--signal);}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center;}
.link{font-family:var(--font-mono); font-size:0.8125rem; letter-spacing:.06em;
text-transform:uppercase; text-decoration:none; border-bottom:1.5px solid var(--signal);
padding-bottom:2px; transition:border-color .18s var(--ease);}
.link:hover{border-bottom-color:var(--graphite);}
/* =========================================================
7 · KARTEN & RASTER
========================================================= */
.grid{display:grid; gap:var(--s3);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.card{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);
transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);}
.card h3{font-size:var(--t-h3);}
.card p{margin:0; color:var(--slate); font-size:var(--t-small);}
.card--hover:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--slate-soft);}
.card--flat{background:transparent; border:0; padding:0;}
.card-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2);}
.card-foot{margin-top:auto; padding-top:var(--s3);}
/* Nummernkarte — Zahl nur wo Reihenfolge Bedeutung trägt */
.card--step{position:relative; padding-top:var(--s5);}
.card--step .step-no{position:absolute; top:var(--s3); left:var(--s4);
font-family:var(--font-mono); font-size:0.8125rem; font-weight:500; letter-spacing:.1em;
color:var(--graphite); background:var(--signal); padding:3px 9px; border-radius:1px;}
/* =========================================================
8 · HERO
========================================================= */
.hero{padding-block:clamp(56px,9vw,116px) var(--s7);}
.hero h1{font-size:var(--t-hero); font-weight:700; letter-spacing:-0.042em;}
.hero .lead{margin-top:var(--s4);}
.hero .cta-row{margin-top:var(--s5);}
.hero-note{margin-top:var(--s3); font-family:var(--font-mono); font-size:var(--t-meta);
letter-spacing:.12em; text-transform:uppercase; color:var(--slate-soft);}
/* Statuszeile — echte Metadaten, kein Dekor */
.status{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:center;
padding:12px 0; border-block:var(--border); font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--slate);}
.status b{color:var(--graphite); font-weight:500;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--signal-deep);
display:inline-block; margin-right:7px; vertical-align:middle;}
/* =========================================================
9 · LOGO-LEISTE
========================================================= */
.logos{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); align-items:center;}
.logos li{font-family:var(--font-display); font-weight:600; font-size:1.0625rem;
letter-spacing:-0.02em; color:var(--slate); list-style:none;}
.logos-wrap{padding-block:var(--s4); border-block:var(--border);}
/* =========================================================
10 · PREIS- / ANGEBOTSKARTEN
========================================================= */
.offer{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2);}
.offer--lead{border:1.5px solid var(--graphite); position:relative;}
.offer--lead::before{content:attr(data-flag); position:absolute; top:-11px; left:var(--s4);
background:var(--signal); color:var(--graphite); font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; padding:4px 10px;}
.offer h3{font-size:1.35rem;}
.price{font-family:var(--font-display); font-weight:700; font-size:1.9rem;
letter-spacing:-0.03em; font-variant-numeric:tabular-nums;}
.price small{font-family:var(--font-mono); font-size:var(--t-meta); font-weight:400;
letter-spacing:.12em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:4px;}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.ticks li{position:relative; padding-left:24px; font-size:var(--t-small); color:var(--slate);}
.ticks li::before{content:""; position:absolute; left:0; top:.55em; width:12px; height:2px;
background:var(--signal-deep);}
/* =========================================================
11 · FAKTEN-LISTE / DEFINITIONSRASTER
========================================================= */
.facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0;}
.facts dt{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.13em;
text-transform:uppercase; color:var(--slate-soft); padding:14px var(--s3) 14px 0;
border-top:1px solid var(--rule-soft); white-space:nowrap;}
.facts dd{margin:0; padding:14px 0; border-top:1px solid var(--rule-soft);
font-size:var(--t-small); font-weight:500;}
/* =========================================================
12 · CHIPS, HINWEISE, ZITATE
========================================================= */
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase;
border:var(--border); border-radius:100px; padding:6px 13px; color:var(--slate);
background:var(--sheet);}
.chip--signal{background:var(--signal); border-color:var(--signal); color:var(--graphite);}
.chips{display:flex; flex-wrap:wrap; gap:var(--s1);}
.note{border-left:3px solid var(--signal); background:var(--sheet); border-radius:var(--r);
padding:var(--s3) var(--s4); font-size:var(--t-small); color:var(--slate);}
.note b{color:var(--graphite);}
.aside{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:.06em;
color:var(--slate-soft);}
.aside::before{content:"// ";}
blockquote{margin:0; padding-left:var(--s4); border-left:2px solid var(--rule);
font-family:var(--font-display); font-weight:500; font-size:var(--t-h3); line-height:1.35;
letter-spacing:-0.02em;}
/* =========================================================
13 · FLIESSTEXT (Rechtstexte, Ratgeber)
========================================================= */
.prose{max-width:74ch;}
.prose h2{font-size:var(--t-h2); margin:var(--s6) 0 var(--s2); padding-top:var(--s3);
border-top:var(--border); scroll-margin-top:96px;}
.prose h2 .num{color:var(--slate-soft); margin-right:12px; font-size:.9rem;}
.prose h3{font-size:1.125rem; margin:var(--s4) 0 var(--s1);}
.prose p,.prose li{color:#20252B;}
.prose ul,.prose ol{padding-left:22px; margin:0 0 var(--s2);}
.prose li{margin-bottom:8px;}
.prose a:not(.btn){color:var(--graphite); text-decoration-color:var(--signal-deep);}
.prose code{font-family:var(--font-mono); font-size:.875em; background:var(--concrete-deep);
border:1px solid var(--rule-soft); border-radius:2px; padding:1px 6px;}
.addr{font-style:normal; background:var(--sheet); border:var(--border); border-radius:var(--r);
padding:var(--s3) var(--s4); margin:var(--s2) 0 var(--s3);}
.toc{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
padding:var(--s3) var(--s4); margin-block:var(--s4);}
.toc ol{columns:2; column-gap:var(--s5); font-size:var(--t-small); padding-left:20px; margin:0;}
.toc a{text-decoration:none; color:var(--slate);}
.toc a:hover{color:var(--graphite); text-decoration:underline; text-decoration-color:var(--signal-deep);}
/* =========================================================
14 · FOOTER
========================================================= */
footer{border-top:var(--border); background:var(--concrete-deep); margin-top:var(--s7);}
.foot-in{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
align-items:flex-start; padding-block:var(--s5) var(--s4);}
.foot-links{display:flex; flex-wrap:wrap; gap:var(--s3); font-size:var(--t-small);}
.foot-links a{text-decoration:none; color:var(--slate);}
.foot-links a:hover{color:var(--graphite); text-decoration:underline; text-decoration-color:var(--signal-deep);}
.foot-legal{display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between;
align-items:center; padding-block:var(--s3) var(--s5); border-top:1px solid var(--rule-soft);
font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.12em;
text-transform:uppercase; color:var(--slate-soft);}
.foot-legal-links{display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center;}
.foot-legal-links a,.foot-legal-links button{color:var(--slate-soft); text-decoration:none;
font:inherit; background:none; border:0; padding:0; cursor:pointer;}
.foot-legal-links a:hover,.foot-legal-links button:hover{color:var(--graphite);}
/* =========================================================
15 · BEWEGUNG — sparsam, eine Geste
========================================================= */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease);}
.reveal.in{opacity:1; transform:none;}
/* =========================================================
16 · RESPONSIVE
========================================================= */
@media (min-width:1600px){
:root{--maxw:1360px; --rail:132px;}
}
@media (max-width:1040px){
.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:880px){
:root{--rail:0px;}
.sec-grid{grid-template-columns:1fr; gap:var(--s3);}
.rail{position:static; flex-direction:row; align-items:center; gap:var(--s2); margin-bottom:var(--s2);}
.rail-mark{margin:0;}
.grid-3{grid-template-columns:1fr;}
.grid-2{grid-template-columns:1fr;}
.menu{position:fixed; inset:72px 0 auto; background:var(--concrete); flex-direction:column;
align-items:stretch; gap:0; padding:var(--s2) var(--gutter) var(--s4);
border-bottom:var(--border); display:none;}
.menu.open{display:flex;}
.menu a:not(.btn){padding-block:14px; border-bottom:1px solid var(--rule-soft);}
.menu .btn{margin-left:0;}
.menu .btn{margin-top:var(--s2); justify-content:center;}
.nav-toggle{display:inline-block;}
.sec{padding-block:var(--s6);}
}
@media (max-width:620px){
.grid-4{grid-template-columns:1fr;}
.facts{grid-template-columns:1fr;}
.facts dt{padding-bottom:0; border-top:1px solid var(--rule-soft);}
.facts dd{padding-top:4px; border-top:0;}
.toc ol{columns:1;}
.cta-row .btn{flex:1 1 100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{transition:none!important; animation:none!important;}
.reveal{opacity:1; transform:none;}
}
/* =========================================================
17 · ERGÄNZENDE MODULE (Unterseiten)
========================================================= */
/* Brotkrumen */
.crumbs{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.12em;
text-transform:uppercase; color:var(--slate-soft); padding-block:var(--s3) 0;}
.crumbs a{color:var(--slate); text-decoration:none;}
.crumbs a:hover{color:var(--graphite); text-decoration:underline; text-decoration-color:var(--signal-deep);}
/* Zurück-Link in der Kopfzeile */
.back{font-size:var(--t-small); text-decoration:none; color:var(--slate); white-space:nowrap;}
.back:hover{color:var(--graphite);}
/* Kennzahl-Block (z. B. "2 Tage gebaut") */
.stat{display:flex; gap:var(--s4); align-items:center; flex-wrap:wrap;
background:var(--sheet); border:var(--border); border-left:3px solid var(--signal);
border-radius:var(--r); padding:var(--s3) var(--s4); margin-block:var(--s3);}
.stat-num{font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.4rem);
line-height:.9; letter-spacing:-0.04em; font-variant-numeric:tabular-nums; flex:none;}
.stat-num span{display:block; font-family:var(--font-mono); font-size:var(--t-meta); font-weight:400;
letter-spacing:.13em; text-transform:uppercase; color:var(--slate); margin-top:8px;}
.stat p{margin:0; font-size:var(--t-small); color:var(--slate);}
/* Medien-Platzhalter */
.media{margin-block:var(--s3); border:var(--border); border-radius:var(--r-lg);
background:var(--concrete-deep); overflow:hidden;}
.media iframe,.media video{display:block; width:100%; aspect-ratio:16/9; border:0;}
.media-ph{aspect-ratio:16/9; display:flex; flex-direction:column; gap:8px;
align-items:center; justify-content:center; text-align:center; color:var(--slate);
font-family:var(--font-mono); font-size:var(--t-small); letter-spacing:.08em;}
.media-ph .play{width:52px; height:52px; border-radius:50%; background:var(--signal);
color:var(--graphite); display:grid; place-items:center; font-size:18px; margin-bottom:4px;}
/* Datentabelle */
.table-wrap{overflow-x:auto; margin-block:var(--s3);}
table.cost{width:100%; border-collapse:collapse; background:var(--sheet);
border:var(--border); font-size:var(--t-small);}
table.cost caption{caption-side:top; text-align:left; font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase;
color:var(--slate); padding-bottom:10px;}
table.cost th,table.cost td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--rule-soft);
vertical-align:top;}
table.cost thead th{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.13em;
text-transform:uppercase; color:var(--slate); background:var(--concrete-deep); font-weight:400;}
table.cost tbody tr:last-child td{border-bottom:0;}
table.cost td.price,table.cost .price{font-family:var(--font-mono); font-weight:500; font-size:var(--t-small);
font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:0;}
/* FAQ */
.faq{display:grid; gap:0; margin-block:var(--s3);}
.faq-item{border-top:1px solid var(--rule); padding-block:var(--s3);}
.faq-item:last-child{border-bottom:1px solid var(--rule);}
.faq-item h3{font-size:1.0625rem; margin-bottom:8px;}
.faq-item p{margin:0; color:var(--slate); font-size:var(--t-small);}
/* Abschluss-Block auf Unterseiten */
.cta-block{background:var(--graphite); color:var(--concrete); border-radius:var(--r-lg);
padding:var(--s5) var(--s4); margin-top:var(--s6);}
.cta-block h2{color:var(--concrete); border-top:0; padding-top:0; margin-top:0; font-size:var(--t-h2);}
.cta-block p{color:#A7AEB6; max-width:56ch;}
.cta-block .mono{color:var(--signal);}
.cta-block .btn{border-color:var(--signal); background:var(--signal); color:var(--graphite);}
.cta-block .btn:hover{background:var(--signal-deep); border-color:var(--signal-deep);}
/* =========================================================
18 · LEBEN — Textur, Bewegung, Reaktion
Leitidee: Die Seite reagiert auf den Nutzer. Ein Werkzeug,
das sich anfühlt, als wäre jemand dahinter.
========================================================= */
/* ---- Korn: gibt der Betonfläche Tastbarkeit ---- */
body::before{
content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{position:relative; z-index:2;}
/* ---- Hero: Wort-Rotator ---- */
.rotator{display:inline-grid; vertical-align:baseline; text-align:left;}
.rotator span{grid-area:1/1; opacity:0; transform:translateY(.42em) rotateX(-55deg);
transform-origin:top center; animation:rot 9s infinite;}
.rotator span:nth-child(1){animation-delay:0s;}
.rotator span:nth-child(2){animation-delay:3s;}
.rotator span:nth-child(3){animation-delay:6s;}
@keyframes rot{
0%,2% {opacity:0; transform:translateY(.42em) rotateX(-55deg);}
6%,30% {opacity:1; transform:none;}
34%,100%{opacity:0; transform:translateY(-.42em) rotateX(55deg);}
}
/* ---- Marker zeichnet sich beim Erscheinen ---- */
.marker{background:linear-gradient(to top, var(--signal) .62em, transparent .62em);
background-size:0% 100%; background-repeat:no-repeat; padding-inline:.06em;
transition:background-size .85s cubic-bezier(.66,0,.2,1) .25s;}
.marker.drawn,.no-js .marker{background-size:100% 100%;}
/* ---- Gestaffelter Auftritt beim Laden ---- */
.rise{opacity:0; transform:translateY(20px); animation:rise .8s var(--ease) forwards;}
.rise:nth-child(1){animation-delay:.05s;} .rise:nth-child(2){animation-delay:.14s;}
.rise:nth-child(3){animation-delay:.23s;} .rise:nth-child(4){animation-delay:.32s;}
.rise:nth-child(5){animation-delay:.41s;}
@keyframes rise{to{opacity:1; transform:none;}}
/* ---- Laufband für die Stationen ---- */
.ticker{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.ticker-track{display:flex; width:max-content; animation:slide 34s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker ul{display:flex; gap:var(--s5); align-items:center; margin:0; padding:0 var(--s4) 0 0;}
@keyframes slide{to{transform:translateX(-50%);}}
/* ---- Bento-Raster für Arbeitsproben ---- */
.bento{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3);}
.bento > :first-child{grid-column:span 2;}
.bento > :first-child h3{font-size:clamp(1.5rem,2.2vw,1.95rem);}
.bento > :first-child p{max-width:62ch;}
/* Sobald ein Screenshot eingesetzt wird, bekommt die erste Zelle wieder Höhe: */
.bento > :first-child:has(.work-shot){grid-row:span 2;}
.bento > :first-child .work-shot{flex:1; min-height:170px;}
/* ---- Arbeitsproben-Karte mit Signal-Wisch ---- */
.work{position:relative; overflow:hidden; isolation:isolate;}
.work::after{content:""; position:absolute; inset:auto -20% -60% -20%; height:70%;
background:var(--signal); transform:translateY(101%) rotate(-3deg); z-index:-1;
transition:transform .5s cubic-bezier(.66,0,.2,1);}
.work:hover::after,.work:focus-within::after{transform:translateY(46%) rotate(-3deg);}
.work .num{transition:transform .35s var(--ease), color .35s var(--ease);}
.work:hover .num{transform:scale(1.35) translateX(-6px); color:var(--graphite);}
.work-shot{border:var(--border); border-radius:var(--r); background:var(--concrete-deep);
display:grid; place-items:center; min-height:118px; overflow:hidden;
font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; color:var(--slate-soft); text-align:center; padding:var(--s2);}
.work-shot img{width:100%; height:100%; object-fit:cover;}
/* ---- Zahlen, die hochzählen ---- */
.count{font-variant-numeric:tabular-nums;}
/* ---- Signal-Abschnitt: der laute Moment der Seite ---- */
.sec--signal{background:var(--signal); color:var(--graphite); border-top:0;
position:relative; overflow:hidden;}
.sec--signal h1,.sec--signal h2,.sec--signal h3{color:var(--graphite);}
.sec--signal .lead,.sec--signal .small{color:#3D4211;}
.sec--signal .mono,.sec--signal .aside{color:#4A5015;}
.sec--signal .rail{color:#4A5015;} .sec--signal .rail b{color:var(--graphite);}
.sec--signal .rail-mark{background:var(--graphite);}
.sec--signal .btn{border-color:var(--graphite); background:var(--graphite); color:var(--signal);}
.sec--signal .btn:hover{background:#000;}
.sec--signal .chip{background:transparent; border-color:var(--graphite); color:var(--graphite);}
.sec--signal::before{content:""; position:absolute; right:-8%; top:-30%; width:52%; aspect-ratio:1;
border:2px solid rgba(16,19,23,.14); border-radius:50%; pointer-events:none;}
.sec--signal::after{content:""; position:absolute; right:4%; bottom:-42%; width:34%; aspect-ratio:1;
border:2px solid rgba(16,19,23,.14); border-radius:50%; pointer-events:none;}
/* ---- Lichtkegel folgt dem Zeiger (dunkler Abschnitt) ---- */
.sec--dark{position:relative; overflow:hidden;}
.sec--dark::before{content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),
rgba(220,232,56,.16), transparent 62%); transition:opacity .3s;}
/* ---- Karten kippen leicht zum Zeiger ---- */
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
transition:transform .35s var(--ease);}
/* ---- Fortschritt in der Spec-Rail ---- */
.rail-mark{width:24px; height:3px; background:var(--rule); position:relative; overflow:hidden;}
.rail-mark::after{content:""; position:absolute; inset:0; background:var(--signal);
transform:scaleX(var(--p,0)); transform-origin:left; transition:transform .18s linear;}
/* ---- Buttons: Farbwisch statt bloßem Farbwechsel ---- */
.btn{position:relative; overflow:hidden; isolation:isolate;}
.btn::before{content:""; position:absolute; inset:0; background:var(--signal); z-index:-1;
transform:translateY(100%); transition:transform .34s cubic-bezier(.66,0,.2,1);}
.btn-primary:hover::before,.btn-ghost:hover::before{transform:translateY(0);}
.btn-primary:hover{color:var(--graphite);}
.btn-ghost:hover{border-color:var(--graphite);}
.btn-signal::before,.sec--signal .btn::before{display:none;}
/* ---- Porträt ---- */
.portrait{border:var(--border); border-radius:var(--r-lg); overflow:hidden;
background:var(--concrete-deep); margin:0 0 var(--s3); position:relative;
max-width:190px; width:100%;}
.portrait img{width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) contrast(1.06);
transition:filter .5s var(--ease), transform .6s var(--ease);}
.portrait:hover img{filter:none; transform:scale(1.02);}
.portrait figcaption{position:absolute; left:0; bottom:0; right:0; padding:8px 11px; line-height:1.35;
background:var(--signal); color:var(--graphite); font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase;}
@media (max-width:880px){
.bento{grid-template-columns:1fr;}
.bento > :first-child{grid-column:span 1; grid-row:span 1;}
.bento > :first-child:has(.work-shot){grid-row:span 1;}
.tilt{transform:none;}
}
@media (prefers-reduced-motion:reduce){
.rotator span{animation:none; opacity:0;}
.rotator span:first-child{opacity:1; transform:none;}
.ticker-track{animation:none;}
.rise{opacity:1; transform:none; animation:none;}
.marker{background-size:100% 100%;}
.work::after,.btn::before{display:none;}
.sec--dark::before{display:none;}
}
/* =========================================================
19 · PRÄSENZ — Index, Uhr, Klammern
Angeregt durch specia1ne.com: nummerierte Abschnittscodes,
Live-Ortszeit als Anwesenheitsbeweis, Klammern als Rahmung.
========================================================= */
/* ---- Live-Ortszeit: zeigt, dass hier jemand ist ---- */
.presence{display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.13em; text-transform:uppercase; color:var(--slate);
white-space:nowrap;}
.presence b{color:var(--graphite); font-weight:500;}
.presence .pulse{width:6px; height:6px; border-radius:50%; background:var(--signal-deep);
flex:none; animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.72);}}
.sec--dark .presence{color:#A7AEB6;} .sec--dark .presence b{color:var(--concrete);}
/* ---- Nummerierte Navigation ---- */
.menu a:not(.btn) .idx{font-family:var(--font-mono); font-size:.72em; letter-spacing:.1em;
color:var(--slate-soft); margin-right:7px; transition:color .18s var(--ease);}
.menu a:not(.btn):hover .idx{color:var(--signal-deep);}
/* ---- Aktueller Abschnitt in der Kopfzeile ---- */
.here{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; color:var(--slate-soft); display:none; align-items:center; gap:8px;}
.here b{color:var(--graphite); font-weight:500;}
.here .bar{width:34px; height:2px; background:var(--rule); position:relative; overflow:hidden;}
.here .bar::after{content:""; position:absolute; inset:0; background:var(--signal);
transform:scaleX(var(--hp,0)); transform-origin:left; transition:transform .2s linear;}
@media (min-width:1280px){ .here{display:flex;} }
/* ---- Laufender Index in Listenabschnitten ---- */
.counter{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.14em;
text-transform:uppercase; color:var(--slate-soft); display:flex; align-items:center; gap:10px;
padding-bottom:var(--s2); margin-bottom:var(--s3); border-bottom:1px solid var(--rule-soft);}
.counter b{color:var(--graphite); font-weight:500; font-variant-numeric:tabular-nums;}
.counter .flag{background:var(--signal); color:var(--graphite); padding:3px 8px;}
.sec--signal .counter{border-color:rgba(16,19,23,.2);}
/* ---- Klammern als Rahmung ---- */
.btn-brackets::after,.btn-brackets::before{content:none;}
.btn-brackets{border-color:transparent; padding-inline:6px; background:transparent;
color:var(--graphite); font-family:var(--font-mono); font-size:var(--t-small);
letter-spacing:.08em; text-transform:uppercase;}
.btn-brackets .br{color:var(--signal-deep); transition:transform .3s var(--ease); display:inline-block;}
.btn-brackets .br-l{margin-right:4px;} .btn-brackets .br-r{margin-left:4px;}
.btn-brackets:hover .br-l{transform:translateX(-5px);}
.btn-brackets:hover .br-r{transform:translateX(5px);}
.btn-brackets:hover{transform:none;}
/* ---- Metadaten-Zeile im Klammerstil ---- */
.meta-brackets{font-family:var(--font-mono); font-size:var(--t-meta); letter-spacing:.11em;
text-transform:uppercase; color:var(--slate); margin:0;}
.meta-brackets::before{content:"[ "; color:var(--signal-deep);}
.meta-brackets::after{content:" ]"; color:var(--signal-deep);}
/* ---- Antithese-Überschrift: zwei Sätze, harter Umbruch ---- */
.antithesis{display:block;}
.antithesis span{display:block;}
.antithesis span + span{color:var(--slate);}
.sec--dark .antithesis span + span{color:#7E8892;}
/* =========================================================
20 · FEINSCHLIFF — Proportionen auf großen Schirmen
========================================================= */
/* Rechts neben der Textspalte standen bis zu 456 px ungenutzt.
Ab 1280 px wandert das Inhaltsverzeichnis dorthin und läuft mit. */
@media (min-width:1280px){
.prose:has(.toc){
display:grid; grid-template-columns:minmax(0,74ch) minmax(0,1fr);
gap:var(--s5); align-items:start; max-width:none;
}
.prose:has(.toc) > *{grid-column:1; min-width:0;}
.prose:has(.toc) > .toc{
grid-column:2; grid-row:1; position:sticky; top:104px;
margin:0; background:transparent; border:0; border-left:1px solid var(--rule);
border-radius:0; padding:2px 0 2px var(--s3);
}
.prose:has(.toc) > .toc ol{columns:1; font-size:var(--t-small);}
.prose:has(.toc) > .toc li{margin-bottom:8px;}
.prose:has(.toc) > .toc p{font-family:var(--font-mono); font-size:var(--t-meta);
letter-spacing:.14em; text-transform:uppercase; color:var(--slate-soft);}
}
/* Abschlussblock der Unterseiten: Fließtext nicht über die volle Breite ziehen */
.cta-block{max-width:1000px;}
.cta-block h2{max-width:22ch;}
/* Kennzahl-Block bündig zur Textspalte halten */
.stat{max-width:74ch;}
/* Kreise im Signal-Abschnitt auf sehr breiten Schirmen begrenzen */
@media (min-width:1600px){
.sec--signal::before{width:34%;}
.sec--signal::after{width:22%;}
}
/* =========================================================
21 · PERSONALBOGEN — Abschnitt „07 Person"
Das Porträt wird nicht dekoriert, sondern datiert: Bild, Kennwerte
und Nachweise sitzen in einem Blatt, wie ein Personalbogen im
Projektordner. Fügt sich in die Spec-Sheet-Logik der Seite ein.
========================================================= */
.person{display:grid; grid-template-columns:minmax(0,306px) minmax(0,1fr);
gap:var(--s5); align-items:start;}
.record{background:var(--sheet); border:var(--border); border-radius:var(--r-lg);
overflow:hidden; position:sticky; top:104px;}
.record-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
padding:11px 14px; border-bottom:var(--border); font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--slate);}
.record-head b{color:var(--graphite); font-weight:500;}
.record-head .tag{background:var(--signal); color:var(--graphite); padding:3px 7px;}
.record figure{margin:0; position:relative; background:var(--concrete-deep);}
.record figure img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover;
filter:grayscale(1) contrast(1.05); transition:filter .5s var(--ease);}
.record:hover figure img{filter:none;}
.record figcaption{position:absolute; left:0; right:0; bottom:0; padding:7px 12px;
background:rgba(16,19,23,.86); color:var(--concrete); font-family:var(--font-mono);
font-size:var(--t-meta); letter-spacing:.12em; text-transform:uppercase;
display:flex; justify-content:space-between; gap:10px;}
.record figcaption span:last-child{color:var(--signal);}
.record .facts{padding:0 14px;}
.record .facts dt{padding:11px var(--s2) 11px 0; white-space:normal;}
.record .facts dd{padding:11px 0; font-size:0.875rem;}
.record .facts > :nth-child(1),.record .facts > :nth-child(2){border-top:0;}
.record-foot{padding:12px 14px 14px; border-top:1px solid var(--rule-soft);}
.record-foot .chips{gap:6px;}
.record-foot .chip{font-size:10px; padding:5px 9px;}
/* Großes Zitat trägt den Abschnitt */
.quote-lg{margin:var(--s4) 0; padding-left:var(--s4); border-left:3px solid var(--signal);
font-family:var(--font-display); font-weight:600; font-size:clamp(1.35rem,2.1vw,1.85rem);
line-height:1.22; letter-spacing:-0.028em; color:var(--graphite); max-width:22ch;}
@media (max-width:980px){
.person{grid-template-columns:1fr; gap:var(--s4);}
.record{position:static; max-width:420px;}
}
/* darf das Seitenverhältnis nicht brechen */
.record figure picture{display:block;}