/* =====================================================================
JB Reitsport · „Noir“ jb4 – überholte Fassung von jb2 (David, 25.10.2026): gleiches Schwarz, gleiche Fotos und
Bewegungen, aber ruhiger und moderner – keine runden Formen (Knöpfe, Schalter, Punkte eckig), kein dunkler Schleier
über den Fotos (Verläufe nur noch dort, wo Text auf dem Bild steht), Fotos einen Ticken heller (tools/jb4_hell.py),
weniger Korn, mehr Luft. Neu auf der Startseite: Körperkarte (Anatomie) und ein zweites Porträt von Jenny.
---------------------------------------------------------------------
JB Reitsport · „Noir“ – globales Stylesheet (alle Seiten)
Tokens · Basis · Typografie · Buttons · Header · Menü · Intro · Seitenübergang · Reveals
Hero · Sektionskopf · Karten · Zitat · Bild · Fotofilm · CTA-Band · Akkordeon · Formulare
Pillen · Wisch-Leiste · Vollbild-Text (.bleed) · Hero-Varianten · Sektionsmuster · Kennzahl · Footer · Sticky · Cursor ·
ruhige Fassung
Mobil zuerst. Breakpoints 375 / 768 / 1024 / 1440. Unterseiten ändern diese Datei nicht.
===================================================================== */
/* ---------------------------------------------------------------- Metrisch angeglichene Ersatzschriften
Bis die Google-Schriften da sind (display=swap), steht Arial/Times New Roman so skaliert, dass Laufweite und
Ober-/Unterlänge den Webschriften entsprechen – kein Sprung von Navigation, Header-Knopf und Hero-Text beim
Schriftwechsel (Review 3). Werte in Chromium gemessen (canvas measureText, 1000 px, typische Zeilen der Seiten):
Bebas Neue a .95 d .35 · Instrument Serif a .99 d .31 · Source Sans 3 a 1.024 d .40. Nur lokale Schriften, kein
Download; fehlt die lokale Schrift (Android), greift der nächste Eintrag im Stapel. */
@font-face { font-family: "Bebas Neue Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 58.59%; ascent-override: 162.14%; descent-override: 59.74%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: normal; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 83.83%; ascent-override: 118.1%; descent-override: 36.98%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"); size-adjust: 87.69%; ascent-override: 112.9%; descent-override: 35.35%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 93.53%; ascent-override: 109.48%; descent-override: 42.77%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 85.37%; ascent-override: 119.94%; descent-override: 46.85%; line-gap-override: 0%; }
/* ---------------------------------------------------------------- Tokens */
:root {
--night: #0B0B0C;
--night-rgb: 11, 11, 12;
--graphite-0: #0F0F11; /* Filmstreifen, tiefste Fläche */
--graphite: #141416;
--graphite-2: #1C1C1F;
--graphite-2-rgb: 28, 28, 31;
--line: #2A2A2E;
--error: #F0B49A; /* Fehlertext ≥ 9:1, kein Rot-Pink */
--light-rgb: 255, 240, 216; /* warmes Streiflicht (Spotlight-Kegel) */
--line-ui: #77726B; /* UI-Ränder, 3,9:1 auf graphite */
--bone: #EDE7DD; /* Text 16:1 */
--bone-rgb: 237, 231, 221;
--grey: #B5AFA5; /* Sekundärtext 9,0:1 (Endnote: Labels/Unterschriften waren zu grau, vorher #A7A29A) */
/* Heller Moment (.lumen, Endnote 8,4): warmes Elfenbein als Gegenlicht zur Nacht – Text in Tinte, Akzent in Bronze */
--ivory: #EEE6D7;
--ivory-rgb: 238, 230, 215;
--ivory-2: #E3D7C2;
--ink: #17140F; /* Text auf Elfenbein ≥ 12,9:1 */
--ink-2: #554C40; /* Sekundärtext auf Elfenbein ≥ 5,9:1 */
--bronze: #6E5026; /* Akzent auf Elfenbein ≥ 5,2:1 (Champagner wäre dort 1,6:1) */
--placeholder: #8C867E;
/* Akzent – Champagner (Standard). Text auf Akzentflächen immer --on-accent. */
--accent: #D2B98B;
--accent-hi: #E2CFA6;
--accent-lo: #B89A66;
--accent-rgb: 210, 185, 139;
--on-accent: #0B0B0C;
--f-display: "Bebas Neue", "Bebas Neue Fallback", "Oswald", "Arial Narrow", Impact, sans-serif;
--f-text: "Source Sans 3", "Source Sans 3 Fallback", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--f-serif: "Instrument Serif", "Instrument Serif Fallback", "Iowan Old Style", Georgia, serif;
--ease-out: cubic-bezier(.16, 1, .3, 1); /* expo.out */
--ease-in: cubic-bezier(.7, 0, .84, 0); /* expo.in */
--ease-inout: cubic-bezier(.77, 0, .18, 1); /* power4.inOut */
--ease-p3: cubic-bezier(.215, .61, .355, 1); /* power3.out */
--ease-std: cubic-bezier(.25, .1, .25, 1);
/* Abstände (Skala) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
--s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
--sec: clamp(96px, 11vw, 176px); /* Sektionsabstand (jb4: mehr Luft) */
--sec-s: clamp(72px, 8.5vw, 132px); /* kleiner Sektionsabstand */
/* Schrift-Skala */
--fs-label: 13px;
--fs-small: 15px;
--fs-lead: clamp(19px, 1.6vw, 23px);
--fs-d-s: clamp(32px, 3vw, 48px);
--fs-d-m: clamp(40px, 4.6vw, 76px);
--fs-d-l: clamp(48px, 6.6vw, 112px);
--fs-d-xl: clamp(60px, 9vw, 150px);
--fs-mega: clamp(120px, 24vw, 380px);
--fs-serif-m: clamp(34px, 3.6vw, 56px);
--fs-serif-l: clamp(42px, 5.4vw, 88px);
--fs-serif-xl: clamp(46px, 7.2vw, 120px);
--gutter: clamp(20px, 4.45vw, 64px);
--header-h: 64px;
--r: 0px; /* jb4: rechte Winkel überall */
--hair: rgba(var(--bone-rgb), .14); /* Haarlinien auf Schwarz */
--maxw: 1520px;
--hd: .15s; /* Startverzögerung des Hero-Auftritts */
}
html[data-akzent="cognac"] {
--accent: #C68A55; --accent-hi: #D9A77A; --accent-lo: #A9703F; --accent-rgb: 198, 138, 85;
}
html[data-akzent="platin"] {
--accent: #C9D0D6; --accent-hi: #E3E8EC; --accent-lo: #9AA4AD; --accent-rgb: 201, 208, 214;
}
@media (min-width: 1024px) { :root { --header-h: 80px; } }
/* ---------------------------------------------------------------- Seitenübergang (View Transitions) */
@view-transition { navigation: auto; }
/* Letterbox: alte Seite schließt sich zu einem Lichtspalt, neue öffnet sich daraus */
::view-transition {
background:
linear-gradient(90deg, rgba(var(--accent-rgb), 0), rgba(var(--accent-rgb), .9) 30%, var(--accent-hi) 50%, rgba(var(--accent-rgb), .9) 70%, rgba(var(--accent-rgb), 0)) center / min(42vw, 460px) 1px no-repeat,
var(--night);
}
/* Beide Keyframes vollständig (Review 3): ein clip-path gegen das implizite „none“ ist nicht interpolierbar und sprang
bei 50 % – der Übergang war ein harter Schnitt. Alt schließt in 0,32 s (power3.in), der Spalt steht ~40 ms allein,
neu öffnet ab 0,36 s in 0,44 s (expo.out) = 0,80 s. */
::view-transition-old(root) { animation: vt-close .32s cubic-bezier(.55, .055, .675, .19) both; }
::view-transition-new(root) { animation: vt-open .44s var(--ease-out) .36s both; }
::view-transition-group(site-header) { animation-duration: .6s; animation-timing-function: var(--ease-std); }
@keyframes vt-close {
from { clip-path: inset(0 0 0 0); transform: none; }
to { clip-path: inset(50% 0 50% 0); transform: scale(.985); }
}
@keyframes vt-open {
from { clip-path: inset(50% 0 50% 0); transform: scale(1.015); }
to { clip-path: inset(0 0 0 0); transform: none; }
}
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* ---------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
background: var(--night);
color-scheme: dark;
scroll-padding-top: calc(var(--header-h) + 16px); /* Fokus nie unter dem Header */
scroll-padding-bottom: 96px; /* … und nie unter der Sticky-Leiste */
}
@media (min-width: 1024px) { html { scroll-padding-bottom: 24px; } }
html.menu-open { overflow: hidden; }
body {
margin: 0;
min-height: 100vh; min-height: 100svh;
background: var(--night);
color: var(--bone);
font-family: var(--f-text);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 18px; } }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p {
margin: 0 0 1em;
text-wrap: pretty;
hyphens: auto; -webkit-hyphens: auto;
/* Trennung nur in langen Wörtern und nie nach 4 Buchstaben („Reak-tionen“, „Trai-ningsaufbau“) */
hyphenate-limit-chars: 12 5 5; -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
overflow-wrap: break-word;
}
/* Kurze Spalten (Leads, Karten, Schritte, CTA) mobil ohne automatische Trennung – dort wirkt sie zerhackt */
@media (max-width: 767.98px) {
.sec-head__lead, .card__text, .cta-band__content p, .alt__text p, .story__text p, .hero__sub { hyphens: manual; -webkit-hyphens: manual; }
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
blockquote { hanging-punctuation: first; }
button { font: inherit; color: inherit; }
strong { font-weight: 600; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
section[tabindex="-1"]:focus, main[tabindex="-1"]:focus, [data-focus-target]:focus { outline: none; }
[hidden] { display: none !important; }
/* Anker: nur html{scroll-padding-top} – kein zusätzliches scroll-margin (sonst landen Sprünge von anderen Seiten,
z. B. leistungen.html#physio, rund 80 px zu tief). js/site.js rechnet auf derselben Seite mit demselben Wert. */
.sr-only {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
position: fixed; left: 16px; top: 12px; z-index: 400;
padding: 12px 18px; border-radius: 999px;
background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
transform: translateY(-180%); transition: transform .25s var(--ease-out);
}
.skip:focus { transform: none; }
.muted { color: var(--grey); }
.nowrap { white-space: nowrap; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1080px; }
.i {
width: 20px; height: 20px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
/* ---------------------------------------------------------------- Typografie */
.display {
font-family: var(--f-display);
font-weight: 400;
text-transform: uppercase;
line-height: .9;
letter-spacing: .01em;
font-size: var(--fs-d-l);
hyphens: manual; -webkit-hyphens: manual;
text-wrap: balance;
}
.display--xl { font-size: var(--fs-d-xl); }
.display--l { font-size: var(--fs-d-l); }
.display--m { font-size: var(--fs-d-m); line-height: .92; }
.display--s { font-size: var(--fs-d-s); line-height: .95; }
/* Kursiv in Headlines: Serif, standardmäßig im Textton. Champagner-Kursiv nur mit .gold – höchstens zweimal je
Seite (Hero-Akzent zählt als eins). */
.display em, .em-accent {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: -.01em;
}
.display em { font-size: 1.06em; }
em.gold, .em-accent { color: var(--accent); }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; }
/* Drei Schriftrollen (SYSTEM.md §3):
1. Bebas (.display) nur für Hero, „WARUM?“, Ziffern und Plakattitel – und abwechselnd für Kapitel-H2.
2. Instrument Serif aufrecht (.title-serif, .quote) für große Sätze, Zitate, Abschluss – gemischte Schreibung.
3. Source Sans 3 für Text, Labels, Bedienelemente. */
.title-serif {
font-family: var(--f-serif); font-style: normal; font-weight: 400;
font-size: var(--fs-serif-l); line-height: 1.02; letter-spacing: -.012em;
text-transform: none; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual;
}
.title-serif--xl { font-size: var(--fs-serif-xl); line-height: .98; letter-spacing: -.018em; }
.title-serif--m { font-size: var(--fs-serif-m); line-height: 1.05; }
.title-serif em { font-style: italic; letter-spacing: -.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--bone); max-width: 44ch; }
.copy { color: var(--grey); max-width: 60ch; }
.copy strong, .copy em { color: var(--bone); }
.eyebrow {
display: flex; align-items: center; gap: 14px;
margin: 0 0 28px;
font: 600 var(--fs-label)/1.35 var(--f-text);
letter-spacing: .22em;
text-transform: uppercase;
color: var(--grey);
hyphens: manual;
}
.eyebrow__dash { width: 36px; height: 1px; background: var(--accent); flex: none; }
.label {
font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
hyphens: manual;
}
/* Maskenzeilen (Headlines Zeile für Zeile) */
.line { display: block; overflow: hidden; padding: .16em .12em .07em 0; margin: -.16em 0 -.07em; }
.line__in { display: block; }
.title-serif .line { padding-bottom: .18em; margin-bottom: -.18em; } /* Unterlängen der Serif nicht abschneiden */
/* Maskenzeilen als Flex-Spalte (Review 3): im Blockfluss fielen die negativen Ränder zweier .line zusammen (+.16 em
Lücke), während eine intern umbrechende .line den normalen Zeilenabstand hatte – ungleicher Zeilenabstand (98/113/98
px). In Flex addieren sich die Ränder, jeder Abstand ist gleich der Zeilenhöhe. */
[data-lines] { display: flex; flex-direction: column; }
.line:nth-child(2) { --li: 1; }
.line:nth-child(3) { --li: 2; }
.line:nth-child(4) { --li: 3; }
.line:nth-child(5) { --li: 4; }
/* ---------------------------------------------------------------- Buttons & Links */
.btn {
position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center; gap: 14px;
min-height: 52px; padding: 0 28px;
border: 1px solid transparent; border-radius: 0;
font: 600 13px/1 var(--f-text); letter-spacing: .17em; text-transform: uppercase;
text-decoration: none; white-space: nowrap; cursor: pointer;
translate: var(--mx, 0) var(--my, 0); /* magnetische Haupt-CTA (js/site.js) */
transition: background-color .25s var(--ease-std), border-color .25s var(--ease-std), color .25s var(--ease-std), transform .25s var(--ease-out), box-shadow .4s var(--ease-std);
-webkit-tap-highlight-color: transparent;
}
.btn .i { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.btn:hover .i { transform: translateX(4px); }
.btn:active { transform: scale(.98); }
/* Champagner flach (jb4: ohne Messing-Verlauf und Glanzkante) – beim Hover gleitet nur noch ein feiner Lichtstreif darüber */
.btn--accent {
background: var(--accent);
color: var(--on-accent);
transition: background-color .35s var(--ease-std), border-color .25s var(--ease-std), color .25s var(--ease-std), transform .25s var(--ease-out);
}
.btn--accent::before {
content: ""; position: absolute; inset: -1px; z-index: -1;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 66%);
transform: translate3d(-110%, 0, 0);
transition: transform .9s var(--ease-out);
pointer-events: none;
}
.btn--accent:hover::before, .btn--accent:focus-visible::before { transform: translate3d(110%, 0, 0); }
.btn--accent:hover, .btn--accent:focus-visible { background: var(--accent-hi); }
.btn--ghost { border-color: rgba(var(--bone-rgb), .34); color: var(--bone); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-hi); background: rgba(var(--accent-rgb), .05); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 12.5px; }
.btn--lg { min-height: 56px; padding: 0 34px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; }
/* Textlink mit gezeichneter Unterstreichung */
.link {
position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
font: 600 13px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase;
color: var(--bone); text-decoration: none; cursor: pointer;
}
.link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px;
background: var(--accent); transform-origin: 0 50%; transform: scaleX(.28);
transition: transform .6s var(--ease-out);
}
.link:has(.i)::after { right: 30px; } /* mit Pfeil endet die Linie vor dem Icon, ohne Pfeil am Textende */
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link .i { width: 18px; height: 18px; color: var(--accent); transition: transform .45s var(--ease-out); }
.link:hover .i, .link:focus-visible .i { transform: translateX(5px); }
/* .text-link steht nur in Listen/Zeilen, nie mitten im Absatz – daher volle 44-px-Trefferfläche (Review 3) */
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bone); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .7); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s var(--ease-std); }
.text-link:hover { text-decoration-color: var(--accent); }
/* ---------------------------------------------------------------- Header */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 60;
height: var(--header-h);
display: flex; align-items: center; gap: 16px;
padding: 0 var(--gutter);
border-bottom: 1px solid transparent;
view-transition-name: site-header;
transition: background-color .45s var(--ease-std), border-color .45s var(--ease-std), transform .6s var(--ease-out), -webkit-backdrop-filter .45s, backdrop-filter .45s;
}
/* Endnote 8,4: gescrollt deckend statt durchscheinendem Glas – Text und Fotos laufen nicht mehr sichtbar unter
Monogramm und Navigation durch (und kein Blur je Bild) */
.site-header.is-scrolled {
background: var(--night);
border-bottom-color: rgba(var(--bone-rgb), .09);
}
.site-header.is-hidden { transform: translate3d(0, -101%, 0); }
.site-header__progress {
position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi));
transform-origin: 0 50%; transform: scaleX(0);
pointer-events: none;
}
.menu-open .site-header__progress { opacity: 0; }
/* Menü offen: Header deckend – gescrollte Menülinks laufen sonst unter das Monogramm (Review 3) */
.menu-open .site-header { background: var(--night); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; }
.brand {
display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
margin-right: auto; text-decoration: none;
}
/* Logo (jb4, 26.10.2026, Davids Wahl „Logo 1“): Jennys verfeinertes Zeichen + „JB REITSPORT“ als SVG, Schrift in
Kurven (jb4-logo/tools/svg_logo.py). Kopf ohne Unterzeile – die wäre hier unter 12 px. */
.brand__logo { display: block; width: auto; height: 40px; transition: opacity .3s var(--ease-std); }
.brand:hover .brand__logo { opacity: .82; }
.nav { display: none; }
.header-cta { display: none; }
.nav__list { display: flex; gap: 0; }
.nav__list a {
position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
font: 600 12.5px/1 var(--f-text); letter-spacing: .13em; text-transform: uppercase;
text-decoration: none; color: rgba(var(--bone-rgb), .78);
transition: color .2s var(--ease-std);
}
.nav__list a::after {
content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 1px;
background: var(--accent); transform: scaleX(0); transform-origin: right;
transition: transform .45s var(--ease-out);
}
.nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--bone); }
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
/* Header-CTA „Termin anfragen“ auf der Termin-Seite selbst: keine zweite Gold-Pille über dem Formular (Review 3,
Art Director). visibility statt display – die Navigation bleibt beim Seitenübergang an ihrem Platz. */
.header-cta[aria-current="page"] { visibility: hidden; }
/* jb4: im Header nur eine feine Champagner-Kontur (die volle Fläche bleibt dem Hero und dem Abschluss vorbehalten) */
.site-header .header-cta { background: transparent; color: var(--bone); border-color: rgba(var(--accent-rgb), .62); }
.site-header .header-cta:hover, .site-header .header-cta:focus-visible { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.menu-btn {
position: relative; z-index: 2;
width: 48px; height: 48px; display: grid; place-items: center;
border: 1px solid rgba(var(--bone-rgb), .26); border-radius: 0;
background: rgba(var(--night-rgb), .35); cursor: pointer;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
transition: border-color .2s var(--ease-std), background-color .2s var(--ease-std);
}
.menu-btn:hover { border-color: var(--accent); }
.menu-btn__icon { position: relative; width: 20px; height: 12px; }
.menu-btn__icon span {
position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--bone); border-radius: 2px;
transition: transform .45s var(--ease-out), top .45s var(--ease-out), width .45s var(--ease-out);
}
.menu-btn__icon span:first-child { top: 1px; }
.menu-btn__icon span:last-child { top: 9px; width: 65%; left: auto; right: 0; }
.menu-btn:hover .menu-btn__icon span:last-child { width: 100%; }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon span:last-child { top: 5px; width: 100%; transform: rotate(-45deg); }
@media (min-width: 1024px) {
.nav { display: block; }
.header-cta { display: inline-flex; }
.menu-btn { display: none; }
.brand__logo { height: 46px; }
}
@media (min-width: 1280px) {
.nav__list { gap: 4px; }
.nav__list a { padding: 0 14px; font-size: 13px; letter-spacing: .14em; }
.nav__list a::after { left: 14px; right: 14px; }
.site-header { gap: 24px; }
}
/* ---------------------------------------------------------------- Mobiles Menü (Vollbild) */
.menu {
position: fixed; inset: 0; z-index: 55;
display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
padding: calc(var(--header-h) + 24px) var(--gutter) calc(24px + env(safe-area-inset-bottom));
background: var(--night);
overflow: hidden auto;
opacity: 0;
transition: opacity .32s var(--ease-std);
}
/* Abnahme 24.10.: erst der Grund deckend (≈ 110 ms), dann laufen die Menüpunkte ein – vorher lag die Hero-Headline
in den ersten 150–200 ms sichtbar unter den einfliegenden Punkten */
.menu.is-open { opacity: 1; transition-duration: .11s; }
/* Lichtschein und Korn fest am Bildschirm: absolut gesetzt zählten sie zur Scrollfläche (Menü war 338 px zu hoch
scrollbar, Review 3). Das Menü hat kein transform – „fixed“ bezieht sich hier auf das Fenster. */
.menu::before {
content: ""; position: fixed; right: -40vmax; bottom: -40vmax; width: 90vmax; height: 90vmax;
background: radial-gradient(closest-side, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), 0));
pointer-events: none;
}
.menu .grain { opacity: .1; }
.menu .menu__grain { position: fixed; }
.menu__nav, .menu__foot { position: relative; z-index: 1; }
.menu__list li { overflow: hidden; border-bottom: 1px solid var(--line); }
.menu__list a {
display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 6px 0;
text-decoration: none; color: var(--bone);
transform: translate3d(0, 105%, 0);
transition: transform .8s var(--ease-out), color .2s var(--ease-std);
}
.menu.is-open .menu__list li:nth-child(1) a { transition-delay: .12s, 0s; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: .17s, 0s; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: .22s, 0s; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: .27s, 0s; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: .32s, 0s; }
.menu.is-open .menu__list a { transform: none; }
.menu__list a:hover, .menu__list a:focus-visible, .menu__list a[aria-current="page"] { color: var(--accent-hi); }
.menu__no { font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .2em; color: var(--accent); width: 22px; }
.menu__txt { font: 400 clamp(44px, 13vw, 84px)/1 var(--f-display); text-transform: uppercase; letter-spacing: .01em; padding-top: .08em; }
.menu__foot { display: grid; gap: 18px; }
.menu__sub { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.menu__sub a {
display: inline-flex; align-items: center; min-height: 44px;
font: 600 13px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--grey);
}
.menu__sub a:hover, .menu__sub a[aria-current="page"] { color: var(--bone); }
.menu__meta { margin: 0; color: var(--grey); font-size: 15px; }
/* ---------------------------------------------------------------- Intro (1× je Sitzung, ≤ 1,6 s) */
/* Takt (Review 3, Integration 24.10. global – das Intro läuft auf der ersten Seite der Sitzung, das kann jede sein):
Spalt öffnet sich 0,30–0,53 s · Monogramm gezeichnet bis 0,63 s, gefüllt bis 0,66 s · steht bis 1,0 s ·
Letterbox öffnet 1,0–1,6 s, Monogramm blendet 1,0–1,26 s aus. Vorher öffnete sich die Letterbox, als das „JB“ erst
bei ≈ 30 % Deckkraft lag. */
.intro { display: none; }
.intro-on .intro {
display: block; position: fixed; inset: 0; z-index: 300;
animation: intro-end 0s steps(1, end) 1.6s forwards;
}
.intro__bar { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--night); }
/* Erst öffnet sich ein schmaler Lichtspalt (der erste Bildstreifen des Hero ist zu sehen), dann die Letterbox */
.intro__bar--top { top: 0; animation: intro-bar-top 1.3s var(--ease-inout) .3s both; }
.intro__bar--bottom { bottom: 0; animation: intro-bar-bottom 1.3s var(--ease-inout) .3s both; }
.intro__line {
position: absolute; left: 50%; top: 50%; z-index: 2;
width: min(42vw, 460px); height: 1px; margin: -.5px 0 0 calc(min(42vw, 460px) / -2);
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent) 22%, var(--accent-hi) 50%, var(--accent) 78%, rgba(var(--accent-rgb), 0));
transform: scaleX(0);
animation: intro-line 1.5s var(--ease-out) .05s both;
}
.intro__mark { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.intro__jb { position: absolute; left: 50%; bottom: calc(50% + 2.2vh + 14px); transform: translateX(-50%); display: block; padding: 0 .1em; }
.intro__zeichen {
display: block; width: auto; height: clamp(96px, 12vw, 150px);
animation: intro-jb .58s var(--ease-out) .06s both, intro-fade-out .26s var(--ease-std) 1s forwards;
}
/* Schriftzug unter der Lichtlinie; Unterzeile bei 80vw auf dem Handy ≥ 12 px */
.intro__name {
position: absolute; left: 50%; top: calc(50% + 2.2vh + 18px); width: min(80vw, 380px); height: auto;
transform: translateX(-50%);
animation: intro-name .9s var(--ease-std) .22s both;
}
@keyframes intro-end { to { visibility: hidden; pointer-events: none; } }
@keyframes intro-bar-top { 0% { transform: none; } 18%, 54% { transform: translate3d(0, -2.3vh, 0); } 100% { transform: translate3d(0, -101%, 0); } }
@keyframes intro-bar-bottom { 0% { transform: none; } 18%, 54% { transform: translate3d(0, 2.3vh, 0); } 100% { transform: translate3d(0, 101%, 0); } }
@keyframes intro-line {
0% { transform: scaleX(0); opacity: 1; }
30% { transform: scaleX(1); opacity: 1; }
62% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(3.4); opacity: 0; }
}
@keyframes intro-jb { from { transform: translate3d(0, 104%, 0); } }
@keyframes intro-name { 0% { opacity: 0; } 35% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; } }
@keyframes intro-fade-out { to { opacity: 0; } }
.intro-on.intro-skip .intro { animation: intro-skip .25s var(--ease-std) forwards; }
@keyframes intro-skip { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.has-intro { --hd: .95s; }
.has-intro.intro-skip { --hd: .15s; }
/* Start erst mit dem ersten gemalten Bild (Review 3): CSS-Zeitachsen laufen ab der Stilberechnung, nicht ab der
Sichtbarkeit – bei spätem ersten Bild war das Intro schon halb vorbei. Das Kopf-Skript setzt .intro-run nach dem
ersten Frame (doppeltes rAF) bzw. gleich .intro-skip, wenn dieses Bild später als 1,2 s kommt. Bis dahin stehen
Intro, Hero-Auftritt und Header im Startbild. */
.intro-on:not(.intro-run):not(.intro-skip) .intro,
.intro-on:not(.intro-run):not(.intro-skip) .intro *,
.has-intro:not(.intro-run):not(.intro-skip) [data-hero] *,
.has-intro:not(.intro-run):not(.intro-skip) .site-header { animation-play-state: paused; }
/* ---------------------------------------------------------------- Filmkorn & Licht */
.grain {
position: absolute; inset: -12%;
background: url("../assets/grain.png") repeat;
background-size: 180px 180px;
opacity: .07; /* jb4: Korn leiser (vorher .12) */
pointer-events: none;
animation: grain 1s steps(1, end) infinite;
}
.grain--soft { opacity: .05; }
/* Abnahme 24.10.: stehendes Filmkorn auf allen großen Fotoflächen ohne eigenes .grain – kaschiert das Verschmieren
hochskalierter Handyfotos (Deckkraft .1). Statisch (keine Schleife), liegt über dem Bild, unter Verläufen/Text. */
.bleed__media, .chapter__media, .quote-stage__media { isolation: isolate; } /* Korn bleibt in der Bildebene */
.bleed__media::before, .chapter__media::before, .quote-stage__media::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: url("../assets/grain.png") repeat; background-size: 180px 180px; opacity: .06;
}
.cta-band .grain--soft { opacity: .06; }
@keyframes grain {
0% { transform: translate3d(0, 0, 0); }
10% { transform: translate3d(-4%, 3%, 0); }
20% { transform: translate3d(3%, -5%, 0); }
30% { transform: translate3d(-6%, -2%, 0); }
40% { transform: translate3d(5%, 6%, 0); }
50% { transform: translate3d(-2%, 7%, 0); }
60% { transform: translate3d(7%, -3%, 0); }
70% { transform: translate3d(-7%, 4%, 0); }
80% { transform: translate3d(2%, -7%, 0); }
90% { transform: translate3d(-3%, -6%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* warmes Champagner-Lichtleck */
.leak {
position: absolute; right: -30vmax; top: -34vmax;
width: 80vmax; height: 80vmax;
background: radial-gradient(closest-side, rgba(var(--accent-rgb), .11), rgba(var(--accent-rgb), .035) 55%, rgba(var(--accent-rgb), 0));
pointer-events: none;
animation: leak 16s var(--ease-std) infinite alternate;
}
.leak--low { top: auto; bottom: -40vmax; right: auto; left: -34vmax; }
@keyframes leak {
from { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
to { transform: translate3d(-10vmax, 7vmax, 0) scale(1.12); opacity: 1; }
}
.spot { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Lichtkegel des Spotlights: hellt Gesicht und Pferdekopf weich auf (Streiflicht), folgt dem Spot per transform */
.spot-light {
position: absolute; left: 0; top: 0;
width: var(--spot-d, 60vmax); height: var(--spot-d, 60vmax);
margin: calc(var(--spot-d, 60vmax) / -2) 0 0 calc(var(--spot-d, 60vmax) / -2);
border-radius: 50%;
background: radial-gradient(closest-side, rgba(var(--light-rgb), .62), rgba(var(--light-rgb), .24) 48%, rgba(var(--light-rgb), 0));
mix-blend-mode: soft-light;
pointer-events: none;
will-change: transform;
}
/* ---------------------------------------------------------------- Einblenden (Reveals) */
.js [data-reveal] {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; transition: opacity 1.2s var(--ease-std); transition-delay: var(--d, 0s); }
.js [data-reveal="clip"] {
opacity: 1; transform: none;
clip-path: inset(14% 0 14% 0);
transition: clip-path 1.6s var(--ease-inout);
transition-delay: var(--d, 0s);
}
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="clip"] img { transform: scale(1.12); transition: transform 2.2s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal="clip"].is-in img { transform: none; }
/* Mit kurzer Deckkraft-Blende (Review 3): Umlaut-Punkte in Versal-Zeilen (LÖSUNGEN, „Lösung.“, „möglichst“) ragen über
die Maske und lagen sonst schon vor dem Auftritt sichtbar über der leeren Zeile. */
.js [data-lines] .line__in {
transform: translate3d(0, 128%, 0);
opacity: 0;
transition: transform 1.25s var(--ease-out), opacity .45s var(--ease-std);
transition-delay: calc(var(--li, 0) * .09s + var(--d, 0s));
}
.js [data-lines].is-in .line__in { transform: none; opacity: 1; }
/* gezeichnete Linie */
.rule { display: block; height: 1px; background: var(--line); }
.rule--accent { background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .15)); }
.js [data-draw] { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.8s var(--ease-inout); transition-delay: var(--d, .1s); }
.js [data-draw].is-in { transform: scaleX(1); }
/* Wort für Wort heller (scroll-gekoppelt per GSAP, js/site.js) */
[data-words] .w { display: inline-block; }
.no-anim [data-reveal], .no-anim [data-lines] .line__in, .no-anim [data-draw], .no-anim [data-reveal="clip"] img, .no-anim .num-mask__in {
opacity: 1 !important; transform: none !important; clip-path: none !important;
}
.no-anim .hero *, .no-anim .site-header { animation: none !important; }
.no-anim .intro { display: none !important; }
/* =====================================================================
HERO (Muster für alle Seiten)
===================================================================== */
/* Flex-Spalte statt absolut gesetztem Text: der Inhalt sitzt unten, schiebt die Sektion aber bei wenig Höhe
(Laptop 1366×657, 1024×600) nach unten, statt in Logo und Navigation zu laufen. */
.hero {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 100vh; min-height: max(100svh, 640px);
padding-top: calc(var(--header-h) + 32px);
overflow: hidden;
isolation: isolate;
background: var(--night);
}
.hero--short { min-height: 82vh; min-height: max(82svh, 560px); }
.hero__stage { position: absolute; inset: 0; }
.hero .hero__media { position: absolute; inset: 0; }
.hero__media img {
width: 100%; height: 100%;
object-fit: cover; object-position: var(--pos-m, var(--pos, 50% 30%)); /* Ausschnitt je Seite: style="--pos: …; --pos-m: …" am Hero */
}
@media (min-width: 1024px) { .hero__media img { object-position: var(--pos, 50% 30%); } }
.hero__fade { display: none; }
/* jb4: Verläufe nur noch als Lesegrund unter Header und Text – das Foto selbst bleibt frei */
.hero__shade {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, rgba(var(--night-rgb), .66) 0%, rgba(var(--night-rgb), .22) 10%, rgba(var(--night-rgb), 0) 18%),
linear-gradient(0deg, rgba(var(--night-rgb), .94) 0%, rgba(var(--night-rgb), .74) 28%, rgba(var(--night-rgb), .24) 50%, rgba(var(--night-rgb), 0) 62%);
}
/* Sucherecken – feine Kameramarken */
.hero__marks { display: none; }
@media (min-width: 1024px) {
.hero__marks {
display: block; position: absolute; z-index: 3; pointer-events: none;
inset: calc(var(--header-h) + 14px) calc(var(--gutter) - 26px) 14px;
--c: rgba(var(--bone-rgb), .28);
background:
linear-gradient(var(--c), var(--c)) 0 0 / 18px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 18px,
linear-gradient(var(--c), var(--c)) 100% 0 / 18px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 18px,
linear-gradient(var(--c), var(--c)) 0 100% / 18px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 18px,
linear-gradient(var(--c), var(--c)) 100% 100% / 18px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 18px;
background-repeat: no-repeat;
}
}
.hero__content {
position: relative; z-index: 4;
margin: 0 var(--gutter) calc(80px + env(safe-area-inset-bottom));
max-width: 1200px;
}
.hero__eyebrow { color: rgba(var(--bone-rgb), .92); margin-bottom: 14px; font-size: 13px; letter-spacing: .12em; gap: 10px; }
/* Mobil liegen Überzeile und Abschluss-Label oft über hellen Fotostellen (Stallwand, Laub): weicher Schatten als Grund */
@media (max-width: 1023.98px) {
.hero__eyebrow, .cta-band__claim { text-shadow: 0 1px 14px rgba(var(--night-rgb), .9), 0 0 3px rgba(var(--night-rgb), .7); }
}
.hero__eyebrow .eyebrow__dash { width: 24px; }
.hero__title {
font: 400 min(11.5vw, 72px)/.88 var(--f-display);
text-transform: uppercase;
letter-spacing: .01em;
margin: 0 0 20px;
}
/* Kursivwort der H1 im Textton (Review 3: zehn Titel mit goldenem Schlusswort wirkten wie eine Formel). Champagner nur
noch mit – Startseite plus höchstens zwei weitere Seiten (§9). */
.hero__title em { font-family: var(--f-serif); font-style: italic; text-transform: none; letter-spacing: -.01em; color: inherit; padding-left: .04em; font-size: 1.12em; }
.hero__title em.gold { color: var(--accent); }
.hero__title .line--em { padding-top: .1em; margin-top: -.12em; }
.hero__sub { max-width: 44ch; margin-bottom: 22px; color: rgba(var(--bone-rgb), .88); font-size: 16px; line-height: 1.5; hyphens: manual; -webkit-hyphens: manual; } /* Leads im ersten Bild nie getrennt */
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 479.98px) { .hero__ctas .btn--ghost { display: none; } }
.hero__bar {
position: absolute; z-index: 4;
left: var(--gutter); right: var(--gutter);
bottom: calc(16px + env(safe-area-inset-bottom));
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.scroll-hint {
display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .22em; text-transform: uppercase;
text-decoration: none; color: rgba(var(--bone-rgb), .78);
}
.scroll-hint__line { position: relative; width: 1px; height: 36px; overflow: hidden; background: rgba(var(--bone-rgb), .22); }
.scroll-hint__line::after {
content: ""; position: absolute; inset: 0; background: var(--accent);
animation: hint 2.6s var(--ease-inout) infinite;
}
@keyframes hint {
0% { transform: translate3d(0, -100%, 0); }
60%, 100% { transform: translate3d(0, 100%, 0); }
}
@media (min-width: 768px) {
.hero__eyebrow { font-size: 13px; letter-spacing: .22em; gap: 14px; margin-bottom: 18px; }
.hero__eyebrow .eyebrow__dash { width: 36px; }
.hero__title { font-size: clamp(64px, min(9.4vw, 9svh), 96px); }
.hero__sub { font-size: 18px; margin-bottom: 26px; }
.hero__content { margin-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
/* Mobil/Tablet: geteilter Hero wird gestapelt. Zusatzrunde (Juror): mehr Foto im ersten Bild – Bühne 58svh mit
gesichtsorientiertem --pos-m, die Headline beginnt auf der unteren Bildkante über einem Verlauf, die Unterzeile ist
ein Satz (.hero__sub-more entfällt), die CTA bleibt bei 375×667 im ersten Bild. Der Schalter „Bewegung pausieren“
steht rechts am Ende der Aktionszeile (Endnote 8,4: oben rechts unter dem runden Menüknopf wirkte er wie ein zweites
Navigationselement), der Scroll-Hinweis entfällt. */
@media (max-width: 1023.98px) {
.hero--split { --hero-stage-m: clamp(330px, 58svh, 700px); --hero-over-m: clamp(104px, 19svh, 168px); justify-content: flex-start; padding-top: 0; }
.hero--split .hero__stage { position: relative; inset: auto; flex: none; height: var(--hero-stage-m); overflow: hidden; }
.hero--split.hero--short .hero__stage { --hero-stage-m: clamp(300px, 52svh, 620px); }
.hero--split .hero__shade {
background:
linear-gradient(180deg, rgba(var(--night-rgb), .7) 0%, rgba(var(--night-rgb), .3) 11%, rgba(var(--night-rgb), 0) 21%),
linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .9) 13%, rgba(var(--night-rgb), .5) 25%, rgba(var(--night-rgb), .1) 38%, rgba(var(--night-rgb), 0) 46%);
}
.hero--split .hero__content { margin: calc(-1 * var(--hero-over-m)) var(--gutter) 0; }
.hero--split .hero__bar {
position: relative; z-index: 5; left: auto; right: auto; top: auto; bottom: auto;
align-self: flex-end; margin: -51px var(--gutter) 0 0; padding: 0; /* mittig auf der 58-px-CTA-Zeile */
}
.hero--split .scroll-hint { display: none; }
}
@media (max-width: 767.98px) { .hero__sub-more { display: none; } }
@media (max-width: 1023.98px) and (max-height: 700px) {
.hero--split .hero__eyebrow { margin-bottom: 10px; }
.hero--split .hero__title { margin-bottom: 14px; }
.hero--split .hero__sub { margin-bottom: 18px; }
}
@media (min-width: 1024px) {
.hero--split .hero__media { left: auto; width: 60%; }
/* schmaler Übergang: Gesicht und Pferdekopf im rechten Bildteil bleiben frei */
.hero--split .hero__fade {
display: block; position: absolute; top: 0; bottom: 0; left: 39.8%; width: 16%;
background: linear-gradient(90deg, var(--night) 0%, rgba(var(--night-rgb), .7) 30%, rgba(var(--night-rgb), .22) 66%, rgba(var(--night-rgb), 0) 100%);
}
.hero__shade {
background:
linear-gradient(180deg, rgba(var(--night-rgb), .72) 0%, rgba(var(--night-rgb), .25) 9%, rgba(var(--night-rgb), 0) 16%),
linear-gradient(0deg, rgba(var(--night-rgb), .8) 0%, rgba(var(--night-rgb), .26) 18%, rgba(var(--night-rgb), 0) 34%);
}
.hero__content { margin-bottom: clamp(96px, 12svh, 156px); }
/* Titelgröße hängt auch an der Höhe – sonst stößt er bei flachen Fenstern an den Header */
.hero__title { font-size: clamp(56px, min(6.3vw, 10.5svh), 128px); margin-bottom: 26px; }
.hero__sub { font-size: 19px; max-width: 46ch; }
.hero__bar { bottom: 28px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
.hero__eyebrow { display: none; }
.hero__title { margin-bottom: 18px; }
.hero__sub { font-size: 17px; margin-bottom: 20px; }
.hero__ctas .btn--lg { min-height: 52px; }
}
/* Hero-Auftritt (CSS, ohne JS-Abhängigkeit; Start nach Intro bzw. sofort) */
.hero .hero__media { overflow: hidden; }
.js .hero__media > img, .js .hero__media > canvas { animation: hero-settle 2.6s var(--ease-out) both; animation-delay: calc(var(--hd) - .35s); }
.js .hero__title .line__in { animation: hero-line 1.3s var(--ease-out) both; animation-delay: calc(var(--hd) + .12s + var(--li, 0) * .1s); }
.js .hero__eyebrow, .js .hero__sub, .js .hero__ctas, .js .hero__bar, .js .hero__marks { animation: hero-rise 1.1s var(--ease-out) both; }
.js .hero__eyebrow { animation-delay: var(--hd); }
.js .hero__sub { animation-delay: calc(var(--hd) + .55s); }
.js .hero__ctas { animation-delay: calc(var(--hd) + .7s); }
.js .hero__bar, .js .hero__marks { animation-delay: calc(var(--hd) + .95s); }
.js.has-intro .site-header { animation: hero-fade 1s var(--ease-std) both; animation-delay: calc(var(--hd) + .35s); }
/* Riesige Kontur-Ziffer über dem Hero-Foto (.hero__mega in .hero__stage, aria-hidden) – mobil eigene Komposition statt
Vorlagen-Hero (Review 3, z. B. ablauf.html „01“). Desktop ausgeblendet. */
.hero__mega { display: none; }
@media (max-width: 1023.98px) {
.hero__mega {
display: block; position: absolute; z-index: 3; right: calc(var(--gutter) - .03em); bottom: 66px;
font: 400 clamp(150px, 44vw, 300px)/.78 var(--f-display); letter-spacing: -.01em;
color: transparent; -webkit-text-stroke: 1.2px rgba(var(--accent-rgb), .88);
pointer-events: none; user-select: none; -webkit-user-select: none;
}
.js .hero__mega { animation: hero-rise 1.4s var(--ease-out) both; animation-delay: calc(var(--hd) + .25s); }
}
@keyframes hero-settle { from { transform: scale(1.08); } }
/* hero-line mit Deckkraft (Review 3): Umlaut-Punkte der Versal-H1 lagen im Startbild schon über der Maske und
blitzten im Intro-Lichtspalt. Ruhige Fassung: hero-fade (unten). */
@keyframes hero-line { from { transform: translate3d(0, 115%, 0); opacity: .01; } 35% { opacity: 1; } } /* .01 statt 0: LCP zählt den Hero-Text ab dem ersten Bild (Abnahme 24.10.) */
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@keyframes hero-fade { from { opacity: 0; } }
/* ---------------------------------------------------------------- Bewegung-Schalter */
/* Review 3: im Hero und auf jeder Bühne ein ruhiger Rundknopf nur mit Icon (44 px, mit Maus 36 px plus unsichtbarer
44-px-Trefferfläche), Deckkraft .7, beim Zeigen/Fokus 1. Die Beschriftung [data-motion-label] bleibt der zugängliche
Name und erscheint beim Zeigen/Fokus als Tooltip links vom Knopf. Im Footer steht die Textfassung (unten).
WCAG 2.2.2 bleibt erfüllt: der Knopf liegt weiter direkt an der bewegten Fläche. */
.motion-pill {
position: relative; flex: none;
display: inline-grid; place-items: center;
width: 44px; height: 44px; padding: 0;
border: 1px solid rgba(var(--bone-rgb), .26); border-radius: 0;
background: rgba(var(--night-rgb), .42);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase;
color: var(--bone); cursor: pointer; opacity: .7;
-webkit-tap-highlight-color: transparent;
transition: opacity .25s var(--ease-std), border-color .2s var(--ease-std), background-color .2s var(--ease-std);
}
.motion-pill:hover, .motion-pill:focus-visible { opacity: 1; border-color: var(--accent); background: rgba(var(--night-rgb), .62); }
.motion-pill .i { width: 16px; height: 16px; grid-area: 1 / 1; }
.motion-pill .i--play { display: none; }
.motion-pill[aria-pressed="true"] .i--play { display: block; }
.motion-pill[aria-pressed="true"] .i--pause { display: none; }
.motion-pill[aria-pressed="true"] { border-color: var(--accent); opacity: 1; }
.motion-pill [data-motion-label] {
position: absolute; right: calc(100% + 10px); top: 50%;
padding: 9px 13px; border-radius: 0; white-space: nowrap;
background: rgba(var(--night-rgb), .9); border: 1px solid rgba(var(--bone-rgb), .14);
font-size: 12.5px; letter-spacing: .12em; color: var(--bone);
opacity: 0; transform: translate3d(6px, -50%, 0); pointer-events: none;
transition: opacity .25s var(--ease-std), transform .35s var(--ease-out);
}
.motion-pill:hover [data-motion-label], .motion-pill:focus-visible [data-motion-label] { opacity: 1; transform: translate3d(0, -50%, 0); }
@media (hover: hover) and (pointer: fine) {
.motion-pill { width: 36px; height: 36px; }
.motion-pill::before { content: ""; position: absolute; inset: -5px; } /* Trefferfläche 46 px */
}
/* jb4: „Bild räumlich“ (Handy neigen) – nur auf iPhone/iPad sichtbar, wo Safari erst nach einem Tippen den
Bewegungssensor freigibt (js/buehne.js blendet den Knopf ein). Gleiche Form wie der Pause-Schalter. */
.hero__tools { display: inline-flex; align-items: center; gap: 8px; }
.tilt-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
height: 44px; min-width: 44px; padding: 0 10px;
border: 1px solid rgba(var(--accent-rgb), .55); background: rgba(var(--night-rgb), .42);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: var(--bone); cursor: pointer; -webkit-tap-highlight-color: transparent;
font: 600 12px/1 var(--f-text); letter-spacing: .14em;
transition: border-color .2s var(--ease-std), background-color .2s var(--ease-std);
}
.tilt-btn .i { width: 16px; height: 16px; }
.tilt-btn[aria-pressed="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), .16); }
.tilt-btn[hidden] { display: none; }
/* Mobil steht die Werkzeugleiste rechts in der CTA-Zeile: Platz freihalten, damit nichts überlappt */
@media (max-width: 1023.98px) {
.hero--split .hero__ctas { padding-right: 56px; }
.hero--split:has(.tilt-btn:not([hidden])) .hero__ctas { padding-right: 108px; }
.hero--split .hero__ctas .btn--accent { padding: 0 22px; letter-spacing: .12em; }
}
@media (max-width: 479.98px) {
.tilt-btn { width: 44px; padding: 0; }
.tilt-btn__label { display: none; }
}
/* Footer: ausgeschriebene Fassung (Pille mit Text) */
.footer .motion-pill {
display: inline-flex; align-items: center; gap: 10px;
width: auto; height: auto; min-height: 44px; padding: 0 16px; border-radius: 0;
border-color: rgba(var(--bone-rgb), .26); background: transparent; opacity: 1;
}
.footer .motion-pill::before { content: none; }
.footer .motion-pill:hover { border-color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.footer .motion-pill [data-motion-label] {
position: static; padding: 0; border: 0; border-radius: 0; background: none;
font-size: inherit; opacity: 1; transform: none; pointer-events: auto; transition: none;
}
/* =====================================================================
SEKTIONEN & SEKTIONSKOPF
===================================================================== */
.sec { position: relative; padding-block: var(--sec); }
.sec--line { border-top: 1px solid var(--line); }
.sec--tight { padding-block: var(--sec-s); }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 5.5vw, 80px); }
.sec-head .eyebrow { margin-bottom: 0; }
.sec-head__lead { margin: 0; color: var(--grey); max-width: 42ch; }
.sec-head__lead strong { color: var(--bone); }
.sec-head__link { justify-self: start; }
@media (min-width: 1024px) {
.sec-head--split { grid-template-columns: 7fr 5fr; column-gap: 64px; align-items: end; }
.sec-head--split .eyebrow { grid-column: 1 / -1; }
.sec-head--split .sec-head__aside { display: grid; gap: 20px; justify-items: start; padding-bottom: .4em; }
}
/* ---------------------------------------------------------------- Karten */
.card { position: relative; display: grid; gap: 18px; align-content: start; }
.card__media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--graphite); aspect-ratio: 4 / 5; }
.card__media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-out), filter .8s var(--ease-std);
}
.card__media::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 55%, rgba(var(--night-rgb), .55) 100%);
}
.card:hover .card__media img, .card:focus-within .card__media img { transform: scale(1.045); }
.card__no { font: 400 30px/1 var(--f-display); letter-spacing: .04em; color: var(--accent); }
.card__title { font: 400 var(--fs-d-s)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .01em; }
.card__text { margin: 0; color: var(--grey); max-width: 42ch; }
.card__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
/* ganze Karte klickbar über den Hauptlink */
.card--link .card__main::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.card--link .card__main:focus-visible { outline: none; }
.card--link .card__main:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 4px; }
.card--link .card__links a:not(.card__main) { position: relative; z-index: 2; }
/* Plakat: Text auf dem Bild */
.card--poster { gap: 0; }
.card--poster .card__body { position: relative; z-index: 2; margin-top: -120px; padding: 0 22px 22px; }
.card--poster .card__media::after { background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 40%, rgba(var(--night-rgb), .92) 100%); }
/* ---------------------------------------------------------------- Zitat */
/* Großes Zitat: Instrument Serif aufrecht, gemischte Schreibung (keine Bebas-Versalien mehr) */
.quote { margin: 0; }
.quote p {
margin: 0; max-width: 20ch;
font: 400 var(--fs-serif-xl)/1.02 var(--f-serif);
letter-spacing: -.016em;
hyphens: manual; -webkit-hyphens: manual; text-wrap: balance;
}
.quote em { font-style: italic; letter-spacing: -.01em; }
.quote--serif p { font: italic 400 clamp(34px, 4.6vw, 76px)/1.08 var(--f-serif); letter-spacing: -.005em; max-width: 24ch; }
.quote__cite { display: flex; align-items: center; gap: 14px; margin-top: 28px; font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); font-style: normal; }
.quote__cite::before { content: ""; width: 36px; height: 1px; background: var(--accent); }
/* ---------------------------------------------------------------- Bild mit Reveal + Parallaxe */
.figure { position: relative; }
.figure__frame { position: relative; overflow: hidden; border-radius: var(--r); background: var(--graphite); aspect-ratio: 4 / 5; }
.figure__frame img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.figure__frame--wide { aspect-ratio: 3 / 2; }
.figure__cap {
display: flex; align-items: baseline; gap: 12px; margin-top: 14px;
font: 600 var(--fs-label)/1.45 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: rgba(var(--bone-rgb), .8);
}
/* Mobil: inhaltstragende Unterschriften größer und enger gesperrt (12-px-Versalien waren über Fotos schwer lesbar) */
@media (max-width: 767.98px) { .figure__cap { font-size: 13px; letter-spacing: .12em; } }
.figure__cap::before { content: ""; flex: none; width: 22px; height: 1px; background: var(--accent); transform: translateY(-.3em); }
/* ---------------------------------------------------------------- Fotofilm (Überblendung + Ken Burns, nach der Uhr) */
.fotofilm { position: relative; }
.fotofilm__frames { position: relative; overflow: hidden; border-radius: var(--r); background: var(--graphite); aspect-ratio: 4 / 5; isolation: isolate; }
.fotofilm__frame {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transform-origin: 50% 40%;
will-change: opacity, transform;
}
.fotofilm__frame:not(:first-child) { opacity: 0; }
.fotofilm__shade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 74%, rgba(var(--night-rgb), .42) 100%); }
.fotofilm__ticks { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 18px; display: flex; gap: 6px; }
.fotofilm__ticks span { position: relative; flex: 1; height: 2px; border-radius: 2px; background: rgba(var(--bone-rgb), .26); overflow: hidden; }
.fotofilm__ticks span::after {
content: ""; position: absolute; inset: 0; background: var(--accent);
transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
.fotofilm__badge {
position: absolute; z-index: 4; left: 18px; top: 18px;
display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px;
border-radius: 0; background: rgba(var(--night-rgb), .55);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--bone);
}
.fotofilm__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* =====================================================================
CTA-BAND / ABSCHLUSS-BÜHNE (jede Seite endet damit)
===================================================================== */
.cta-band { position: relative; isolation: isolate; overflow: hidden; }
.cta-band__stage { position: relative; height: 80vh; height: 80svh; min-height: 460px; max-height: 760px; }
.cta-band .cta-band__media { position: absolute; inset: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 16%; }
.cta-band__fade {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 12%),
linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .82) 20%, rgba(var(--night-rgb), 0) 46%);
}
.cta-band__content { position: relative; z-index: 2; width: 100%; margin-top: -24svh; padding: 0 var(--gutter) clamp(72px, 9vw, 128px); }
.cta-band__title { margin-bottom: 26px; }
.cta-band__title.title-serif { font-size: clamp(44px, 11vw, 80px); }
.cta-band__content p { max-width: 46ch; color: rgba(var(--bone-rgb), .84); }
.cta-band__strong { color: var(--bone) !important; font-weight: 600; }
.cta-band__content .cta-band__claim { max-width: none; } /* kleines Label, eine Zeile – nicht auf 46ch der Fließschrift begrenzen */
.cta-band__claim { margin: 0 0 22px !important; font: 600 var(--fs-label)/1.4 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent) !important; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 32px; }
@media (min-width: 1024px) {
.cta-band { display: flex; align-items: center; min-height: 100vh; min-height: 100svh; }
.cta-band__stage { position: absolute; inset: 0; height: auto; min-height: 0; max-height: none; }
.cta-band .cta-band__media { inset: 0 auto 0 0; width: 62%; }
.cta-band__media img { object-position: 50% 4%; }
.cta-band__fade {
background:
linear-gradient(90deg, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), 0) 44%, rgba(var(--night-rgb), .7) 56%, var(--night) 62%),
linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 10%, rgba(var(--night-rgb), 0) 88%, var(--night) 100%);
}
.cta-band__content { margin: 0 0 0 54%; width: 46%; max-width: 680px; padding: 160px var(--gutter) 140px 0; }
.cta-band__title.title-serif { font-size: clamp(56px, 5.4vw, 96px); }
/* gespiegelt (.cta-band--flip): Bild rechts, Text links auf Schwarz – für Fotos mit dem Motiv rechts (Gesicht bzw.
Pferdeblick läge sonst im Verlauf unter dem Text). Mobil wie das normale Band. */
.cta-band--flip .cta-band__media { inset: 0 0 0 auto; width: 62%; }
.cta-band--flip .cta-band__fade {
background:
linear-gradient(270deg, rgba(var(--night-rgb), 0) 0%, rgba(var(--night-rgb), 0) 44%, rgba(var(--night-rgb), .7) 56%, var(--night) 62%),
linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 10%, rgba(var(--night-rgb), 0) 88%, var(--night) 100%);
}
.cta-band--flip .cta-band__content { margin: 0; width: 49%; max-width: 720px; padding: 160px 0 140px var(--gutter); }
}
/* Ab 1600 px: Textspalte breiter, damit jede .line des Titels einzeilig bleibt (bei 1920 brachen sie intern um) */
@media (min-width: 1600px) {
.cta-band__content, .cta-band--flip .cta-band__content { max-width: min(44vw, 860px); }
}
/* ---- Finale (.cta-band--finale, nur Startseite): eigene Schluss-Szene statt Abschluss-Band.
Letzte Runde (Kontrolle: „Rappe vor grauem Himmel, flach und matschig, Pferd und Frau kaum zu erkennen“): der Satz lag
mitten auf dem Pferdekopf, eine dunkle Ellipse dämpfte genau dort. Jetzt zuerst das Bild – Kopf, geschlossene Augen
und Jennys Hand frei und hell –, der Satz steht auf der unteren Bildkante, die Aktion darunter auf Schwarz.
Desktop: das Hochformat als Lichtsäule in der Mitte (weniger Zoom, Kopf ganz im Bild), seitlich in die Nacht
auslaufend; der Bebas-Satz ist breiter als das Bild. Mobil: Bild über die volle Höhe, Satz ab der unteren Hälfte.
Bildausschnitt per style="--pos: …; --pos-m: …" an der Sektion, eigene Fassung fin-150811 (Kopf heller gezeichnet). */
.cta-band--finale { display: block; text-align: center; }
.cta-band--finale .cta-band__stage { position: relative; inset: auto; height: 100vh; height: max(100svh, 640px); min-height: 0; max-height: none; }
.cta-band--finale .cta-band__media { inset: 0; width: 100%; }
.cta-band--finale .cta-band__media img { object-position: var(--pos-m, var(--pos, 50% 30%)); }
.cta-band--finale .cta-band__fade {
background:
linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), .2) 8%, rgba(var(--night-rgb), 0) 14%),
linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .92) 15%, rgba(var(--night-rgb), .62) 28%, rgba(var(--night-rgb), .22) 39%, rgba(var(--night-rgb), 0) 48%);
}
.cta-band--finale .cta-band__content {
margin: calc(-1 * clamp(300px, 46svh, 440px)) 0 0; width: 100%; max-width: none;
display: flex; flex-direction: column; align-items: center;
padding: 0 var(--gutter) clamp(88px, 12svh, 140px);
}
.cta-band--finale .cta-band__claim { margin-bottom: 18px !important; }
.cta-band--finale .cta-band__title {
margin: 0 0 22px; max-width: 14ch;
font: 400 clamp(52px, 15.5vw, 92px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: .01em;
text-shadow: 0 2px 30px rgba(var(--night-rgb), .45);
}
.cta-band--finale .cta-band__title .line { padding-inline: .06em; }
.cta-band--finale .cta-band__slit {
display: block; width: min(42vw, 260px); height: 1px; margin: 0 auto 26px;
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0), var(--accent) 22%, var(--accent-hi) 50%, var(--accent) 78%, rgba(var(--accent-rgb), 0));
}
.js .cta-band--finale .cta-band__slit[data-draw] { transform-origin: 50% 50%; }
.cta-band--finale .cta-band__content p { max-width: 38ch; margin-inline: auto; }
.cta-band--finale .cta-band__content .cta-band__claim { max-width: none; text-wrap: balance; }
.cta-band--finale .cta-band__actions { justify-content: center; margin-top: 26px; }
@media (min-width: 1024px) {
.cta-band--finale .cta-band__stage { height: max(100svh, 720px); }
/* Lichtsäule: Breite an der Höhe (Hochformat 2160 × 3148 → ×1,2 Zoom), mittig, seitlich weich in die Nacht */
.cta-band--finale .cta-band__media {
--fw: min(64vw, calc(max(100svh, 720px) * .82));
inset: 0 auto 0 calc(50% - var(--fw) / 2); width: var(--fw);
}
.cta-band--finale .cta-band__media img { object-position: var(--pos, 50% 30%); }
.cta-band--finale .cta-band__fade {
--fw: min(64vw, calc(max(100svh, 720px) * .82));
/* jb4: Bildsäule mit klaren Kanten (vorher seitlich in die Nacht verlaufend = Schleier); nur unten der Lesegrund */
background:
linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 8%),
linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .9) 13%, rgba(var(--night-rgb), .58) 24%, rgba(var(--night-rgb), .14) 34%, rgba(var(--night-rgb), 0) 42%);
}
.cta-band--finale .cta-band__content { margin-top: calc(-1 * clamp(250px, 33svh, 330px)); padding: 0 var(--gutter) clamp(96px, 13svh, 150px); }
.cta-band--finale .cta-band__title { max-width: none; font-size: clamp(84px, min(8.4vw, 14.5svh), 168px); }
.cta-band--finale .cta-band__content p { font-size: 20px; }
}
/* ---------------------------------------------------------------- Akkordeon */
.acc__item { border-top: 1px solid var(--line); }
.acc__item:last-child { border-bottom: 1px solid var(--line); }
.acc__q { margin: 0; }
.acc__btn {
width: 100%; min-height: 72px;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 24px 0; border: 0; background: none; text-align: left; cursor: pointer;
font: 600 clamp(19px, 1.7vw, 25px)/1.3 var(--f-text); color: var(--bone);
transition: color .2s var(--ease-std);
}
.acc__btn:hover { color: var(--accent-hi); }
/* jb4: Plus ohne Kreis – zwei feine Linien, offen wird daraus ein Strich in Champagner */
.acc__icon {
position: relative; flex: none; width: 44px; height: 44px;
color: var(--bone);
transition: color .3s var(--ease-std), transform .5s var(--ease-out);
}
.acc__icon::before, .acc__icon::after {
content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1px; margin: -.5px 0 0 -9px;
background: currentColor;
transition: transform .45s var(--ease-out);
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn:hover .acc__icon { color: var(--accent); }
.acc__btn[aria-expanded="true"] .acc__icon { color: var(--accent); transform: rotate(180deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-inout); }
.acc__panel.is-open { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > * { margin: 0; padding: 0 64px 30px 0; color: var(--grey); max-width: 62ch; opacity: 0; transition: opacity .5s var(--ease-std) .1s; }
.acc__panel.is-open .acc__inner > * { opacity: 1; }
.acc__inner > * + * { margin-top: -14px; }
/* ---------------------------------------------------------------- Formulare */
.form { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.field label:not(.chip):not(.check), .field legend {
font: 600 15px/1.3 var(--f-text); letter-spacing: .02em; color: var(--bone); padding: 0;
}
.field legend { margin-bottom: 10px; }
.req { color: var(--accent); }
.opt { color: var(--grey); font-weight: 400; }
.input, .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="search"], .field select, .field textarea {
width: 100%; min-height: 52px; padding: 13px 16px;
background: var(--night);
border: 1px solid var(--line-ui); border-radius: var(--r);
color: var(--bone); font: 400 17px/1.45 var(--f-text);
-webkit-appearance: none; appearance: none;
transition: border-color .2s var(--ease-std), box-shadow .3s var(--ease-std);
}
.field select {
padding-right: 44px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDE7DD' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); opacity: 1; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--grey); }
.input:focus-visible, .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 0 0 6px rgba(var(--accent-rgb), .14);
}
.field__help { margin: 0; font-size: 14px; line-height: 1.45; color: var(--grey); }
.field__err { display: none; margin: 0; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--error); }
.field__err .i { width: 18px; height: 18px; margin-top: 1px; }
.field.is-invalid .field__err { display: flex; }
.field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--error); box-shadow: inset 3px 0 0 var(--error); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
border: 1px solid var(--line-ui); border-radius: 999px;
font: 600 14px/1.2 var(--f-text); color: var(--bone);
transition: background-color .2s var(--ease-std), border-color .2s var(--ease-std), color .2s var(--ease-std);
}
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.check { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; cursor: pointer; font-size: 15px; line-height: 1.5; color: var(--grey); }
.check input { position: absolute; left: 0; top: 0; z-index: 1; width: 28px; height: 28px; margin: 0; opacity: 0; cursor: pointer; }
.check__box {
width: 28px; height: 28px; display: grid; place-items: center;
border: 1px solid var(--line-ui); border-radius: var(--r); background: var(--night);
transition: background-color .2s var(--ease-std), border-color .2s var(--ease-std);
}
.check__box svg { width: 18px; height: 18px; fill: none; stroke: var(--on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease-std), transform .25s var(--ease-out); }
.check:hover .check__box { border-color: var(--accent); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box svg { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 3px; }
.field.is-invalid .check__box { border-color: var(--error); }
.check a { color: var(--bone); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.form-note { margin: 0; font-size: 14px; color: var(--grey); }
/* ---------------------------------------------------------------- Pillen & Platzhalter */
.pill {
display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px;
border: 1px solid var(--line-ui); border-radius: 0;
font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--bone);
white-space: nowrap;
}
.pill--accent { border-color: rgba(var(--accent-rgb), .6); color: var(--accent-hi); }
.tbd {
display: inline-flex; align-items: center; gap: 10px; min-height: 32px; padding: 0;
border: 0;
font: 600 var(--fs-label)/1.2 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}
.tbd::before { content: ""; width: 18px; height: 1px; background: var(--accent); flex: none; }
/* ---------------------------------------------------------------- Wisch-Leiste (Scroll-Snap) */
.swipe { position: relative; }
.swipe__track {
display: grid; grid-auto-flow: column; grid-auto-columns: var(--swipe-w, 80%);
gap: var(--swipe-gap, 14px);
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
padding-inline: var(--gutter); padding-bottom: 4px;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.swipe__track::-webkit-scrollbar { display: none; }
.swipe__track > * { scroll-snap-align: start; min-width: 0; }
.swipe__track:focus-visible { outline-offset: -2px; }
.swipe.is-dragging .swipe__track { scroll-snap-type: none; cursor: grabbing; }
.swipe__ui { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding-inline: var(--gutter); }
/* Zähler „01 / 04“ nur, wo er Information trägt (Galerie): .swipe--count */
.swipe__count { display: none; font: 400 20px/1 var(--f-display); letter-spacing: .06em; color: var(--bone); min-width: 64px; }
.swipe--count .swipe__count { display: inline; }
.swipe__count [data-swipe-current] { color: var(--accent); }
.swipe__bar { position: relative; flex: 1; height: 1px; background: var(--line); }
.swipe__fill { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, .25)); transition: transform .3s var(--ease-out); }
.swipe__btn {
flex: none; width: 44px; height: 44px; display: grid; place-items: center;
border: 1px solid var(--line-ui); border-radius: 0; background: transparent; color: var(--bone); cursor: pointer;
transition: border-color .2s var(--ease-std), color .2s var(--ease-std), opacity .2s var(--ease-std);
}
.swipe__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.swipe__btn:disabled { opacity: .35; cursor: default; }
.swipe.is-static .swipe__ui { display: none; }
/* Pfeile erst ab Tablet – auf dem Handy wischt man; mobil bleibt nur der feine Fortschrittsstrich */
@media (max-width: 767.98px) { .swipe__btn { display: none; } .swipe__ui { margin-top: 18px; } }
@media (min-width: 768px) { .swipe__track { --swipe-w: 46%; } }
@media (min-width: 1024px) {
.swipe__track { --swipe-w: 30%; --swipe-gap: 20px; }
.swipe__ui { max-width: var(--maxw); margin-inline: auto; }
}
/* Laufband entfällt (Review 23.10.: wirkt nach Agentur-Vorlage). Werte stattdessen ruhig gesetzt, siehe start.css .st-values. */
/* ---------------------------------------------------------------- Vollflächiges Bild mit Text im Bild (.bleed) */
.bleed { position: relative; isolation: isolate; overflow: hidden; overflow: clip; background: var(--night); }
.bleed__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--graphite); }
.bleed__media img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.bleed__shade {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .5) 14%, rgba(var(--night-rgb), 0) 34%);
}
.bleed__content { position: relative; z-index: 2; margin-top: -64px; padding-bottom: var(--sec-s); }
/* Mobil: Fotounterkante weich in Schwarz auslaufen lassen – .bleed__shade gilt der ganzen Sektion, die Unterkante des
Bildes schnitt sonst hart durch Label und Titel, die das Bild überlappen (Review 3, index „Ich bin“) */
@media (max-width: 1023.98px) {
.bleed__media::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
background: linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .88) 24%, rgba(var(--night-rgb), .42) 58%, rgba(var(--night-rgb), 0) 100%);
}
}
@media (min-width: 1024px) {
.bleed { display: flex; align-items: flex-end; min-height: 100vh; min-height: clamp(680px, 100svh, 1080px); }
.bleed__media { position: absolute; inset: 0; aspect-ratio: auto; }
.bleed__shade {
z-index: 1;
background:
linear-gradient(90deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), .74) 26%, rgba(var(--night-rgb), .26) 40%, rgba(var(--night-rgb), 0) 50%),
linear-gradient(0deg, rgba(var(--night-rgb), .78) 0%, rgba(var(--night-rgb), 0) 28%),
linear-gradient(180deg, var(--night) 0%, rgba(var(--night-rgb), 0) 10%);
}
.bleed__content { margin: 0 auto; padding-block: 160px clamp(80px, 11svh, 140px); }
}
/* =====================================================================
HERO-VARIANTEN FÜR UNTERSEITEN (SYSTEM.md §4.1 – je Seite genau EIN Hero, nie zwei Seiten mit derselben Variante
hintereinander in der Navigation). A .hero (Vollbild) · B .hero--split [.hero--flip] · C .hero--type ·
D .hero--portrait · E .hero--quiet. Alle teilen Auftritt, Schalter und Rückzug beim Scrollen (data-hero).
===================================================================== */
/* ---- A Vollbild (.hero.hero--full): Text links unten – links zusätzlich abdunkeln, damit er auf hellem Himmel/Sand
lesbar bleibt (Gesicht/Pferdekopf per --pos in die rechte Bildhälfte legen) */
@media (min-width: 1024px) {
.hero--full .hero__shade {
background:
linear-gradient(90deg, rgba(var(--night-rgb), .78) 0%, rgba(var(--night-rgb), .42) 30%, rgba(var(--night-rgb), 0) 56%),
linear-gradient(180deg, rgba(var(--night-rgb), .82) 0%, rgba(var(--night-rgb), 0) 16%),
linear-gradient(0deg, rgba(var(--night-rgb), .95) 0%, rgba(var(--night-rgb), .5) 24%, rgba(var(--night-rgb), 0) 48%);
}
.hero--full .hero__content { max-width: min(760px, 56vw); }
}
/* mobil steht der Text bis in die obere Bildhälfte (Überzeile über heller Stallwand): Verlauf höher ziehen */
@media (max-width: 1023.98px) {
.hero--full .hero__shade {
background:
linear-gradient(180deg, rgba(var(--night-rgb), .8) 0%, rgba(var(--night-rgb), 0) 17%),
linear-gradient(0deg, rgba(var(--night-rgb), .97) 0%, rgba(var(--night-rgb), .86) 34%, rgba(var(--night-rgb), .52) 56%, rgba(var(--night-rgb), .18) 68%, rgba(var(--night-rgb), 0) 78%);
}
}
/* ---- B‘ geteilter Hero, gespiegelt: Bild links, Text rechts (Desktop); mobil wie --split gestapelt */
@media (min-width: 1024px) {
.hero--split.hero--flip .hero__media { left: 0; right: auto; width: 60%; }
.hero--split.hero--flip .hero__fade {
left: 38.2%; width: 22%;
background: linear-gradient(270deg, var(--night) 0%, rgba(var(--night-rgb), .86) 22%, rgba(var(--night-rgb), .48) 54%, rgba(var(--night-rgb), 0) 100%);
}
.hero--flip .hero__content { margin-left: 58%; margin-right: var(--gutter); max-width: 600px; }
.hero--flip .hero__title { font-size: clamp(52px, min(5.2vw, 9.5svh), 104px); }
.hero--flip .hero__sub { max-width: 40ch; }
}
/* ---- C Typografischer Hero mit Fotofilm-Streifen (Cinemascope 2,39 : 1) */
.hero--type {
justify-content: flex-start;
min-height: 0;
padding-top: calc(var(--header-h) + clamp(44px, 9svh, 120px));
}
.hero--type .hero__content { margin: 0 var(--gutter); max-width: none; }
.hero--type .hero__title {
font: 400 clamp(48px, 13vw, 84px)/.98 var(--f-serif);
text-transform: none; letter-spacing: -.02em; margin-bottom: 0;
}
.hero--type .hero__title em { font-size: 1em; padding-left: 0; }
.hero--type .hero__title .line { padding-bottom: .16em; margin-bottom: -.16em; }
.hero__row { display: grid; gap: 22px; margin-top: 26px; }
.hero__row .hero__sub { margin: 0; }
.hero__strip { position: relative; z-index: 3; margin: clamp(36px, 6svh, 72px) 0 0; }
.hero__strip .fotofilm__frames { aspect-ratio: 4 / 3.3; border-radius: 0; }
.hero__strip .fotofilm__ticks { left: var(--gutter); right: var(--gutter); }
.hero__strip-cap { margin: 14px var(--gutter) 0; }
.hero--type .hero__bar { position: relative; left: auto; right: auto; bottom: auto; margin: 10px var(--gutter) 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
/* Auftritt: der Streifen öffnet sich aus dem Lichtspalt (Marken-Motiv aus Intro und Seitenübergang) */
.js .hero__strip .fotofilm__frames { animation: strip-open 1.5s var(--ease-inout) both; animation-delay: calc(var(--hd) + .4s); }
@keyframes strip-open { from { clip-path: inset(49.4% 0 49.4% 0); } to { clip-path: inset(0 0 0 0); } }
@media (min-width: 768px) {
.hero__row { grid-template-columns: minmax(0, 46ch) auto; justify-content: space-between; align-items: end; column-gap: 48px; }
.hero__strip .fotofilm__frames { aspect-ratio: 2 / 1; }
}
@media (min-width: 1024px) {
.hero--type .hero__title { font-size: clamp(84px, min(9.4vw, 15svh), 172px); line-height: .94; }
.hero__row { margin-top: 34px; }
.hero__strip .fotofilm__frames { aspect-ratio: 2.39 / 1; max-height: 64svh; width: 100%; }
/* Der Streifen reicht unter den ersten Bildschirm – der Schalter „Bewegung pausieren“ liegt deshalb oben rechts im
Streifen, also im ersten Bildschirm direkt an der bewegten Fläche (WCAG 2.2.2). Streifen und Leiste teilen sich
eine Rasterzeile; der Scroll-Hinweis entfällt hier (der Streifen zeigt selbst, dass es weitergeht). */
.hero--type { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.hero--type > .hero__content { grid-row: 1; grid-column: 1; }
.hero--type > .hero__strip { grid-row: 2; grid-column: 1; }
.hero--type > .hero__bar {
grid-row: 2; grid-column: 1; align-self: start; justify-self: end;
position: relative; z-index: 4; margin: calc(clamp(36px, 6svh, 72px) + 18px) var(--gutter) 0; padding: 0; /* Streifen-Abstand + 18 px */
}
.hero--type .hero__bar .scroll-hint { display: none; }
.js .hero--type .hero__bar { animation-delay: calc(var(--hd) + 1.5s); } /* erst, wenn der Streifen offen ist */
}
/* ---- D Porträt-Hero: riesiger Name hinter dem Bild, als Kontur davor (der Name „läuft durch“ das Porträt) */
.hero--portrait {
display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
padding-top: calc(var(--header-h) + 18px);
}
.hero__name {
grid-row: 1; grid-column: 1; position: relative; z-index: 1; margin: 0 var(--gutter);
font: 400 clamp(84px, 25.5vw, 320px)/.8 var(--f-display);
text-transform: uppercase; letter-spacing: .005em; color: rgba(var(--bone-rgb), .94);
pointer-events: none; user-select: none; -webkit-user-select: none; hyphens: manual;
}
.hero__name .line__in { white-space: nowrap; padding-top: .06em; }
.hero__name--line { z-index: 3; color: transparent; -webkit-text-stroke: 1px rgba(var(--accent-rgb), .9); }
.hero__portrait {
grid-row: 2; grid-column: 1; position: relative; z-index: 2; justify-self: end;
width: 80%; aspect-ratio: 4 / 5; margin: -13vw var(--gutter) 0 0;
overflow: hidden; border-radius: var(--r); background: var(--graphite);
}
.hero--portrait .hero__content { grid-row: 3; margin: 28px var(--gutter) 0; }
.hero--portrait .hero__title { font-size: clamp(44px, 12vw, 64px); }
.hero--portrait .hero__bar { grid-row: 4; position: relative; left: auto; right: auto; bottom: auto; margin: 18px var(--gutter) 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.js .hero__name .line__in { animation: hero-line 1.4s var(--ease-out) both; animation-delay: calc(var(--hd) + .05s + var(--li, 0) * .11s); }
.js .hero__portrait { animation: hero-rise 1.3s var(--ease-out) both; animation-delay: calc(var(--hd) + .25s); }
@media (min-width: 1024px) {
/* Namensgröße hängt an Breite und Höhe; das Porträt beginnt bei ~75 % der Breite von „JENNIFER“, damit der Name
immer durch das Bild läuft (1024×600 bis 1920×1080 geprüft) */
.hero--portrait { --name-fs: clamp(120px, min(16vw, 27svh), 300px); align-content: end; min-height: max(100svh, 640px); padding-top: calc(var(--header-h) + 24px); }
.hero__name { align-self: start; font-size: var(--name-fs); }
.hero__portrait {
position: absolute; z-index: 2; margin: 0;
grid-row: auto; grid-column: auto; /* sonst wäre die Rasterzelle der Bezugsrahmen (absolut im Grid) */
top: calc(var(--header-h) + 22px); left: calc(var(--gutter) + 2.12 * var(--name-fs));
height: calc(100% - var(--header-h) - 48px); width: auto; max-width: calc(100% - var(--gutter) * 2 - 2.12 * var(--name-fs));
}
.hero--portrait .hero__content { grid-row: 2; margin: 32px var(--gutter) clamp(88px, 11svh, 140px); max-width: min(540px, calc(2.12 * var(--name-fs) - 32px)); }
/* Titelgröße an den Namen gekoppelt: eine zweizeilige H1 mit Kursivzeile passt bei 1024×600 und 1366×657 neben
das Porträt (die Textspalte hängt an 2,12 × --name-fs) */
.hero--portrait .hero__title { font-size: clamp(40px, calc(var(--name-fs) * .3), 80px); }
.hero--portrait .hero__bar { position: absolute; grid-row: auto; left: var(--gutter); right: auto; bottom: 28px; margin: 0; padding: 0; }
}
/* ---- E Stiller Hero (Fragen, Rechtliches): Serif, Haarlinie, optional ein gerahmtes Bild mit Sucherecken */
.hero--quiet {
display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
min-height: 0; padding: calc(var(--header-h) + clamp(56px, 12svh, 136px)) 0 clamp(48px, 7svh, 88px);
}
.hero--quiet .hero__content { margin: 0 var(--gutter); max-width: 920px; }
.hero--quiet .hero__title { font: 400 clamp(46px, 12.5vw, 72px)/1 var(--f-serif); text-transform: none; letter-spacing: -.016em; margin-bottom: 0; }
.hero--quiet .hero__title em { font-size: 1em; padding-left: 0; }
.hero--quiet .hero__title .line { padding-bottom: .16em; margin-bottom: -.16em; }
.hero__rule { display: block; width: 72px; height: 1px; margin: 30px 0 26px; background: var(--accent); transform-origin: 0 50%; }
.js .hero__rule { animation: rule-draw 1.4s var(--ease-inout) both; animation-delay: calc(var(--hd) + .45s); }
@keyframes rule-draw { from { transform: scaleX(0); } }
.hero__frame { position: relative; z-index: 2; width: 78%; justify-self: end; margin: 40px var(--gutter) 0 0; }
.hero__frame-in { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--graphite); }
.hero__frame-in::after { /* Sucherecken */
content: ""; position: absolute; inset: 12px; z-index: 3; pointer-events: none;
--c: rgba(var(--bone-rgb), .5);
background:
linear-gradient(var(--c), var(--c)) 0 0 / 16px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 16px,
linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 16px,
linear-gradient(var(--c), var(--c)) 0 100% / 16px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 16px,
linear-gradient(var(--c), var(--c)) 100% 100% / 16px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 16px;
background-repeat: no-repeat;
}
.hero__frame .figure__cap { margin-top: 12px; }
.js .hero__frame { animation: hero-rise 1.2s var(--ease-out) both; animation-delay: calc(var(--hd) + .3s); }
.hero--quiet .hero__bar { position: relative; left: auto; right: auto; bottom: auto; margin: 26px var(--gutter) 0; }
@media (min-width: 1024px) {
.hero--quiet { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(48px, 6vw, 112px); align-items: end; padding-inline: var(--gutter); }
.hero--quiet .hero__content { margin: 0; }
.hero--quiet .hero__title { font-size: clamp(64px, min(6.6vw, 12svh), 116px); }
.hero__frame { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; max-height: 70svh; }
.hero__frame-in { max-height: calc(70svh - 40px); margin-left: auto; }
.hero--quiet .hero__bar { grid-column: 1; margin: 30px 0 0; }
}
/* =====================================================================
SEKTIONSMUSTER (SYSTEM.md §4.16–4.22): Fotostrecke · Text-Bild-Wechsel · Zitat-Bühne · Sticky-Erzählung ·
Abspann · Kartenraster · Kapitel-Blende · kompaktes CTA-Band
===================================================================== */
/* ---- Große randlose Fotostrecke (.reel) – gleiche Höhe, Breite nach Seitenverhältnis (--ar), Untertitel im Bild */
.reel { display: grid; gap: 6px; }
.reel__item { position: relative; overflow: hidden; margin: 0; aspect-ratio: var(--ar-m, 4 / 5); background: var(--graphite); }
.reel__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); transition: transform 1.4s var(--ease-out); }
.reel__item::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 62%, rgba(var(--night-rgb), .72) 100%); }
.reel__cap {
position: absolute; z-index: 2; left: var(--gutter); right: var(--gutter); bottom: 18px; text-align: center;
font: italic 400 clamp(19px, 1.5vw, 23px)/1.3 var(--f-serif); color: var(--bone); text-wrap: balance;
}
/* mobil eigene Komposition: jedes zweite Bild eingerückt (Rhythmus statt Stapel) */
.reel__item:nth-child(even) { width: 84%; justify-self: end; }
@media (min-width: 768px) {
.reel { display: flex; gap: 6px; height: clamp(420px, 80svh, 920px); }
.reel__item, .reel__item:nth-child(even) { flex: var(--ar, .8) 1 0; width: auto; min-width: 0; aspect-ratio: auto; height: 100%; }
.reel__item:hover img { transform: scale(1.03); }
}
/* ---- Text-Bild-Wechsel (.alt) – Bild im Anschnitt bis zum Rand, Text versetzt; jede zweite Reihe gespiegelt */
.alt { display: grid; gap: clamp(72px, 9vw, 152px); }
.alt__row { display: grid; }
.alt__media { margin: 0; }
.alt__frame { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); background: var(--graphite); }
.alt__frame img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.alt__text {
position: relative; z-index: 2; margin: -56px var(--gutter) 0 calc(var(--gutter) + 10%);
padding: 26px 0 0 22px; background: var(--night);
}
.alt__row:nth-child(even) .alt__text { margin: -56px calc(var(--gutter) + 10%) 0 var(--gutter); padding: 26px 22px 0 0; }
.alt__no { display: block; margin-bottom: 14px; font: 400 22px/1 var(--f-display); letter-spacing: .08em; color: var(--accent); }
.alt__title { margin-bottom: 18px; }
.alt__text p { color: var(--grey); max-width: 44ch; }
@media (min-width: 1024px) {
.alt__row { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-right: var(--gutter); }
.alt__media { grid-column: 1 / span 7; }
.alt__frame { aspect-ratio: auto; height: clamp(520px, 86svh, 940px); }
.alt__text { grid-column: 9 / span 4; margin: 0; padding: 0; background: none; }
.alt__row:nth-child(even) { padding: 0 0 0 var(--gutter); }
.alt__row:nth-child(even) .alt__media { grid-column: 6 / span 7; grid-row: 1; }
.alt__row:nth-child(even) .alt__text { grid-column: 1 / span 4; grid-row: 1; margin: 0; padding: 0; }
}
/* ---- Zitat-Bühne (.quote-stage) – zentrierter Moment; --photo: Satz auf abgedunkeltem Vollbild */
.quote-stage { position: relative; overflow: hidden; overflow: clip; padding: clamp(112px, 14vw, 220px) 0 clamp(104px, 12vw, 200px); text-align: center; isolation: isolate; }
.quote-stage__light {
position: absolute; left: 50%; top: 52%; width: min(1180px, 140vw); aspect-ratio: 1.7; transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(var(--accent-rgb), .085), rgba(var(--accent-rgb), .025) 52%, rgba(var(--accent-rgb), 0));
pointer-events: none;
}
.quote-stage__inner { position: relative; z-index: 2; display: grid; justify-items: center; }
.quote-stage__label {
margin: 0 0 clamp(30px, 3.4vw, 52px); padding-left: .34em;
font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .34em; text-transform: uppercase; color: var(--grey);
}
.quote-stage .quote p { max-width: 16ch; margin-inline: auto; font-size: clamp(42px, 7.2vw, 124px); line-height: 1.02; }
.quote-stage__rule { display: block; width: 72px; height: 1px; margin: clamp(36px, 4vw, 60px) auto 22px; background: var(--accent); }
.js .quote-stage__rule[data-draw] { transform-origin: 50% 50%; }
.quote-stage__sig { margin: 0; padding-left: .26em; font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .26em; text-transform: uppercase; color: var(--grey); }
.quote-stage__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.quote-stage__media img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.quote-stage--photo { min-height: clamp(560px, 100svh, 1000px); display: grid; align-items: center; }
.quote-stage--photo::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(ellipse at 50% 50%, rgba(var(--night-rgb), .46), rgba(var(--night-rgb), .7) 72%), linear-gradient(180deg, var(--night), rgba(var(--night-rgb), 0) 14%, rgba(var(--night-rgb), 0) 86%, var(--night));
}
/* ---- Heller Moment (.lumen) – Endnote 8,4: „über zehn Seiten gleichförmig dunkel“. Je Seite höchstens eine warme
Elfenbein-Fläche als Gegenlicht (Satz, Liste oder Zitat), Text in Tinte, Akzent in Bronze. Kombinierbar mit
.quote-stage (zentriert) oder eigenständig mit .wrap. Kanten hart (redaktioneller Schnitt), kein Verlauf ins Schwarz. */
.lumen {
position: relative; isolation: isolate; overflow: hidden; overflow: clip;
color: var(--ink); color-scheme: light;
background:
radial-gradient(ellipse 70% 60% at 50% 38%, rgba(255, 251, 243, .9) 0%, rgba(255, 251, 243, 0) 72%),
linear-gradient(180deg, var(--ivory) 0%, var(--ivory-2) 100%);
}
.lumen::after { /* stehendes Papierkorn */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: url("../assets/grain.png") 0 0 / 220px; opacity: .07; mix-blend-mode: multiply;
}
.lumen > :not(.quote-stage__light) { position: relative; z-index: 1; } /* das Licht bleibt absolut (sonst 690 px Leerraum) */
.lumen ::selection { background: rgba(110, 80, 38, .22); color: var(--ink); }
.lumen .quote p, .lumen .title-serif, .lumen .display, .lumen h2, .lumen h3 { color: var(--ink); }
.lumen p, .lumen li { color: var(--ink-2); }
.lumen .quote p { color: var(--ink); }
.lumen em.gold, .lumen .em-accent { color: var(--bronze); }
.lumen .label, .lumen .eyebrow, .lumen .quote-stage__label, .lumen .quote-stage__sig { color: var(--ink-2); }
.lumen .eyebrow__dash, .lumen .quote-stage__rule, .lumen .rule--accent { background: var(--bronze); }
.lumen .quote-stage__light { background: radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); }
.lumen .link { color: var(--ink); }
.lumen .link::after { background: var(--bronze); }
.lumen .link .i { color: var(--bronze); }
.lumen .pill { border-color: rgba(var(--night-rgb), .32); color: var(--ink); }
.lumen .pill--accent { border-color: var(--bronze); color: var(--bronze); }
.lumen .tbd { border-color: rgba(var(--night-rgb), .35); color: var(--ink-2); }
.lumen .tbd::before { background: var(--bronze); }
.lumen :focus-visible { outline-color: var(--bronze); }
.lumen.quote-stage { padding-block: clamp(104px, 12vw, 196px); }
/* Variante Champagner (tiefer, wärmer) – damit nicht jede Seite dieselbe Fläche zeigt */
.lumen--champagne {
--ink-2: #3E362B; /* ≥ 6:1 auf Champagner */
--words-from: #4F3713; /* Wort für Wort: Start in tiefer Bronze (≥ 6:1), dann Tinte */
background:
radial-gradient(ellipse 70% 60% at 50% 40%, rgba(255, 247, 230, .6) 0%, rgba(255, 247, 230, 0) 70%),
linear-gradient(180deg, #DDCBA8 0%, #CFB88F 100%);
}
.lumen--champagne em.gold, .lumen--champagne .em-accent { color: #4F3713; }
.lumen--champagne .eyebrow__dash, .lumen--champagne .quote-stage__rule { background: #4F3713; }
.lumen.quote-stage .quote p { font-size: clamp(40px, 6.4vw, 112px); }
/* ---- Sticky-Erzählung (.story) – Desktop: Bild klebt links und blendet je Schritt über; mobil: Bild je Schritt */
.story { overflow: clip; } /* nie overflow: hidden (Sticky, §8) */
.story__grid { display: grid; }
.story__media { display: none; }
.story__steps { display: grid; gap: clamp(56px, 12vw, 96px); }
.story__still { position: relative; overflow: hidden; aspect-ratio: 4 / 5; margin: 0 calc(-1 * var(--gutter)) 24px; background: var(--graphite); }
.story__still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.story__no {
display: block; margin-bottom: 10px;
font: 400 clamp(88px, 24vw, 120px)/.8 var(--f-display); color: transparent;
-webkit-text-stroke: 1.2px rgba(var(--bone-rgb), .5);
background: linear-gradient(var(--accent), var(--accent));
-webkit-background-clip: text; background-clip: text;
background-size: 100% 0%; background-repeat: no-repeat; background-position: 50% 100%;
transition: background-size 1.1s var(--ease-inout), -webkit-text-stroke-color .8s var(--ease-std);
}
.story__step.is-active .story__no { background-size: 100% 100%; -webkit-text-stroke-color: rgba(var(--accent-rgb), 0); }
.story__title { margin-bottom: 14px; }
.story__text p { color: var(--grey); max-width: 46ch; }
@media (min-width: 1024px) {
.story__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 128px); align-items: start; }
.story__media { display: block; position: sticky; top: calc(var(--header-h) + 32px); height: calc(100svh - var(--header-h) - 64px); }
.story__frames { position: relative; height: 100%; overflow: hidden; border-radius: var(--r); background: var(--graphite); }
.story__frame {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%);
opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease-std), transform 2.4s var(--ease-out);
}
.story__frame.is-active { opacity: 1; transform: none; }
.story__frames::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 76%, rgba(var(--night-rgb), .36) 100%); }
.story__still { display: none; }
.story__steps { gap: 0; }
/* Geführt wird über Farbe, nicht über Deckkraft (Review 3, WCAG 1.4.3 – bei 38 % hatte der Fließtext 2,04 : 1):
Titel und Text des aktiven Schritts hell, die übrigen im Grau (≥ 7 : 1), nur die Ziffer tritt zurück. */
.story__step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.story__title, .story__text p { transition: color .8s var(--ease-std); }
.story__step:not(.is-active) .story__title { color: var(--grey); }
.story__step.is-active .story__text p { color: rgba(var(--bone-rgb), .86); }
.story__no { font-size: clamp(120px, 10vw, 176px); transition: background-size 1.1s var(--ease-inout), -webkit-text-stroke-color .8s var(--ease-std), opacity .8s var(--ease-std); }
.story__step:not(.is-active) .story__no { opacity: .35; }
}
.no-anim .story__step, .no-anim .story__frame { opacity: 1; }
/* ---- Abspann / Listen (.credits) – zentriert wie ein Filmabspann; --pairs: Begriff | Angabe */
.credits { display: grid; justify-items: center; text-align: center; }
.credits__head { margin: 0 0 28px; }
.credits__list { display: grid; justify-items: center; }
.credits__list li { position: relative; padding: 16px 0; font: 400 clamp(26px, 3vw, 44px)/1.15 var(--f-serif); letter-spacing: -.01em; color: var(--bone); text-wrap: balance; max-width: 24ch; hyphens: manual; }
.credits__list li + li::before { content: ""; position: absolute; left: 50%; top: -2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.credits--pairs { gap: 0; width: 100%; max-width: 980px; margin-inline: auto; }
.credits__pair { display: grid; gap: 6px; padding: 18px 0; border-top: 1px solid var(--line); width: 100%; }
.credits__pair:last-child { border-bottom: 1px solid var(--line); }
.credits__pair dt { font: 600 var(--fs-label)/1.4 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.credits__pair dd { margin: 0; font: 400 clamp(22px, 2.2vw, 30px)/1.25 var(--f-serif); color: var(--bone); }
@media (min-width: 768px) {
.credits__pair { grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: baseline; }
.credits__pair dt { text-align: right; }
.credits__pair dd { text-align: left; }
}
/* ---- Kartenraster (.cards) – nutzt .card / .card--link / .card--poster; --offset: versetzter Rhythmus */
.cards { display: grid; gap: 48px 24px; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); column-gap: clamp(20px, 2vw, 32px); }
.cards--offset > :nth-child(even) { margin-top: clamp(48px, 7vw, 120px); }
}
/* ---- Kapitel-Blende (.chapter[data-blende], „Akt I–IV“) – das Bild öffnet sich aus einem Lichtspalt in der
Bildschirmmitte (scroll-gekoppelt, js/site.js setzt clip-path, Zoom und die Linie .chapter__slit) */
.chapter { position: relative; isolation: isolate; overflow: clip; background: var(--night); }
.chapter__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--graphite); }
.chapter__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos-m, var(--pos, 50% 40%)); transform-origin: 50% 46%; }
.chapter__slit {
position: absolute; left: 0; right: 0; top: 0; z-index: 2;
height: 1px; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, rgba(var(--accent-rgb), 0) 0%, var(--accent) 22%, var(--accent-hi) 50%, var(--accent) 78%, rgba(var(--accent-rgb), 0) 100%);
transform-origin: 50% 50%;
will-change: transform, opacity;
}
/* Vorhänge der Kapitel-Blende (js/site.js, Zusatzrunde): 1 px hoch, per scaleY auf Pixelhöhe gezogen – das Bild
scheint vorher mit 13 % durch statt schwarz zu stehen. Ohne Skript bleiben sie flach (Bild offen). */
.chapter__curtain {
position: absolute; left: 0; right: 0; z-index: 1; height: 1px; pointer-events: none;
background: rgba(var(--night-rgb), .87); transform: scaleY(0); will-change: transform;
}
.chapter__curtain--t { top: 0; transform-origin: 50% 0; }
.chapter__curtain--b { bottom: 0; transform-origin: 50% 100%; }
.chapter__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, var(--night) 0%, rgba(var(--night-rgb), .55) 18%, rgba(var(--night-rgb), 0) 44%); }
.chapter__head { position: relative; z-index: 2; margin-top: -88px; }
.chapter__no {
display: block; margin-bottom: 6px;
font: 400 clamp(110px, 32vw, 160px)/.78 var(--f-display); color: transparent;
-webkit-text-stroke: 1.2px rgba(var(--accent-rgb), .8);
background: linear-gradient(var(--accent), var(--accent));
-webkit-background-clip: text; background-clip: text;
background-size: 100% 0%; background-repeat: no-repeat; background-position: 50% 100%;
transition: background-size 1.4s var(--ease-inout) .2s;
}
.chapter__no.is-in { background-size: 100% 100%; }
.no-anim .chapter__no { background-size: 100% 100%; }
.no-anim [data-blende] .chapter__media { opacity: 1 !important; }
@media (min-width: 1024px) {
.chapter { display: flex; align-items: flex-end; min-height: clamp(640px, 100svh, 1080px); }
.chapter__media { position: absolute; inset: 0; aspect-ratio: auto; }
.chapter__media img { object-position: var(--pos, 50% 40%); }
.chapter__shade { background: linear-gradient(90deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), .5) 34%, rgba(var(--night-rgb), 0) 58%), linear-gradient(0deg, rgba(var(--night-rgb), .9) 0%, rgba(var(--night-rgb), 0) 36%); }
.chapter__head { margin: 0 auto; padding-block: 160px clamp(80px, 11svh, 140px); }
.chapter__head > * { max-width: min(640px, 46vw); }
.chapter__no { font-size: clamp(160px, 16vw, 280px); }
}
/* ---- Kompaktes CTA-Band (Rechtliches): kleinere Bühne, gleiche Aktionen. Die begrenzte Bühnenhöhe gilt nur mobil –
am Desktop füllt die Bühne das ganze Band (sonst endet das Foto mitten im Band mit sichtbarer Kante) */
@media (max-width: 1023.98px) {
.cta-band--compact .cta-band__stage { height: 56svh; min-height: 360px; max-height: 560px; }
.cta-band--compact .cta-band__content { margin-top: -12svh; } /* Label auf dunklem Verlauf statt über hellem Himmel */
}
@media (min-width: 1024px) {
.cta-band--compact { min-height: clamp(560px, 78svh, 820px); }
.cta-band--compact .cta-band__content { padding-block: 120px; }
}
/* ---- ruhige Fassung der neuen Muster: Überblenden statt Öffnen/Zoomen */
@media (prefers-reduced-motion: reduce) {
.js .hero__strip .fotofilm__frames { animation: hero-fade 1s ease both; animation-delay: calc(var(--hd) + .3s); }
.js .hero__name .line__in { animation: hero-fade .9s ease both; }
.js .hero__portrait, .js .hero__frame { animation-name: hero-fade; animation-timing-function: ease; }
.js .hero__rule { animation: hero-fade 1s ease both; }
.story__frame { transform: none !important; transition: opacity .9s ease; }
.story__no, .chapter__no { transition: background-size 0s, -webkit-text-stroke-color .8s ease; }
.chapter__slit { display: none; }
.js [data-blende] .chapter__media { opacity: 0; transition: opacity 1.2s ease; } /* Kapitelbild blendet über */
.js [data-blende].is-shown .chapter__media { opacity: 1; }
.reel__item img { transition: none; }
.reel__item:hover img { transform: none; }
}
/* ---------------------------------------------------------------- Kennzahl */
.stat { display: grid; grid-template-columns: auto auto; align-items: end; justify-content: start; column-gap: 12px; }
/* Kennzahl per Masken-Reveal (Zusatzrunde, Juror): Alter und Jahre zählen nicht hoch – kurz stünden sonst falsche
Fakten da („heute 28“). Die Ziffern steigen aus einer Maske, sobald die Kennzahl ([data-reveal]) im Blick ist;
ruhige Fassung: nur Deckkraft. 25 */
.num-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: .08em; margin-top: -.08em; line-height: inherit; }
.num-mask__in { display: inline-block; }
.js .num-mask__in { transform: translate3d(0, 110%, 0); transition: transform 1.3s var(--ease-out); transition-delay: calc(var(--d, 0s) + .18s); }
.js .is-in .num-mask__in, .js .num-mask.is-in .num-mask__in { transform: none; }
.stat__pre { grid-column: 1; grid-row: 1; padding-bottom: .5em; font: italic 400 clamp(26px, 2.6vw, 36px)/1 var(--f-serif); color: var(--grey); }
.stat__num { grid-column: 2; grid-row: 1; font: 400 clamp(88px, 10vw, 160px)/.78 var(--f-display); color: var(--bone); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat:not(:has(.stat__pre)) .stat__num { grid-column: 1; }
.stat__label { grid-column: 1 / -1; grid-row: 2; margin-top: 14px; font: 600 var(--fs-label)/1.35 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); max-width: 18ch; }
/* =====================================================================
FOOTER
===================================================================== */
.footer { position: relative; padding: clamp(72px, 9vw, 132px) 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); overflow: hidden; }
/* Kopf des Footers: Logo (quer ab 768 px, sonst stehend) + Termin-Link */
.footer__top { display: grid; gap: 22px; justify-items: start; margin-bottom: clamp(44px, 5vw, 72px); }
.footer__mark { margin: 0; }
.footer__logo { display: block; width: min(300px, 100%); height: auto; }
@media (min-width: 768px) {
.footer__logo { width: auto; height: 112px; } /* Unterzeile 13 px */
}
@media (min-width: 1024px) {
.footer__top { grid-template-columns: auto auto; justify-content: space-between; align-items: end; column-gap: 56px; }
}
.footer__grid { display: grid; gap: 36px; padding-top: 34px; border-top: 1px solid var(--line); }
.footer__brand { margin: 0 0 6px; font-weight: 600; }
.footer__grid .muted { margin: 0; font-size: 15px; }
.footer__contact { margin: 16px 0 0; }
.footer__h { margin: 0 0 10px; font: 600 var(--fs-label)/1.3 var(--f-text); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.footer__links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.footer__links a, .footer__legal a {
display: inline-flex; align-items: center; min-height: 44px;
text-decoration: none; color: var(--bone);
transition: color .2s var(--ease-std);
}
.footer__links a { display: flex; width: 100%; } /* ganze Zelle tippbar („Start“ war 34 px breit) */
/* Seiten mit Abschluss-Band: kein zweites „Termin anfragen“ 300 px unter der Gold-Pille (Review 3) */
body:has(.cta-band) .footer__cta { display: none; }
.footer__links a:hover, .footer__legal a:hover, .footer__links a[aria-current="page"], .footer__legal a[aria-current="page"] { color: var(--accent-hi); }
.footer__side { display: grid; gap: 0; justify-items: start; align-content: start; }
.footer__side .motion-pill { margin-top: 18px; }
.footer__legal { display: flex; gap: 24px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--grey); }
.footer__base p { margin: 0; }
.footer__draft { display: inline-flex; align-items: center; gap: 10px; }
.footer__draft::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
@media (min-width: 768px) {
.footer__grid { grid-template-columns: 1.3fr 1.4fr 1fr; column-gap: 40px; }
}
@media (max-width: 1023.98px) {
.footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
/* =====================================================================
STICKY-LEISTE „Termin anfragen“ (mobil)
===================================================================== */
/* zurückhaltende Kapsel statt vollbreiter Gold-Leiste: dunkles Glas, Champagner-Haarlinie, Text hell */
/* Review 3: rechts im Daumenbereich statt mittig über der Lesezeile, 44 px hoch, kurz „Termin“ (zugänglicher Name
„Termin anfragen“); erscheint nur beim Hochscrollen und an Kapitelenden (js/site.js) */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: flex; justify-content: flex-end;
padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom));
pointer-events: none;
transform: translate3d(0, 140%, 0);
visibility: hidden;
transition: transform .55s var(--ease-out), visibility 0s .55s;
}
.sticky-cta.is-shown { transform: none; visibility: visible; transition: transform .55s var(--ease-out), visibility 0s; }
.sticky-cta__btn {
pointer-events: auto;
display: inline-flex; align-items: center; gap: 12px;
min-height: 46px; padding: 0 5px 0 18px;
border: 1px solid rgba(var(--accent-rgb), .55); border-radius: 0;
background: rgba(var(--night-rgb), .82);
-webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .8);
font: 600 13px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase;
color: var(--bone); text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: border-color .2s var(--ease-std), background-color .2s var(--ease-std);
}
.sticky-cta__btn:active { background: rgba(var(--accent-rgb), .12); }
.sticky-cta__dot {
display: grid; place-items: center; width: 34px; height: 34px;
background: var(--accent); color: var(--on-accent);
}
.sticky-cta__dot .i { width: 15px; height: 15px; }
.menu-open .sticky-cta { visibility: hidden; }
@media (min-width: 1024px) { .sticky-cta { display: none; } }
/* =====================================================================
EIGENER CURSOR (nur Maus)
===================================================================== */
.cursor {
position: fixed; left: 0; top: 0; z-index: 250;
width: 0; height: 0;
pointer-events: none;
opacity: 0;
transition: opacity .3s var(--ease-std);
}
/* nur über Bildern sichtbar: ein ruhiger Sucherrahmen „Ansehen“ (jb4: vier Kameraecken statt Ring) */
.cursor.is-view { opacity: 1; }
.cursor__dot {
position: absolute; left: -46px; top: -46px; width: 92px; height: 92px;
--c: rgba(var(--accent-rgb), .95);
background:
linear-gradient(var(--c), var(--c)) 0 0 / 16px 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px 16px,
linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px 16px,
linear-gradient(var(--c), var(--c)) 0 100% / 16px 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px 16px,
linear-gradient(var(--c), var(--c)) 100% 100% / 16px 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px 16px,
rgba(var(--night-rgb), .32);
background-repeat: no-repeat;
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
transform: scale(.4);
transition: transform .5s var(--ease-out);
}
.cursor.is-view .cursor__dot { transform: scale(1); }
.cursor__label {
position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(.6);
font: 600 var(--fs-label)/1 var(--f-text); letter-spacing: .18em; text-transform: uppercase; color: var(--bone); white-space: nowrap;
opacity: 0; transition: opacity .25s var(--ease-std), transform .45s var(--ease-out);
}
.cursor.is-view .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* =====================================================================
COOKIE- & DATENSCHUTZ-BANNER (TDDDG / DSGVO, jb4 Noir)
===================================================================== */
.footer__cookie-btn,
.menu__cookie-btn {
display: inline-flex; align-items: center; min-height: 44px; padding: 0;
border: 0; background: none; cursor: pointer;
font: inherit; color: var(--bone); text-decoration: none;
transition: color .2s var(--ease-std);
}
.menu__cookie-btn {
font: 600 13px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--grey);
}
.footer__cookie-btn:hover, .footer__cookie-btn:focus-visible,
.menu__cookie-btn:hover, .menu__cookie-btn:focus-visible { color: var(--accent-hi); }
.footer__legal { flex-wrap: wrap; row-gap: 4px; }
.cookie-banner {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 220;
padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
pointer-events: none;
}
.cookie-banner__line {
display: block; max-width: var(--maxw); margin: 0 auto; height: 1px;
background: linear-gradient(90deg, var(--accent), rgba(var(--accent-rgb), .25) 65%, rgba(var(--accent-rgb), 0));
}
.cookie-banner__inner {
pointer-events: auto;
max-width: var(--maxw); margin: 0 auto;
padding: clamp(20px, 3vw, 32px) clamp(20px, 3.2vw, 40px);
background: rgba(var(--night-rgb), .96);
border: 1px solid rgba(var(--accent-rgb), .34);
border-top: 0;
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
box-shadow: 0 24px 64px rgba(0, 0, 0, .86);
display: grid; gap: 20px;
animation: cookie-enter .45s var(--ease-out) both;
}
@keyframes cookie-enter {
from { opacity: 0; transform: translate3d(0, 18px, 0); }
to { opacity: 1; transform: none; }
}
.cookie-banner__head {
display: grid; gap: 12px;
}
@media (min-width: 1024px) {
.cookie-banner__head {
grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
align-items: start; column-gap: 36px;
}
}
.cookie-banner__label { margin: 0 0 6px; }
.cookie-banner__title {
margin: 0;
font-size: clamp(30px, 3.2vw, 42px);
line-height: 1.02;
}
.cookie-banner__copy {
margin: 0; max-width: 78ch;
font-size: 15px; line-height: 1.58; color: rgba(var(--bone-rgb), .88);
}
.cookie-banner__details {
padding-top: 18px;
border-top: 1px solid var(--line);
}
.cookie-banner__grid {
display: grid; gap: 14px;
}
@media (min-width: 768px) {
.cookie-banner__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.cookie-card {
display: grid; gap: 8px; align-content: start;
padding: 16px 18px;
background: rgba(var(--graphite-2-rgb), .55);
border: 1px solid rgba(var(--bone-rgb), .14);
}
.cookie-card--Interactive { cursor: pointer; transition: border-color .2s var(--ease-std); }
.cookie-card--Interactive:hover { border-color: rgba(var(--accent-rgb), .6); }
.cookie-card__top {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cookie-card__name {
font: 600 14px/1.3 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}
.cookie-card__badge {
display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
border: 1px solid rgba(var(--accent-rgb), .45);
font: 600 11.5px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.cookie-card__switch {
position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 32px;
}
.cookie-card__switch input {
position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
.cookie-card__switch .check__box {
width: 22px; height: 22px; display: grid; place-items: center;
border: 1px solid rgba(var(--bone-rgb), .45); background: var(--night);
transition: background-color .2s var(--ease-std), border-color .2s var(--ease-std);
}
.cookie-card__switch .check__box svg {
width: 14px; height: 14px; fill: none; stroke: var(--on-accent); stroke-width: 2.5;
stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.cookie-card__switch input:checked + .check__box {
background: var(--accent); border-color: var(--accent);
}
.cookie-card__switch input:checked + .check__box svg { opacity: 1; }
.cookie-card__switch input:focus-visible + .check__box {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.cookie-card__state {
font: 600 12px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}
.cookie-card__desc {
margin: 0; font-size: 14px; line-height: 1.5; color: var(--grey);
}
.cookie-card__desc code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--bone);
}
.cookie-banner__foot {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
padding-top: 6px;
}
.cookie-banner__actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.cookie-banner__btn {
min-height: 46px; padding: 0 22px;
}
@media (max-width: 639.98px) {
.cookie-banner__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie-banner__btn { width: 100%; padding: 0 12px; justify-content: center; }
.cookie-banner__btn[data-cookie-toggle],
.cookie-banner__btn[data-cookie-save] { grid-column: 1 / -1; }
}
.cookie-banner__links {
display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--grey);
}
.cookie-banner__links .text-link { min-height: 44px; font-size: 14px; color: var(--grey); }
.cookie-banner__links .text-link:hover { color: var(--bone); }
.cookie-banner__sep { color: var(--line-ui); }
@media (prefers-reduced-motion: reduce) {
.cookie-banner__inner { animation: hero-fade .3s ease both; }
}
/* =====================================================================
jb4: KEINE RUNDEN FORMEN (David, 25.10.2026) – Sicherheitsnetz für alle Seiten: Pillen, Kreise und Punkte der
Unterseiten werden eckig (kleine Punkte zu Quadraten). Weiche Lichtkegel sind Verläufe und bleiben weich.
===================================================================== */
*, *::before, *::after { border-radius: 0 !important; }
/* =====================================================================
SCHLEIFEN ANHALTEN, WENN NICHT SICHTBAR ([data-loop] bekommt .is-off)
===================================================================== */
[data-loop].is-off, [data-loop].is-off * { animation-play-state: paused !important; }
/* … auch Pseudo-Elemente (Scroll-Hinweis .scroll-hint__line::after lief außerhalb des Bildschirms weiter) */
[data-loop].is-off *::before, [data-loop].is-off *::after { animation-play-state: paused !important; }
/* =====================================================================
„BEWEGUNG REDUZIEREN“ – ruhige Fassung (nicht aus)
===================================================================== */
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*) { animation-duration: .2s !important; }
::view-transition-old(root) { animation: vt-fade-out .2s ease both; }
::view-transition-new(root) { animation: vt-fade-in .2s ease both; }
::view-transition { background: var(--night); }
.intro-on .intro { animation: intro-skip .45s ease .55s forwards; }
.intro__bar { animation: none; }
.intro__line { transform: none; animation: hero-fade .4s ease both; }
.intro__zeichen { animation: hero-fade .4s ease .1s both; }
.intro__name { animation: hero-fade .4s ease .15s both; }
.has-intro { --hd: .55s; }
.grain, .leak, .scroll-hint__line::after { animation: none !important; }
.js .hero__media > img, .js .hero__media > canvas { animation: none; }
.js .hero__title .line__in { animation-name: hero-fade; animation-duration: .9s; animation-timing-function: ease; }
.js .hero__eyebrow, .js .hero__sub, .js .hero__ctas, .js .hero__bar, .js .hero__marks, .js .hero__mega { animation-name: hero-fade; animation-timing-function: ease; }
.js [data-reveal] { transform: none; transition: opacity .9s ease; transition-delay: var(--d, 0s); }
.js [data-reveal="clip"] { clip-path: none; opacity: 0; transition: opacity 1.1s ease; }
.js [data-reveal="clip"].is-in { opacity: 1; }
.js [data-reveal="clip"] img { transform: none; transition: none; }
.js [data-lines] .line__in { transform: none; opacity: 0; transition: opacity .9s ease; transition-delay: calc(var(--li, 0) * .1s + var(--d, 0s)); }
.js [data-lines].is-in .line__in { opacity: 1; }
.js [data-draw] { transform: none; opacity: 0; transition: opacity 1.2s ease; }
.js [data-draw].is-in { opacity: 1; }
.js .num-mask__in { transform: none; opacity: 0; transition: opacity 1s ease; transition-delay: calc(var(--d, 0s) + .15s); }
.js .is-in .num-mask__in, .js .num-mask.is-in .num-mask__in { opacity: 1; }
.menu__list a { transform: none; opacity: 0; transition: opacity .5s ease, color .2s ease; }
.menu.is-open .menu__list a { opacity: 1; }
.sticky-cta { transform: none; opacity: 0; transition: opacity .4s ease, visibility 0s .4s; }
.sticky-cta.is-shown { opacity: 1; transition: opacity .4s ease, visibility 0s; }
.site-header { transition: background-color .45s ease, border-color .45s ease, opacity .3s ease; }
.site-header.is-hidden { transform: none; }
.acc__panel { transition: none; }
.btn:hover .i, .link:hover .i { transform: none; }
.btn--accent::before { display: none; }
.card__media img { transition: filter .6s ease; }
.card:hover .card__media img, .card:focus-within .card__media img { transform: none; }
.swipe__fill { transition: none; }
}