/* Dasselbe Design-System wie blocrec.app — ../design/DESIGN.md.
   ────────────────────────────────────────────────────────────────────────────
   Die Aufnahmeseite ist hell, weiß-blau und rund, genau wie die Verkaufsseite:
   ein Produkt, eine Farbwelt. Wer von blocrec.app herüberkommt, soll nicht das
   Gefühl haben, ein zweites Programm geöffnet zu haben.

   Drei Werte tragen die Optik (DESIGN.md § 1):
     · Pille    9999px   — jeder Knopf, ohne Ausnahme
     · Rundung  42px/24px — Flächen und Karten
     · Blau     #1C65C8  — die einzige Markenfarbe

   Und eine Farbe gehört nicht der Marke, sondern einem Zustand:

     Blau ist die Marke. ROT heißt: es läuft gerade eine Aufnahme.

   Rot (--bl-rec) erscheint deshalb ausschließlich dort, wo genau das steht —
   Aufnahmepunkt, Fortschrittsbalken, Stopp-Knopf, Rahmen der laufenden
   Vorschau. Nirgends sonst, und auf der Verkaufsseite überhaupt nicht. Ein
   Aufnahmegerät, dessen Aufnahmeanzeige nicht rot ist, wäre schön gestaltet
   und gefährlich. (PLAN/08-MARKE-UND-NAME.md § 3)

   Der pulsierende Punkt ist der einzige Puls auf dieser Seite. Er ist kein
   Schmuck, sondern eine Zustandsanzeige (DESIGN.md § 7).

   KEINE SCHRIFTDATEI. Die Verkaufsseite darf eine Webschrift laden, ein
   Werkzeug, das auf einem Firmenrechner in unter einer Sekunde offen sein
   muss, nicht — und eine fremde Adresse widerspräche dem Versprechen dieser
   Seite. Hier gilt die Systemschrift-Kette aus DESIGN.md § 9. Damit bleibt die
   Content-Security-Policy in vercel.json unverändert streng: kein font-src von
   außen, keine Bibliothek, keine Abhängigkeit (CLAUDE.md § 4).

   Abweichung, bewusst: die Landing benutzt 69px und 111px. Das sind Maße für
   Sektionen von 1368px Breite. In einem Werkzeugfenster, dessen Spalten 300px
   breit sind, wäre das grotesk — hier stehen die beiden nächstkleineren Werte
   derselben Leiter (42px / 24px). Die Knopfmaße dagegen sind exakt die der
   Landing: 58px hoch, 9999px rund, Gewicht 700. */

:root {
  /* HELL. IMMER.
     `light` statt `light dark` ist keine Kleinigkeit: es hält Formularfelder,
     Bildlaufleisten, Auswahlmenüs und die Bildlaufhintergründe des Browsers
     hell, auch wenn das Betriebssystem auf dunkel steht. Vorher genügte eine
     Systemeinstellung, um aus derselben Anwendung ein zweites, fremdes Produkt
     zu machen — wer von blocrec.app herüberkam, landete im Dunkeln.
     Ein Dunkelmodus käme nur als ausdrücklich gewählte Einstellung zurück,
     niemals wieder automatisch. */
  color-scheme: light;

  /* ── Die gemessene Palette (DESIGN.md § 2) ───────────────────────────── */
  --bl-blue: #1c65c8;
  --bl-blue-hover: #17549f;
  --bl-blue-tint: #e9f2fe;
  --bl-blue-line: #cfe1fd;
  --bl-navy: #123263;
  --bl-ink: #101214;
  --bl-ink-soft: #292a2e;
  --bl-ink-muted: #5b6880;
  --bl-canvas: #ffffff;
  --bl-line: #e3e8f0;
  --bl-rec: #e5484d;
  --bl-ok: #0e9f6e;
  --bl-hold: #b26a00;   /* Pause — bernstein, kein zweiter Akzent */

  /* ── Rollen. Nur diese Schicht kippt im Dunkelmodus ──────────────────── */
  --bg: #f3f7fd;              /* Fläche: sehr leicht blaustichig, blendet nicht */
  --surface: var(--bl-canvas); /* Karten: Panel, Ergebnis, Popover, Dialog */
  --surface-2: #edf3fc;        /* Vertiefungen: Felder, Segmentleiste, Spuren */
  --tint: var(--bl-blue-tint);
  --tint-line: var(--bl-blue-line);
  --line: var(--bl-line);
  --text: var(--bl-ink);
  --text-soft: var(--bl-ink-soft);
  --dim: var(--bl-ink-muted);
  --accent: var(--bl-blue);
  --accent-hover: var(--bl-blue-hover);
  --on-accent: #ffffff;
  --rec: var(--bl-rec);
  --ok: var(--bl-ok);
  --hold: var(--bl-hold);

  /* Die Bühne ist hell wie die Startseite — ein Produkt, eine Farbwelt.
     Nicht weiß, sondern eine Spur kühler als die Karten daneben: sonst
     verschwände ein weißer Bildschirmausschnitt in der Fläche und man sähe
     nicht mehr, wo das aufgenommene Bild anfängt. Genau dafür sind die 1px
     Rahmen und der zarte Innenschatten da. */
  --stage: #e7eef9;
  --stage-line: #d5e1f3;
  --stage-glow: #f4f8ff;   /* der weiche Schein oben in der Bühne */
  --on-stage: var(--bl-ink);
  --on-stage-dim: var(--bl-ink-muted);
  --scrim: rgba(243, 247, 253, 0.80);

  /* ── Rundungen (DESIGN.md § 4) ───────────────────────────────────────── */
  --r-lg: 42px;    /* Panel, Bühne, Ergebnis, Dialog */
  --r-md: 24px;    /* Segmentleiste, Popover, Toast, offene Insel */
  --r-sm: 12px;    /* Felder, Chips, kleine Knöpfe im Panel */
  --r-pill: 9999px;

  /* ── Schatten (DESIGN.md § 5 und § 6) ────────────────────────────────── */
  --lift: 0 2px 6px rgba(0, 0, 0, .04), 0 5px 18px rgba(0, 0, 0, .06), 0 24px 83px rgba(0, 0, 0, .10);
  --lift-sm: 0 1px 2px rgba(16, 18, 20, .05), 0 4px 14px rgba(16, 18, 20, .06);
  --btn: 0 1px 2px rgba(28, 101, 200, .20), 0 8px 20px -8px rgba(28, 101, 200, .45);
  --btn-hover: 0 2px 4px rgba(28, 101, 200, .22), 0 14px 30px -10px rgba(28, 101, 200, .50);
  --btn-rec: 0 1px 2px rgba(229, 72, 77, .20), 0 8px 20px -8px rgba(229, 72, 77, .45);
  --btn-rec-hover: 0 2px 4px rgba(229, 72, 77, .22), 0 14px 30px -10px rgba(229, 72, 77, .50);

  /* ── Bewegung (DESIGN.md § 7) ────────────────────────────────────────── */
  --fast: 160ms;
  --normal: 220ms;
  --calm: 320ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* Systemschrift, DESIGN.md § 9 — wörtlich, ohne Zusatz. */
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Hier stand ein `@media (prefers-color-scheme: dark)`-Zweig, der die ganze
   Rollenschicht umgefärbt hat. Er ist absichtlich weg:
   Wer sein Betriebssystem auf dunkel stehen hatte — und das ist die Mehrheit —
   bekam ein Werkzeug in einer anderen Farbwelt als die Seite, von der er kam.
   Zwei Anmutungen für ein Produkt sind eine Anmutung zu viel. Ein Dunkelmodus
   ist nicht verboten, aber er wäre eine Einstellung, die jemand trifft, kein
   Zufall aus den Systemeinstellungen (design/DESIGN.md § 9). */

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

/* Die ganze Anwendung passt ins Fenster: höchstens die Einstellungsspalte
   scrollt. Der Aufnahmeknopf ist damit immer erreichbar, ohne vorher zu
   scrollen. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Laufweite bleibt normal — die Vorlage setzt kein negatives Tracking, auch
   nicht bei großen Graden. Das ist Teil des Charakters (DESIGN.md § 3). */
h2 { font-size: 28px; line-height: 1.12; font-weight: 800; margin: 0 0 4px; }
p { margin: 0; }

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ───────────────────────── Kopfzeile ───────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 20px;
  height: 64px;
  flex: none;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand-mark { width: 28px; height: 28px; color: var(--accent); flex: none; }

.topbar-right { display: flex; align-items: center; gap: 10px; }

/* Das Versprechen der Seite steht als Chip in der Kopfzeile — mit Haken im
   Schild, damit es auch ohne Lesen als Zusicherung gelesen wird. */
.privacy-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--tint-line);
  padding: 7px 15px 7px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.privacy-chip svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.privacy-chip:hover { background: var(--tint-line); box-shadow: inset 0 0 0 1px transparent; }

