/* * Headletic App – Gestaltungsschicht * * Grundlage: 01_Konzept/V8/16_Design_Guide.md, Fassung V9.0 vom 31.07.2026. * Diese Datei ist die einzige Stelle mit Farbe, Typografie und Abstand. Kein * Bildschirm bringt eigenen Stil mit – sonst driftet die Gestaltung mit jedem * neuen Paket auseinander. * * SECHS REGELN AUS DEM GUIDE, DIE HIER TECHNISCH VERANKERT SIND: * * 1. Tiefe entsteht durch Licht und Textur, nie durch Schatten oder Rahmen. * Es gibt in dieser Datei kein einziges box-shadow ausser dem Lichtschein * unter dem Primaerknopf – und der ist Licht, kein Schatten. * 2. Eine Systemfarbe: Bernstein-Gold. Kein zweites Blau, kein Erfolgsgruen, * kein Alarmrot. Fehlerzustaende laufen ueber Text und Position. * 3. Die Weggefaehrten-Farben sind Bildfarben, keine Textfarben. Mattis und * Derya liegen unter 4,5:1 – als Blatt und Punkt einwandfrei, als Schrift * ein Barrierefreiheitsfehler. * 4. Die Serife ist auf wenige Momente beschraenkt. Der laufende Dialog mit * dem Weggefaehrten laeuft ausschliesslich in der Sans, sonst wird die * Figur in ein Erzaehlformat zurueckverwandelt. * 5. Alle Chips haben exakt dasselbe visuelle Gewicht. „Hab's gemacht" darf * gegenueber „Hatte keine Kraft" keinen optischen Vorteil haben. * 6. prefers-reduced-motion wird zwingend respektiert, nicht als Hoeflichkeit. * * MODUSWAHL: Dark ist der Standard. Light ist gleichwertig, nicht nachrangig. * Gesteuert ueber data-theme am -Element (hl-theme.js). Ohne Javascript * greift die Systemeinstellung. */ /* --------------------------------------------------------------------------- * Schriften * * Selbst gehostet, nie von einem fremden Server geladen – dieselbe Regel wie * fuer die Google Fonts in Elementor. Solange die Dateien fehlen, greift der * Systemstapel. * * Die Serife ist ab V9.0 Fraunces statt Merriweather: hoeherer Kontrast in * grossen Graden, was die Momente ab 2,25 rem erst traegt. * ------------------------------------------------------------------------- */ @font-face { font-family: "Headletic Sans"; src: url("fonts/inter-variable.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "Headletic Serif"; src: url("fonts/fraunces-variable.woff2") format("woff2-variations"); font-weight: 300 700; font-display: swap; } /* --------------------------------------------------------------------------- * Token – Dark Mode ist der Standardfall * ------------------------------------------------------------------------- */ :root { /* Flaechen */ --hl-grund: #12100F; /* warmes Fast-Schwarz, nie blaustichig */ --hl-flaeche: #1C1917; --hl-flaeche-hoch: #221E1B; --hl-haarlinie: rgba(245, 241, 234, .10); /* Typografie */ --hl-text: #F5F1EA; /* 16,85:1 gegen Grund */ --hl-text-leise: #A39A8E; /* 6,84:1 gegen Grund, 6,30:1 gegen Flaeche */ /* Signaturfarbe – die einzige Systemfarbe */ --hl-gold: #E9A23B; /* 8,76:1 gegen Grund */ --hl-gold-hell: #D68F28; /* abgedunkelt, fuer Flaechen im Light Mode */ --hl-gold-ink: #1A1206; /* 8,56:1 auf Goldflaeche */ --hl-gold-text: var(--hl-gold); --hl-gold-schein: 0 0 44px -6px rgba(233, 162, 59, .55); --hl-gold-tint: rgba(233, 162, 59, .10); /* Sicherheitsebene: neutral, keine eigene Farbfamilie mehr. Erkennbar ueber Position und Wortwahl, nicht ueber Farbe. */ --hl-safety: var(--hl-text-leise); --hl-safety-flaeche: rgba(245, 241, 234, .05); /* Weggefaehrten – BILDFARBEN, NIE TEXTFARBEN (Guide 2.4) */ --hl-mattis: #3E7A70; /* 3,82:1 – unter 4,5, nur Flaeche */ --hl-sven: #D98341; --hl-bettina: #C99AA0; --hl-derya: #B4573F; /* 3,95:1 – unter 4,5, nur Flaeche */ --hl-jana: #C2A054; --hl-tobias: #E0BC5C; --hl-anke: #8B7BA0; /* Licht */ --hl-glow: .16; /* * BLATTMISCHUNG. Wohin die Figurfarbe gemischt wird, damit ein kleines * Blatt vom Grund abhebt. Im Dunkeln zur Textfarbe hin, im Hellen zur * Tinte - dieselbe Farbe in beide Richtungen aufzuhellen waere im * Hellmodus genau die falsche Richtung. */ --hl-blatt-mischung: #F5F1EA; --hl-blatt-anteil: 72%; --hl-grain: .032; /* Schrift */ --hl-sans: "Headletic Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif; --hl-serif: "Headletic Serif", Charter, "Iowan Old Style", Georgia, serif; /* Typoskala – rem-basiert, damit Dynamic Type bis 200 % traegt */ --hl-t-moment: 2.25rem; --hl-t-gross: 1.75rem; --hl-t-titel: 1.375rem; --hl-t-basis: 1.0625rem; --hl-t-klein: 0.9375rem; --hl-t-eyebrow: 0.6875rem; /* Abstandsskala */ --hl-s1: .25rem; --hl-s2: .5rem; --hl-s3: .75rem; --hl-s4: 1rem; --hl-s5: 1.5rem; --hl-s6: 2rem; --hl-s7: 3rem; --hl-radius: 16px; /* Tuer B, Knoepfe */ --hl-radius-eng: 8px; /* Tuer A, Chips */ --hl-breite: 32rem; --hl-zeit: 150ms; --hl-kurve: ease-out; color-scheme: dark; } /* --------------------------------------------------------------------------- * Light Mode – gleichwertig, nicht nachrangig * * Rund ein Drittel der Nutzer bleibt bewusst im hellen Modus, und bei Katarakt * oder Astigmatismus ist er die verlaesslichere Wahl. * * Gold liegt gegen Off-White nur bei 2,03:1. Deshalb ist Gold hier * ausschliesslich Flaeche; klickbarer Text nutzt --hl-gold-text. * ------------------------------------------------------------------------- */ :root[data-theme="hell"] { /* * Der Grund ist bewusst tiefer als das Papierweiss der Karten. * * Erste Fassung hatte #FAF7F2 gegen #FFFFFF - rund 1,03:1. Auf dem Schirm * war das keine Karte mehr, sondern ein Fleck. Im Dunkelmodus traegt die * Flaeche allein, weil dort jeder Helligkeitssprung sofort sichtbar ist; * im Hellmodus stimmt das nicht, und deshalb bekommt die Karte hier * zusaetzlich eine Haarlinie (siehe .hl-karte weiter unten). */ --hl-grund: #F1EDE5; --hl-flaeche: #FFFFFF; --hl-flaeche-hoch: #FFFFFF; --hl-haarlinie: rgba(26, 18, 6, .12); --hl-text: #1A1614; /* ~15,9:1 */ --hl-text-leise: #6B625A; /* ~5,9:1 */ --hl-gold-text: #8A5A10; /* ~5,6:1 – nur hier weicht Text von Flaeche ab */ --hl-gold-schein: none; --hl-gold-tint: rgba(138, 90, 16, .07); --hl-safety: var(--hl-text-leise); --hl-safety-flaeche: rgba(26, 18, 6, .04); --hl-glow: 0; /* im Light Mode gibt es keine Glows */ --hl-blatt-mischung: #1A1614; --hl-blatt-anteil: 55%; --hl-grain: .02; color-scheme: light; } /* Ohne Javascript und ohne gespeicherte Wahl: Systemeinstellung. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --hl-grund: #F1EDE5; --hl-flaeche: #FFFFFF; --hl-flaeche-hoch: #FFFFFF; --hl-haarlinie: rgba(26, 18, 6, .12); --hl-text: #1A1614; --hl-text-leise: #6B625A; --hl-gold-text: #8A5A10; --hl-gold-schein: none; --hl-gold-tint: rgba(138, 90, 16, .07); --hl-safety: #6B625A; --hl-safety-flaeche: rgba(26, 18, 6, .04); --hl-glow: 0; --hl-blatt-mischung: #1A1614; --hl-blatt-anteil: 55%; --hl-grain: .02; color-scheme: light; } } /* --------------------------------------------------------------------------- * Grundgeruest * ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--hl-grund); } body.hl-app { position: relative; margin: 0; min-height: 100vh; background: var(--hl-grund); color: var(--hl-text); font-family: var(--hl-sans); font-size: var(--hl-t-basis); line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: max(var(--hl-s7), env(safe-area-inset-bottom)); overflow-wrap: break-word; } /* --------------------------------------------------------------------------- * Film-Grain * * Der wirksamste einzelne Griff im ganzen System: bricht das flache * Pixel-Schwarz auf und laesst das Gold erst richtig leuchten. Inline-SVG, * keine Bilddatei, kein Netzwerkzugriff. * ------------------------------------------------------------------------- */ .hl-app::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--hl-grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------------- * Radiale Glows – nur Dark Mode, nur Tuer B * * Maximal zwei pro Bildschirm, immer hinter allem Text, nie klickbar. * ------------------------------------------------------------------------- */ .hl-welt-training::before { content: ""; position: fixed; top: 12vh; left: -18vw; width: 78vw; height: 78vw; max-width: 420px; max-height: 420px; border-radius: 50%; background: var(--hl-gold); filter: blur(60px); opacity: var(--hl-glow); pointer-events: none; z-index: 0; } /* * DIE KOPFZEILE STAND HIER FRUEHER MIT DRIN. Sie darf es nicht. * * Die Regel hebt Titel und Inhalt ueber den Lichtschein bei z-index 0. Fuer * die Kopfzeile war sie nicht nur ueberfluessig - sie war schaedlich, und * zwar doppelt. * * ERSTENS DAS AUFKLAPPMENUE. ".hl-welt-training .hl-kopf" ist spezifischer * als ".hl-kopf" und ueberschrieb deshalb dessen z-index 20 mit 1. Die * Kopfzeile eroeffnet damit einen Stapelkontext auf Ebene 1; das nav darin * mit z-index 30 stapelt nur noch INNERHALB dieses Kontexts und kommt als * Ganzes nie hoeher als 1. Der Inhalt steht ebenfalls auf 1, kommt im * Dokument aber spaeter - und gewinnt bei Gleichstand. Ergebnis: Der Baum * wuchs in das geoeffnete Menue hinein. * * ZWEITENS DIE HAFTUNG. "position: relative" ueberschrieb "position: sticky". * Im Trainingsbereich - ausgerechnet dort, wo der Baum lang ist und man viel * scrollt - blieb die Kopfzeile also gar nicht oben stehen. Das ist nie * gemeldet worden, weil es aussah wie eine Entscheidung. * * Beides verschwindet, sobald die Kopfzeile ihre eigenen Werte behaelt: 20 * ist groesser als 0, sie liegt ohnehin ueber dem Schein. */ .hl-welt-training .hl-titel, .hl-welt-training .hl-inhalt { position: relative; z-index: 1; } /* --------------------------------------------------------------------------- * Kopfzeile: ruhig, duenn, immer der Hilfezugang rechts. * * Kein backdrop-filter: unberechenbarer Kontrast und spuerbare * Framerate-Kosten auf Mittelklasse-Android (Guide 3.3). Stattdessen deckend. * ------------------------------------------------------------------------- */ .hl-kopf { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: var(--hl-s3); padding: max(var(--hl-s3), env(safe-area-inset-top)) var(--hl-s5) var(--hl-s3); background: var(--hl-grund); border-bottom: 1px solid var(--hl-haarlinie); } /* * Auf schmalen Geraeten ruecken die Elemente enger zusammen. * * Die Innenabstaende der Zeile schrumpfen von 1,5rem auf 1rem, der Abstand * zwischen den Elementen von 0,75rem auf 0,5rem. Zusammen sind das 24 Pixel, * die dem Schriftzug zugutekommen. Die Bedienflaechen selbst bleiben * unveraendert - die Mindestgroesse von 3rem ist keine Verhandlungsmasse. */ @media (max-width: 26rem) { .hl-kopf { gap: var(--hl-s2); padding-inline: var(--hl-s4); } .hl-hilfe, .hl-wechsel, .hl-bereiche > summary { padding-inline: var(--hl-s2); } } /* * Der Schriftzug. * * Bronzefarbene Buchstaben auf transparentem Grund, unveraendert in beiden * Modi. Eine erste Fassung hellte ihn im Dunkelmodus auf, weil er dort * rechnerisch nur 2,2:1 erreicht. Ronny hat das zurueckgenommen, und zu Recht: * Der Schriftzug ist kein Text, den jemand lesen muss, sondern eine Signatur. * Er darf leise sein - der Bildschirmtitel darunter sagt ohnehin, wo man ist. * Aufgehellt verliert das Bronze seine Tiefe und wird zu Orange. * * Die Hoehe ist bewusst klein. Das Markenzeichen soll da sein, nicht wirken. */ img.hl-marke { display: block; height: .875rem; width: auto; margin-right: auto; } /* * DER SCHRIFTZUG GIBT NACH, STATT ZU SCHIEBEN. * * Er ist 877 zu 91 Pixel breit - bei .875rem Hoehe also rund 135 Pixel. Auf * einem 320 Pixel breiten Bildschirm war das der groesste Posten in der * Kopfzeile, und weil ein Bild mit fester Hoehe nicht schrumpft, schob er * alles Uebrige nach rechts hinaus. * * min-width:0 hebt die Vorgabe von Flexbox auf, dass ein Element nie kleiner * wird als sein Inhalt. Erst damit darf das Bild kleiner werden als seine * natuerliche Breite; height:auto haelt dabei das Seitenverhaeltnis. * * Die Untergrenze ist bewusst gesetzt: Unter etwa 90 Pixeln ist der Zug nicht * mehr als Wort lesbar, sondern nur noch eine bronzene Linie. Dann lieber * abgeschnitten als unleserlich - deshalb nicht kleiner als das. */ .hl-kopf > img.hl-marke, .hl-kopf > .hl-marke-weg { flex: 0 1 auto; min-width: 5.5rem; } .hl-kopf > img.hl-marke, .hl-marke-weg img.hl-marke { max-width: 100%; height: auto; max-height: .875rem; } /* * Der Schriftzug als Weg nach Hause. * * Das Umschliessen mit einem Anker verschiebt den margin-right:auto, mit dem * das Bild bisher alles Uebrige nach rechts geschoben hat - der Anker ist * jetzt das Flex-Kind, nicht mehr das Bild. Deshalb wandert die Regel hierher. * * Die Bedienflaeche ist groesser als das Bild. Der Schriftzug ist mit .875rem * absichtlich klein, und was klein aussehen soll, muss deshalb nicht klein zu * treffen sein. Das Innenabstandspolster macht daraus ein Ziel, das man auch * mit dem Daumen erwischt, ohne dass sich optisch etwas aendert. */ .hl-marke-weg { display: inline-flex; align-items: center; margin-right: auto; padding: var(--hl-s3) var(--hl-s3) var(--hl-s3) 0; margin-block: calc(var(--hl-s3) * -1); border-radius: var(--hl-radius-eng); transition: opacity var(--hl-zeit) var(--hl-kurve); } .hl-marke-weg img.hl-marke { margin-right: 0; } .hl-marke-weg:hover { opacity: .7; } /* Rueckfall, solange irgendwo noch das Wort statt des Bildes steht. */ span.hl-marke { font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-text-leise); margin-right: auto; } .hl-hilfe { font-size: var(--hl-t-klein); font-weight: 600; color: var(--hl-text-leise); text-decoration: none; padding: var(--hl-s2) var(--hl-s3); border-radius: var(--hl-radius-eng); transition: background var(--hl-zeit) var(--hl-kurve), color var(--hl-zeit) var(--hl-kurve); } .hl-hilfe:hover { background: var(--hl-safety-flaeche); color: var(--hl-text); } /* * Der Profilzugang. * * Bewusst leiser als die Hilfe: Er teilt deren Groesse und Abstaende, aber * nicht deren Farbwechsel beim Ueberfahren. Die Hilfe darf auffallen, wenn * jemand sie sucht - das Profil nicht. Es ist eine Schublade, kein Angebot. */ .hl-profil { font-size: var(--hl-t-klein); color: var(--hl-text-leise); text-decoration: none; padding: var(--hl-s2) var(--hl-s3); border-radius: var(--hl-radius-eng); transition: color var(--hl-zeit) var(--hl-kurve); } .hl-profil:hover { color: var(--hl-text); } /* * Der Schalter in G4. * * Alle drei Arten sehen gleich aus. Es gibt hier keine Regel, die eine davon * hervorhebt, empfiehlt oder vorbelegt - der Vorgabezustand ist "aus", und * ein gestalterischer Hinweis darauf, welche man "eigentlich" einschalten * sollte, waere eine Empfehlung durch die Hintertuer. */ .hl-schalter { display: flex; gap: var(--hl-s3); align-items: flex-start; padding: var(--hl-s3) 0; /* * --hl-linie und --hl-t-normal gab es nie. Beide Namen standen nur hier, * beide waren nirgends definiert - die Trennlinie zwischen den Schaltern * ist deshalb seit jeher unsichtbar geblieben, und die Beschriftung fiel * auf die geerbte Schriftgroesse zurueck. Ein Tippfehler, der nichts * kaputtmacht und deshalb niemandem auffaellt. */ border-bottom: 1px solid var(--hl-haarlinie); cursor: pointer; } .hl-schalter:last-of-type { border-bottom: 0; } .hl-schalter input { margin-top: .25em; flex: none; } .hl-schalter span { font-size: var(--hl-t-klein); color: var(--hl-text-leise); line-height: 1.5; } .hl-schalter strong { color: var(--hl-text); font-size: var(--hl-t-basis); } /* * Der Weltwechsel. * * Ein Wort, kein Knopf. Er nennt die andere Welt und sonst nichts - kein * "wechseln zu", kein Symbol, keine Erklaerung. Wer zwischen Bibliothek und * Training springt, will nicht ueberzeugt werden, er will springen. */ .hl-wechsel { margin-left: auto; font-size: var(--hl-t-klein); font-weight: 500; color: var(--hl-text-leise); text-decoration: none; padding: var(--hl-s2) var(--hl-s3); border-radius: var(--hl-radius-eng); white-space: nowrap; transition: color var(--hl-zeit) var(--hl-kurve), background var(--hl-zeit) var(--hl-kurve); } .hl-wechsel:hover { color: var(--hl-text); background: var(--hl-safety-flaeche); } /* Steht ein Rueckweg links, schiebt der ihn schon nach rechts. */ .hl-zurueck ~ .hl-wechsel { margin-left: 0; } /* --------------------------------------------------------------------------- * Das Bereichsmenue * * Sieht aus wie der Wechsel daneben, weil es an seiner Stelle steht und * dasselbe tut - nur fuer mehr als ein Ziel. Ein drittes Erscheinungsbild in * einer Kopfzeile mit vier Bedienelementen waere eine Grammatik zu viel. * * OHNE BEWEGUNG. Kein Aufklappen, kein Einblenden, kein Uebergang auf der * Hoehe - Tuer B kennt keine Animation, und die Kopfzeile gehoert zu jeder * Tuer.
klappt von sich aus ohne Uebergang auf. * ------------------------------------------------------------------------- */ .hl-bereiche { position: relative; margin-left: auto; } .hl-zurueck ~ .hl-bereiche { margin-left: 0; } .hl-bereiche > summary { list-style: none; cursor: pointer; font-size: var(--hl-t-klein); font-weight: 500; color: var(--hl-text-leise); padding: var(--hl-s2) var(--hl-s3); border-radius: var(--hl-radius-eng); white-space: nowrap; transition: color var(--hl-zeit) var(--hl-kurve), background var(--hl-zeit) var(--hl-kurve); } /* Der Pfeil, den Safari und Firefox von sich aus setzen. */ .hl-bereiche > summary::-webkit-details-marker { display: none; } .hl-bereiche > summary::marker { content: ""; } .hl-bereiche > summary:hover, .hl-bereiche[open] > summary { color: var(--hl-text); background: var(--hl-safety-flaeche); } .hl-bereiche > nav { position: absolute; top: calc(100% + var(--hl-s2)); right: 0; z-index: 30; min-width: 11rem; display: flex; flex-direction: column; padding: var(--hl-s2); background: var(--hl-flaeche-hoch); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .7); } .hl-bereiche > nav a { padding: var(--hl-s3) var(--hl-s4); border-radius: var(--hl-radius-eng); color: var(--hl-text); text-decoration: none; font-size: var(--hl-t-basis); min-height: 2.75rem; display: flex; align-items: center; } .hl-bereiche > nav a:hover { background: var(--hl-safety-flaeche); } :root[data-theme="hell"] .hl-bereiche > nav { box-shadow: 0 12px 32px -12px rgba(60, 42, 20, .22); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-bereiche > nav { box-shadow: 0 12px 32px -12px rgba(60, 42, 20, .22); } } /* Der Rueckweg. Steht an der Stelle des Markennamens und nennt das Ziel - "Zurück" allein sagt nicht, wohin. Er ersetzt keinen Browserschritt, er fuehrt strukturell eine Ebene hoeher. */ .hl-zurueck { display: inline-flex; align-items: center; gap: var(--hl-s2); margin-right: auto; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--hl-t-klein); font-weight: 500; color: var(--hl-text-leise); text-decoration: none; padding: var(--hl-s2) var(--hl-s3) var(--hl-s2) 0; transition: color var(--hl-zeit) var(--hl-kurve); } .hl-zurueck:hover { color: var(--hl-text); } .hl-zurueck span { font-size: 1.1em; line-height: 1; } /* Moduswechsel hell/dunkel. Sitzt im Rahmen, damit ihn kein Bildschirm vergessen kann – dieselbe Begruendung wie beim Hilfezugang. */ .hl-modus { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--hl-haarlinie); border-radius: 50%; background: transparent; color: var(--hl-text-leise); cursor: pointer; transition: color var(--hl-zeit) var(--hl-kurve), border-color var(--hl-zeit) var(--hl-kurve); } .hl-modus:hover { color: var(--hl-gold-text); border-color: var(--hl-gold-text); } .hl-modus svg { width: 1.05rem; height: 1.05rem; display: block; } /* Sonne im Dunkelmodus (Angebot: hell werden), Mond im Hellmodus. */ .hl-modus .hl-sonne { display: block; } .hl-modus .hl-mond { display: none; } :root[data-theme="hell"] .hl-modus .hl-sonne { display: none; } :root[data-theme="hell"] .hl-modus .hl-mond { display: block; } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-modus .hl-sonne { display: none; } :root:not([data-theme]) .hl-modus .hl-mond { display: block; } } .hl-titel, .hl-inhalt { max-width: var(--hl-breite); margin-inline: auto; padding-inline: var(--hl-s5); } .hl-titel { font-size: var(--hl-t-gross); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: var(--hl-s6) auto var(--hl-s4); text-wrap: balance; } .hl-eyebrow { display: block; max-width: var(--hl-breite); margin: var(--hl-s5) auto calc(var(--hl-s4) * -1); padding-inline: var(--hl-s5); font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-text-leise); } .hl-inhalt > p { margin: 0 0 var(--hl-s4); } /* Redaktioneller Text aus dem Editor. */ .hl-beschreibung > * { margin: 0 0 var(--hl-s4); } .hl-beschreibung > :last-child { margin-bottom: 0; } .hl-beschreibung a { color: var(--hl-gold-text); } /* Formulare bringen keinen eigenen Abstand mit – der Rhythmus kommt aus den Elementen darin, sonst entsteht an jedem Bildschirmende eine Lücke. */ .hl-formular { margin: var(--hl-s5) 0 0; } .hl-formular > :last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Die besonderen Momente * * Nur hier ist die Serife erlaubt: Identitaetssatz, Erkennen-Frage und der * Kernsatz der Tagesbegegnung. Nicht im Dialog mit dem Weggefaehrten, nicht in * Ueberschriften, nirgends sonst. Der Groessensprung ist Absicht. * ------------------------------------------------------------------------- */ .hl-moment { font-family: var(--hl-serif); font-weight: 300; font-size: var(--hl-t-moment); line-height: 1.18; letter-spacing: -.01em; margin: var(--hl-s6) 0; text-wrap: pretty; } .hl-moment em { font-style: italic; color: var(--hl-gold-text); } /* --------------------------------------------------------------------------- * Karten * * Kein Rahmen. Die Karte trennt sich ueber die Flaeche gegen den Grund. * ------------------------------------------------------------------------- */ /* * Die Karte ist flach und weit. * * Ohne Grafik und ohne Rahmen traegt allein der Leerraum. Deshalb liegt der * Innenabstand oben und unten bewusst niedriger als seitlich: Eine Kachel, die * hoeher als noetig ist, wirkt aufgeblasen; eine, die seitlich zu eng sitzt, * wirkt gedraengt. */ /* * DER ABSTAND STEHT OBEN UND UNTEN, NICHT NUR UNTEN. * * Bis dahin hatte die Karte ausschliesslich einen Abstand nach unten. Zwischen * zwei Karten sah das richtig aus, weil dort immer eine von beiden fuer den * Zwischenraum sorgte. Steht aber etwas ANDERES davor - auf G5 ein Formular * mit dem Knopf "Alle Daten herunterladen" -, klebt die Karte daran, und * ausgerechnet "Konto loeschen" sass ohne Luft direkt unter einem Knopf. * * Die Loesung braucht keine Sonderregel: Senkrechte Abstaende benachbarter * Elemente fallen in CSS zusammen. Zwei gestapelte Karten haben deshalb * weiterhin genau einen Abstand von s2 und nicht zwei - es sieht also * ueberall dort gleich aus, wo es vorher richtig war, und nur dort anders, * wo es falsch war. */ .hl-karte { background: var(--hl-flaeche); border: 0; border-radius: var(--hl-radius); padding: var(--hl-s4) var(--hl-s5); margin: var(--hl-s2) 0; } .hl-karte > :first-child { margin-top: 0; } .hl-karte > :last-child { margin-bottom: 0; } .hl-karte h2 { font-size: var(--hl-t-titel); line-height: 1.3; font-weight: 600; margin: 0 0 var(--hl-s2); } .hl-karte p { margin: 0 0 var(--hl-s3); } /* * TIEFE IM HELLMODUS: weiches Auflicht statt Kante. * * Zwischenstand war eine Haarlinie. Sie loeste das Kontrastproblem und schuf * ein neues: Eine Karte mit grauer Kontur auf beigem Grund sieht aus wie ein * Formularfeld, nicht wie ein Gegenstand. * * DAS IST KEINE AUSNAHME VON REGEL 1, SONDERN IHRE KONSEQUENZ. Im Dunkelmodus * liegt die Lichtquelle im Bild - die hellere Flaeche IST das Licht, deshalb * braucht sie nichts weiter. Im Hellmodus liegt das Licht ausserhalb, von * oben. Ein Gegenstand, der auf einer Flaeche liegt, wirft dann einen weichen, * grossen Schatten. Genau der wird hier nachgebaut. * * Verboten bleibt, was verboten war: harte Kanten-Schatten mit kleinem Radius * und sichtbarem Versatz. Diese hier sind weit, weich, warm getoent und * einzeln praktisch unsichtbar. */ :root[data-theme="hell"] .hl-karte, :root[data-theme="hell"] .hl-wahlknopf, :root[data-theme="hell"] .hl-regal .hl-karte { box-shadow: 0 1px 2px rgba(60, 42, 20, .04), 0 8px 24px -8px rgba(60, 42, 20, .10); } :root[data-theme="hell"] a.hl-karte:hover, :root[data-theme="hell"] .hl-wahlknopf:hover { box-shadow: 0 2px 4px rgba(60, 42, 20, .05), 0 12px 32px -8px rgba(60, 42, 20, .14); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-karte, :root:not([data-theme]) .hl-wahlknopf, :root:not([data-theme]) .hl-regal .hl-karte { box-shadow: 0 1px 2px rgba(60, 42, 20, .04), 0 8px 24px -8px rgba(60, 42, 20, .10); } :root:not([data-theme]) a.hl-karte:hover, :root:not([data-theme]) .hl-wahlknopf:hover { box-shadow: 0 2px 4px rgba(60, 42, 20, .05), 0 12px 32px -8px rgba(60, 42, 20, .14); } } /* * Im Dunkelmodus faengt die Oberkante der Karte Licht. * * Eine Flaeche ohne jede Kante liest sich als graues Rechteck. Eine einzige * helle Linie an der Oberkante macht daraus einen Koerper, der Licht von oben * abbekommt. Ein Pixel, 6 Prozent, und der Unterschied ist erheblich. */ .hl-karte, .hl-wahlknopf { box-shadow: inset 0 1px 0 rgba(245, 241, 234, .06); } /* Die Kurzbeschreibung in Listenkarten. */ .hl-kurz { display: block; margin: 0 0 var(--hl-s2); font-size: var(--hl-t-klein); line-height: 1.5; color: var(--hl-text-leise); } /* Karte, die den empfohlenen Weg traegt – eine Lichtkante links, keine Farbflaeche und kein Rahmen ringsum. */ .hl-karte-hervor { border-left: 2px solid var(--hl-gold); } /* * Der Teil der Route, der noch kommt. * * Er ist sichtbar, damit man die Laenge des Weges kennt - und leise, damit * niemand versucht, ihn anzutippen. KEIN SCHLOSS UND KEIN GRAUSCHLEIER: Ein * Schloss behauptet, hier sei etwas verschlossen, das man aufbekommen koennte. * Hier ist nichts verschlossen, es ist nur noch nicht dran. */ .hl-karte-spaeter { opacity: .55; cursor: default; } /* * Metadaten als Mikrotypografie. * * Vorher standen "ca. 27 Min" und der Kartentitel fast gleich gross * untereinander - das las sich wie Fliesstext und nicht wie ein Datenblatt. * Jetzt: klein, Versalien, weiter Buchstabenabstand, leiser Ton. Der Blick * springt zum Titel und findet die Angaben erst, wenn er sie sucht. * * Versalien nur hier, nur fuer kurze Angaben. Ganze Saetze in Grossbuchstaben * sind schwerer lesbar, besonders bei Lese-Rechtschreib-Schwaeche. */ .hl-meta { font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--hl-text-leise); display: flex; flex-wrap: wrap; align-items: center; gap: var(--hl-s1) var(--hl-s3); margin: 0; } .hl-meta span { display: inline-flex; align-items: center; gap: var(--hl-s1); } /* Trennpunkt zwischen den Angaben statt nur Abstand. */ .hl-meta span + span::before { content: "·"; margin-right: var(--hl-s3); opacity: .5; } .hl-meta a { letter-spacing: inherit; } /* --------------------------------------------------------------------------- * Knoepfe * * gold-ink auf Goldflaeche liegt bei 8,56:1. Die alte Sonderregel * „mindestens 16px bei Gewicht 600 wegen Kontrast" ist damit hinfaellig – * 16px/600 bleibt trotzdem der Standardwert, jetzt aus Gestaltungsgruenden. * ------------------------------------------------------------------------- */ .hl-knopf, .hl-knopf-leise { display: block; width: 100%; min-height: 3rem; padding: var(--hl-s3) var(--hl-s5); border-radius: var(--hl-radius); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--hl-zeit) var(--hl-kurve), border-color var(--hl-zeit) var(--hl-kurve); } .hl-knopf { background: var(--hl-gold); color: var(--hl-gold-ink); border: 1px solid var(--hl-gold); } .hl-knopf:hover { background: color-mix(in srgb, var(--hl-gold) 88%, #fff); } /* * DER LEUCHTSCHEIN GEHOERT AUSSCHLIESSLICH IN TUER B. * * Er stand vorher an jedem Primaerknopf, also auch in der Bibliothek - und das * war ein Regelbruch: In Tuer A ist Licht linear, nie bluehend. Gold erscheint * dort als Kante und als Fortschritt, nicht als Schein (Design Guide 6.2). */ .hl-welt-training .hl-knopf { box-shadow: var(--hl-gold-schein); } /* * Der Primaerknopf in Tuer A ist monochrom. * * Warum nicht einfach Gold ohne Schein: In der Bibliothek traegt Gold bereits * die Fortschrittsanzeige und die Leuchtkante. Eine dritte goldene Flaeche * daneben nimmt beiden ihre Bedeutung. Der Knopf wird deshalb zur maximal * kontrastreichen Flaeche - im Dunkelmodus gebrochenes Weiss auf dunklem * Grund, im Hellmodus umgekehrt. Beides ohne Schatten, satt und flach. */ .hl-welt-bibliothek .hl-knopf { background: var(--hl-text); color: var(--hl-grund); border-color: var(--hl-text); box-shadow: none; } .hl-welt-bibliothek .hl-knopf:hover { background: color-mix(in srgb, var(--hl-text) 88%, var(--hl-grund)); } /* * IM HELLMODUS WIRD DARAUS GOLD. * * Die monochrome Loesung traegt im Dunkelmodus: Dort ist gebrochenes Weiss auf * fast-schwarzem Grund hell und einladend. Im Hellmodus dreht sie sich um - * und ein fast schwarzer Block auf warmem Papier erschlaegt den Bildschirm, * statt zu einer Handlung einzuladen. * * Deshalb hier ein leicht abgedunkeltes Signaturgold. Es traegt die Waerme des * ganzen Systems, sticht als einzige Handlung sofort heraus und steht in * derselben Farbfamilie wie die Fortschrittslinie darueber. * * Der Einwand gegen Gold in Tuer A bleibt bestehen, greift hier aber nicht: * Verboten ist Gold als BLUEHENDES Licht. Eine flache Flaeche ohne Schein ist * kein Bloom. Und der Kontrast stimmt - 7,06:1 fuer die Schrift darauf. */ :root[data-theme="hell"] .hl-welt-bibliothek .hl-knopf { background: var(--hl-gold-hell); color: #12100F; border-color: var(--hl-gold-hell); } :root[data-theme="hell"] .hl-welt-bibliothek .hl-knopf:hover { background: color-mix(in srgb, var(--hl-gold-hell) 88%, #000); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-welt-bibliothek .hl-knopf { background: var(--hl-gold-hell); color: #12100F; border-color: var(--hl-gold-hell); } :root:not([data-theme]) .hl-welt-bibliothek .hl-knopf:hover { background: color-mix(in srgb, var(--hl-gold-hell) 88%, #000); } } .hl-knopf-leise { background: transparent; color: var(--hl-text); border: 1px solid var(--hl-haarlinie); } .hl-knopf-leise:hover { border-color: var(--hl-gold-text); color: var(--hl-gold-text); } .hl-knopf + .hl-knopf-leise, .hl-knopf-leise + .hl-knopf-leise { margin-top: var(--hl-s2); } /* Auswahlknopf: linksbuendig, mehrzeilig, fuer Listen wie die sieben Anliegen. */ .hl-wahlknopf { display: block; width: 100%; text-align: left; background: var(--hl-flaeche); color: var(--hl-text); border: 0; border-left: 2px solid transparent; border-radius: var(--hl-radius); padding: var(--hl-s4) var(--hl-s5); margin: 0 0 var(--hl-s2); font-family: inherit; font-size: var(--hl-t-basis); line-height: 1.5; cursor: pointer; transition: border-color var(--hl-zeit) var(--hl-kurve), background var(--hl-zeit) var(--hl-kurve); } .hl-wahlknopf:hover { border-left-color: var(--hl-gold); background: var(--hl-flaeche-hoch); } /* --------------------------------------------------------------------------- * Chips – alle mit exakt demselben Gewicht * * Die Pillenform aus V8.1 entfaellt: sie zieht auf dunklem Grund zu viel * Aufmerksamkeit und wirkt spielerisch. * ------------------------------------------------------------------------- */ .hl-chips { display: flex; flex-wrap: wrap; gap: var(--hl-s2); margin: var(--hl-s4) 0; } .hl-chip { border: 1px solid var(--hl-haarlinie); background: transparent; color: var(--hl-text); border-radius: var(--hl-radius-eng); padding: var(--hl-s2) var(--hl-s4); min-height: 2.75rem; font-family: inherit; font-size: var(--hl-t-klein); font-weight: 500; cursor: pointer; transition: background var(--hl-zeit) var(--hl-kurve), color var(--hl-zeit) var(--hl-kurve); } .hl-chip:hover { background: var(--hl-safety-flaeche); } /* Gewaehlt: Umkehrung, nicht Gold. Kein Chip darf einen Vorteil haben. */ .hl-chip[aria-pressed="true"], .hl-chip.ist-gewaehlt { background: var(--hl-text); color: var(--hl-grund); border-color: var(--hl-text); } /* --------------------------------------------------------------------------- * Die Schritterklaerung * * Beim ersten Besuch eines Bildschirms offen, danach zusammengeklappt. Der * Grund steht in class-hl-schritterklaerung.php: F5 und F6 versprechen zwei * Taps in unter fuenfzehn Sekunden, und ein Nachbericht mit drei Absaetzen * Vorspann wird nicht gelesen, sondern weggetippt. * * SIE SIEHT NICHT AUS WIE EIN HINWEISKASTEN. Kein Rahmen, keine Farbe, kein * Symbol - eine leise Textspalte mit einer Lichtkante links. Ein Kasten haette * sie zu etwas gemacht, das man wegklickt, bevor man es liest. * ------------------------------------------------------------------------- */ .hl-schritt-kurz { margin: 0 0 var(--hl-s3); font-size: var(--hl-t-basis); line-height: 1.6; color: var(--hl-text); } .hl-schritt-erklaerung { margin: 0 0 var(--hl-s5); padding-left: var(--hl-s4); border-left: 1px solid var(--hl-haarlinie); } /* * DIE ZEILE MUSS AUSSEHEN WIE ETWAS, DAS MAN ANTIPPT. * * Vorher war sie schlichter Goldtext. Aus dem Testlauf: "wer nicht weiss, dass * man es da klappen kann, wird es auch nicht finden." Genau so ist es - eine * farbige Textzeile ohne Rahmen liest sich als Zwischenueberschrift, nicht als * Schalter. * * Drei Dinge machen daraus einen: eine Umrandung mit etwas Luft, eine * Mindesthoehe, die einen Daumen traegt, und ein Winkel, der sich beim Oeffnen * dreht. Es bleibt trotzdem klein und leise - es ist eine Nebentuer und kein * zweiter Hauptknopf. */ .hl-schritt-erklaerung > summary { display: inline-flex; align-items: center; gap: var(--hl-s2); min-height: 2.25rem; padding: var(--hl-s1) var(--hl-s3); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); cursor: pointer; list-style: none; font-size: var(--hl-t-klein); font-weight: 500; color: var(--hl-gold-text); transition: background var(--hl-zeit) var(--hl-kurve), border-color var(--hl-zeit) var(--hl-kurve); } .hl-schritt-erklaerung > summary::-webkit-details-marker { display: none; } .hl-schritt-erklaerung > summary:hover { background: var(--hl-safety-flaeche); border-color: var(--hl-gold-text); } /* Der Winkel zeigt nach unten und dreht sich beim Oeffnen nach oben. */ .hl-schritt-erklaerung > summary::after { content: ""; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform var(--hl-zeit) var(--hl-kurve); } .hl-schritt-erklaerung[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); } /* Zwei Beschriftungen im Markup, je Zustand ist eine sichtbar. */ .hl-schritt-erklaerung > summary .hl-zu { display: none; } .hl-schritt-erklaerung[open] > summary .hl-auf { display: none; } .hl-schritt-erklaerung[open] > summary .hl-zu { display: inline; } /* Offen wird die Zeile leiser: Dann ist der Inhalt die Hauptsache. */ .hl-schritt-erklaerung[open] > summary { margin-bottom: var(--hl-s3); color: var(--hl-text-leise); } .hl-schritt-erklaerung p { margin: 0 0 var(--hl-s3); font-size: var(--hl-t-klein); line-height: 1.65; color: var(--hl-text-leise); } .hl-schritt-erklaerung p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Die Verankerungsbedingungen * * Drei Zeilen, die sagen, woraus Verankern besteht und wo jemand steht. * * KEIN FORTSCHRITTSBALKEN UND KEINE PROZENTZAHL. Beides waere eine Aussage * ueber die Reststrecke, und Countdowns sind im ganzen Produkt ausgeschlossen. * Drei Zeilen sind drei Tatsachen. * * DIE ERFUELLTE ZEILE BEKOMMT KEIN GOLD UND KEINEN HAKEN. Sie wird nur nicht * mehr leise gesetzt. Ein Haken macht aus einer Auskunft eine Belohnung, und * die naechste Zeile darunter waere dann ein Mangel. * ------------------------------------------------------------------------- */ .hl-verankerung { margin: var(--hl-s6) 0 var(--hl-s5); } .hl-bedingungen { margin: var(--hl-s2) 0 var(--hl-s4); padding: 0; list-style: none; } .hl-bedingungen li { position: relative; margin: 0 0 var(--hl-s2); padding-left: var(--hl-s4); font-size: var(--hl-t-klein); line-height: 1.55; color: var(--hl-text-leise); } /* Ein Punkt, kein Haken. Er wird bei Erfuellung voll, nicht gruen. */ .hl-bedingungen li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--hl-text-leise); } .hl-bedingungen li.ist-erfuellt { color: var(--hl-text); } .hl-bedingungen li.ist-erfuellt::before { background: var(--hl-text); border-color: var(--hl-text); } /* --------------------------------------------------------------------------- * Das Ausloeser-Geruest auf F4 * * Zwei Stufen Chips ueber dem Wenn-Feld. Es ist eine Starthilfe und darf * deshalb NICHT aussehen wie der Hauptweg - wer seinen eigenen Ausloeser * kennt, soll am Geruest vorbeisehen und direkt ins Feld schreiben koennen. * * Umgesetzt ist das ueber Abstand und eine leise Zwischenzeile, nicht ueber * Rahmen oder Flaeche. Ein Kasten haette das Geruest zu einem eigenen Bereich * gemacht, den man erst abarbeiten muss. * * KEINE HERVORHEBUNG EINES CHIPS. Auch hier gilt die Regel von oben: Die * Situationen sind gleichwertig, und der Anker, den jemand nimmt, ist seine * Sache. Es gibt keinen empfohlenen Alltag. * ------------------------------------------------------------------------- */ .hl-geruest { margin: 0 0 var(--hl-s5); } .hl-geruest .hl-chips { margin: var(--hl-s2) 0 var(--hl-s3); } /* Der Rueckweg ist eine Nebentuer, kein zweiter Hauptknopf: schmaler, linksbuendig, ohne die volle Breite der Knoepfe darunter. */ .hl-geruest-zurueck { display: inline-block; width: auto; min-height: 2.25rem; padding: var(--hl-s1) var(--hl-s3); font-size: var(--hl-t-klein); } /* --------------------------------------------------------------------------- * Die Antwortfelder des Nachberichts * * DER KRITISCHSTE ABSCHNITT IN DIESER DATEI. * * Alle Felder sind exakt gleich: gleiche Groesse, gleiche Flaeche, gleiche * Schrift, gleicher Rand. Es gibt hier bewusst KEINE Klasse fuer ein * hervorgehobenes Feld und keine Regel, die auf einen bestimmten Wert * reagiert. Wer eine hinzufuegt, bricht die gesamte Nachbericht-Logik. * * Der Grund: "Hab ich gemacht" und "Hatte keine Kraft" sind zwei Auskuenfte * ueber denselben Tag. Sieht die eine besser aus als die andere, ist der * Bericht keine Auskunft mehr, sondern eine Pruefung - und Menschen berichten * dann, was gut aussieht, statt was war. Damit waere die zentrale Messung des * Produkts wertlos. * * Die Felder sind gross, weil der Nachbericht in zwei Taps fertig sein muss * und weil er oft in einem Moment passiert, in dem jemand nicht ruhig ist. * ------------------------------------------------------------------------- */ .hl-antworten { display: flex; flex-direction: column; gap: var(--hl-s2); margin: var(--hl-s6) 0; } .hl-antwort { display: block; width: 100%; min-height: 3.75rem; padding: var(--hl-s4) var(--hl-s5); background: var(--hl-flaeche); color: var(--hl-text); border: 0; border-radius: var(--hl-radius); box-shadow: inset 0 1px 0 rgba(245, 241, 234, .06); font: inherit; font-size: var(--hl-t-basis); line-height: 1.4; text-align: left; cursor: pointer; transition: background var(--hl-zeit) var(--hl-kurve); } .hl-antwort:hover { background: var(--hl-flaeche-hoch); } :root[data-theme="hell"] .hl-antwort { box-shadow: 0 1px 2px rgba(60, 42, 20, .04), 0 8px 24px -8px rgba(60, 42, 20, .10); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-antwort { box-shadow: 0 1px 2px rgba(60, 42, 20, .04), 0 8px 24px -8px rgba(60, 42, 20, .10); } } /* --------------------------------------------------------------------------- * Freitext * * Auf F5 und F6 gibt es keinen. Dort ist die Tastatur eingeklappt, und das * ist der Grund, warum der Nachbericht unter fuenfzehn Sekunden dauert. * ------------------------------------------------------------------------- */ .hl-freitext { width: 100%; min-height: 3rem; padding: var(--hl-s3) var(--hl-s4); font: inherit; font-size: var(--hl-t-basis); color: var(--hl-text); background: var(--hl-flaeche); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); resize: vertical; } .hl-freitext:focus { outline: none; border-color: var(--hl-gold-text); } /* Der Player der Uebung. Schlicht, weil er nichts zaehlt und nichts umschaltet. */ .hl-uebung { display: block; width: 100%; margin: var(--hl-s5) 0; } /* --------------------------------------------------------------------------- * Skala 0 bis 10 * ------------------------------------------------------------------------- */ .hl-skala { display: flex; flex-wrap: wrap; gap: var(--hl-s2); margin: var(--hl-s4) 0 var(--hl-s2); } .hl-skala label { flex: 1 1 2.5rem; min-width: 2.5rem; min-height: 3rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); cursor: pointer; transition: border-color var(--hl-zeit) var(--hl-kurve), background var(--hl-zeit) var(--hl-kurve); } .hl-skala label:hover { border-color: var(--hl-text-leise); } .hl-skala input { position: absolute; width: 1px; height: 1px; opacity: 0; } .hl-skala label:has(input:checked) { border-color: var(--hl-gold); background: var(--hl-gold-tint); font-weight: 700; } .hl-skala-enden { display: flex; justify-content: space-between; font-size: var(--hl-t-klein); color: var(--hl-text-leise); margin-bottom: var(--hl-s5); } /* --------------------------------------------------------------------------- * Auswahl in Listenform * ------------------------------------------------------------------------- */ fieldset { border: 0; padding: 0; margin: 0 0 var(--hl-s5); min-width: 0; } legend { padding: 0; font-size: var(--hl-t-titel); font-weight: 600; line-height: 1.35; margin-bottom: var(--hl-s2); } .hl-wahl label { display: flex; align-items: center; gap: var(--hl-s3); min-height: 3rem; padding: var(--hl-s2) var(--hl-s4); margin: 0 0 var(--hl-s2); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); cursor: pointer; transition: border-color var(--hl-zeit) var(--hl-kurve); } .hl-wahl label:hover { border-color: var(--hl-text-leise); } .hl-wahl label:has(input:checked) { border-color: var(--hl-gold); background: var(--hl-gold-tint); } .hl-wahl input { accent-color: var(--hl-gold); width: 1.15rem; height: 1.15rem; flex: none; } /* * display:flex oben schlaegt das display:none, das der Browser fuer [hidden] * mitbringt - eine ausgeblendete Wahl waere ohne diese Zeile weiter sichtbar. * Gebraucht auf B7, wo nach der Stufenwahl die unplausiblen Angaben weggehen. * Ohne Bewegung: kein Aufklappen, kein Einblenden. Tuer B kennt keine Animation. */ .hl-wahl label[hidden] { display: none; } /* --------------------------------------------------------------------------- * Eigene Eintraege in Listenform (B9) * * Bewusst keine Karten: sechzig Karten sind eine Wand. Und bewusst keine * Grafik - B9 zeigt Eintraege, keine Kurve. Eine Zeitachse hier waere der * erste Schritt zu einer Aussage ueber die Person (Entscheidung BE12). * ------------------------------------------------------------------------- */ .hl-eintraege { list-style: none; margin: var(--hl-s5) 0; padding: 0; } .hl-eintraege li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hl-s2) var(--hl-s3); padding: var(--hl-s3) 0; border-bottom: 1px solid var(--hl-haarlinie); font-size: var(--hl-t-basis); line-height: 1.5; } .hl-eintraege li:last-child { border-bottom: 0; } .hl-eintraege .hl-meta { flex: none; } /* --------------------------------------------------------------------------- * Das Journal * * Neutraler Bereich - weder das lineare Licht der Bibliothek noch die radialen * Glows des Trainings. Warmes Dunkel, Fraunces nur fuer die Tagesfrage. * ------------------------------------------------------------------------- */ /* Die Stift-Schaltflaeche. Immer an derselben Stelle, immer gleich. Kein Zaehler, kein Punkt, keine Erinnerung - ein Abzeichen mit einer Zahl waere eine Aufforderung, und eine unerledigte Aufforderung ein Vorwurf. */ .hl-stift { position: fixed; right: var(--hl-s5); bottom: calc(var(--hl-s5) + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--hl-flaeche-hoch); border: 1px solid var(--hl-haarlinie); color: var(--hl-text); box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); } .hl-stift:hover { border-color: var(--hl-gold); color: var(--hl-gold-text); } /* Auf B3 hoeher, damit die Abspielsteuerung frei bleibt. */ .hl-stift.ist-hoch { bottom: calc(var(--hl-s7) + var(--hl-s6) + env(safe-area-inset-bottom, 0px)); } /* Die Tagesfrage. Serife, weil sie der Kernmoment dieses Bildschirms ist. */ .hl-frage { display: block; margin: var(--hl-s5) 0 var(--hl-s2); font-family: var(--hl-serif); font-size: var(--hl-t-titel); line-height: 1.35; color: var(--hl-text); } /* Bullet-Eingabe als Standard: ein kleines Feld, kein Aufsatzblatt. */ .hl-freitext.ist-gross { min-height: 6rem; } .hl-kalender-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--hl-s3); margin: var(--hl-s5) 0 var(--hl-s3); } .hl-kalender-weiter { min-width: 2.5rem; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--hl-radius-eng); color: var(--hl-text-leise); text-decoration: none; } .hl-kalender-weiter:hover { color: var(--hl-text); } /* * Das Raster. DREI DINGE FEHLEN HIER ABSICHTLICH: * * kein Rahmen und keine Flaeche an unbeschriebenen Tagen - sie sind eine * Zahl auf Grund, keine leere Zelle. Eine leere Zelle liest sich als Luecke. * keine Verbindung zwischen Nachbartagen - kein Balken, keine Linie, kein * Verlauf ueber eine Woche. Das waere eine Kette durch die Hintertuer. * keine Monatsbilanz. */ .hl-kalender { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--hl-s1); margin: 0 0 var(--hl-s6); } .hl-tag { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; font-size: var(--hl-t-klein); font-variant-numeric: tabular-nums; color: var(--hl-text-leise); text-decoration: none; border-radius: var(--hl-radius-eng); } a.hl-tag.ist-aktiv { background: var(--hl-gold-tint); color: var(--hl-text); font-weight: 600; } a.hl-tag.ist-aktiv:hover { background: var(--hl-flaeche-hoch); } /* --------------------------------------------------------------------------- * Sicherheitsebene * * Ab V9.0 ohne eigene Farbfamilie. Sicherheitstext ist Systemebene, und * Systemebene ist in diesem System neutral – erkennbar ueber Position, * Rahmenlosigkeit und Wortwahl. text-leise liegt bei 6,3:1 auf Kartenflaeche * und damit deutlich ueber dem Minimum. * ------------------------------------------------------------------------- */ .hl-hinweis { background: var(--hl-safety-flaeche); border-left: 2px solid var(--hl-haarlinie); border-radius: 0 var(--hl-radius-eng) var(--hl-radius-eng) 0; padding: var(--hl-s3) var(--hl-s4); margin: var(--hl-s5) 0; font-size: var(--hl-t-klein); color: var(--hl-safety); line-height: 1.55; } .hl-hinweis strong { color: var(--hl-text); } /* * EIN LEERER HINWEIS IST KEIN HINWEIS. * * Der Kasten traegt Flaeche, Kante und Innenabstand - ohne Text bleibt davon * ein grauer Balken uebrig, der aussieht wie ein Ladefehler. Das passiert * ueberall dort, wo ein Hinweisfeld im Voraus ausgegeben und erst per * JavaScript gefuellt wird, etwa beim Einrichten eines Geraets auf G4. * * Die Regel steht hier und nicht an der einen Stelle, an der es aufgefallen * ist: Ein leerer Kasten ist an jeder Stelle falsch. */ .hl-hinweis:empty { display: none; } /* * Die Kontoloeschung bekommt mehr Luft als eine gewoehnliche Karte. * * Sie steht auf G5 direkt unter dem Knopf "Alle Daten herunterladen". Der * Abstand einer normalen Karte reicht dort nicht: Der letzte Schritt, der * sich nicht zuruecknehmen laesst, darf nicht wirken wie die Fortsetzung des * Knopfes darueber. */ .hl-karte-safety { border-left: 2px solid var(--hl-text-leise); margin-top: var(--hl-s5); } .hl-karte-safety h2 { color: var(--hl-text); } .hl-nummer { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .02em; } /* Die Notrufnummer ist die einzige Zahl im Produkt, die gross sein darf. */ .hl-nummer-gross { font-size: 1.75rem; line-height: 1.2; } .hl-leer { color: var(--hl-text-leise); } /* --------------------------------------------------------------------------- * Weggefaehrten – Bildfarben * * Zulaessig: Punkt, Blattfuellung, Portraitakzent, Kante. Nicht zulaessig: * Fliesstext, Label, Knopfflaeche mit Text. Der Name steht immer in --hl-text, * die Farbe erscheint daneben. Das ist zugleich die Umsetzung der Regel, dass * Farbe nie exklusiver Informationstraeger ist. * ------------------------------------------------------------------------- */ .hl-gefaehrte { display: inline-flex; align-items: center; gap: var(--hl-s2); } /* --------------------------------------------------------------------------- * Die Figur auf D1 * * Reduziertes Linienportrait, ruhig gesetzt. Kein Kreis, kein Rahmen, kein * Ring - die Figur wird vorgestellt, nicht ausgestellt. * ------------------------------------------------------------------------- */ .hl-figur { margin: var(--hl-s6) 0 var(--hl-s5); } .hl-figur-bild { display: block; width: 100%; max-width: 11rem; height: auto; margin-bottom: var(--hl-s4); } .hl-figur .hl-gefaehrte { font-size: var(--hl-t-titel); font-weight: 600; letter-spacing: -.015em; margin: 0; } /* Der Herkunftssatz. Eine Zeile darüber, wer da spricht. */ .hl-herkunft { color: var(--hl-text-leise); margin: 0 0 var(--hl-s5); } /* * Die Rede der Figur. * * Sans-Serif, ausdruecklich. Eine Serife im Dialog wuerde den Begleiter in ein * Erzaehlformat zurueckverwandeln, das die Konstruktionsregeln der * Weggefaehrten ausschliessen (Design Guide 4). */ .hl-rede { font-family: var(--hl-sans); font-size: 1.125rem; line-height: 1.6; margin: var(--hl-s5) 0 var(--hl-s6); } .hl-rede p { margin: 0 0 var(--hl-s4); } .hl-rede p:last-child { margin-bottom: 0; } .hl-punkt { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--hl-farbe, var(--hl-text-leise)); } .hl-gefaehrte-mattis { --hl-farbe: var(--hl-mattis); } .hl-gefaehrte-sven { --hl-farbe: var(--hl-sven); } .hl-gefaehrte-bettina { --hl-farbe: var(--hl-bettina); } .hl-gefaehrte-derya { --hl-farbe: var(--hl-derya); } .hl-gefaehrte-jana { --hl-farbe: var(--hl-jana); } .hl-gefaehrte-tobias { --hl-farbe: var(--hl-tobias); } .hl-gefaehrte-anke { --hl-farbe: var(--hl-anke); } /* --------------------------------------------------------------------------- * Die zwei Bildwelten * * Die Trennung laeuft ueber das Verhalten des Lichts, nicht ueber Farbe. * * Tuer B (Training): Licht ist radial. Glows, organische Formen, kein Raster, * grosszuegiger Leerraum, Serife in Kernmomenten zulaessig. * Tuer A (Bibliothek): Licht ist linear. Keine Glows, Gold nur als Kante und * Fortschritt, strenges Raster, ausschliesslich Sans, keine Bewegung, keine * Naturform, keine Weggefaehrten-Farbe. * ------------------------------------------------------------------------- */ .hl-welt-bibliothek .hl-karte { border-radius: var(--hl-radius-eng); } .hl-welt-bibliothek .hl-titel { letter-spacing: -.025em; } .hl-welt-bibliothek .hl-moment { font-family: var(--hl-sans); font-size: var(--hl-t-titel); font-weight: 600; } .hl-welt-bibliothek .hl-punkt { display: none; } .hl-welt-bibliothek * { animation: none !important; } /* Die Leuchtkante unter dem Titel – Tuer A ersetzt damit den Glow. */ .hl-welt-bibliothek .hl-titel::after { content: ""; display: block; height: 1px; margin-top: var(--hl-s4); background: linear-gradient(90deg, var(--hl-gold), transparent); } /* Regal: strenges Zwei-Spalten-Raster, dicht belegt. Dichte ist hier ehrlich, nicht nachlaessig – die Bibliothek ist ein Ort, an dem man findet. */ .hl-regal { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hl-s2); margin: var(--hl-s4) 0; } .hl-regal .hl-karte { margin: 0; padding: var(--hl-s3); border-left: 2px solid transparent; display: flex; flex-direction: column; gap: var(--hl-s2); } .hl-regal .hl-karte.ist-aktiv { border-left-color: var(--hl-gold); } .hl-fortschritt { height: 2px; background: var(--hl-haarlinie); margin-top: auto; } .hl-fortschritt > i { display: block; height: 2px; background: var(--hl-gold); } /* Karten als Link: die Kachel ist die Bedienflaeche, nicht ein Wort darin. */ a.hl-karte { display: block; color: inherit; text-decoration: none; transition: background var(--hl-zeit) var(--hl-kurve); } a.hl-karte:hover { background: var(--hl-flaeche-hoch); } /* Der Kartentitel traegt. Kompakter, schwerer, enger gesetzt als Fliesstext. */ a.hl-karte strong { display: block; font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; margin-bottom: var(--hl-s2); text-wrap: balance; } /* --------------------------------------------------------------------------- * Reine Typografie * * Hier stand kurzzeitig eine Cover-Flaeche ueber jeder Kachel. Sie ist wieder * weg. Ein Muster, das nichts bedeutet, ist Dekoration - und Dekoration macht * ein Interface lauter, ohne dass es mehr sagt. * * Was jetzt traegt: der Titel, eine leise Metazeile und viel Luft dazwischen. * Das ist die anspruchsvollste Variante, weil nichts mehr da ist, hinter dem * sich schlechte Abstaende verstecken koennten. Deshalb sind die Werte hier * einzeln gesetzt und nicht aus der Skala uebernommen. * ------------------------------------------------------------------------- */ /* Die Kachel wird flacher und breiter geatmet. */ .hl-regal { gap: var(--hl-s3); } .hl-regal .hl-karte { padding: var(--hl-s4); min-height: 6.5rem; gap: 0; justify-content: space-between; } /* Der Titel oben, die Angaben unten, dazwischen Leerraum statt Trennlinie. */ .hl-regal .hl-karte strong { margin-bottom: var(--hl-s4); } .hl-regal .hl-karte .hl-meta { margin-top: auto; } /* * DAS REGAL MIT SAETZEN STATT ANGABEN (.hl-regal-text). * * Ergaenzt am 2. September 2026 aus einem Befund im Testlauf: Im Wissenscenter * standen die Kacheln unruhig nebeneinander, und zwar aus drei Gruenden * gleichzeitig. * * ERSTENS WAR EIN GANZER SATZ IN VERSALIEN GESETZT. .hl-meta ist fuer kurze * Angaben gebaut - "7 von 9", "kurz", "schon gehoert". Versalien mit * Sperrsatz sind dafuer richtig und fuer einen Satz falsch: Sie machen ihn * laenger, langsamer zu lesen und lauter als die Ueberschrift darueber. * * ZWEITENS STAND DER SATZ AM UNTEREN RAND. margin-top:auto schiebt die * Angaben nach unten, damit sie in jeder Kachel auf einer Linie liegen. Bei * einer einzeiligen Angabe ist das ruhig. Bei einem Satz, der mal eine und mal * fuenf Zeilen braucht, entsteht daraus in jeder Kachel eine andere Luecke. * * DRITTENS WAREN DIE SAETZE UNTERSCHIEDLICH LANG. Der Anriss ist der erste * Satz der Kurzfassung, und der ist mal sechs und mal vierzig Woerter lang. * * Die Loesung setzt an allen drei Stellen an: normale Schreibweise, direkt * unter dem Titel, und auf drei Zeilen begrenzt. Der Rest wird nicht * abgeschnitten, sondern ausgeblendet - der Nutzer verliert nichts, denn die * vollstaendige Kurzfassung steht eine Ebene weiter. * * DER TITEL BEKOMMT ZWEI ZEILEN FEST. Damit beginnt der Satz in jeder Kachel * einer Reihe an derselben Stelle, auch wenn ein Titel einzeilig ist und der * daneben zweizeilig. Das ist die eigentliche Quelle der Unruhe gewesen. */ .hl-regal-text .hl-karte { justify-content: flex-start; } .hl-regal-text .hl-karte strong { margin-bottom: var(--hl-s2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.8em; } .hl-regal-text .hl-karte .hl-meta { margin-top: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: var(--hl-t-klein); font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.45; } /* * EINE EINZELNE ANGABE BLEIBT EINE ANGABE. Im Kurs steht neben dem Titel * "Zum Hören · schon gehört" - das ist keine Beschreibung, sondern eine * Auskunft, und die darf leise und in Versalien bleiben. */ .hl-regal-text .hl-karte .hl-meta.ist-angabe { font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .09em; text-transform: uppercase; -webkit-line-clamp: 1; line-clamp: 1; } /* Abschnittsmarke in Listen. Kleiner als der Bildschirmtitel, ohne Leuchtkante. */ .hl-abschnitt { font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-text-leise); margin: var(--hl-s6) 0 var(--hl-s3); } .hl-eyebrow-inline { font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-text-leise); margin: 0 0 var(--hl-s3); } /* --------------------------------------------------------------------------- * Player (B3) * * Lineares Licht: die Schiene ist eine Linie, kein Regler mit Knubbel. Es gibt * keinen Ziehpunkt zum Vorspulen - wer spult, hoert nicht, und das System * belohnt Hoeren, nicht Abspielen. * ------------------------------------------------------------------------- */ /* * Vier Zonen, von leise nach laut nach leise. * * Optionen Stimme und Klang, kompakt und gedaempft * Kern Balken, Zeit, Steuerung - bekommt den meisten Raum * Fuss Timer, ganz am Ende und ganz zurueckgenommen * * Vorher standen alle Elemente gleich weit auseinander, und der Timer klebte * am Fortsetzen-Knopf. Wenn alles denselben Abstand hat, ist nichts wichtig. */ .hl-player { margin: var(--hl-s6) 0 var(--hl-s5); } .hl-player-optionen { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--hl-s3); margin-bottom: var(--hl-s7); } /* * Stimme und Klang: eine Zeile, wenn sie passt, und gleich hoch. * * Beide Gruppen behalten ihre natuerliche Breite und wachsen dann gemeinsam * auf die Zeilenbreite. Passen beide nebeneinander, teilen sie sich die * Zeile; passen sie nicht, steht jede in ihrer eigenen Zeile und fuellt sie. * Damit sie auf einem Telefon nebeneinander passen, ist der Innenabstand * der Knoepfe hier schmaler (10 statt 16 Pixel) und die Luecke dazwischen s3. * Vorher fehlten auf einem 400 Pixel breiten Schirm rund zehn Pixel, und * Klang rutschte unter Stimme. * * Gleich hoch: Die Stimmknoepfe tragen ein Bild von 1,75rem und waren damit * hoeher als die reinen Textknoepfe daneben. Jetzt ist die Gruppe eine * Spalte, der Schalter fuellt sie bis unten, und jeder Knopf hat dieselbe * Mindesthoehe wie ein Stimmknopf mit Bild (1,75rem + zweimal s2 = 2,75rem). */ .hl-player-optionen .hl-player-gruppe { display: flex; flex-direction: column; flex: 1 1 auto; } .hl-player-optionen .hl-segment { display: flex; flex: 1 0 auto; flex-wrap: nowrap; align-items: stretch; width: 100%; } .hl-player-optionen .hl-segment button { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 2.75rem; padding-left: .625rem; padding-right: .625rem; } .hl-player-optionen .hl-klangwahl button { letter-spacing: .04em; } /* * Die feste Stimme im Player: dieselbe Huelle wie ein Segmentschalter, innen * ein einzelner, gedrueckter Eintrag. Ohne das stand ein loser Name neben * einem Kasten, und die Zeile sah aus wie zwei verschiedene Bauteile. */ .hl-player-optionen .hl-stimme-fest { display: flex; flex: 1 0 auto; align-items: stretch; margin: 0; /* schlaegt den Fliesstextabstand fuer p-Elemente */ padding: 3px; border-radius: 10px; background: var(--hl-flaeche); } .hl-player-optionen .hl-stimme-fest-innen { display: inline-flex; align-items: center; gap: var(--hl-s2); flex: 1 1 auto; min-height: 2.75rem; padding: var(--hl-s2) .625rem; border-radius: 7px; background: var(--hl-flaeche-hoch); box-shadow: inset 0 1px 0 rgba(245, 241, 234, .07); } :root[data-theme="hell"] .hl-player-optionen .hl-stimme-fest { background: rgba(26, 18, 6, .05); } :root[data-theme="hell"] .hl-player-optionen .hl-stimme-fest-innen { background: var(--hl-flaeche); box-shadow: 0 1px 2px rgba(60, 42, 20, .08); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-player-optionen .hl-stimme-fest { background: rgba(26, 18, 6, .05); } :root:not([data-theme]) .hl-player-optionen .hl-stimme-fest-innen { background: var(--hl-flaeche); box-shadow: 0 1px 2px rgba(60, 42, 20, .08); } } .hl-player-kern { margin-bottom: var(--hl-s5); } /* Der Fortsetzen-Vorschlag sitzt direkt unter der Steuerung, nicht am Timer. Er gehoert zum Abspielen, nicht zum Beenden. Leer nimmt er keinen Platz. */ .hl-player-weiter:not(:empty) { margin-top: var(--hl-s3); } .hl-player-fuss { margin-top: var(--hl-s7); padding-top: var(--hl-s4); border-top: 1px solid var(--hl-haarlinie); } .hl-player-zeit { display: flex; justify-content: space-between; font-size: var(--hl-t-klein); font-variant-numeric: tabular-nums; color: var(--hl-text-leise); margin-bottom: var(--hl-s2); } /* * Farben des Players. Sie leben nur hier, nicht im Grundvorrat - der Player * ist die einzige Stelle, an der die App ausserhalb von Gold Farbe zeigt. * Der Verlauf lehnt sich an ein Klangspektrum an: von Violett ueber Blau und * Tuerkis nach Gelb und Orange, das Orange endet im Gold der App. */ .hl-player { --hl-spektrum: linear-gradient(90deg, #8B6CF6 0%, #4E9BFF 22%, #2FD4C4 45%, #8BDD5A 63%, #F2CF4A 82%, #E9A23B 100%); --hl-spektrum-schein: 0 0 12px rgba(120, 130, 255, .45); --hl-schiene: var(--hl-haarlinie); --hl-halo-a: rgba(172, 120, 255, 1); --hl-halo-b: rgba(255, 130, 205, .95); --hl-halo-c: rgba(90, 205, 240, .9); --hl-halo-staerke: .72; --hl-start-flaeche: linear-gradient(180deg, #FBF7FF 0%, #EADFF7 100%); --hl-start-rand: rgba(255, 255, 255, .55); --hl-start-ink: #2A1F3D; --hl-start-schein: 0 0 30px -2px rgba(170, 125, 255, .38); } :root[data-theme="hell"] .hl-player { --hl-spektrum-schein: 0 1px 6px rgba(120, 100, 220, .25); --hl-schiene: rgba(26, 18, 6, .10); --hl-halo-a: rgba(150, 110, 245, .55); --hl-halo-b: rgba(245, 130, 190, .45); --hl-halo-c: rgba(60, 180, 215, .40); --hl-halo-staerke: .7; --hl-start-flaeche: linear-gradient(180deg, #FFFFFF 0%, #F3EDFA 100%); --hl-start-rand: rgba(120, 90, 200, .22); --hl-start-ink: #2A1F3D; --hl-start-schein: 0 0 26px -2px rgba(150, 110, 245, .35); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-player { --hl-spektrum-schein: 0 1px 6px rgba(120, 100, 220, .25); --hl-schiene: rgba(26, 18, 6, .10); --hl-halo-a: rgba(150, 110, 245, .55); --hl-halo-b: rgba(245, 130, 190, .45); --hl-halo-c: rgba(60, 180, 215, .40); --hl-halo-staerke: .7; --hl-start-flaeche: linear-gradient(180deg, #FFFFFF 0%, #F3EDFA 100%); --hl-start-rand: rgba(120, 90, 200, .22); --hl-start-ink: #2A1F3D; --hl-start-schein: 0 0 26px -2px rgba(150, 110, 245, .35); } } /* * Die Schiene traegt das Spektrum. * * Der Verlauf liegt NICHT auf dem wachsenden Balken, sondern auf einer * Innenflaeche, die immer so breit ist wie die ganze Schiene (100cqw). Der * Balken ist nur ein Fenster darauf. So wandert die Farbe nicht mit, wenn * der Balken waechst - bei 30 Prozent sieht man 30 Prozent des Spektrums, * nicht das ganze Spektrum auf 30 Prozent gestaucht. Browser ohne * Containereinheiten zeigen den gestauchten Verlauf, mehr passiert nicht. */ .hl-player-schiene { position: relative; height: 3px; border-radius: 999px; background: var(--hl-schiene); margin-bottom: var(--hl-s4); container-type: inline-size; } .hl-player-schiene > i { position: relative; display: block; height: 3px; width: 0; border-radius: 999px; overflow: hidden; background: var(--hl-spektrum); box-shadow: var(--hl-spektrum-schein); transition: width 250ms linear; } .hl-player-schiene > i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 100cqw; background: var(--hl-spektrum); } /* Der Lichtpunkt am Ende des Gehoerten. Klein, und nur sichtbar, sobald es etwas zu hoeren gab - bei Breite null steht er unter dem Rand. */ .hl-player-schiene > i::after { content: ""; position: absolute; top: 50%; right: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .55); transform: translate(50%, -50%); opacity: .9; } .hl-player-schiene > i:not([style])::after, .hl-player-schiene > i[style*="width: 0%"]::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .hl-player-schiene > i { transition: none; } } /* * Der Startknopf mit Schleier. * * Der Knopf selbst ist eine helle, fast weisse Pille - im dunklen Player der * hellste Punkt, im hellen ein weisses Blatt mit feinem violetten Rand. Der * Schleier ist ein Pseudoelement dahinter: drei weiche Farbflecken, stark * verwischt, deren Farben langsam wandern und die beim Hoeren atmen. Solange nichts laeuft, ist er * ruhig und leise; waehrend des Hoerens atmet er sichtbar. Reduced Motion * stellt Wandern und Atmen ab (globale Regel unten), der Schleier bleibt stehen. */ /* Der Stapelkontext liegt auf der Steuerung, nicht auf dem Knopf. Laege er auf dem Knopf, wuerde der Schleier (z-index -1) ZWISCHEN Knopfflaeche und Schrift gemalt - also im Knopf statt dahinter. Deshalb auch kein transform am Knopf: Es wuerde denselben Fehler durch die Hintertuer holen. */ .hl-player-steuerung { position: relative; isolation: isolate; } .hl-player-steuerung .hl-player-start { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; border-radius: 999px; border: 1px solid var(--hl-start-rand); background: var(--hl-start-flaeche); color: var(--hl-start-ink); letter-spacing: .01em; box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 4px 18px -6px rgba(90, 60, 160, .45); transition: box-shadow var(--hl-zeit) var(--hl-kurve), border-color var(--hl-zeit) var(--hl-kurve); } .hl-player-steuerung .hl-player-start:hover { background: var(--hl-start-flaeche); border-color: var(--hl-halo-a); } .hl-player-steuerung .hl-player-start:focus-visible { outline: 2px solid var(--hl-halo-a); outline-offset: 3px; } /* Der Schleier. */ .hl-player-steuerung .hl-player-start::before { content: ""; position: absolute; z-index: -1; inset: -22px -30px; border-radius: 999px; background: radial-gradient(48% 150% at 18% 50%, var(--hl-halo-a), transparent 72%), radial-gradient(48% 150% at 82% 45%, var(--hl-halo-b), transparent 72%), radial-gradient(70% 110% at 50% 100%, var(--hl-halo-c), transparent 72%); filter: blur(16px) hue-rotate(0deg); opacity: calc(.6 * var(--hl-halo-staerke)); transform: scale(.96); transition: opacity 600ms var(--hl-kurve), transform 600ms var(--hl-kurve); animation: hl-schleier-wandern 18s linear infinite; pointer-events: none; } .hl-player.laeuft .hl-player-steuerung .hl-player-start::before { opacity: var(--hl-halo-staerke); animation: hl-schleier-wandern 18s linear infinite, hl-schleier-atmen 4.5s ease-in-out infinite; } .hl-player.laeuft .hl-player-steuerung .hl-player-start { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 0 0 1px rgba(255, 255, 255, .25), var(--hl-start-schein); } /* Die Farben wandern langsam um den Kreis - Violett wird Rosa wird Tuerkis. Kein Drehen des Elements: Eine gedrehte Pille kippt hochkant. */ @keyframes hl-schleier-wandern { from { filter: blur(16px) hue-rotate(0deg); } to { filter: blur(16px) hue-rotate(360deg); } } @keyframes hl-schleier-atmen { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.06); } } /* Das Zeichen vor dem Wort: Dreieck fuer Abspielen, zwei Balken fuer Pause. Aus Flaechen gebaut, nicht aus Schriftzeichen - ein Unicode-Dreieck wird auf manchen Geraeten zum bunten Emoji. */ .hl-player-steuerung .hl-player-start::after { content: ""; order: -1; flex: none; width: .7em; height: .8em; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } .hl-player.laeuft .hl-player-steuerung .hl-player-start::after { clip-path: none; background: linear-gradient(currentColor, currentColor) left / 36% 100% no-repeat, linear-gradient(currentColor, currentColor) right / 36% 100% no-repeat; } .hl-player-steuerung { display: flex; align-items: center; gap: var(--hl-s3); } .hl-player-steuerung .hl-knopf { flex: 1; } .hl-player-sprung { flex: none; min-width: 3rem; min-height: 3rem; border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); background: transparent; color: var(--hl-text-leise); font: inherit; font-size: var(--hl-t-klein); font-variant-numeric: tabular-nums; cursor: pointer; transition: color var(--hl-zeit) var(--hl-kurve), border-color var(--hl-zeit) var(--hl-kurve); } .hl-player-sprung:hover { color: var(--hl-text); border-color: var(--hl-text-leise); } /* Die Kurzvorstellung der Stimme. Leise, unter der Steuerung, oft leer. */ .hl-player-stimme { margin: var(--hl-s3) 0 0; font-size: var(--hl-t-klein); line-height: 1.55; color: var(--hl-text-leise); } .hl-player-stimme:empty { display: none; } /* --------------------------------------------------------------------------- * Segmentschalter * * Fuer alle Einstellungen im Player: Stimme, Klang, Timer. * * WARUM NICHT DIE CHIPS AUS DEM NACHBERICHT: Chips beantworten eine Frage und * haben deshalb alle exakt dasselbe Gewicht - kein Gewaehlter darf besser * aussehen. Ein Segmentschalter stellt etwas ein. Hier MUSS erkennbar sein, * was gerade gilt, sonst weiss niemand, was er hoert. * * Der aktive Zustand arbeitet mit Textfarbe und einer minimal angehobenen * Flaeche, nicht mit einer knallweissen Fuellung. Eine harte weisse Flaeche * reisst das Auge aus einer dunklen, ruhigen Umgebung heraus - genau das, was * ein Player waehrend einer Meditation nicht tun darf. * ------------------------------------------------------------------------- */ .hl-segment { display: inline-flex; gap: 2px; padding: 3px; background: var(--hl-flaeche); border-radius: 10px; max-width: 100%; flex-wrap: wrap; } .hl-segment button { flex: 1; min-height: 2.5rem; padding: var(--hl-s2) var(--hl-s4); border: 0; border-radius: 7px; background: transparent; color: var(--hl-text-leise); font: inherit; font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--hl-zeit) var(--hl-kurve), background var(--hl-zeit) var(--hl-kurve); } /* Der Laengenfilter arbeitet mit Verweisen statt Knoepfen - er soll ohne Javascript funktionieren und eine Adresse haben, die man teilen kann. */ .hl-segment a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: var(--hl-s2) var(--hl-s3); border-radius: 7px; color: var(--hl-text-leise); text-decoration: none; font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color var(--hl-zeit) var(--hl-kurve), background var(--hl-zeit) var(--hl-kurve); } .hl-segment a:hover { color: var(--hl-text); } .hl-segment a[aria-pressed="true"] { background: var(--hl-flaeche-hoch); color: var(--hl-text); box-shadow: inset 0 1px 0 rgba(245, 241, 234, .07); } :root[data-theme="hell"] .hl-segment a[aria-pressed="true"] { background: var(--hl-flaeche); box-shadow: 0 1px 2px rgba(60, 42, 20, .08); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-segment a[aria-pressed="true"] { background: var(--hl-flaeche); box-shadow: 0 1px 2px rgba(60, 42, 20, .08); } } /* Der Filter steht über der Liste, mit Abstand nach unten. */ .hl-filter { display: block; margin: 0 0 var(--hl-s5); } .hl-filter .hl-segment { display: flex; width: 100%; } .hl-segment button:hover { color: var(--hl-text); } .hl-segment button[aria-pressed="true"] { background: var(--hl-flaeche-hoch); color: var(--hl-text); box-shadow: inset 0 1px 0 rgba(245, 241, 234, .07); } :root[data-theme="hell"] .hl-segment { background: rgba(26, 18, 6, .05); } :root[data-theme="hell"] .hl-segment button[aria-pressed="true"] { background: var(--hl-flaeche); box-shadow: 0 1px 2px rgba(60, 42, 20, .08); } @media (prefers-color-scheme: light) { :root:not([data-theme]) .hl-segment { background: rgba(26, 18, 6, .05); } :root:not([data-theme]) .hl-segment button[aria-pressed="true"] { background: var(--hl-flaeche); box-shadow: 0 1px 2px rgba(60, 42, 20, .08); } } /* Beschriftung über einem Segmentschalter. */ .hl-segment-titel { display: block; margin: 0 0 var(--hl-s2); font-size: var(--hl-t-eyebrow); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--hl-text-leise); } /* Die Stimme mit kleinem Bild im Segment. */ .hl-segment .hl-stimme { display: inline-flex; align-items: center; gap: var(--hl-s2); text-transform: none; letter-spacing: .01em; font-size: var(--hl-t-klein); font-weight: 500; } .hl-segment .hl-stimme img, .hl-segment .hl-stimme .hl-sprecher-leer { width: 1.75rem; height: 1.75rem; border-radius: 6px; object-fit: cover; flex: none; background: var(--hl-flaeche-hoch); filter: saturate(.55) brightness(.85); opacity: .55; transition: opacity var(--hl-zeit) var(--hl-kurve), filter var(--hl-zeit) var(--hl-kurve); } .hl-segment button[aria-pressed="true"] .hl-stimme img, .hl-segment button[aria-pressed="true"] .hl-stimme .hl-sprecher-leer { opacity: 1; filter: saturate(.8) brightness(.95); } /* --------------------------------------------------------------------------- * Die feste Stimme * * Wenn es nur eine gibt, ist nichts zu waehlen - dann steht sie einfach da. * Ein Sprecher ist eine reale Person und darf ein Foto haben. Das ist kein * Widerspruch zur Regel gegen Fotorealistik: Die gilt fuer die Weggefaehrten, * weil ein echtes Gesicht dort einen echten Menschen am anderen Ende * suggerieren wuerde. Hier IST einer. * ------------------------------------------------------------------------- */ .hl-player-gruppe { flex: 0 1 auto; } .hl-stimme-fest { display: inline-flex; align-items: center; gap: var(--hl-s2); margin: 0; font-size: var(--hl-t-klein); font-weight: 500; color: var(--hl-text); } .hl-stimme-fest img, .hl-stimme-fest .hl-sprecher-leer { width: 1.75rem; height: 1.75rem; border-radius: 6px; object-fit: cover; flex: none; background: var(--hl-flaeche-hoch); filter: saturate(.8) brightness(.95); } /* hidden schlaegt jede Anzeigeregel. Ohne das setzt sich display:flex an .hl-chips gegen das hidden-Attribut durch, und eine ausgeblendete Gruppe bliebe sichtbar. */ [hidden] { display: none !important; } /* Timer. Die Auswahl steht unter der Steuerung, leiser als die Fassungswahl - sie ist Komfort, nicht Inhalt. */ /* Der Timer ist Komfort, nicht Inhalt. Er sitzt im Fuss und bleibt schmal. */ .hl-timerwahl { display: flex; } .hl-timerwahl button { padding: var(--hl-s2) var(--hl-s3); min-height: 2.25rem; } .hl-player-timer { margin: var(--hl-s2) 0 0; font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-player-timer:empty { display: none; } /* Die zweite Leiste im Fuss (Wahl der Glocke) bekommt Luft nach oben. */ .hl-player-fuss .hl-glockentitel { margin-top: var(--hl-s5); } .hl-glockenwahl { display: flex; } .hl-glockenwahl button { padding: var(--hl-s2) var(--hl-s3); min-height: 2.25rem; } /* --------------------------------------------------------------------------- * Eine einzelne Zeile im Regal - kleiner als eine Karte, groesser als Meta. * * SIE DARF KEINE KARTE WERDEN, UND SIE MUSS TROTZDEM WIE EIN WEG AUSSEHEN. * * Beides steht gegeneinander, und beides hat einen Grund. Eine Vollflaeche * oben wuerde die sechs Bereiche nach unten schieben und den Zugang wie einen * ersten Schritt aussehen lassen - er ist aber ein Angebot NEBEN den * Bereichen (Entscheidung BE14). Als schlichte Goldzeile las sie sich * andererseits wie eine Zwischenueberschrift: Im Testlauf hat „Passend zu * deiner Stimmung" niemand als antippbar erkannt. * * Die Aufloesung liegt zwischen beidem: volle Breite fuer die Trefferflaeche, * aber keine Flaeche und kein Rahmen - nur eine Haarlinie unten, ein Winkel * rechts und genug Hoehe fuer einen Daumen. Das liest sich als Zeile, die * irgendwohin fuehrt, und nicht als Kachel. * ------------------------------------------------------------------------- */ .hl-zeile { margin: 0 0 var(--hl-s3); font-size: var(--hl-t-klein); } .hl-zeile a { display: flex; align-items: center; justify-content: space-between; gap: var(--hl-s3); min-height: 2.75rem; padding: var(--hl-s2) 0; border-bottom: 1px solid var(--hl-haarlinie); color: var(--hl-gold-text); font-weight: 500; text-decoration: none; transition: color var(--hl-zeit) var(--hl-kurve), border-color var(--hl-zeit) var(--hl-kurve); } /* Der Winkel nach rechts: das Zeichen fuer „fuehrt woandershin". */ .hl-zeile a::after { content: ""; flex: none; width: .45rem; height: .45rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .8; } .hl-zeile a:hover { border-bottom-color: var(--hl-gold-text); } /* Zwei Zeilen direkt untereinander teilen sich eine Linie, statt zwei zu ziehen - sonst entsteht ein Gitter, wo eine Liste gemeint ist. */ .hl-zeile + .hl-zeile { margin-top: calc(var(--hl-s3) * -1); } .hl-meta a { color: var(--hl-gold-text); text-decoration: none; } .hl-welt-training .hl-titel { font-weight: 500; } .hl-welt-training .hl-inhalt { line-height: 1.7; } /* --------------------------------------------------------------------------- * Der Baum * * Bildschirmfuellend, nicht als Widget in einer Ecke. Noch nicht gewachsene * Aeste gestrichelt bei ~13 % – der Weg ist sichtbar, aber leise. * ------------------------------------------------------------------------- */ .hl-baum { display: block; width: 100%; max-width: 20rem; margin: var(--hl-s5) auto; overflow: visible; } .hl-baum .hl-ast { fill: none; stroke: color-mix(in srgb, var(--hl-text) 32%, transparent); stroke-width: 1.4; stroke-linecap: round; } /* * ALLES HOLZ IN EINER GRUPPE, MIT EINER DECKKRAFT. * * Stamm, Aeste und Nebentriebe sind Flaechen, keine Striche - ein SVG-Stroke * hat ueber seine ganze Laenge dieselbe Breite, und ein Ast, der am Ansatz so * dick ist wie an der Spitze, sieht aus wie Draht. * * Die Deckkraft steht hier an der GRUPPE und nicht an den einzelnen Pfaden. * Zwei halbdurchsichtige Flaechen uebereinander ergeben naemlich eine hellere, * und genau dort, wo ein Ast am Stamm ansetzt, entstand dadurch ein * leuchtender Keil - jeder Ast sah aus wie angeklebt. Wer hier eine Deckkraft * auf einen einzelnen Pfad legt, holt diesen Fehler zurueck. */ .hl-baum .hl-holz { opacity: .32; } /* Das Hintergrundlicht: radial, in der Figurfarbe, sehr leise. „Licht ist radial" ist die Trennung von Tuer B, Design Guide 6.1. */ .hl-baum .hl-baumlicht { pointer-events: none; } /* Rinde: sie schneidet in die Flaeche, statt darauf zu liegen. Deshalb in der Grundfarbe und ausserhalb der Holzgruppe. */ .hl-baum .hl-rinde { fill: none; stroke: var(--hl-grund); stroke-opacity: var(--tiefe, .2); stroke-width: 1.4; } /* Blattadern, aus demselben Grund ebenfalls in der Grundfarbe. */ .hl-baum .hl-blattader { fill: none; stroke: var(--hl-grund); stroke-opacity: .30; stroke-width: .8; } .hl-baum .hl-blattader-fein { stroke-opacity: .22; stroke-width: .6; } /* * Noch nicht gewachsen: gestrichelt und blass. * * Der Ast ist da, von Anfang an. Das ist die Endlichkeitssicherung des * Modells - wer am ersten Tag sieht, dass der Weg aus fuenf Aesten besteht, * weiss, dass er endlich ist. Ein Baum, der mit jedem Schritt einen neuen Ast * bekaeme, waere unendlich und damit ein Versprechen ohne Einloesung. */ .hl-baum .hl-ast-offen { stroke-dasharray: 2 4; stroke: color-mix(in srgb, var(--hl-text) 13%, transparent); stroke-width: 1.2; } /* Verankert: der Ast traegt. Er ist dicker - die Staerke steht in PHP. Heller kann er nicht werden, siehe die Holzgruppe oben, und das ist genau die Regel: dicker, nicht farbiger. */ /* * DAS BLATT MUSS MAN SEHEN KOENNEN. * * Vorher stand hier die reine Figurfarbe. Die Farben der Weggefaehrten sind * aber fuer FLAECHEN gewaehlt - der Design Guide vermerkt bei Mattis und Derya * ausdruecklich "unter 4,5, nur Flaeche". Ein Blatt ist keine Flaeche, sondern * eine kleine Form, und kleine Formen brauchen mehr Abstand zum Grund als * grosse. * * Gemessen auf dem dunklen Grund: Mattis kam als Knospe auf 2,19 zu 1, Derya * auf 2,22. Das ist nicht "leise", das ist weg. * * IM HELLMODUS WAR ES SCHLIMMER, und das ist der eigentliche Fund. Die warmen * Figurfarben liegen dicht am Papier: Tobias erreichte auf #F1EDE5 gerade * 1,56 zu 1 bei voller Deckkraft, Jana 2,13, Bettina 2,09. Als Knospe lagen * alle drei bei etwa 1,0 - also unsichtbar. Gemeldet wurde nur der * Dunkelmodus, weil dort ueberhaupt noch etwas zu ahnen war. * * Deshalb wird die Figurfarbe gemischt, nicht ersetzt: Der Farbton bleibt der * des Weggefaehrten, nur die Helligkeit wandert in die Richtung, in der * Abstand entsteht. Im Dunkeln zum Text hin, im Hellen zur Tinte. Danach * traegt die schlechteste Knospe 3,7 zu 1 im Dunkeln und 2,6 im Hellen, das * volle Blatt 6,2 und 4,0. */ .hl-baum .hl-blatt { fill: color-mix( in srgb, var(--hl-farbe, var(--hl-text-leise)) var(--hl-blatt-anteil, 72%), var(--hl-blatt-mischung, #F5F1EA) ); } /* Der Schein blueht aus, statt als Scheibe zu enden. Ein Kreis mit harter Kante ist kein Licht, sondern ein Fleck. */ /* Der Schein blueht aus, statt als Scheibe zu enden. Ein Kreis mit harter Kante ist kein Licht, sondern ein Fleck – deshalb ein Verlauf, der im SVG steht, weil er die Figurfarbe braucht. */ /* Der naechste Schritt bekommt einen feinen Ring. Kein Blinken, kein Pfeil. */ .hl-baum .hl-blatt-aktiv { fill: none; stroke: var(--hl-text); stroke-opacity: .30; stroke-width: 1; } /* * Das seltene Blatt. * * Ungewoehnlich geformt, nie planbar, nie verlierbar. Es erklaert sich nicht: * kein Text, keine Bedingung, kein Hinweis darauf, dass es das gibt. Wer es * bekommt, sieht es. Wer nicht, vermisst nichts. */ /* Auch das seltene Blatt braucht den Hellmodus: --hl-gold-text ist im Dunkeln das Signaturgold und auf Papier die abgedunkelte Fassung. */ .hl-baum .hl-blatt-selten { fill: var(--hl-gold-text); opacity: .9; } /* * Das Astereignis. * * Ein ruhiger Bildschirm mit dem Baum, einem Satz und einem Weg zurueck. * Sonst nichts - kein Angebot, kein Teilen, keine Einladung. */ .hl-ereignis { text-align: center; padding: var(--hl-s6) 0; } .hl-ereignis .hl-rede { text-align: left; } /* Atmung: maximal 1,8 % ueber 9 Sekunden. Unter der bewussten Wahrnehmungsschwelle – man spuert sie, man sieht sie nicht. Nutzer kommen haeufig mit hoher Anspannung in die App; Dauerbewegung im Hintergrund darf nicht ablenken. Hoehere Werte sind nicht zulaessig. */ .hl-baum-atmet { transform-origin: 50% 92%; animation: hl-atem 9s ease-in-out infinite; } @keyframes hl-atem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } } /* --------------------------------------------------------------------------- * Fokus – sichtbar, ueberall, ohne Ausnahme * ------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--hl-gold-text); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------------------- * Bewegung * * Reduced Motion ist zwingend: Die Atmung und alle Wachstumsanimationen werden * still gestellt, nicht abgeschwaecht. * ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* Grosse Textskalierung: nichts hat eine feste Hoehe, alles darf wachsen. */ @media (min-width: 40rem) { :root { --hl-t-gross: 2rem; --hl-t-moment: 3rem; } } /* --------------------------------------------------------------------------- * Zugang – Z1 Anmelden, Z2 Registrieren, Z3 Passwort vergessen * * Der Zugang ist Tuer-neutral: kein Leuchtschein wie im Training, keine * monochrome Flaeche wie in der Bibliothek. Er kommt vor beiden Welten, und * eine Welt vorwegzunehmen, die noch niemand gewaehlt hat, waere ein * Versprechen ohne Deckung. Es bleibt beim goldenen Knopf ohne Schein. * * ZWEI WEGE, EIN GEWICHT IST FALSCH. E-Mail-Formular und Google/Apple stehen * untereinander, getrennt durch ein leises "oder". Nebeneinander waeren es * zwei gleich laute Angebote, und der Nutzer muesste eine Entscheidung * treffen, bevor er weiss, worum es geht. * ------------------------------------------------------------------------- */ .hl-auth { margin: var(--hl-s5) 0 0; } .hl-auth[hidden], .hl-auth-erfolg[hidden] { display: none; } .hl-auth .hl-feld { margin: 0 0 var(--hl-s4); } .hl-auth label { display: block; margin-bottom: var(--hl-s2); font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-auth input[type="email"], .hl-auth input[type="text"], .hl-auth input[type="password"] { width: 100%; min-height: 3rem; padding: var(--hl-s3) var(--hl-s4); font: inherit; font-size: var(--hl-t-basis); color: var(--hl-text); background: var(--hl-flaeche); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); box-sizing: border-box; } .hl-auth input:focus { outline: none; border-color: var(--hl-gold-text); } /* * Die Alterserklaerung sieht aus wie eine Erklaerung, nicht wie ein Feld. * * Kaestchen und Text stehen auf einer Zeile, die Beschriftung traegt hier die * volle Textfarbe statt der leisen: Sie ist keine Feldbezeichnung, sondern der * Satz, den jemand mit dem Haken unterschreibt. */ .hl-auth .hl-feld-erklaerung { margin: var(--hl-s5) 0; } .hl-auth .hl-feld-erklaerung label, .hl-social .hl-feld-erklaerung label { display: flex; align-items: flex-start; gap: var(--hl-s3); font-size: var(--hl-t-klein); line-height: 1.5; color: var(--hl-text); cursor: pointer; } .hl-auth .hl-feld-erklaerung input, .hl-social .hl-feld-erklaerung input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--hl-gold); } /* Das "oder" zwischen den beiden Wegen. Eine Haarlinie, kein Balken. */ .hl-auth-trenner { display: flex; align-items: center; gap: var(--hl-s4); margin: var(--hl-s5) 0; color: var(--hl-text-leise); font-size: var(--hl-t-klein); } .hl-auth-trenner::before, .hl-auth-trenner::after { content: ""; flex: 1; height: 1px; background: var(--hl-haarlinie); } .hl-social { margin: 0; } .hl-social .hl-button, .hl-social > div[id] { margin-bottom: var(--hl-s2); } /* * Die fremden Knoepfe erben das Mass, nicht die Farbe. * * Google und Apple schreiben ihre Darstellung vor - eigene Schrift, eigenes * Logo, eigene Farbe. Wir gleichen deshalb nur Hoehe, Radius und Breite an. * Wer versucht, sie auf Bernstein umzufaerben, verstoesst gegen die * Markenvorgaben beider und bekommt Knoepfe, die niemand wiedererkennt. */ .hl-social .hl-button { display: block; width: 100%; min-height: 3rem; padding: var(--hl-s3) var(--hl-s5); border-radius: var(--hl-radius); border: 1px solid var(--hl-haarlinie); background: var(--hl-flaeche); color: var(--hl-text); font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; } .hl-social .hl-button:hover { border-color: var(--hl-gold-text); } /* Meldungen. Fehler tragen Farbe UND Gewicht – Farbe ist nie allein Traeger. */ .hl-auth .hl-meldung, .hl-social .hl-meldung { margin: var(--hl-s3) 0; font-size: var(--hl-t-klein); line-height: 1.5; color: var(--hl-text-leise); } .hl-auth .hl-meldung:empty, .hl-social .hl-meldung:empty { display: none; } .hl-auth .hl-fehler, .hl-social .hl-fehler { color: var(--hl-text); font-weight: 600; } .hl-auth .hl-meldung a, .hl-social .hl-meldung a { color: var(--hl-gold-text); } /* Die Nebenwege. Untereinander, leise, klar unterscheidbar vom Knopf. */ .hl-auth-wege { display: flex; flex-direction: column; gap: var(--hl-s3); margin: var(--hl-s6) 0 var(--hl-s5); padding-top: var(--hl-s5); border-top: 1px solid var(--hl-haarlinie); } .hl-auth-wege a { color: var(--hl-text-leise); font-size: var(--hl-t-klein); text-decoration: none; min-height: 1.5rem; } .hl-auth-wege a:hover { color: var(--hl-gold-text); } /* Der Zustand nach der Registrierung. Ein Bildschirm, ein Gedanke. */ .hl-auth-erfolg { margin: var(--hl-s5) 0; } .hl-auth-erfolg:focus { outline: none; } .hl-auth-erfolg h2 { font-size: var(--hl-t-titel); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--hl-s3); } .hl-auth-erfolg p { margin: 0 0 var(--hl-s4); line-height: 1.6; } /* --------------------------------------------------------------------------- * S1 – die Startseite * * Der einzige Bildschirm, der laenger sein darf als eine Bildschirmhoehe. Die * Regel "ein Gedanke, ein Bildschirm" gilt im Trainingsbereich, und die * Startseite gehoert weder zu Tuer A noch zu Tuer B – sie kommt vor beiden. * * SIE BLEIBT TROTZDEM SCHMAL. Dieselbe Spaltenbreite wie ueberall (--hl-breite, * 32rem). Eine Startseite, die auf dem Desktop ueber die volle Fensterbreite * laeuft, waere die einzige Seite mit einem anderen Mass – und der erste * Eindruck waere ein anderes Produkt als das, was danach kommt. * ------------------------------------------------------------------------- */ .hl-start { padding-bottom: var(--hl-s7); } .hl-start-held { margin: var(--hl-s6) 0 var(--hl-s7); } /* * Der Groessensprung ist Absicht (Design Guide 4). * * Serife: Das ist einer der wenigen Momente, in denen sie erlaubt ist. Der * Satz auf der Startseite ist kein Wegweiser, sondern eine Haltung – dieselbe * Kategorie wie der Identitaetssatz und die Erkennen-Frage. */ .hl-start-titel { font-family: var(--hl-serif); font-size: var(--hl-t-moment); line-height: 1.15; letter-spacing: -.02em; font-weight: 400; margin: var(--hl-s3) 0 var(--hl-s4); text-wrap: balance; } .hl-start-unter { font-size: var(--hl-t-basis); line-height: 1.6; color: var(--hl-text-leise); margin: 0 0 var(--hl-s6); } /* * Der Knopf ist die einzige Handlung im Sichtfeld. * * Aus dem Feedback: "anmelden geht deutlich unter". Der Grund war nicht die * Groesse, sondern die Nachbarschaft – daneben standen gleich laute Knoepfe. * Hier gibt es einen, und der zweite Weg steht als Zeile darunter. * * Der Leuchtschein bleibt weg. Er gehoert nach Design Guide 6.2 ausschliesslich * in Tuer B, und die Startseite kommt vor der Tuerwahl. */ .hl-start-knopf { box-shadow: none; } .hl-start-zweitweg { margin: var(--hl-s4) 0 0; text-align: center; font-size: var(--hl-t-klein); } .hl-start-zweitweg a { color: var(--hl-text-leise); text-decoration: none; } .hl-start-zweitweg a:hover { color: var(--hl-gold-text); } /* * Der Kleintext unter dem Hauptknopf. Er traegt die Preisangabe, die aus der * Knopfbeschriftung herausgenommen wurde - leiser als der Knopf, aber naeher * dran als der Zweitweg darunter. */ .hl-start-knopfhinweis { margin: var(--hl-s2) 0 0; text-align: center; font-size: var(--hl-t-klein); color: var(--hl-text-leise); } /* * Der eigene Wenn-dann-Plan, zitiert auf F5, F6 und F7. Er ist kein Eingabe- * feld und keine Karte, sondern eine Erinnerung an das, was man selbst * geschrieben hat - deshalb nur eine Kante links und sonst nichts. */ .hl-planzitat { margin: var(--hl-s5) 0; padding: 0 0 0 var(--hl-s4); border-left: 2px solid var(--hl-haarlinie); } .hl-planzitat .hl-eyebrow-inline { margin-bottom: var(--hl-s2); } .hl-planzitat .hl-moment { margin: 0; } .hl-start-abschnitt { margin: var(--hl-s7) 0; } .hl-start-h2 { font-size: var(--hl-t-titel); font-weight: 600; letter-spacing: -.01em; margin: 0 0 var(--hl-s4); } .hl-start .hl-karte h3 { font-size: var(--hl-t-basis); font-weight: 600; margin: 0 0 var(--hl-s2); } .hl-start .hl-karte p { margin: 0; color: var(--hl-text-leise); line-height: 1.6; } /* * Die Schritte sind nummeriert, aber nicht gezaehlt. * * Eine Ordnungszahl sagt "erst das, dann das". Ein Fortschrittsbalken sagt * "du bist bei 1 von 3" – und erzeugt Druck, bevor jemand ueberhaupt begonnen * hat. Deshalb Ziffern in Gold und keine Leiste darum. */ .hl-start-schritte { list-style: none; counter-reset: hl-schritt; margin: 0; padding: 0; } .hl-start-schritte li { counter-increment: hl-schritt; display: flex; gap: var(--hl-s4); padding: var(--hl-s4) 0; border-top: 1px solid var(--hl-haarlinie); line-height: 1.6; } .hl-start-schritte li:last-child { border-bottom: 1px solid var(--hl-haarlinie); } .hl-start-schritte li::before { content: counter(hl-schritt); flex: 0 0 auto; color: var(--hl-gold-text); font-variant-numeric: tabular-nums; font-weight: 600; } .hl-start-abschluss { margin: var(--hl-s7) 0 var(--hl-s6); padding-top: var(--hl-s6); border-top: 1px solid var(--hl-haarlinie); } .hl-start-abschluss p { color: var(--hl-text-leise); line-height: 1.6; margin: 0 0 var(--hl-s5); } /* Auf breiten Fenstern stehen die drei Bloecke nebeneinander. */ @media (min-width: 52rem) { .hl-bildschirm-s1 .hl-inhalt { max-width: 60rem; } /* * DER KOPF STEHT IN DER MITTE, NICHT LINKS AM RAND. * * DER BEFUND AUS DEM TESTLAUF, DEN DIESE REGEL BEHEBT. * * "Oberer Teil ist nicht in der Mitte, unten geht alles über den ganzen * Rand." Genau so war es: Die Huelle wurde hier auf 60rem geoeffnet, damit * die drei Kacheln nebeneinander passen. Der Kopf bekam dagegen eine * Hoechstbreite von 34rem - aber keinen Aussenabstand, der ihn zentriert. * * Ein Block mit Hoechstbreite und ohne "margin-inline: auto" bleibt links * kleben. Auf dem Handy fiel das nie auf, weil dort beide Masse gleich * sind. Auf dem Desktop stand die Ueberschrift in der linken Haelfte und * alles darunter ueber die ganze Breite - zwei Rasterlinien auf einer * Seite, und die erste ist die, die den ersten Eindruck macht. * * DIE MITTIGE AUSRICHTUNG DES TEXTES GEHOERT DAZU. * * Der Kleintext unter dem Knopf und der Zweitweg standen schon zentriert - * Titel und Untertitel nicht. Ein zentrierter Block mit linksbuendigem Text * und zwei zentrierten Zeilen darunter sieht nicht ruhig aus, sondern * unentschieden. * * NUR HIER OBEN UND NUR AUF BREITEN FENSTERN. Der Rest der App bleibt * linksbuendig; zentrierter Fliesstext ist schlechter zu lesen, sobald er * mehr als ein paar Zeilen hat. Der Kopf hat drei. */ .hl-start-held { max-width: 34rem; margin-inline: auto; text-align: center; } .hl-start-abschnitt .hl-karte { display: inline-block; width: calc(33.333% - var(--hl-s4)); vertical-align: top; margin-right: var(--hl-s4); } .hl-start-abschnitt .hl-karte:last-child { margin-right: 0; } } /* --------------------------------------------------------------------------- * Fusszeile – nur auf Startseite und Zugang * * Sie traegt Impressum und Datenschutz. Beide sind Pflicht, aber nicht je * Ansicht: gefordert ist leicht erkennbar, unmittelbar erreichbar, staendig * verfuegbar. Im Trainingsbereich waere sie ein zweiter Gedanke auf einem * Bildschirm, der genau einen tragen soll. * ------------------------------------------------------------------------- */ .hl-fuss { max-width: var(--hl-breite); margin: var(--hl-s7) auto 0; padding: var(--hl-s5) var(--hl-s5) var(--hl-s6); border-top: 1px solid var(--hl-haarlinie); } .hl-fuss nav { display: flex; flex-wrap: wrap; gap: var(--hl-s2) var(--hl-s5); } .hl-fuss a { color: var(--hl-text-leise); font-size: var(--hl-t-klein); text-decoration: none; min-height: 1.5rem; } .hl-fuss a:hover { color: var(--hl-gold-text); } @media (min-width: 52rem) { .hl-bildschirm-s1 .hl-fuss { max-width: 60rem; } } /* * Der Datenschutzhinweis unter dem Registrierungsformular. * * Leise, aber nicht versteckt: dieselbe Groesse wie die Nebenwege, klar * lesbarer Kontrast, der Link in Gold. Kleingedrucktes, das man suchen muss, * erfuellt die Informationspflicht dem Buchstaben nach und dem Zweck nach * nicht. */ .hl-auth-recht { margin: var(--hl-s5) 0 0; font-size: var(--hl-t-klein); line-height: 1.55; color: var(--hl-text-leise); } .hl-auth-recht a { color: var(--hl-gold-text); } /* * "Anderer Zeitpunkt" in F7. * * Aufgeklappt statt zweiter Knopf: Der Regelfall - morgen noch einmal fragen - * ist eine Handlung, alles andere eine Ausnahme. Zwei gleich laute Knoepfe * nebeneinander waeren wieder die Situation von der Startseite, wo "anmelden * deutlich unterging". * *
statt Javascript, wie beim Bereichsmenue: Aufklappen, * Tastaturbedienung und ARIA-Semantik kommen mit, und ohne Skript bleibt es * benutzbar. */ .hl-anderer-zeitpunkt { margin: var(--hl-s4) 0; } .hl-anderer-zeitpunkt > summary { list-style: none; cursor: pointer; display: inline-block; padding: var(--hl-s2) 0; min-height: 1.5rem; font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-anderer-zeitpunkt > summary::-webkit-details-marker { display: none; } .hl-anderer-zeitpunkt > summary::marker { content: ""; } .hl-anderer-zeitpunkt > summary:hover { color: var(--hl-gold-text); } .hl-anderer-zeitpunkt input { margin-bottom: var(--hl-s3); } /* * Datumsfelder tragen dasselbe Mass wie die Freitextfelder. * * Ohne diese Regel setzen iOS und Android ihre eigene Hoehe und ihre eigene * Schrift - das Feld steht dann als Fremdkoerper zwischen zwei Textfeldern, * die sich an den Design Guide halten. */ input.hl-freitext[type="datetime-local"] { min-height: 3rem; line-height: 1.4; font-family: inherit; } /* --------------------------------------------------------------------------- * Der Ablauf einer Übung – F2, vor dem Audio * * Nummeriert, weil die Schritte eine Reihenfolge haben. Ziffern in Gold wie * auf der Startseite, kein Balken drum herum: Eine Reihenfolge ist kein * Fortschritt, und was hier steht, ist noch nicht getan. * ------------------------------------------------------------------------- */ .hl-ablauf { list-style: none; counter-reset: hl-ablaufschritt; margin: 0 0 var(--hl-s5); padding: 0; } .hl-ablauf li { counter-increment: hl-ablaufschritt; display: flex; gap: var(--hl-s3); padding: var(--hl-s2) 0; line-height: 1.6; } .hl-ablauf li::before { content: counter(hl-ablaufschritt); flex: 0 0 auto; min-width: 1rem; color: var(--hl-gold-text); font-variant-numeric: tabular-nums; font-weight: 600; } /* * Das Beispiel im Wenn-dann-Plan. * * Zugeklappt und leise. Es ist eine Hilfe für den, der nicht weiterweiß, und * darf nicht wie die erwartete Antwort aussehen – ein abgeschriebener Plan hat * keinen eigenen Auslöser und löst deshalb nichts aus. */ .hl-beispiel { margin: 0 0 var(--hl-s5); } .hl-beispiel > summary { list-style: none; cursor: pointer; display: inline-block; padding: var(--hl-s2) 0; min-height: 1.5rem; font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-beispiel > summary::-webkit-details-marker { display: none; } .hl-beispiel > summary::marker { content: ""; } .hl-beispiel > summary:hover { color: var(--hl-gold-text); } .hl-beispiel p { margin: var(--hl-s2) 0 0; padding: var(--hl-s3) var(--hl-s4); background: var(--hl-safety-flaeche); border-radius: var(--hl-radius-eng); font-size: var(--hl-t-klein); line-height: 1.6; color: var(--hl-text-leise); } /* * "Das kann dich dabei stützen" – F8, am Ende des Schritts. * * NUR TITEL UND WEG. Keine Stufe, keine Punkte, keine Dauer als Fortschritt, * keine Angabe darüber, ob etwas schon gehört wurde. Ein Verweis ist kein * Wert, und nur deshalb berührt dieser Abschnitt die Trennung von Training und * Bibliothek nicht. Wer hier eine Zahl ergänzt, bricht sie. */ .hl-stuetzen { margin: var(--hl-s6) 0 var(--hl-s5); padding-top: var(--hl-s5); border-top: 1px solid var(--hl-haarlinie); } .hl-stuetzen .hl-karte { display: block; margin-bottom: var(--hl-s2); text-decoration: none; } /* * Der Hörknopf unter einer Rede der Figur. * * Baustein D aus 24_KI-Intensivierung_Roadmap.md: Die gebundenen Textbausteine * gibt es zusätzlich als Aufnahme. Der Text bleibt in jedem Fall stehen, der * Ton ist Zusatz und nie Ersatz — deshalb steht der Knopf UNTER der Rede und * ersetzt sie nirgends. * * EIN KNOPF, KEINE ABSPIELLEISTE. Ein Baustein ist drei Sätze lang. Balken, * Laufzeit und Lautstärke gehören zu einer Meditation von dreißig Minuten, * nicht hierher. * * DIE KENNZEICHNUNG IST LEISE, ABER NICHT VERSTECKT. Sie steht in der * Textfarbe für Nebensächliches, in derselben Zeile wie der Knopf, und sie * verschwindet nie — auch nicht, während die Aufnahme läuft (K5). */ .hl-stimme { display: flex; align-items: center; gap: var(--hl-s3); margin: var(--hl-s4) 0 0; } .hl-hoerknopf { display: inline-flex; align-items: center; gap: var(--hl-s2); padding: var(--hl-s2) var(--hl-s4) var(--hl-s2) var(--hl-s3); border: 1px solid var(--hl-haarlinie); border-radius: 999px; background: none; color: var(--hl-text-leise); font: inherit; font-size: var(--hl-t-klein); cursor: pointer; } .hl-hoerknopf:hover { color: var(--hl-text); } /* Dreieck aus Rahmen, damit kein Bild und keine Schriftart nötig ist. */ .hl-hoerknopf-symbol { width: 0; height: 0; border-style: solid; border-width: .34rem 0 .34rem .56rem; border-color: transparent transparent transparent currentColor; margin-left: .12rem; } .hl-hoerknopf[aria-pressed="true"] .hl-hoerknopf-symbol { width: .5rem; height: .56rem; border-width: 0 0 0 .16rem; border-color: currentColor; box-shadow: inset -.16rem 0 0 currentColor; margin-left: 0; } .hl-stimme-herkunft { font-size: var(--hl-t-klein); color: var(--hl-text-leise); } /* --------------------------------------------------------------------------- * Bubbles, Ansichtswechsel, Suche und der kleine Knopf * * DREI KLASSEN HATTEN NULL REGELN und wurden trotzdem benutzt: hl-suche, * hl-zeile-knopf und die Bubbles gab es noch gar nicht. Was im Journal wie ein * kaputter Knopf aussah, war der unformatierte Standardknopf des Browsers * mitten in einem sonst durchgestalteten Bildschirm — beim Suchen, beim * Einwilligungswiderruf und beim Export. Drei Beobachtungen, ein Fehler. * ------------------------------------------------------------------------- */ /* * Die Bubbles unter der Tagesfrage: die anderen Arten zu schreiben, * nebeneinander statt untereinander. * * SIE SIND KEINE HAUPTNAVIGATION. Deshalb haben sie keine Fläche, sondern nur * eine Haarlinie — sie stehen neben der Tagesfrage, nicht über ihr. */ /* * ABSTAND NACH OBEN, an der Klasse und nicht an der Nachbarschaft. * * Ein erklärender Satz, der direkt unter einem Speichern-Knopf klebt, liest * sich wie eine Fußnote zum Knopf — dabei handelt er von etwas anderem. * * Zuerst stand hier `.hl-formular + .hl-leer`. Das griff nie: Zwischen dem * Formular und dem Absatz steht noch das schließende div des * Zwischenspeichers, die beiden sind also keine Geschwister. Ein Selektor, der * von der Verschachtelung abhängt, bricht beim nächsten Umbau genauso still, * wie er hier nie angefangen hat zu wirken. */ .hl-abgesetzt, .hl-inhalt > .hl-abgesetzt { margin-top: var(--hl-s6); } /* * DER ZWEITE SELEKTOR IST DER, DER WIRKT, und das ist der eigentliche Befund: * `.hl-inhalt > p` setzt margin: 0 0 var(--hl-s4) und ist mit (0,1,1) * spezifischer als eine einzelne Klasse. Die einfache Regel wurde also * überschrieben, ohne dass irgendwo etwas kaputtging — die Angabe stand da und * verlor still. Beide Versuche davor sind an derselben Zeile gescheitert: * einmal an der Nachbarschaft, einmal an der Spezifität. * * Die einfache Fassung bleibt zusätzlich stehen, damit die Klasse auch * außerhalb von .hl-inhalt tut, was ihr Name sagt. */ /* * Die Bubbles unter der Tagesfrage. * * SIE SAHEN ZUERST AUS WIE TEXT. Haarlinie und leise Textfarbe waren als * Zurückhaltung gemeint und lasen sich als „nicht anfassbar" — man sieht drei * Wörter in einem Rahmen, aber nichts sagt, dass sie etwas tun. * * Drei Änderungen, jede mit einem Grund: * * Fläche statt nichts. Was auf einer eigenen Fläche steht, liegt auf dem * Grund und nicht darin. Das ist derselbe Unterschied, den .hl-karte macht. * * Goldener Text. Klickbarer Text ist in dieser App golden — .hl-zeile a ist * es seit jeher. Die Bubbles waren die einzige Stelle, an der ein Weg leise * grau dastand. * * Volle Antippfläche. 2,75rem Höhe, dieselbe Mindestgröße wie jede Zeile. * * KEINE GEFÜLLTE GOLDFLÄCHE. Das ist dem Speichern-Knopf vorbehalten — es gibt * eine Hauptaktion je Bildschirm, und das ist hier das Speichern. */ /* * ALLE DREI IN EINER REIHE, AUCH AUF EINEM SCHMALEN TELEFON. * * Mit Umbruch sprang die dritte in die zweite Zeile, und aus einer Reihe * gleichwertiger Möglichkeiten wurden zwei plus ein Nachzügler — der letzte * sieht dann aus wie ein Anhang, obwohl er dasselbe Gewicht hat. * * Sie teilen sich die Breite deshalb zu gleichen Teilen und dürfen ihren Text * intern umbrechen. Lieber eine zweizeilige Beschriftung als eine dritte * Bubble in einer eigenen Reihe: Die Anordnung trägt hier die Aussage, die * Zeilenzahl der Beschriftung nicht. */ .hl-bubbles { display: flex; flex-wrap: nowrap; gap: var(--hl-s2); margin: var(--hl-s5) 0 var(--hl-s6); } .hl-bubble { display: inline-flex; flex: 1 1 0; min-width: 0; align-items: center; justify-content: center; min-height: 2.75rem; text-align: center; white-space: normal; hyphens: auto; padding: var(--hl-s2) var(--hl-s3); border: 1px solid color-mix(in srgb, var(--hl-gold-text) 35%, transparent); border-radius: 999px; background: var(--hl-flaeche); color: var(--hl-gold-text); font-size: var(--hl-t-klein); font-weight: 600; line-height: 1.25; text-decoration: none; } .hl-bubble:hover, .hl-bubble:focus-visible { border-color: var(--hl-gold-text); background: color-mix(in srgb, var(--hl-gold-text) 8%, var(--hl-flaeche)); } .hl-bubble:active { transform: translateY(1px); } /* * Der Ansichtswechsel in „Deine Einträge". Nutzt das vorhandene Segment, * bekommt hier nur seinen Abstand — damit Nach Tag und Nach Frage genauso * aussehen wie jede andere Umschaltung in der App. */ .hl-ansicht { margin: 0 0 var(--hl-s5); } /* * Die Suche. Feld und Knopf in einer Zeile, das Feld nimmt den Rest. * * KEIN LUPENSYMBOL IM FELD. Ein Platzhaltertext sagt, was gesucht wird; ein * Symbol sagt nur, dass gesucht wird. */ .hl-suche { display: flex; gap: var(--hl-s2); margin: 0 0 var(--hl-s5); } .hl-suche input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: var(--hl-s2) var(--hl-s3); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); background: none; color: var(--hl-text); font: inherit; font-size: var(--hl-t-klein); -webkit-appearance: none; appearance: none; } .hl-suche input[type="search"]::placeholder { color: var(--hl-text-leise); } .hl-suche input[type="search"]:focus-visible { border-color: var(--hl-text-leise); outline: none; } /* * Der kleine Knopf. Für alles, was neben einem Feld oder in einer Zeile steht * und keine Hauptaktion ist — Suchen, Widerrufen, Herunterladen. */ .hl-knopf-klein { flex: none; padding: var(--hl-s2) var(--hl-s4); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); background: none; color: var(--hl-text-leise); font: inherit; font-size: var(--hl-t-klein); cursor: pointer; } .hl-knopf-klein:hover { color: var(--hl-text); border-color: var(--hl-text-leise); } /* * hl-zeile-knopf war die Klasse ohne Regeln. Sie zeigt jetzt auf denselben * kleinen Knopf, damit auch ein übersehener Aufruf richtig aussieht statt * unformatiert dazustehen. */ .hl-zeile-knopf { display: inline-block; padding: var(--hl-s2) var(--hl-s4); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); background: none; color: var(--hl-text-leise); font: inherit; font-size: var(--hl-t-klein); cursor: pointer; } .hl-zeile-knopf:hover { color: var(--hl-text); border-color: var(--hl-text-leise); } /* Die leise Zeile: für Wege, die vorhanden sein müssen, aber nichts anbieten. */ .hl-zeile-leise a { color: var(--hl-text-leise); } /* --------------------------------------------------------------------------- * Rückmeldung unter einem Inhalt: fünf Sterne und ein Feld * * NATÜRLICHE REIHENFOLGE IM MARKUP, eins bis fünf. * * Zuerst standen die Sterne rückwärts, mit row-reverse wieder umgedreht — der * übliche Trick, um ohne Skript alles links vom gewählten einzufärben. Er hat * hier nicht getragen: Beim fünften Stern blieb einer blass, und die Ursache * lag im Zusammenspiel aus umgekehrter Achse, order und den Hoverregeln. Drei * Dinge, die einzeln richtig sind und zusammen nicht mehr nachvollziehbar. * * Jetzt setzt ein kurzes Skript data-wert an die Reihe, und hier steht fünfmal * ausgeschrieben, was das bedeutet. Länger, dafür in einem Satz erklärbar. * * OHNE SKRIPT BLEIBT ES BEDIENBAR: Die Sterne sind Radioknöpfe, das Feld * erscheint über input:checked ~ …, abschicken geht. Nur die goldene Färbung * fehlt dann, und der gewählte Stern ist am Rahmen zu erkennen. * ------------------------------------------------------------------------- */ .hl-sterne { display: flex; gap: var(--hl-s1); margin: 0 0 var(--hl-s4); } /* * Das Feld ist nicht display:none, sondern nur unsichtbar an Ort und Stelle. * Ausgeblendete Radios sind für die Tastatur nicht mehr erreichbar, und eine * Bewertung, die nur mit dem Finger geht, ist keine. */ .hl-stern-feld { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hl-stern { cursor: pointer; font-size: 1.9rem; line-height: 1; padding: var(--hl-s1) var(--hl-s1); color: var(--hl-haarlinie); } .hl-stern::before { content: "★"; } /* Der gewählte Stern und alle davor. Fünf Zeilen, dafür keine Rätsel. */ .hl-sterne[data-wert="1"] .hl-stern:nth-of-type(-n+1), .hl-sterne[data-wert="2"] .hl-stern:nth-of-type(-n+2), .hl-sterne[data-wert="3"] .hl-stern:nth-of-type(-n+3), .hl-sterne[data-wert="4"] .hl-stern:nth-of-type(-n+4), .hl-sterne[data-wert="5"] .hl-stern:nth-of-type(-n+5) { color: var(--hl-gold); } /* * Ohne Skript bleibt wenigstens der gewählte Stern erkennbar. Kein Ersatz für * die Färbung, aber besser als eine Reihe, die auf nichts reagiert. */ .hl-stern-feld:checked + .hl-stern { color: var(--hl-gold); } .hl-stern-feld:focus-visible + .hl-stern { outline: 2px solid var(--hl-gold-text); outline-offset: 2px; } /* * Hinweis, Feld und Knopf erscheinen mit der ersten Auswahl. Vorher steht dort * nur die Frage und fünf Sterne, und mehr braucht es für den ersten Schritt * nicht. * * VERSTECKT WIRD ERST, WENN DAS SKRIPT DA IST, und nicht andersherum. Das * Skript setzt data-wartet, sobald es läuft; ohne Skript steht schlicht alles * offen da. So kann ein fehlgeschlagenes Skript den Block nie unerreichbar * machen — die umgekehrte Reihenfolge (erst verstecken, dann per Skript * zeigen) hätte genau das getan. */ .hl-feedback[data-wartet="1"] .hl-feedback-mehr { display: none; } .hl-feedback-mehr .hl-leer { margin: 0 0 var(--hl-s3); } .hl-feedback-mehr .hl-knopf-leise { margin-top: var(--hl-s3); } /* Nur für Bildschirmleser: der Sternwert als Wort. */ .hl-versteckt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* * Der wartende Knopf. * * KEIN GRAU UND KEIN SPINNER. Ausgegraut heisst im ganzen Produkt "geht * nicht", und hier geht gerade sehr wohl etwas. Die leichte Abschwaechung * sagt "laeuft", ohne den Knopf als gesperrt darzustellen. */ [data-hl-wartet="1"] { opacity: .72; cursor: progress; } /* * Das Glossar und der Verstehens-Check (Bereich W, Paket W6). * * ZWEI SEHR KLEINE BLOECKE, WEIL ES ZWEI SEHR EINFACHE DINGE SIND. Eine * Definitionsliste und ein aufklappbarer Satz brauchen keine eigene Optik - * sie erben Schrift, Farbe und Abstaende vom Rest und setzen nur, was das * Grundelement nicht mitbringt. * * KEIN AKZENT AUF DER ANTWORT. Ein gruener Haken oder ein farbig hinterlegter * Kasten machte aus der Selbstpruefung eine Bewertung. Es wird nichts * ausgewertet und nichts gespeichert, also sieht auch nichts nach Ergebnis aus. */ /* * KEINE EIGENE ABSCHNITTSKLASSE. Hier stand am 2. September kurzzeitig eine * zweite Regel fuer .hl-abschnitt - und die Klasse war laengst vergeben: Sie * ist die Abschnittsmarke in Listen (weiter oben), und vier Plugins setzen sie * auf ihre

. Die zweite Regel haette jeder dieser Ueberschriften eine * Trennlinie und Innenabstand verpasst, vom Profil bis zur Bibliothek. * * Der Bereich W benutzt jetzt dieselbe Marke wie alle anderen. Das ist auch * inhaltlich richtig: „Der Begriff dazu" ist eine Abschnittsmarke in einer * Liste und nichts anderes. */ .hl-glossar { margin: 0 0 var(--hl-s4); } .hl-glossar dt { margin: var(--hl-s3) 0 var(--hl-s1); font-weight: 600; } .hl-glossar dt:first-child { margin-top: 0; } .hl-glossar dd { margin: 0; padding: 0 0 var(--hl-s3); border-bottom: 1px solid var(--hl-haarlinie); font-size: var(--hl-t-klein); } /* Ein einzelner Begriff braucht keine Trennlinie - es kommt nichts danach. */ .hl-glossar-einzeln dd { padding-bottom: 0; border-bottom: 0; } /* Der Knopf steht nie direkt auf dem, was nach ihm kommt. */ .hl-knopf + .hl-abschnitt { margin-top: var(--hl-s7); } .hl-knopf + .hl-zeile, .hl-knopf + .hl-meta { margin-top: var(--hl-s6); } .hl-check { padding: var(--hl-s2) 0; border-bottom: 1px solid var(--hl-haarlinie); } .hl-check summary { cursor: pointer; list-style: none; min-height: 2.75rem; display: flex; align-items: center; } .hl-check summary::-webkit-details-marker { display: none; } .hl-check p { margin: var(--hl-s2) 0 0; font-size: var(--hl-t-klein); } /* * Der Kompass (G11, Paket W8). * * ALLES UEBER CURRENTCOLOR UND DIE VARIABLEN DES RAHMENS, keine eigene * Palette. Damit stimmt das Rad in beiden Themen, ohne dass hier eine zweite * Farbliste gepflegt wird, die beim naechsten Themenwechsel vergessen wird. * * KEINE ANIMATION UND KEIN AUFBAU. Eine Form, die sich aufbaut, sieht nach * einer Auswertung aus, die gerade laeuft. Es wird nichts ausgewertet. */ .hl-kompass { margin: 0 0 var(--hl-s4); display: flex; justify-content: center; } .hl-kompass svg { width: 100%; max-width: 20rem; height: auto; } /* Das Netz ist Orientierung und darf nicht mitreden. */ .hl-kompass-netz { fill: none; stroke: var(--hl-haarlinie); stroke-width: 1; } .hl-kompass-achse { stroke: var(--hl-haarlinie); stroke-width: 1; } /* * Die heutige Form in Gold, aber gefuellt und nicht leuchtend: Der Leuchtschein * gehoert ausschliesslich in Tuer B, und ein Kompass ist keine Belohnung. */ .hl-kompass-jetzt { fill: color-mix(in srgb, var(--hl-gold) 22%, transparent); stroke: var(--hl-gold); stroke-width: 2; stroke-linejoin: round; } /* * Die vorherige Form nur als Linie, gestrichelt und leise. Sie ist der * Vergleich mit sich selbst und soll den Blick nicht binden. */ .hl-kompass-vorher { fill: none; stroke: var(--hl-text-leise); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; } /* Die Liste unter dem Rad. Gleichwertiger Zwilling, keine Beschriftung. */ .hl-kompass-liste { margin: 0 0 var(--hl-s5); } .hl-kompass-liste dt { margin: var(--hl-s3) 0 0; font-weight: 600; } .hl-kompass-liste dt:first-child { margin-top: 0; } .hl-kompass-liste dd { margin: 0; padding: 0 0 var(--hl-s3); border-bottom: 1px solid var(--hl-haarlinie); font-size: var(--hl-t-klein); color: var(--hl-text-leise); } /* * Das Arbeitsblatt (G12, Paket W12). * * DIE SEITE IST FUER PAPIER GEBAUT UND NICHT FUER DEN BILDSCHIRM UMGEBAUT. * Am Bildschirm sieht sie aus wie jede andere Liste; erst im Druck faellt * alles weg, was zur App gehoert und nicht zum Blatt. * * KEIN EIGENES SEITENFORMAT, KEINE RAENDER IN MILLIMETERN. Was der Browser * und der Drucker aushandeln, ist auf jedem Geraet naeher am Richtigen als * eine feste Vorgabe von hier. */ .hl-blatt-plan { margin: 0 0 var(--hl-s3); padding: 0 0 var(--hl-s3); border-bottom: 1px solid var(--hl-haarlinie); } .hl-blatt-frage { margin: 0 0 var(--hl-s5); color: var(--hl-text-leise); font-size: var(--hl-t-klein); } /* * Die leeren Blaetter (G12). * * LINIEN STATT KAESTEN. Ein umrandetes Feld sagt "hier gehoert genau so viel * hinein"; eine Linie sagt "schreib". Wer mit der Hand schreibt, braucht * ausserdem mehr Platz, als ein Bildschirmfeld je haette. */ .hl-blatt-hinweis { margin: 0 0 var(--hl-s5); font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-blatt-block { margin: 0 0 var(--hl-s6); padding: 0 0 var(--hl-s4); border-bottom: 1px solid var(--hl-haarlinie); } .hl-blatt-feld { margin: 0 0 var(--hl-s4); } .hl-blatt-label { display: block; font-weight: 600; margin-bottom: var(--hl-s1); } .hl-blatt-hilfe { display: block; font-size: var(--hl-t-klein); color: var(--hl-text-leise); margin-bottom: var(--hl-s2); } /* Die Schreiblinie. Hoehe so, dass eine Handschrift hineinpasst. */ .hl-blatt-linie { display: block; height: 2rem; border-bottom: 1px solid var(--hl-haarlinie); } .hl-blatt-fuss { margin: var(--hl-s5) 0 0; font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-blatt-tabelle { width: 100%; border-collapse: collapse; margin: 0 0 var(--hl-s4); } .hl-blatt-tabelle th { text-align: left; font-size: var(--hl-t-klein); font-weight: 600; padding: 0 var(--hl-s2) var(--hl-s2) 0; border-bottom: 1px solid var(--hl-haarlinie); vertical-align: bottom; } /* Die dritte Spalte ist die breiteste - sie wird am ehesten uebersprungen. */ .hl-blatt-tabelle th:nth-child(3) { width: 40%; } .hl-blatt-tabelle td { height: 2.6rem; border-bottom: 1px solid var(--hl-haarlinie); border-right: 1px solid var(--hl-haarlinie); } .hl-blatt-tabelle td:last-child { border-right: 0; } /* * SCHRITTE EINER TEXTFASSUNG (B3, Inhalte ohne Aufnahme) * * Eine nummerierte Folge und sonst nichts. Kein Haken je Zeile: Das waere * eine Aufgabenliste, und eine Uebung, die man abhakt, ist keine mehr. * Die Ziffer steht in Gold, weil sie die einzige Fuehrung ist, die es hier * gibt - es laeuft keine Stimme mit, die sagt, wo man ist. */ .hl-schritte { margin: var(--hl-s5) 0; padding: 0; list-style: none; counter-reset: hl-schritt; } .hl-schritte li { counter-increment: hl-schritt; position: relative; padding: 0 0 0 var(--hl-s6); margin: 0 0 var(--hl-s4); line-height: 1.6; } .hl-schritte li:last-child { margin-bottom: 0; } .hl-schritte li::before { content: counter(hl-schritt); position: absolute; left: 0; top: 0; font-variant-numeric: tabular-nums; color: var(--hl-gold-text); font-weight: 600; } @media print { /* * WEG MIT ALLEM, WAS NICHT AUF DAS BLATT GEHOERT: Kopfzeile mit * Bereichsmenue und Hilfe, Fusszeile, die Stift-Schaltflaeche des * Journals, der Druckknopf und der Hinweis, wie man druckt. */ .hl-kopf, .hl-fuss, .hl-stift, .hl-nicht-drucken { display: none !important; } /* * SCHWARZ AUF WEISS. Der dunkle Grund der App verbraucht eine * Druckerpatrone und liest sich auf Papier schlechter. */ :root, .hl-app, body { background: #fff !important; color: #000 !important; } .hl-blatt-frage { color: #444 !important; } .hl-blatt-plan { border-bottom-color: #ccc !important; } .hl-abschnitt { color: #000 !important; } /* Ein Plan, ein Block, eine Zeile wird nicht ueber zwei Seiten getrennt. */ .hl-blatt-plan, .hl-blatt-frage, .hl-blatt-block, .hl-blatt-tabelle tr { break-inside: avoid; } /* Linien und Rahmen muessen auf Papier sichtbar sein, 10 Prozent sind es nicht. */ .hl-blatt-linie, .hl-blatt-block, .hl-blatt-tabelle th, .hl-blatt-tabelle td { border-color: #999 !important; } .hl-blatt-hinweis, .hl-blatt-hilfe, .hl-blatt-fuss { color: #444 !important; } /* * DIE DRUCKFASSUNG EINER WISSENSKARTE (W2 und W3). * * Sie ist der Grund, warum es kein serverseitig erzeugtes PDF gibt: Was * hier herauskommt, ist ein sauberes Dokument mit Titel, Text und * Quellenangabe, und der Browser macht daraus auf Wunsch eine PDF-Datei. * * WEG FAELLT, WAS NUR AM BILDSCHIRM SINN HAT: der Knopf in die Vertiefung * (auf Papier liegt sie bei), der Merkknopf, der Verweis in die Bibliothek. * Ein Verweis auf Papier, den niemand antippen kann, ist eine Sackgasse. * * DER VERSTEHENS-CHECK DRUCKT MIT, UND ZWAR AUFGEKLAPPT. Auf Papier gibt * es kein Aufklappen, und eine Frage ohne Antwort waere eine Pruefung. */ .hl-bildschirm-w2 .hl-knopf, .hl-bildschirm-w2 .hl-formular, .hl-bildschirm-w2 .hl-zeile, .hl-bildschirm-w3 .hl-zeile { display: none !important; } /* * Der Verstehens-Check druckt aufgeklappt mit. Das Aufklappen macht das * Skript des Druckknopfs, nicht diese Regel: Ein zugeklapptes details * laesst sich per CSS nicht zuverlaessig oeffnen. */ .hl-check { border-bottom-color: #ccc !important; } .hl-check summary { font-weight: 600; cursor: default; } .hl-glossar dt, .hl-abschnitt { color: #000 !important; } .hl-glossar dd { color: #333 !important; border-bottom-color: #ccc !important; } } /* * Rechtsformulare: Kuendigung (G13) und Kontoloeschung ohne Anmeldung (G14). * Ergaenzt mit 0.45.3 am 17. September 2026. * * Die Eingabefelder uebernehmen die Optik der Anmeldung (.hl-auth), damit ein * Formular ohne Konto nicht anders aussieht als eines mit. Neu sind nur die * Teile, die die Anmeldung nicht kennt: Auswahlgruppen, Mehrzeiler, Datum. */ .hl-auth textarea, .hl-auth input[type="date"] { width: 100%; min-height: 3rem; padding: var(--hl-s3) var(--hl-s4); font: inherit; font-size: var(--hl-t-basis); color: var(--hl-text); background: var(--hl-flaeche); border: 1px solid var(--hl-haarlinie); border-radius: var(--hl-radius-eng); box-sizing: border-box; } .hl-auth textarea { min-height: 6rem; resize: vertical; } .hl-auth textarea:focus, .hl-auth input[type="date"]:focus { outline: none; border-color: var(--hl-gold-text); } .hl-wahl { border: 0; margin: 0 0 var(--hl-s4); padding: 0; } .hl-wahl legend { margin-bottom: var(--hl-s2); font-size: var(--hl-t-klein); color: var(--hl-text-leise); } .hl-auth .hl-wahl label { display: flex; gap: var(--hl-s3); align-items: flex-start; margin: 0 0 var(--hl-s2); font-size: var(--hl-t-basis); color: var(--hl-text); } .hl-wahl input { margin-top: .3em; flex: none; } .hl-feld-optional { color: var(--hl-text-leise); font-weight: normal; } .hl-falle { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }