/* =====================================================================
   Helle Ansicht. Greift nur bei <html data-ansicht="hell"> und überschreibt
   die Farb-Token aus portal.css; wo dort feste Farben stehen, folgen unten
   gezielte Ausnahmen. Die Wetterkarte bleibt bewusst dunkel.
   Außerdem: der Umschalter in der Kopfzeile (für beide Ansichten).
   ===================================================================== */

:root[data-ansicht="hell"]{
  color-scheme:light;
  --b3:#1F6299; --b4:#2069A0;
  --acc2:#C4552A; --ok2:#2D8660; --warn:#9C6F12;
  --bg:#EEF2F7; --bg2:#E6ECF3; --card:#FFFFFF; --card-h:#F3F7FB;
  --bdr:rgba(27,90,138,.16); --bdr2:rgba(27,90,138,.26); --bdr3:rgba(27,90,138,.42);
  --w:#0C1E31; --t1:#1C2D40; --t2:#4A5F78; --t3:#677D96;
}
:root[data-ansicht="dunkel"]{color-scheme:dark}

/* Schrift auf farbigen Flächen bleibt weiß */
[data-ansicht="hell"] .knopf-1,
[data-ansicht="hell"] .knopf-acc,
[data-ansicht="hell"] .pfad-zurueck,
[data-ansicht="hell"] .fw-sprung a[aria-current],
[data-ansicht="hell"] .zw-schritt{color:#fff}

/* Kopfzeile, Karten, Tabellen */
[data-ansicht="hell"] .kopf{box-shadow:0 1px 0 rgba(12,30,49,.04)}
[data-ansicht="hell"] .marke-tx span{color:var(--t2)}
[data-ansicht="hell"] .karte{box-shadow:0 1px 3px rgba(12,30,49,.06)}
[data-ansicht="hell"] .karte-still{background:rgba(27,90,138,.04)}
[data-ansicht="hell"] table.liste thead th,
[data-ansicht="hell"] table.liste th{background:var(--bg2)}
[data-ansicht="hell"] .feld input,
[data-ansicht="hell"] .feld select,
[data-ansicht="hell"] .feld textarea{background:#fff}
[data-ansicht="hell"] .torkarte{box-shadow:0 18px 50px rgba(12,30,49,.12)}

/* Warn- und Fehlerfarben mit genug Kontrast auf hellem Grund */
[data-ansicht="hell"] .knopf-gefahr,
[data-ansicht="hell"] .feld .feldfehler,
[data-ansicht="hell"] .meldung-fehler,
[data-ansicht="hell"] .zw-fehler,
[data-ansicht="hell"] .zw-formfehler{color:#B0412A}
[data-ansicht="hell"] .meldung-fehler svg{stroke:#B0412A}
[data-ansicht="hell"] .knopf-gefahr{border-color:rgba(176,65,42,.4)}

/* Werkzeuge */
[data-ansicht="hell"] #zw,
[data-ansicht="hell"] #zw-dialog,
[data-ansicht="hell"] #zw .zw-text{color-scheme:light}
[data-ansicht="hell"] #zw-dialog{box-shadow:0 20px 60px rgba(12,30,49,.25)}
[data-ansicht="hell"] #zw-dialog::backdrop{background:rgba(12,30,49,.35)}
[data-ansicht="hell"] #zw-suche{background:#fff}
[data-ansicht="hell"] .pfad a{border-bottom-color:rgba(31,98,153,.35)}

/* ------------------------------------------------------------------ */
/* Umschalter hell/dunkel                                              */
/* ------------------------------------------------------------------ */
.ans-form{display:inline-flex}
.ans-schalter{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--bdr2);color:var(--t2);transition:.2s;
}
.ans-schalter:hover{border-color:var(--b5);color:var(--w)}
.ans-schalter svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ans-schalter .ans-sonne circle{fill:none}
/* Gezeigt wird das Ziel: im Dunkeln die Sonne, im Hellen der Mond */
.ans-schalter .ans-mond{display:none}
[data-ansicht="hell"] .ans-schalter .ans-sonne{display:none}
[data-ansicht="hell"] .ans-schalter .ans-mond{display:block}
.kopf-konto .ans-form{margin-right:4px}
.torfuss .ans-form{vertical-align:middle;margin-right:10px}
.torfuss .ans-schalter{width:28px;height:28px}
.torfuss .ans-schalter svg{width:14px;height:14px}

/* Profil: Geräteliste */
ul.geraete{list-style:none;margin:0 0 10px}
ul.geraete li{padding:8px 0;border-bottom:1px solid var(--bdr)}
ul.geraete li:last-child{border-bottom:0}

/* ------------------------------------------------------------------ */
/* Wetterkarte: Bedienleiste und Diagramme hell, die Karte selbst bleibt */
/* ------------------------------------------------------------------ */
[data-ansicht="hell"] #jb007{color-scheme:light;background:#fff;color:var(--t1);border-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 #leiste{background:var(--bg);border-top-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 input,
[data-ansicht="hell"] #jb007 button,
[data-ansicht="hell"] #jb007 select{background:#fff;color:var(--t1);border-color:var(--bdr3)}
[data-ansicht="hell"] #jb007 button:hover{background:var(--card-h)}
[data-ansicht="hell"] #jb007 #messen.an{background:#ffd54a;color:#111;border-color:#e0b520}
[data-ansicht="hell"] #jb007 .klein{color:var(--t3)}
[data-ansicht="hell"] #jb007 #status{color:#c62828}
[data-ansicht="hell"] #jb007 #hinweis{color:#b4471f}
[data-ansicht="hell"] #jb007 label{color:var(--t2)}
[data-ansicht="hell"] #jb007 #klima{color:#1F6299}
[data-ansicht="hell"] #jb007 #rasterInfo{color:var(--t2)}
[data-ansicht="hell"] #jb007 #rasterInfo b.warn{color:#c62828}
[data-ansicht="hell"] #jb007 h4.leiste-titel{color:var(--w);border-top-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 h3.tag-trenner{color:#9a6400;border-top-color:var(--bdr3)}
[data-ansicht="hell"] #jb007 #jahr,[data-ansicht="hell"] #jb007 #temp,[data-ansicht="hell"] #jb007 #wind,
[data-ansicht="hell"] #jb007 #regen,[data-ansicht="hell"] #jb007 #schnee,[data-ansicht="hell"] #jb007 #sonne,[data-ansicht="hell"] #jb007 #tempTag,
[data-ansicht="hell"] #jb007 #windTag,[data-ansicht="hell"] #jb007 #regenTag,
[data-ansicht="hell"] #jb007 #sonneTag{background:#fff;border-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 #tagPopup,
[data-ansicht="hell"] #jb007 .vorschlaege,
[data-ansicht="hell"] #jb007 #analyseFenster{background:#fff;color:var(--t1);border-color:var(--bdr3);box-shadow:0 8px 28px rgba(12,30,49,.18)}
[data-ansicht="hell"] #jb007 #tagPopup h5,
[data-ansicht="hell"] #jb007 .analyse-kopf{color:#9a6400}
[data-ansicht="hell"] #jb007 #tagPopup .z{color:#2069A0}
[data-ansicht="hell"] #jb007 #tagPopup .zu:hover{color:var(--w)}
[data-ansicht="hell"] #jb007 .vorschlaege .v{color:var(--t1);border-top-color:var(--bdr)}
[data-ansicht="hell"] #jb007 .vorschlaege .v:hover,
[data-ansicht="hell"] #jb007 .vorschlaege .v.aktiv{background:var(--bg2);color:var(--w)}
[data-ansicht="hell"] #jb007 .analyse-kopf{border-bottom-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 #analyseText{background:var(--bg);color:var(--t1)}
[data-ansicht="hell"] #jb007 .analyse-zeitraum{color:var(--t2)}
[data-ansicht="hell"] #jb007 #zeitraumLos,
[data-ansicht="hell"] #jb007 #analyseKopieren{background:#1B5A8A;border-color:#1B5A8A;color:#fff}
[data-ansicht="hell"] .jahr-tip{background:#fff;color:#9a6400;border-color:var(--bdr3);box-shadow:0 3px 10px rgba(12,30,49,.18)}
[data-ansicht="hell"] #jb007 .w-ok{color:#2e7d32}
[data-ansicht="hell"] #jb007 .w-warn{color:#b26a00}
[data-ansicht="hell"] #jb007 .w-unwetter{color:#c62828}
[data-ansicht="hell"] #jb007 .p-leise{color:#5f6b78}
[data-ansicht="hell"] #jb007 .p-trenner{border-top-color:#d0d7df}
[data-ansicht="hell"] #jb007 .leaflet-popup-content-wrapper{color:var(--t1)}

[data-ansicht="hell"] #jb007 .beben-rahmen{border-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 .beben-tabelle th{background:var(--bg2,#f1f4f8);color:var(--t1)}
[data-ansicht="hell"] #jb007 .beben-tabelle td{border-top-color:var(--bdr2)}
[data-ansicht="hell"] #jb007 .beben-tabelle tbody tr:hover{background:rgba(27,90,138,0.06)}
[data-ansicht="hell"] #jb007 .beben-tabelle tr.am-tag{background:rgba(194,124,0,0.14)}