/* Die Kontopille — dieselbe Bauart wie die schwebende Leiste der Startseite
   (DESIGN.md § 5.1): Zustand links in einer eigenen kleinen Pille, Handlung
   rechts als gefüllter Knopf. Free und Pro sind auf einen Blick zu trennen. */
.account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  box-shadow: var(--lift-sm);
  transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.account[hidden] { display: none; }
.account:hover { border-color: var(--tint-line); box-shadow: 0 1px 2px rgba(16, 18, 20, .06), 0 6px 18px rgba(16, 18, 20, .09); }

.account-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 10px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--dim);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.account b { font-weight: 700; font-size: 13px; letter-spacing: .01em; }
.account-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--dim);
  flex: none;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* Bezahlt: die Marke selbst wird zur Auszeichnung. Grün bleibt der Punkt —
   grün heißt hier „läuft", nicht „Marke" (DESIGN.md § 2). */
.account.is-paid .account-badge { background: var(--tint); color: var(--accent); }
.account.is-paid .account-dot { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }

.account-cta {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.account-cta:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: var(--btn); }
.account-cta:active { transform: translateY(0); }
.account-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-cta[hidden] { display: none; }

/* Bezahlt: kein zweiter Knopf neben der Pille — die Pille selbst führt zum
   Konto. Frei: die Pille bleibt reine Anzeige, der Knopf daneben trägt die
   Handlung („Upgrade"). */
.account-badge.is-link { cursor: pointer; }
.account-badge.is-link:hover { background: var(--tint-line); }
.account-badge.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ruhiger Pillenknopf in der Kopfzeile — kein unterstrichener Link neben zwei
   Pillen; drei verschiedene Bauformen auf 30 cm sind eine zu viel. */
.topbar-btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.topbar-btn:hover { background: var(--surface); border-color: var(--line); color: var(--text); }
.topbar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.topbar-right .link-button { font-size: 14px; }

/* ───────────────────────── Raster ───────────────────────── */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  /* minmax(0, 1fr) statt "auto": sonst zieht die hohe Einstellungsspalte die
     Zeile auseinander und die Unterkante der Seite wird abgeschnitten. */
  grid-template-rows: minmax(0, 1fr);
  gap: 18px;
  padding: 0 20px 20px;
  align-items: stretch;
  min-height: 0;
}
.layout[data-view="result"] { grid-template-columns: minmax(0, 1fr); }
.layout[data-view="result"] > .panel,
.layout[data-view="result"] > .stage { display: none; }
.layout[data-view="record"] > .result { display: none; }

/* ───────────────────────── Einstellungen ───────────────────────── */

