/* Fernsprecher – helles, sachliches Layout.
   Grundsatz für alles, was sich laufend ändert (Pegelanzeigen, Gesprächsdauer,
   Reglerwerte): feste Breite über Tabellenziffern, und bewegt wird nur die
   Breite eines Balkens. So bleibt die Seite beim Mitlesen ruhig.

   Farben stehen ausnahmslos in Variablen, und zwar in Paaren aus Fläche,
   Rahmen und Schrift (--ok-bg/--ok-line/--ok-fg und so fort). Der Grund ist
   nicht Ordnungsliebe: hell und dunkel brauchen für denselben Zustand ganz
   verschiedene Werte -- auf Weiß trägt eine zarte Fläche mit kräftiger
   Schrift, auf Schwarz genau umgekehrt. Wer hier einen Farbwert direkt in
   eine Regel schreibt, bricht deshalb immer genau ein Thema. */

:root {
  /* Hell -- die Vorgabe. */
  --bg: #f4f6f8;
  --bg-2: #eef1f5;
  --panel: #ffffff;
  --panel-2: #f7f9fb;
  --line: #d7dee7;
  --line-soft: #e6ebf1;
  --fg: #16202c;
  --fg-dim: #4d5b6a;
  --muted: #6b7885;
  --accent: #1668c9;
  --ok: #17794a;
  --warn: #8a5b00;
  --bad: #c0362f;

  --hover: #eef2f7;
  --primary-bg: #1668c9; --primary-line: #1257ab;
  --primary-fg: #ffffff; --primary-hover: #1257ab;
  --danger-bg: #c0362f; --danger-line: #a52d27;
  --danger-fg: #ffffff; --danger-hover: #a52d27;
  --ok-bg: #e7f6ee; --ok-line: #a8dcc2; --ok-fg: #10633c;
  --warn-bg: #fdf3dc; --warn-line: #ecd08a; --warn-fg: #7d5300;
  --hold-bg: #eaecfb; --hold-line: #bcc2f0; --hold-fg: #3742a8;
  --bad-bg: #fdecea; --bad-line: #f3bdb8; --bad-fg: #a52d27;
  --accent-bg: #e8f1fc; --accent-fg: #114f9c;
  --focus-ring: rgba(22,104,201,.22);
  --meter-a: #2f80c4; --meter-b: #6fc0ea;
  --meter-hot: #c2500f;
  --topbar-a: #ffffff; --topbar-b: #f4f6f8;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 6px 20px rgba(16,24,40,.07);

  --radius: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* Dunkel -- nur auf ausdrücklichen Wunsch über den Schalter in der Kopfzeile.
   Bewusst nicht an prefers-color-scheme gehängt: wer hell eingestellt hat,
   soll hell bekommen, unabhängig davon wie das Betriebssystem gerade steht. */
[data-theme="dark"] {
  --bg: #0d1015;
  --bg-2: #11161d;
  --panel: #161c24;
  --panel-2: #1b232d;
  --line: #26303c;
  --line-soft: #1f2833;
  --fg: #dde4ec;
  --fg-dim: #9aa7b6;
  --muted: #6f7d8d;
  --accent: #58a6ff;
  --ok: #4fc98c;
  --warn: #e6b24d;
  --bad: #e2706e;

  --hover: #222c37;
  --primary-bg: #1d4f86; --primary-line: #2a6cb3;
  --primary-fg: #eaf3ff; --primary-hover: #235c9c;
  --danger-bg: #5a2626; --danger-line: #7d3535;
  --danger-fg: #ffe2e0; --danger-hover: #6b2d2d;
  --ok-bg: #14231d; --ok-line: #2c5a44; --ok-fg: #b6e8cf;
  --warn-bg: #241f14; --warn-line: #5b4a24; --warn-fg: #f3ddaa;
  --hold-bg: #171a2a; --hold-line: #39406e; --hold-fg: #cfd8ff;
  --bad-bg: #24171a; --bad-line: #5d3a3a; --bad-fg: #f0c6c4;
  --accent-bg: #14202e; --accent-fg: #dceaff;
  --focus-ring: rgba(88,166,255,.18);
  --meter-a: #2b6f9c; --meter-b: #4fb0e0;
  --meter-hot: #ff9152;
  --topbar-a: #10151c; --topbar-b: #0d1015;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

/* Ohne diese Regel gewinnt jedes eigene display: flex gegen das hidden-Attribut
   des Browsers -- die leeren Hinweiszeilen waeren dann dauerhaft sichtbar. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 600; }

/* -- Passkey-Sperre ----------------------------------------------------- */
.auth-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
}
.auth-card {
  width: min(420px, 100%); padding: 28px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: var(--shadow); text-align: center;
}
.auth-mark { display: block; color: var(--accent); font-size: 34px; line-height: 1; }
.auth-card h1 { margin-top: 8px; font-size: 24px; }
.auth-card p { color: var(--fg-dim); }
.auth-card label {
  display: block; margin: 12px 0 5px; color: var(--fg-dim);
  font-size: 12px; text-align: left;
}
.auth-button { width: 100%; margin-top: 10px; }
.auth-error {
  padding: 8px 10px; border: 1px solid var(--bad-line); border-radius: 8px;
  background: var(--bad-bg); color: var(--bad-fg) !important; text-align: left;
}
.auth-actions { margin-top: 10px; justify-content: flex-end; }

/* -- Kopfzeile ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px;
  background: linear-gradient(180deg, var(--topbar-a) 0%, var(--topbar-b) 100%);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { font-size: 20px; color: var(--accent); }
.brand-name { font-weight: 650; letter-spacing: .2px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--fg-dim); font-size: 12px; white-space: nowrap;
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  transition: background .3s ease;
}
.pill.on .dot { background: var(--ok); }
.pill.off .dot { background: var(--bad); }
.pill.idle .dot { background: var(--warn); }

.tokenbox { position: relative; }
.tokenbox > summary { list-style: none; cursor: pointer; }
.tokenbox > summary::-webkit-details-marker { display: none; }
.tokenpanel {
  position: absolute; right: 0; top: calc(100% + 6px); width: min(320px, 86vw);
  padding: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); z-index: 30;
}
.tokenpanel label { display: block; font-size: 12px; color: var(--fg-dim);
  margin-bottom: 6px; }
.row-end { display: flex; justify-content: flex-end; margin-top: 8px; }

/* -- Banner und Toasts --------------------------------------------------- */
.banner {
  margin: 10px 16px 0; padding: 9px 12px; border-radius: var(--radius);
  border: 1px solid var(--bad-line); background: var(--bad-bg); color: var(--bad-fg);
  font-size: 14px;
}
.toasts {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px; max-width: min(360px, 90vw);
}
.toast {
  padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel-2); box-shadow: var(--shadow); font-size: 14px;
  animation: fade .2s ease;
}
.toast.bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-fg); }
.toast.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-fg); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }

/* -- Raster -------------------------------------------------------------- */
.grid {
  display: grid; gap: 14px; padding: 14px 16px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1400px; margin: 0 auto;
}
.span2 { grid-column: 1 / -1; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
  min-width: 0;
}
.card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.card-head h2 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim);
}
.head-right { margin-left: auto; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.chip {
  padding: 2px 8px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); font-size: 12px; color: var(--fg-dim);
}
.hint { color: var(--muted); font-size: 12px; }
.empty { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.sep { color: var(--muted); padding: 0 4px; }

/* -- Bedienelemente ------------------------------------------------------ */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--fg); padding: 8px 13px; border-radius: 8px; font: inherit;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--primary-bg); border-color: var(--primary-line);
  color: var(--primary-fg); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger { background: var(--danger-bg); border-color: var(--danger-line);
  color: var(--danger-fg); }
.btn.danger:hover { background: var(--danger-hover); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 9px; font-size: 13px; }
.btn.grow { flex: 1; }
.btn.on { border-color: var(--accent); color: var(--accent-fg);
  background: var(--accent-bg); }

input, select, textarea {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring);
}
.mini { width: auto; padding: 5px 8px; font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 10px 0; }
.check input { width: auto; }

.numinput {
  font-family: var(--mono); font-size: 22px; letter-spacing: .04em; text-align: center;
  padding: 12px 10px;
}
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.pad button {
  padding: 12px 0; font-size: 19px; font-family: var(--mono);
  background: var(--panel-2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 8px; cursor: pointer;
}
.pad.wide { grid-template-columns: repeat(4, 1fr); }
.pad button.extra { color: var(--fg-dim); }
.pad button:hover { background: var(--hover); }
.pad button:active { transform: translateY(1px); border-color: var(--accent); }
.pad button small { display: block; font-size: 9px; color: var(--muted);
  letter-spacing: .12em; font-family: var(--sans); }

/* -- Gespräche ----------------------------------------------------------- */
.calls { display: flex; flex-direction: column; gap: 10px; }
.call {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-2); padding: 12px;
}
.call-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.call-num { font-family: var(--mono); font-size: 18px; }
.call-dur { margin-left: auto; font-family: var(--mono); color: var(--fg-dim);
  font-variant-numeric: tabular-nums; }
