/* app/static/lage/lage.css */
.lage-wrap { max-width: 980px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.lage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lage-title { font-size: 1.6rem; margin: 0; }
.lage-stand { font-size: .85rem; opacity: .65; }
.lage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; margin-top: 1rem; }
/* Ungerade Kachelzahl: letzte Kachel nicht als halbleere Waise -> ueber beide Spalten (nur im
   2-Spalten-Breakpoint; im 1-spaltigen Mobil-Layout unten ohnehin ohne Wirkung). */
@media (min-width: 641px) { .lage-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .lage-grid { grid-template-columns: 1fr; } }
.lage-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem;
  margin-top: .9rem; font-size: .82rem; opacity: .85; }
.lage-legend .ll-label { font-weight: 600; opacity: .8; }
.lage-legend .ll-item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.lage-legend .ll-dot { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }
.lage-legend .ll-note { opacity: .6; font-style: italic; }
.lage-card { display: flex; flex-direction: column; background: #fff; border-radius: 10px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.12); text-decoration: none; color: inherit;
  transition: transform .08s ease, box-shadow .08s ease; }
.lage-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.16);
  text-decoration: none; }   /* sonst unterstreicht a:hover (app.css) den ganzen Kachelinhalt */
.lage-card.placeholder { opacity: .6; }
.lc-head { display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .8rem; font-weight: 700; }
.lc-now { margin-left: auto; margin-right: .45rem; background: rgba(255,255,255,.22);
  border-radius: 6px; padding: .1rem .45rem; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.lc-badge { background: #fff; color: #1b2a36; border-radius: 6px; padding: .1rem .5rem;
  font-size: .82rem; font-weight: 800; }
.lc-badge.ghost { background: rgba(255,255,255,.35); color: inherit; font-weight: 700; }
.lc-body { padding: .65rem .8rem; font-size: .9rem; line-height: 1.35; flex: 1; }
.lc-metric { margin-top: .35rem; font-size: .82rem; opacity: .85; }
.lc-foot { padding: 0 .8rem .7rem; font-size: .78rem; color: #C90C0F; }
/* dezente kleine Zeile fuer optionale "Daten vom ..."-Hinweise auf Kacheln (Task 6) */
.tile-stale { display: block; margin-top: .3rem; font-size: .74rem; color: #7a8a96; }
html[data-theme="dark"] .tile-stale { color: var(--muted); }
.lage-foot { margin-top: 1.6rem; font-size: .8rem; opacity: .7; line-height: 1.5; }
html[data-theme="dark"] .lage-card { background: var(--card); }
html[data-theme="dark"] .lc-foot { color: var(--link-dark); }
.lc-kurz { margin: 0; }
/* Unterer Kachel-Teil: FW-Status (info|handeln) + optionaler Detail-Verweis */
.lc-fw { display: flex; align-items: flex-start; gap: .45rem; margin-top: .6rem;
  padding-top: .55rem; border-top: 1px solid #eef2f5; font-size: .82rem; }
.lc-fw-ico { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .08rem; }
.lc-fw-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.lc-fw-line { opacity: .85; }
.lc-fw.is-info { color: #5a6b76; }
.lc-fw.is-handeln { color: #C90C0F; }
.lc-fw.is-handeln .lc-fw-line { opacity: .95; }
.lc-fw.has-detail .lc-fw-line { font-weight: 600; }
.lc-fw-arrow { font-weight: 800; }
html[data-theme="dark"] .lc-fw { border-top-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .lc-fw.is-info { color: var(--muted); }
html[data-theme="dark"] .lc-fw.is-handeln { color: #ff6b6e; }
/* Hitze-Kachel: Prognose-Strip (Tagesmaxima) */
.lc-forecast { margin-top: .55rem; display: flex; flex-direction: column; gap: .25rem; }
.lcf-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: #7a8a96; font-weight: 700; }
.lcf-days { display: flex; gap: .3rem; }
.lcf-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .28rem .1rem; border-radius: 7px; background: #eef2f5; }
.lcf-wd { color: #7a8a96; font-size: .7rem; }
.lcf-temp { font-weight: 800; font-size: .92rem; }
/* Hellmodus: kraeftige, gesaettigte Farben (kein blasses Rosa) — warm = Amber, heiss = Korallenrot. */
.lcf-day.warm { background: #f8c46a; color: #6a3a00; }
.lcf-day.heiss { background: #f1897e; color: #6e150c; }
/* Wochentag an die Kartenfarbe koppeln (nicht das graue #7a8a96), sonst zu wenig Kontrast. */
.lcf-day.warm .lcf-wd  { color: #7a4200; }
.lcf-day.heiss .lcf-wd { color: #6e150c; }
[data-theme="dark"] .lcf-day { background: #1e2e39; }
/* Dunkelmodus: saettigtere, hellere Fuellung + heller Text -> klar lesbar (statt muddy). */
[data-theme="dark"] .lcf-day.warm  { background: #7e5214; color: #ffeccf; }
[data-theme="dark"] .lcf-day.heiss { background: #8a2226; color: #ffe2e2; }
[data-theme="dark"] .lcf-day.warm .lcf-wd  { color: #f3d4a2; }
[data-theme="dark"] .lcf-day.heiss .lcf-wd { color: #f6c2c2; }
/* Kachel-Marker fuer eigene (nicht amtliche) Einordnung */
.lc-eigen { margin-top: .5rem; display: flex; flex-direction: column; gap: .15rem;
  font-size: .76rem; line-height: 1.3; }
.lc-eigen-tag { align-self: flex-start; background: #eef2f5; color: #5a6b76; border-radius: 5px;
  padding: .06rem .42rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  font-size: .62rem; }
.lc-eigen-basis { color: #5a6b76; }
html[data-theme="dark"] .lc-eigen-tag { background: #25323c; color: var(--muted); }
html[data-theme="dark"] .lc-eigen-basis { color: var(--muted); }
/* Detailseite: Hinweis-Box fuer eigene Einordnung + Warnkarten-Link */
.gefahr-eigen-note { font-size: .85rem; color: #5a6b76; background: #f3f6f8;
  border: 1px solid #e3e9ed; border-radius: 8px; padding: .5rem .7rem;
  margin: .2rem 0 .9rem; line-height: 1.45; }
.gefahr-eigen-note a { color: #C90C0F; }
html[data-theme="dark"] .gefahr-eigen-note { background: var(--card); border-color: #24343f; color: var(--ink2); }
html[data-theme="dark"] .gefahr-eigen-note a { color: var(--link-dark); }

/* Detailseite */
.gefahr-wrap { max-width: 980px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.gefahr-crumb { font-size: .85rem; color: #C90C0F; text-decoration: none; }
html[data-theme="dark"] .gefahr-crumb { color: var(--link-dark); }
.gefahr-head { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 .2rem; }
.gefahr-head h1 { font-size: 1.5rem; margin: 0; }
.gefahr-badge { border-radius: 6px; padding: .15rem .6rem; font-weight: 800; font-size: .9rem; }
.gefahr-badge.ghost { background: #e3e9ed; color: #5a6b76; }
.gefahr-meta { font-size: .82rem; opacity: .7; margin-bottom: .9rem; }
.gefahr-split { display: flex; gap: .9rem; }
@media (max-width: 700px) { .gefahr-split { flex-direction: column; } }
.gefahr-mapcol { flex: 1.2; }
.gefahr-actcol { flex: 1; background: #fff; border-radius: 10px; padding: .8rem 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
#gefahr-map { height: 300px; border-radius: 10px; overflow: hidden; }
.gefahr-nomap { height: 300px; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 1rem; background: #eef2f5; border-radius: 10px; font-size: .9rem; }
.gefahr-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: #7a8a96; font-weight: 700; margin-bottom: .3rem; }
/* Rechte Spalte: "Zur Lage" */
.gefahr-lage { margin: 0; font-size: .88rem; }
.gefahr-lage > div { display: flex; justify-content: space-between; gap: .8rem;
  padding: .3rem 0; border-bottom: 1px solid #eef2f5; }
.gefahr-lage > div:last-child { border-bottom: 0; }
.gefahr-lage dt { color: #7a8a96; margin: 0; align-self: center; }
.gefahr-lage dd { margin: 0; font-weight: 600; text-align: right; }
.gefahr-lage .dd-note { font-weight: 400; color: #8a98a2; font-size: .82em; white-space: nowrap; }
.lage-stufe { display: inline-block; padding: .12rem .6rem; border-radius: 999px;
  font-weight: 800; font-size: .82rem; letter-spacing: .01em; }
.lage-stufe.ghost { background: #e3e9ed; color: #5a6b76; }
.gefahr-einschaetzung { font-size: .88rem; line-height: 1.45; margin: .7rem 0 0; color: #3a4a55; }
/* Hitze-Detailseite: Temperatur-Prognose */
.gefahr-forecast { margin-top: 1.1rem; }
.gf-days { display: flex; gap: .5rem; }
.gf-day { flex: 1; text-align: center; background: #fff; border: 1px solid #e7edf1;
  border-radius: 10px; padding: .6rem .3rem; box-shadow: 0 1px 2px rgba(12,32,48,.05); }
.gf-wd { font-size: .8rem; color: #7a8a96; font-weight: 700; }
.gf-date { font-size: .72rem; color: #9aa7b0; }
.gf-temp { font-size: 1.25rem; font-weight: 800; margin-top: .15rem; }
.gf-day.warm { background: #f8c46a; border-color: #e0a23e; color: #6a3a00; }
.gf-day.heiss { background: #f1897e; border-color: #e36a5d; color: #6e150c; }
/* Wochentag/Datum müssen auf den farbigen Karten lesbar bleiben (sonst blasses Grau auf Amber/Rot). */
.gf-day.warm .gf-wd, .gf-day.warm .gf-date { color: #7a4200; }
.gf-day.heiss .gf-wd, .gf-day.heiss .gf-date { color: #6e150c; }
.gf-note { font-size: .78rem; color: #7a8a96; margin: .5rem 0 0; }
.temp-mess { font-size: .8rem; color: #4a5a66; margin: .25rem 0 0; }
.temp-mess b { color: #b23b2e; }
html[data-theme="dark"] .temp-mess { color: var(--muted); }
html[data-theme="dark"] .gf-day { background: var(--card); border-color: #25323c; }
[data-theme="dark"] .gf-day.warm { background: #7e5214; border-color: #9a6a1e; color: #ffeccf; }
[data-theme="dark"] .gf-day.heiss { background: #8a2226; border-color: #a83a36; color: #ffe2e2; }
[data-theme="dark"] .gf-day.warm .gf-wd, [data-theme="dark"] .gf-day.warm .gf-date { color: #f3d4a2; }
[data-theme="dark"] .gf-day.heiss .gf-wd, [data-theme="dark"] .gf-day.heiss .gf-date { color: #f6c2c2; }
/* "Das heisst fuer die Feuerwehr": Funktions-Roster mit Kuerzel-Token (KDO/PIO/MW/UEL/NGB/AdF) */
.gefahr-fw { margin-top: 1.1rem; }
.gefahr-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 640px) { .gefahr-rollen { grid-template-columns: 1fr; } }
.rolle { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border-radius: 12px;
  padding: .8rem .9rem; border: 1px solid #e7edf1; box-shadow: 0 1px 2px rgba(12,32,48,.05);
  transition: box-shadow .1s ease, transform .1s ease; }
.rolle:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(12,32,48,.1); }
.rolle-tok { flex-shrink: 0; min-width: 2.7rem; height: 2.7rem; padding: 0 .35rem; border-radius: 9px;
  background: #0c2030; color: #fff; font-weight: 800; font-size: .72rem; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.rolle-txt { min-width: 0; }
.rolle-name { font-weight: 700; font-size: .92rem; margin-bottom: .15rem; }
.rolle p { margin: 0; font-size: .88rem; line-height: 1.4; color: #3a4a55; }
html[data-theme="dark"] .gefahr-actcol, html[data-theme="dark"] .rolle { background: var(--card); border-color: #24343f; }
html[data-theme="dark"] .rolle-tok { background: #283b48; }
html[data-theme="dark"] .rolle p, html[data-theme="dark"] .gefahr-einschaetzung { color: var(--ink2); }
/* Kompakte Sammel-Zeile, wenn mehrere Rollen noch den Platzhaltertext haetten (Task 7) */
.rollen-platzhalter { font-size: .85rem; color: #5a6b76; background: #f3f6f8;
  border: 1px solid #e3e9ed; border-radius: 8px; padding: .5rem .7rem;
  margin: .5rem 0 0; line-height: 1.45; }
html[data-theme="dark"] .rollen-platzhalter { background: var(--card); border-color: #24343f; color: var(--ink2); }

/* Eigenschutz bei Hitze: EIN strukturierter Kasten */
.gefahr-eigenschutz { margin-top: 1.1rem; }
.eig-box { background: #fff; border: 1px solid #e7edf1; border-radius: 12px;
  padding: 0 1.1rem 1rem; box-shadow: 0 1px 3px rgba(12,32,48,.06); }
.eig-head { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1rem;
  color: #b8470d; padding: .85rem 0 .65rem; border-bottom: 1px solid #f0f2f4; margin-bottom: .55rem; }
.eig-ico { width: 1.2rem; height: 1.2rem; color: #ef8a3c; flex-shrink: 0; }
.eig-points { margin: 0; }
.eig-points > div { padding: .4rem 0; border-bottom: 1px solid #f4f6f8; }
.eig-points > div:last-child { border-bottom: 0; }
.eig-points dt { font-weight: 700; font-size: .82rem; color: #1b2a36; }
.eig-points dd { margin: .12rem 0 0; font-size: .9rem; line-height: 1.45; color: #3a4a55; }
.eig-note { margin: .7rem 0 0; font-size: .78rem; font-style: italic; color: #8a98a2; }
html[data-theme="dark"] .eig-box { background: var(--card); border-color: #24343f; }
html[data-theme="dark"] .eig-head { border-color: #24343f; }
html[data-theme="dark"] .eig-points > div { border-color: #1f2d37; }
html[data-theme="dark"] .eig-points dt { color: #dce4ea; }
html[data-theme="dark"] .eig-points dd { color: var(--ink2); }

/* Amtliche Einordnung: empfohlen (gruen) vs. verboten (rot) */
.gefahr-einordnung { margin-top: 1.1rem; }
.ein-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 640px) { .ein-grid { grid-template-columns: 1fr; } }
.ein-item { background: #fff; border: 1px solid #e7edf1; border-radius: 12px; padding: .8rem .9rem; }
.ein-h { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; display: flex; align-items: center; gap: .45rem; }
.ein-h::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.ein-ok .ein-h::before { background: #2e7d46; }
.ein-no .ein-h::before { background: #C90C0F; }
.ein-item p { margin: 0; font-size: .88rem; line-height: 1.45; color: #3a4a55; }
.ein-next { margin-top: .65rem; font-size: .86rem; color: #51606b; }
.ein-next-h { font-weight: 700; }
html[data-theme="dark"] .ein-item { background: var(--card); border-color: #24343f; }
html[data-theme="dark"] .ein-item p, html[data-theme="dark"] .ein-next { color: var(--ink2); }

/* Karten-Vollbild-Umschalter */
.map-fs-btn { position: absolute; top: 10px; right: 10px; z-index: 1000; width: 30px; height: 30px;
  border: 0; border-radius: 7px; background: #fff; color: #1b2a36; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.map-fs-btn:hover { background: #f0f4f7; }
.map-fs-btn svg { width: 16px; height: 16px; }
.gefahr-mapcol.is-fs { position: fixed; inset: 0; z-index: 2000; flex: none; padding: 0; background: #0c2030; }
.gefahr-mapcol.is-fs #gefahr-map { height: 100%; border-radius: 0; }

/* Datenquellen & Methodik */
.quellen-wrap { max-width: 820px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.quellen-title { font-size: 1.6rem; margin: .4rem 0 .3rem; }
.quellen-lead { font-size: .95rem; line-height: 1.5; color: #3a4a55; margin: 0 0 1.4rem; }
.quellen-wrap .gefahr-label { margin: 1.4rem 0 .6rem; font-size: .74rem; }
.q-list { display: flex; flex-direction: column; gap: .6rem; }
.q-row { background: #fff; border: 1px solid #e7edf1; border-radius: 12px; padding: .9rem 1rem;
  box-shadow: 0 1px 2px rgba(12,32,48,.05); }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.q-name { font-weight: 700; font-size: 1rem; }
.q-chip { font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.q-chip.live { background: #e6f4ea; color: #2e7d46; }
.q-chip.show { background: #e8eff7; color: #3a6ea5; }
.q-chip.none { background: #eceff1; color: #6a7a85; }
.q-meta { font-size: .8rem; color: #6a7a85; margin: .35rem 0 .1rem; }
.q-row p { margin: .35rem 0 0; font-size: .9rem; line-height: 1.45; }
.q-row code { font-size: .82em; background: #eef2f5; padding: .05rem .3rem; border-radius: 4px;
  word-break: break-all; }
.q-endpoint { display: flex; gap: .5rem; align-items: baseline; font-size: .8rem;
  margin-top: .4rem; color: #51606b; }
.q-ep-label { flex-shrink: 0; min-width: 5.2rem; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; font-weight: 700; color: #8a98a2; }
html[data-theme="dark"] .q-endpoint { color: var(--muted); }
.q-method { margin: 0; padding-left: 1.1rem; }
.q-method li { font-size: .9rem; line-height: 1.5; margin-bottom: .35rem; }
.quellen-foot { margin-top: 1.6rem; font-size: .78rem; color: #7a8a96; line-height: 1.5; }
.gefahr-quellen { margin: 1.1rem 0 0; font-size: .85rem; }
.lage-foot a, .quellen-lead a, .q-row a, .gefahr-quellen a { color: #C90C0F; }
html[data-theme="dark"] .lage-foot a,
html[data-theme="dark"] .quellen-lead a,
html[data-theme="dark"] .q-row a,
html[data-theme="dark"] .gefahr-quellen a { color: var(--link-dark); }
html[data-theme="dark"] .q-row { background: var(--card); border-color: #24343f; }
html[data-theme="dark"] .quellen-lead, html[data-theme="dark"] .q-row p { color: var(--ink2); }
html[data-theme="dark"] .q-row code { background: #24343f; }

/* Operative Temperatur-Sicht: gemeinsames 24h-Chart (durchgehendes Raster + Jetzt-Linie) */
.gefahr-tempops { margin-top: 1.25rem; }
.tops-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .5rem; }
.tops-legend { display: flex; gap: .85rem; font-size: .7rem; color: #7a8a96; }
.tops-legend .lg { display: inline-flex; align-items: center; gap: .32rem; }
.sw { display: inline-block; width: .72rem; height: .72rem; border-radius: 2px; }
.sw-warm { background: #f8c46a; } .sw-heiss { background: #f1897e; } .sw-frost { background: #7fb3e6; }
.sw-now { width: 3px; height: .85rem; border-radius: 0; background: #d62828; }
.tops-block { position: relative; }
.tops-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.tops-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(27,42,54,.16); }
/* Jetzt-Linie nur auf HEUTE (jetzt kann nicht morgen sein) -> innerhalb des heutigen Tracks. */
.tops-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #d62828; z-index: 2; }
.tops-day { font-size: .8rem; color: #5a6b76; margin-top: .55rem; }
.tops-block > .tops-day:first-of-type { margin-top: 0; }
.tops-day b { color: #1b2a36; font-weight: 700; }
.tops-track { position: relative; height: .8rem; border-radius: .4rem; overflow: hidden;
  margin-top: .22rem; background-color: #eef2f5; }
.tops-seg { position: absolute; top: 0; bottom: 0; }
.tops-warm  { background: #f8c46a; }
.tops-heiss { background: #f1897e; }
.tops-frost { background: #7fb3e6; }
.tops-cap { font-size: .76rem; color: #7a8a96; margin-top: .16rem; }
.tops-axis { display: flex; justify-content: space-between; margin-top: .3rem;
  font-size: .62rem; color: #9aa7b0; letter-spacing: .03em; }
html[data-theme="dark"] .tops-legend, html[data-theme="dark"] .tops-cap { color: var(--muted); }
html[data-theme="dark"] .tops-day { color: var(--muted); }
[data-theme="dark"] .tops-day b { color: #e6eef4; }
[data-theme="dark"] .tops-gl { background: rgba(255,255,255,.12); }
[data-theme="dark"] .tops-now, [data-theme="dark"] .sw-now { background: #ff6b5e; }
[data-theme="dark"] .tops-track { background-color: #1e2e39; }
[data-theme="dark"] .tops-warm  { background: #b9802a; }
[data-theme="dark"] .tops-heiss { background: #b23b39; }
[data-theme="dark"] .tops-frost { background: #3f6f9c; }

/* Kachel-Mini: heute + 2 Tage als gestapelte Schienen, 6h-Raster + Jetzt-Linie (nur heute) */
.lc-tempdays { margin-top: .5rem; }
.lcd-row { display: flex; align-items: center; gap: .35rem; margin: 2px 0; }
.lcd-wd { flex: 0 0 1.5rem; font-size: .64rem; color: #7a8a96; text-align: right; }
.lcd-track { position: relative; flex: 1 1 auto; height: .5rem; border-radius: .3rem;
  background-color: #eef2f5;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(27,42,54,.16) calc(25% - 1px) 25%); }
.lcd-track .lcs-seg { position: absolute; top: 0; bottom: 0; border-radius: .15rem; }
.lcs-seg { position: absolute; top: 0; bottom: 0; }
.lcs-warm { background: #f8c46a; }
.lcs-heiss { background: #f1897e; }
.lcs-frost { background: #7fb3e6; }
/* Jetzt-Linie steht oben/unten leicht über und hat einen hellen Saum -> auch über Rot sichtbar. */
.lcd-track .lcs-now { position: absolute; top: -2px; height: calc(.5rem + 4px); width: 2px; margin-left: -1px;
  background: #d62828; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.lcs-label { display: block; font-size: .72rem; color: #7a8a96; margin-top: .26rem; }
html[data-theme="dark"] .lcd-wd { color: var(--muted); }
[data-theme="dark"] .lcd-track { background-color: #1e2e39;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.12) calc(25% - 1px) 25%); }
[data-theme="dark"] .lcs-warm { background: #b9802a; }
[data-theme="dark"] .lcs-heiss { background: #b23b39; }
[data-theme="dark"] .lcs-frost { background: #3f6f9c; }
[data-theme="dark"] .lcd-track .lcs-now { background: #ff6b5e; box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
html[data-theme="dark"] .lcs-label { color: var(--muted); }

/* Karten-Umschalter (z.B. Tag/Nacht der AG-Klimakarte) */
.map-mode { display: flex; gap: 2px; background: #fff; border-radius: .4rem; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.map-mode button { border: 0; background: #fff; color: #33414c; font-size: .8rem;
  padding: .28rem .6rem; cursor: pointer; line-height: 1.1; }
.map-mode button.is-on { background: #d97a2b; color: #fff; }
[data-theme="dark"] .map-mode { background: #1e2e39; }
[data-theme="dark"] .map-mode button { background: #1e2e39; color: #cdd9e1; }
[data-theme="dark"] .map-mode button.is-on { background: #d97a2b; color: #fff; }
.map-caveat { font-size: .76rem; color: #7a8a96; margin: .4rem 0 0; }
html[data-theme="dark"] .map-caveat { color: var(--muted); }

/* Karten-Legende (ArcGIS Planhinweiskarte) — collapsible, scrollbar, auch im Vollbild sichtbar */
.map-legend { background: rgba(255,255,255,.94); border-radius: .4rem; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  max-width: 230px; font-size: .72rem; color: #2b3a44; overflow: hidden; }
.map-legend .ml-head { font-weight: 600; padding: .3rem .5rem; cursor: pointer; user-select: none;
  background: #eef2f5; }
.map-legend .ml-head::before { content: "▾ "; }
.map-legend.is-collapsed .ml-head::before { content: "▸ "; }
.map-legend.is-collapsed .ml-body { display: none; }
.map-legend .ml-body { max-height: 210px; overflow-y: auto; padding: .35rem .5rem; }
.map-legend .ml-row { display: flex; align-items: center; gap: .4rem; margin: 1px 0; line-height: 1.15; }
.map-legend .ml-row img { flex: 0 0 auto; max-width: 28px; height: auto; }
.map-legend .ml-sw { flex: 0 0 auto; width: 16px; height: 12px; border-radius: 2px; display: inline-block; }
.map-legend .ml-sec { font-weight: 600; font-size: .76rem; margin: .35rem 0 .1rem; }
.map-legend .ml-sec:first-child { margin-top: 0; }
.map-legend .ml-grad { height: 12px; border-radius: 2px; border: 1px solid rgba(120,120,120,.5); margin: 2px 0; }
.map-legend .ml-scale { display: flex; justify-content: space-between; font-size: .72rem; color: #5a6b76; margin-bottom: .25rem; }
html[data-theme="dark"] .map-legend .ml-scale { color: var(--muted); }
/* Radar-Steuerung (oben links): Sichtbarkeit + Deckkraft */
.radar-ctl { background: rgba(255,255,255,.94); border-radius: .4rem; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  padding: .35rem .5rem; font-size: .8rem; color: #33414c; min-width: 132px; }
.radar-ctl .rc-row { display: flex; align-items: center; gap: .35rem; cursor: pointer; white-space: nowrap; }
.radar-ctl .rc-op { width: 100%; margin-top: .3rem; accent-color: #d97a2b; }
[data-theme="dark"] .radar-ctl { background: rgba(20,30,38,.95); color: #cdd9e1; }
.map-legend .ml-load { color: #7a8a96; padding: .2rem 0; }
[data-theme="dark"] .map-legend { background: rgba(20,30,38,.95); color: #cdd9e1; }
[data-theme="dark"] .map-legend .ml-head { background: #243440; }