/* ========================================================================= Leator — Basis + Trichter-Szene Farbskala ist final: nur diese vier Töne, keine weiteren Farbthemen. ========================================================================= */ /* ------------------------------------------------------------- Webfonts */ /* Die vier Schriften liegen auf DIESEM Server (assets/fonts/), nicht bei Google. Das ist kein Geschmack, sondern Datenschutz: eine eingebundene Google-Schrift laesst den Browser jedes Besuchers eine Verbindung zu fonts.gstatic.com aufbauen und dabei seine IP-Adresse an Google in den USA uebertragen — ein Drittlandtransfer, der in der Datenschutzerklaerung offengelegt und begruendet werden muesste. Lokal eingebunden entfaellt das ersatzlos: die Seite laedt ueberhaupt nichts von fremden Servern, und der entsprechende Satz in der Erklaerung ist wieder wahr. Geholt sind nur die Schnitte, die auch gebraucht werden, und davon nur die Latin-Untermengen — zusammen 150 KB, wovon ein deutscher Text nur die "latin"-Dateien anfasst (rund 90 KB). Die "latin-ext"-Dateien laedt der Browser nur, wenn ein Zeichen daraus vorkommt; sie liegen fuer Namen mit osteuropaeischer Diakritik bereit und kosten sonst nichts. Wer eine Schrift, einen Schnitt oder eine Sprache ergaenzt, holt die Datei nach — tools/schriften-holen.py macht genau das und schreibt diesen Block neu. Nicht wieder auf die Google-URL zurueckstellen, sonst ist der Punkt "keine Drittanbieter" in der Datenschutzerklaerung falsch. Raleway 400 und 500 zeigen auf dieselbe Datei: Google liefert die Schrift als variablen Schnitt aus, eine Datei traegt beide Gewichte. Die Angaben sind wortgleich uebernommen, damit der Browser exakt dasselbe waehlt wie vorher ueber Google. */ /* Raleway 400 — latin-ext */ @font-face{ font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/raleway-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Raleway 400 — latin */ @font-face{ font-family: 'Raleway'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/raleway-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Raleway 500 — latin-ext */ @font-face{ font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/raleway-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Raleway 500 — latin */ @font-face{ font-family: 'Raleway'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/raleway-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond 400 kursiv — latin-ext */ @font-face{ font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond 400 kursiv — latin */ @font-face{ font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Poiret One 400 — latin-ext */ @font-face{ font-family: 'Poiret One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poiret-one-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Poiret One 400 — latin */ @font-face{ font-family: 'Poiret One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/poiret-one-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Jost 200 — latin-ext */ @font-face{ font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('../assets/fonts/jost-200-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Jost 200 — latin */ @font-face{ font-family: 'Jost'; font-style: normal; font-weight: 200; font-display: swap; src: url('../assets/fonts/jost-200-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --creme: #F3E9DD; /* hellste Stufe — Hintergrund */ --hell: #E6D5C1; /* helle Stufe — Flächen, Trennlinien */ --akzent: #A67C52; /* mittlere Stufe — Akzent, Buttons */ --kontrast: #6B4E3D; /* dunkelste Stufe — Text */ --nav-h: 62px; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; } *, *::before, *::after{ box-sizing: border-box; } html{ background: var(--creme); } body{ margin: 0; /* KEIN eigener Hintergrund: html traegt ihn (oben) und faerbt damit die Leinwand. Am body waere er nur eine Wiederholung — und eine schaedliche: er wuerde die Hintergrundebene des Mittelteils (.flow-bg, z-index -1) zudecken. Negative z-index-Ebenen liegen unter den Hintergruenden der Elemente im Fluss, aber ueber der Leinwand. */ color: var(--kontrast); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3{ font-family: var(--serif); font-weight: 400; line-height: 1.14; letter-spacing: -0.012em; margin: 0; text-wrap: balance; } a{ color: inherit; } /* ------------------------------------------------------------------ Buttons */ .btn{ display: inline-block; background: var(--akzent); color: var(--creme); text-decoration: none; font-weight: 600; font-size: 16px; letter-spacing: 0.01em; padding: 14px 26px; border-radius: 999px; transition: background .22s ease, transform .22s ease; } /* Nur fuer Geraete mit echtem Zeigegeraet. Auf einem Touchscreen gibt es kein Schweben: der Browser setzt den Hover-Zustand beim Antippen und laesst ihn danach stehen, bis woanders hingetippt wird — der zuletzt benutzte Knopf sieht dann dauerhaft gedrueckt aus. Der Ersatz ist :active weiter unten. Fuer Maus und Trackpad aendert die Umhuellung nichts. */ @media (hover: hover){ .btn:hover{ background: var(--kontrast); transform: translateY(-1px); } } .btn-sm{ font-size: 14px; padding: 9px 18px; } .btn-lg{ font-size: 17px; padding: 17px 34px; } /* --------------------------------------------------------------- Navigation */ /* Von Anfang an sichtbar, schmal, ohne eigene Auftritts-Animation. */ .nav{ position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 52px); background: color-mix(in srgb, var(--creme) 84%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--kontrast) 10%, transparent); } .nav-brand{ font-family: var(--serif); font-size: 25px; letter-spacing: 0.04em; text-decoration: none; } .nav-right{ display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } .nav-right a{ font-size: 15px; text-decoration: none; opacity: .72; transition: opacity .2s ease; } @media (hover: hover){ .nav-right a:hover{ opacity: 1; } } .nav-right .btn{ opacity: 1; } /* ====================================================================== */ /* Trichter-Szene (drei Bloecke + fixe Buehne) */ /* Spacer geben nur Scrollstrecke (Hoehe von funnel.js), die fixe .stage */ /* haengt immer im Viewport und wird aus der Scrollposition angesteuert. */ /* ====================================================================== */ .scene-spacer{ position: relative; } .band-flow{ position: relative; } /* Fallback-Hoehen, damit der Mittelteil nicht vor dem ersten measure() kurz oben aufblitzt; funnel.js setzt die exakten Werte (EXPLODE_VH + Naht 1 bzw. Outro-Spacer). */ #sceneIntro{ height: 300vh; } #sceneOutro{ height: 180vh; } /* Fixe Buehne: immer im Viewport, ueber dem Dokumentinhalt (z-index 40, unter der Nav 100). pointer-events:none, damit im Mittelteil (Buehne unsichtbar) der Toggle im Fluss klickbar bleibt; interaktive Kinder (CTAs) setzen selbst wieder auto. Deckkraft steuert funnel.js als Master ueber alle Kinder — startet bei 0, wird beim ersten Frame hochgelerpt (Ersatz fuer .ready). */ .stage{ position: fixed; inset: 0; overflow: hidden; z-index: 40; pointer-events: none; opacity: 0; } /* ------------------------------------------------------------- Glas */ /* Eine Machart, zwei Orte: Hero und Outro. Bewusst als gemeinsame Klasse und nicht zweimal abgeschrieben — so bleiben Blur, Transparenz, Rand und Radius garantiert gleich, wenn an einer Stelle nachjustiert wird. */ :root{ --glass-radius: 26px; } .glass{ border-radius: var(--glass-radius); /* Helle Cremeglasfläche. Bewusst niedrig deckend — das Glas soll den Hintergrund durchscheinen lassen, nicht zudecken. */ background: color-mix(in srgb, var(--creme) 20%, transparent); /* -webkit- muss mit: ohne das Präfix ist der Effekt in Safari nicht da, und das Panel wäre dort eine fast unsichtbare Fläche. */ -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%); /* Ohne die helle Kante liest man es nur als Unschärfe, nicht als Glas. */ border: 1px solid color-mix(in srgb, #fff 42%, transparent); /* Weicher Schatten: das Panel soll vor dem Hintergrund schweben. */ box-shadow: 0 24px 60px -18px color-mix(in srgb, var(--kontrast) 34%, transparent), 0 2px 10px color-mix(in srgb, var(--kontrast) 10%, transparent); } /* -------------------------------------------------- Hero-Hintergrund */ /* Nur Phase 0/1. Unterste Ebene der Bühne, unter dem Trichter (z-index 2). Deckkraft UND Position setzt funnel.js: der Hintergrund wandert am Übergang nach oben aus dem Bild (statt nur zu faden), danach steht wieder die flache Cremefläche des body, der Rest der Sequenz bleibt also unverändert. */ .hero-bg{ position: absolute; inset: 0; z-index: 1; background: var(--creme) url("../assets/hero-bg.jpg") center / cover no-repeat; will-change: opacity, transform; } /* ------------------------------------------------- Outro-Hintergrund */ /* Gegenstück zu .hero-bg, gleiche Ebene und gleiche Machart. Die beiden überlappen zeitlich nie, deshalb brauchen sie keine eigene z-Ebene. Wandert beim Reassemble von unten herauf in Position (Gegenstück zur Hero-Bewegung), Deckkraft und Position kommen von funnel.js. */ .outro-bg{ position: absolute; inset: 0; z-index: 1; opacity: 0; background: var(--creme) url("../assets/outro-bg.jpg") center / cover no-repeat; will-change: opacity, transform; } /* -------------------------------------------- Hintergrund des Mittelteils */ /* Der Grund, auf dem die fuenf Stufen liegen. Bis hierher stand dort die flache Cremeflaeche: .hero-bg faehrt am Ende der Fokus-Phase nach oben aus dem Bild, .outro-bg kommt erst zum Schluss von unten herauf, und dazwischen war nichts. Liegt bewusst AUSSERHALB von .stage und nicht als dritte Ebene darin: die Deckkraft der Buehne ist im Mittelteil 0, dort waere die Ebene unsichtbar. z-index -1 statt 0: eine positionierte Ebene mit z-index 0 laege ueber dem Inhalt im Fluss und wuerde Karten und Baender zudecken. Mit -1 liegt sie darunter — und ueber der Leinwand, deren Farbe html setzt (siehe body). position:fixed und nicht background-attachment:fixed am body: das kippt auf iOS auf "scroll" um, und der Ausschnitt richtete sich dann nach der 10 000 px hohen Dokumenthoehe statt nach dem Bild. Cremefarbe darunter, damit die Flaeche schon steht, bevor das Bild da ist. */ .flow-bg{ position: fixed; inset: 0; z-index: -1; background: var(--creme) url("../assets/flow-bg.jpg") center / cover no-repeat; pointer-events: none; } /* ------------------------------------------------------------------- Hero */ /* .hero IST das Glaspanel — ein Element für Kicker, Headline, Subline und Button. Damit verschwindet der ganze Block über heroOp zeitgleich, ohne getrennte Timings. Ersetzt den früheren radialen Cremeschleier. */ .hero{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 84vw); padding: clamp(34px, 4.4vw, 52px) clamp(26px, 4vw, 54px) clamp(30px, 4vw, 46px); text-align: center; z-index: 6; will-change: transform, opacity; } .hero-kicker{ margin: 0 0 20px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; /* Auf dem Glaspanel kam --akzent nur auf 2,2:1 — für Text dieser Größe zu wenig. Dunkelster Ton der Palette statt Akzent; Größe, Laufweite und Position bleiben unverändert. */ color: var(--kontrast); } /* Die Hero-Headline ist die einzige Stelle mit einer eigenen Schrift. Gewuenscht war der Charakter der Kauf-Schrift "Santiago" (Sensatype) — sehr leicht, breit, luftig, einstoeckiges a. Poiret One ist die naechstliegende freie freie Entsprechung. Verglichen wurde mit Jost 300, Josefin Sans 300, Tenor Sans, Gruppo und Raleway 200 (tools/hero-schrift.html stellt die Proben nebeneinander); Poiret One traf Breite und Leichtigkeit am besten. Fallback ist die Sans der Seite und NICHT --serif: laedt die Schrift nicht, soll die Zeile leicht bleiben und nicht in einen anderen Charakter kippen. Die Laufweite wird dabei von negativ auf leicht positiv gedreht. Die -0.012em der geteilten h1/h2/h3-Regel sind fuer die Serifenschrift gerechnet; eine duenne Display-Sans zieht sich damit zusammen, und genau die Luft zwischen den Buchstaben macht bei dieser Schriftgattung den Auftritt (die Vorlage steht ebenfalls weit). */ .hero h1{ font-family: "Poiret One", var(--sans); font-size: clamp(34px, 4.0vw, 60px); letter-spacing: 0.01em; } .hero-sub{ margin: 24px auto 0; max-width: 61ch; /* Raleway wie der Fliesstext der fuenf Stufenkarten (.s1-static-sub und Geschwister). Der Hero-Satz hat dieselbe Aufgabe wie die dort: er erklaert die Zeile darueber. Vorher lief er in der System-Sans, was ihn von den Karten abgesetzt hat, ohne dass es dafuer einen Grund gab. */ font-family: "Raleway", var(--sans); font-size: 17.5px; /* Auf der flachen Cremefläche war .82 unproblematisch; auf dem Glas fiel der Kontrast damit auf 2,4:1 und lag unter den 4,5:1, die Fließtext braucht. Voller Kontrastton statt aufgehellt. */ } .hero-actions{ margin-top: 36px; display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; } /* ------------------------------------ Die zwei Woerter, die den Trichter flankieren */ /* "UNSER" (links) und "SERVICE" (rechts), weiss, sehr gross, HINTER dem Trichter (z-index 1) auf seiner Mittelhoehe. funnel.js blendet sie ein, wenn das Hero-Panel das Wort abgibt; danach stehen sie voll da, ueber den ganzen Explode. Sobald der letzte Abteil geloest ist (Ende der Explode-Phase), fahren sie als Teil der Scrollbewegung nach oben aus dem Bild (--leistung-up) - kein Verblassen. Hier steht nur, wie sie aussehen; das Timing steht in funnel.js. Layout: die Box laeuft ueber die volle Breite, die beiden Woerter werden per space-between nach aussen geschoben, der Trichter steht mittig dazwischen (und davor). Kein einziger Wert haengt an der Trichterbreite - die Woerter stehen einfach am Rand, der Trichter fuellt die Mitte. Bei breiten Fenstern (>= ~1280) stehen beide frei neben ihm; wird das Fenster schmaler, wird der Trichter relativ breiter und "Service" (das laengere Wort) taucht mit seiner Innenkante ein Stueck hinter ihn - unkritisch, es liegt ja ohnehin dahinter. Zur Groesse: 6.5vw bei Jost 200 / 0.10em Laufweite. Groesser wuerde "Service" auf mittleren Breiten zu weit hinter den Trichter schieben; kleiner verliert die Zeile an Praesenz. white-space:nowrap pro Wort (siehe .l-wort): jedes Wort bleibt ein Block, keins bricht um. */ .leistung{ position: absolute; left: 50%; top: 50%; /* HINTER dem Trichter (z-index 1, der Trichter liegt auf 2), auf seiner Mittelhoehe. Kein Verblassen: --leistung-up faehrt die Woerter beim Scrollen nach oben aus dem Bild (funnel.js), sie sind also Teil der Scrollbewegung und verschwinden ueber die obere Kante statt zu faden. */ transform: translate(-50%, calc(-50% - var(--leistung-up, 0px))); z-index: 1; margin: 0; /* "Unser" links, "Service" rechts, der Trichter mittig dazwischen (und davor). Trick fuer symmetrische Innenkanten UNABHAENGIG von der Wortbreite: jedes Wort bekommt eine halbe Zeile (flex:1), "Unser" rechtsbuendig, "Service" linksbuendig (siehe .l-wort). Dazwischen eine feste Luecke (gap), die etwas breiter ist als der Trichter an seiner breitesten Stelle (oberer Rand). Die Innenkanten liegen damit exakt bei Mitte +/- gap/2 - egal wie unterschiedlich lang die Woerter sind. (Mit justify-content:center + gap kippte das: die breitere "Service" schob beide Innenkanten nach links, sie ueberlappte den Trichter.) 41vw ist an der breitesten sichtbaren Trichterphase (Fokus ~0.78, Box ~570 px bei 1490) eingemessen und per Screenshot geprueft: ~21 px Luft links UND rechts (symmetrisch). Bei 1280 sind es ~9 px; darunter taucht die Innenkante hinter den Trichter - unkritisch, der Text liegt ja dahinter. Groesser = mehr Abstand, kleiner = die Innenkanten kuessen frueher den Rand. */ width: 100%; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 41vw; font-family: "Jost", var(--sans); font-weight: 200; font-size: 6.5vw; line-height: 1.06; letter-spacing: 0.10em; text-transform: uppercase; color: #fff; /* Ein dunkler Schein hinter der Schrift. Kein Schatten im ueblichen Sinn - er hat keinen Versatz, man sieht ihn nicht als Hof; er senkt nur den Grund unmittelbar hinter den Buchstaben ab. Gebraucht wird er, weil der Stoff im Hintergrund nach rechts sehr hell wird. Gemessen am gerenderten Bild, Grund im Umkreis von 6 px um die Striche: links rechts ohne Schein 3,23 1,85 weit und weich 3,64 2,11 (38 px Radius) eng und kraeftig 4,08 2,48 (10 px Radius) <- steht hier Der Radius ist dabei der entscheidende Wert, nicht die Deckkraft: bei duennen Strichen verteilt ein grosser Radius dieselbe Farbe auf so viel Flaeche, dass davor kaum etwas ankommt. Eng gesetzt wirkt er, ohne als Hof aufzufallen. Die 3,0 werden auf der hellsten Stelle rechts trotzdem nicht erreicht - dazu muesste der Grund selbst abgedunkelt werden, siehe Notiz beim Nutzer. Die Schriftfarbe bleibt reines Weiss. */ text-shadow: 0 0 10px rgba(75, 52, 38, .90), 0 0 26px rgba(75, 52, 38, .55); opacity: 0; pointer-events: none; will-change: opacity, transform; } /* Jedes Wort bekommt eine halbe Zeile (flex:1), damit die Innenkanten symmetrisch bei Mitte +/- gap/2 liegen - unabhaengig davon, dass "Service" breiter ist als "Unser". "Unser" rechtsbuendig (Innenkante rechts), "Service" linksbuendig (Innenkante links). nowrap: keins bricht um. min-width:0, damit die flex:1-Haelften wirklich gleich breit werden und nicht an der Wortbreite haengen. */ .leistung .l-wort{ flex: 1 1 0; min-width: 0; white-space: nowrap; } .leistung .l-wort:first-child{ text-align: right; } .leistung .l-wort:last-child{ text-align: left; } /* --- Telefon: die Woerter uebereinander --------------------------------- Das Nebeneinander lebt davon, dass links und rechts des Trichters Platz ist. Auf 390 px gibt es den nicht: nachgemessen bleiben von "UNSER" nur das U und von "SERVICE" nur das ICE stehen, alles dazwischen liegt hinter dem Trichter. Also uebereinander. Gestapelt reicht die Mittellage aber nicht mehr: dort ist der Trichter am breitesten und deckt beide Zeilen vollstaendig zu (ausprobiert, es blieben zwei weisse Splitter an den Raendern). Nach vorne holen half auch nicht — die Frame-Sequenz liegt darueber. Deshalb `top: 78%`: die Zeilen stehen unter dem Trichter, dort wo er sich zur Tuelle verjuengt und seit dem Breitendeckel ohnehin Platz frei wird. Der Auslauf greift dabei leicht in "UNSER" hinein, was die beiden zusammenbindet, statt sie zu trennen. Die Groesse steigt kraeftig mit (6.5vw -> 15vw): gestapelt hat jede Zeile die volle Breite statt einer knappen Haelfte, und bei 6.5vw waeren die Woerter auf dem Telefon 25 px hoch — als Bildmarke zu wenig. Nur unterhalb 640 px. Der Desktop laeuft unveraendert im Nebeneinander. */ @media (max-width: 640px){ .leistung{ flex-direction: column; align-items: center; /* Ueber die volle Bildhoehe aufgespannt und die beiden Woerter an die Enden geschoben: "UNSER" steht damit ueber dem Trichter, "SERVICE" darunter. 78vh ist gemessen, nicht geschaetzt — der Trichter ist auf dem Telefon rund 385 px hoch und mittig, bei 844 px Bildhoehe bleiben oben und unten je rund 60 px, in denen eine Zeile Platz hat. Groesser, und die Woerter stossen an Navigation und Bildkante; kleiner, und sie ueberlappen den Trichter wieder. */ height: 78vh; justify-content: space-between; gap: 0; font-size: 15vw; top: 50%; } .leistung .l-wort{ flex: 0 0 auto; } .leistung .l-wort:first-child, .leistung .l-wort:last-child{ text-align: center; } /* SERVICE eine Spur hoeher. Nachgemessen bei 390x844 stand die Unterkante auf 751 px — nur 93 px ueber dem Bildrand, und auf dem Geraet liegt in diesem Streifen die Adressleiste des Browsers. Das Wort stand damit praktisch auf ihr auf. 4vh (34 px) hoeher: Unterkante 717, Abstand zum Trichterauslauf (617) 38 px — also fast derselbe Abstand, den UNSER nach oben zum Trichter hat (72 px oben, aber dort ist der Trichter am breitesten und UNSER steht frei). Bewusst nur das zweite Wort und nicht ueber die Blockhoehe geloest: `height` bewegt beide Zeilen gegeneinander, UNSER sitzt aber richtig. */ .leistung .l-wort:last-child{ transform: translateY(-4vh); } } /* Kein schmale-Fenster-Sonderfall mehr noetig: die Woerter flankieren den Trichter links und rechts und stehen damit ohnehin frei neben ihm - auf jeder Breite. (Bei sehr schmalen Fenstern ist der Trichter breiter als das Fenster; dann ruecken die Woerter nah an die Raender, bleiben aber lesbar.) */ /* ---------------------------------------------------------------- Trichter */ /* Der geschlossene Trichter. Sein Zuschnitt stammt aus derselben Box wie die gemessene Ring-Geometrie, deshalb übernehmen die Bänder im Explode seine Silhouette ohne Versatz. */ .funnel{ position: absolute; left: 0; top: 0; z-index: 2; will-change: transform, opacity, filter; } .funnel-img{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ----------------------------------------------------------- Frame-Sequenz */ /* Liegt zwischen dem geschlossenen Trichter (z-index 2) und den Bändern (4). Größe und Lage setzt funnel.js so, dass der letzte Frame deckungsgleich auf Band 1 in Banner-Position liegt. */ .funnel-video{ position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; transform-origin: 0 0; /* funnel.js positioniert über translate + scale */ will-change: opacity, transform; } /* -------------------------------------------- Beschriftung der Ringe */ /* Liegt über der Sequenz. Lage, Größe und Deckkraft setzt funnel.js je Frame aus der gemessenen Ring-Spur; hier steht nur, wie sie aussieht. */ .ring-labels{ position: absolute; inset: 0; z-index: 5; pointer-events: none; } .ring-label{ position: absolute; left: 0; top: 0; font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; color: var(--kontrast); white-space: nowrap; opacity: 0; will-change: transform, opacity; } /* ------------------------------------------------------------------ Bänder */ .bands{ position: absolute; inset: 0; z-index: 4; pointer-events: none; } .band{ position: absolute; left: 0; top: 0; will-change: transform, opacity; } /* Nur dieses Element wird skaliert — Text bleibt dadurch unverzerrt. */ .band-shape{ display: block; width: 100%; height: 100%; will-change: transform; } .band-label{ position: absolute; left: 0; width: 100%; text-align: center; font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; color: var(--kontrast); white-space: nowrap; will-change: opacity; } /* -------------------------------------------- Mittelteil: Fluss-Sektionen */ /* Jede Sektion ~1 Viewport; funnel.js setzt die genaue Hoehe (SECTION_VH), hier der Fallback. Band bzw. Karte ist bei ~23vh / mittig verankert. */ /* Hoehe kommt von funnel.js in px. Hier nur der Startwert fuer das erste Bild — bewusst height und NICHT min-height: min-height wuerde die von JS gesetzte Hoehe ueberstimmen, sobald 100vh und innerHeight auseinanderlaufen (Headless-Chrome, mobile Adressleiste). Dann saessen die Dokument-Baender tiefer als die fixe Buehne rechnet, und Naht 1 traefe nicht mehr. */ .flow-section{ position: relative; height: 100vh; } /* Sektion 1 braucht keine eigene Regel mehr: ihre Karte liegt wie alle anderen absolut in der Sektion, funnel.js setzt die Lage. Vorher zentrierte hier ein flex-Container — dann haette aber die Sektionshoehe die Kartenlage mitbestimmt, und genau die muss frei sein, damit der Abstand zum naechsten Banner ueberall gleich sein kann. */ /* Baender 2-5: einfache Platzhalter-Boxen (Bild + Label + Caption) an der Banner-Position. Breite, Bandmitte und Beschriftungslage setzt funnel.js in px — und zwar mit denselben Formeln wie fuer die Baender der Sequenz. Das ist nicht Kosmetik: an Naht 1 loest das Sequenz-Band 1 das Dokument-Band ab, und die Staffelung aller Stufen haengt an genau diesen Formeln — laufen die beiden Seiten auseinander, stimmen Abstaende und Ruhelagen nicht mehr. Die Werte hier sind der Startwert fuers erste Bild. */ .flow-band{ position: absolute; top: 23vh; left: 50%; transform: translate(-50%, -50%); width: min(900px, 82vw); } .flow-band-img{ display: block; width: 100%; height: auto; } /* Bis auf den Namen identisch mit .band-label — dieselbe Lage, dieselbe Groesse, gesetzt von funnel.js. */ .flow-band-label{ position: absolute; left: 0; top: 0; width: 100%; text-align: center; font-family: var(--serif); font-weight: 400; letter-spacing: 0.01em; color: var(--kontrast); white-space: nowrap; } /* ------------------------------------------------- Stufe-1-Karte + Toggle */ /* Grosse, nahezu bildschirmfuellende Glaskarte (wie das Nike-Referenzpanel), jetzt im Dokumentfluss (Sektion 1 des Mittelteils). Nutzt .glass unverändert (Blur, Radius, Rand) — nur der Hintergrund wechselt im Video-Zustand auf die Akzentfläche. Toggle sitzt oben mittig, Rest der Karte bleibt bewusst leer. */ /* Gemeinsames Mass aller Stufenkarten. Die Karten der Stufen 2-5 muessen dieselbe Groesse haben wie die der Stufe 1 — an ihr haengt die Staffelung: funnel.js rechnet Abstand zum Banner und Ruhelage aus der gemessenen Kartenhoehe, und die Sektionen 2-5 sind genau so hoch, dass die Karte dort dieselbe Ruhelage erreicht wie die Stufe-1-Karte. */ .stage1-card, .flow-card{ width: min(1100px, 92vw); height: min(82vh, 820px); padding: clamp(38px, 6.5vh, 76px) clamp(24px, 4vw, 48px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } /* Alle Stufenkarten liegen absolut in ihrer Sektion — die Lage setzt funnel.js in px, damit sie an denselben Formeln haengt wie die Naehte und nicht an vh-Werten im Stylesheet. Inhalt der Karten 2-5 kommt spaeter, deshalb leer. */ .stage1-card, .flow-card{ position: absolute; left: 50%; transform: translateX(-50%); } /* Inhaltsflaeche einer Stufenkarte. Fuellt den Rest der Karte unter dem, was oben fest sitzt (bei Stufe 1 der Toggle), und zentriert ihren Inhalt. Steht hier bei der Kartengeometrie und nicht in einem Stufen-Abschnitt, weil Stufe 1 und 2 sie teilen: die Karten sind gleich gross und ruhen an derselben Stelle im Bild — begaenne ihr Inhalt jeweils woanders, fiele beim Scrollen von Stufe zu Stufe der Sprung auf. min-height:0 ist Pflicht, nicht Kosmetik: die Kartenhoehe ist fest (min(82vh,820px)) und funnel.js liest sie fuer die Stufen-Staffelung — der Slot darf sie also nicht ueber flex sprengen. */ .card-slot{ flex: 1 1 auto; width: 100%; min-height: 0; display: flex; /* Oben ausgerichtet und nicht mittig: der Inhalt beginnt dicht unter der Kartenoberkante. */ align-items: flex-start; justify-content: center; } /* Karten 2 und 4 stapeln, statt eine zentrierte Spaltengruppe zu tragen: oben die Ueberschrift quer ueber die ganze Karte, darunter erst das Zwei-Spalten- Layout. justify-content muss dabei auf flex-start, weil die Hauptachse jetzt senkrecht laeuft — sonst zentrierte die geerbte Regel den Inhalt vertikal statt ihn oben beginnen zu lassen. align-items:center haelt Ueberschrift und Spaltengruppe waagerecht mittig. */ .card-slot--stack{ flex-direction: column; align-items: center; justify-content: flex-start; } .stage1-card{ /* Sanfter Farbwechsel der Kartenfläche beim Umschalten auf Video. */ transition: background .34s ease; /* Der Toggle sitzt näher an der Oberkante als der allgemeine Innenabstand der Karten vorgibt. Bewusst nur hier und nicht in der gemeinsamen Regel: der Innenabstand der Karten 2-5 soll für den späteren Inhalt gelten und nicht davon abhängen, wo dieser eine Knopf steht. */ padding-top: clamp(24px, 4vh, 48px); } /* Video-Zustand: die Karte nimmt einen warmen Akzentton an — getönt, nicht flächig gefärbt. Die Deckung ist nicht Geschmack: der Schein des Toggles ist im Video-Zustand selbst #A67C52 (Nutzer-Vorgabe), und auf einer satt akzentgefärbten Fläche wäre er unsichtbar. Bei dieser Tönung trägt er, und die Beschriftung bleibt im dunklen Ton lesbar. */ .stage1-card[data-state="video"]{ background: color-mix(in srgb, var(--akzent) 20%, transparent); } /* Im Video-Zustand traegt die Pille etwas heller auf. Nicht Geschmack: die Beschriftung steht darauf im dunklen Ton, und auf der getoenten Karte mit dem Akzentschein dahinter kam sie sonst nur auf 3,0:1. Gemessen an der gerenderten Seite: mit diesem Auftrag 4,6:1 (gefordert sind 4,5:1). */ .s1-toggle[data-state="video"] .s1-track{ background: color-mix(in srgb, #fff 36%, transparent); } /* Pill-Toggle im Glas-Look (Machart der Referenz-Vorlage): eine Glaskugel gleitet von links (Static) nach rechts (Video), traegt das Symbol des aktiven Zustands und ist GROESSER als die Pille — sie ragt oben, unten und ueber deren Ende hinaus. Genau das macht den Effekt: die Kugel liegt sichtbar VOR der Flaeche, statt in ihr zu sitzen. Deshalb ist der Knopf nur die Buehne (ohne eigene Flaeche), und Schein, Pille, Beschriftung und Kugel sind eigene Ebenen in dieser Reihenfolge. Farben sind die Palettentoene, keine neuen: der Schein hinter der Pille wechselt mit dem Zustand die Seite der Skala, damit er auf beiden Kartenhintergruenden traegt (Akzent auf der hellen Karte, Hell auf der akzentgefaerbten). */ .s1-toggle{ /* Alle vier Masse haengen zusammen und wurden gemeinsam um den Faktor 0,9 verkleinert (vorher 44/60/18/190). Wer weiter aendert, sollte sie wieder gemeinsam anfassen — die Verhaeltnisse untereinander tragen den Effekt, nicht die absoluten Werte. Beim Verkleinern gehoert das scale des Filters #s1-liquid in index.html dazu: es ist an den Kugelradius gebunden. */ --h: 40px; /* Hoehe der Pille */ --bubble: 54px; /* Durchmesser der Glaskugel (1.35 x Pillenhoehe) */ /* Ueberstand ueber das linke Pillenende. Nicht frei gewaehlt: durch die Kugel sieht man das runde Ende der Pille (in der Vorlage ist das der Brechungseffekt). Liegen beide Mittelpunkte uebereinander, liest es als konzentrischer Doppelkreis; erst ein Versatz macht daraus den Bogen, der durch die Kugel laeuft. Gerechnet in Koordinaten des Knopfes: die Pille laeuft von 0 bis --w, ihr linker Endbogen hat den Mittelpunkt bei h/2 = 20 px. Die Kugel sitzt bei left: -over, ihr Mittelpunkt also bei (bubble/2 - over) = 11 px. Bleiben 9 px Versatz, ein Drittel des Kugelradius — dasselbe Verhaeltnis wie in der Vorlage. */ --over: 16px; --w: 171px; /* Weg der Kugel: Pillenbreite minus ihr Durchmesser, plus der Ueberstand auf beiden Seiten. */ --slide: calc(var(--w) - var(--bubble) + 2 * var(--over)); /* Nutzer-Vorgabe: Static hell, Video Akzent. Der helle Schein auf der cremefarbenen Karte ist zwangsläufig zurückhaltend — zwei Stufen der Palette liegen dort nah beieinander. Deshalb steht die Deckkraft des Scheins höher als der Akzentschein sie bräuchte. */ --glow: var(--hell); position: relative; width: var(--w); height: var(--bubble); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; } .s1-toggle:focus-visible{ outline: 2px solid color-mix(in srgb, var(--akzent) 70%, transparent); outline-offset: 6px; border-radius: 999px; } /* Der farbige Schein hinter der Pille — in der Vorlage der lila Blur. Eigene Ebene und nicht als box-shadow der Pille, weil er weicher und groesser sein muss als deren Kontur und sonst an ihrem Rand abgeschnitten wirkte. */ .s1-glow{ position: absolute; /* Reicht bis unter den Ueberstand der Kugel: dort soll sie im Licht stehen, nicht daneben. */ left: calc(-1 * var(--over)); right: calc(-1 * var(--over)); top: 50%; height: var(--h); transform: translateY(-50%); border-radius: 999px; background: var(--glow); filter: blur(20px); /* Deckkraft an der Lesbarkeit ausgerichtet, nicht am Effekt: der Schein liegt hinter der ganzen Pille, also auch unter der Beschriftung, und jeder Punkt mehr drueckt deren Kontrast. Bei .35 traegt er sichtbar und die Schrift bleibt ueber 4,5:1. */ opacity: .35; transition: background .34s ease, opacity .34s ease; } /* Die Pille selbst: frostiges Glas. Bewusst KEIN backdrop-filter — Glas auf Glas (die Karte hat schon einen) wuerde ueber die ganze Breite truebe. Heller Rand und Innenglanz tragen den Glaseindruck. */ /* Gemeinsame Optik von Pille und ihrer Kopie in der Kugel. Beide muessen denselben Auftrag haben, sonst faellt die gebrochene Kontur als Fremdkoerper auf: was durch das Glas zu sehen ist, ist DIESELBE Pille, nur verbogen. Dezentes Milchglas wie die Light/Dark-Vorlage: durchscheinend, NICHT weiss. Die Pille nimmt den Ton der Karte auf und traegt nur einen Reflex oben und einen Schatten unten. Die Lesbarkeit der Labels loest die zustandsabhaengige Textfarbe — nicht ein deckend heller Auftrag. Der Rand ist bewusst kraeftiger als die Flaeche: er ist die Linie, aus der die Linse den Haken formt. Ist er zu blass, hat die Brechung nichts zu verbiegen und die Kugel wirkt leer (so war es vorher). */ .s1-track, .s1-lens-track{ border-radius: 999px; background: color-mix(in srgb, #fff 22%, transparent); border: 1.5px solid color-mix(in srgb, #fff 66%, transparent); box-shadow: inset 0 1.5px 1px color-mix(in srgb, #fff 52%, transparent), inset 0 -5px 10px -6px color-mix(in srgb, var(--kontrast) 24%, transparent); } /* Zweite, eingerueckte Kontur — in der Vorlage laeuft im Pillenrand eine feine Innenlinie mit. Durch die Kugel gesehen wird daraus die zweite Kurve neben der Aussenkante; erst zu zweit lesen sie als Flusslinien und nicht als einzelner Strich. */ .s1-track::after, .s1-lens-track::after{ content: ""; position: absolute; inset: 4px; border-radius: 999px; border: 1px solid color-mix(in srgb, #fff 40%, transparent); pointer-events: none; } .s1-track{ position: absolute; left: 0; right: 0; top: 50%; height: var(--h); transform: translateY(-50%); /* Der backdrop-filter ist hier vertretbar, wo er es frueher nicht war: die Karte dahinter ist flaechig, die Pille wird davon glasig statt truebe. */ -webkit-backdrop-filter: blur(7px) saturate(1.2); backdrop-filter: blur(7px) saturate(1.2); /* Aussenschatten nur am Original: an der Kopie in der Kugel wuerde er als Schleier ueber dem Glas liegen. */ box-shadow: inset 0 1.5px 1px color-mix(in srgb, #fff 52%, transparent), inset 0 -5px 10px -6px color-mix(in srgb, var(--kontrast) 24%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--kontrast) 40%, transparent); } /* Modus-Label steht auf der der Kugel gegenueberliegenden Seite (wie in der Vorlage), es ist immer nur das aktive sichtbar: Kugel links -> "Static" rechts, Kugel rechts -> "Video" links. */ .s1-mode{ position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--kontrast); white-space: nowrap; opacity: 0; transition: opacity .28s ease, color .34s ease; pointer-events: none; } /* Beide Beschriftungen im dunklen Ton. Die Karte bleibt in beiden Zuständen hell (der Video-Zustand ist nur noch getönt), ein helles Label käme darauf nicht auf den geforderten Kontrast. */ .s1-mode-static{ right: 23px; } .s1-mode-video{ left: 23px; } .s1-toggle[data-state="static"] .s1-mode-static{ opacity: .92; } .s1-toggle[data-state="video"] .s1-mode-video{ opacity: .96; } /* Die Glaskugel. Sie besteht aus wenig: einem Lichtfleck oben links, einer harten hellen Kante, dem Spitzlicht (::after) — und dem, was durch sie hindurch zu sehen ist. Mehr vertraegt sie nicht, siehe die Hinweise am Verlauf und am fehlenden box-shadow weiter unten. Der leichte backdrop-filter ist hier vertretbar, wo er es fuer die Pille nicht waere: die Kugel ist klein, und was hinter ihr liegt (Karte, Pillenende) ist nahezu flaechig — sie wird davon glasig, nicht truebe. */ .s1-bubble{ position: absolute; top: 50%; left: calc(-1 * var(--over)); width: var(--bubble); height: var(--bubble); margin-top: calc(var(--bubble) / -2); border-radius: 50%; display: grid; place-items: center; /* Die MITTE bleibt fast klar — dort sieht man Karte und Pillenende durch —, hell wird es nur an der Lichtseite oben links und unten als Streulicht. */ /* Der Glaskoerper steckt komplett in den Verlaeufen, NICHT in inset-Schatten: die zeichnen bei einem Kreis dieser Groesse ihre eigene Kante nach und lassen die Kugel als zwei ineinander liegende Kreise lesen (nachgemessen an einer Fassung ohne box-shadow — dort war der Effekt weg). 1. Lichtseite oben links, sonst klar. 2. Ein Hauch Waerme unten rechts als Gegenlicht. Auch ein RINGfoermiger Verlauf ("Licht sammelt sich am Rand") faellt aus: seine Farbstopps zeichnen bei diesem Durchmesser wieder einen zweiten Kreis. Die Kante macht der Rahmen — schmal, hell, hart. */ background: radial-gradient(72% 72% at 32% 24%, color-mix(in srgb, #fff 30%, transparent), transparent 48%), radial-gradient(60% 60% at 74% 84%, color-mix(in srgb, #fff 7%, transparent), transparent 56%); /* Mattierung des echten Hintergrunds. Der Wert ist nicht Geschmack: er muss die UNgebrochene Pillenkante, die hinter der Kugel durchlaeuft, unkenntlich machen — sonst stuende sie als gerader Strich neben der gebrochenen Kopie und die Kugel zeigte zwei Pillen. Kein url(#s1-liquid) mehr hier: feImage liefert im backdrop-filter nichts (siehe Kommentar in index.html), der Filter hat den Hintergrund bloss um -scale/2 gleichmaessig verschoben. */ -webkit-backdrop-filter: blur(5px) saturate(1.3) brightness(1.05); backdrop-filter: blur(5px) saturate(1.3) brightness(1.05); border: 1px solid color-mix(in srgb, #fff 46%, transparent); /* Weiterhin KEIN box-shadow: hinter der durchsichtigen Kugel gezeichnet, schiene er durch sie hindurch und legte einen zweiten Kreis in ihre Mitte. Praesenz kommt vom Schein hinter der Pille, dem Reflexrand (::before) und dem Spitzlicht (::after). */ /* Kein CSS-Transition auf transform: die Feder-Animation (funnel.js, WAAPI) steuert die Bewegung samt Ueberschwinger und Stretch. Im Ruhezustand setzt die data-state-Regel die Endlage, dorthin faellt die Kugel nach der Animation zurueck (fill:none). transform-origin mittig, damit der Stretch symmetrisch ist. */ transform-origin: center center; transition: none; } /* --- Was durch die Kugel zu sehen ist ------------------------------------ Drei Ebenen, weil jede genau eine Aufgabe hat: .s1-lens beschneidet auf die Kreisflaeche (sonst zoege die Verschiebung Bildinhalt ueber den Kugelrand hinaus), .s1-lens-warp traegt den Linsenfilter (Filterregion = diese Box, damit die Map deckungsgleich auf der Kugel liegt), .s1-lens-track die Kopie der Pille, an ihrer echten Stelle. Reihenfolge in der Kugel: Verlaeufe (Kugelhintergrund) -> Linse -> Rand und Spitzlicht -> Symbol. Die Glasoberflaeche liegt also ueber dem Bild, das durch sie hindurch zu sehen ist. */ .s1-lens{ position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; pointer-events: none; } .s1-lens-warp{ position: absolute; inset: 0; filter: url(#s1-liquid); } /* Steht im Ruhezustand exakt ueber der echten Pille: die Kugel sitzt um --over links von der Pille, die Kopie also um --over rechts vom Kugelrand. Das eine Pixel ist der Kugelrahmen, um den die Innenflaeche eingerueckt ist. */ .s1-lens-track{ position: absolute; left: calc(var(--over) - 1px); top: calc(50% - var(--h) / 2); width: var(--w); height: var(--h); } /* Reflexrand: ein 1px-Ring als Kegelverlauf, oben links hell, unten gedaempft — die harte Glaskante der Vorlage. Als maskierter Ring, damit nur der Rand gefaerbt ist und die Mitte klar bleibt (kein zweiter Kreis). */ .s1-bubble::before{ content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; padding: 1.25px; background: conic-gradient(from 216deg, color-mix(in srgb, #fff 88%, transparent), color-mix(in srgb, #fff 22%, transparent) 34%, color-mix(in srgb, #fff 8%, transparent) 54%, color-mix(in srgb, #fff 34%, transparent) 74%, color-mix(in srgb, #fff 88%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* Spitzlicht oben links, weich und klein — ohne das liest die Kugel als Scheibe. */ .s1-bubble::after{ content: ""; position: absolute; z-index: 2; left: 17%; top: 11%; width: 32%; height: 22%; border-radius: 50%; background: color-mix(in srgb, #fff 90%, transparent); filter: blur(3.5px); transform: rotate(-16deg); pointer-events: none; } /* Symbol in der Kugel: Foto fuer Static, Video fuer Video. Immer nur eines sichtbar, es wechselt mit dem Zustand. */ .s1-icon{ position: absolute; z-index: 3; width: 40%; height: 40%; color: var(--kontrast); opacity: 0; transition: opacity .26s ease; } .s1-toggle[data-state="static"] .s1-icon-static{ opacity: .92; } .s1-toggle[data-state="video"] .s1-icon-video{ opacity: .92; } /* Umgeschaltet: Kugel nach rechts, Schein wechselt auf den Akzentton. */ .s1-toggle[data-state="video"]{ --glow: var(--akzent); } .s1-toggle[data-state="video"] .s1-bubble{ transform: translateX(var(--slide)); } /* Gegenversatz: die Kugel wandert um --slide nach rechts, die Kopie in ihr um denselben Betrag nach links — zusammen steht sie still, genau ueber der echten Pille. Waehrend der Feder uebernimmt das funnel.js (dort geteilt durch den Stretch, damit die Kugelmitte trotz Dehnung stimmt). */ .s1-toggle[data-state="video"] .s1-lens-track{ transform: translateX(calc(-1 * var(--slide))); } /* Schmale Viewports: Toggle verkleinern, damit er in die Karte passt. */ @media (max-width: 460px){ /* Ueberstand mitverkleinert, aber so, dass der Versatz zwischen Kugelmittelpunkt und Pillenende erhalten bleibt (siehe --over oben). */ .s1-toggle{ --h: 36px; --bubble: 48px; --over: 14px; --w: 158px; } .s1-mode{ font-size: 13px; } .s1-mode-static{ right: 20px; } .s1-mode-video{ left: 20px; } } /* --------------------------------------- Stufe-1-Karte: Static-Inhalt */ /* Zweispaltiger Inhalt der Karte im Static-Zustand: links Headline + Text, rechts der Sneak-Peek einer real laufenden Anzeige. Nur hier sichtbar — im Video-Zustand blendet die Regel weiter unten den ganzen Slot aus, die Karte ist dort (vorerst) leer. Minimalismus wie in der Referenz: viel Luft, ruhige Bild/Text-Teilung, kein Seitenindex, keine Blaetter-Navigation. */ .s1-static, .s2-cols, .s3-cols, .s4-cols, .s5-cols{ display: flex; /* Beide Spalten oben ausgerichtet: Headline und Label beginnen auf gleicher Hoehe, das Bild darf darunter weiter nach unten laufen. */ align-items: flex-start; gap: clamp(30px, 4.5vw, 72px); width: 100%; /* Bewusst schmaler als die Karte: der Weissraum links und rechts traegt den ruhigen Eindruck der Referenz. */ max-width: 900px; /* Etwas Luft unter dem Toggle, damit die Headline nicht dagegenstoesst. */ margin-top: clamp(20px, 3vh, 40px); text-align: left; } /* Linke Spalte: Aussage. Headline in der Serifenschrift wie im Hero, damit sie als Ueberschrift liest; die Subline ruhig im Fliesstext-Sans. Gilt ueber die mitlaufenden .s2-*-Selektoren auch fuer die Stufe-2-Karte — die beiden Karten sollen dieselbe Typografie tragen, nicht zwei gepflegte. */ .s1-static-copy, .s2-copy, .s3-copy, .s4-copy, .s5-copy{ flex: 1 1 auto; } /* Nur Stufe 1: die Textspalte fuellt die volle Bildhoehe (align-self:stretch) und ist eine eigene flex-Spalte. Die Headline sitzt oben, per padding-top genau auf Hoehe der BILD-Oberkante (nicht des Labels darueber): die Peek- Spalte traegt ueber dem Bild die Label-Zeile (~20px) plus 12px gap = 32px (nachgemessen), also beginnt die Headline 32px unter der Spalten-Oberkante — buendig mit dem Bild. Der Wert ist viewportstabil (Label-Font 12.5px und der gap sind fest). Der Subtext bekommt darunter auto-Raender und sitzt damit mittig im freien Raum (etwa auf halber Bildhoehe wie zuvor); dazwischen entsteht bewusst mehr Weissraum. Nur .s1-static-copy/.s1-static-sub — die Karten 2-5 bleiben oben ausgerichtet (align-items:flex-start der geteilten Regel). */ .s1-static-copy{ align-self: stretch; display: flex; flex-direction: column; padding-top: 32px; } .s1-static-head, .s2-head, .s3-head, .s4-head, .s5-head{ margin: 0; font-family: var(--serif); /* Kursiv fuer einen editorialen, boutique-artigen Charakter (Referenz "Look of the City"). KEIN neuer Font — dieselbe Serifenschrift wie im Hero und in den Ring-/Bandbeschriftungen, nur font-style:italic. Erst nur auf Stufe 1 erprobt, jetzt fuer alle fuenf Karten: eine Karte mit aufrechter und eine mit kursiver Ueberschrift faellt beim Scrollen von Stufe zu Stufe sofort auf — die Karten ruhen an derselben Stelle im Bild. Die Laufweite bleibt bei -0.012em wie im aufrechten Schnitt: die Vorlage laeuft zwar weiter, ihre Wirkung kommt dort aber von einer eigenen Display-Schrift in Versalien. Hier stehen ganze Saetze in gemischter Schreibweise, und aufgezogene Laufweite laesst die nur zerfallen. Gilt bei Stufe 1 in beiden Toggle-Zustaenden, weil .s1-static-head in beiden dieselbe Komponente ist; der Subtext bleibt ueberall aufrecht. */ font-style: italic; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.14; letter-spacing: -0.012em; color: var(--kontrast); text-wrap: balance; } .s1-static-sub, .s2-sub, .s3-sub, .s4-sub, .s5-sub{ margin: clamp(16px, 2.2vh, 26px) 0 0; max-width: 42ch; /* Raleway (lokal, siehe @font-face am Dateianfang) fuer den Fliesstext ALLER fuenf Karten — das Ergebnis des Schriftart-Tests, der vorher nur im Stufe-1-Subtext lief. Fallback auf die System-Sans der Seite, falls die Schrift nicht laedt: dann steht dort dieselbe Schrift wie vor dem Test. */ font-family: "Raleway", var(--sans); /* Eine Stufe groesser als zuvor (17-19px), auf Wunsch: der Erklaersatz stand neben der grossen Ueberschrift und der etwas groesseren Aufzaehlung zu zurueckhaltend da. Angehoben ist die ganze Kurve um rund einen Punkt, nicht nur ein Endwert — sonst waere der Satz auf breiten Fenstern groesser und auf schmalen unveraendert. NUR dieser Absatz: Ueberschriften und die Aufzaehlungen der Karten 2 und 4 bleiben, wo sie waren. */ font-size: clamp(18px, 1.28vw, 20px); line-height: 1.6; /* Voller Kontrastton, kein Aufhellen: auf dem hellen Glas braucht Fliesstext die 4,5:1, dieselbe Ueberlegung wie bei .hero-sub. */ color: var(--kontrast); } /* Nur Stufe 1: der Subtext sitzt mittig im freien Raum unter der (jetzt oben an der Bildkante klebenden) Headline. auto-Raender oben UND unten verteilen den Rest der gestreckten Copy-Spalte gleichmaessig — der Subtext landet damit etwa auf halber Bildhoehe, waehrend die Headline oben bleibt. Steht bewusst NACH der geteilten .s1-static-sub-Regel, sonst gewaenne deren margin-top. Das translateY zieht den Subtext ein kleines Stueck naeher an die Headline: der zentrierte Abstand ist ~111px, -20px sind ~18% weniger (Nutzer-Wunsch), ohne aber auf den frueheren, sehr engen Abstand zurueckzufallen. Rein optisch (kein Reflow), damit die Zentrierung als Basis erhalten bleibt. */ .s1-static-sub{ margin: auto 0; transform: translateY(-20px); } /* Telefon: Sonderregel wieder aufheben. Sie setzt darauf, dass in der gestreckten Copy-Spalte Platz uebrig ist, den die auto-Raender verteilen koennen. Auf 390 px ist er das nicht — dann fallen beide Raender auf 0, und das translateY zieht den Subtext die restlichen 20 px in die Ueberschrift hinein. Nachgemessen: der Satz lag auf der zweiten Zeile von "Deine Kampagne wird laufend optimiert", siehe .scratch/mobile/karten/at_card-rest.png (Aufnahme vor der Korrektur). Zurueck auf denselben Abstand, den die Karten 2-5 haben. */ @media (max-width: 640px){ .s1-static-sub{ margin: clamp(16px, 2.2vh, 26px) 0 0; transform: none; } } /* Der Erklaersatz wechselt mit dem Toggle. Gleiche Machart wie der Medienwechsel darunter (.s1-peek-frame--foto/--video): beide Saetze stehen im Dokument, sichtbar ist immer der zum Kartenzustand passende. Kein Ueberblenden: das Bild daneben wechselt hart, und ein Satz, der sich langsamer austauscht als das Bild, liefe der Umschaltung hinterher. display und nicht opacity, damit der unsichtbare Satz auch aus dem Fluss und aus der Vorlesereihenfolge faellt — er nimmt sonst weiter Hoehe ein, und die auto-Raender darueber verteilten den Platz falsch. */ .s1-sub--video{ display: none; } .stage1-card[data-state="video"] .s1-sub--static{ display: none; } .stage1-card[data-state="video"] .s1-sub--video{ display: block; } /* Nur Stufe 3 und 5: dort steht die Ueberschrift IN der linken Spalte, direkt ueber dem Erklaersatz — und stand ihm zu dicht auf den Fersen. Auf Wunsch angehoben, von rund 20px auf rund 30px (1490x900). Die Stufen 2 und 4 sind nicht gemeint: dort steht die Ueberschrift quer ueber der ganzen Karte und der Satz beginnt bewusst buendig mit der Anschauung daneben (margin-top:0). Stufe 1 auch nicht, die verteilt ihren Satz ueber auto-Raender. */ .s3-sub, .s5-sub{ margin-top: clamp(24px, 3.3vh, 40px); } /* Der Schriftart-A/B im Stufe-1-Subtext (erste Haelfte Raleway, zweite "Classico"/Marcellus) ist entschieden und ausgebaut: Raleway hat gewonnen und steht jetzt in der geteilten Subtext-Regel darueber fuer alle fuenf Karten. Die beiden s im Satz sind damit ebenfalls weg (index.html), und Marcellus wird nicht mehr geladen. */ /* Rechte Spalte: Sneak-Peek. Label ueber dem Bild, dann das Bild in einem Rahmen in der .glass-Machart (heller Rand + weicher Schatten), damit es zur Karte gehoert und nicht als nackte Grafik draufliegt. */ .s1-static-peek{ flex: 0 0 auto; margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .s1-peek-label{ font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--akzent); } /* Buehne fuer das Bild: relativ, damit der Schein absolut DAHINTER liegen kann. inline-block, damit sie sich auf die Bildgroesse zusammenzieht. */ .s1-peek-stage{ position: relative; display: inline-block; /* Lichtfarbe der Hinterleuchtung. BEWUSST NICHT --akzent (#A67C52): das ist ein dunkles Braun und liest als Glow wie ein brauner Fleck, nicht wie Licht. Dies ist ein warmes Amber im Charakter einer warmweissen LED (~2700K), wie die indirekte Beleuchtung im Referenzbild. Kein neues UI-Farbthema — nur die Lichtfarbe dieses einen Scheins, deshalb lokal und nicht in :root. Etwas heller/weniger gesaettigt als reines Amber (Richtung warmweisse LED, ~3000K) — so wie die Deckenbeleuchtung im zweiten Referenzbild. */ --peek-licht: #F7D3A0; } /* Indirekte Beleuchtung: ein weicher, warmer Akzent-Schein hinter dem Bild, groesser als der Rahmen und stark verwaschen. Muss AUSSERHALB des Rahmens liegen (der hat overflow:hidden fuer die runden Ecken). Zusammen mit dem tiefen Schatten am Rahmen wirkt das Bild hinterleuchtet und tritt nach vorne. */ .s1-peek-stage::before{ content: ""; position: absolute; z-index: 0; /* Breiter, weicher, gleichmaessiger warmer Wash — wie die LED-Voutenbeleuchtung im Referenzfoto: das Licht umgibt das Bild sanft von allen Seiten, kein harter Fleck. */ inset: -32% -36% -40%; border-radius: 64px; background: radial-gradient(62% 64% at 50% 48%, color-mix(in srgb, var(--peek-licht) 88%, transparent), color-mix(in srgb, var(--peek-licht) 46%, transparent) 46%, transparent 74%); filter: blur(54px); opacity: 1; pointer-events: none; } .s1-peek-frame{ position: relative; z-index: 1; /* ueber dem Schein */ border-radius: 18px; overflow: hidden; /* Kein Rahmen (Nutzer-Vorgabe): nur runde Ecken. */ border: 0; /* NUR warmes Licht, KEIN dunkler Schatten mehr (der wirkte wie ein schwarzer Rand). Ein enger heller Rim-Schein direkt am Bild + ein weicher warmer Auslauf — zusammen mit dem grossen Wash dahinter (::before) sitzt das Bild in warmem Licht wie im Referenzfoto, statt auf einem Schlagschatten. */ box-shadow: 0 0 34px -2px color-mix(in srgb, var(--peek-licht) 78%, transparent), 0 12px 60px -6px color-mix(in srgb, var(--peek-licht) 52%, transparent); } /* Ueber die Hoehe skaliert, Breite folgt dem Seitenverhaeltnis (Hochformat 0.8): so passt das Bild in den Kartenrest, ohne die feste Kartenhoehe zu sprengen. */ .s1-peek-img{ display: block; height: clamp(300px, 50vh, 480px); width: auto; max-width: 100%; } /* Medien-Wechsel je Zustand: Static zeigt das Foto, Video das Video. Text (Headline, Subline, Label) ist in beiden Zustaenden identisch und bleibt stehen — es wechselt nur die Medienspalte. */ .s1-peek-frame--video{ display: none; } .stage1-card[data-state="video"] .s1-peek-frame--foto{ display: none; } .stage1-card[data-state="video"] .s1-peek-frame--video{ display: block; } /* Der schwarze Rand im Quellmaterial. Auf den gefilmten Einstellungen (der Mann vor der Wand) traegt das Video links und rechts eine schwarze Kante. Gemessene Spaltenhelligkeit, gemittelt ueber die Bildhoehe: Original 1536 px breit, bei 0/5/20 s: 0, 0, 1, 150, 151 ... Webfassung 720 px breit, dieselbe Stelle: 0, 84, 145, 142 ... also 3 Pixel im Original, nach dem Verkleinern rund 1,5. Auf den Bildschirmaufnahmen dazwischen ist die Kante nicht da — deshalb faellt sie nur auf, wenn der Mann zu sehen ist. Sie ist ins Material eingebacken und KEINE Folge der Einbettung: nachgeprueft mit einem nackten