:root { color-scheme: light dark; /* Formen- und Schrift-Variablen (2026-08-03, Vorbereitung Design-Umschalter): Vorgabewerte exakt wie die bisher harten Werte -- ohne gewaehltes Design aendert sich NICHTS. Ein Design unter designs/ ueberschreibt sie. Die zwei Radius-Familien sind die aus OBERFLAECHE.md ("Gewachsen"): Flaechen und Pillen. Sonderfaelle (50% Kreise, 6/8px Kleinakzente) bleiben bewusst hart -- sie gehoeren keiner der beiden Familien an. */ --radius-flaeche: 10px; --radius-pille: 999px; /* Dritter, kleiner Radius (Marken, Cover-Miniaturen, verknuepfte Treffer) und die zwei Rahmenbreiten -- seit 2026-08-04 Token, damit Designs sie mitpraegen koennen (Notebook: eckig und 2px). .marke hatte vorher 6px, jetzt einheitlich 8px -- die einzige sichtbare Angleichung. 50%-Kreise bleiben bewusst hart. */ --radius-klein: 8px; --rahmen-fein: 1px; --rahmen-stark: 2px; --schrift-fliess: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --schrift-titel: var(--schrift-fliess); /* Schriftgrad-Skala (2026-08-04): vorher 20 verschiedene Werte an 33 Stellen -- jetzt 8 Stufen. Zuordnung beim Einfuehren: klein 0.8 <- 0.75 / 0.78 / 0.8 neben 0.85 <- 0.85 / 0.88 kompakt 0.95 <- 0.9 / 0.92 / 0.95 basis 1 <- 1 / 1.02 / 16px (Eingabefelder: 1rem = 16px, die iOS-Zoom-Regel aus OBERFLAECHE.md haengt an dieser Stufe -- nie darunter!) betont 1.15 <- 1.1 / 1.15 zwischentitel 1.35 <- 1.3 / 1.35 / 1.4 gross 1.7 <- 1.7 anzeige 2.2 <- 2.2 (grosse Zahlen, z.B. BPM) Bewusst NICHT auf der Skala: die Avatar-Initialen (0.6/1.6rem, an die Kreisgroessen 28/96px gekoppelt). */ --schriftgrad-klein: 0.8rem; --schriftgrad-neben: 0.85rem; --schriftgrad-kompakt: 0.95rem; --schriftgrad-basis: 1rem; --schriftgrad-betont: 1.15rem; --schriftgrad-zwischentitel: 1.35rem; --schriftgrad-gross: 1.7rem; --schriftgrad-anzeige: 2.2rem; /* Abstands-Skala (gap und einfache paddings; zusammengesetzte paddings mit env()/Mehrachsen folgen in einem eigenen Schritt): 0.15 / 0.3 / 0.5 / 0.75 / 1 / 1.5 / 2 rem. Zuordnung: 0.1->0.15, 0.25/0.35->0.3, 0.4->0.5 -- maximale sichtbare Verschiebung 1.6px, dafuer ein durchgehender Rhythmus. */ --abstand-1: 0.15rem; --abstand-2: 0.3rem; --abstand-3: 0.5rem; --abstand-4: 0.75rem; --abstand-5: 1rem; --abstand-6: 1.5rem; --abstand-7: 2rem; --bg: #ffffff; --fg: #111111; /* YouTube-Rot fuer den externen Link (Auftrag "YouTube entdoppeln"): nur Rahmen + Symbol, NIE die Flaeche fuellen -- weisser Text auf #FF0000 erreicht nur 4,00:1 und verfehlt 4,5:1 (WCAG-Text- Schwelle). Als grafisches Element (Rahmen/Symbol, 3:1-Schwelle) traegt derselbe Ton in beiden Farbschemata: 4,00:1 gegen --bg (#ffffff), 4,69:1 gegen die dunkle Seitenfarbe (#121212) -- deshalb EIN Wert statt eines hell/dunkel-Paars. */ --youtube-rot: #ff0000; --rand: #ddd; /* Nebentext: bis 2026-08-03 #888 (3,54:1 gegen --bg, APCA Lc 63 -- nach BEIDEN Verfahren zu schwach, war als Altlast akzeptiert). Jetzt 4,54:1 / Lc 72 gegen --bg -- erreicht WCAG AA, bleibt sichtbar gedaempft. Dunkel unveraendert #999 (6,58:1). Gefunden von pruefe_kontraste.py, das seither beide Verfahren prueft. */ --gedaempft: #767676; --kachel-bg: #eef0f2; --kachel-aktiv-bg: #2b6cb0; --kachel-aktiv-fg: #ffffff; --marke-bg: #eef2f7; /* Eigener Ton fuer die Bereiche-Leiste (Punkt 6, Nachtrag): deutlich von --bg UND von --kachel-bg abgesetzt (1,52 bzw. 1,33 Kontrast), damit sie als eigene Zone erkennbar bleibt und die Kacheln darin nicht mit ihr verschmelzen. Blauton passend zur bestehenden --kachel-aktiv-bg-Familie, keine neue Farbe im System. Text auf diesem Ton (die "Bereiche"-Beschriftung, --fg) liegt bei 12,4:1 -- weit ueber WCAG AA. */ --bereichsleiste-bg: #c3d3e8; /* Vier gedaempfte Akzenttoene, einer pro Filterzeile -- nur auf der AKTIVEN Kachel sichtbar. Gleiche Saettigung/Helligkeit ueber alle vier, damit es nach einer Familie aussieht, nicht nach Farbkasten. Das eigentliche "wozu gehoert diese Kachel" beantwortet der Textlabel ueber der Zeile -- Farbe ist hier nur Zugabe, kein Signal, auf das man sich verlassen muesste (Farbsehschwaeche). */ --akzent-familie-bg: #2b6cb0; --akzent-familie-fg: #ffffff; --akzent-stil-bg: #2f855a; --akzent-stil-fg: #ffffff; --akzent-status-bg: #92400e; --akzent-status-fg: #ffffff; --akzent-art-bg: #6b46c1; --akzent-art-fg: #ffffff; /* Signature-Herz: Kontrast 6,22:1 gegen --bg -- weit ueber WCAG AA. Form (Herz-Glyphe) ist das eigentliche Signal, nicht die Farbe -- ein Screenreader liest zusaetzlich das aria-label. */ --signatur: #c1121f; /* Vordergrund fuer die Signatur-Kachel-Flaeche (fuenfte Filterzeile, Startseite): 6,22:1 gegen --signatur als Hintergrund -- eigener Kontrastfall, auch wenn die Zahl zufaellig dieselbe ist wie beim Herz-Kontrast oben (Text auf Seitenhintergrund vs. Text auf Signatur-Flaeche, nur numerisch identisch wegen Symmetrie). */ --akzent-signatur-fg: #ffffff; /* Diagramm-Palette (PLAN-auswertungen.md, Fundament-Entscheidung 3): sechs Verweise auf LAENGST bestehende, je Design schon definierte Farben -- keine einzige neue Farbe im System. Dadurch folgen alle sieben Designs UND jedes Eigenbau-Design automatisch (die Werte werden erst dort aufgeloest, wo --diagramm-N tatsaechlich benutzt wird, nicht hier an der Definitionsstelle) -- kein zweiter Ort, der bei einer neuen Design-Datei mitgepflegt werden muesste. Kontrast unkritisch: Diagrammflaechen tragen nie Text (Entscheidung 4), nur eine 1px --rand-Kontur gegen Nachbarflaechen aehnlicher Toene -- die eigentlichen Zahlen stehen als Fliesstext in der Legende daneben, dort gelten die laengst gemessenen fg/bg-Paare unveraendert. */ --diagramm-1: var(--akzent-familie-bg); --diagramm-2: var(--akzent-stil-bg); --diagramm-3: var(--akzent-status-bg); --diagramm-4: var(--akzent-art-bg); --diagramm-5: var(--signatur); --diagramm-6: var(--kachel-aktiv-bg); /* Sterne-Bewertung (PLAN-sterne.md): 4,64:1 gegen --bg -- ueber WCAG AA. Eigene Farbe statt Wiederverwendung von --signatur/-- akzent-*, weil eine Bewertung ein anderes Konzept als Signature- Figur oder Filter-Achse ist -- keine der bestehenden Farben passt semantisch, und eine neue ist hier billiger als eine Verwechslungsgefahr. */ --stern-gefuellt: #9c6b0a; /* Bearbeiten-Modus (Auftrag "Sieben Punkte", Punkt 7): eigener Seitenhintergrund fuer ALLE Bearbeiten-/Anlegen-Formulare, damit der Modus schon am Hintergrund erkennbar ist, nicht erst an der Ueberschrift. Gleiche Blaufamilie wie --kachel-aktiv-bg/ --bereichsleiste-bg (Punkt 6, Nachtrag) -- keine neue Farbe im System, wie dort vorgemacht. Bewusst ein ANDERER Ton als --bereichsleiste-bg (nicht derselbe Wert): die feste Leiste am unteren Rand bleibt so als eigene, unveraenderte Zone erkennbar, auch wenn eine Bearbeiten-Seite den Rest der Flaeche einfaerbt -- beide Blautoene wuerden sonst ineinanderlaufen. Nachgemessen (nicht geschaetzt), Kontrast hell: vs --bg 1,26 (deutlich wahrnehmbarer Farbstich, kein neuer Ton) vs --fg (Fliesstext) 14,99:1 -- weit ueber WCAG AA vs --gedaempft (Nebentext) 3,60:1 (seit --gedaempft am 2026-08-03 auf #767676 nachgedunkelt wurde; vorher 2,81:1) -- weiterhin unter AA fuer normalen Text, offengelegt akzeptiert: Nebentext bleibt lesbar, keine essenzielle Information haengt allein daran. pruefe_kontraste.py wacht ueber die 2,5-Grenze. vs --rand (Eingabefeld-Rahmen) 1,08:1 -- Eingabefelder haben zusaetzlich einen eigenen weissen Fuellhintergrund (siehe .bearbeiten-formular input weiter unten), der sie als helle Flaeche vom getoenten Seitenhintergrund abhebt; der Rahmen selbst war schon vorher kaum sichtbar (1,36:1 gegen --bg). */ --bearbeiten-bg: #dbe6f5; /* Loeschen-Modus (Auftrag "Loeschen -- sachlogisch stringent"): eigener, warmer Ton statt der blauen Bearbeiten-Familie -- die Bestaetigungsseite handelt eine unwiderrufliche Handlung ab, "es sieht aus wie Bearbeiten" waere die falsche Auskunft. Gleiche Bauart wie --bearbeiten-bg (schwacher Farbstich, kein Warnrot): nachgemessen, hell: vs --bg 1,30 (wahrnehmbarer, aber kein grelles Rot) vs --fg (Ueberschrift/Name) 14,52:1 -- weit ueber WCAG AA vs --gedaempft (Nebentext, z.B. "eintrag-neben") 3,49:1 (seit #767676 am 2026-08-03; vorher 2,73:1) -- gleiche Groessenordnung wie bei --bearbeiten-bg (3,60:1) */ --loeschen-bg: #f5dcdc; /* Endgueltig-loeschen-Knopf hell: weisser Text auf #cc0000, 5,89:1 -- weit ueber WCAG AA. Dunkler Ton bewusst NICHT gefuellt fuer .loeschen-knopf (siehe dort), nur fuer den tatsaechlich loeschenden Knopf auf der Bestaetigungsseite. */ --loeschen-knopf-bg: #cc0000; --loeschen-knopf-fg: #ffffff; /* Marken-Gold fuer das "vault" der Wortmarke (D1b, IDEEN-dancevault.md). ZWEI Werte, weil ein einziger es nicht tut: das Gold der App-Kachel (#c9a05a) steht dort auf fast Schwarz und ist dafuer gebaut -- auf hellem Grund faellt es auf 2,0:1 und waere unlesbar. Der Hellwert ist derselbe Ton, abgedunkelt bis er traegt. Gemessen gegen --bg: hell #96702f auf #ffffff = 4,51:1 (ueber AA 4,5) dunkel #c9a05a auf #121212 = 7,72:1 Beide Paare stehen in pruefe_kontraste.py und werden bei jeder Farbaenderung nachgerechnet. */ --marke-gold: #96702f; /* Auftrag "Feste Kopfbereiche absetzen und begrenzen": .kopf (Listenseiten, sticky oben) hatte bislang exakt --bg als Hintergrund -- beim Scrollen wanderte Inhalt unsichtbar darunter durch, der Kopf wirkte wie mitscrollend statt fest. Gleiche Blaufamilie wie --kachel-aktiv-bg/--bereichsleiste-bg/ --bearbeiten-bg, aber bewusst ein EIGENER Ton (weder deren Wert), da .kopf eine eigene feste Zone ist -- dieselbe Begruendung wie bei --bearbeiten-bg vs --bereichsleiste-bg oben. Auch fuer .kopfzeile (Detailseiten) verwendet, damit beide feste Kopf-Zonen wie eine Sache aussehen. Nachgemessen (nicht geschaetzt), Kontrast hell: vs --bg 1,31 (deutlich wahrnehmbarer Farbstich) vs --fg (Ueberschrift) 14,38:1 -- weit ueber WCAG AA vs --gedaempft (filter-titel-Beschriftungen) 3,46:1 (seit #767676 am 2026-08-03; vorher 2,70:1) -- weiterhin unter AA, offengelegt akzeptiert, gleiches Muster wie bei --bearbeiten-bg oben. vs --bg als Komponente (Suchfeld-Fuellung bleibt --bg) 1,31:1 -- Suchfeld bleibt als helle Flaeche erkennbar. vs --kachel-bg als Komponente (inaktive Kachel-Fuellung) 1,15:1 -- in derselben Groessenordnung wie der bereits akzeptierte Ausgangswert --bereichsleiste-bg vs --kachel-bg (1,33:1), keine neue Schwaeche. vs --kachel-aktiv-bg (Suchen-Knopf-Fuellung, = Akzent "familie") 4,13:1 -- Knopf bleibt klar als eigene Flaeche erkennbar. Die vier Filterkachel-Akzente als Komponente gegen den neuen Untergrund (WCAG 1.4.11, Schwelle 3:1 fuer Nicht-Text-Elemente -- seinerzeit einzeln gegen den ALTEN Untergrund --bg gerechnet, hier nachgerechnet): familie 4,13:1, stil 3,46:1 (der knappste), status 5,40:1, art 4,89:1 -- alle vier bleiben ueber 3:1, keiner faellt unter AA. */ --kopf-bg: #d6e2f0; /* Auftrag "Titel klebt unter der Navigationszeile": Kleberand des Titels = die tatsaechliche Hoehe von .kopfzeile, rein rechnerisch aus deren eigenen Werten abgeleitet (kein Messwert per JS noetig): deren Padding oben (max(safe-area-inset-top, 0.75rem)) + die 44px Mindesthoehe von .zurueck/.bearbeiten-knopf (Apples Mindest- Tippbereich, beide Kinder der Zeile) + Padding unten (0.5rem) + 1px Rahmenlinie. Dadurch klebt der Titel schon rein per CSS an der richtigen Stelle -- ganz ohne JavaScript (titel_klebt.js ergaenzt nur das Schrumpfen beim Scrollen, nie das Kleben selbst). */ --kopfzeile-hoehe: calc(max(env(safe-area-inset-top, 0px), 0.75rem) + 44px + 0.5rem + 1px); /* Auftrag "Titelfeld je Bereich einfaerben": neun Toene, einer pro Bereich aus der Bereiche-Leiste (rahmen.html), NICHT zehn -- Track und Playlist teilen sich den Bereich "Musik". Bewusst gleiche Helligkeit/Saettigung ueber alle neun (rechnerisch auf dieselbe rel. Leuchtdichte ~0,35 gebracht) -- unterscheidbar wird die Reihe NUR ueber den Farbton, in exakt 40°-Schritten rund um den Farbkreis (0/40/80/.../320°, keiner ausgelassen oder gerundet). Waere die Helligkeit stattdessen zufaellig verteilt, waere das selbst schon ein zweites, unbeabsichtigtes Signal neben dem Farbton. Textfarbe bleibt ueberall die normale --fg (kein eigenes fg je Bereich noetig -- 9 Werte statt 18). Farbe ist dabei nicht das einzige Signal: der Titeltext selbst und "← Zur Liste" in der Navigationszeile darueber nennen den Bereich ohnehin schon. Kontrast gegen --fg (Text), nachgemessen, nicht geschaetzt -- alle neun weit ueber WCAG AA 4,5:1: moves 7,15 · technik 7,19 · musik 7,22 · notizen 7,19 · choreografien 7,15 · personen 7,24 · ressourcen 7,20 · uebungseinheiten 7,25 · quellen 7,15 Kontrast gegen --kopf-bg (die Zone direkt darueber, .kopfzeile) -- alle neun bei ca. 2,0:1, klar erkennbar als eigenes Feld, deutlich ueber dem in diesem Projekt bereits akzeptierten Mindestabstand fuer eigene Zonen (--bearbeiten-bg vs --bereichsleiste-bg 1,3:1). */ --titel-moves-bg: #5ba8cf; --titel-personen-bg: #c7993c; --titel-quellen-bg: #34b389; --titel-uebungseinheiten-bg: #35b835; --titel-technik-bg: #9999e1; --titel-ressourcen-bg: #84ad32; --titel-notizen-bg: #db83bd; --titel-musik-bg: #c28bdd; --titel-choreografien-bg: #dd8888; /* Auftrag "Bereichsfarben auf Kopf/Kopfzeile/Bereichsleiste ausweiten": dieselben neun Farbtoene wie --titel-*-bg (exakt dieselben Farbtoene/Winkel), aber ABGEBLASST statt kraeftig -- dieselbe Saettigung/Helligkeit, die --kopf-bg/--bereichsleiste-bg/ --bearbeiten-bg schon fuer die neutrale Blau-Variante verwenden (HSL S=46%, L=89% -- aus #d6e2f0 zurueckgerechnet), nur um den jeweiligen Bereichs-Hue gedreht. Getrennte Variablen von --titel-*-bg (nicht derselbe Wert nur heller), weil .kopf/ .kopfzeile UND .titel-klebt aufeinandertreffen (Titelfeld sitzt direkt unter .kopfzeile) -- ohne sichtbaren Helligkeitssprung waeren die beiden Zonen nicht mehr auseinanderzuhalten. Kontrast Feld-gegen-Feld (Beispiel moves): 2,08:1 hell / 2,1:1 dunkel -- deutlich unterscheidbar, beide klar in derselben Farbfamilie. Kontrast gegen --fg (Text/Ueberschrift), nachgemessen: alle neun 11,2–16,0:1 hell, weit ueber WCAG AA. Gegen --gedaempft (Filter- Beschriftungen, nur auf der Moves-Listenseite relevant): 3,19– 3,86:1 hell (seit #767676 am 2026-08-03; vorher 2,49–3,01) -- in derselben Groessenordnung wie der dokumentierte, akzeptierte Ausgangswert von --kopf-bg (3,46:1), keine neue Schwaeche. Die vier Filterkachel-Akzente (nur Moves, Schwelle 3:1) bleiben alle darueber: familie 4,27 · stil 3,58 · status 5,59 · art 5,06. */ --bereich-moves-bg: #d6e7f0; --bereich-personen-bg: #f0e7d6; --bereich-quellen-bg: #d6f0e7; --bereich-uebungseinheiten-bg: #d6f0d6; --bereich-technik-bg: #d6d6f0; --bereich-ressourcen-bg: #e7f0d6; --bereich-notizen-bg: #f0d6e7; --bereich-musik-bg: #e7d6f0; --bereich-choreografien-bg: #f0d6d6; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; --fg: #eeeeee; --rand: #333333; --gedaempft: #999; --kachel-bg: #232323; --kachel-aktiv-bg: #4a90d9; --kachel-aktiv-fg: #08121c; --marke-bg: #1e2a35; /* Kontrast dunkel: vs bg 1,55, vs kachel-bg 1,30, vs fg 10,4:1. */ --bereichsleiste-bg: #26374d; --akzent-familie-bg: #4a90d9; --akzent-familie-fg: #08121c; --akzent-stil-bg: #48bb78; --akzent-stil-fg: #07170f; --akzent-status-bg: #d69e4e; --akzent-status-fg: #1a1206; --akzent-art-bg: #9f7aea; --akzent-art-fg: #150b26; /* Kontrast dunkel: 6,75:1 gegen --bg. */ --signatur: #ff6b6b; /* Kontrast dunkel: 6,75:1 gegen --signatur als Hintergrund. */ --akzent-signatur-fg: #121212; /* Kontrast dunkel: 9,57:1 gegen --bg. */ --stern-gefuellt: #e0b34d; /* Bearbeiten-Modus dunkel -- nachgemessen: vs --bg 1,32 vs --fg (Fliesstext) 12,25:1 vs --gedaempft (Nebentext) 4,99:1 -- hier sogar UEBER dem bisherigen Wert gegen --bg (6,58:1 waere staerker, aber 4,99:1 liegt noch ueber WCAG AA 4,5:1 fuer normalen Text, anders als im Hellmodus keine Verschlechterung unter AA) vs --rand 1,13:1 (Eingabefelder haben wieder ihren eigenen Fuellhintergrund, siehe oben). */ --bearbeiten-bg: #1c2c3d; /* Loeschen-Modus dunkel -- nachgemessen: vs --bg 1,15 vs --fg (Ueberschrift/Name) 14,09:1 vs --gedaempft (Nebentext) 5,74:1 -- ueber WCAG AA. */ --loeschen-bg: #331818; /* Endgueltig-loeschen-Knopf dunkel: seit 2026-08-03 wieder DERSELBE Knopf wie hell (#cc0000 mit weissem Text), erste Anwendung der APCA-Erweiterung der Kontrastregel (OBERFLAECHE.md). Der fruehere Umweg (#e53e3e mit dunklem Text) stammte allein aus der WCAG-2-Flaechenschwelle: Flaeche #cc0000 gegen --loeschen-bg/--kachel-bg dunkel 2,78/2,67:1, unter 3:1. Nachgemessen mit beiden Verfahren: Text weiss auf #cc0000: WCAG 5,89:1 UND APCA Lc 82 -- besteht beide, keine Ausnahme noetig. Flaeche #cc0000 vs --loeschen-bg/--kachel-bg dunkel: WCAG 2,78/2,67:1 (unter 3:1) -- APCA Lc 23,0/22,6, ueber der APCA-Nicht-Text-Schwelle (Lc 15). Widerspruch der Verfahren, APCA entscheidet; der Knopf traegt zudem einen Textlabel, die Flaeche ist nicht das einzige Merkmal. Zum Vergleich der alte Umweg: #111111 auf #e53e3e war nach APCA nur Lc 36 -- die alte Formel hatte die perzeptiv klar schlechtere Variante erzwungen. Gleiches Rot als Glocke-Ungelesen-Punkt (PLAN-glocke.md G1) gegen --bereichsleiste-bg dunkel: WCAG 2,05:1 (unter 3:1), APCA Lc 18 (ueber 15) -- dieselbe Ausnahme; der Punkt ist zudem kein reines Farbsignal (siehe .glocke-punkt-Kommentar unten bei der Glocke-Regel). */ --loeschen-knopf-bg: #cc0000; --loeschen-knopf-fg: #ffffff; /* Marken-Gold, Dunkelwert -- siehe Kommentar im Hellblock oben. Derselbe Ton wie auf der App-Kachel. */ --marke-gold: #c9a05a; /* .kopf/.kopfzeile dunkel -- nachgemessen: vs --bg 1,34 vs --fg (Ueberschrift) 12,04:1 -- weit ueber WCAG AA vs --gedaempft (filter-titel) 4,90:1 -- niedriger als der bisherige Wert gegen --bg (6,58:1), bleibt aber ueber WCAG AA 4,5:1, anders als im Hellmodus keine Verschlechterung unter AA vs --bg als Komponente (Suchfeld-Fuellung) 1,34:1 vs --kachel-bg als Komponente 1,13:1 -- in derselben Groessenordnung wie --bereichsleiste-bg vs --kachel-bg (1,30:1) vs --kachel-aktiv-bg (Suchen-Knopf/Akzent familie) 4,18:1 Vier Filterkachel-Akzente als Komponente (Schwelle 3:1): familie 4,18:1 (der knappste), stil 5,76:1, status 5,89:1, art 4,29:1 -- alle vier ueber 3:1. */ --kopf-bg: #1f2d3e; /* Bereichs-Titeltoene dunkel -- gleiche Herleitung wie hell (rel. Leuchtdichte ~0,12 je Farbton, exakt dieselben 40°-Hues, nur der Farbton variiert). Kontrast gegen --fg: moves 5,33 · technik 5,34 · musik 5,33 · notizen 5,33 · choreografien 5,35 · personen 5,31 · ressourcen 5,29 · uebungseinheiten 5,31 · quellen 5,37 -- alle ueber WCAG AA 4,5:1. Gegen --kopf-bg dunkel (0,025 Leuchtdichte, sehr dunkles Marineblau) alle bei ca. 2,25:1 -- deutlicher erkennbares eigenes Feld als im Hellmodus, weil --kopf-bg dunkel selbst naeher am Schwarzpunkt liegt. */ --titel-moves-bg: #316782; --titel-personen-bg: #765e2d; --titel-quellen-bg: #296c56; --titel-uebungseinheiten-bg: #2a6f2a; --titel-technik-bg: #5454be; --titel-ressourcen-bg: #536928; --titel-notizen-bg: #9e3c7d; --titel-musik-bg: #8841ac; --titel-choreografien-bg: #a53f3f; /* Bereichs-Kopftoene dunkel -- gleiche Herleitung wie hell (HSL S=33%, L=18%, aus --kopf-bg dunkel #1f2d3e zurueckgerechnet, nur um den Bereichs-Hue gedreht). Kontrast gegen --fg: 9,76–13,67:1, weit ueber WCAG AA. Gegen --gedaempft dunkel: 3,97–5,57:1 -- durchweg ueber WCAG AA (anders als hell, da --gedaempft dunkel selbst heller ist). Vier Filterkachel-Akzente (nur Moves, Schwelle 3:1): familie 3,88 · stil 5,35 · status 5,47 · art 3,98 -- niedriger als der bisherige Ausgangswert von --kopf-bg dunkel (4,18–4,29), aber alle vier bleiben ueber 3:1, keiner faellt unter AA -- offengelegte Verschlechterung, kein Bruch einer bestehenden Garantie. */ --bereich-moves-bg: #1f343e; --bereich-personen-bg: #3e341f; --bereich-quellen-bg: #1f3e34; --bereich-uebungseinheiten-bg: #1f3e1f; --bereich-technik-bg: #1f1f3e; --bereich-ressourcen-bg: #343e1f; --bereich-notizen-bg: #3e1f34; --bereich-musik-bg: #341f3e; --bereich-choreografien-bg: #3e1f1f; } } * { box-sizing: border-box; } html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--schrift-fliess); } /* Ueberschriften ueber die eigene Variable -- Vorgabe ist dieselbe Systemschrift wie der Fliesstext (var oben), ein Design darf hier z.B. eine Serifenschrift setzen, ohne den Fliesstext anzufassen. */ h1, h2, h3 { font-family: var(--schrift-titel); } /* 52px = Hoehe der zugeklappten .bereichsleiste, damit sie nichts am Seitenende verdeckt. */ body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); } /* Bearbeiten-Modus (Auftrag "Sieben Punkte", Punkt 7): eigener Seitenhintergrund fuer alle Bearbeiten-/Anlegen-Formulare (Klasse kommt aus rahmen.html, {% block body_klasse %}), gleich fuer jede Entitaet, nicht nur Moves. Farbe ist dabei NICHT das einzige Signal: jede dieser Seiten hat ohnehin schon eine eigene Ueberschrift ("X bearbeiten" / "Neuen X anlegen") und einen eigenen Knopftext ("Speichern"/"Anlegen"/"Trotzdem anlegen"), die den Modus unabhaengig von der Farbe erkennen lassen -- fuer Farbsehschwaeche oder in praller Sonne unverzichtbar (OBERFLAECHE.md, "Farbe ist nie das einzige Signal"). .bereichsleiste bleibt bewusst unveraendert (eigener, fester Navigations-Ton, unabhaengig vom Seitenmodus). */ body.bearbeiten-modus { background: var(--bearbeiten-bg); } body.loeschen-modus { background: var(--loeschen-bg); } /* --bereich-aktiv-bg (Auftrag "Bereichsfarben ausweiten"): eine Custom Property statt fester Werte, damit EIN Klassenname pro Seite (.bereich-farbe--X, siehe .titel-bereich--* weiter unten) reicht, um sowohl .kopf/.kopfzeile als auch .bereichsleiste/.bereichsraster einzufaerben -- Custom Properties vererben sich automatisch an Nachfahren im DOM (anders als background selbst), .bereichsraster braucht dadurch keine eigene Regel. var(...,Fallback) sorgt dafuer, dass Seiten ohne aktiven Bereich (Suche, Bearbeiten-Formulare) beim bisherigen neutralen Ton bleiben. */ .kopf { position: sticky; top: 0; z-index: 10; background: var(--bereich-aktiv-bg, var(--kopf-bg)); border-bottom: var(--rahmen-fein) solid var(--rand); padding: max(env(safe-area-inset-top, 0px), 0.75rem) 0.75rem 0.5rem; } /* Bereichswechsel (Punkt 7): feste Leiste am unteren Rand, mit demselben details/summary-Aufklapp-Muster wie .abschnitte -- kein neues Bedienkonzept. z-index bewusst zwischen .kopf (10) und .video-wrapper.vollbild (100): der Vollbild-Player MUSS die Leiste ueberdecken, sonst liegt sie quer ueber dem Video (a34d4c6 war derselbe Fehlertyp beim Zoom -- hier vorher vermieden, nicht erst auf dem Geraet gefunden). */ .bereichsleiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--bereich-aktiv-bg, var(--bereichsleiste-bg)); border-top: var(--rahmen-fein) solid var(--rand); } /* Suche (Punkt 8) als eigener Link statt in der Bereiche-Leiste verschachtelt: ein innerhalb von reagiert je nach Browser unzuverlaessig auf Klicks (das Aufklappen "gewinnt" oft). Stattdessen zwei Geschwister in einer Reihe. */ /* SYMBOL-LEISTE, Variante C (F16, PLAN-feinschliff.md, Timms Wahl nach Mockup-Vergleich): ruhende Eintraege zeigen NUR ihr Symbol, der aktive bzw. geoeffnete waechst zur beschrifteten Pille. AUSNAHME VON DER HAUSREGEL, ausdruecklich dokumentiert (F16 Punkt 4): "Zustand steht im Text" bzw. "ein Symbol traegt sein Wort" gilt hier NUR noch fuer den aktiven/geoeffneten Eintrag -- die ruhenden tragen ihr Wort nicht sichtbar. Timms Entscheidung zugunsten einer ruhigen Leiste. Der Ausgleich ist verbindlich und steht in rahmen.html an jedem Eintrag: JEDES Symbol traegt aria-label (Sprachausgabe) UND title (Tooltip am Zeiger), die 44px-Tippflaeche bleibt unangetastet. Wer die Leiste nicht sehen kann, verliert dadurch nichts; wer sie sieht, bekommt das Wort dort, wo er gerade steht. Das Raster von F15 (fuenf exakt gleiche Spalten) faellt damit weg: gleich grosse Felder waren die richtige Antwort auf gleich lange BESCHRIFTUNGEN. Jetzt sind die ruhenden Felder gleich grosse QUADRATE und nur der aktive darf breiter werden -- dafuer ist Flexbox das passende Werkzeug (siehe unten). */ /* DAS AKTIV-SIGNAL (F17 Punkt 2, Timms zweite Leisten-Sichtung): die Strichstaerke des Symbols, sonst nichts. Keine Flaeche, keine Pille, keine Farbe -- die Leiste ist durchgehend transparent. 2 -> 3,25 auf dem 24er-Raster, bei 22px Anzeigegroesse also rund 1,83px gegen 2,98px echte Strichbreite: gut zwei Drittel mehr, das traegt auch als EINZIGES Signal (nachgemessen, siehe Fertigmeldung). stroke-width als CSS-Eigenschaft schlaegt das gleichnamige Praesentationsattribut im SVG -- die Symbol-Bausteine bleiben unveraendert bei 2. */ .leisten-symbol { flex: 0 0 auto; display: block; stroke-width: 2; } .bereichsleiste-zeile > a[aria-current] .leisten-symbol, .bereichsleiste-zeile > details[open] > summary .leisten-symbol { stroke-width: 3.25; } /* DOPPEL-AKTIV (F17 Punkt 1, Timms Fehlerbefund): war ein Aufklapper offen, trug ER das Aktiv-Signal UND zusaetzlich der Eintrag der aktuellen Seite -- zwei "aktive" Eintraege gleichzeitig. Solange irgendein Aufklapper offen ist, faellt der Seiten-Aktivzustand deshalb auf die normale Strichstaerke zurueck; der offene Aufklapper ist dann der einzige hervorgehobene Eintrag. Reines CSS mit :has() -- die Regel gilt auch ohne JavaScript, wo leisten_aufklapper.js die Geschwister nicht schliessen kann. */ .bereichsleiste-zeile:has(details[open]) > a[aria-current] .leisten-symbol { stroke-width: 2; } /* RUECKWEG (F17 Punkt 3): das Wort am aktiven Eintrag ist auf Timms ausdruecklichen Wunsch weg -- entgegen der Hausregel "ein Symbol traegt sein Wort". Damit sind aria-label UND title an jedem Eintrag (rahmen.html) die EINZIGE Beschriftung; sie sind ab jetzt nicht mehr nur Ausgleich, sondern tragende Substanz und duerfen an keinem Eintrag fehlen. Das Wort-/Pillen-CSS bleibt vollstaendig erhalten und wird von einer Klasse an der Leiste geweckt (.bereichsleiste--mit-wort). Faellt der Alltagstest schlecht aus, ist der Rueckweg genau diese eine Klasse in rahmen.html -- kein CSS neu zu schreiben. */ .leisten-wort { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease; margin-left: 0; font-weight: 600; font-size: var(--schriftgrad-klein); } .bereichsleiste--mit-wort .bereichsleiste-zeile > a[aria-current] > .leisten-wort, .bereichsleiste--mit-wort .bereichsleiste-zeile > details[open] > summary > .leisten-wort { max-width: 8rem; opacity: 1; margin-left: var(--abstand-2); } @media (prefers-reduced-motion: reduce) { .leisten-wort { transition: none; } } /* RASTER statt Flexbox (F15 dritte Fassung, PLAN-feinschliff.md): Timms Befund "Heute sieht kleiner aus" stimmte -- nachgemessen stand Heute auf flex: 0 0 auto (64,6px), waehrend die flex:1-Nachbarn auf 67,9px wuchsen. Der erste Versuch, allen fuenf Feldern flex: 1 1 0 zu geben, brachte sie NICHT auf dasselbe Mass: Heute und Suche blieben exakt 9,6px breiter, und 9,6px ist genau ihr eigener waagerechter Innenabstand (2 x 0,3rem). Grund: die Flex-Basisgroesse eines Elements schliesst seinen Innenabstand mit ein, auch bei box-sizing: border-box und flex-basis: 0 -- Heute/Suche/Glocke sind SELBST das Feld und tragen den Abstand am Flex-Element, waehrend Bereiche/Neu ihn am inneren tragen (dort muss er bleiben, sonst reicht ihre Farbflaeche nicht mehr bis an die Feldkanten). Rasterspalten werden dagegen unabhaengig vom Innenabstand der Elemente bemessen: fuenf 1fr-Spalten sind exakt gleich breit, egal wo der Abstand sitzt. Konto bekommt eine auto-Spalte -- es traegt den runden Knopf, keine Beschriftung (eigene Regel weiter unten). */ .bereichsleiste-zeile { display: flex; align-items: start; /* Der Platz, den die ruhenden Symbolfelder nicht brauchen, verteilt sich gleichmaessig zwischen ihnen -- so bleibt die Leiste ruhig, egal ob die Glocke mitlaeuft (ab zwei Mitgliedern) oder nicht. */ justify-content: space-between; } /* Jedes Feld ist im Ruhezustand ein gleich grosses Quadrat und waechst nur ueber seinen Inhalt (das eingeblendete Wort). flex-shrink 0, damit die 44px-Tippflaeche auch dann steht, wenn der aktive Eintrag viel Platz nimmt. */ .bereichsleiste-zeile > * { flex: 0 0 auto; min-width: 44px; min-height: 52px; } /* .such-link: das Boxmodell fuer FESTBREITE Leisten-Eintraege am Rand (heute nur noch Heute) -- Suche trug es bis F1/F4 (PLAN- feinschliff.md) ebenfalls, zusammen mit einem eigenen vollgesaettigten Ton (--kachel-aktiv-bg), Timms "grosse Suche": ein fester, herausgehobener Randplatz UND die kraeftigste Flaeche der ganzen Leiste. F4 gibt diesen Randplatz an Konto ab (siehe .leisten-eintrag-- konto unten) -- Suche wird seitdem flex:1 (oben) mit demselben dezenten Farbmuster wie Bereiche/Neu (unten, .leisten-eintrag--suche), kein eigenes Boxmodell mehr. */ .such-link { display: flex; align-items: center; justify-content: center; min-height: 52px; /* 0.3rem statt frueher 1.1rem und dann 0.75rem (F15 dritte Fassung, PLAN-feinschliff.md): "Heute" ist der einzige Nutzer dieser Klasse (F4). Solange es als einziges Feld einen groesseren Innenabstand trug, konnte es gar nicht gleich gross wie die Nachbarn werden -- jetzt derselbe Mindest-Innenabstand wie .leisten-eintrag--suche und .bereichsleiste summary, die Breite kommt allein aus dem gleichmaessigen flex-Anteil (oben). */ padding: 0 0.25rem; padding-bottom: env(safe-area-inset-bottom, 0px); font-weight: 600; /* --schriftgrad-klein (F15 dritte Fassung, PLAN-feinschliff.md, vorher --schriftgrad-neben): seit alle sechs Felder gleich breit sind, hat das laengste Wort "Bereiche" genau ein Feld zur Verfuegung, nicht mehr das breiteste. Bei Notebooks Monospace- Schrift fehlte damit 1px (nachgemessen) -- der naechstkleinere BEREITS BESTEHENDE Schriftgrad schafft wieder Luft, ohne einen neuen zu erfinden und ohne Notebook-Sonderfall (F15 Punkt 1: gemeinsame Leisten-Regel). Gilt gemeinsam mit den beiden Leisten-Regeln unten. */ font-size: var(--schriftgrad-klein); /* Flaeche/Farbe/Trennlinie hier entfernt (F16 Variante C): Heute bekommt sein Aussehen jetzt aus den gemeinsamen Leisten-Regeln weiter unten -- ruhend ohne Flaeche, aktiv als Pille. */ text-decoration: none; } /* Suches eigenes, schlichtes Boxmodell (F4) -- Groesse/Zentrierung wie .bereichsleiste summary, aber ohne dessen gap (kein Icon daneben). */ .leisten-eintrag--suche { display: flex; align-items: center; justify-content: center; min-height: 52px; /* Mindest-Innenabstand (F15 Punkt 1, PLAN-feinschliff.md): GEMEINSAME Regel fuer alle Leisten-Eintraege, kein Notebook-Sonderfall -- Notebooks Monospace-Schrift (--schrift-fliess) ist je Zeichen breiter als die anderen sechs Designs und stiess ohne diesen Abstand an den eigenen Rand. */ padding: 0 0.25rem; padding-bottom: env(safe-area-inset-bottom, 0px); font-weight: 600; font-size: var(--schriftgrad-klein); text-decoration: none; cursor: pointer; } .bereichsleiste summary { display: flex; align-items: center; justify-content: center; gap: var(--abstand-3); min-height: 52px; /* Mindest-Innenabstand, gleiche Begruendung wie .leisten-eintrag-- suche oben. */ padding: 0 0.25rem; padding-bottom: env(safe-area-inset-bottom, 0px); font-weight: 600; font-size: var(--schriftgrad-klein); cursor: pointer; list-style: none; } .bereichsleiste summary::-webkit-details-marker { display: none; } /* Kein +/--Zeichen mehr (F6, PLAN-feinschliff.md, Timms Sichtung): der aktive Zustand zeigt sich schon ueber die Akzentfarbe unten -- das Zeichen war ein doppeltes Signal und kostete Platz. */ /* Vier Leisteneintraege, vier Toene (Timm, 2026-08-04): jeder Eintrag mischt 22% eines Akzentpaars der AKTIVEN Palette in den Leistengrund -- color-mix statt vier neuer Variablen je Palette, damit jedes Design automatisch seine eigenen Toene bekommt (keine Drift-Pflege). Der Eintrag der aktuellen Seite (aria-current) bzw. der offene Aufklapper traegt das VOLLE Akzentpaar (bereits gemessene Kombination). Text im Ruhezustand ist --fg auf dem Mischton -- alle vier Kombinationen stehen in pruefe_kontraste.py (mix:-Paare) und bestehen in allen 7 Paletten. Die Abgrenzung der Eintraege haengt NICHT an der Farbe: feine Trennlinien dazwischen, Beschriftung sowieso (Farbe nie einziges Signal). */ /* RUHEND: keine Flaeche, keine Trennlinie (F16 Variante C). Beides war die richtige Antwort auf BESCHRIFTETE Felder -- die Mischtoene trennten Wort von Wort, die Linien zogen die Feldgrenzen nach. Mit nur noch Symbolen trennt der Abstand (justify-content: space-between) von selbst, und fuenf verschiedene Farbfelder wuerden neben der einen farbigen Pille bloss laut. Die Toene sind nicht geloescht, sie sind in den aktiven Zustand gewandert (unten) -- dort tragen sie jetzt allein die Bedeutung "hier stehst du". Farbe ist weiterhin nicht das einzige Signal: der aktive Eintrag traegt zusaetzlich sein WORT und die Pillenform. */ .leisten-eintrag--heute, .leisten-eintrag--suche, .leisten-eintrag--glocke, .bereichsleiste summary { background: none; color: var(--fg); } /* Die vier Akzent-Flaechen des aktiven Zustands hingen bis F16 hier ohne Bedingung. Seit F17 Punkt 2 ist die Leiste durchgehend transparent -- das Aktiv-Signal ist allein die Strichstaerke (oben). Die Regeln bleiben als Rueckweg erhalten, geweckt von derselben Klasse wie das Wort (.bereichsleiste--mit-wort): eine Klasse in rahmen.html bringt Flaeche UND Wort gemeinsam zurueck, so wie sie zusammengehoerten. */ .bereichsleiste--mit-wort .leisten-eintrag--heute[aria-current] { background: var(--akzent-stil-bg); color: var(--akzent-stil-fg); } .bereichsleiste--mit-wort .leisten-eintrag--suche[aria-current] { background: var(--akzent-status-bg); color: var(--akzent-status-fg); } .bereichsleiste--mit-wort .leisten-eintrag--bereiche[open] > summary { background: var(--akzent-familie-bg); color: var(--akzent-familie-fg); } .bereichsleiste--mit-wort .leisten-eintrag--neu[open] > summary { background: var(--akzent-art-bg); color: var(--akzent-art-fg); } /* Werkzeuge (F16 Punkt 1): fuenftes Akzentpaar gab es nicht -- der Eintrag teilt sich Familie/Stil/Status/Art nicht, sondern nimmt den neutralen Kachel-Ton, denselben, den auch Konto traegt. Begruendung wie dort: Werkzeuge ist kein Inhaltsbereich. Kein neues Farb-Literal, keine erfundene fuenfte Akzentfarbe. */ .bereichsleiste--mit-wort .leisten-eintrag--werkzeuge[open] > summary { background: var(--kachel-aktiv-bg); color: var(--kachel-aktiv-fg); } /* Glocke traegt im Rueckweg dasselbe Paar wie Heute -- sie ist der zweite Eintrag ohne eigenes Akzentpaar (siehe oben). */ .bereichsleiste--mit-wort .leisten-eintrag--glocke[aria-current] { background: var(--akzent-stil-bg); color: var(--akzent-stil-fg); } /* DIE PILLE (F16 Punkt 3): der aktive bzw. geoeffnete Eintrag ist das einzige Feld mit Wort -- und bekommt dafuer die Pillenform, damit er sich auch ohne Farbwahrnehmung als "der hier" von den ruhenden Quadraten abhebt (Form ist das zweite Signal neben der Flaeche). Der Innenabstand waechst mit, sonst klebte das Wort am Rand. */ .bereichsleiste--mit-wort .bereichsleiste-zeile > a[aria-current], .bereichsleiste--mit-wort .bereichsleiste-zeile > details[open] > summary { border-radius: var(--radius-pille); padding-left: var(--abstand-4); padding-right: var(--abstand-4); transition: padding 0.18s ease; } @media (prefers-reduced-motion: reduce) { .bereichsleiste--mit-wort .bereichsleiste-zeile > a[aria-current], .bereichsleiste--mit-wort .bereichsleiste-zeile > details[open] > summary { transition: none; } } /* Werkzeuge-Aufklappflaeche: schlichte Zeilenliste statt des Kachelrasters von Bereiche/Neu -- es sind drei Ziele, kein Bereich mit Zahlen. Gleiche Flaeche und Position wie das Raster (siehe .bereichsraster unten), nur der Inhalt ist eine Liste. */ .werkzeug-liste { position: absolute; left: 0; right: 0; /* Gleiche Verankerung wie .bereichsraster: ueber der 52px hohen Leiste, nicht ueber dem eigenen summary -- sonst saesse die Liste an der Feldbreite geklebt statt ueber der ganzen Leiste. */ bottom: calc(52px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; background: var(--bereich-aktiv-bg, var(--bereichsleiste-bg)); border-top: var(--rahmen-fein) solid var(--rand); padding: var(--abstand-3); gap: var(--abstand-2); } .werkzeug-liste a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--abstand-4); border-radius: var(--radius-klein); background: var(--bg); color: var(--fg); text-decoration: none; font-weight: 600; font-size: var(--schriftgrad-neben); } .werkzeug-liste a[aria-current] { background: var(--kachel-aktiv-bg); color: var(--kachel-aktiv-fg); } /* Konto-Menue, schwebende Variante (Timm, 2026-08-05, dritter Anlauf fuer Vokabulare/Mitglieder/Profil/Design/Abmelden): fest positioniert, unabhaengig von .kopf/.kopfzeile. Seit F4 (PLAN-feinschliff.md, vierter Anlauf, Timms Entscheidung) NICHT MEHR VERWENDET -- rahmen.html rendert stattdessen .leisten-eintrag--konto weiter unten, fest IN der Bereichsleiste. Diese Regeln bleiben bewusst im Stylesheet (Rueckbau- Weg): faellt Timms Alltagstest fuer die Leisten-Loesung schlecht aus, braucht rahmen.html nur wieder die alte Klasse zu tragen, kein CSS neu zu schreiben. */ .konto-menue { position: fixed; right: max(env(safe-area-inset-right, 0px), 0.75rem); bottom: calc(52px + env(safe-area-inset-bottom, 0px) + 0.75rem); z-index: 21; } .konto-menue > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--kachel-aktiv-bg); color: var(--kachel-aktiv-fg); font-weight: 600; cursor: pointer; list-style: none; /* Gleicher Schatten wie .filter-aufklapper-inhalt -- der einzige schon im Projekt gemessene/verwendete Schatten fuer eine schwebende Flaeche, keine neue Werteerfindung. */ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); } .konto-menue > summary::-webkit-details-marker { display: none; } .konto-menue > summary img.avatar { width: 100%; height: 100%; } /* Konto-Menue, Leisten-Variante (F4, PLAN-feinschliff.md, Timms Entscheidung 2026-08-05): nimmt Suches alten festen Randplatz ein -- gleiches Boxmodell wie .such-link (52px, Trennlinie links, fest statt flex:1), aber bewusst NICHT eine der vier Bereichs-Akzentfarben (Familie/Stil/Status/Art -- Heute/Bereiche/Neu/Suche tragen sie schon, siehe oben): Konto ist kein Inhaltsbereich, sondern Kontoverwaltung. Die neutralen Kachel-Toene (dieselben, die der schwebende Rundknopf oben schon nutzte) halten das auseinander, ohne eine fuenfte Akzentfarbe zu erfinden -- der Avatar/Anfangsbuchstabe traegt die eigentliche Wiedererkennung, nicht die Leistenflaeche. */ /* Spezifitaets-Fund (F15 Punkt 2, PLAN-feinschliff.md): ".leisten- eintrag--konto" ist EIN Klassen-Selektor (Spezifitaet 0,1,0), aber ".bereichsleiste-zeile > details" (oben, fuer Bereiche/Neu) ist Klasse+Element (0,1,1) und gewann deshalb gegen die feste Breite hier -- Konto (ein
) schrumpfte dadurch wie ein flex:1- Element auf ~54px statt der gewollten 60px, seitlich UNGLEICH ausgerichtet und den Bereiche/Neu-Feldern zusaetzlich Platz wegnehmend (Timms Befund: Avatar nicht mittig, Leiste zu eng). Selektor hier auf gleiche Spezifitaet (0,2,1) angehoben, damit die feste Breite tatsaechlich greift. */ /* Vom rechten Rand geloest (F17 Punkt 4, Abstand nachgezogen auf Timms Sichtung): der Knopf klebte an der Bildschirmkante. Der Abstand steht am Feld, nicht am Kreis -- so bleibt die Tippflaeche vollstaendig innerhalb der Leiste. MASS: der Kreis ist im geoeffneten Zustand 70,4px breit (44px x 1,6) und sitzt mittig in einem 48px-Feld -- er ragt also (70,4-48)/2 = 11,2px ueber jede Feldkante hinaus. Mit den vorherigen 0,5rem (8px) stand seine rechte Kante 3,2px NEBEN dem Bildschirm. 1rem (16px) laesst ihm 4,8px Luft, auch voll aufgeklappt. Wer den Kreis weiter vergroessert, muss diesen Wert mitziehen. */ .bereichsleiste-zeile > details.leisten-eintrag--konto { position: relative; margin-right: var(--abstand-5); } .leisten-eintrag--konto > summary { display: flex; align-items: center; justify-content: center; /* 48px (F15 dritte Fassung, PLAN-feinschliff.md): die EINZIGE feste Breite der Leiste -- die fuenf Beschriftungsfelder teilen sich den Rest zu gleichen Teilen (oben). 48px traegt den aufgesetzten Rundknopf (44,8px im Grundzustand, siehe unten) und bleibt ueber der 44px-Mindesttippflaeche. Wachsen darf der Knopf darueber hinaus per transform: eine Transformation ragt ueber ihre Box hinaus, ohne die Box selbst zu verbreitern. */ width: 48px; min-height: 52px; padding-bottom: env(safe-area-inset-bottom, 0px); cursor: pointer; list-style: none; } /* Flaeche im offenen Zustand ENTFERNT (F17 Punkt 4, Timms Befund "andersfarbiger Platzhalter in Ursprungsgroesse"): das war sie -- ein 48x52-Rechteck in --kachel-bg, das hinter dem herausgewachsenen Kreis stehen blieb und wie ein zweites, nicht mitgewachsenes Element aussah. Die Leiste ist seit F17 Punkt 2 ohnehin durchgehend transparent, der offene Zustand zeigt sich am gewachsenen Kreis. */ .leisten-eintrag--konto > summary::-webkit-details-marker { display: none; } /* Kontrast des Anfangsbuchstabens: dieselbe Paarung wie ueberall bei "Text auf aktiver Kachel" (pruefe_kontraste.py), keine neue Farbe. */ .leisten-eintrag--konto-avatar { display: flex; align-items: center; justify-content: center; /* Gegen das "oval langgezogen" (F17 Punkt 4): der Avatar ist ein Flex-Element im summary, und dessen Innenabstand unten traegt env(safe-area-inset-bottom) -- auf dem iPhone rund 34px. Der Inhaltsbereich des 52px hohen Feldes schrumpft dadurch auf ~18px, und ein Flex-Element ohne Mindestmasse gibt in dieser Richtung nach: aus dem Kreis wird eine Ellipse. Auf dem Schreibtisch ist env() null, deshalb war davon in den Abnahme-Bildern nichts zu sehen. flex: 0 0 auto plus gleiche Mindest- wie Festmasse und aspect-ratio halten das Element unter allen Umstaenden quadratisch -- und damit border-radius: 50% kreisrund. */ flex: 0 0 auto; box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; aspect-ratio: 1; border-radius: 50%; background: var(--kachel-aktiv-bg); color: var(--kachel-aktiv-fg); font-weight: 600; overflow: hidden; /* AUFGESETZTER KNOPF (F15 dritte Fassung, PLAN-feinschliff.md, Timms Bild): im Grundzustand sitzt der Kreis mittig AUF der oberen Abschlusslinie der Leiste -- halb darueber, halb darunter, wie ein aufgesetzter Knopf. Beim OEFFNEN waechst er von dort weiter hinaus. Reine Transformation, kein width/height-Sprung: das Element bleibt 32px, scale+translateY tragen die Wirkung, ohne die 48px-Breite seiner Box zu sprengen. RECHENWEG (die Reihenfolge in transform ist kein Zufall): bei "scale(S) translateY(Y)" wirkt das Verschieben IM SKALIERTEN Koordinatensystem -- in der fertigen Matrix steht Y*S, nicht Y. Der Avatar ist in einer 52px hohen Flaeche zentriert, seine Mitte liegt also 26px unter deren Oberkante. Die Abschlusslinie selbst ist der border-top der .bereichsleiste und liegt noch eine halbe Linienbreite darueber. Die wird MITGERECHNET statt fest eingesetzt: --rahmen-fein ist 1px in den meisten Designs, aber 2px in Notebook -- mit fest 0,5px sass der Kreis dort um genau einen Pixel daneben (nachgemessen). calc() haelt beide Faelle richtig: Grundzustand scale(1,4): (-26px - halbe Linie) / 1,4 -> Kreis 44,8px, Mitte mitten auf der Linie, 22,4px ragen darueber. Offen scale(1,9): (-38px - halbe Linie) / 1,9 -> Kreis 60,8px, Mitte 12px UEBER der Linie, waechst also von der Grundposition weiter hinaus. position+z-index noetig, damit das Herausragen ueber die Leiste (z-index 20) sichtbar bleibt -- Leiste/Vorfahren tragen kein overflow:hidden (geprueft), sonst waere es wirkungslos. */ position: relative; z-index: 21; transform: scale(1.25) translateY(calc((-26px - var(--rahmen-fein) * 0.5) / 1.25)); transition: transform 0.2s ease; } img.leisten-eintrag--konto-avatar { object-fit: cover; } .leisten-eintrag--konto[open] > summary .leisten-eintrag--konto-avatar { transform: scale(1.6) translateY(calc((-38px - var(--rahmen-fein) * 0.5) / 1.6)); } @media (prefers-reduced-motion: reduce) { /* Die Groessenstufe selbst bleibt (sie zeigt "Menue offen"), nur der Uebergang dahin entfaellt -- gleiches Muster wie .titel-klebt. */ .leisten-eintrag--konto-avatar { transition: none; } } /* Glocke (PLAN-glocke.md G1 Punkt 1): schlichter Leisten-Eintrag, einfacher Link statt details/summary -- nur ein Icon, kein Aufklapp-Inhalt. Seit F15 dritter Fassung KEINE eigene Breite mehr (vorher fest 44px): sie gehoert zu den fuenf gleich grossen Feldern und teilt deren flex-Anteil (siehe .bereichsleiste-zeile oben) -- Timms Vorgabe "alle Leisten-Buttons exakt gleich gross" nennt die Glocke ausdruecklich mit. Der gleichmaessige Anteil liegt ueber der 44px-Mindesttippflaeche (nachgemessen, siehe Fertigmeldung). glocke-punkt ist kein rein farbiges Signal (Regel "Farbe nie einziges Signal"): er existiert oder nicht, UND aria-label unterscheidet zusaetzlich per Text ("...ungelesene Ereignisse"). Kontrast des Punkts auf der Leistenflaeche in pruefe_kontraste.py gemessen (PAARE "Glocke: Ungelesen-Punkt"). */ .leisten-eintrag--glocke { display: flex; align-items: center; justify-content: center; position: relative; min-height: 52px; color: var(--fg); } .glocke-punkt { position: absolute; top: 10px; /* An der MITTE ausgerichtet, nicht am rechten Feldrand (F15 dritte Fassung): seit die Glocke ihre feste 44px-Breite gegen den gleichmaessigen flex-Anteil getauscht hat, ist das Feld breiter als das 22px-Symbol darin -- ein fester right-Abstand haette den Punkt vom Symbol abgeloest in der Feldecke stehen lassen. 50% ist die Symbolmitte, +6px setzt den Punkt auf dessen obere rechte Ecke (Symbol 22px breit, halbe Breite 11px, halber Punkt 5px). */ left: calc(50% + 6px); width: 10px; height: 10px; border-radius: 50%; background: var(--loeschen-knopf-bg); border: var(--rahmen-fein) solid var(--bereichsleiste-bg); } /* .konto-menue-inhalt (Dropdown-Flaeche, gemeinsam mit der schwebenden Variante oben): positionierungsneutral -- haengt nur vom jeweiligen Elternelement ab (bottom/right relativ zu dessen eigener Box), deshalb OHNE Aenderung fuer beide Varianten nutzbar. Seit F4 aktiv unter .leisten-eintrag--konto (position: relative, siehe oben) verankert; unter der schwebenden .konto-menue (position: fixed) taete sie dasselbe, bliebe die alte Variante wieder in Gebrauch. */ .konto-menue-inhalt { position: absolute; bottom: calc(100% + 0.5rem); right: 0; min-width: 220px; background: var(--kopf-bg); border: var(--rahmen-fein) solid var(--rand); border-radius: var(--radius-flaeche); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); padding: 0.4rem; display: flex; flex-direction: column; } /* Abmelden abgesetzt (F17 Punkt 6): als einziger Punkt verlaesst er den angemeldeten Zustand -- Abstand plus feine Linie halten ihn von den Zielen darueber getrennt, damit er nicht versehentlich als naechster Menuepunkt mitgetippt wird. */ .konto-menue-abmelden { margin-top: var(--abstand-3); padding-top: var(--abstand-3); border-top: var(--rahmen-fein) solid var(--rand); } .konto-menue-inhalt a, .konto-menue-inhalt button { display: block; width: 100%; min-height: 44px; padding: 0 0.6rem; display: flex; align-items: center; color: var(--fg); text-decoration: none; background: none; border: none; border-radius: var(--radius-klein); text-align: left; font: inherit; cursor: pointer; } .konto-menue-inhalt a:hover, .konto-menue-inhalt button:hover { background: var(--kachel-bg); } /* Aus dem Fluss von
geloest (position: absolute gegen das bereits position: fixed gesetzte .bereichsleiste) statt normales Flex-Kind: als Kind von
, das wiederum flex:1 neben dem fest breiten .such-link teilt (siehe oben), erbte das Raster sonst dessen eingeschraenkte Breite -- das 3-Spalten-Raster wurde neben "Suche" abgeschnitten. So spannt es die volle Leistenbreite auf, waehrend die Bereiche/Suche-Zeile darueber unveraendert bleibt. Eigener Hintergrund noetig, weil .bereichsleiste dadurch nicht mehr automatisch dahinter mitwaechst (position: absolute traegt nicht zur Boxhoehe des Elternelements bei). bottom (nicht top!) wiederholt den bereits dokumentierten 52px-Wert der zugeklappten Zeile (siehe body weiter oben), plus derselbe Sicherheitsabstand fuers iPhone -- .bereichsleiste sitzt selbst am unteren Bildschirmrand, das Raster muss also nach OBEN aufklappen, sonst rendert es unterhalb des sichtbaren Bereichs (genau dieser Fehler ist beim ersten Versuch mit top: passiert, im Browser bemerkt statt unbemerkt geblieben). */ .bereichsraster { position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); background: var(--bereich-aktiv-bg, var(--bereichsleiste-bg)); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--abstand-3); max-height: 50vh; overflow-y: auto; /* Oben fehlte jedes Padding -- die erste Kachelreihe stiess direkt an die Aufklapp-Kante (Auftrag "Designaspekte pruefen"). 0.75rem wie an den Seiten/unten, gleiche Konsistenzregel wie ueberall sonst in diesem Raster. */ padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); } .bereichskachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-1); min-height: 56px; padding: var(--abstand-3); border-radius: var(--radius-flaeche); /* --bereich-aktiv-bg (dieselbe Custom Property wie .kopf/.kopfzeile/ .bereichsleiste): abgeblasster Ton statt des kraeftigen Titelfeld- Tons (Nachtrag "Designaspekte pruefen") -- ruhiger neben den ebenfalls kraeftigen Kacheln der jeweiligen Listenseite. Die gerade aktive Kachel bekommt dabei denselben Ton wie die Panel-Flaeche dahinter und faellt optisch mit ihr zusammen, statt als eigener Button hervorzustechen -- gewollt (Timms eigene Beobachtung): sie liest sich dadurch eher als "du bist schon hier" statt als anklickbarer Vorschlag. Der Textlabel bleibt in jeder Kachel klar lesbar, Farbe ist ohnehin nicht das einzige Signal (wie ueberall sonst in diesem Projekt). */ background: var(--bereich-aktiv-bg, var(--kachel-bg)); /* Feiner Rahmen seit 2026-08-04 (Timms Befund: die Bereichs-Knoepfe wirkten randlos neben den uebrigen Feldern). Systematik seither: MENUE-/LISTENZEILEN (Bereichskacheln, Design-Liste) und Eingabefelder tragen den feinen Rahmen; Filter-/Aktions-PILLEN bleiben bewusst randlos gefuellt; Hauptknoepfe kraeftig gefuellt; Outline-Nebenknoepfe nur Rahmen. Gerade im Dunkelmodus lag der Flaechenkontrast Kachel-zu-Leiste sonst bei nur 1,13:1. */ border: var(--rahmen-fein) solid var(--rand); color: inherit; text-decoration: none; text-align: center; font-size: var(--schriftgrad-neben); } /* Farbe je Bereich (Auftrag "Designaspekte pruefen"): dieselben neun abgeblassten Toene wie .kopf/.kopfzeile/.bereichsleiste (--bereich-*-bg, siehe Klassen in rahmen.html) -- die Kachel selbst wird zur Vorschau der Farbe, die hinter dem jeweiligen Bereich wartet. */ .bereich-anzahl { font-size: var(--schriftgrad-klein); /* --gedaempft war gegen die neutrale --kachel-bg gerechnet (3,1:1 hell/5,52:1 dunkel); gegen die neun abgeblassten Bereichstoene nachgemessen: 13,25-16,04:1 hell / 9,76-13,67:1 dunkel -- weit ueber WCAG AA, sogar staerker als vorher (--gedaempft waere hier ohnehin zu blass gewesen). Trotzdem bei --fg geblieben (nicht zurueck zu --gedaempft): der Groessenunterschied (0.75rem vs. die groessere Bereichsbeschriftung) bleibt das alleinige Signal fuer "Nebentext", eine dritte Farbe zusaetzlich zu Bereichston und --fg haette keinen Zweck mehr. */ color: var(--fg); } /* Aktiver Bereich hervorgehoben (Nachtrag "Designaspekte pruefen"): seit die Kachel-Farbe fuer den gerade aktiven Bereich mit der Panel-Flaeche verschmilzt (siehe .bereichskachel oben), war das der einzige verbliebene Unterschied zu den anderen acht -- jetzt zusaetzlich fett. aria-current="page" statt einer eigenen Klasse: korrektes ARIA fuer "aktuelle Seite in der Navigation" (Screenreader kuendigen das an) UND gleichzeitig der CSS-Haken, zwei Fliegen mit einer Klappe statt einer rein dekorativen Klasse. */ .bereichskachel[aria-current="page"] .bereich-name { font-weight: 700; } /* Vokabelpflege (Auftrag "Vokabelpflege bauen"): eigene Zeile UNTER dem Neun-Kacheln-Raster, keine zehnte Kachel -- die Neun-Bereiche-Struktur soll klar bleiben (gleiche Begruendung wie schon bei der bewusst fehlenden eigenen "Workshops"-Kachel). Reine Text-Zeile, ueber die volle Breite, optisch klar als "etwas anderes als ein Bereich" erkennbar. */ .vokabulare-link { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.25rem; padding-top: 0.6rem; border-top: var(--rahmen-fein) solid var(--rand); color: var(--gedaempft); font-size: var(--schriftgrad-neben); text-decoration: none; } /* Werkzeug-Zone (F11 Punkt 3, PLAN-feinschliff.md, PRAEZISIERT nach Timms erster Sichtung "noch nicht deutlich genug"): Lerncenter+Tools sind keine Datensatz-Bereiche -- eigene Flaeche mit Gruppentitel UND eigenem Kachel-Stil, damit der Unterschied zu den neun Bereichs- Kacheln auch ohne Text-Lesen ins Auge faellt. Farbe kommt per color-mix aus der AKTIVEN Palette (gleiche Ableitung wie die vier Leisten-Toene, stil.css .leisten-eintrag--*), kein neuer Farbwert je Design -- gemischt auf --bereich-aktiv-bg (dem Grund des gerade aufgeklappten Bereichsrasters, faellt ohne aktiven Bereich auf --bereichsleiste-bg zurueck), nicht auf --bereichsleiste-bg direkt, weil die Zone innerhalb des Rasters liegt. 16% statt der 22% der Leiste: eine Kachel-FLAECHE braucht weniger Saettigung als eine duenne Leisten-Zeile, sonst wirkt sie neben den echten Bereichs-Kacheln zu kraeftig. Beide Kombinationen (mit und ohne aktiven Bereich) in pruefe_kontraste.py gemessen, bestehen WCAG AA. */ .werkzeug-gruppe { grid-column: 1 / -1; margin-top: 0.25rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-flaeche); background: color-mix(in srgb, var(--akzent-familie-bg) 16%, var(--bereich-aktiv-bg, var(--bereichsleiste-bg))); border: var(--rahmen-fein) solid var(--rand); } .werkzeug-gruppe-titel { margin: 0 0 0.5rem; font-size: var(--schriftgrad-klein); font-weight: 600; color: var(--gedaempft); text-transform: uppercase; letter-spacing: 0.04em; } .werkzeug-kacheln { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--abstand-3); } .werkzeug-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-1); min-height: 56px; padding: var(--abstand-3); border-radius: var(--radius-flaeche); background: color-mix(in srgb, var(--akzent-familie-bg) 16%, var(--bereich-aktiv-bg, var(--bereichsleiste-bg))); border: var(--rahmen-fein) solid var(--rand); color: inherit; text-decoration: none; text-align: center; font-size: var(--schriftgrad-neben); } /* Aktive Seite: volles Akzentpaar statt des Mischtons, gleiches Muster wie .bereichskachel[aria-current="page"] -- bereits gemessenes Paar (Filterkachel familie in pruefe_kontraste.py), keine neue Kombination. */ .werkzeug-kachel[aria-current="page"] { background: var(--akzent-familie-bg); color: var(--akzent-familie-fg); font-weight: 700; } /* Abmelden (PLAN-anmeldung.md E2): teilt sich die Zeile mit "Design waehlen" statt einer eigenen volle-Breite-Zeile -- .vokabulare-link bleibt die gemeinsame Optik, hier nur zu zweit nebeneinander statt allein; das
/