/* lt-formular-ausnahme: Familien-Apps (Cockpit 4), nicht die Website; Freigabe Tobias 17.10.2026 */
/* DigiWorld im Glas-Look (17.10.2026, Wunsch Tobias: „wie app.leuchtturmakademie.de/cockpit/heute“)
   Baut auf /static/glas.css auf (Kopie aus der Leuchtturm-App, dort die Tokens --g-*).
   Diese Datei lenkt die beiden alten Stilfamilien von DigiWorld auf die Glas-Werte:
   1. Tailwind-Seiten (Essensplaner, Unsere Woche, Login): Utility-Klassen wie bg-white, text-gray-500
   2. „hell & warm“-Seiten (Startseite, Medikamente): Tokens --grund, --karte, --text, --leise, --linie
   Einbinden NACH glas.css. Farben teal/navy/gold kommen über tailwind.config als CSS-Variablen (siehe base.html). */

:root {
  /* RGB-Tripel für Tailwind-Farben mit Deckkraft (bg-teal/10 usw.) */
  --dw-accent: 42 96 73;        /* #2a6049 */
  --dw-accent-hell: 126 200 192; /* #7ec8c0 */
  --dw-accent-dunkel: 31 74 56;  /* #1f4a38 */
  --dw-fg: 26 26 46;            /* #1a1a2e */
  --dw-gold: 126 200 192;       /* Gold-Flächen werden Mint */
  --dw-gold-hell: 190 228 223;
  --dw-auf-gold: 26 26 46;
}
:root[data-theme="dark"] { --dw-accent: 126 200 192; --dw-accent-hell: 160 220 212; --dw-accent-dunkel: 90 170 160; --dw-fg: 230 232 238; --dw-gold: 42 96 73; --dw-gold-hell: 52 116 90; --dw-auf-gold: 230 232 238; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dw-accent: 126 200 192; --dw-accent-hell: 160 220 212; --dw-accent-dunkel: 90 170 160; --dw-fg: 230 232 238; --dw-gold: 42 96 73; --dw-gold-hell: 52 116 90; --dw-auf-gold: 230 232 238; }
}

html body { color: var(--g-fg); font-family: var(--g-font); }
html body.bg-gray-50, html body.h-full { background-color: var(--g-bg); }

/* ── 1. Tailwind-Seiten ─────────────────────────────────────────── */

