/* 40k GameDay – mobile-first (ab 375px / iPhone 6S) */
:root {
  --bg: #0e0f13;
  --surface: #181a21;
  --surface-2: #20232c;
  --border: #2c303b;
  --text: #e7e9ee;
  --muted: #9aa0ad;
  --accent: #c8962b;       /* gold */
  --accent-2: #b1391f;     /* rot */
  --danger: #e05a4a;
  --ok: #4caf7d;
  --radius: 12px;
  --tap: 44px;             /* Mindest-Touchziel */

  /* Faction-Farben – perzeptuell helligkeitsangeglichen (OKLab-L = 0.50);
     HSV = ursprüngliche Quellfarbe (Kommentar), wirksamer Wert in hsl(). */
  --color-space-marines: hsl(210, 55%, 40%);  /* hsv(208, 88%, 51%) – Macragge Blue */
  --color-blood-angels: hsl(0, 74%, 41%);  /* hsv(0, 85%, 72%) – Baal Crimson */
  --color-dark-angels: hsl(151, 22%, 35%);  /* hsv(154, 60%, 26%) – Caliban Green */
  --color-space-wolves: hsl(201, 18%, 39%);  /* hsv(201, 24%, 60%) – Fenrisian Gray-Blue */
  --color-black-templars: hsl(210, 3%, 39%);  /* hsv(210, 11%, 16%) – Zealot Black-Grey */
  --color-grey-knights: hsl(109, 9%, 38%);  /* hsv(109, 12%, 60%) – Titan Steel */
  --color-deathwatch: hsl(210, 4%, 39%);  /* hsv(210, 11%, 23%) – Inquisitorial Slate */
  --color-adeptus-custodes: hsl(44, 100%, 25%);  /* hsv(46, 75%, 83%) – Auric Gold */
  --color-adepta-sororitas: hsl(3, 45%, 43%);  /* hsv(1, 75%, 48%) – Martyr Rose */
  --color-astra-militarum: hsl(89, 15%, 36%);  /* hsv(89, 30%, 36%) – Cadian Khaki Green */
  --color-adeptus-mechanicus: hsl(360, 52%, 44%);  /* hsv(359, 73%, 62%) – Martian Core Red */
  --color-imperial-knights: hsl(213, 34%, 42%);  /* hsv(213, 72%, 36%) – Chivalric Cobalt */
  --color-imperial-agents: hsl(36, 100%, 28%);  /* hsv(36, 68%, 87%) – Inquisitorial Gold */
  --color-chaos-space-marines: hsl(301, 6%, 40%);  /* hsv(300, 35%, 10%) – Undivided Obsidian */
  --color-death-guard: hsl(73, 35%, 31%);  /* hsv(73, 52%, 42%) – Nurgle Rot */
  --color-world-eaters: hsl(11, 50%, 41%);  /* hsv(11, 89%, 44%) – Butcher's Blood */
  --color-thousand-sons: hsl(173, 100%, 24%);  /* hsv(174, 100%, 66%) – Tzeentch Turquoise */
  --color-chaos-daemons: hsl(293, 31%, 42%);  /* hsv(293, 69%, 37%) – Warpfire Purple */
  --color-chaos-knights: hsl(234, 12%, 43%);  /* hsv(235, 35%, 26%) – Desecrator Iron */
  --color-emperors-children: hsl(321, 100%, 36%);  /* hsv(325, 73%, 94%) – Slaanesh Pink */
  --color-orks: hsl(113, 50%, 31%);  /* hsv(113, 70%, 44%) – Waaagh! Green */
  --color-aeldari: hsl(31, 100%, 30%);  /* hsv(27, 60%, 96%) – Spiritstone Amber */
  --color-drukhari: hsl(193, 62%, 32%);  /* hsv(191, 100%, 45%) – Kabalite Teal */
  --color-harlequins: hsl(274, 52%, 47%);  /* hsv(272, 51%, 100%) – Prism Magenta */
  --color-ynnari: hsl(356, 100%, 37%);  /* hsv(0, 82%, 84%) – Reborn Crimson */
  --color-necrons: hsl(120, 100%, 26%);  /* hsv(111, 92%, 100%) – Gauss Neon Green */
  --color-tau-empire: hsl(52, 22%, 34%);  /* hsv(52, 18%, 92%) – Vior'la Ochre */
  --color-leagues-of-votann: hsl(20, 100%, 34%);  /* hsv(31, 100%, 97%) – Kin-Host Orange */
  --color-tyranids: hsl(268, 54%, 49%);  /* hsv(266, 60%, 90%) – Hive Chitin Purple */
  --color-genestealer-cults: hsl(243, 37%, 51%);  /* hsv(246, 63%, 55%) – Subterranean Indigo */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  min-height: 100dvh;
}

