/* Grundgestaltung von Family Board. * * =========================================================================== * DIE WERTE KOMMEN AUS DEM ENTWURF (FAM-29) * =========================================================================== * Bis zum 13.09.2026 standen hier vorlaeufige Zahlen - mit Verstand gewaehlt, * aber nicht gestaltet. Sie sind ersetzt. Die Quelle ist der Entwurf unter * docs/Design/canvas/, dieselben Werte stehen in docs/Design.md Regel 10, und * `tests/test_ansichten.py` haelt beides zusammen: Wer hier eine Zahl aendert, * ohne die Doku nachzuziehen, bekommt einen roten Testlauf. * * Die Farben liegen auf **Richtung A ("Garten", Farbton 170)** aus dem * Entwurf. Sie sind der einzige Teil, der nicht einzeln entschieden wurde - * A ist die Richtung, in der die vier Ansichten gezeichnet sind, und der * bisherige Stand. Ein Wechsel auf B (250, blau) oder C (350, beere) ist der * Farbton in Abschnitt 1 und sonst nichts; genau dafuer liegt jede Farbe an * genau einer Stelle. * * =========================================================================== * WIE DIE VIER ANSICHTEN FUNKTIONIEREN (Design.md, Regel 0) * =========================================================================== * Nicht die *Eigenschaft* wird zweimal gesetzt, sondern der *Wert* an einer * Stelle gewaehlt: * * 1. Alle Masse liegen als Merkmalsvariablen. * 2. Automatik: Die Haltepunkte unten setzen sie auf :root. * 3. Uebersteuerung: body[data-ansicht="..."] setzt dieselben Variablen. * Ein Attributselektor auf body wiegt schwerer als :root und gewinnt * deshalb UNABHAENGIG von der Bildschirmbreite. * 4. Alle Regeln darunter lesen nur die Variablen. * * Daraus folgt: **Kein @media ausserhalb des Haltepunkt-Abschnitts**, und * keine Zahl direkt in einer Regel, wo es eine Variable gibt. Eine fest * verdrahtete Menuebreite bliebe beim Wechsel auf Infoboard stehen. * * **Jede Ansicht setzt jede Variable.** Ein vergessener Wert faellt lautlos * auf die Automatik zurueck - das Infoboard saehe an dieser einen Stelle aus * wie ein Desktop, und nichts daran wirkte kaputt. Bewacht von * `test_jede_ansicht_setzt_dieselben_merkmale`. */ /* =========================================================================== 1. Farben - jede genau einmal (Design.md, Regel 10) =========================================================================== Alles in oklch, kein color-mix(): Gemischte Farben driften. ## Richtung: Blau 265 (Design 2a, A1 - 27.09.2026) **Hier stand „Richtung A aus dem Entwurf: Grundton 170 (gruen-tuerkis) - bewusst nicht Audits Blau 250"**, seit dem 18.09.2026 als *Limette* auf 150. **Design 2a dreht es auf Blau 265**, und der Satz von damals ist dabei eingeloest worden: *„Ein Wechsel der Richtung ist dieser Block und sonst nichts."* **Was daran haengt, haengt automatisch mit**: `app/farben.py` liest den Akzent fuer `theme-color` und das Manifest, `scripts/icons.py` erzeugt die sechs Icons daraus. **Beide sind nachgezogen** - das zweite ist ein Lauf, keine Handarbeit (`python scripts/icons.py`). **Zwei Toene liegen jetzt nah beieinander, und das ist zu wissen**: `--laeuft` (die Spalte *In Arbeit* am Projektbrett, FAM-175) steht auf 250, der Akzent auf 265. *Wer dort eines Tages einen Unterschied braucht, verschiebt `--laeuft`, nicht den Akzent* - er traegt jede Hauptaktion der Anwendung. **Die Personenfarben wandern wieder nicht mit** (siehe unten), und der zweite Akzent `--warm` bleibt auf 60: Er ist die Gegenfarbe, und gegen Blau traegt Warm besser als gegen Gruen. Ein Wechsel der Richtung ist dieser Block und sonst nichts. */ :root { /* **Akzent Blau** (2a: `oklch(50% 0.19 265)`) - aktive Zustaende, Badges, Fokus. */ --akzent: oklch(50% 0.19 265); --akzent-dunkel: oklch(40% 0.17 265); --akzent-blass: oklch(96% 0.03 265); /* Der zweite Akzent - fuer das, was nicht die Hauptaktion ist. */ --warm: oklch(56% 0.16 60); --warm-blass: oklch(96.5% 0.045 75); /* **Der Seitenhintergrund ist warm, nicht blau** (2a: `96.5% 0.008 100`) - *ein Papierton*, und er ist die Flaeche, auf der die weissen Karten liegen. */ --grund: oklch(96.5% 0.008 100); --flaeche: oklch(100% 0 0); --linie: oklch(90% 0.01 270); /* **Tinte** (2a) - der Text ist nicht schwarz, sondern sehr dunkles Blaugrau. */ --text: oklch(21% 0.02 270); --text-leise: oklch(48% 0.02 270); /* --- Die Farben der Wetterbilder (10.10.2026, auf Wunsch) ------------- *„Jeder Tag soll angezeigt werden wie eine schoene Kinderzeichnung mit einer lustigen Sonne … oder mit Regen, so in blau, Regentropfen gezeichnet auf dem Kinderbild."* **Sie stehen hier und nicht im SVG** (Regel 10): Eine Farbe im Markup waere ein zweiter Ort fuer die Farbrichtung - woertlich die Zusage, die `test_keine_farbe_steht_im_markup` am Chat haelt. Die Zeichnungen tragen **Klassen**, die Farbe steht hier. **Sie sind bunter als der Rest der Anwendung, und das ist Absicht**: Ein Wachsmalstift kennt keine gedaempften Toene. Sie gehoeren trotzdem zur Familie - jeder Ton ist einer, den das Blatt schon kennt (Himmel am Akzent 265, Wiese am Gruen 150 der alten Richtung, Sonne am warmen 60). **Der Stift ist nicht schwarz**, sondern dieselbe Tinte wie der Text, nur eine Spur heller: *Ein Kind malt mit einem Stift, nicht mit einem Drucker.* */ --wetterbild-himmel: oklch(91% 0.06 235); --wetterbild-himmel-trueb: oklch(87% 0.025 255); --wetterbild-wiese: oklch(80% 0.14 145); --wetterbild-stift: oklch(32% 0.03 265); --wetterbild-sonne: oklch(86% 0.17 90); --wetterbild-sonne-rand: oklch(68% 0.17 62); --wetterbild-wolke: oklch(99.5% 0.003 250); --wetterbild-wolke-trueb: oklch(84% 0.02 260); --wetterbild-tropfen: oklch(58% 0.16 245); --wetterbild-blitz: oklch(84% 0.19 85); --wetterbild-schnee: oklch(100% 0 0); --wetterbild-wind: oklch(99% 0.01 240); /* Der Baum - **vier Jahreszeiten, vier Farben** (10.10.2026, auf einen Kommentar im Canvas). Der Winter braucht keine: *ein kahler Baum ist Stamm und Aeste.* */ --wetterbild-stamm: oklch(42% 0.05 45); --wetterbild-laub-fruehling: oklch(85% 0.17 135); --wetterbild-laub-sommer: oklch(65% 0.17 148); --wetterbild-laub-herbst: oklch(72% 0.18 62); --wetterbild-bluete: oklch(85% 0.09 350); /* Die leise Schrift im Eckzettel, seit er keinen Grund mehr hat (10.10.2026). **44 % statt 48 %** - `--text-leise` faellt auf dem trueben Himmel auf 4,42 durch, dieses traegt mit 5,26. */ --wetterecke-leise: oklch(44% 0.02 270); /* Die Personenfarben im Chat (FAM-123) - eine je Mensch. **Sie teilen Helligkeit und Chroma UNTEREINANDER** (52% / 0.11): So tragen alle sechs gleich viel Gewicht und unterscheiden sich nur im Ton. **Mit den Akzenten teilen sie es seit der Frischen Ebene nicht mehr.** Hier stand bis dahin, sie teilten es mit `--akzent` und `--warm`; die sind jetzt kraeftiger (0.16). Das ist Absicht und keine Nachlaessigkeit: Ein Akzent traegt eine **Aktion**, eine Personenfarbe nur einen **Namen** - sie soll nicht lauter sein als der Knopf daneben. Wer sie doch mitziehen will, aendert diese sechs Zeilen und diesen Absatz. **Der Farbton 25 bleibt frei.** Dort liegt `--fehler`, und ein Name in Fehlerrot saehe aus wie eine Warnung. **Die Farbe ist die Bequemlichkeit, nicht die Auskunft** (FAM-65): Der Name steht daneben, der eigene Beitrag steht ausserdem rechts. Wer rot-gruen-blind ist, verliert hier nichts. */ /* **Seit dem 22.09.2026 steht hier die REZEPTUR und nicht mehr die Farbe** (auf Wunsch: *ein Farbselector, bei dem sich jede Farbe auswaehlen laesst*). Die sechs Werte, die hier standen, unterschieden sich **nur im dritten Feld** - also ist der Farbton die Angabe, und Helligkeit und Buntheit bleiben, was sie waren. **Damit ist der Kontrast weiterhin gerechnet und nicht gewaehlt** (5,06 bis 5,82 : 1, FAM-162): Er haengt an diesen beiden Zahlen, und die sind fest. *Es gibt keine zu helle und keine zu dunkle Wahl mehr* - und deshalb muss auch keine abgewiesen werden. **Regel 10 haelt:** Aus Python kommt eine ZAHL (`--person-ton`), die Farbe entsteht hier. */ --person-helligkeit: 52%; --person-buntheit: 0.11; /* **Die fertige Farbe steht NICHT hier**, und das ist gemessen (22.09.2026): Ein Custom Property wird an der Stelle **seiner Deklaration** substituiert, nicht beim Leser. Auf `:root` gibt es kein `--person-ton`, also waere die Rezeptur hier *ungueltig zur Berechnungszeit* - **leer**, und leer vererbt. Hier stand genau das, mit dem Kommentar *„das `var()` wird beim LESER aufgeloest"*. **Der Satz war falsch, und keine Zeile Code hat es gemeldet:** Im Browser war danach gar keine Personenfarbe zu sehen, und die ganze Testsuite blieb gruen. Sie steht deshalb bei `.gefaerbt`, weiter unten - *dort, wo der Ton wirklich liegt.* */ /* Die Papierfarben des Sticker Boards (FAM-169) - eine je Mensch. **Dieselben sechs Toene wie die Personenfarben darueber, und das ist die ganze Bauart:** Nummer und Wort teilen sie sich mit ihnen (`app/personenfarben.py` - *Orange, Gruen, Tuerkis, Blau, Lila, Pink*). Ein zweiter Satz Woerter waere die zweite Wahrheit, und dann schriebe jemand „Blau“ an einen gruenen Zettel. **Nur die Helligkeit ist eine andere, und sie ist gerechnet.** Eine Personenfarbe liegt bei 52% - **darauf ist kein Text lesbar**, weder dunkler noch heller; deshalb traegt ein Termin seit FAM-162 einen *Streifen* und keinen farbigen Grund. Ein Zettel ist aber **ganz** Papier. **Gemessen gegen `--text`** (Regel 5, die Karte verlangt mindestens 4,5 : 1): Orange 12,34 - Gruen 12,71 - Tuerkis 12,80 Blau 12,51 - Lila 12,28 - Pink 12,35 und gegen `--text-leise`, das die Fusszeile traegt: **4,71 bis 4,91**. **Die Rechnung ist gegengeprueft**, an einem Paar, dessen Wert man kennt: `--text` auf `--flaeche` ergibt 17,71 : 1 und `--flaeche` auf sich selbst genau 1,00. *Wer etwas zu Gutes misst, prueft zuerst die Messung* - in FAM-162 hat eine doppelte Gamma-Dekodierung 14 : 1 fuer mittelhelle Farben gemeldet. */ /* **Dieselbe Umstellung wie eine Zeile hoeher** (22.09.2026): derselbe Ton, andere Rezeptur. Es gibt damit **keinen zweiten Satz Werte**, der auseinanderlaufen koennte - die Papierfarbe eines Zettels entsteht aus der Farbe seines Schreibers, ohne dass jemand sie pflegt. */ --papier-helligkeit: 93%; --papier-buntheit: 0.055; /* **Die Rezeptur steht bei `.sticker.gefaerbt`**, aus demselben Grund wie eine Zeile hoeher: Hier gibt es kein `--papier-ton`. */ /* **Hier standen `--brett` und `--brett-linie`** - das Whiteboard, an dem die Zettel hingen (FAM-169). **Weggefallen am 24.09.2026**, auf Wunsch: *„Bitte baue das Sticker Board so um wie das Board fuer Projekte aussieht."* Seitdem haengen die Zettel an derselben **Filzwand** wie die Projektkarten (`--brett-filz`, weiter unten), und die beiden Farben hatten keinen Leser mehr. **Gemessen, nicht angenommen** - und die Messung hat eine Behauptung widerlegt, die hier schon geschrieben stand: *die Einkaufsliste benutze sie weiter.* Sie tut es nicht (`grep var(--brett)` findet in `app.css` nichts). *Eine Farbe, die niemand liest, ist keine Reserve, sondern eine Zeile, die beim naechsten Mal jemand benutzt, weil sie dasteht.* **Sie stehen weiterhin in `scripts/gp169.py`** - das ist die Gegenprobensammlung jener Karte und ein **Protokoll**, kein Blatt. *Ein gelaufener Versuch bleibt, was er war.* */ /* Was gerade laeuft (FAM-175) - die Spalte *In Arbeit* am Projektbrett. **Die erste Farbe ausserhalb der beiden Akzente seit `--fehler`**, und sie steht genau einmal da (Regel 10). **Warum ueberhaupt eine:** `app/board.py` sagt, welche **Bedeutung** eine Spalte hat (`TON_BLAU` fuer *laeuft*, `TON_GRUEN` fuer *ist fertig*) - und *„das Blatt uebersetzt die vier Toene in Farben; welche, entscheidet Karte 2."* Ohne diese Zeile uebersetzte es *blau* in irgendetwas anderes, **und der Name in board.py waere eine Behauptung.** **Dieselbe Helligkeit und Buntheit wie `--akzent` und `--warm`** (52%, 0.12-0.16) - so traegt sie gleich viel Gewicht und unterscheidet sich nur im Ton, genau wie die Personenfarben. Der Farbton 250 ist der vierte freie neben 150 (Akzent), 60 (warm) und 25 (Fehler). **Gerechnet gegen `--grund`: 5,30 : 1** (auf `--flaeche` 5,49) - ueber den 3 : 1, die eine Linie braucht, und ueber den 4,5 : 1 fuer Text. Die beiden Nachbarn liegen daneben: `--erfolg` 5,94, `--text-leise` 5,70. **Gegengeprueft an einem Paar, dessen Wert man kennt** (der Fund von FAM-162, wo eine doppelte Gamma-Dekodierung 14 : 1 fuer mittelhelle Farben meldete): `--text` auf `--flaeche` ergibt 17,71 : 1, `--flaeche` auf sich selbst genau 1,00. */ --laeuft: oklch(52% 0.12 250); /* **Gefahr Rot** (2a: `oklch(46% 0.17 30)`) - Loeschen, und die Schrift auf einem gefaehrlichen Knopf. */ --fehler: oklch(46% 0.17 30); --fehler-blass: oklch(96% 0.03 30); /* **Erledigt Gruen** (2a) - zwei Werte, denn der Stempel im Archiv traegt Rand und Text in verschiedenen Toenen: *ein Rand darf leiser sein als die Schrift darin.* */ --erfolg: oklch(45% 0.1 160); --erfolg-text: oklch(40% 0.1 160); --erfolg-blass: oklch(96% 0.03 160); /* ------------------------------------------------------------------ Design 2a, A1 - was es vorher nicht gab (27.09.2026) ------------------------------------------------------------------ */ /* **Warnung Orange** - ueberfaellig. **Nicht Rot**, und das ist dieselbe Trennung wie am Projektbrett: *Rot gehoert dem Blocker* (FAM-179), Orange dem, was draengt. Der Hinweistext daneben ist dunkler, weil er **Text** ist und nicht eine Flaeche. */ --warnung: oklch(56% 0.17 45); --warnung-text: oklch(46% 0.14 40); /* **Text auf Blau oder Tinte** - nicht reines Weiss (2a: `98% 0 0`). */ --auf-dunkel: oklch(98% 0 0); /* **Die Linie unter einem Abschnittstitel** - leiser als `--linie`, weil sie ueber die ganze Breite laeuft. */ --linie-abschnitt: oklch(88% 0.01 270); /* **Der Rahmen der Huelle** - die Kante zwischen Seitenleiste und Inhalt (2a: `box-shadow: 0 0 0 1px`). */ --linie-huelle: oklch(91% 0.01 270); /* **Hover in der Navigation** - eine Zeile, die sich hebt, ohne eine Farbe zu bekennen. */ --navi-hover: oklch(95% 0.01 270); /* **Die Abdunklung hinter der Handy-Schublade** - mit Deckkraft, denn dahinter steht die Seite. */ --abdunklung: oklch(20% 0.02 270 / .35); /* **Der gestrichelte Rand einer Eingabemaske** (2a, A6) - *hier wird etwas ausgefuellt, es steht noch nicht fest.* */ --maskenrand: oklch(72% 0.08 265); /* **Der Kartenschatten** (2a, A1) - zwei Lagen: eine harte Kante und ein weicher Wurf darunter. Er steht genau einmal da (Regel 10). */ --kartenschatten: 0 1px 1px oklch(30% 0.05 270 / .1), 0 10px 20px -12px oklch(30% 0.05 270 / .4); /* ------------------------------------------------------------------ Der Einkaufszettel (Einkauf 2a, §6; Aenderungen §3 bis §5) **Ein abgerissenes Blatt**, und es hat noch weniger Farben als vorher: die Linie jeder Zeile, der Rand des Kaestchens und der Kaffeefleck. *Papier hat wenige Farben.* > **Drei sind am 28.09.2026 weggefallen bzw. neutral geworden.** Der > **rote Randstrich** entfaellt ganz (*„Den `linear-gradient` am Blatt > entfernen"*), und Linie wie Kaestchen sind **nicht mehr blaeulich**: > Auf einem abgerissenen Blatt ohne Rand sah die Schulpapier-Linie aus > wie ein zweiter Akzent. *Eine Farbe, die niemand mehr liest, ist > keine Reserve* - `--zettel-rand` gibt es deshalb nicht mehr. ------------------------------------------------------------------ */ /* Das Loch im Riss - grau, damit es nach Stanzung aussieht. */ --zettel-loch: oklch(78% 0.01 270); /* Die Linie einer Zeile - **neutral grau** (Aenderungen, §4). */ --zettel-linie: oklch(88% 0 0); /* Der Rand des Kaestchens - **grau statt Tinte** (Aenderungen, §4). */ --zettel-kasten: oklch(70% 0 0); /* Der Schatten des ganzen Zettels - **zwei Lagen wie beim Kartenschatten**, nur als `drop-shadow`: Der Spiralrand hat Loecher, und ein `box-shadow` legte sich als Rechteck darunter. */ --zettel-schatten: drop-shadow(0 1px 1px oklch(30% 0.05 270 / .1)) drop-shadow(0 12px 14px oklch(30% 0.05 270 / .18)); /* ------------------------------------------------------------------ Die Filzwand (24.09.2026, auf Auftrag) Das Projektbrett sieht aus wie eine Moderationswand: graue Filzflaeche im Aluminiumrahmen, Karten aus Papier mit Stecknadeln, Aufkleber fuer Frist und Blocker, Zeilen an einer Schnur. **Jede Farbe steht hier und nirgends sonst** (Regel 10). Die Regeln weiter unten lesen nur Variablen. ------------------------------------------------------------------ */ /* Wand und Rahmen */ --brett-filz: oklch(56% 0.022 245); --brett-filz-korn-d: oklch(20% 0.02 250 / 0.18); --brett-filz-korn-h: oklch(90% 0.01 250 / 0.14); /* **Der Raum um das Brett ist die Seite selbst** (24.09.2026, auf Zuruf: *„den beigen Hintergrund gegen weiß austauschen, dass nur das Board zu sehen ist"*). Der Auftrag *Brett 1b* nennt hier `oklch(92% 0.008 80)` – ein warmes Beige, das eine Wand andeutet, auf der das Brett hängt. **Am Gerät war es ein zweiter Rahmen um den Rahmen.** **`var(--flaeche)` und nicht noch einmal Weiß**: `.inhalt` trägt schon diese Farbe, der Raum ist also *dieselbe Fläche* – und *zwei Zeilen für dieselbe Farbe laufen auseinander* (Regel 10). Wer die Seitenfläche eines Tages tönt, tönt den Raum mit, ohne hier nachzusehen. **Der Abstand bleibt** (`--brett-raum-abstand`): Er hält das Brett vom Rand weg, und das tut er unsichtbar genauso. */ --brett-raum: var(--flaeche); --brett-alu-1: oklch(95% 0.004 250); --brett-alu-2: oklch(84% 0.006 250); --brett-alu-3: oklch(76% 0.008 250); --brett-alu-4: oklch(88% 0.005 250); --brett-ecke-hell: oklch(38% 0.01 250); --brett-ecke-dunkel: oklch(24% 0.01 250); /* Papier */ --papier-weiss: oklch(97% 0.008 90); --papier-kraft: oklch(80% 0.07 75); --papier-kraft-blass: oklch(90% 0.02 80); --papier-tinte: oklch(24% 0.02 260); /* Filzstift auf Karte */ --papier-kraft-tinte: oklch(24% 0.03 60); --papier-gruppe-tinte: oklch(35% 0.02 260); --papier-wort: oklch(38% 0.03 60); /* Schnur */ --schnur-rot: oklch(55% 0.18 27); --schnur-weiss: oklch(94% 0.01 80); /* Aufkleber */ --aufkleber-frist: oklch(92% 0.15 100); --aufkleber-frist-rand: oklch(80% 0.14 95); --aufkleber-frist-draengt: oklch(82% 0.17 82); --aufkleber-frist-draengt-rand: oklch(68% 0.16 75); --aufkleber-frist-text: oklch(26% 0.05 80); --aufkleber-blocker: oklch(54% 0.2 27); --aufkleber-blocker-text: oklch(99% 0 0); --aufkleber-blocker-feld: oklch(92% 0.05 27); /* Stecknadeln - Kopf und Schattenseite. **Fuenf Farben, gewechselt ueber die Nummer der Karte** - dieselbe Bauart wie die Neigung des Zettels (FAM-169): *gerechnet, nicht gewuerfelt*, damit dieselbe Karte immer dieselbe Nadel traegt. */ --nadel-rot: oklch(58% 0.2 27); --nadel-rot-d: oklch(38% 0.15 27); --nadel-blau: oklch(55% 0.16 255); --nadel-blau-d: oklch(35% 0.12 255); --nadel-gelb: oklch(82% 0.16 95); --nadel-gelb-d: oklch(58% 0.13 85); --nadel-gruen: oklch(58% 0.15 150); --nadel-gruen-d: oklch(38% 0.1 150); --nadel-weiss: oklch(96% 0.005 80); --nadel-weiss-d: oklch(70% 0.01 80); --nadel-dunkel: oklch(38% 0.03 260); --nadel-dunkel-d: oklch(22% 0.02 260); /* **Schatten und Glanz stehen einmal da und werden mit Alpha gelesen** - `oklch(from var(--schatten) l c h / .25)`. **Die relative Farbsyntax ist der Preis**, und er ist derselbe wie bei `mod()` an der Neigung (FAM-169): Ein Browser, der sie nicht kennt, verwirft die Deklaration - dann fehlt ein Schatten. *Nuechtern, nicht kaputt.* Die Alternative waere eine eigene Variable je Alphastufe, und davon gaebe es hier ueber zwanzig. */ --schatten: oklch(0% 0 0); --glanz: oklch(100% 0 0); /* **Die Filzstift-Schrift** - und sie kommt NICHT von einer fremden Adresse (Regel 4, `09-compliance.md`). Der Auftrag nennt *Kalam* von Google Fonts; genau das hat `Design.md` beim Entwurf schon einmal abgelehnt (*„Der Entwurf laedt Outfit von fonts.googleapis.com“*), und hier sitzen Kinder vor dem Bildschirm. **Entschieden am 24.09.2026, auf Rueckfrage: die Systemschrift.** Was auf dem Geraet liegt, wird genommen; wo nichts liegt, greift `cursive`. *Sie steht an einer Stelle* - wer sie eines Tages selbst ausliefert, aendert diese Zeile und sonst nichts. ## Und dieser Tag ist der 27.09.2026 **Der Satz darueber ist eingeloest**, und es ist wirklich bei einer Zeile geblieben: *Comic Neue* liegt seitdem unter `app/static/fonts/` - **selbst ausgeliefert**, nicht von Google geholt. **Der Auftrag *Design 2a* verlangte den Webfont** (*„Comic Neue ueber Google Fonts laden"*), und das verstoesst gegen Regel 4 und `09-compliance.md`: Der Browser **jedes Kindes** gaebe dabei seine IP-Adresse an einen Dritten. **Entschieden auf Rueckfrage: selbst ausliefern** - genau der dritte Weg, den Regel 4 vorsieht (*„Eine Bibliothek, die gebraucht wird, wird selbst ausgeliefert - ihre Groesse geht voll zu unseren Lasten, und ihre Lizenz ist zu pruefen"*). **Die Reihenfolge ist die Zusage**: Erst das, was auf dem Geraet liegt (nichts zu laden), dann die eigene Datei. *Ein Windows-Rechner laedt damit kein einziges Byte*, und Android und Linux bekommen zum ersten Mal ueberhaupt eine Handschrift. */ --schrift-hand: "Segoe Print", "Bradley Hand", "Comic Neue", "Comic Sans MS", cursive; /* **Die Titelschrift** (27.09.2026, Design 2a, A2) - Logo, Seitentitel, Abschnittstitel und Kartentitel. **Sie hat keinen Vorlaeufer auf dem Geraet**, anders als die Handschrift: *Young Serif* gibt es nur als Datei, also laedt sie jeder. **Der Preis ist gemessen** und steht in `02-tech-stack.md`. */ --schrift-titel: "Young Serif", Georgia, "Times New Roman", serif; /* **Die Schrift des Seitentitels** (Einkauf 2a, Abschnitt 1 - er ersetzt die Angaben aller bisherigen Auftraege). **Eine Grotesk, keine Serifenschrift**, und das ist eine Arbeitsteilung: Der Seitentitel sagt, *wo man ist* - er steht gross und soll ruhig stehen. Young Serif bleibt den **Abschnitten** und den Titeln auf Karten. **Century Gothic ist eine Systemschrift** (Windows/Office) und wird **nicht** als Webfont eingebunden - Regel 4 verlangt es. Wo es sie nicht gibt, springen die Verwandten ein und zuletzt `sans-serif`. **Sie trug bis zum 29.09.2026 nur der Einkauf** (`--schrift-einkauf`, Einkauf 2a Aenderungen §1/§6), alle anderen Module Segoe UI Bold. **Das war sichtbar**, und der Nutzer hat es gemeldet: *„Die Ueberschrift in Einkauf hat eine andere Schriftart oder Groesse als in Termine. Bitte genau die Groesse und Art der Ueberschrift in Einkauf in alle anderen Module uebernehmen."* **Eine Variable, nicht zwei.** `--schrift-einkauf` gibt es nicht mehr - *zwei Namen fuer dieselbe Frage laufen auseinander* (FAM-52, FAM-117), und der Auftrag von gestern (*„bleibt fuer die anderen Module bestehen"*) ist von dem Wunsch von heute ueberstimmt. **Das Gewicht gehoert dazu**: `500`, nicht 700. Century Gothic ist eine geometrische Grotesk mit duennen Rundungen - fett gesetzt verliert sie genau das, wofuer sie ausgesucht wurde, *und dann waere es wieder eine andere Ueberschrift als im Einkauf.* */ --schrift-seitentitel: "Century Gothic", "CenturyGothic", "AppleGothic", "URW Gothic", sans-serif; /* **Die Schrift des Monatsgitters** (29.09.2026). Eine Grotesk, und das ist gemessen: In einer 50 px breiten Spalte traegt Segoe Print **6,3 Zeichen**, eine Grotesk **8,0** - und genau so viel zeigt das Vorbild des Nutzers (*„Kennenle“*). **Nur im Gitter**, nicht ueberall: Die Handschrift ist die Schrift dieser Anwendung, sie passt nur nicht in eine Spalte von einem Siebtel Bildschirm. */ --schrift-monat: "Segoe UI", system-ui, -apple-system, sans-serif; } /* =========================================================================== 1b. Die eigenen Schriften - selbst ausgeliefert (27.09.2026) =========================================================================== **Nichts von fremden Servern** (Regel 4, `09-compliance.md`). Beide Schriften stehen unter der **SIL Open Font License 1.1**, die das Selbsthosten ausdruecklich erlaubt; die Lizenztexte liegen daneben (`OFL-YoungSerif.txt`, `OFL-ComicNeue.txt`) - **die OFL verlangt, dass sie mitgeliefert werden.** **Segoe Print ist nicht dabei, und das ist kein Versehen**: Sie ist eine Windows-Systemschrift und darf **nicht** weitergegeben werden. Sie steht nur im Stapel oben - wer sie hat, sieht sie; wer nicht, bekommt Comic Neue. **`font-display: swap`** - der Text steht sofort da, in der Ersatzschrift, und wird nachtraeglich ausgetauscht. *Die Alternative waere eine Seite, die zwei Sekunden lang leer ist*, und auf einem Wohnzimmer-Touchscreen sieht das aus wie ein Fehler. **Zwei Dateien fuer Young Serif** - `latin` und `latin-ext`: Der `unicode-range` entscheidet, welche geladen wird, und **die zweite laedt nur, wenn ein Zeichen daraus vorkommt**. Deutsche Umlaute liegen in `latin`; *ein Name wie „Łukasz“ holt die andere nach.* =========================================================================== */ @font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/young-serif-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/young-serif-400-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Comic Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/comic-neue-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Comic Neue"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/comic-neue-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =========================================================================== 2. Die Masse - Automatik ueber Haltepunkte =========================================================================== Die Werte kommen aus dem Entwurf (docs/Design/canvas/) und stehen in docs/Design.md Regel 10. Handy zuerst, dann breiter. Das Infoboard kommt hier NICHT vor: Ein Wohnzimmer-Touchscreen ist breit und saehe nach Desktop aus. Es gibt ihn nur ueber die Auswahl - genau dafuer ist die Uebersteuerung da. **Warum das Handy groesser schreibt als der Desktop** (17px gegen 16px): Ein Handy liegt eine Armlaenge weg und wird in Bewegung gelesen, ein Bildschirm steht ruhig auf dem Tisch. Dieselbe Ueberlegung fuehrt zu 48px Bedienflaeche gegen 36px - eine Fingerkuppe ist breiter als ein Mauszeiger. Der Entwurf dreht damit die uebliche Annahme "klein = weniger" um. */ :root { /* Handy */ --brett-raum-abstand: 8px; --brett-rahmen: 9px; --brett-innen-y: 16px; --brett-innen-x: 16px; --brett-spaltenabstand: 18px; --brettkarte-min: 150px; --brettkarte-min-voll: 220px; --brettkarte-titel: 23px; --brettkarte-titel-voll: 28px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 13px; --brettkopf-titel: 22px; --kopfhoehe: 56px; --marke-anzeige: inline; --menuetafel-breite: min(78%, 300px); /* die Schublade (A3) */ --menueliste-spalten: repeat(2, 1fr); --aufgabe-umbruch: wrap; --aufgabe-titel-breite: 100%; --detail-spalten: 1fr; --detail-listenanzeige: none; --kalender-spalten: 1fr; --kalender-leertag-anzeige: block; --monat-spalten: 22px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 11px; --monat-zeilenhoehe: 34px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, 262px); --board-zeilen-richtung: column; --brettkarte-neigung: 0.6deg; --schrift: 12px; --schrift-gross: 16px; --schaltflaeche: 36px; --abstand: 10px; --kachel-min: 140px; --maske-breite: 100%; --knopfwort-anzeige: inline; --geraetewort: "deinem Handy"; --kopftrenner-anzeige: none; --knopfzusatz-anzeige: none; --einstellungsliste-spalten: 1fr; --infoboardboxen-anzeige: block; --qrcode-breite: 180px; --blatt-breite: 100%; --blatt-rand: 18px; --blatt-kante: 14px; --feld-richtung: row; --feld-beschriftung-breite: 40%; --feld-eingabe-basis: 0; --kontaktwert-basis: 100%; --sticker-breite: 100%; --sticker-feld-zeiger: none; --bereich-spalten: 1fr; --sticker-ziehen: default; --sticker-zug: auto; --sticker-griff: none; --sticker-bereich-anzeige: flex; --plan-anzeige: block; --plan-spalten: 1fr; --baum-reihe-anzeige: block; --wetterbild-hoehe: 150px; --wetterbild-breite: 100%; --wettertag-anzeige: block; --wetterecke-lage: absolute; --wetterecke-spalte: auto; --wetterbild-hub: 56px; --baum-schub: 96px; --baum-wuchs: 1; --baum-heb: 8px; --wetter-grad: 34px; --wetter-wort: 13px; --wetter-wind-wort: 11px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 100%; --baum-ausrichtung: flex-start; --baum-linie-anzeige: none; --baum-kaesten-breite: 100%; --baum-kaesten-umbruch: wrap; --baum-kaesten-rand: 0; --baum-tafel-richtung: column; --baum-paar-trenner: 1px solid var(--linie); --baum-paar-strich: 0; --baum-tafel-breite: 100%; --plan-tag-anzeige: block; --ausfall-strich: 3px; --planzeiten-anzeige: none; --planzelle-zeit-anzeige: block; --plankopf-lage: static; --brett-korn: 10px; --sticker-neigung: 0.6deg; --blatt-neigung: 0.5deg; --feldhinweis-anzeige: none; --feldgruppe-innen: 0px; --feldgruppe-rahmen: 0px; --radius: 14px; --radius-karte: 20px; --radius-klein: 2px; --chatbild-hoehe: 180px; --huelle-lage: relative; --huelle-breite: auto; --huelle-richtung: row; --rumpf-einzug: 0px; --menueknopf-anzeige: flex; --menuetafel-inhalt: hidden; --menuetafel-lage: absolute; --abdunklung-anzeige: block; --seitentitel: 17px; --seitenkopf-richtung: column; --huelle-mindestbreite: max-content; --marke-reihenfolge: 3; --menuetafel-rahmen: 1px; --menuetafel-schatten: 0 8px 24px oklch(27% 0.02 170 / 0.18); --menuepunkt-schrift: 14px; --menuepunkt-radius: 3px; --seitenkopf-ausrichtung: stretch; --huelle-verteilung: space-between; /* **Die Marke nimmt nur noch ihren Text** (09.10.2026, gemessen). Hier stand `1 1 0`, und die Begruendung dafuer ist abgelaufen: *„Menue und Marke teilen sich den Rand zu gleichen Teilen - erst dadurch steht der Titel in der Mitte des Rahmens"* (Abschnitt 2). **Der Titel war damals ein Flexkind zwischen beiden**; seit dem 09.10.2026 steht er `fixed` und zentriert sich selbst (Abschnitt 17). **Geblieben war eine Klickflaeche von 172,5 px fuer einen Text von 78** - sie lag zur Haelfte **ueber dem Titel**, und die 44-px-Flaeche des Fragezeichens stiess darin an. *Eine Flaeche, die groesser ist als das, was man sieht, ist der stille Teil eines Treffers am falschen Ort.* **Optisch aendert sich nichts**: Der Text stand schon rechtsbuendig in seiner Box und steht gemessen weiter an derselben Stelle (286,6 bis 365). **Am Infoboard bleibt `1 1 0`** - dort ist die Kopfzeile eine Zeile mit drei Teilen, und der Titel steht im Seitenkopf. */ --marke-dehnung: 0 0 auto; --marke-schrift: 12px; --titelgruppe-lage: fixed; --titelgruppe-hoehe: var(--kopfhoehe); /* **Eine Rechnung, keine zweite Stelle** (09.10.2026, gemessen). Am Handy hochkant sind **150 px** richtig: Der Kasten steht dann von 112,5 bis 262,5, und der Text *Family Board* beginnt bei 286,6. **Im Querformat ist derselbe Streifen 812 px breit**, und zwischen dem Wort *Menue* (endet bei 65,7) und der Marke liegen gemessen **657,9 px** frei - *„Was nicht geklappt hat"* brach darin trotzdem um. **260 px sind gemessen**: Der laengste Titel der Anwendung ist *„Auf deinem Handy installieren"* mit **240,8 px**, dazu 4,8 Abstand und 13,4 fuer das Fragezeichen - **259,0**. **Warum die Zeile nicht im Querformat-Block steht**: Der ist eine **Berichtigung des Stundenplans** und holt jeden Wert beim Desktop (`test_das_querformat_setzt_dieselben_werte_wie_der_desktop`) - *eine Breite, die der Desktop nicht kennt, waere dort ein eigener Entwurf.* **Gesagt hat es die Wache, nicht das Nachdenken.** **`40vw` ist hergeleitet und nicht geraten**: 150 / 375 ist genau 0,4. Dieselbe Rechnung ergibt bei 812 px **324,8** und laeuft damit in den Deckel; an der unteren Kante des Querformats (568) sind es 227,2, und der Kasten steht dort von 170,4 bis 397,6 - der Text der Marke beginnt erst bei 483. */ --titelgruppe-breite: min(260px, 40vw); --titelgruppe-ausrichtung: center; --titelgruppe-ueberlauf: hidden; } /* **Der Tablet-Satz gilt ab 768 px - ausser auf einem gedrehten Handy** (FAM-235). Ein Handy im Querformat ist rund 812 px breit und lag damit bisher ueber diesem Haltepunkt: Es bekam die Seitenleiste (240 px) und die Liste je Tag. **Die zweite Bedingung schliesst genau ein Fenster aus**: 768 bis 960 px breit UND hoechstens 500 px hoch. Das ist ein gedrehtes Handy und sonst nichts - ein Tablet im Querformat ist 744 px hoch oder mehr, ein flaches Fenster am Desktop breiter als 960. **Eine Medienliste mit Komma, kein zweiter Wertesatz.** Der naheliegende Weg waere ein fuenfter Satz mit den Handy-Werten gewesen; gemessen sind das **73 von 98 Variablen**, also eine zweite Stelle fuer dieselbe Sache. So gilt im Querformat weiter, was am `:root` steht - und nur der Plan wird unten zum Gitter. */ @media (min-width: 768px) and (min-height: 501px), (min-width: 961px) { :root { /* Tablet */ --brett-raum-abstand: 16px; --brett-rahmen: 14px; --brett-innen-y: 20px; --brett-innen-x: 18px; --brett-spaltenabstand: 14px; --brettkarte-min: 120px; --brettkarte-min-voll: 180px; --brettkarte-titel: 21px; --brettkarte-titel-voll: 24px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 12px; --brettkopf-titel: 20px; --kopfhoehe: 64px; --marke-anzeige: inline; --menuetafel-breite: 400px; --menueliste-spalten: 1fr; --aufgabe-umbruch: nowrap; --aufgabe-titel-breite: auto; --detail-spalten: 1fr; --detail-listenanzeige: none; --kalender-spalten: repeat(7, 1fr); --kalender-leertag-anzeige: block; --monat-spalten: 30px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 13px; --monat-zeilenhoehe: 60px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, minmax(0, 1fr)); --board-zeilen-richtung: column; --brettkarte-neigung: 1.2deg; --schrift: 17px; --schrift-gross: 26px; --schaltflaeche: 48px; --abstand: 20px; --kachel-min: 220px; --maske-breite: 46ch; --knopfwort-anzeige: inline; --geraetewort: "deinem Tablet"; --kopftrenner-anzeige: block; --knopfzusatz-anzeige: inline; --einstellungsliste-spalten: 1fr; --infoboardboxen-anzeige: grid; --qrcode-breite: 220px; --blatt-breite: 100%; --blatt-rand: 40px; --blatt-kante: 20px; --feld-richtung: column; --feld-beschriftung-breite: auto; --feld-eingabe-basis: auto; --kontaktwert-basis: 14ch; --sticker-breite: 28ch; --sticker-feld-zeiger: auto; --bereich-spalten: 1fr; --sticker-ziehen: grab; --sticker-zug: none; --sticker-griff: block; --sticker-bereich-anzeige: flex; --plan-anzeige: block; --plan-spalten: 1fr; --baum-reihe-anzeige: block; --wetterbild-hoehe: 190px; --wetterbild-breite: 100%; --wettertag-anzeige: block; --wetterecke-lage: absolute; --wetterecke-spalte: auto; --wetterbild-hub: 56px; --baum-schub: 116px; --baum-wuchs: 1; --baum-heb: 8px; --wetter-grad: 44px; --wetter-wort: 15px; --wetter-wind-wort: 12px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 15ch; --baum-ausrichtung: flex-start; --baum-linie-anzeige: block; --baum-kaesten-breite: max-content; --baum-kaesten-umbruch: nowrap; --baum-kaesten-rand: auto; --baum-tafel-richtung: row; --baum-paar-trenner: 0; --baum-paar-strich: 1px solid var(--linie); --baum-tafel-breite: auto; --plan-tag-anzeige: block; --ausfall-strich: 4px; --planzeiten-anzeige: none; --planzelle-zeit-anzeige: block; --plankopf-lage: static; --brett-korn: 14px; --sticker-neigung: 1.2deg; --blatt-neigung: 0.6deg; --feldhinweis-anzeige: block; --feldgruppe-innen: 20px; --feldgruppe-rahmen: 1px; --radius: 18px; --radius-karte: 26px; --radius-klein: 2px; --chatbild-hoehe: 220px; --huelle-lage: fixed; --huelle-breite: 240px; --huelle-richtung: column; --rumpf-einzug: 240px; --menueknopf-anzeige: none; --menuetafel-inhalt: visible; --menuetafel-lage: static; --abdunklung-anzeige: none; --seitentitel: clamp(28px, 4cqi, 40px); --seitenkopf-richtung: row; --huelle-mindestbreite: 0; --marke-reihenfolge: 0; --menuetafel-rahmen: 0px; --menuetafel-schatten: none; --menuepunkt-schrift: 14px; --menuepunkt-radius: 3px; --seitenkopf-ausrichtung: flex-end; --huelle-verteilung: flex-start; --marke-dehnung: 0 0 auto; --marke-schrift: 22px; --titelgruppe-lage: static; --titelgruppe-hoehe: auto; --titelgruppe-breite: auto; --titelgruppe-ausrichtung: baseline; --titelgruppe-ueberlauf: visible; } } @media (min-width: 1200px) { :root { /* Desktop */ --brett-raum-abstand: 16px; --brett-rahmen: 14px; --brett-innen-y: 24px; --brett-innen-x: 28px; --brett-spaltenabstand: 28px; --brettkarte-min: 150px; --brettkarte-min-voll: 220px; --brettkarte-titel: 23px; --brettkarte-titel-voll: 28px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 13px; --brettkopf-titel: 24px; --kopfhoehe: 56px; --marke-anzeige: inline; --menuetafel-breite: 400px; --menueliste-spalten: 1fr; --aufgabe-umbruch: nowrap; --aufgabe-titel-breite: auto; --detail-spalten: 1fr 1fr; --detail-listenanzeige: block; --kalender-spalten: repeat(7, 1fr); --kalender-leertag-anzeige: block; --monat-spalten: 34px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 14px; --monat-zeilenhoehe: 74px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, minmax(0, 1fr)); --board-zeilen-richtung: column; --brettkarte-neigung: 1.2deg; --schrift: 16px; --schrift-gross: 26px; --schaltflaeche: 36px; --abstand: 20px; --kachel-min: 260px; --maske-breite: 46ch; --knopfwort-anzeige: inline; --geraetewort: "diesem Computer"; --kopftrenner-anzeige: block; --knopfzusatz-anzeige: inline; --einstellungsliste-spalten: 1fr; --infoboardboxen-anzeige: grid; --qrcode-breite: 200px; --blatt-breite: 794px; --blatt-rand: 94px; --blatt-kante: 20px; --feld-richtung: column; --feld-beschriftung-breite: auto; --feld-eingabe-basis: auto; --kontaktwert-basis: 14ch; --sticker-breite: 28ch; --sticker-feld-zeiger: auto; --bereich-spalten: repeat(3, minmax(0, 1fr)); --sticker-ziehen: grab; --sticker-zug: none; --sticker-griff: block; --sticker-bereich-anzeige: none; --plan-anzeige: grid; --plan-spalten: auto repeat(5, minmax(0, 1fr)); --baum-reihe-anzeige: grid; --wetterbild-hoehe: 190px; --wetterbild-breite: 770px; --wettertag-anzeige: flex; --wetterecke-lage: static; --wetterecke-spalte: 250px; --wetterbild-hub: 88px; --baum-schub: 66px; --baum-wuchs: 1.9; --baum-heb: 0px; --wetter-grad: 44px; --wetter-wort: 15px; --wetter-wind-wort: 12px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 16ch; --baum-ausrichtung: center; --baum-linie-anzeige: block; --baum-kaesten-breite: max-content; --baum-kaesten-umbruch: nowrap; --baum-kaesten-rand: auto; --baum-tafel-richtung: row; --baum-paar-trenner: 0; --baum-paar-strich: 1px solid var(--linie); --baum-tafel-breite: auto; --plan-tag-anzeige: contents; --ausfall-strich: 4px; --planzeiten-anzeige: contents; --planzelle-zeit-anzeige: none; --plankopf-lage: sticky; --brett-korn: 14px; --sticker-neigung: 1.2deg; --blatt-neigung: 1.2deg; --feldhinweis-anzeige: block; --feldgruppe-innen: 20px; --feldgruppe-rahmen: 1px; --radius: 16px; --radius-karte: 22px; --radius-klein: 2px; --chatbild-hoehe: 220px; --huelle-lage: fixed; --huelle-breite: 240px; --huelle-richtung: column; --rumpf-einzug: 240px; --menueknopf-anzeige: none; --menuetafel-inhalt: visible; --menuetafel-lage: static; --abdunklung-anzeige: none; --seitentitel: clamp(28px, 4cqi, 40px); --seitenkopf-richtung: row; --huelle-mindestbreite: 0; --marke-reihenfolge: 0; --menuetafel-rahmen: 0px; --menuetafel-schatten: none; --menuepunkt-schrift: 14px; --menuepunkt-radius: 3px; --seitenkopf-ausrichtung: flex-end; --huelle-verteilung: flex-start; --marke-dehnung: 0 0 auto; --marke-schrift: 22px; --titelgruppe-lage: static; --titelgruppe-hoehe: auto; --titelgruppe-breite: auto; --titelgruppe-ausrichtung: baseline; --titelgruppe-ueberlauf: visible; } } /* --- Das Handy im Querformat (FAM-235) ----------------------------------- */ /* **Wer sein Handy dreht, sieht die ganze Woche.** Breit **und flach** ist ein gedrehtes Handy; breit und hoch ein Tablet. Die Hoehe ist der ehrliche Unterscheider - und dieselbe Bedingung nimmt der Tablet-Satz oben aus. **Es stehen hier fuenf Zeilen und keine 98.** Der Handy-Satz gilt in diesem Fenster weiter (er steht am `:root`, und der Tablet-Satz greift nicht); geaendert wird nur, was aus der Liste ein Gitter macht. *Ein zweiter Wertesatz waere eine zweite Stelle fuer dieselbe Sache.* **Gemessen am 07.10.2026 bei 812 x 375** (Abzug der echten Maske, DPR 1): | | Spalte | dem Fach bleiben | gekuerzt | |---|---|---|---| | vorher: Tablet-Satz, Liste | 492,1 px | 476,1 px | 0 von 24 | | nur die fuenf Zeilen, Seitenleiste bleibt | 74,6 px | 58,6 px | **10 von 24** | | **die fuenf Zeilen ohne Seitenleiste** | **127,4 px** | **111,4 px** | **0** | Die mittlere Zeile ist der Fehlschlag von FAM-192 am Tablet (54,5 px, 13 von 27) **noch einmal** - und genau deshalb darf der Tablet-Satz hier nicht greifen. Die untere traegt mehr als der Desktop selbst (106,1 px). **Was das nicht entscheidet:** Querformat ist **keine fuenfte Ansicht**. Es steht nicht in der Ansichtsauswahl, denn es ist ein Zustand des Geraets und keine Wahl - und wer ausdruecklich *Handy* waehlt, bekommt ueber `body[data-ansicht]` weiterhin die Liste (Regel 0). */ @media (min-width: 568px) and (max-width: 960px) and (max-height: 500px) { :root { /* Handy im Querformat */ --plan-anzeige: grid; --plan-spalten: auto repeat(5, minmax(0, 1fr)); --plan-tag-anzeige: contents; --planzeiten-anzeige: contents; --planzelle-zeit-anzeige: none; --plankopf-lage: sticky; } } /* =========================================================================== 3. Die Uebersteuerung - schlaegt die Haltepunkte =========================================================================== Dieselben Variablen, hoehere Gewichtung. Das Attribut setzt der Server in base.html aus dem Cookie (app/ansichten.py). Jeder Satz setzt **jede** Variable - ein vergessener Wert faellt lautlos auf die Automatik zurueck (test_jede_ansicht_setzt_dieselben_merkmale). */ body[data-ansicht="handy"] { --brett-raum-abstand: 8px; --brett-rahmen: 9px; --brett-innen-y: 16px; --brett-innen-x: 16px; --brett-spaltenabstand: 18px; --brettkarte-min: 150px; --brettkarte-min-voll: 220px; --brettkarte-titel: 23px; --brettkarte-titel-voll: 28px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 13px; --brettkopf-titel: 22px; --kopfhoehe: 56px; --marke-anzeige: inline; --menuetafel-breite: min(78%, 300px); /* die Schublade (A3) */ --menueliste-spalten: repeat(2, 1fr); --aufgabe-umbruch: wrap; --aufgabe-titel-breite: 100%; --detail-spalten: 1fr; --detail-listenanzeige: none; --kalender-spalten: 1fr; --kalender-leertag-anzeige: block; --monat-spalten: 22px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 11px; --monat-zeilenhoehe: 34px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, 262px); --board-zeilen-richtung: column; --brettkarte-neigung: 0.6deg; --schrift: 12px; --schrift-gross: 16px; --schaltflaeche: 36px; --abstand: 10px; --kachel-min: 140px; --maske-breite: 100%; --knopfwort-anzeige: inline; --geraetewort: "deinem Handy"; --kopftrenner-anzeige: none; --knopfzusatz-anzeige: none; --einstellungsliste-spalten: 1fr; --infoboardboxen-anzeige: block; --qrcode-breite: 180px; --blatt-breite: 100%; --blatt-rand: 18px; --blatt-kante: 14px; --feld-richtung: row; --feld-beschriftung-breite: 40%; --feld-eingabe-basis: 0; --kontaktwert-basis: 100%; --sticker-breite: 100%; --sticker-feld-zeiger: none; --bereich-spalten: 1fr; --sticker-ziehen: default; --sticker-zug: auto; --sticker-griff: none; --sticker-bereich-anzeige: flex; --plan-anzeige: block; --plan-spalten: 1fr; --baum-reihe-anzeige: block; --wetterbild-hoehe: 150px; --wetterbild-breite: 100%; --wettertag-anzeige: block; --wetterecke-lage: absolute; --wetterecke-spalte: auto; --wetterbild-hub: 56px; --baum-schub: 96px; --baum-wuchs: 1; --baum-heb: 8px; --wetter-grad: 34px; --wetter-wort: 13px; --wetter-wind-wort: 11px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 100%; --baum-ausrichtung: flex-start; --baum-linie-anzeige: none; --baum-kaesten-breite: 100%; --baum-kaesten-umbruch: wrap; --baum-kaesten-rand: 0; --baum-tafel-richtung: column; --baum-paar-trenner: 1px solid var(--linie); --baum-paar-strich: 0; --baum-tafel-breite: 100%; --plan-tag-anzeige: block; --ausfall-strich: 3px; --planzeiten-anzeige: none; --planzelle-zeit-anzeige: block; --plankopf-lage: static; --brett-korn: 10px; --sticker-neigung: 0.6deg; --blatt-neigung: 0.5deg; --feldhinweis-anzeige: none; --feldgruppe-innen: 0px; --feldgruppe-rahmen: 0px; --radius: 14px; --radius-karte: 20px; --radius-klein: 2px; --chatbild-hoehe: 180px; --huelle-lage: relative; --huelle-breite: auto; --huelle-richtung: row; --rumpf-einzug: 0px; --menueknopf-anzeige: flex; --menuetafel-inhalt: hidden; --menuetafel-lage: absolute; --abdunklung-anzeige: block; --seitentitel: 17px; --seitenkopf-richtung: column; --huelle-mindestbreite: max-content; --marke-reihenfolge: 3; --menuetafel-rahmen: 1px; --menuetafel-schatten: 0 8px 24px oklch(27% 0.02 170 / 0.18); --menuepunkt-schrift: 14px; --menuepunkt-radius: 3px; --seitenkopf-ausrichtung: stretch; --huelle-verteilung: space-between; /* **Die Marke nimmt nur noch ihren Text** (09.10.2026, gemessen). Hier stand `1 1 0`, und die Begruendung dafuer ist abgelaufen: *„Menue und Marke teilen sich den Rand zu gleichen Teilen - erst dadurch steht der Titel in der Mitte des Rahmens"* (Abschnitt 2). **Der Titel war damals ein Flexkind zwischen beiden**; seit dem 09.10.2026 steht er `fixed` und zentriert sich selbst (Abschnitt 17). **Geblieben war eine Klickflaeche von 172,5 px fuer einen Text von 78** - sie lag zur Haelfte **ueber dem Titel**, und die 44-px-Flaeche des Fragezeichens stiess darin an. *Eine Flaeche, die groesser ist als das, was man sieht, ist der stille Teil eines Treffers am falschen Ort.* **Optisch aendert sich nichts**: Der Text stand schon rechtsbuendig in seiner Box und steht gemessen weiter an derselben Stelle (286,6 bis 365). **Am Infoboard bleibt `1 1 0`** - dort ist die Kopfzeile eine Zeile mit drei Teilen, und der Titel steht im Seitenkopf. */ --marke-dehnung: 0 0 auto; --marke-schrift: 12px; --titelgruppe-lage: fixed; --titelgruppe-hoehe: var(--kopfhoehe); /* **Eine Rechnung, keine zweite Stelle** (09.10.2026, gemessen). Am Handy hochkant sind **150 px** richtig: Der Kasten steht dann von 112,5 bis 262,5, und der Text *Family Board* beginnt bei 286,6. **Im Querformat ist derselbe Streifen 812 px breit**, und zwischen dem Wort *Menue* (endet bei 65,7) und der Marke liegen gemessen **657,9 px** frei - *„Was nicht geklappt hat"* brach darin trotzdem um. **260 px sind gemessen**: Der laengste Titel der Anwendung ist *„Auf deinem Handy installieren"* mit **240,8 px**, dazu 4,8 Abstand und 13,4 fuer das Fragezeichen - **259,0**. **Warum die Zeile nicht im Querformat-Block steht**: Der ist eine **Berichtigung des Stundenplans** und holt jeden Wert beim Desktop (`test_das_querformat_setzt_dieselben_werte_wie_der_desktop`) - *eine Breite, die der Desktop nicht kennt, waere dort ein eigener Entwurf.* **Gesagt hat es die Wache, nicht das Nachdenken.** **`40vw` ist hergeleitet und nicht geraten**: 150 / 375 ist genau 0,4. Dieselbe Rechnung ergibt bei 812 px **324,8** und laeuft damit in den Deckel; an der unteren Kante des Querformats (568) sind es 227,2, und der Kasten steht dort von 170,4 bis 397,6 - der Text der Marke beginnt erst bei 483. */ --titelgruppe-breite: min(260px, 40vw); --titelgruppe-ausrichtung: center; --titelgruppe-ueberlauf: hidden; } body[data-ansicht="tablet"] { --brett-raum-abstand: 16px; --brett-rahmen: 14px; --brett-innen-y: 20px; --brett-innen-x: 18px; --brett-spaltenabstand: 14px; --brettkarte-min: 120px; --brettkarte-min-voll: 180px; --brettkarte-titel: 21px; --brettkarte-titel-voll: 24px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 12px; --brettkopf-titel: 20px; --kopfhoehe: 64px; --marke-anzeige: inline; --menuetafel-breite: 400px; --menueliste-spalten: 1fr; --aufgabe-umbruch: nowrap; --aufgabe-titel-breite: auto; --detail-spalten: 1fr; --detail-listenanzeige: none; --kalender-spalten: repeat(7, 1fr); --kalender-leertag-anzeige: block; --monat-spalten: 30px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 13px; --monat-zeilenhoehe: 60px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, minmax(0, 1fr)); --board-zeilen-richtung: column; --brettkarte-neigung: 1.2deg; --schrift: 17px; --schrift-gross: 26px; --schaltflaeche: 48px; --abstand: 20px; --kachel-min: 220px; --maske-breite: 46ch; --knopfwort-anzeige: inline; --geraetewort: "deinem Tablet"; --kopftrenner-anzeige: block; --knopfzusatz-anzeige: inline; --einstellungsliste-spalten: 1fr; --infoboardboxen-anzeige: grid; --qrcode-breite: 220px; --blatt-breite: 100%; --blatt-rand: 40px; --blatt-kante: 20px; --feld-richtung: column; --feld-beschriftung-breite: auto; --feld-eingabe-basis: auto; --kontaktwert-basis: 14ch; --sticker-breite: 28ch; --sticker-feld-zeiger: auto; --bereich-spalten: 1fr; --sticker-ziehen: grab; --sticker-zug: none; --sticker-griff: block; --sticker-bereich-anzeige: flex; --plan-anzeige: block; --plan-spalten: 1fr; --baum-reihe-anzeige: block; --wetterbild-hoehe: 190px; --wetterbild-breite: 100%; --wettertag-anzeige: block; --wetterecke-lage: absolute; --wetterecke-spalte: auto; --wetterbild-hub: 56px; --baum-schub: 116px; --baum-wuchs: 1; --baum-heb: 8px; --wetter-grad: 44px; --wetter-wort: 15px; --wetter-wind-wort: 12px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 15ch; --baum-ausrichtung: flex-start; --baum-linie-anzeige: block; --baum-kaesten-breite: max-content; --baum-kaesten-umbruch: nowrap; --baum-kaesten-rand: auto; --baum-tafel-richtung: row; --baum-paar-trenner: 0; --baum-paar-strich: 1px solid var(--linie); --baum-tafel-breite: auto; --plan-tag-anzeige: block; --ausfall-strich: 4px; --planzeiten-anzeige: none; --planzelle-zeit-anzeige: block; --plankopf-lage: static; --brett-korn: 14px; --sticker-neigung: 1.2deg; --blatt-neigung: 0.6deg; --feldhinweis-anzeige: block; --feldgruppe-innen: 20px; --feldgruppe-rahmen: 1px; --radius: 18px; --radius-karte: 26px; --radius-klein: 2px; --chatbild-hoehe: 220px; --huelle-lage: fixed; --huelle-breite: 240px; --huelle-richtung: column; --rumpf-einzug: 240px; --menueknopf-anzeige: none; --menuetafel-inhalt: visible; --menuetafel-lage: static; --abdunklung-anzeige: none; --seitentitel: clamp(28px, 4cqi, 40px); --seitenkopf-richtung: row; --huelle-mindestbreite: 0; --marke-reihenfolge: 0; --menuetafel-rahmen: 0px; --menuetafel-schatten: none; --menuepunkt-schrift: 14px; --menuepunkt-radius: 3px; --seitenkopf-ausrichtung: flex-end; --huelle-verteilung: flex-start; --marke-dehnung: 0 0 auto; --marke-schrift: 22px; --titelgruppe-lage: static; --titelgruppe-hoehe: auto; --titelgruppe-breite: auto; --titelgruppe-ausrichtung: baseline; --titelgruppe-ueberlauf: visible; } body[data-ansicht="desktop"] { --brett-raum-abstand: 16px; --brett-rahmen: 14px; --brett-innen-y: 24px; --brett-innen-x: 28px; --brett-spaltenabstand: 28px; --brettkarte-min: 150px; --brettkarte-min-voll: 220px; --brettkarte-titel: 23px; --brettkarte-titel-voll: 28px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 13px; --brettkopf-titel: 24px; --kopfhoehe: 56px; --marke-anzeige: inline; --menuetafel-breite: 400px; --menueliste-spalten: 1fr; --aufgabe-umbruch: nowrap; --aufgabe-titel-breite: auto; --detail-spalten: 1fr 1fr; --detail-listenanzeige: block; --kalender-spalten: repeat(7, 1fr); --kalender-leertag-anzeige: block; --monat-spalten: 34px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 14px; --monat-zeilenhoehe: 74px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, minmax(0, 1fr)); --board-zeilen-richtung: column; --brettkarte-neigung: 1.2deg; --schrift: 16px; --schrift-gross: 26px; --schaltflaeche: 36px; --abstand: 20px; --kachel-min: 260px; --maske-breite: 46ch; --knopfwort-anzeige: inline; --geraetewort: "diesem Computer"; --kopftrenner-anzeige: block; --knopfzusatz-anzeige: inline; --einstellungsliste-spalten: 1fr; --infoboardboxen-anzeige: grid; --qrcode-breite: 200px; --blatt-breite: 794px; --blatt-rand: 94px; --blatt-kante: 20px; --feld-richtung: column; --feld-beschriftung-breite: auto; --feld-eingabe-basis: auto; --kontaktwert-basis: 14ch; --sticker-breite: 28ch; --sticker-feld-zeiger: auto; --bereich-spalten: repeat(3, minmax(0, 1fr)); --sticker-ziehen: grab; --sticker-zug: none; --sticker-griff: block; --sticker-bereich-anzeige: none; --plan-anzeige: grid; --plan-spalten: auto repeat(5, minmax(0, 1fr)); --baum-reihe-anzeige: grid; --wetterbild-hoehe: 190px; --wetterbild-breite: 770px; --wettertag-anzeige: flex; --wetterecke-lage: static; --wetterecke-spalte: 250px; --wetterbild-hub: 88px; --baum-schub: 66px; --baum-wuchs: 1.9; --baum-heb: 0px; --wetter-grad: 44px; --wetter-wort: 15px; --wetter-wind-wort: 12px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 16ch; --baum-ausrichtung: center; --baum-linie-anzeige: block; --baum-kaesten-breite: max-content; --baum-kaesten-umbruch: nowrap; --baum-kaesten-rand: auto; --baum-tafel-richtung: row; --baum-paar-trenner: 0; --baum-paar-strich: 1px solid var(--linie); --baum-tafel-breite: auto; --plan-tag-anzeige: contents; --ausfall-strich: 4px; --planzeiten-anzeige: contents; --planzelle-zeit-anzeige: none; --plankopf-lage: sticky; --brett-korn: 14px; --sticker-neigung: 1.2deg; --blatt-neigung: 1.2deg; --feldhinweis-anzeige: block; --feldgruppe-innen: 20px; --feldgruppe-rahmen: 1px; --radius: 16px; --radius-karte: 22px; --radius-klein: 2px; --chatbild-hoehe: 220px; --huelle-lage: fixed; --huelle-breite: 240px; --huelle-richtung: column; --rumpf-einzug: 240px; --menueknopf-anzeige: none; --menuetafel-inhalt: visible; --menuetafel-lage: static; --abdunklung-anzeige: none; --seitentitel: clamp(28px, 4cqi, 40px); --seitenkopf-richtung: row; --huelle-mindestbreite: 0; --marke-reihenfolge: 0; --menuetafel-rahmen: 0px; --menuetafel-schatten: none; --menuepunkt-schrift: 14px; --menuepunkt-radius: 3px; --seitenkopf-ausrichtung: flex-end; --huelle-verteilung: flex-start; --marke-dehnung: 0 0 auto; --marke-schrift: 22px; --titelgruppe-lage: static; --titelgruppe-hoehe: auto; --titelgruppe-breite: auto; --titelgruppe-ausrichtung: baseline; --titelgruppe-ueberlauf: visible; } /* Das Infoboard: Wohnzimmer, zwei Meter Abstand, Bedienung mit dem Finger. **Es zeigt weniger, nicht mehr.** Ein Wohnzimmerbildschirm ist kein Arbeitsplatz - wer daran vorbeigeht, soll in zwei Sekunden sehen, was ansteht, nicht suchen. Deshalb 380px Mindestkachel statt 260: vier grosse Kacheln statt acht kleiner. */ body[data-ansicht="infoboard"] { --brett-raum-abstand: 24px; --brett-rahmen: 20px; --brett-innen-y: 36px; --brett-innen-x: 42px; --brett-spaltenabstand: 40px; --brettkarte-min: 220px; --brettkarte-min-voll: 320px; --brettkarte-titel: 34px; --brettkarte-titel-voll: 40px; --brettkarte-text-anzeige: none; --brettkarte-textgroesse: 18px; --brettkopf-titel: 36px; --kopfhoehe: 96px; --marke-anzeige: inline; /* **Fuenf Spalten seit FAM-172, und die Breite gehoert dazu.** Der dreizehnte Menuepunkt (das *Sticker Board*) kostet hier eine Zeile - **gemessen 74 px**, und aufgeklappt waren nur **71 px** Luft: Die Tafel scrollte um drei Pixel. Design.md hatte genau das vorhergesagt. **Fuenf Spalten allein reichen nicht.** In 1000 px waeren das 200 px je Punkt, und dann brechen vier Woerter um (*Neuigkeiten*, *Geburtstage*, *Essensplan*, *Sticker Board*) - **ein umgebrochenes Wort ist schlimmer als drei Pixel Bildlauf**. **1250 px sind 250 je Punkt - genau so viel wie bisher bei vier.** Getragen haette auch 1150 (230 px, gemessen ohne Umbruch); das waere die Kante, und der naechste laengere Modulname braeche dort. *Eine Zahl, die gerade noch reicht, ist keine Entscheidung.* */ --menuetafel-breite: 1250px; --menueliste-spalten: repeat(5, 1fr); --aufgabe-umbruch: nowrap; --aufgabe-titel-breite: auto; --detail-spalten: 1fr 1fr; --detail-listenanzeige: block; --kalender-spalten: 1fr; --kalender-leertag-anzeige: block; --monat-spalten: 54px repeat(7, minmax(0, 1fr)); --monat-reihe-spalten: 2 / -1; --monat-kw-anzeige: block; --monat-schrift: 22px; --monat-zeilenhoehe: 120px; --essensplan-spalten: 1fr; --board-spalten: repeat(4, minmax(0, 1fr)); --board-zeilen-richtung: column; --brettkarte-neigung: 1.6deg; --schrift: 24px; --schrift-gross: 40px; --schaltflaeche: 72px; --abstand: 32px; --kachel-min: 380px; --maske-breite: 46ch; --knopfwort-anzeige: inline; --geraetewort: "diesem Bildschirm"; --kopftrenner-anzeige: block; --knopfzusatz-anzeige: inline; --einstellungsliste-spalten: repeat(2, 1fr); --infoboardboxen-anzeige: grid; --qrcode-breite: 320px; --blatt-breite: 992px; --blatt-rand: 118px; --blatt-kante: 32px; --feld-richtung: column; --feld-beschriftung-breite: auto; --feld-eingabe-basis: auto; --kontaktwert-basis: 14ch; --sticker-breite: 28ch; --sticker-feld-zeiger: auto; --bereich-spalten: repeat(3, minmax(0, 1fr)); --sticker-ziehen: grab; --sticker-zug: none; --sticker-griff: block; --sticker-bereich-anzeige: none; --plan-anzeige: grid; --plan-spalten: auto repeat(5, minmax(0, 1fr)); --baum-reihe-anzeige: block; --wetterbild-hoehe: 280px; --wetterbild-breite: 1080px; --wettertag-anzeige: flex; --wetterecke-lage: static; --wetterecke-spalte: 320px; --wetterbild-hub: 88px; --baum-schub: 66px; --baum-wuchs: 1.9; --baum-heb: 0px; --wetter-grad: 64px; --wetter-wort: 22px; --wetter-wind-wort: 16px; --wetterwoche-spalten: 1fr; --baum-kasten-breite: 20ch; --baum-ausrichtung: center; --baum-linie-anzeige: block; --baum-kaesten-breite: max-content; --baum-kaesten-umbruch: nowrap; --baum-kaesten-rand: auto; --baum-tafel-richtung: row; --baum-paar-trenner: 0; --baum-paar-strich: 1px solid var(--linie); --baum-tafel-breite: auto; --plan-tag-anzeige: contents; --ausfall-strich: 6px; --planzeiten-anzeige: contents; --planzelle-zeit-anzeige: none; --plankopf-lage: sticky; --brett-korn: 22px; --sticker-neigung: 1.6deg; --blatt-neigung: 1.6deg; --feldhinweis-anzeige: block; --feldgruppe-innen: 32px; --feldgruppe-rahmen: 1px; --radius: 22px; --radius-karte: 30px; --radius-klein: 2px; --chatbild-hoehe: 320px; --huelle-lage: relative; --huelle-breite: auto; --huelle-richtung: row; --rumpf-einzug: 0px; --menueknopf-anzeige: flex; --menuetafel-inhalt: hidden; --menuetafel-lage: absolute; --abdunklung-anzeige: block; --seitentitel: 36px; --seitenkopf-richtung: column; --huelle-mindestbreite: max-content; --marke-reihenfolge: 3; --menuetafel-rahmen: 1px; --menuetafel-schatten: 0 8px 24px oklch(27% 0.02 170 / 0.18); --menuepunkt-schrift: 24px; --menuepunkt-radius: 22px; --seitenkopf-ausrichtung: stretch; --huelle-verteilung: space-between; --marke-dehnung: 1 1 0; --marke-schrift: var(--schrift-gross); --titelgruppe-lage: static; --titelgruppe-hoehe: auto; --titelgruppe-breite: auto; --titelgruppe-ausrichtung: baseline; --titelgruppe-ueberlauf: visible; } /* =========================================================================== 4. Grundgeruest - nur der Inhalt scrollt (Design.md, Regel 2) =========================================================================== */ * { box-sizing: border-box; } html, body { /* **Die Seite ist so hoch wie das, was man sieht** (FAM-270, 04.11.2026, auf Rückmeldung vom Handy: *„Wo kann ich denn jetzt hier speichern?"*). **`height: 100%` ist am Handy nicht die sichtbare Höhe.** Android Chrome rechnet Prozente gegen den **großen** Viewport – den ohne Adressleiste. Steht die Leiste da, ist die Seite um deren Höhe zu hoch, und genau so weit lässt sich das Dokument verschieben. **`overflow: hidden` hält nur den Finger auf, nicht den Browser.** Wer in ein Feld tippt, bekommt es vom Browser ins Bild geschoben – und dabei rutscht die ganze Anwendung nach oben. **Zurück kommt man nicht**: Scrollen lässt sich die Seite ja gerade nicht. **Gemessen am Bildschirmfoto des Nutzers**, und die Zahl steht auf beiden Seiten: Oben fehlten Kopfzeile und Seitenkopf – und mit dem Seitenkopf der Knopf *Eintragen* –, stehen geblieben war allein der Titel, *das einzige Element mit `position: fixed`*. Unten stand ein grauer Streifen **derselben Höhe, rund 145 px**. Das ist die Verschiebung, kein freier Platz. **`dvh` ist die sichtbare Höhe** und wächst und schrumpft mit der Adressleiste. Damit gibt es nichts mehr zu verschieben: Die Seite ist so hoch wie ihr Fenster, der Überlauf ist **null** – und *was keinen Überlauf hat, kann auch kein Browser wegschieben.* **Die Prozentzeile bleibt als Rückfall stehen.** Ein Browser, der `dvh` nicht kennt, überspringt die zweite Zeile und bekommt den alten Stand; alle anderen überschreiben sie. *Eine Zeile, die nur manchmal greift, ist hier genau richtig* – sie ist der Notnagel, nicht die Regel. > **Was das nicht löst, steht daneben**: Die Tastatur schrumpft nur > den **sichtbaren** Viewport, nicht den, gegen den `dvh` rechnet. > Dafür trägt die Seite seit heute `interactive-widget=resizes-content` > (`base.html`) – erst beides zusammen schließt die Tür. */ /* **`svh`, nicht `dvh`** (05.11.2026, gemeldet vom Gerät – dreimal, und beim dritten Mal mit dem Bild, das es entschieden hat). **`dvh` ist die *dynamische* Höhe**: Sie meint den Zustand, den der Browser gerade für den richtigen hält – und das ist auf Android der **große** Viewport, sobald er die Adressleiste für einziehbar hält. Steht sie trotzdem da, ist die Seite um deren Höhe zu hoch. **`svh` ist die *kleine* Höhe**: die **mit** Adressleiste. Für eine Seite, die nicht scrollt, ist das die einzige richtige Wahl – *die Leiste kann sich gar nicht einziehen, weil es nichts zu scrollen gibt.* **Warum das die ganze Kette bricht, ist gemessen** (05.11.2026): Ragt irgendetwas unter dem Körper heraus, bekommt das Dokument eine Scrollhöhe – und **`overflow: hidden` hält nur den Finger auf, nicht den Browser**. Gemessen ließ sich das Dokument trotz `hidden` um **150 px** schieben, sobald ein Element so weit herausragte; **mit `overflow: clip` genauso.** Wer das Schieben verhindern will, muss den **Überstand** verhindern, nicht das Scrollen. **Die Prozentzeile bleibt als Rückfall** – ein Browser ohne `svh` überspringt die zweite Zeile. `svh` und `dvh` sind zusammen ausgeliefert worden (Chrome 108, Safari 15.4); wer das eine kennt, kennt das andere. > **Hier stand `dvh`, seit FAM-270** (04.11.2026), mit derselben > Begründung und der richtigen Beobachtung – *nur mit der falschen > Einheit.* Der Satz von damals steht noch: *„Was es nicht beweist: > ob es am Gerät des Nutzers hält."* Es hat nicht gehalten. */ height: 100%; margin: 0; overflow: hidden; /* Die Seite selbst scrollt nicht. */ } /* **Die Schale hängt am Viewport, nicht im Dokument** (05.11.2026, vierte Runde desselben Fehlers – und die erste, die ihn an der Wurzel fasst). **Gemessen am Gerät des Nutzers**, mit einer eigens gebauten Messseite: Geht die Tastatur auf, schrumpft der Viewport von **674 auf 455 px** – und der Browser **schiebt das Dokument um 340 px**, um das Feld ins Bild zu holen. *`overflow: hidden` hält den Finger auf, nicht den Browser* (eigene Messung: 150 px Überstand = 150 px schiebbar, trotz `hidden` **und** trotz `clip`). Zurück kommt niemand, weil der Finger ja nicht scrollen darf. **`position: fixed` mit `inset: 0` nimmt den Körper aus dem Fluss.** Danach hat das Dokument **keinen Inhalt mehr, der scrollen könnte** – die Schiebestrecke ist nicht „verboten", sondern **null**. Es gibt nichts mehr zu schieben, also auch nichts, was hängen bleibt. **Und es braucht gar keine Viewport-Einheit mehr.** `inset: 0` ist der Viewport, wie er gerade ist – mit Adressleiste, ohne, mit Tastatur. *Drei Runden lang habe ich die richtige Einheit gesucht (`100%`, `dvh`, `svh`); die richtige Antwort ist, keine zu benutzen.* > **Was dabei NICHT passiert**: `position: fixed` am Körper macht ihn > **nicht** zum Bezug für fest gesetzte Nachkommen – das tun nur > `transform`, `filter`, `perspective`, `will-change` und `contain`. > `--titelgruppe-lage: fixed` rechnet also weiter gegen den Viewport. **Der Preis, ausgesprochen**: Ein fest gesetzter Körper kann nicht mehr mitwachsen. *Das ist hier keine Einschränkung, sondern die Zusage* – Regel 2 sagt seit dem ersten Tag, dass nur der Inhalt scrollt. */ body { position: fixed; inset: 0; /* **`clip`, nicht nur `hidden`** (05.11.2026, gemessen an einem echten Fall). **`hidden` haelt nur den Finger auf, nicht den Browser**: Der Koerper bleibt ein Scrollkasten, und wer `scrollIntoView` ruft, scrollt **jeden** scrollbaren Vorfahren mit - auch ihn. Genau das tat `heute-anspringen.js` auf der Terminseite: gemessen `body.scrollTop = 163`, die Kopfzeile damit bei `y = -163`, *und der Finger holt sie nicht zurueck.* **`clip` macht gar keinen Scrollkasten auf.** Es gibt dann nichts zu scrollen - auch nicht fuer den Browser. Gemessen am selben Aufruf: `body.scrollTop` bleibt **0**, die Kopfzeile bei **0**, und der innere Kasten scrollt wie vorher auf 310. > **Hier stand am selben Tag, `clip` helfe nicht.** Das war eine Messung > unter der Viewport-Emulation des Browser-Panes, und die hat damals > eine Zahl geliefert, die dem Pane gehoerte (`11-fallstricke.md`). > *Eine Abhilfe, die nichts bewirkt, ist zuerst ein Verdacht gegen die > Messung* - an einem echten Ueberstand wirkt sie. **`hidden` bleibt als Rueckfall davor** - ein Browser ohne `clip` ueberspringt die zweite Zeile und bekommt den alten Stand. */ overflow: hidden; overflow: clip; } body { display: flex; flex-direction: column; background: var(--grund); color: var(--text); font-size: var(--schrift); /* **Die Handschrift ist die Standardschrift** (27.09.2026, Design 2a, A2). Hier stand bis dahin `Inter, "Segoe UI", system-ui, …` - eine Grotesk. **Der Auftrag dreht das um**: Family Board schreibt von Hand, und die Ausnahmen sind die Titel (`--schrift-titel`) und alles, was eine feste Zeichenbreite braucht (Kennungen, Protokolle). *Der Preis steht in `Design.md`*: Eine Handschrift ist fuer ein Kind schlechter zu lesen als eine Grotesk - deshalb ist die Zeilenhoehe gemessen und nicht geraten (1.75 am Zettel, FAM-169). */ font-family: var(--schrift-hand); line-height: 1.5; } /* **Formularelemente erben keine Schrift** - das ist die Falle, die dieses Blatt fuenfmal getroffen hat (`textarea`, `file`, `time`, `number`, `color`; `11-fallstricke.md`). **Deshalb steht hier eine Positivliste und kein `font: inherit` an `input`**: Jenes naehme auch Groesse und Gewicht mit, und ein `` braucht beides anders. *Wer ein neues Feldelement einbaut, traegt es hier ein* - bewacht von `test_jedes_eingabeelement_erbt_die_schrift`. */ button, input, select, textarea, optgroup { font-family: inherit; } /* **Die Titelschrift** (Design 2a, A2) - Logo, Seitentitel, Abschnittstitel. **`h3` ist ausdruecklich nicht dabei**: Der Auftrag nennt `h1`, `h2` und Kartentitel. Am Brett ist `h3` der **Spaltenkopf**, und der traegt seit der Filzwand die Handschrift (FAM-175) - *zwei Entwuerfe, und der juengere gilt nur dort, wo er etwas sagt.* */ /* **Ueberschriften tragen die Grotesk** (27.09.2026, auf Wunsch: *„Bitte auch Ueberschriften wie Erledigt oder Archiv in Segoe UI umwandeln"*). Bis heute Vormittag war das Young Serif fuer beide; der Auftrag *Einkauf 2a* hat `h1` auf Segoe UI gestellt und `h2` bei der Serifenschrift gelassen. **Der Wunsch zieht `h2` nach** - und das ist die konsequentere Fassung: *Eine Ueberschrift ist eine Ueberschrift, ob sie „Verliehen" heisst oder „Archiv".* **Young Serif bleibt dort, wo Papier ist**: auf den Titeln der Karten (`.kartentitel`) und im Satz eines leeren Abschnitts. **Seit dem 29.09.2026 ist es Century Gothic 500** (auf Wunsch) - die Schrift, die bis dahin nur der Einkauf trug. Das Gewicht gehoert zur Schrift und steht deshalb hier daneben, nicht in einem Maskenabschnitt. */ h1, h2 { font-family: var(--schrift-seitentitel); font-weight: 500; letter-spacing: -.01em; } .kopfzeile { flex: 0 0 var(--kopfhoehe); display: flex; align-items: center; justify-content: space-between; gap: var(--abstand); padding: 0 var(--abstand); background: var(--akzent); color: var(--flaeche); } /* **Die Kopfzeile traegt seit FAM-107 nur noch zwei Dinge**: die Marke und den Knopf, der das Menue oeffnet. Bis dahin standen dort ausserdem eine Auswahlliste, ein Knopf *Wechseln*, der eigene Name und *Abmelden* - und das war der Grund fuer eine ganze Reihe von Notbehelfen: Der Inhalt war am Handy 624 px breit in einem 375-px-Fenster, die Marke musste weichen, und zwei Elemente mussten ausdruecklich schrumpfen duerfen. **Die Ursache ist weg, also sind es die Notbehelfe auch.** `position: relative` ist die einzige neue Zeile: Die Menuetafel haengt sich darunter, ohne die Seite laenger zu machen. */ .kopfzeile { position: relative; } /* **Die Marke steht wieder in allen vier Ansichten.** Sie war am Handy seit FAM-35 ausgeblendet, weil Ansichtsauswahl, Name und „Abmelden“ sonst nicht nebeneinander passten - *„das ist der Notbehelf, nicht der Entwurf"* (Design.md, Regel 10). Die drei sind jetzt im Menue. */ /* --- Die Anordnung der Kopfzeile: links, Mitte, rechts ------------------- **Auf Wunsch (20.09.2026):** *„Family Board auf die rechte Seite und die Ueberschrift, wo man gerade ist, in die Mitte oben und fett."* **Sie steht an EINER Stelle**, und das ist die eigentliche Arbeit dieser Aenderung. Vorher stand sie an dreien - hier (`space-between`), in Abschnitt 8 (`margin-left: auto` am Menue) und in Abschnitt 11 (`order` und `margin-right: auto`). Im Blatt gewinnt die letzte, und wer eine davon sucht, findet die falsche: **genau die Falle aus FAM-107**, wo zwei alte Notbehelfe die neue Menuetafel schlugen und eine Ueberschrift 177 px breit mitten darin stand. *Auf einem Bild sieht das nach Absicht aus.* **Zentriert mit `margin: 0 auto`, nicht mit `position: absolute`.** Ein absolut gesetzter Titel staende exakt in der Seitenmitte und liefe bei einem langen Namen **unter** das Menue und die Marke - und die Frage aus FAM-50 und FAM-84 lautet nicht *„sieht es gut aus“*, sondern *„gibt es ein Bedienelement, das nirgends erreichbar ist"*. Mit auto-Abstaenden teilt sich der Titel den uebrigen Platz und schrumpft mit Ellipse; Menue und Marke behalten ihre Breite. **Ohne Titel bleiben zwei Kinder**, und dann traegt `space-between` sie wie vorher nach links und rechts. */ /* **Die Reihenfolge kommt seit dem 27.09.2026 aus einem Merkmal** (Design 2a, A3): In der Zeile steht die Marke rechts (`3`), in der Leiste oben (`0`). *Sie steht weiterhin an genau dieser einen Stelle* - Abschnitt 16 setzt sie nicht noch einmal, er liefert nur den Wert. */ .kopfzeile > .menue { order: 1; flex: 1 1 0; } /* **`flex: 1 1 0` teilt in einer Zeile den Rand und in einer Spalte die Hoehe** - gemessen war die Marke damit **502 px hoch**, und das Menue fing in der Bildmitte an. *In der Leiste ist sie ein Logo, kein Randstueck.* **Alles, was den Platz der Marke entscheidet, steht in dieser einen Regel** - Reihenfolge, Dehnung und Ausrichtung. Die Wache aus FAM-107 zaehlt mit. */ .kopfzeile > .marke { order: var(--marke-reihenfolge); flex: var(--marke-dehnung); align-self: center; } /* **Menue und Marke teilen sich den Rand zu gleichen Teilen.** Erst dadurch steht der Titel in der Mitte des **Rahmens** und nicht nur in der Mitte des uebrigen Platzes - gemessen waren das sonst 17 px Versatz am Handy und **50 px am Infoboard**, weil die Marke breiter ist als der Menueknopf. **`min-width: max-content` ist die Zeile, die es sicher macht:** Beide duerfen wachsen, aber **nie unter ihren Inhalt schrumpfen**. Der Menueknopf ist der einzige Weg ins Menue - die Frage aus FAM-50 und FAM-84 lautet *„gibt es ein Bedienelement, das nirgends erreichbar ist"*. Reicht der Platz nicht, schrumpft stattdessen der **Titel**, und zwar mit Ellipse. */ /* **`min-width` kommt ebenfalls aus einem Merkmal.** In der Zeile verhindert `max-content`, dass der Hamburger unter seinen Inhalt schrumpft - *der einzige Weg ins Menue.* In der Leiste gibt es diese Enge nicht, und die Zeile machte die Tafel **346 px breit in einer 216 px breiten Leiste** (gemessen am 27.09.2026). */ .kopfzeile > .menue, .kopfzeile > .marke { min-width: var(--huelle-mindestbreite); } /* Titel und Fragezeichen gehoeren zusammen - **ein Kasten, nicht zwei Kinder** (siehe base.html). */ .seitenmitte { display: flex; align-items: center; gap: 0.4em; min-width: 0; /* **Der Rueckfall, wenn die Raender nicht wachsen koennen.** Solange Menue und Marke da sind, teilen sie sich den Rand (siehe oben) und es bleibt kein freier Platz, den diese Zeile verteilen koennte. Blendet jemand die Marke aus (`--marke-anzeige`), steht der Titel damit trotzdem mittig. */ margin: 0 auto; } .marke { display: var(--marke-anzeige); /* Sie fuellt ihre Haelfte des Randes, ihr Text steht am rechten Ende. */ text-align: right; color: inherit; font-size: var(--schrift-gross); font-weight: 600; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --------------------------------------------------------------------------- Das Menue (FAM-107) - ein `
`, kein JavaScript --------------------------------------------------------------------------- Es klappt auf und zu wie der Erledigt-Block (FAM-65) und die Artikelzeile (FAM-70). Ein Knopf, der ohne Skript nichts taete, gehoerte nicht ins HTML (Design.md, Regel 7). **Der Hamburger gilt in allen vier Ansichten**, und das ist die Entscheidung dieser Karte. Die Vorlage schlug vor, am Desktop und am Infoboard ein stehendes Menue zu lassen. Dagegen sprechen zwei Dinge: Zwei Bauarten derselben Sache laufen auseinander, und der Preis waere eine CSS-Regel, die ein zugeklapptes `
` von aussen aufzwingt - die haengt an der Browserfassung und ist genau die Art Zusage, die still bricht. Der Gewinn steht daneben: 232 px mehr Inhalt am Desktop, 320 px am Infoboard. */ /* **Der Griff sitzt in der Mitte der Kopfzeile** (29.09.2026, auf Rueckmeldung am Geraet: *„vertikal nicht mittig ausgerichtet"*). Das `
` ist ein Flex-Kind der Kopfzeile und wird auf deren ganze Hoehe gestreckt (`align-items: stretch`); der `` darin sass damit **oben**. **Gemessen am Handy: seine Mitte bei 18 px, die der Kopfzeile bei 28** - zehn Pixel, und daneben stand die Marke richtig. **`align-self`, nicht `align-items`** - und das ist gemessen, nicht geraten: Ein `display: flex; align-items: center` am `
` hat **nichts** bewegt (der Griff blieb bei `t = 0`), `align-self: center` setzt ihn auf `t = 10`. *Die Kopfzeile streckt den Kasten; zu zentrieren ist der Kasten, nicht sein Inhalt.* > **Und `display: flex` am `
` waere hier die gefaehrlichere > Haelfte gewesen**: Seit Chrome 131 haengt das Aufklappen am > Pseudo-Element `::details-content` (Design 2a, A3) - *eine Anzeigeart > am `
` selbst ist genau die Stelle, an der das schon einmal > gekippt ist.* */ .menue { position: static; align-self: center; } /* **Der Knopf ist die Bedienflaeche, nicht das Zeichen darin.** `--schaltflaeche`, keine erfundene Zahl (die Lehre aus FAM-62, der Fund aus FAM-84). */ .menueknopf { display: flex; align-items: center; gap: calc(var(--abstand) / 2); min-height: var(--schaltflaeche); padding: 0 calc(var(--abstand) / 2); border-radius: var(--radius); cursor: pointer; /* **So gross wie die Marke daneben** (29.09.2026, auf Rueckmeldung am Geraet: *„Menue ist zu klein"*). Gemessen am Handy: **12 px gegen 18** - `--schrift` ist die Groesse des Fliesstextes, und der Menueknopf steht nicht im Fliesstext, sondern in der Kopfzeile. **Die beiden Woerter dort gehoeren zusammen**, also tragen sie dieselbe Groesse; *eine eigene Zahl waere eine dritte Stelle, an der ueber die Kopfzeile entschieden wird.* */ font-size: var(--marke-schrift); font-weight: 600; /* **Das Aufklappzeichen wird selbst gesetzt** (die Lehre aus FAM-70). Dort hat ein `display: flex` am `` den `::marker` des Browsers geloescht - gemessen `marker_content: normal`, und zu sehen war nichts: Ein ganzer Bedienweg war unauffindbar. Hier steht es ausdruecklich da, statt sich auf denselben Nebeneffekt zu verlassen. */ list-style: none; } .menueknopf::-webkit-details-marker { display: none; } /* **Und es WECHSELT, es dreht sich nicht** - derselbe Grundsatz wie beim Haken, bei der Sonne (FAM-60) und beim ueberfaelligen Termin (FAM-65). */ .menueknopf::before { content: "\2630"; /* ☰ */ font-size: 1.2em; line-height: 1; } .menue[open] > .menueknopf::before { content: "\2715"; } /* ✕ */ .menueknopf:hover { background: var(--akzent-dunkel); } /* Die aufgeklappte Tafel haengt unter der Kopfzeile und **verlaengert die Seite nicht** (Regel 2). **Sie ist linksbuendig, weil der Knopf links steht** (21.09.2026, auf Wunsch: „Das Menü geht rechts auf, obwohl der Menübutton links ist“). Hier stand `margin-left: auto` und daneben die Begruendung *„sie ist rechtsbuendig, weil der Knopf rechts steht"*. Das war richtig, als es geschrieben wurde (FAM-107) - **seit dem 20.09.2026 steht der Knopf links**, und die Regel ist nicht mitgewandert. Woertlich dieselbe Falle wie die alten `.abmelden`-Regeln (FAM-107) und das Fragezeichen in der gruenen Kopfzeile (FAM-109): *Wer einen Baustein verschiebt, sucht seine alten Regeln im ganzen Blatt.* **Sie scrollt in sich.** Fuenfzehn Menuepunkte, der Einstellungsblock, Abmelden und die Fussnote passen am Handy nicht auf einen Bildschirm - und die Seite selbst scrollt nicht. */ .menuetafel { position: absolute; top: 100%; z-index: 20; /* **Sie haengt an der linken Kante - und die Regel sagt es** (21.09.2026). Hier stand `left: 0` UND `right: 0` UND eine Breite, aufgeloest ueber `margin-right: auto`. Gemessen stand die Tafel damit richtig (x = 0 in allen vier Ansichten), **aber die Regel sagte es nicht**: Sie verliess sich darauf, dass CSS 2.1 die Gleichung nach dem einen `auto`-Rand aufloest. Nimmt jemand spaeter `margin-right` weg - es sieht ja ueberfluessig aus -, ist die Angabe **ueberbestimmt**, und dann gilt, was der Browser ignoriert. **`right: auto` ist die Aussage**: Die linke Kante steht, die rechte ergibt sich aus der Breite. Dieselbe Linie wie `flex: 0 0 auto` statt einer blossen `width` (FAM-64) - *wer eine Zusage macht, sagt sie, statt sie ausrechnen zu lassen.* Am Handy deckelt nichts (`auto`), sonst steht die Tafel als Schublade am linken Rand - unter ihrem Knopf. */ left: 0; right: auto; width: 100%; max-width: var(--menuetafel-breite); /* **`dvh`, nicht `vh`** (05.11.2026, gemeldet vom Gerät): `100vh` ist am Handy die Höhe **ohne** Adressleiste - die Tafel dürfte damit höher werden als das, was man sieht, und ragt bei vielen Menüpunkten unten aus dem Bild. *Wörtlich der Fund von FAM-270, nur an der Tafel.* **Die `vh`-Zeile bleibt als Rückfall davor**: Ein Browser ohne `dvh` verwirft die zweite und behält die erste. */ max-height: calc(100vh - var(--kopfhoehe)); max-height: calc(100svh - var(--kopfhoehe)); overflow-y: auto; padding: calc(var(--abstand) / 2); background: var(--flaeche); color: var(--text); border: 1px solid var(--linie); border-radius: 0 0 var(--radius-karte) var(--radius-karte); /* oben bricht sie an der Kopfzeile ab */ box-shadow: 0 8px 24px oklch(27% 0.02 170 / 0.18); } .menueliste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } /* **Die Modulliste steht in Spalten, sobald sie nicht mehr auf den Schirm passt** (21.09.2026, auf Wunsch: *„Bei Fuhrpark versuchst du das Menue immer ganz anzuzeigen, indem du die Punkte enger zusammenschiebst, kannst du das bei diesem Menue auch machen?"*). **Gemessen ging es nicht ueber die Hoehe.** Am Infoboard brauchen allein die vierzehn Punkte **1008 px** (14 x `--schaltflaeche`), und der Platz unter der Kopfzeile ist **984 px** - enger zusammenschieben reicht dort rechnerisch nicht, und die Bedienflaeche kleinzurechnen ist genau das, wovor Regel 10 seit FAM-62 warnt: *auf einem Bild sehen 41 px neben 48 px gleich aus.* Am Infoboard wiegt es doppelt, denn dort wird aus zwei Metern getippt. **Die Breite lag dagegen brach**: 420 von 1920 px. Also mehr Spalten statt weniger Hoehe - `--menueliste-spalten`, je Ansicht gemessen (Regel 10). **Zeilenweise, nicht spaltenweise** (`grid-auto-flow: row`, die Vorgabe). Spaltenweise laese sich eine Liste natuerlicher - und ein **neues Modul verschoebe dann die halbe zweite Spalte**. Das Menue waechst *angehaengt, nicht einsortiert* (FAM-86, siebenmal bestaetigt): Wer Termine blind trifft, soll sie weiter blind treffen. Zeilenweise behaelt jeder Punkt seinen Platz, wenn hinten einer dazukommt. **Nur die Modullisten** - die Liste in den *Einstellungen* traegt einen einzigen Punkt, und ein halbbreiter Punkt neben einer leeren Spalte saehe aus wie ein Fehler. **Der Selektor hat am 17.10.2026 die Ebene gewechselt**: Bis dahin stand hier `.menuetafel > .menueliste`, und das war richtig, solange die Listen unmittelbar in der Tafel standen. Seit die Bereiche zuklappbar sind, steckt jede in einem `
` - *ein `>`-Selektor, dem eine Huelle dazwischengeschoben wird, greift lautlos nicht mehr*, und die Punkte stuenden untereinander statt in zwei Spalten. **Die Abo-Liste steht weiter unmittelbar in der Tafel**, also nennt der Selektor beide Wege. */ .menuetafel > .menueliste, .menuebereich > .menueliste { display: grid; grid-template-columns: var(--menueliste-spalten); } /* **Der Kopf eines Bereichs** (17.10.2026) - die Zeile, die man antippt. **Kein Knopf im Sinne von Abschnitt 15**: Ein `` ist weder `button` noch `.schaltflaeche`, und ein Textmarker unter einem Bereichsnamen saehe aus wie eine Aktion. *Das Menue bleibt das Menue* (Auftrag vom 27.09.2026, Abschnitt 8). **Die Trefferflaeche ist trotzdem `--knopf-flaeche`** - sie ist der Boden, den dieses Projekt jedem Ziel gibt, und hier tippt ein Kind. */ .menuebereichkopf { display: flex; align-items: center; gap: 0.5ch; min-height: var(--knopf-flaeche); cursor: pointer; color: var(--text-leise); font-size: calc(var(--menuepunkt-schrift) * 0.85); list-style: none; } /* **Das Zeichen wechselt, also wird es selbst gesetzt** - die Falle steht fuenfmal im Index: `display: flex` an einem `` loescht den `::marker`. */ .menuebereichkopf::marker, .menuebereichkopf::-webkit-details-marker { display: none; } .menuebereichkopf::after { /* **Das Zeichen steht hier als Zeichen, nicht als Escape** (17.10.2026). Hier stand `"BE"`, durch ein Python-Skript geschrieben - und `` ist dort ein **Oktalescape**: In der Datei landete das Steuerzeichen 0x15 und daneben der Text `BE`. **Genau das stand am Menue**, und im ersten Bereich spiegelverkehrt, weil `[open]` es um 180 Grad dreht. *Ein Escape, das man nicht braucht, kann auch nicht kaputtgehen* - die Falle steht seit dem 15.09.2026 im Index, dies ist das dritte Mal. */ content: "▾"; margin-inline-start: auto; transition: transform 0.15s ease; } .menuebereich[open] > .menuebereichkopf::after { transform: rotate(180deg); } /* **Der Strich sitzt am Bereich, nicht mehr an der Liste** (17.10.2026) - sonst zoege ihn der Bereichskopf nicht mit, und ein zugeklappter Bereich haette seine Trennlinie **unter** sich statt ueber sich. */ .menuebereich + .menuebereich, .menuebereich + .menueliste { margin-top: var(--abstand); padding-top: var(--abstand); border-top: 1px solid var(--linie); } /* **Menuepunkte duerfen umbrechen** (gemessen am 13.09.2026, FAM-29). In der Tafel ist der Platz da - anders als in der 88 px schmalen Leiste, die es bis FAM-107 gab. Die Zeile bleibt trotzdem stehen: „Einkaufsliste“ ist keinen Deut kuerzer als „Uebersicht“, und `anywhere` ist hier der Unterschied, der zaehlt - `break-word` laesst die Mindestbreite beim laengsten unzerbrechlichen Stueck. */ .menuetafel a, .menuegruppe > summary, .ansichtsliste button, .abmelden button { display: flex; align-items: center; /* **Zwei Leerzeichen zwischen Symbol und Wort** (21.09.2026, auf Wunsch). Er steht hier und nicht am Symbol: Ein Menuepunkt ohne Bild - den gibt es nicht mehr, aber er koennte wiederkommen - saehe sonst eingerueckt aus. **Er haengt an der SCHRIFT, nicht am Abstand**, und das ist die Aenderung. Hier stand `calc(var(--abstand) / 2)`; gemessen waren das 5 / 10 / 10 / 16 px neben einem Leerzeichen von 3,3 / 4,7 / 4,4 / 6,6 px - also **1,5 Leerzeichen am Handy und 2,4 am Infoboard**. Der Wunsch ist typografisch („zwei Leerzeichen“), `--abstand` ist ein Layoutwert, und deshalb lief beides auseinander. **0.6em sind gemessen 2,2 Leerzeichen in jeder Ansicht** - dieselbe Rechnung wie beim Mengenfeld des Einkaufs, wo `ch` den Text misst und `--abstand` den Rand (18.09.2026). */ gap: 0.6em; min-height: var(--schaltflaeche); width: 100%; padding: calc(var(--abstand) / 4) calc(var(--abstand) / 2); border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; /* **Ein Menuename wird nicht getrennt** (28.09.2026, auf Rueckmeldung: *„Einstellungen sollen nicht Umbrechen"*). Hier stand `hyphens: auto` und `overflow-wrap: anywhere`, und die Zeile brach mitten im Wort: *Einstellun-gen*. **Noetig war das einmal**, als am Infoboard fuenf Spalten zu 200 px standen (FAM-172) - jene Karte hat es anders geloest (*„ein umgebrochenes Wort ist schlimmer als drei Pixel Bildlauf"*, die Tafel wuchs auf 1250 px), **und die Trennung blieb trotzdem stehen**. Mehrwortige Eintraege brechen weiterhin am **Leerzeichen**: *„Auf dem Geraet installieren"* braucht gemessen 283 px und bekommt zwei Zeilen. *Ein Satz darf umbrechen, ein Name nicht.* */ hyphens: none; cursor: pointer; } .menuetafel a:hover, .menuegruppe > summary:hover, .ansichtsliste button:hover, .abmelden button:hover { background: var(--akzent-blass); } /* **Das Wort traegt die Aussage, nicht die Farbe** (FAM-65) - deshalb steht `aria-current` im Markup und hier nur, was man sieht. */ .menuetafel .aktiv { background: var(--akzent-blass); color: var(--akzent-dunkel); font-weight: 600; } /* Die kleine Ueberschrift ueber der Ansichtsauswahl und ueber dem Abmelden. Kein `

`: Die Tafel ist eine Navigation, keine Gliederung. */ /* **Und im Menue ist die Luft zwischen den Bloecken halb so gross** (21.09.2026, auf Wunsch: *„kannst du die Punkte enger zusammenschieben?“*). **Das ist der Teil des Wunsches, der nichts kostet.** Kleiner wird der Abstand zwischen den Bloecken - **nicht die Flaeche, die ein Daumen treffen muss** (woertlich die Lehre aus FAM-109, und die Wache `test_keine_bedienflaeche_wird_kleiner_gerechnet` haelt sie seit FAM-62). Gemessen holt es am Infoboard **64 px**, am Tablet und Desktop 40, am Handy 20 - genug, damit die Tafel auch mit aufgeklappten *Einstellungen* auf den Schirm passt. **Die Fussnote steht auch auf den beiden Anmeldeseiten und im Betriebsbereich** - dort ist ihr Rand richtig, und deshalb wird die Klasse nicht angefasst, sondern nur ihr Vorkommen im Menue. */ .menuetafel .menueueberschrift, .menuetafel > .menuegruppe, .menuetafel > .fussnote { margin-top: calc(var(--abstand) / 2); } .menueueberschrift { margin: var(--abstand) 0 4px; padding: 0 calc(var(--abstand) / 2); color: var(--text-leise); font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.04em; } /* **Der Einstellungsblock** (21.09.2026, auf Wunsch): Die Ansichtsauswahl liegt hinter einem Aufklapper, statt offen in der Tafel zu stehen. **Das Aufklappzeichen wird selbst gesetzt und WECHSELT** (▾/▴) - zum vierten Mal dieselbe Zeile nach FAM-70, FAM-136 und FAM-146: Ein `display: flex` an einem `` loescht den `::marker` des Browsers, und dann sieht ein Aufklapper nicht mehr wie einer aus. Er funktioniert dabei weiter, **und genau das ist das Gefaehrliche**: Niemand weiss, dass man tippen kann. */ .menuegruppe { margin-top: var(--abstand); border-top: 1px solid var(--linie); } .menuegruppe > summary { min-height: var(--schaltflaeche); width: 100%; padding: calc(var(--abstand) / 4) calc(var(--abstand) / 2); border-radius: var(--radius); cursor: pointer; list-style: none; } .menuegruppe > summary::-webkit-details-marker { display: none; } .menuegruppe > summary::after { content: "▾"; margin-left: auto; color: var(--text-leise); } .menuegruppe[open] > summary::after { content: "▴"; } /* Der Block darin rueckt ein - er gehoert sichtbar zu seinem Aufklapper. **Die Bedienflaeche schrumpft dabei nicht** (die Lehre aus FAM-62): Es wandert der Rand, nicht die Hoehe. */ .menuegruppe .ansichtsliste { margin-left: calc(var(--abstand) / 2); border-top: 0; } /* **Ein Knopf je Ansicht, keine Auswahlliste** (FAM-107). Fuenf 48-px-Flaechen statt eines Auswahlfeldes und eines Knopfes *Wechseln* - ein Tipp statt zweier, und ohne eine Zeile JavaScript. */ .ansichtsliste, .abmelden { display: flex; flex-direction: column; gap: 2px; margin: 0; border-top: 1px solid var(--linie); } /* **Die Ansichtsliste steht in denselben Spalten wie die Modulliste** (21.09.2026): Fuenf Ansichten und die Hilfe untereinander waren am Infoboard 432 px - mehr als ein Drittel des Platzes fuer etwas, das man selten braucht. **Sie steht hier und nicht oben bei `.menuegruppe .ansichtsliste`**, und das ist gemessen: Dort stand sie zuerst, also **vor** dem `display: flex` darueber - gleiche Gewichtung, und **im Blatt gewinnt die spaetere**. Die Messung meldete danach Zahl fuer Zahl dieselben Werte wie ohne die Regel. *Genau die Falle aus FAM-107 und FAM-84.* **`.abmelden` bleibt eine Spalte** - Name und Knopf gehoeren untereinander, und zwei Knoepfe nebeneinander hiessen, dass man sich beim Abmelden vertippen kann. */ .ansichtsliste { display: grid; grid-template-columns: var(--menueliste-spalten); } /* **Die Liste unter *Einstellungen* steht am Infoboard in zwei Spalten** (22.09.2026) - und das ist gemessen, nicht gestaltet. Mit dem dritten Punkt (*Installieren*) wuchs die aufgeklappte Tafel dort von 913 auf **987 px** bei **982 px** Platz: Sie scrollte um fuenf Pixel. **Woertlich die Lage von FAM-172**, nur einen Block weiter - und die Antwort ist dieselbe: *mehr Spalten statt weniger Hoehe.* Kleiner wird der Abstand, die Zeile, der Rahmen - **nicht die Flaeche, die ein Daumen treffen muss** (FAM-109, FAM-62). **Nur am Infoboard.** In den drei anderen Ansichten passt die Tafel bequem (673 / 913 / 719 px), und ein Punkt neben einem anderen waere dort schmaler, ohne dass es etwas brauchte. **Drei Punkte in zwei Spalten heisst eine leere Zelle**, und das ist kein Widerspruch zu der Entscheidung von gestern: Dort standen **zwei** Punkte in **vier** Spalten - also zwei leere Zellen neben zwei Woertern, *und das sieht aus wie ein Fehler.* Eine halbe Zeile ist der Normalfall jeder Rasterliste. */ .menuegruppe .menueliste { display: grid; grid-template-columns: var(--einstellungsliste-spalten); } /* Der eigene Name fuehrt zum eigenen Passwort (FAM-35). Er steht ueber dem Abmeldeknopf, damit nicht beides wie ein Knopf aussieht. */ .abmelden .wer { padding: calc(var(--abstand) / 4) calc(var(--abstand) / 2); color: var(--text); overflow-wrap: anywhere; } .fussnote { margin: var(--abstand) 0 0; padding: calc(var(--abstand) / 2); border-top: 1px solid var(--linie); color: var(--text-leise); font-size: 0.85em; } /* **Der Rumpf scrollt, nicht die Seite** (Design.md, Regel 2 - gemessen am 13.09.2026 in der Vier-Ansichten-Pruefung zu FAM-29). Breite Inhalte scrollen in ihrem eigenen Kasten, nicht durch Verbreitern der Seite. */ .rumpf { flex: 1 1 auto; display: flex; min-height: 0; /* Ohne das waechst der Rumpf ueber die Seite. */ overflow-x: auto; } .hauptbereich { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; } .werkzeugleiste { flex: 0 0 auto; display: flex; /* **Sie muss umbrechen duerfen** (FAM-84). Bis dahin hatte keine Maske mehr als drei Aktionen, und die Leiste stand mit `nowrap` da, ohne dass es auffiel. Der Kalender hat vier - gemessen am Handy bei 375 px lagen *Heute* und *Woche* danach RECHTS AUSSERHALB des Fensters, und zwar bei jeder Scrollposition (die Seite scrollt nicht, Regel 2). Dieselbe Falle wie FAM-50, wo *abhaken* im Seitwaerts-Scrollbereich lag - nur eine Ebene hoeher: Dort war eine Tabellenzeile unteilbar, hier war es die Leiste selbst. **Eine Leiste, die eine Aktion abschneidet, ist keine Werkzeugleiste**, und das gilt fuer jede Maske, nicht nur fuer diese. */ flex-wrap: wrap; align-items: center; gap: calc(var(--abstand) / 2); /* **Sie ist kein Kasten mehr** (29.09.2026, auf Auftrag). Hier standen `padding`, `background: var(--flaeche)` und eine Unterlinie - gedacht fuer eine **Leiste ueber dem Inhalt** (A4). Seit der Kopf des Einkaufs das Konzept aller Module ist, steht sie **in der Titelzeile**, neben dem Titel: Dort sah der weisse Kasten aus wie ein Block, der ueber die Zeile hinausragt (*„Abo bitte im Hintergrund transparent"*, 28.09.2026). **Die Zeilen sind hier weggefallen statt weiter unten ueberschrieben** - es gab den Selektor sonst **zweimal** im Blatt, und im Browser gewann die spaetere. *Zwei Regeln fuer dieselbe Frage laufen auseinander.* */ padding: 0; background: transparent; border-bottom: 0; } /* **Eine Aktion in der Leiste, die etwas AENDERT, ist ein Formular** - kein Verweis (FAM-32). Bis FAM-71 kam das nicht vor: Speichern bedient das Formular der Maske ueber `form="..."`, und alles andere waren Verweise. „Einkauf fertig“ ist die erste Aktion, die in der Leiste selbst ein POST abschickt. Ohne diese Zeile stuende das Formular als Block darin und riesse die Leiste auseinander. **Die Regel steht hier und nicht bei der Einkaufsliste**: Sie gilt fuer jede Maske, die als naechstes so einen Knopf bekommt. */ .werkzeugleiste form { display: flex; align-items: center; } .inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* Nur hier wird gescrollt. */ padding: var(--abstand); } /* =========================================================================== 5. Benachrichtigungen (FAM-115) und Meldungen (Design.md, Regel 3) =========================================================================== **Zwei Baender, nicht eines**, und die Benachrichtigung steht oben. Eine Meldung ist die Antwort auf etwas, das man gerade selbst getan hat; eine Benachrichtigung ist etwas, das jemand anders getan hat - die ueberraschendere von beiden. Zusammenlegen ginge nicht: Eine Meldung verblasst nach vier Sekunden (Regel 3), eine Benachrichtigung darf das **nicht**. Die Zeile haette dann zwei Verhalten, und niemand saehe, welches gerade gilt. */ .benachrichtigungsleiste { flex: 0 0 auto; padding: calc(var(--abstand) / 2) var(--abstand) 0; } /* **Der warme Akzent - auffaellig, und der Text traegt trotzdem allein.** Wer rot-gruen-blind ist, sieht die Farbe nicht, und am Infoboard aus zwei Metern verschwimmt sie (FAM-65). Beides gilt gleichzeitig und ist kein Widerspruch: auffaellig genug, dass man hinsieht - und der Satz sagt allein, worum es geht. */ .benachrichtigung { display: flex; align-items: center; gap: calc(var(--abstand) / 2); margin-bottom: 4px; padding-right: 4px; background: var(--warm-blass); border: 1px solid var(--warm); border-radius: var(--radius); } /* **Der Satz ist der Knopf.** Ein Klick fuehrt zur Quelle und raeumt weg - beides zugleich, deshalb ein Formular und kein Verweis (FAM-53). Er sieht nicht aus wie ein Knopf, weil er die ganze Zeile ist; er verhaelt sich aber wie einer, und `--schaltflaeche` ist die Flaeche, die ein Daumen treffen muss (Regel 10). */ .benachrichtigungstext { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: var(--knopf-flaeche); padding: 0 var(--abstand); border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } button.benachrichtigungstext:hover { text-decoration: underline; } /* --- Nachlesen (FAM-117) --------------------------------------------- **Kein warmer Hintergrund, und das ist Absicht.** Die Leiste oben faellt auf, damit man hinsieht; hier ist man schon da. Eine Maske, in der jede Zeile auffaellt, hat keine, die auffaellt. */ .nachleseliste { list-style: none; margin: 0; padding: 0; } .nachlesezeile { display: flex; align-items: center; gap: calc(var(--abstand) / 2); /* **Umbrechen darf sie** - die Lehre aus FAM-50 und FAM-93: Eine Zeile, die nicht umbrechen kann, schneidet am Handy die letzte Angabe ab, und die Messung meldet dabei `seitwaerts: 0`. */ flex-wrap: wrap; padding: calc(var(--abstand) / 4) 0; border-bottom: 1px solid var(--linie); } /* Der Satz traegt die Aussage. Er ist zugleich der Weg zur Quelle, also eine Bedienflaeche - `--schaltflaeche`, keine erfundene Zahl (FAM-62, FAM-84). */ .nachlesetext { flex: 1 1 12ch; min-width: 0; display: flex; align-items: center; min-height: var(--schaltflaeche); color: var(--text); } a.nachlesetext:hover { text-decoration: underline; } /* **Der Zustand als Wort** (FAM-65) - nicht als Farbe und nicht als Punkt. */ .nachlesezustand { flex: 0 0 auto; color: var(--text-leise); } .nachlesezeit { flex: 0 0 auto; color: var(--text-leise); } /* Das ✕ - quadratisch, und es erreicht dieselbe Bedienflaeche. **`--knopf-flaeche`, nicht `--schaltflaeche`** (05.10.2026): *44 sind der Boden*, und mit dem kleineren Wert waere es am Handy und am Desktop 36 × 36 gewesen - dieselbe Zeile, die `.tagesknopf` acht Tage lang zu schmal gehalten hat. */ .wegklicken { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: var(--knopf-flaeche); min-height: var(--knopf-flaeche); padding: 0; border: 0; background: none; color: var(--warm); cursor: pointer; } .meldungsleiste { flex: 0 0 auto; padding: calc(var(--abstand) / 2) var(--abstand); } .meldung { display: flex; align-items: center; max-height: calc(var(--schaltflaeche) - 4px); margin: 0 0 4px; padding: 0 var(--abstand); border-radius: var(--radius); } .meldung-fehler { background: var(--fehler-blass); color: var(--fehler); } .meldung-erfolg { background: var(--erfolg-blass); color: var(--erfolg); } .meldung-hinweis { background: var(--akzent-blass); color: var(--akzent-dunkel); } /* =========================================================================== 6. Inhalt =========================================================================== */ h1 { display: flex; align-items: center; gap: calc(var(--abstand) / 2); margin: 0 0 var(--abstand); font-size: var(--schrift-gross); } h2 { font-size: calc(var(--schrift) * 1.2); margin: var(--abstand) 0 calc(var(--abstand) / 2); } h3 { font-size: var(--schrift); margin: 0 0 4px; } a { color: var(--akzent-dunkel); } .hilfezeichen { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border: 1px solid var(--linie); border-radius: 50%; font-size: 0.7em; text-decoration: none; /* Traegt die Trefferflaeche darunter (siehe die Regel gleich darunter). */ position: relative; } /* **Das Fragezeichen ist ein Weg, also ein Knopf** (09.10.2026, gemessen). **Gemessen waren 13,4 px** am Handy, 19 am Tablet, 17,9 am Desktop und 26,9 am Infoboard – in **jeder** Ansicht unter den **44**, die Abschnitt 15 den Boden nennt (`--knopf-flaeche`, *„44 ist der Boden, nicht die Decke"*). Der Grund ist die Rechnung darueber: `1.6em` von `0.7em` sind **1,12em** des Umfelds, und am Handy ist das Umfeld 12 px. **Aufgefallen ist es erst, als der Titel am 09.10.2026 in den Kopfstreifen gezogen ist** – zu klein war es vorher genauso. *Eine Maske kann alle Tests bestehen und trotzdem falsch gebaut sein* (`11-fallstricke.md`). ## Gewachsen ist die Flaeche, nicht der Kreis Ein `min-width` am Kasten selbst machte aus dem Ring einen **44 px grossen Reifen** um ein Zeichen von 8,4 px – am Infoboard 72. *Das Fragezeichen steht neben einer Ueberschrift und ist nicht ihr Nachbar an Gewicht.* Deshalb liegt die Flaeche in einem Pseudo-Element **ueber** dem Ring: unsichtbar, mittig, und sie nimmt die Klicks fuer ihn entgegen. `::after` war an diesem Element frei – *wer ein Pseudo-Element setzt, sucht erst, ob es vergeben ist* (`11-fallstricke.md`). **`translate` und nicht `transform`**: Es ist eine eigene Eigenschaft und nimmt einem spaeteren `transform` nichts weg. */ .hilfezeichen::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: var(--knopf-flaeche); height: var(--knopf-flaeche); border-radius: 50%; } /* **Das Fragezeichen steht seit FAM-109 in der Kopfzeile** - und die ist gruen. Seine Farbe war fuer einen hellen Hintergrund gewaehlt: gemessen `oklch(0.42 0.11 170)` auf `oklch(0.52 0.11 170)`, also derselbe Farbton eine Spur dunkler. **Es war da und nicht zu sehen.** Dieselbe Falle wie die alten `.abmelden`-Regeln in FAM-107: Ein Baustein zieht um, seine Farbe bleibt am alten Ort stehen - und auf einem Bild sieht das nach Absicht aus. `inherit` statt einer zweiten Farbe: Die Kopfzeile setzt bereits `color: var(--flaeche)`, und `currentColor` am Rahmen zieht mit. Kein `color-mix()` (Regel 10 - gemischte Farben driften). */ .kopfzeile .hilfezeichen { color: inherit; border-color: currentColor; opacity: 0.75; flex: 0 0 auto; } .kopfzeile .hilfezeichen:hover { opacity: 1; } .einleitung { color: var(--text-leise); max-width: 62ch; } .hinweiskasten { max-width: 70ch; margin: var(--abstand) 0; padding: var(--abstand); background: var(--akzent-blass); border-left: 3px solid var(--akzent); border-radius: var(--radius); } .hilfetext { max-width: 70ch; } .themenliste { padding-left: var(--abstand); } /* Die Kacheln der geplanten Module - bewusst ohne Verweis (Regel 5). */ .kachelliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--kachel-min), 1fr)); gap: var(--abstand); margin: 0; padding: 0; list-style: none; } /* **Lange Woerter muessen brechen duerfen** (gefunden am 13.09.2026 in der Vier-Ansichten-Pruefung zu FAM-29). Am Handy ist eine Kachel 164px breit, der Text darin 130px - und "Geschenkewuensche" braucht 163px. Es lief heraus. Deutsch ist voll von solchen Woertern: Ansichtsauswahl, Familienprojekte, Stundenplan. `hyphens: auto` trennt sauber (das `lang="de"` steht in base.html), `overflow-wrap` ist der Notnagel fuer den Fall, dass kein Trennpunkt passt. Zusammen statt einzeln: Ohne den Notnagel laeuft ein Wort ohne moegliche Trennstelle weiterhin heraus. */ /* **Die ganze Kachel ist klickbar** (11.10.2026, auf Wunsch). **Der Verweis im Titel waechst ueber die Kachel**, statt dass ein zweiter um sie herumgelegt wird: Ein Vorleseprogramm haette dann denselben Weg zweimal, und ein `
` mit Klickbehandler waere ein Bedienelement, das ohne Skript nichts tut (Regel 7). **`.kachel` traegt dafuer schon `position: relative`** - die Zeile steht seit jeher darunter, und genau deshalb geht das hier ohne eine neue. **Der Umriss bleibt am Titel.** Das ist der Preis dieser Bauart: Wer mit der Tastatur ankommt, sieht den Fokus am Wort, nicht an der Kachel. Die Alternative waere ein `:focus-within` an der Kachel - *und dann saehe ein Klick ins Leere aus wie ein gesetzter Fokus.* **Was spaeter in eine Kachel kommt, liegt darunter.** Ein zweiter Knopf in einer Kachel waere von dieser Flaeche verdeckt; wer einen einbaut, gibt ihm `position: relative` und ist damit wieder obenauf. */ .kachel h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* **Die Zahl des Moduls** (11.10.2026, auf Wunsch). Sie steht unter dem Satz, nicht darueber: *Erst was es ist, dann wie viel davon* - und eine Kachel ohne Zahl sieht damit nicht aus, als fehle ihr etwas. **`--akzent-dunkel` und nicht `--akzent`**: Auf der hellen Kachelflaeche faellt der helle Akzent auf 3,16 bis 4,26 (gemessen am Pergament der Familienregeln, 08.10.2026) - *„leicht farbig" darf nicht heissen „nicht lesbar"*. */ .kachelzahl { margin: 4px 0 0; color: var(--akzent-dunkel); font-weight: 600; } .kachel { position: relative; padding: var(--abstand); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-karte); hyphens: auto; overflow-wrap: break-word; } .kachel p { margin: 0; color: var(--text-leise); font-size: 0.92em; } .kachel-geplant { opacity: 0.75; } .marke-geplant { position: absolute; top: var(--abstand); right: var(--abstand); padding: 1px 8px; background: var(--akzent-blass); border-radius: 999px; color: var(--akzent-dunkel); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.04em; } /* =========================================================================== 7. Eingabeelemente - eine Hoehe, ein Rahmen =========================================================================== */ /* **`input[type="time"]` ist hier dazugekommen** (FAM-83), und die Karte hat es vorhergesagt: Es stand nicht in dieser Zeile - genauso wenig, wie `