/* Freigabe-Ansicht cookieless. Dunkel, hell oder nach System; mit ?background=transparent ohne eigenen Hintergrund. */
.thema-dunkel, .thema-system {
  color-scheme: dark;
  --grund: #15110d; --karte: rgba(251,246,236,.05); --linie: rgba(251,246,236,.11); --gitter: rgba(251,246,236,.07);
  --ink: #fbf6ec; --ink2: #e4dacb; --ink3: #a89a88; --akzent: #e5a853; --auf-akzent: #15110d; --balken: rgba(229,168,83,.2);
  --flaeche: rgba(229,168,83,.16); --gut: #7fd7a8; --schlecht: #f2a0a0; --tipp: #0e0b08;
}
.thema-hell {
  color-scheme: light;
  --grund: #ffffff; --karte: #fbf8f2; --linie: #ece5d9; --gitter: #f2ece2;
  --ink: #15110d; --ink2: #3f3429; --ink3: #75675a; --akzent: #9c5e16; --auf-akzent: #ffffff; --balken: rgba(184,116,32,.15);
  --flaeche: rgba(184,116,32,.12); --gut: #15803d; --schlecht: #b91c1c; --tipp: #ffffff;
}
@media (prefers-color-scheme: light) {
  .thema-system {
    color-scheme: light;
    --grund: #ffffff; --karte: #fbf8f2; --linie: #ece5d9; --gitter: #f2ece2;
    --ink: #15110d; --ink2: #3f3429; --ink3: #75675a; --akzent: #9c5e16; --auf-akzent: #ffffff; --balken: rgba(184,116,32,.15);
    --flaeche: rgba(184,116,32,.12); --gut: #15803d; --schlecht: #b91c1c; --tipp: #ffffff;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
body.durchsichtig { background: transparent; }
main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 32px; }
body.eingebettet main { max-width: none; padding: 0; }
main.laedt { opacity: .6; transition: opacity .15s; }
button { font: inherit; color: inherit; }
h3 { margin: 0; font-size: 15px; font-weight: 600; }
.laden, .leer, .fehler { color: var(--ink3); margin: 12px 0; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.kopf { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.titel { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.domain { font-size: 18px; font-weight: 700; }
.live { color: var(--ink2); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--gut); display: inline-block; }
.zeitraeume { display: flex; flex-wrap: wrap; gap: 6px; }
.zeitraeume button, .reiter button, .chip { background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: 4px 11px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.zeitraeume button.an, .reiter button.an { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.chip { color: var(--ink); }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kz { text-align: left; background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
button.kz { cursor: pointer; }
.kz.an { border-color: var(--akzent); box-shadow: inset 0 -2px 0 var(--akzent); }
.kz-name { font-size: 12px; color: var(--ink3); text-transform: uppercase; letter-spacing: .03em; }
.kz-wert { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aend { font-size: 12px; color: var(--ink3); }
.aend.gut { color: var(--gut); }
.aend.schlecht { color: var(--schlecht); }

.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: 14px; position: relative; min-width: 0; }
.diagramm { margin-bottom: 14px; }
.diagramm-kopf { margin-bottom: 6px; }
.zeichnung svg { display: block; width: 100%; height: 240px; }
.gitter { stroke: var(--gitter); stroke-width: 1; }
.achse { fill: var(--ink3); font-size: 11px; }
.linie { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.flaeche { fill: var(--flaeche); }
.fadenkreuz { stroke: var(--ink3); stroke-width: 1; stroke-dasharray: 3 3; }
.punkt { fill: var(--akzent); stroke: var(--grund); stroke-width: 2; }
.tipp { position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s; background: var(--tipp); border: 1px solid var(--linie); border-radius: 8px; padding: 6px 9px; font-size: 13px; color: var(--ink); min-width: 140px; z-index: 2; }

.raster { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .raster { grid-template-columns: 1fr 1fr; } }
.karten-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.reiter { display: flex; gap: 4px; flex-wrap: wrap; }
.reiter button { padding: 2px 9px; font-size: 12px; }
.spalten { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink3); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.zeile { position: relative; display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: none; text-align: left; font-size: 14px; color: var(--ink); overflow: hidden; }
button.zeile { cursor: pointer; }
button.zeile:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.balken { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--balken); border-radius: 0 4px 4px 0; }
.name { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.zahl { position: relative; font-variant-numeric: tabular-nums; color: var(--ink2); white-space: nowrap; }
.fuss { margin-top: 16px; color: var(--ink3); font-size: 12px; }
.fuss a { color: inherit; }
.start { max-width: 560px; padding-top: 18vh; }
.start img { display: block; width: min(300px, 80vw); height: auto; margin-bottom: 18px; }
.start p { color: var(--ink2); }
.start a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }