/* ========================================================================== VeloNext Landing — Tageslicht · HELL -------------------------------------------------------------------------- Zweiter Entwurf, 13.08.2026. Ersetzt `app/public/style.css` (dunkel, v3). ZWEI KORREKTUREN GEGENUEBER DER ERSTEN FASSUNG (Christian, 13.08.) ------------------------------------------------------------------ 1. **Nur hell.** Die erste Fassung war dreizustaendig — hell, dunkel, System. Verlangt war eine helle Seite, und die Dreizustaendigkeit war es, die im Browser die dunkle Fassung zeigte. Die dunklen Bloecke sind weg, der Entwurfsschalter ist weg. Die Seite ist hell festgelegt, wie die alte dunkel festgelegt war. Der zweite Aufnahmesatz bleibt im Werkzeug liegen, falls die Frage wiederkommt — auf der Seite ist er nicht. 2. **Die Bilder waren falsch gerahmt.** `.rolefig` hatte eine feste Hoehe und keine Breitengrenze; eine Hochkantaufnahme von 1206x2622 stand darin als 174 px breites Bild in einem 690 px breiten Kasten. Feste Hoehen fuer Bilder gibt es hier nicht mehr — der Rahmen folgt dem Bild. UND EINE NEUE SPRACHE, NICHT NUR NEUE FARBEN -------------------------------------------- Die erste Fassung war die alte Seite mit getauschten Token. Das reichte nicht. Diese Fassung uebernimmt die **Grammatik der App** — die vier Stufen aus `Tokens.swift` und `DESIGN_SYSTEM.md`: Sec eine Bereichsmarke in kleinen Versalien, darunter der Titel Sheet ein Blatt auf Kanvas: Papier, Radius 20, weicher Schatten Group Zeilen in einem Blatt, durch Haarlinien getrennt Chip ein kleiner Wert in einer Kapsel Was die App als Bedienflaeche baut, baut die Seite als Argument: jeder Abschnitt beginnt mit einer Marke, jede Behauptung steht in einem Blatt, jede Aufzaehlung ist eine Gruppe von Zeilen. Wer von hier in die App kommt, findet dieselbe Ordnung wieder — das ist der Zweck, nicht die Farbe. Die alten Klassennamen bleiben zusaetzlich bestehen (`.role`, `.cell`, `.aicol`, `.faqitem`, `.page …`), damit die Unterseiten unveraendert laufen. TOKENHERKUNFT: woertlich aus `web-tageslicht/src/style.css`, das sie aus `app-tageslicht/Tageslicht/Design/Tokens.swift` hat. Wer hier eine Farbe aendert, aendert sie an drei Stellen — sonst laufen Seite, Portal und App auseinander, und das faellt zuerst dem auf, der von hier in die App wechselt. ========================================================================== */ /* ========================================================================== Schrift: Inter Variable, selbst gehostet (20.08.2026) Vorher lief die Seite auf -apple-system. Auf Apple-Geraeten war das SF Pro, ueberall sonst Segoe UI oder Roboto — mit anderen Laufweiten, waehrend letter-spacing auf SF Pro abgestimmt war. Eine Datei, 344 KB, eine Gewichtsachse 100-900: damit rendern auch 650 und 750 ueberall gleich, nicht nur dort wo das System eine variable Achse mitbringt. Kursiv ist nicht dabei, weil die Seite keine kursive Stelle hat. Kein CDN, keine externe Anfrage — die Datei liegt in fonts/. ========================================================================== */ /* Die Kampagnen-Schrift (21.08.2026). Archivo Variable, 180 KB, eine Datei mit ZWEI Achsen: Gewicht 100–900 und Breite 62–125 %. Damit ist „schmal und schwer" moeglich, ohne eine zweite Schriftfamilie zu laden — und das ist die Figur, die eine Sportmarke traegt. **Selbst gehostet, wie InterVariable.** Eine Seite, die 》EU Serverstandort《 als Merkmal bewirbt, darf ihre Schrift nicht von Google-Servern holen: das waere ein Abruf in die USA bei jedem Seitenaufruf, und zwar genau der, den die Seite ausschliesst. Bezogen ueber die Google-Fonts-API, abgelegt in `fonts/`. Sie gilt NUR fuer die Titelzeile. Wo Wucht ueberall steht, ist sie nirgends. */ @font-face{ font-family:"Archivo"; font-style:normal; font-weight:100 900; font-stretch:62% 125%; font-display:swap; src:url("fonts/Archivo.woff2") format("woff2"); } @font-face{ font-family:"InterVariable"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/InterVariable.woff2") format("woff2"); } :root{ /* Waermerer Grund (20.08.2026). Vorher #F0F1F3 mit Blaustich — der Ton, den jede SaaS-Seite traegt. #F2EFE9 ist gemessen an whiteboard.is (#F0EDDD, dort deutlich gelber; das kollidiert bei uns mit --gold im Diagramm). NACHGERECHNET, kein Wert faellt in eine schlechtere Klasse als vorher: --ink 16,48 · --ink2 4,77 · --blue-text 5,09 · --green-text 4,97 · --purple 4,94 · --ink3 3,99 (wie vorher unter 4,5 — auf Kanvas gilt --ink2). */ --canvas:#F2EFE9; --paper:#FFFFFF; --ink:#0E1116; /* 21.08.2026 von #626A75 nachgezogen. Der alte Wert fiel auf den kraeftigen Weltoenen auf 4,42 und damit unter AA; hier sind es 4,83 im schlechtesten Fall (Welt 1). Auf Papier steigt er von 5,70 auf 6,22 — kein Verlust. */ --ink2:#5C6470; --ink3:#6E7683; /* WCAG AA auf Papier (4,58). Auf Kanvas nur 3,99 — dort --ink2. */ --decor:#9AA1AB; /* Punkte, Linien, Diagrammflaechen. NIE Text. */ --line:rgba(14,17,22,.09); --line2:rgba(14,17,22,.16); --blue:#2F7DFF; --blue-w:#EAF1FF; --green:#12924E; --green-w:#E6F4EC; --orange:#C96A0F; --orange-w:#FDF0E4; --red:#D32F26; --purple:#6D4AE0; /* semantisch: Bundesliga */ --gold:#C99400; /* semantisch: Meisterschaft */ --z1:#2F7DFF; --z2:#12924E; --z3:#B98600; --z4:#C96A0F; --z5:#D32F26; --ink-fill:#0E1116; /* Hauptaktion, ausgewaehlter Chip */ --on-ink:#FFFFFF; /* Zwei Lesefarben. Gemessen am 13.08.: --blue erreicht auf Papier 3,82 und auf Kanvas 3,38 — genug fuer die grosse Zeile im Hero (ab 24 px gilt 3:1), zu wenig fuer einen Link in 15 px oder ein Etikett in 10,5 px. Dieselbe Trennung, die es fuer --ink3 / --decor schon gibt: eine Farbe zum Ansehen, eine zum Lesen. Ton und Saettigung bleiben (218 bzw. 152 Grad), nur die Helligkeit sinkt. RUECKFLUSS: das Portal benutzt dasselbe --blue fuer Links. Siehe README. */ --blue-text:#0058EB; /* Papier 5,84 · Kanvas 5,09 · Blaufeld 5,15 · als Flaeche mit Weiss 5,84 */ --green-text:#0F763F; /* Papier 5,70 · Kanvas 4,97 · Gruenfeld 5,03 */ --r:20px; /* Blatt */ --r-s:12px; /* Knopf, kleines Feld */ --sh:0 1px 2px rgba(14,17,22,.05), 0 10px 26px -16px rgba(14,17,22,.20); --sh-lg:0 2px 4px rgba(14,17,22,.05), 0 28px 60px -30px rgba(14,17,22,.28); /* „Arial Narrow" als Ersatz, weil es ueberall vorhanden ist und schmal bleibt — ein breiter Ersatz wuerde die Zeile umbrechen, bevor die Schrift da ist. */ --kraft:"Archivo","Arial Narrow","Helvetica Neue Condensed",Impact,sans-serif; --display:"InterVariable",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --body:"InterVariable",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; /* Kurven: aus der Tabelle, nicht geschaetzt. Die Seite trug vorher cubic-bezier(.4,0,.2,1) an der Saisonkurve — die Material-Standardkurve, die hier nichts zu suchen hat. Eine Linie, die sich zeichnet, ist Fortschritt, und Fortschritt easet nicht: sie laeuft jetzt linear. */ --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --maxw:1200px; --gut:clamp(20px,4vw,44px); } *{box-sizing:border-box;} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;} body{ margin:0; background:var(--canvas); color:var(--ink); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; font-optical-sizing:auto; overflow-x:hidden; } .wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);} a{color:inherit; text-decoration:none;} :focus-visible{outline:2px solid var(--blue-text); outline-offset:3px; border-radius:4px;} img{max-width:100%;} /* ---------- Schrift ---------- */ .display{ font-family:var(--display); font-weight:800; letter-spacing:-.022em; line-height:1.02; margin:0; font-size:clamp(31px,4.6vw,62px); text-wrap:balance; } .display .b{color:var(--blue);} /* Sektionstitel sind nicht der Seitentitel. Vorher trug jede der sechs Sektionen dieselben 62 px wie die Hero-Zeile — sechs gleich laute Ueberschriften ergeben keine Rangfolge. Strava staffelt 72 auf 60, Linear 64 auf 48; hier 62 auf 44. */ .sec .display,.endband .display{font-size:clamp(26px,3.4vw,44px); letter-spacing:-.018em;} /* Die Bereichsmarke der App: kleine gesperrte Versalien ueber dem Titel — in der App `Sec`. In --ink2 und nicht --ink3, weil sie meist auf Kanvas liegt (4,84 statt 4,06). */ .eyebrow{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--ink2); margin:0 0 10px; } .mono{font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2);} .num{font-variant-numeric:tabular-nums;} /* ---------- Blatt, Gruppe, Chip — die drei Bausteine ---------- */ /* Blatt ohne Kartenrahmen (20.08.2026). Vorher trug jedes Blatt Rand UND Schatten — die Standardkarte, an der man eine SaaS-Seite erkennt. Gemessen an whiteboard.is: dort gibt es genau einen Schatten im ganzen Dokument, und Bilder stehen als Flaechen ohne Rahmen. Der waermere Grund traegt den Unterschied jetzt selbst, das weisse Papier hebt sich ohne Hilfslinie ab. Wo Struktur wirklich gebraucht wird (Listen, FAQ, Diagramm), steht sie weiter unten gezielt wieder drin. */ .sheet{background:var(--paper); border:0; border-radius:var(--r); box-shadow:none;} .sheet-pad{padding:clamp(20px,2.4vw,28px);} /* Zeilen in einem Blatt. In der App `Group` — Titel links, Wert rechts, Haarlinie dazwischen, keine Linie ueber der ersten. */ .group{list-style:none; margin:0; padding:0;} .group li{display:flex; gap:12px; align-items:baseline; padding:12px clamp(16px,2vw,20px); border-top:1px solid var(--line); font-size:14.5px; color:var(--ink2);} .group li:first-child{border-top:none;} .group li b{color:var(--ink); font-weight:650;} .group li .val{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--ink2); font-variant-numeric:tabular-nums; white-space:nowrap;} .group li .k{color:var(--blue-text); font-family:var(--mono); font-size:11px; letter-spacing:.09em; flex:0 0 46px;} .chips{display:flex; flex-wrap:wrap; gap:8px;} .chip{display:inline-flex; align-items:baseline; gap:6px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13.5px; color:var(--ink2); box-shadow:var(--sh);} .chip b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums;} .chip.live{padding-left:11px;} .chip.live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(18,146,78,.16); align-self:center;} /* ---------- Knopf ---------- */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body); font-weight:650; letter-spacing:-.01em; font-size:14.5px; min-height:44px; padding:0 20px; border-radius:var(--r-s); cursor:pointer; border:1px solid transparent; transition:background .16s, color .16s, border-color .16s;} .btn-primary{background:var(--ink-fill); color:var(--on-ink); box-shadow:var(--sh);} .btn-primary:hover{background:var(--blue-text);} .btn-ghost{background:var(--paper); color:var(--ink); border-color:var(--line2); box-shadow:var(--sh);} .btn-ghost:hover{border-color:var(--blue-text); color:var(--blue-text);} .btn-lg{font-size:16px; min-height:54px; padding:0 28px;} /* ---------- Kopfzeile ---------- */ /* .92 statt .86: bei .86 blieb der Text darunter beim Scrollen lesbar durchscheinend — mit `backdrop-filter` sieht das nach Absicht aus und liest sich doch als Unschärfe. Die Leiste soll trennen, nicht mitlesen lassen. */ nav{position:sticky; top:0; z-index:60; background:rgba(242,239,233,.92); backdrop-filter:saturate(150%) blur(16px); border-bottom:1px solid var(--line);} nav .wrap{display:flex; align-items:center; height:64px; gap:24px;} .mark{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:18.5px; letter-spacing:-.02em; color:var(--ink);} .mark img{width:28px; height:28px; border-radius:8px; display:block;} nav .navlinks{margin-left:auto; display:flex; gap:22px; align-items:center;} nav .navlinks a{font-size:13.5px; font-weight:550; color:var(--ink2);} nav .navlinks a:hover{color:var(--ink);} @media(max-width:1080px){ nav .navlinks{display:none;} } /* ---------- Hero ---------- Ein Abschnitt wie in der App: Marke, Titel, Satz, Handlung, darunter Chips mit den vier Kennzahlen. Die vier standen vorher als eigenes Band aus vier Kaesten unter dem Hero — als Chips sind sie das, was sie sind: kurze Angaben, keine Kacheln. */ .hero{padding:clamp(40px,6vw,80px) 0 0;} .hero h1{max-width:19ch;} /* `auto` und nicht `0` an den Seiten. `.hero .sub` (0,2,0) schlaegt `.hero p` (0,1,1) und setzte die seitlichen Raender auf 0 — der Block hing damit links in der Spalte, waehrend der Text darin zentriert blieb. Gemessen 21.08.: Blockmitte 473 px gegen Seitenmitte 720 px. */ .hero .sub{font-size:clamp(16px,1.45vw,19px); color:var(--ink2); max-width:52ch; margin:clamp(18px,2.4vw,26px) auto 0;} .hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(22px,2.8vw,32px);} .hero .facts{margin-top:clamp(22px,2.8vw,30px);} /* ---------- Saison-Streifen: das Erkennungszeichen ---------- Bleibt in Aufbau und Daten. Weg ist das Leuchten — `drop-shadow` auf der Kurve und der radiale Blauverlauf sind Mittel fuer dunklen Grund. Auf Papier traegt die Flaeche unter der Kurve, wie `Spark` in der App. */ .season{overflow:hidden;} .season .head{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:16px clamp(16px,2.2vw,24px) 4px;} .season .head .t{font-weight:700; letter-spacing:-.015em; font-size:15.5px;} .season .head .legend{display:flex; gap:16px; margin-left:auto; flex-wrap:wrap;} .season .head .legend i{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px;} .seasonwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;} .seasonwrap::-webkit-scrollbar{height:0;} .seasonsvg{display:block; width:100%; min-width:780px; height:clamp(190px,20vw,244px);} .grid,.curve,.curvefill,.mlabel{pointer-events:none;} .grid line{stroke:var(--line); stroke-width:1;} .curve{fill:none; stroke:var(--blue); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;} .curvefill{fill:url(#g1); stroke:none;} .mlabel{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; fill:var(--ink2);} .race{cursor:pointer;} .race .hit{fill:transparent;} .race .stem{stroke:currentColor; stroke-width:1.5; opacity:.4;} .race .dot{fill:var(--paper); stroke:currentColor; stroke-width:3;} .race .halo{fill:currentColor; opacity:0; transition:opacity .18s;} .race:hover .halo,.race:focus-visible .halo{opacity:.20;} .race.gold{color:var(--gold);} .race.violet{color:var(--purple);} .race.blue{color:var(--blue);} .rtip{font-family:var(--mono); font-size:10px; letter-spacing:.1em; fill:var(--ink); opacity:0; transition:opacity .18s; text-anchor:middle;} .race:hover .rtip,.race:focus-visible .rtip{opacity:1;} .season .foot{padding:4px clamp(16px,2.2vw,24px) 16px; border-top:1px solid var(--line);} /* ---------- Bildschirmaufnahmen ---------- KEINE FESTE HOEHE. Genau daran ist die erste Fassung gescheitert: `.rolefig` war 560 px hoch und beliebig breit, und eine 1206x2622-Aufnahme stand darin als 174 px breites Bild in einem 690 px breiten Kasten. Jetzt gibt die Aufnahme die Groesse vor: Rahmenbreite begrenzt, Hoehe folgt dem Seitenverhaeltnis. */ .shot{width:100%; max-width:296px; margin:0 auto; padding:6px; background:var(--paper); overflow:hidden; border:1px solid var(--line2); border-radius:30px; box-shadow:var(--sh-lg);} .shot img{display:block; width:100%; height:auto; border-radius:24px;} .browser{overflow:hidden; margin-top:clamp(28px,3.6vw,44px);} .browser .bar{height:34px; display:flex; align-items:center; gap:7px; padding:0 14px; background:var(--canvas); border-bottom:1px solid var(--line);} .browser .bar i{width:9px; height:9px; border-radius:50%; display:block;} .browser img{display:block; width:100%; height:auto;} .figcap{margin:0; padding:12px 16px; text-align:center; border-top:1px solid var(--line);} /* ---------- Abschnitt ---------- */ /* Rhythmus statt Raster (20.08.2026). Vorher trugen alle sechs Sektionen padding:100,8px oben und unten bei Luecke 0 — fuenf identische Uebergaenge von 201,6 px, also sechs gleichrangige Bloecke. Gemessen an linear.app: 10 px zwischen zusammengehoerenden Sektionen, dann 224 px vor dem naechsten Kapitel. Hier: 72 px innerhalb einer Gruppe (144 px Abstand der Inhalte), und `.grp` hebt den Gruppenanfang auf 152 px an — 72 + 152 = 224 px. Die Trennlinien entfallen: sie trennten, was der Abstand zusammenhalten soll. */ .sec{padding:clamp(40px,5vw,72px) 0;} .sec.grp{padding-top:clamp(88px,10.6vw,152px);} .sec.line{border-bottom:none;} .sechead{max-width:62ch;} .sechead h2{max-width:22ch; margin-bottom:14px;} .sechead p:not(.eyebrow){color:var(--ink2); font-size:clamp(15px,1.3vw,17px); margin:0; max-width:58ch;} .beleg{margin:16px 0 0; font-size:14.5px; color:var(--ink2); max-width:76ch;} /* ---------- Analyse: Aufnahme · Kennzahlen · Zonen ---------- */ .zonewrap{display:grid; grid-template-columns:296px 1fr 1fr; gap:clamp(22px,3vw,40px); align-items:start; margin-top:clamp(28px,3.8vw,48px);} @media(max-width:1080px){ .zonewrap{grid-template-columns:1fr 1fr;} .zonewrap .shot{display:none;} } @media(max-width:760px){ .zonewrap{grid-template-columns:1fr;} } /* Die Saisonkurve sitzt unter den beiden Textspalten und laesst das Geraet in Spalte 1 stehen. Sie kam am 21.08. aus dem Hero hierher: dort war sie ein Bild ohne Bezug, hier belegt sie die Kurve, die daneben erklaert wird — und die Flaeche neben dem hohen Geraet ist damit keine Leerstelle mehr. */ .zonewrap>.season{grid-column:2 / -1; margin-top:clamp(6px,1.2vw,14px); align-self:start;} /* Das Geraet spannt beide Reihen. Ohne das bestimmt es die Hoehe der ersten Reihe (620 px gegen 340 px Liste), und zwischen Liste und Kurve stand ein Loch von fast 300 px — genau die unrunde Leerflaeche, um die es ging. */ .zonewrap>.buehne{grid-row:1 / span 2; align-self:start;} } @media(max-width:760px){ .zonewrap>.season{grid-column:1 / -1;} .zonewrap>.buehne{grid-row:auto;} } .zone{display:flex; align-items:center; gap:14px; padding:13px clamp(16px,2vw,20px); border-top:1px solid var(--line);} .zone:first-child{border-top:none;} .zone .bar{height:8px; border-radius:999px; flex:0 0 auto;} .zone .nm{font-weight:650; letter-spacing:-.01em; font-size:14.5px; min-width:112px;} .zone .rg{margin-left:auto; font-family:var(--mono); font-size:12.5px; color:var(--ink2); font-variant-numeric:tabular-nums;} /* ---------- Rollen ---------- */ .roles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,18px); margin-top:clamp(28px,3.8vw,48px);} @media(max-width:900px){ .roles{grid-template-columns:1fr; max-width:520px;} } .role{display:flex; flex-direction:column;} .rolehead{padding:clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px) 0;} .rolefig{margin:clamp(16px,2vw,22px) 0 0; padding:0 clamp(18px,2.2vw,24px);} .roletext{padding:clamp(18px,2.2vw,22px) clamp(18px,2.2vw,24px);} .role h3{font-family:var(--display); font-weight:750; letter-spacing:-.022em; font-size:clamp(19px,1.8vw,23px); margin:0 0 8px; line-height:1.1;} .role p{color:var(--ink2); font-size:14.5px; margin:0;} .role .group{border-top:1px solid var(--line); margin-top:auto;} /* ---------- Verein ---------- */ .club{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,1.4vw,18px); margin-top:clamp(24px,3vw,36px);} .cell{padding:clamp(20px,2.6vw,30px);} .cell h3{font-family:var(--display); font-weight:750; letter-spacing:-.02em; font-size:clamp(17px,1.5vw,19px); margin:0 0 8px; line-height:1.18;} .cell p{color:var(--ink2); font-size:14.5px; margin:0;} .cell.accent{background:var(--blue-w); border-color:rgba(47,125,255,.28);} @media(max-width:720px){ .club{grid-template-columns:1fr;} } /* ---------- KI ---------- */ .aigrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,18px); margin-top:clamp(28px,3.6vw,44px);} @media(max-width:820px){ .aigrid{grid-template-columns:1fr;} } .aicol{padding:clamp(20px,2.4vw,28px);} /* Der Nutzen-Absatz steht vor der Merkmalsliste und traegt deshalb mehr Gewicht als sie: eine Stufe groesser, in Lesefarbe, mit Abstand nach unten. */ .ainutzen{font-size:clamp(15.5px,1.35vw,17px); line-height:1.55; color:var(--ink2); margin:0 0 clamp(18px,2vw,24px); padding-bottom:clamp(16px,1.8vw,20px); border-bottom:1px solid var(--line);} .ainutzen b{color:var(--ink); font-weight:650;} .tag{display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-text); background:var(--blue-w); border-radius:999px; padding:5px 11px; margin-bottom:12px;} .tag.alt{color:var(--green-text); background:var(--green-w);} /* Drei Rollen, drei Marken. Vorher trugen Fahrer:in und Eltern beide Blau — bei drei Karten liest sich das als Zufall, nicht als Ordnung. Eltern ist die lesende Rolle, also traegt sie keine Datenfarbe. */ .tag.plain{color:var(--ink2); background:var(--canvas);} .aicol h3{font-family:var(--display); font-weight:750; letter-spacing:-.02em; font-size:clamp(19px,1.8vw,23px); margin:0 0 16px; line-height:1.1;} .aicol dl{margin:0;} .aicol dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); margin-bottom:3px;} .aicol dd{margin:0 0 14px; font-size:14.5px; color:var(--ink2); line-height:1.55;} .aicol dd:last-child{margin-bottom:0;} .aicol dd strong{color:var(--ink); font-weight:650;} /* `auto` statt `0` an den Seiten: mit `max-width` allein hing der Absatz links in der Spalte, waehrend Sektionskopf und KI-Spalten darueber zentriert stehen. Derselbe Fehler wie beim Hero-Absatz — eine Breitenbegrenzung ohne Rand zentriert nicht, sie beschneidet nur. */ .aifoot{margin:18px auto 0; font-size:13.5px; color:var(--ink2); max-width:74ch; text-align:center;} .aifoot strong{color:var(--ink); font-weight:650;} .aifoot a{color:var(--blue-text); font-weight:600;} /* ---------- FAQ ---------- */ .faqgrid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,18px); margin-top:clamp(28px,3.6vw,44px);} @media(max-width:820px){ .faqgrid{grid-template-columns:1fr;} } .faqitem{padding:clamp(20px,2.4vw,28px);} .faqitem h3{font-family:var(--display); font-weight:750; letter-spacing:-.02em; font-size:clamp(16px,1.5vw,19px); margin:0 0 9px; line-height:1.22;} .faqitem p{color:var(--ink2); font-size:14.5px; margin:0;} .faqmore{margin:22px 0 0; font-size:14.5px; font-weight:600;} .faqmore a{color:var(--blue-text);} /* ---------- Schluss ---------- */ /* 22.08.2026 zentriert. `text-align:center` sass auf `.endband .sheet` — der Karte, die der Neuentwurf zu `background:transparent` aufgeloest hat. Damit stand der Schlussblock als einziger Abschnitt der Seite linksbuendig. */ .endband{padding:clamp(40px,5vw,72px) 0 clamp(52px,7vw,96px); text-align:center;} .endband .cta{justify-content:center;} .endband .eyebrow{margin-left:auto; margin-right:auto;} .endband .sheet{max-width:940px; margin:0 auto; text-align:center; padding:clamp(34px,5vw,64px) clamp(24px,4vw,52px); box-shadow:var(--sh-lg);} .endband h2{max-width:18ch; margin:0 auto 18px;} .endband p:not(.eyebrow){color:var(--ink2); max-width:56ch; margin:0 auto 28px; font-size:16px;} footer{border-top:1px solid var(--line); padding:32px 0;} footer .wrap{display:flex; gap:18px; align-items:center; flex-wrap:wrap;} footer .links{display:flex; gap:20px; margin-left:auto; flex-wrap:wrap;} footer a{font-size:13.5px; color:var(--ink2);} footer a:hover{color:var(--ink);} /* ---------- Bewegung ---------- */ @keyframes draw{to{stroke-dashoffset:0;}} @keyframes rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}} .curve{stroke-dasharray:2600; stroke-dashoffset:2600; animation:draw 1.8s linear .2s forwards;} .curvefill{opacity:0; animation:rise .9s ease 1.4s forwards;} .race{opacity:0; animation:rise .5s ease forwards;} .race:nth-of-type(1){animation-delay:.85s} .race:nth-of-type(2){animation-delay:1.05s} .race:nth-of-type(3){animation-delay:1.25s} .race:nth-of-type(4){animation-delay:1.45s} .race:nth-of-type(5){animation-delay:1.65s} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .curve,.curvefill,.race{animation:none; stroke-dashoffset:0; opacity:1;} } /* ========================================================================== Unterseiten (Fliesstext). Dieselben Klassennamen wie v3 — datenschutz, support, ueber-uns, eltern-info, verein-info und ratgeber/ laufen unveraendert darunter. ========================================================================== */ .page .prose{ max-width:780px; margin:0 auto; padding:clamp(28px,4.2vw,52px) var(--gut) clamp(52px,7vw,88px); } .page .crumb{ font-size:13.5px; color:var(--ink2); margin:0 0 20px; } .page .crumb a{ font-weight:600; color:var(--blue-text); } .page h1{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.05; font-size:clamp(28px,4vw,46px); margin:0 0 12px; text-wrap:balance; } .page .stand{ margin:0 0 clamp(26px,3.4vw,38px); padding-bottom:20px; border-bottom:1px solid var(--line); } .page section{ border-top:1px solid var(--line); padding:clamp(22px,2.6vw,30px) 0; } .page section:first-of-type{ border-top:none; padding-top:0; } .page h2{ font-family:var(--display); font-weight:750; letter-spacing:-.02em; font-size:clamp(18px,1.8vw,22px); line-height:1.18; margin:0 0 12px; } .page h3{ font-size:15.5px; font-weight:700; margin:22px 0 6px; } .page p{ color:var(--ink2); margin:0 0 12px; font-size:15px; line-height:1.68; } .page section p:last-child{ margin-bottom:0; } .page strong{ color:var(--ink); font-weight:650; } /* `.page .prose a`, nicht `.page a`: der breite Selektor traf auch die Wortmarke in der Kopfzeile. Sie war auf den Unterseiten blau und auf der Startseite tintenschwarz, weil dort kein `.page` am Body haengt — ein Logo, das je Seite die Farbe wechselt, liest sich als Fehler und war einer. */ .page .prose a{ color:var(--blue-text); } .page ul,.page ol{ color:var(--ink2); padding-left:20px; margin:0 0 12px; font-size:15px; } .page li{ margin:7px 0; line-height:1.6; } .page .note{ border:1px solid rgba(47,125,255,.28); background:var(--blue-w); border-radius:var(--r-s); padding:16px 18px; font-size:14px; color:var(--ink2); margin:0 0 26px; } .page .note p:last-child{ margin-bottom:0; } .page details{ border:1px solid var(--line); border-radius:var(--r-s); padding:15px 18px; margin:0 0 10px; background:var(--paper); box-shadow:var(--sh); } .page summary{ cursor:pointer; font-weight:650; color:var(--ink); font-size:15px; list-style:none; } .page summary::-webkit-details-marker{ display:none; } .page summary::before{ content:"+"; color:var(--blue-text); font-weight:800; margin-right:10px; } .page details[open] summary::before{ content:"–"; } .page details p{ margin:12px 0 0; } .page address{ font-style:normal; color:var(--ink2); font-size:15px; line-height:1.9; } .page .grid2{ display:grid; } .page table{ width:100%; border-collapse:collapse; font-size:14px; margin:14px 0; display:block; overflow-x:auto; } .page th,.page td{ border:1px solid var(--line); padding:10px 13px; text-align:left; color:var(--ink2); } .page th{ background:var(--canvas); color:var(--ink); font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; } .page .muted{ color:var(--ink2); font-size:13.5px; } /* ---------- Ratgeber ---------- */ .page .lede{ font-size:clamp(16px,1.4vw,18px); color:var(--ink2); margin:0 0 10px; line-height:1.6; } .page .meta{ color:var(--ink2); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin:0 0 26px; padding-bottom:20px; border-bottom:1px solid var(--line); } .page .tags{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 30px; } .page .tags span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:5px 11px; } .page .formula{ background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--blue-text); border-radius:var(--r-s); padding:15px 17px; margin:18px 0; font-family:var(--mono); font-size:13.5px; color:var(--ink); overflow-x:auto; line-height:1.6; box-shadow:var(--sh); } .page .formula .cap{ display:block; font-family:var(--body); font-size:12.5px; color:var(--ink3); margin-top:9px; letter-spacing:0; text-transform:none; } .page .callout{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-s); padding:17px 19px; margin:22px 0; box-shadow:var(--sh); } .page .callout.info{ border-color:rgba(47,125,255,.30); background:var(--blue-w); } .page .callout.warn{ border-color:rgba(201,106,15,.32); background:var(--orange-w); } .page .callout p:last-child{ margin-bottom:0; } /* --ink2, nicht --ink3: dieses Etikett steht auf dem blauen bzw. orangen Feld, dort kommt die dritte Tintenstufe nur auf 4,09 bzw. 4,04. An der Seite gemessen. */ .page .callout .lbl{ display:block; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink2); margin-bottom:7px; } .page .cards{ display:grid; gap:clamp(10px,1.2vw,14px); margin-top:10px; } .page .cards a{ display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); padding:22px 24px; text-decoration:none; color:inherit; transition:box-shadow .18s, transform .18s; } .page .cards a:hover{ box-shadow:var(--sh-lg); transform:translateY(-2px); } .page .cards h2{ font-size:clamp(16px,1.6vw,20px); margin:0 0 7px; color:var(--ink); } .page .cards p{ margin:0; font-size:14.5px; } .page .cards .rm{ display:inline-block; margin-top:11px; font-size:13.5px; font-weight:650; color:var(--blue-text); } .page .figcap{ margin:12px 0 0; text-align:center; } @media(prefers-reduced-motion:reduce){ .page .cards a:hover{ transform:none; } } /* ========================================================================== Die blaue Sektion (20.08.2026) — die einzige vollflaechige Markenflaeche der Seite. Der Hero belegt, diese Sektion wirbt; sie gehoert den Fahrer:innen, waehrend Hero und Vereins-Sektion Eltern und Vorstaende ansprechen. GEMESSENE FARBWAHL. Flaeche ist --blue-text (#0058EB), nicht --blue: Weiss auf #2F7DFF ergibt 3,82 und traegt damit nur Text ab 24 px. Auf #0058EB sind es 5,84, auf der Karte (10 % Weiss darueber, faktisch #1A69ED) noch 4,90 — beides AA fuer normalen Text. KEIN ABGESCHWAECHTER TEXT HIER. #DCE8FF kommt auf der Karte nur auf 3,97 und fiele bei 11 px durch. Dieselbe Beobachtung wie bei zwift.com, das auf Bildgrund vier Textfarben fuehrt und davon genau eine graue: traegt die Groesse die Hierarchie, wird die Abschwaechung ueberfluessig. Also alles reinweiss, gestaffelt ueber Groesse und Sperrung. ========================================================================== */ /* Leichtigkeit ohne Kontrastverlust. Ein Lichtschein macht die Flaeche raeumlich statt flach — aber er darf nicht unter den Karten liegen: schon 8 % Aufhellung druecken weissen Text auf der Karte auf 4,33 und damit unter AA. Deshalb laeuft der Schein oben aus (60 % Hoehe), und die Karten sind NICHT durchscheinend, sondern opak im Ton der Aufhellung (#1A69ED, Weiss darauf 4,90) — optisch dasselbe, nur immun gegen alles darunter. */ .bluefill{background:var(--blue-text); color:#FFFFFF; position:relative; overflow:hidden;} .bluefill::before{content:""; position:absolute; inset:0 0 40% 0; pointer-events:none; background:radial-gradient(120% 100% at 82% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);} .bluefill>.wrap{position:relative;} .bluefill .display{color:#FFFFFF;} .bluefill .sechead>p{color:#FFFFFF; max-width:46ch;} .bluefill .eyebrow{color:#FFFFFF;} /* liegt im Bereich des Lichtscheins: Weiss haelt dort 4,74 bis 5,10, #DCE8FF nicht */ .bluefill .mono{color:#FFFFFF;} /* liegt auf der Karte — deshalb reinweiss */ .bluegrid{display:grid; gap:18px; margin-top:clamp(24px,3vw,36px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr));} .bluecard{background:#1A69ED; border:1px solid rgba(255,255,255,.24); border-radius:var(--r); padding:clamp(20px,2.4vw,28px);} .bluecard h3{font-family:var(--display); font-weight:750; letter-spacing:-.014em; font-size:19px; line-height:1.25; margin:6px 0 10px; color:#FFFFFF;} .bluecard p{margin:0; font-size:14.5px; line-height:1.62; color:#FFFFFF;} .bluecard p+p{margin-top:10px;} .bluecard b{font-weight:700;} /* Knoepfe auf blauem Grund. Weiss gefuellt mit --blue-text als Schrift ist dasselbe Paar wie oben, nur getauscht: 5,84. */ .btn-onblue{background:#FFFFFF; color:var(--blue-text); border:1px solid #FFFFFF;} .btn-onblue:hover{background:#F2F6FF; border-color:#F2F6FF;} .btn-ghost-onblue{background:transparent; color:#FFFFFF; border:1px solid rgba(255,255,255,.55);} .btn-ghost-onblue:hover{background:rgba(255,255,255,.10); border-color:#FFFFFF;} .cta-center{justify-content:center;} /* ========================================================================== Bewegung beim Scrollen (20.08.2026) Zweck: ERKLAEREN. Auf einer Werbeseite darf Motion zeigen, wie das Produkt arbeitet — auf einer Oberflaeche, die taeglich benutzt wird, waere derselbe Effekt eine Zumutung. Deshalb steht das hier und nicht im Portal. Der Rahmen bleibt stehen, nur der Bildschirminhalt wird aufgebaut: das ist der Unterschied zwischen "ein Bild blendet ein" und "das Telefon schreibt sein Display". Geclippt wird mit clip-path, nicht mit height — clip-path loest kein Layout aus und laeuft auf der GPU. Jede Bewegung laeuft genau einmal. Ein Effekt, der bei jedem Vorbeiscrollen neu anspringt, ist eine Seite, die mit ihrem Leser ringt. ========================================================================== */ /* WICHTIG: beobachtet wird der Rahmen (.revealbox), nicht das Bild. Ein Element mit clip-path:inset(0 0 100% 0) hat ein Schnittrechteck der Hoehe 0, und der IntersectionObserver rechnet das mit — es wuerde nie als sichtbar gemeldet und die Bewegung nie ausgeloest. Erst gemessen, dann verstanden. */ /* Gemessen an apple.com/de/iphone: dort bewegen sich 18 Elemente, und ALLE mit demselben Wert — translateY 30px plus opacity 0 auf 1. Kein Parallax, keine Bibliothek. Der vorherige clip-path-Aufbau war objektiv mehr Effekt als das und fuehlte sich trotzdem harsch an, weil eine Kante ueber das Bild laeuft. Ein Versatz hat keine Kante. 28px, ein Wert fuer alles. */ .revealbox,.revealitem{opacity:0; transform:translate3d(0,30px,0); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);} .revealbox[data-visible],.revealitem[data-visible]{opacity:1; transform:translate3d(0,0,0);} /* Die Zonenbalken ziehen von links auf. Nicht ueber `width` — das rechnet Layout neu; und nicht ueber scaleX — das verzerrt die runden Enden bei border-radius:999px. clip-path laesst die Form in Ruhe. */ .zone .bar{clip-path:inset(0 100% 0 0); transition:clip-path 520ms var(--ease-out);} .zone[data-visible] .bar{clip-path:inset(0 0 0 0);} .zone:nth-child(2) .bar{transition-delay:60ms;} .zone:nth-child(3) .bar{transition-delay:120ms;} .zone:nth-child(4) .bar{transition-delay:180ms;} .zone:nth-child(5) .bar{transition-delay:240ms;} /* Die drei Karten der blauen Sektion kommen gestaffelt, nicht im Block. */ .bluecard{opacity:0; transform:translateY(14px); transition:opacity 420ms var(--ease-out), transform 420ms var(--ease-out);} .bluecard[data-visible]{opacity:1; transform:none;} .bluecard:nth-child(2){transition-delay:70ms;} .bluecard:nth-child(3){transition-delay:140ms;} @media (prefers-reduced-motion:reduce){ /* Weniger und sanfter, nicht nichts: der Aufbau entfaellt, das Einblenden bleibt — es hilft beim Verstehen, wo man gerade ist. */ .revealbox,.revealitem{opacity:1; transform:none; transition:opacity 240ms ease;} .zone .bar,.zone[data-visible] .bar{clip-path:none; transition:none;} .bluecard{opacity:1; transform:none; transition:opacity 200ms ease;} } /* ========================================================================== Schwebende Ebenen (20.08.2026) Der eigentliche Hebel ist nicht der Effekt am Element, sondern die Traegheit des Scrollens selbst — gemessen an whiteboard.is, das GSAP, ScrollTrigger UND Lenis laedt. Ohne weiches Scrollen bleibt jede Bewegung ein Schalter, weil sie 1:1 am Mausrad haengt. Lenis liegt selbst gehostet in js/. Die Faktoren stehen im HTML als --p (Anteil der Scrollrate, den das Element zusaetzlich zurueckbleibt oder vorlaeuft). whiteboard.is fahrt -69px mit scale 0,01 an Bildern und -387px am Hero-Video; wir bleiben deutlich darunter, weil unsere Elemente Text tragen und Text nicht wandern darf. Nur transform, nichts was Layout aufloest. */ .ebene{will-change:transform;} @media (prefers-reduced-motion:reduce){ .ebene{will-change:auto; transform:none !important;} } /* ========================================================================== Karten aufloesen (20.08.2026) Die drei Rollen und die Vereins-Zellen waren weisse Kaesten im Raster, jeder mit Rand, Schatten und einem zweiten Kasten (dem Geraeterahmen) darin. Kasten-im-Kasten ist die generischste Figur, die eine Seite bauen kann. Jetzt: keine Flaeche, keine Kante — der Geraeterahmen steht frei auf dem warmen Grund, der Text darunter haengt an einer Haarlinie. ========================================================================== */ .sheet.role{background:transparent; border-radius:0;} .role .rolehead{padding-left:0; padding-right:0;} .role .rolefig{padding-left:0; padding-right:0;} .role .roletext{padding:16px 0 0;} .role .group{background:var(--paper); border-radius:var(--r-s); margin-top:16px;} /* GLEICHE STARTLINIE FUER DIE DREI LISTEN (21.08.2026). Der Neuentwurf hat oben `margin-top:auto` durch `16px` ersetzt — richtig fuer den Abstand, aber damit haengt die Liste am Text, und drei Texte unterschiedlicher Laenge setzen drei Listen auf drei Hoehen. Im Bild las sich das als schiefe Symmetrie. `subgrid` gibt den drei Karten die Reihen des Elterngitters: Chip, Text und Liste stehen in jeder Spalte auf derselben Linie, ohne dass die Texte gleich lang sein muessen. */ @supports (grid-template-rows: subgrid) { @media (min-width:901px) { .roles{grid-template-rows:auto auto auto;} .role{display:grid; grid-template-rows:subgrid; grid-row:span 3;} /* Im Grid wird `inline-block` blockifiziert — der Chip zoege sich sonst ueber die ganze Spalte. */ .role>.tag{justify-self:start;} /* Der Text bekommt die Reihe und faengt oben an, statt sie zu fuellen. */ .role .roletext{align-self:start;} } } .sheet.cell{background:transparent; border-radius:0; padding:clamp(18px,2.2vw,24px) 0 0; border-top:1px solid var(--line2);} .sheet.cell.accent{background:transparent; border-top-color:var(--blue);} .sheet.cell.accent h3{color:var(--blue-text);} /* Wo Struktur die Arbeit macht, bleibt sie: Listen, Diagramm, FAQ, KI-Spalten und der Abschluss tragen weiter eine Flaeche — dort ist der Kasten kein Dekor, sondern die Lesehilfe. Nur die Kante wird feiner. */ .sheet.season,.sheet.faqitem,.sheet.aicol,.endband .sheet,.zone-liste{ background:var(--paper); border:1px solid var(--line);} .sheet.browser{background:var(--paper); border:1px solid var(--line2); box-shadow:0 2px 4px rgba(14,17,22,.04), 0 30px 60px -34px rgba(14,17,22,.22);} /* Der Geraeterahmen behaelt seine Tiefe — er stellt ein Objekt dar, kein Blatt. */ .shot{box-shadow:0 2px 6px rgba(14,17,22,.06), 0 26px 50px -28px rgba(14,17,22,.26);} /* ========================================================================== E1 · Perspektive und Fächer (20.08.2026) Die Werte sind nicht geschätzt — sie stammen aus dem Effekt-Labor (LABOR.html), an dem Christian sie eingestellt hat: rotateY -24,5° · rotateX 16° · rotateZ 8° · Aufricht-Strecke 0,6 Fächer: Überlappung 12px · Größe außen 0,87× · Drehung 12,5° · Tiefe -35px Mehr als die 18°, die ich als Lesbarkeitsgrenze angesetzt hatte — zu Recht: die Grenze gilt für DAUERHAFT schräge Screenshots. Weil sich das Gerät beim Scrollen aufrichtet und in Leseposition frontal steht, ist der grössere Winkel nur ein Auftritt und kostet keine Lesbarkeit. `--k` kommt aus js/bewegung.js: 1 am Rand des Blickfelds (voller Winkel), 0 in Leseposition (frontal). Nur transform, nichts was Layout auslöst. ========================================================================== */ :root{ --pp:1400px; /* 20.08. zurueckgenommen: im Labor stand ein einzelnes Geraet frei, in der Seite steht Text daneben — dort wirkt derselbe Winkel deutlich steiler. Vorher -24,5 / 16 / 8. */ --ry:-15; --rx:9; --rz:4; --fan-ueber:12px; --fan-klein:.87; --fan-dreh:12.5; --fan-tief:-35px; } .buehne{perspective:var(--pp); perspective-origin:50% 42%;} .gerat{ width:100%; max-width:300px; margin:0 auto; padding:6px; background:var(--paper); border:1px solid var(--line2); border-radius:30px; overflow:hidden; position:relative; transform-style:preserve-3d; box-shadow:0 3px 8px rgba(14,17,22,.07), 0 30px 60px -30px rgba(14,17,22,.30); transform:rotateY(calc(var(--ry) * var(--k,1) * 1deg)) rotateX(calc(var(--rx) * var(--k,1) * 1deg)) rotateZ(calc(var(--rz) * var(--k,1) * 1deg)); will-change:transform; } .gerat .glas{display:block; border-radius:24px; overflow:hidden;} .gerat .glas img{display:block; width:100%; height:auto;} .gerat .glas picture{display:block;} /* Glanzkante am Rahmen — Wert aus dem Labor: 0,55 */ .gerat::before{content:""; position:absolute; inset:0; border-radius:30px; z-index:3; pointer-events:none; mix-blend-mode:screen; background:linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.28) 100%);} /* ---------- Der Fächer ---------- */ /* AUFGEHEN BEIM SCROLLEN (21.08.2026). `--f` kommt aus js/bewegung.js: 0 = gestapelt (die aeusseren klein, gedreht, hinter der Mitte und nach innen geschoben), 1 = drei Geraete frontal in einer Reihe. Der Wert ist gesperrt und laeuft nur aufwaerts — er ist an die Position gekoppelt und bei 0,58 am Ziel, also bevor die Legende darunter zu lesen ist. Nur `transform`, kein `margin`: die Ueberlappung liegt fest im Layout, das Auseinandergehen passiert per translateX. Ein pro Frame veraenderter Rand loeste sonst dreimal Layout aus, und der Faecher ruckelte. --fx Weg nach aussen: geschlossen 46 px nach innen, offen 26 px nach aussen. Offen 38 px nach aussen: das hebt die -12 px Rand auf und laesst 26 px Luft, damit die drei nebeneinander stehen und nicht kleben. */ .fan{display:flex; align-items:center; justify-content:center; margin-top:clamp(28px,3.8vw,52px); padding:0 8px; --fx:84px;} .fankarte{margin:0 calc(var(--fan-ueber) * -1); position:relative; flex:0 1 300px;} /* Der Rollen-Chip steht in der Legende, nicht am Gerät: bei überlappenden Geräten unterschiedlicher Höhe hat ein Etikett am Objekt keinen Platz, der für alle drei stimmt. In der Legende ist die Zuordnung über die Spalte klar. */ .role>.tag{display:inline-block; margin-bottom:10px;} .fankarte.mitte{z-index:3;} .fankarte.mitte .gerat{transform: rotateY(calc(var(--ry) * var(--k,1) * .45deg)) rotateX(calc(var(--rx) * var(--k,1) * .45deg)) rotateZ(calc(var(--rz) * var(--k,1) * .3deg)) translateZ(calc(34px * (1 - var(--f,1)))) scale(calc(1.05 - .05 * var(--f,1)));} .fankarte.links,.fankarte.rechts{z-index:2;} .fankarte.links .gerat,.fankarte.rechts .gerat{ transform: translateX(calc(var(--seite,1) * (-46px + var(--fx) * var(--f,1)))) scale(calc(var(--fan-klein) + (1 - var(--fan-klein)) * var(--f,1))) rotateY(calc(var(--fan-dreh) * var(--seite,1) * (1 - var(--f,1)) * 1deg)) rotateX(calc(var(--rx) * var(--k,1) * .5deg)) translateZ(calc(var(--fan-tief) * (1 - var(--f,1)))) translateY(calc(20px * (1 - var(--f,1))));} .fankarte.links{--seite:-1;} .fankarte.rechts{--seite:1;} /* Die Legende darunter: kein Kasten mehr, nur Text an einer Haarlinie. */ .roles{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,26px); margin-top:clamp(26px,3.4vw,40px);} @media(max-width:900px){.roles{grid-template-columns:1fr; max-width:520px;}} @media (max-width:900px){ /* Perspektive und Fächer brauchen Platz. Untereinander stehen die Geräte frontal — ein gekipptes Telefon auf 390px Breite ist nur noch schmal. */ .fan{flex-direction:column; gap:34px;} .fankarte{margin:0; flex:0 1 auto;} /* ALLE Geraete, nicht nur die im Faecher (21.08.2026). Auf 390 px ist das Geraet so breit wie seine Spalte, und die gekippte Ecke ragte 1 px aus der Seite — als waagerechter Ueberlauf gemessen. Ein Kippwinkel, der die Seite seitwaerts laufen laesst, ist auf dem Telefon kein Gewinn. */ .gerat,.fankarte .gerat,.fankarte.mitte .gerat, .fankarte.links .gerat,.fankarte.rechts .gerat{transform:none; scale:1;} } @media (prefers-reduced-motion:reduce){ .gerat,.fankarte.mitte .gerat,.fankarte.links .gerat,.fankarte.rechts .gerat{ transform:none !important; will-change:auto;} } /* Der Vorgabewert von `--f` ist 1 (siehe die Regeln oben): laeuft das Skript nicht, stehen die drei Geraete offen nebeneinander. Ein Stapel, der nie aufgeht, waere der schlechtere Ruhezustand — er verdeckt zwei von drei. */ /* ========================================================================== E3 · Der lebende Bildschirm (20.08.2026) Statusleiste und Tab-Bar stehen fest, der Inhalt faehrt durch. Das ist der Unterschied zwischen "ein Bild verschiebt sich" und "ein Geraet scrollt". Die Bahn ist echtes Material: drei Aufnahmen der Tageslicht-App im Simulator (SHOT_ROLE=fahrer SHOT_TAB=0), per cliclick gewischt und ueber Ueberlappungserkennung gestitcht — 1206 x 4438 px, also 2,02 Bildschirmhoehen. Werkzeug und Rohaufnahmen liegen in bahnen/. Fahrweg: (2208 - 1093) / 1093 = 102 % der Fensterhoehe. ========================================================================== */ .gerat.leben .glas{display:flex; flex-direction:column;} .gerat.leben .leiste{display:block; width:100%; height:auto; flex:0 0 auto;} .gerat.leben .fenster{display:block; position:relative; overflow:hidden; aspect-ratio:600 / 1092; flex:0 0 auto;} /* Fahrweg 88 % statt 102 %: die Bahn ist unten um 332 px Leerraum beschnitten, den die App selbst hat und der beim Durchfahren als weisse Flaeche stand. */ .gerat.leben .bahn{display:block; width:100%; height:auto; position:absolute; top:0; left:0; will-change:transform; /* Der Fahrweg ist auf die BAHNHOEHE bezogen, nicht auf die Fensterhoehe: translateY rechnet Prozent gegen die eigene Hoehe, und damit ist der Wert direkt aus den zwei Bildmassen ableitbar statt geschaetzt. Bahn 2054 px, Fenster 1092 px → maximal 962 px = 46,8 %. Wir fahren 44,9 % (40 px Marge), damit unten garantiert nie leere Flaeche erscheint — auch nicht, wenn die Bahn spaeter ausgetauscht wird. */ transform:translate3d(0, calc(var(--b,0) * -44.9%), 0);} @media (prefers-reduced-motion:reduce){ /* Ohne Bewegung zeigt das Geraet den Anfang der Bahn — ein statischer Startbildschirm, wie vorher das Einzelbild. */ .gerat.leben .bahn{transform:none;} } /* ========================================================================== NEUENTWURF DES AUFBAUS (20.08.2026) Auftrag: weg vom Kacheldesign, orientiert an den vier Seiten, die wir gemessen haben. Was dort trägt und hier fehlte: whiteboard.is — keine Karten. Bilder sind Flächen, Text hängt an Haarlinien, Kompositionen sind asymmetrisch, und der Anzeigetext ist sehr groß (dort 129,5 px bei Gewicht 200). apple.com — ein Gedanke pro Bildschirmhöhe, Bild führt, Text folgt. nike.com — vollflächige Bilder, die aus dem Raster laufen. Deshalb: jede Fläche mit Rand und Schatten wird zu einer Linie. Sektionsköpfe stehen versetzt statt alle auf derselben Kante. Die Bühne wird größer. Struktur bleibt, Inhalt bleibt, kein Satz geändert. ========================================================================== */ /* ---------- Bühne: mehr Grösse, weniger Gleichmass ---------- */ .display{font-size:clamp(34px,6.4vw,82px); letter-spacing:-.028em; line-height:.98;} .sec .display,.endband .display{font-size:clamp(28px,4.6vw,58px); letter-spacing:-.022em;} /* Die Breite gehoert an die Headline, nicht an den Kopf: sonst erbt der Flieusstext die 22ch und laeuft als schmale Saeule. */ .sechead{max-width:none;} .sec .sechead .display,.endband .sechead .display{max-width:20ch;} .sechead>p{max-width:48ch; font-size:clamp(15px,1.35vw,18px); color:var(--ink2);} #rollen .sechead .display,#faq .sechead .display{margin-left:auto;} /* Versetzte Köpfe: nicht jede Sektion beginnt an derselben Kante. */ #rollen .sechead{margin-left:auto; margin-right:0; text-align:right;} #rollen .sechead>p{margin-left:auto;} #ki .sechead{margin-left:8%;} #faq .sechead{margin-left:auto; margin-right:0; text-align:right;} #faq .sechead>p{margin-left:auto;} /* ---------- Alle Blätter verlieren Fläche und Kante ---------- */ .sheet.faqitem,.sheet.aicol,.endband .sheet{ background:transparent; border:0; border-radius:0; box-shadow:none; padding:0;} /* FAQ als Liste, nicht als Kachelfeld. Eine Haarlinie je Frage. */ .faqgrid{display:block; margin-top:clamp(24px,3vw,40px);} .sheet.faqitem{border-top:1px solid var(--line2); padding:clamp(20px,2.4vw,30px) 0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:clamp(16px,3vw,48px); align-items:start;} .sheet.faqitem:last-child{border-bottom:1px solid var(--line2);} .sheet.faqitem h3{font-family:var(--display); font-weight:700; letter-spacing:-.018em; font-size:clamp(18px,1.9vw,24px); line-height:1.16; margin:0;} .sheet.faqitem p{margin:0; color:var(--ink2);} @media(max-width:800px){.sheet.faqitem{grid-template-columns:1fr;}} /* KI: zwei Blöcke, getrennt durch eine Linie, mit der Nummer als Bildelement. */ .aigrid{display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:clamp(26px,3.4vw,44px); border-top:1px solid var(--line2);} .sheet.aicol{padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,36px) clamp(20px,2.4vw,30px) 0;} .sheet.aicol+.sheet.aicol{border-left:1px solid var(--line2); padding-left:clamp(20px,2.6vw,36px);} /* Die Etiketten lagen vorher auf weissem Papier, wo --ink3 mit 4,58 reicht. Ohne Blatt liegen sie auf Kanvas und kommen dort nur auf 3,99 — deshalb --ink2 (4,77). Genau die Trennung, die oben bei --ink3 dokumentiert ist. */ .sheet.aicol dt{color:var(--ink2);} .sheet.aicol .eyebrow{font-size:clamp(30px,3.6vw,52px); line-height:1; letter-spacing:-.02em; font-family:var(--display); font-weight:750; text-transform:none; color:var(--decor); margin-bottom:14px;} @media(max-width:800px){.aigrid{grid-template-columns:1fr;} .sheet.aicol+.sheet.aicol{border-left:0; border-top:1px solid var(--line2); padding-left:0;}} /* Abschluss: ein Statement, kein Kasten. */ /* 22.08.2026 auf Mitte zurueckgeholt. Der Neuentwurf vom 20.08. hat den Schlussblock bewusst linksbuendig gesetzt — das war stimmig, solange mehrere Sektionen linksbuendig standen. Seit dem Welten-Umbau ist die Seite durchgaengig zentriert, und der Schlussblock war der einzige Abschnitt, der ausscherte. */ .endband .sheet{max-width:none; text-align:center;} .endband h2{max-width:24ch; margin:0 auto 14px;} .endband p:not(.eyebrow){margin:0 auto 26px; max-width:52ch;} .endband .cta-center,.endband .cta{justify-content:center;} /* Die blaue Sektion: Text auf der Fläche, getrennt durch Linien statt Karten. */ .bluecard{background:transparent; border:0; border-radius:0; padding:0; border-top:1px solid rgba(255,255,255,.32); padding-top:20px;} .bluegrid{gap:clamp(20px,2.6vw,40px);} /* Die drei Spalten sind unterschiedlich lang; ohne eigenen Abstand klebt der Knopf an der kuerzesten und liest sich als deren Fortsetzung. */ .bluefill .cta{margin-top:clamp(30px,4vw,54px);} /* Analyse: die Kennwert-Erklärungen als Liste über die Breite, nicht als Blatt. */ #form .sheet:not(.zone-liste){background:transparent; border:0; box-shadow:none;} #form .group li{padding-left:0; padding-right:0;} /* Das Portal läuft rechts aus dem Satzspiegel — wie ein Bild, nicht wie ein Screenshot. */ /* Das Portal laeuft rechts aus dem Satzspiegel heraus und wird vom overflow-x:hidden des body beschnitten — ein Bild, das nicht ins Raster passt, statt eines Screenshots, der brav darin sitzt (nike.com-Prinzip). */ .sheet.browser{border-radius:var(--r) 0 0 var(--r); max-width:none; margin-right:calc(-1 * max(var(--gut), 9vw));} @media(max-width:900px){.sheet.browser{margin-right:0; border-radius:var(--r);}} /* ========================================================================== APPLE-AUFBAU (20.08.2026, nach apple.com/de/os/ios) Gemessene DNA dieser Seite: Flaeche #F5F5F7 auf 64,4 % · Schwarz 13,7 % · Weiss 9 % → Flaechenwechsel Typo H2 48 px / Gewicht 600 / letter-spacing -0,144 px (also fast 0) Body 17 px / Gewicht 600 · nur SIEBEN Groessen: 12 14 17 21 28 32 48 nur ZWEI Gewichte: 400 (143x) und 600 (93x) Radien 28 px (23x) · 18 px · 36 px · Pille 980 px Schatten KEINE. Die Liste ist leer. Reveal 34 Elemente, ALLE mit translateY 30px + opacity 0→1 Karten Bildflaeche mit Radius, Text frei darunter — kein Rahmen, kein Kasten Das ist ein Rueckbau der Asymmetrie und der 82-px-Typo aus der whiteboard- Runde: Apple zentriert und haelt die Bühne kleiner. Beibehalten wird, was Christian selbst gewaehlt hat — Creme statt Apples kuehlem Grau, die blaue Sektion, Inter. ========================================================================== */ /* ---------- Zentrierte Koepfe statt versetzter ---------- */ .sechead{max-width:60ch; margin-left:auto; margin-right:auto; text-align:center;} .sechead>p{margin-left:auto; margin-right:auto; max-width:54ch;} .sec .sechead .display,.endband .sechead .display{max-width:26ch; margin-left:auto; margin-right:auto;} #rollen .sechead,#faq .sechead,#ki .sechead{margin-left:auto; margin-right:auto; text-align:center;} #rollen .sechead>p,#faq .sechead>p{margin-left:auto; margin-right:auto;} #rollen .sechead .display,#faq .sechead .display{margin-left:auto; margin-right:auto;} /* ---------- Buehne auf Apple-Mass ---------- */ .display{font-size:clamp(32px,4.6vw,62px); letter-spacing:-.012em; line-height:1.04;} .sec .display,.endband .display{font-size:clamp(27px,3.4vw,48px); letter-spacing:-.004em;} .sechead>p{font-size:clamp(16px,1.35vw,19px); line-height:1.45; color:var(--ink2);} /* ---------- Radius 28, keine Schatten ---------- */ :root{--r:28px; --r-s:14px; /* Apple faehrt auf dieser Seite null Schatten. Tiefe entsteht durch die Flaeche selbst und durch den Wechsel der Grundtoene. */ --sh:none; --sh-lg:none;} .sheet,.sheet.season,.sheet.faqitem,.sheet.aicol,.zone-liste{box-shadow:none;} .chip,.btn{box-shadow:none;} .btn-primary,.btn-ghost{box-shadow:none;} /* ---------- Die Rollen als Apple-Kartenreihe ---------- */ .roles{gap:clamp(18px,2.2vw,28px);} .sheet.role{gap:16px;} .role>.tag{align-self:flex-start;} .role h3{font-size:clamp(17px,1.5vw,21px); font-weight:600; letter-spacing:-.01em; margin:0 0 6px;} .role p{font-size:clamp(15px,1.2vw,17px); line-height:1.47;} .role .group{background:var(--paper); border-radius:18px;} /* ---------- Zwei Gewichte, nicht sechs ---------- */ .group li b,.balken .nm,.zone .nm{font-weight:600;} .role h3,.bluecard h3,.sheet.faqitem h3,.cell h3{font-weight:600;} .display{font-weight:600;} .season .head .t{font-weight:600;} /* ---------- FAQ zurueck in die Mitte, aber als Liste ---------- */ .faqgrid{max-width:1000px; margin-left:auto; margin-right:auto;} /* ---------- Konsequenz: auch Hero, blaue Sektion und Portal folgen Apple ----- */ /* Apple zentriert den Hero mitsamt Eyebrow, Zeile, Text und Knoepfen. */ .hero{text-align:center;} .hero .display{margin-left:auto; margin-right:auto; max-width:22ch;} /* 21.08.2026: `.hero>p` griff nur auf direkte Kinder. Der Plattform-Auftakt steckt in einer eigenen `
`, also verlor sein Absatz das `margin:auto` und sass linksbuendig, waehrend der Text darin zentriert blieb — genau der Versatz, der aufgefallen ist. Jetzt gilt die Regel fuer jeden Absatz im Hero, egal wie tief. */ .hero p,.hero .lead{margin-left:auto; margin-right:auto; max-width:52ch;} /* Die Markenzeile unter dem Slogan: eine Stufe kleiner als der Titel, eine groesser als der Flieusstext. Sie traegt, was der englische Slogan nicht sagt — dass es um Radsport geht. */ .lead-marke{font-family:var(--display); font-weight:600; letter-spacing:-.018em; font-size:clamp(19px,2vw,24px); line-height:1.25; color:var(--ink); /* Mehr Luft nach oben, seit die Titelzeile auf 0,88 Zeilenabstand steht: die Unterlaengen der Versalien reichen sonst bis an diese Zeile. */ margin:clamp(18px,2.2vw,28px) auto clamp(16px,2vw,22px); max-width:30ch;} .hero .cta,.hero .chips{justify-content:center;} .hero .chips.facts{justify-content:center;} /* Die blaue Sektion ist eine eigene Flaeche, folgt aber demselben Aufbau. */ .bluefill .sechead{text-align:center;} .bluefill .sechead>p{margin-left:auto; margin-right:auto;} .bluefill .cta{justify-content:center;} /* Das Portal wieder ganz im Bild: der Anschnitt war das nike-Prinzip aus der whiteboard-Runde. Apple zeigt Geraete und Fenster vollstaendig und zentriert, mit dem Leitradius — das Objekt soll komplett lesbar sein. */ .sheet.browser{margin-right:auto; margin-left:auto; border-radius:var(--r); max-width:1100px;} /* ---------- Die Merkmalsreihen der Feature-Sektion (21.08.2026) ---------- Vorher ein Dreispalter mit auf 4/3 beschnittenen Bildern ohne Rahmen. Zwei Fehler auf einmal: die Screens waren mit ~300 px Spaltenbreite zu klein, um etwas zu belegen, und der randlose Anschnitt stand quer zur Bildsprache der Seite, die Geraete sonst im Rahmen zeigt. Jetzt eine Reihe je Merkmal, Seite wechselnd. Das Geraet steht ganz im Bild, im selben Rahmen wie im Faecher, und ist mit 420 px knapp doppelt so gross. Der Text sitzt daneben in Leseposition — dadurch tragen beide Spalten, wo im Dreispalter neben jedem Bild Grund leer blieb. */ .areihen{display:grid; gap:clamp(56px,7vw,120px); margin-top:clamp(34px,4.4vw,60px);} .areihe{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; margin:0;} /* Jede zweite Reihe kehrt die Seiten. `order` statt zweier Spaltendefinitionen: die Reihenfolge im Quelltext bleibt die Leserichtung, auch wenn optisch getauscht wird. */ .areihe:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,420px);} .areihe:nth-child(even) .abild{order:2;} .areihe:nth-child(even) .atext{order:1;} .abild{min-width:0;} /* `min()` und nicht 420 px fest: auf 390 px Schirm lief das Geraet 13 px aus der Seite heraus — die Reihe ist dort einspaltig und der Rahmen bekam mehr Breite, als der Viewport hergibt. */ .abild .gerat{max-width:min(420px, 100%);} .atext{min-width:0;} .atext .eyebrow{margin:0 0 10px;} /* 34 px ist die einzige Stufe, die am 21.08. dazukam. Sie fuellt die Luecke zwischen 24 (Sektionsunterkopf) und 48 (Display): ein Reihentitel neben einem 900 px hohen Geraet traegt mit 24 px nicht, und 48 px waeren eine zweite Seitenueberschrift. Sie gilt fuer alle fuenfzehn Reihentitel der Seite. */ .atext h3{font-family:var(--display); font-weight:600; letter-spacing:-.022em; font-size:clamp(24px,2.6vw,34px); line-height:1.12; margin:0 0 14px;} .atext p{margin:0; font-size:clamp(15.5px,1.3vw,18.5px); line-height:1.52; color:var(--ink2); max-width:46ch;} /* Drei Belegzeilen je Merkmal. Sie stehen hier nicht als Zierde: der Absatz allein war 254 px hoch und stand neben einem 901 px hohen Geraet — die Spalte trug nicht. Mit der Liste sind es rund 500 px, und die Reihe steht ruhig. */ .abelege{margin-top:clamp(20px,2.2vw,28px); background:var(--paper); border-radius:18px; max-width:46ch;} @media(max-width:900px){ /* Untereinander, Bild immer oben — ein 420er Geraet neben 40 % Textspalte laesst auf 700 px Breite fuer keines von beiden genug Platz. */ .areihe,.areihe:nth-child(even){grid-template-columns:1fr; gap:clamp(20px,4vw,30px); max-width:520px; margin-left:auto; margin-right:auto;} .areihe:nth-child(even) .abild{order:0;} .areihe:nth-child(even) .atext{order:0;} .atext p{max-width:none;} } /* ========================================================================== DREI WELTEN (21.08.2026) Drei eigenstaendige Teile untereinander, die eine Seite bleiben. Zwei Mittel: 1. FARBE. Jede Welt hat einen eigenen Grundton, aber es gibt keine Kante: hinter der Seite liegt eine feste Ebene, deren Ton beim Scrollen driftet (js/bewegung.js). Innerhalb einer Welt steht er still — an den Grenzen blendet er ueber 0,9 Bildschirmhoehen um. Wer scrollt, sieht die Farbe wechseln, findet aber nie die Naht. 2. GLEICHE HELLIGKEIT. Die drei Toene sind auf dieselbe relative Luminanz gerechnet wie der Grundton (0,863 ± 0,003): Basis #F2EFE9 Y 0,8631 Welt A #EAF0F8 Y 0,8637 kuehl Welt B #E9F1EA Y 0,8604 gruen Welt C #F4EFE5 Y 0,8632 warm Das ist kein Zierdetail, sondern der Grund, warum der Umbau die Messung nicht bricht: alle Kontrastwerte in `:root` sind gegen #F2EFE9 gemessen, und bei gleicher Luminanz bleiben sie es. Ein dunklerer Weltton haette 407 Textknoten neu zu pruefen bedeutet. ========================================================================== */ :root{ /* 21.08.2026 KRAEFTIGER. Die erste Fassung war auf gleiche Luminanz gerechnet und damit unsichtbar: Welt 3 hatte gegen den Grundton einen Abstand von ΔE 4 — buchstaeblich kein Farbwechsel. Jetzt liegen die Wechsel bei ΔE 26–29. Der Preis stand im dunkleren `--ink2` darueber; alle Textkontraste bleiben ueber 4,7. Gemessen 21.08. gegen ink, ink2 und die drei Akzente. */ --welt-a:#DCE8FA; /* kuehl · ink 15,28 · ink2 4,83 */ --welt-b:#DCEDE0; /* gruen · ink 15,52 · ink2 4,91 */ --welt-c:#F7EAD8; /* warm · ink 15,95 · ink2 5,04 */ /* Die Kopffläche je Welt: eine Stufe satter als der Weltton. Sie darf eine Kante haben — die gehoert zum Kopf und liest sich als Auftakt, nicht als Naht mitten im Text. */ --kopf-a:#C9DCF7; --kopf-b:#C9E4D2; --kopf-c:#F2DFC2; /* Auf der satten Kopffläche braucht der Akzent eine Stufe mehr Tiefe: die Lesefarben aus `:root` sind gegen Papier und Kanvas gemessen und fallen hier auf 4,19 (blau) und 4,21 (gruen). Gemessen 21.08. — diese Varianten stehen bei 4,83 / 4,88 / 5,25 und gelten NUR im Weltkopf. */ --kopf-akz-a:#0050D6; --kopf-akz-b:#0D6B39; --kopf-akz-c:#7D511E; } /* Die driftende Ebene. `fixed` und hinter allem — sie ersetzt den Body-Grund nicht, sie liegt darauf: laeuft das Skript nicht, bleibt `--canvas` stehen. */ .grundebene{position:fixed; inset:0; z-index:-1; background:var(--canvas); pointer-events:none;} /* ---------- Der Weltkopf ---------- */ .welt{position:relative;} /* Kein `background` auf der Sektion: die Farbe kommt von der driftenden Ebene. Eine Flaeche hier wuerde genau die Kante zeichnen, die vermieden werden soll. */ /* Der Weltkopf sitzt auf einer eigenen Flaeche. Zwei Gruende: die Farbe der Welt wird an einer Stelle ganz sichtbar statt nur als Ahnung im Grund, und der Wechsel bekommt einen Ort. Volle Fensterbreite ueber `100vw`-Trick, damit die Flaeche nicht in der Textspalte klebt. */ .weltflaeche{position:relative; padding:clamp(46px,6vw,86px) 0 clamp(40px,5vw,70px); margin-bottom:clamp(40px,5vw,72px);} /* FLIESSEND STATT BLOCK (21.08.2026). Die Flaeche hatte oben und unten eine harte Kante — zwei Linien quer durch die Seite, die nichts trennen, was getrennt gehoert. Jetzt eine breite Wolke: radial aus der Mitte, wo der Text steht, in beide Richtungen auslaufend, dazu ein senkrechter Verlauf, der die Raender ganz aufloest. Der Text steht in der Mitte, wo der Ton voll ist — dort wurde gemessen (ink 13,57 bis 14,51 · Akzent 4,83 bis 5,25). Nach aussen wird es HELLER, und heller ist fuer dunklen Text immer unbedenklich. Kein Punkt der Flaeche ist dunkler als der gemessene Kopfton. */ .weltflaeche::before{content:""; position:absolute; inset:0; left:50%; width:100vw; transform:translateX(-50%); z-index:-1; background: radial-gradient(118% 74% at 50% 50%, var(--wkopf) 0%, color-mix(in srgb, var(--wkopf) 55%, transparent) 52%, transparent 88%), linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--wkopf) 72%, transparent) 26%, color-mix(in srgb, var(--wkopf) 72%, transparent) 74%, transparent 100%);} .welt.a{--wkopf:var(--kopf-a); --wkopf-akz:var(--kopf-akz-a);} .welt.b{--wkopf:var(--kopf-b); --wkopf-akz:var(--kopf-akz-b);} .welt.c{--wkopf:var(--kopf-c); --wkopf-akz:var(--kopf-akz-c);} /* Auf der Kopffläche gilt der tiefere Akzent, und der Lead steht in Volltinte statt in Grautext: `--ink2` erreicht dort nur 4,29 bis 4,59. Im Weltkopf ist der Lead ohnehin eine Hauptaussage — Volltinte ist keine Notloesung, sondern die richtige Gewichtung (13,57 bis 14,51). */ .weltflaeche .weltnr span{color:var(--wkopf-akz);} .weltflaeche .weltnr i{background:var(--wkopf-akz);} .weltflaeche .weltkopf .lead{color:var(--ink);} .weltkopf{max-width:840px; margin:0 auto; text-align:center;} .weltnr{display:flex; align-items:center; justify-content:center; gap:14px; margin:0 0 clamp(18px,2.2vw,26px);} .weltnr i{display:block; width:clamp(40px,6vw,72px); height:1px; background:var(--wfarbe); opacity:.5;} .weltnr span{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--wfarbe);} .weltkopf h2{margin:0 0 clamp(14px,1.6vw,20px);} .weltkopf .lead{margin:0 auto; max-width:54ch; color:var(--ink2); font-size:clamp(17px,1.5vw,19px); line-height:1.5;} /* Der USP-Satz der Welt — eine Aussage, nicht drei. Er traegt die Welt und ist deshalb eine Stufe groesser als der Flieusstext darunter. */ .weltusp{margin:clamp(20px,2.4vw,30px) auto 0; max-width:46ch; font-weight:600; color:var(--ink); font-size:clamp(17px,1.6vw,21px); line-height:1.45;} /* Je Welt eine Akzentfarbe. Sie faerbt Nummer, Linie und Eyebrow — nicht den Flieusstext: drei Textfarben waeren drei Lesbarkeiten. */ .welt.a{--wfarbe:var(--blue-text);} .welt.b{--wfarbe:var(--green-text);} .welt.c{--wfarbe:#8A5A22;} /* Papier 5,12 · Welt C 4,58 — geprueft 21.08. */ .welt .atext .eyebrow{color:var(--wfarbe);} /* Getoente Kartenflaechen. Reinweiss auf farbigem Grund laesst die Welt blasser wirken, als sie ist: das Weiss zieht den Blick und der Ton verschwindet. 55 % Beimischung ist der Punkt, an dem die Karte noch klar als Flaeche liest. */ .welt .group,.welt .abelege{background:color-mix(in srgb, var(--wkopf) 55%, #FFFFFF);} /* ---------- Der Plattform-Auftakt im Hero ---------- */ .auftakt{margin-top:clamp(38px,5vw,68px);} /* Der Rollen-Umschalter gilt nur fuer schmale Schirme. Am Desktop steht der Faecher, und drei Geraete nebeneinander sind dort die Aussage. */ .rollenwahl{display:none; border:0; padding:0; margin:0 0 18px; min-width:0;} .auftakt .zeile{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink2); margin:0 0 clamp(16px,2vw,22px);} /* Die drei Sprungmarken unter dem Faecher. Sie sind die Tuer in die Welten und stehen deshalb direkt unter den Geraeten, jede in der Farbe ihrer Welt. */ .weltlinks{display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(10px,1.4vw,18px); margin-top:clamp(26px,3.2vw,40px);} /* EIN GERAET STATT DREI (22.08.2026). Gestapelt war als Mobilloesung geplant (KONZEPT-BEWEGUNG.md 5.3). Gemessen kostet der Stapel 2,3 Bildschirme ohne ein lesbares Wort, und Punkt 5.5 desselben Papiers verlangt einen belegenden Hero. Beides geht nur mit einem Geraet. DIESER BLOCK MUSS HINTER `.rollenwahl{display:none}` STEHEN. Eine Media Query erhoeht die Spezifitaet nicht — stand er weiter oben (im Geraeteblock bei 800), gewann die spaetere Basisregel und der Umschalter blieb unsichtbar, waehrend die `:has()`-Regeln schon griffen: eine leere Buehne. */ @media (max-width:900px){ .rollenwahl{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;} .rollenwahl legend{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);} .rollenwahl label{position:relative; display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:999px; cursor:pointer; background:var(--paper); border:1px solid var(--line); font-size:14px; font-weight:650; color:var(--ink2);} /* Das Radio bleibt ein echtes Radio — Tastatur und Vorleseprogramm bedienen es nativ. `display:none` haette es aus dem Fokuslauf genommen. */ .rollenwahl input{position:absolute; width:1px; height:1px; opacity:0; clip-path:inset(50%);} .rollenwahl label:has(input:checked){background:var(--ink); border-color:var(--ink); color:var(--canvas);} .rollenwahl label:has(input:focus-visible){outline:2px solid var(--blue-text); outline-offset:2px;} /* Ausblenden, nicht einblenden: faellt `:has()` aus, greift keine dieser Regeln und es bleibt beim alten Stapel statt bei einer leeren Buehne. */ .auftakt:has(#rw-a:checked) .fankarte.mitte, .auftakt:has(#rw-a:checked) .fankarte.rechts, .auftakt:has(#rw-b:checked) .fankarte.links, .auftakt:has(#rw-b:checked) .fankarte.rechts, .auftakt:has(#rw-c:checked) .fankarte.links, .auftakt:has(#rw-c:checked) .fankarte.mitte{display:none;} /* EIN TELEFON IM TELEFON (Etappe 2). Der Geraeterahmen ist auf einem echten Telefon Dekoration, die rund 15 % der Bildflaeche kostet — und mit dem Ausschnitt gibt es keine Statusleiste mehr, die ein Gehaeuse rechtfertigt. */ .gerat{padding:0; border:0; background:none; border-radius:20px; box-shadow:0 2px 6px rgba(14,17,22,.06), 0 16px 32px -20px rgba(14,17,22,.22);} .gerat::before{display:none;} .gerat .glas{border-radius:20px;} /* 11px war das einzige Wort in der ganzen Bildstrecke. */ .auftakt .zeile{font-size:12.5px;} } .weltlink{display:inline-flex; flex-direction:column; gap:2px; text-decoration:none; padding:12px 20px; border-radius:999px; background:var(--paper); border:1px solid var(--line); min-width:200px; text-align:left;} .weltlink b{font-size:15.5px; font-weight:650; color:var(--ink); letter-spacing:-.01em;} .weltlink span{font-size:12.5px; color:var(--ink2);} .weltlink:hover{border-color:var(--wf); } .weltlink.a{--wf:var(--blue-text);} .weltlink.a b{color:var(--blue-text);} .weltlink.b{--wf:var(--green-text);} .weltlink.b b{color:var(--green-text);} .weltlink.c{--wf:#8A5A22;} .weltlink.c b{color:#8A5A22;} @media(max-width:620px){ .weltlink{min-width:0; flex:1 1 100%;} } /* ========================================================================== DER STREIFEN (21.08.2026) Variante A als Grundgeruest, B fuer die Tiefe: je Welt ein Leitthema als Vollreihe im Scrollfluss, alles Weitere seitwaerts in einem Streifen. WARUM NICHT ALLES IN DEN STREIFEN. Gemessen an apple.com/os/ios: dort steht das Kernthema immer als grosses Einzelbild im vertikalen Fluss, und nur die Nebenschauplaetze liegen in einer Galerie. Der Grund ist nicht Geschmack — horizontal Verstecktes sieht ein Teil der Leser nie. Was jeder sehen muss, darf nicht seitwaerts liegen. ANSCHNITT STATT PUNKTREIHE. Die Karten sind so breit, dass die naechste rechts angeschnitten ist. Ein angeschnittenes Objekt sagt „hier geht es weiter" zuverlaessiger als jede Punktreihe darunter. ========================================================================== */ .streifenwrap{position:relative; margin-top:clamp(34px,4.2vw,56px);} .streifenkopf{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 clamp(16px,2vw,22px); flex-wrap:wrap;} .streifenkopf h3{font-family:var(--display); font-weight:600; letter-spacing:-.015em; font-size:clamp(17px,1.6vw,21px); margin:0;} .streifenkopf .wisch{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); display:flex; align-items:center; gap:7px;} .streifenkopf .wisch::after{content:"→"; font-size:13px; letter-spacing:0;} /* `286px` fest und nicht `minmax(0,286px)`: mit der Minmax-Form schrumpfen die Spalten auf die verfuegbare Breite, statt sie zu ueberschreiten — gemessen am 21.08. blieben 1 bis 5 px Scrollweg, der Streifen war also gar keiner. */ .streifen{display:grid; grid-auto-flow:column; grid-auto-columns:286px; gap:clamp(14px,1.8vw,22px); overflow-x:auto; overscroll-behavior-x:contain; padding:2px 2px 14px; scrollbar-width:thin; scrollbar-color:var(--line2) transparent;} .streifen::-webkit-scrollbar{height:6px;} .streifen::-webkit-scrollbar-track{background:transparent;} .streifen::-webkit-scrollbar-thumb{background:var(--line2); border-radius:99px;} /* SNAP ERST IM HANDBETRIEB. Mit `scroll-snap-type` von Anfang an kaempft der Browser gegen den Selbstlauf: jede Zuweisung an `scrollLeft` wird zur naechsten Karte zurueckgeschnappt, und der Streifen stand bei 2 px still (gemessen 21.08.). `js/bewegung.js` setzt `data-hand`, sobald jemand selbst wischt — dann ist Snap richtig, weil dann jemand von Karte zu Karte will. */ .streifen[data-hand]{scroll-snap-type:x proximity;} .streifen > *{scroll-snap-align:start;} .streifen > *:last-child{scroll-snap-align:end;} .skarte{margin:0; min-width:0;} .skarte .buehne{margin-bottom:14px;} /* Kleiner als die Vollreihe (286 statt 420 px) — der Groessenunterschied ist die Hierarchie: ein Leitthema, mehrere Belege. */ .skarte .gerat{max-width:min(286px,100%); margin:0;} .skarte .stext{padding:0;} .skarte .eyebrow{margin:0 0 7px;} .skarte h4{font-family:var(--display); font-weight:600; letter-spacing:-.016em; font-size:clamp(16.5px,1.4vw,19px); line-height:1.2; margin:0 0 8px; text-wrap:balance;} .skarte p{margin:0; font-size:14.5px; line-height:1.5; color:var(--ink2);} .skarte .val{font-family:var(--mono); font-size:12px; color:var(--ink2); display:block; margin-top:9px; padding-top:9px; border-top:1px solid var(--line);} @media(max-width:760px){ .streifen{grid-auto-columns:74vw;} .streifen[data-hand]{scroll-snap-type:x mandatory;} .skarte .gerat{max-width:100%;} } /* Wer reduzierte Bewegung eingestellt hat, faehrt den Streifen selbst — die scrollgebundene Seitwaertsfahrt entfaellt in js/bewegung.js. Der Streifen bleibt bedienbar, er bewegt sich nur nicht von allein. */ /* ========================================================================== DER LEITBLOCK (21.08.2026) Die Analyse ist das Leitthema von Welt 1 und stand vorher als eigene Sektion drei Bildschirme weiter unten. Hier braucht sie keinen Sektionsrahmen mehr: der Weltkopf darueber traegt die Ueberschrift, dieser Block traegt nur seinen eigenen Zwischenkopf auf h3-Ebene. ========================================================================== */ .leitblock{margin-bottom:clamp(10px,1.4vw,20px);} .leitkopf{max-width:62ch; margin:0 0 clamp(26px,3.2vw,40px);} .leitkopf .eyebrow{margin:0 0 9px;} .leitkopf h3{font-family:var(--display); font-weight:600; letter-spacing:-.022em; font-size:clamp(24px,2.6vw,34px); line-height:1.12; margin:0 0 12px; text-wrap:balance;} .leitkopf p{margin:0; font-size:clamp(15.5px,1.3vw,18.5px); line-height:1.5; color:var(--ink2);} /* Die Zonenliste im Leitblock hat keinen Sektionsabstand mehr ueber sich. */ .leitblock .zonewrap{margin-top:0;} /* ========================================================================== DIE TITELZEILE (21.08.2026) Vorher InterVariable in 600 auf 62 px — korrekt und ohne Anspruch. Der Slogan einer Sportmarke braucht die Figur, die Sportmarken benutzen: schmal, schwer, Grossbuchstaben, eng gesetzt, mit knapper Zeilenschaltung. ABER EDEL, ALSO GEMESSEN: Gewicht 800 und nicht 900 (900 wird bei Archivo plump), Breite 78 % und nicht 62 % (darunter wird die Zeile zum Streifen und verliert die Lesbarkeit ihrer Rundungen), Zeilenabstand 0,88 statt 1,02 — die zwei Zeilen sollen als ein Block stehen. Negatives Tracking, weil grosse Buchstaben sonst auseinanderfallen; bei Grossbuchstaben nur -0,01em, denn Versalien brauchen mehr Luft als Gemeine. Nur hier. Wo Wucht ueberall steht, ist sie nirgends. ========================================================================== */ .hero h1.display{ font-family:var(--kraft); font-weight:800; font-stretch:78%; text-transform:uppercase; font-size:clamp(42px,7.6vw,108px); line-height:.88; letter-spacing:-.01em; max-width:none; margin-bottom:0; } /* Der Punkt nach jedem Wort ist der Rhythmus des Slogans. Bei Versalien in 108 px sitzt er optisch zu weit rechts — ein Hauch negatives Tracking davor holt ihn heran, ohne die Buchstaben zu verkleben. */ .hero h1.display .b{letter-spacing:-.012em;} @media(max-width:600px){ /* Auf schmalem Schirm traegt die enge Breite nicht mehr: bei 42 px wird 78 % zu gedraengt, um vier Woerter mit Punkten zu trennen. */ .hero h1.display{font-stretch:88%; line-height:.94; letter-spacing:0;} }