:root {
  --bg: #101318; --panel: #1D222A; --panel2: #262C36; --line: #343B47;
  --tx: #FFFFFF; --muted: #C9CED6; --dim: #8A93A1;
  --amber: #E3A048; --amber-l: #F2D49B; --teal: #3FB8AF; --red: #C8553D;
  --f-head: Cambria, Caladea, "Noto Serif", "DejaVu Serif", Georgia, "Times New Roman", serif;
  --f-text: Calibri, Carlito, "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--f-text); }
.hidden { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
.btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 7px 14px; cursor: pointer; color: var(--tx); }
.btn:hover { border-color: var(--amber); }
.btn.primary { background: var(--amber); color: var(--bg); border-color: var(--amber); font-weight: 700; }
.btn.danger { border-color: var(--red); color: #f3b5a8; }
.btn.danger:hover { background: var(--red); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=password], textarea, select { background: #0b0e12; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; color: var(--tx); }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--amber); outline-offset: 0; }

/* Login-Overlay */
.login { position: fixed; inset: 0; background: rgba(8,10,13,.96); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login form { background: var(--panel); border-radius: 12px; padding: 28px; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 14px; }
.login h1 { font-family: var(--f-head); color: var(--amber); font-size: 24px; margin: 0; }
.login .err { color: #f3b5a8; min-height: 1.2em; }

/* Präsentation */
body.pres { overflow: hidden; height: 100vh; }
body.pres .stage-wrap { position: fixed; inset: 0; }
.ctrl { position: fixed; left: 50%; bottom: 6px; transform: translateX(-50%); z-index: 50; display: flex; gap: 6px; align-items: center; background: rgba(29,34,42,.94); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; max-width: calc(100vw - 12px); flex-wrap: nowrap; white-space: nowrap; transition: opacity .4s; }
.ctrl.faded { opacity: .12; }
.ctrl:hover { opacity: 1; }
.ctrl .info { color: var(--muted); padding: 0 6px; white-space: nowrap; }
.ctrl .info b { color: var(--tx); }
.ctrl .st-open { color: var(--teal); font-weight: 700; }
.ctrl .btn { padding: 2px 8px; font-size: 12px; }
.ctrl select { padding: 2px 4px; font-size: 12px; max-width: 190px; }
.ctrl-peek { position: fixed; right: 0; bottom: 0; width: 60px; height: 30px; z-index: 49; }
.black { position: fixed; inset: 0; background: #000; z-index: 60; }
.toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); background: var(--red); color: #fff; padding: 8px 16px; border-radius: 6px; z-index: 120; font-size: 15px; }
.toast.ok { background: var(--teal); color: var(--bg); }