/* ═══════════════════════════════════════════════════════════════════
tk comp — Entwurf 2026 · "Datenblatt"
Self-contained. Kein Tailwind, keine /shared/-Abhängigkeit,
keine CDN. Alle Pfade relativ. Cache-Bust über den Dateinamen
(styles-v1.css → styles-v2.css), da scripts/cache-bust.mjs nur
dist/*.html flach scannt und nur /shared/-Pfade stempelt.
═══════════════════════════════════════════════════════════════════ */
/* ── Fonts, self-hosted (Geist, wie die Live-Seite) ───────────────── */
@font-face { font-family:"Geist Sans"; 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 Sans"; 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 Sans"; 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 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"); }
/* Metrisch angepasster Fallback gegen Font-Swap-CLS (gemessen 0,0306 → 0,0002).
ascent/descent/line-gap = Geists Metriken (92/22/10 %), size-adjust 103.7 %
gegen Arial/Liberation. Fixiert Höhe plattformunabhängig + Breite. */
@font-face {
font-family: "Geist Sans Fallback";
src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("sans-serif");
ascent-override: 92%;
descent-override: 22%;
line-gap-override: 10%;
size-adjust: 103.7%;
}
/* ── Tokens: die ECHTE tk-comp-CI, unverändert übernommen ─────────── */
:root {
/* Aus shared/tailwind-input.css — nicht neu erfunden */
--ink: hsl(217 32% 15%); /* #1A2332 Primary Charcoal */
--ink-soft: hsl(218 21% 37%); /* #4A5A72 Secondary Charcoal */
--paper: hsl(0 0% 100%);
--paper-tint: hsl(210 40% 98%);
/* 46% statt 47%: der Ton traegt 18 Stellen (Nav, Fliesstext, dt-Labels, Placeholder)
und steht dabei auf ZWEI Untergruenden. Gegen --paper (weiss) war 47% mit 4.70:1
schon AA — gegen --paper-tint (#F8FAFC) aber nur 4.49:1, also unter 4.5 (Live-QA-Fund
P3, dort als Nav-Problem gemeldet; die Ursache ist der getoente Hintergrund, nicht
die Nav). 46% liefert 4.89:1 auf weiss und 4.68:1 auf tint — beide Untergruende
tragen. Bewusst am Token statt per Nav-Override, sonst bleiben die 17 anderen
Stellen auf tint unter AA. */
--muted: hsl(215 16% 46%);
--line: hsl(214 32% 91%);
/* Bedienelement-Ränder brauchen ≥3:1 (WCAG 1.4.11 Non-Text Contrast).
--line ist eine dekorative Trennlinie (1.24:1) und dafür ungeeignet.
62% ergab nachgemessen erst 2.79:1 — 57% liefert 3.32:1 mit Puffer. */
--line-strong: hsl(215 16% 57%);
/* Hairline-Skala statt Farbflächen: drei Linienstärken, keine drei Farben */
--rule-soft: 1px solid hsl(214 32% 91% / .6);
--rule-hair: 1px solid var(--line);
--rule-ink: 1px solid var(--ink);
/* Typo-Skala: perfekte Quarte (1.333) — Kontrast über MASS, nicht Farbe */
--step--1: clamp(.84rem, .82rem + .10vw, .89rem);
--step-0: clamp(1rem, .96rem + .20vw, 1.13rem);
--step-1: clamp(1.33rem, 1.24rem + .45vw, 1.60rem);
--step-2: clamp(1.78rem, 1.58rem + .98vw, 2.37rem);
--step-3: clamp(2.37rem, 1.98rem + 1.93vw, 3.55rem);
--step-4: clamp(2.99rem, 2.11rem + 4.38vw, 5.30rem); /* max 84.8px, unter 96 */
--gap: clamp(6rem, 12vh, 11rem);
--pad: clamp(1.25rem, 4vw, 3rem);
--shell: 78rem;
--ease: cubic-bezier(.22, 1, .36, 1); /* ease-out-quart */
}
@media (prefers-color-scheme: dark) {
:root {
--ink: hsl(217 22% 84%);
--ink-soft: hsl(217 22% 62%);
--paper: hsl(222 47% 7%);
--paper-tint: hsl(222 40% 10%);
--muted: hsl(215 20% 65%);
--line: hsl(217 33% 20%);
--line-strong: hsl(217 20% 46%);
--rule-soft: 1px solid hsl(217 33% 20% / .7);
--rule-hair: 1px solid var(--line);
--rule-ink: 1px solid var(--ink);
}
}
/* ── Reset / Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "Geist Sans", "Geist Sans Fallback", ui-sans-serif, system-ui, sans-serif;
font-size: var(--step-0);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
font-feature-settings: "rlig" 1, "calt" 1;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
h1 { font-size: var(--step-4); font-weight: 600; line-height: .95; letter-spacing: -.028em; }
h2 { font-size: var(--step-3); font-weight: 600; line-height: 1.08; letter-spacing: -.022em; }
h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; }
/* Mono = Fakten. Sans = Prosa. Nie umgekehrt. */
.mono {
font-family: "Geist Mono", ui-monospace, monospace;
font-size: var(--step--1);
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
color: var(--muted);
}
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.prose { max-width: 62ch; } /* dt. Text ist ~30% länger → 62ch, nicht 75ch */
/* Absatzabstand innerhalb eines .prose-Blocks.
🔴 Warum als Regel und nicht wie bisher per style="margin-bottom:1.25rem":
die .htaccess setzt eine strikte CSP ("style-src 'self'"), die JEDE
inline-Style-Angabe blockiert. Live am 18.07. in der Browser-Konsole
nachgemessen — die Startseite meldet 4 blockierte Inline-Styles, und
ihre Absätze laufen deshalb ohne Abstand ineinander. Diese Regel stellt
die ursprünglich beabsichtigte Trennung wieder her, CSP-fest. */
.prose p + p { margin-top: 1.25rem; }
/* Weitere CSP-Ersetzungen für die Startseite (18.07.).
Gleiche Ursache wie oben: "style-src 'self'" blockiert jedes style="…".
Die vier Inline-Angaben der Startseite sind hier als Regeln abgebildet,
jede bewusst so eng gefasst, dass sie nur ihren Ursprungsort trifft. */
.muted { color: var(--muted); } /* war style="color:var(--muted)" */
h3 .mono { font-size: .6875rem; } /* Badge im Referenz-Titel, war inline */
/* Label-zu-Überschrift-Abstand im .slab, war style="margin-top:.75rem".
Wirkt ausschließlich auf der Startseite (live nachgemessen: 12px).
🔴 Korrektur einer falschen Annahme in #69: Dort stand, die Regel greife
zusätzlich auf entwurf-staffos/, weil dessen HTML ebenfalls "styles-v1.css"
nennt. Das ist falsch — die Entwurfsseiten sind self-contained und laden
ihre EIGENE Kopie (entwurf-staffos/assets/styles-v1.css, relativer Pfad).
Es gibt drei getrennte Kopien dieser Datei; eine Änderung hier erreicht
die Entwurfsordner nie. Wer eine Regel ergänzt, muss den PFAD im
auflösen, nicht den Dateinamen greppen. */
.slab .mono + h2 { margin-top: .75rem; }
.lede { max-width: 54ch; font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); }
.skip {
position: absolute; left: -9999px;
}
.skip:focus {
left: 1rem; top: 1rem; z-index: 99; background: var(--ink); color: var(--paper);
padding: .625rem 1rem; border-radius: .5rem; text-decoration: none;
}
:where(a, button, summary):focus-visible {
outline: 2px solid var(--ink);
outline-offset: 3px;
border-radius: 2px;
}
/* ── Sektions-Trenner: Nummer + Linie. Kein Uppercase-Eyebrow. ────── */
.sec { padding-block: var(--gap); }
.sec-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1.5rem; padding-bottom: 1.25rem; margin-bottom: 3rem;
border-bottom: var(--rule-hair);
position: relative;
}
/* DIE EINE BEWEGUNG: die Linie wird gezogen, nicht eingeblendet.
Ein Element pro Sektion. Kein Text bewegt sich — alles sofort lesbar. */
.sec-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: var(--ink);
transform: scaleX(0); transform-origin: left;
transition: transform 420ms var(--ease);
}
.sec-head.drawn::after { transform: scaleX(1); }
.sec-head h2 { flex: 1 1 auto; }
.sec-idx { flex: 0 0 auto; }
/* ── Header ───────────────────────────────────────────────────────── */
.top {
position: sticky; top: 0; z-index: 20;
background: color-mix(in srgb, var(--paper) 92%, transparent);
border-bottom: var(--rule-soft);
backdrop-filter: saturate(1.2) blur(6px);
}
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.5rem; }
.top nav { display: none; gap: 1.75rem; }
.top nav a { text-decoration: none; color: var(--muted); font-size: var(--step--1); transition: color 140ms var(--ease); }
.top nav a:hover { color: var(--ink); }
@media (min-width: 62rem) { .top nav { display: flex; } }
/* Logo: Tobias' echte Bildmarke als (light/dark) + Wortmarke in Geist.
Die Quelldatei setzt "tk comp" als in "Helvetica Neue" — ein Systemfont,
der auf Linux/Android auf DejaVu Sans zurückfällt (real nachgemessen), das Logo
renderte je Gerät anders breit. Das Icon ist geräteunabhängig und kommt als
Datei; die Wortmarke setzt die Seite in ihrer selbst gehosteten Schrift. */
.wordmark { display: inline-flex; align-items: center; gap: .625rem; text-decoration: none; color: var(--ink); }
.wordmark .mark { height: 22px; width: auto; flex: 0 0 auto; }
.wordmark-text { font-weight: 600; letter-spacing: -.02em; font-size: 1.0625rem; }
.wordmark-text span { color: var(--muted); font-weight: 400; }
/* Der Dot-Trenner aus der Logodatei (dort r=4.5 bei font-size 54 → Durchmesser
9/54 = .167em). Er wiederholt die kleinen Knoten des Icons — Teil des Zeichens,
nicht Interpunktion. Deshalb --muted wie die Knoten, nicht --ink.
Als leeres statt "·": ein Mittelpunkt-Glyph würde von Screenreadern
vorgelesen ("tk Punkt comp") und säße in Geist auf anderer Höhe. */
.wordmark-text .wm-dot {
display: inline-block;
width: .167em; height: .167em;
margin: 0 .30em;
border-radius: 50%;
background: var(--muted);
vertical-align: .12em; /* optisch zur x-Höhe, nicht zur Grundlinie */
}
/* ── Hero: asymmetrisch, Text links, Leerraum rechts ist Absicht ──── */
.hero { padding-block: clamp(4rem, 12vh, 8rem) var(--gap); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 7fr 5fr; align-items: end; } }
.hero .mono { margin-bottom: 1.5rem; display: block; }
.hero h1 { margin-bottom: 1.75rem; }
.hero .lede { margin-bottom: 2.5rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; }
.btn {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 48px; padding: .8125rem 1.375rem;
border-radius: .75rem; /* --radius der Live-CI, unverändert */
font-size: .9375rem; font-weight: 500; text-decoration: none;
border: 1px solid transparent;
transition: background-color 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease);
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--ink-soft); }
.btn-line { border-color: var(--line-strong); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
/* Hero-Nebenspalte: das Datenblatt. Dichte = Beweis, dass jemand etwas weiß. */
.spec { border-top: var(--rule-ink); }
.spec-row {
display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
padding: .6875rem 0; border-bottom: var(--rule-soft);
font-size: var(--step--1);
}
.spec-row dt { font-family: "Geist Mono", ui-monospace, monospace; color: var(--muted); letter-spacing: .01em; }
.spec-row dd { margin: 0; font-variant-numeric: tabular-nums; }
/* ── Definitionsliste statt Karten ────────────────────────────────── */
.facts { border-top: var(--rule-ink); margin: 0; }
.fact { padding: 1.75rem 0; border-bottom: var(--rule-soft); }
.fact h3 { margin-bottom: .625rem; }
.fact p { color: var(--muted); max-width: 60ch; }
.two-col { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 62rem) { .two-col { grid-template-columns: 5fr 7fr; } }
/* ── Referenzen: EINE pro Reihe, volle Breite. Kein 3er-Kartengrid. ─ */
.ref {
display: grid; grid-template-columns: 1fr; gap: 2rem;
padding-block: 2.75rem; border-bottom: var(--rule-soft);
text-decoration: none;
transition: border-color 140ms var(--ease);
}
.ref:first-of-type { border-top: var(--rule-soft); }
.ref:hover { border-bottom-color: var(--ink); } /* Linie wird schärfer. Nichts hebt ab. */
@media (min-width: 62rem) { .ref { grid-template-columns: 7fr 5fr; gap: 4rem; align-items: start; } }
.ref h3 { margin-bottom: .75rem; }
.ref-claim { color: var(--ink); font-weight: 500; margin-bottom: .75rem; }
.ref p { color: var(--muted); }
.ref-meta { margin-top: 1.25rem; }
.ref-go {
display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem;
font-size: var(--step--1); font-weight: 500; color: var(--ink);
}
.ref-go svg { transition: transform 160ms var(--ease); }
.ref:hover .ref-go svg { transform: translate(2px, -2px); }
/* Faktenspalte der Referenz — dicht, in Mono. Belegbare Zustände, keine Marketing-Zahlen. */
.ref-spec { border-top: var(--rule-ink); }
.ref-spec div {
display: grid; grid-template-columns: 8.5rem 1fr; gap: .875rem;
padding: .5625rem 0; border-bottom: var(--rule-soft);
font-size: var(--step--1);
}
.ref-spec dt { font-family: "Geist Mono", ui-monospace, monospace; color: var(--muted); }
.ref-spec dd { margin: 0; font-variant-numeric: tabular-nums; }
/* ── Prozess: Zeitachse, ungleich lang. "Betreiben" ist der Punkt. ── */
.track { display: grid; grid-template-columns: 1fr; gap: 0; border-top: var(--rule-ink); }
@media (min-width: 48rem) { .track { grid-template-columns: 1fr 1fr 1.6fr; } }
.step { padding: 2rem 0; border-bottom: var(--rule-soft); position: relative; }
@media (min-width: 48rem) {
.step { padding: 2.25rem 2rem 2.25rem 0; border-bottom: none; border-right: var(--rule-soft); }
.step:last-child { border-right: none; padding-right: 0; }
}
/* Die Knoten der Zeitachse sind die Knoten des Logos — dieselbe Grammatik.
„Verstehen" und „Bauen" sind Außenknoten (solid, wie links/rechts im T-Node).
„Betreiben" ist der ZENTRUMS-Knoten: größer, mit ausgestanztem Innen-Dot
(Ratio 0.517, das humect-Kreissystem). Die Form sagt die These der Sektion,
bevor der Text sie sagt: Betreiben ist der Unterschied zur Agentur.
Kein Ornament — der Marker sitzt dort, wo Struktur beginnt. */
.step::before {
content: ""; position: absolute; top: -4px; left: 0;
width: 7px; height: 7px; border-radius: 50%; background: var(--ink);
}
.step:last-child::before {
top: -8px; width: 16px; height: 16px;
/* 🔴 KEIN `border` für den Ring: Chromium floort `border-width` auf ganze
CSS-Pixel — aus 3.9px werden 3px, das Loch/Box-Ratio kippt auf 0.6250.
Real nachgemessen (Pixel-Scan @ dpr 8, DPR-unabhängig). Dann wäre es ein
beliebiger Ring, kein Zitat des Logos.
`radial-gradient` rendert subpixelgenau: Loch = 2×4.135px = 8.27px,
Ratio 8.27/16 = 0.5169 ≈ 0.517 — das humect-Kreissystem des T-Node.
Der Ink läuft bis in die Box-Ecken; border-radius beschneidet ihn auf
den Außenkreis r=8px. Hier explizit, nicht nur von .step::before geerbt. */
border-radius: 50%;
background: radial-gradient(circle closest-side,
transparent 0 4.135px, var(--ink) 4.135px 100%);
}
.step .mono { display: block; margin-bottom: .75rem; }
.step h3 { font-size: var(--step-1); margin-bottom: .625rem; }
.step p { color: var(--muted); font-size: var(--step--1); line-height: 1.7; }
/* ── Leistungs-Tabelle statt Glaskarten ───────────────────────────── */
.slab { background: var(--ink); color: var(--paper); border-radius: 1rem; padding: clamp(2rem, 5vw, 4rem); }
@media (prefers-color-scheme: dark) { .slab { background: var(--paper-tint); color: var(--ink); border: var(--rule-hair); } }
.slab h2 { margin-bottom: 1.25rem; }
.slab .lede { color: inherit; opacity: .78; margin-bottom: 3rem; }
.slab .mono { color: inherit; opacity: .6; }
.svc { width: 100%; border-collapse: collapse; text-align: left; }
.svc caption { position: absolute; left: -9999px; }
.svc th, .svc td { padding: 1.0625rem .75rem 1.0625rem 0; vertical-align: top; font-weight: 400; }
.svc thead th {
font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--step--1);
/* .55 riss im Dark-Mode die AA-Schwelle (4,47:1). .6 → 5,08:1. */
opacity: .6; letter-spacing: .04em; padding-bottom: .75rem;
}
.svc tbody tr { border-top: 1px solid currentColor; }
.svc tbody tr th { font-weight: 500; white-space: nowrap; padding-right: 2rem; }
.svc td:last-child { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--step--1); opacity: .7; }
.svc tbody tr:last-child { border-bottom: 1px solid currentColor; }
@media (max-width: 47.99rem) {
.svc, .svc tbody, .svc tr, .svc td, .svc th { display: block; }
.svc thead { position: absolute; left: -9999px; }
.svc tbody tr { padding-block: 1.25rem; }
.svc th, .svc td { padding: .1875rem 0; }
}
.slab .cta-row { margin-top: 3rem; }
.slab .btn-solid { background: var(--paper); color: var(--ink); }
.slab .btn-solid:hover { background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }
@media (prefers-color-scheme: dark) {
.slab .btn-solid { background: var(--ink); color: var(--paper); }
}
/* ── Kontakt ──────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 62rem) { .contact { grid-template-columns: 5fr 7fr; } }
.contact-block { border-top: var(--rule-ink); }
.contact-block div { padding: 1.125rem 0; border-bottom: var(--rule-soft); }
.contact-block dt { font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--step--1); color: var(--muted); margin-bottom: .3125rem; }
.contact-block dd { margin: 0; }
.contact-block a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.contact-block a:hover { border-bottom-color: var(--ink); }
/* ── Footer ───────────────────────────────────────────────────────── */
.foot { border-top: var(--rule-hair); padding-block: 2.5rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: center; }
.foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.foot a { color: var(--muted); text-decoration: none; font-size: var(--step--1); }
.foot a:hover { color: var(--ink); }
/* ── Entwurfs-Banner (nur Vorschau, nicht Teil des Designs) ───────── */
.draft-flag {
background: #7c2d12; color: #fff; text-align: center;
font-family: "Geist Mono", ui-monospace, monospace; font-size: .75rem;
padding: .5rem 1rem; letter-spacing: .02em;
}
.draft-flag a { color: #fff; }
/* ── Touch-Targets (WCAG 2.5.5) — aus der Live-Seite übernommen ───── */
@media (hover: none) and (pointer: coarse) {
.btn { min-height: 48px; }
.top nav a, .foot a { min-height: 44px; display: inline-flex; align-items: center; }
}
/* ═══════════════════════════════════════════════════════════════════
MOTION — "technischer Spielkram", der eine Bedeutung trägt.
Leitidee: die Seite BAUT SICH AUF wie ein System, das hochfährt —
Zeilen erscheinen wie Terminal-Output, echte Ganzzahl-Mengen werden
ermittelt statt behauptet, eine Scan-Linie prüft. Kein fade-up-Gewitter,
kein Deko-Bounce. Nur transform/opacity (GPU), Endzustand = Ruhelage (kein CLS).
Alles läuft ADDITIV: ohne JS steht der Inhalt vollständig da.
═══════════════════════════════════════════════════════════════════ */
/* Reveal-Grundzustand: nur wenn JS die Seite als motion-fähig markiert
(html.motion) UND das Element noch nicht "in" ist. So ist bei No-JS /
Reduced-Motion NIE etwas versteckt (kein Flash-of-hidden-content). */
.motion [data-reveal] {
opacity: 0;
transform: translateY(10px);
/* 380ms statt 520: ein Präzisionswerkzeug rastet ein, es schwebt nicht.
520ms ist Marketing-Tempo (Gwen-Feinschliff). */
transition:
opacity 380ms var(--ease),
transform 380ms var(--ease);
will-change: opacity, transform;
}
.motion [data-reveal].in {
opacity: 1;
transform: none;
}
.motion [data-reveal].in { will-change: auto; }
/* Tabellenzeilen sind display:table-row — Chromium/WebKit rendern `transform`
darauf NICHT zuverlässig (real bekannter Fallstrick). Für sie nur opacity
faden: der Aufbau-Effekt bleibt (Zeile erscheint), ohne halbe Bewegung. */
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal="fade"].in { transform: none; }
/* Stagger: versetztes Erscheinen wie Terminal-Zeilen, die durchlaufen.
30–80ms-Fenster (motion-feinschliff) → 45ms-Schritte, gedeckelt, passend
zur schnelleren 380ms-Reveal (späte Zeilen bleiben zackig). Als custom
property, vom JS je Element gesetzt (--i = Index innerhalb der Gruppe). */
.motion [data-reveal] { transition-delay: calc(var(--i, 0) * 45ms); }
/* Kennzahl-Zählwerk: der Wert wird "ermittelt" — NUR auf echten Ganzzahl-
Mengen (2 Produkte live, 2 Marken produktiv), nie auf gerundeten/statischen
Angaben (das inszenierte eine Präzisionsmessung, die es nicht gibt). Das JS
zählt hoch; ein Hauch Mono-Glimmen (Farbe auf --ink) signalisiert "aktiv".
Rein visuell, kein Layout. */
.motion .counting { color: var(--ink); }
/* Datenblatt-Hover: die Struktur wird betont, nicht angehoben.
Die untere Hairline der Zeile schärft sich auf --ink (wie .ref:hover),
der Mono-Wert rückt einen Hauch heran. Nur auf Fein-Zeigern. */
@media (hover: hover) and (pointer: fine) {
.spec-row, .ref-spec div, .contact-block div {
transition: border-color 160ms var(--ease);
}
.spec-row dd, .ref-spec dd {
transition: transform 160ms var(--ease), color 160ms var(--ease);
}
.spec-row:hover, .ref-spec div:hover, .contact-block div:hover {
border-bottom-color: var(--ink);
}
.spec-row:hover dd, .ref-spec div:hover dd {
transform: translateX(2px);
color: var(--ink);
}
/* Tabellenzeilen der Leistungs-Tabelle: Zeile hebt sich strukturell */
.svc tbody tr { transition: background-color 160ms var(--ease); }
.svc tbody tr:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
}
/* Scan-Linie über der dunklen Leistungstafel: fährt EINMAL durch, wenn
die Tafel ins Bild kommt. Bedeutung: das System prüft/scannt sich —
präzises Werkzeug, kein Ornament. Sehr dezent, nur ein Durchlauf.
Pseudo-Element über transform (translateY) + opacity → GPU, kein CLS. */
.slab { position: relative; overflow: hidden; }
.slab::after {
content: "";
position: absolute; left: 0; right: 0; top: 0; height: 2px;
/* 30% statt 55% Deckkraft: ein dezenter Hinweis, keine reisende Leuchtlinie
(die kippte ins Sci-Fi-Klischee = Slop). Gedämpft bleibt es Werkzeug. */
background: linear-gradient(90deg,
transparent,
color-mix(in srgb, currentColor 30%, transparent) 20%,
color-mix(in srgb, currentColor 30%, transparent) 80%,
transparent);
opacity: 0;
transform: translateY(0);
pointer-events: none;
}
/* 700ms statt 1100: der Scan prüft schnell, er zelebriert nicht. */
.motion .slab.scanned::after {
animation: slab-scan 700ms var(--ease) forwards;
}
@keyframes slab-scan {
0% { opacity: 0; transform: translateY(0); }
12% { opacity: 1; }
88% { opacity: 1; }
100% { opacity: 0; transform: translateY(var(--scan-h, 320px)); }
}
/* ═══════════════════════════════════════════════════════════════════
GAMIFIZIERUNG — "die Seite reagiert wie ein Werkzeug", nicht wie ein
Dokument. Drei reaktive Elemente, jedes trägt eine Bedeutung. Streng in
derselben Handschrift: Datenblatt-Ästhetik, T-Node-Grammatik, nur
transform/opacity (GPU), Endzustand = Ruhelage (kein CLS). Additiv:
ohne JS / Reduced-Motion ist NICHTS versteckt, es fehlt nur die Reaktion.
═══════════════════════════════════════════════════════════════════ */
/* ── 1) Scroll-Fortschritt: die "Leitung", die sich verbindet ───────────
Eine 2px-Linie ganz oben (über dem sticky Header). Sie füllt sich mit dem
Lesefortschritt — als Signal, das durch das System läuft, nicht als bunter
Ladebalken. Farbe = --ink (Werkzeug, kein Neon). position:fixed → kein
Fluss/CLS. Nur bei html.motion sichtbar (sonst height:0). scaleX = GPU. */
.scan-rail {
position: fixed; top: 0; left: 0; right: 0; height: 0;
z-index: 30; /* über dem sticky Header (z-index:20) */
pointer-events: none;
overflow: hidden;
}
/* 1.5px statt 2px: rückt endgültig von „Balken" zu „Leitung" (Gwen). */
.motion .scan-rail { height: 1.5px; }
.scan-rail-fill {
display: block; height: 100%; width: 100%;
/* Ein leiser Verlauf statt Volltonbalken: die Leitung wird zum Kopf hin
minimal dichter — sie "trägt" ein Signal, sie leuchtet nicht. 45→85 %
statt 55→100 %: reizt am Kopf nicht voll aus, bleibt leiser (Gwen). */
background: linear-gradient(90deg,
color-mix(in srgb, var(--ink) 45%, transparent),
color-mix(in srgb, var(--ink) 85%, transparent));
transform: scaleX(0); transform-origin: left;
/* Kein transition auf transform: der Wert wird pro rAF-Frame direkt gesetzt
(flüssig 1:1 am Scroll). Ein transition würde nachziehen/gummiband-artig
hinterherrutschen — beim Fortschritt unerwünscht. */
will-change: transform;
}
/* ── 2) Sektions-"geprüft"-Zustand: das System hakt Schritte ab ─────────
Wenn eine Sektion vollständig durchgescrollt ist, wechselt ihr Index
(01/02/03/04) in einen abgeschlossenen Zustand: der Index tritt zurück
(--muted), und ein feiner Haken zeichnet sich daneben (stroke-dashoffset).
Bedeutung = Werkzeug-Charakter, kein Achievement-Badge, kein Popup.
Der Haken wird vom JS als