/* ============================================================
Marcel Körner — Homepage (Neubau Juli 2026)
Struktur: freigegebenes Wireframe Teil B (09.07.2026)
Regeln: BRAND-SYSTEM.md + colors_and_type.css + Bau-Auftrag
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: var(--cream); text-decoration: none; }
a:hover { color: var(--cyan); }
img { max-width: 100%; }
.wrap { max-width: var(--max-wide); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space-2xl) 0; border-bottom: var(--border-hairline); position: relative; }
.section[id], section[id] { scroll-margin-top: 5rem; } /* Sticky-Header nicht über Anker */
.section > .wrap { position: relative; }
/* ---------- Sticky Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(7, 24, 30, 0.86);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: var(--border-hairline);
}
.site-header .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-lg); padding-top: 1rem; padding-bottom: 1rem;
}
.site-header .logo img { width: 170px; display: block; }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
/* Mono-Look (Marcel, Juli 2026): Nav-Links in JetBrains Mono, animierter
Unterstrich beim Hover, Baseline auf Höhe des CTA-Texts */
.site-nav a:not(.nav-cta) {
font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem;
letter-spacing: var(--tracking-mono-sm); text-transform: uppercase;
color: var(--mist); position: relative; padding: 0.35rem 0;
}
.site-nav a:not(.nav-cta)::after {
content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
background: var(--brass-light);
transition: width var(--dur-base) var(--ease-brand);
}
.site-nav a:not(.nav-cta):hover { color: var(--cream); }
.site-nav a:not(.nav-cta):hover::after { width: 100%; }
/* Outline statt gefüllt (Marcel, 20.07.2026): Der Header soll den Hero-CTA
nicht doppeln. Beim Hover läuft die Gold-Fläche ein — dieselbe Handlungs-
farbe, nur als Reaktion statt als Dauerzustand. */
.site-nav .nav-cta {
white-space: nowrap;
font-family: var(--font-statement); font-weight: 600; font-size: 0.78rem;
letter-spacing: var(--tracking-cinzel); text-transform: uppercase;
color: var(--brass-light);
background: transparent;
border: 1px solid rgba(224, 196, 154, 0.55); border-radius: var(--radius-sm);
padding: 0.7rem 1.25rem;
box-shadow: none;
transition: background var(--dur-fast) var(--ease-brand), color var(--dur-fast) var(--ease-brand),
border-color var(--dur-fast) var(--ease-brand), box-shadow var(--dur-fast) var(--ease-brand);
}
.site-nav .nav-cta:hover {
color: #241A0E;
background: linear-gradient(180deg, #E9D2AB 0%, var(--brass) 58%, #BC9260 100%);
border-color: rgba(140, 104, 58, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 243, 214, 0.6),
0 10px 24px -12px rgba(0, 0, 0, 0.5), 0 0 20px -6px rgba(207, 169, 120, 0.45);
}
/* ---------- Gold-CTA-System (Marcel, Juli 2026) ----------
Klarheits-Call-Buttons sind DIE warme Handlungsfarbe der Seite:
gefüllt in Brass, beim Hover verstärkt sich das Leuchten. Keine Pfeile
(Baulig-Referenz). Basis .mk-btn in colors_and_type.css bleibt unangetastet. */
/* Edler Metall-Look (Marcel, 16.07.2026): Verlauf mit Lichtkante oben,
dunkler Standkante unten, dünner Bronze-Rand statt hellem Rahmen.
Schrift in warmem Espresso statt Schwarz — wirkt graviert, nicht gedruckt. */
.mk-btn {
background: linear-gradient(180deg, #E9D2AB 0%, var(--brass) 58%, #BC9260 100%);
border-color: rgba(140, 104, 58, 0.85);
color: #241A0E;
font-size: 0.95rem;
padding: 1.05rem 2.2rem;
box-shadow:
inset 0 1px 0 rgba(255, 243, 214, 0.65),
inset 0 -1px 0 rgba(90, 62, 30, 0.4),
0 14px 30px -14px rgba(0, 0, 0, 0.6);
transition: box-shadow var(--dur-fast) var(--ease-brand), filter var(--dur-fast) var(--ease-brand), transform var(--dur-fast) var(--ease-brand);
}
.mk-btn:hover {
background: linear-gradient(180deg, #E9D2AB 0%, var(--brass) 58%, #BC9260 100%);
border-color: rgba(140, 104, 58, 1);
color: #241A0E;
filter: brightness(1.06) saturate(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 243, 214, 0.75),
inset 0 -1px 0 rgba(90, 62, 30, 0.4),
0 16px 34px -14px rgba(0, 0, 0, 0.65), 0 0 26px -4px rgba(207, 169, 120, 0.5);
}
.mk-btn:active { transform: translateY(1px); }
/* Gold-Schimmer beim Hover (Marcels Schimmer-Studie, 17.07.2026):
ein Lichtreflex läuft einmal übers Metall — nur bei aktivierter Motion.
Der Ruhezustand bleibt das flache Metall (Schimmer dauerhaft = Goldfolie). */
.mk-btn:not(.mk-btn--link):not(.form-back), .btn-primary, .site-nav .nav-cta {
position: relative; overflow: hidden;
}
.mk-btn:not(.mk-btn--link):not(.form-back)::after, .btn-primary::after, .site-nav .nav-cta::after {
content: ""; position: absolute; top: -20%; bottom: -20%; left: -85%; width: 55%;
background: linear-gradient(105deg, transparent 0%, rgba(255, 246, 220, 0.55) 50%, transparent 100%);
transform: skewX(-14deg);
opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.mk-btn:not(.mk-btn--link):not(.form-back):hover::after,
.btn-primary:hover::after,
.site-nav .nav-cta:hover::after { animation: btn-sheen 0.85s var(--ease-brand); }
}
/* QA-Override: schlägt den globalen Reduce-Motion-Kill-Switch (1ms !important) */
body.motion-force .mk-btn:not(.mk-btn--link):not(.form-back):hover::after,
body.motion-force .btn-primary:hover::after,
body.motion-force .site-nav .nav-cta:hover::after {
animation: btn-sheen 0.85s var(--ease-brand);
animation-duration: 0.85s !important;
}
@keyframes btn-sheen {
0% { left: -85%; opacity: 0; }
12% { opacity: 1; }
100% { left: 130%; opacity: 0; }
}
/* Link-Variante zurücksetzen — erbt sonst die Gold-Fläche */
.mk-btn.mk-btn--link, .mk-btn.mk-btn--link:hover {
background: none; border: 0; color: var(--cream); box-shadow: none; filter: none;
font-size: 1rem; padding: 0.25rem 0;
}
.mk-btn--link::after { background: var(--brass-light); }
/* ---------- Primär-CTA (Finale) ----------
Größte Gold-Fläche der Seite — gleiche Familie wie .mk-btn, eine Stufe lauter. */
.btn-primary {
display: inline-flex; align-items: center; gap: 0.6em;
font-family: var(--font-statement); font-weight: 600; font-size: 1rem;
letter-spacing: var(--tracking-cinzel); text-transform: uppercase;
color: #241A0E;
background: linear-gradient(180deg, #E9D2AB 0%, var(--brass) 58%, #BC9260 100%);
border: 1px solid rgba(140, 104, 58, 0.85);
border-radius: var(--radius-sm);
padding: 1.2rem 2.7rem;
cursor: pointer; text-decoration: none;
box-shadow:
inset 0 1px 0 rgba(255, 243, 214, 0.65),
inset 0 -1px 0 rgba(90, 62, 30, 0.4),
0 18px 40px -18px rgba(0, 0, 0, 0.55), 0 0 24px -8px rgba(207, 169, 120, 0.4);
transition: box-shadow var(--dur-fast) var(--ease-brand), transform var(--dur-fast) var(--ease-brand), filter var(--dur-fast) var(--ease-brand);
}
.btn-primary:hover {
color: #241A0E;
filter: brightness(1.06) saturate(1.05);
box-shadow:
inset 0 1px 0 rgba(255, 243, 214, 0.75),
inset 0 -1px 0 rgba(90, 62, 30, 0.4),
0 22px 46px -18px rgba(0, 0, 0, 0.6), 0 0 34px -4px rgba(207, 169, 120, 0.6);
}
.btn-primary:active { transform: translateY(1px); }
.btn-arrow { font-family: var(--font-body); font-weight: 400; }
/* ---------- Section-Kopf ---------- */
.sec-eyebrow { margin-bottom: var(--stack-eyebrow); }
.mk-doc h2.sec-headline-soft {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-weight: 500; font-size: var(--t-h2); line-height: var(--leading-snug);
letter-spacing: 0; text-transform: none;
/* Zentriert (Marcel, 21.07.2026): Vorher standen die Sektions-Überschriften
teils links, teils mittig — je nachdem, ob die Sektion einen zentrierten
Block hatte. Jetzt einheitlich mittig. */
color: var(--cream-bright); margin: 0 auto; max-width: 24ch; text-wrap: balance;
text-align: center;
}
/* Zwischenüberschrift (Marcel, 21.07.2026): Eine fehlende Ebene zwischen
Mono-Eyebrow und h2. Der Eyebrow ist ein Kicker ÜBER einer Headline — als
alleinige Überschrift eines Blocks war er zu leise. Cinzel statt Mono,
größer, ohne Zier-Striche, mit kurzer Messing-Linie darunter. */
.mk-doc h3.sub-headline {
font-family: var(--font-statement); font-weight: 600;
font-size: 1.15rem; line-height: 1.2;
letter-spacing: var(--tracking-cinzel); text-transform: uppercase;
color: var(--cream-bright); margin: 0 0 var(--space-md);
padding-bottom: 0.7rem; position: relative;
}
.mk-doc h3.sub-headline::after {
content: ""; position: absolute; left: 0; bottom: 0;
width: 2.2rem; height: 1px; background: var(--brass);
}
.light-world .mk-doc h3.sub-headline, .mk-doc .light-world h3.sub-headline { color: var(--ink); }
/* Brückenzeile unter einer Sektions-Headline (Notion Block 4, 21.07.2026):
erklärender Absatz, ruhiger als die Headline, breiter als der Fließtext. */
.mk-doc p.sec-bridge {
/* zentriert wie die Headline darueber (Marcel, 22.07.2026): Der Sektionskopf
ist eine Einheit — linksbuendig unter zentrierter Headline wirkte versetzt. */
margin: var(--space-md) auto 0; max-width: 58ch; text-align: center;
font-size: 1.05rem; line-height: var(--leading-relaxed);
color: var(--mist);
}
/* Gold-Variante für Ergebnis-/Angebots-Sektionen (Marcel, Juli 2026).
Poliertes-Metall-Verlauf per background-clip:text (Marcel, 17.07.2026) —
dunklere Ränder, heller Kern = Goldschimmer-Look. Beim Scroll-in läuft
einmal ein Lichtreflex durch (nur bei aktivierter Motion). */
.mk-doc h2.sec-headline-gold {
font-family: var(--font-statement); font-weight: 600;
font-size: 2.3rem; line-height: 1.2;
letter-spacing: var(--tracking-cinzel); text-transform: uppercase;
/* zentriert wie .sec-headline-soft (Marcel, 21.07.2026) */
margin: 0 auto; max-width: 26ch; text-wrap: balance; text-align: center;
color: var(--brass-light); /* Fallback */
background: linear-gradient(100deg,
#A8843F 0%, #D9BE8A 34%, #F6E7C6 50%, #D9BE8A 66%, #A8843F 100%);
background-size: 220% 100%; background-position: 50% 0;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.mk-doc h2.sec-headline-gold.is-lit { animation: gold-sheen 1.6s var(--ease-brand); }
@keyframes gold-sheen {
0% { background-position: 130% 0; }
100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
.mk-doc h2.sec-headline-gold.is-lit { animation: none; }
}
body.motion-force .mk-doc h2.sec-headline-gold.is-lit {
animation: gold-sheen 1.6s var(--ease-brand) !important;
}
/* Körpertext auf Dunkel eine Stufe heller (Marcel, Juli 2026):
Cream statt Mist — Mist bleibt für Microcopy/Nebenzeilen. */
.mk-doc .section p, .mk-doc .narrative p { color: var(--cream); }
.mk-doc .section.light-world p { color: var(--ink); }
/* ============================================================
01 · PITCH-HERO (Baulig-Stil, Bau-Auftrag Juli 2026)
============================================================ */
.hero { border-bottom: var(--border-hairline); position: relative; overflow: hidden; }
.hero .mk-atmo-mid { position: absolute; inset: 0; }
.hero .mk-halo { position: absolute; inset: 0; }
/* Baulig-Schema (Marcel, 17.07.2026): Eyebrow + Headline + Subline volle
Breite, darunter 2 Spalten — Bild links, Haken-Liste + CTA rechts. */
.hero .wrap {
position: relative; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-xl); /* Luft zwischen Headline-Block und Spalten */
padding-top: 3rem;
padding-bottom: 4rem;
}
/* Hero füllt den Viewport nur auf großen externen Monitoren (Marcel, 21.07.2026):
Dort wirkte er in der Vertikalen zu flach. Auf dem MacBook passte die Höhe
bereits und muss unverändert bleiben.
Schwelle 900px ist bewusst gewählt: Marcels MacBook läuft mit 1440x900, der
Browser-Viewport ist dort 756px hoch, maximal möglich wären 870px. Die Regel
kann dort also selbst im Vollbild nicht greifen. Externe Monitore (1440p und
größer) liegen mit 1250px+ deutlich darüber. */
@media (min-width: 861px) and (min-height: 900px) {
.hero .wrap { min-height: calc(100dvh - 5rem); }
}
/* Halo auf 60 % gedimmt (Marcel, 20.07.2026): der obere Bereich wirkte zu hell
und nahm der Headline den Kontrast. */
.hero .mk-halo { opacity: 0.6; }
/* Headline und Subline sind eine Einheit (enger), das Eyebrow steht
bewusst abgesetzt darüber (Marcel, 20.07.2026). */
.hero-top {
display: flex; flex-direction: column; align-items: center;
/* gap: 0 — der Abstand Eyebrow → Headline wird an der Headline selbst
gesetzt, damit er sich an DEREN Schriftgröße orientieren kann (siehe
unten). Zwei Quellen würden sich sonst addieren. */
text-align: center; gap: 0;
}
/* Ebene 1 relativ statt absolut (Marcel, 21.07.2026): Ein fester Pixelwert
funktioniert hier nicht — 23px wirken bei einer 53px-Headline gedrängt, bei
einer 20px-Überschrift dagegen großzügig. Der margin-top steht deshalb in em
direkt an der Headline-Regel weiter unten (Suche: „margin: 0.5em 0 0"). */
/* Spalten oben/unten bündig (Marcel, 17.07.2026): die TEXT-Spalte gibt die
Höhe vor, das Bild wird per object-fit auf exakt diese Höhe beschnitten.
Dadurch schließen Bild und Textblock oben wie unten bündig ab. */
/* Bild breiter (Marcel, 20.07.2026): flacher + breiter statt schmal + hoch.
Enger Spaltenabstand + mehr Gesamtbreite = breitere Textspalte für die
Subline; vertikal dafür mehr Luft. */
/* Bild folgt wieder der Textspalte (Marcel, 20.07.2026): oben und unten
bündig, dafür schmaler — dadurch echtes Hochformat statt Quadrat.
Der Text gibt die Höhe vor, das Bild passt sich an. */
.hero-cols {
/* Textspalte so breit, dass die Haken sie ausfüllen — sonst liegt die
Spaltenmitte (und damit Subline + Button) sichtbar rechts von der
optischen Mitte des Textblocks (Marcel, 20.07.2026). */
display: grid; grid-template-columns: 1fr 379px;
gap: var(--space-md); align-items: stretch;
width: 100%; max-width: 68rem;
}
/* Subline, Haken-Liste und CTA liegen alle drei hier drin, der gap gilt also
für beide Zwischenräume gleichermaßen. Für unterschiedliche Abstände wird
unten am Subline-Margin und am .hero-bottom nachjustiert (Marcel, 21.07.2026). */
.hero-right { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: var(--space-lg); }
/* Bullets rücken näher an die Subline: Deren margin-bottom (16px) kam oben
zum gap dazu — 54px gegenüber 38px unten. Im Hero entfällt er. */
.mk-doc .hero-right p.hero-sub { margin-bottom: 0; }
/* … und der CTA bekommt dafür mehr Luft nach oben. */
.hero-right .hero-bottom { margin-top: var(--space-md); }
.hero-checks {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 1.15rem;
}
/* Haken als sekundäre Ebene (Marcel, 17.07.2026): kleiner als die Subline,
damit die Subline klar die Führung behält. */
.hero-checks li {
position: relative; padding-left: 2rem;
font-family: var(--font-body); font-size: 0.98rem; line-height: var(--leading-body);
color: var(--cream); text-align: left;
}
.hero-checks li::before {
content: "\2713"; position: absolute; left: 0.1rem; top: 0;
color: var(--cyan); font-weight: 700; font-size: 1.15em; line-height: 1.3;
}
/* Feste Größenstufen statt vw-fluid (Marcel, 16.07.2026): beim Fenster-
Ziehen skalierte die Schrift stufenlos mit und „verzog" sich sichtbar. */
.mk-doc h1.hero-headline {
font-family: var(--font-editorial);
font-style: italic;
font-variation-settings: "opsz" 14;
font-weight: 500;
font-size: 3.3rem;
line-height: 1.14;
letter-spacing: 0;
text-transform: none;
color: var(--cream);
/* margin-top in em der eigenen Schriftgröße (Marcel, 21.07.2026): hält den
Abstand zum Eyebrow im Verhältnis, egal wie groß die Headline gerade ist.
0.5em ergeben optisch rund 32px. Siehe Abstands-Konzept, Ebene 1. */
margin: 0.5em 0 0; max-width: none; /* Umbruch wird per
gesetzt */
text-align: center;
}
@media (max-width: 1200px) { .mk-doc h1.hero-headline { font-size: 2.55rem; } }
/* Cinzel-Gold-Akzent in der Headline entfernt (Marcel, 20.07.2026):
eine Schrift, eine Farbe. Gold trägt jetzt allein der CTA. */
/* Größenfest statt fluid (Marcel, 17.07.2026): var(--t-sublead) skaliert
mit vw und ließ den Text mitstauchen. Feste Größe, klar über den Haken. */
/* Sitzt in der linken Spalte über den Haken, in der Spalte zentriert
(Marcel, 20.07.2026). Abstand zu den Haken bewusst knapp. */
/* In der Spalte zentriert (Marcel, 20.07.2026). Bewusst schmaler als die
Spalte — sonst wirkt nur die letzte Zeile zentriert und es sieht nach
Versehen aus. Dreizeilig ist ausdrücklich in Ordnung. */
.mk-doc p.hero-sub {
max-width: 46ch; margin: 0 auto var(--space-sm); display: block;
font-family: var(--font-body); font-style: normal;
font-size: 1.2rem; line-height: var(--leading-snug);
color: var(--cream); text-align: center;
}
/* Komplett fett, ohne Unterstreichung (Marcel, 20.07.2026). Farbe bleibt
Cream, damit die Subline die Headline nicht überstimmt. */
.hero-sub { font-weight: 700; }
/* Zeilenumbruch der Headline nur auf breiten Screens erzwingen */
@media (max-width: 860px) { .br-wide { display: none; } }
@media (max-width: 860px) { .mk-doc p.hero-sub { font-size: 1.1rem; } }
/* Button + Proof linksbündig zu den Bulletpoints (Marcel, 20.07.2026):
echte Zentrierung wirkte verrutscht, weil der Textblock die Spalte rechts
nicht ausfüllt. Gemeinsame linke Kante ist ruhiger und stabiler. */
/* Button zentriert — auf derselben Achse wie die Subline (Marcel, 20.07.2026) */
.hero-bottom {
display: flex; flex-direction: column; align-items: center;
gap: var(--space-md);
}
.hero-actions {
display: flex; align-items: center; justify-content: center;
gap: var(--space-md); flex-wrap: wrap;
}
.cta-block { display: flex; flex-direction: column; gap: 0.5rem; }
.cta-note { font-family: var(--font-body); font-size: 0.82rem; color: var(--mist); letter-spacing: 0.02em; }
.hero-proof { display: inline-flex; align-items: center; gap: 0.8rem; }
.hero-proof:hover .proof-text { color: var(--cream); }
.proof-avatars { display: inline-flex; }
.proof-avatars img {
width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
border: 1.5px solid var(--bg-primary); margin-left: -10px;
}
.proof-avatars img:first-child { margin-left: 0; }
.proof-text { font-family: var(--font-body); font-size: 0.88rem; color: var(--mist); transition: color var(--dur-fast) var(--ease-brand); }
/* Hero-Bild 4:5 mit Teal-Grading (Rezept, §8):
saturate 0.82 · contrast 1.03 · brightness 0.95
+ Multiply-Overlay rgba(15,42,48,0.22) — zieht warme Fotos in die Deep-Teal-Welt.
Fassung: Passepartout-Hairline mit Abstand + Kontakt- und Ambient-Schatten
+ leiser Cyan-Schein hinter der Kante. */
/* Rahmen auf 4:5 verschmälert, damit nichts seitlich beschnitten wird (die
Arme waren weg). Rechte Kante bleibt fix, die linke rückt nach innen —
die Textspalte und alle anderen Positionen bleiben unverändert.
(Marcel, 20.07.2026) */
.hero-figure {
position: relative; max-width: 301px; width: 100%;
display: flex; align-self: stretch; justify-self: end;
}
.hero-figure::before {
content: ""; position: absolute; inset: -90px; z-index: 0; pointer-events: none;
background: radial-gradient(ellipse 42% 38% at 62% 32%,
rgba(79, 200, 181, 0.14) 0%, rgba(79, 200, 181, 0.07) 35%,
rgba(79, 200, 181, 0.02) 60%, transparent 78%);
}
.hero-visual {
position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden;
border-radius: 0;
border: 1px solid rgba(224, 229, 232, 0.28);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.4),
0 32px 72px -28px rgba(0, 0, 0, 0.65);
}
/* Bild absolut in der Bühne — trägt keine Eigenhöhe bei, damit die
Textspalte die Zeilenhöhe bestimmt und das Bild darauf beschnitten wird. */
/* Ohne Farbfilter (Marcel, 21.07.2026): Das Foto trägt die Markenfarben
bereits selbst — salbeigrüner Anzug im Teal-Feld, warmes Bokeh im Brass-Ton.
Es ist also kein Fremdkörper, den man einfärben müsste. */
.hero-visual img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block;
}
/* Petrol-Schleier entfernt (Marcel, 21.07.2026) — siehe Begründung oben. */
/* In-Sektion-CTA (Marcel, 17.07.2026): kurzer Lead + Button am Ende einer
Inhalts-Sektion (Stimmen, Über mich, Eignung) — statt separater CTA-Bänder. */
.section-cta {
/* Ebene 3 statt 4 (Marcel, 22.07.2026): Oben 73 / unten 77 war praktisch
gleich — der Button schwebte unentschieden zwischen Inhalt und
Sektionsende. Nähe-Prinzip: Der Button gehört zu seinem Inhalt, der
Sektionsrahmen dominiert jetzt klar. Gilt seitenweit für ALLE Buttons. */
margin-top: var(--space-lg);
display: flex; flex-direction: column; align-items: center; gap: var(--space-md);
text-align: center;
}
.mk-doc .section-cta .section-cta-line {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-weight: 500; font-size: 1.35rem; line-height: var(--leading-snug);
color: var(--cream-bright); margin: 0; max-width: 28ch;
}
.light-world .section-cta .section-cta-line { color: var(--ink); }
/* Platzhalter-Box (bis Bild-Checkpoint) */
.ph {
position: relative; border: 1px solid rgba(79, 200, 181, 0.22); border-radius: var(--radius);
background: repeating-linear-gradient(45deg, rgba(143, 181, 189, 0.055) 0 12px, transparent 12px 24px), var(--bg-secondary);
display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-lg);
box-shadow: var(--shadow-card);
}
.ph .ph-label {
font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--mist); line-height: 1.6; max-width: 34ch;
}
/* ============================================================
02 · ERZÄHL-STRECKE (Fließtext, Thesis-Copy wörtlich)
Juli 2026: zweispaltig — Lesespalte + ruhiges Porträt (sticky),
damit die Textstrecke nicht als Wand wirkt.
============================================================ */
.narr-grid {
display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 60ch);
gap: var(--space-2xl); justify-content: center; align-items: start;
}
.narr-figure { position: sticky; top: 7rem; margin: 0; }
.narr-visual {
position: relative; aspect-ratio: 4 / 5; overflow: hidden;
/* exakt die Hero-Werte (Marcel, 22.07.2026): ein Rahmen-System fuer alle
Bilder der dunklen Welt, keine Drift (vorher 0.22/0.6 statt 0.28/0.65). */
border: 1px solid rgba(224, 229, 232, 0.28);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 32px 72px -28px rgba(0, 0, 0, 0.65);
}
/* Schwarzweiß auf der Problemebene (Marcel, 20.07.2026): Die Erzähl-Strecke
beschreibt den Ist-Zustand — entfärbt. Mit dem Wendepunkt (Nebel→Leben)
kehrt die Farbe zurück. Der Teal-Schleier darunter hält das Bild in der
Markenwelt, statt es neutral-grau wirken zu lassen. */
.narr-visual img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: grayscale(1) contrast(1.06) brightness(0.88);
}
.narr-visual::after {
content: ""; position: absolute; inset: 0;
background: rgba(15, 42, 48, 0.3); mix-blend-mode: multiply; pointer-events: none;
}
.narr-figure figcaption {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-size: 0.95rem; color: var(--mist); margin-top: 0.7rem;
}
.narrative { max-width: 60ch; margin: 0; }
.narrative .lead-in {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: var(--leading-snug);
/* 30rem statt 26ch (Marcel, 21.07.2026): Zwischenzeilen und Schluss-Zitat
sind gleichrangige Statements und sollen gleich breit umbrechen. In ch
gerechnet ergaben sie 465px gegenüber 480px, weil ch von der jeweiligen
Schriftgröße abhängt. Ein fester Wert hält beide exakt gleich. */
color: var(--cream); margin: 0 0 var(--space-md) 0; max-width: 30rem;
text-wrap: balance;
}
/* Absatzabstand --space-md statt --space-lg (Marcel, 21.07.2026): optisch waren
es 48px, also über Ebene 3. Mit dem Zeilenüberhang landet --space-md bei rund
38px — der Fließtext liest sich dadurch als ein Block statt als lose Absätze. */
.narrative p { font-size: 1.0625rem; max-width: 60ch; margin: 0 0 var(--space-md) 0; }
/* --stack-head statt --space-2xl (Marcel, 21.07.2026): Zwischen den drei Beats
lagen optisch 121px — mehr als eine Sektionsgrenze, mitten in der Sektion.
Die Erzähl-Strecke zerfiel dadurch in drei separate Blöcke, statt als ein
Gedankengang zu lesen. Die Beats sind Untergruppen, keine Sektionswechsel. */
.narrative .beat { margin-bottom: var(--stack-head, 4rem); }
.narrative .beat:last-child { margin-bottom: 0; }
.narrative strong, .about-copy strong { color: var(--cream); font-weight: 600; }
/* Kernsatz als Fazit der Erzähl-Strecke (Marcel, 16.07.2026) —
ersetzt die frei stehende Quote-Bühne, die ohne Kontext wirkte. */
.mk-doc p.narr-quote {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-weight: 500; font-size: 1.9rem; line-height: var(--leading-snug);
/* 30rem statt 24ch — gleiche Breite wie .lead-in, siehe Kommentar dort. */
color: var(--cream-bright); max-width: 30rem;
/* 21.07.2026 (Marcel): Vorher 7rem Abstand plus 2.4rem Innenabstand — optisch
rund 120px und damit MEHR als der Sektionsrahmen (112px). Ein Abstand
innerhalb einer Sektion darf nie größer sein als ihre Außengrenze, sonst
zerfällt sie in zwei. Jetzt --stack-head über der Linie, --stack-sub
darunter: deutlicher Einschnitt, aber klar innerhalb der Sektion. */
margin: var(--stack-head) 0 0 0; padding-top: var(--stack-sub);
position: relative; text-wrap: balance;
}
.mk-doc p.narr-quote::before {
content: ""; position: absolute; top: 0; left: 0;
width: 88px; height: 1px; background: var(--divider-strong);
}
/* Gold-Akzent auf „schaltet nicht ab" entfernt (Marcel, 21.07.2026): Das Zitat
trägt schon durch Größe und Trennlinie, die Goldfärbung brachte keinen
zusätzlichen Nutzen. Der Satz selbst bleibt — er ist die Pointe der Strecke.
Gold bleibt damit den Buttons und den beiden Cinzel-Headlines vorbehalten. */
.narr-quote strong { color: var(--cream-bright); font-weight: 500; }
/* Ruhige Schlusszeile unter dem Zitat (Marcel, 20.07.2026) */
.mk-doc p.narr-close { margin: var(--space-md) 0 0 0; max-width: 60ch; font-size: 1.0625rem; }
.narr-close strong { color: var(--cream-bright); font-weight: 600; }
.pain-list {
list-style: none; margin: var(--space-lg) 0; padding: 0;
display: flex; flex-direction: column; gap: var(--space-sm); max-width: 54ch;
}
.pain-list li {
position: relative; padding-left: 1.7rem; color: var(--cream);
font-size: 1.0625rem; line-height: var(--leading-body);
}
.pain-list li::before {
content: "\203A"; position: absolute; left: 0.1rem; top: -0.05em;
color: var(--cyan); font-size: 1.25em;
}
/* ---------- CTA-Band (prominent, Marcel Juli 2026) ----------
Statt Mono-Eyebrow: große weiße Statement-Zeile + kurze Unterzeile + Gold-CTA. */
/* Trennlinie hinter das CTA-Band gezogen (Marcel, 21.07.2026): Vorher lief sie
zwischen Text und Button — der Button gehört aber noch zur Sektion darüber,
er ist ihr Abschluss. Jetzt trennt die Linie erst nach dem Button, dort wo
die nächste Sektion wirklich beginnt.
Oben --stack-cta statt Sektionsrahmen: Das Band schließt die Sektion ab,
deshalb darf es nicht so weit weg stehen wie eine eigene Sektion. Unten
bleibt der volle Rahmen, dort ist die echte Grenze. */
.cta-band { border-bottom: var(--border-hairline); padding: var(--stack-cta, 4rem) 0 var(--section-pad, 4.75rem); }
/* Die Sektion vor einem CTA-Band gibt ihre untere Kante UND ihr unteres Padding
ab — sonst summierten sich 112px + 112px zu einer 224px-Lücke vor dem Button
(Marcel, 21.07.2026). Jetzt bleiben die 64px aus dem Band-Padding. */
.section:has(+ .cta-band) { border-bottom: none; padding-bottom: 0; }
.cta-band .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cta-band .band-line {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-weight: 500; font-size: 2.1rem; line-height: var(--leading-snug);
color: var(--cream-bright); margin: 0; max-width: 26ch; text-wrap: balance;
}
@media (max-width: 860px) { .cta-band .band-line { font-size: 1.65rem; } }
.cta-band .band-sub {
font-family: var(--font-body); font-size: 1.0625rem; color: var(--cream);
/* unten --stack-cta (Marcel, 21.07.2026): Vor JEDEM Button der Seite steht
derselbe Abstand. Vorher waren es hier 47px gegenüber 73px in den
Sektionen. */
margin: var(--space-sm) 0 var(--space-lg) 0; max-width: 48ch; /* Ebene 3 vor dem Button (22.07.) */
}
/* ============================================================
02b · ÜBERGANG NEBEL → LEBEN (Scrollytelling)
Sticky-Bühne, WebGL-Nebel hinter dem Wort. Beim Scrollen bauen
sich die Buchstaben von hinten kommend nach unten in umgekehrter
Reihenfolge zu LEBEN auf (NEBEL rückwärts = LEBEN).
reduced-motion / kein WebGL → statischer End-Zustand LEBEN.
============================================================ */
.fog-section { position: relative; border-bottom: var(--border-hairline); }
/* 21.07.2026 (Marcel): Strecke von 190vh auf 152vh gekürzt (−20 %) — der
Abschnitt nahm zu viel Seitenlänge ein. Die Bühne ist zugleich nicht mehr
bildschirmfüllend (84vh statt 100vh): Am unteren Rand bleibt ein Streifen der
nächsten Sektion sichtbar, damit klar ist, dass es weitergeht und die Seite
nicht „hängt". Der Inhalt bleibt mittig, die Abstände darin unverändert. */
.fog-track { height: 152vh; position: relative; }
.fog-stage {
position: sticky; top: 0; height: 84vh; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
/* gap bleibt --space-lg (geprüft 21.07.2026): Optisch sind es 81px statt der
erwarteten 38 — der Unterschied ist der Zeilenüberhang des 144px-Worts. Nach
der relativen Regel für große Schrift (0.5em) wären 72px richtig, 81 liegt
nah genug. Kleiner sollte es nicht werden, sonst klebt das Eyebrow am Wort. */
.fog-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); }
.fog-eyebrow { text-shadow: 0 0 18px rgba(7, 24, 30, 0.9); }
.fog-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg-primary); }
.fog-word {
position: relative; z-index: 2;
font-family: var(--font-statement); font-weight: 600;
font-size: clamp(3.2rem, 11vw, 9rem);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--mist); /* NEBEL steht gedämpft im Dunst — gleicher Ton wie „vom" */
display: flex;
align-items: baseline;
perspective: 900px;
user-select: none;
}
/* Begleitwörter „vom" / „zum" — Fraunces italic, erscheinen/verschwinden nur */
.fog-word .lead {
display: inline-grid;
margin-right: 0.5em;
font-family: var(--font-editorial); font-style: italic;
font-variation-settings: "opsz" 14;
/* 0.42em → 0.63em (Marcel, 21.07.2026): „vom" / „zum" waren gegenüber
NEBEL/LEBEN so klein, dass die Zeile schwer als Ganzes lesbar war.
50 % größer holt den Größenunterschied auf ein lesbares Maß zurück. */
font-weight: 400; font-size: 0.63em;
letter-spacing: 0; text-transform: none;
color: var(--mist);
}
.fog-word .lead > span {
grid-area: 1 / 1;
will-change: opacity;
text-shadow: 0 0 24px rgba(7, 24, 30, 0.85);
}
.fog-word .lead .lead-b { opacity: 0; }
.fog-word .ltr {
display: inline-block;
will-change: transform, opacity, filter;
text-shadow: 0 0 34px rgba(7, 24, 30, 0.85);
transition: color var(--dur-slow) var(--ease-brand);
}
/* Wenn LEBEN sich setzt, werden Wort und Begleitwort weiß */
.fog-word.is-leben .ltr,
.fog-word.is-leben .lead-b { color: var(--cream-bright); }
.fog-word .lead-b { transition: color var(--dur-slow) var(--ease-brand); }
.fog-caption {
position: absolute; z-index: 2; bottom: clamp(2rem, 6vh, 4rem); left: 0; right: 0;
max-width: 44ch; margin: 0 auto;
text-align: center;
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-size: var(--t-sublead); color: var(--mist);
opacity: 0; transition: opacity var(--dur-slow) var(--ease-brand);
pointer-events: none;
}
.fog-caption.is-visible { opacity: 1; }
/* ---------- Baustellen-Hinweis (nur Bauphase) ---------- */
.wip {
padding: var(--space-2xl) 0; text-align: center;
border-bottom: var(--border-hairline);
}
.wip .mk-mono { color: var(--mist); }
/* ---------- Footer ---------- */
.site-footer { padding: var(--space-lg) 0; border-top: var(--border-hairline); }
.site-footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.site-footer .mk-mono { color: var(--mist); }
.site-footer nav { display: flex; gap: var(--space-md); }
.site-footer nav a { font-family: var(--font-body); font-size: 0.85rem; color: var(--mist); }
.site-footer nav a:hover { color: var(--cream); }
/* ---------- Tablet quer & kleine Laptops (861–1200px) ----------
Hier bleiben zwei Spalten, aber die Textspalte wird schmal genug, dass die
Haken zweizeilig umbrechen. Weil das Bild sonst an die gewachsene Spalten-
höhe gekoppelt bliebe, wurde es zum schmalen Streifen gequetscht (0.64
statt 4:5). Deshalb hier: festes 4:5, mittig statt gestreckt — und engere
Abstände, damit der CTA über der Falz bleibt. (Marcel-QA 21.07.2026) */
@media (min-width: 861px) and (max-width: 1200px) {
.hero .wrap { padding-top: 1.1rem; padding-bottom: 1.8rem; gap: var(--space-sm); }
.hero-top { gap: var(--space-sm); }
.mk-doc h1.hero-headline { font-size: 2.25rem; }
.hero-cols { align-items: center; gap: var(--space-lg); }
/* Kopplung an die Spaltenhöhe lösen: sonst streckt erst das Grid die
Figur und dann Flex das Bild darin. */
.hero-figure { align-self: center; display: block; }
.hero-visual { aspect-ratio: 4 / 5; height: auto; }
.hero-right { gap: var(--space-md); }
.hero-checks { gap: 0.7rem; }
.mk-doc p.hero-sub { font-size: 1.1rem; max-width: 42ch; }
}
/* Flache Fenster (unter 720px Höhe, ab Tablet-Breite): Hero verdichtet sich
automatisch, damit der CTA über der Falz bleibt. Betrifft niedrige Laptops
und verkleinerte Fenster. (Marcel-QA 21.07.2026) */
@media (min-width: 861px) and (max-height: 720px) {
.hero .wrap { padding-top: 0.8rem; padding-bottom: 1.4rem; gap: var(--space-sm); }
.hero-top { gap: 0.5rem; }
.mk-doc h1.hero-headline { font-size: 2.1rem; }
.mk-doc p.hero-sub { font-size: 1.05rem; }
.hero-cols { gap: var(--space-md); align-items: center; }
.hero-figure { align-self: center; display: block; max-width: 250px; }
.hero-visual { aspect-ratio: 4 / 5; height: auto; }
.hero-right { gap: var(--space-sm); }
.hero-checks { gap: 0.5rem; }
.hero-checks li { font-size: 0.92rem; }
}
/* Tablet-Hochformat (600–860px): gestapeltes Layout, aber das Bild darf den
vorhandenen Platz nutzen — 320px wirken auf 768px Breite verloren.
(Marcel-QA 21.07.2026) */
@media (min-width: 600px) and (max-width: 860px) {
.hero-figure { max-width: 400px !important; }
.cta-block .mk-btn { width: auto !important; }
.hero-actions { align-items: center !important; }
}
/* ---------- Mobile (<860px) ---------- */
@media (max-width: 860px) {
.section { padding: var(--space-xl) 0; }
.quote-stage { padding: var(--space-2xl) 0; }
.hero .wrap { gap: var(--space-xl); }
/* Mobil (Marcel, 20.07.2026): Reihenfolge Subline → Bild → Haken → CTA.
display:contents löst die rechte Spalte auf, damit sich ihre Kinder
einzeln neben dem Bild sortieren lassen. */
.hero-cols { grid-template-columns: 1fr; gap: var(--space-lg); }
.hero-right { display: contents; }
.hero-sub { order: 1; }
.hero-figure { order: 2; max-width: 320px; margin: 0 auto; justify-self: center; }
.hero-checks { order: 3; }
/* Mobil untereinander statt nebeneinander */
.hero-bottom { order: 4; flex-direction: column; align-items: stretch; gap: var(--space-md); }
.hero-proof { align-self: center; }
.hero-visual { aspect-ratio: 1 / 1; height: auto; }
.site-nav .nav-cta { font-size: 0.7rem; padding: 0.6rem 0.9rem; }
.hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-md); width: 100%; }
.hero-actions .mk-btn--link { text-align: center; }
/* Mobil-CTA (Marcel, 21.07.2026): kein randloser Goldblock mehr. Schmaler,
zentriert, Text mittig — bei Umbruch lief er vorher linksbündig auf.
Gilt für alle Gold-Buttons: einzeilig statt 83px hoher Klotz. */
.mk-btn:not(.mk-btn--link):not(.nav-cta), .btn-primary {
font-size: 0.78rem; letter-spacing: 0.1em;
padding: 0.95rem 1.1rem; line-height: 1.3;
max-width: 20rem; margin-inline: auto;
}
/* Finale bleibt der lauteste Button — Höhe über Polsterung, nicht über
Schriftgröße, sonst bricht die Zeile um. */
.btn-primary { padding: 1.2rem 1.2rem; }
/* Angebots-Karte ist schmaler als der Seitenrand, daher enger gesetzt. */
.offer-card-big { padding-inline: 1.2rem; }
.offer-cta .mk-btn:not(.mk-btn--link):not(.nav-cta) {
font-size: 0.7rem; letter-spacing: 0.06em; padding: 0.95rem 0.6rem;
}
.cta-block { align-items: center; width: 100%; }
.cta-block .mk-btn {
width: 100%; max-width: 20rem; margin-inline: auto;
justify-content: center; text-align: center;
font-size: 0.78rem; letter-spacing: 0.1em;
padding: 0.95rem 1.1rem; line-height: 1.3;
}
.cta-note { text-align: center; }
.hero-proof { gap: 1rem; justify-content: center; }
.proof-avatars { flex-shrink: 0; }
.proof-text { flex: 1; min-width: 0; }
.mk-doc h1.hero-headline { font-size: 2.15rem; }
/* Zielgruppen-Eyebrow einzeilig halten */
.hero-top .mk-eyebrow { font-size: 0.55rem; letter-spacing: 0.16em; white-space: nowrap; }
.site-nav a:not(.nav-cta) { display: none; }
.site-header .logo img { width: 140px; }
.fog-track { height: 128vh; } /* ebenfalls −20 % (Marcel, 21.07.2026) */
/* Erzähl-Strecke: Bild unter den Text, nicht sticky */
.narr-grid { grid-template-columns: 1fr; }
.narr-figure { position: static; max-width: 320px; margin: 0 auto; order: 2; }
.narrative { order: 1; }
.cta-band .band-sub { max-width: 38ch; }
}
/* ============================================================
Blöcke 03–09
============================================================ */
/* ---------- Grids & Karten ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); align-items: stretch; }
/* stretch statt start (22.07.2026): Die Eignungs-Karten sollen als Paar auf
gleicher Hoehe enden — grid-2 wird nur dort genutzt. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); align-items: stretch; }
.future-card, .method-col, .offer-card, .fit-col { display: flex; flex-direction: column; gap: var(--space-sm); }
.future-card {
position: relative; overflow: hidden;
background: var(--bg-secondary); border: var(--border-hairline);
border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-card);
/* Prototyp 22.07.2026 (Marcel): Text unten verankert, obere Haelfte gehoert
dem Motiv — Bild und Text kommen sich nicht mehr in die Quere, die Karte
bleibt trotzdem EIN Stueck (kein Split). */
/* Text OBEN (Marcel, 22.07.2026): Alle Titel starten auf gleicher Hoehe,
unterschiedliche Laengen laufen unten ins Bild aus statt oben anzusetzen.
Untere Haelfte gehoert dem Motiv. */
min-height: 26rem; justify-content: flex-start;
}
/* Scrim: dunkler Verlauf unten, damit der Text auf dem helleren Bild traegt. */
.future-card::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to bottom, rgba(15,42,48,0.94) 0%, rgba(15,42,48,0.62) 38%, transparent 66%);
}
/* Gold-Licht = das SYMBOL selbst (Marcel, 22.07.2026): kein diffuser Fleck.
Karte 1: Nordstern mit Strahlenkreuz. Karte 2: kleiner Glanz auf der
Kompass-Mitte. Karte 3: Lampe + Strahl, der beim Hover aufflammt.
Glimmt leise, flammt beim Hover — nie dauerhaft pulsierend. */
.future-card::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
opacity: 0.4;
transition: opacity var(--dur-slow) var(--ease-brand);
}
.future-card:hover::after { opacity: 1; }
/* Karte 1 — Stern mit STRAHLENKREUZ (Marcel, 22.07.2026): heller Kern plus
vier feine Strahlen, damit er eindeutig als Stern liest und nicht als Mond.
Spiegelung bewusst weggelassen. */
.grid-3 .future-card:nth-child(1)::after {
background:
radial-gradient(circle at 76% 11%, rgba(255,246,220,0.95) 0%, rgba(245,218,168,0.4) 1%, transparent 2.6%),
radial-gradient(ellipse 7% 0.35% at 76% 11%, rgba(245,218,168,0.6) 0%, transparent 70%),
radial-gradient(ellipse 0.45% 5.5% at 76% 11%, rgba(245,218,168,0.6) 0%, transparent 70%),
radial-gradient(circle at 76% 11%, rgba(224,196,154,0.12) 0%, transparent 7%);
}
/* Karte 2 — der GANZE Kompass leuchtet auf (Marcel, 22.07.2026): warmer
Messing-Schein ueber dem ganzen Instrument, die Nadelspitze als hellster
Punkt darin. Ruhend leise, beim Hover erwacht das Instrument. */
.grid-3 .future-card:nth-child(2)::after {
background:
radial-gradient(ellipse 24% 17% at 52% 67%, rgba(224,196,154,0.34) 0%, rgba(224,196,154,0.14) 55%, transparent 80%),
radial-gradient(circle at 46% 61.5%, rgba(245,218,168,0.85) 0%, rgba(245,218,168,0.28) 1.6%, transparent 4%);
}
/* Karte 3 — nur kleiner Schein an der Lampe (Marcel, 22.07.2026): Der Strahl
gehoert ins BILD (kommt mit den neu generierten Motiven), CSS macht nur
das Aufleuchten. */
.grid-3 .future-card:nth-child(3)::after {
background:
radial-gradient(circle at 33.5% 58%, rgba(245,218,168,0.85) 0%, rgba(245,218,168,0.28) 1.8%, transparent 4.5%);
}
/* Leises Motiv-Bild im Kartenhintergrund (Baulig-Transparenz-Prinzip) —
die Motive sind selbst tief dunkel, daher darf die Opacity höher liegen. */
.future-card .card-bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
/* 0.85 statt 0.55 (Marcel, 22.07.2026): Die Motive waren nicht erkennbar.
Lesbarkeit unten sichert jetzt der Scrim, nicht die Bild-Daempfung. */
opacity: 0.85; pointer-events: none; user-select: none;
}
/* Neue Motive 22.07.2026 (Nano Banana 2 via MCP, 3:4): Symbole unten,
obere Haelfte leer fuer den Text. Ausschnitte je Motiv:
Stern nach oben geholt (neben das Titel-Ende), Leuchtturm nach unten
gedrueckt, damit der horizontale Strahl UNTER der letzten Textzeile laeuft. */
.future-card img[src*="card2-"] { object-position: 50% 50%; }
.future-card img[src*="card2-stern"] { object-position: 50% 50%; }
.future-card img[src*="card2-leuchtturm"] { object-position: 50% 0%; }
.future-card > :not(.card-bg) { position: relative; z-index: 2; }
/* Hover: Motiv tritt hervor, Karte hebt sich leicht (Marcel, 20.07.2026).
Bewusst kein Umdrehen und kein Schwarzweiß — der Text bleibt immer lesbar
(auch auf Touch, wo es kein Hover gibt), und Entfärben ist auf dieser
Seite dem Problem-Kapitel vorbehalten. */
.future-card {
transition: transform var(--dur-base) var(--ease-brand),
box-shadow var(--dur-base) var(--ease-brand),
border-color var(--dur-base) var(--ease-brand);
}
.future-card .card-bg {
transition: opacity var(--dur-base) var(--ease-brand), transform var(--dur-base) var(--ease-brand);
}
.future-card:hover {
transform: translateY(-5px);
border-color: rgba(224, 196, 154, 0.4);
box-shadow: var(--shadow-card), 0 22px 44px -22px rgba(0, 0, 0, 0.6),
0 0 26px -10px rgba(207, 169, 120, 0.4);
}
.future-card:hover .card-bg { opacity: 1; transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.future-card:hover, .future-card:hover .card-bg { transform: none; }
}
.future-card p { text-shadow: 0 1px 8px rgba(7, 24, 30, 0.7); }
.mk-doc .future-card h3, .mk-doc .offer-card h3 { font-family: var(--font-statement); font-weight: 600; font-size: 1.25rem; letter-spacing: var(--tracking-cinzel); text-transform: uppercase; color: var(--cream-bright); margin: 0.35rem 0 0.25rem 0; }
.card-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--cyan); }
.future-card p, .offer-card p, .method-col p, .fit-col p { max-width: none; font-size: 1.0625rem; margin: 0; }
/* ---------- Mechanismus ---------- */
.tactic { width: 120px; height: 76px; margin-bottom: 0.4rem; } /* groesser (Marcel, 22.07.2026) */
.tactic rect, .tactic line, .tactic circle, .tactic path {
fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: 0.75;
stroke-linecap: round; stroke-linejoin: round;
}
/* Options-Pfade voll cyan (Marcel, 22.07.2026): nur der Strich-Rhythmus
unterscheidet sie vom gewaehlten Gold-Weg — Cyan dadurch praesenter. */
.tactic .ghost { stroke-dasharray: 3 4; }
.tactic .ghost-head { } /* Pfeilspitzen der Options-Pfade, solid */
/* Blickkegel als weiche Flaeche ohne Kanten (Marcel, 22.07.2026). */
/* Kegel GOLD (Marcel, 22.07.2026): Grammatik der drei Icons — Cyan = du/das
Gerüst, Gold = das Wesentliche der Phase. Volle Deckkraft im selben
brass-light wie Ball und Wege — keine Transparenz-Mischfarbe, damit alle
Gold-Elemente der Reihe identisch sind. */
.tactic .cone-soft { fill: var(--brass-light); stroke: none; opacity: 1; }
.tactic .spot { fill: var(--brass-light); stroke: none; opacity: 1; }
.tactic .spot-cyan { fill: var(--cyan); stroke: none; opacity: 0.85; } /* Spieler-Punkt */
.tactic .spot-line { stroke: var(--brass-light); opacity: 1; }
.mk-doc .method-col h3 { font-family: var(--font-statement); font-weight: 600; font-size: 1.4rem; letter-spacing: var(--tracking-cinzel); text-transform: uppercase; color: var(--brass-light); margin: 0.35rem 0 0.1rem 0; }
.method-col .q { font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14; color: var(--cream); font-size: 1.15rem; margin: 0 0 0.4rem 0; }
/* Payoff-Zeile gestrichen (Marcel, 21.07.2026) — Styles mit entfernt. */
/* ---------- Kompass-Scroll-Moment (ui_kits V34, gescoped) ---------- */
.kompass-moment { position: relative; border-bottom: var(--border-hairline); }
.kompass-moment .mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono-md); text-transform: uppercase; font-size: 0.72rem; }
.kompass-moment .stage-wrap { position: relative; height: 170vh; }
.kompass-moment .stage { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1fr; align-items: center; overflow: hidden; background: var(--bg-primary); }
.kompass-moment .kompass-eyebrow { position: absolute; top: calc(64px + var(--space-lg)); left: 0; right: 0; text-align: center; z-index: 6; text-shadow: 0 0 18px rgba(7, 24, 30, 0.9); }
.kompass-moment .bg-particles { position: absolute; inset: 0; pointer-events: none; opacity: 0.6; z-index: 0; }
.kompass-moment .bg-particles span { position: absolute; width: 2px; height: 2px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 4px var(--cyan); }
/* Beidseitige Beschriftung (Marcel, 22.07.2026): Kompass mittig auf voller
Buehne, Labels wechselseitig links/rechts nahe am Objekt — klassische
Explosionszeichnung statt Randspalte. */
.kompass-moment .compass-side { position: relative; height: 100%; display: block; padding: 0; overflow: visible; }
.kompass-moment .compass-stage { position: absolute; inset: 0; }
.kompass-moment .k-halo { position: absolute; inset: 0; pointer-events: none; opacity: 0.7; z-index: 0; background: radial-gradient(ellipse 90% 80% at 50% 60%, rgba(79,200,181,0.12) 0%, rgba(79,200,181,0.06) 30%, rgba(79,200,181,0.02) 60%, transparent 100%); }
.kompass-moment .compass-stage { position: relative; width: 100%; height: 100%; z-index: 1; }
.kompass-moment .compass-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kompass-moment #bloomFar { opacity: 0.55; mix-blend-mode: screen; z-index: 1; pointer-events: none; } /* zurueckgenommen (Marcel, 22.07.): Glow als Aura, nicht als Schleier */
.kompass-moment #bloomNear { opacity: 0.65; mix-blend-mode: screen; z-index: 2; pointer-events: none; }
.kompass-moment #compassCanvas { z-index: 3; } /* drop-shadows raus (Perf 22.07.) — Kantenglow liefern die Bloom-Ebenen */
.kompass-moment .leader-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.kompass-moment .leader-layer polyline { fill: none; stroke: rgba(224, 229, 232, 0.75); stroke-width: 0.9; stroke-linejoin: round; opacity: 0; transition: opacity 0.45s ease; } /* Weiss (Marcel, 22.07.): neutraler Zeiger */
.kompass-moment .leader-layer circle { fill: none; stroke: rgba(224, 229, 232, 0.75); stroke-width: 0.8; opacity: 0; transition: opacity 0.45s ease; }
.kompass-moment .callouts-column { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.kompass-moment .callout { position: absolute; top: var(--ty, 0); display: flex; align-items: center; opacity: 0; transition: opacity 0.45s ease; pointer-events: none; width: 360px; }
.kompass-moment .callout.side-r { left: calc(50% + 290px); }
.kompass-moment .callout.side-l { left: calc(50% - 290px - 360px); }
.kompass-moment .callout.side-l .text { text-align: right; padding-left: 0; padding-right: 10px; }
.kompass-moment .callout.side-l .meaning { margin-left: auto; }
/* 5 statt 7 Bauteile (Marcel, Juli 2026): Deckel + Untergehäuse sind
Verpackung, keine Botschaft — Beschriftungen entfernt. */
.kompass-moment #callout-glass { --ty: 20vh; }
.kompass-moment #callout-needle { --ty: 33vh; }
.kompass-moment #callout-lunette { --ty: 46vh; }
.kompass-moment #callout-rose { --ty: 59vh; }
.kompass-moment #callout-pin { --ty: 72vh; }
.kompass-moment .callout .text { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; padding-left: 10px; }
.kompass-moment .callout .head { display: block; margin-bottom: 0.3rem; }
/* Dreizeilig gestapelt (Marcel, 22.07.2026): Mono-Etikett als Eyebrow oben,
Gold-Begriff frei auf eigener Zeile, Bedeutung darunter. */
.kompass-moment .callout .num { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.26em; color: var(--cyan); text-transform: uppercase; margin-bottom: 0.3rem; }
.kompass-moment .callout .name { display: block; font-family: var(--font-statement); font-weight: 600; font-size: 1.12rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass-light); margin-left: 0; } /* Cinzel = Gold, eigene Zeile */
.kompass-moment .callout .meaning { display: block; font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14; font-size: 0.95rem; color: var(--cream); max-width: 34ch; text-wrap: balance; }
/* ---------- Beweise (helle Sektion) ---------- */
.light-world { background: var(--light-bg); color: var(--ink); }
.light-world .sec-eyebrow { color: var(--ink-soft); }
.mk-doc .light-world h2.sec-headline-soft { color: var(--ink); }
.light-world p { color: var(--ink); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); align-items: start; } /* margin-bottom raus (22.07.): kollabierte mit .section-cta und ueberstimmte die Ebene 3 */
.video-card { background: #FCFBF7; border: 1px solid rgba(7,24,30,0.10); border-radius: var(--radius); overflow: hidden; box-shadow: 0 20px 46px -22px rgba(7,24,30,0.30); margin: 0; }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #E7E2D6; }
.video-body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.15rem; }
.video-body .vquote { font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14; color: var(--ink); font-size: 1.05rem; line-height: var(--leading-snug); margin: 0 0 0.5rem 0; max-width: none; }
.video-body .v-name { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); }
.video-body .attr { font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-soft); }
.lw-case { background: #FCFBF7; border: 1px solid rgba(7,24,30,0.10); border-radius: var(--radius); padding: var(--space-lg); box-shadow: 0 20px 46px -22px rgba(7,24,30,0.30); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); max-width: none; }
.lw-link { font-family: var(--font-body); font-weight: 500; color: var(--ink); border-bottom: 1px solid rgba(7,24,30,0.25); padding-bottom: 2px; }
.lw-link:hover { color: var(--ink-soft); }
.lw-case .case-eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: var(--tracking-mono-sm); text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 0.3rem; }
.lw-case p { margin: 0; max-width: none; font-size: 1.0625rem; }
/* ---------- Angebot · EIN Paket, Hormozi-Stil (Marcel, Juli 2026) ----------
Zentrierte Karte, klare Icon-Punkte mit Titel + Erklärzeile, Gold-CTA. */
/* Klarer Sektionsbeginn (Marcel, 17.07.2026): mehr Luft oben, dezente
Gold-Atmosphäre hinter der Überschrift, Eyebrow + Trenn-Ornament —
das Angebot beginnt sichtbar als neuer, eigener Abschnitt. */
.section-offer {
position: relative; overflow: hidden;
/* 21.07.2026 (Marcel): von --space-3xl (160px) auf den Standard-Rahmen
zurückgezogen. Die Extra-Luft vom 17.07. war als „klarer Sektionsbeginn"
gedacht, machte das Angebot aber zur einzigen Sektion mit abweichendem
Rand. Den Auftakt markieren jetzt Trennlinie, Gold-Atmosphäre und
Ornament — dafür braucht es keinen Sonderabstand. */
padding-top: var(--section-pad, 4.75rem);
border-top: 1px solid var(--hairline);
}
.section-offer .offer-atmo {
position: absolute; inset: 0 0 auto 0; height: 46%; pointer-events: none;
background: radial-gradient(ellipse 60% 100% at 50% 0%,
rgba(207, 169, 120, 0.12) 0%, rgba(207, 169, 120, 0.05) 40%, transparent 72%);
}
.offer-marker {
width: 7px; height: 7px; transform: rotate(45deg);
background: var(--brass-light);
box-shadow: 0 0 12px -2px rgba(224, 196, 154, 0.8);
margin-bottom: var(--space-md);
}
.offer-eyebrow { margin-bottom: var(--space-sm); }
.offer-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.offer-center .sec-sub { margin: var(--space-md) auto 0; }
/* Rahmenzeile direkt unter der Headline (Notion Block 6, 21.07.2026):
der Weg in einem Atemzug — ruhiger als die Headline, klarer als Fließtext. */
.mk-doc p.offer-frame {
margin: var(--space-md) auto 0; max-width: 44ch;
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-size: 1.2rem; line-height: var(--leading-snug);
color: var(--cream-bright); text-wrap: balance;
}
.offer-card-big {
margin-top: var(--space-xl); width: 100%; max-width: 46rem;
background: var(--bg-secondary); border: var(--border-hairline);
border-radius: var(--radius-md); box-shadow: var(--shadow-card);
padding: var(--space-xl); text-align: left;
position: relative; overflow: hidden;
}
.offer-card-big::before {
content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
background: linear-gradient(90deg, transparent, var(--brass) 30%, var(--brass-light) 50%, var(--brass) 70%, transparent);
}
.offer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-lg); }
.offer-list li { display: grid; grid-template-columns: 54px 1fr; gap: var(--space-md); align-items: start; }
/* Auffälligere Icon-Chips (Marcel, 16.07.2026): größer, Verlauf,
leiser Cyan-Schein — Icons leuchten leicht. */
.offer-icon {
/* Einfarbig Gold (Marcel, 22.07.2026): Ring UND Icon in Brass-Light —
zweifarbig (Messing+Cyan) wirkte zu bunt, einfarbig wirkt hochwertig.
Fallback-Entscheidung falls es nicht traegt: alles Cyan. Kein Glow. */
width: 54px; height: 54px; border-radius: 50%;
background: rgba(224, 196, 154, 0.05);
border: 1px solid rgba(224, 196, 154, 0.45);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.offer-icon svg {
width: 26px; height: 26px;
}
.offer-icon svg path, .offer-icon svg circle, .offer-icon svg rect, .offer-icon svg line {
/* Polierter-Metall-Verlauf wie die Gold-Headline (Marcel, 22.07.2026):
Gradient liegt als in index.html, Fallback flaches Brass-Light. */
fill: none; stroke: var(--brass-light); stroke: url(#gold-metal);
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* Item-Titel als ruhige Labels (Marcel, 17.07.2026): Titel und Text in
derselben Helligkeit, Unterschied nur über die Schriftstärke — so führt
klar die Sektions-Überschrift, nicht die Item-Titel. */
/* Fraunces auch hier (Marcel, 22.07.2026): letzte Zwischentitel-Ebene, die
noch in der Fliesstext-Schrift steckte — schliesst das System (Prozess,
FAQ, Presse). Erklaerzeilen bleiben Inter. */
.offer-list .o-title {
display: block; font-family: var(--font-editorial); font-style: italic;
font-variation-settings: "opsz" 14; font-weight: 600; font-size: 1.15rem;
color: var(--cream-bright); margin-bottom: 0.2rem;
}
.offer-list .o-desc { display: block; font-family: var(--font-body); font-size: 1.0625rem; line-height: var(--leading-body); color: var(--cream); } /* 17px-Norm (22.07.): die wichtigste Sektion hatte den kleinsten Text */
.offer-cta {
/* Trennlinie raus (Marcel, 22.07.2026): kein Button auf der Seite steht
hinter einer Linie, und der Karten-Rahmen fasst Liste und Button ohnehin
als Einheit. Abstand = Ebene 3 (Naehe-Prinzip). */
margin-top: var(--space-lg);
display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center;
}
/* ---------- Über mich + Ressourcen ---------- */
/* Eigener Sektions-Grund für „Über mich" (Marcel, 21.07.2026): Angebot,
Über mich und Eignung liefen optisch zu einer einzigen langen Sektion
zusammen. Ein Ton heller als der Seitengrund plus Haarlinien oben/unten —
genug Trennung, ohne eine dritte helle Welt aufzumachen. */
/* Der frühere Panel-Verlauf auf dunklem Grund ist entfallen (Marcel,
21.07.2026): Die Sektion ist jetzt eine helle Welt wie die Stimmen, das
trennt sie deutlicher von Angebot und Eignung als jeder Verlauf. Den
hellen Grund liefert .light-world. */
/* --- Über mich als helle Welt --------------------------------------------
.light-world deckt nur die Grundtypografie ab (p, h2, h3). Alles, was hier
sonst noch an hellen Farben gesetzt ist, würde auf Creme verschwinden. */
#ueber .about-copy strong { color: var(--ink); }
#ueber .sub-headline { color: var(--ink); }
#ueber .book-title { color: var(--ink); }
#ueber .book-note { color: var(--ink-soft); }
#ueber .book-note a { color: var(--ink); }
#ueber .press-card { color: var(--ink); border-color: rgba(7, 24, 30, 0.18); }
#ueber .press-medium,
#ueber .press-meta { color: var(--ink-soft); }
#ueber .press-head { color: var(--ink); }
/* Hover nur ueber die LINIEN (Marcel, 22.07.2026): Unterstrich und
Karten-Oberkante reagieren in Cyan, die Textfarbe bleibt Ink — Farbwechsel
im Text wirkte auf Creme nicht. Die #ueber-Basisfarben (ID-Selektor)
halten die Dunkel-Fassungs-Hover (Cream/Brass) ohnehin ausgestimmt. */
#ueber .book-note a::after { background: var(--cyan); }
#ueber .press-card:hover { border-top-color: var(--cyan); }
/* Foto ohne Einbettung (Marcel, 21.07.2026): Filter und Multiply-Schleier
waren dafür da, das Bild in den dunklen Grund einzupassen. Auf Creme machen
sie es nur blass — beide raus, das Foto zeigt jetzt seine echten Farben.
Auch der helle 1px-Rahmen entfällt, er war für dunklen Grund gedacht. */
/* Schatten exakt wie .process-card in der anderen hellen Sektion — nicht neu
erfunden, damit Objekte auf hellem Grund überall gleich liegen. */
/* Ink-Haarlinie wie die Video-Karten (Marcel, 22.07.2026): gleiches
Hell-Welt-System fuer alle Objekte. Entfernt worden war nur der helle
Cream-Rahmen, der fuer dunklen Grund gedacht war. */
#ueber .about-photo { border: 1px solid rgba(7, 24, 30, 0.10); box-shadow: 0 20px 46px -22px rgba(7, 24, 30, 0.30); }
/* Randlos-Test vom 21.07.2026 wieder entfernt: Der Bronze-Rand gehört zum
Metall-Look (Marcel, 16.07.2026 — „dünner Bronze-Rand statt hellem Rahmen")
und ist auf allen Buttons gleich. Über mich bekommt keine Sonderrolle. */
#ueber .about-photo img { filter: none; }
#ueber .about-photo::after { content: none; }
/* Fotospalte schmaler, Textspalte breiter (Marcel, 21.07.2026): Der eine Hebel
für zwei Probleme. Das Foto wird kleiner, ohne den Bildausschnitt zu ändern,
und der breitere Text braucht weniger Zeilen — dadurch schrumpft die leere
Fläche links unter dem Foto. Kleinerer gap, weil 7rem neben einer schmalen
Spalte die Sektion optisch auseinanderzieht. */
.about-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: var(--space-xl); align-items: start; }
/* Foto läuft beim Lesen mit (Marcel, 21.07.2026): Seit der längeren Über-mich-
Copy ist die Textspalte gut 1000px höher als das Bild — ohne sticky bliebe
daneben eine große Leerfläche. So bleibt das Gesicht zur Geschichte präsent.
Nur ab Zweispaltigkeit; mobil stapelt alles ohnehin. */
/* aspect-ratio bleibt 4:5 — exakt das Seitenverhältnis der Bilddatei
(1200x1500). Jeder andere Wert lässt den Browser beschneiden, das Bild wirkt
dann stärker herangezoomt. Wenn das Foto kleiner soll, ist die Spaltenbreite
in .about-grid der richtige Hebel, nicht dieses Verhältnis. */
.about-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid rgba(224, 229, 232, 0.28); box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 32px 72px -28px rgba(0,0,0,0.65); }
@media (min-width: 861px) {
.about-photo { position: sticky; top: calc(64px + var(--space-lg)); }
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.82) contrast(1.03) brightness(0.95); }
.about-photo::after { content: ""; position: absolute; inset: 0; background: rgba(15, 42, 48, 0.22); mix-blend-mode: multiply; pointer-events: none; }
/* --stack-head statt --stack-headline (Marcel, 21.07.2026): Hier folgt der
Fließtext, keine Fortsetzung der Headline — also der Kopf-zu-Inhalt-Abstand
wie in allen anderen Sektionen. */
/* margin-top entfernt (22.07.2026): Der Abstand galt der Headline, die
frueher IN der Textspalte stand — seit sie zentriert ueber der Sektion
sitzt, war er nur noch Leerraum (Desktop: Text haengt unter Foto-Oberkante,
mobil: 128px-Loch zwischen Foto und Text). */
.about-copy { display: flex; flex-direction: column; gap: var(--space-md); }
/* 62ch statt 48ch: Nutzt die breitere Textspalte aus, sonst bliebe rechts
Leerraum und der Text wäre unnötig hoch. 62 Zeichen liegen weiterhin im gut
lesbaren Bereich (45-75). */
.about-copy p { max-width: 62ch; font-size: 1.0625rem; margin: 0; }
.resources { display: flex; flex-direction: column; gap: var(--space-lg); }
/* Untere Hälfte der Über-mich-Sektion gestrafft (Marcel, 21.07.2026): Bücher
und Presse standen mit je 7rem Abstand so weit auseinander, dass die Sektion
auseinanderfiel. Auf 4rem reduziert — bewusst ein Wert aus der Spacing-Skala.
NICHT angetastet: das padding-bottom der Sektion und der Abstand über dem
Button. Beide tragen den Seitenrhythmus (überall 7rem) und markieren beim
Scrollen die Sektionsgrenze — dort auszuscheren würde auffallen. */
#ueber .resources,
#ueber .press { margin-top: var(--space-xl); }
/* Doppelter Abstand unter „Meine Bücher" / „In der Presse": Die Überschrift
bringt margin-bottom mit, der Flex-Container zusätzlich gap — zusammen 64px.
Der gap allein reicht. */
#ueber .resources .sub-headline,
#ueber .press .sub-headline { margin-bottom: 0; }
/* Bücher- und Presse-Reihe teilen sich dasselbe Raster (Marcel, 21.07.2026),
damit die Spaltenkanten untereinander bündig laufen. Gleiches minmax in
beiden Reihen — sonst brechen sie bei unterschiedlichen Breiten um. */
.book-row, .press-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-lg); }
.book { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
/* Hell-Welt-Schatten wie process-card/about-photo (Marcel, 22.07.2026):
vorher --shadow-card, ein dritter, fremder Schattenwert. */
.book .cover { box-shadow: 0 20px 46px -22px rgba(7, 24, 30, 0.30); }
/* Gleiche HÖHE statt gleicher Breite (Marcel, 21.07.2026): Die beiden Bücher
haben unterschiedliche Seitenverhältnisse — auf gleiche Breite gezwungen
wirken sie unterschiedlich groß. Auf gleicher Höhe stehen sie wie im Regal. */
.book img.cover {
height: 15rem; width: auto; max-width: 100%; align-self: flex-start;
display: block; border-radius: 2px;
border: 1px solid rgba(224, 229, 232, 0.14);
}
.book .book-title { font-family: var(--font-statement); font-weight: 600; font-size: 0.85rem; letter-spacing: var(--tracking-cinzel); text-transform: uppercase; color: var(--cream-bright); }
.book .book-note { font-family: var(--font-body); font-size: 0.9rem; color: var(--mist); }
/* „Zum Buch" mit wachsendem Unterstrich (Marcel, 21.07.2026): Die Linie war
dauerhaft sichtbar und damit reine Dekoration. Jetzt wächst sie beim Hover
wie in der Navigation, der Pfeil wandert mit — echtes Feedback statt Zierrat. */
.book .book-note a {
display: flex; align-items: center; gap: 0.35rem;
color: var(--cream); width: fit-content; margin-top: 0.4rem;
position: relative; text-decoration: none;
}
.book .book-note a::after {
content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
background: var(--brass-light);
transition: width var(--dur-base) var(--ease-brand);
}
.book .book-note a:hover { color: var(--cream-bright); }
.book .book-note a:hover::after { width: 100%; }
.book .book-note a .arw { transition: transform var(--dur-base) var(--ease-brand); }
.book .book-note a:hover .arw { transform: translateX(0.25rem); }
/* ---------- Presse-Clippings (Marcel, 21.07.2026) ----------
Bewusst ruhig: keine Logos, keine Karten-Optik mit Fläche, nur eine feine
Kante links. Fremd-Glaubwürdigkeit soll belegen, nicht schreien. */
.press { display: flex; flex-direction: column; gap: var(--space-lg); }
/* Kante links entfernt (Marcel, 21.07.2026): Sie rückte den Presse-Text um
17px ein und brach damit die Bündigkeit mit der Bücher-Reihe darüber.
Der Hover-Akzent liegt jetzt auf einer feinen Linie ÜBER der Karte. */
.press-card {
min-width: 0; display: flex; flex-direction: column; gap: 0.3rem;
padding: 0.9rem 0 0.1rem; border-top: 1px solid rgba(224, 229, 232, 0.2);
text-decoration: none; transition: border-color var(--dur-fast) var(--ease-brand);
}
.press-card:hover { border-top-color: var(--brass); }
.press-card .press-medium {
font-family: var(--font-mono); font-size: 0.66rem;
letter-spacing: var(--tracking-mono-md); text-transform: uppercase; color: var(--cyan);
}
.mk-doc .press-card .press-head {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-size: 1.05rem; line-height: var(--leading-snug); color: var(--cream-bright);
transition: color var(--dur-fast) var(--ease-brand);
}
.press-card:hover .press-head { color: var(--brass-light); }
.press-card .press-meta { font-family: var(--font-body); font-size: 0.85rem; color: var(--mist); }
/* ---------- Bewerbungs-Prozess (helle Sektion, Marcel Juli 2026) ----------
Zentrierte Karten mit leichter Rundung, farbige Icon-Chips, Nummern-Badge,
Klarheits-Call-Button mittig darunter. Mehr Farbe: Teal-Verlauf im Hintergrund. */
.field-hint { font-size: 0.85rem; color: var(--mist); }
/* Teal-Halo entfernt (Marcel, 22.07.2026): Der Prozess war die einzige helle
Sektion mit Farbschleier — gleiche Kategorie wie die frueher bemaengelten
Halos auf hell. Farbe tragen die Karten selbst. */
#prozess { background: var(--light-bg); }
#prozess .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
#prozess .grid-3 { width: 100%; }
/* Neu aufgebaut (Marcel, 22.07.2026): Das Template-Gruen (#1F5C52) kam
nirgendwo sonst auf der Seite vor — daher wirkte die Sektion billig.
Jetzt Objektsprache der hellen Welten (Ink-Haarlinien wie Video-Karten und
Ueber-mich-Foto): Chip mittig und groesser, Nummer als Mono-Eyebrow wie
die Kompass-Callouts, Titel mittig, Fliesstext linksbuendig (Seitenregel). */
.process-card {
background: #FCFBF7; border: 1px solid rgba(7, 24, 30, 0.10);
border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg);
box-shadow: 0 20px 46px -22px rgba(7, 24, 30, 0.30);
display: flex; flex-direction: column; align-items: center;
text-align: center; position: relative;
}
.p-chip {
width: 72px; height: 72px; border-radius: 50%;
background: rgba(7, 24, 30, 0.03); border: 1px solid rgba(7, 24, 30, 0.14);
display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.p-icon { width: 36px; height: 36px; }
.p-icon path, .p-icon circle { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.p-num {
font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
letter-spacing: var(--tracking-mono-md); color: var(--ink-soft);
margin-bottom: 0.5rem;
}
/* Fraunces statt Cinzel-Versal (Marcel, 22.07.2026): kleines gesperrtes
Cinzel war das steifste Element der Karte — Fraunces kursiv ist die warme,
editoriale Stimme der Seite (Hero, Schlusszeilen). Darunter eine kurze
Cyan-Linie als einziger Farbklecks (Token „kurze Trenner"). */
.mk-doc .process-card h3 {
font-family: var(--font-editorial); font-style: italic;
font-variation-settings: "opsz" 14; font-weight: 600; font-size: 1.3rem;
letter-spacing: 0; text-transform: none; line-height: var(--leading-snug);
color: var(--ink); margin: 0 0 0.9rem; text-wrap: balance;
}
.mk-doc .process-card h3::after {
content: ""; display: block; width: 34px; height: 2px;
background: var(--divider-cyan); margin: 0.75rem auto 0;
}
/* Zentriert (Marcel, 22.07.2026): Seit der Zweiteilung sind die Absaetze
kurze Haeppchen — da traegt Zentrierung, und die Karte hat EINE Achse
(Icon, Nummer, Titel, Linie, Text). Der kurze Karte-1-Text hing vorher
als linksbuendiger Klotz unterm mittigen Kopf. text-wrap: balance haelt
die Zeilen gleich lang, Silbentrennung braucht es zentriert nicht mehr. */
.process-card p {
margin: 0; max-width: 40ch; font-size: 1.0625rem; text-align: center;
text-wrap: balance;
}
/* Absatz-Abstand (Marcel, 22.07.2026): Karten 2+3 sind zweigeteilt statt
ein Block. */
.process-card p + p { margin-top: 0.8rem; }
/* Breitere Karten (Marcel, 22.07.2026): Spaltenabstand eine Stufe runter
(64 -> 38px), damit der Text mehr Platz hat. */
#prozess .grid-3 { gap: var(--space-lg); }
/* Auf Hell: gleicher Gold-Button wie überall (Marcel, 16.07.2026 — einheitlich),
nur der Schatten ist für den hellen Grund angepasst. */
.mk-btn.btn-on-light {
box-shadow:
inset 0 1px 0 rgba(255, 243, 214, 0.65),
inset 0 -1px 0 rgba(90, 62, 30, 0.4),
0 14px 30px -14px rgba(7, 24, 30, 0.45);
}
/* ---------- Sektions-Wasserzeichen (Kompassrose, sehr leise) ---------- */
.section-watermark {
position: absolute; right: -90px; top: 120px;
width: 420px; height: 420px; opacity: 0.05;
pointer-events: none; user-select: none;
}
/* ---------- Eignung: zwei Icon-Boxen (Marcel, Juli 2026) ---------- */
.fit-card {
background: var(--bg-secondary); border: var(--border-hairline);
border-radius: var(--radius-md); padding: var(--space-lg); box-shadow: var(--shadow-card);
}
/* Oben ausgerichtet statt mittig (Notion Block 8, 21.07.2026): Die Titel sind
jetzt ganze Satzanfänge und brechen um — mittig zentriert würde das Badge
gegenüber der ersten Zeile absacken. */
/* --space-sm statt --space-md (Marcel, 21.07.2026): optisch waren es 50px
zwischen Karten-Kopf und Liste, also über Ebene 3. Mit dem Zeilenüberhang
der Überschrift landet --space-sm bei rund 38px. */
.fit-head { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: var(--space-sm); }
.fit-badge {
width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
/* Kontra in warmem Signal-Terracotta statt Standard-Rot (Marcel, 16.07.2026) —
klar erkennbar, aber nicht billig. */
.fit-card.pro .fit-badge { background: rgba(79, 200, 181, 0.1); border: 1px solid rgba(79, 200, 181, 0.35); }
.fit-card.con .fit-badge { background: rgba(201, 132, 106, 0.1); border: 1px solid rgba(201, 132, 106, 0.4); }
.fit-badge svg { width: 18px; height: 18px; }
.fit-badge svg path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fit-card.pro .fit-badge svg path { stroke: var(--cyan); }
.fit-card.con .fit-badge svg path { stroke: var(--signal-error); }
.fit-card.con { border-color: rgba(201, 132, 106, 0.22); }
/* Kein Cinzel-Versal mehr (Notion Block 8, 21.07.2026): Aus „Dafür/Dagegen"
sind Satzanfänge geworden, die in der Liste weiterlaufen. Gesperrte
Großbuchstaben wären über zwei Zeilen unlesbar — deshalb Fließschrift,
halbfett, in Satzschreibung. */
.mk-doc .fit-card h3 {
font-family: var(--font-body); font-weight: 600; font-size: 1.05rem;
line-height: var(--leading-snug); letter-spacing: 0; text-transform: none;
/* margin-top 9.5px (Marcel, 22.07.2026): erste Titelzeile auf Badge-Mitte —
Badge 40px, Zeilenbox 21px, (40-21)/2. Mittig zentrieren ginge nicht,
weil zweizeilige Titel dann absacken. */
color: var(--cream-bright); margin: 9.5px 0 0; text-wrap: balance;
}
.fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
.fit-list li { position: relative; padding-left: 1.7rem; color: var(--cream); font-size: 1.0625rem; line-height: var(--leading-body); }
.fit-list.pro li::before { content: "\2713"; position: absolute; left: 0.1rem; color: var(--cyan); }
.fit-list.con li::before { content: "\00D7"; position: absolute; left: 0.1rem; color: var(--signal-error); font-size: 1.15em; line-height: 1.35; }
/* ---------- FAQ: eigenständige Sektion, aufklappbare Boxen ---------- */
.faq { margin-top: var(--space-xl); max-width: 46rem; width: 100%; }
/* Verdichtet (Marcel, 22.07.2026): Die FAQ soll wie ein bescheidenes
Nachschlagewerk wirken, nicht wie eine grosse Inhaltssektion — kleinere
Innenraender, Boxen eng zusammen, Schrift eine Stufe kleiner. */
.faq details {
background: var(--bg-secondary); border: var(--border-hairline);
border-radius: var(--radius-md); box-shadow: var(--shadow-card);
margin-bottom: 8px; padding: 0 var(--space-md);
transition: border-color var(--dur-fast) var(--ease-brand);
}
/* Letztes Element ohne Nachlauf (22.07.2026): margin-bottom ist der Abstand
ZWISCHEN den Boxen — beim letzten addierte er sich auf den Sektionsrand
(92px statt 76px). */
.faq details:last-child { margin-bottom: 0; }
.faq details[open] { border-color: rgba(79, 200, 181, 0.35); }
/* Fraunces-Fragen ueber Mist-Antworten (Marcel, 22.07.2026): Frage und
Antwort trennen sich ueber Schrift UND Helligkeit — Fraunces kursiv ist
die Zwischentitel-Ebene der Seite (Prozess-Karten, Presse, Schlusszeilen). */
.faq summary {
list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
padding: 0.8rem 0; font-family: var(--font-editorial); font-style: italic;
font-variation-settings: "opsz" 14; font-weight: 500; font-size: 1.05rem; color: var(--cream);
}
.faq summary:hover { color: var(--cream-bright); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ind { font-family: var(--font-mono); font-size: 1.1rem; color: var(--cyan); flex-shrink: 0; }
.faq summary .ind::before { content: "+"; }
.faq details[open] summary .ind::before { content: "\2013"; }
.faq .faq-body { padding: 0 0 0.9rem 0; }
.faq .faq-body p { margin: 0; max-width: 60ch; font-size: 0.9375rem; color: var(--mist); text-wrap: pretty; } /* 15px (22.07.): klar unter der 16.8px-Frage */
.faq .faq-body p + p { margin-top: 0.7rem; }
/* ---------- Finale ---------- */
.finale { border-bottom: 0; position: relative; overflow: hidden; text-align: center; }
/* Atmosphäre kommt von unten rechts — die Seite laeuft in den Schein hinein,
statt einen neuen Abschnitt zu oeffnen (Marcel, Juli 2026). */
.finale .mk-atmo-mid {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 95% 90% at 82% 96%,
rgba(31,92,82,0.95) 0%, rgba(18,58,52,0.70) 34%,
rgba(10,32,30,0.40) 60%, rgba(7,24,30,0) 82%),
var(--bg-primary);
}
.finale .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.finale .close-line {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
/* t-h1 statt t-display (Marcel, 22.07.2026): Die Riesen-Headline machte
das Finale unruhig — vier verschieden breite Textbloecke darunter. */
font-weight: 500; font-size: var(--t-h1); line-height: var(--leading-tight); color: var(--cream-bright); margin: 0; max-width: 24ch; text-wrap: balance;
}
.mk-doc p.finale-sub {
/* unten --stack-cta statt --space-2xl (Marcel, 21.07.2026): 112px ergaben
optisch 121px vor dem Button — mehr als eine Sektionsgrenze, mitten in der
Sektion. Jetzt derselbe Wert wie vor jedem anderen Button der Seite. */
margin: var(--space-lg) auto 0; max-width: 54ch; /* breiter = 2 Zeilen statt 3 (22.07.) */
font-size: 1.125rem; color: var(--cream);
}
.finale .cta-note { margin-top: 0.8rem; }
/* Beide Zeilen VOR dem Button (Marcel, 22.07.2026): nichts mehr unter dem
CTA, er schliesst die Seite ab. Einstiegspreis bewusst leise (Mist, klein),
die Klarheits-Zeile als praegnanter letzter Satz in der Fraunces-Stimme. */
/* Gleiche Stimme wie die Unterzeile (Marcel, 22.07.2026): Das „leise" (klein,
Mist) stammte aus der Position UNTER dem Button. Im Textfluss wirkte es wie
Kleingedrucktes — beim Einstiegspreis, der ein Kaufargument ist. */
.mk-doc p.finale-note {
margin: var(--space-sm) auto 0; max-width: 54ch;
font-size: 1.125rem; line-height: var(--leading-body);
color: var(--cream); text-wrap: balance;
}
.mk-doc p.finale-klar {
/* Ebene 3 statt 2 davor (Marcel, 22.07.2026): mehr Raum fuer den Schlusssatz. */
margin: var(--space-lg) auto var(--space-lg); max-width: 46ch;
font-family: var(--font-editorial); font-style: italic;
font-variation-settings: "opsz" 14; font-weight: 500;
font-size: 1.15rem; color: var(--cream-bright); text-wrap: balance;
}
/* Schritt-Zeile (nur noch danke.html) */
.steps { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.step { display: flex; align-items: center; gap: 0.7rem; }
.step .snum { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono-sm); color: var(--cyan); }
.step .slabel { font-family: var(--font-body); font-weight: 500; font-size: 1.05rem; color: var(--cream); }
.step-sep { color: var(--brass-light); font-family: var(--font-mono); }
/* ---------- Mobile für Blöcke 03–09 ---------- */
@media (max-width: 860px) {
.grid-3, .grid-2, .proof-grid, .about-grid, .lw-case { grid-template-columns: 1fr; }
.about-photo { max-width: 320px; }
.finale .close-line { font-size: 2.1rem; }
.process-card p { max-width: none; }
.mk-doc h2.sec-headline-gold { font-size: 1.7rem; }
/* Angebot: kompaktere Karte, damit die Textspalte Luft hat */
.offer-card-big { padding: var(--space-lg) var(--space-md); }
.offer-list li { grid-template-columns: 36px 1fr; gap: var(--space-sm); }
.offer-icon { width: 36px; height: 36px; }
.offer-icon svg { width: 18px; height: 18px; }
}
@media (max-width: 980px) {
.kompass-moment .compass-side { grid-template-columns: 1fr 200px; padding: 0 1rem 0 0; }
.kompass-moment .callout .name { font-size: 0.72rem; }
.kompass-moment .callout .meaning { font-size: 0.74rem; }
}
/* Sehr schmale Screens: statische, gestapelte Variante — Diagramm oben,
Bauteile als Liste darunter, keine Leader-Linien, kein Sticky. */
@media (max-width: 640px) {
.kompass-moment .stage-wrap { height: auto; }
.kompass-moment .stage { position: static; height: auto; display: block; padding: var(--space-xl) 0 var(--space-lg); }
.kompass-moment .kompass-eyebrow { position: static; display: block; margin-bottom: var(--space-md); }
.kompass-moment .compass-side { display: block; height: auto; padding: 0; }
.kompass-moment .compass-stage { height: 54vh; }
.kompass-moment .leader-layer { display: none; }
/* position: static (22.07.2026): Die Spalte erbte sonst das absolute
inset:0 der Desktop-Regel und legte die Liste UEBER die Grafik. */
.kompass-moment .callouts-column { position: static; height: auto; display: grid; grid-template-columns: 1fr; gap: var(--space-sm); padding: var(--space-md) var(--gutter) 0; }
.kompass-moment .callout { position: static; opacity: 1 !important; pointer-events: auto; width: auto; }
/* Gestapelte Liste ist einheitlich linksbuendig — die Rechtsbuendigkeit
der side-l-Callouts gehoert zum Desktop-Layout beidseits des Kompasses. */
.kompass-moment .callout.side-l .text { text-align: left; padding-right: 0; }
.kompass-moment .callout.side-l .meaning { margin-left: 0; }
.kompass-moment .callout .text { padding-left: 0; }
/* Zukunftsbild (22.07.2026): Auf 375px laeuft der Text tiefer in die Karte
als auf Desktop — der Scrim muss weiter runter, sonst liegt die letzte
Zeile auf dem hellen Horizont. */
.future-card::before {
background: linear-gradient(to bottom, rgba(15,42,48,0.94) 0%, rgba(15,42,48,0.72) 52%, transparent 82%);
}
}
/* ============================================================
Bewerbungsformular (mehrstufig, §9)
============================================================ */
:root { --signal-error: #C9846A; /* warmes Signal, kein Standard-Rot (freigegeben 09.07.2026) */ }
.form-hero { border-bottom: 0; overflow: hidden; }
/* Atmosphäre nur im oberen Bereich, weich auslaufend (Marcel, Juli 2026) —
die Eintragung selbst steht auf ruhigem Dunkel. */
.form-hero .mk-atmo-mid {
position: absolute; inset: 0 0 auto 0; height: 56vh;
-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
@media (max-width: 860px) {
.form-hero .mk-atmo-mid { height: 52vh; }
}
.form-wrap { position: relative; z-index: 2; max-width: 42rem; }
.mk-doc h1.form-headline {
font-family: var(--font-editorial); font-style: italic; font-variation-settings: "opsz" 14;
font-weight: 500; font-size: var(--t-h2); line-height: var(--leading-snug);
letter-spacing: 0; text-transform: none; color: var(--cream); margin: 0;
}
.form-intro { margin-top: var(--stack-headline); font-size: 1.0625rem; max-width: 52ch; }
.apply-form { margin-top: var(--space-xl); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.step-indicator { display: block; color: var(--cyan); letter-spacing: var(--tracking-mono-md); margin-bottom: 0.6rem; scroll-margin-top: 5.5rem; }
.step-progress { height: 1px; background: var(--hairline); margin-bottom: var(--space-lg); }
.step-progress span { display: block; height: 1px; width: 20%; background: var(--divider-strong); transition: width var(--dur-base) var(--ease-brand); }
.form-step { display: none; border: 0; margin: 0; padding: 0; }
.form-step.is-active { display: flex; flex-direction: column; gap: var(--space-lg); }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field label { font-family: var(--font-body); font-weight: 500; color: var(--mist); font-size: 0.95rem; }
.field .optional { font-weight: 400; opacity: 0.7; }
.field input, .field select, .field textarea {
font-family: var(--font-body); font-size: 1rem; color: var(--cream);
background: var(--bg-secondary); border: 1px solid var(--hairline);
border-radius: var(--radius-sm); padding: 0.85rem 1rem; width: 100%;
transition: border-color var(--dur-fast) var(--ease-brand);
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); }
.field-error { display: none; font-size: 0.85rem; color: var(--signal-error); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--signal-error); }
.field.has-error .field-error { display: block; }
.form-nav { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); flex-wrap: wrap; }
/* „Zurück" bleibt leise — nur „Weiter"/„Absenden" tragen Gold */
.form-nav .form-back, .form-nav .form-back:hover {
background: none; border: 1px solid var(--hairline); color: var(--mist);
box-shadow: none; filter: none;
}
.form-nav .form-back:hover { border-color: var(--cream); color: var(--cream); }
@media (max-width: 860px) {
.form-nav { flex-direction: column-reverse; align-items: stretch; }
.form-nav .mk-btn, .form-nav .btn-primary { width: 100%; justify-content: center; }
}
.form-note { margin-top: var(--space-lg); font-size: 0.85rem; color: var(--mist); max-width: none; }
.form-note a { color: var(--cream); border-bottom: 1px solid var(--cyan); }
/* ---------- Vorschau-Schalter ?motion=force (Marcel, 21.07.2026) ----------
Der globale Reduce-Motion-Block in colors_and_type.css setzt ALLE Dauern per
!important auf 1ms. Damit die Seite trotz aktiviertem „Bewegung reduzieren"
abgenommen werden kann, hebt .motion-force das gezielt wieder auf.
Betrifft nur die Vorschau, nicht die ausgelieferte Seite. */
html.motion-force *,
html.motion-force *::before,
html.motion-force *::after {
animation-duration: revert !important;
animation-iteration-count: revert !important;
transition-duration: revert !important;
scroll-behavior: revert !important;
}