/* ROTHEN DB — Dunkelmodus des Wand-Tablets (/tablet). Echtes dunkles Farbschema statt Farbumkehr. Aktiv über die Klasse „dunkel“ auf .tb-wisch (die drei Wischseiten) und .tb-ueber (Einstellungen über allem), gesetzt von TabletAnsicht.razor. Muss als LETZTES Stylesheet geladen werden (index.html). Palette (Text ≥ 4.5:1 auf Karte): Seite #0E1317 · Karte #182027 · Fläche in Karten #212A32 · stärkere Fläche/Knopf #29333C · Linie #2C3640 · Rand #3A4651 Text #E9EEF2 · gedämpft #9DAAB6 · dezent #6B7885 Akzent #C9A0DC (Text, Rahmen, Ringe) · Akzent-Fläche #3A2647 mit Text #EBD8F5 · gefüllt #8E5BA6 mit Weiss Warnung #F2B45A · Fehler #FF8A80 auf #3D2224 · Grün #6FD39A · Blau #8DB2FF · Hue-Orange #E8962E auf #3A2A12 · Jetzt-Linie #FF6B5E Personenfarben: Chips (Kuerzel.Stil) behalten ihren Pastell-Grund mit dunkler Schrift (gut lesbar auf Dunkel), nur der Auswahlring wird hell. Termin-Blöcke/Balken im Kalender bekommen aus TabletKalender.razor zusätzlich --bgd (dunkel getönter Grund), --fgd (helle Personenfarbe) und --std (heller Farbstreifen); im Dashboard werden die Inline-Farben der Termine, Balken und Wetter-Icons per Attributselektor auf die dunklen Varianten gesetzt. */ /* ───────────── Grundlagen: Variablen, Seite, Bühne ───────────── */ :is(.tb-wisch, .tb-ueber).dunkel { --rothn-bg: #0E1317; --rothn-surface: #182027; --rothn-border: #2C3640; --rothn-text: #E9EEF2; --rothn-text-muted: #9DAAB6; --rothn-primary: #C9A0DC; --rothn-primary-soft: #3A2647; } :is(.tb-wisch, .tb-ueber).dunkel .fd-stage { --fd-acc: #C9A0DC; --fd-acc-soft: #3A2647; --fd-line: #2C3640; --fd-muted: #9DAAB6; --dk-seite: #0E1317; --dk-karte: #182027; --dk-flaeche: #212A32; --dk-flaeche2: #29333C; --dk-tief: #121A20; --dk-rand: #3A4651; --dk-text: #E9EEF2; --dk-dezent: #6B7885; --dk-acc-text: #EBD8F5; --dk-voll: #8E5BA6; --dk-warn: #F2B45A; --dk-fehler: #FF8A80; --dk-fehler-bg: #3D2224; --dk-fehler-text: #FFB4AB; --dk-gruen: #6FD39A; --dk-gruen-bg: #173A26; --dk-gruen-text: #8FE0B0; --dk-blau: #8DB2FF; --dk-blau-bg: #1E2A47; --dk-hue: #E8962E; --dk-hue-bg: #3A2A12; --dk-hue-hell: #5A3F17; --dk-hue-rand: #8A5A1C; --dk-hue-text: #F5C98A; --dk-ring: 0 0 0 1px rgba(255, 255, 255, .06); } .tb-wisch.dunkel { background: #0E1317; } .tb-wisch.dunkel .fd-stage { background: var(--dk-seite); } :is(.tb-wisch, .tb-ueber).dunkel .fd { color: var(--dk-text); } /* Sanfter Wechsel hell ↔ dunkel (nur Farben; bestehende Übergänge bleiben erhalten) */ .tb-wisch, .tb-wisch .fd-stage { transition: background-color .4s; } .tb-wisch .fd { transition: filter .4s, color .4s; } .tb-wisch :is(.fd-karte, .fd-spalte, .fd-alle, .tk-flaeche, .tk-ltag, .fd-zurueck, .hm-zahnrad, .fd-pfeil) { transition: background-color .4s, color .4s; } .tb-wisch .fd-kind { transition: opacity .2s, filter .2s, background-color .4s; } /* Formularfelder, Regler, Datums-/Zeitwähler dunkel zeichnen */ :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-eingabe, .hm-ed-select, .hm-sp-suche, .tk-suche input, input[type=range]) { color-scheme: dark; } /* ───────────── Familien-Dashboard (familien-dashboard.css) ───────────── */ :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-karte, .fd-spalte, .fd-kind, .fd-wetter, .fd-alle) { background: var(--dk-karte); box-shadow: var(--dk-ring); } :is(.tb-wisch, .tb-ueber).dunkel .fd-zurueck { background: var(--dk-karte); box-shadow: var(--dk-ring); } :is(.tb-wisch, .tb-ueber).dunkel .fd-pfeil { background: var(--dk-karte); border-color: var(--dk-rand); } /* Filter: Arten, „Alle“, Personen */ :is(.tb-wisch, .tb-ueber).dunkel .fd-art { background: var(--dk-karte); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); } :is(.tb-wisch, .tb-ueber).dunkel .fd-art.an { border-color: var(--dk-text); background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-art.termine, :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-art.aufgaben { color: var(--dk-blau); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-art.pruefungen { color: var(--dk-fehler); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-art.einkauf { color: var(--dk-gruen); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-art.ideen { color: var(--dk-warn); } :is(.tb-wisch, .tb-ueber).dunkel .fd-alle.an { background: var(--dk-voll); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .fd-person.an { border-color: var(--dk-text); } /* Woche */ :is(.tb-wisch, .tb-ueber).dunkel .fd-spalte.heute { box-shadow: 0 0 0 3px var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .fd-spalte.heute .fd-spaltenkopf { background: var(--dk-voll); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .fd-spaltenkopf .kw { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd-spalte.heute .fd-spaltenkopf .kw { background: rgba(255, 255, 255, .2); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin.pruef { background: #3D3118; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin .pl { color: var(--dk-warn); } /* Termin-Hintergrund aus TerminFarbe (Pastell der ersten Person) → dunkel getönt, Schrift hell */ :is(.tb-wisch, .tb-ueber).dunkel .fd-termin[style*="background:#EAE8FB" i] { background: #30294F !important; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin[style*="background:#E6EEFB" i] { background: #1F3050 !important; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin[style*="background:#FFF1DC" i] { background: #3D2F17 !important; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin[style*="background:#E3F1EC" i] { background: #173B38 !important; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin[style*="background:#FDE8E4" i] { background: #432427 !important; } :is(.tb-wisch, .tb-ueber).dunkel .fd-termin[style*="background:#EDF0F3" i] { background: #2B353F !important; } /* Karten: Aufgaben, Einkauf, Ideen */ :is(.tb-wisch, .tb-ueber).dunkel .fd-k-ico.aufgaben { background: var(--dk-blau-bg); color: var(--dk-blau); } :is(.tb-wisch, .tb-ueber).dunkel .fd-k-ico.einkauf { background: var(--dk-gruen-bg); color: var(--dk-gruen); } :is(.tb-wisch, .tb-ueber).dunkel .fd-k-ico.ideen { background: var(--dk-hue-bg); color: var(--dk-warn); } :is(.tb-wisch, .tb-ueber).dunkel .fd-plus { background: var(--dk-voll); } :is(.tb-wisch, .tb-ueber).dunkel .fd-daumen.plus { color: var(--dk-gruen); } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-gruppe .anz { background: var(--dk-blau-bg); color: var(--dk-blau); } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-check { border-color: #5A6773; background: transparent; } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-check:hover { border-color: var(--dk-gruen); background: var(--dk-gruen-bg); } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-check.an { background: #15803D; border-color: #15803D; color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-check.wartet { background: var(--dk-hue-bg); border-color: var(--dk-hue); } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-punkt { background: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-ek-anz { background: var(--dk-gruen-bg); color: var(--dk-gruen-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-haken.an { border-color: var(--dk-gruen); } /* Fälligkeit (FaelligFarbe) und rote Werte auf den Kinderkarten (Inline-Farbe) */ :is(.tb-wisch, .tb-ueber).dunkel :is(.meta, .zeit, b)[style*="color:#15202B" i] { color: var(--dk-text) !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.meta, .zeit, b)[style*="color:#B42318" i] { color: var(--dk-fehler) !important; } /* Ausblick (21 Tage) */ :is(.tb-wisch, .tb-ueber).dunkel .fd-ausblick-kopf h2 { color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-g-tag.we { background: #1C252D; } :is(.tb-wisch, .tb-ueber).dunkel .fd-g-tag.heute { background: var(--fd-acc-soft); box-shadow: inset 0 0 0 2px var(--fd-acc); } /* Balken/Legende/Fortschritt in Personen- bzw. Signalfarben (Inline) → hellere Varianten */ :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-g-balken > span, .fd-ausblick-kopf .q, .bar > span)[style*="background:#5B21B6" i] { background: #B69CF5 !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-g-balken > span, .fd-ausblick-kopf .q, .bar > span)[style*="background:#1D4ED8" i] { background: #7EA4FA !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-g-balken > span, .fd-ausblick-kopf .q, .bar > span)[style*="background:#B45309" i] { background: #F2B45A !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-g-balken > span, .fd-ausblick-kopf .q, .bar > span)[style*="background:#0F766E" i] { background: #3FBFAE !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-g-balken > span, .fd-ausblick-kopf .q, .bar > span)[style*="background:#B42318" i] { background: #FF8A80 !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-g-balken > span, .fd-ausblick-kopf .q, .bar > span)[style*="background:#3A4753" i] { background: #AEB9C4 !important; } /* Kinderkarten */ :is(.tb-wisch, .tb-ueber).dunkel .fd-kind .werte b.warn { color: var(--dk-warn); } :is(.tb-wisch, .tb-ueber).dunkel .fd-kind .bar { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd-kind .werte small.saldo.neg, :is(.tb-wisch, .tb-ueber).dunkel .fd-saldo b.neg { color: var(--dk-fehler); } :is(.tb-wisch, .tb-ueber).dunkel .fd-wert-klick:active { background: var(--dk-flaeche); } /* Fuss */ :is(.tb-wisch, .tb-ueber).dunkel .fd-aktualisieren { background: var(--dk-karte); } :is(.tb-wisch, .tb-ueber).dunkel .fd-fuss-hinweis { background: #3D3118; color: var(--dk-hue-text); } /* Wetterkarte und Wetter-Icons (Inline-Farbe aus WetterHilfe.Farbe) */ :is(.tb-wisch, .tb-ueber).dunkel .fd-wetter.fd-wetter-unten:active { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel :is(.ico, .i, .fd-wetter-jetzt, .fd-wetter-tag > span)[style*="color:#1D4ED8" i] { color: #8DB2FF !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.ico, .i, .fd-wetter-jetzt, .fd-wetter-tag > span)[style*="color:#5B21B6" i] { color: #B69CF5 !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.ico, .i, .fd-wetter-jetzt, .fd-wetter-tag > span)[style*="color:#0369A1" i] { color: #6CC4F0 !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.ico, .i, .fd-wetter-jetzt, .fd-wetter-tag > span)[style*="color:#5B6875" i] { color: #A8B4C0 !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.ico, .i, .fd-wetter-jetzt, .fd-wetter-tag > span)[style*="color:#475569" i] { color: #A8B4C0 !important; } :is(.tb-wisch, .tb-ueber).dunkel :is(.ico, .i, .fd-wetter-jetzt, .fd-wetter-tag > span)[style*="color:#D97706" i] { color: #F0A23A !important; } /* Dialoge und Detail-Fenster */ :is(.tb-wisch, .tb-ueber).dunkel .fd-dialog-hg { background: rgba(0, 0, 0, .62); } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-dialog, .fd-detail, .fd-pin) { background: var(--dk-karte); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .07); } :is(.tb-wisch, .tb-ueber).dunkel .fd-x { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd-dz.pruef { background: #3D3118; } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-dk-wert, .fd-abschnitt-kopf, .fd-saldo) { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd-dialog-fehler { background: var(--dk-fehler-bg); color: var(--dk-fehler-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-ok { background: var(--dk-gruen-bg); color: var(--dk-gruen-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-achtung-punkt.rot { background: var(--dk-fehler-bg); color: var(--dk-fehler-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-achtung-punkt.orange { background: var(--dk-hue-bg); color: var(--dk-hue-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-achtung-punkt.neutral { background: var(--dk-flaeche2); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-achtung-punkt.blau { background: var(--dk-blau-bg); color: #A9C4FF; } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-achtung-punkt.gut { background: var(--dk-gruen-bg); color: var(--dk-gruen-text); } /* Reiter, Optionen, Personen-Auswahl, Felder, Knöpfe */ :is(.tb-wisch, .tb-ueber).dunkel .fd-reiter { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-reiter button.an { background: #34404B; color: var(--dk-acc-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); } :is(.tb-wisch, .tb-ueber).dunkel .fd-opt { border-color: var(--dk-rand); background: var(--dk-flaeche); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-opt.an { border-color: var(--fd-acc); background: var(--fd-acc-soft); color: var(--dk-acc-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-wer { border-color: var(--dk-rand); background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd-wer.an { border-color: var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .fd-eingabe { border-color: var(--dk-rand); background: var(--dk-tief); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-eingabe::placeholder { color: #7D8A97; } :is(.tb-wisch, .tb-ueber).dunkel .fd-stepper button { border-color: var(--dk-rand); background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-knopf { border-color: #2D5A3D; background: var(--dk-gruen-bg); color: var(--dk-gruen-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-knopf.drauf { border-color: #2D5A3D; background: var(--dk-karte); color: var(--dk-gruen-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-btn { background: var(--dk-flaeche2); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-btn.primaer { background: var(--dk-voll); color: #fff; } /* Kinder-PIN */ :is(.tb-wisch, .tb-ueber).dunkel .fd-sitzung { background: #29333C; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); } :is(.tb-wisch, .tb-ueber).dunkel .fd-sitzung .fd-btn { background: #E9EEF2; color: #15202B; } :is(.tb-wisch, .tb-ueber).dunkel .fd-pin-punkte span { border-color: #5A6773; } :is(.tb-wisch, .tb-ueber).dunkel .fd-pin-punkte span.voll { background: var(--fd-acc); border-color: var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-pin-tasten button { border-color: var(--dk-rand); background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-pin-tasten button.ok { background: var(--dk-voll); border-color: var(--dk-voll); color: #fff; } /* Wetter-Details (WetterDetails.razor) */ :is(.tb-wisch, .tb-ueber).dunkel .fd-wd-kopf { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd-wd-kopf .sonne b { color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd-wd-h.nacht { background: #1C252D; } :is(.tb-wisch, .tb-ueber).dunkel .fd-wd-h.neu { box-shadow: inset 3px 0 0 #4A5662; } :is(.tb-wisch, .tb-ueber).dunkel .fd-wd-h.jetzt { background: var(--fd-acc-soft); box-shadow: inset 0 0 0 2px var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel :is(.fd-wd-h, .fd-wd-tag) .r { color: var(--dk-blau); } :is(.tb-wisch, .tb-ueber).dunkel .fd-wd-h .bar { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-wd-tag { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .fd-wd-tag.an { background: var(--fd-acc-soft); box-shadow: inset 0 0 0 2px var(--fd-acc); } /* ───────────── Kalender (tablet.css, .tk-*) ───────────── */ :is(.tb-wisch, .tb-ueber).dunkel .tk-suche { background: var(--dk-karte); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); } :is(.tb-wisch, .tb-ueber).dunkel :is(.tk-suche:focus-within, .tk-suche.an) { box-shadow: 0 0 0 3px var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .tk-suche input { color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .tk-suche input::placeholder { color: #7D8A97; } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-suche-x { background: var(--dk-flaeche2); color: var(--dk-text); } /* „Heute“ (violett gefüllt, wenn nicht beim aktuellen Zeitraum) und „Ganzer Tag“ */ :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-knopf { border-color: var(--dk-rand); background: var(--dk-karte); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-knopf.hervor { border-color: var(--dk-voll); background: var(--dk-voll); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-knopf.an { border-color: var(--fd-acc); background: var(--fd-acc-soft); color: var(--dk-acc-text); } :is(.tb-wisch, .tb-ueber).dunkel .tk-suchinfo { color: var(--dk-acc-text); } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-link { background: var(--dk-karte); color: var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .tk-fehler { background: var(--dk-fehler-bg); color: var(--dk-fehler-text); } /* Fläche, Wetter je Tag */ :is(.tb-wisch, .tb-ueber).dunkel .tk-flaeche { background: var(--dk-karte); box-shadow: var(--dk-ring); } :is(.tb-wisch, .tb-ueber).dunkel .tk-wetter, :is(.tb-wisch, .tb-ueber).dunkel .tk button.tk-wetter.knopf { color: var(--dk-text); } /* Woche: Kopf („Heute“ violett gefüllt), Ganztags-Zeile, Raster */ :is(.tb-wisch, .tb-ueber).dunkel .tk-wtag.we { background: #1C252D; } :is(.tb-wisch, .tb-ueber).dunkel .tk-wtag.heute { background: var(--dk-voll); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .tk-wtag.heute .tk-wdatum .d { color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .tk-wtag.heute .tk-wetter, :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-wtag.heute button.tk-wetter.knopf { background: var(--dk-karte); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .tk-gt-hg.we { background: #1B232A; } :is(.tb-wisch, .tb-ueber).dunkel .tk-gt-hg.heute { background: rgba(201, 160, 220, .07); } :is(.tb-wisch, .tb-ueber).dunkel .tk-spalte { background-image: linear-gradient(to bottom, var(--fd-line) 1px, transparent 1px), linear-gradient(to bottom, #222B33 1px, transparent 1px); } :is(.tb-wisch, .tb-ueber).dunkel .tk-spalte.we { background-color: #1B232A; } :is(.tb-wisch, .tb-ueber).dunkel .tk-spalte.heute { background-color: rgba(201, 160, 220, .05); } :is(.tb-wisch, .tb-ueber).dunkel .tk-jetzt, :is(.tb-wisch, .tb-ueber).dunkel .tk-jetzt::before { background: #FF6B5E; } /* Termin-Blöcke, Ganztags-/Mehrtages-Balken, Monats-Termine: dunkel getönter Grund (--bgd), heller Personen-Streifen (--std), helle Personenfarbe für Uhrzeit/Akzent (--fgd → --fg), Titel hell. Variablen kommen aus FarbStil (TabletKalender.razor). */ :is(.tb-wisch, .tb-ueber).dunkel .tk :is(.tk-block, .tk-balken, .tk-mevt) { background: var(--std, none) 0 0 / 5px 100% no-repeat, var(--bgd, #2B353F) !important; --fg: var(--fgd, #C9D2DA) !important; color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-block { box-shadow: 0 0 0 1.5px var(--dk-karte); } :is(.tb-wisch, .tb-ueber).dunkel .tk-block .tk-b-ort, :is(.tb-wisch, .tb-ueber).dunkel .tk-balken .tk-bt small { color: #B4C0CB; } :is(.tb-wisch, .tb-ueber).dunkel .tk-balken .tk-pr { color: var(--dk-warn); } /* Monat */ :is(.tb-wisch, .tb-ueber).dunkel .tk-mkopf .tk-mkw-kopf { color: var(--dk-dezent); } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-mkw { background: #1C252D; } :is(.tb-wisch, .tb-ueber).dunkel .tk-mzelle.we { background: #1C252D; } :is(.tb-wisch, .tb-ueber).dunkel .tk-mzelle.fremd { background: #141B20; } :is(.tb-wisch, .tb-ueber).dunkel .tk-mzelle.heute { background: var(--fd-acc-soft); box-shadow: inset 0 0 0 2px var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .tk-mzelle.fremd + .tk-mnum-zeile .tk-mnum { color: var(--dk-dezent); } :is(.tb-wisch, .tb-ueber).dunkel .tk-mzelle.heute + .tk-mnum-zeile .tk-mnum { background: var(--dk-voll); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .tk-mweitere { color: var(--dk-acc-text); } /* Liste */ :is(.tb-wisch, .tb-ueber).dunkel .tk-ltag { background: var(--dk-karte); box-shadow: var(--dk-ring); } :is(.tb-wisch, .tb-ueber).dunkel .tk-ltag.heute { box-shadow: 0 0 0 3px var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel .tk .tk-lz:active { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .tk-lz-strich[style*="--std"] { background: var(--std) !important; } :is(.tb-wisch, .tb-ueber).dunkel .tk-lz .zeit.pruef b { color: var(--dk-warn); } /* ───────────── Links: Sonos & Hue (tablet-heim.css, .hm-*) ───────────── */ :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-zahnrad { background: var(--dk-karte); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } :is(.tb-wisch, .tb-ueber).dunkel .fd-k-ico.licht { background: var(--dk-hue-bg); color: var(--dk-hue); } :is(.tb-wisch, .tb-ueber).dunkel .hm-fehler { background: var(--dk-fehler-bg); color: var(--dk-fehler-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-btn { background: var(--dk-flaeche2); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-primaer { background: var(--dk-voll); color: #fff; } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-chip { background: var(--dk-flaeche); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-chip.an { border-color: var(--fd-acc); background: var(--fd-acc-soft); color: var(--dk-acc-text); } :is(.tb-wisch, .tb-ueber).dunkel .hm-spielt { background: var(--dk-gruen); box-shadow: 0 0 0 4px rgba(111, 211, 154, .2); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-rund { background: var(--dk-flaeche2); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-rund.hm-gross { background: var(--dk-voll); color: #fff; } /* Sonos */ :is(.tb-wisch, .tb-ueber).dunkel :is(.hm-jetzt, .hm-wk, .hm-ed-schritt) { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-fav { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .hm-wk.an { background: var(--fd-acc-soft); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-wk-loeschen { background: var(--dk-fehler-bg); color: var(--dk-fehler); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-sp-suche { border-color: var(--dk-rand); background: var(--dk-tief); color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-sp-suche::placeholder { color: #7D8A97; } :is(.tb-wisch, .tb-ueber).dunkel .hm-gesperrt { color: var(--dk-fehler); } /* Hue: Räume, Schalter, Sensoren */ :is(.tb-wisch, .tb-ueber).dunkel .hm-raum { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .hm-raum.gewaehlt { border-color: var(--fd-acc); } :is(.tb-wisch, .tb-ueber).dunkel :is(.hm-raum, .hm-fein-hell, .hm-ed-hell) input[type=range] { accent-color: var(--dk-hue); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-schalter { background: var(--dk-rand); } :is(.tb-wisch, .tb-ueber).dunkel .hm-schalter span { background: #E9EEF2; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-schalter.an { background: var(--dk-hue); } :is(.tb-wisch, .tb-ueber).dunkel .hm-sensor { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .hm-sensor b { color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .hm-sensor.bewegung { background: var(--fd-acc-soft); color: var(--dk-acc-text); } /* Lichtstimmungen und Kacheln als Helligkeitsregler (Füllung = --hell) */ :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-stimmung { background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .hm-st-icon { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-stimmung.an { border-color: var(--dk-hue-rand); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-stimmung.an, :is(.tb-wisch, .tb-ueber).dunkel .hm-raum.an { background: linear-gradient(90deg, var(--dk-hue-hell) var(--hell, 0%), var(--dk-hue-bg) var(--hell, 0%)); } :is(.tb-wisch, .tb-ueber).dunkel :is(.hm-stimmung, .hm-raum).zieht { background: linear-gradient(90deg, #8A5A1C var(--hell, 0%), var(--dk-hue-bg) var(--hell, 0%)) !important; border-color: var(--dk-hue); } :is(.tb-wisch, .tb-ueber).dunkel :is(.hm-stimmung, .hm-raum).zieht::after { color: var(--dk-hue-text); } :is(.tb-wisch, .tb-ueber).dunkel .hm-stimmung.an .hm-st-icon { background: var(--dk-hue); color: #241604; } :is(.tb-wisch, .tb-ueber).dunkel .hm-stimmung.an .hm-st-info { color: var(--dk-hue-text); } :is(.tb-wisch, .tb-ueber).dunkel .hm-st-aus .hm-st-icon { background: #2A3440; color: #B8C3CE; } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-sperre.an { border-color: var(--dk-fehler); background: var(--dk-fehler-bg); color: var(--dk-fehler-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-k-knopf { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-alles-aus { background: var(--dk-rand); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-kinder-wecken { border-color: var(--dk-hue-rand); background: var(--dk-hue-bg); color: var(--dk-hue-text); } /* Feinregler, Stimmungs-Editor, Wecker */ :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-ed-name { border-color: var(--dk-rand); background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-ed-mini { background: var(--dk-flaeche2); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-ed-mini.rot { background: var(--dk-fehler-bg); color: var(--dk-fehler); } :is(.tb-wisch, .tb-ueber).dunkel .hm-ed-select { border-color: var(--dk-rand); background: var(--dk-tief); color: var(--dk-text); } /* Einstellungen: „Weitere“-Knopf und kompakte Auswahl (.hm-segment) */ :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-erweitert-knopf { border-color: var(--dk-rand); background: var(--dk-flaeche); color: var(--fd-muted); } :is(.tb-wisch, .tb-ueber).dunkel .hm-segment { border-color: var(--dk-rand); background: var(--dk-flaeche); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-segment .fd-opt { border-left-color: var(--dk-rand); background: transparent; color: var(--dk-text); } :is(.tb-wisch, .tb-ueber).dunkel .fd .hm-segment .fd-opt.an { background: var(--dk-voll); color: #fff; }