/* Weiße Flächen = Glaskarten */
html body .bg-white {
  background-color: var(--g-glas);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
html body .bg-white.border, html body .bg-white.shadow-sm, html body .bg-white.shadow-lg, html body .bg-white.shadow-xl {
  border-color: var(--g-glas-rand);
  box-shadow: var(--g-schatten);
}
html body .rounded-2xl { border-radius: var(--g-radius-klein); }
html body .rounded-3xl, html body .rounded-t-3xl { border-radius: var(--g-radius); }
html body .rounded-t-3xl { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
html body .bg-white\/10 { background-color: rgba(255,255,255,.14); }

/* Kopfleiste und Menü */
html body header.glass, html body .glass {
  background: color-mix(in srgb, var(--g-bg) 60%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-color: transparent !important;
}
html body #menu-btn { background: var(--g-glas); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-schatten); width: 44px; height: 44px; }
html body #menu-panel .bg-white { background: color-mix(in srgb, var(--g-surface) 82%, transparent); border-radius: var(--g-radius-klein); }

/* Graue Flächen, Linien, Texte */
html body .bg-gray-50  { background-color: color-mix(in srgb, var(--g-surface-2) 70%, transparent); }
html body .bg-gray-100 { background-color: var(--g-surface-2); }
html body .bg-gray-200 { background-color: color-mix(in srgb, var(--g-line) 90%, transparent); }
html body .hover\:bg-gray-50:hover, html body .hover\:bg-gray-100:hover { background-color: var(--g-surface-2); }
html body .hover\:bg-gray-200:hover { background-color: var(--g-line); }
html body .border-gray-100, html body .border-gray-200, html body .border-gray-200\/50, html body .border-linie { border-color: var(--g-line); }
html body .text-gray-300 { color: color-mix(in srgb, var(--g-muted) 70%, transparent); }
html body .text-gray-400, html body .text-gray-500, html body .text-gray-600, html body .text-leise { color: var(--g-muted); }
html body .text-tinte { color: var(--g-fg); }

/* Akzentflächen mit weißer Schrift: Kapsel, ruhig */
html body button.bg-teal, html body a.bg-teal { border-radius: 999px; box-shadow: var(--g-knopf-schatten); }
html body .bg-gradient-to-r.from-teal, html body .bg-gradient-to-br.from-teal { background-image: none; background-color: rgb(var(--dw-accent)); }
:root[data-theme="dark"] body .text-white.bg-teal, :root[data-theme="dark"] body .bg-teal .text-white { color: #0f0f1a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body .bg-teal.text-white, :root:not([data-theme="light"]) body .bg-teal .text-white,
  :root:not([data-theme="light"]) body .bg-red-500.text-white { color: #0f0f1a; }
}

/* Warnflächen im Dunkeln lesbar halten */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body .bg-red-50, :root:not([data-theme="light"]) body .bg-green-50,
  :root:not([data-theme="light"]) body .bg-amber-100, :root:not([data-theme="light"]) body .bg-purple-50,
  :root:not([data-theme="light"]) body .bg-green-100, :root:not([data-theme="light"]) body .bg-red-100 { background-color: var(--g-surface-2); }
  :root:not([data-theme="light"]) body .text-red-500, :root:not([data-theme="light"]) body .text-red-700,
  :root:not([data-theme="light"]) body .text-red-800, :root:not([data-theme="light"]) body .text-red-400 { color: var(--g-rot); }
  :root:not([data-theme="light"]) body .text-green-800, :root:not([data-theme="light"]) body .text-amber-800,
  :root:not([data-theme="light"]) body .text-yellow-700, :root:not([data-theme="light"]) body .text-gray-700 { color: var(--g-fg); }
  :root:not([data-theme="light"]) body .bg-black\/30, :root:not([data-theme="light"]) body .bg-black\/50 { background-color: rgba(0,0,0,.6); }
}

/* Lesbarkeit: winzige Schrift anheben (Handy in der Küche) */
html body .text-\[8px\], html body .text-\[9px\] { font-size: 11px; }
html body .text-\[10px\] { font-size: 11.5px; }

/* Skeleton passend zum Grund */
html body .skeleton { background: linear-gradient(90deg, var(--g-surface-2) 25%, var(--g-line) 50%, var(--g-surface-2) 75%); background-size: 200% 100%; }

/* Bunte Konfetti-/Wackel-Effekte dämpfen, der Glas-Look ist ruhig */
html body .animate-wiggle, html body .group:hover .group-hover\:animate-wiggle { animation: none; }

/* ── 2. „hell & warm“-Seiten (Startseite, Medikamente) ─────────── */
:root {
  --grund: var(--g-bg); --karte: var(--g-glas); --text: var(--g-fg); --leise: var(--g-muted); --linie: var(--g-line);
  --tinte: var(--g-fg);
}
html body .karte {
  background: var(--g-glas); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-schatten);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-radius: var(--g-radius);
}
html body .chip { background: var(--g-glas); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-knopf-schatten); min-height: 36px; display: inline-flex; align-items: center; }
html body .hinweis { background: color-mix(in srgb, var(--g-bernstein) 14%, var(--g-glas)); color: var(--g-fg); border-radius: var(--g-radius-klein); }

/* Kacheln: Glas mit zarter Eigenfarbe statt kräftigem Pastell */
html body .kachel {
  background: var(--g-glas); border: 1px solid var(--g-glas-rand); box-shadow: var(--g-schatten);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-radius: var(--g-radius); color: var(--g-fg); position: relative; overflow: hidden;
}
html body .kachel::before { content: ""; position: absolute; inset: 0; background: var(--k-ton, transparent); opacity: .5; pointer-events: none; }
html body .kachel > * { position: relative; }
html body .kachel .bild { width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--g-surface); box-shadow: var(--g-knopf-schatten); font-size: 26px; }
html body .kachel .name { color: var(--g-fg); }
html body .kachel .text { color: var(--g-muted); opacity: 1; }
html body .k-essen { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(255,178,140,.45), transparent 60%); }
html body .k-woche { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(126,200,192,.55), transparent 60%); }
html body .k-fit { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(140,180,240,.45), transparent 60%); }
html body .k-ernaehrung { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(180,160,230,.45), transparent 60%); }
html body .k-medi { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(240,150,180,.40), transparent 60%); }
html body .k-rueckenwind { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(200,170,255,.45), transparent 60%); }
html body .k-cockpit { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(240,210,120,.45), transparent 60%); }

/* Überschriften wie im Vorbild: kräftig, eng */
html body h1 { letter-spacing: -.02em; }