.badge {
  padding: 2px 8px; border-radius: 999px; font-size: 12px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--fg-dim);
}
.badge[data-s="up"] { color: var(--ok-fg); border-color: var(--ok-line);
  background: var(--ok-bg); }
.badge[data-s="ringing"] { color: var(--warn-fg); border-color: var(--warn-line);
  background: var(--warn-bg); }
.badge[data-s="hold"] { color: var(--hold-fg); border-color: var(--hold-line);
  background: var(--hold-bg); }

.badge[data-s="ended"] { color: var(--muted); }
.call-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.call-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.call details { margin-top: 8px; }
.call summary { cursor: pointer; color: var(--fg-dim); font-size: 13px; }
.call .pad { max-width: 240px; }
.call .pad.wide { max-width: 320px; }
.call-consent {
  margin-top: 8px; padding: 9px 10px; border-radius: 8px;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  color: var(--warn-fg); font-size: 13px; line-height: 1.4;
}
.badge.consent { color: var(--warn-fg); border-color: var(--warn-line);
  background: var(--warn-bg); }
.dtmf-state { display: block; min-height: 1.3em; color: var(--muted); font-size: 12px; }

/* -- Hoermischung ---------------------------------------------------------
   Ein Kanalzug je laufendem Gespraech. Die Pegelanzeige wird sechzigmal je
   Sekunde neu gesetzt -- deshalb nur die Breite eines Elements, keine
   Layout-Aenderung, und ohne Uebergang: eine Blende von 16 ms sieht
   traege aus statt fluessig. */
.mixer { display: grid; gap: 12px; }
.strip {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 12px; background: var(--bg-2);
}
.strip-top { display: flex; align-items: baseline; gap: 10px; }
.strip-name { font-weight: 600; }
.strip-pan {
  margin-left: auto; font-family: var(--mono); font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--fg-dim);
}
.strip-meter {
  position: relative; height: 8px; margin: 8px 0 4px; border-radius: 999px;
  background: var(--line-soft); overflow: hidden;
}
.strip-fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--meter-a), var(--meter-b));
}
.strip-fill.hot { background: var(--meter-hot); }
/* Aussteuerungsanzeige fuer den eigenen Sprechweg. Sie misst nur -- in das,
   was gesendet wird, greift nichts davon ein. */
