/* Gemeinschaft (docs/16 Abschnitt 13 bis 15): Verband, Patenschaft, Community-Großlage.
   Dieselbe Karte in der Weltübersicht (lage.css) und im Fenster der Leitstelle (app.css);
   die Farben kommen deshalb über eigene Variablen aus dem jeweiligen Umfeld. */

.gem {
  --g-bg: var(--panel-2); --g-raised: var(--panel); --g-line: var(--line); --g-ink: var(--text);
  --g-muted: var(--muted); --g-accent: var(--accent); --g-ok: var(--ok); --g-danger: #ff7a70;
  --g-btn: var(--accent); --g-btn-text: #111418; --g-blau: #7fb6ff;
  display: flex; flex-direction: column; gap: .7rem; color: var(--g-ink);
  background: var(--g-bg); border: 1px solid var(--g-line); border-radius: 12px; padding: .9rem 1rem;
  min-width: 0;
}
.lage-seite .gem {
  --g-bg: var(--l-surface); --g-raised: var(--l-raised); --g-line: var(--l-line); --g-ink: var(--l-ink);
  --g-muted: var(--l-muted); --g-accent: var(--l-amber); --g-ok: var(--l-free); --g-danger: var(--l-danger);
  --g-btn: var(--l-btn); --g-btn-text: var(--l-btn-text); --g-blau: #2f6fca;
  font-family: var(--l-sans); box-shadow: var(--l-shadow);
}
.gem.gem-fenster { border: 0; padding: 0; background: transparent; }

.gem-welt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--g-muted); font-weight: 600; }
.gem-leise { color: var(--g-muted); font-size: 13px; }
.gem-meldung { margin: 0; padding: .45rem .7rem; border-radius: 8px; font-size: 14px; border: 1px solid var(--g-line); }
.gem-meldung.gut { border-color: var(--g-ok); }
.gem-meldung.warn { border-color: var(--g-danger); }

.gem-block { display: flex; flex-direction: column; gap: .55rem; padding-top: .55rem; border-top: 1px solid var(--g-line); }
.gem-block:first-of-type { border-top: 0; padding-top: 0; }
.gem-kopf { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gem-kopf h3 { margin: 0; font-size: 17px; }

.gem-chip { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; font-size: 12px;
            border: 1px solid var(--g-line); color: var(--g-muted); white-space: nowrap; }
.gem-chip.an { border-color: var(--g-accent); color: var(--g-ink); }
.gem-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.gem-marke { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--g-blau); }

.gem-lage { display: flex; flex-direction: column; gap: .4rem; padding: .6rem .7rem; border-radius: 10px;
            border: 1px solid var(--g-blau); background: var(--g-raised); }
.gem-lage-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.gem-auswertung { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; font-size: 14px; }
.gem-auswertung li { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.gem-auswertung li.meiner { font-weight: 600; }

.gem-ziel { display: flex; flex-direction: column; gap: .3rem; padding: .55rem .7rem; border-radius: 10px; background: var(--g-raised);
            border: 1px solid var(--g-line); }
.gem-ziel-kopf { display: flex; justify-content: space-between; gap: .6rem; font-weight: 600; }
.gem-zahl { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gem-balken { height: 6px; border-radius: 3px; background: var(--g-line); overflow: hidden; }
.gem-balken > span { display: block; height: 100%; background: var(--g-accent); border-radius: 3px; }
.gem-ziel.fertig .gem-balken > span { background: var(--g-ok); }

.gem-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.gem-stats > div { display: flex; flex-direction: column; }
.gem-stat { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gem-gesamt { grid-column: 1 / -1; }

.gem-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.gem-liste li, .gem-anfrage, .gem-pate { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem;
  padding: .4rem .55rem; border-radius: 8px; background: var(--g-raised); border: 1px solid var(--g-line); }
.gem-name { font-weight: 600; }
.gem-kreise { flex: 1 1 140px; min-width: 0; }
.gem-aktionen { display: inline-flex; gap: .35rem; margin-left: auto; flex-wrap: wrap; }
.gem-stufen { display: flex; gap: .35rem; flex-wrap: wrap; }
.gem-stufe { font-size: 12px; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--g-line); color: var(--g-muted); }
.gem-stufe.erreicht { border-color: var(--g-ok); color: var(--g-ink); }
.gem-stufe.verfehlt { text-decoration: line-through; }

.gem-reihe { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; }
.gem-ende { justify-content: flex-end; }
.gem-feld { flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 0 .7rem; border-radius: 9px; border: 1px solid var(--g-line);
            background: var(--g-raised); color: var(--g-ink); font: inherit; font-size: 14px; }
.gem-knopf { min-height: 44px; padding: 0 .9rem; border-radius: 9px; border: 1px solid transparent; cursor: pointer;
             background: var(--g-btn); color: var(--g-btn-text); font: inherit; font-size: 14px; font-weight: 600; }
.gem-knopf:disabled { opacity: .5; cursor: not-allowed; }
.gem-knopf.zweit { background: transparent; border-color: var(--g-line); color: var(--g-ink); }
.gem-knopf.leise { background: transparent; color: var(--g-muted); font-weight: 500; }
.gem-knopf.gefahr { background: transparent; color: var(--g-danger); font-weight: 500; }

/* Weltübersicht: ein Raster aus Karten je Welt. */
.wel-gemeinschaft { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }

/* Fenster „Verband“ in der Leitstelle. */
.gem-modal { width: min(720px, 96vw); max-height: 88dvh; }
.gem-modal .modal-body { overflow-y: auto; }
@media (max-width: 1024px) {
  .gem-modal { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}
@media (max-width: 420px) {
  .wel-gemeinschaft { grid-template-columns: 1fr; }
  .gem-stat { font-size: 17px; }
}