/* Sondenwarte: nur was das Hausdesign noch nicht hat. Farben ausschließlich als Token. */

body{background:var(--grund)}
.kopf{position:sticky;top:0;z-index:10;background:var(--grund-tief);border-bottom:1px solid var(--rand);
  padding:var(--luft-3) var(--luft-4) var(--luft-2)}
.kopf-innen,.nav,.haupt-inhalt,.fuss{max-width:1680px;margin:0 auto}

/* Raumsonden: Kennzahlen-Leiste */
.leiste-zahlen{position:relative;display:grid;gap:var(--luft) var(--luft-6);
  grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));margin-bottom:var(--luft)}
.zahl-zelle{display:flex;flex-direction:column;gap:2px;min-width:0}
.zahl-zelle .etikett{display:inline-flex;align-items:center;gap:var(--luft-2);font-size:12px;letter-spacing:.08em}
.zahl-zelle .etikett .ik{font-size:16px;color:var(--akzent)}
.kennzahl-gross{font-family:var(--font-anzeige);font-size:36px;line-height:1.1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kennzahl-gross small{font-size:16px;color:var(--matt)}
.leiste-info{position:absolute;top:var(--luft-3);right:var(--luft-3);min-height:32px;min-width:var(--ziel-min);
  padding:0 var(--luft-2);border-radius:var(--r-voll);background:none;border:1px solid var(--rand);color:var(--akzent);
  font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:4px}

/* Raumsonden: eine Spalte je Bodenstation */
.stationen{display:grid;gap:var(--luft);grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:start}
.station.aktiv{border-color:var(--gruen)}
.station-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--luft-2);margin-bottom:var(--luft-2)}
.station-kopf>span:first-child{display:flex;flex-direction:column}
.station-kopf .chip{flex:none;white-space:nowrap}
.funk-eintrag{display:flex;flex-direction:column;gap:1px;padding:var(--luft-2) 0;border-top:1px solid var(--rand)}
.funk-eintrag button{all:unset;cursor:pointer;color:var(--text);font-weight:700;font-size:15px;min-height:24px}
.funk-eintrag button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.station-leer{margin:var(--luft-2) 0 0}
@media (max-width:640px){.kennzahl-gross{font-size:28px}}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:var(--luft-3);flex-wrap:wrap}
.kopf h1{margin:0}
.kopf-unter{margin:2px 0 0}
.kopf-rechts{display:flex;align-items:center;gap:var(--luft-2)}
.nav{margin-top:var(--luft-2)}
.nav a.aktiv{background:var(--akzent-sanft);border-color:var(--akzent)}

.haupt-inhalt{padding:var(--luft-4)}
.bereich{scroll-margin-top:140px;margin-bottom:var(--luft-8)}
.bereich>h2{margin:var(--luft-2) 0 var(--luft-4)}
.gruppe-kopf{display:flex;align-items:center;gap:var(--luft-2);margin:var(--luft-6) 0 var(--luft-3);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--matt)}
.gruppe-kopf .ik{font-size:16px;color:var(--akzent)}
.gruppe-kopf .zahl{margin-left:auto;text-transform:none;letter-spacing:0}
#hinweis:not(:empty){margin-bottom:var(--luft-4)}
#brandis-lage:not(:empty){margin-bottom:var(--luft)}
#brandis-lage .meldung+.meldung{margin-top:var(--luft-2)}

/* Kopfkennzahl */
.gross-wert small{font-size:18px;color:var(--matt)}
.wert-unter{margin:0;color:var(--text-2)}

/* Sondenkarte: ganze Karte ist ein Knopf */
button.karte{display:block;width:100%;text-align:left;color:var(--text);cursor:pointer;
  transition:border-color .15s}
button.karte:active{transform:scale(.98)}
.sonde.im-funk{border-color:var(--gruen)}
.sonde-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--luft-2);margin-bottom:var(--luft-2)}
.sonde-kopf .name{display:block}
.sonde-kopf .klein{display:block;color:var(--matt)}
.sonde .chip{flex:none}

/* Live-Funkliste */
.funk-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--luft-3);padding:var(--luft-2) 0;
  border-top:1px solid var(--rand)}
.funk-zeile:first-child{border-top:0}
.funk-zeile .name{color:var(--text)}
.funk-zeile .rechts{text-align:right}
.funk-zeile button{all:unset;cursor:pointer;color:var(--text);font-weight:700;min-height:24px}
.funk-zeile button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}

