:root{ /* Bildschirm-Palette: freundlicher/waermer als die urspruengliche sachliche Grau-Blau-Optik (Design-Feedback ueber mehrere Runden, siehe mockups/tageslisten-mockup.html fuer die Entwicklung). Flaechen/Rahmen warme Creme-Toene, dazu eine matte Vierfarb-Palette fuer die Personenzeilen und ein eigener Ton fuer die "Heute"-Hervorhebung. Fuer den Ausdruck werden die Bildschirm-Toene unten in @media print gezielt zurueckgesetzt — der Ausdruck bleibt bewusst nuechtern. AP4.2-Nachtrag (projects/wochenplaner-design-nacharbeiten/plan.md, 2026-09-02): die im folgenden Verlauf mehrfach erwaehnte "Taupe/Greige"-Herkunft von --primary/--secondary ist historisch zu lesen -- der Umleitungs-MECHANISMUS (--accent/--tint/--tint2/--surface zeigen auf die Design-v2-Variablen in style-v2.css) gilt unveraendert, nur deren konkrete Hex-Werte wurden dort im Zuge von AP4.2 auf ein warmes Gruen/Gelb/Creme-Schema umgestellt (siehe Kommentar in style-v2.css :root sowie FARBPALETTE.md). Kein Aenderungsbedarf an dieser Redirect-Logik selbst. Design-Mischmasch-Fix, Fortsetzung (Nutzer-Feedback 2026-08-19, zweite Runde): --accent (urspruenglich ein eigenstaendiges, helles Kobaltblau) traegt inzwischen ALLE verbliebenen Bildschirm-Bereiche mit — auch .sheet .head, .daylist/.mealplan-Overlay, .dayview/.daynav und Login-/Kontoseite, die in der ersten Migrationsrunde bewusst zurueckgestellt wurden. Der damalige Grund fuer die Zurueckhaltung (moegliche Durchmischung mit dem Druckbild) trifft nicht zu: @media print (siehe unten) setzt --accent/--accent-tint/--accent-ring ohnehin bereits vollstaendig und unabhaengig auf eigene, neutrale Druckwerte zurueck. Deshalb genuegt es, --accent/--accent-tint/--accent-ring hier EINMAL auf die Design-v2-Variablen --primary/--secondary (Taupe/Greige, siehe :root in style-v2.css, dort zuerst geladen und daher hier bereits verfuegbar) umzuleiten — alle Stellen, die weiterhin var(--accent) / var(--accent-tint) / var(--accent-ring) nutzen, uebernehmen die neue Palette automatisch, ohne dass jede einzelne Regel umgeschrieben werden muss, und der bestehende Druck-Reset greift unveraendert weiter. Design-Mischmasch-Fix, vierte Runde (ANORAK-Rueckmeldung 2026-08-19, "gruendlicher Rundumschlag"): dasselbe Umleitungs-Muster jetzt auch auf --tint/--tint2/--surface angewendet — auch diese drei trugen noch die urspruengliche helle Blau-Toenung und wurden an zahlreichen, bislang nicht einzeln migrierten Stellen als Hintergrund verwendet (u. a. Werkzeugleiste, generische .legacy-btn-Klasse, Konto-/Login-Karte, Tagesliste-/Essensplan- Overlaykarte, mobile Tagesansicht). Alle drei werden bereits vollstaendig und unabhaengig im @media print-:root weiter unten zurueckgesetzt (--tint/--tint2/--surface dort auf eigene, neutrale Druckwerte) — die Umleitung hier ist also ebenso gefahrlos wie bei --accent. */ --ink:#1f2937; --muted:#6b6355; --line:#a89a84; --line-soft:#ddd0b8; --tint:var(--secondary); --tint2:var(--secondary); /* vormals eigene helle Blau-Toenungen, jetzt die Design-v2-Spaltenhintergrundfarbe -- deckt sich mit der bereits migrierten #grid thead th-Flaeche (siehe dort), fuer dieselbe Rolle "Tabellenkopf/-randspalte" */ --accent:var(--primary); --ok:#2f7a52; --warn:#a15c1b; --bad:#a12b2b; --surface:var(--background); /* vormals #f9fcfe ("helles Blauweiss"), jetzt dieselbe Flaeche wie der App-Hintergrund -- entspricht dem Karten-Muster der Design-Vorgabe v2 (.card in style-v2.css nutzt ebenfalls var(--background) statt einer eigenen Oberflaechenfarbe, Abgrenzung erfolgt ueber Rahmen/Schatten, siehe dortige Vorkommen) */ --accent-tint:var(--secondary); /* Hover-/aktiv-Toenung, jetzt einheitlich die Design-v2- Palette statt der frueheren eigenstaendigen Blau-Toenung */ --accent-ring:var(--primary); /* Fokus-/Hover-Rahmenton, dito */ /* AP4.2 (projects/wochenplaner-design-nacharbeiten/plan.md): --today-bg/--today-line sowie die vier --fam-*-Personenfarben sind NICHT auf --primary/--secondary/--background zurueckgefuehrt (siehe AP4.1-Befund/FARBPALETTE.md Abschnitt 2) -- werden deshalb hier explizit auf die im freigegebenen Mockup (ap4-variante-a-farbpalette.html) verwendeten neuen Werte umgestellt, damit sie nicht vom neuen Look ausgenommen bleiben. --ok/--warn/--bad bewusst UNVERAENDERT (siehe FARBPALETTE.md Abschnitt 2: eigene semantische Rolle, --ok liegt bereits nah an der neuen --primary -- eine gewollte, aber nicht erzwungene Kohaerenz). Druck bleibt unveraendert: alle vier Personenfarben werden fuer den Ausdruck ueber die bereits bestehende "tr.person.fam-*{background:var(--tint)}"/".avatar{display:none}"-Regel im @media print-Block unten neutralisiert (unabhaengig vom hier gesetzten Bildschirm-Wert), "Heute" ueber "td.today,th.today{background:none !important}" im selben Block. */ --today-bg:#FFF1D6; --today-line:#E0932E; /* "Heute"-Hervorhebung: warmer Amber-Ton */ /* Matte, gedeckte Vierfarb-Palette fuer die vier Personenzeilen -- etwas kraeftiger/ kindgerechter als die vorherige, sehr gedeckte Taupe-Ableitung, bewusst weiterhin matt statt neonbunt (siehe FARBPALETTE.md Abschnitt 2). Tints weiterhin per color-mix() aus der jeweiligen Basisfarbe abgeleitet (unveraendertes Muster). */ --fam-a:#E07856; --fam-a-tint:color-mix(in srgb, var(--fam-a) 15%, var(--background)); /* warme Koralle/Terrakotta */ --fam-b:#5B93C4; --fam-b-tint:color-mix(in srgb, var(--fam-b) 15%, var(--background)); /* Himmelblau */ --fam-c:#D6A428; --fam-c-tint:color-mix(in srgb, var(--fam-c) 15%, var(--background)); /* Sonnenocker */ --fam-d:#5E9456; --fam-d-tint:color-mix(in srgb, var(--fam-d) 15%, var(--background)); /* Laubgruen */ } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ color:var(--ink); font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-print-color-adjust:exact; print-color-adjust:exact; /* Design-Mischmasch-Fix, zweite Runde (Nutzer-Feedback 2026-08-19): der frueher hier gesetzte Pastell-"Farbtupfer"-Verlauf (Etsy-Wochenplan-Motiv einer vorherigen Design-Runde) hatte dieselbe Spezifitaet wie die "body{background:var(--background)}"-Regel aus style-v2.css und gewann als spaeter geladene Datei — dadurch wurde der eigentlich gewuenschte, flache Mockup-Hintergrund vollstaendig ueberschrieben. Ersatzlos entfernt: der Seitenhintergrund folgt jetzt durchgaengig var(--background) wie im freigegebenen Mockup. */ background:var(--background); } button,input,select{font:inherit} .wp-sprite-holder{display:none} /* Schrift-Vereinheitlichung (Nutzer-Entscheidung 2026-08-19, im Anschluss an das Design-Review "drei parallele Schriftfamilien"): die vormals hier verspielt/runder gedachte Ueberschriften- schrift (Baloo 2/Quicksand/Comfortaa) ist entfallen -- sie lud ohnehin schon seit der CSP- Migration (AP3.1) nicht mehr (der Google-Fonts-CDN-Link wurde dort entfernt), die Klasse fiel also bereits auf die System-Fallbacks zurueck. Jetzt bewusst auf dieselbe, bereits lokal vendorte Open-Sans-Stack wie body{font-family} in style-v2.css umgestellt, damit die App durchgaengig eine Schriftfamilie nutzt. Weiterhin nur auf grosse Ueberschriften/Titel angewendet (nicht auf dichten Tabellentext), Praesenz/Hierarchie wird stattdessen ueber font-weight in den jeweiligen h1/h2-Regeln (.head h1, .daylist-head h2) sichergestellt. Klasse von .font-friendly auf .font-heading umbenannt, da "friendly" (verspielt/rund) auf die jetzige, mit dem Fliesstext identische Schriftfamilie nicht mehr zutrifft -- die Klasse markiert inhaltlich nur noch "das ist eine grosse Ueberschrift", nicht mehr "das ist eine andere Schrift". */ .font-heading{font-family:"Open Sans","Inter","Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} /* ---------------- Kontomenue (dialog) ---------------- */ .acct-dialog{border:0; border-radius:12px; padding:0; max-width:420px; width:92%; box-shadow:0 10px 40px rgba(0,0,0,.25)} .acct-dialog .acct-body{padding:20px 22px; font-size:14px; line-height:1.6} .acct-dialog h2{margin:0 0 2px; font-size:17px; color:var(--accent)} .acct-dialog .acct-who{margin:0 0 14px; color:var(--muted); font-size:13px} .acct-dialog .acct-actions{display:flex; flex-direction:column; gap:8px} .acct-dialog .acct-out{margin-top:12px; font-size:13px; color:var(--ok)} .acct-dialog .acct-foot{text-align:right; margin-top:16px} /* ---------------- Anmeldeseite ---------------- */ .auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px} /* line-height:normal hier bewusst explizit (AP0.3, Bootstrap-Migrationsplan): Bootstraps Reboot setzt global eine line-height von 1.5 auf body, die zuvor (ohne Bootstrap-CSS) gar nicht existierte -- jedes Kindelement ohne eigene line-height (p.lead, label, .msg, Tab-/Legacy-Buttons, Inputs) erbte vorher stattdessen den Browser-Standard "normal" (~1.2). Ohne diese Ergaenzung wuerde die Karte insgesamt spuerbar hoeher werden und dadurch (ueber die vertikale Zentrierung in .auth-wrap) komplett anders positioniert sein, obwohl keine einzelne Regel absichtlich geaendert wurde -- im Regressionstest gegen die AP0.0-Baseline so aufgefallen (Karte 20px hoeher). h1 ist davon nicht betroffen: Bootstrap setzt dafuer ohnehin eine eigene, direkte h1{line-height:1.2}- Regel, die staerker wirkt als eine vererbte Eigenschaft. */ .auth-card{background:var(--surface); border-radius:14px; box-shadow:0 6px 28px rgba(0,0,0,.12); padding:26px 28px; width:100%; max-width:420px; line-height:normal} /* font-weight hier bewusst explizit (AP0.3, Bootstrap-Migrationsplan): seit login.html Bootstrap- CSS einbindet, greifen dessen Reboot-/Utility-Defaults fuer diese Elemente (h1{font-weight:500} bzw. .lead{font-weight:300}), die zuvor mangels Bootstrap-CSS gar nicht existierten -- vorher fiel h1 auf den Browser-Standard fuer Ueberschriften (bold/700) zurueck, p.lead auf normal/400. Ohne diese Ergaenzung wuerde sich die Schriftbreite minimal aendern und den Zeilenumbruch des Lead-Absatzes verschieben (im Regressionstest gegen die AP0.0-Baseline so aufgefallen) -- deshalb hier explizit auf die bisherigen Werte zurueckgesetzt, keine optische Aenderung. */ .auth-card h1{margin:0 0 4px; font-size:21px; font-weight:700; color:var(--accent)} .auth-card p.lead{margin:0 0 18px; color:var(--muted); font-size:14px; font-weight:400} .auth-card label{display:block; font-size:13px; color:var(--muted); margin:12px 0 4px} /* Design-Mischmasch-Fix, vierte Runde (ANORAK-Rueckmeldung 2026-08-19): #c3c9d0/#f7f8fa waren eigenstaendige, nie an eine Variable gebundene Kuehlgrau-Blau-Toene der alten Design-Linie (Eingabefeld-Rahmen, unausgewaehlter Tab-Button) -- auf die Design-v2-Rahmen-/Flaechenfarben umgestellt, analog zu anderen bereits migrierten Formularelementen (siehe input[type=date] weiter unten). */ .auth-card input{width:100%; padding:9px 11px; border:1px solid var(--border-color); border-radius:8px; line-height:normal; background:#fff; color:var(--ink)} /* AP0.3 (Bootstrap-Migrationsplan): Eingabefelder nutzen jetzt Bootstraps .form-control-Klasse (login.html), die App-eigene Regel oben (".auth-card input", Spezifitaet Klasse+Element) ueberschreibt weiterhin alle relevanten Basis-Eigenschaften unveraendert -- inklusive line-height, extra ergaenzt: .form-control setzt line-height:1.5 DIREKT (nicht nur vererbt, siehe vendor/bootstrap/css/bootstrap.min.css), das ".auth-card{line-height:normal}" oben (siehe dortiger Kommentar) deshalb NICHT erfasst -- eine direkt am Element ansetzende Regel schlaegt reine Vererbung unabhaengig von der Spezifitaet der vererbenden Regel. Ohne diese Ergaenzung waeren die Eingabefelder ca. 5px hoeher als in der AP0.0-Baseline gewesen (im Regressionstest so aufgefallen). Zusaetzliche Ueberraschung: ".form-control" ist bereits app-weit belegt -- style-v2.css definiert dafuer einen bewusst anderen "Lines-Look" (transparenter Hintergrund, nur Unterrand, siehe dortiger Kommentar "Abschnitt 4.1") fuer die Fokusbloecke-Inline-Felder. Background/Textfarbe werden von jener Regel mangels eigener Ueberschreibung hier durchgereicht (gleiche Spezifitaet wie Bootstraps eigene .form-control-Regel, aber spaeter geladen) -- deshalb hier explizit auf die bisherigen Werte (weisser Hintergrund, geerbte Standard-Textfarbe --ink) zurueckgesetzt. Bootstraps eigene .form-control:focus-Regel setzt aber hart-codierte Werte (kein --bs-*-Variablen- Redirect moeglich, siehe vendor/bootstrap/css/bootstrap.min.css) fuer einen blauen Fokusring/-rahmen -- ohne diese gezielte Override-Regel wuerde beim Fokussieren kurz Bootstraps Standardblau statt der Taupe-Palette aufblitzen. Bewusst ohne !important: ".auth-card input:focus" hat durch die zusaetzliche Pseudoklasse dieselbe/hoehere Spezifitaet und gewinnt allein durch die Ladereihenfolge (style.css zuletzt), identisches Muster wie der Rest dieser Datei. */ .auth-card input:focus{border-color:var(--primary); outline:0; box-shadow:0 0 0 .25rem var(--secondary)} .auth-card .legacy-btn{width:100%; margin-top:18px; padding:10px} .tabs{display:flex; gap:6px; margin-bottom:6px} .tabs.tabs-mode{margin-top:16px} .upper{text-transform:uppercase} .tabs button{flex:1; padding:8px; border:1px solid var(--border-color); background:var(--background); border-radius:8px; cursor:pointer; font-size:13px} .tabs button[aria-selected=true]{background:var(--accent); border-color:var(--accent); color:#fff} .msg{margin-top:14px; font-size:13px; padding:9px 11px; border-radius:8px; display:none} .msg.err{display:block; background:#fdecec; color:var(--bad)} .msg.ok{display:block; background:#eaf6ef; color:var(--ok)} .switch-hint{margin-top:14px; font-size:12.5px; color:var(--muted); text-align:center} /* ---------------- Werkzeugleiste ---------------- ".legacy-btn"/".legacy-btn.primary" sind eine app-weit geteilte Klasse (auch in Tagesliste-/ Essensplan-Overlay, Kontomenue und Login-Seite verwendet, siehe dortige Vorkommen). Umbenannt von urspruenglich ".btn"/".btn.primary" (AP0.1, Bootstrap-Migrationsplan): Bootstrap 5.3 bringt eine eigene, kanonische ".btn"-Klasse mit anderem Modifier-Schema (".btn-primary" statt ".btn.primary") mit -- bei gleicher Spezifitaet gewinnt die spaeter geladene Bootstrap-Regel, das kollidierte mit dieser eigenstaendigen Klasse hier. Rein mechanische Umbenennung, keine optische/funktionale Aenderung. Die Grundregeln hier nutzen weiterhin --accent/--accent-tint (siehe :root oben) -- seit der zweiten Migrationsrunde (Nutzer-Feedback 2026-08-19) zeigen diese Variablen selbst auf die Design-v2-Palette, die Grundregeln muessen deshalb nicht mehr einzeln umgeschrieben werden. */ /* AP1.1 (Bootstrap-Migrationsplan): ".toolbar" ist jetzt zusaetzlich ein echtes Bootstrap ".navbar" (siehe index.html,