/* =========================================================== DAS WERK - Startseite AdenAI, Entwurf E2 (Aurora) Farben, Grundeinstellung, die Welt dahinter, Kopfzeile und Knoepfe. Teil der Kaskade in landing.html: sieben -Zeilen in fester Reihenfolge (grund, schwelle, flug, doku, fuss, kleinteile, faelle) - nicht `stil-*.css`, nicht von bauen.py zusammengesetzt. Wer die Reihenfolge aendert, aendert das Ergebnis. =========================================================== */ :root { --tinte: #08080c; --tinte-tief: #050506; --weiss: #f2f5f4; --dimm: #a6adab; /* **Am 2026-08-30 von #7a8280 auf #7e8684 angehoben**, vier Punkte je Kanal, Adrians Entscheidung. Der Ton bleibt derselbe, nur eine Stufe heller: in L* sind es 53,67 auf 55,23. Der Anlass war die duennste Stelle der Seite, `.tarif--betont .neben`. Sie stand bei 4,83 bis 4,89:1, gefordert sind 4,5, und diese Luft ist keine: der betonte Tarif ist der einzige Kasten mit eigenem Grundton (rgba(6, 20, 19, 0.76) statt --panel), und was dahinter durch die Welt zieht, faerbt ihn mit. `--dimm-leise` hatte dafuer keine Reserve mehr, 5,23:1 auf blankem Grundton war sein Hoechstwert. Am Bild gemessen, an fuenf Scrollstellungen je Stelle und mit der Differenz dreier Aufnahmen (Text da, Text da, Text weg), damit die laufende Welt nicht als Buchstabe zaehlt: vorher heute Schwelle, Prozentzahl 5,23:1 5,53:1 Preise, betonter Tarif 4,83 bis 4,89:1 5,11 bis 5,17:1 Preise, ruhiger Tarif 5,06 bis 5,09:1 5,35 bis 5,37:1 Fusszeile 5,15 bis 5,23:1 5,43 bis 5,53:1 **Eine Stelle bleibt offen, und sie steht hier statt in einer Prüfung.** Bei 1440 Pixeln, mit dem Tarifkasten im oberen Fuenftel des Fensters, zieht hinter ihm eine helle Stelle der Welt vorbei; der Grund geht dort auf #122221 hoch, und der Text faellt auf 4,18:1. Die Anhebung bringt ihn auf 4,41:1, also naeher an die 4,5, aber nicht darueber. Das ist kein Fehler dieser Zeile, sondern die Frage, ob der betonte Tarif eine deckendere Flaeche braucht. Das entscheidet Adrian, im Bericht `04-berichte/kontrast.md` mit Zahlen. */ --dimm-leise: #7e8684; /* Aurora. EINE Leitfarbe (teal), die anderen als Akzent. Blau, gruen und lila sitzen in der Welt, nicht in der Oberflaeche: eine Seite mit vier Akzentfarben im Text waere ein Regenbogen. */ --leit: #22e8d0; --leit-tief: #16b8a6; --leit-hell: #a8fff2; --auf-leit: #04211d; --linie: rgba(34, 232, 208, 0.22); --linie-kalt: rgba(242, 245, 244, 0.14); --panel: rgba(8, 10, 12, 0.74); /* **Space Grotesk statt "Segoe UI Variable Display", und das ist die eine sichtbare Abweichung vom Entwurf E2.** Der Entwurf lief per Doppelklick auf Adrians Windows-Rechner, und dort gibt es Segoe UI Variable. Auf macOS, Linux und iOS gibt es sie nicht - dort waere die Seite in eine beliebige Systemschrift gefallen, also in etwas, das niemand gesehen und niemand entschieden hat. E2 fuehrt das selbst als ungeprueften Punkt. Space Grotesk ist die Schrift des Produkts, liegt als woff2 bei und wird von base_public.html auf JEDER oeffentlichen Seite ohnehin vorgeladen: sie kostet hier null zusaetzliche Bytes und sieht ueberall gleich aus. Segoe bleibt als zweite Wahl stehen, falls die Datei nicht ankommt. */ --schrift: 'Space Grotesk', "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; /* Die Monoschrift bleibt wie im Entwurf. Das Produkt fuehrt fuer sie ohnehin nur einen Systemstapel (--font-mono in tailwind-input.css), und dieser hier ist derselbe mit Cascadia Mono davor. */ --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace; --rand: clamp(20px, 5vw, 72px); /* Die Achse als Zahl - fuer die Stellen, die sie RECHNEN muessen, statt sie als Kasten zu bekommen. Heute ist das genau eine: der Textgrund der Stationen (`.station::before`, startseite-flug.css), der mit `vw` ueber jede Fensterbreite mitwuchs. `--max-width` kommt aus tailwind-input.css und ist dieselbe Quelle, aus der `max-w-content` seine 1420 nimmt; der Rueckfallwert steht nur da, falls die Datei nicht ankommt. **Wer eine Breite abtippt, hat die Achse verlassen.** */ --achse: min(var(--max-width, 1420px), 100vw); } * { box-sizing: border-box; } html { background: var(--tinte-tief); scroll-behavior: auto; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--tinte-tief); color: var(--weiss); font-family: var(--schrift); font-size: 17px; line-height: 1.6; overflow-x: hidden; font-synthesis-weight: none; } /* Solange die Schwelle steht, wird nicht gescrollt. */ html.gesperrt, html.gesperrt body { overflow: hidden; height: 100%; } img { max-width: 100%; } ::selection { background: var(--leit); color: var(--auf-leit); } :focus-visible { outline: 2px solid var(--leit); outline-offset: 3px; border-radius: 3px; } /* ---------- Die Welt ---------------------------------------------------- */ #welt { position: fixed; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 62% 38%, #08110f 0%, #050608 55%, #030304 100%); } #leinwand { display: block; width: 100%; height: 100%; } /* Der Schleier legt sich ueber die Welt, sobald der Flug endet und gelesen werden soll. Er ersetzt jeden Textschatten. */ #schleier { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(5,5,6,0.34) 0%, rgba(5,5,6,0.58) 34%, rgba(5,5,6,0.74) 100%); } /* ---------- Kopfzeile --------------------------------------------------- */ /* Die Leiste selbst geht ueber die volle Breite - der Schleier darf nicht bei 1420 Pixeln enden, sonst stuende die Kopfzeile in einem sichtbaren Kasten. Die Achse traegt `.kopf-innen` darin, genau wie in base_public.html und doku/base_doku.html. */ #kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 20px 0 34px; pointer-events: none; /* Schleier statt Textschatten: die Kopfzeile steht auch dann sicher, wenn die Sonne durchs Bild wandert. */ background: linear-gradient(180deg, rgba(5,5,6,0.72) 0%, rgba(5,5,6,0.36) 46%, rgba(5,5,6,0) 100%); } /* ---------- Die Achse der Seite ------------------------------------------ **Sie steht nicht hier, sondern als `max-w-content mx-auto px-4 sm:px-6` im Markup** (startseite/_kopf.html, landing.html, startseite/_fuss.html) - dieselben vier Klassen wie in base_public.html und doku/base_doku.html. Die Breite kommt damit aus `--max-width` (tailwind-input.css) und wird an keiner Stelle dieser Seite abgetippt. Warum das aufgeschrieben gehoert: bis zum 2026-08-28 trug die Startseite ihre eigene Breite. Die Kopfzeile hing mit `var(--rand)` am Fensterrand, die Baender standen auf 1120 fest eingetragenen Pixeln. Im Browser gemessen, bei 1894 Pixeln Innenbreite: **das Logo sprang beim Wechsel von /doku/ auf die Startseite um 189 Pixel nach links** (261 -> 72), und die Baender waren 300 Pixel schmaler als der Container jeder anderen Seite. Eine abgetippte Zahl driftet vom Token weg, sobald einer von beiden sich aendert - eine geteilte Klasse kann das nicht. Adrians Befund im Wortlaut: *"max width wurde hier jetzt nicht eingehalten, das passt nicht so ganz zum rest."* Hier steht deshalb nur noch, dass die Reihe eine Reihe ist. */ .kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* `pointer-events` vererbt sich. `#kopf` setzt `none`, damit der Schleier die Welt darunter nicht abfaengt - die Bedienelemente holen es sich zurueck. **Die Kinder der Reihe, nicht die Reihe selbst:** `.kopf-innen` ist bis zu 1420 Pixel breit, und mit `auto` daran fienge ein Streifen ueber die halbe Fensterbreite jeden Klick ab, der der Welt gilt. */ .kopf-innen > * { pointer-events: auto; } .marke { font-family: var(--mono); font-size: 14px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--weiss); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; /* Im Entwurf mass die Trefferflaeche der Wortmarke 19 Pixel hoch - unter den 24, die wir sonst einhalten (WCAG 2.5.8). Die Zeile kostet nichts, weil die Kopfzeile ohnehin hoeher ist als der Text darin. */ min-height: 24px; } /* Hier stand im Entwurf E2 ein leuchtender Punkt vor der Wortmarke. Er ist entfallen, weil an seiner Stelle jetzt Adrians Logo steht - ein Bildzeichen neben einem Bildzeichen sind zwei Marken. Begruendung in templates/onboarding/startseite/_kopf.html. */ .kopf-rechts { display: flex; align-items: center; gap: 10px; } /* ---------- Knoepfe ------------------------------------------------------- **Hier steht keiner mehr.** Die Startseite traegt seit dem 2026-09-02 dieselben `.btn`-Stufen wie jede andere Seite (tailwind-knoepfe.css), und die Groesse fuer die grossen Handlungen heisst dort `.btn-lg`. Bis dahin standen an dieser Stelle `.knopf`, `.knopf--leit` und `.knopf--gross` aus Entwurf E2. Adrians Befund vom 2026-09-02: *"Unsere Startseite hat noch falsche Buttons, die passen nicht zur gesamten anderen Seite. Wir haben ueberall starken Border-Radius, obwohl wir ziemlich kantige Buttons haben."* Im Browser nachgemessen, 1440 Pixel, Startseite gegen /doku/: Radius 999px (Pille) gegen 8px (--radius) Mindesthoehe keine, schmal 40,8px gegen 44px (2.75rem) Polster 11/22, gross 15/30 gegen 10/16 Gewicht 400, leit 600 gegen 500, aurora 600 Sperrung 0.06em gegen keine Zeilenhoehe 1.6 (22.4px) gegen 1.25rem (20px) **Der Radius war nicht der einzige Unterschied und nicht der schlimmste.** Am Bild gemessen kam die Kante des ruhigen Knopfes (rgba(242,245,244,0.14) auf einer Fuellung von 0.05) auf **1,33 bis 1,64:1 gegen den Grund und 1,01 bis 1,51:1 gegen die eigene Fuellung**. Gefordert sind 3:1 fuer ein Bedienelement (WCAG 1.4.11). Der Knopf war als Knopf kaum zu erkennen. `.btn-secondary` traegt dafuer `--color-border-btn`, und genau deswegen. **Was rund bleiben DARF, bleibt rund.** Die Pille ist auf der Startseite nicht durchgehend falsch, sondern nur an Bedienelementen. Das Produkt benutzt sie an 166 Stellen fuer Abzeichen, Statuspunkte und Bilder und in modellwahl.css/grund-regler.css fuer Schieber und Segmentschalter. Deshalb behalten `.abzeichen` und `.schalter` (startseite-doku.css) ihre 999px. Sie sind kein Knopf, und mit dem Produkt sind sie einer Meinung. */ /* ---------- Ton-Schalter ------------------------------------------------- Er traegt `.btn .btn-secondary` und braucht davon nur die Form abgewandelt: quadratisch statt textbreit. **Kein `border-radius: 50%` mehr.** Das Produkt hat einen Symbolknopf (includes/tour_button.html, `rounded-lg`), und der ist eckig. Ein runder Knopf neben zwei kantigen war dieselbe Unstimmigkeit noch einmal, nur kleiner. **Nur die Breite steht hier, die Hoehe nicht.** Die kommt als `min-height: 2.75rem` aus `.btn`, und beide Zahlen muessen dieselbe sein, sonst wird aus dem Quadrat ein Rechteck. Sie ein zweites Mal hinzuschreiben waere die naechste Stelle, die niemand nachzieht; 2.75rem steht deshalb genau einmal in dieser Datei und meint die Breite. Das Polster darf `.kopf-rechts .btn` (startseite-faelle.css) schmal ueberschreiben, ohne dass etwas passiert: die Breite ist fest und `box-sizing` ist `border-box`. Auf 320 nachgemessen, 44 x 44. */ .ton { width: 2.75rem; padding: 0; } /* Zwei Zeichen, eines je Zustand, und immer nur eines sichtbar. **Der Umschalter ist `aria-pressed` selbst**, nicht eine zweite Klasse: das Attribut muss ohnehin stimmen, weil der Screenreader daran haengt, und startseite.js zieht es bei jedem Klick nach. Eine Klasse daneben waere ein zweiter Ort fuer denselben Zustand. 20 Pixel wie jedes andere Zeichen des Produkts. Die Trefferflaeche bleibt die 44 des Knopfes; hier steht die Groesse der Zeichnung, nicht die des Ziels. Warum ueberhaupt ein Lautsprecher und warum mit einem Plus, steht in templates/onboarding/startseite/_kopf.html beim Knopf. */ .ton .ton-aus { display: block; width: 20px; height: 20px; } .ton[aria-pressed="true"] .ton-aus { display: none; } .ton[aria-pressed="false"] .balken { display: none; } .ton .balken { display: flex; align-items: center; gap: 2.5px; height: 15px; } .ton .balken i { display: block; width: 2.5px; height: 4px; background: var(--dimm); border-radius: 2px; transition: height 0.2s ease, background 0.2s ease; } /* Eingeschaltet ist er ein `.btn-primary` in klein: deckende Kante, getoente Flaeche. **Deckend, weil ein Bedienelement 3:1 halten muss.** Vorher stand hier `--linie` (rgba(34,232,208,0.22)); ueber dem Grund der Seite gerechnet sind das 1,56:1, und damit war die Kante im eingeschalteten Zustand schwaecher als im ausgeschalteten. Dieselbe Leiter hat `.btn-danger` am 2026-08-30 durchlaufen, die Rechnung steht in tests/test_kontrast_gerendert.py. Beide Werte kommen aus dem Produkt und nicht aus dieser Datei: `--color-accent` ist derselbe Ton wie `--leit`, und `--color-accent-muted` ist die 0,14er Tinte, die `.btn-primary` traegt. Hier stand vorher 0,13, also dieselbe Farbe mit einer eigenen Zahl. */ .ton[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-muted); } .ton[aria-pressed="true"] .balken i { background: var(--leit); } .ton[aria-pressed="true"] .balken i:nth-child(1) { height: 6px; animation: puls 1.4s ease-in-out infinite; } .ton[aria-pressed="true"] .balken i:nth-child(2) { height: 14px; animation: puls 1.1s ease-in-out infinite 0.15s; } .ton[aria-pressed="true"] .balken i:nth-child(3) { height: 9px; animation: puls 1.7s ease-in-out infinite 0.3s; } .ton[aria-pressed="true"] .balken i:nth-child(4) { height: 5px; animation: puls 1.3s ease-in-out infinite 0.45s; } @keyframes puls { 0%,100% { transform: scaleY(0.55); } 50% { transform: scaleY(1); } }