.panel {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Die Karten schweben, wie auf der Startseite (DESIGN.md § 6) — ein Rahmen
     allein lässt die Spalte auf der blaustichigen Fläche kleben. */
  box-shadow: var(--lift-sm);
  padding: 16px 18px 18px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.segmented label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 11px 4px 10px;
  border-radius: calc(var(--r-md) - 6px);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  text-align: center;
  line-height: 1.25;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented svg {
  width: 24px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  transition: transform var(--normal) var(--ease);
}
.segmented svg .fill { fill: currentColor; stroke: none; opacity: 0.55; }
.segmented label:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.segmented label:hover svg { transform: translateY(-1px); }
.segmented label:active { transform: scale(0.975); }
.segmented label:has(input:checked) {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--lift-sm);
}
.segmented label:has(input:checked) svg .fill { opacity: 0.85; }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Eine Gruppe hat eine Überschrift, alle Zeilen dieselbe Höhe, alle Felder
   dieselbe Form. Das ist der ganze Unterschied zwischen einem Werkzeug und
   einem Formular. */

.rows { padding: 12px 0 14px; }
.rows[hidden] { display: none; }
.rows + .rows { border-top: 1px solid var(--line); }

.group-title {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
}

.row {
  position: relative;   /* Anker für die Erklärblase */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0;
}
.row[hidden] { display: none; }
.row-label {
  font-size: 14px;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.row-label em { font-style: normal; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.row:hover > .row-label { color: var(--text-soft); }

/* Bedienelement plus Beiwerk (die runde Kameravorschau) als eine Einheit
   rechts in der Zeile. */
.row-control { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-control .menu { min-width: 0; }
.row-control .menu-button { width: 100%; }

/* ── Die runde Kameravorschau ─────────────────────────────────────────
   Sie zeigt sich nur, wenn ohnehin ein Kamerabild läuft oder die Erlaubnis
   bereits erteilt ist. Sie fragt nie von sich aus nach einem Gerät. */
.cam-peek {
  position: relative;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--tint-line);
  animation: peek-in var(--normal) var(--ease);
  transition: box-shadow var(--fast) var(--ease);
}
.cam-peek[hidden] { display: none; }
.cam-peek:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--accent); }
.cam-peek video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gespiegelt genau dann, wenn es die Aufnahme auch wäre — sonst wäre die
   Vorschau eine Auskunft über ein anderes Bild als das, das gleich entsteht. */
.cam-peek.mirrored video { transform: scaleX(-1); }
@keyframes peek-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }

/* ── Der Pegel ────────────────────────────────────────────────────────
   Eine Reihe feiner Segmente statt eines Balkens: so liest man in einer
   Viertelsekunde, dass da wirklich Ton ankommt, und nicht nur eine Fläche
   breiter wird. Die Maske sitzt auf der Spur, der Verlauf auf der Füllung —
   deshalb behalten die Segmente ihren Platz, egal wie laut es ist. */
.row-meter { min-height: 0; padding: 2px 0 10px; gap: 8px; justify-content: flex-start; }
.meter-icon {
  width: 14px; height: 14px; flex: none;
  color: var(--tint-line);
  transition: color var(--fast) var(--ease);
}
.meter-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.row-meter.is-live .meter-icon { color: var(--accent); }

/* ── Die Erklärblase ──────────────────────────────────────────────────
   Die Einstellungsspalte erklärt sich, aber sie redet nicht dazwischen: jede
   Erklärung sitzt hinter einem „i" und erscheint beim Zeigen, beim Fokussieren
   mit der Tastatur und beim Antippen. Kein Popper, keine Bibliothek — eine
   Klasse auf einem <span>. */

/* Die Blase hängt nicht am „i", sondern an der Zeile: so beginnt sie immer an
   derselben Kante wie die Beschriftung, egal wie lang das Wort davor ist. */
.hint-wrap { display: inline-flex; align-items: center; }
.hint-wrap.is-empty { display: none; }

.hint {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dim);
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.hint svg .dot { fill: currentColor; stroke: none; }
.hint:hover, .hint[aria-expanded="true"] { color: var(--accent); background: var(--tint); transform: scale(1.12); }
.hint:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hint-bubble {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 70;
  width: min(252px, 100%);
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--lift);
  color: var(--dim);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--fast) var(--ease), transform var(--normal) var(--ease), visibility var(--fast) var(--ease);
}
.hint-bubble b { color: var(--text); font-weight: 700; }
.hint-wrap.is-up .hint-bubble { top: auto; bottom: calc(100% + 9px); transform: translateY(4px); }
.hint-wrap.is-open .hint-bubble { opacity: 1; visibility: visible; transform: none; }

/* ── Das Schloss ──────────────────────────────────────────────────────
   Alles, was der freie Tarif nicht darf, bleibt sichtbar und trägt ein
   Schloss. Ein Klick darauf führt auf die Tarifseite — ein Weg, nicht fünf.
   Nicht rot: Rot gehört der laufenden Aufnahme. */

.lock {
  display: none;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.lock svg {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
  transition: transform var(--normal) var(--ease);
}
.lock:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); box-shadow: var(--btn); }
/* Der Bügel hebt sich beim Zeigen — das Schloss geht auf, nicht zu. */
.lock:hover svg { transform: translateY(-1px); }
.lock:active { transform: translateY(0); }
.lock:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.row.is-locked .lock { display: inline-flex; }
.row.is-locked .switch, .row.is-locked .menu { display: none; }

/* Das echte <select> bleibt als einzige Quelle der Wahrheit im Dokument,
   aber unsichtbar. */
.menu-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

.menu { position: relative; }

