/* Dunkel durchgehend: Regie und Buehne stehen fast immer im abgedunkelten Raum. */

:root {
  --bg: #0d0f12;
  --panel: #161a20;
  --panel-2: #1e232b;
  --line: #2a303a;
  --text: #eef1f5;
  --muted: #9aa3af;
  --accent: #3ecf8e;
  --accent-ink: #06150e;
  --warn: #ffb020;
  --danger: #ff4d4d;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Ziffern in der normalen Schrift mit gleich breiten Zahlen - Monospace-
     Schriften haben oft gepunktete oder durchgestrichene Nullen. */
  --digits: "Inter", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
}
[hidden] { display: none !important; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; }

/* ---------------- Bausteine ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 40px; padding: .45em 1em;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--text);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: #3b4350; background: #252b35; }
.btn:focus-visible, .icon-btn:focus-visible, .row-select:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover:not(:disabled) { background: #5ad9a0; }
.btn.primary.running, .btn.primary.running:hover:not(:disabled) { background: var(--warn); border-color: var(--warn); color: #1d1300; }
.btn.big { min-height: 52px; font-size: 1.1rem; padding: .5em 1.4em; }
.btn.small { min-height: 32px; padding: .25em .7em; font-size: .9rem; }
.btn.active { background: var(--text); color: var(--bg); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #1a0505; }
.btn.danger:hover:not(:disabled) { background: #ff7070; border-color: #ff7070; }

.icon-btn, .link-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer; font: inherit;
}
.icon-btn { width: 34px; height: 34px; border-radius: 6px; font-size: 1rem; }
.icon-btn:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.icon-btn:disabled { opacity: .25; cursor: default; }
.icon-btn.danger:hover { color: var(--danger); }
.link-btn { text-decoration: underline; font-size: .85rem; padding: 0; }

input, textarea, select {
  width: 100%; padding: .55em .7em;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit;
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }

.hint { display: block; color: var(--muted); font-size: .85rem; }
.copy-fallback { overflow-wrap: anywhere; user-select: all; }
.warn-text { color: var(--warn); }
.error-text { color: var(--danger); margin: .5em 0 0; }

.banner { margin: 12px 16px 0; padding: .7em 1em; border-radius: var(--radius); }
.banner.warn { background: #3a2c07; color: #ffd98a; }
.banner.error { background: #3d1111; color: #ffb3b3; }

.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.box > summary { cursor: pointer; font-weight: 600; }
.box[open] > summary { margin-bottom: 10px; }
.tag { padding: 0 .45em; border-radius: 4px; background: var(--panel-2); font-size: .8rem; }

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

.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { font-weight: 800; letter-spacing: .02em; color: var(--text); text-decoration: none; white-space: nowrap; }
.brand-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--muted); }
.room-title { flex: 1; min-width: 0; max-width: 520px; font-weight: 600; background: transparent; border-color: transparent; }
.room-title:hover, .room-title:focus { border-color: var(--line); background: var(--bg); }
.room-title-static { flex: 1; min-width: 0; margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conn-pill { margin-left: auto; padding: .2em .7em; border-radius: 999px; font-size: .8rem; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.conn-pill.online { color: var(--accent); }
.conn-pill.offline, .conn-pill.closed, .conn-pill.waiting { color: var(--danger); }

/* ---------------- Regie ---------------- */

.control-grid {
  display: grid; grid-template-columns: minmax(320px, 5fr) minmax(320px, 6fr);
  gap: 16px; padding: 16px; align-items: start;
}
.panel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { margin: 0; font-size: 1.1rem; }

