/* garten.css — Grundtokens (E1.1). * * Diese Datei legt KEIN Design fest. Sie legt die NAMEN fest, und zwar aus einem messbaren Grund: * mehrere Bausteine aus `_app-template/building-blocks/` (uploader_checklist.css, * editor_richtext.css, leadsheet_editor.css) benutzen laut ihrer Dokumentation genau diese * Custom Properties — `--border`, `--card-bg`, `--ink`, `--ink-soft`, `--maroon`, `--shadow-sm`. * Wer sie hier nicht definiert, bekommt beim ersten kopierten Baustein unsichtbare Rahmen und * schwarze Schrift auf schwarzem Grund — und sucht den Fehler im Baustein statt im Fundament. * * Die WERTE sind Platzhalter (neutrale Grauwerte, ein Gruen als Akzent). Die Gartenpalette * entsteht mit den Ansichten ab E3; wer sie festlegt, aendert hier die Werte und sonst nichts. * `--maroon` behaelt seinen Baustein-Namen, obwohl im Garten nichts kastanienbraun ist: eine * Umbenennung waere eine Abweichung in JEDER kopierten Baustein-CSS und damit ein * W21-Ausschlusseintrag je Datei — ein schlechter Tausch fuer einen huebscheren Namen. */ :root { --ink: #1d2419; /* Fliesstext */ --ink-soft: #545e50; /* Nebentext, Beschriftungen */ --border: #c4cbbc; /* Trennlinien, Rahmen */ --card-bg: #ffffff; /* Kartenflaechen */ --maroon: #3c6e35; /* Akzent-/Aktionsfarbe (Baustein-Name, s. Kopf) */ --shadow-sm: 0 1px 2px rgba(29, 36, 25, .07), 0 2px 8px rgba(29, 36, 25, .06); } /* ↺ 2026-09-18, GESTALT STUFE 1 (docs/draufsicht-entwurf.md §5): DIE PALETTE IST FESTGELEGT. * Bis heute standen oben „Platzhalter"; gemessen hob sich eine Karte um 1,08:1 vom Seitengrund * ab — im Tageslicht am Telefon ist das keine Karte. Jeder Wert unten ist GERECHNET (WCAG-Formel), * nicht nach Augenmass gewaehlt: * * Karte gegen Seite 1,17:1 (vorher 1,08) — die Flaeche selbst * Rahmen gegen Karte 1,66:1 (vorher 1,43) — die Kante, die sie wirklich traegt * Text auf Seite 13,6:1 * Nebentext auf Seite 5,8:1 (#545e50; #5c6657 waere auf dem dunkleren Grund auf 5,1 gefallen) * Gruen auf Seite 5,2:1, auf Karte 6,1:1 * Gruen auf Zeilenknopf 5,0:1 * * KEINE NEUE FARBFAMILIE: alles bleibt Gruen, Grau-Gruen und Weiss. Neu sind nur Helligkeitsstufen * davon, und die Warnfarbe, die der Baustein ohnehin verlangt. */ :root { --seite: #ebeee6; /* Seitengrund — getoent, damit Weiss darauf eine Flaeche ist */ --maroon-hell: #e3ecde; /* Getoente Akzentflaeche: Zeilenknoepfe, Auswahl */ --shadow-lg: 0 8px 24px rgba(29, 36, 25, .14); /* Schwebendes: das Kontomenue */ /* DIE VIER, DIE DER BAUSTEIN VON DER GAST-APP ERWARTET (user_management.css, gemessen: * --erfolg Z. 242/265, --warnung Z. 86/266, --card-bg-2 Z. 390, --accent-ink Z. 402). Ohne sie * fiel er auf seine Ersatzwerte zurueck — ein zweites Gruen (#15803d) und ein fremdes Orange * (#b45309), ausgerechnet auf den Seiten, die ein neues Mitglied als erstes sieht. */ --erfolg: #3c6e35; /* = --maroon; ein Garten hat EIN Gruen */ --warnung: #8a5a00; /* Ocker, 5,9:1 auf Weiss */ --card-bg-2: #f4f6f1; /* Zweitflaeche IN einer Karte */ --accent-ink: #ffffff; /* = --on-maroon */ /* DIE SCHRIFTSKALA — fuenf Stufen, jede mit einem Zweck. Gemessen stand die App bei NEUN * gerenderten Groessen, drei davon Browser-Vorgaben, die nie jemand gewaehlt hat (h2 war auf * /beete 24 px und auf /triebe 17,6 px). Eine sechste Stufe braucht einen Zweck, den man * hierhin schreiben kann. */ --schrift-titel: 1.75rem; /* 28 px — die EINE Ueberschrift der Seite (h1) */ --schrift-abschnitt: 1.25rem; /* 20 px — Abschnitte (h2) */ --schrift-unter: 1.0625rem; /* 17 px — Unterabschnitte (h3), Einleitungssatz */ --schrift-text: 1rem; /* 16 px — Fliesstext, Felder, Knoepfe; darunter zoomt iOS */ --schrift-klein: .875rem; /* 14 px — Hinweise, Brotkrume, Beschriftungen */ /* DIE ABSTANDSSKALA — sechs Stufen. Gemessen waren es 22 verschiedene Werte, manche 1,6 px * auseinander: das liest das Auge als Zufall, nicht als Ordnung. */ --abstand-1: .25rem; /* 4 px — innerhalb einer Zeile */ --abstand-2: .5rem; /* 8 px — zwischen Geschwistern */ --abstand-3: .75rem; /* 12 px — Innenrand kleiner Flaechen */ --abstand-4: 1rem; /* 16 px — Innenrand von Karten, Seitenrand */ --abstand-5: 1.5rem; /* 24 px — zwischen Bloecken */ --abstand-6: 2rem; /* 32 px — zwischen Abschnitten */ } body { margin: 0; color: var(--ink); background: var(--seite); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* DIE UEBERSCHRIFTEN — bis heute ohne Regel und damit Browser-Vorgabe. Die Baustein-Seiten setzen * `.um h1` mit eigener Staffel; das ist spezifischer als `h1` und gewinnt dort, wie es soll. */ h1 { font-size: var(--schrift-titel); line-height: 1.2; letter-spacing: -.01em; margin: var(--abstand-2) 0 var(--abstand-4); } h2 { font-size: var(--schrift-abschnitt); line-height: 1.3; margin: var(--abstand-6) 0 var(--abstand-3); } h3 { font-size: var(--schrift-unter); line-height: 1.35; margin: var(--abstand-5) 0 var(--abstand-2); } /* DIE VERWEISE — bis heute ohne jede Regel: gemessen 46 von 138 Verweisen auf /draufsicht in * Browser-Blau #0000EE, das zu keinem der Tokens gehoert. Der Unterstrich BLEIBT: an ihm erkennt * man einen Verweis im Fliesstext, auch wenn man die Farbe nicht unterscheidet. */ a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: .18em; } a:hover { text-decoration-thickness: 2px; } /* ↺ 2026-09-18, KONTRASTWAECHTER: HIER STAND `a:visited { color: var(--maroon); }`, und sie war * die unsichtbare Knopfschrift. Tills Fund am Telefon: „Heute im Garten" ganz gruen, die Schrift * erst beim Antippen. Gemessen (Chrome, echter Besuch UND erzwungenes :visited, gegen * Bildschirmpixel): `a:visited` hat die Spezifitaet (0,1,1) und schlaegt `.um-knopf--haupt` * (0,1,0) — jeder BESUCHTE Hauptknopf-Link wurde gruen auf gruen, 1:1, an 16 Vorlagenstellen. * Beim Antippen gewann `.um-knopf--haupt:hover` (0,2,0), darum kam die Schrift dann zurueck. * Die Regel war UNNOETIG: `a { color }` oben schlaegt das Browser-Violett schon ueber die * HERKUNFT (Autor vor Browser), nicht ueber die Spezifitaet — gemessen an 21 Seiten: mit ihr * 142 Messungen, in denen ein Verweis nach dem Besuch die Farbe wechselt (auch die Marke, die * Gartenkarten und die weissen Wegeknoepfe wurden gruen), ohne sie 0. * Eine Zustandsregel auf ein NACKTES Element (a:visited, a:hover, button:focus …), die Farbe * setzt, schliesst `tests/test_kontrast_struktur.py` aus; `tests/test_kontrast.py` misst jede * Seite im echten Browser, besucht und unbesucht. */ /* ── Dashboard und Gartenseiten (Etappe EG, 2026-09-03) ────────────────────────────────────── * * DAS IST IMMER NOCH KEIN DESIGN, und der Kopf dieser Datei bleibt gueltig: die Gartenpalette * entsteht mit den Ansichten ab E3. Was hier dazukommt, ist die kleinste Menge Layout, ohne die * eine Liste von Karten keine Liste von Karten ist — Wichtels Dashboard ist eine Kachelwand, und * eine unformatierte