/* Auch die Auswahlfelder sind Pillen — das Motiv gilt ohne Ausnahme. */
.menu-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 0;
  background: var(--tint);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  height: 34px;             /* eine Höhe für alle Auswahlfelder */
  padding: 0 12px 0 15px;
  border-radius: var(--r-pill);
  max-width: 172px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}
.menu-button:hover:not(:disabled) { background: var(--tint-line); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }
.menu--open .menu-button { background: var(--tint-line); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); }
.menu-button:disabled { opacity: 0.45; }
.menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-arrow {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--normal) var(--ease);
}
.menu-button:hover .menu-arrow { transform: translateY(1px); }
.menu--open .menu-arrow, .menu--open .menu-button:hover .menu-arrow { transform: rotate(180deg); }

.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: max(100%, 190px);
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  opacity: 0;
  transform: translateY(-5px) scale(0.97);
  transform-origin: top right;
  transition: opacity var(--fast) var(--ease), transform var(--normal) var(--ease);
}
.menu-list[hidden] { display: none; }
.menu--open .menu-list { opacity: 1; transform: none; }
.menu--up .menu-list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom right; }

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 9px 13px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.menu-item:hover:not(:disabled) { background: var(--tint); color: var(--accent); padding-left: 16px; }
.menu-item:focus-visible { outline: none; background: var(--tint); color: var(--accent); padding-left: 16px; }
.menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
.menu-item span { overflow: hidden; text-overflow: ellipsis; }
.menu-check {
  width: 13px; height: 13px; flex: none;
  fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
.menu-item.is-selected .menu-check { opacity: 1; }
.menu-item.is-selected { color: var(--accent); font-weight: 700; }

/* Gesperrter Eintrag: nicht ausgegraut und stumm, sondern anklickbar — der
   Klick ist die Frage, die Tarifseite die Antwort. */
.menu-item--pro { color: var(--dim); }
.menu-item--pro:hover { background: var(--tint); color: var(--accent); }
.menu-lock {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
/* Dieselbe Plakette wie in den Panel-Zeilen (.lock), nur eine Nummer kleiner,
   weil sie im Menü neben kurzen Wörtern steht. Ein blankes Schloss sagt „nein“,
   ohne zu sagen, wer „ja“ sagen könnte — die Marke sagt beides, und sie sagt es
   überall in der App gleich. */
.menu-pro {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: 22px; padding: 0 9px 0 7px;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.menu-item--pro:hover .menu-pro { background: var(--accent); color: #fff; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 116px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--tint-line);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
input[type="range"]:hover { background: color-mix(in srgb, var(--accent) 34%, var(--tint-line)); }
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--surface);
  box-shadow: var(--lift-sm);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.14); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.02); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--lift-sm);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input[type="range"]:hover::-moz-range-thumb { transform: scale(1.14); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }

.switch { display: inline-flex; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i {
  width: 40px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--tint-line);
  position: relative;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.switch i::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 18, 20, .28);
  transition: transform var(--fast) var(--ease), width var(--fast) var(--ease);
}
.switch:hover i { background: color-mix(in srgb, var(--accent) 32%, var(--tint-line)); }
.switch:hover input:checked + i { background: var(--accent-hover); }
/* Der Knopf zieht sich beim Drücken kurz in die Länge — das ist der ganze
   Unterschied zwischen einem Häkchen und einem Schalter. */
.switch:active i::after { width: 22px; }
.switch:active input:checked + i::after { transform: translateX(12px); }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }

.meter {
  position: relative;
  height: 10px;
  flex: 1 1 auto;
  min-width: 0;
  background: var(--tint-line);
  opacity: .7;
  /* Die Segmente kommen aus der Maske, nicht aus 32 Elementen im Dokument. */
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);
          mask-image: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);
  transition: opacity var(--normal) var(--ease);
}
.row-meter.is-live .meter { opacity: 1; }
/* clip-path statt width oder scaleX: es löst kein Layout aus (der Pegel läuft
   60-mal in der Sekunde) und lässt den Farbverlauf an seiner Stelle stehen —
   scaleX würde ihn stauchen und schon bei Zimmerlautstärke rot zeigen. */
.meter-fill {
  position: absolute;
  inset: 0;
  --lit: 0;
  background: linear-gradient(90deg, var(--ok) 0%, var(--ok) 58%, var(--hold) 82%, var(--rec) 100%);
  clip-path: inset(0 calc(100% - var(--lit) * 100%) 0 0);
}

.more { border-top: 1px solid var(--line); padding-top: 2px; }
.more .rows { padding-top: 0; }
.more summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding: 10px 0;
  user-select: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " ›"; display: inline-block; transition: transform var(--fast) var(--ease); }
.more[open] summary::after { transform: rotate(90deg); }
.more summary:hover { color: var(--accent-hover); }
.more summary:hover::after { transform: translateX(3px); }
.more[open] summary:hover::after { transform: rotate(90deg) translateX(3px); }
.more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.note { color: var(--dim); font-size: 13px; line-height: 1.5; margin-top: 10px; }
.note b { color: var(--text); font-weight: 700; }
.rows > .note { margin: 0 0 8px; }

.row-stack { flex-direction: column; align-items: stretch; gap: 8px; padding: 4px 0; }
.row-stack .row-label { justify-content: flex-start; }

/* Dateiformat als Pillen — gleiche Höhe wie die Auswahlfelder daneben. Was
   das eine Format vom anderen unterscheidet, steht in der Erklärblase. */
.chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.chips label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--dim);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips b { font-size: 13px; font-weight: 700; }
.chips label:hover { color: var(--text); background: var(--tint); }
.chips label:active { transform: scale(0.97); }
.chips label:has(input:checked) { background: var(--tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chips label:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

.link-button {
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.link-button:hover { color: var(--accent-hover); }
.link-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.link-button.danger { color: var(--dim); }
.link-button.danger:hover { color: var(--text); }

/* ───────────────────────── Knöpfe ─────────────────────────
   Pillen, exakt nach DESIGN.md § 5: 58px hoch, 0 23px Polster, 9999px rund,
   Gewicht 700, 16px. Kleine Variante 42px / 0 16px.

   Die Vorlage lässt Knöpfe flach; unser einziger bewusster Zusatz ist der
   getönte Schatten unter der einen Handlung, die zählt. Beim Stopp-Knopf ist
   derselbe Schatten rot getönt statt blau — ein blauer Schein unter einer
   roten Fläche wäre schlicht schmutzig, und Stopp ist hier der Hauptknopf. */

button { font: inherit; cursor: pointer; }

.primary, .quiet, .stop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 58px;
  padding: 0 23px;
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 700;
  border: 0;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}

/* display: inline-flex schlägt das UA-`[hidden] { display: none }`. Ohne diese
   Zeile stünden Pause, Stopp und Verwerfen schon vor der ersten Aufnahme da —
   die Knöpfe werden über das hidden-Attribut geschaltet, nicht über Klassen. */
.primary[hidden], .quiet[hidden], .stop[hidden] { display: none; }

.primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--btn); }
.primary:hover:not(:disabled) { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--btn-hover); }
.primary:active:not(:disabled) { transform: translateY(0); }

/* „Hell": zweite Handlung auf weißer Fläche (DESIGN.md § 5). */
.quiet { background: var(--tint); color: var(--text-soft); }
.quiet:hover:not(:disabled) { background: var(--tint-line); color: var(--text); transform: translateY(-1px); }
.quiet:active:not(:disabled) { transform: translateY(0); }

.stop { background: var(--rec); color: #fff; box-shadow: var(--btn-rec); }
.stop:hover:not(:disabled) { background: color-mix(in srgb, var(--rec) 88%, #000); transform: translateY(-2px); box-shadow: var(--btn-rec-hover); }
.stop:active:not(:disabled) { transform: translateY(0); }

button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Auch Verweise, die wie Knöpfe aussehen, brauchen den Ring — der „See plans"-
   Knopf im Ergebnis ist ein <a>. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-pill); }

a.primary { text-decoration: none; }

/* Kleine Pille: 42px — für Knöpfe innerhalb aufgeklappter Bereiche. */
.trim .quiet, .link-options .quiet, .rows .quiet {
  height: 42px;
  padding: 0 16px;
  font-size: 14px;
}

/* Schwebefenster-Schalter: Zeichen plus Wort, betont solange er an ist. */
.float-toggle { display: inline-flex; align-items: center; gap: 9px; }
.float-toggle[hidden] { display: none; }
.float-toggle svg { width: 18px; height: 18px; flex: none; }
.float-toggle.on { background: var(--accent); color: var(--on-accent); box-shadow: var(--btn); }
.float-toggle.on:hover { background: var(--accent-hover); }

/* ───────────────────────── Bühne ───────────────────────── */

.stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; height: 100%; }

/* Die Bühne füllt die verfügbare Höhe; das Bild sitzt über object-fit mittig
   darin. Kein toter Raum unter dem Fenster, wie groß es auch ist. */
.stage-frame {
  position: relative;
  /* Ein weicher Schein von oben statt einer toten Fläche: die leere Bühne ist
     das größte Feld der Seite, und eine gleichmäßig graue Fläche in dieser
     Größe wirkt wie ein Fehler, nicht wie eine Bühne. */
  background:
    radial-gradient(118% 84% at 50% -6%, var(--stage-glow) 0%, rgba(244, 248, 255, 0) 62%),
    var(--stage);
  border: 1px solid var(--stage-line);
  border-radius: var(--r-lg);
  /* Der Innenschatten ist die Kante: er trennt das aufgenommene Bild von der
     hellen Fläche, ohne einen zweiten Rahmen zu zeichnen. */
  box-shadow: inset 0 1px 3px rgba(18, 50, 99, .07);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 160px;
  display: grid;
  place-items: center;
  transition: box-shadow var(--normal) var(--ease), border-color var(--normal) var(--ease);
}
/* Läuft eine Aufnahme, bekommt die Bühne einen roten Rand — dieselbe Sprache
   wie der Punkt und der Balken. */
.stage-frame.is-recording {
  border-color: var(--rec);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rec) 22%, transparent);
}

/* Moment eins von dreien: die Quellen stehen. Das Bild kommt nicht mit einem
   Schnitt, sondern wächst die letzten anderthalb Prozent heran — mehr braucht
   es nicht, damit sich „es läuft" wie ein Ereignis anfühlt. */
#preview {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--calm) var(--ease), transform var(--calm) var(--ease);
}
.stage-frame.has-signal #preview { opacity: 1; transform: none; }
.stage-frame.can-grab #preview { cursor: grab; }
.stage-frame.can-resize #preview { cursor: nwse-resize; }
.stage-frame.dragging #preview { cursor: grabbing; }

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 32px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  animation: overlay-in var(--normal) var(--ease);
}
.overlay[hidden] { display: none; }
/* Aus dem Weg, aber nicht mit einem Schnitt: app.js hängt diese Klasse an und
   nimmt das Feld erst danach aus dem Fluss. */
.overlay.is-leaving {
  animation: none;
  opacity: 0;
  transform: scale(1.015);
  pointer-events: none;
  transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease);
}
@keyframes overlay-in {
  from { opacity: 0; transform: scale(0.99); }
  to { opacity: 1; transform: none; }
}

/* Solange nichts läuft, liegt hinter dem Feld nur die Bühne selbst — dann
   braucht es keinen Schleier über ihr eigenes Licht. Über einer laufenden
   Vorschau bleibt er, sonst wäre der Fehlertext nicht zu lesen. */