.mic-level { margin: 10px 0 2px; }
.mic-level label {
  display: block; font-size: 13px; color: var(--fg-dim); margin-bottom: 2px;
}
.mic-level .strip-meter { margin: 4px 0 4px; }
.hint.ok { color: var(--ok-fg); }
.strip-info {
  display: block; font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums; color: var(--muted); min-height: 1.3em;
}
.strip-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.strip-row input[type="range"] { flex: 1; }
.strip-lbl {
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); min-width: 46px;
}
.strip-row .strip-lbl:last-child { text-align: right; }
.strip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.master { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.master .field.grow { flex: 1; min-width: 220px; margin-bottom: 0; }
.master .check { margin: 0 0 4px; }

/* -- Klangbearbeitung ------------------------------------------------------ */
.group {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 10px 12px 4px; margin: 0 0 12px;
}
.group legend {
  padding: 0 6px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.group .check { margin: 2px 0 8px; }
.field .val {
  float: right; font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--fg-dim);
}
.check.inline { margin: 0; font-size: 13px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

/* -- Formulare, Editor --------------------------------------------------- */
.form .field { margin-bottom: 10px; }
.form label { display: block; font-size: 12px; color: var(--fg-dim); margin-bottom: 4px; }
.fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.code {
  font-family: var(--mono); font-size: 13px; line-height: 1.5; min-height: 320px;
  white-space: pre; overflow: auto; tab-size: 2;
}
.result {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 8px; font-family: var(--mono);
  font-size: 12px; white-space: pre-wrap; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--fg-dim); max-height: 180px; overflow: auto;
}
.result.bad { border-color: var(--bad-line); color: var(--bad-fg); }
.result.ok { border-color: var(--ok-line); color: var(--ok-fg); }

/* -- Verlauf ------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; }
.tab {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 4px 10px; border-radius: 999px; font: inherit; font-size: 13px;
  cursor: pointer;
}
.tab.is-on { color: var(--fg); border-color: var(--line); background: var(--panel-2); }
.hlist { display: flex; flex-direction: column; gap: 6px; }
.hitem { border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-2); }
.hitem > summary {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px; cursor: pointer;
  flex-wrap: wrap; list-style: none;
}
.hitem > summary::-webkit-details-marker { display: none; }
.hitem > summary::before { content: "▸"; color: var(--muted); }
.hitem[open] > summary::before { content: "▾"; }
.hitem .h-num { font-family: var(--mono); }
.hitem .h-when { color: var(--muted); font-size: 12px; }
.hitem .h-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.hbody { padding: 4px 11px 11px; border-top: 1px solid var(--line-soft); }
.evlog {
  font-family: var(--mono); font-size: 12px; max-height: 260px; overflow: auto;
  margin: 8px 0 0; color: var(--fg-dim);
}
.evlog div { display: flex; gap: 10px; padding: 1px 0; }
.evlog .t { color: var(--muted); }
.evlog .n { color: var(--accent); min-width: 12em; }
.evlog .p { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
audio { width: 100%; margin-top: 8px; filter: invert(.9) hue-rotate(180deg); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px;
  font-size: 13px; margin: 8px 0 0; }
.kv dt, .kv .k { color: var(--muted); }
.kv dd, .kv .v { margin: 0; }

.notice {
  padding: 11px 12px; border-radius: var(--radius); background: var(--bg-2);
  border: 1px solid var(--line); font-size: 14px; color: var(--fg-dim);
}
.notice p { margin: 0 0 6px; }
.audio-devices {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.audio-devices .field { min-width: 0; }
.audio-devices label {
  display: block; margin-bottom: 5px; color: var(--fg-dim); font-size: 12px;
}
.audio-device-actions { margin-top: 8px; }
.audio-device-actions .bad { color: var(--danger-fg); }
.prompts { margin-top: 10px; }
.prompts summary { cursor: pointer; color: var(--fg-dim); font-size: 13px; }

.foot {
  padding: 0 16px 28px; color: var(--muted); font-size: 12px;
  max-width: 1400px; margin: 0 auto;
}

/* -- Handy ---------------------------------------------------------------- */
@media (max-width: 860px) {
  .grid { grid-template-columns: minmax(0, 1fr); padding: 12px 10px 24px; }
  .fields2 { grid-template-columns: minmax(0, 1fr); }
  .topbar { padding: 8px 10px; }
  .brand-name { display: none; }
  .code { min-height: 220px; }
}
@media (max-width: 520px) {
  .pill { font-size: 11px; padding: 3px 7px; }
  .strip-lbl { min-width: 38px; }
}

/* -- Rechtsgrundlage ------------------------------------------------------
   Die Auswahl ist lang und wird selten gebraucht, aber wenn, dann genau: also
   drei Spalten auf breiten Schirmen, je Gruppe ein eigener Block, und der
   Gesetzestext klein unter der Bezeichnung statt in einem Sprechblasen-Titel,
   den auf dem Telefon niemand aufbekommt. */
.comp-bases {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px; margin: 4px 0 12px;
}
.comp-group {
  border: 1px solid var(--line-soft); border-radius: 8px; background: var(--bg-2);
  padding: 4px 11px 9px; margin: 0; min-width: 0;
}
.comp-group legend {
  font-size: 12px; color: var(--muted); padding: 0 4px;
}
.comp-base {
  align-items: flex-start; gap: 8px; margin: 7px 0; padding: 5px 7px;
  border-radius: 7px; border: 1px solid transparent; cursor: pointer;
}
.comp-base:hover { background: var(--hover); }
.comp-base.is-on {
  background: var(--accent-bg); border-color: var(--line-soft);
}
.comp-base input { margin-top: 2px; flex: none; }
.comp-label { display: block; min-width: 0; }
.comp-label b { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.comp-label small {
  display: block; color: var(--muted); font-size: 12px; line-height: 1.45;
  margin-top: 2px;
}
#comp-interest.needed { border-color: var(--warn-line); background: var(--warn-bg); }
.comp-line { display: flex; align-items: center; gap: 10px; }
.comp-history { margin-top: 10px; }
.comp-old {
  display: flex; gap: 10px; font-size: 12px; color: var(--fg-dim);
  padding: 2px 0; flex-wrap: wrap;
}
.comp-old .t { color: var(--muted); font-family: var(--mono); }
.comp-old .n { color: var(--accent); font-family: var(--mono); }
.comp-notes { display: grid; gap: 12px; margin-top: 8px; }
.comp-note strong { display: block; font-size: 13px; }
.comp-note p {
  margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg-dim);
}
.chip.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-fg); }
.chip.bad { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-fg); }

@media (max-width: 700px) {
  .comp-bases { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}