.app { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

/* Responsive: breitere Spalte auf Tablets/Desktop (mobile-first bleibt Default) */
@media (min-width: 700px) {
  .app { max-width: 760px; }
  .bottomnav { max-width: 760px; }
}
@media (min-width: 1100px) {
  .app { max-width: 900px; }
  .bottomnav { max-width: 900px; }
}

/* Karten-Raster: ab Tablet zweispaltig */
.hub { display: grid; gap: 16px; }
.hub > .card { margin-bottom: 0; }
@media (min-width: 700px) {
  .hub { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Masonry-Spalten für ungleich hohe Karten (Statistik, Listen) */
.cols { column-gap: 16px; }
.cols > .card, .cols > details.card { break-inside: avoid; }
@media (min-width: 700px) { .cols { column-count: 2; } }
.cols > .sp-premium { column-span: all; border-color: var(--accent); }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top) 16px 0;
  height: calc(56px + env(safe-area-inset-top));
  background: linear-gradient(#14161c, #14161cdd);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.brand { font-weight: 800; letter-spacing: .5px; font-size: 20px;
  background: none; border: none; color: var(--text); padding: 6px 2px; cursor: pointer; }
.brand-accent { color: var(--accent); margin-left: 2px; }

.topbar-right { display: flex; gap: 8px; align-items: center; }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
#bellBtn { position: relative; }
#bellBtn .badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  box-sizing: border-box; border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
#bellBtn .badge.hidden { display: none; }
.card-unread { border-left: 3px solid var(--accent); }
.icon-btn {
  min-width: var(--tap); min-height: var(--tap);
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 18px;
}
.icon-btn:active { background: var(--border); }

.view { flex: 1; padding: 20px 16px calc(96px + env(safe-area-inset-bottom)); }

/* --- Bottom-Navigation (Daumen) --- */
.bottomnav {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 560px; z-index: 40;
  display: flex; justify-content: space-around;
  background: linear-gradient(#14161cdd, #14161c);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(6px);
}
.bottomnav button {
  position: relative;
  flex: 1; background: none; border: none; color: var(--muted);
  font: inherit; font-size: 11px; padding: 8px 4px;
  min-height: 56px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bottomnav button .bn-ico { font-size: 20px; line-height: 1; }
.bottomnav button.active { color: var(--accent); }
.bottomnav button:active { background: var(--surface-2); }
.bottomnav .badge {
  position: absolute; top: 4px; left: calc(50% + 7px);
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 9px; background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.bottomnav .badge.hidden { display: none; }
.loading { color: var(--muted); text-align: center; padding: 40px 0; }

h1 { font-size: 22px; margin: 4px 0 4px; }
.sub { color: var(--muted); margin: 0 0 22px; }

.section-title {
  font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); margin: 24px 4px 10px; font-weight: 700;
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px;
}

label { display: block; font-size: 14px; color: var(--muted); margin: 12px 0 6px; }
input {
  width: 100%; min-height: var(--tap);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 16px;  /* >=16px verhindert iOS-Zoom */
}
input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
input[type="datetime-local"] { min-width: 0; }

select, textarea {
  width: 100%; min-height: var(--tap);
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 16px;
}
textarea { resize: vertical; line-height: 1.5; font-family: inherit; }
textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

.btn {
  width: 100%; min-height: var(--tap); margin-top: 18px;
  border: none; border-radius: 10px; font-size: 16px; font-weight: 700;
  background: var(--accent); color: #1a1206;
}
.btn { cursor: pointer; }
.btn:active { filter: brightness(.92); }
.btn[disabled] { opacity: .6; }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border); margin-top: 12px; font-weight: 600;
}
.btn-ok { background: var(--ok); color: #07120c; }

.switch { text-align: center; margin-top: 18px; color: var(--muted); font-size: 14px; }
.link { color: var(--accent); background: none; border: none; font: inherit; cursor: pointer; padding: 4px; }

.pill { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 999px;
        background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); }
.pill-role { color: var(--accent); border-color: #4a3c14; }

.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.list-row:first-child { border-top: none; }
.list-row .who { min-width: 0; }
.list-row .who b { display: block; }
.list-row .who small { color: var(--muted); word-break: break-all; }
.list-row .btn { width: auto; margin: 0; padding: 8px 14px; min-height: 38px; }

.empty { color: var(--muted); text-align: center; padding: 24px 0; }

.toast {
  position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); padding: 10px 16px; border-radius: 10px;
  max-width: 90%; box-shadow: 0 8px 24px #0008; z-index: 50;
}
.toast.err { border-color: var(--danger); }
.toast.ok { border-color: var(--ok); }

/* --- Statistik / Charts --- */
.stat-totals { display: flex; justify-content: space-around; text-align: center; }
.stat-totals b { display: block; font-size: 26px; color: var(--accent); }
.stat-totals small { color: var(--muted); font-size: 12px; }

.mu-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.mu-name { flex: 1; min-width: 0; }
.mu-val { flex: 0 0 auto; color: var(--muted); }
.mu-vs { color: var(--muted); }
.fac-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fac-grid .fac-sw { aspect-ratio: 1 / 1; border-radius: 4px; }
.fac-grid.gray { gap: 0; }
.fac-grid.gray .fac-sw { filter: grayscale(1); border-radius: 0; }
.fac-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%;
  margin-right: .35em; vertical-align: baseline; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.faclink { color: var(--accent); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--accent); }
.faclink:hover { text-decoration: none; opacity: .85; }
.rank { flex: 0 0 auto; width: 22px; text-align: right; color: var(--muted); }

.stickyfilter {
  position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 9;
  margin: 0 0 12px; padding: 8px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.stickyfilter input { margin: 0; }

/* ---------------- Stammdaten kompakt ---------------- */
.sd-grp { margin-top: 14px; }
.sd-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--border); }
.sd-grp > .sd-row:first-of-type { border-top: none; }
.sd-row input[type=text] { flex: 1; min-width: 130px; margin: 0; }
.sd-row select { width: auto; margin: 0; }
.sd-num { width: 70px; margin: 0; }
.sd-chk { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; color: var(--muted); }
.sd-chk input { width: auto; min-height: auto; margin: 0; }
.sd-del { width: auto; margin: 0; padding: 4px 8px; min-height: auto; border: 1px solid var(--border);
  background: transparent; color: var(--danger); border-radius: 8px; cursor: pointer; }