.stage-frame:not(.has-signal) .overlay { background: none; backdrop-filter: none; }

/* Das Zeichen über „Ready." — Bildschirm mit Kameraeinsatz, also genau das,
   was gleich passiert. Kein Wort mehr auf einer Seite, die schon genug redet. */
.overlay-badge {
  display: grid;
  place-items: center;
  flex: none;               /* sonst quetscht die Spalte es auf niedrigen Bühnen */
  width: 64px; height: 64px;
  margin-bottom: 10px;
  border-radius: 22px;
  background: var(--tint);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--tint-line);
}
.overlay-badge svg { width: 32px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.overlay-badge svg .fill { fill: currentColor; stroke: none; opacity: .5; }

.overlay-title { font-size: 26px; line-height: 1.15; font-weight: 800; color: var(--on-stage); }
.overlay-title.error { color: var(--rec); }
.overlay-text { color: var(--on-stage-dim); max-width: 46ch; font-size: 16px; }
.overlay-hint { color: color-mix(in srgb, var(--on-stage-dim) 72%, transparent); max-width: 50ch; font-size: 14px; margin-top: 2px; }
.overlay .primary { margin-top: 18px; }

/* Der Fehlerfall bleibt hell — nur das Zeichen wird rot. Eine dunkle Fläche
   als Strafe für einen abgebrochenen Freigabedialog wäre unverhältnismäßig. */
#stage-error .overlay-badge { color: var(--rec); box-shadow: var(--lift-sm), inset 0 0 0 1px color-mix(in srgb, var(--rec) 30%, transparent); }
#stage-error .overlay-badge svg .fill { opacity: 1; }

.countdown { background: color-mix(in srgb, var(--scrim) 72%, transparent); }
/* Kein Puls: der einzige Puls dieser Seite gehört dem Aufnahmepunkt. Die Zahl
   wechselt ohnehin jede Sekunde — das ist Bewegung genug. Sie setzt bei jedem
   Wechsel neu an, damit man den Takt sieht statt nur die Ziffer. */
.countdown span {
  font-size: clamp(72px, 13vw, 140px);
  line-height: 1;
  font-weight: 800;
  color: var(--on-stage);
  font-variant-numeric: tabular-nums;
  animation: countdown-beat var(--calm) var(--ease);
}
@keyframes countdown-beat {
  from { opacity: 0; transform: scale(1.16); }
  to { opacity: 1; transform: none; }
}

/* Moment zwei von dreien: es läuft. Die Fahne kommt von oben herein, damit der
   Wechsel ein Ereignis ist und nicht ein Element, das plötzlich da war. */
.rec-flag {
  position: absolute;
  top: 16px; left: 16px;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--lift-sm), inset 0 0 0 1px color-mix(in srgb, var(--rec) 22%, transparent);
  animation: flag-in var(--normal) var(--ease);
}
.rec-flag[hidden] { display: none; }
@keyframes flag-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.rec-flag i { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: rec-pulse 1.6s ease-in-out infinite; }
.rec-flag.paused i { background: var(--hold); animation: none; }

/* Der einzige Puls. Zustand, kein Schmuck (DESIGN.md § 7). */
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.22; } }

/* ───────────────────────── Steuerleiste ───────────────────────── */

.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* „18:24 of 30:00" — das Zeitbudget als Tatsache, nicht als Alarm. Bei fünf
   Minuten wird es deutlicher, bei einer unübersehbar; mehr als Farbe und ein
   Satz passiert nie, solange die Aufnahme läuft. */
.timer { display: flex; flex-direction: column; gap: 7px; margin-right: 4px; }
.timer[hidden] { display: none; }
.timer-row { display: flex; align-items: baseline; gap: 10px; }
.timer-row span { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.timer-row em { font-style: normal; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
#timer-total { font-weight: 700; margin-left: -4px; }
#timer-total:empty { display: none; }
.timer.is-soon #timer-total { color: var(--text); }
.timer.is-urgent .timer-row span, .timer.is-urgent #timer-total { color: var(--rec); }

/* Die Restzeit als Balken — sichtbar vom ersten Sekundenbruchteil der Aufnahme
   an, nicht erst wenn es knapp wird. Blau, solange Zeit übrig ist; dieselben
   zwei Zustandsfarben wie der Zeit-Text darüber, in den letzten Minuten. */
.budget-bar { height: 5px; border-radius: var(--r-pill); background: var(--tint-line); overflow: hidden; }
.budget-bar[hidden] { display: none; }
.budget-bar i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--accent);
  transition: transform var(--fast) linear, background var(--normal) var(--ease);
}
.timer.is-soon .budget-bar i { background: var(--hold); }
.timer.is-urgent .budget-bar i { background: var(--rec); }

.budget-note { color: var(--text-soft); font-size: 12px; font-weight: 600; max-width: 44ch; }
.budget-note[hidden] { display: none; }
.budget-note.is-urgent { color: var(--rec); }