/* Aufklappbare Sondenliste */
.bereich[hidden]{display:none}
.sonden-liste{display:grid;gap:var(--luft-2);grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr));align-items:start}
details.sonde{background:var(--panel);border:1px solid var(--rand);border-radius:var(--r-mittel);min-width:0}
details.sonde.im-funk{border-color:var(--gruen)}
details.sonde.beendet{background:var(--grund);border-style:dashed}
details.sonde>summary{list-style:none;display:flex;align-items:center;gap:var(--luft-2);min-height:var(--ziel-min);
  padding:var(--luft-2) var(--luft-3);cursor:pointer;border-radius:var(--r-mittel)}
details.sonde>summary::-webkit-details-marker{display:none}
details.sonde>summary:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.sonde-name{flex:1;min-width:0;display:flex;flex-direction:column}
.sonde-name .klein{line-height:16px}
.sonde .chip{flex:none;padding:4px var(--luft-2)}
.pfeil{flex:none;display:grid;place-items:center;width:28px;height:28px;color:var(--matt);font-size:18px;transition:transform .15s}
details.sonde[open] .pfeil{transform:rotate(180deg)}
.sonde-inhalt{padding:0 var(--luft-3) var(--luft-3);border-top:1px solid var(--rand)}
.sonde-inhalt .knopf{margin-top:var(--luft-2)}

/* Kartenkopf mit Info-Knopf */
.karten-kopf .info{margin-left:auto;min-height:32px;min-width:var(--ziel-min);padding:0 var(--luft-2);border-radius:var(--r-voll);
  background:none;border:1px solid var(--rand);color:var(--akzent);font-size:12px;text-transform:none;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;gap:4px}
.karten-kopf .info .ik{color:var(--akzent)}
.haupt-zeile{display:flex;align-items:baseline;gap:var(--luft-3);flex-wrap:wrap;margin-bottom:var(--luft-2)}
.haupt-zeile .gross-wert{margin:0}
.stufe{font-weight:700}
.stufe.gruen{color:var(--gruen)} .stufe.orange{color:var(--orange)} .stufe.rot{color:var(--rot)}

/* Mini-Verlauf (SVG) */
.verlauf{display:block;width:100%;height:56px;margin-top:var(--luft-2)}
.verlauf rect{fill:var(--akzent)}
.verlauf rect.max{fill:var(--gold)}
.verlauf text{fill:var(--matt);font-size:9px;font-family:var(--font-anzeige)}

/* NASA-Bild des Tages */
.apod-karte{display:grid;gap:var(--luft-4);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;margin-top:var(--luft)}
.apod-bild{all:unset;display:block;cursor:zoom-in;border-radius:var(--r-mittel);overflow:hidden;background:var(--grund-tief)}
.apod-bild:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.apod-bild img{display:block;width:100%;max-height:420px;object-fit:cover}
.apod-video{cursor:default;padding:var(--luft-6);text-align:center}
.apod-titel{margin:0 0 2px}
.apod-text p{margin:0 0 var(--luft-2)}
.popup-bild.apod-gross{max-height:70vh;object-fit:contain;background:var(--grund-tief)}
@media (max-width:760px){.apod-karte{grid-template-columns:1fr}}

/* Wettervorhersage */
.vorhersage{margin-bottom:var(--luft)}
.tage{display:grid;gap:var(--luft-2);grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
.tag{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--luft-3);border-radius:var(--r-mittel);
  background:var(--panel-2);border:1px solid var(--rand);min-width:0}
.tag.heute{border-color:var(--akzent)}
.tag .ik{font-size:26px;color:var(--akzent);margin:2px 0}
.tag .temp{font-family:var(--font-anzeige);font-size:18px;white-space:nowrap}
.tag .temp small{color:var(--matt);font-size:14px}

/* Popup */
.popup-grund[hidden]{display:none}
.meldung .info{margin-left:var(--luft-2);min-height:32px;padding:0 var(--luft-3);border-radius:var(--r-voll);
  background:none;border:1px solid currentColor;color:var(--text)}
.karten-raster{align-items:start}
.popup-bild{display:block;width:100%;max-height:260px;object-fit:cover;border-radius:var(--r-mittel);margin-bottom:var(--luft-3);
  background:var(--panel-2)}
.popup p{margin:0 0 var(--luft-3)}
.popup .orbit-bild{margin-bottom:var(--luft-3)}
body.popup-offen{overflow:hidden}

.fuss{padding:var(--luft-4) var(--luft-4) var(--luft-8);border-top:1px solid var(--rand)}
.fuss p{margin:0 0 var(--luft-2)}
.link-zeile a{display:inline-flex;align-items:center;min-height:var(--ziel-min)}

@media (max-width:640px){
  .kopf{position:static}
  .kopf .titel{font-size:22px;line-height:28px}
  .bereich{scroll-margin-top:16px}
  .gross-wert{font-size:32px}
}