:root {
  --grund: #f3f5f1;
  --flaeche: #ffffff;
  --flaeche2: #e9ede6;
  --tinte: #14211c;
  --tinte2: #52625b;
  --linie: #d5dcd2;
  --akzent: #0b7a55;
  --akzent-tinte: #ffffff;
  --volt: #d6f23c;
  --kopf: #0f2a22;
  --frei: #1a9b57;
  --gut-text: #0c6f3e;
  --belegt: #e2580c;
  --defekt: #4a4f57;
  --unbekannt: #6f8fb3;
  --warn: #a15c00;
  --radius: 10px;
  --schatten: 0 1px 2px rgba(15, 42, 34, .08), 0 4px 14px rgba(15, 42, 34, .06);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0e1614; --flaeche: #17221f; --flaeche2: #1f2d29; --tinte: #e8efe9; --tinte2: #9db0a7;
    --linie: #2c3d37; --akzent: #37c48d; --akzent-tinte: #06231a; --kopf: #0a1512; --warn: #f0b354;
    --defekt: #9aa1ab; --gut-text: #4fd08f; --schatten: 0 1px 2px rgba(0,0,0,.4);
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--grund); color: var(--tinte); font-size: 15px; line-height: 1.45; display: flex; flex-direction: column; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
h1 { font-size: 1.55rem; line-height: 1.2; margin: 0 0 .3rem; letter-spacing: -.01em; text-wrap: balance; }
h2 { font-size: 1.02rem; margin: 0 0 .7rem; }
p { margin: 0 0 .7rem; }
a { color: var(--akzent); }
small { color: var(--tinte2); font-weight: 400; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.klein { font-size: .84rem; color: var(--tinte2); }
.lead { color: var(--tinte2); max-width: 70ch; margin: 0; }
.r { text-align: right; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Kopf */
.kopf { background: var(--kopf); color: #fff; display: flex; align-items: center; gap: 1.2rem; padding: 0 1rem; min-height: 52px; flex: none; }
.marke { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.reiter { display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
.reiter a { color: #c6d6cf; text-decoration: none; padding: .95rem .75rem .8rem; white-space: nowrap; border-bottom: 3px solid transparent; font-weight: 600; font-size: .93rem; }
.reiter a:hover { color: #fff; }
.reiter a.aktiv { color: #fff; border-bottom-color: var(--volt); }

/* Formularteile */
input, select, button, textarea { font: inherit; color: inherit; }
input:not([type=range]):not([type=checkbox]), select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); min-height: 38px; }
label { display: block; font-size: .86rem; font-weight: 600; color: var(--tinte2); }
label > input, label > select { margin-top: .25rem; color: var(--tinte); font-weight: 400; font-size: .95rem; }
button, .dateiknopf { cursor: pointer; border: 0; border-radius: 8px; padding: .55rem .9rem; background: var(--akzent); color: var(--akzent-tinte); font-weight: 600; min-height: 38px; }
button.zweit, .dateiknopf { background: var(--flaeche2); color: var(--tinte); border: 1px solid var(--linie); display: inline-flex; align-items: center; font-size: .9rem; }
button.schlicht { background: none; color: var(--akzent); padding: .2rem .4rem; min-height: 0; }
button:disabled { opacity: .5; cursor: default; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
legend { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte2); padding: 0; margin-bottom: .4rem; }
.haken { display: flex; align-items: center; gap: .45rem; font-weight: 400; color: var(--tinte); margin-top: .5rem; }
.zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem; margin-top: .6rem; }
.zeile input[type=range], .regler input[type=range] { width: 100%; accent-color: var(--akzent); }
.regler { margin: .8rem 0; }
.regler output, .zeile output { float: right; color: var(--tinte); font-variant-numeric: tabular-nums; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: .8rem; align-items: end; }
details { margin-top: .8rem; }
summary { cursor: pointer; font-weight: 600; color: var(--akzent); margin-bottom: .7rem; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips button { background: var(--flaeche); color: var(--tinte2); border: 1px solid var(--linie); padding: .35rem .65rem; border-radius: 999px; font-weight: 600; font-size: .86rem; min-height: 34px; display: inline-flex; align-items: center; gap: .35rem; }
.chips button small { font-size: .74rem; }
.chips button[aria-pressed=true] { background: var(--kopf); border-color: var(--kopf); color: #fff; }
.chips button[aria-pressed=true] small { color: #b9cbc3; }
@media (prefers-color-scheme: dark) { .chips button[aria-pressed=true] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-tinte); } .chips button[aria-pressed=true] small { color: var(--akzent-tinte); } }
.chips.klein button { font-size: .8rem; padding: .25rem .55rem; min-height: 30px; }
.punkt { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.punkt.frei { background: var(--frei); } .punkt.belegt { background: var(--belegt); } .punkt.defekt { background: #4a4f57; } .punkt.unbekannt { background: var(--unbekannt); }
.punkt.ring { background: #cfd6d2; border-color: #111; }

/* Karte */
.bereich[hidden] { display: none !important; }
.bereich-karte { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px 1fr; }
.filter { background: var(--flaeche); border-right: 1px solid var(--linie); padding: .9rem; overflow-y: auto; }
.suche { display: flex; gap: .35rem; margin-bottom: .4rem; }
.suche input { flex: 1; min-width: 0; }
.suche button { padding: .5rem .7rem; }
.treffer { list-style: none; margin: 0 0 .8rem; padding: 0; }
.treffer button { display: block; width: 100%; text-align: left; background: none; color: var(--tinte); font-weight: 400; padding: .4rem .3rem; border-bottom: 1px solid var(--linie); border-radius: 0; font-size: .86rem; }
.bilanz { font-weight: 600; margin: .2rem 0 .5rem; }
.stationsliste { list-style: none; margin: 0; padding: 0; }
.stationsliste button { width: 100%; text-align: left; background: none; color: var(--tinte); padding: .55rem .2rem; border-radius: 0; border-top: 1px solid var(--linie); display: grid; grid-template-columns: auto 1fr auto; gap: .5rem; align-items: start; font-weight: 400; }
.stationsliste button:hover { background: var(--flaeche2); }
.stationsliste b { display: block; font-size: .92rem; }
.stationsliste span { font-size: .8rem; color: var(--tinte2); }
.stationsliste .preis { font-weight: 700; color: var(--tinte); font-size: .9rem; white-space: nowrap; }
.stationsliste .punkt { margin-top: .3rem; }
.quellen { font-size: .76rem; color: var(--tinte2); margin-top: 1rem; }
.kartenflaeche { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--flaeche2); }
.filter .blatt-zu { display: none; }
.filterknopf { display: none; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 500; box-shadow: var(--schatten); border-radius: 999px; padding: .65rem 1.2rem; }
.kartenhinweis { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 500; background: var(--kopf); color: #fff; padding: .45rem .9rem; border-radius: 999px; font-size: .86rem; box-shadow: var(--schatten); max-width: calc(100% - 100px); text-align: center; }
.legende { position: absolute; right: 10px; bottom: 24px; z-index: 450; background: var(--flaeche); border-radius: 8px; padding: .4rem .6rem; font-size: .76rem; display: flex; gap: .7rem; flex-wrap: wrap; box-shadow: var(--schatten); max-width: calc(100% - 20px); }
.legende span { display: inline-flex; align-items: center; gap: .3rem; }
.leaflet-popup-content-wrapper { border-radius: 12px; background: var(--flaeche); color: var(--tinte); }
.leaflet-popup-tip { background: var(--flaeche); }
.leaflet-popup-content { margin: 14px 16px; font-size: 14px; line-height: 1.4; min-width: 250px; }
.leaflet-container { font-family: inherit; }
.leaflet-container a { color: var(--akzent); }
.pop h3 { margin: 0 0 .1rem; font-size: 1.02rem; padding-right: 1rem; }
.pop .unter { color: var(--tinte2); font-size: .84rem; margin-bottom: .5rem; }
.pop .marken { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.marke-klein { font-size: .72rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; background: var(--flaeche2); color: var(--tinte2); }
.marke-klein.live { background: #dff3e7; color: #0d6b3c; }
.marke-klein.warn { background: #fdeccd; color: #7a4500; }
.pop table { width: 100%; border-collapse: collapse; margin-bottom: .5rem; }
.pop td { padding: .22rem 0; border-top: 1px solid var(--linie); vertical-align: top; }
.pop td:last-child { text-align: right; white-space: nowrap; }
.pop .st { font-weight: 700; }
.st.frei { color: var(--gut-text); } .st.belegt { color: var(--belegt); } .st.defekt { color: var(--defekt); } .st.unbekannt { color: var(--unbekannt); }
.pop .aktionen { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.pop .aktionen button, .pop .aktionen a { font-size: .8rem; padding: .35rem .6rem; min-height: 32px; border-radius: 999px; text-decoration: none; }
.pop .aktionen a { background: var(--akzent); color: var(--akzent-tinte); font-weight: 600; display: inline-flex; align-items: center; }
.pop h4 { margin: .5rem 0 .2rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinte2); }

/* Seiten */
.seite { padding: 1.4rem clamp(.9rem, 3vw, 2.2rem) 3rem; overflow-y: auto; flex: 1; }
.seitenkopf { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: end; margin-bottom: 1.1rem; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.werkzeuge input[type=search] { width: 200px; }
.werkzeuge .haken { margin: 0; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--schatten); }
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.assistent { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 1rem; align-items: start; }
.ergebnis { display: grid; gap: 1rem; min-width: 0; }
.tabellenrahmen { overflow-x: auto; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); }
.karte .tabellenrahmen { border: 0; }
.tabelle { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tabelle th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinte2); padding: .5rem .6rem; background: var(--flaeche2); border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle th.r { text-align: right; }
.tabelle th[data-sort] { cursor: pointer; }
.tabelle th[data-sort]:hover { color: var(--tinte); }
.tabelle th[aria-sort]::after { content: " ▲"; } .tabelle th[aria-sort=descending]::after { content: " ▼"; }
.tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle tbody tr:last-child td { border-bottom: 0; }
#tariftabelle tbody tr.zeile-tarif { cursor: pointer; }
#tariftabelle tbody tr.zeile-tarif:hover { background: var(--flaeche2); }
#tariftabelle td.name b { display: block; }
#tariftabelle td.name span { color: var(--tinte2); font-size: .84rem; }
.tabelle .best { color: var(--gut-text); font-weight: 700; }
#tarife > .tabellenrahmen { min-height: 75vh; }
.tabelle tr.meine td.name b::after { content: " ✓"; color: var(--gut-text); }
.tabelle tr.detail td { background: var(--flaeche2); font-size: .86rem; color: var(--tinte2); }
.tabelle tr.neu td { animation: blink 2.5s; }
@keyframes blink { from { background: var(--volt); } }
.sonder { display: flex; flex-wrap: wrap; gap: .25rem; max-width: 260px; }
.sonder span { font-size: .76rem; background: var(--flaeche2); border-radius: 6px; padding: .1rem .4rem; white-space: nowrap; }
.warnzeichen { color: var(--warn); }
.historie { list-style: none; padding: 0; margin: 0 0 .8rem; font-size: .88rem; }
.historie li { padding: .4rem 0; border-top: 1px solid var(--linie); display: flex; justify-content: space-between; gap: .6rem; }
.historie li:first-child { border-top: 0; }
.rauf { color: var(--warn); font-weight: 700; } .runter { color: var(--gut-text); font-weight: 700; }

/* Ergebnisse */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.kennzahl { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: .75rem .9rem; }
.kennzahl b { display: block; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kennzahl span { font-size: .8rem; color: var(--tinte2); }
.empfehlung { border-left: 5px solid var(--akzent); }
.empfehlung .gross { font-size: 1.35rem; font-weight: 700; line-height: 1.25; margin-bottom: .2rem; }
.empfehlung .summe { font-size: 1.05rem; margin-bottom: .6rem; }
.rang { display: grid; gap: .3rem; }
.rang-zeile { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: .6rem; align-items: center; font-size: .88rem; }
.rang-zeile .bar { height: 10px; border-radius: 5px; background: var(--unbekannt); min-width: 3px; }
.rang-zeile.meine .bar { background: var(--akzent); }
.rang-zeile.meine .n { font-weight: 700; }
.rang-zeile .w { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.stationshinweis { background: var(--flaeche2); border-radius: 8px; padding: .5rem .7rem; font-size: .88rem; }
.wecker { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.wecker .zeit { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.balken { display: flex; align-items: flex-end; gap: 2px; height: 215px; padding: 1.3rem 0 1.5rem; overflow-x: auto; }
.balken div { flex: 1 0 9px; background: var(--unbekannt); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.balken div.guenstig { background: var(--frei); }
.balken div.vorbei { opacity: .35; }
.balken div.tag::before { content: attr(data-tag); position: absolute; top: -1.2rem; left: 0; font-size: .72rem; color: var(--tinte2); white-space: nowrap; }
.balken div::after { content: attr(data-h); position: absolute; bottom: -1.25rem; left: 50%; transform: translateX(-50%); font-size: .66rem; color: var(--tinte2); }
#z-chart { margin-bottom: .4rem; }
.leer { color: var(--tinte2); padding: 1.2rem; text-align: center; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); background: var(--kopf); color: #fff; padding: .65rem 1rem; border-radius: 10px; opacity: 0; pointer-events: none; transition: .25s; z-index: 2000; max-width: min(92vw, 520px); box-shadow: var(--schatten); }
.toast.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.toast.fehler { background: #8f1d1d; } .toast.gut { background: #0b6b46; }

@media (max-width: 860px) {
  .kopf { flex-direction: column; align-items: stretch; gap: 0; padding: .45rem .7rem 0; }
  .reiter a { padding: .55rem .6rem .5rem; }
  .bereich-karte { grid-template-columns: 1fr; }
  .filter { position: absolute; z-index: 1100; left: 0; right: 0; bottom: 0; max-height: 72%; border-right: 0; border-top: 1px solid var(--linie); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .25s; }
  .filter.offen { transform: none; }
  .bereich-karte { position: relative; }
  .filterknopf { display: block; bottom: 52px; }
  .filter .blatt-zu { display: flex; justify-content: center; width: 100%; margin-bottom: .7rem; }
  .legende { bottom: 104px; font-size: .7rem; gap: .45rem; }
  .assistent { grid-template-columns: 1fr; }
  h1 { font-size: 1.3rem; }
  .rang-zeile { grid-template-columns: 1fr auto; } .rang-zeile .bar { display: none; }
}

/* Routenplaner */
.mit-knopf { display: flex; gap: .35rem; margin-top: .25rem; }
.mit-knopf input { margin: 0 !important; flex: 1; min-width: 0; }
.routenkarte { padding: 0; overflow: hidden; }
#r-map { height: 320px; background: var(--flaeche2); }
.stopp-kopf { display: flex; gap: .7rem; align-items: flex-start; }
.stopp-kopf h2 { margin: 0 0 .15rem; }
.stopp-kopf .nr, .stopp-marke { width: 28px; height: 28px; border-radius: 50%; background: var(--kopf); color: var(--volt); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; font-size: .9rem; }
.stopp-marke { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.stopp-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin-top: .7rem; }
.stopp-werte span { font-size: .8rem; color: var(--tinte2); }
.stopp-werte b { display: block; font-size: 1.1rem; color: var(--tinte); font-variant-numeric: tabular-nums; }

.ortswahl { margin-top: .4rem; padding: .5rem .6rem; border-radius: 8px; background: var(--flaeche2); border-left: 4px solid var(--warn); }

.nachtrag label { margin-top: .45rem; }
.nachtrag .raster { grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: .45rem 0 0; }

/* Stationsfenster: günstigster eigener Preis und Direktzahlung */
.bestpreis { display: grid; gap: .35rem; margin: 0 0 .6rem; }
.bp-zeile { display: grid; grid-template-columns: auto 1fr 1fr; gap: .35rem; align-items: stretch; }
.bp-strom { align-self: center; font-size: .72rem; font-weight: 700; color: var(--tinte2); width: 1.6rem; }
.bp-feld { background: var(--flaeche2); border-radius: 8px; padding: .4rem .55rem; border: 2px solid transparent; min-width: 0; }
.bp-feld.gut { border-color: var(--frei); }
.bp-feld span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinte2); }
.bp-feld b { display: block; font-size: 1.25rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.bp-feld small { display: block; font-size: .72rem; line-height: 1.25; color: var(--tinte2); overflow-wrap: anywhere; }

/* Heimstrom-Vergleich */
.heimkopf { margin-top: 2rem; }
.heimkopf h2 { margin: 0 0 .2rem; font-size: 1.3rem; }
.tabelle tr.bestzeile td { background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.liste { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; }
.assistent > * { min-width: 0; }
.heimtabelle td.name { min-width: 15rem; }
.heimtabelle td.r { white-space: nowrap; }
.ergebnis { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .assistent { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .heimtabelle td.name { min-width: 0; } .heimtabelle :is(th, td):is(:nth-child(2), :nth-child(4)) { display: none; } .heimtabelle th { white-space: normal; } }
@media (max-width: 600px) { .heimtabelle :is(th, td) { padding: .45rem .35rem; } .heimtabelle th { font-size: .68rem; letter-spacing: 0; } }

/* Sortierwahl */
.sortwahl, .rang-kopf label:not(.haken) { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--tinte2); white-space: nowrap; }
.sortwahl select, .rang-kopf select { width: auto; padding: .35rem .5rem; }
.rang-kopf { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.rang-kopf h2 { margin: 0; }
.rang-kopf .haken { margin-top: 0; font-size: .88rem; }
.rang-kopf label:not(.haken) { flex-wrap: wrap; white-space: normal; max-width: 100%; }
.rang-kopf select, .sortwahl select { max-width: 100%; min-width: 0; }
@media (max-width: 600px) { .sortwahl { flex-wrap: wrap; white-space: normal; } }
.tabelle td.name .marke-klein { display: table; margin: .25rem 0 .1rem; font-weight: 600; }
.tabelle th[data-zsort] { cursor: pointer; }
.tabelle th[data-zsort]:hover { color: var(--tinte); }