:root {
  --brand: #0A7480;
  --ink: #0F1F1E;
  --paper: #F1F4F4;
  --surface: #FFFFFF;
  --surface-2: #E9EEEE;
  --muted: #566768;
  --faint: #7C8D8E;
  --line: #CBD6D6;
  --line-soft: #E0E7E7;
  --ok: #2C6638;
  --ok-bg: #E2EFE4;
  --warn: #8C5406;
  --warn-bg: #F7EBD8;
  --crit: #97292B;
  --crit-bg: #F7E4E4;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(15,31,30,.06), 0 10px 28px -20px rgba(15,31,30,.4);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0D1516;
    --surface: #141E20;
    --surface-2: #1C2829;
    --ink: #E4EDEC;
    --muted: #A2B4B4;
    --faint: #7A8C8D;
    --line: #2A3A3C;
    --line-soft: #202E30;
    --ok: #74C283;
    --ok-bg: #17291B;
    --warn: #D9A443;
    --warn-bg: #2F2412;
    --crit: #E38181;
    --crit-bg: #311B1B;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.9);
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

h1 { font-size: 26px; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.015em; }
h2 { font-size: 19px; line-height: 1.25; margin: 30px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 16px; margin: 20px 0 8px; }
p  { margin: 0 0 12px; }

.lead { color: var(--muted); margin: 0 0 22px; max-width: 70ch; }

/* ---------- Kopfzeile ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar .logo { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 16px; letter-spacing: -.01em; }
.topbar .logo img { height: 26px; display: block; }
.topbar nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 14.5px; }
.topbar nav a:hover { color: var(--brand); }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.who { color: var(--muted); font-size: 14px; text-decoration: none; }
.who:hover { color: var(--brand); }
.bereich-picker { display: flex; align-items: center; gap: 7px; }
.bereich-picker label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: .07em; }
.bereich-single { font-size: 14px; color: var(--muted); }

main { max-width: 900px; margin: 0 auto; padding: 28px 22px 70px; }
main.wide { max-width: 1240px; }

/* Der Weg zurück. Steht über der Überschrift, weil man ihn dort sucht, und
   hat eine große Trefferfläche, damit er auch am Telefon zu treffen ist. */
.zurueck {
  display: inline-flex; align-items: center; gap: 7px;
  margin: -6px 0 16px; padding: 7px 12px 7px 8px;
  border-radius: 8px;
  color: var(--muted); font-size: 14px; text-decoration: none;
  transition: background .12s, color .12s;
}
.zurueck::before { content: "\2190"; font-size: 16px; line-height: 1; }
/* Grauwert statt Schwarz oder Weiß: der eine Wert sitzt im hellen wie im
   dunklen Aussehen richtig, dafür braucht es keine zweite Regel. */
.zurueck:hover { background: rgba(127,127,127,.16); color: var(--ink); }
.zurueck:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body.bare main { max-width: 560px; padding-top: 56px; }

.pagefoot { text-align: center; padding: 0 22px 32px; color: var(--faint); font-size: 13px; display: flex; gap: 10px; justify-content: center; }
.pagefoot a { color: var(--faint); }

/* ---------- Karten und Listen ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
}
.card.pad-0 { padding: 0; overflow: hidden; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: none; }
.row .main { min-width: 0; }
.row .title { font-weight: 600; }
.row .sub { color: var(--faint); font-size: 13.5px; }
.row .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.empty { padding: 34px 20px; text-align: center; color: var(--faint); }

/* ---------- Statuspillen ---------- */

.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.pill.geplant       { background: var(--surface-2); color: var(--muted); }
.pill.laufend       { background: var(--ok-bg); color: var(--ok); }
.pill.verarbeitung  { background: var(--warn-bg); color: var(--warn); }
.pill.entwurf       { background: var(--warn-bg); color: var(--warn); }
.pill.freigegeben   { background: var(--ok-bg); color: var(--ok); }
.pill.kunde_sichtbar{ background: var(--ok-bg); color: var(--ok); }
.pill.fehler        { background: var(--crit-bg); color: var(--crit); }
.pill.verworfen     { background: var(--surface-2); color: var(--faint); }

/* ---------- Formulare ---------- */

label.field { display: block; margin-bottom: 14px; }
label.field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
label.field > small { display: block; color: var(--faint); font-size: 12.5px; margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=url],
input[type=number], input[type=datetime-local], select, textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}
.field-row { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.btn {
  display: inline-block;
  padding: 9px 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-quiet { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--crit); border-color: var(--crit); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: 13.5px; }
.btnbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---------- Hinweise ---------- */

.notice { border-radius: var(--radius); padding: 13px 16px; margin: 0 0 18px; border-left: 3px solid var(--muted); background: var(--surface-2); }
.notice strong { display: block; margin-bottom: 3px; }
.notice p { margin: 0; font-size: 14.5px; }
.notice.ok   { background: var(--ok-bg);   border-left-color: var(--ok);   }
.notice.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.notice.crit { background: var(--crit-bg); border-left-color: var(--crit); }

.mono { font-family: var(--mono); font-size: 13px; word-break: break-all; }
.copybox { display: flex; gap: 8px; align-items: stretch; }
.copybox input { font-family: var(--mono); font-size: 13px; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; }
.scroll-x { overflow-x: auto; }

/* ---------- Beitrittsseite ---------- */

.join-wrap { max-width: 520px; margin: 0 auto; }
.join-brand { text-align: center; margin-bottom: 26px; }
.join-brand img { max-height: 46px; }
.join-brand .name { font-size: 20px; font-weight: 700; }
.consent { background: var(--surface-2); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; font-size: 14.5px; }
.consent ul { margin: 8px 0 0; padding-left: 18px; }
.consent li { margin-bottom: 5px; }
.checkline { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; }
.checkline input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.checkline label { font-size: 14.5px; }

/* ---------- Besprechungsraum ---------- */

body.room {
  background: #0B1112;
  color: #E6EEEE;
  /* dvh statt vh: auf dem Handy wandert die Browserleiste, mit vh liegt
     die Bedienleiste dauerhaft unter der Adresszeile und ist nicht
     antippbar. Das war der Grund, warum mobil keine Knoepfe gingen. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
body.room main { max-width: none; padding: 0; }

.room-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.room-head {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 9px 14px;
  padding-top: calc(9px + env(safe-area-inset-top));
  background: #121B1D; border-bottom: 1px solid #22302F; flex: none;
}
.room-head .rtitle { font-weight: 600; font-size: 15px; }
.room-head .spacer { flex: 1; }
.room-head .brandname { font-size: 13px; opacity: .65; }

.rec-dot {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(151,41,43,.2); color: #F0A0A0;
  padding: 4px 11px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
}
.rec-dot i { width: 9px; height: 9px; border-radius: 50%; background: #E05B5B; display: block; animation: pulse 2s infinite; }
.rec-dot.ruhig { background: rgba(120,130,130,.2); color: #B9C6C6; }
.rec-dot.ruhig i { background: #8AA0A0; animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-dot i { animation: none; } }

/* ---------- Banner ---------- */

.rbanner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 14px; font-size: 14.5px; flex: none;
  border-bottom: 1px solid #22302F;
}
.rbanner .txt { flex: 1; min-width: 180px; }
.rbanner.warn { background: #33280F; color: #F0D9A0; }
.rbanner.crit { background: #331B1B; color: #F0B6B6; }

/* ---------- Buehne ---------- */

/* Bühne und Leiste teilen sich den Platz zwischen Kopf und Bedienleiste.
   Nichts hier darf scrollen: die Kacheln richten sich nach der Höhe, die
   da ist, nicht umgekehrt. Vorher hatte die Kachel ein festes 16:9 bei
   voller Breite und war auf einem breiten Bildschirm hoeher als das
   Fenster, daraus kam der Scrollbalken. */
.buehne {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; overflow: hidden;
}

.stage {
  flex: 1; min-height: 0;
  display: grid; gap: 8px; overflow: hidden;
  grid-auto-rows: minmax(0, 1fr);
  justify-items: center; align-items: center;
}
.stage.g1 { grid-template-columns: minmax(0, 1fr); }
.stage.g2, .stage.g3, .stage.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stage.g5, .stage.g6, .stage.g7, .stage.g8, .stage.g9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 16:9 ist der Wunsch, nicht das Gesetz: passt die Höhe nicht in die
   Zelle, wird sie gekappt und das Bild füllt eben breiter. Andersherum
   (feste Höhe, Breite abgeleitet) kippt die Kachel auf hohen schmalen
   Zellen ins Hochformat. */
.tile {
  position: relative; background: #16201F; border: 1px solid #22302F;
  border-radius: 6px; overflow: hidden;
  width: 100%; height: auto;
  aspect-ratio: 16/9;
  max-height: 100%; min-width: 0; min-height: 0;
}
/* Das eigene Bild seitenverkehrt, so wie man sich im Spiegel kennt.
   Die anderen sehen es richtig herum. */
.tile.spiegel video { transform: scaleX(-1); }
.tile.share { aspect-ratio: auto; width: 100%; height: 100%; max-height: 100%; }
.tile video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0E1617; }
.tile.share video { object-fit: contain; }

/* Teilt jemand seinen Bildschirm, gehört die Bühne der Freigabe und alle
   anderen rutschen in diese Leiste. */
.strip {
  flex: 0 0 auto; height: 108px;
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
}
.strip[hidden] { display: none; }
.strip .tile { height: 100%; width: auto; max-height: 100%; flex: 0 0 auto; aspect-ratio: 16/9; }
.tile .nametag {
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(0,0,0,.62); color: #fff; font-size: 12.5px;
  padding: 3px 9px; border-radius: 4px; display: flex; gap: 6px; align-items: center;
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile .avatar {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; color: #6C8384; background: #16201F; overflow: hidden;
}
.tile .avatar img { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; }
.tile.speaking { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }

/* Stumm ist eine Aussage über den Ton. Rot und mit durchgestrichenem
   Mikrofon, damit man es im Augenwinkel sieht, ohne zu lesen. */
.stumm-marke {
  display: inline-flex; align-items: center; gap: 4px;
  background: #C0392B; color: #fff; font-weight: 600;
  padding: 1px 6px 1px 4px; border-radius: 3px; line-height: 1.5;
}
.stumm-marke[hidden] { display: none; }
.stumm-marke svg { flex: 0 0 auto; }
.muted-icon { opacity: .75; }

/* Vollbild je Kachel. Der Knopf hält sich zurück, bis die Maus da ist;
   auf Geräten ohne Maus steht er dauerhaft. */
.kachel-voll {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.18); border-radius: 5px;
  cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.tile:hover .kachel-voll, .kachel-voll:focus-visible { opacity: 1; }
.kachel-voll:hover { background: rgba(0,0,0,.78); }
@media (hover: none) { .kachel-voll { opacity: .85; } }

/* Im Vollbild zählt der ganze Inhalt, nicht der formatfüllende Ausschnitt.
   Sonst schneidet ein geteilter Bildschirm links und rechts ab. */
.tile:fullscreen, .tile:-webkit-full-screen {
  aspect-ratio: auto; width: 100%; height: 100%;
  border: 0; border-radius: 0; background: #000;
}
.tile:fullscreen video, .tile:-webkit-full-screen video {
  object-fit: contain; background: #000;
}
.tile:fullscreen .kachel-voll, .tile:-webkit-full-screen .kachel-voll { opacity: .85; }

/* ---------- Bedienleiste ---------- */

.room-bar {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #121B1D; border-top: 1px solid #22302F; flex: none;
}
.cbtn {
  min-height: 44px;          /* Fingergroesse, nicht Mausgroesse */
  min-width: 48px;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  background: #1F2C2E; border: 1px solid #2C3B3D; color: #DCE7E6;
  font: inherit; font-size: 14px; font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cbtn:hover { background: #26373A; }
.cbtn:active { transform: scale(.97); }
.cbtn:disabled { opacity: .5; }
.cbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.cbtn.off { background: #4A1F21; border-color: #5E2A2C; color: #F0B6B6; }
.cbtn.leave { background: #97292B; border-color: #97292B; color: #fff; }
.cbtn.btn-sm { min-height: 34px; min-width: 0; padding: 6px 11px; font-size: 13px; }

/* ---------- Seitenbereich ---------- */

/* Der Seitenbereich legt sich nicht über den Raum, er nimmt sich Platz.
   Vorher lag er über der Bedienleiste und hat "Verlassen" abgeschnitten. */
.room-shell { transition: padding-right .12s ease; }
body.panel-offen .room-shell { padding-right: 350px; }

.sidepanel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 350px; max-width: 100vw;
  background: #121B1D; border-left: 1px solid #22302F;
  display: flex; flex-direction: column; z-index: 40;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.sidepanel header {
  padding: 12px 16px; border-bottom: 1px solid #22302F;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: none;
}
.sidepanel .body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; }
.sidepanel .foot { padding: 12px 16px; border-top: 1px solid #22302F; flex: none; }
.sidepanel input, .sidepanel select {
  background: #1B2628; border-color: #2C3B3D; color: #E6EEEE; font-size: 16px;
}

/* Chatzeile: das Eingabefeld nimmt den Rest, der Knopf behält seine
   eigene Breite und wird nicht gequetscht. */
.chatzeile { display: flex; gap: 8px; align-items: stretch; }
.chatzeile input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px; border-radius: 8px; border: 1px solid #2C3B3D;
}
.chatzeile .cbtn {
  flex: 0 0 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px; white-space: nowrap; line-height: 1;
}

/* ---------- Vorschau auf der Beitrittsseite ---------- */

.vorschau { margin: 20px 0 22px; }
.vorschau-bild {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #10191A; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px;
}
.vorschau-bild video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scaleX(-1);   /* wie im Spiegel, die anderen sehen es richtig */
}
.vorschau-aus {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #7E9394; font-size: 14.5px;
}
/* Ohne das gewinnt display:flex gegen das hidden-Attribut, und der Hinweis
   "Kamera ist aus" steht mitten im laufenden Bild. */
.vorschau-aus[hidden] { display: none; }
.vorschau-schalter { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.vorschau-schalter .schalter { flex: 1 1 200px; }
.vorschau-felder { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.vorschau .sub { color: var(--faint); font-size: 13px; margin: 2px 0 0; }

/* ---------- Schalter ---------- */
/* Ein Schalter zeigt den Zustand. Ein Knopf mit der Aufschrift "Mikro an"
   liest sich als Aufforderung, und genau daran hat sich im ersten Test
   jemand selbst stummgeschaltet. */

.schalter {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 13px; border-radius: 10px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  font: inherit; text-align: left; min-height: 48px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.schalter:hover { border-color: var(--brand); }
.schalter:active { transform: scale(.985); }
.schalter-symbol { display: flex; color: var(--muted); flex: none; }
.schalter-text { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.schalter-name { font-size: 14px; font-weight: 600; }
.schalter-zustand { font-size: 12.5px; color: var(--faint); }
.schalter-bahn {
  flex: none; width: 40px; height: 23px; border-radius: 100px;
  background: var(--line); position: relative; transition: background .15s ease;
}
.schalter-knopf {
  position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.schalter.an .schalter-bahn { background: var(--brand); }
.schalter.an .schalter-knopf { transform: translateX(17px); }
.schalter.an .schalter-symbol { color: var(--brand); }
.schalter.an .schalter-zustand { color: var(--brand); font-weight: 600; }
/* Der durchgestrichene Strich im Symbol erscheint nur im Aus-Zustand. */
.schalter .ik-strich { opacity: 1; }
.schalter.an .ik-strich { opacity: 0; }

/* Im Raum ist der Untergrund immer dunkel, unabhängig vom Farbschema. */
.room-bar .schalter {
  background: #1F2C2E; border-color: #2C3B3D; color: #DCE7E6; min-height: 44px;
}
.room-bar .schalter .schalter-symbol { color: #9FB3B3; }
.room-bar .schalter .schalter-zustand { color: #8AA0A0; }
.room-bar .schalter-bahn { background: #37484A; }
.room-bar .schalter.an { background: var(--brand); border-color: var(--brand); color: #fff; }
.room-bar .schalter.an .schalter-symbol,
.room-bar .schalter.an .schalter-zustand { color: rgba(255,255,255,.9); }
.room-bar .schalter.an .schalter-bahn { background: rgba(255,255,255,.35); }

/* ---------- Hintergrundauswahl ---------- */
/* Namen wie "Farbfelder dunkel" sagen niemandem, wie das aussieht. */

.hg-gitter {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  margin-top: 4px;
}
.hg-kachel {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px;
  background: var(--surface-2); cursor: pointer; overflow: hidden;
  display: block; line-height: 0;
  outline-offset: 2px;
}
.hg-kachel:hover { border-color: var(--line); }
.hg-kachel.gewaehlt { border-color: var(--brand); }
.hg-kachel.gewaehlt::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px var(--brand); border-radius: 6px; pointer-events: none;
}
.hg-vorschau {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 16/10;
  background-size: cover; background-position: center; background-color: #16201F;
  color: var(--faint);
}
/* Die Weichzeichner-Vorschau ist ein unscharfes Beispielmotiv. Der Rahmen
   schneidet den hellen Saum ab, den die Weichzeichnung am Rand erzeugt. */
.hg-blur { transform: scale(1.12); }
.hg-name {
  display: block; font-size: 11px; line-height: 1.5; padding: 3px 4px 4px;
  color: var(--muted); text-align: center; font-family: var(--font);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidepanel .hg-kachel { background: #1B2628; }
.sidepanel .hg-kachel:hover { border-color: #3A4C4E; }
.sidepanel .hg-name { color: #A2B4B4; }

/* Regler */
.regler { display: block; }
.regler .reglerkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.regler .reglerwert { color: var(--brand); font-weight: 600; font-size: 13px; }
.regler input[type="range"] { width: 100%; margin: 8px 0 0; accent-color: var(--brand); }
.panel-h.erste { margin-top: 0; border-top: none; padding-top: 0; }
.sidepanel .field > span { color: #A2B4B4; }
.sidepanel .field > small { color: #7E9394; }
.sidepanel .pegel i { background: #2C3B3D; }
.sidepanel .pegel i.an { background: #7E9394; }
.sidepanel .pegel.spricht i.an { background: var(--brand); }
.sidepanel .pegel.stumm i { background: #4A1F21; }
.sidepanel .sub { color: #8AA0A0; font-size: 13.5px; }
.sidepanel .panel-h {
  margin: 20px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #7E9394; border-top: 1px solid #22302F; padding-top: 16px;
}
.chatmsg { margin-bottom: 11px; font-size: 14.5px; word-break: break-word; }
.chatmsg .from { color: var(--brand); font-weight: 600; font-size: 12.5px; display: block; }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 60;
  background: rgba(0,0,0,.88); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 14px; max-width: calc(100vw - 32px); text-align: center;
}

/* ---------- Handy ---------- */

@media (max-width: 700px) {
  .room-head { padding: 7px 12px; padding-top: calc(7px + env(safe-area-inset-top)); }
  .room-head .rtitle { font-size: 14px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .room-head .brandname { display: none; }

  .buehne { padding: 8px; gap: 6px; }
  .stage { gap: 6px; }
  /* Auf dem Handy nie mehr als zwei Spalten, sonst sieht man Briefmarken. */
  .stage.g2, .stage.g3, .stage.g4,
  .stage.g5, .stage.g6, .stage.g7, .stage.g8, .stage.g9 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stage.g1 { grid-template-columns: minmax(0, 1fr); }
  .strip { height: 78px; }

  /* Der Seitenbereich nimmt hier die ganze Breite, ein Versatz daneben
     hätte keinen Platz. */
  body.panel-offen .room-shell { padding-right: 0; }

  /* Die Leiste rutscht sonst unter die Browserzeile und laesst sich
     nicht mehr treffen. Zwei Reihen sind besser als unerreichbar. */
  .room-bar { gap: 6px; padding: 8px 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .cbtn { padding: 10px 11px; font-size: 13px; flex: 1 1 auto; min-width: 0; }
  .cbtn.leave { flex: 1 1 100%; }
  /* Auf dem Handy zählt jede Fingerbreite: der Schalter zeigt nur noch
     Symbol und Bahn, der Text daneben fällt weg. */
  .room-bar .schalter { flex: 1 1 auto; padding: 8px 10px; gap: 8px; }
  .room-bar .schalter .schalter-text { display: none; }

  .sidepanel { width: 100vw; border-left: none; }
  .chatzeile .cbtn { padding: 10px 14px; }
}

/* ---------- Protokoll ---------- */

.proto h2 { margin-top: 26px; }
.proto ul { padding-left: 20px; }
.proto li { margin-bottom: 7px; }
.tasklist { list-style: none; padding: 0; }
.tasklist li { border-bottom: 1px solid var(--line-soft); padding: 11px 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; }
.tasklist .who { font-size: 13px; color: var(--faint); }
.transcript { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; }
.transcript .seg { margin-bottom: 9px; display: grid; grid-template-columns: 62px 120px 1fr; gap: 12px; }
.transcript .t { color: var(--faint); }
.transcript .s { color: var(--brand); font-weight: 600; }
.frames { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.frames figure { margin: 0; }
.frames img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); display: block; }
.frames figcaption { font-size: 12.5px; color: var(--faint); margin-top: 4px; }

@media (max-width: 620px) {
  .stage.has-share { grid-template-columns: 1fr; }
  .tile.share { grid-row: auto; }
  .row { grid-template-columns: 1fr; }
  .row .actions { margin-top: 8px; }
  .transcript .seg { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Profilbild ---------- */

.avatar-edit { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.avatar-vorschau {
  width: 96px; height: 96px; border-radius: 50%; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: var(--faint); overflow: hidden;
}
.avatar-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-aktionen { display: flex; flex-direction: column; gap: 10px; min-width: 220px; flex: 1; }
.avatar-aktionen .btn { align-self: flex-start; }
.avatar-aktionen .sub { color: var(--faint); font-size: 13px; margin: 0; }

/* ---------- Versionskarte ---------- */

.versionskarte {
  display: grid; gap: 18px 32px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.versionskarte h4 {
  margin: 0 0 4px; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
}
.versionskarte .gross {
  font-family: var(--mono); font-size: 17px; color: var(--ink); font-weight: 600;
}
.versionskarte .sub { font-size: 12.5px; color: var(--faint); margin: 3px 0 0; word-break: break-all; }

/* Kleine Marke oben rechts auf jeder Seite und im Raum. Der Bauzeitpunkt
   steht im title, damit der Platz im Kopf nicht draufgeht. */
.versionsmarke {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--faint); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; cursor: help;
}
/* Der Raumkopf ist immer dunkel, unabhängig vom Farbschema der Seite. */
.room-head .versionsmarke {
  color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.18);
  margin-right: 10px;
}
.versionsfuss { font-family: var(--mono); }

/* ---------- Pegel und Verbindung ---------- */

.pegel {
  display: flex; align-items: flex-end; gap: 2px; height: 22px;
}
/* Im Raum sass der Pegel in der Ecke der Kachel und wurde dort fuer die
   Verbindungsanzeige gehalten. Jetzt steht er bei den Einstellungen, wo
   man ihn braucht, und in der Ecke steht die Verbindung. */
.pegel.breit { height: 24px; gap: 3px; margin-top: 4px; }
.pegel.breit i { width: 5px; }

.verbindung {
  position: absolute; right: 8px; bottom: 8px;
  display: flex; align-items: flex-end; gap: 2.5px; height: 18px;
  background: rgba(0,0,0,.55); padding: 4px 6px; border-radius: 4px;
  cursor: help;
}
.verbindung i { width: 3.5px; background: rgba(255,255,255,.25); border-radius: 1px; display: block; }
.verbindung i.an { background: #6FD08C; }
.verbindung.mittel i.an { background: #E3C05C; }
.verbindung.schwach i.an { background: #E05B5B; }
.verbindung.schwach { animation: pulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .verbindung.schwach { animation: none; } }
.pegel i { width: 3px; background: var(--line); border-radius: 1px; height: 3px; display: block; }
.pegel i.an { background: var(--faint); }
/* Erst wenn die Rauschsperre "das ist Sprache" sagt, wird der Balken
   farbig. So sieht man den Unterschied zwischen "da ist Geräusch" und
   "das geht raus". */
.pegel.spricht i.an { background: var(--brand); }
.pegel.stumm i { background: #8C4A4C; }

/* --- Bilder hochladen ---------------------------------------------------- */
/* Die Ablagefläche ist bewusst groß und hat einen gestrichelten Rand: das
   ist die eine Gestaltung, die jeder ohne Erklärung als "hier hinein"
   liest. */
.ablage {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  margin: 10px 0 16px;
}
.ablage:hover { border-color: var(--brand); }
.ablage.drueber { border-color: var(--brand); background: var(--surface-2); }
.ablage-text { margin: 0 0 4px; }
.ablage .sub { margin: 0; }

.ablage-liste { margin-top: 14px; display: grid; gap: 6px; }
.ablage-zeile {
  display: grid; grid-template-columns: 1fr 120px auto; gap: 10px;
  align-items: center; text-align: left; font-size: 13px;
}
.ablage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ablage-balken {
  height: 6px; border-radius: 3px; background: rgba(127,127,127,.28); overflow: hidden;
}
.ablage-balken i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .15s; }
.ablage-stand { color: var(--muted); min-width: 110px; text-align: right; }
.ablage-zeile.gut .ablage-stand { color: var(--ok); }
.ablage-zeile.schlecht .ablage-stand { color: var(--crit); }
.ablage-zeile.schlecht .ablage-balken i { background: var(--crit); width: 100%; }

.bildgitter {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.bildkachel {
  margin: 0; border: 1px solid rgba(127,127,127,.28); border-radius: 10px;
  overflow: hidden; background: rgba(127,127,127,.06);
  display: flex; flex-direction: column;
}
.bildkachel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.bildkachel figcaption {
  padding: 8px 10px; display: grid; gap: 2px; font-size: 13px;
}
.bildkachel figcaption span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bildkachel .sub { font-size: 12px; }
.bildweg { padding: 0 10px 10px; }


/* ---------- Ton nachsehen ----------
   Eine Übersicht, die eine einzige Frage beantwortet: warum höre ich den
   anderen nicht? Deshalb keine Diagramme, sondern Zeile für Zeile eine
   Aussage mit gut oder schlecht daneben. */
.ton-diag { margin-top: 6px; }
.ton-diag .diag-tab { display: flex; flex-direction: column; gap: 3px; }
.ton-diag .diag-zeile {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; line-height: 1.6;
}
.ton-diag .diag-was { flex: 1 1 auto; color: var(--muted); }
.ton-diag .gut { color: #6FCF97; font-weight: 600; white-space: nowrap; }
.ton-diag .schlecht { color: #E8806F; font-weight: 600; white-space: nowrap; }
.ton-diag .diag-person {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.ton-diag .diag-person h5 { margin: 0 0 6px; font-size: 13.5px; }
.ton-diag .diag-balken {
  margin-top: 7px; height: 7px; border-radius: 4px;
  background: #1B2628; overflow: hidden;
}
.ton-diag .diag-balken i {
  display: block; height: 100%; background: var(--brand);
  transition: width .1s linear;
}