/* =====================================================================
DAVID BEIKE INTERIOR DESIGN · Website Schleife 7.
Aufbau auf Schleife 6d, Davids Live-Fixes 09.07.2026.
- Kopfleiste Variante A (Davids Entscheid 09.07., fest): das
hinterlegte Original-Logo (Monogramm + Schriftzug als EINE Einheit,
nie zerschnitten, nie nachgebaut), nur groesser
- Abschnittsname (Schleife 7, echtes Knops-Verhalten): laeuft als
sticky Element MIT dem Abschnitt nach oben und rastet auf Hoehe
des "DAVID"-Schriftzugs im Logo ein (.chap/.chap__name unten),
kein springendes Kopfleisten-Wort mehr
- Oben rechts: Herz mit Merklisten-Zaehler (keine Lupe) + CTA-Pill
- Icon-Rail links: EINE Icon-Familie, eine Strichstaerke; Anfrage =
Umschlag; Untermenue rollt bei Hover aus und schiebt Icons nach
unten (keine Dauer-Luecke); aufgeklappt deckend, nichts schimmert
angeschnitten durch
- Gold mit metallischem Verlauf; Kleinschrift kontrastverstaerkt
- Buttons (Schleife 7): Rahmen ueberall duenn golden als Default,
Hover = goldenes Aufleuchten (Davids "super" am Gespraech-Button)
- Motion (Schleife 7): Kamerafahrt (ruhiger Zoom + leichter Pan,
CSS-Keyframes) auf den drei Trilogie-Bildern der Startseite,
bewusste Rueckkehr, weil der In-Bild-Bewegungsweg (KI-Clips) an
Objekt-Morphing scheitert. Der 112%-Overscan verhindert sichtbare
Raender. Fades, Parallax, Cursor-Punkt bleiben;
prefers-reduced-motion schaltet alles ab. Edel, nicht hektisch.
===================================================================== */
/* ---- Brand Fonts (real, lokal, keine externen CDNs) ---- */
@font-face{ font-family:"AficalStd"; src:url("../fonts/AficalStd-Std.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"AficalStd"; src:url("../fonts/AficalStd-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:"GenerischMono"; src:url("../fonts/GenerischMono-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"GenerischMono"; src:url("../fonts/GenerischMono-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
/* ---- Design-Token ---- */
:root{
--black:#0B0A09; /* Grundton near-black */
--ink:#151210; /* tiefe Flaeche, einen Hauch waermer als Schleife 2 */
--ink-2:#0F0D0B; /* Bildrahmen-Grund */
--card:#1A1613; /* warme Kartenflaeche */
--cream:#EFE9DE; /* warmer Off-White */
--cream-soft:#C9C1B3; /* Fliesstext gedaempft, Schleife 6: kontrastverstaerkt */
--brass:#C0964A; /* Messing, Licht-Akzent */
--brass-grad:linear-gradient(108deg,#8F6C31 0%,#C0964A 32%,#EBD5A0 50%,#C0964A 68%,#8F6C31 100%); /* Gold metallisch */
--slate:#948D80; /* Mittelton, Labels (Schleife 6: heller, Lesbarkeit Kleinschrift) */
--line:rgba(239,233,222,.14);
--line-soft:rgba(239,233,222,.07);
--serif:"AficalStd", Georgia, "Times New Roman", serif;
--mono:"GenerischMono", ui-monospace, "SFMono-Regular", monospace;
--maxw:1280px;
--rail:4.8rem;
--rail-open:16.5rem;
--logo-h:clamp(104px, 11.5vw, 160px); /* Kopfleisten-Logo; Bezugsgroesse fuer .chap__name */
--gutter:clamp(1.5rem, 5vw, 6rem);
--footer-h:10rem; /* feste Abschlussleisten-Hoehe (Schleife 13: letzte Sektion laesst ihr Platz) */
--ease:cubic-bezier(.16,.7,.2,1);
--rise:36px;
/* Typo-Stufen (Schleife 4): genau vier Groessen im ganzen Auftritt.
H = jede grosse Headline, M = Zwischentitel/Zitate, Fliesstext = body,
Label = jede Mono-Zeile (Eyebrow, Meta, Buttons, Footer). */
--t-h:clamp(2.6rem, 6vw, 5.4rem);
--t-m:clamp(1.5rem, 2.4vw, 2.1rem);
--t-label:.75rem;
}
/* ---- Reset / Basis ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:0;
/* Schleife 29 (2026-07-16, Davids Trackpad-Befund): das spuerbare Einrasten
IM Scrollen leistet nur der native proximity-Snap (in der Gesten-Physik,
Stand Schleife 7-24 = wochenlang abgenommen "einwandfrei"). Der Sprung
kam vom JS-Snap-Assist (Schleife 25, zum Naechstgelegenen, bis 0,75 vh) -
die Diagnose-Matrix-Zeile "nativ allein springt" war cache-verseucht.
Details: _planung/WEBSITE_SCROLL_SPRUNG_DIAGNOSE_2026-07-14.md. */
scroll-snap-type:y proximity; }
/* Snap je Bildschirm-Einheit: Vollbild-Momente und Vollbild-Textsektionen
rasten oben ein, der absolute .chap__name sitzt dann auf David-Hoehe. */
.hero, .moment, .maxime--image, .chap > .section, .chap > .signature{ scroll-snap-align:start; }
/* Schleife 12: Seitenende als eigener Ruhepunkt, sonst zieht proximity vom
Footer zurueck auf die letzte Vollhoehen-Sektion. */
.footer{ scroll-snap-align:end; }
/* Rechtstext-Seiten (Impressum/Datenschutz = html.page-legal): KEIN Scroll-Snap.
Der proximity-Snap + Footer-End-Snap zogen lange Rechtstexte ans Seitenende
und verhinderten freies Hochscrollen (Davids Befund 2026-07-23). Scoped auf
html.page-legal -> der abgenommene Snap aller anderen Seiten (Schleife 29)
bleibt unberuehrt. */
html.page-legal{ scroll-snap-type:none; }
/* Schleife 13 (1): Footer schon am RUHEPUNKT der letzten Sektion im Bild.
Die letzte Kapitel-Sektion einer Seite laesst dem Footer seine feste Hoehe
frei (100svh - Footer) -> Sektion rastet oben ein UND die Abschlussleiste
steht im selben Bild; Einrast-Punkt der Sektion == Snap-end des Footers
(ein gemeinsamer Ruhepunkt, kein Extra-Scroll). Ist der Inhalt der letzten
Sektion hoeher als ein Bild (Anfrage-Formular, Rechtstexte), bleibt der
Footer ueber den Seitenende-Ruhepunkt (Schleife 12) erreichbar. */
@media(min-width:861px){
.footer{ height:var(--footer-h); padding-block:0;
display:grid; align-content:center; }
main > .chap:last-child > .section,
main > .chap:last-child > .signature{
min-height:calc(100svh - var(--footer-h)); }
}
body{
margin:0; background:var(--black); color:var(--cream);
font-family:var(--serif); font-weight:300; line-height:1.62;
font-size:clamp(1.06rem, .5vw + .96rem, 1.22rem);
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
overflow-x:hidden;
}
::selection{ background:var(--brass); color:var(--black); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:1px solid var(--brass); outline-offset:4px; }
/* ---- Layout-Huelle (Inhalt weicht der Rail links aus) ---- */
main{ display:block; }
@media(min-width:861px){ main, .footer{ padding-left:var(--rail); } }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:880px; }
.section{ padding-block:clamp(5rem, 13vh, 12rem); position:relative; }
.section--tight{ padding-block:clamp(3.5rem, 8vh, 7rem); }
.stage-line{ border:0; height:1px; background:var(--line-soft); margin:0; }
/* ---- Typo-Skala (Schleife 4: EINE Headline-Groesse, EINE Zwischen-
groesse, EIN Fliesstext, EIN Label. Alles andere leitet sich ab.) ---- */
.display, .h1, .h2{ font-family:var(--serif); font-weight:300; line-height:1.06;
letter-spacing:-.016em; font-size:var(--t-h); margin:0; }
.h3{ font-family:var(--serif); font-weight:300; line-height:1.18;
font-size:var(--t-m); margin:0; }
em{ font-style:normal; color:var(--brass); }
.lead{ color:var(--cream); max-width:44ch; }
.prose{ color:var(--cream-soft); max-width:62ch; }
.prose p{ margin:0 0 1.15em; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--cream); font-weight:400; }
/* .eyebrow entfernt (Schleife 9, Davids Vorgabe): die goldenen Kicker-Zeilen
inkl. Gold-Strich (::before) sind raus. Die Hauptueberschrift steht danach
ohne Vorzeile, vertikal zentriert in ihrem Vollhoehen-Kapitel. */
/* ---- Slot-Marker (offene Stellen, klar sichtbar, nicht erfunden) ---- */
.slot{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.12em; color:var(--slate);
border:1px dashed var(--line); padding:.2em .6em; border-radius:2px; display:inline-block;
text-transform:uppercase; }
/* ---- Buttons / CTA (Schleife 6b: kein gefuelltes Weiss mehr - Grundzustand
ruhig mit goldenem Rahmen, Hover = goldenes Aufleuchten wie am Ghost-Button,
den David als "sehr edel" markiert hat) ---- */
.btn{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase;
display:inline-flex; align-items:center; gap:.85rem; padding:1.1em 2em; color:var(--cream);
background:transparent; border:1px solid rgba(192,150,74,.55); border-radius:2px;
transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease); }
.btn:hover{ background:transparent; border-color:var(--brass); color:var(--brass); }
/* Schleife 7 (Punkt 4): auch der Ghost-Button traegt den duennen Gold-Rahmen
als Default (kein grauer --line-Rahmen mehr); Hover-Aufleuchten wie .btn */
.btn--ghost{ background:transparent; color:var(--cream); }
.btn--ghost:hover{ background:transparent; border-color:var(--brass); color:var(--brass); }
.btn__arrow{ transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
/* =====================================================================
Navigation Schleife 4 (Knops-Prinzip):
1) Top-Header: grosses Logo (Monogramm + Wortmarke mit Seitenname)
links, warmer Kontakt-Button rechts. Auf jeder Seite identisch.
2) Schmale, immer sichtbare Icon-Rail links: ein ruhiges Outline-Icon
je Bereich, klappt bei Hover/Fokus zu Text auf. Kein Hamburger,
kein Overlay, kein mitlaufender Balken.
Beides reines CSS/HTML, funktioniert ohne JS.
===================================================================== */
/* Schleife 6b (Knops): die Kopfleiste steht FEST - Logo oben links
festgenagelt, scrollt nie weg; nur das Abschnittswort wechselt.
Weicher Abdunklungs-Verlauf nach unten, damit scrollender Inhalt
unter der Leiste abtaucht statt mit dem Logo zu kollidieren. */
/* Schleife 10 (3): z-index 75: die Kopfleiste (v. a. das Logo) liegt UEBER der
aufgeklappten Rail (z 70). Das Menue-Panel darf das Logo nie mehr abdecken
(Logo-Lesbarkeit hat Vorrang, Davids Befund 2026-07-10). Der Panel-Kopf ist
leer (Liste vertikal zentriert), das Logo steht dort klar auf Schwarz. */
.top{ position:fixed; inset:0 0 auto 0; z-index:75;
display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
padding:clamp(1.4rem,3vh,2.4rem) var(--gutter) clamp(1.6rem,3vh,2.6rem)
calc(var(--rail) + clamp(1.5rem,3vw,3.4rem));
/* Schleife 12 (2, Davids Befund "wirkt duester"): der Header-Verlauf UND der
::before-Balken sind RAUS. Die Bildoberkante bleibt ungedunkelt; Lesbarkeit
von Logo/Name tragen die Drop-/Text-Schatten plus die seiteneigenen Scrims
(hero__scrim/moment__scrim). Kein Balken, keine Kante. */
background:none;
pointer-events:none; }
.top > *{ pointer-events:auto; }
.top__mark{ filter:drop-shadow(0 2px 14px rgba(11,10,9,.55)); }
.top__brand{ display:inline-flex; align-items:center; gap:1.5rem; min-width:0; }
/* Variante A: das hinterlegte Logo als EINE Einheit (Monogramm + Schriftzug),
unveraendert, nur groesser (Davids Entscheid 09.07.: A bleibt) */
.top__mark{ height:var(--logo-h); width:auto; flex:none; }
.chap{ position:relative; }
/* Abschnittsname = Knops-Namenslauf (Davids Praezisierung 2026-07-10, Referenz
knopstuindesign.com). KEIN festes Umschalt-Label mehr, KEIN sticky-Kleben.
Der Name ist position:ABSOLUT am Kopf seines Screens und damit STARR an den
Abschnitt gekoppelt:
- MITLAUFEN: er sitzt im .chap und scrollt 1:1 mit dessen Inhalt.
- RUHEPUNKT: ist der Screen eingerastet (Snap, Oberkante = Bildschirmoberkante),
steht der Name genau auf "DAVID"-Hoehe rechts neben dem Logo.
- SOFORT WEICHEN: beim Scrollstart laeuft er sofort mit nach oben aus dem
Bild (nicht festgebacken).
- NACHRUECKEN: der naechste Screen bringt seinen Namen von unten mit hoch;
erst wenn dieser Screen einrastet, steht sein Name auf "DAVID"-Hoehe.
- EINZIGKEIT: da die Screens ~einen Bildschirm hoch sind, ist der alte Name
laengst oben draussen, bevor der neue einrastet -> nie zwei gleichzeitig.
Zusammengehoerige Screens (z.B. die drei "Die Denkweise"-Screens) tragen
BEWUSST denselben Namen -> er wirkt durchgehend, obwohl jeder Screen sein
eigenes Namens-Element mitlaeuft. Geometrie: "DAVID"-Zeile 41.7% der
Logohoehe, Logo-Breite 0.877*logo-h, 3rem Abstand rechts. z-index ueber der
Kopfleiste, damit der Name am Ruhepunkt klar auf dem A+-Verlauf sitzt. */
/* Schleife 10 (1a, Typo-Flucht): der Gold-Name war der Ausreisser (~20px neben
der Textkante, an das Logo statt an den Inhalt gekoppelt). Jetzt teilt er die
LINKE FLUCHT der grossen Ueberschrift + des Textblocks: left = dieselbe
Geometrie wie .wrap/.hero__content/.moment__body (zentrierte maxw-Spalte +
gutter), relativ zum .chap (der wie main bei der Rail beginnt). Fallback fuer
schmale Fenster (<~1650px), wo die Textkante links in die Logo-Zone laeuft:
nie naeher ans Logo als Logo-Rechtskante + 3rem (alte Position). */
/* Schleife 11 (1, Davids Entscheid): die Content-Kante GEWINNT. Der alte
3rem-Logo-Puffer drueckte den Namen auf mittleren Fenstern ~20px rechts der
Ueberschrift. Der zweite max()-Arm ist nur noch eine Kollisions-Sicherung
(Logo-Rechtskante + .75rem), damit der Name auf schmalen Fenstern nie IN
die Logo-Pixel laeuft; ab ~1590px Fensterbreite steht er exakt in der
linken Flucht der Ueberschrift UND weiter rechts vom Logo (harte
Bedingung: Einrasten neben "DAVID" bleibt sauber). */
.chap__name{ display:block; position:absolute; z-index:76; margin:0;
pointer-events:none;
top:calc(clamp(1.4rem,3vh,2.4rem) + .417*var(--logo-h) - .5em);
left:max(
calc(max((100% - var(--maxw))/2, 0px) + var(--gutter)),
calc(clamp(1.5rem,3vw,3.4rem) + .877*var(--logo-h) + .75rem)
); }
.chap__name span{ display:inline-block; font-family:var(--mono); font-weight:400;
line-height:1; font-size:calc(.135*var(--logo-h)); letter-spacing:.2em;
text-transform:uppercase; color:var(--brass); white-space:nowrap;
text-shadow:0 2px 14px rgba(11,10,9,.72); }
/* ---- Startseite: EINE Seite pro Bildschirm (Davids Vorgabe 2026-07-09) ----
Jede Text-Sektion der Startseite fuellt genau einen Bildschirm und zentriert
ihren einen Kopf + die eine Hauptzeile:
- nur EINE Ueberschrift je Bildschirm (kein Gedraenge wie zuvor in "Die
Denkweise", wo 2 Ueberschriften zugleich standen);
- der Inhalt sitzt mittig, klar UNTER der Namenszeile -> keine Schrift-
Kollision mehr;
- der sticky .chap__name bleibt ueber sein ganzes Kapitel stehen, also auch
ueber mehrere zusammengehoerige Screens ("Vom Menschen zur Raumwirkung"
gehoert zu "Die Denkweise" und behaelt dessen Namen).
Nur Desktop + nur .home (Startseite) - Textseiten wie Impressum bleiben
normal, mobil wird nicht kuenstlich gestreckt. Die Vollbild-Momente
(.hero/.moment/.maxime) bringen ihre Hoehe selbst mit. */
@media(min-width:861px){
/* padding-TOP haelt den Inhalt klar UNTER der Namens-/Logo-Zone (der sticky
Sektionsname sitzt auf ~85px DAVID-Hoehe); sonst kollidiert bei HOHEN
Sektionen (Inhalt >= ein Bildschirm) die erste Zeile mit dem Namen.
padding-bottom kleiner, damit hohe Sektionen nicht unnoetig wachsen. */
/* Schleife 8: GLOBAL (nicht mehr nur .home) -> Vollhoehen-Kapitel auf allen
Seiten, damit der Sektionsname ueberall einrastet. */
.chap > .section{ min-height:100svh; display:flex; flex-direction:column;
justify-content:center;
padding-top:clamp(7.5rem,13vh,9.5rem); padding-bottom:clamp(4rem,7vh,6rem); }
/* HOHE Sektionen (Framework-/Karten-/Listen-Inhalte) sind > ein Bildschirm und
top-alignen daher ihren Inhalt. Dann muss die erste (grosse) Zeile klar UNTER
der Logo-Unterkante (~160px) beginnen, sonst laeuft sie ins Logo. Kurze
Sektionen zentrieren mittig und brauchen das nicht. */
.chap > .section:has(.levels),
.chap > .section:has(.cards),
.chap > .section:has(.facts),
.chap > .section:has(.steps),
.chap > .section:has(.prices),
.chap > .section:has(.stair){ padding-top:clamp(10.5rem,17vh,12rem); }
/* Schleife 9 (Haltung Punkt 2b): das Werdegang-Kapitel (langes .timeline)
top-alignt seinen Inhalt. Beim Einrasten muss die grosse Ueberschrift
"Woher das kommt." KLAR unter der Logo-Zone starten (sonst steht "Woher"
im Logo) -> tieferer Anschlag als die uebrigen hohen Sektionen. */
.chap > .section:has(.timeline){ padding-top:clamp(13rem,20vh,15.5rem); }
/* Schleife 21a: die beiden .steps-Screens (ablauf) verdichtet, damit alle
Stationen an Davids realer Fensterhoehe in EINEN Ruhepunkt passen; der
Stations-Inhalt beginnt rechts der Logo-Spalte, braucht die grosse
Schutz-Zone nicht. */
.chap > .section:has(.steps){ padding-top:clamp(7.5rem,13vh,9.5rem);
padding-bottom:clamp(2.5rem,5vh,4rem); }
/* Schleife 9 (Haltung Punkt 2c): der Signatur-Screen ist ein eigener
Vollbild-Halt und rastet allein ein, BEVOR "Anfrage" kommt. .signature ist
ein Grid -> Vollhoehe + vertikal zentrieren via align-content; eigenes,
moderates padding-block statt des grossen Default-Blocks. */
.chap > .signature{ min-height:100svh; align-content:center;
padding-top:clamp(7.5rem,13vh,9.5rem); padding-bottom:clamp(4rem,7vh,6rem); }
.chap > .stage-line{ display:none; }
}
/* ---- Schleife 10 (1b): schwarze Text-Momente, EIN System (Davids Befund
2026-07-10: Projekte-Intro zentriert, Leistungen-Intro linksbuendig, kein
System). Jede schwarze Sektion, die NUR Text traegt (Intro-Statements,
Solo-Zeilen, CTA-Baender), zentriert ihren Block auf die Bildmitte:
horizontal mittig + Text zentriert; vertikal mittig via symmetrisches
padding im Vollhoehen-Kapitel (Desktop-Regel unten). Struktur-Sektionen
(Ebenen, Bewertungen, Etappen, Preise, Werdegang, Portrait, Formular)
behalten ihre abgenommene Fachform, sie sind Inhalt, keine Text-Momente. */
.chap > .section:not(:has(.levels,.cards,.facts,.steps,.prices,.stair,.timeline,.portrait,.two-col,.form,.legal)){
text-align:center; }
.chap > .section:not(:has(.levels,.cards,.facts,.steps,.prices,.stair,.timeline,.portrait,.two-col,.form,.legal))
:is(.display,.h1,.h2,.h3,.prose,.lead,.statement){
margin-inline:auto; }
@media(min-width:861px){
.chap > .section:not(:has(.levels,.cards,.facts,.steps,.prices,.stair,.timeline,.portrait,.two-col,.form,.legal)){
align-items:center;
padding-top:clamp(5rem,9vh,7rem); padding-bottom:clamp(5rem,9vh,7rem); }
}
/* Schleife 13 (3, Davids Befund "links-oben abgekippt"): Struktur-Sektionen
(Etappen, Preise/Treppe, Werdegang) ziehen ihren Kopf-Block auf die Mitte,
einheitlich mit den uebrigen schwarzen Sektionen; das Fach-Grid darunter
behaelt seine Anordnung. Die schmalen Listen (Etappen/Timeline, Rows mit
max-width) stehen als Block mittig statt an der linken Kante. */
.chap > .section:has(.steps,.prices,.stair,.timeline) .statement{ text-align:center; }
.chap > .section:has(.steps,.prices,.stair,.timeline) .statement :is(.display,.h1,.h2,.h3,.prose,.lead){
margin-inline:auto; }
@media(min-width:861px){
.steps, .timeline{ width:fit-content; margin-inline:auto; }
}
/* Schleife 20 (2): ein Statement darf nie breiter werden als die Content-Box
seiner Sektion; WebKit faellt bei Flex-Overflow auf "safe start" zurueck,
der Block klebte links an der Padding-Kante und wirkte nach rechts
verschoben (leistungen-Intro, +65px gemessen). */
.chap > .section > .statement{ max-width:100%; grid-template-columns:minmax(0,1fr); }
.chap > .section > .statement > *{ min-width:0; }
/* Schleife 22: satzgenaue Bindung nur auf Desktop; mobil darf der Satz
natuerlich brechen (nbsp erzeugte 37px Seiten-Overflow bei 390px). */
@media(min-width:861px){ .nb{ white-space:nowrap; } }
.form__status{ color:var(--brass); }
/* Schleife 14 (2, Davids Vorgabe: Snap NICHT anfassen): das Formular wird so
kompakt, dass die GANZE Formular-Sektion in die Schleife-13-Reserve
(100svh - Footer) passt -> beim Einrasten der letzten Sektion stehen
Formular UND Abschlussleiste im selben Bild, ohne Extra-Scroll. Das
Schleife-13-Entzerr-Padding schrumpft entsprechend (Luft kommt jetzt aus
der Sektions-Reserve selbst, kein Kleben). */
.chap > .section:has(.form){ padding-bottom:clamp(1.5rem,2.5vh,2rem); }
/* Intro-Sektionen (erste Sektion der Unterseiten): mobil braucht der Kopf
weiter Luft unter dem Logo (ersetzt die frueheren Inline-paddings, die
auf Desktop die vertikale Mitte verhindert haben). */
@media(max-width:860px){
.section--intro{ padding-top:clamp(9rem,20vh,13rem); }
}
.top__tools{ display:flex; align-items:center; gap:clamp(1.2rem,2vw,2rem); flex:none; }
/* Herz mit Merklisten-Zaehler (keine Lupe): gleiche Icon-Familie wie die Rail */
.fav-count{ position:relative; display:inline-flex; color:var(--brass); padding:.2rem; }
.fav-count svg{ width:24px; height:24px; display:block; stroke:currentColor; fill:none;
stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:fill .5s var(--ease); }
.fav-count.has-favs svg{ fill:rgba(192,150,74,.35); }
.fav-count b{ position:absolute; top:-.35rem; right:-.55rem; font-family:var(--mono); font-weight:400;
font-size:.62rem; letter-spacing:.04em; color:var(--cream); }
/* Schleife 7 (Punkt 5): wichtigster Button - Beschriftung auf der Goldflaeche
klar kraeftiger (Gewicht 400 statt Erbe 300, Grad leicht rauf, sattes
Schwarz, Laufweite minimal enger). Pill-Form unveraendert. */
.top__cta{ flex:none; font-weight:400; font-size:.82rem; letter-spacing:.15em; }
/* Gold-Pill Grundform: flache, KONSTANTE Goldflaeche (kein metallischer Verlauf
mit dunklen Enden mehr - der war die Quelle des Abdunkelns an den Extremen). */
.btn--pill{ border-radius:999px; padding:1em 1.9em;
background:var(--brass);
border-color:rgba(235,213,160,.45);
color:#000; /* Beschriftung schwarz, kraeftig (6b Punkt 5) */
transition:box-shadow .5s var(--ease), color .5s var(--ease); }
/* Gold-CTA Schimmer (Davids Vorgabe 2026-07-10: darf im Ruhezustand NIE
abdunkeln). Konstruktion, die das strukturell garantiert:
- der Gold-GRUND ist eine eigene background-COLOR (var(--brass)), die NIE
animiert wird -> die Flaeche ist zu jedem Zeitpunkt voll gold;
- darueber wandert allein ein weicher, REIN AUFHELLENDER Lichtstreifen als
eigene background-IMAGE-Ebene (halbtransparentes Weiss); nur dessen
Position animiert. Weiss ueber Gold hellt auf, dunkelt nie ab.
- an beiden Enden der Fahrt (120% / -20%) steht der Streifen ganz ausserhalb
des Buttons -> Ruhezustand = reine, konstante Goldflaeche.
Text (Element-Inhalt) liegt immer ueber beiden Hintergrund-Ebenen.
reduced-motion legt den Streifen still (Block unten). */
/* Schleife 17 (1, Davids Befund "nicht fluessig"): der Streifen wandert jetzt
als Pseudo-Element per transform (Kompositor) statt background-position
(Paint je Frame). Gradient/Dauer/Richtung identisch zu Schleife 8:
Bild war 230% breit, Position 130% -> -30% == translateX -73.5% -> +17%
der eigenen Breite. isolation + z-index:-1 legt den Streifen UEBER den
Gold-Grund und UNTER die Beschriftung (wie zuvor als background-Ebene). */
.top__cta{
background-color:var(--brass);
position:relative; overflow:hidden; isolation:isolate;
transition:box-shadow .5s var(--ease), color .5s var(--ease); }
.top__cta::after{ content:""; position:absolute; top:0; left:0; height:100%;
width:230%; z-index:-1; pointer-events:none; will-change:transform;
background:linear-gradient(100deg, transparent 8%, rgba(255,249,236,.20) 40%, rgba(255,249,236,.20) 60%, transparent 92%);
animation:ctaSheenT 5s linear infinite; } /* Schleife 18 (4): 8s -> 5s, Davids Urteil "sehr langsam" */
/* Hover: Gold bleibt konstant (background-color gesetzt, schlaegt das geerbte
.btn:hover{background:transparent} per hoeherer Spezifitaet), zusaetzlich
goldenes Aufleuchten. */
.btn.btn--pill.top__cta:hover{
background-color:var(--brass);
box-shadow:0 0 26px rgba(192,150,74,.42); color:#000; }
/* Fortlaufend in EINE Richtung, gleichmaessig (linear). Nur die Streifen-Ebene
bewegt sich (transform, Kompositor); die Goldflaeche bleibt unangetastet. */
@keyframes ctaSheenT{
from{ transform:translateX(-73.5%); }
to { transform:translateX(17%); }
}
.rail{ position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:70;
display:flex; align-items:center; overflow:hidden;
border-right:1px solid var(--line-soft);
background:linear-gradient(90deg, rgba(11,10,9,.55), rgba(11,10,9,0));
/* 6b: sanft und mit kleiner Hover-Verzoegerung aufklappen, nicht hart */
transition:width .7s var(--ease) .12s, background-color .7s var(--ease) .12s,
box-shadow .7s var(--ease) .12s; }
.rail__list{ list-style:none; margin:0; padding:0; width:var(--rail-open);
display:grid; gap:clamp(.4rem,1.6vh,1.1rem); }
.rail__item{ display:flex; align-items:center; gap:1.3rem; padding:.72rem 0 .72rem 1.45rem;
color:var(--cream-soft); }
.rail__item svg{ width:23px; height:23px; flex:none; display:block;
stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
transition:color .45s var(--ease); }
.rail__item span{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.26em;
text-transform:uppercase; white-space:nowrap; opacity:0; transform:translateX(-10px);
transition:opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s, color .45s var(--ease); }
.rail__item:hover{ color:var(--brass); }
.rail__item:hover span{ text-shadow:0 0 16px rgba(192,150,74,.6); }
.rail__item[aria-current="page"]{ color:var(--brass); }
/* Aufgeklappt: deckend, damit dahinter keine Headline angeschnitten
durchschimmert (QA-Punkt 08.07.) */
.rail:hover, .rail:focus-within{ width:var(--rail-open); background:var(--black);
box-shadow:24px 0 60px rgba(0,0,0,.55); }
.rail:hover .rail__item span, .rail:focus-within .rail__item span{
opacity:1; transform:none; }
/* Untermenue (Knops-Muster): Einzelprojekte unter "Projekte". Eingeklappt
traegt es KEINE Hoehe (keine Dauer-Luecke unter dem Icon); beim
Aufklappen der Rail rollt es aus und schiebt die Icons darunter nach
unten. Springt direkt zum Projekt-Anker. */
.rail__sub{ list-style:none; margin:0; padding:0 0 0 calc(1.45rem + 23px + 1.3rem);
display:grid; gap:.1rem; max-height:0; overflow:hidden;
transition:max-height .7s var(--ease) .12s, padding .7s var(--ease) .12s; }
.rail:hover .rail__sub, .rail:focus-within .rail__sub{ max-height:14rem; padding-bottom:.3rem; }
.rail__sub a{ font-family:var(--mono); font-size:.68rem; letter-spacing:.18em;
text-transform:uppercase; color:var(--slate); white-space:nowrap; display:block;
padding:.34rem 0; opacity:0; transform:translateX(-10px);
transition:opacity .5s var(--ease), transform .5s var(--ease),
color .45s var(--ease), text-shadow .45s var(--ease); }
.rail__sub a:hover{ color:var(--brass); text-shadow:0 0 14px rgba(192,150,74,.55); }
.rail:hover .rail__sub a, .rail:focus-within .rail__sub a{ opacity:1; transform:none; }
/* Mobile: Header kompakt oben, Rail wird zur ruhigen Icon-Leiste unten */
@media(max-width:860px){
/* Mobil-Pass M2 (Schleife 31, Befund 2026-07-10): Sektionen sind mobil
laenger als ein Viewport, Text lief sichtbar durchs Logo und hinter die
Gold-Pill. Fix: schlanker Kopf-Fond im Stil der (abgenommenen) unteren
Icon-Leiste - dunkles Glas + Blur + feine Linie. Bewusst NICHT der
Desktop-Verlauf (Schleife 12: von David als "duester" verworfen);
Desktop bleibt fondlos. Safe-Area fuer die Notch. */
.top{ padding:calc(.9rem + env(safe-area-inset-top)) 1.2rem .8rem 1.2rem;
background:rgba(11,10,9,.96);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-bottom:1px solid var(--line-soft); }
.top__mark{ height:80px; }
/* Mobil traegt das Logo allein die Marke; Abschnittsname entfaellt
(die Position zeigt der goldene Punkt in der Icon-Leiste unten) */
.chap__name{ display:none; }
.btn--pill{ padding:.9em 1.4em; font-size:.66rem; letter-spacing:.13em; }
.rail{ inset:auto 0 0 0; width:auto; height:auto; border-right:0;
border-top:1px solid var(--line-soft); background:rgba(11,10,9,.96);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
padding-bottom:env(safe-area-inset-bottom); }
.rail:hover, .rail:focus-within{ width:auto; background:rgba(11,10,9,.96); }
.rail__list{ width:100%; grid-auto-flow:column; grid-auto-columns:1fr; gap:0;
padding:.55rem .4rem .5rem; }
.rail__item{ flex-direction:column; gap:.45rem; padding:.35rem 0; justify-items:center;
align-items:center; }
.rail__item svg{ width:21px; height:21px; }
.rail__item span{ opacity:1; transform:none; font-size:.52rem; letter-spacing:.16em; }
.rail__sub{ display:none; }
body{ padding-bottom:calc(4.4rem + env(safe-area-inset-bottom)); }
}
/* =====================================================================
Motion Schleife 5: goldener Cursor-Punkt + goldener Hover-Schimmer.
Nur bei feiner Maus (pointer:fine) und ohne reduced-motion; das JS
setzt dafuer .has-cursor-dot auf . Formularfelder behalten den
Text-Cursor, sonst waere Tippen blind.
===================================================================== */
.has-cursor-dot body, .has-cursor-dot a, .has-cursor-dot button{ cursor:none; }
.has-cursor-dot input, .has-cursor-dot textarea, .has-cursor-dot select{ cursor:text; }
.cursor-dot{ position:fixed; left:0; top:0; width:10px; height:10px; border-radius:50%;
background:var(--brass); box-shadow:0 0 16px rgba(192,150,74,.7);
z-index:200; pointer-events:none; opacity:0;
transition:width .35s var(--ease), height .35s var(--ease),
background .35s var(--ease), opacity .3s var(--ease); }
.cursor-dot.is-on{ opacity:1; }
.cursor-dot.is-link{ width:30px; height:30px; background:rgba(192,150,74,.16);
box-shadow:0 0 24px rgba(192,150,74,.45), inset 0 0 0 1px var(--brass); }
/* Auf Goldflaechen (Pill-Button) wird NUR der Cursor-Punkt schwarz (6c):
die Flaeche selbst bleibt gold, die Beschriftung schwarz und lesbar. */
.cursor-dot.is-dark{ background:#0B0A09; box-shadow:0 0 14px rgba(11,10,9,.4); }
.cursor-dot.is-link.is-dark{ background:rgba(11,10,9,.18);
box-shadow:0 0 14px rgba(11,10,9,.35), inset 0 0 0 1.5px #0B0A09; }
/* ---- Seitenwechsel (Knops-Effekt): weiches Abdunkeln -> neue Seite blendet auf.
JS setzt .is-leaving auf ; ohne JS/bei reduced motion passiert nichts. ---- */
.page-fade{ position:fixed; inset:0; z-index:300; background:var(--black);
opacity:0; pointer-events:none; transition:opacity .32s ease; }
.is-leaving .page-fade{ opacity:1; pointer-events:auto; }
.js body{ animation:pageIn .55s ease both; }
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
/* Goldener Schimmer auf Text beim Ueberfahren (dezent, weich) */
a{ transition:color .45s var(--ease), text-shadow .45s var(--ease); }
main a:hover, .footer a:hover{ text-shadow:0 0 16px rgba(192,150,74,.55); }
.display, .h1, .h2, .h3, .hero__title, .maxime__line{
transition:text-shadow .7s var(--ease); }
.display:hover, .h1:hover, .h2:hover, .h3:hover, .hero__title:hover,
.maxime__line:hover{ text-shadow:0 0 28px rgba(192,150,74,.38); }
.btn:hover{ box-shadow:0 0 24px rgba(192,150,74,.35); }
.btn{ transition:background .5s var(--ease), border-color .5s var(--ease),
color .5s var(--ease), box-shadow .5s var(--ease); }
/* ---- Hero ---- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
overflow:hidden; background:var(--ink-2); }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--hero-pos, 62% center); }
/* Kamerafahrt (Schleife 7, Davids Richtung): ruhige, langsame Fahrt (sanfter
Zoom + leichter Pan) auf den drei Trilogie-Bildern der Startseite, endlos
alternierend, weiches ease. Bewusste Rueckkehr der Fahrt, weil die
In-Bild-Bewegung (KI-Clips) an Objekt-Morphing scheitert (6d).
Sicherheit gegen sichtbare Raender: der Medien-Layer traegt 112%-Overscan
(Parallax nutzt max. 4.6%), die Fahrt haelt min-scale 1.10 (>= 5%
Ueberhang je Seite), Pans <= 3.2% je Achse. Zwei Fahrten je Bildformat,
verschieden getaktet; reduced-motion legt alles still (Block unten).
FIX (Schleife-7-Nachbesserung, Safari): die Fahrt animierte bislang direkt
das ![]()
(object-fit:cover, verschachtelt im per JS transformierten
Parallax-Layer) - WebKit rendert diese Kombination nicht (Bild bleibt
optisch statisch, obwohl computed style sich aendert). Die Fahrt laeuft
jetzt auf einem dedizierten Block-Wrapper (.kb-layer) UM das ;
das ![]()
selbst (srcset/sizes/object-fit, Punkt 1) bleibt unangetastet. */
.kb-layer{ width:100%; height:100%; }
/* Kamerafahrt je Bildformat (Davids Vorgabe: sofort erkennbar, ruhig,
randfrei). kbFahrtHero = Hochformat (kueche_wintergarten_3): Zoom +
sanfter vertikaler Schwenk. kbFahrtQuer = Querformat (Momente _2/_1):
horizontaler Schwenk + dezenter Zoom, translateY 0 (haelt auch die Maxime
ohne vertikalen Overscan randfrei). min-scale 1.10 => 5% Ueberhang je
Seite, Pan bleibt darunter. Verschiedene Dauer/Delay/Richtung gegen
synchrones Atmen. */
/* Schleife 11 (4): alle drei Fahrten spuerbar schneller (Davids Befund: zu
langsam): Amplituden unveraendert (randfrei bleibt belegt), nur Dauer
runter. Die Maxime (kueche_wintergarten_1, Schlussbild) faehrt NICHT mehr
quer (Links-Schwenk), sondern zoomt langsam IN die Kueche (kbFahrtZoomIn,
kein Pan, braucht keinen vertikalen Overscan, min-scale 1.10 gewahrt). */
.kenburns .kb-layer{ will-change:transform; }
.hero__media.kenburns .kb-layer{ animation:kbFahrtHero 8s ease-in-out infinite alternate; }
.moment__media.kenburns .kb-layer{ animation:kbFahrtQuer 9s ease-in-out infinite alternate; }
.maxime__media.kenburns .kb-layer{ animation:kbFahrtZoomIn 11s ease-in-out infinite alternate; }
/* Compositor-Fix (Bug 2026-07-24: Hero-Bild fehlt beim ERSTEN Laden, Reload
zeigt es). WebKit paintet ein noch nicht dekodiertes Bild auf einer
promoteten + daueranimierten Ebene nicht - erst eine Layer-Invalidierung
(Reload/Scroll) bringt es. Darum unter JS die Kamerafahrt + will-change ERST
nach dem Bild-Decode aktivieren: bis dahin bleibt .kb-layer unpromotet und
ohne Animation, das Bild paintet sicher. JS setzt .is-ready per img.decode()
/load auf das Medien-Element. Ohne JS laeuft die Fahrt unveraendert weiter
(kein .js -> diese Regeln greifen nicht). Scroll-/Snap-Mechanik unberuehrt. */
.js .hero__media.kenburns:not(.is-ready),
.js .moment__media.kenburns:not(.is-ready){ will-change:auto; }
.js .hero__media.kenburns:not(.is-ready) .kb-layer,
.js .moment__media.kenburns:not(.is-ready) .kb-layer,
.js .maxime__media.kenburns:not(.is-ready) .kb-layer{ animation:none; will-change:auto; }
/* der Fahrt-Wrapper uebernimmt die Bewegung vollstaendig; das ![]()
darunter
traegt keine eigene Transform mehr (sonst wuerde die 92svh-Settle-Transition
des Basis-.moment__media-img jetzt sichtbar durchschlagen - vorher war sie
von der (nun entfernten) Animation auf demselben Element ueberdeckt) */
.moment__media.kenburns img{ transform:none; transition:none; }
@keyframes kbFahrtHero{
from{ transform:scale(1.10) translate3d(0, 3.2%, 0); }
to { transform:scale(1.22) translate3d(0, -3.2%, 0); }
}
@keyframes kbFahrtQuer{
from{ transform:scale(1.10) translate3d(-3%, 0, 0); }
to { transform:scale(1.18) translate3d(3%, 0, 0); }
}
/* Zoom IN die Kueche (Maxime): reiner Zoom, kein Pan -> randfrei ohne
vertikalen Overscan (Schleife 11, Davids Vorgabe fuers Schlussbild) */
@keyframes kbFahrtZoomIn{
from{ transform:scale(1.10); }
to { transform:scale(1.24); }
}
.hero__scrim{ position:absolute; inset:0; z-index:1;
background:
linear-gradient(180deg, rgba(11,10,9,.62) 0%, rgba(11,10,9,.1) 38%, rgba(11,10,9,.7) 82%, rgba(11,10,9,.96) 100%),
linear-gradient(90deg, rgba(11,10,9,.55) 0%, rgba(11,10,9,.1) 32%, rgba(11,10,9,0) 55%),
radial-gradient(120% 80% at 68% 32%, rgba(192,150,74,.1), transparent 62%); }
.hero__content{ position:relative; z-index:2; width:100%; max-width:var(--maxw);
margin-inline:auto; padding:0 var(--gutter) clamp(4rem, 12vh, 9rem); }
/* Schleife 10 (2): der Menue-Push ist raus (Davids Befund 2026-07-10: der
Hero-Textblock schob sich beim Aufklappen ~170px ins Bild). Die offene Rail
legt sich jetzt auch auf der Startseite als Overlay UEBER den Inhalt,
Zielverhalten = Unterseiten (Inhalt bleibt stehen). */
.hero__title{ font-family:var(--serif); font-weight:300; line-height:1.04; letter-spacing:-.02em;
font-size:var(--t-h); margin:0; max-width:15ch; }
.hero__title em{ color:var(--brass); }
/* Gold schimmert: metallischer Verlauf auf den grossen Akzenten */
@supports(-webkit-background-clip:text) or (background-clip:text){
.hero__title em, .maxime__line em{
background:var(--brass-grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
}
.hero__sub{ margin-top:1.9rem; color:var(--cream-soft); max-width:42ch; line-height:1.55; }
.hero__row{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; margin-top:2.8rem; }
/* Hero-Lichtschimmer, solange kein Video (ruhig driftend, Waerme) */
.hero__scrim::after{ content:""; position:absolute; inset:-15%; z-index:0; pointer-events:none;
background:radial-gradient(40% 54% at 64% 28%, rgba(192,150,74,.16), rgba(192,150,74,0) 68%);
animation:heroShimmer 16s ease-in-out infinite alternate; }
@keyframes heroShimmer{
from{ transform:translate3d(-2%,-1%,0) scale(1); opacity:.35; }
to { transform:translate3d(3%,2%,0) scale(1.14); opacity:.8; }
}
/* Saubere Ladesequenz des Hero-Inhalts (rein CSS, kein Flash) */
.hero__content > *{ animation:heroLoad 1.15s var(--ease) both; }
.hero__content > *:nth-child(1){ animation-delay:.1s; }
.hero__content > *:nth-child(2){ animation-delay:.26s; }
.hero__content > *:nth-child(3){ animation-delay:.44s; }
.hero__content > *:nth-child(4){ animation-delay:.6s; }
@keyframes heroLoad{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
/* ---- Reveal (weiche Fades, bleiben nach dem Feuern) ---- */
.js .reveal{ opacity:0; transform:translateY(var(--rise)); transition:opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
/* ---- Text-Momente / Spalten ---- */
.statement{ display:grid; gap:2.2rem; }
.statement .display{ max-width:15ch; }
.two-col{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,5rem); align-items:start; }
@media(min-width:900px){ .two-col{ grid-template-columns:1.05fr .95fr; } .two-col--label{ grid-template-columns:.4fr 1fr; } }
/* ---- Voll-Bild-Moment (ein Projekt pro Abschnitt) ----
6c: kein Kenburns-Dauerdrift mehr (Fake-Kamerafahrt). Das Bild setzt
sich beim Eintritt einmal weich ab und steht dann ruhig. */
.moment{ position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink-2); }
.moment--short{ min-height:76svh; }
/* Punkt 6 (Schleife-7-Nachbesserung): Vollbild-Moment der Startseite-Trilogie
traegt sein eigenes Kapitel voll (kein Rest, den die Kapitel-Mindesthoehe
unten sonst zentriert einrahmen wuerde). Nur Desktop - dort greift auch
die Kapitel-Mindesthoehe; der Mobile-Pass (92svh) bleibt unangetastet. */
@media(min-width:861px){
/* Schleife 8: ALLE Vollbild-Momente (auch moment--short) fuellen auf Desktop
einen Bildschirm -> Sektionsname rastet ein, kein zweiter Name im Bild. */
.moment{ min-height:100svh; }
}
.moment__media{ position:absolute; inset:0; z-index:0; }
.moment__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, center);
transform:scale(1.1); transition:transform 2.2s var(--ease); }
.moment.in .moment__media img{ transform:scale(1.0); }
/* (Schleife 7: die Atlas-Clip-Slots sind raus - Kamerafahrt oben ersetzt
die In-Bild-Bewegung; mp4-Fundus bleibt in assets/video/.) */
/* Dezente Licht-Anmutung auf den Trilogie-Momenten der Startseite
(Uebergangszustand bis zu den Atlas-Clips): warmer Schimmer atmet langsam. */
.moment--licht .moment__scrim::after, .maxime--image .maxime__scrim::after{
content:""; position:absolute; inset:-15%; pointer-events:none;
background:radial-gradient(42% 56% at 60% 30%, rgba(192,150,74,.13), rgba(192,150,74,0) 70%);
animation:heroShimmer 18s ease-in-out infinite alternate; }
/* Schleife 8 (2f): kraeftigerer Scrim unten, damit der goldene Text auch auf
hellen Bildflaechen sicher lesbar ist (Ramp frueher + dunkler). */
.moment__scrim{ position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(11,10,9,.4) 0%, rgba(11,10,9,.1) 30%, rgba(11,10,9,.72) 70%, rgba(11,10,9,.95) 100%); }
.moment__body{ position:relative; z-index:2; width:100%; max-width:var(--maxw);
margin-inline:auto; padding:0 var(--gutter) clamp(3rem,7vh,5.5rem); }
/* Text-Schatten sichert die Lesbarkeit unabhaengig vom Bild darunter (2f). */
.moment__index, .moment__title, .moment__note{ text-shadow:0 2px 18px rgba(11,10,9,.72); }
.moment__index{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.26em; color:var(--brass); text-transform:uppercase; }
.moment__title{ margin:.7rem 0 1rem; max-width:18ch; }
.moment__note{ color:var(--cream-soft); max-width:48ch; }
.moment__cta{ margin-top:1.9rem; }
/* ---- Projekt-Detail (Schleife 8, 2b): default ZUGEKLAPPT, Button "Was den
Unterschied macht" (Summary in Ghost-Button-Optik) oeffnet die Fakten in einem
ruhigen dunklen Panel. Native - barrierefrei, ohne JS. ---- */
/* =====================================================================
Bild-Hotspots (Schleife 17 Punkt 3, ersetzt den details-Aufklapper):
pulsierender Goldpunkt als Klick-Einladung, Panel oeffnet am Punkt.
Werte = freigegebene Vorschau (Kern 11px radial, Saum, Ring 32px,
Puls 3.2s; Panel 21rem/74vw, rgba(21,18,16,.82) + blur 12, Goldrahmen).
===================================================================== */
/* contain:paint (17b): Chromium liess sonst eine Kompositor-Ebene des Pulses
beim Weiterscrollen am Viewport kleben; clippt die Spots hart an die Section. */
.spots{ position:absolute; inset:0; z-index:3; pointer-events:none; contain:paint; }
.spot{ position:absolute; left:var(--x); top:var(--y); width:44px; height:44px;
margin:-22px 0 0 -22px; pointer-events:auto; cursor:pointer;
background:none; border:0; padding:0; }
.spot__dot{ position:absolute; left:50%; top:50%; width:11px; height:11px;
margin:-5.5px 0 0 -5.5px; border-radius:50%;
background:radial-gradient(circle at 38% 32%, #F3E2B4, #C0964A 78%);
box-shadow:0 0 0 2px rgba(11,10,9,.35), 0 0 14px rgba(192,150,74,.55); }
.spot__ring{ position:absolute; left:50%; top:50%; width:32px; height:32px;
margin:-16px 0 0 -16px; border-radius:50%;
border:1px solid rgba(192,150,74,.8);
animation:spotPulse 3.2s var(--ease) infinite; }
.spot:hover .spot__ring, .spot.open .spot__ring, .spot:focus-visible .spot__ring{
animation:none; opacity:1; transform:none; }
/* 17b: Puls nur bei sichtbarem Moment (JS toggelt .is-off) - spart Energie
und nimmt Chromium den Anlass fuer die zurueckbleibende Puls-Ebene. */
.spots.is-off .spot__ring{ animation-play-state:paused; }
.spot:focus-visible{ outline:1px solid var(--brass); outline-offset:4px; border-radius:50%; }
@keyframes spotPulse{
0% { transform:scale(.82); opacity:.4; }
50% { transform:scale(1.12); opacity:1; }
100%{ transform:scale(.82); opacity:.4; }
}
/* Panel: oeffnet am Punkt, bleibt im Viewport (Modifier drehen die Richtung
zur Bildmitte). Farben HART gesetzt (Lesbarkeit auf jedem Bild). */
.spot__panel{ position:absolute; left:28px; top:28px; width:21rem; max-width:74vw;
display:block; text-align:left; padding:1rem 1.2rem;
background:rgba(21,18,16,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
border:1px solid rgba(192,150,74,.55); border-radius:2px;
opacity:0; visibility:hidden; transform:translateY(8px);
transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
pointer-events:none; }
.spot:hover .spot__panel, .spot.open .spot__panel, .spot:focus-visible .spot__panel{
opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.spot--up .spot__panel{ top:auto; bottom:28px; transform:translateY(-8px); }
.spot--up:hover .spot__panel, .spot--up.open .spot__panel{ transform:none; }
.spot--left .spot__panel{ left:auto; right:28px; }
.spot--right .spot__panel{ left:28px; right:auto; }
/* Schleife 22 (A6-Rot): mobil liefen 11/16 Panels aus dem Viewport ->
ein ruhiges Bottom-Sheet ueber der Icon-Leiste, fuer ALLE Richtungs-
Modifier gleich; Ein-/Ausblenden bleibt reine Opacity. */
@media(max-width:860px){
/* contain:paint (17b-Chrome-Haertung, Desktop-Fund) macht .spots sonst zum
Containing Block und das fixed-Sheet klebt am Moment statt am Viewport;
die Puls-Pause (.is-off) bleibt aktiv. */
.spots{ contain:none; }
/* Schleife 32 (Davids iPhone-Test 2026-07-16): das Bottom-Sheet lag auf dem
echten iPhone zu tief (dynamische Safari-Toolbar unten + Safe-Area) und
wurde abgeschnitten. Jetzt oben unter der Kopf-Glasleiste verankert -
die Oberkante ist auf iOS stabil, das Panel immer vollstaendig sichtbar. */
.spot__panel, .spot--up .spot__panel, .spot--left .spot__panel, .spot--right .spot__panel{
position:fixed; left:12px; right:12px; bottom:auto;
top:calc(env(safe-area-inset-top, 0px) + 118px);
width:auto; max-width:none; transform:none; }
}
.spot__label{ display:block; font-family:var(--mono); font-size:.68rem;
letter-spacing:.22em; text-transform:uppercase; color:#C0964A; margin-bottom:.5rem; }
.spot__text{ display:block; font-family:var(--serif); font-weight:300;
font-size:1.08rem; line-height:1.5; color:#EFE9DE;
text-shadow:0 1px 10px rgba(11,10,9,.6); }
/* kompakte Fakten im Panel (fassen in ~42vh, kein Doppel-Scroll) */
/* ---- Merkliste-Panel (6d): Zaehler-Herz oben rechts ist ein Button und
oeffnet ein ruhiges Panel im Seiten-Look - Kacheln (Bild + Titel) fuehren
zum Projekt, jede Kachel einzeln entfernbar, dezenter CTA darunter. ---- */
.fav-count{ background:none; border:0; font:inherit; cursor:pointer; }
.favpanel-backdrop{ position:fixed; inset:0; z-index:140; background:rgba(11,10,9,.55);
opacity:0; pointer-events:none; transition:opacity .5s var(--ease); }
.favpanel{ position:fixed; top:0; right:0; bottom:0; z-index:150; width:min(400px, 92vw);
background:var(--ink-2); border-left:1px solid var(--line);
transform:translateX(103%); transition:transform .6s var(--ease);
display:flex; flex-direction:column; gap:1.6rem;
padding:clamp(1.6rem,3vh,2.4rem) clamp(1.4rem,2.5vw,2rem); }
.favpanel-open .favpanel{ transform:none; }
.favpanel-open .favpanel-backdrop{ opacity:1; pointer-events:auto; }
.favpanel-open body{ overflow:hidden; }
.favpanel__head{ display:flex; align-items:center; justify-content:space-between;
border-bottom:1px solid var(--line-soft); padding-bottom:1.2rem; }
.favpanel__title{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.32em;
text-transform:uppercase; color:var(--brass); margin:0; }
.favpanel__close{ background:none; border:0; color:var(--cream); font-size:1.7rem;
line-height:1; cursor:pointer; padding:.2rem .4rem;
transition:color .4s var(--ease); }
.favpanel__close:hover{ color:var(--brass); }
.favpanel__list{ flex:1; overflow-y:auto; display:grid; gap:1.1rem; align-content:start; }
.favtile{ position:relative; border:1px solid var(--line-soft); border-radius:3px;
overflow:hidden; background:var(--card); transition:border-color .5s var(--ease); }
.favtile:hover{ border-color:rgba(192,150,74,.4); }
.favtile__link{ display:block; }
.favtile__link img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.favtile__link span{ display:block; font-family:var(--mono); font-size:var(--t-label);
letter-spacing:.18em; text-transform:uppercase; color:var(--cream);
padding:.85rem 1rem; }
.favtile__rm{ position:absolute; top:.55rem; right:.55rem;
width:1.9rem; height:1.9rem; border-radius:50%; border:1px solid var(--line);
background:rgba(11,10,9,.6); color:var(--cream); font-size:1.05rem; line-height:1;
cursor:pointer; transition:color .4s var(--ease), border-color .4s var(--ease); }
.favtile__rm:hover{ color:var(--brass); border-color:var(--brass); }
.favpanel__empty{ color:var(--cream-soft); margin:0; line-height:1.7; }
.favpanel__cta{ border-top:1px solid var(--line-soft); padding-top:1.4rem; }
/* ---- Herz / Merkliste an jedem Projekt (Zaehler oben rechts im Kopf) ---- */
.fav{ position:absolute; top:clamp(1.4rem,3vh,2.2rem); right:clamp(1.4rem,3vw,2.2rem); z-index:3;
display:none; background:rgba(11,10,9,.35); border:1px solid var(--line); border-radius:999px;
padding:.65rem; color:var(--cream); cursor:pointer;
transition:color .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); }
.js .fav{ display:inline-flex; }
.fav svg{ width:22px; height:22px; display:block; stroke:currentColor; fill:none;
stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:fill .5s var(--ease); }
.fav:hover{ color:var(--brass); border-color:var(--brass); }
.fav[aria-pressed="true"]{ color:var(--brass); border-color:var(--brass); background:rgba(11,10,9,.55); }
.fav[aria-pressed="true"] svg{ fill:rgba(192,150,74,.45); }
/* ---- Vier Ebenen (Haltung, in die Reise eingebettet) ----
Interaktions-Ruhe: kein Verschieben, nur eine weiche Licht-Kante. */
/* =====================================================================
Ebenen "Der Weg" (Schleife 17 Punkt 2, David-freigegebene Vorschau):
gerahmte Stufen mit fester Nummern-Spalte (gleiche Fluchten/Baseline),
wachsende Goldlinie links (timeline-Muster), Zuend-Kaskade beim
Einrasten (einmalig, .in via IntersectionObserver), auf index zusaetzlich
Start-/End-Marker "Sie." -> "Die Raumwirkung.".
===================================================================== */
/* =====================================================================
Schleife 19 (1): EIN Linien-System (Davids Entscheid: "Ueberall, wo die
senkrechte Linie ist, leuchtet Etappe eins auf, dann Etappe zwei ...").
Referenz-Optik = Ablauf-Etappen/Werdegang; ein Satz Variablen fuer
Linie, Marker und Zuend-Tempo - keine Einzelloesungen je Sektion.
===================================================================== */
:root{
--st-indent:clamp(2.4rem,5vw,4rem); /* Einzug der Inhalte zur Linie */
--st-line:linear-gradient(var(--brass), var(--line-soft));
--st-dot:9px;
--st-step:.55s; /* Abstand zwischen den Zuendungen */
--st-glow:1.9s; /* Aufleuchten je Station */
}
/* Stations-Punkt: kurz gold aufleuchten, dann beruhigen */
@keyframes stationDot{
0% { background:var(--black); box-shadow:0 0 0 0 rgba(192,150,74,0); }
45% { background:var(--brass); box-shadow:0 0 16px 2px rgba(192,150,74,.5); }
100%{ background:var(--black); box-shadow:none; }
}
@keyframes stationName{
45% { color:var(--brass); text-shadow:0 0 14px rgba(192,150,74,.35); }
}
.levels{ position:relative; display:grid; gap:clamp(1.6rem,3.5vh,2.4rem);
padding-left:var(--st-indent); }
.levels::before{ content:""; position:absolute; left:.45rem; top:.6rem; bottom:.6rem; width:1px;
background:var(--st-line);
transform:scaleY(0); transform-origin:top; transition:transform 2.6s var(--ease); }
.levels.in::before{ transform:scaleY(1); }
.level{ position:relative; display:grid; grid-template-columns:3.2ch 1fr; gap:1.4rem;
align-items:baseline; }
.level::before{ content:""; position:absolute; left:calc(-1 * var(--st-indent) + .17rem); top:.15em;
width:var(--st-dot); height:var(--st-dot); border-radius:50%;
background:var(--black); border:1px solid var(--brass); }
.level__num{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em;
color:var(--brass); margin:0; }
.level__name{ font-family:var(--serif); font-weight:300; line-height:1.2;
font-size:clamp(1.25rem,1.7vw,1.6rem); color:var(--cream); margin:0 0 .35rem; }
.level__t{ color:var(--cream-soft); margin:0; max-width:60ch; }
/* Zuend-Kaskade (Ebenen): opacity/translate, Punkt+Name leuchten kurz gold.
(Schleife 20: lv-marker "Sie."/"Die Raumwirkung." entfernt, Davids Entscheid.) */
.js .levels .level{ opacity:0; transform:translateY(14px); }
.levels.in .level{ opacity:1; transform:none;
transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
transition-delay:var(--st-delay,0s); }
.levels.in .level::before{ animation:stationDot var(--st-glow) var(--ease) both;
animation-delay:var(--st-delay,0s); }
.levels.in .level .level__name{ animation:stationName var(--st-glow) var(--ease) both;
animation-delay:var(--st-delay,0s); }
.levels.in > :nth-child(1){ --st-delay:.1s; }
.levels.in > :nth-child(2){ --st-delay:calc(.1s + var(--st-step)); }
.levels.in > :nth-child(3){ --st-delay:calc(.1s + 2*var(--st-step)); }
.levels.in > :nth-child(4){ --st-delay:calc(.1s + 3*var(--st-step)); }
/* ---- Ruhige Beleg-Zeile ueber den Bewertungen (statt Zahlen-Block) ---- */
.proofline{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.2em;
text-transform:uppercase; color:var(--slate); margin:0 0 2.8rem; line-height:2; }
/* ---- Projektstruktur: Aufgabe / Raeumliche Idee / Detail / Wirkung ---- */
.facts{ display:grid; gap:1.5rem; margin:0; }
.facts > div{ display:grid; grid-template-columns:1fr; gap:.45rem; }
@media(min-width:760px){ .facts > div{ grid-template-columns:11.5rem 1fr; gap:2.4rem; align-items:baseline; } }
.facts dt{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.22em;
text-transform:uppercase; color:var(--brass); }
.facts dd{ margin:0; color:var(--cream-soft); max-width:56ch; }
.facts .facts__wirkung dd{ color:var(--cream); }
/* ---- Bewertungen: laengliche Kacheln, EINE Spalte, exakt gleich gross
(Schleife 5). Kurzer Kern-Satz + 5 Sterne, kein Bild. ---- */
.cards{ display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,2vw,1.8rem);
max-width:900px; }
.card{ background:linear-gradient(165deg, var(--card) 0%, #131009 130%);
border:1px solid var(--line-soft); border-radius:3px; overflow:hidden;
min-height:13rem; display:grid; align-content:center;
transition:border-color .7s var(--ease); }
.card:hover{ border-color:rgba(192,150,74,.35); }
.card__body{ padding:clamp(1.8rem,3vw,2.4rem) clamp(1.8rem,4vw,3.2rem); display:grid; gap:1.1rem; }
.card__stars{ color:var(--brass); font-size:.85rem; letter-spacing:.3em; }
.card__q{ font-family:var(--serif); font-weight:300; line-height:1.42; margin:0;
font-size:clamp(1.15rem,1.5vw,1.4rem); color:var(--cream); max-width:56ch; }
/* Attribution (Davids Vorgabe: glaubwuerdiger). Nur echte Werte aus der
Bewertungsquelle (Anhang A): Vorname wo vorhanden, Projektkontext, Jahr.
Ort/Stadt liegt in der Quelle nicht vor - bewusst nicht erfunden. */
.card__meta{ margin:.4rem 0 0; font-family:var(--mono); font-size:.72rem;
letter-spacing:.14em; text-transform:uppercase; color:var(--slate);
display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .7rem; }
.card__meta cite{ font-style:normal; color:var(--cream); letter-spacing:.16em; }
.card__meta span::before{ content:"·"; margin-right:.7rem; color:var(--brass); }
/* ---- Ablauf: die Zusammenarbeit als Erlebnis-Strecke ---- */
/* Schleife 21a: verdichtet, damit Etappen- und Stufen-Screen je in EINEN
Ruhepunkt passen (Davids Dichte-Funde); Typo unangetastet, nur Abstaende. */
.steps{ position:relative; display:grid; gap:clamp(2rem,3.6vh,2.6rem); padding-left:var(--st-indent); }
.steps::before{ content:""; position:absolute; left:.45rem; top:.6rem; bottom:.6rem; width:1px;
background:var(--st-line); transform:scaleY(0); transform-origin:top;
transition:transform 2.4s var(--ease); }
.steps.in::before{ transform:scaleY(1); }
.step{ position:relative; display:grid; gap:.7rem; max-width:72ch; }
.step::before{ content:""; position:absolute; left:calc(-1 * var(--st-indent) + .17rem); top:.75em;
width:var(--st-dot); height:var(--st-dot); border-radius:50%; background:var(--black); border:1px solid var(--brass); }
/* Schleife 19 (1c): Zuend-Kaskade beim Einrasten (Etappe 1 -> 2 -> 3 -> 4),
gleiche Mechanik/Tempi wie die Ebenen (EIN System) */
.js .steps .step{ opacity:0; transform:translateY(14px); }
.steps.in .step{ opacity:1; transform:none;
transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
transition-delay:var(--st-delay,0s); }
.steps.in .step::before{ animation:stationDot var(--st-glow) var(--ease) both;
animation-delay:var(--st-delay,0s); }
.steps.in .step .step__title{ animation:stationName var(--st-glow) var(--ease) both;
animation-delay:var(--st-delay,0s); }
.steps.in > :nth-child(1){ --st-delay:.1s; }
.steps.in > :nth-child(2){ --st-delay:calc(.1s + var(--st-step)); }
.steps.in > :nth-child(3){ --st-delay:calc(.1s + 2*var(--st-step)); }
.steps.in > :nth-child(4){ --st-delay:calc(.1s + 3*var(--st-step)); }
/* Schleife 20 (4): die Preis-Stufen sind ein purer .steps-Block, EXAKT die
Etappen-Erscheinung (Davids Entscheid, keine Sonderoptik). Der Preis laeuft
in der Titel-Typo mit, nur gold abgesetzt. Texte wortgleich. */
.step__price{ color:var(--brass); white-space:nowrap; }
.step__k{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.28em; text-transform:uppercase;
color:var(--brass); margin:0; }
.step__title{ font-family:var(--serif); font-weight:300; line-height:1.14; margin:0;
font-size:var(--t-m); color:var(--cream); }
.step__t{ color:var(--cream-soft); margin:0; }
/* ---- Werdegang als Timeline (Knops-Form, Davids Geschichte) ---- */
.timeline{ position:relative; display:grid; gap:clamp(2.6rem,6vh,4.5rem); padding-left:var(--st-indent); }
.timeline::before{ content:""; position:absolute; left:.45rem; top:.6rem; bottom:.6rem; width:1px;
background:var(--st-line); transform:scaleY(0); transform-origin:top;
transition:transform 2.6s var(--ease); }
.timeline.in::before{ transform:scaleY(1); }
.tl{ position:relative; display:grid; gap:.55rem; max-width:58ch; }
.tl::before{ content:""; position:absolute; left:calc(-1 * var(--st-indent) + .17rem); top:.5em;
width:var(--st-dot); height:var(--st-dot); border-radius:50%; background:var(--black); border:1px solid var(--brass); }
/* Schleife 19 (1e): Werdegang zuendet scroll-folgend (lange Timeline, ruhigere
Variante: jede Station leuchtet auf, wenn sie ins Bild kommt - .reveal.in) */
.tl.in::before{ animation:stationDot var(--st-glow) var(--ease) both .15s; }
.tl.in .tl__title{ animation:stationName var(--st-glow) var(--ease) both .15s; }
.tl__year{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.26em; text-transform:uppercase;
color:var(--brass); margin:0; }
.tl__title{ font-family:var(--serif); font-weight:300; line-height:1.14; margin:0;
font-size:var(--t-m); color:var(--cream); }
.tl__t{ color:var(--cream-soft); margin:0; }
.tl--turn .tl__title em{ color:var(--brass); }
/* ---- Portrait (Gesicht bleibt vollstaendig sichtbar: kein Cover-Schnitt) ---- */
.portrait{ display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
@media(min-width:900px){ .portrait{ grid-template-columns:.85fr 1.15fr; } }
.portrait__media{ position:relative; border-radius:3px; overflow:hidden; border:1px solid var(--line-soft);
max-width:460px; }
.portrait__media img{ width:100%; height:auto; }
.portrait__media::after{ content:""; position:absolute; inset:0;
background:linear-gradient(180deg, rgba(11,10,9,0) 62%, rgba(11,10,9,.42) 100%); }
/* ---- Signatur (Luxus-Text, Davids Wertaussage) ---- */
.signature{ text-align:center; display:grid; gap:2.2rem; justify-items:center;
padding-block:clamp(6rem,16vh,13rem); }
.signature__q{ font-family:var(--serif); font-weight:300; line-height:1.42; letter-spacing:-.008em;
font-size:var(--t-m); max-width:34ch; margin:0; color:var(--cream); }
.signature__q em{ color:var(--brass); }
/* Schleife 11 (2): der goldene 34px-Strich vor der Signatur (::before) ist raus,
letztes Gold-Strich-Ueberbleibsel (Davids Vorgabe). Name steht schlicht. */
.signature__name{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.32em; text-transform:uppercase;
color:var(--slate); margin:0; }
/* ---- Maxime (Voll-Text-Moment, seit Schleife 5 mit Bildgrund) ---- */
.maxime{ text-align:center; padding-block:clamp(6rem,18vh,15rem); }
.maxime__line{ font-family:var(--serif); font-weight:300; line-height:1.08; letter-spacing:-.016em;
font-size:var(--t-h); max-width:20ch; margin-inline:auto; color:var(--cream); }
.maxime__line em{ color:var(--brass); }
/* 6b: der Maxime-Moment laeuft vollflaechig ueber die gesamte Breite
(kein .wrap mehr im Markup), nur der Text behaelt seine Luft */
.maxime--image{ position:relative; overflow:hidden; background:var(--ink-2);
padding-inline:var(--gutter); display:flex; flex-direction:column; justify-content:center; }
/* Punkt 6 (Schleife-7-Nachbesserung): traegt sein Kapitel voll, Zeile bleibt
mittig statt oben mit Luft darunter. Nur Desktop, siehe .moment--licht oben. */
@media(min-width:861px){
.maxime--image{ min-height:100svh; }
}
.maxime__media{ position:absolute; inset:0; z-index:0; }
.maxime__media img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos, center); }
.maxime__scrim{ position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(11,10,9,.72), rgba(11,10,9,.5) 45%, rgba(11,10,9,.82)); }
.maxime--image .maxime__line{ position:relative; z-index:2; }
/* Schleife 19 (1d): die Preis-Treppe (.stair) ist in die Goldlinien-Stationen
(.steps--stufen, oben) uebergegangen - EIN Linien-System, Davids Entscheid. */
/* Schleife 19 (2): Denkweise Screen 1 - jeder der zwei Saetze steht auf
EINER eigenen Zeile (Desktop); unter 861px bricht der Text natuerlich. */
@media(min-width:861px){
.line-pair span, .line-pair strong{ display:block; white-space:nowrap; }
}
/* ---- Preiskacheln S/M/L/XL (Schleife 6b, Knops-orientiert): ruhige
goldgerahmte Karten mit Leistungsumfang je Stufe; L als naheliegendste
Wahl ruhig hervorgehoben (nicht marktschreierisch) ---- */
.prices{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:3rem;
align-items:stretch; }
@media(min-width:640px){ .prices{ grid-template-columns:1fr 1fr; } }
@media(min-width:1180px){ .prices{ grid-template-columns:repeat(4,1fr); } }
.price{ border:1px solid rgba(192,150,74,.45); background:rgba(0,0,0,.5); border-radius:4px;
padding:2.2rem 1.9rem 2.4rem; display:flex; flex-direction:column; gap:1.5rem;
transition:border-color .6s var(--ease), box-shadow .6s var(--ease); }
.price:hover{ border-color:var(--brass); box-shadow:0 0 30px rgba(192,150,74,.14); }
.price__sz{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.34em;
color:var(--brass); }
.price__wt{ font-family:var(--serif); font-weight:300; font-size:var(--t-m); line-height:1.2;
color:var(--cream); margin:.4rem 0 0; }
.price__list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; flex:1; }
.price__list li{ position:relative; padding-left:1.15rem; color:var(--cream-soft);
font-size:.98rem; line-height:1.55; }
.price__list li::before{ content:""; position:absolute; left:0; top:.62em;
width:4px; height:4px; border-radius:50%; background:var(--brass); }
.price__pr{ font-family:var(--serif); font-weight:300; font-size:clamp(1.6rem,2.4vw,2.1rem);
line-height:1; color:var(--cream); border-top:1px solid var(--line-soft); padding-top:1.4rem; }
.price--l{ border-color:var(--brass);
background:linear-gradient(170deg, rgba(192,150,74,.16), rgba(0,0,0,0) 55%) rgba(0,0,0,.5);
box-shadow:0 0 34px rgba(192,150,74,.16); }
.price--l .price__pr{ color:var(--brass); }
.prices__note{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.16em;
text-transform:uppercase; color:var(--slate); margin-top:1.6rem; }
/* ---- Anfrage-CTA-Band (warme Einladung) ---- */
.cta-band{ text-align:center; display:grid; gap:2rem; justify-items:center; }
.cta-band .h1{ max-width:22ch; }
.cta-band .prose{ margin-inline:auto; text-align:center; }
/* ---- Formular (grosszuegig, klar lesbar) ---- */
/* Schleife 14 (2): kompaktes Formular (Feld-Abstaende/-Hoehen runter, Textarea
kleiner), damit die Anfrage-Sektion in 100svh - Footer passt; Feldhoehe
bleibt >= 44px (Touch). */
/* Schleife 23 (4): das Formular als Gespraechsbeginn statt Behoerdenkasten.
Formsprache der Site: grosse Serif-Eingaben auf feinen Linien (das
Stations-/Goldlinien-Motiv), Mono-Labels in Gold, Fokus zuendet die Linie
gold, Felder erscheinen als Kaskade im --st-step-Takt. Felder, Pflichten
und Wortlaute unveraendert. */
.form{ display:grid; gap:clamp(1rem,1.9vh,1.45rem); max-width:760px; }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
.field input, .field select, .field textarea{
background:transparent; border:0; border-bottom:1px solid var(--line);
border-radius:0; color:var(--cream); font-family:var(--serif); font-weight:300;
font-size:clamp(1.15rem,1.4vw,1.35rem); padding:.5em 0; width:100%;
transition:border-color .5s var(--ease), box-shadow .5s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none;
border-bottom-color:var(--brass);
box-shadow:0 12px 22px -16px rgba(192,150,74,.55); }
.field select{ -webkit-appearance:none; appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C0964A' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right .2em center; padding-right:1.6em; }
.field textarea{ min-height:82px; resize:vertical; }
/* Davids Live-Fund 2026-07-12: das native macOS-Dropdown war ein Fremdkoerper
(Systemschrift, blauer Balken). JS baut je Select ein Site-Dropdown (.csel);
das native Element bleibt als Fallback + Traeger der required-Bubble und
liegt unsichtbar unter dem Button. */
.csel{ position:relative; display:block; }
.csel select{ position:absolute; inset:0; width:100%; height:100%;
opacity:0; pointer-events:none; }
.csel__btn{ display:block; width:100%; text-align:left; cursor:pointer;
background:transparent; border:0; border-bottom:1px solid var(--line);
border-radius:0; color:var(--cream); font-family:var(--serif); font-weight:300;
font-size:clamp(1.15rem,1.4vw,1.35rem); padding:.5em 1.6em .5em 0;
transition:border-color .5s var(--ease), box-shadow .5s var(--ease);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C0964A' stroke-width='1.4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right .2em center; }
.csel__btn:focus-visible{ outline:none; border-bottom-color:var(--brass);
box-shadow:0 12px 22px -16px rgba(192,150,74,.55); }
.csel.open .csel__btn{ border-bottom-color:var(--brass); }
.csel__btn.is-empty{ color:var(--slate); }
.csel__list{ position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
margin:0; padding:.4rem 0; list-style:none; max-height:300px; overflow-y:auto;
background:rgba(21,18,16,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
border:1px solid rgba(192,150,74,.55); border-radius:2px;
opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
transition:opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s; }
.csel.open .csel__list{ opacity:1; visibility:visible; transform:none;
pointer-events:auto; transition-delay:0s; }
.csel__list::-webkit-scrollbar{ width:8px; }
.csel__list::-webkit-scrollbar-track{ background:transparent; }
.csel__list::-webkit-scrollbar-thumb{ background:rgba(192,150,74,.35); border-radius:4px; }
.csel__list::-webkit-scrollbar-thumb:hover{ background:rgba(192,150,74,.55); }
.csel__opt{ padding:.55em 1.1em; font-family:var(--serif); font-weight:300;
font-size:1.05rem; color:var(--cream-soft); cursor:pointer;
border-left:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.csel__opt:hover{ color:var(--cream); background:rgba(192,150,74,.08); border-left-color:var(--brass); }
.csel__opt[aria-selected="true"]{ color:var(--brass); border-left-color:var(--brass); }
@media(max-width:860px){
/* mobil wie die Hotspot-Panels: Sheet ueber der Icon-Leiste, nie darunter */
.csel__list{ position:fixed; left:12px; right:12px; top:auto;
bottom:calc(4.4rem + env(safe-area-inset-bottom) + 12px); max-height:46vh; }
}
.field ::placeholder{ color:var(--slate); opacity:1; }
.field-row{ display:grid; grid-template-columns:1fr; gap:clamp(1rem,1.9vh,1.45rem); }
@media(min-width:680px){ .field-row{ grid-template-columns:1fr 1fr; column-gap:2.6rem; } }
.consent{ display:flex; gap:1rem; align-items:flex-start; font-size:1rem; color:var(--cream-soft);
border-top:1px solid var(--line-soft); padding-top:clamp(.85rem,1.5vh,1.1rem); }
.consent input{ margin-top:.3rem; width:18px; height:18px; accent-color:var(--brass); flex:none; }
/* Feld-Kaskade: dieselbe Zuend-Sprache wie die Linien-Sektionen */
.js .form > *{ opacity:0; transform:translateY(12px); }
.form.in > *{ opacity:1; transform:none;
transition:opacity 1s var(--ease), transform 1s var(--ease), border-color .5s var(--ease);
transition-delay:var(--st-delay,0s); }
.form.in > :nth-child(1){ --st-delay:.1s; }
.form.in > :nth-child(2){ --st-delay:calc(.1s + .5*var(--st-step)); }
.form.in > :nth-child(3){ --st-delay:calc(.1s + 1*var(--st-step)); }
.form.in > :nth-child(4){ --st-delay:calc(.1s + 1.5*var(--st-step)); }
.form.in > :nth-child(5){ --st-delay:calc(.1s + 2*var(--st-step)); }
.form.in > :nth-child(6){ --st-delay:calc(.1s + 2.5*var(--st-step)); }
.form.in > :nth-child(7){ --st-delay:calc(.1s + 3*var(--st-step)); }
.form__note{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.06em; color:var(--slate); line-height:1.8; }
/* ---- Rechtsseiten ---- */
.legal{ max-width:780px; }
@media(min-width:861px){ .legal{ padding-left:6rem; } }
.legal h2{ margin:2.6rem 0 .8rem; }
.legal h2:first-child{ margin-top:0; }
.legal p{ color:var(--cream-soft); margin:0 0 1em; }
.legal .slot{ margin:.4rem 0 1.6rem; }
/* ---- Footer: radikal leer - NUR die eine ruhige Zeile.
(6b: Logo unten war falsch platziert; das Logo lebt allein oben links.) ---- */
.footer{ border-top:1px solid var(--line-soft); padding-block:clamp(3.5rem,8vh,6rem);
text-align:center; }
/* Schleife 24 (5): SMARD/VARDON im Footer als Coming-soon-Hinweis, Optik der
Hotspot-Panels (dunkles Glas, 1px Gold, feine Rundung); kein Link, kein
Pointer-Versprechen. Oeffnet per Hover/Focus (CSS) bzw. Tap (.open via JS). */
.soon{ position:relative; cursor:default; }
.soon__panel{ position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(6px);
padding:.55rem 1rem; white-space:nowrap;
font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--cream);
background:rgba(21,18,16,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
border:1px solid rgba(192,150,74,.55); border-radius:2px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s; }
.soon:hover .soon__panel, .soon:focus-visible .soon__panel, .soon.open .soon__panel{
opacity:1; visibility:visible; transform:translateX(-50%); transition-delay:0s; }
.footer__line{ font-family:var(--mono); font-size:var(--t-label); letter-spacing:.18em;
text-transform:uppercase; color:var(--slate); margin:0; line-height:2.2; }
.footer__line a{ color:var(--cream-soft); transition:color .4s var(--ease); }
.footer__line a:hover{ color:var(--brass); }
/* ---- Parallax-Layer (JS verschiebt sie, nie Raender sichtbar) ---- */
.hero__media, .moment__media{ top:-6%; bottom:auto; height:112%; will-change:transform; }
/* ---- Mobile-Pass (gestalten, nicht schrumpfen) ---- */
@media(max-width:860px){
.hero{ min-height:96svh; }
.hero__content{ padding-bottom:clamp(4.5rem,14vh,8rem); }
.fav-count{ padding-right:.5rem; }
}
/* Spam-Falle im Anfrage-Formular (Formular-Ziel Spec 2026-07-16): fuer
Menschen unsichtbar und nicht fokussierbar, Bots fuellen sie aus. */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
/* ---- Reduced motion: alles ruht ---- */
@media(prefers-reduced-motion:reduce){
html{ scroll-behavior:auto; }
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important; animation-delay:0ms !important; }
.js .reveal{ opacity:1; transform:none; }
.hero__media img{ transform:none; animation:none; }
.moment__media img{ transform:none; animation:none; }
.moment.in .moment__media img{ animation:none; }
.kenburns .kb-layer{ animation:none; transform:none; } /* Kamerafahrt ruht (Standbild) */
/* Schleife 17: Ebenen sofort sichtbar, Linie voll; Hotspots statisch, Panel ohne Transition */
.js .levels .level{ opacity:1; transform:none; }
.js .steps .step{ opacity:1; transform:none; } /* Schleife 19: Etappen/Stufen sofort da */
.js .form > *{ opacity:1; transform:none; } /* Schleife 23: Formular sofort da */
.levels::before{ transform:none; }
.spot__ring{ animation:none; opacity:1; transform:none; }
.top__cta::after{ animation:none; }
.top__cta{ animation:none; background-position:130% 0; } /* Gold-CTA ruht: Streifen ganz aussen, reine Goldflaeche */
.hero__scrim::after{ animation:none; opacity:.4; }
.moment--licht .moment__scrim::after, .maxime--image .maxime__scrim::after{ animation:none; opacity:.4; }
.hero__content > *{ animation:none; }
.hero__media, .moment__media{ transform:none !important; }
.steps::before, .timeline::before{ transform:scaleY(1); }
.cursor-dot{ display:none; }
.page-fade{ display:none; }
.js body{ animation:none; }
}