.sd-comps { margin: 2px 0 8px 14px; }
.sd-comp { display: flex; gap: 6px; align-items: center; padding: 2px 0; }
.sd-new { border-left: 3px solid var(--accent); padding-left: 6px; }
.sd-body summary { cursor: pointer; }

/* Klebende Überschriften: Faction-Name direkt unter dem Header, Sektion darunter */
.sd-fac > summary {
  position: sticky; top: var(--sd-top, calc(56px + env(safe-area-inset-top))); z-index: 7;
  background: var(--surface); border-bottom: 1px solid var(--border); padding: 6px 0;
}
.sd-h {
  position: sticky; top: var(--sd-sec, calc(56px + env(safe-area-inset-top) + 44px)); z-index: 6;
  background: var(--surface); font-weight: 700; padding: 6px 0; margin: 0;
  border-bottom: 1px solid var(--border); cursor: pointer;
}

/* ---------------- Raum-Dashboard (Monitor) ----------------
   Größen relativ zur CONTENT-BOX via Container-Queries (cqh/cqw),
   damit es im Vollbild groß und in der normalen Ansicht entsprechend
   kleiner skaliert. Funktioniert in beiden Modi identisch proportioniert. */
.dash-bar { display: flex; gap: 1vw; margin-bottom: 1.2vh; position: relative; z-index: 5; }
.dash-bar .btn { width: auto; margin: 0; padding: 1vh 2.4vh; cursor: pointer; user-select: none; }

.dash { position: relative; z-index: 1; height: 78vh; display: flex; flex-direction: column;
  overflow: hidden; container-type: size; container-name: dash; }
.dash:fullscreen { height: 100%; padding: 3vh 3vw; background: var(--bg); }

/* Layout-Wurzeln füllen die Höhe */
.dash-single, .dash-split, .dash-main { flex: 1; min-height: 0; }
.dash-single { display: flex; flex-direction: column; gap: 3cqh; }
.dash-single.center, .dash-msg.center { justify-content: center; align-items: center; text-align: center; }
.dash-msg { font-size: min(6cqh, 3.8cqw); font-weight: 700; line-height: 1.25; text-align: center; }