.controls-right { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.output-info { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.shortcuts { color: var(--dim); font-size: 12px; display: flex; align-items: center; gap: 6px; }
kbd {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: 3px 8px;
  color: var(--accent);
}

/* ───────────────────────── Ergebnis ───────────────────────── */

/* Moment drei von dreien: fertig. Bild und Spalte kommen nacheinander herein,
   knapp versetzt — das liest sich als „hier ist es" statt als Seitenwechsel. */
.result { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 20px; align-items: start; overflow-y: auto; }
.result[hidden] { display: none; }

.result-video {
  background: var(--stage);
  border: 1px solid var(--stage-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift-sm);
  animation: result-in var(--calm) var(--ease) both;
}
#result-player { width: 100%; max-height: calc(100vh - 140px); display: block; }

.result-side {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-sm);
  padding: 26px 24px;
  animation: result-in var(--calm) var(--ease) 70ms both;
}
@keyframes result-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

#result-name, #link-password {
  width: 100%;
  margin: 16px 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
#link-password { margin: 0; }
#result-name:hover, #link-password:hover { border-color: var(--tint-line); background: var(--tint); }
#result-name:focus-visible, #link-password:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
#result-name, #link-password { transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }

.result-actions { display: flex; flex-direction: column; gap: 10px; }
.result-actions button { width: 100%; }
.result-actions button[hidden] { display: none; }
.result-footer { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.result-footer .quiet { height: 42px; padding: 0 16px; font-size: 14px; }

.share-box { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.share-box[hidden] { display: none; }
.share-progress { height: 6px; border-radius: var(--r-pill); background: var(--tint-line); overflow: hidden; margin-bottom: 12px; }
.share-progress[hidden] { display: none; }
#share-progress-fill { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--accent); transition: transform var(--fast) linear; }
.share-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: 8px 8px 8px 16px;
  margin-top: 10px;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--fast) var(--ease);
}
.share-link:hover { box-shadow: inset 0 0 0 1px var(--tint-line); }
.share-link code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-link .quiet { height: 36px; padding: 0 16px; font-size: 13px; background: var(--surface); }
.share-link .quiet:hover { background: var(--surface); box-shadow: var(--lift-sm); }

.trim, .link-options { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
.trim[hidden], .link-options[hidden] { display: none; }
.trim summary, .link-options summary {
  list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); padding: 10px 0; user-select: none;
}
.trim summary::-webkit-details-marker, .link-options summary::-webkit-details-marker { display: none; }
.trim summary::after, .link-options summary::after { content: " ›"; display: inline-block; transition: transform var(--fast) var(--ease); }
.trim[open] summary::after, .link-options[open] summary::after { transform: rotate(90deg); }
.trim summary:hover, .link-options summary:hover { color: var(--accent-hover); }
.trim summary:hover::after, .link-options summary:hover::after { transform: translateX(3px); }
.trim[open] summary:hover::after, .link-options[open] summary:hover::after { transform: rotate(90deg) translateX(3px); }
.trim summary:focus-visible, .link-options summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.trim input[type="range"] { width: 150px; }

.upsell {
  margin-top: 20px;
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--tint-line);
}
.upsell[hidden] { display: none; }
.upsell h3 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; font-weight: 800; color: var(--text); }
.upsell p { color: var(--dim); font-size: 14px; line-height: 1.55; }
/* Die zwei Dinge, die diese Aufnahme nicht konnte — genannt, nicht vorgehalten. */
.upsell-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.upsell-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; align-items: start; }
.upsell-list li[hidden] { display: none; }
.upsell-list svg {
  grid-row: span 2;
  width: 15px; height: 15px; margin-top: 3px;
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round;
}
.upsell-list b { color: var(--text); font-size: 14px; font-weight: 700; }
.upsell-list span { grid-column: 2; color: var(--dim); font-size: 13px; line-height: 1.45; }

.upsell-price { margin: 16px 0; display: flex; flex-direction: column; gap: 3px; }
.upsell-price b { color: var(--text); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.upsell-price span { font-size: 13px; }
.upsell .primary { width: 100%; }

/* ───────────────────────── Aufnahme-Insel ─────────────────────────
   Eingeklappt eine schmale Pille mit Punkt und Zeit. Zeiger oder Tastaturfokus
   klappt sie auf: Fortschritt, Größe, Restzeit, Bedienung. Auf hellem Grund
   trägt sie den gemessenen Schwebeschatten statt eines Rahmens. */

.island {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  justify-content: center;
}
.island[hidden] { display: none; }

.island-core {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: var(--lift);
  cursor: default;
  transition:
    min-width var(--calm) var(--ease),
    border-radius var(--calm) var(--ease),
    padding var(--calm) var(--ease),
    background var(--normal) var(--ease);
  animation: island-in var(--calm) var(--ease);
}
.island-core:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@keyframes island-in {
  from { opacity: 0; transform: translateY(-14px) scale(0.88); }
  to { opacity: 1; transform: none; }
}

.island-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  white-space: nowrap;
  height: 22px;
}
.island-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rec);
  flex: none;
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.island.paused .island-dot { background: var(--hold); animation: none; }
.island-time { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.island-label {
  display: grid;
  grid-template-columns: 0fr;
  font-size: 14px;
  color: var(--dim);
  opacity: 0;
  transition: grid-template-columns var(--calm) var(--ease), opacity var(--normal) var(--ease);
}
.island-label > span { overflow: hidden; white-space: nowrap; }

/* 0fr -> 1fr lässt sich weich animieren und braucht keine feste Höhe. */
.island-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--calm) var(--ease), opacity var(--normal) var(--ease);
}
.island-inner { overflow: hidden; min-height: 0; }

.island-core:hover,
.island-core:focus-within,
.island.open .island-core {
  min-width: 280px;
  border-radius: var(--r-md);
  padding: 14px 16px 16px;
}
.island-core:hover .island-more,
.island-core:focus-within .island-more,
.island.open .island-more { grid-template-rows: 1fr; opacity: 1; }
.island-core:hover .island-label,
.island-core:focus-within .island-label,
.island.open .island-label { grid-template-columns: 1fr; opacity: 1; }

.island-bar { height: 6px; border-radius: var(--r-pill); background: var(--tint-line); overflow: hidden; margin: 14px 0 10px; }
.island-bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--rec); transition: transform var(--normal) linear; }
.island.paused .island-bar i { background: var(--hold); }
.island-bar.no-target i { transform: scaleX(1); opacity: 0.28; }