/* ── 3. Unsere Woche (/familie/) ───────────────────────────────── */
:root { --dw-teal-ton: #dff0ec; --dw-orange: #b4532a; --dw-orange-ton: #fde9dd;
        --dw-chip: rgba(255,255,255,.72); --dw-chip-T: #e3ebf6; --dw-chip-Mi: #efe5ff; --dw-chip-E: #fde9dd; --dw-chip-M: #dff3e6; --dw-chip-todo: #fff1e8; --dw-chip-ueber: #fde2e2; --dw-chip-ueber-t: #7f1d1d; }
:root[data-theme="dark"] { --dw-teal-ton: #20403a; --dw-orange: #f2a27a; --dw-orange-ton: #3a2a24;
        --dw-chip: rgba(255,255,255,.06); --dw-chip-T: #1f2c45; --dw-chip-Mi: #2c2345; --dw-chip-E: #3a2a24; --dw-chip-M: #1e3528; --dw-chip-todo: #3a2e24; --dw-chip-ueber: #4a2020; --dw-chip-ueber-t: #ffb4a8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dw-teal-ton: #20403a; --dw-orange: #f2a27a; --dw-orange-ton: #3a2a24;
        --dw-chip: rgba(255,255,255,.06); --dw-chip-T: #1f2c45; --dw-chip-Mi: #2c2345; --dw-chip-E: #3a2a24; --dw-chip-M: #1e3528; --dw-chip-todo: #3a2e24; --dw-chip-ueber: #4a2020; --dw-chip-ueber-t: #ffb4a8; }
}
html body.bg-grund { background-color: var(--g-bg); }
html body .kal-chip { background: var(--dw-chip); color: var(--g-fg); border-left-color: var(--g-line); }
html body .kal-chip.f-T { background: var(--dw-chip-T); } html body .kal-chip.f-Mi { background: var(--dw-chip-Mi); }
html body .kal-chip.f-E { background: var(--dw-chip-E); } html body .kal-chip.f-M { background: var(--dw-chip-M); }
html body .kal-chip.f-todo { background: var(--dw-chip-todo); }
html body .kal-chip.ueber { background: var(--dw-chip-ueber); color: var(--dw-chip-ueber-t); }
html body .kal-zelle, html body .kal-mini button, html body .filter-chip {
  background: var(--g-glas); border-color: var(--g-glas-rand); box-shadow: var(--g-schatten);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html body .kal-zelle { border-radius: var(--g-radius-klein); }
html body .kal-zelle.vergangen, html body .kal-mini button.vergangen { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html body .kal-zelle.wochenende:not(.vergangen) { background: color-mix(in srgb, var(--g-glas) 80%, var(--g-surface-2)); }
html body .kal-mini button.gewaehlt { border-color: rgb(var(--dw-accent)); }
html body .kal-mini button.heute .nr { background: rgb(var(--dw-accent)); color: var(--g-surface); }
html body .kal-heute-spalte { background: color-mix(in srgb, var(--g-accent-hell) 14%, transparent); }
html body .kal-std { border-top-color: var(--g-line); }
html body .filter-chip { color: var(--g-fg); min-height: 34px; }

/* ── 4. Einzelne bunte Elemente beruhigen ─────────────────────── */
/* Überraschungsgericht: Regenbogen-Knopf und Modal-Kopf als ruhige Akzent-Kapsel */
html body .magic-rainbow-btn { background: rgb(var(--dw-accent)) !important; animation: none !important; border-radius: 999px; box-shadow: var(--g-knopf-schatten); min-height: 44px; }
html body .magic-rainbow-btn .magic-btn-shimmer { display: none; }
html body .bg-gradient-to-r.from-purple-600 { background-image: none; background-color: rgb(var(--dw-accent)); }
html body .from-purple-50 { --tw-gradient-from: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body .magic-rainbow-btn, :root:not([data-theme="light"]) body .bg-gradient-to-r.from-purple-600 { color: #0f0f1a; }
}

/* ── 5. Cockpit 4: Anthrazit + Limette (Wunsch Tobias 17.10.2026) ──────────────
   Immer dunkel, unabhängig vom Systemmodus. Dreifaches :root schlägt die
   Hell/Dunkel-Regeln aus glas.css und den Abschnitten oben. */
:root:root:root {
  --g-bg: #232528; --g-fg: #f3f4ef; --g-muted: #a7abb1; --g-accent: #d9f24a; --g-accent-hell: #e8fa86;
  --g-surface: #2e3034; --g-surface-2: #36393d; --g-line: #43474c;
  --g-rot: #ff8a7a; --g-bernstein: #ffc35c;
  --g-glas: rgba(255,255,255,.055); --g-glas-rand: rgba(255,255,255,.09);
  --g-schatten: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 50px -24px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.25);
  --g-schatten-hoch: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 60px -22px rgba(0,0,0,.75);
  --g-knopf-schatten: 0 8px 22px -10px rgba(217,242,74,.45);
  --g-blob-1: rgba(217,242,74,.10); --g-blob-2: rgba(217,242,74,.05); --g-blob-3: rgba(140,150,160,.10);
  --dw-accent: 217 242 74; --dw-accent-hell: 232 250 134; --dw-accent-dunkel: 190 214 52; --dw-fg: 243 244 239;
  --dw-gold: 217 242 74; --dw-gold-hell: 232 250 134; --dw-auf-gold: 35 37 40;
  --dw-teal-ton: #33381f; --dw-orange: #ffb38a; --dw-orange-ton: #3a2f28;
  --dw-chip: rgba(255,255,255,.06); --dw-chip-T: #24324a; --dw-chip-Mi: #33284a; --dw-chip-E: #3e2d25; --dw-chip-M: #22382a;
  --dw-chip-todo: #3a3326; --dw-chip-ueber: #4a2222; --dw-chip-ueber-t: #ffb4a8;
  color-scheme: dark;
}
/* Auf Limette steht Anthrazit, nie Weiß */
html body .bg-teal.text-white, html body .bg-teal .text-white, html body .text-white.bg-teal,
html body .bg-gradient-to-r.from-teal, html body .bg-gradient-to-br.from-teal,
html body .magic-rainbow-btn, html body .bg-gradient-to-r.from-purple-600,
html body .kal-mini button.heute .nr { color: #232528 !important; }
html body .bg-gradient-to-r.from-teal *, html body .bg-gradient-to-br.from-teal *, html body .magic-rainbow-btn * { color: inherit; }
html body .knopf { color: #232528; }
/* Warn- und Hinweisflächen dunkel */
html body .bg-red-50, html body .bg-green-50, html body .bg-amber-100, html body .bg-purple-50,
html body .bg-green-100, html body .bg-red-100, html body .bg-yellow-50 { background-color: var(--g-surface-2); }
html body .text-red-500, html body .text-red-700, html body .text-red-800, html body .text-red-400 { color: var(--g-rot); }
html body .text-green-800, html body .text-amber-800, html body .text-yellow-700, html body .text-gray-700, html body .text-gray-800, html body .text-gray-900 { color: var(--g-fg); }
html body .bg-black\/30, html body .bg-black\/50 { background-color: rgba(0,0,0,.6); }
html body .bg-white { background-color: var(--g-glas); }
html body #menu-panel .bg-white { background: color-mix(in srgb, var(--g-surface) 92%, transparent); }
/* Kacheln: dunkles Glas mit Limetten-Schimmer statt Pastell */
html body .kachel::before { opacity: .35; }
html body .kachel .bild { background: var(--g-surface-2); box-shadow: none; }
html body .k-woche, html body .k-essen, html body .k-fit, html body .k-ernaehrung { --k-ton: radial-gradient(120% 90% at 100% 0%, rgba(217,242,74,.22), transparent 60%); }
/* Personen-Kürzel bleiben farbig mit weißer Schrift, Überschriften sportlich kräftig */
html body h1 { font-weight: 800; letter-spacing: -.025em; }
html body .label { color: var(--g-accent); }
/* Akzentlinks und aktive Elemente in Limette */
html body .quelle, html body .fahrt { color: var(--g-accent); }
html body a:focus-visible, html body :focus-visible { outline-color: var(--g-accent); }
/* Weiße Schrift auf allen kräftigen Limetten-Flächen (auch bg-teal/90, Verläufe, Hover) → Anthrazit */
html body [class*="bg-teal"]:not([class*="bg-teal/"]):is([class*="text-white"]),
html body [class*="bg-teal/9"][class*="text-white"], html body [class*="bg-teal/8"][class*="text-white"],
html body [class*="bg-teal"]:not([class*="bg-teal/"]) [class*="text-white"],
html body [class*="bg-teal/9"] [class*="text-white"], html body [class*="bg-teal/8"] [class*="text-white"],
html body [class*="from-teal"]:not([class*="from-teal/"]) [class*="text-white"], html body [class*="from-teal"]:not([class*="from-teal/"])[class*="text-white"],
html body .hover\:bg-teal:hover, html body .hover\:bg-teal:hover * { color: #232528 !important; }
/* Unsere Woche: restliche helle Flächen */
html body .bg-white\/60, html body .bg-white\/70 { background-color: var(--g-glas); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--g-schatten); }
html body .bg-\[\#fff1e8\] { background-color: color-mix(in srgb, var(--g-bernstein) 12%, var(--g-surface)); }
html body .border-\[\#fed7aa\], html body .border-\[\#fde2c4\] { border-color: color-mix(in srgb, var(--g-bernstein) 35%, transparent); }
html body .bg-tinte { background-color: var(--g-accent); }
html body .bg-tinte.text-white, html body .bg-tinte .text-white { color: #232528 !important; }
html body [class*="shadow-[0_1px_0_#efe6d8]"] { --tw-shadow: none; }
/* Personenfarben als Schrift auf Anthrazit aufhellen (Flächen mit weißer Schrift bleiben dunkel) */
html body .text-\[\#1d4f91\] { color: #8fb4f0; }
html body .text-\[\#8a3ffc\] { color: #c4a3ff; }
html body .text-\[\#c2410c\] { color: #ffa77a; }
html body .text-\[\#15803d\] { color: #7fd8a0; }
html body .text-\[\#17604a\] { color: var(--g-accent); }

/* ── 6. Darstellungsprüfung 17.10.2026 ─────────────────────────────── */
/* Farbige Tailwind-Texte auf Anthrazit lesbar (≥ 4,5:1) */
html body .text-green-500, html body .text-green-600, html body .text-green-700, html body .text-emerald-600, html body .text-teal-500, html body .text-teal-700 { color: #7fd8a0; }
html body .text-blue-400, html body .text-blue-500, html body .text-blue-700 { color: #8fb4f0; }
html body .text-purple-400, html body .text-purple-500, html body .text-purple-600 { color: #c4a3ff; }
html body .text-orange-400, html body .text-orange-500, html body .text-orange-700 { color: #ffb38a; }
html body .text-yellow-500, html body .text-amber-900 { color: var(--g-bernstein); }
/* Alle Eingabefelder dunkel, auch ohne type-Attribut (Medikamente) */
html body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]),
html body textarea, html body select {
  background-color: color-mix(in srgb, var(--g-surface) 85%, transparent); color: var(--g-fg); border-color: var(--g-line);
}
html body ::placeholder { color: var(--g-muted); opacity: 1; }
/* Medikamente: Pink-Akzent → Limette */
:root:root:root { --akzent: var(--g-accent); --hell: color-mix(in srgb, var(--g-accent) 16%, var(--g-surface)); --gruen: var(--g-accent); }
html body .k-zweit, html body .feld button { color: var(--g-accent); }
html body .schritte span { color: var(--g-fg); }
html body .schritte span.an, html body .bm { color: #232528; }
html body .ok { background: color-mix(in srgb, var(--g-accent) 14%, var(--g-surface)); color: var(--g-fg); }
html body .fehler { background: color-mix(in srgb, var(--g-rot) 16%, var(--g-surface)); color: var(--g-fg); }
/* Kalender: Heute-Spalte zart, Zeitachse lesbar */
html body .kal-heute-spalte { background: rgba(217,242,74,.06); }
html body .kal-zeitachse span { font-size: 11.5px; }

/* ── 7. Icon-Sprache und Farbe nur für Bedeutung (17.10.2026) ───────────────
   Limette = Aktion/aktiv/Akzent, Rot = Warnung, Personenfarben nur als Kennung.
   Kacheln ohne Farbschimmer; Icons einfarbig (icons.css/icons.js). */
html body .kachel::before { display: none; }
html body .kachel .bild { background: transparent; border: 1.5px solid var(--g-line); color: var(--g-accent); font-size: 24px; }
html body .kachel:hover .bild, html body .kachel:focus-visible .bild { border-color: var(--g-accent); }
html body .kachel .name { margin-top: 14px; }
html body .lt-ic { stroke-width: 1.6; }
html body .text-5xl .lt-ic, html body .text-6xl .lt-ic, html body .text-4xl .lt-ic { stroke-width: 1.25; }
html body .chip .lt-ic, html body .label .lt-ic { color: var(--g-accent); }