.dash-countdown { text-align: center; }
.cd-val { font-size: min(22cqh, 17cqw); font-weight: 800; color: var(--accent); line-height: 1;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-cap { font-size: min(3.6cqh, 2.3cqw); color: var(--muted); margin-top: .3em; text-transform: uppercase; letter-spacing: .08em; }

.dash-seco { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dash-seco h2, .dash-side h2 { font-size: min(4cqh, 2.6cqw); margin: 0 0 .4em; }
.dash-empty { color: var(--muted); font-size: min(3.6cqh, 2.3cqw); }

.dash-att { display: flex; flex-direction: column; gap: .6cqh; min-height: 0; overflow: hidden; }
.att-row { display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
  font-size: min(3.4cqh, 2.2cqw); padding: .3em 0; border-bottom: 0.25cqh solid var(--border); }
.att-st { flex: 0 0 auto; font-weight: 700; }
.att-st.ok { color: var(--ok, #4caf7d); }
.att-st.wait { color: var(--muted); }

/* Tische: zweispaltig, rechte Spalte gespiegelt, Reihen füllen die Höhe */
.dash-tables { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr; gap: 2cqh 2cqw; }
.tcard { position: relative; overflow: hidden; min-height: 0;
  background: var(--surface); border: 0.25cqh solid var(--border); border-radius: 2cqh; }
/* Tischnummer mittig (horizontal + vertikal). */
.tcard .tnum { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1;
  font-family: Verdana, Tahoma, 'Segoe UI', sans-serif;
  font-size: min(19.8cqh, 12.6cqw); font-weight: 800; color: var(--accent); line-height: 1; }
/* Spieler in den Ecken; gleicher Rand-Abstand (oben links bzw. unten rechts). */
.tcard .tp { position: absolute; display: flex; flex-direction: column; max-width: 72%; z-index: 1; }
.tcard .tp-a { top: 1.9cqh; left: 2.4cqw;     align-items: flex-start; text-align: left; }
.tcard .tp-b { bottom: 1.9cqh; right: 2.4cqw;  align-items: flex-end;   text-align: right; }
.tcard .tp-name { font-size: min(5.3cqh, 3.5cqw); font-weight: 700; line-height: 1.1;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .tp-sub { font-size: min(2.7cqh, 1.8cqw); font-weight: 400; opacity: .75; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tcard.done { border-color: var(--ok, #4caf7d); background: color-mix(in srgb, var(--ok, #4caf7d) 16%, var(--surface)); }
.tcard.done .tnum { color: var(--ok, #4caf7d); }

/* --- Faction-Theming (Logos werden später geliefert; fehlen sie, bleibt es leer) --- */
/* Einzelspieler-Kachel: Faction-Farbe als Rahmen, Logo als dezenter Hintergrund. */
.fac-frame { position: relative; overflow: hidden; border: 0.25cqh solid var(--fac, var(--border)); }
.fac-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .12;
  background-image: var(--fac-logo); background-repeat: no-repeat;
  background-position: right center; background-size: contain;
}
.fac-frame > * { position: relative; z-index: 1; }

.att-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
  font-size: min(3.4cqh, 2.2cqw); padding: .45em .7em; margin-bottom: .6cqh;
  border-radius: 1cqh; background: var(--surface);
}

/* Matchup-Kachel: zwei Factions in gegenüberliegenden Ecken + zweifarbiger Rahmen. */
/* Rahmen als Verlauf, der die abgerundeten Ecken respektiert (border-box-Trick).
   Fill: 75 % opak in der Startecke → 50 % bei 48/52 % → bei 50 % vollständig transparent. */
.tcard.fac-matchup {
  border: calc(0.4cqh + 1px) solid transparent;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--fac-a, var(--border)) 75%, transparent) 0%,
      color-mix(in srgb, var(--fac-a, var(--border)) 50%, transparent) 48%,
      transparent 50%,
      color-mix(in srgb, var(--fac-b, var(--border)) 50%, transparent) 52%,
      color-mix(in srgb, var(--fac-b, var(--border)) 75%, transparent) 100%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg,
      var(--fac-a, var(--border)) 0%,
      color-mix(in srgb, var(--fac-a, var(--border)) 60%, transparent) 48%,
      transparent 50%,
      color-mix(in srgb, var(--fac-b, var(--border)) 60%, transparent) 52%,
      var(--fac-b, var(--border)) 100%) border-box;
}
/* Beide Symbole quadratisch, Kantenlänge = Box-Breite, vertikal zentriert.
   Links am linken, rechts am rechten Rand ausgerichtet (auf dem Text-Einzug).
   clip-path zeigt je nur die eigene Hälfte (48/52 %) → keine Überlappung. */
.tcard.fac-matchup::before, .tcard.fac-matchup::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .32;
  background-color: var(--bg);
  -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat;
  /* 1. Ebene: Symbol (Höhe 120 % Box, Breite aus SVG-Verhältnis); 2. Ebene: Diagonal-Schnitt
     mit identischem 135deg-Verlauf wie Rahmen/Fill bei 48/52 % → deckungsgleicher Schnitt. */
  -webkit-mask-size: auto 120%, 100% 100%; mask-size: auto 120%, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.tcard.fac-matchup::before {
  -webkit-mask-image: var(--logo-a), linear-gradient(135deg, #000 0 48%, transparent 48%);
  mask-image: var(--logo-a), linear-gradient(135deg, #000 0 48%, transparent 48%);
  -webkit-mask-position: left 5px center, center; mask-position: left 5px center, center; }
.tcard.fac-matchup::after  {
  -webkit-mask-image: var(--logo-b), linear-gradient(135deg, transparent 0 52%, #000 52%);
  mask-image: var(--logo-b), linear-gradient(135deg, transparent 0 52%, #000 52%);
  -webkit-mask-position: right 5px center, center; mask-position: right 5px center, center; }
.tcard.fac-matchup > * { z-index: 1; }

.dash-ticker { margin-top: auto; text-align: center; font-size: min(4.4cqh, 2.9cqw); font-weight: 600;
  color: var(--text); padding: 2cqh 1cqw; }

/* Spiel läuft + Folge-Runde/Abbau: 2/3 + 1/3 */
.dash-split { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5cqw; align-items: stretch; }
.dash-main { display: flex; flex-direction: column; gap: 2.5cqh; }
.dash-main .cd-val { font-size: min(18cqh, 11cqw); }
.dash-side { display: flex; flex-direction: column; gap: 1.8cqh; min-height: 0; overflow: hidden;
  border-left: 0.25cqw solid var(--border); padding-left: 2cqw; }
.dash-side .cd-val { font-size: min(11cqh, 5.5cqw); }
.dash-side .dash-tables { grid-template-columns: 1fr; }

/* Hochformat/Schmal: einspaltig, nicht gespiegelt */
@container dash (max-aspect-ratio: 1/1) {
  .dash-tables, .dash-split { grid-template-columns: 1fr; }
  .dash-tables .tcard:nth-child(even) { flex-direction: row; text-align: left; }
  .dash-side { border-left: none; padding-left: 0; border-top: 0.25cqh solid var(--border); padding-top: 1.8cqh; }
}

/* Balkendiagramm: gemeinsames Grid, damit Label-Spalte & Track-Skala über alle Zeilen gleich sind. */
.bars { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 8px; margin-top: 10px; }
.bars.numbered { grid-template-columns: auto auto 1fr auto; }
.bar-row { display: contents; }
.bar-label { font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { position: relative; height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 7px; min-width: 2px; }
.bar-val { font-size: 12px; color: var(--muted); min-width: 28px; text-align: right; }

/* Horizontal durchschaltbare Seiten (z. B. Faction-Listen) */
.pg-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pg-track::-webkit-scrollbar { display: none; }
.pg-panel { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; padding-top: 4px; }
.pg-dots { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.pg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); cursor: pointer; }
.pg-dot.active { background: var(--accent); }

/* Horizontales Box-Plot (Faction-Balance) */
.bx-list { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px 10px; font-size: 13px; }
.bx-row { display: contents; }
.bx-label { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bx-val { font-size: 12px; color: var(--muted); min-width: 28px; text-align: right; }
.bx-track { position: relative; height: 1.6em; }
.bx-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-50%); background: var(--border); }
.bx-whisker { position: absolute; top: 50%; height: 2px; background: var(--muted); transform: translateY(-50%); }
.bx-box { position: absolute; top: 50%; height: 1.1em; transform: translateY(-50%);
  background: var(--accent); border: 1px solid var(--accent); border-radius: 3px; }
.bx-median { position: absolute; top: 50%; height: 1.1em; width: 2px; transform: translate(-50%, -50%); background: var(--bg); }

.heatmap { display: grid; gap: 3px; margin-top: 10px; font-size: 11px; }
.hm-h { color: var(--muted); text-align: center; }
.hm-d { color: var(--muted); padding-right: 6px; display: flex; align-items: center; }
.hm-c { aspect-ratio: 1; border-radius: 4px; display: flex; align-items: center; justify-content: center;
        color: #1a1206; font-weight: 700; background: var(--surface-2); }

/* --- Akkordeon (Nutzerliste) --- */
details.acc > summary {
  cursor: pointer; list-style: none; position: relative; padding-right: 22px;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: '⌄'; position: absolute; right: 4px; top: 2px;
  color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s;
}
details.acc[open] > summary::after { transform: rotate(180deg); }
.acc-head { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Burger-Dropdown-Menü --- */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% - 6px); right: 16px; z-index: 60;
  min-width: 170px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 10px 28px #0009; overflow: hidden;
}
.menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text); font: inherit; font-size: 15px; padding: 13px 16px; min-height: var(--tap);
}
.menu button:active { background: var(--surface-2); }
.menu-sep { height: 1px; background: var(--border); }

/* --- Selbsteinschätzungs-Matrix (Bubble-Heatmap) --- */
.amx { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 6px; align-items: center; margin-top: 10px; }
.amx .ylab { font-size: 11px; color: var(--muted); padding-right: 6px; text-align: right; }
.amx .cell { aspect-ratio: 1; background: var(--surface-2); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; }
.amx .bub { display: block; border-radius: 50%; background: var(--accent); min-width: 6px; min-height: 6px; }
.amx .xlab { font-size: 11px; color: var(--muted); text-align: center; }
.amx .corner { }

/* Responsive-Overrides am Ende, damit sie die Basis-Regeln (z. B. .bottomnav) überschreiben */
@media (min-width: 700px) { .app, .bottomnav { max-width: 760px; } }
@media (min-width: 1100px) { .app, .bottomnav { max-width: 900px; } }

.listtext {
  white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.45;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px; margin: 8px 0 0; max-height: 320px; overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Tischplan (Editor + Viewer) --- */
.vp-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.vp-bar .btn { padding: 8px 10px; }
.vp-wrap { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; touch-action: none; }
.vp-svg { display: block; width: 100%; height: auto; max-height: 70vh; }
.vp-bg { fill: var(--surface-2); }
.vp-grid { stroke: var(--border); stroke-width: 1; opacity: .5; }
.vp-scale { stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.vp-dim { fill: var(--muted); font-size: 18px; }
.vp-room { fill: color-mix(in srgb, var(--accent) 10%, transparent); stroke: var(--muted); stroke-width: 2; }
.vp-line { stroke: var(--muted); stroke-width: 3; stroke-linecap: round; }
.vp-rtext { fill: var(--text); font-size: 22px; }
.vp-tbl rect { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: var(--accent); stroke-width: 2; }
.vp-tnum { fill: var(--text); font-weight: 800; font-size: 30px; }
.vp-tlabel { fill: var(--muted); font-size: 16px; }
.vp-tbl.vp-mine rect { fill: color-mix(in srgb, var(--ok,#4caf7d) 35%, var(--surface)); stroke: var(--ok,#4caf7d); stroke-width: 3; }
.vp-tbl.vp-busy rect { fill: color-mix(in srgb, var(--danger) 28%, var(--surface)); stroke: var(--danger); }
.vp-tbl.vp-occupied rect { fill: var(--surface-2); stroke: var(--muted); }
.vp-edit .vp-sel, .vp-edit .vp-sel rect { outline: none; stroke: var(--accent); stroke-width: 4; stroke-dasharray: 6 4; }
.vp-edit [data-kind] { cursor: move; }
.vp-props { margin-top: 10px; }
.vp-prow { display: flex; flex-wrap: wrap; gap: 10px; }
.vp-f { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); flex: 1 1 80px; }
.vp-f input { min-height: 40px; }
.vp-sep { height: 1px; background: var(--border); margin: 10px 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { min-height: 40px; min-width: 40px; padding: 6px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 700; }
.chip.chip-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--text); }
.ci-cd.mono { font-family: ui-monospace, 'Roboto Mono', 'Courier New', monospace; font-variant-numeric: tabular-nums; }

/* Dashboard-Nachrichten: kompakte Zeilen */
.dm-list { display: flex; flex-direction: column; gap: 6px; }
.dm-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.dm-row.dm-off { opacity: .5; }
.dm-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-w { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; }
.dm-ic { flex: 0 0 auto; background: none; border: none; font-size: 18px; line-height: 1;
  padding: 6px; min-height: 40px; min-width: 40px; cursor: pointer; }

.hidden { display: none !important; }