/* ════════════════════════════════════════════════════════════════ LOKALE FONTS (v16) – Playfair Display + Jost, woff2, /fonts Ersetzt den frueheren externen Google-Fonts-. ════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/playfair-400.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/playfair-500.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/playfair-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('fonts/jost-200.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/jost-300.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jost-400.woff2') format('woff2'); } @font-face { font-family: 'Jost'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/jost-600.woff2') format('woff2'); } /* ════════════════════════════════════════════════════════════════ BASELINE TOKENS ════════════════════════════════════════════════════════════════ */ :root { --gold-sunset: #d6b25e; --gold: #d6b25e; --gold-bright: #f3e5ad; --gold-glow: rgba(214, 178, 94, 0.4); --bg-black: #000000; --black: #000000; --bg-anthracite: #0d0d0d; --anthracite: #111111; --text-main: #f5f5f5; --text: #f0ede8; --text-dim: rgba(240,237,232,0.62); --text-muted: #8e8e8e; --padding-x: clamp(25px, 8vw, 150px); --content-max-width: 1200px; /* v16.15: Globaler Skalierungsfaktor fuer feste Pixelgroessen (Marke, Sentinel). Ab 2400px Viewport exakt 1 (32"-Monitore unveraendert), darunter proportional bis minimal 0,72 (Notebook). Wert wird per JS als reine Zahl gesetzt (CSS-Laengendivision ist nicht interop); Fallback ohne JS: 1 = volle Groesse. */ --ui-scale: 1; --transition-majestic: all 7.0s cubic-bezier(0.19, 1, 0.22, 1); --transition-reveal: all 1.8s cubic-bezier(0.23, 1, 0.32, 1); --transition-ui: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); --ease-fluid: cubic-bezier(0.25, 1, 0.3, 1); --ease-majestic: cubic-bezier(0.19, 1, 0.22, 1); /* SUPER 8 FILM TOKENS */ --film-base: #e8e3d5; --film-dark: #080706; --projector-light: #fffee6; } * { margin: 0; padding: 0; box-sizing: border-box; } /* v14: scrollbar-gutter reserviert den Platz der Scrollleiste dauerhaft. Ohne das wurde die Seite beim Sperren des Scrolls (Film, Menue) kurz breiter, was ein Resize ausloeste - Partikel-Neuaufbau mitten im Einflug (Standbild-Bug). */ /* v16.20: overflow-x:hidden zusaetzlich auf - body{overflow-x:hidden} allein verhindert horizontales Wegwischen auf iOS Safari nicht zuverlaessig, wenn irgendein Element im Dokument (Cases-Absolutpositionierung o.ae.) breiter als der Viewport ist. ist das tatsaechliche Scroll-Root; mit Clipping dort auch dann kein Wegwischen moeglich, wenn die genaue Ursache des breiten Elements noch nicht gefunden ist. */ /* TESTWEISE (Cases-Mobil-Fehlersuche, Test 2): hidden -> clip. Verdacht: overflow-x:hidden auf html/body macht beide zu Scroll-Containern und bricht dadurch position:sticky sitetweit (betrifft nachweislich sowohl Cases mobil als auch Leistungen-Buch - beide snappen/kleben nicht). clip schuetzt vor seitlichem Wegrutschen genauso wie hidden, macht das Element aber nicht zum Scroll-Container. Muss auf echtem Handy verifiziert werden (iOS Safari war laut Kommentar unten der urspruengliche Grund fuer die html-Regel) - bei Fehlschlag hier zurueck auf "hidden" wechseln. */ html { scroll-behavior: smooth; scrollbar-gutter: stable; overflow-x: clip; } body { font-family: 'Jost', sans-serif; background-color: var(--bg-black); color: var(--text-main); overflow-x: clip; -webkit-font-smoothing: antialiased; display: block; } h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 400; } /* ─── MAIN WRAPPER ─── */ main { transition: filter 1.2s cubic-bezier(0.19, 1, 0.22, 1); /* v14: "will-change: filter" entfernt. Es zwang den Browser, main dauerhaft als eigene Ebene zu behandeln - dadurch funktionierte "position: fixed" fuer das Festhalten der Cases-Sektion nicht (Ursache des vertikalen Zuckens beim Scrollen). Der Menu-Weichzeichner funktioniert auch ohne diesen Hinweis. */ background-color: var(--bg-black); } body.menu-open main { filter: blur(35px) brightness(0.25); } /* ─── NAVIGATION & LOGO AUSRICHTUNG ─── */ nav { position: fixed; top: 0; width: 100%; padding: 45px var(--padding-x); display: flex; justify-content: flex-end; align-items: flex-end; z-index: 2800; height: 155px; pointer-events: none; /* Nav background clicking prevention */ } nav > * { pointer-events: auto; } /* Logo: Etwas höher (40%) gestartet, damit es sich noch besser von der Hero-Schrift trennt */ .logo-anchor { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3000; pointer-events: auto; cursor: pointer; transition: left 1.2s var(--ease-majestic), top 1.2s var(--ease-majestic), transform 1.2s var(--ease-majestic); } .logo-anchor img { display: block; width: calc(500px * var(--ui-scale)); height: auto; position: relative; transition: width 1.2s var(--ease-majestic); } body.scrolled .logo-anchor { left: var(--padding-x); top: 45px; transform: translate(0, 0); } body.scrolled .logo-anchor img { width: calc(150px * var(--ui-scale)); } body.menu-open .logo-anchor { opacity: 0; visibility: hidden; } /* Wortmarke: Header-Justage v2 – Werte aus H2A_Header_Justage.html übernommen */ .wordmark { /* v16.15: Groessen folgen --ui-scale (unter 2400px proportional kleiner) */ --wordmark-font-size: calc(32px * var(--ui-scale)); --wordmark-top: calc(117px * var(--ui-scale)); --wordmark-letter-spacing: 0.32em; --wordmark-gap-from-logo: calc(30px * var(--ui-scale)); --logo-header-width: calc(150px * var(--ui-scale)); position: fixed; top: var(--wordmark-top); left: calc(var(--padding-x) + var(--logo-header-width) + var(--wordmark-gap-from-logo)); bottom: auto; height: auto; line-height: 1; display: flex; align-items: flex-end; font-family: 'Playfair Display', serif; font-weight: 400; font-size: var(--wordmark-font-size); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; letter-spacing: var(--wordmark-letter-spacing); text-transform: uppercase; color: var(--text-main); opacity: 0; transform: translateX(-20px); transition: opacity 1.2s var(--ease-majestic), transform 1.2s var(--ease-majestic); pointer-events: none; } body.scrolled .wordmark { opacity: 1; transform: translateX(0); } /* v16.16: Unter 2400px gibt es die Wortmarke gar nicht - die zentrierte Inhaltsspalte laesst dort keinen Platz, und das kurze Aufblitzen vor der brand-hidden-Ausblendung wirkte fehlerhaft (Jans Entscheid, spaeter ggf. andere Loesung). */ /* v16.17: Schwelle von 2400 auf 2200 gesenkt. Gemessen braucht die Wortmarke 354px ab --padding-x (Logo allein 108px); rechnerisch passt sie ab 2033px Viewport. 2200 laesst 49px Luft zur zentrierten 1200px-Spalte - dieselbe Reserve wie beim Logo ab 1500px. Ab hier laeuft die Marke als Einheit, darunter Bildmarke allein. */ @media (max-width: 2199px) { .wordmark { display: none !important; } } /* Wortmarke im Menü ausblenden */ body.menu-open .wordmark { opacity: 0 !important; visibility: hidden; } /* v15.2: Marken-Ausblendung statt Insel (Jans Entscheid). Logo und Wortmarke weichen dort, wo Inhalt in ihre Zone laeuft: beim Buch (Leistungen) und in der gesamten Cases-Sektion inkl. Ueberschrift. Gesteuert per IntersectionObserver -> body.brand-hidden. */ body.brand-hidden .logo-anchor, body.brand-hidden .wordmark { opacity: 0 !important; pointer-events: none !important; /* v15.2: Ausblenden muss SCHNELL sein (0,22s), sonst schwebt die Marke bei zuegigem Scrollen noch ueber dem Buch. Das Wiederauftauchen laeuft ueber die Basisregeln weiterhin langsam-elegant. */ transition: opacity 0.22s ease; } .logo-anchor { transition: left 1.2s var(--ease-majestic), top 1.2s var(--ease-majestic), transform 1.2s var(--ease-majestic), opacity 0.6s ease; } /* ════════════════════════════════════════════════════════════════ MASSIVER NAUTILUS IM HERO (04.08.2026, Jans Entscheid) Im Hero steht das gefuellte Zeichen, beim Scrollen verwandelt es sich in die Linienzeichnung oben links. Die Wanderung selbst macht der vorhandene .logo-anchor, hier kommt nur der Formwechsel dazu. Warum ueberhaupt: Die Linienzeichnung bricht bei kleinen Groessen weg - Haarlinien fallen unter die Wahrnehmungsschwelle. Das gefuellte Zeichen traegt auch klein. Als Auftakt gross, danach als Haarlinie: das Volle wird zum Wesentlichen. Uebergang mit Luecke: erst geht die eine Form ganz weg, dann kommt die andere. Die Verzoegerungen sind gespiegelt, sonst liegen beim Zurueckscrollen kurz beide Formen uebereinander - sie sind nicht deckungsgleich, das saehe nach Fehler aus. Die Bilddatei traegt bereits 10% Dunst in der Farbe des Videos. Ohne ihn wirkt das Rendering aufgeklebt: in einer diesigen Szene ist alles Nahe klarer als alles Ferne, ein voellig klares Objekt liest das Auge deshalb als davorliegend. Farbton und Saettigung sind auf den Korridor des SVG gestaucht (Farbton 39,5 bis 45). Der Schatten verankert das Zeichen auf der Flaeche statt davor. Die Wolkenschicht laesst dasselbe Video ein zweites Mal ueber das Gold ziehen, beschnitten auf die Form des Zeichens und gekapselt, damit sie nur mit dem Zeichen mischt und nicht mit dem Video. Angezapft wird der Himmel links oben - dort ist die staerkste Bewegung und kein Turm im Bild. ════════════════════════════════════════════════════════════════ */ .logo-anchor .n-gruppe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; aspect-ratio: 789 / 525; pointer-events: none; isolation: isolate; filter: saturate(0.9) drop-shadow(0 46px 110px rgba(0,0,0,1)); opacity: 1; transition: opacity 0.55s ease 0.70s; } /* 11.08.2026: Verzerrung im mobilen Header behoben (Jan-Befund). Ursache war reine Spezifitaet, kein Layoutfehler: body.scrolled .logo-anchor img -> (0,2,2) width: 68px .logo-anchor .n-massiv -> (0,2,0) width: 100% Die erste Regel meint die Linienzeichnung, trifft aber JEDES img im Anker - also auch das gefuellte Zeichen. Sobald body.scrolled gesetzt war, bekam es 68px Breite bei weiterhin 100% Hoehe und wurde dadurch in die Breite gezogen. Am Desktop faellt das nicht auf, weil die ganze Gruppe dort ausgeblendet wird; mobil bleibt sie stehen (opacity: 1 !important) - deshalb nur dort sichtbar. Behoben ueber hoehere Spezifitaet (0,3,1) statt !important, plus object-fit als Netz gegen jede kuenftige Breitenangabe. */ .logo-anchor .n-gruppe img.n-massiv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .logo-anchor .n-wolken { position: absolute; inset: 0; overflow: hidden; -webkit-mask-image: url('nautilus-massiv.webp'); mask-image: url('nautilus-massiv.webp'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mix-blend-mode: overlay; } /* 274% bildet die Videopixel 0-700 (Himmel links oben) auf die Zeichenflaeche ab. Entfaerbt, sonst kippt das Gold ins Gruenliche; der hohe Kontrast laesst nur die hellen Schleier wirksam werden. */ .logo-anchor .n-wolken video { position: absolute; left: 0; top: 0; width: 274%; height: auto; display: block; filter: grayscale(1) contrast(4.5) brightness(0.5); } /* WICHTIG: transition muss die Breite mitfuehren. Eine transition-Angabe ersetzt die vorhergehende vollstaendig - ohne die Breite hier springt das Logo beim Scrollen von 500 auf 150px, statt weich zu schrumpfen (gemessen 04.08.2026). Die Breitenangabe stammt aus .logo-anchor img. */ .logo-anchor img.logo-linie { opacity: 0; transition: width 1.2s var(--ease-majestic), opacity 0.40s ease; } body.scrolled .logo-anchor .n-gruppe { opacity: 0; transition: opacity 0.40s ease; } body.scrolled .logo-anchor img.logo-linie { opacity: 1; transition: width 1.2s var(--ease-majestic), opacity 0.55s ease 0.70s; } /* Handy: im Markenbalken steht die Marke durchgehend und sehr klein - genau dort versagt die Linienzeichnung. Also bleibt das gefuellte Zeichen stehen, mit kleinerem Schatten. Die Wolkenschicht entfaellt, sie kostet eine zweite Videospur und traegt bei der Groesse nichts. */ @media (max-width: 768px) { .logo-anchor .n-gruppe, body.scrolled .logo-anchor .n-gruppe { opacity: 1 !important; filter: saturate(0.9) drop-shadow(0 8px 20px rgba(0,0,0,0.9)); } .logo-anchor img.logo-linie, body.scrolled .logo-anchor img.logo-linie { opacity: 0 !important; } .logo-anchor .n-wolken { display: none; } } @media (prefers-reduced-motion: reduce) { .logo-anchor .n-wolken { display: none; } .logo-anchor .n-gruppe, .logo-anchor img.logo-linie { transition: opacity 0.2s linear; } } /* 03.08.2026: Notebook-Stufe (Jans Variante C). Zwischen 769 und 1499px kollidiert die Bildmarke mit der Textspalte, weil Logo und Text denselben Seitenrand --padding-x benutzen - der Text bekommt zusaetzlich die Zentrierung der 1200px-Spalte, das Logo nicht. Gemessen bei 1280px (14"-Notebook mit 200% Windows-Skalierung): Logo endet bei 209, Text beginnt bei 137, also 72px Ueberlappung. Deshalb wich die Marke dort bisher in allen Sektionen. Loesung: eigener schmaler Rand statt --padding-x, dazu kleiner. Bei 1280px bleiben so rund 31px Luft zum Text. Nur der gescrollte Zustand ist betroffen - im Hero steht die Marke gross und zentriert, dort gibt es keine Textspalte, mit der sie kollidieren koennte. Die zugehoerige Schwelle steht als MARKE_SCHWELLE in index.html und index-en.html. Begruendung fuers Sichtbarbleiben: das Logo ist der einzige direkte Ruecksprung zum Hero (Jans Entscheid). */ @media (min-width: 769px) and (max-width: 1499px) { body.scrolled .logo-anchor { left: 16px; } body.scrolled .logo-anchor img { width: 90px; } } /* v16: Ast-A Orbit-Trigger + Morph-Overlay entfernt (Menue laeuft ueber Ast B / Sentinel). */ /* v16: Morph-Overlay-CSS entfernt (Ast A). .magnetic-inner bleibt – wird auch von Ast B (Buch-CTAs, Pfeile) genutzt. */ .magnetic-inner { will-change: transform; } /* v16: Sidebar-Konsole + Dial-Menue (Ast A) entfernt. */ /* ════════════════════════════════════════════════════════════════ AST-A / AST-B SICHTBARKEITS-STEUERUNG data-menu-variant="A" (default) → Dial-Menü aktiv data-menu-variant="B" → Sentinel aktiv ════════════════════════════════════════════════════════════════ */ /* v16: Ast-A/B-Umschaltregeln entfernt – Seite laeuft fest auf Ast B (Sentinel). */ /* Push-Effekt für Ast B auf main umgeleitet (kein #bg-layer in v9.x) */ html[data-menu-variant="B"] body.menu-open main { transform: scale(0.90) translateY(3vh); filter: blur(6px) brightness(0.3); border-radius: 32px; overflow: hidden; box-shadow: 0 0 100px rgba(0,0,0,1); transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center top; will-change: transform, filter; } html[data-menu-variant="B"] main { transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), filter 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center top; } /* ════════════════════════════════════════════════════════════════ SENTINEL CSS (Ast B) – isoliert, kein Konflikt mit Ast A ════════════════════════════════════════════════════════════════ */ :root { --gold-primary: #d6b25e; --gold-glow-sentinel: rgba(214, 178, 94, 0.8); --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); --ease-smooth: cubic-bezier(0.34, 1.56, 0.64, 1); } #sentinel-workspace { position: fixed; top: 2rem; right: 2rem; /* v16.15: Orb skaliert als Einheit (Ringe, Knoten, Hover-Abstaende) mit dem globalen Faktor - verankert an seiner Ecke. 04.08.2026: zusaetzlicher Faktor --orb-faktor, siehe die Notebook-Stufe weiter unten. Standard 1, aendert also nichts. */ transform: scale(calc(var(--ui-scale) * var(--orb-faktor, 1))); transform-origin: top right; display: flex; justify-content: center; align-items: center; z-index: 3001; pointer-events: none; } #sentinel-workspace .s-variant-card { display: flex; justify-content: center; align-items: center; pointer-events: auto; } .s-orbit-wrapper { width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; border-radius: 50%; transition: all 0.6s var(--ease-smooth); } .s-orbit-wrapper::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 320px; border-radius: 50%; z-index: 1; pointer-events: none; transition: all 0.8s var(--ease-smooth); background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 40%, transparent 65%); /* 03.08.2026: backdrop-filter entfernt. Er war die Hauptquelle des Bandings ueber schwarzem Grund - im Nahschwarz stehen zu wenige 8-Bit-Stufen zur Verfuegung - und zugleich der teuerste Einzelposten der Seite. Der Verlauf allein stellt den Orb ueber hellen Bildern frei; das ist sein eigentlicher Zweck. Der Hover-Zustand (Glastropfen) behaelt seinen Weichzeichner. */ -webkit-mask-image: radial-gradient(circle, black 0%, rgba(0,0,0,0.6) 40%, transparent 65%); mask-image: radial-gradient(circle, black 0%, rgba(0,0,0,0.6) 40%, transparent 65%); animation: s-orbitAnomaly 40s linear infinite; } @keyframes s-orbitAnomaly { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .s-o-node { position: absolute; display: flex; align-items: center; justify-content: center; transition: all 0.8s var(--ease-smooth); z-index: 2; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.9)); } .s-o-node-1 { transition-delay: 0s; } .s-o-node-2 { transition-delay: 0.05s; } .s-o-node-3 { transition-delay: 0.1s; } .s-o-ring { position: absolute; border-radius: 50%; background: conic-gradient(from 0deg, #6b5311 0%, #d6b25e 15%, #fff7b0 25%, #d6b25e 35%, #6b5311 50%, #d6b25e 65%, #fff7b0 75%, #d6b25e 85%, #6b5311 100%); clip-path: inset(0 0 50% 0); transition: all 0.8s var(--ease-smooth); box-sizing: border-box; } .s-o-ring-1 { width: 120px; height: 120px; -webkit-mask: radial-gradient(circle, transparent 45px, black 46px); mask: radial-gradient(circle, transparent 45px, black 46px); animation: s-spin 24s linear infinite; } .s-o-ring-2 { width: 86px; height: 86px; -webkit-mask: radial-gradient(circle, transparent 28px, black 29px); mask: radial-gradient(circle, transparent 28px, black 29px); animation: s-spin 18s linear infinite reverse; } .s-o-ring-3 { width: 52px; height: 52px; -webkit-mask: radial-gradient(circle, transparent 11px, black 12px); mask: radial-gradient(circle, transparent 11px, black 12px); animation: s-spin 12s linear infinite; } @keyframes s-spin { 100% { transform: rotate(360deg); } } .s-o-content { opacity: 0; transform: scale(0); transition: all 0.4s var(--ease-elastic); z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(from 135deg, #18181a 0%, #2a2a2c 15%, #121214 30%, #18181a 50%, #2a2a2c 65%, #121214 80%, #18181a 100%); color: var(--gold-primary); border: 1px solid #000; box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.8), 0 5px 15px rgba(0,0,0,0.9); } .s-o-node-1 .s-o-content { width: 60px; height: 60px; } .s-o-node-1 .s-o-content svg { width: 24px; height: 24px; } .s-o-content svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: all 0.3s ease; filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.9)) drop-shadow(0 0 6px var(--gold-glow-sentinel)); } .s-lang-text { font-size: 1.7rem; font-weight: 500; letter-spacing: 0; line-height: 1; color: var(--gold-primary); filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.9)) drop-shadow(0 0 6px var(--gold-glow-sentinel)); } /* v16.11: Orb als Sprachumschalter - aktive Sprache leuchtet, andere gedimmt */ .s-lang-text.s-lang-switch { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 0; } .s-lang-cur, .s-lang-alt { font-size: 0.95rem; letter-spacing: 0.5px; line-height: 1.05; } .s-lang-cur { color: #f3e5ad; font-weight: 600; } .s-lang-alt { color: rgba(214,178,94,0.32); font-weight: 400; } .s-icon-vol-off { display: none; } .s-orb-audio.is-muted .s-icon-vol-on { display: none; } /* v16.14: Ton-Knopf leuchtet IMMER gold (Jans Entscheid) - auch stumm. Farbe/Glow kommen aus der Basisregel .s-o-content svg; der Zustand bleibt am durchgestrichenen Symbol ablesbar. */ .s-orb-audio.is-muted .s-icon-vol-off { display: block; } @keyframes s-emitSound { 0%, 100% { opacity: 0.15; filter: drop-shadow(0 0 2px var(--gold-primary)); } 30% { opacity: 1; filter: drop-shadow(0 0 10px var(--gold-glow-sentinel)); } 60% { opacity: 0.15; filter: drop-shadow(0 0 2px var(--gold-primary)); } } .s-orb-audio:not(.is-muted) .s-icon-vol-on path:nth-of-type(1) { opacity: 1; animation: none; } .s-orb-audio:not(.is-muted) .s-icon-vol-on path.s-wave-1 { animation: s-emitSound 2s infinite 0s; } .s-orb-audio:not(.is-muted) .s-icon-vol-on path.s-wave-2 { animation: s-emitSound 2s infinite 0.3s; } .s-orb-menu.is-off svg, .s-orb-lang.is-off .s-lang-text { color: #333 !important; filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.9)) !important; } /* Hover: Gravitationsfeld + Orbits auseinander */ .s-orbit-wrapper:hover , .s-orbit-wrapper:focus-within { box-shadow: 0 0 50px rgba(214,178,94,0.15), inset 0 0 30px rgba(214,178,94,0.05); background: radial-gradient(circle, rgba(214,178,94,0.04) 0%, transparent 60%); } .s-orbit-wrapper:hover::before , .s-orbit-wrapper:focus-within::before { width: 250px; height: 250px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05) 0%, rgba(10,10,15,0.15) 80%); border: 1px solid rgba(255,255,255,0.15); box-shadow: inset 10px 10px 20px rgba(255,255,255,0.2), inset -10px -10px 25px rgba(0,0,0,0.6), 0 20px 40px rgba(0,0,0,0.5); backdrop-filter: blur(4px) url(#s-gravity-warp) brightness(1.2) contrast(1.1); -webkit-backdrop-filter: blur(4px) url(#s-gravity-warp) brightness(1.2) contrast(1.1); -webkit-mask-image: none; mask-image: none; animation: s-liquidAmoeba 10s ease-in-out infinite alternate; } @keyframes s-liquidAmoeba { 0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(-50%, -50%) rotate(0deg) scale(1); } 100% { border-radius: 60% 40% 30% 70% / 60% 50% 40% 50%; transform: translate(-50%, -50%) rotate(90deg) scale(1.05); } } /* --knoten-gegen haelt die Knoepfe im geoeffneten Tropfen groesser, waehrend der Ring durch --orb-faktor kleiner wird. Standard 1, aendert also nichts; gesetzt wird der Wert nur in der Orb-Stufe fuer Notebooks (siehe dort, mit Rechnung). Die Mobilfassung ueberschreibt diese drei Regeln vollstaendig und ist nicht betroffen. */ .s-orbit-wrapper:hover .s-o-node-1 , .s-orbit-wrapper:focus-within .s-o-node-1 { transform: translate(0px, -70px) scale(var(--knoten-gegen, 1)); } .s-orbit-wrapper:hover .s-o-node-2 , .s-orbit-wrapper:focus-within .s-o-node-2 { transform: translate(65px, 40px) scale(var(--knoten-gegen, 1)); } .s-orbit-wrapper:hover .s-o-node-3 , .s-orbit-wrapper:focus-within .s-o-node-3 { transform: translate(-65px, 40px) scale(var(--knoten-gegen, 1)); } .s-orbit-wrapper:hover .s-o-ring , .s-orbit-wrapper:focus-within .s-o-ring { animation: none !important; transform: rotate(0deg) scale(1) !important; clip-path: inset(0 0 0% 0); } .s-orbit-wrapper:hover .s-o-ring-1 , .s-orbit-wrapper:focus-within .s-o-ring-1 { width: 80px; height: 80px; -webkit-mask: radial-gradient(circle, transparent 34px, black 35px); mask: radial-gradient(circle, transparent 34px, black 35px); } .s-orbit-wrapper:hover .s-o-ring-2 , .s-orbit-wrapper:focus-within .s-o-ring-2 { width: 64px; height: 64px; -webkit-mask: radial-gradient(circle, transparent 26px, black 27px); mask: radial-gradient(circle, transparent 26px, black 27px); } .s-orbit-wrapper:hover .s-o-ring-3 , .s-orbit-wrapper:focus-within .s-o-ring-3 { width: 64px; height: 64px; -webkit-mask: radial-gradient(circle, transparent 26px, black 27px); mask: radial-gradient(circle, transparent 26px, black 27px); } .s-orbit-wrapper:hover .s-o-content svg, .s-orbit-wrapper:focus-within .s-o-content svg, .s-orbit-wrapper:hover .s-lang-text , .s-orbit-wrapper:focus-within .s-lang-text { filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.9)) drop-shadow(0 0 8px var(--gold-primary)) drop-shadow(0 0 12px var(--gold-glow-sentinel)); } /* v16.14: Ton-Knopf aus der Abdunkel-Liste entfernt - leuchtet auch stumm. */ .s-orbit-wrapper:hover .s-orb-menu.is-off svg, .s-orbit-wrapper:focus-within .s-orb-menu.is-off svg, .s-orbit-wrapper:hover .s-orb-lang.is-off .s-lang-text , .s-orbit-wrapper:focus-within .s-orb-lang.is-off .s-lang-text { filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.9)) !important; color: #333 !important; } .s-orbit-wrapper:hover .s-o-content , .s-orbit-wrapper:focus-within .s-o-content { opacity: 1; transform: scale(1); pointer-events: auto; transition-delay: 0.1s; } /* v16.22: Die Orbs erscheinen bisher ausschliesslich bei :hover. Wer mit der Tabulatortaste navigiert, landete dadurch auf einem unsichtbaren Element - der Fokus war da, zu sehen war nichts. :focus-within spiegelt exakt das Hover-Verhalten und aendert es nicht: erreicht die Tastatur einen der Orbs, faehrt die Gruppe genauso auf wie unter der Maus. Ohne Verzoegerung, weil Tastaturbedienung kein Ueberfahren kennt. */ .s-orbit-wrapper:focus-within .s-o-content { opacity: 1; transform: scale(1); pointer-events: auto; /* v16.24: Die Basisregel schaltet "transition: all 0.4s" mit einer elastischen Kurve - die beginnt sehr flach. Gemessen war der Orb 160 ms nach dem Tabulatorsprung noch bei Deckkraft 0 und 1 Pixel Kantenlaenge; wer zuegig weitertabbt, sieht ihn nie. Schlimmer: "all" animiert auch die Kontur, der Fokusring waechst also von 0 auf 2 Pixel mit, statt sofort zu stehen. Hier deshalb eine eigene, kurze Ueberblendung, die zugleich das "all" ersetzt: nur Deckkraft und Groesse, keine Kontur. Unter der Maus bleibt die elastische Bewegung unveraendert. */ transition: opacity 0.12s ease, transform 0.12s ease; } /* Ein Fokusring darf nie einfliegen - er muss stehen, sobald er gilt. */ .s-o-content:focus-visible { transition: none; } /* ══════════════════════════════════════════════════════════════════ v16.26: SYSTEMEINSTELLUNG "BEWEGUNG REDUZIEREN" Wer sie setzt, tut das in aller Regel nicht aus Geschmack: bei vestibulaeren Stoerungen loesen fortlaufende Bewegungen Schwindel und Uebelkeit aus. Die Seite beachtet die Einstellung an zehn Stellen bereits - Film, Partikel, Bento-Raster, Pulsieren. Uebrig blieben genau zwei Dauerbewegungen, gemessen im Browser: die drei kreisenden Ringe der Orb-Gruppe und ihre Umlaufanomalie. Beide laufen endlos, unabhaengig vom Scrollen, und sitzen fest im Bildschirm - also dauerhaft im Blickfeld. Genau der Fall, den die Einstellung meint. Abgeschaltet wird nur die Bewegung, nicht die Erscheinung: Ringe, Gold und Anordnung bleiben; sie stehen still statt zu kreisen. Das Auffahren beim Zeigen oder Tabben bleibt ebenfalls - es ist kurz, ausgeloest und keine Dauerbewegung. Nur die elastische Kurve mit ihrem Ueberschwingen weicht einer geraden. */ @media (prefers-reduced-motion: reduce) { /* Die Umlaufanomalie sitzt auf dem Pseudo-Element ::before, nicht auf dem Wrapper selbst - sie braucht ihren eigenen Eintrag. */ .s-o-ring, .s-orbit-wrapper, .s-orbit-wrapper::before { animation: none !important; } .s-o-content { transition: opacity 0.15s linear, transform 0.15s linear; } /* Die Hero-Zeile faehrt ueber sieben Sekunden fuenfzig Pixel nach oben - langsam, grossflaechig, direkt im Blickfeld. Genau das, was Schwindel ausloest. Sie blendet hier nur noch auf, ohne sich zu bewegen; Text, Groesse und Farbe bleiben unveraendert. */ .hero h1, body.loaded .hero h1 { transform: none; transition: opacity 0.8s linear; } body.loaded.hide-hero-text .hero h1 { transform: none; transition: opacity 0.4s linear; } } /* v16.25: Solange das Menue offen ist, bleibt die Orb-Gruppe aufgefahren. Vorher fiel sie zusammen, sobald der Fokus in die Menueliste wanderte - die Gruppe verlor :focus-within, und fuer den Nutzer schloss sich die Bedienung scheinbar von selbst, obwohl das Menue noch offen war. body.menu-open wird ohnehin schon gesetzt. */ body.menu-open .s-o-content { opacity: 1; transform: scale(1); pointer-events: auto; } body.menu-open .s-o-node-1 { transform: translate(0px, -70px) scale(var(--knoten-gegen, 1)); } body.menu-open .s-o-node-2 { transform: translate(65px, 40px) scale(var(--knoten-gegen, 1)); } body.menu-open .s-o-node-3 { transform: translate(-65px, 40px) scale(var(--knoten-gegen, 1)); } /* Auf den Orbs ist Gold der falsche Ton: sie tragen selbst einen goldenen Ring, ein zweiter daneben ist kaum zu unterscheiden. Weiss steht klar dagegen und bleibt in der Palette - es ist die Textfarbe der Seite. WCAG 2.4.11 verlangt einen deutlichen Unterschied zwischen fokussiert und nicht fokussiert; Gold auf Gold erfuellt das nicht, Weiss auf Schwarz mit Abstand. */ .s-o-content:focus-visible, .s-orb-lang:focus-visible { outline: 2px solid var(--text-main, #f0ede8); outline-offset: 5px; } /* v16.24: Waehrend der Tastaturbedienung kein sanftes Gleiten. html traegt "scroll-behavior: smooth" (Zeile 68) - schoen beim Menuesprung, unbrauchbar beim Tabulator: jeder Sprung gleitet dann eine halbe Sekunde, und wer zuegig weitertabbt, sieht eine Seite, die dauernd in Bewegung ist, ohne je anzukommen. Bei Tastatur- bedienung zaehlt das Gegenteil - sofort da, sofort ablesbar. Die Klasse setzt das Skript nur, solange tatsaechlich getabbt wird; beim ersten Mausklick faellt sie wieder ab. */ html.tastatur-navigation { scroll-behavior: auto; } @media (prefers-reduced-motion: reduce) { .s-orbit-wrapper:focus-within .s-o-content { transition: none; } } /* Spatial Menu Overlay */ #sentinel-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5,5,5,0.3); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: 1000; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 12vw; opacity: 0; pointer-events: none; transition: opacity 0.8s var(--ease-smooth); } #sentinel-menu *, #sentinel-menu *::before, #sentinel-menu *::after { pointer-events: none; } #sentinel-menu.is-open { opacity: 1; pointer-events: auto; } #sentinel-menu.is-open * { pointer-events: auto; } #sentinel-menu .s-menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: flex-start; } #sentinel-menu .s-menu-list li:nth-child(1) { --cascade-x: 0vw; } #sentinel-menu .s-menu-list li:nth-child(2) { --cascade-x: 5vw; } #sentinel-menu .s-menu-list li:nth-child(3) { --cascade-x: 10vw; } #sentinel-menu .s-menu-list li:nth-child(4) { --cascade-x: 15vw; } #sentinel-menu .s-menu-list li:nth-child(5) { --cascade-x: 20vw; } #sentinel-menu .s-menu-list li:nth-child(6) { --cascade-x: 25vw; } #sentinel-menu .s-menu-list li:nth-child(7) { --cascade-x: 30vw; } #sentinel-menu .s-menu-list li:nth-child(8) { --cascade-x: 35vw; } #sentinel-menu .s-menu-list li:nth-child(9) { --cascade-x: 40vw; } #sentinel-menu .s-menu-list li.s-close-item { --cascade-x: 45vw; margin-top: 2rem; margin-left: 1.5rem; } /* v16.11: Sprachwechsel im Menue - nur mobil (Desktop nutzt den Orb) */ #sentinel-menu .s-menu-lang { display: none; } #sentinel-menu .s-menu-list li { transform: translate(calc((var(--cascade-x) * -1) + 40px), -60px); opacity: 0; transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); } #sentinel-menu.is-open .s-menu-list li { transform: translate(calc(var(--cascade-x) * -1), 0); opacity: 1; } #sentinel-menu.is-open .s-menu-list li:nth-child(1) { transition-delay: 0.05s; } #sentinel-menu.is-open .s-menu-list li:nth-child(2) { transition-delay: 0.10s; } #sentinel-menu.is-open .s-menu-list li:nth-child(3) { transition-delay: 0.15s; } #sentinel-menu.is-open .s-menu-list li:nth-child(4) { transition-delay: 0.20s; } #sentinel-menu.is-open .s-menu-list li:nth-child(5) { transition-delay: 0.25s; } #sentinel-menu.is-open .s-menu-list li:nth-child(6) { transition-delay: 0.30s; } #sentinel-menu.is-open .s-menu-list li:nth-child(7) { transition-delay: 0.35s; } #sentinel-menu.is-open .s-menu-list li:nth-child(8) { transition-delay: 0.40s; } #sentinel-menu.is-open .s-menu-list li:nth-child(9) { transition-delay: 0.45s; } #sentinel-menu.is-open .s-menu-list li.s-close-item { transition-delay: 0.50s; } #sentinel-menu .s-menu-list a { text-decoration: none; color: #f0f0f0; /* v16.16: zusaetzlich an Viewport-Hoehe UND --ui-scale gedeckelt - auf 14"-Notebooks liefen sonst Punkte oben und unten aus dem Bild. 32" unveraendert: dort ist --ui-scale 1 und der 5rem-Deckel greift. */ font-size: clamp(1.6rem, calc(min(5vw, 7vh) * var(--ui-scale)), 5rem); font-family: 'Playfair Display', serif; font-weight: 200; letter-spacing: -0.02em; transition: opacity 0.3s ease-out, color 0.3s ease, text-shadow 0.3s ease, transform 0.4s var(--ease-smooth); opacity: 0.9; /* v16.1: von 0,5 erhoeht - Menue stand sonst deutlich grau statt fast weiss */ padding: calc(min(0.8rem, 1.4vh) * var(--ui-scale)) 1.5rem; display: block; } #sentinel-menu .s-menu-list:hover a { opacity: 0.15; transform: scale(0.98); } #sentinel-menu .s-menu-list a:hover { opacity: 1 !important; color: var(--gold-primary); text-shadow: 0 0 30px var(--gold-glow-sentinel); transform: scale(1.05) !important; } .s-menu-close { width: 64px; height: 64px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; color: #f0f0f0; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: all 0.4s var(--ease-smooth); } .s-menu-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .s-menu-close:hover { color: var(--gold-primary); border-color: var(--gold-primary); transform: rotate(90deg) scale(1.1); background: rgba(214,178,94,0.05); box-shadow: 0 0 20px var(--gold-glow-sentinel); } .tr-number { font-family: 'Playfair Display'; font-size: 38px; color: var(--gold-sunset); line-height: 1; } .tr-label { font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-muted); margin-top: 5px; } /* ─── LAYOUT ─── */ section { position: relative; width: 100%; } .layout-frame { max-width: var(--content-max-width); margin: 0 auto; padding: 180px var(--padding-x); width: 100%; } .label { font-family: 'Jost'; font-weight: 600; color: var(--gold-sunset); text-transform: uppercase; letter-spacing: 6px; font-size: 11px; margin-bottom: 50px; display: block; } h2 { font-size: clamp(34px, 4.5vw, 68px); margin-bottom: 60px; line-height: 1.1; font-weight: 400; max-width: 900px; } .rhythm-text { font-size: 22px; font-weight: 300; line-height: 1.6; margin-bottom: 40px; } .highlight { color: var(--gold-sunset); font-size: 24px; display: block; margin-top: 60px; font-family: 'Playfair Display'; line-height: 1.4; } .visual-full { width: 100vw; height: 75vh; margin: 60px 0; overflow: hidden; } .visual-full img { width: 100%; height: 100%; object-fit: cover; } .hero { min-height: 100vh; display: flex; align-items: flex-end; padding-bottom: 15vh; position: relative; overflow: hidden; } .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.4); opacity: 0; transition: opacity 0.7s; } .hero-content { position: relative; z-index: 2; padding: 0 var(--padding-x); width: 100%; } /* Die Hero Überschrift: Duckt sich jetzt erst spät beim Scrollen weg (gesteuert durch hide-hero-text) */ .hero h1 { font-size: clamp(40px, 7vw, 92px); line-height: 1.05; opacity: 0; transform: translateY(50px); transition: opacity 7.0s cubic-bezier(0.19, 1, 0.22, 1), transform 7.0s cubic-bezier(0.19, 1, 0.22, 1); } body.loaded .hero h1 { opacity: 1; transform: translateY(0); } /* Neue Klasse: Greift erst später, damit man den Text lange lesen kann */ body.loaded.hide-hero-text .hero h1 { opacity: 0; transform: translateY(30px); transition: opacity 0.4s ease, transform 0.6s ease; } .hero h1 span { color: var(--gold-sunset); display: block; margin-top: 10px; } .reveal { opacity: 0; transform: translateY(40px); transition: var(--transition-reveal); } .reveal.active { opacity: 1; transform: translateY(0); } .exp-list { list-style-type: disc; margin-left: 25px; margin-bottom: 45px; line-height: 1.8; color: var(--text-main); font-weight: 300; } .exp-list li { margin-bottom: 10px; } .exp-list::marker { color: var(--gold-sunset); } /* ─── INTERRUPTION FRAMES (einheitliches Bild-System zwischen Sektionen) ─── */ .interrupt-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-black); overflow: hidden; /* 04.08.2026: Goldlinien oben/unten entfernt (waren inset box-shadow, rgba(214,178,94,0.6), je 1px). Grund: Die Linie hat eine feste Helligkeit (~180), die Bildkanten nicht. Gemessene Kantenhelligkeit der fuenf Unterbrecher, oben/unten: Haltung 165/87 · Logik2 118/101 · Struktur2 28/54 Zugang2 30/31 · Leistungen2 47/51 Dadurch erschien sie mal oben, mal unten, mal gar nicht - las sich als Fehler, nicht als Rahmung. Jan hat sie auf dem Notebook zuerst als Fehler gemeldet. Entscheidung 04.08.: ersatzlos raus, Bilder laufen frei ins Schwarz. */ } /* 11.08.2026: darf im Rahmen keinen eigenen Kasten aufmachen. Nur Leistungen2 ist so eingebunden (eigener Mobilzuschnitt, weil dort die Bildmitte das "H2A" anschneidet). Das darin bleibt absolut positioniert; die Huelle soll aus dem Fluss verschwinden. Ohne display: contents stuende ein leerer Inline-Kasten samt Zeilenhoehe im Rahmen. */ .interrupt-frame picture { display: contents; } .interrupt-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 2.4s var(--ease-majestic); will-change: transform; } .interrupt-frame.in-view img { transform: scale(1.0); } /* ─── v16.17: MARKEN-SCRIM auf hellen Bildunterbrechern ─── Die Marke steht fest bei x 150-642 / y 45-149, das Bild scrollt daran vorbei. Gemessen wurde deshalb das x-Band der Marke ueber die volle Bildhoehe in zehn Stufen (0-255; Gold #d6b25e liegt selbst bei 180, fuer 3:1 Kontrast darf der Grund max. 98 sein): Haltung 179 160 140 122 147 141 157 146 99 56 Logik2 42 50 65 55 92 84 146 104 110 116 Struktur2 36 40 77 87 85 85 79 24 2 6 Zugang2 4 8 20 31 37 41 82 79 46 45 Ein Verlauf von links senkt genau dieses Band und laeuft nach 36% Bildbreite aus. Rein statisch: kein JS, keine Animation, keine Beruehrung von prefers-reduced-motion, keine Auswirkung auf den Ken-Burns-Effekt (der sitzt auf dem img, nicht hier). 04.08.2026: inset war 1px 0, um die Goldlinien freizulassen. Mit deren Wegfall auf 0 gesetzt - sonst bliebe oben und unten je eine ungedaempfte Pixelzeile stehen und wir haetten dieselbe Kante nochmal, nur in Weiss statt Gold. Weitere Bilder: Selektor in die Liste, Wert darunter ergaenzen. */ .interrupt-frame:has(img[src*="Haltung"])::after, .interrupt-frame:has(img[src*="Logik2"])::after, .interrupt-frame:has(img[src*="Struktur2"])::after, .interrupt-frame:has(img[src*="Zugang2"])::after, .interrupt-frame:has(img[src*="Leistungen2"])::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(to right, rgba(0, 0, 0, var(--scrim)) 0%, rgba(0, 0, 0, calc(var(--scrim) * 0.82)) 16%, rgba(0, 0, 0, calc(var(--scrim) * 0.34)) 26%, rgba(0, 0, 0, 0) 36%); } /* Werte von Jan am Regler bestimmt (02.08.). Nicht allein nach Messwert gesetzt: der Verlauf lenkt den Blick zur Bildmitte, deshalb bekommen auch Bilder eine Senkung, die rechnerisch unkritisch sind. */ .interrupt-frame:has(img[src*="Haltung"]) { --scrim: 0.44; } .interrupt-frame:has(img[src*="Struktur2"]) { --scrim: 0.40; } .interrupt-frame:has(img[src*="Zugang2"]) { --scrim: 0.38; } .interrupt-frame:has(img[src*="Leistungen2"]) { --scrim: 0.37; } .interrupt-frame:has(img[src*="Logik2"]) { --scrim: 0.35; } .interrupt-frame .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: clamp(18px, 2vw, 28px); font-style: italic; color: var(--gold-sunset); letter-spacing: 2px; opacity: 0.5; } @media (prefers-reduced-motion: reduce) { .interrupt-frame img { transform: none; transition: none; } .interrupt-frame.in-view img { transform: none; } } .pyramid-v { display: flex; flex-direction: column; align-items: center; font-size: 22px; font-weight: 300; line-height: 1.6; margin: 0 auto 60px auto; max-width: 700px; color: var(--text-main); } .pyramid-v span { display: block; } /* ════════════════════════════════════════════════════════════════ LEISTUNGEN · BUCH ════════════════════════════════════════════════════════════════ */ #lei { position: relative; background: #020202; padding-top: 120px; } #lei .lei-intro { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--padding-x) 80px; text-align: left; } .book-scroll-wrapper { width: 100%; height: 500vh; position: relative; } #lei .lei-viewport { position: sticky; top: 0; width: 100%; height: 100vh; background: #020202; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: visible; perspective: 2000px; } .reveal-book { opacity: 0; transform: translateY(180px) scale(0.65) rotateX(15deg); filter: blur(40px); transform-origin: center bottom; transition: transform 3.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 2.5s ease, filter 3.0s ease; } .reveal-book.active { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0); } /* v16.16: Hoehe zusaetzlich auf 100vh-210px gedeckelt - auf 14"-Notebooks lagen sonst Fortschrittsbalken (oben, -95px) und Buchdeckel ausserhalb. Grosse Screens unveraendert (dort ist 88vh der kleinere Wert). */ #lei .book-stack { position: relative; width: 92vw; max-width: 1400px; height: min(88vh, calc(100vh - 210px)); } #lei .h2-hardcover { position: absolute; top: -24px; bottom: -24px; left: -45px; right: -45px; background: linear-gradient(135deg, #222, #111, #0a0a0a); border-radius: 6px; z-index: 1; } #lei .h2-edge-left { position: absolute; top: 2px; bottom: 2px; left: -24px; width: 24px; background: #222; background-image: repeating-linear-gradient(to right, transparent, transparent 2px, rgba(0,0,0,0.4) 2px, rgba(0,0,0,0.4) 3px); border-radius: 2px 0 0 2px; z-index: 2; } #lei .h2-edge-right { position: absolute; top: 2px; bottom: 2px; right: -24px; width: 24px; background: #2a2a2a; background-image: repeating-linear-gradient(to left, transparent, transparent 2px, rgba(0,0,0,0.4) 2px, rgba(0,0,0,0.4) 3px); border-radius: 0 2px 2px 0; z-index: 2; } #lei .h2-spine-crease { position: absolute; top: 0; bottom: 0; left: 50%; width: 140px; transform: translateX(-50%); background: linear-gradient(to right, transparent, rgba(0,0,0,0.7) 35%, #000 50%, rgba(0,0,0,0.7) 65%, transparent); pointer-events: none; z-index: 100; } #lei .h2-spine-crease::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: linear-gradient(to bottom, transparent 1%, rgba(214,178,94,0.1) 15%, rgba(214,178,94,0.2) 50%, rgba(214,178,94,0.1) 85%, transparent 99%); box-shadow: 0 0 35px 3px rgba(214,178,94, 0.25); filter: blur(3px); } #lei .curl-svg { position: absolute; top: 0; right: 0; width: 250px; height: 250px; pointer-events: none; z-index: 150; overflow: visible; filter: drop-shadow(-5px 5px 10px rgba(0,0,0,0.6)); } #lei .book-main { position: absolute; inset: 0; z-index: 10; border-radius: 2px; overflow: hidden; background: var(--anthracite); box-shadow: 0 -1px 0 rgba(214,178,94,0.25), -1px 0 0 rgba(214,178,94,0.15), 1px 0 0 rgba(0,0,0,0.8), 0 1px 0 rgba(0,0,0,0.6); } /* 04.08.2026: Klickflaeche der Blaetterecke von 120 auf 220px Hoehe. Der Orb steht fest oben rechts und liegt mit z-index 3001 ueber dieser Flaeche (z-index 200), fangt ihre Klicks also ab. Gemessen bei 1440x900: der Orb verdeckte 120 x 100px der 120 x 120px grossen Ecke, also 83% - das Aufschlagen der Seite per Ecke war dort nicht moeglich. Mit --orb-faktor 0,60 reicht der Orb bis 176px hinunter, die Ecke von 105 bis 325px. Frei bleiben 149 zusammenhaengende Pixel direkt darunter. Nur die unsichtbare Klickflaeche waechst. Die sichtbare Eselsohr-Grafik (.curl-svg) bleibt bei 250px unveraendert. */ #lei .peel-trigger { position: absolute; top: 0; right: 0; width: 120px; height: 220px; z-index: 200; cursor: pointer; } /* 11.08.2026: Eselsohr beim Zurueckblaettern. Ein Buch klappt vorwaerts die RECHTE Seite oben rechts nach links ueber den Falz - rueckwaerts die LINKE Seite oben links nach rechts. Bis hierher sass der Falz in beide Richtungen oben rechts, was sich als Widerspruch las (Jan-Befund 11.08.). Gespiegelt wird nur die Darstellung; drawCurl() bleibt unveraendert. scaleX(-1) kippt den Farbverlauf curlGrad (100% -> 0%) und den drop-shadow im selben Zug mit - die Lichtkante bleibt dadurch auf der Falzseite. Die Klickflaeche .peel-trigger wird NICHT gespiegelt: sie ist die Vorwaertsgeste (Ecke antippen = naechste Seite) und bleibt oben rechts. */ #lei .curl-svg.gespiegelt { left: 0; right: auto; transform: scaleX(-1); } #lei .book-page { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; pointer-events: none; transform: translateX(80px) scale(0.95); transition: opacity 0.7s var(--ease-fluid), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), filter 0.7s ease; filter: blur(8px); } #lei .book-page.active { opacity: 1; pointer-events: all; transform: translateX(0) scale(1); filter: blur(0); } #lei .book-page.exit-left { opacity: 0; transform: translateX(-80px) scale(0.95); filter: blur(8px); pointer-events: none; } /* 11.08.2026: Gegenstueck fuer das Zurueckblaettern. Vorwaerts schiebt die abgehende Seite nach links, waehrend die neue von rechts kommt - rueckwaerts muss beides andersherum laufen. Die ANKOMMENDE Seite war schon richtungsrichtig (direction in goTo), nur der Abgang fehlte. */ #lei .book-page.exit-right { opacity: 0; transform: translateX(80px) scale(0.95); filter: blur(8px); pointer-events: none; } /* 04.08.2026: Innenabstand zum Falz von 64 auf 90px. Der Falz (.h2-spine-crease) ist 140px breit und reicht damit 70px in jede Seite. Bei 64px lagen die ersten 6px jeder Zeile unter dem Schatten - genau die Anlaufkante, an der das Auge beim Lesen ansetzt. Deckkraft dort rund 9%. Jan hatte den Verdacht richtig geaeussert. Der Falz selbst bleibt unveraendert, nur der Text rueckt heraus. */ #lei .page-left { background: var(--black); padding: 60px 90px 80px 52px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; text-align: right; position: relative; overflow: hidden; } #lei .left-num { font-family: 'Playfair Display', serif; font-size: 14px; color: var(--gold); letter-spacing: 4px; margin-bottom: 32px; display: block; } #lei .left-cat { font-size: 10px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 28px; } #lei .left-headline { font-family: 'Playfair Display', serif; font-size: clamp(24px,2.8vw,46px); font-weight: 400; line-height: 1.18; color: var(--text); margin-bottom: 44px; position: relative; z-index: 2; } #lei .left-rule { width: 40px; height: 1.5px; background: var(--gold); margin-bottom: 32px; margin-left: auto; } #lei .left-core { font-family: 'Playfair Display', serif; font-size: clamp(14px,1.5vw,20px); font-style: italic; color: var(--gold); line-height: 1.65; position: relative; z-index: 2; } #lei .page-right { background: var(--anthracite); padding: 60px 52px 80px 90px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } #lei .page-right::before { content: ''; position: absolute; top: -10%; left: -5%; width: 55%; height: 55%; background: radial-gradient(ellipse, rgba(214,178,94,0.04) 0%, transparent 70%); pointer-events: none; } #lei .right-body { font-size: clamp(14px,1.4vw,18px); font-weight: 300; line-height: 1.95; color: var(--text); position: relative; z-index: 2; } #lei .right-body p { margin-bottom: 20px; } #lei .right-body p:last-of-type { margin-bottom: 0; } #lei .right-cta { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(214,178,94,0.5); padding-bottom: 3px; transition: letter-spacing 0.4s, border-color 0.3s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); position: relative; z-index: 2; } #lei .right-cta:hover { letter-spacing: 7px; border-color: var(--gold); } /* Fortschrittsbalken deutlich OBERHALB des grauen Buchdeckels */ #lei .book-nav { position: absolute; top: -95px; /* Von -50px auf -95px erhöht, damit er gut sichtbar im Schwarz schwebt */ bottom: auto; left: 50%; transform: translateX(-50%); height: 30px; width: 100%; max-width: 400px; display: flex; align-items: center; justify-content: center; z-index: 200; } #lei .book-arrow-left, #lei .book-arrow-right { position: absolute; top: 50%; transform: translateY(-50%); z-index: 250; } #lei .book-arrow-left { left: -140px; } #lei .book-arrow-right { right: -140px; } #lei .breath-wrap { width: 100px; height: 150px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; } #lei .breath-glow { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(214,178,94,0.15) 0%, transparent 60%); opacity: 0; transform: scale(0.5); transition: all 1.0s var(--ease-majestic); pointer-events: none; border-radius: 50%; } #lei .breath-inner { display: flex; align-items: center; justify-content: center; transition: transform 0.6s var(--ease-majestic); } /* 05.08.2026: Form geaendert. Vorher ein 58px langer Strich mit angesetztem Winkel, dargestellt in 45x15px. Zwei Probleme: Er brauchte 45px auf der Achse, an der zwischen 1100 und 1680px Fensterbreite am wenigsten Platz ist, und weil das SVG von 60 auf 45px verkleinert wurde, kam von der Strichstaerke 1 nur 0,75px am Schirm an - auf dem Notebook praktisch unsichtbar. Jetzt ein reiner Winkel mit 130 Grad Oeffnung: Je stumpfer der Winkel, desto schmaler wird er waagerecht und desto hoeher senkrecht - und senkrecht ist Platz. 16px statt 45px breit, 52 statt 15 hoch, Strich 2,5px ohne Verkleinerung, Deckkraft von 0,5 auf 0,75. Von Jan am 05.08. aus vier Varianten gewaehlt (_probe-buchpfeile.html). */ #lei .breath-arrow { width: 16px; height: 52px; stroke: rgba(214, 178, 94, 0.75); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: all 0.8s var(--ease-majestic); } #lei .breath-wrap:hover .breath-glow { opacity: 1; transform: scale(1); } /* 05.08.2026: Richtung umgedreht. Vorher wanderte der Pfeil beim Hover nach AUSSEN (links -4px, rechts +4px), also vom Buch weg - und weil die Verschiebung nach der Vergroesserung wirkt, effektiv 5,2px. Zusammen mit dem Magnetismus (bis 6px) kamen gut 11px nach aussen zusammen, auf genau der Achse, an der am wenigsten Platz ist; der linke Pfeil ragte dabei ueber den Buchschnitt hinaus. Jetzt rueckt er dem Zeiger entgegen, also zum Buch hin. */ #lei .book-arrow-left .breath-wrap:hover .breath-arrow { stroke: var(--gold); transform: scale(1.3) translateX(4px); } #lei .book-arrow-right .breath-wrap:hover .breath-arrow { stroke: var(--gold); transform: scale(1.3) translateX(-4px); } #lei .breath-wrap.disabled { opacity: 0.2; pointer-events: none; } #lei .progress-track { width: 100%; height: 2px; background: linear-gradient(to right, transparent, rgba(214,178,94,0.1) 15%, rgba(214,178,94,0.1) 85%, transparent); position: relative; border-radius: 2px; } #lei .progress-fill { position: absolute; top: -1px; left: 0; height: 4px; width: 0%; background: var(--gold); border-radius: 2px; box-shadow: 0 0 15px rgba(214,178,94,0.8), 0 0 5px var(--gold); transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1); } /* v16.17: Auf flachen Viewports (Notebook, FHD mit Browserleiste) lief der Seitentext der rechten Buchseite ueber (bis 111px) und wurde oben/unten abgeschnitten. Kompaktere Typo und Polster nur unter 980px Hoehe - 32" (1355px) unveraendert. */ @media (max-height: 980px) { /* 04.08.2026: Falzabstand von 48 auf 80px. Hier war der Fehler am groessten: 48px bedeuteten 22px Text unter dem Falzschatten bei rund 32% Deckkraft. Deshalb fiel es Jan auf dem Notebook auf und am 32-Zoll-Schirm (1355px hoch, diese Stufe greift dort nicht) kaum. Kostet rund 5% Textbreite, dafuer ist die Zeilenanlaufkante frei. */ #lei .page-left { padding: 40px 80px 52px 40px; } #lei .page-right { padding: 40px 40px 52px 80px; } #lei .right-body { font-size: 14px; line-height: 1.65; } #lei .right-body p { margin-bottom: 10px; } #lei .left-headline { margin-bottom: 28px; } #lei .left-num { margin-bottom: 20px; } #lei .left-cat { margin-bottom: 18px; } } /* 04.08.2026: Pfeilposition rechnet jetzt mit dem tatsaechlich vorhandenen Rand statt mit festen Pixelwerten. Vorher: -140px, ab 1500px -110px. Die Buehne ist 92vw breit, gedeckelt auf 1400px, der freie Rand daneben also (100vw - Buehne) / 2. Gemessen: Fenster Rand Pfeil brauchte Ergebnis vorher 2560px 580px 140px passt 1680px 140px 140px Grenze 1600px 100px 140px 40px abgeschnitten 1440px 58px 110px 52px abgeschnitten 1280px 51px 110px 59px abgeschnitten Mit html { overflow-x: clip } wurden sie nicht ueberstehend dargestellt, sondern schlicht abgeschnitten. Zwischen etwa 1100 und 1680px war der Seitenwechsel per Pfeil damit unbedienbar - Jan hat es auf dem Notebook gemeldet. Der Pfeil-Container ist 100px breit (gemessen, offsetWidth - nicht die 45px des SVG darin). Neben das Buch passt er deshalb erst ab etwa 1600px Fensterbreite. Darunter waere jede feste Untergrenze wieder abgeschnitten. Die Formel legt ihn deshalb so weit nach aussen wie der Rand hergibt und laesst ihn darunter ein Stueck ueber den Buchrand rutschen - lieber leicht ueberlappend als unsichtbar. Das SVG sitzt mittig im Container, die optische Ueberlappung ist rund 27px geringer als die rechnerische. min(140px, ...) deckelt auf den Wert fuer breite Schirme. max(8px, ...) verhindert, dass er auf sehr schmalen Fenstern komplett ins Buch wandert. 16px Abzug: die Haelfte der Scrollleiste, die in 100vw mitzaehlt (scrollbar-gutter: stable), plus Luft. Ergebnis: 2560px -> -140px (unveraendert), 1600px -> -84px, 1440px -> -42px, 1280px -> -35px, 1100px -> -28px. Die alten Stufen bei 1500px und 1100px entfallen, die Formel deckt beide ab. */ #lei .book-arrow-left { left: calc(-1 * min(140px, max(8px, (100vw - 100%) / 2 - 16px))); } #lei .book-arrow-right { right: calc(-1 * min(140px, max(8px, (100vw - 100%) / 2 - 16px))); } /* ─── 04.08.2026: ORB-STUFE FUER NOTEBOOKS ─── Unterhalb von 1750px kollidiert der Orb mit der oberen rechten Buchecke: Er sitzt fest 32px vom Rand und ist 240px breit, das Buch waechst unter 1522px dagegen auf 92vw. Gemessen bei 1440x900 waren 83% der Blaetterecke verdeckt, auch fuer Klicks (Orb z-index 3001 gegen 200). Bei 2560px liegen dagegen 301px zwischen beiden - dort gibt es das Problem nicht, deshalb greift die Stufe erst darunter. Der Faktor skaliert den ganzen Orb, also auch Knoepfe, Symbole und Sprachanzeige. Der Rest der Kollision wird ueber die vergroesserte Klickflaeche der Blaetterecke aufgefangen (siehe .peel-trigger). KORREKTUR 05.08.2026: Die hier bis zum 04.08. stehende Tabelle war falsch - sie hat --ui-scale vergessen und --orb-faktor als Gesamtwert gelesen. Wirksam ist aber das Produkt beider. Gemessen am tatsaechlich anliegenden transform: 32-Zoll 1750px 1440px Gesamtskalierung 1,00 0,438 0,432 grosser Knopf 60 px 26,3 25,9 Symbol darin 24 10,5 10,4 kleine Knoepfe 44 19,3 19,0 Symbol darin 20 8,8 8,6 Sprachzeilen 15,2 6,7 6,6 Dokumentiert waren 36 / 14 / 26 / 16px, tatsaechlich sind es 26 / 10,4 / 19 / 6,6px. Daher Jans Beobachtung, die Beschriftung sei nicht mehr lesbar - bei 6,6px stimmt das schlicht. Gegenmassnahme siehe --knoten-gegen weiter unten. Nebeneffekt, erwuenscht: Jan empfand den Orb auf kleineren Schirmen als zu dominant. Der Glastropfen im Hover bekommt ausserdem wieder Luft nach oben - bei 0,72 stiess er bis 24px an die Bildkante, bei 0,60 sind es rund 30px. Unter 769px greift die eigene Mobilfassung (.s-orbit-wrapper wird dort 104 x 48px), deshalb endet diese Stufe dort. */ @media (min-width: 769px) and (max-width: 1750px) { :root { --orb-faktor: 0.60; } /* 05.08.2026: Die Knoepfe im geoeffneten Tropfen schrumpfen mit dem Orb mit, obwohl im Tropfen reichlich Platz ist. Sie werden deshalb gegenskaliert - der Ring bleibt klein, die Bedien- elemente werden wieder greifbar. 1,45 statt der vollen 1,667 (also 1 / 0,60), von Jan am 05.08. aus drei Varianten am echten Orb gewaehlt (_probe-orb-knoepfe.html). Ergebnis bei 1440: grosser Knopf 37,6px statt 25,9 · Symbol 15,0 statt 10,4 · kleine Knoepfe 27,6 statt 19,0 · Sprachzeilen 9,6 statt 6,6. Die Ausfahrwege bleiben unveraendert - nachgerechnet im Orb-Koordinatensystem: der grosse Knopf waechst auf 87px (Radius 43,5) und steht bei -70, reicht also bis -113,5; der Glastropfen misst im Hover 250px, sein Rand liegt bei 125. Bleiben 11,5px Luft. Die beiden unteren Knoepfe waeren bei voller Gegenskalierung auf 5px an den Rand gekommen, deshalb 1,45 und nicht 1,667. */ :root { --knoten-gegen: 1.45; } } /* v16.5: Der frueher hier stehende 700px-Block ist entfallen. Das Buch wird jetzt vollstaendig im 768px-Block weiter unten behandelt - ein Breakpoint statt der vorherigen Streuung ueber 700/768/1100/1500. */ /* ════════════════════════════════════════════════════════════════ CASES (Horizontal Scroll) ════════════════════════════════════════════════════════════════ */ .cases-header { padding: 80px var(--padding-x) 60px var(--padding-x); padding-right: calc(var(--padding-x) + 120px); } .cases-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; color: rgba(214,178,94,0.6); margin-bottom: 40px; } .cases-dreiklang { display: flex; align-items: baseline; justify-content: space-between; width: 100%; } .cases-dreiklang .word { font-family: 'Playfair Display', serif; font-weight: 400; line-height: 1; font-size: clamp(28px, 4vw, 68px); letter-spacing: 0; } .cases-dreiklang .word-1 { color: rgba(240,237,232,0.28); text-align: left; } .cases-dreiklang .word-2 { color: rgba(240,237,232,0.55); text-align: center; flex: 1; } .cases-dreiklang .word-3 { color: var(--gold); font-style: italic; text-align: right; } .header-divider { width: 100%; height: 1px; margin-top: 60px; background: linear-gradient(to right, rgba(214,178,94,0.08), rgba(214,178,94,0.18) 30%, rgba(214,178,94,0.18) 70%, rgba(214,178,94,0.08)); } .case-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s; } .scroll-light, .scroll-light-soft { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .scroll-light { z-index: 3; filter: blur(55px); } .scroll-light-soft { z-index: 2; filter: blur(100px); } .scroll-sun { position: absolute; left: clamp(32px, 6vw, 100px); top: 50%; transform: translateY(-50%); width: 52px; height: 52px; z-index: 20; } .scroll-sun-core { position: absolute; inset: 0; background: radial-gradient(circle, #fffde7 0%, #f3e5ad 28%, var(--gold) 60%, rgba(214,178,94,0.06) 100%); border-radius: 50%; opacity: 0; box-shadow: 0 0 18px rgba(214,178,94,0.18); } .scroll-planet { position: absolute; inset: 0; background: var(--black); border-radius: 50%; z-index: 2; border: 1px solid rgba(214,178,94,0.13); opacity: 0; } .case-left { position: absolute; left: clamp(120px, 15vw, 240px); right: 58vw; top: 50%; transform: translateY(-50%); text-align: right; z-index: 10; } .scroll-tag { display: block; font-size: 10px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(214,178,94,0.65); margin-bottom: 24px; opacity: 0; transform: translateY(12px); will-change: opacity, transform; } .scroll-claim { font-family: 'Playfair Display', serif; font-size: clamp(32px,3.8vw,52px); font-weight: 400; line-height: 1.25; color: var(--text); opacity: 0; transform: translateY(20px); will-change: opacity, transform; } .scroll-signature { display: block; font-family: 'Playfair Display', serif; font-size: clamp(20px,2.2vw,34px); font-style: italic; color: var(--gold); line-height: 1.4; margin-top: 36px; opacity: 0; transform: translateY(16px); will-change: opacity, transform; } /* VOLUMENANGABE Desktop (31.07.) - Gegenstueck zu .mcas-volumen. opacity: 0 als Startwert wie bei den Geschwistern: die Elemente werden im Einflug nacheinander eingeblendet (Zeitfenster im Skript, Suchwort "el.volumen"). Ohne den Startwert stuende die Zahl sofort da, waehrend der Rest noch einfliegt. */ .case-volumen { margin-top: 34px; opacity: 0; transform: translateY(16px); will-change: opacity, transform; } .case-volumen-label { display: block; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(214,178,94,0.5); margin-bottom: 8px; } .case-volumen-wert { display: block; font-family: 'Playfair Display', serif; font-size: clamp(30px,3.2vw,46px); line-height: 1; color: var(--gold); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .case-right { position: absolute; left: 44vw; top: 50%; transform: translateY(-50%); width: min(580px, 38vw); z-index: 10; } .scroll-narrative { font-size: clamp(15px,1.35vw,18px); font-weight: 300; line-height: 2.0; color: var(--text); border-left: 1px solid rgba(214,178,94,0.28); padding-left: 28px; opacity: 0; transform: translateY(18px); will-change: opacity, transform; } /* v14: echtes Weiß statt text-dim (Jans Vorgabe) */ .sequence-wrapper { position: relative; background-color: var(--bg-black); } .sticky-container { position: relative; top: 0; height: 100vh; width: 100vw; overflow: hidden; display: flex; } .horizontal-strip { display: flex; width: max-content; height: 100%; will-change: transform; transform: translateX(0) translateZ(0); } .case-frame { flex: 0 0 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } .case-content { position: relative; width: 100%; height: 100%; display: flex; align-items: center; } /* ════════════════════════════════════════════════════════════════ RESONANCE KNOCK & KONTAKT FORMULAR (NEU MIT CAL.COM) ════════════════════════════════════════════════════════════════ */ .lion-wrap { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; width: 100%; max-width: 750px; margin: 100px auto 40px auto; } .lion-img-container { position: relative; width: 550px; max-width: 90vw; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; } .lion-img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(circle at center, black 37%, rgba(0,0,0,0.5) 57%, transparent 75%); mask-image: radial-gradient(circle at center, black 37%, rgba(0,0,0,0.5) 57%, transparent 75%); filter: brightness(0.68) contrast(1.15) grayscale(0.15); transition: filter 0.8s var(--ease-majestic), -webkit-filter 0.8s var(--ease-majestic); } .lion-aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; background: radial-gradient(circle, rgba(214,178,94,0.15) 0%, transparent 70%); opacity: 0; transition: opacity 0.8s var(--ease-majestic); pointer-events: none; z-index: -1; } .resonance-ring { position: absolute; top: 50%; left: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%) scale(0.8); border: 2px solid var(--gold); border-radius: 50%; opacity: 0; pointer-events: none; } .lion-wrap:hover .lion-img { filter: brightness(0.95) contrast(1.15) grayscale(0); } .lion-wrap.is-lit .lion-img { filter: brightness(0.95) contrast(1.15) grayscale(0); } .lion-wrap:hover .lion-aura { opacity: 1; } .lion-wrap.is-lit .lion-aura { opacity: 1; } .lion-wrap:active .lion-img { transform: perspective(600px) scale(0.96) translateZ(-15px); filter: brightness(0.65) contrast(1.3); transition: filter 0.1s, transform 0.1s; } /* v16.11: Basisregel fuer Desktop UND mobil. Vom Loewen geloest (margin 8px statt -20px), Schrift 13px, dreischichtiger Gold-Halo plus dezentes Pulsieren. Mobil hebt nur font-size/margin an; Glow/Farbe/Pulsieren werden geerbt. Pulsieren schaltet sich bei prefers-reduced-motion ab (s. u.). */ .lion-wrap .bell-label { margin-top: 8px; font-size: 13px; letter-spacing: 3px; color: #edd39a; text-transform: uppercase; transition: 0.3s; pointer-events: none; z-index: 5; text-shadow: 0 0 6px rgba(214,178,94,0.75), 0 0 16px rgba(214,178,94,0.50), 0 0 30px rgba(214,178,94,0.30); animation: bell-pulse 3.4s ease-in-out infinite; } .lion-wrap:hover .bell-label { color: white; letter-spacing: 4px; } .knock-anim { animation: ringKnock 1s var(--ease-majestic) forwards; } @keyframes ringKnock { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.8; border-width: 2px; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 0px; } } /* Das aktualisierte CSS für den Triage-Bereich */ /* ── SIGNATUR (31.07.) ────────────────────────────────────────────── Die Kursive ist die persoenliche Stimme der Seite (Case-Signaturen, Kernsaetze der Leistungen) - die Signatur benutzt sie und braucht deshalb weder Handschrift-Schriftart noch Unterschriftsbild. Gegen eine echte Unterschrift spricht, dass man sie nicht zurueckrufen kann: ein Passwort aendert man, ein Identitaetsmerkmal nicht. Name deutlich leiser als der Satz darueber - die Signatur soll signieren, nicht auftreten. */ .impuls-signatur { margin-top: 46px; } .impuls-signatur-satz { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(17px, 1.9vw, 23px); line-height: 1.6; color: var(--gold); margin: 0 0 20px 0; } /* Jan-Feedback (31.07.): war 12px in Jost 300 bei 42% Deckkraft und besonders am Handy kaum zu erkennen. Groesse allein war nicht das Problem - der duenne Schnitt ist es: helle Haarlinien auf schwarzem Grund wirken optisch noch duenner, als sie sind. Deshalb 400 statt 300, dazu groesser und deutlich weniger gedaempft. Bleibt trotzdem leiser als die goldene Kursivzeile darueber - die behaelt die Stimme, der Name signiert nur. */ .impuls-signatur-name { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: rgba(240,237,232,0.72); margin: 0; } @media (max-width: 768px) { .impuls-signatur { margin-top: 38px; } .impuls-signatur-satz { font-size: 17px; line-height: 1.55; } /* Am Handy eher noch praesenter als am Desktop: kleiner Schirm, haeufig Tageslicht. Nur die Sperrung wird enger, damit die Zeile nicht umbricht. */ .impuls-signatur-name { font-size: 12.5px; letter-spacing: 2.2px; } } #impulse-field { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.8s ease; width: 100%; max-width: 500px; margin: 0 auto; text-align: center; } #impulse-field.active { max-height: 1500px; opacity: 1; margin-top: 40px; overflow: visible; } .minimal-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(214,178,94,0.3); padding: 15px 0; color: white; font-family: 'Jost'; font-size: 16px; outline: none; transition: border-color 0.3s; margin-bottom: 20px; text-align: center;} .minimal-input:focus { border-bottom-color: var(--gold); } .minimal-input::placeholder { color: rgba(240,237,232,0.45); } /* v16.1: Chrome faerbt automatisch ausgefuellte Felder mit eigenem hellen Hintergrund ein - das invertierte Name und E-Mail zu Schwarz auf Weiss. Der Inset-Schatten uebermalt diese Einfaerbung mit dem Seitenhintergrund, text-fill-color holt die Schriftfarbe zurueck. Die lange transition verhindert kurzes Aufblitzen. */ .minimal-input:-webkit-autofill, .minimal-input:-webkit-autofill:hover, .minimal-input:-webkit-autofill:focus, .minimal-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px var(--bg-black) inset !important; box-shadow: 0 0 0 1000px var(--bg-black) inset !important; -webkit-text-fill-color: #ffffff !important; caret-color: #ffffff; transition: background-color 9999s ease-in-out 0s; } .minimal-submit { background: transparent; border: 1px solid var(--gold-sunset); color: var(--gold-sunset); padding: 15px 40px; cursor: pointer; font-family: 'Jost'; text-transform: uppercase; letter-spacing: 3px; font-size: 11px; transition: background 0.3s, color 0.3s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .minimal-submit:hover { background: var(--gold-sunset); color: black; } .social-text-links { display: flex; justify-content: center; gap: 40px; margin-top: 60px; } /* v16.11: dezente Rechtslinks unter den Social-Links */ /* Jan-Feedback (31.07.): Abstand oberhalb der Rechtslinks war 28px, oberhalb der Signatur 46px - die Links klebten dadurch an der Signatur. Beide Abstaende jetzt gleich, der Block atmet gleichmaessig. Bei Aenderung von .impuls-signatur mitziehen. */ .legal-links { display: flex; justify-content: center; gap: 28px; margin-top: 46px; } /* Copyright als Abbinder. Jan-Feedback (31.07.): 9.5px bei 26% Deckkraft war auf schwarzem Grund praktisch unsichtbar. Jetzt dieselbe Groesse und Sperrung wie die Rechtslinks darueber, nur eine Stufe gedaempfter in der Farbe - dadurch lesbar, ohne wie ein vierter Link auszusehen. */ .copyright-zeile { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(142,142,142,0.72); margin: 22px 0 0 0; text-align: center; } .legal-links a { font-family: 'Jost'; font-size: 10px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); text-decoration: none; transition: color 0.3s; } .legal-links a:hover { color: var(--gold-sunset); } /* 05.08.2026 (G-01): Unterrichtung nach Art. 13 DSGVO am Formular. Bewusst leiser als der Fliesstext - eine Pflichtangabe, keine Botschaft. Gleiche Familie wie die Fusszeile, aber gemischte Schreibung statt Versalien und engere Laufweite: der Satz muss GELESEN werden, nicht nur wahrgenommen. Versalien mit 3px Sperrung taugen fuer drei Woerter, nicht fuer zwei Saetze. Kontrast rgba(142,142,142,0.9) liegt bei rund 5:1 gegen Schwarz und knapp darunter gegen Anthrazit - in beiden Faellen ueber AA (4,5:1). max-width haelt die Zeile unter 75 Zeichen. */ .impuls-datenschutz { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 11px; letter-spacing: 0.06em; line-height: 1.7; color: rgba(142,142,142,0.9); text-align: center; max-width: 430px; margin: 26px auto 0 auto; } .impuls-datenschutz a { color: rgba(142,142,142,0.9); text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s; } .impuls-datenschutz a:hover { color: var(--gold-sunset); } .social-text-link { font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold-sunset); text-decoration: none; transition: color 0.3s, letter-spacing 0.3s; } .social-text-link:hover { color: white; letter-spacing: 6px; } /* v16: Cal.com-/Triage-Button-Styles entfernt. Kontakt laeuft ueber ein schlankes Impuls-Formular (.minimal-input / .minimal-submit, s. o.). */ .minimal-input textarea, textarea.minimal-input { line-height: 1.6; } @media (prefers-reduced-motion: reduce) { .scroll-tag, .scroll-claim, .scroll-narrative, .scroll-signature { opacity: 1 !important; transform: none !important; } .scroll-sun-core { opacity: 1 !important; } .scroll-planet { opacity: 0 !important; } .scroll-light, .scroll-light-soft { opacity: 0.55 !important; } #lei .book-stack { transform: none !important; opacity: 1 !important; } .case-canvas { display: none !important; } } /* ════════════════════════════════════════════════════════════════ v16.13: REDUCED-EFFECTS (Leistungs-Probe, s. JS-Kopf) Nur Rechenlast-Spitzen entfallen - Lichtverlaeufe, Partikel, Gold, Typografie und die gesamte Cases-Mechanik bleiben. ════════════════════════════════════════════════════════════════ */ /* Scroll-Lights: die Gradients sind bereits weich - der Blur obendrauf ist der teuerste Einzelposten der Seite und faellt ersatzlos weg. */ html.reduced-effects .scroll-light, html.reduced-effects .scroll-light-soft { filter: none; } /* Menue: abdunkeln statt blurren (Push/Scale bleibt erhalten). */ html.reduced-effects body.menu-open main { filter: brightness(0.25); } html.reduced-effects[data-menu-variant="B"] body.menu-open main { filter: brightness(0.3); } /* v16.16: 0.88 -> 0.62 - fast-opak wirkte auf OLED wie schwarze Wand. */ html.reduced-effects #sentinel-menu { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,5,5,0.62); } /* Orb Ruhezustand: hat seit 03.08.2026 gar keinen backdrop-filter mehr (siehe .s-orbit-wrapper::before), die Sonderregel dafuer ist damit entfallen. Die Annahme im alten Kommentar, der 320px-Kreis sei guenstig, war falsch: gemessen kostete er rund die Haelfte der Bildrate. Nur der Hover-Zustand behaelt einen Weichzeichner - dort entfaellt in reduced lediglich die url()-Warp-Verzerrung. */ html.reduced-effects .s-orbit-wrapper:hover::before { backdrop-filter: blur(4px) brightness(1.2) contrast(1.1); -webkit-backdrop-filter: blur(4px) brightness(1.2) contrast(1.1); } /* Film: laeuft in reduced ohnehin als Kurzblende (JS) - das Vollbild- Korn hier nur als Sicherheitsnetz stillgelegt. */ html.reduced-effects .film-grain { filter: none; opacity: 0.15; } /* ════════════════════════════════════════════════════════════════ SUPER 8 FILM OVERLAY (Cases-Übergang, v9.2) ════════════════════════════════════════════════════════════════ */ .film-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2900; opacity: 0; visibility: hidden; background-color: #030303; background-image: radial-gradient(circle at center, rgba(232, 227, 213, 0.2) 0%, transparent 70%); transition: opacity 0.1s ease; } .film-overlay.is-rolling { opacity: 1; visibility: visible; } .film-grain { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; filter: url(#filmNoiseFilter); z-index: 5; } .film-jitter { position: absolute; inset: -5vw; } .film-overlay.is-rolling .film-jitter { animation: filmProjectorJitter 0.15s infinite; } @keyframes filmProjectorJitter { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(3px, -2px) rotate(0.4deg); } 50% { transform: translate(-2px, 3px) rotate(-0.3deg); } 75% { transform: translate(4px, 1px) rotate(0.5deg); } 100% { transform: translate(-1px, -3px) rotate(-0.2deg); } } .film-strip { position: absolute; top: -20vh; left: 0; right: 0; margin: 0 auto; width: min(95vw, 120vh); background-color: var(--film-dark); will-change: transform; overflow: hidden; box-shadow: 0 0 80px rgba(0,0,0,1); } #framesContainer { display: flex; flex-direction: column; gap: 6vh; padding: 6vh 11%; } .frame-window { width: 100%; aspect-ratio: 4 / 3; background-color: var(--film-base); border-radius: min(4vw, 4vh); background-image: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.15) 100%); box-shadow: inset 0 0 30px rgba(0,0,0,0.8); position: relative; } .film-perf-border { position: absolute; top: 0; bottom: 0; width: 8%; background-color: var(--film-dark); z-index: 10; background-image: linear-gradient( to bottom, var(--projector-light) 0%, var(--projector-light) 50%, transparent 50%, transparent 100% ); background-size: min(2vw, 3vh) min(4vw, 6vh); background-position: center top; background-repeat: repeat-y; box-shadow: 0 0 10px rgba(255, 254, 230, 0.1) inset; } .film-perf-border.left { left: 0; border-right: 2px solid rgba(255,255,255,0.05); } .film-perf-border.right { right: 0; border-left: 2px solid rgba(255,255,255,0.05); } @media (max-width: 768px) { .film-strip { width: 100vw; border-radius: 0; } #framesContainer { gap: 4vh; padding: 4vh 14%; } .film-perf-border { width: 11%; background-size: 3.5vw 7vw; } } .film-splice { position: absolute; left: -5%; right: -5%; height: 12vh; background: #000; z-index: 15; box-shadow: 0 0 30px rgba(0,0,0,0.9); border-top: 3px solid rgba(255,255,255,0.1); border-bottom: 2px solid rgba(255,255,255,0.05); } .light-leak { position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(220, 80, 0, 0.5), transparent 40%); mix-blend-mode: overlay; opacity: 0; z-index: 20; pointer-events: none; } .film-overlay.is-rolling .light-leak { animation: filmLightLeak 0.7s infinite alternate; } @keyframes filmLightLeak { 0%, 40% { opacity: 0; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.3); } 60% { opacity: 0; transform: scale(1); } 90% { opacity: 0.9; transform: scale(1.5); background: radial-gradient(circle at 30% 70%, rgba(255, 120, 0, 0.4), transparent 50%); } } .artifact-scratch { position: absolute; width: 2px; height: 100vh; background: rgba(18, 16, 14, 0.6); left: 20%; opacity: 0; z-index: 20; } .artifact-scratch.light { width: 3px; background: rgba(255, 255, 255, 0.7); left: 70%; } .film-overlay.is-rolling .artifact-scratch { animation: filmScratch 0.3s infinite; } @keyframes filmScratch { 0%, 90% { opacity: 0; } 91%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } } .film-shutter { position: absolute; inset: 0; z-index: 25; pointer-events: none; } .film-overlay.is-rolling .film-shutter { animation: filmShutter 0.08s infinite; } @keyframes filmShutter { 0% { background: rgba(0,0,0,0.0); } 50% { background: rgba(0,0,0,0.25); } 100% { background: rgba(255,255,255,0.05); } } @media (prefers-reduced-motion: reduce) { .film-overlay { transition: opacity 0.2s ease; } .film-overlay.is-rolling .film-jitter, .film-overlay.is-rolling .light-leak, .film-overlay.is-rolling .artifact-scratch, .film-overlay.is-rolling .film-shutter { animation: none; } } /* ════════════════════════════════════════════════════════════════ MOBIL – SCHICHT 1 (v16.2) Ein Breakpoint: 768px. Hier stehen ausschliesslich Layout- und Typografie-Anpassungen. Cases, Buch und Menue sind bewusst NICHT enthalten - die brauchen einen Modus-Wechsel samt Ersatz, keinen Ueberschreibungswert, und warten auf Jans Entscheidung. ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* v16.20: "Phase 2: Mobile Scroll Snapping" (globales scroll-snap-type auf html,body + scroll-snap-stop:always auf section/.case-frame) wieder entfernt - genau das Muster, das v16.11 unten schon einmal als Ursache des globalen Zurueckspringens identifiziert und durch die .cases-snap-Klasse ersetzt hatte. Cases-Snapping laeuft ausschliesslich ueber die dortige, skopierte Loesung. */ /* --- Abstaende: 180px oben/unten sind auf dem Telefon eine leere Seite --- */ .layout-frame { padding: 90px var(--padding-x); } /* --- Fliesstext: 22px ist auf schmalem Schirm zu gross zum Lesen --- */ .rhythm-text { font-size: 17px; line-height: 1.7; margin-bottom: 32px; } .highlight { font-size: 19px; margin-top: 40px; line-height: 1.45; } h2 { margin-bottom: 40px; } .label { margin-bottom: 32px; } /* ───────────────────────────────────────────────────────────── MARKEN-BALKEN (v16.6) Auf dem Telefon braucht der Kopfbereich einen eigenen Grund – ohne ihn laufen Logo, Wortmarke und Knoepfe permanent in die Ueberschriften. Am Desktop bewusst verworfen, mobil noetig. ───────────────────────────────────────────────────────────── */ nav { padding: 0 var(--padding-x); height: 82px; background: transparent; border-bottom: 1px solid transparent; transition: background 0.4s ease, border-color 0.4s ease; } body.scrolled nav { background: rgba(5, 5, 5, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgba(214, 178, 94, 0.16); } /* v16.7: Marke deutlich groesser. 40px Logo und 13px Wortmarke waren gegenueber den Bedienknoepfen zu zurueckhaltend - der Nautilus war kaum lesbar. Die Marke soll den Balken tragen, nicht darin verschwinden. */ /* v16.8: Logo und Knoepfe werden beide auf die MITTELLINIE des Balkens gesetzt (top 41px = halbe Balkenhoehe, minus halbe Eigenhoehe). Vorher standen feste Oberkanten gegeneinander - da die Elemente unterschiedlich hoch sind, sassen sie sichtbar versetzt. */ .logo-anchor img { width: min(58vw, 240px); } body.scrolled .logo-anchor { top: 42px; transform: translate(0, -50%); } body.scrolled .logo-anchor img { width: 68px; } /* v16.7: Marken-Ausblendung ueber Buch und Cases entfaellt mobil. Sie war die Loesung fuer die Kollision mit dem Inhalt - und genau die loest jetzt der Balken. Beides zusammen ergibt keinen Sinn. */ body.brand-hidden .logo-anchor, body.brand-hidden .wordmark { opacity: 1 !important; pointer-events: auto !important; } /* v16.6: Positions-Animation raus. Ursache des Sprungs beim Zurueckscrollen: transform: translate(-50%) rechnet gegen die Elementbreite – und die animiert gleichzeitig mit. Solange das Logo schmal ist, sitzt seine linke Kante schon in der Mitte, es wirkt nach rechts versetzt und rueckt erst beim Breiterwerden nach. Statt gegen wandernde Bezugswerte zu animieren: harter Wechsel, weich ueberblendet. */ .logo-anchor { transition: opacity 0.28s ease; } .logo-anchor img { transition: none; } .wordmark { --wordmark-font-size: 19px; --wordmark-top: 32px; --wordmark-letter-spacing: 0.2em; --wordmark-gap-from-logo: 12px; --logo-header-width: 68px; } /* --- Hero: Text nicht bis an die Unterkante druecken --- */ .hero { padding-bottom: 12vh; } /* --- Cases-Ueberschrift: der Dreiklang bricht sonst ineinander --- */ .cases-header { padding: 56px var(--padding-x) 40px var(--padding-x); } .cases-dreiklang { flex-direction: column; align-items: flex-start; gap: 6px; } .cases-dreiklang .word-2, .cases-dreiklang .word-3 { text-align: left; flex: none; } .header-divider { margin-top: 36px; } /* --- Kontakt: Loewe und Formular auf Telefonbreite --- */ .lion-wrap { margin: 60px auto 30px auto; } .lion-img-container { width: 78vw; } /* v16.11: mobil groesser (15px) und weiter vom Loewen abgesetzt. Glow, Farbe und Pulsieren erbt das Label aus der Basisregel oben (Desktop + mobil einheitlich). */ .lion-wrap .bell-label { font-size: 15px; margin-top: 28px; } .social-text-links { gap: 22px; flex-wrap: wrap; margin-top: 44px; } /* Muss NACH der Desktop-Regel stehen: Media Queries erhoehen die Spezifitaet nicht, bei Gleichstand gewinnt die spaetere Zeile. Weiter oben notiert waeren diese Werte wirkungslos gewesen. Passend zu .impuls-signatur mobil (38px) - beide Abstaende bleiben gleich, wie am Desktop auch. */ .legal-links { margin-top: 38px; } .copyright-zeile { font-size: 9.5px; letter-spacing: 2.4px; margin-top: 20px; } .social-text-link { font-size: 10px; letter-spacing: 3px; } /* --- Zwischenbilder etwas hoeher, 16:9 wirkt mobil wie ein Streifen --- */ /* v16.10: Rahmen ins Quadrat statt 4:3 – mobil rund 390 statt 290 Punkt hoch. Sie bleiben dadurch deutlich laenger im Bild, und die lange Zoombewegung (2,4s, unveraendert) hat wieder Zeit, sichtbar zu werden. Die Bewegung zu kuerzen war der falsche Hebel. */ .interrupt-frame { aspect-ratio: 1 / 1; } /* ───────────────────────────────────────────────────────────── LEISTUNGEN MOBIL (v17) – Register statt Wisch-Streifen Der waagerechte Wisch-Streifen ist weg. Mobil stehen die fuenf Leistungen als Register untereinander: alle fuenf Titel auf einem Bildschirm, eine oeffnet sich. Drei Zutaten: Einlauf – das Register zeichnet sich beim Ankommen Aufschlagen – die geoeffnete Seite legt sich flach Papier – eigene Flaeche, Lichtkante, harte Ecken, Korn Bewegt werden nur Verschiebung, Drehung und Deckkraft. Kein blur, kein backdrop-filter, kein wandernder Schatten. Die Registerzeilen baut JS aus den vorhandenen .book-page-Bloecken (s. index.html). Der Text steht dadurch nur EINMAL im Dokument. Ohne JS bleiben die fuenf Seiten schlicht untereinander stehen – der Inhalt ist in jedem Fall vollstaendig lesbar. ───────────────────────────────────────────────────────────── */ #lei { padding-top: 80px; } .book-scroll-wrapper { height: auto; } /* Das Register steht optisch mittig zwischen Textblock und Interruption Frame. Vorher: rund 90 Punkt Luft oben, 8 unten - es klebte am Rahmen darunter und hing oben in der Leere. Die Werte sind bewusst NICHT gleich: der Zeilenabstand des Textes darueber schenkt schon rund 13 Punkt Luft, die man mitzaehlen muss, damit es gleich AUSSIEHT. */ /* Jan-Entscheidung: nicht den Abstand nach unten vergroessern, sondern den nach oben verkleinern - sonst waechst die Scrollstrecke weiter. Gemessen von der letzten Textzeile bis zur ersten Goldkante sind das jetzt rund 42 statt 58 Punkt, unten bleiben 76. Numerisch schief, optisch mittig: der Interruption Frame ist eine dichte Bildflaeche und zieht das Auge an, oben steht nur Schrift mit kurzer Schlusszeile. */ /* Der eigene Abstand des Textblocks wird abgeschaltet, damit der obere Zwischenraum ausschliesslich an EINER Zahl haengt. Vorher steuerten zwei Werte denselben Abstand - je nach Zustand wirkte mal der eine, mal beide, und der Wert liess sich nicht sauber setzen. Jetzt: oben 76, unten 82. Nicht gleich, sondern so, dass die sichtbaren Abstaende gleich sind - die Textzeile bringt rund 6 Punkt Zeilendurchschuss unter der Schrift mit. */ #lei .lei-intro .rhythm-text { margin-bottom: 0; } #lei .lei-intro { padding-bottom: 76px; } #lei .lei-viewport { position: static; height: auto; display: block; perspective: none; padding-bottom: 82px; } /* Der Einflug entfaellt – das Register steht sofort da */ .reveal-book, .reveal-book.active { opacity: 1; transform: none; filter: none; transition: none; } #lei .book-stack { width: 100%; max-width: none; height: auto; } #lei .h2-hardcover, #lei .h2-edge-left, #lei .h2-edge-right, #lei .h2-spine-crease, #lei .curl-svg, #lei .peel-trigger, #lei .book-arrow-left, #lei .book-arrow-right, #lei .book-nav { display: none; } #lei .book-main { position: relative; inset: auto; z-index: auto; display: block; overflow: visible; margin: 0 16px; padding: 0; background: transparent; box-shadow: none; border-radius: 0; } /* Rueckfall ohne JS: fuenf Seiten schlicht untereinander */ #lei .book-page, #lei .book-page.active, #lei .book-page.exit-left, #lei .book-page.exit-right { position: relative; inset: auto; display: block; opacity: 1; transform: none; filter: none; pointer-events: auto; transition: none; margin-bottom: 44px; } #lei .page-left, #lei .page-right { background: transparent; min-height: auto; padding: 0; display: block; text-align: left; } /* ── Registerzeile ──────────────────────────────────────── */ #lei .reg-zeile { position: relative; } #lei .reg-linie { display: block; height: 1px; width: 100%; background: rgba(214,178,94,0.22); transform-origin: left center; } #lei .reg-kopf { width: 100%; text-align: left; background: transparent; border: 0; display: flex; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; font-family: 'Jost', sans-serif; -webkit-tap-highlight-color: transparent; } /* min-width:0 ist noetig, sonst weigert sich das Flex-Kind zu schrumpfen und der laengste Titel schiebt den Pfeil hinaus. */ #lei .reg-text { flex: 1 1 auto; min-width: 0; display: block; } /* Die Ziffer als Vorzeile - gleiche Sprache wie "LEISTUNGEN" ueber der Ueberschrift. Volle Deckkraft statt 75 Prozent: bei zwei Ziffern in 12 Punkt ist Zurueckhaltung Unleserlichkeit. */ /* Gleicher Rang wie "LEISTUNGEN" ueber der Ueberschrift: gleiche Groesse, gleiche Familie. Nur die Sperrung ist deutlich weiter - "01" hat genau EINE Luecke, und die muss breit sein, damit man sie ueberhaupt als Sperrung liest. */ #lei .reg-num { display: block; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); opacity: 1; margin-bottom: 10px; } /* Fensterchen, aus dem der Titel hervorsteigt */ #lei .reg-titel-clip { display: block; overflow: hidden; } #lei .reg-titel { display: block; font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 400; color: var(--text); line-height: 1.25; transition: color 0.45s ease; } #lei .reg-zeile.offen .reg-titel { color: var(--gold); } #lei .reg-pfeil { flex: 0 0 auto; width: 14px; height: 14px; border-right: 1.5px solid rgba(214,178,94,0.6); border-bottom: 1.5px solid rgba(214,178,94,0.6); transform: rotate(45deg) translate(-2px,-2px); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } #lei .reg-zeile.offen .reg-pfeil { transform: rotate(225deg) translate(-2px,-2px); } /* Jan-Feedback: Das Aufschlagen soll sich Zeit lassen und am Ende deutlich auslaufen. Zwei Stellschrauben, beide gedreht: die Dauer (0,6 -> 0,95 s) und die Kennlinie. Die Kennlinie verteilt die Zeit auf den Weg. Gemessen entfallen auf die letzten zehn Prozent des Wegs jetzt 75 Prozent der Zeit - vorher 67. Schaerfer geht, wird aber zum Haenger: bei (0.05,1,0.12,1) waere die Bewegung nach einem Viertel der Zeit schon zu 92 Prozent fertig. DAUER und die Kennlinie im JS (Hochwandern) ziehen mit, sonst laufen die beiden Bewegungen auseinander. */ #lei .reg-mehr { height: 0; overflow: hidden; /* Jan-Befund: Das Kippen war praktisch unsichtbar. Zwei Ursachen, beide behoben: 1) Die Flaeche deckte sich genauso langsam auf, wie das Blatt kippte - man sah immer nur den Bereich direkt an der Scharnierkante, und dort bewegt sich bei einer Drehung um die Oberkante am wenigsten. Jetzt ist die Flaeche nach 0,65 s ganz offen, das Blatt kippt aber noch bis 1,25 s: man sieht es also erst ganz und dann beim Hinlegen zu. DAUER im JS zieht auf 650 mit. 2) Die Tiefenwirkung stand auf 1400 Punkt bei einem 398 Punkt breiten Blatt - eine sehr flache Kamera, die Verkuerzung fiel kaum auf. 700 Punkt entspricht knapp der doppelten Blattbreite und ist der uebliche Bereich. */ transition: height 1.1s cubic-bezier(0.83,0,0.17,1); perspective: 700px; } /* ── Das Blatt: Flaeche, Lichtkante, harte Ecken, Korn ─── */ #lei .reg-innen { position: relative; transform-origin: top center; transform: rotateX(-22deg); opacity: 0; transition: transform 1.4s cubic-bezier(0.83,0,0.17,1), opacity 0.7s ease; background-color: var(--anthracite); /* Licht faellt oben auf das Blatt, dort wo es angeschlagen ist */ background-image: linear-gradient(to bottom, rgba(255,255,255,0.055) 0, rgba(255,255,255,0) 190px); box-shadow: inset 0 1px 0 rgba(214,178,94,0.14); border-radius: 0; /* Papier hat harte Ecken */ padding: 28px 20px 38px; margin-bottom: 4px; } #lei .reg-zeile.offen .reg-innen { transform: none; opacity: 1; } /* Lichtschleier, verlaeuft sobald das Blatt liegt */ #lei .reg-innen::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(to bottom, rgba(214,178,94,0.22) 0%, rgba(214,178,94,0.05) 35%, rgba(214,178,94,0) 62%); opacity: 1; transition: opacity 1.5s ease; } #lei .reg-zeile.offen .reg-innen::before { opacity: 0; } /* Korn: 128er-Kachel, ruhend. Nie animiert, nie skaliert. */ #lei .reg-innen::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: url('korn.png'); background-repeat: repeat; background-size: 128px 128px; opacity: 0.55; } #lei .reg-inhalt { position: relative; z-index: 1; } /* ── Einlauf, gestaffelt ueber --d je Zeile ─────────────── Jan-Feedback: langsamer. Staffelung 0.09 -> 0.16 s je Zeile (STAFFEL im JS), alle Dauern und Verzoegerungen entsprechend gedehnt. Der Einlauf dauert damit rund 2,2 statt 1,5 Sekunden bis zum letzten Pfeil. */ #lei .book-main .reg-linie { transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.16,1,0.3,1); transition-delay: var(--d); } #lei .book-main.eingelaufen .reg-linie { transform: scaleX(1); } #lei .book-main .reg-num { opacity: 0; transition: opacity 0.8s ease; transition-delay: calc(var(--d) + 0.30s); } /* Volle Deckkraft - der Endwert des Einlaufs muss zum Grundwert oben passen, sonst faellt die Ziffer am Ende wieder ab. */ #lei .book-main.eingelaufen .reg-num { opacity: 1; } #lei .book-main .reg-titel { transform: translateY(108%); transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), color 0.45s ease; transition-delay: calc(var(--d) + 0.38s), 0s; } #lei .book-main.eingelaufen .reg-titel { transform: none; } #lei .book-main .reg-pfeil { opacity: 0; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.8s ease; transition-delay: 0s, calc(var(--d) + 0.62s); } #lei .book-main.eingelaufen .reg-pfeil { opacity: 1; } /* ── Schriftgroessen im geoeffneten Blatt ───────────────── */ #lei .left-headline { font-size: 24px; margin-bottom: 22px; } #lei .left-rule { margin-left: 0; margin-bottom: 22px; } #lei .left-core { font-size: 17.5px; line-height: 1.6; margin-bottom: 26px; } #lei .right-body { font-size: 17px; line-height: 1.8; } #lei .right-body p { margin-bottom: 20px; } /* nur noch fuer den Rueckfall ohne JS relevant */ #lei .left-num { font-size: 13px; letter-spacing: 3px; } #lei .left-cat { font-size: 12px; letter-spacing: 4px; } /* Bewegung unerwuenscht: alles sofort, nichts animiert. */ @media (prefers-reduced-motion: reduce) { #lei .reg-linie, #lei .reg-num, #lei .reg-titel, #lei .reg-pfeil, #lei .reg-mehr, #lei .reg-innen, #lei .reg-innen::before { transition: none !important; } #lei .book-main .reg-linie { transform: scaleX(1); } #lei .book-main .reg-num { opacity: 1; } #lei .book-main .reg-titel { transform: none; } #lei .book-main .reg-pfeil { opacity: 1; } #lei .reg-innen { transform: none; opacity: 1; } #lei .reg-innen::before { opacity: 0; } } /* v16.4: vier Abschnitte untereinander, normaler Scrollfluss. v16.19: min-height:100vh entfernt – ohne Film-Uebergang erzeugten vier Vollbild-Rahmen leeren Schwarzraum. Hoehe folgt dem Inhalt; Snap (unten) bleibt aktiv. */ .sticky-container { position: static; height: auto; width: 100%; display: block; overflow: visible; } .horizontal-strip { display: block; height: auto; transform: none !important; will-change: auto; } /* v16.11: Echtes Festrasten - aber sauber begrenzt. proximity auf dem ganzen Dokument war das Problem (globales Zurueckspringen). Jetzt: scroll-snap-align auf jeder Case-Karte, und scroll-snap-type: mandatory wird per Klasse .cases-snap NUR angeschaltet, solange die Case-Sequenz den Schirm fuellt (JS-Observer weiter unten). So rastet jede Karte ein - und keine andere Sektion wird festgehalten. Natives Snapping, kein JS-Hijack. */ /* Test 14/15: Die Rastpunkte des alten mobilen Cases-Systems (.case-frame, html.cases-snap, #cases-exit, #cases-entry) sind entfernt. Sie gehoerten zu einer Variante, die es mobil nicht mehr gibt - die Sequenz ist hier ausgeblendet. Wirkungslos waren sie nur, solange nirgends senkrechtes Einrasten aktiv ist; sobald es das ist, werden sie zu ungewollten Rastzielen quer ueber die ganze Seite. Genau das ist passiert. */ .case-frame { flex: none; width: 100%; height: auto; min-height: auto; display: block; } /* v16.19: proximity statt mandatory – bei content-Hoehe wuerde mandatory den Case-Anfang oben einrasten und darunter Schwarzraum im Viewport lassen. */ /* v16.11: Ausgangs-Rastpunkt hinter dem letzten Case. Ohne ein Snap-Ziel unterhalb von Hamburg zieht mandatory dich auf den letzten Case zurueck. Der folgende Interruption-Frame nimmt einen Wisch entgegen; danach ist die Sequenz aus dem Aktiv-Band, .cases-snap faellt weg, frei scrollbar. */ /* v16.11: Symmetrischer Rastpunkt VOR dem ersten Case - sonst haelt mandatory dich an Hannover fest und laesst dich nicht nach oben raus. */ /* v16.19: Inhalt folgt dem Text (kein 100vh-Zwang). Padding sichert Luft; justify-content entfaellt ohne Vollbild-Zentrierung. */ .case-content { display: flex; flex-direction: column; height: auto; min-height: auto; padding: 72px var(--padding-x) 56px; } .case-left, .case-right { position: static; top: auto; left: auto; right: auto; transform: none; width: auto; text-align: left; } .case-left { margin-bottom: 30px; } .scroll-tag { margin-bottom: 18px; } .scroll-claim { font-size: clamp(25px, 7vw, 34px); } .scroll-signature { font-size: clamp(18px, 5.2vw, 24px); margin-top: 24px; } /* v16.11: Fliesstext von 15px auf 17px (gleich zum uebrigen Fliesstext), Zeilenabstand 1.85 -> 1.7. Fuellt die Spaltenbreite besser, der Eindruck "Platz rechts" kam von zu kleiner Schrift bei losem Abstand. */ .scroll-narrative { font-size: 17px; line-height: 1.7; padding-left: 16px; } /* v16.8: Sonne und Planet mobil ausgeblendet. Am Desktop bilden sie gemeinsam die Eklipse - der Planet schiebt sich vor die Sonne. Auf dem Telefon bleibt davon ein einzelner goldener Punkt uebrig, der wie ein Versehen wirkt. Der warme Lichtschein bleibt. */ .scroll-sun { display: none; } /* ───────────────────────────────────────────────────────────── MENUE (v16.3) – Orbit dauerhaft aufgefaechert Auf Touch gibt es kein Hover; die Knoten muessen ohne Aufklappen erreichbar sein. Sprach-Orb entfaellt (DE-only). Das Gravitationsfeld (backdrop-filter + SVG-Verzerrung) ist der teuerste Dauereffekt der Seite und mobil kaum sichtbar - es faellt weg, Ringe und Knoten bleiben. ───────────────────────────────────────────────────────────── */ /* v16.6: Knoefe NEBENEINANDER statt untereinander – so passen sie in die Balkenhoehe und beanspruchen nur halb so viel vertikalen Platz. */ #sentinel-workspace { top: 41px; right: 12px; transform: translateY(-50%); } .s-orbit-wrapper { width: 104px; height: 48px; } .s-orbit-wrapper::before { display: none; } /* Knoten stehen fest. Die :hover-Zwillinge sind noetig, weil Safari :hover nach einer Beruehrung haengen laesst - sonst springt der Orbit in die Desktop-Auffaecherung und laeuft aus dem Bild. */ .s-o-node-1, .s-orbit-wrapper:hover .s-o-node-1 { transform: translate(-26px, 0); } .s-o-node-2, .s-orbit-wrapper:hover .s-o-node-2 { transform: translate(26px, 0); } .s-o-node-3 { display: none; } /* Symbole dauerhaft sichtbar und antippbar */ .s-o-content { opacity: 1; transform: scale(1); pointer-events: auto; } .s-o-node-1 .s-o-content { width: 36px; height: 36px; } .s-o-node-1 .s-o-content svg { width: 16px; height: 16px; } .s-o-node-2 .s-o-content { width: 32px; height: 32px; } .s-o-node-2 .s-o-content svg { width: 15px; height: 15px; } /* Ringe als volle Kreise statt Halbbogen, rotieren weiter */ .s-o-ring, .s-orbit-wrapper:hover .s-o-ring { clip-path: none; transform: none !important; } .s-o-ring-1, .s-orbit-wrapper:hover .s-o-ring-1 { width: 48px; height: 48px; -webkit-mask: radial-gradient(circle, transparent 20px, black 21px); mask: radial-gradient(circle, transparent 20px, black 21px); animation: s-spin 24s linear infinite !important; } .s-o-ring-2, .s-orbit-wrapper:hover .s-o-ring-2 { width: 44px; height: 44px; -webkit-mask: radial-gradient(circle, transparent 18px, black 19px); mask: radial-gradient(circle, transparent 18px, black 19px); animation: s-spin 18s linear infinite reverse !important; } /* Menue-Overlay: gerade Liste statt Kaskade (die Versaetze bis 45vw laufen auf dem Telefon aus dem Bild) */ #sentinel-menu { padding-right: 0; align-items: center; } #sentinel-menu .s-menu-list { align-items: center; } /* v16.8: !important ist hier noetig. Die Desktop-Kaskade wird ueber :nth-child gesetzt und ist damit spezifischer als eine Sammelregel - ohne Vorrang lief der Versatz von bis zu 45vw mobil weiter und die Eintraege standen treppenfoermig statt untereinander. */ #sentinel-menu .s-menu-list li, #sentinel-menu .s-menu-list li.s-close-item { --cascade-x: 0vw !important; margin-left: 0 !important; } #sentinel-menu .s-menu-list li.s-close-item { margin-top: 1.4rem; } #sentinel-menu .s-menu-list a { font-size: clamp(1.7rem, 7.5vw, 2.4rem); padding: 0.45rem 1rem; } #sentinel-menu .s-menu-lang { display: block; } } /* ════════════════════════════════════════════════════════════════ TOUCH-GERAETE: Hover-Effekte abschalten Touch kennt kein Hover. Diese Effekte laufen dort entweder gar nicht oder bleiben nach einer Beruehrung faelschlich "haengen". Betrifft NICHT das Sentinel-Menue - das ist ein eigener Modus- Wechsel und wartet auf die Entscheidung. ════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════ TOUCH-TABLETS (breiter als 768px, aber ohne Zeiger) Gleiches Prinzip wie auf dem Telefon – Knoten stehen fest –, nur in Desktop-Groesse. Ohne diesen Block laegen die Knoten auf einem iPad uebereinander im Zentrum und waeren nicht bedienbar. ════════════════════════════════════════════════════════════════ */ @media (hover: none) and (min-width: 769px) { .s-orbit-wrapper::before { display: none; } .s-o-node-1, .s-orbit-wrapper:hover .s-o-node-1 { transform: translate(0, -62px); } .s-o-node-2, .s-orbit-wrapper:hover .s-o-node-2 { transform: translate(0, 62px); } .s-o-node-3 { display: none; } .s-o-content { opacity: 1; transform: scale(1); pointer-events: auto; } .s-o-ring, .s-orbit-wrapper:hover .s-o-ring { clip-path: none; transform: none !important; } .s-o-ring-1, .s-orbit-wrapper:hover .s-o-ring-1 { width: 80px; height: 80px; -webkit-mask: radial-gradient(circle, transparent 34px, black 35px); mask: radial-gradient(circle, transparent 34px, black 35px); animation: s-spin 24s linear infinite !important; } .s-o-ring-2, .s-orbit-wrapper:hover .s-o-ring-2 { width: 64px; height: 64px; -webkit-mask: radial-gradient(circle, transparent 26px, black 27px); mask: radial-gradient(circle, transparent 26px, black 27px); animation: s-spin 18s linear infinite reverse !important; } } @media (hover: none) { /* Orbit: Aufklapp-Choreografie neutralisieren. Safari laesst :hover nach einer Beruehrung haengen - der Orbit bliebe sonst im Desktop-Zustand stehen, samt teurem Verzerrungsfeld. */ .s-orbit-wrapper:hover { box-shadow: none; background: none; } .s-orbit-wrapper:hover::before { display: none; } .s-orbit-wrapper:hover .s-o-content { transition-delay: 0s; } .lion-wrap:hover .lion-img { filter: brightness(0.68) contrast(1.15) grayscale(0.15); } .lion-wrap:hover .lion-aura { opacity: 0; } .lion-wrap.is-lit .lion-img { filter: brightness(0.95) contrast(1.15) grayscale(0); } .lion-wrap.is-lit .lion-aura { opacity: 1; } .lion-wrap:hover .bell-label { color: var(--gold-sunset); letter-spacing: 3px; } #lei .right-cta:hover { letter-spacing: 4px; } .social-text-link:hover { color: var(--gold-sunset); letter-spacing: 4px; } } /* v16.11: Pulsierender Gold-Glow fuer "Impuls hinterlassen" (mobil aktiv). Nur die Glow-Intensitaet atmet, die Schrift bleibt ruhig. */ @keyframes bell-pulse { 0%, 100% { opacity: 0.72; text-shadow: 0 0 6px rgba(214,178,94,0.50), 0 0 16px rgba(214,178,94,0.28); } 50% { opacity: 1; text-shadow: 0 0 12px rgba(214,178,94,1.0), 0 0 26px rgba(214,178,94,0.62), 0 0 44px rgba(214,178,94,0.35); } } @media (prefers-reduced-motion: reduce) { .lion-wrap .bell-label { animation: none; opacity: 1; text-shadow: 0 0 8px rgba(214,178,94,0.85), 0 0 20px rgba(214,178,94,0.55), 0 0 34px rgba(214,178,94,0.30); } } /* ════════════════════════════════════════════════════════════════ ERFAHRUNG · BENTO-GRID (v16.18, aus Prototyp P5) ════════════════════════════════════════════════════════════════ */ .section-header { margin-bottom: 80px; } .section-header h2 { margin-bottom: 25px; } .section-header .highlight { margin-top: 0; font-size: clamp(18px, 2vw, 24px); } .section-header .reveal-text { opacity: 0; transform: translateY(30px); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.2, 1), transform 1.4s cubic-bezier(0.16, 1, 0.2, 1); } .section-header.is-revealed .reveal-text { opacity: 1; transform: translateY(0); } /* ─── 04.08.2026: UEBERGANGSSPERRE WAEHREND DES LADENS ─── Das body-Element traegt die Klasse von Anfang an im Markup, das Skript nimmt sie nach dem load-Ereignis wieder weg. Grund: Beim Neuladen mitten auf der Seite stellt Chrome die Scrollposition wieder her, das setzt "scrolled" - und der Formwechsel im Logo lief sichtbar ab, obwohl der Nutzer weit unten stand. Bewusst eng gefasst: nur der Logo-Anker, nicht die ganze Seite. Ein globales "alle Uebergaenge aus" wuerde auch Effekte unterdruecken, die beim Laden zu Recht laufen. */ body.keine-uebergaenge .logo-anchor, body.keine-uebergaenge .logo-anchor * { transition: none !important; animation: none !important; } /* ─── v16.21: ERFAHRUNGS-BEREICH, FUEHRUNG ─── Hier stand kurzzeitig natives Einrasten (scroll-snap-type: y proximity, skopiert ueber html.erf-snap). Am 04.08.2026 nach Test wieder entfernt, und zwar nicht wegen Nebenwirkungen, sondern weil es die Aufgabe nicht loesen kann: "proximity" richtet nur aus, wo der Nutzer ohnehin zum Stehen kommt. Es fuehrt niemanden aktiv hin, und bei etwas schnellerem Wischen greift es gar nicht. Jans Beobachtung: "wenn man nur etwas schneller wischt, ist man sofort raus." Ersetzt durch eine einmalige, unterbrechbare Ausrichtung per JS, ausgeloest in dem Moment, in dem die Choreografie anspringt. Siehe index.html, Block "SANFTE FUEHRUNG". NICHT wieder auf scroll-snap umbauen - drei Anlaeufe reichen (v16.11, v16.20, v16.21). Hier ist kein CSS mehr noetig. */ .bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; position: relative; } .bento-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(214, 178, 94, 0.15); border-radius: 12px; padding: 45px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(220px); transition: opacity 1.2s ease-out, transform 3.5s cubic-bezier(0.16, 1, 0.2, 1); position: relative; overflow: hidden; } .bento-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(214, 178, 94, 0.12), transparent 50%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 0; } .bento-card > * { position: relative; z-index: 1; } .bento-card.is-revealed { opacity: 1; transform: translateY(0); } .bento-card.is-revealed:hover { transform: translateY(-4px); border-color: rgba(214, 178, 94, 0.5); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease; } .bento-card.is-revealed:hover::before { opacity: 1; } .bento-span-6 { grid-column: span 6; align-items: center; text-align: center; } .bento-span-4 { grid-column: span 4; } .bento-number { font-family: 'Playfair Display', serif; font-size: clamp(48px, 6vw, 92px); color: var(--gold-sunset); line-height: 1; margin-bottom: 10px; font-variant-numeric: tabular-nums; transition: text-shadow 0.4s ease; } .bento-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--text-main); transition: color 0.4s ease, text-shadow 0.4s ease; } .bento-list { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .bento-list li { font-size: 19px; font-weight: 300; color: var(--text-dim); display: flex; align-items: center; transition: color 0.3s ease; } .bento-card.is-revealed:hover .bento-list li { color: rgba(255, 255, 255, 0.9); } .gold-diamond { display: inline-block; width: 7px; height: 7px; background: linear-gradient(135deg, #fffbc7 0%, #d6b25e 50%, #7d6323 100%); transform: rotate(45deg); margin-right: 14px; flex-shrink: 0; box-shadow: 0 0 8px rgba(214, 178, 94, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.8); } .bento-card.is-revealed:hover .bento-number { text-shadow: 0 0 22px rgba(214, 178, 94, 0.45); } .bento-card.is-revealed:hover .bento-title { color: #ffffff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.25); } @media (max-width: 900px) { .bento-span-6, .bento-span-4 { grid-column: span 12; } .bento-card { padding: 35px 25px; } } @media (prefers-reduced-motion: reduce) { .section-header .reveal-text, .bento-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ════════════════════════════════════════════════════════════════ CASES MOBIL – WISCH-MECHANIK (ersetzt den v16.4-Fallback weiter oben nur optisch fuer #cas; dessen Regeln bleiben zur Dokumentation unangetastet stehen, ihr Ziel-Markup .sequence-wrapper wird hier unten fuer Mobile ausgeblendet). Gepinnter Scroll-Scrub mit 3D-Tilt/Blur/Glow ueber 4 Karten, Tap-to-Expand pro Karte. Praefix "mcas-" haelt alle Klassen kollisionsfrei von den Desktop-Cases-Klassen (.scroll-tag, .scroll-claim, ...) getrennt. Fixes aus dem Vorab-Test (Chrome-MCP, 390x844px, Prototyp von Gemini): dynamische Sektionshoehe statt hartkodiert 560vh, Schliessen-Button sticky+zentriert statt fixed (verhindert die permanente Ueberlappung mit dem Kartentext am Kartenende), kein alignItems-Sprung mehr beim Aufklappen einer Karte. ════════════════════════════════════════════════════════════════ */ #cas-mobile { display: none; } @media (max-width: 768px) { /* Desktop-Mechanik (GSAP-Pin/-Scrub) bleibt im DOM, wird aber ab hier nicht mehr angezeigt - das JS deaktiviert sich fuer Mobile bereits selbst (window.__isMobile), diese Zeile blendet nur noch das zugehoerige Markup aus. */ #cas .sequence-wrapper { display: none; } /* Test 14 (Gestensteuerung, harte Variante): Die Scrollstrecke steuert die Karten NICHT mehr. Sobald die Sektion den Schirm fuellt, steht die Seite still und jede Wischgeste bedeutet genau einen Kartenschritt (siehe Skript, Block "GESTENSTEUERUNG"). Die Hoehe braucht deshalb nur noch zwei Aufgaben zu erfuellen: - erste Bildschirmhoehe: die gepinnte Flaeche selbst - zweite Bildschirmhoehe: Auslauf, damit die Sektion nach der letzten Karte weggescrollt werden kann Vorher 450vh (Traegheit ueber die Laenge erkauft) - dadurch entstand die lange Luecke nach Hamburg. Die ist damit weg. */ /* Jan-Messung am Geraet (iPhone, Screenshot 22:53): Bei 200vh blieb die Karte nach dem Verlassen noch 815px lang angeheftet stehen - das Nachschieben betraegt aber nur rund 500px. Der erste Wisch bewegte sichtbar nichts, man musste zweimal wischen. 130vh laesst nur noch rund 245px Anheftung uebrig; das Nachschieben traegt darueber hinaus, die Karte verlaesst das Bild sichtbar. Nebeneffekt: die Luecke nach Hamburg wird noch kuerzer. */ /* 140vh statt 130: gemessen war das Ausloesefeld bei 130vh nur noch 326px breit - schmal genug, dass ein kraeftiger Wisch die Sektion ueberspringt. 140vh laesst dem Feld seine volle halbe Bildschirmhoehe und haelt die Anheftung trotzdem kurz. */ #cas-mobile { display: block; height: 140vh; position: relative; } /* Jan-Feedback (Test 1): Fortschrittsbalken sass mittig im Bildschirm, mit grosser Leerflaeche darueber - jetzt oben, direkt unter der Nav-Leiste, statt vertikal zentriert. Kartenstapel bekommt den Rest der Flaeche darunter. Test 5: padding-top von 110px auf 96px reduziert - die mobile Nav-Leiste ist nur 82px hoch (siehe nav-Regel), 110px war mehr Puffer als noetig und machte den Abstand zur Kachel groesser als er sein muss. */ /* Jan-Messung: sticky.height war 815px bei innerHeight 714px - Safari rechnet vh ohne Adressleiste. Die angeheftete Flaeche war damit 101px hoeher als der sichtbare Bereich, die Karte sass zu tief und unten abgeschnitten. dvh entspricht dem tatsaechlich sichtbaren Bereich; vh bleibt als Rueckfall fuer aeltere Browser stehen. */ .mcas-scrub-sticky { position: sticky; top: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 96px; background: var(--bg-black); perspective: 900px; z-index: 10; } /* Test 5: zurueck in die Sticky-Box (siehe Markup) - der Balken muss waehrend des gesamten Scrubbens sichtbar bleiben, das geht nur innerhalb der gepinnten Box, nicht im normal scrollenden Header (dort verschwand er, sobald man weiterscrollte). Enger als vorher: kleinerer margin-bottom, damit er nicht mittig im Leeren haengt, sondern dicht an der Kachel sitzt. */ .mcas-scrub-meta { width: min(86vw, 360px); display: flex; align-items: center; gap: 12px; z-index: 20; margin-bottom: 16px; } .mcas-scrub-progress { flex: 1; height: 3px; background: rgba(214,178,94,0.15); border-radius: 3px; overflow: hidden; } .mcas-scrub-bar { height: 100%; background: var(--gold); width: 0%; transform-origin: left; border-radius: 3px; box-shadow: 0 0 12px rgba(214,178,94,0.7); will-change: width; } .mcas-chapter-count { font-size: 11px; font-weight: 600; letter-spacing: 2px; color: rgba(214,178,94,0.7); white-space: nowrap; font-family: 'Jost', sans-serif; } /* Hoehe (31.07.): vorher min(58vh, 480px). Die Buehne ist bildschirmhoch, davon gehen 96px Kopfabstand und rund 35px fuer den Fortschrittsbalken ab - auf einem heutigen Geraet blieben ueber 300px ungenutzt unter der Karte. Mit der Volumenangabe braucht die Karte den Platz ohnehin. dvh statt vh ist kein Schoenheitsfehler: die Buehne rechnet bereits in dvh. Auf Handys mit ein- und ausfahrender Adressleiste sind vh und dvh zwei verschiedene Hoehen - die Karte koennte sonst ueber die Buehne hinausragen. vh davor als Rueckfall fuer aeltere Browser. */ .mcas-card-stack { position: relative; width: min(86vw, 360px); height: min(72vh, 620px); height: min(72dvh, 620px); } .mcas-card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-anthracite); border: 1px solid rgba(214,178,94,0.25); padding: min(7vw, 26px) min(6vw, 22px); box-sizing: border-box; opacity: 0; display: flex; flex-direction: column; justify-content: center; border-radius: 6px; transform-origin: 50% 100%; box-shadow: 0 30px 60px rgba(0,0,0,0.85); will-change: transform, opacity, filter; } /* ── GOLDENTHUELLUNG (Jan-Entscheidung 31.07.) ────────────────── Die einfliegende Karte ist golden ueberstrahlt, der Text also da, aber noch nicht lesbar. Erst in der ausbremsenden letzten Phase weicht das Gold und gibt ihn frei. Der bestehende Andock-Schein bleibt unangetastet - er ist das, was vom Gold uebrig bleibt. Bewusst KEIN filter/backdrop-filter: die Deckkraft allein traegt den Effekt und kostet mobil praktisch nichts. Der Schleier liegt UEBER dem Inhalt (z-index), sonst wuerde er ihn nicht daempfen. Grundzustand unsichtbar - ohne JS bleibt er es auch, der Text ist dann sofort lesbar. Steuerung: siehe Block "mcasZeichne" im Skript. Abschalten zum Vergleich: ?gold=0 in der Adresszeile. */ .mcas-goldschleier { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; border-radius: 6px; background: radial-gradient(130% 95% at 50% 46%, rgba(255,232,168,0.72) 0%, rgba(226,188,104,0.88) 40%, rgba(198,158,74,0.98) 100%); } html.gold-aus .mcas-goldschleier { display: none !important; } /* Sicherheitsnetz: die aufgeklappte Karte wird gelesen. Sollte die Zeichenschleife im aufgeklappten Zustand einmal nicht laufen, bliebe sonst ein Restschleier stehen. */ .mcas-card.mcas-is-expanded .mcas-goldschleier { opacity: 0 !important; } /* Jan-Feedback (Test 10): Auf dem Geraet war nicht erkennbar, auf welchem Fall man sich befindet - die Ortsangabe oben ist zu klein. Grosse Ziffer rechts oben als sofort lesbarer Anker. aria-hidden, weil der Zaehler 01/04 die Information bereits vorlesbar bereitstellt. */ .mcas-nummer { position: absolute; top: min(6vw, 20px); right: min(6vw, 22px); font-family: 'Playfair Display', serif; font-weight: 400; font-size: 32px; line-height: 0.85; /* Jan-Entscheidung 31.07.: Versalziffern statt der Playfair-Standardziffern. Playfair setzt normalerweise Mediaevalziffern - dort sind 1 und 2 rund 28% niedriger als 3 und 4, und 3/4 reichen unter die Grundlinie. Im Kartenstapel wirkte die Nummer dadurch von Fall zu Fall unterschiedlich gross. Mit "lnum" stehen alle vier gleich hoch auf einer Linie. Zweistellig (01 bis 04) wie der Zaehler oben, damit beide dieselbe Sprache sprechen. Zwei Zeichen bei 32px nehmen etwa so viel Flaeche ein wie vorher die einzelne Ziffer bei 40px - gleiche Praesenz, ruhigere Wirkung, weil die Nummer in die Breite statt in die Hoehe geht. Feste Groesse statt vorher clamp(40px, 11vw, 54px): bei 54px waere "04" 46px breit und wuerde in die Ortsangabe ragen. Die Nummer waechst auf breiteren Geraeten also nicht mehr mit - Absicht. Bei Aenderung der Groesse muss das padding-right von .mcas-scroll-tag mitwandern (siehe dort). */ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; color: rgba(214,178,94,0.65); /* identisch zur Ortsangabe darunter */ pointer-events: none; user-select: none; } /* Nur die Ortsangabe weicht der Ziffer aus. Die Headline behaelt ihren gesetzten Umbruch - sie beginnt unterhalb der Ziffer. */ /* 60px = breiteste Nummer ("04" bei 32px sind 37px) plus der 22px Abstand zum Kartenrand, aufgerundet. Waechst die Nummer, muss dieser Wert mitwachsen. */ .mcas-scroll-tag { padding-right: 60px; } .mcas-scroll-tag { font-size: 10px; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: rgba(214,178,94,0.65); display: block; margin-bottom: 12px; font-family: 'Jost', sans-serif; } .mcas-scroll-claim { font-family: 'Playfair Display', serif; font-size: clamp(24px, 6vw, 32px); font-weight: 400; line-height: 1.25; color: var(--text-main); margin: 0 0 16px 0; } .mcas-scroll-signature { font-family: 'Playfair Display', serif; font-style: italic; color: var(--gold); font-size: clamp(18px, 4.5vw, 22px); display: block; margin-bottom: 24px; } /* Jan-Feedback (31.07.): Die senkrechte Goldkante am Fliesstext steht nur 16px innerhalb des goldenen Kartenrands - zwei Senkrechte so dicht nebeneinander lesen sich als Fehler, nicht als Gestaltung. Am Desktop bleibt sie: dort steht der Text in einer breiten Spalte ohne Rahmen und braucht den Halt. Nebeneffekt: 17px mehr Zeilenbreite auf der engen Karte. */ .mcas-scroll-narrative { font-size: 15px; font-weight: 300; line-height: 1.7; border-left: none; padding-left: 0; color: var(--text-main); font-family: 'Jost', sans-serif; } .mcas-scroll-narrative p { margin: 0 0 16px 0; } .mcas-scroll-narrative p:last-child { margin-bottom: 0; } /* ── VOLUMENANGABE (31.07.) ───────────────────────────────── Steht bewusst VOR dem beschreibenden Text: die Zahl gehoert zur Aussage, nicht zur Erlaeuterung. Schreibweise "> €20M" wie die aggregierte Zahl in der Erfahrung-Sektion (€150M+) - dadurch in beiden Sprachfassungen identisch und ohne Uebersetzung. Versalziffern, sonst faellt die Zahl optisch auseinander. */ .mcas-volumen { border-top: 1px solid rgba(214,178,94,0.22); padding-top: 14px; margin-bottom: 20px; } .mcas-volumen-label { display: block; font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(214,178,94,0.5); margin-bottom: 5px; } .mcas-volumen-wert { display: block; font-family: 'Playfair Display', serif; font-size: clamp(26px, 7.5vw, 34px); line-height: 1; color: var(--gold); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; } .mcas-full-content { display: none; } /* Jan-Feedback (Test 5): "Mehr erfahren" (eingeklappt) sah anders aus als die Leiste im ausgeklappten Zustand - jetzt dieselbe Eckenrundung (4px) wie die Actionbar, damit beide Zustaende optisch zusammengehoeren. */ .mcas-btn-expand { background: transparent; border: 1px solid var(--gold); color: var(--gold); font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; padding: 12px 20px; margin-top: 24px; border-radius: 4px; cursor: pointer; transition: background 0.3s, color 0.3s; pointer-events: none; opacity: 0; align-self: flex-start; } .mcas-btn-expand:active { background: var(--gold); color: var(--bg-anthracite); } /* Jan-Feedback (Test 1): "Naechster Fall" und "Weniger anzeigen" klebten uebereinander, weil sie unabhaengig voneinander positioniert waren (eine sticky am Bildschirmrand, die andere inline im Text). Jetzt eine einzige, gemeinsame Leiste, die als Ganzes in die offene Karte wandert und sticky am unteren Bildschirmrand bleibt - Buttons stehen darin nebeneinander in der Flucht. Pfeile (↑ / →) statt reiner Text fuer die Richtung. */ /* Jan-Feedback (Test 2): schmaler, buendig nebeneinander, farblich unterschieden (Weniger anzeigen = Schwarz, Naechster Fall = Anthrazit). Gemeinsamer abgerundeter Rahmen um beide Haelften (ueberstehende Ecken werden per overflow:hidden gekappt), statt zwei einzeln gerundeter Buttons. Gleich breite Haelften (50/50). */ /* Bugfix (Test 2): Die Leiste hatte eine eigene Breite passend zur Kartenbreite von AUSSEN (min(86vw,360px)) - sitzt aber innerhalb der gepolsterten Karte und war dadurch breiter als der verfuegbare Innenraum, ragte ueber den Kartenrand. 100% der Karten-Innenbreite behebt das und die fehlende Zentrierung gleichzeitig (kein Platz mehr zum Verrutschen). */ /* Jan-Feedback (Test 5): der Vorher-Ansatz gab JEDEM Button einen eigenen vollstaendigen Rahmen - an den Aussenecken lagen dann zwei Rundungen (Leiste + Button) fast, aber nicht ganz exakt uebereinander, was auf kleinen Displays wie ein Loch/Lichtspalt aussehen konnte. Jetzt genau EIN Rahmen auf der Leiste selbst, die Buttons haben gar keinen eigenen mehr - sauber, ohne Doppel-Rahmen-Risiko an den Ecken. */ .mcas-actionbar { position: sticky; bottom: 20px; z-index: 1000; display: flex; align-items: stretch; justify-content: center; width: 100%; margin-top: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s; border: 1px solid var(--gold); border-radius: 4px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.8), 0 0 15px rgba(214,178,94,0.2); } .mcas-actionbar.mcas-is-visible { opacity: 1; pointer-events: auto; } .mcas-btn-close-sticky, .mcas-btn-next-inline { border: none; color: var(--gold); font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; font-size: 10.5px; padding: 14px 8px; box-shadow: none; cursor: pointer; transition: background 0.3s, color 0.3s; flex: 1 1 50%; text-align: center; white-space: nowrap; } .mcas-btn-close-sticky:active, .mcas-btn-next-inline:active { background: var(--gold); color: var(--bg-anthracite); } .mcas-btn-close-sticky { order: 1; background: var(--bg-black); } /* Trennlinie zwischen den beiden Haelften, statt eines zweiten eigenen Randes am zweiten Button. */ .mcas-btn-next-inline { order: 2; background: var(--bg-anthracite); border-left: 1px solid rgba(214,178,94,0.4); } .mcas-btn-next-inline.mcas-is-hidden { display: none; } .mcas-card.mcas-is-expanded { background: var(--bg-anthracite); z-index: 999 !important; height: auto !important; position: relative !important; transform: none !important; filter: none !important; overflow: visible; margin-bottom: 80px; } @media (prefers-reduced-motion: reduce) { #cas-mobile { height: auto !important; padding: 80px 0; } .mcas-scrub-sticky { position: relative !important; height: auto !important; display: block !important; overflow: visible !important; } .mcas-scrub-meta { display: none !important; } .mcas-card-stack { height: auto !important; width: min(90vw, 400px) !important; margin: 0 auto; } .mcas-card { position: relative !important; height: auto !important; transform: none !important; filter: none !important; opacity: 1 !important; margin-bottom: 30px; box-shadow: none !important; display: block !important; } .mcas-full-content { display: block !important; } .mcas-btn-expand { display: none !important; } .mcas-actionbar { display: none !important; } /* Hier liegen alle vier Karten flach untereinander und sind gleichzeitig sichtbar. Ein Goldschleier waere dauerhaft im Bild und der Text dauerhaft schwer lesbar - also aus. */ .mcas-goldschleier { display: none !important; } } } /* ════════════════════════════════════════════════════════════════ MOBILE LESBARKEIT - KATEGORIEZEILEN, BUTTONS, ZAEHLER (Auftrag B, Jan-Entscheidung: Kategoriezeilen auf 13px) Befund: Nicht die Schriftgroesse war das Hauptproblem, sondern das Verhaeltnis. Die Sperrung stand in festen Pixeln - bei 11px Schrift und 6px Abstand ist der Zwischenraum mehr als halb so breit wie ein Buchstabe, die Woerter zerfallen in Einzelzeichen. Ueblich sind 0,15 bis 0,2 der Schriftgroesse. Deshalb hier durchgehend em statt px: die Sperrung traegt sich damit bei jeder Groesse selbst und bleibt auch bei spaeteren Aenderungen stimmig. Dieser Block steht bewusst am Dateiende und ausschliesslich im mobilen Bereich - die Desktop-Fassung bleibt unangetastet. ════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* --- Stufe 1: Ortsangaben und Kategoriezeilen -------------- */ /* vorher 10-13px bei 3-6px Sperrung */ .mcas-scroll-tag, .cases-label, .label, #lei .left-cat, .bento-title { font-size: 13px; letter-spacing: 0.2em; } /* --- Stufe 2: Buttons und CTAs ----------------------------- */ /* Tippziele - die muessen am besten lesbar sein */ .mcas-btn-expand, .mcas-btn-close-sticky, .mcas-btn-next-inline, #lei .right-cta, .minimal-submit { font-size: 13px; letter-spacing: 0.14em; } /* Sperrung auch im Hover-Zustand als Verhaeltnis, sonst springt die Zeile auf Touch-Geraeten nach dem Antippen. */ #lei .right-cta:hover { letter-spacing: 0.2em; } /* --- Stufe 3: Zaehler und Fusszeile ------------------------ */ .mcas-chapter-count, #lei .left-num, .legal-links a, .social-text-link { font-size: 12px; letter-spacing: 0.12em; } .social-text-link:hover { letter-spacing: 0.18em; } /* .lion-wrap .bell-label bleibt bei 15px - schon gross genug. */ } /* ══════════════════════════════════════════════════════════════════ v16.22: SICHTBARER FOKUS Bis hierher gab es genau zwei :focus-Regeln, beide am Kontaktfeld. Wer mit der Tabulatortaste durch die Seite geht, sah nicht, wo er steht - die Bedienung war formal moeglich und praktisch blind. :focus-visible statt :focus ist der entscheidende Unterschied: der Browser zeigt den Ring nur, wenn der Fokus per Tastatur gesetzt wurde. Bei Mausklick bleibt alles unveraendert, das Erscheinungsbild der Seite ist im Normalbetrieb nicht beruehrt. Gold statt des blauen Systemrings, weil der Ring sonst als Fremd- koerper liest. Zwei Pixel und vier Pixel Abstand sind das Minimum, das auf schwarzem Grund noch sicher erkennbar bleibt. Keine Animation - ein Fokusring muss sofort stehen, und prefers-reduced-motion ist damit ohne Zutun erfuellt. ══════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } /* Die Blaetterecke ist eine unsichtbare Flaeche von 120 x 220 Pixeln. Ein Ring um das ganze Rechteck waere ein Kasten mitten auf der Buchseite. Deshalb dort dezenter und eng am Rand. */ #lei .peel-trigger:focus-visible { outline-offset: -2px; border-radius: 4px; } /* ══════════════════════════════════════════════════════════════════ v16.23: Sicherheitsnetz fuer "inert". Alle Zielbrowser kennen das Attribut (Chrome 102+, Safari 15.5+, Firefox 112+). Sollte es dennoch einmal fehlen, greift wenigstens pointer-events - der Tabulator liefe dann weiter durch, die Maus aber nicht. Kein Ersatz, nur ein Netz. */ [inert] { pointer-events: none; }