.preview { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.transport { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.transport .btn.big { min-width: 160px; }
.transport.small .btn { flex: 1 1 auto; }

.links { display: flex; flex-direction: column; gap: 10px; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.link-actions { display: flex; gap: 6px; }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.settings label { display: flex; gap: .5em; align-items: center; }
.setting-select { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 10px; }
.setting-select select { flex: 1 1 12em; min-width: 0; }
.shortcuts { margin: 0; }

body.readonly .transport, body.readonly #btn-add, body.readonly .row-actions,
body.readonly .settings, body.readonly .setting-select, body.readonly [data-copy="control"], body.readonly .messages-box,
body.readonly .staff-only, body.readonly .danger-zone, body.readonly .link-row:has([data-copy="moderator"]) { display: none; }
body.readonly .room-title { pointer-events: none; }

.danger-zone { margin: 0 16px 16px; }
.danger-zone p { margin: 0 0 12px; color: var(--muted); }

.rundown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rundown .empty { color: var(--muted); padding: 1em; text-align: center; }
.rundown-row {
  display: grid; grid-template-columns: 40px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 8px 8px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.rundown-row.active { border-color: var(--accent); background: #13241c; }
.row-select {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer;
}
.row-select:hover { border-color: var(--accent); color: var(--text); }
.rundown-row.active .row-select { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.row-main { min-width: 0; }
.row-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: .85rem; }
.row-notes { color: var(--muted); font-size: .85rem; white-space: pre-wrap; margin-top: 2px; }
.row-times { display: flex; flex-direction: column; align-items: flex-end; font-size: .85rem; color: var(--muted); }
.row-times .remaining { font: 700 1.1rem var(--digits); font-variant-numeric: tabular-nums; color: var(--text); }
.row-actions { display: flex; }

.phase-warn { color: var(--warn) !important; }
.phase-danger, .phase-over { color: var(--danger) !important; }

/* ---------------- Nachrichten ---------------- */

:root {
  --msg-white: #ffffff;
  --msg-green: #3ecf8e;
  --msg-yellow: #ffc233;
  --msg-red: #ff4d4d;
}
.role-tag { padding: .15em .6em; border-radius: 6px; background: #2a2140; color: #cdb8ff; font-size: .8rem; font-weight: 700; }
#messages { display: flex; flex-direction: column; gap: 12px; }
.msg-compose { display: flex; flex-direction: column; gap: 8px; }
.msg-compose-head { font-weight: 600; font-size: .9rem; color: var(--muted); }
.msg-input { resize: vertical; min-height: 60px; font-size: 1rem; }
.msg-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.msg-options .check { display: flex; align-items: center; gap: .4em; }
.msg-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.swatches { display: flex; gap: 6px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); }
.swatch input:checked + span { outline: 2px solid var(--text); outline-offset: 2px; }
.swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.swatch-white span, .dot-white { background: var(--msg-white); }
.swatch-green span, .dot-green { background: var(--msg-green); }
.swatch-yellow span, .dot-yellow { background: var(--msg-yellow); }
.swatch-red span, .dot-red { background: var(--msg-red); }
.dot { flex: none; width: 12px; height: 12px; border-radius: 50%; }

.msg-live {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius); background: #2a1f05; border: 1px solid var(--warn);
}
.msg-live-label { grid-column: 1 / -1; color: var(--warn); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.msg-live-text { font-size: 1.1rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.msg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.msg-list .empty { color: var(--muted); }
.msg-row {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center;
  padding: 6px 6px 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2);
}
.msg-row.on-stage { border-color: var(--warn); }
.msg-toggle { min-width: 96px; }
.msg-toggle.active { background: var(--warn); border-color: var(--warn); color: #1d1300; }
.msg-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.msg-bold { font-weight: 800; }
.msg-live-text.msg-white { color: var(--msg-white); }
.msg-live-text.msg-green { color: var(--msg-green); }
.msg-live-text.msg-yellow { color: var(--msg-yellow); }
.msg-live-text.msg-red { color: var(--msg-red); }

/* ---------------- Bearbeiten ---------------- */

.edit-dialog {
  width: min(520px, calc(100vw - 32px)); padding: 0;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text);
}
.edit-dialog::backdrop { background: rgb(0 0 0 / .6); }
.edit-dialog form { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.edit-dialog h2 { margin: 0 0 4px; font-size: 1.2rem; }
.edit-dialog label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .9rem; }
.edit-dialog label.check { flex-direction: row; align-items: center; gap: .5em; font-weight: 400; }
.mode-choice { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 0; }
.mode-choice legend { padding: 0 4px; font-size: .9rem; font-weight: 600; }
.mode-choice label { flex-direction: row; align-items: center; gap: .4em; font-weight: 400; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

/* ---------------- Buehnenansicht ---------------- */

/* Spalte: Buehne fuellt den Rest, darunter bei Bedarf die Zeile mit dem Wach-Knopf */
.view-page { background: #000; overflow: hidden; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.view-stage { position: relative; flex: 1; min-height: 0; }
.view-page .wake-btn { flex: none; margin: 8px auto calc(8px + env(safe-area-inset-bottom)); }

.stage {
  container-type: size;
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  padding: 3cqh 4cqw;
  background: #000; color: #fff;
  font-family: var(--font);
  user-select: none;
}
.stage-top { display: flex; justify-content: space-between; gap: 4cqw; font-size: max(12px, 4.2cqh); color: #c9ced6; }
.stage-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.stage-clock { font-family: var(--digits); font-variant-numeric: tabular-nums; }
.stage-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; }
.stage-time {
  font-family: var(--digits); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: min(27cqw, 58cqh); line-height: 1; letter-spacing: -.02em;
}
.stage.long .stage-time { font-size: min(18cqw, 50cqh); }
.stage-speaker { font-size: max(12px, 6cqh); color: #d7dbe1; margin-top: 1cqh; text-align: center; }
.stage-bottom { display: flex; flex-direction: column; gap: 1.5cqh; }
.stage-progress { height: 1.6cqh; min-height: 4px; background: #22262d; border-radius: 99px; overflow: hidden; }
.stage-bar { height: 100%; width: 0; background: var(--accent); }
.stage-foot { display: flex; justify-content: space-between; gap: 4cqw; font-size: max(11px, 3.6cqh); color: #9aa3af; }
.stage-badge { text-transform: uppercase; letter-spacing: .08em; }
/* Hinweis der kostenlosen Fassung: eigene Zeile unten links, klein und gedaempft */
.stage-brand {
  align-self: flex-start;
  font-size: max(9px, min(1.8cqh, 3.2cqw)); line-height: 1.2; letter-spacing: .04em;
  color: #6b7280; white-space: nowrap;
}

.stage.phase-warn .stage-time { color: var(--warn); }
.stage.phase-warn .stage-bar { background: var(--warn); }
.stage.phase-danger .stage-time { color: var(--danger); }
.stage.phase-danger .stage-bar { background: var(--danger); }
.stage.phase-over { background: #3a0000; }
.stage.phase-over .stage-time { color: #fff; animation: blink 1s steps(1) infinite; }
.stage.phase-over .stage-bar { background: var(--danger); }
.stage.paused .stage-time { opacity: .75; }
.stage.flashing { animation: flash .5s steps(1) 6; }
.stage.blackout { background: #000 !important; animation: none; }
.stage.blackout > * { visibility: hidden; }

/* Nachricht auf der Buehne: die Zeit ruecken zusammen, die Nachricht bekommt den Platz */
.stage-message { display: none; }
.stage.has-message .stage-message {
  display: block; max-width: 100%; margin-top: 2.5cqh; padding: 1.5cqh 3cqw;
  border-radius: 1.5cqh; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 9cqh; line-height: 1.15; font-weight: 600;
}
.stage.has-message .stage-time { font-size: min(18cqw, 34cqh); }
.stage.has-message.long .stage-time { font-size: min(13cqw, 30cqh); }
.stage.has-message .stage-speaker { display: none; }
.stage.msg-medium .stage-message { font-size: 7cqh; }
.stage.msg-long .stage-message { font-size: 5.2cqh; }
.stage-message.msg-white { color: var(--msg-white); background: rgb(255 255 255 / .08); }
.stage-message.msg-green { color: #06150e; background: var(--msg-green); }
.stage-message.msg-yellow { color: #1d1300; background: var(--msg-yellow); }
.stage-message.msg-red { color: #fff; background: #d62828; }
.stage-message.msg-bold { font-weight: 800; }
.stage.msg-flashing .stage-message { animation: msgflash .5s steps(1) 6; }

@keyframes blink { 50% { opacity: .25; } }
@keyframes msgflash { 50% { background: #fff; color: #000; } }
@keyframes flash { 50% { background: #fff; color: #000; } }

@media (prefers-reduced-motion: reduce) {
  .stage.phase-over .stage-time { animation: none; }
  .stage.flashing, .stage.msg-flashing .stage-message { animation-duration: 1s; animation-iteration-count: 3; }
}

.conn-dot {
  position: fixed; right: 12px; bottom: 10px;
  font-size: 13px; color: #fff; background: rgb(160 20 20 / .85); border-radius: 6px; padding: 2px 8px;
}
.conn-dot.online, .conn-dot.connecting:empty { display: none; }
.conn-dot.connecting { background: rgb(60 60 60 / .85); }
/* Raum voll: das sagt schon der Hinweis */
.conn-dot.waiting { display: none; }
.view-notice {
  position: fixed; inset: auto 16px 16px; padding: 12px 16px; border-radius: 10px;
  background: #3d1111; color: #ffb3b3; text-align: center; font-size: 18px;
}

/* Knopf, solange die Wach-Sperre einen Tipp braucht (iOS). Er hat eigenen
   Platz und verdeckt nie Text: in der Buehnenansicht als Zeile unter der
   Buehne, im Ablaufplan im Fluss ueber dem Inhalt. Bei "Raum geloescht"
   ueberlaesst er dem Hinweis das Feld. */
.wake-btn {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; min-height: 40px; margin: 12px auto 0; padding: .45em 1.1em;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: #c9ced6;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.wake-btn:hover { background: var(--panel-2); color: var(--text); }
.wake-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.view-notice:not([hidden]) ~ .wake-btn,
.view-notice:not([hidden]) ~ .wake-hint { display: none; }

/* Hinweis unter dem Knopf, nur ohne sichere Verbindung (iPad per http). Klein,
   gedaempft, auf der Buehnenansicht in derselben Zeile wie der Knopf. */
.wake-hint {
  max-width: 34em; margin: 6px auto 0; padding: 0 16px;
  color: var(--muted); font-size: 12px; line-height: 1.4; text-align: center;
}
.wake-hint[hidden] { display: none; }
.view-page .wake-hint { flex: none; margin: -2px auto calc(8px + env(safe-area-inset-bottom)); }

/* Ersatz fuer die Wach-Sperre: stummes Video, fuer Menschen unsichtbar */
.wake-video {
  position: fixed; left: -2px; top: -2px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* ---------------- Sync-Signal ---------------- */
/* Buehnenansicht und Ablaufplan: schwarzes Bild ueber allem, grosse
   Sekundenzahl, Balken im Sekundentakt (Breite per transform aus sync.js),
   Blitz zur vollen Sekunde (Klasse sync-flash, ~100 ms). Darueber bleiben
   sichtbar und bedienbar: Verbindungshinweis, "Bildschirm wach halten" samt
   Hinweis - sonst sperrte ein iPad (http) mitten im Abgleich. */
.sync-view {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: #000; color: #fff;
  user-select: none;
}
.sync-number {
  font-family: var(--digits); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: min(42vw, 52vh); line-height: 1; letter-spacing: -.02em;
}
.sync-track {
  width: min(100%, 1600px); height: max(12px, 3vh);
  background: #22262d; border-radius: 99px; overflow: hidden;
}
.sync-bar { width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.sync-uncertainty { font: 500 max(13px, 2.6vh) var(--digits); font-variant-numeric: tabular-nums; color: #9aa3af; }
.sync-view.sync-flash { background: #fff; color: #000; }
.sync-view.sync-flash .sync-track { background: #c9ced6; }
.sync-view.sync-flash .sync-bar { background: #000; }
.sync-view.sync-flash .sync-uncertainty { color: #333; }
.sync-view .sync-sound { margin: 0; }
.view-page .conn-dot { z-index: 50; }
body > .wake-btn, body > .wake-hint { position: relative; z-index: 50; }
.agenda-page .topbar .conn-pill { position: relative; z-index: 50; }
/* Regie und Moderation: nur ein dezenter Hinweis unter der Vorschau */
.sync-note { margin: 0; color: var(--warn); font-size: .85rem; }

/* ---------------- Ablaufplan-Ansicht ---------------- */

.agenda-clock { font: 600 1.1rem var(--digits); font-variant-numeric: tabular-nums; }
.agenda-main { max-width: 900px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.agenda-current { background: var(--panel); border: 1px solid var(--accent); border-radius: 14px; padding: 16px 20px; }
.current-label { color: var(--accent); font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .08em; }
.current-title { font-size: 1.5rem; font-weight: 700; }
.current-speaker { color: var(--muted); }
.current-time { font: 700 clamp(2.5rem, 10vw, 4.5rem)/1.1 var(--digits); font-variant-numeric: tabular-nums; }
.agenda-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.agenda-row {
  display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.agenda-row .num { color: var(--muted); font-weight: 700; text-align: center; }
.agenda-row .when { font-variant-numeric: tabular-nums; color: var(--muted); }
.agenda-row .row-notes { white-space: pre-line; overflow-wrap: anywhere; }
.agenda-row.done { opacity: .45; }
.agenda-row.active { border-color: var(--accent); }
.agenda-row.active .when { color: var(--accent); }

/* ---------------- QR-Karte ---------------- */
/* Jede Anzeige zeigt auf Wunsch der Regie den Code ihrer eigenen Seite. Weiss
   mit Rand (und Ruhezone im SVG), damit er auch auf dunklem Grund scannbar
   bleibt. Die Karte hat immer eigenen Platz und liegt nie ueber dem Timer. */
.qr-card {
  display: flex; align-items: center; gap: 12px;
  width: fit-content; max-width: 100%; padding: 8px 8px 8px 14px;
  border: 2px solid #c9ced6; border-radius: 12px;
  background: #fff; color: #111;
}
.qr-code { flex: none; line-height: 0; }
.qr-code svg { display: block; width: 132px; height: 132px; }
.qr-label { order: -1; margin: 0; max-width: 12em; font-size: 14px; font-weight: 600; line-height: 1.35; }
/* Nur Beschriftung (Regie ohne Raum-Schluessel): ohne Code-Spalte */
.qr-code[hidden] + .qr-label { max-width: 24em; font-weight: 400; }

/* Buehne: eigene Zeile unter der Buehne, rechts. Die Buehne rechnet in
   Container-Einheiten und wird nur etwas niedriger - bei 16:9 und hochkant
   begrenzt meist die Breite den Timer, die Hoehe kostet kaum Groesse. */
.view-page .qr-card {
  flex: none; align-self: flex-end;
  margin: 0 max(12px, 2vmin) calc(max(12px, 2vmin) + env(safe-area-inset-bottom));
}
.view-page .qr-code svg { width: clamp(96px, 18vmin, 240px); height: clamp(96px, 18vmin, 240px); }
.view-page .qr-label { font-size: clamp(13px, 2.2vmin, 22px); }
/* Verbindungshinweis weicht nach links aus, sonst laege er auf dem Code */
.view-page.qr-on .conn-dot { right: auto; left: 12px; }

/* Ablaufplan, Moderation, Regie: im Fluss, rechts unter dem Inhalt */
.agenda-main > .qr-card, .panel > .qr-card { align-self: flex-end; }
/* Ablaufplan ab Tablet-Breite (Monitor neben der Buehne): Karte fest unten
   rechts, immer ohne Scrollen zu sehen. Die Liste haelt bei qr-on rechts so
   viel Platz frei, wie die Karte samt Abstand braucht, und bleibt mittig,
   solange daneben ohnehin genug Rand ist - die Karte liegt nie ueber einer
   Zeile. Unter 861 px (Handy) bleibt sie im Fluss unter der Liste. */
@media (min-width: 861px) {
  .agenda-page { --qr-reserve: 224px; }
  .agenda-page .qr-card {
    position: fixed; right: 20px; bottom: 20px;
    flex-direction: column; align-items: stretch; width: 184px; padding: 10px;
  }
  .agenda-page .qr-code svg { width: 160px; height: 160px; }
  .agenda-page .qr-label { order: 0; max-width: none; font-size: 13px; }
  .agenda-page.qr-on .agenda-main { margin-left: auto; margin-right: max(var(--qr-reserve), calc((100% - 900px) / 2)); }
}

/* Regie: Schalter und "Geraete verbinden" bei den Links zum Teilen */
.qr-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; }
.qr-toggle { display: flex; gap: .5em; align-items: center; }

/* ---------------- Startseite ---------------- */

.narrow { max-width: 820px; margin: 0 auto; padding: 32px 16px 64px; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 12px; }
.lead { font-size: 1.1rem; color: #c9ced6; margin: 0 0 20px; }
.create-form label { display: block; font-weight: 600; margin-bottom: 6px; }
.create-row { display: flex; gap: 10px; }
.create-row input { flex: 1; min-height: 52px; font-size: 1.05rem; }
.room-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.room-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.box h2 { margin: 0 0 10px; font-size: 1.05rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.features h3 { margin: 0 0 4px; font-size: 1rem; }
.features p { margin: 0; color: var(--muted); }
/* Apps (Startseite, Pro-Startseite): je App ein Eintrag, in .app-get das
   Abzeichen "demnächst" oder der Knopf zum Laden */
.apps-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.app-item { display: flex; flex-direction: column; gap: 6px; }
.app-item h3 { margin: 0; font-size: 1rem; }
.app-item p { margin: 0; color: var(--muted); }
.app-item .app-get { margin-top: 4px; }

/* ---------------- Pro ---------------- */

.pro-offer { display: flex; flex-direction: column; gap: 28px; }
.pro-teaser { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }
.pro-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pro-box-plus { border-color: var(--accent); }
.pro-list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; color: #c9ced6; }
.tag.soon { color: var(--warn); white-space: nowrap; }
.pro-heading { margin: 0 0 12px; font-size: 1.3rem; }
.pro-passes {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.pro-passes li {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
/* Verkaufbar: die ganze Kachel fuehrt zum Tarif im Shop */
.pro-passes li:has(> .pass-tile) { padding: 0; }
.pass-tile {
  display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 14px 16px;
  border-radius: var(--radius); color: inherit; text-decoration: none;
}
.pro-passes li:has(> .pass-tile:hover), .pro-passes li:has(> .pass-tile:focus-visible) { border-color: var(--accent); }
.pass-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pass-cta { margin-top: 8px; color: var(--accent); font-weight: 600; font-size: .9rem; }
.pass-soon { margin-top: 8px; color: var(--muted); font-size: .8rem; }
.pass-name { font-weight: 700; }
.pass-price { font: 800 1.8rem/1.2 var(--digits); color: var(--accent); }
.pass-days { color: var(--muted); font-size: .9rem; }
.pro-terms { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.pro-terms p { margin: 0; color: #c9ced6; line-height: 1.55; }
.pro-buy { display: flex; }
.shop-soon { margin: 0; padding: .7em 1em; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.pro-enter label { display: block; margin-bottom: 8px; color: var(--muted); }
.pro-enter input, .pro-activate input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9rem; }
.pro-stored { margin: 0; }

.pro-overview { display: flex; flex-direction: column; gap: 14px; overflow-wrap: anywhere; }
.pro-overview h1 { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
#overview-body { display: flex; flex-direction: column; gap: 12px; }
#overview-body p { margin: 0; }
#overview-body > .btn { align-self: flex-start; }
.pro-plan { margin: 0; font-size: 1.25rem; }
.pro-rooms-head { margin: 8px 0 0; font-size: 1.1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pro-count { display: inline; font-weight: 400; }
.pro-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pro-rooms li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.pro-room-title { min-width: 0; }
.pro-room-links { display: flex; flex-wrap: wrap; gap: 6px; }
.pro-new-room { margin-top: 8px; }
.pro-forget { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0 0; }
.pro-remember { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; }
.pro-remember label { display: flex; gap: .5em; align-items: center; font-weight: 600; }

/* Regie: Kasten Pro und neuer Regie-Link */
.pro-summary { font-weight: 400; color: var(--muted); }
.pro-use-stored { margin: 8px 0 0; }
.pro-summary[data-plan="pro"] { color: var(--accent); }
.pro-until { margin: 0; }
#pro-free p { margin: 0 0 10px; }
.pro-activate label { display: block; font-weight: 600; margin-bottom: 6px; }
.issue-key { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.issue-key p { margin: 0; }

/* Kostenlose Fassung: Pro-Funktionen ausgegraut mit Schloss (nur Regie und
   Moderation, siehe pro-only.js). Nicht disabled - der Klick oeffnet das
   Fenster "Nur mit Pro". */
.pro-locked, .pro-locked * { cursor: pointer; }
.pro-locked::after, .swatches.has-lock::after {
  content: "🔒\00a0Pro"; flex: none; align-self: center;
  padding: 0 .4em; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--muted);
  font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.btn.pro-locked { background: transparent; border-style: dashed; color: var(--muted); }
.btn.pro-locked:hover { background: transparent; border-color: var(--muted); }
label.pro-locked { color: var(--muted); }
label.pro-locked::after { margin-left: .4em; }
.pro-locked input, .pro-locked textarea, .pro-locked select { opacity: .5; }
/* Beschriftung ueber dem Feld: Schloss oben rechts */
.edit-dialog form > label.pro-locked:not(.check), .edit-dialog .two > label.pro-locked { position: relative; }
.edit-dialog form > label.pro-locked:not(.check)::after, .edit-dialog .two > label.pro-locked::after { position: absolute; top: 0; right: 0; }
.link-actions.pro-locked { align-items: center; }
.link-actions.pro-locked .btn { background: transparent; border-style: dashed; color: var(--muted); }
/* Farben: Weiss bleibt waehlbar, die anderen sind gesperrt; ein Schloss fuer die Gruppe */
.swatch.pro-locked::after { content: none; }
.swatch.pro-locked span { opacity: .3; }
.swatches.has-lock { align-items: center; }
.danger-zone .expires-at { margin: 10px 0 0; }
.pro-only-dialog { width: min(440px, calc(100vw - 32px)); }
.pro-only-dialog p { margin: 0; color: #c9ced6; line-height: 1.5; }

/* ---------------- Fusszeile und Rechtstexte ---------------- */

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px;
  padding: 16px; font-size: .85rem; color: var(--muted);
}
.site-footer a { color: var(--muted); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--text); }

.legal { gap: 24px; overflow-wrap: anywhere; }
.legal h1 { margin: 0; font-size: clamp(1.6rem, 4.5vw, 2.2rem); }
.legal section { display: flex; flex-direction: column; gap: 10px; }
.legal h2 { margin: 0; font-size: 1.15rem; }
.legal p { margin: 0; color: #c9ced6; line-height: 1.6; }
.legal a { color: var(--accent); }

/* ---------------- Schmale Bildschirme ---------------- */

@media (max-width: 860px) {
  .control-grid { grid-template-columns: 1fr; padding: 12px 16px; }
  .transport:not(.small) { display: grid; grid-template-columns: 1fr 1.3fr 1fr; }
  .transport .btn.big { min-width: 0; padding-inline: .6em; }
  .rundown-row { grid-template-columns: 36px 1fr auto; }
  .rundown-row .row-actions { grid-column: 2 / -1; justify-content: flex-end; }
  .msg-row { gap: 6px; }
  .msg-toggle { min-width: 0; }
  .settings { grid-template-columns: 1fr; }
  .create-row { flex-direction: column; }
  .topbar { gap: 8px; }
  .brand { display: none; }
  .legal-page .brand { display: block; }
  .home .brand { display: block; }
  .pro-page .brand { display: block; }
}