/* =========================================================================
Deutsche KI Factory — Web-Schicht v2 (27.07.2026)
v1 hatte EINEN Akzent (Gold) und keinen Glow. Der Kunde hat das abgelehnt:
die Vorlage ist Schwarz-Gold mit Glow und einem gruen-tuerkisen CTA. v2
fuehrt diesen Look aus — aber als System, nicht als Unfall.
── DAS FARBGESETZT ──────────────────────────────────────────────────────
GOLD beschriftet und begrenzt (Tinte · Linie · Marke · Keyline)
SIGNAL fuellt, und fuellt ausschliesslich die eine Aktion
Sobald Gold eine Flaeche wird oder Signal etwas beschriftet, ist es kaputt.
Warum ueberhaupt zwei Akzente: Gold machte in v1 im Hero NEUN Jobs
(Markenquadrat, Wortmarke, Eyebrow-Linie, Eyebrow-Text, Displaywort, CTA,
Chat-Avatar, Statuszeile, Bubble-Kanten). Der zweite Akzent ist nicht die
Verwaesserung des einen — er ist dessen Entlastung.
⚠️ WARUM NICHT WHATSAPP-GRUEN #25D366 als Flaeche: gemessen liegt es zu Gold
in GRAUSTUFEN bei 1,04:1 — derselbe Knopf, sobald Farbe wegfaellt. #2AE88C
kommt auf 1,28:1. Das ist der Grund fuer den Ton, nicht Geschmack.
WhatsApp-Gruen lebt nur noch im Glyph, wo es die Marke Meta bezeichnet.
── GLOW ─────────────────────────────────────────────────────────────────
EIN Emitter pro Viewport. Schatten = Blur 2x Y. Glow = Blur 3x Y bei <=45%.
Alles andere traegt nur die licht-fangende Oberkante.
========================================================================= */
/* ── SCHRIFT: Archivo, selbst gehostet (27.07.2026) ────────────────────────
Vorher lief die Seite auf einem System-Grotesk-Fallback — auf jedem Rechner
eine andere Schrift, also auf keinem die Marke. Archivo steht unter der SIL
OFL (Lizenztext liegt als OFL.txt daneben, die Lizenz verlangt das).
NUR ZWEI SCHNITTE, 400 und 600 — mehr benutzt die Seite nachweislich nicht
(21 Vorkommen von font-weight, alle 600). Aus dem Variable-Master
instanziiert, dann auf Latin + die tatsaechlich vorkommenden Sonderzeichen
subgesetzt: zusammen 21 KB. Ein ungesubsettes Paar waere rund das Dreissig-
fache — bei einer Seite, deren erster Eindruck der Hero ist, ist das kein
Detail.
⛔ KEIN Google-Fonts-Einbinden. Abmahn-Klassiker, und die CSP (`font-src
'self'`) laesst es ohnehin nicht zu. Die Dateien liegen lokal.
⛔ NICHT Poppins — das ist Regains und hsen.ais Schrift. Markentrennung.
`local()` steht bewusst nicht im src: eine gleichnamige Schrift auf dem
Rechner des Besuchers waere eine andere Version als die hier gepruefte. */
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/archivo-400.woff2") format("woff2");
}
@font-face {
font-family: "Archivo";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/archivo-600.woff2") format("woff2");
}
:root {
/* --- Grundtoene: Marken-Hue 38°, kein Neutralgrau, kein reines #000 ---- */
--ground: #0E0D0B;
--section: #1F1D19; /* Zaesur gegen ground: 1,15:1 (v1 war 1,09 — unsichtbar) */
--raised: #2B2823;
--hairline: rgba(255, 255, 255, .10);
--hairline-soft: rgba(255, 255, 255, .06);
/* --- Tinten (gemessen gegen --ground) --------------------------------- */
--ink: #F4F1EB; /* 17,23:1 */
--ink-2: #C6BFB3; /* 10,64:1 */
--ink-3: #9C9281; /* 6,33:1 */
/* --- Akzent 1: GOLD = Marke. Tinte und Linie, nie Flaeche. ------------ */
--gold: #E8A938; /* 9,40:1 auf --ground */
--gold-line: rgba(232, 169, 56, .34);
--gold-dim: rgba(232, 169, 56, .16);
--gold-grad: linear-gradient(172deg, #F6C462 0%, #E8A938 46%, #C98A2A 100%);
/* --- Akzent 2: SIGNAL = Aktion. Flaeche, und nur das. ----------------- */
--signal: #2AE88C; /* 12,04:1 auf --ground · zu Gold in Graustufen 1,28:1 */
--signal-hi: #45EDA0; /* Hover */
--on-accent: #161616; /* 11,22:1 auf Signal · 8,76:1 auf Gold — EINE Tinte fuer beide */
--whatsapp: #25D366; /* NUR im Glyph. Nie Flaeche, nie Text. */
/* --- Schrift ---------------------------------------------------------- */
--font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
"Helvetica Neue", Arial, sans-serif;
--t-xs: .875rem; --t-sm: 1rem; --t-base: 1.125rem;
--t-md: 1.25rem; --t-lg: 1.5rem; --t-xl: 1.875rem;
--t-2xl: 2.25rem; --t-3xl: 3rem; --t-4xl: 4.5rem;
--section-y: clamp(5rem, 10vw, 10rem);
--wrap: 72rem;
--wrap-text: 58ch; /* 40–60 Zeichen ist die lesbare Spanne; 65 war schon drueber */
--radius: 24px; /* Vorlagen-Charakter zurueck. Nicht 28 (weich), nicht 16 (nuechtern). */
--radius-sm: 12px;
--header-h: 64px;
/* --- Bewegung ---------------------------------------------------------
Die eingebauten CSS-Kurven sind zu schwach; `ease` und `ease-out` sehen
nach Default aus, weil sie einer sind. Diese zwei tragen die ganze Seite:
--ease-out fuer alles, was AUFTAUCHT (startet schnell, faengt weich ab —
der Nutzer sieht sofort Bewegung), --ease-io fuer alles, was sich auf dem
Bildschirm BEWEGT. `ease-in` kommt nirgends vor: es faengt langsam an,
also genau in dem Moment, in dem hingesehen wird. */
--ease-out: cubic-bezier(.23, 1, .32, 1);
--ease-io: cubic-bezier(.77, 0, .175, 1);
}
/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font-family: var(--font);
font-size: var(--t-base);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* die Ambient-Glows duerfen keine Scrollleiste erzeugen */
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
/* ── DIE KORNSCHICHT ───────────────────────────────────────────────────────
Ein feines Rauschen ueber der ganzen Seite. Der Grund ist nicht Nostalgie:
diese Seite besteht zu grossen Teilen aus GROSSEN DUNKLEN FLAECHEN, und eine
glatte dunkle Flaeche sieht auf einem guten Display nach leerem Div aus, auf
einem schlechten nach Banding. Korn gibt ihr eine Oberflaeche — dieselbe
Rolle, die Papier im Druck spielt.
3,5 % ist die Grenze, an der man es nicht mehr als Effekt sieht, sondern nur
noch als Materialitaet. Bei 8 % wird daraus ein Filter.
⚠️ Das Rauschen ist ein data:-SVG im Stylesheet, kein Bild vom Server —
`img-src 'self' data:` deckt das ab, ein externes Rauschbild waere ein
zusaetzlicher Request fuer 4 KB Textur. Statisch, nicht animiert: bewegtes
Korn ist die zuverlaessigste Art, eine Seite auf einem alten Notebook
ruckeln zu lassen. */
body::after {
content: ""; position: fixed; inset: 0; z-index: 60;
pointer-events: none; opacity: .035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
background-size: 160px 160px;
}
h1, h2, h3 {
margin: 0; font-weight: 600; line-height: 1.08;
letter-spacing: -.022em; text-wrap: balance;
}
p { margin: 0; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 2px; }
/* ⚠️ max(), nicht einfach 1.5rem. Im QUERFORMAT auf einem Notch-Geraet ragt die
Kerbe in die Seitenraender; ohne env(safe-area-inset-*) liegt dort Text unter
der Hardware. Hochkant ist der Wert 0, die Regel kostet also nichts.
Gegenstueck ist viewport-fit=cover im — beide oder keines. */
.wrap {
width: 100%; max-width: var(--wrap); margin-inline: auto;
padding-inline: max(1.5rem, env(safe-area-inset-left))
max(1.5rem, env(safe-area-inset-right));
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--signal); color: var(--on-accent);
padding: .75rem 1.25rem; font-weight: 600;
}
.skip-link:focus { left: 0; }
/* =============================================================== Typografie */
/* Die Pill aus der Vorlage: Gold-Keyline, gesperrte Caps, Punkt vorn. */
.eyebrow {
display: inline-flex; align-items: center; gap: .55rem;
padding: .45rem 1rem .45rem .85rem;
border: 1px solid var(--gold-line); border-radius: 999px;
background: var(--gold-dim);
font-size: var(--t-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
color: var(--gold);
margin: 0 0 1.5rem;
}
.eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--gold); flex: none;
}
/* Drei Stufen im Verhaeltnis 3:2:1 — 54 / 36 / 20 px.
Vorher stand H2 auf 44 px: das sind 1,23x zu H1, und zwei Groessen, die so
dicht beieinander liegen, konkurrieren um Rang 1, statt eine Ordnung zu
bilden. Es gibt genau EINE H1-Zeile auf der Seite; jede H2 ist eine
Sektions-Ueberschrift, kein zweiter Hero. */
h1, .h1 { font-size: clamp(2.125rem, 5.6vw, 3.375rem); max-width: 22ch; }
h2, .h2 { font-size: clamp(1.625rem, 3.6vw, 2.25rem); max-width: 24ch; }
h3, .h3 { font-size: var(--t-md); letter-spacing: -.012em; }
/* Der Gold-Verlauf der Vorlage — aber flach.
Hue-Spanne nur 4 Punkte, Helligkeit 17, hell oben. Kein Bevel, kein
Text-Shadow, keine Kontur: das waere 2013. Nur ab 40px, nur ein Teilwort. */
.gold-word {
background: var(--gold-grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--gold);
}
@supports not (-webkit-background-clip: text) { .gold-word { color: var(--gold); } }
.lead { font-size: clamp(var(--t-base), 2.2vw, var(--t-md)); color: var(--ink-2); max-width: var(--wrap-text); }
.body { color: var(--ink-2); max-width: var(--wrap-text); }
.muted { color: var(--ink-3); font-size: var(--t-sm); }
/* ── DER SEKTIONSKOPF ─────────────────────────────────────────────────────
Die Frage, die diese drei Zeilen beantworten muessen, ist nicht „ist das
huebsch", sondern „wo bin ich gerade und was will man mir sagen" — und zwar
BEIM SCROLLEN, ohne Lesen. Deshalb steht in JEDER Sektion derselbe Dreisatz:
KICKER = das Kapitel-Etikett (zwei Woerter, Substantiv). Ortsangabe.
H2 = eine AUSSAGE, der man widersprechen koennte. Kein Stimmungsbild.
DECK = eine Zeile, die die Aussage belegt oder konkretisiert.
Der Kicker steht in ALLEN Sektionen oder in keiner: drei von sechs ist
schlimmer als null, weil der Leser dann nicht weiss, ob das Fehlen etwas
bedeutet. Die goldene Pille (.eyebrow) bleibt dem Hero vorbehalten — sechs
davon untereinander waeren sechs Emitter auf einer Seite, die einen hat. */
.kicker {
display: flex; align-items: center; gap: .625rem;
margin: 0 0 .75rem;
font-size: var(--t-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
color: var(--gold);
}
.kicker::before {
content: ""; width: 24px; height: 1px; flex: none;
background: var(--gold);
}
.section-head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.section-head .lead {
margin-top: 1rem;
font-size: var(--t-md); /* fest zwischen H2 (36) und Fliesstext (18) */
max-width: 54ch;
}
/* GENAU EIN Sektionskopf darf groesser sein. Wenn alle sieben H2 dieselbe
Groesse haben, gewinnt im Blinzeltest keine — die Seite hat dann eine
Ordnung, aber keine Spitze. Diese eine bekommt sie, weil sie das Versprechen
MIT DER ZAHL traegt („In 12 Stunden"). Wer eine zweite Sektion so auszeichnet,
hat wieder null. */
.section-head-gross h2 { font-size: clamp(1.875rem, 4.4vw, 3rem); max-width: 18ch; }
/* ============================================================== Sektionen
⚠️ ZWEI BENANNTE FLAECHEN, MEHR NICHT — und die Zaesur ist eine LINIE.
Der Wechsel #0E0D0B ↔ #1F1D19 traegt 1,15:1. Das ist kein Kontrast, das ist
Rundungsrauschen: sieben Sektionen lasen sich als ein einziger Scroll. Statt
die Werte zu spreizen (dann wird aus dem warmen Schwarz ein Grau-Sandwich)
bekommt jede Bandgrenze eine 1px-Haarlinie. Eine Kante trennt zuverlaessiger
als ein Helligkeitsunterschied, den man nur im Direktvergleich sieht. */
section { padding-block: var(--section-y); position: relative; }
/* Der Header klebt oben. Ohne diese Zeile springt jeder Anker so, dass die
Ueberschrift genau darunter verschwindet. */
section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
.band { background: var(--section); border-top: 1px solid var(--hairline-soft); }
.band-ground { background: var(--ground); border-top: 1px solid var(--hairline-soft); }
.hero { border-top: 0; }
/* ⚠️ HIER STAND EIN CANVAS-GRID: zwei durchgehende Vertikale auf
Containerbreite, ueber die volle Hoehe jeder Sektion. Raus auf
User-Entscheid (27.07.2026) — nicht wieder einbauen.
Die Zaesur zwischen den Baendern traegt allein die 1px-Haarlinie oben.
Wenn die Seite wieder zu einer einzigen Textur zerlaeuft, ist die Antwort
NICHT die Vertikale, sondern ein Wechsel der Layout-Familie (Register,
Zeitstrahl, Karte, Split) — so wie sie jetzt schon zwischen den Sektionen
wechselt. */
/* Ambient-Glow der Vorlage — jetzt EIN Radial statt zwei.
Zwei Lichtquellen in einer Sektion heben sich gegenseitig auf: wenn es von
oben rechts UND von unten links leuchtet, kommt das Licht aus dem Nichts und
die Flaeche wirkt nur diffus aufgehellt. Eine Quelle gibt der Sektion eine
Richtung. 10 % ist die Obergrenze — 20 % waere Nebel, darunter sieht man es
nicht. */
.glow-bg::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background: radial-gradient(58% 46% at 78% 6%, rgba(232,169,56,.10), transparent 68%);
}
.glow-bg > * { position: relative; z-index: 1; }
/* ================================================================ Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
min-height: 54px; padding: 0 1.75rem;
border: 0; border-radius: 999px; /* Pill, wie in der Vorlage */
font: inherit; font-size: var(--t-base); font-weight: 600;
letter-spacing: -.008em; text-decoration: none; cursor: pointer;
transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
/* Der EINE Primaer-CTA. Signal ist Flaeche, #161616 die einzige Tinte darauf.
Nie Weiss auf Signal — das traegt 1,61:1. */
.btn-primary {
background: linear-gradient(180deg, var(--signal-hi), #1FC97A);
color: var(--on-accent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28),
0 0 0 1px rgba(42, 232, 140, .42),
0 8px 24px -8px rgba(42, 232, 140, .42),
0 18px 60px -20px rgba(42, 232, 140, .26);
}
.btn-primary:hover { transform: translateY(-2px); }
/* Sekundaer ist bewusst KEIN zweiter Button — sonst stehen im Blinzeltest
zwei CTAs nebeneinander und keiner gewinnt. */
.btn-ghost {
background: transparent; color: var(--ink);
border: 1px solid var(--hairline);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.btn-ghost:hover { border-color: var(--gold-line); transform: translateY(-2px); }
/* Header-CTA muss KLEINER sein als der Hero-CTA, sonst konkurrieren sie. */
.btn-sm { min-height: 38px; padding: 0 1.125rem; font-size: var(--t-xs); }
/* ⚠️ Beide standen auf 14 px in der schwaechsten Tinte (--ink-3). Der Kaeufer
ist 45–60. Der sekundaere Weg ins Formular und der Satz, der die Angst vor
dem Anruf nimmt, sind die zwei Stellen, an denen man NICHT sparen darf. */
.link-action {
/* inline-block, sonst greift der :active-scale weiter unten nicht —
transform gilt auf inline-Boxen nicht. */
display: inline-block;
color: var(--ink-2); font-size: var(--t-base); text-underline-offset: 4px;
transition: color .16s ease, transform .1s var(--ease-out);
}
.link-action:hover { color: var(--ink); }
.btn .wa { width: 20px; height: 20px; flex: none; }
.btn .wa path { fill: var(--whatsapp); }
.btn-primary .wa path { fill: var(--on-accent); } /* auf Signal waere Gruen unsichtbar */
.cta-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
.cta-note { margin-top: 1.125rem; color: var(--ink-2); font-size: var(--t-sm); max-width: 48ch; }
/* ================================================================= Header */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(14, 13, 11, .84);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--hairline-soft);
}
/* ── LESEFORTSCHRITT ───────────────────────────────────────────────────────
Zwei Pixel Gold auf der Unterkante der Kopfleiste. Gold ist hier LINIE, also
im Farbgesetz; als Fläche wäre es ein Verstoß.
Zwei Wege, gleiche Optik:
1. `animation-timeline: scroll()` — reines CSS, läuft außerhalb des
Hauptthreads, kein Scroll-Listener. Das ist der Regelfall.
2. --fortschritt aus main.js (Block 8) für Browser ohne Scroll-Timelines.
Die Basisregel deckt Fall 2 ab; @supports überschreibt sie für Fall 1.
⚠️ transform-origin: left — ohne das wächst die Linie aus der Mitte nach
beiden Seiten und liest sich als Ladebalken statt als Fortschritt. */
.fortschritt {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
transform-origin: left center;
transform: scaleX(var(--fortschritt, 0));
background: linear-gradient(90deg, var(--gold-dim), var(--gold));
pointer-events: none;
}
@supports (animation-timeline: scroll()) {
.fortschritt {
animation: lesen linear;
animation-timeline: scroll();
transform: scaleX(0);
}
}
@keyframes lesen { to { transform: scaleX(1); } }
/* Bei reduzierter Bewegung bleibt die Linie stehen — sie ist eine Anzeige,
keine Animation, aber eine Anzeige, die sich beim Scrollen dauernd ändert,
ist für jemanden mit Bewegungsempfindlichkeit dasselbe Problem. */
@media (prefers-reduced-motion: reduce) {
.fortschritt { display: none; }
}
.site-header .wrap {
display: flex; align-items: center;
gap: 1rem; min-height: var(--header-h);
}
/* ── DIE NAVIGATION ───────────────────────────────────────────────────────
Sie stand hier lange gar nicht. Bei einem Kaufpreis, ueber den jemand
nachdenken muss, kehrt sich „vereinfachen" um: dieser Kaeufer WILL springen
koennen — erst zum Beispiel, dann zu den Fragen, dann zurueck zum Ablauf.
Ohne Anker muss er scrollen und verliert dabei, wo er war.
Die vier Labels sind DIESELBEN wie die Sektions-Kicker, nur ohne Artikel.
Das ist der Punkt: der Kicker im Inhalt und der Link oben sind sichtbar
dasselbe System, also liest sich der Kicker als Ortsangabe statt als Deko.
Wer einen Kicker umbenennt, benennt hier mit um. */
/* ⚠️ 44em, NICHT 56em. Die Grenze lag bei 896 px — damit war die Navigation auf
iPad Air (820) und iPad Pro 11 (834) im Hochformat ABGESCHALTET, obwohl dort
reichlich Platz ist. Ein 820-px-Tablet bekam das Telefon-Layout: kein
Sprungziel, 9.400 px Seite, nur Scrollen. Gemessen, nicht vermutet.
Ab 44em (704 px) ist Platz fuer Marke + vier Anker + CTA; die Abstaende
fahren bis 62em kleiner, damit es bei 704 px nicht klemmt. */
.site-nav { display: none; }
@media (min-width: 44em) {
.site-nav { display: flex; gap: 1.5rem; margin-left: 1.75rem; }
}
@media (min-width: 62em) {
.site-nav { gap: 2.5rem; margin-left: 2.5rem; }
}
.site-nav a {
position: relative; padding-block: .35rem;
font-size: var(--t-sm); color: var(--ink-3);
text-decoration: none; white-space: nowrap;
transition: color .16s ease;
}
.site-nav a:hover { color: var(--ink); }
/* Der aktive Zustand wird per JS gesetzt (Scroll-Spy). Faellt der aus, fehlt
nur die Markierung — die Links funktionieren als reine Anker weiter. */
.site-nav a[aria-current="true"] { color: var(--ink); }
.site-nav a[aria-current="true"]::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
height: 2px; background: var(--gold); border-radius: 2px;
}
.header-spacer { flex: 1 1 auto; }
/* Die Wortmarke im Header ist SCHRIFT, kein Bild — das Signet traegt einen
detaillierten Roboter, der bei 30 px zu einem grauen Fleck verschmilzt.
Das ganze Signet steht dafuer im Hero, im Footer und im OG-Bild. */
.brand { display: flex; align-items: center; gap: .625rem; text-decoration: none; }
.brand-mark {
width: 30px; height: 30px; flex: none;
display: grid; place-items: center;
background: var(--gold); color: var(--on-accent);
border-radius: 8px;
font-size: .8125rem; font-weight: 600;
}
.brand-word {
display: flex; gap: .4em;
font-size: .8125rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
}
.bw-1 { color: var(--ink-2); }
.bw-2 { color: var(--gold); }
@media (max-width: 25em) { .brand-word { display: none; } }
/* ⚠️ Der Header-CTA stand frueher erst ab 48em. Damit hatte die Seite auf dem
Handy — also dort, wo die meisten sie oeffnen — keine dauerhaft erreichbare
Aktion: wer im Q&A haengt, muss 4000 px scrollen, um den Knopf zu finden.
Jetzt ab 0 px, dafuer schmaler. */
.header-cta { display: inline-flex; }
@media (max-width: 30em) { .header-cta { padding-inline: .875rem; } }
/* =================================================================== Hero */
.hero { padding-block: clamp(3.5rem, 8vw, 6rem) var(--section-y); }
.hero-grid { display: grid; gap: clamp(2.75rem, 6vw, 4rem); align-items: center; }
@media (min-width: 60em) {
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}
.hero h1 { margin-bottom: 1.5rem; }
.hero .lead { margin-bottom: 2.25rem; }
/* Das gerahmte Panel aus der Vorlage — Keyline, Verlauf, Gold-Glow. Es ist der
EINE goldene Emitter der Seite; der CTA ist der gruene.
Inhalt: das Signet (User-Entscheid, siehe Kommentar im HTML).
⚠️ DIE GROESSE IST DAS GEGENGEWICHT. Das Signet ist kontraststark und
bringt eine zweite Wortmarke mit — es auf volle Panelbreite zu stellen
heisst, es gegen die H1 antreten zu lassen. 400 px im gepolsterten Panel
ist die Grenze, an der es Marke bleibt und nicht Schlagzeile wird. Nach
oben ist hier nichts frei. */
/* Die Buehne fuer das wandernde Licht. Ohne eigenen Hintergrund, ohne Rahmen —
sie existiert nur, damit .hero-leuchte einen Bezugsrahmen hat, den das Panel
nicht abschneidet. */
.hero-panel { position: relative; }
/* ── UNTER 60em: DAS PANEL STEHT OBEN ──────────────────────────────────────
⚠️ Auf dem Telefon lag das Logo unter Eyebrow, H1, Lead, CTA und Fussnote —
also weit unter dem ersten Bildschirm. Wer die Seite auf dem Handy oeffnete,
sah eine Textwand und kein einziges Bild. Deshalb tauscht `order` hier die
Reihenfolge: erst die Marke, dann die Aussage.
Das geht NUR, weil das Panel ausschliesslich ein ![]()
enthaelt. Es gibt
nichts darin, das Fokus bekommt, also faellt die Lese- und Tab-Reihenfolge
(DOM: Text zuerst) nicht auseinander mit dem, was bedienbar ist. Wer hier je
einen Knopf ins Panel setzt, muss das Umsortieren zurueckbauen.
Und es geht nur, weil das Panel dabei KLEINER wird. In Desktop-Groesse oben
auf dem Telefon haette es die H1 unter den Falz geschoben — dann waere das
Problem nur umgedreht. */
@media (max-width: 59.99em) {
.hero-grid > :first-child { order: 2; }
.hero-panel { order: 1; margin-inline: auto; }
}
/* Telefon: kompakte Marken-Karte, kein Band ueber die volle Breite.
⚠️ Und ringsherum ENGER. Das Panel oben kostet rund 260 px; ohne diese
Straffung faellt der CTA auf einem iPhone SE (667 px hoch) unter die Kante,
und dann haette der Umbau ein Problem gegen ein anderes getauscht.
Jeder Wert hier ist zurueckgedreht, nicht neu erfunden — dieselbe Ordnung,
eine Stufe kompakter. */
@media (max-width: 39.99em) {
.hero-panel { max-width: 14.5rem; }
.hero-bild { border-radius: 24px; padding: 1rem; }
.hero { padding-block: 2rem var(--section-y); }
.hero-grid { gap: 1.75rem; }
.hero .eyebrow { margin-bottom: 1.125rem; padding-block: .375rem; }
.hero h1 { margin-bottom: 1.125rem; }
.hero .lead { margin-bottom: 1.75rem; }
}
/* Tablet hochkant: mehr Platz, aber weiterhin Karte statt Band — sonst stuende
ein 400-px-Signet mittig in einem 770 px breiten Rahmen. */
@media (min-width: 40em) and (max-width: 59.99em) {
.hero-panel { max-width: 22rem; }
}
/* ── DAS WANDERNDE LICHT ───────────────────────────────────────────────────
Ein weich ausgeblasener Goldkoerper, der in 22 s einmal um das Panel laeuft.
Bewegt wird ausschliesslich `transform` — box-shadow oder background-position
zu animieren waere dieselbe Optik zum Preis eines Repaints pro Bild.
⚠️ DIE VIER WERTE SIND DIE GANZE ARBEIT AN DIESEM EFFEKT:
18 s — langsam genug, dass man der Bewegung nicht folgt, sondern nur merkt,
dass sich etwas aendert. Bei 8 s wird daraus ein Karussell.
blur(52px) — loest die Kante des Lichtkoerpers komplett auf. Darunter sieht
man einen Fleck kreisen statt Licht wandern.
opacity .55 — die Obergrenze fuer diese Marke. Der Kaeufer ist 45–60 und hat
von KI-Buden die Nase voll; ein Glow, der als EFFEKT gelesen wird,
hat auf dieser Seite schon verloren. Er soll wie Licht im Raum
wirken, nicht wie eine Animation.
inset -2% — der Lichtkoerper ragt ueber das Panel hinaus, sonst bleibt der
Schein INNEN und um den Rahmen herum passiert nichts.
Wer hier heller oder schneller dreht, verkauft eine andere Marke. */
.hero-leuchte {
position: absolute; inset: -2%;
border-radius: 50%;
pointer-events: none; z-index: 0;
background: radial-gradient(circle, rgba(232, 169, 56, .62) 0%,
rgba(232, 169, 56, .18) 44%, transparent 72%);
filter: blur(52px);
opacity: .55;
}
@media (prefers-reduced-motion: no-preference) {
.js .hero-leuchte { animation: kreisen 18s linear infinite; }
}
/* Kreisbahn aus vier Ecken — reicht voellig, weil blur(48px) jede Kante der
Bahn ohnehin auffrisst. Ein echter Kreis braeuchte offset-path und brauchte
damit einen Fallback fuer wenig Gewinn. */
@keyframes kreisen {
0% { transform: translate(-14%, -12%) scale(1); }
25% { transform: translate( 14%, -8%) scale(1.08); }
50% { transform: translate( 12%, 12%) scale(1); }
75% { transform: translate(-12%, 8%) scale(1.08); }
100% { transform: translate(-14%, -12%) scale(1); }
}
.hero-bild {
position: relative; z-index: 1;
overflow: hidden; /* fuer Sheen und Zeigerlicht */
display: grid; place-items: center;
padding: clamp(1.5rem, 3.4vw, 2.75rem);
border: 1px solid var(--gold-line);
border-radius: 32px;
background: linear-gradient(180deg, #17150F, #0B0A08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
0 0 0 1px rgba(232, 169, 56, .10),
0 30px 90px -30px rgba(232, 169, 56, .34);
}
.hero-signet {
display: block; width: min(100%, 400px); height: auto;
position: relative; z-index: 1;
}
/* Kleiner als frueher (300 px) — das Signet steht jetzt GANZ OBEN, und dort
darf es die H1 nicht unter den Falz druecken. 176 px reichen: die Wortmarke
im Signet bleibt lesbar, der Roboter erkennbar. Unter ~150 px verschmelzen
seine Linien zu einem Fleck (siehe assets/logo/README.md). */
@media (max-width: 39.99em) { .hero-signet { width: min(86%, 176px); } }
@media (min-width: 40em) and (max-width: 46em) { .hero-signet { width: min(78%, 260px); } }
/* ── DAS LICHT UNTER DEM ZEIGER ────────────────────────────────────────────
Nur mit echtem Zeiger. Auf einem Touchscreen gibt es keinen Ort, an dem der
Finger „schwebt" — dort bliebe das Licht nach jedem Tippen stehen, und das
sieht nach Fehler aus, nicht nach Effekt.
--zx/--zy setzt main.js. ⚠️ Und zwar per el.style.setProperty(), NICHT per
setAttribute("style", …): unter `style-src 'self'` blockiert der Browser das
Style-ATTRIBUT, die CSSOM-Zuweisung laeuft durch. Am echten CSP-Header
nachgemessen (27.07.2026) — die zwei Wege sind nicht dasselbe.
Der Ton ist warmes Weiss, nicht Gold: Gold auf Gold gaebe einen orangen
Fleck, warmes Weiss liest sich als LICHT auf der Flaeche. */
@media (hover: hover) and (pointer: fine) {
.hero-bild::before {
content: ""; position: absolute; inset: 0;
pointer-events: none; z-index: 2;
background: radial-gradient(circle 260px at var(--zx, 50%) var(--zy, 50%),
rgba(255, 240, 214, .11), transparent 66%);
opacity: 0;
transition: opacity .4s var(--ease-out);
}
.hero-panel[data-zeiger] .hero-bild::before { opacity: 1; }
}
/* ============================================================ Karten (§2) */
.tasks { display: grid; gap: 1.25rem; }
@media (min-width: 52em) { .tasks { grid-template-columns: repeat(3, 1fr); } }
/* Der Karten-Charakter der Vorlage zurueck: Radius, Keyline, Badge.
Heller Setzschatten UND helle Kante wuerden matschen — dunkler Schatten
nach unten, helle Kante oben, sonst nichts. */
.task {
padding: 2rem 1.75rem;
border-radius: var(--radius);
border: 1px solid rgba(232, 169, 56, .20);
background: linear-gradient(180deg, #1C1A16, #141310);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -24px #000;
}
.task-no {
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 12px;
margin-bottom: 1.25rem;
background: var(--gold-grad); color: var(--on-accent);
font-size: var(--t-sm); font-weight: 600;
}
.task h3 { margin-bottom: .75rem; }
.task p { color: var(--ink-2); font-size: var(--t-sm); }
/* ============================================================ Problem (§2)
⚠️ KEINE KARTEN. Das hier war vier gleich hohe Kaesten nebeneinander — also
vier gleich laute Stimmen, in derselben Form wie der Ablauf, die Erklaerung
und das Formular. Im Blinzeltest ergab die ganze Seite EINE Textur.
Jetzt ein Register: vier Zeilen, getrennt durch eine Haarlinie, kein Rahmen,
kein Radius. Die ZAHL traegt die Zeile — sie war vorher das kleinste Element
der Karte, obwohl sie das einzige ist, das man im Vorbeiscrollen liest. Wer
nur die linke Spalte abwaerts liest, hat das Problem verstanden.
Das ist die einzige Stelle der Seite, an der Gold GROSS wird. Es bleibt
dabei Tinte (9,40:1 auf --ground), nie Flaeche — das Farbgesetz gilt. */
.problems { display: grid; }
.prob {
display: grid; gap: .25rem 2.5rem;
padding-block: clamp(1.125rem, 2.2vw, 1.5rem);
border-top: 1px solid var(--hairline);
}
.prob:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 46em) {
.prob { grid-template-columns: 168px minmax(0, 1fr); align-items: baseline; }
.prob-zahl { grid-row: span 2; }
}
/* ⚠️ `.prob .prob-zahl`, nicht `.prob-zahl`. Direkt darunter steht
`.prob p { color: var(--ink-2) }` — und das ist (0,1,1) gegen (0,1,0).
Die Klasse haette verloren und die Zahlen waeren grau geblieben; genau so
stand es im ersten Render. */
.prob .prob-zahl {
font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 600;
line-height: 1; letter-spacing: -.03em;
color: var(--gold); font-variant-numeric: tabular-nums;
}
.prob-zahl small {
display: block; margin-top: .375rem;
font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-3);
}
.prob h3 { font-size: var(--t-md); }
.prob p { color: var(--ink-2); max-width: 58ch; }
/* Die Zahl zaehlt hoch (main.js). tabular-nums steht schon oben — ohne das
springt die Zeile bei jedem Ziffernwechsel um ein paar Pixel. */
.zaehler { display: inline-block; }
/* ======================================== Aufklaerung: der Kollege (§4)
Wer sich einen digitalen Kollegen nicht vorstellen kann, kauft ihn nicht.
Deshalb steht diese Sektion ueberhaupt auf der Seite — und deshalb war sie
in v4 mit SECHS Textkarten a 40–60 Woertern ihr eigener Feind: sechs gleich
laute Bloecke ohne ein Bild sind keine Aufklaerung, sondern eine Wand.
Jetzt DREI Karten, je mit einem Bild. Die drei gestrichenen Punkte sind
nicht verloren: „arbeitet operativ mit" zeigt die Demo oben (eine Behauptung
ueber etwas, das man zwei Sektionen hoeher SIEHT, ist reine Wiederholung),
„immer da" steht als Nebensatz in Karte 3, „ersetzt niemanden" traegt der
Abbinder unter dem Raster und die erste FAQ.
⚠️ ZU DEN BILDERN: keine Roboter, keine Hologramme, keine schwebenden
Interfaces, keine Leiterbahnen. Das ist die Standard-Bildsprache dieser
Branche und sie erklaert nichts — sie macht den Nutzen schwerer erkennbar,
nicht leichter. Was hier zu sehen ist, ist ausnahmslos die ECHTE Arbeit:
ein Schreibtisch, ein Stapel Lieferscheine, ein Buero am Abend. */
.concept { display: grid; gap: 1.25rem; }
@media (min-width: 46em) { .concept { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62em) { .concept { grid-template-columns: repeat(3, 1fr); } }
.con {
display: flex; flex-direction: column;
border-radius: var(--radius);
border: 1px solid rgba(232, 169, 56, .20);
background: linear-gradient(180deg, #1C1A16, #141310);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -24px #000;
overflow: hidden;
}
/* Das Bild sitzt buendig in der Kartenkante, nicht als gerahmtes Bildchen im
Innenraum — sonst hat die Karte zwei Rahmen und das Bild wirkt eingeklebt.
Der Verlauf nach unten laesst es in die Kartenflaeche auslaufen, damit die
Kante zwischen Foto und Text keine harte Linie quer durch die Sektion zieht. */
.con-img { position: relative; aspect-ratio: 3 / 2; flex: none; }
.con-img img { width: 100%; height: 100%; object-fit: cover; }
.con-img::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(20,19,16,0) 55%, rgba(28,26,22,.92) 100%);
}
.con-text { padding: 1.5rem; }
.con h3 { margin-bottom: .625rem; font-size: var(--t-base); }
.con p { color: var(--ink-2); font-size: var(--t-sm); }
/* Die konkreten Aufgaben sitzen IN Punkt 02 statt in einer eigenen Sektion.
Vorher waren „Er hat eine Stellenbeschreibung" (Konzept) und „Die
Stellenbeschreibung" (Aufgaben) zwei Sektionen mit demselben Namen — das
war die groesste Redundanz der Seite. */
.con-list {
list-style: none; margin: .875rem 0 0; padding: 0;
display: grid; gap: .5rem;
}
.con-list li {
position: relative; padding-left: 1.25rem;
font-size: var(--t-sm); color: var(--ink-2);
}
.con-list li::before {
content: ""; position: absolute; left: 0; top: .62em;
width: 7px; height: 1px; background: var(--gold);
}
/* Die drei Stichworte fuehren auf die Unterseiten. Bewusst LEISE ausgezeichnet:
eine gold unterstrichene Zeile mitten in der Erklaerung waere ein vierter
Weg neben CTA, Formular und Kopfleiste. Erkennbar auf den zweiten Blick
reicht — wer das Stichwort sucht, findet es. */
.con-list a {
color: var(--ink); text-decoration: none;
border-bottom: 1px solid var(--gold-dim);
transition: border-color .16s ease;
}
.con-list a:hover { border-bottom-color: var(--gold); }
/* ═══════════════════ Wie es weitergeht (§5) ══════════════════════════════
⚠️ AUCH HIER KEINE KARTEN. Vier Schritte sind eine SEQUENZ — vier gleiche
Kaesten sind eine Aufzaehlung. Die durchgehende Linie sagt „das eine folgt
auf das andere", vier Rahmen sagen „such dir was aus".
Die Linie laeuft durch die Kreismitten und blendet an beiden Enden aus. Das
spart die Rechnerei, wo genau sie enden muesste, und liest sich besser: ein
Ablauf hat keine harte Kante, er kommt aus dem Gespraech und geht in den
Betrieb weiter. */
.steps {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 2rem 2.5rem;
position: relative;
}
.steps::before {
content: ""; position: absolute; pointer-events: none;
/* mobil: senkrecht durch die Kreismitten */
left: 18px; top: 18px; bottom: 18px; width: 1px;
background: linear-gradient(180deg, transparent, var(--gold-line) 6%,
var(--gold-line) 94%, transparent);
}
@media (min-width: 62em) {
.steps { grid-template-columns: repeat(4, 1fr); }
.steps::before {
left: 0; right: 0; top: 18px; bottom: auto; width: auto; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-line) 5%,
var(--gold-line) 88%, transparent);
}
}
.step { position: relative; padding-left: 3.25rem; }
@media (min-width: 62em) { .step { padding-left: 0; } }
.step-no {
position: absolute; left: 0; top: 0;
display: grid; place-items: center;
width: 37px; height: 37px; border-radius: 50%;
border: 1px solid var(--gold-line);
/* stanzt die Linie aus — deckend, sonst laeuft sie durch den Kreis.
Der Wert folgt dem Band, auf dem der Ablauf steht (--ground). */
background: var(--ground);
color: var(--gold); font-size: var(--t-sm); font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (min-width: 62em) { .step-no { position: static; margin-bottom: 1.5rem; } }
.step h3 { margin-bottom: .5rem; font-size: var(--t-base); }
.step p { color: var(--ink-2); font-size: var(--t-sm); max-width: 34ch; }
/* Das Retainer-Angebot. Bewusst ABGESETZT und als Option gekennzeichnet —
eine monatliche Bindung, die wie ein Schritt im Ablauf aussieht, ist ein
Vertrauensbruch, den der Kaeufer spaeter genau so erinnert. */
.retainer {
margin-top: clamp(2rem, 4vw, 3rem);
padding: 1.75rem 2rem;
border-radius: var(--radius);
border: 1px dashed var(--gold-line);
background: rgba(232, 169, 56, .06);
}
.retainer-tag {
font-size: var(--t-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
color: var(--gold); margin-bottom: .875rem;
}
/* ⚠️ :where() hat Spezifitaet 0 — sonst schlaegt `.retainer p` (0,1,1) die
Utility `.muted` (0,1,0) und der abschliessende Halbsatz bleibt in der
falschen Tinte stehen. Dieselbe Falle wie bei .prob-zahl; Codex-Befund. */
.retainer :where(p) { color: var(--ink-2); font-size: var(--t-sm); max-width: 66ch; }
.retainer strong { color: var(--ink); }
/* ═══════════════════════ Die Agent-Engine (§4) ═══════════════════════════
Modelliert nach der Agent-Protokoll-Engine der Regain-Seite. Der Kern ist
NICHT, dass Nachrichten erscheinen — das kann jeder Chatbot-Screenshot.
Der Kern sind die ARBEITSSCHRITTE dazwischen ("prueft den Kalender" ->
"sieht die Auftragslage" -> ...): sie machen sichtbar, dass da jemand
arbeitet und nicht nur antwortet. Genau das kann sich der Kaeufer sonst
nicht vorstellen.
Ohne JS steht der komplette Verlauf statisch da — das Skript ersetzt einen
fertigen Zustand durch einen ablaufenden, nie umgekehrt. */
.agent {
max-width: 46rem; margin-inline: auto;
background: linear-gradient(180deg, #1A1814, #121110);
border: 1px solid rgba(232, 169, 56, .20);
border-radius: var(--radius);
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px #000;
}
.agent-bar {
display: flex; align-items: center; gap: .75rem;
padding: .875rem 1.125rem;
border-bottom: 1px solid var(--hairline-soft);
background: var(--raised);
}
.agent-avatar {
width: 38px; height: 38px; flex: none; border-radius: 50%;
background: var(--gold-grad); color: var(--on-accent);
display: grid; place-items: center; font-size: var(--t-sm); font-weight: 600;
}
.agent-id { flex: 1 1 auto; min-width: 0; }
.agent-who { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.agent-role { display: block; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.3; }
.agent-live {
display: inline-flex; align-items: center; gap: .4rem; flex: none;
font-size: var(--t-xs); font-weight: 600; color: var(--signal);
}
.agent-live i {
width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
box-shadow: 0 0 10px rgba(42, 232, 140, .8);
}
@media (prefers-reduced-motion: no-preference) {
.js .agent-live i { animation: puls 2.4s ease-in-out infinite; }
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.agent-log {
list-style: none; margin: 0; padding: 1.25rem;
display: flex; flex-direction: column; gap: .75rem;
}
.ev { max-width: 86%; }
.ev p { font-size: var(--t-sm); line-height: 1.55; }
.ev time { display: block; margin-top: .35rem; font-size: .6875rem; color: var(--ink-3); }
/* ⚠️ SPRECHRICHTUNG — haengt am Use Case, nicht am Geschmack.
Der Besucher IST der Auftraggeber: seine Nachrichten stehen rechts, wie in
jedem Messenger die eigenen. Mara antwortet links und traegt den
Gold-Akzent, weil sie die Instanz ist, um die es geht.
(In der frueheren, kundengerichteten Fassung war es genau andersherum —
dort war „wir" die Antwortende. Wer den Use Case wieder dreht, dreht auch
diese beiden Regeln.) */
.ev-me, .ev-agent { padding: .8rem 1rem; border-radius: 14px; }
.ev-me {
align-self: flex-end; background: var(--ground); color: var(--ink-2);
border-bottom-right-radius: 4px;
}
.ev-agent {
align-self: flex-start; background: var(--raised); color: var(--ink);
border-bottom-left-radius: 4px; border-left: 2px solid var(--gold);
}
/* Der Arbeitsschritt — das eigentliche Argument der Sektion. */
/* Ohne JS traegt der Chip die volle Liste und darf umbrechen; im Ablauf
steht dort nur ein Schritt, dann ist er einzeilig. Beides muss passen. */
/* Der Arbeitsschritt gehoert zu Mara — also linksbuendig wie ihre Antworten. */
.ev-work {
align-self: flex-start;
display: flex; align-items: center; gap: .625rem;
padding: .6rem .95rem;
border-radius: 18px;
border: 1px dashed var(--gold-line);
background: rgba(232, 169, 56, .07);
font-size: var(--t-xs); color: var(--gold);
line-height: 1.5;
}
.js .agent.anim .ev-work { border-radius: 999px; }
.ev-dots { align-self: center; }
.ev-dots { display: inline-flex; gap: 3px; flex: none; }
.ev-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
.js .ev-dots i { animation: hopp 1.1s ease-in-out infinite; }
.js .ev-dots i:nth-child(2) { animation-delay: .15s; }
.js .ev-dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes hopp { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
/* Der Abbinder: was am naechsten Morgen dasteht. Volle Breite, andere Form —
er gehoert nicht zum Dialog, er ist das Ergebnis. */
.ev-note {
align-self: stretch; max-width: none;
margin-top: .5rem; padding: 1rem 1.125rem;
border-top: 1px solid var(--hairline);
color: var(--ink-2);
}
.ev-note strong { color: var(--ink); }
.agent-foot {
padding: .75rem 1.125rem 1rem; border-top: 1px solid var(--hairline-soft);
font-size: var(--t-xs); color: var(--ink-3);
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
}
.sample-tag {
display: inline-flex; align-items: center; gap: .4rem;
font-size: .6875rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
}
.sample-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
/* Der Ablauf: nur wenn JS laeuft UND Bewegung erwuenscht ist. Bis dahin
(und bei prefers-reduced-motion) steht der komplette Verlauf sichtbar da. */
.js .agent.anim .ev { opacity: 0; transform: translateY(8px); }
.js .agent.anim .ev.in {
opacity: 1; transform: none;
transition: opacity .4s ease, transform .4s ease;
}
.js .agent.anim .ev-work { display: none; }
.js .agent.anim .ev-work.in { display: flex; }
/* Seit dem 27.07.2026 OHNE VERWENDUNG — die beiden Platzhalter in datenschutz.html
sind weg (einer gefuellt, einer gestrichen). Die Regel bleibt trotzdem stehen:
sie ist der sichtbare Warnstreifen fuer noch offene Angaben (z. B. der Preis in
§ „Das Gehalt"), und ungestylter Platzhaltertext faellt niemandem auf. */
.placeholder {
display: inline-block; padding: .1rem .45rem; border-radius: 4px;
background: var(--gold-dim); border: 1px dashed var(--gold-line);
color: var(--gold); font-size: .8125rem; font-weight: 600;
}
/* ========================================================== Einwaende (§6)
Der Sektionskopf steht hier NEBEN dem Inhalt und bleibt beim Scrollen
stehen. Zwei Gruende, beide handfest: die Liste endete vorher bei 832 px in
einem 1152-px-Container und liess rechts 320 px Leere ohne Absicht — und
waehrend man acht Fragen durchgeht, ist „wo bin ich" genau die Frage, die
der Kopf beantwortet. Nebenbei ist es die einzige Sektion mit dieser
Anordnung, was den Rhythmus der Seite bricht statt ihn zu wiederholen. */
.faq-split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62em) {
.faq-split { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
.faq-split .section-head {
position: sticky; top: calc(var(--header-h) + 2.5rem);
align-self: start; margin-bottom: 0;
}
}
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary {
list-style: none; cursor: pointer;
padding: 1.75rem 2.5rem 1.75rem 0; position: relative;
font-size: var(--t-md); font-weight: 600; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; position: absolute; right: .375rem; top: 50%;
width: 10px; height: 10px; margin-top: -5px;
border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 2.5rem 1.5rem 0; color: var(--ink-2); max-width: 62ch; font-size: var(--t-sm); }
/* Die Antwort faehrt aus, statt zu springen. Das ist die einzige Stelle der
Seite, an der der Besucher wirklich KLICKT — hier ist die Ruecklmeldung nicht
Zierde, sondern die Bestaetigung, dass der Klick angekommen ist.
⚠️ Steht komplett in @supports. `interpolate-size: allow-keywords` ist das,
was `height: auto` ueberhaupt erst animierbar macht; ohne die Regel springt
das auf wie eh und je — also genau so, wie es ohne diesen Block
waere. Kein Fallback noetig, weil der Ausgangszustand der Fallback IST.
Bewusst KEIN JS-Nachbau mit gemessener Hoehe: das waere ein Scroll-fester
Rechenfehler pro Zeilenumbruch, fuer 320 ms Weichzeichnung. */
@supports (interpolate-size: allow-keywords) {
:root { interpolate-size: allow-keywords; }
@media (prefers-reduced-motion: no-preference) {
.faq details::details-content {
block-size: 0; overflow: hidden;
transition: block-size .32s var(--ease-out),
content-visibility .32s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }
}
}
/* ============================================================ Formular (§7) */
.form-panel {
background: linear-gradient(180deg, #1C1A16, #141310);
border: 1px solid rgba(232, 169, 56, .20);
border-radius: var(--radius);
padding: clamp(1.75rem, 4vw, 2.5rem);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -24px #000;
}
.field { display: grid; gap: .5rem; margin-bottom: 1.125rem; }
.field label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.field input, .field textarea {
font: inherit; font-size: var(--t-sm);
background: var(--ground); color: var(--ink);
border: 1px solid var(--hairline); border-radius: var(--radius-sm);
padding: .8rem .9rem; width: 100%;
transition: border-color .16s ease;
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--signal); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-size: var(--t-sm); min-height: 1.5em; }
.form-status[data-state="error"] { color: #FF9A8B; }
.form-status[data-state="ok"] { color: var(--signal); }
/* ⚠️ DIE ZWEI NAMEN SIND DER EINZIGE FREMDBEWEIS DER SEITE.
Kein Testimonial, kein Kundenlogo, keine Referenz — das Venture ist neu, und
alles davon waere erfunden. Die ehrliche Alternative zu erfundenem Social
Proof ist Nachpruefbarkeit: wer antwortet, heisst so, und der Name steht im
Impressum. Bewusst KEINE Karte und keine Portraets: Karte waere schon wieder
der Reflex, Portraets haetten wir nicht (und die Marke ist absichtlich nicht
an Hueseyins Personenmarke gekoppelt). */
.wer-antwortet { border-top: 1px solid var(--hairline); padding-top: 1.5rem; max-width: 46ch; }
.wer-antwortet :where(p) { color: var(--ink-2); font-size: var(--t-sm); } /* s. .retainer */
.wer-antwortet strong { color: var(--ink); }
.wer-tag {
font-size: var(--t-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em;
color: var(--ink-3); margin-bottom: .625rem;
}
.split { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60em) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* ================================================================= Footer */
.site-footer {
padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
border-top: 1px solid var(--hairline);
background: var(--ground);
}
/* ═══════════════ Verweis auf Regain Automation ═══════════════════════════
Ein Querverweis, keine achte Sektion — deshalb NICHT --section-y, sondern
knappe Polsterung: der Block sitzt naeher am Footer als am Argument.
⚠️ Die Flaeche ist hier erlaubt (und noetig): sie ist anfassbar und traegt
ein Bild — die zwei Kriterien, nach denen diese Seite ueberhaupt Karten
vergibt. Ohne Rahmen liefe ein fremdes Logo als freies Element ueber den
Grund und laese sich als ZWEITES Logo DIESER Marke.
⚠️ Das Logo steht auf 82 % Deckkraft. Regains Parchment (#FCF0DA) ist
heller als die Schrift daneben; auf 100 % gewinnt ein fremdes Zeichen den
Blinzeltest gegen das eigene. 82 % ist die uebliche Partnerlogo-Behandlung:
erkennbar, aber nachgeordnet. Auf Hover volle Deckkraft. */
/* ⚠️ Die Polsterung addierte sich: die Sektion darueber gibt --section-y ab
(144 px bei 1440), der Verweis legte nochmal 64 drauf — 208 px Loch zwischen
Formular und Kasten, in dem gar nichts steht. Die letzte Sektion gibt ihre
Polsterung ab, weil der Verweis kein eigenes Kapitel ist, sondern ein Regal
ueber dem Footer. Ohne :has()-Unterstuetzung bleibt das alte Polster stehen —
dann ist der Abstand nur zu gross, nichts bricht. */
section:has(+ .partner) { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.partner { padding-block: 0 clamp(2.5rem, 5vw, 4rem); background: var(--ground); }
.partner-box {
display: grid; gap: 1.5rem 2.5rem; align-items: center;
padding: clamp(1.5rem, 3vw, 2rem);
border: 1px solid var(--hairline-soft); border-radius: var(--radius);
background: rgba(255, 255, 255, .022);
}
/* 48em statt 54em: bei 864 px stapelte der Kasten auf jedem iPad im Hochformat,
obwohl 242 px Logo + Text dort bequem nebeneinander passen. */
@media (min-width: 48em) {
.partner-box { grid-template-columns: 242px minmax(0, 1fr); }
}
.partner-logo { display: block; opacity: .82; transition: opacity .16s ease; }
.partner-logo img { width: 242px; max-width: 100%; }
.partner-logo:hover { opacity: 1; }
.partner-text p { color: var(--ink-2); font-size: var(--t-sm); max-width: 62ch; }
.partner-text strong { color: var(--ink); }
.partner-text .link-action { margin-top: .875rem; font-size: var(--t-sm); }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 52em) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
/* ⚠️ KEIN border-radius mehr. Der Radius war die Notloesung fuer den
eingebrannten schwarzen Grund der PNG-Signets: aus dem schwarzen Rechteck
wurde eine „Kachel", damit es wie Absicht aussah. Seit das Signet
freigestellt vorliegt (signet-640.webp) gibt es kein Rechteck mehr — und
ein Radius um ein transparentes Bild schneidet nur noch Ecken vom Roboter
ab. Hero und Footer tragen jetzt dasselbe Asset. */
.footer-signet { width: 200px; margin-bottom: 1rem; }
.footer-titel {
margin: 0 0 .875rem; font-size: var(--t-xs); font-weight: 600;
text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.site-footer a:hover { color: var(--gold); }
/* Die Fusszeile ist das letzte, was ueber der Home-Indicator-Leiste steht —
auf iPhone und iPad ohne diesen Zuschlag klebt sie am Balken.
⚠️ calc(… + env(…)), NICHT max(0px, env(…)). Die alte Fassung ergab auf jedem
Geraet OHNE Safe Area exakt 0 und ueberschrieb damit die 2.5rem Grundpolsterung
aus der Regel darueber — der Footer klebte also am Desktop unten fest, um ein
Problem auf dem Telefon zu loesen. (Codex-Befund.) */
.site-footer { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
.footer-bottom {
margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline-soft);
display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
font-size: var(--t-xs); color: var(--ink-3);
}
/* ============================================================ Rechtsseiten */
.legal-page { padding-block: clamp(3rem, 7vw, 5rem); }
.legal-page .wrap { max-width: 46rem; }
.legal-page h1 { margin-bottom: 2rem; }
.legal-page h2 { font-size: var(--t-md); margin: 2.5rem 0 .875rem; max-width: none; }
.legal-page p, .legal-page li { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: .875rem; }
.legal-page a { color: var(--gold); }
/* Die Kontaktwege im Impressum: eine Zeile je Weg, ohne Aufzaehlungspunkt.
Der Abstand ist kein Geschmack — er haelt die Touch-Trefferflaechen
auseinander (siehe Abschnitt „Touch"). */
.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.sub-hero { padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 5vw, 3.5rem); }
.sub-hero h1 { margin-bottom: 1.25rem; }
/* =============================================== Utilities (bewusst wenige)
Ersetzen die frueheren style=""-Attribute. Kein Kosmetikgrund: CSP-Hashes
decken Style-ATTRIBUTE nicht ab, dafuer braeuchte es 'unsafe-hashes'. Ohne
Inline-Styles kommt style-src auf 'self'. Wer hier ein style="" einbaut,
bricht das still. */
.mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1.125rem; }
.mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; }
.mb-8 { margin-bottom: 2rem; }
.w-full { width: 100%; } .measure-34 { max-width: 34ch; }
.link-gold { color: var(--gold); }
.link-quiet { color: var(--ink-3); text-underline-offset: 3px; }
/* ============================================================= Bewegung
⚠️ DIE REGEL, DIE ALLES HIER ZUSAMMENHAELT: der ENDZUSTAND ist der
Normalzustand. Keine Regel darf ein Element dauerhaft auf opacity:0 oder
scale(0) legen, das nur eine Animation zurueckholt — faellt die Animation
aus (alte Engine, Rendering ohne Compositing, ein Fehler weiter oben),
bleibt sonst Inhalt weg. Deshalb ueberall `backwards`/`both`-Fill: der
Startzustand gilt nur, WAEHREND die Animation laeuft.
Die einzige Ausnahme ist [data-reveal] — und die hat einen harten Failsafe
in main.js (Block 1), der nach dem load-Event alles aufdeckt.
Zweite Regel: kein `ease-in`, nirgends. Siehe --ease-out in :root. */
/* --- Der Reveal: ein leises Fade-up, einmalig ------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
opacity: 1; transform: none;
transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
/* --- Staffelung -------------------------------------------------------
Vier Zeilen, die gleichzeitig erscheinen, sind ein Block; vier Zeilen mit
60 ms Versatz sind eine Aufzaehlung, die sich SELBST vorliest. Der Versatz
haengt am Container-Reveal, nicht an vier eigenen Observern: eine Beobachtung
weniger pro Sektion, und die Reihenfolge stimmt garantiert.
60 ms ist bewusst am unteren Rand — bei 120 ms wartet man auf Zeile 4. */
@media (prefers-reduced-motion: no-preference) {
.js .problems.is-in .prob,
.js .concept.is-in .con,
.js .steps.is-in .step,
.js .tasks.is-in .task {
animation: aufblenden .5s var(--ease-out) backwards;
}
.js .problems.is-in .prob:nth-child(2),
.js .concept.is-in .con:nth-child(2),
.js .steps.is-in .step:nth-child(2),
.js .tasks.is-in .task:nth-child(2) { animation-delay: .06s; }
.js .problems.is-in .prob:nth-child(3),
.js .concept.is-in .con:nth-child(3),
.js .steps.is-in .step:nth-child(3),
.js .tasks.is-in .task:nth-child(3) { animation-delay: .12s; }
.js .problems.is-in .prob:nth-child(4),
.js .steps.is-in .step:nth-child(4) { animation-delay: .18s; }
}
@keyframes aufblenden {
from { opacity: 0; transform: translateY(10px); }
}
/* --- Der Zeitstrahl zeichnet sich -------------------------------------
Die Linie ist die AUSSAGE der Sektion („das eine folgt auf das andere").
Sie zu zeichnen statt sie hinzustellen, sagt dasselbe noch einmal in
Bewegung — das ist der seltene Fall, in dem eine Animation etwas ERKLAERT
statt zu schmuecken. Deshalb darf sie hier auch 800 ms dauern.
⚠️ transform-origin muss zur Richtung passen: mobil laeuft die Linie
senkrecht (scaleY, von oben), ab 62em waagerecht (scaleX, von links). */
@media (prefers-reduced-motion: no-preference) {
.js .steps.is-in::before {
transform-origin: top center;
animation: strichY .8s var(--ease-out) .1s backwards;
}
@media (min-width: 62em) {
.js .steps.is-in::before {
transform-origin: left center;
animation: strichX .8s var(--ease-out) .1s backwards;
}
}
}
@keyframes strichY { from { transform: scaleY(0); } }
@keyframes strichX { from { transform: scaleX(0); } }
/* --- Der Sheen ueber dem Hero-Panel -----------------------------------
Ein Lichtstreifen laeuft EINMAL ueber das Panel, kurz nachdem es da ist.
Zweck: das Panel als Flaeche lesbar machen (ein Rahmen mit Verlauf sieht
sonst gedruckt aus) und den Blick nach rechts holen, NACHDEM die H1 links
gelesen ist — daher die Verzoegerung. Einmal, nicht in Schleife: eine
Endlos-Schleife im Hero ist die zuverlaessigste Art, eine Seite billig
aussehen zu lassen.
.hero-bild hat overflow:hidden, sonst laeuft der Streifen ueber die Seite. */
@media (prefers-reduced-motion: no-preference) {
.js .hero-panel.is-in .hero-bild::after {
content: ""; position: absolute; inset: -30% -60%;
pointer-events: none; z-index: 3;
background: linear-gradient(104deg, transparent 44%,
rgba(255, 240, 210, .09) 50%, transparent 56%);
transform: translateX(-100%);
animation: sheen 1.6s var(--ease-io) .5s 1;
}
/* Das Signet atmet. 6 px in 8 s ist an der Wahrnehmungsgrenze — man sieht
nicht die Bewegung, man sieht, dass das Bild nicht tot ist. Mehr Weg oder
mehr Tempo und es wird ein Effekt. */
.js .hero-signet { animation: schweben 8s ease-in-out 1.4s infinite; }
}
@keyframes sheen { to { transform: translateX(100%); } }
@keyframes schweben { 50% { transform: translateY(-6px); } }
/* --- Der Kicker-Strich waechst ---------------------------------------
24 px, die aus dem Nichts auf ihre Laenge gehen. Kostet nichts, und der
Strich ist auf jeder Sektion das erste, was sich bewegt — er fuehrt den
Blick an die Stelle, an der die Sektion sagt, wo man ist. */
@media (prefers-reduced-motion: no-preference) {
.js .section-head.is-in .kicker::before {
animation: strichX .5s var(--ease-out) backwards;
transform-origin: left center;
}
}
/* --- Tastbarkeit ------------------------------------------------------
Jedes druckbare Element geht auf :active zusammen. Das ist die billigste
Art, eine Oberflaeche „gehoert" wirken zu lassen — und die einzige
Rueckmeldung, die auf dem Handy ueberhaupt ankommt (dort gibt es kein
:hover, das Tempo vortaeuschen koennte). */
.btn:active, .link-action:active { transform: scale(.97); }
.btn:active { transition-duration: .1s; }
/* Hover nur dort, wo es einen Zeiger gibt — auf Touch loest :hover beim
Tippen aus und bleibt danach haengen. */
@media (hover: hover) and (pointer: fine) {
.con-img img { transition: transform .5s var(--ease-out); }
.con:hover .con-img img { transform: scale(1.04); }
.con { transition: border-color .2s ease; }
.con:hover { border-color: var(--gold-line); }
}
/* --- Ausnahmen -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
.btn:hover { transform: none; }
/* Bei reduzierter Bewegung laeuft die Agent-Engine gar nicht erst an
(sie kehrt vor dem `anim`-Schalter zurueck) — der komplette Verlauf
inklusive der vollen Arbeitsschritt-Listen steht dann statisch da.
Die Zahlen im Problem-Register zaehlen dann ebenfalls nicht, sondern
stehen sofort auf dem Endwert (main.js prueft dieselbe Media Query). */
}
/* ═══════════════════ TOUCH: Finger statt Zeiger ══════════════════════════
`pointer: coarse` ist der genaue Hebel — er trifft Telefon und iPad und
laesst den Maus-Desktop unangetastet. Eine globale 44-px-Regel haette den
Footer am Schreibtisch ohne Not auseinandergezogen.
⚠️ GEMESSEN, NICHT GESCHAETZT: auf iPhone und iPad lagen die Tippziele bei
20 px (Footer-Links), 28 px („Oder Formular ausfuellen"), 30 px (Marke) und
38 px (Header-CTA). Apples Richtwert ist 44×44 pt, und der Kaeufer ist
45–60 — das ist genau die Gruppe, die daneben tippt und es dem Anbieter
anlastet, nicht dem eigenen Finger.
⚠️ ZWEI VERFAHREN, und sie sind nicht austauschbar:
(a) EIGENSTAENDIGE Ziele — Kopfleiste, Fussleiste, der Zweitweg unter dem
CTA — bekommen eine groessere BOX (min-height + Zentrierung). Sie stehen
allein in ihrer Zeile, da stoert das nichts. Vergroessert wird ueber die
Hoehe, NICHT ueber die Schriftgroesse: die Typo-Leiter bleibt heil.
(b) Links MITTEN IM SATZ („Schriftverkehr", „info@…") bekommen eine
unsichtbare Trefferflaeche per ::after. Ihnen min-height: 44px zu geben
waere schlimmer als das Problem: die Zeilenbox waechst mit, und der
Absatz reisst an genau der Stelle auseinander, an der er zusammengehoert.
inset: -13px -6px bringt die kleinste Textzeile der Seite (19 px) auf
45 px Trefferhoehe, ohne ein einziges Pixel Layout zu verschieben.
Mit -12px waeren es 43 gewesen — nachgemessen per Treffertest, nicht
ueberschlagen.
Wer hier einen Link ergaenzt: erst entscheiden, welcher der beiden Faelle er
ist. Das ist die ganze Regel. */
@media (pointer: coarse) {
/* (a) eigenstaendige Ziele */
.site-footer a,
.site-nav a,
.link-action,
.brand {
display: inline-flex; align-items: center;
min-height: 44px;
}
/* (a2) Kontaktzeilen im Impressum — je Zeile ein eigenes Ziel. */
.kontaktliste a { display: inline-flex; align-items: center; min-height: 44px; }
/* (b) Links im Fliesstext
⚠️ NUR wo unter und ueber dem Link KEIN zweites Ziel steht. Genau daran ist
die erste Fassung gescheitert: sie erfasste auch `.legal-page p a`, und im
Impressum standen E-Mail, Telefon und WhatsApp als drei
-Zeilen
untereinander — drei Trefferflaechen, die sich ueberlappten. Die Zeilen sind
jetzt eine Liste (Fall a2), und diese Auswahl bleibt eng.
Vor dem Ergaenzen eines Selektors hier: nachsehen, ob ueber oder unter dem
Link ein weiteres Ziel liegt. Wenn ja, gehoert er nach (a) oder (a2). */
.con-list a,
.cta-note a,
.link-quiet {
position: relative;
}
.con-list a::after,
.cta-note a::after,
.link-quiet::after {
content: ""; position: absolute; inset: -13px -6px;
}
/* Der Footer wuerde durch 44-px-Zeilen doppelt so hoch — die Grundabstaende
daher zurueckdrehen, sonst gewinnt man Treffsicherheit und verliert
Uebersicht. */
.site-footer ul { gap: 0; }
.btn-sm { min-height: 44px; }
.faq summary { min-height: 44px; }
/* Beim Tippen blendet iOS sonst ein graues Rechteck ueber das Ziel. Auf einer
dunklen Seite sieht das nach Fehler aus. Die Rueckmeldung uebernimmt der
:active-Scale, der ohnehin schon steht. */
a, button, summary { -webkit-tap-highlight-color: transparent; }
}
/* Windows-Hochkontrast entfernt Hintergrundbilder — und damit den Verlauf,
aus dem .gold-word seine Farbe schneidet. Ohne diese Regel bliebe
-webkit-text-fill-color:transparent stehen und „morgen früh" waere WEG.
Codex-Befund; nicht entfernen. */
@media (forced-colors: active) {
.gold-word { background: none; -webkit-text-fill-color: currentColor; color: currentColor; }
}