/* gemeinschaften.css — die Fälle nebeneinander. */

/* ---- Farben lokal setzen, nicht aus dem Theme holen ----
   John, 2026-07-31: "auf dem dunklen Zeug kann man ein bisschen
   schlecht lesen, Kontrast erhoehen."

   Dieser Schirm setzt seinen Hintergrund fest auf dunkel. Die
   Textfarben kamen aber weiter aus dem Theme, und im Pergament-Theme
   sind die fuer helles Papier gemacht (--txt ist dort #33291a,
   dunkelbraun). Ergebnis: dunkel auf dunkel.

   Wer einen festen Grund setzt, muss auch die Schrift dazu setzen.
   Darum werden die Variablen hier im Container ueberschrieben: alle
   vorhandenen var(--txt) im Rest der Datei bekommen damit passende
   Werte, in jedem Theme. */
.gm {
  --txt:#f0f4fb; --les:#c9d7ee; --mut:#93a6c6; --dim:#6d7f9e;
  --panel:#111b2f; --panel2:#16233c; --panel3:#1f3054;
  --tief:#0b1322; --line:#2c4270;
  --gelb:#ffd83d; --cyan:#5ff7ff; --rot:#ff7b86; --lila:#c08bff; --gruen:#8ceb62;
}

.gm{
  position:fixed; inset:0; z-index:68; overflow:auto;
  background:linear-gradient(180deg,#070c15,#0b1220 60%,#080d18);
  color:var(--txt); font-family:inherit;
}
.gm[hidden]{display:none}
.gm h3{
  margin:0 0 10px; font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan);
}
.gm h4{margin:0 0 6px; font-size:11px; color:var(--les)}

.gm-kopf{
  position:sticky; top:0; z-index:2; display:flex; justify-content:space-between;
  align-items:center; gap:14px; padding:12px 16px; background:rgba(8,13,24,.94);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
}
.gm-kopf b{display:block; font-size:14px}
.gm-kopf span{font-size:11px; color:var(--mut)}
.gm-knoepfe{display:flex; gap:8px}
.gm-filter,.gm-zu{
  font-family:inherit; cursor:pointer; background:var(--tief); color:var(--txt);
  border:1px solid var(--line); border-radius:8px; padding:7px 12px; font-size:11px;
}
.gm-filter:hover,.gm-zu:hover{border-color:var(--gelb)}

.gm-inhalt{padding:16px; display:flex; flex-direction:column; gap:18px; max-width:1400px; margin:0 auto}
.gm-guete,.gm-zahlen,.gm-strahl,.gm-liste{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px;
}

/* Datenqualität */
.gm-balken{display:flex; height:22px; border-radius:6px; overflow:hidden; gap:1px}
.gm-stueck{
  display:flex; align-items:center; justify-content:center; font-size:9px;
  color:#0b1420; font-weight:700; letter-spacing:.5px; white-space:nowrap; overflow:hidden;
}
.gm-warn{margin:10px 0 0; font-size:11px; line-height:1.6; color:var(--mut)}
.gm-warn b{color:var(--les)}
.gm-warn code{font-family:ui-monospace,Menlo,monospace; color:var(--cyan)}
.gm-recht{border-left:2px solid var(--cyan); padding-left:10px}

/* Kennzahlen */
.gm-kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px}
.gm-kachel{background:var(--tief); border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.gm-kachel i{display:block; font-style:normal; font-size:9px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--mut)}
.gm-kachel b{display:block; font-size:19px; font-weight:300; margin-top:2px}
.gm-verteilung{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:14px}
.gm-vzeile{display:grid; grid-template-columns:130px minmax(0,1fr) 24px; gap:8px;
  align-items:center; font-size:11px; color:var(--les); padding:2px 0}
.gm-vbahn{height:8px; background:rgba(255,255,255,.06); border-radius:99px}
.gm-vbahn i{display:block; height:100%; background:var(--cyan); border-radius:99px}
.gm-vzeile b{text-align:right; font-size:11px}

/* Zeitstrahl */
.gm-strahlzeile{display:grid; grid-template-columns:170px minmax(0,1fr) 44px; gap:10px;
  align-items:center; height:24px}
.gm-sname{font-size:11px; color:var(--les); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gm-sbahn{position:relative; height:2px; background:rgba(255,255,255,.08); border-radius:99px}
.gm-punktgross{position:absolute; top:50%; border-radius:99px; opacity:.85}
.gm-sjahr{font-size:10px; color:var(--mut); font-family:ui-monospace,Menlo,monospace; text-align:right}
.gm-skala{display:grid; grid-template-columns:170px minmax(0,1fr) 44px; gap:10px; margin-top:4px}
.gm-skalaband{display:flex; justify-content:space-between}
.gm-skalaband i{font-style:normal; font-size:9px; color:var(--mut)}

/* Tabelle */
.gm-tab{display:flex; flex-direction:column; gap:2px; overflow-x:auto}
.gm-zeile{
  display:grid; gap:8px; align-items:center; padding:7px 8px; border-radius:8px;
  grid-template-columns:190px 62px 78px 62px 68px 130px 110px 150px 84px;
  min-width:940px;
}
.gm-zeile:nth-child(even){background:rgba(255,255,255,.025)}
.gm-thead{font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mut)}
.gm-thead button{
  background:none; border:0; color:var(--mut); font-family:inherit; font-size:9px;
  letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; padding:0;
}
.gm-thead button:hover{color:var(--gelb)}
.gm-zeile > span{font-size:11px; color:var(--les); min-width:0}
.gm-nam b{display:block; font-size:12px; color:var(--txt)}
.gm-nam i{display:block; font-style:normal; font-size:9px; color:var(--mut)}
.gm-wert{display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums}
.gm-punkt{width:6px; height:6px; border-radius:99px; display:inline-block; flex:0 0 auto}
.gm-fehlt{color:var(--mut); font-style:italic}
.gm-notiz{grid-column:1 / -1; font-size:10px; line-height:1.5; color:var(--mut);
  border-left:2px solid var(--line); padding-left:9px; margin-top:2px}
.gm-start{
  font-family:inherit; cursor:pointer; background:var(--gelb); color:#12161f; border:0;
  border-radius:99px; padding:5px 10px; font-size:10px; font-weight:700; white-space:nowrap;
}
.gm-start:hover{filter:brightness(1.1)}

@media (max-width:760px){
  .gm-strahlzeile,.gm-skala{grid-template-columns:110px minmax(0,1fr) 36px}
  .gm-inhalt{padding:10px}
}