.island-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.island-buttons { display: flex; gap: 8px; }
.island-btn {
  flex: 1;
  height: 38px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--tint);
  color: var(--accent);
  display: grid;
  place-items: center;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform 0.08s ease;
}
.island-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 0; }
.island-btn#island-discard svg { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.island-btn:hover { background: var(--tint-line); transform: translateY(-1px); }
.island-btn:active { transform: translateY(1px); }
.island-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.island-btn .icon-resume { display: none; }
.island.paused .island-btn .icon-pause { display: none; }
.island.paused .island-btn .icon-resume { display: block; }
.island-btn--stop { background: var(--rec); color: #fff; flex: 1.4; }
.island-btn--stop:hover { background: color-mix(in srgb, var(--rec) 88%, #000); box-shadow: var(--btn-rec); }
.island-btn[hidden] { display: none; }

/* ───────────────────────── Erste Öffnung ─────────────────────────
   Drei Sätze, einmal, danach nie wieder. Bewusst kein Modal: die Karte liegt
   neben der Arbeit, nicht davor, und ist mit einem Klick weg. */

.onboard {
  position: fixed;
  right: 20px;
  bottom: 92px;      /* über der Steuerleiste, nicht darauf */
  z-index: 80;
  width: min(332px, calc(100vw - 32px));
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift);
  animation: rise var(--calm) var(--ease);
}
.onboard[hidden] { display: none; }
.onboard-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.onboard h2 { font-size: 20px; line-height: 1.2; font-weight: 800; margin: 0 0 6px; }
.onboard p { color: var(--dim); font-size: 14px; line-height: 1.55; }
.onboard-dots { display: flex; gap: 6px; margin: 16px 0 14px; }
.onboard-dots i { width: 18px; height: 4px; border-radius: var(--r-pill); background: var(--tint-line); transition: background var(--fast) var(--ease); }
.onboard-dots i.on { background: var(--accent); }
.onboard-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onboard-actions .primary { height: 42px; padding: 0 20px; font-size: 14px; }

/* ───────────────────────── Hinweise ───────────────────────── */

.toast-area {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 60;
  pointer-events: none;
  width: min(520px, calc(100vw - 36px));
}
.toast {
  pointer-events: auto;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--dim);
  box-shadow: var(--lift);
  animation: rise var(--normal) var(--ease);
}
.toast strong { display: block; color: var(--text); font-weight: 700; margin-bottom: 2px; }
.toast.ok strong { color: var(--ok); }
.toast.warn strong { color: var(--hold); }
.toast.error strong { color: var(--rec); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ───────────────────────── Dialoge ───────────────────────── */

dialog {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  max-width: 600px;
  width: calc(100vw - 36px);
  box-shadow: var(--lift);
}
/* Der Schleier bleibt hell-blaustichig statt schwarz: ein Dialog auf dieser
   Seite unterbricht, er droht nicht. */
dialog::backdrop { background: rgba(18, 50, 99, 0.28); backdrop-filter: blur(5px); }
dialog[open] { animation: dialog-in var(--normal) var(--ease); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
dialog article { padding: 34px 34px 30px; max-height: 78vh; overflow-y: auto; }
dialog h2 { font-size: 28px; line-height: 1.12; font-weight: 800; margin: 0 0 12px; }
dialog h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 700; color: var(--text); }
dialog ol, dialog ul { padding-left: 20px; margin: 0; color: var(--dim); font-size: 15px; }
dialog li { margin-bottom: 8px; }
dialog p { color: var(--dim); font-size: 15px; line-height: 1.6; }
dialog p + p { margin-top: 10px; }
dialog strong { color: var(--text); font-weight: 700; }
dialog form { margin-top: 26px; text-align: right; }
dialog form.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ───────────────────────── Schmal ───────────────────────── */

/* Schmale Fenster: Einstellungen und Bühne stapeln, die Seite darf scrollen —
   aber die Steuerleiste bleibt unten, damit „Start recording" ohne Wischen
   erreichbar ist. */
@media (max-width: 1000px) {
  body { overflow: auto; }
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-items: start; }
  .layout[data-view="record"] { padding-bottom: 104px; }
  .panel { position: static; max-height: none; order: 2; }
  .stage { order: 1; height: auto; }
  .stage-frame { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .result { grid-template-columns: minmax(0, 1fr); }
  .shortcuts { display: none; }
  /* Auf einer 16:9-Bühne von 200 Pixel Höhe ist für Schmuck kein Platz —
     dort zählen Satz und Knopf. */
  .overlay-badge { display: none; }

  .controls {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    gap: 10px;
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .controls .primary, .controls .stop { flex: 1; }
  .controls-right { margin-left: auto; }
  .output-info { font-size: 12px; }

  /* Die Karte legt sich über die feste Steuerleiste, nicht darunter. */
  .onboard {
    left: 12px;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: auto;
  }
  .budget-note { font-size: 11px; max-width: 48ch; }
}

@media (max-width: 620px) {
  .topbar { padding: 0 14px; gap: 8px; }
  .privacy-chip { display: none; }
  .layout { padding: 0 14px 14px; gap: 14px; }
  .panel { border-radius: var(--r-md); padding: 14px; }
  .stage-frame { border-radius: var(--r-md); }
  .result-video, .result-side { border-radius: var(--r-md); }
  .result-side { padding: 20px 18px; }
  .timer-row span { font-size: 24px; }
  .controls .float-toggle span { display: none; }
  .controls .float-toggle { padding: 0 20px; }
  dialog { border-radius: var(--r-md); }
  dialog article { padding: 24px 22px; }
  dialog h2 { font-size: 24px; }
  h2 { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  /* Der Aufnahmepunkt bleibt sichtbar — nur ohne Puls. Deckkraft voll. */
  .rec-flag i, .island-dot { opacity: 1 !important; }
}