:root {
  --bg: #fafafa; --fg: #111; --muted: #6b7280; --panel: #fff; --border: #e5e7eb;
  --primary: #2563eb; --ov-bg: rgba(0,0,0,.68); --ov-fg: #fff; --ov-brd: rgba(255,255,255,.25);
  --slider-track: var(--border);
  --slider-thumb-bg: var(--panel);
  --slider-thumb-brd: var(--border);
  --slider-focus: rgba(96,165,250,.8);
  --btn-bg: #111827; --btn-fg: #e5e7eb; --btn-brd: #243045;
  --btn-bg-alt: #f3f4f6; --btn-fg-alt: #111; --btn-brd-alt: #d1d5db;
}
:root[data-theme="dark"] {
  --bg: #0b1220; --fg: #e5e7eb; --muted: #9aa3b2; --panel: #111827; --border: #243045;
  --primary: #60a5fa; --ov-bg: rgba(0,0,0,.72); --ov-fg: #fff; --ov-brd: rgba(255,255,255,.28);
  --slider-track: #34425f;
  --slider-thumb-bg: #e8eefc;
  --slider-thumb-brd: #70a1ff;
  --slider-focus: rgba(96,165,250,.9);
  --btn-bg: #1f2a44; --btn-fg: #e5f0ff; --btn-brd: #3b557e;
  --btn-bg-alt: #283652; --btn-fg-alt: #e5f0ff; --btn-brd-alt: #3b557e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue"}

/* Header */
.page-header{max-width:1100px;margin:24px auto 16px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-header h1{margin:0 0 4px;font-size:28px;font-weight:700}
.page-header p{margin:0;color:var(--muted)}
.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-brd);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(1.05)}
.btn-alt{background:var(--btn-bg-alt);color:var(--btn-fg-alt);border:1px solid var(--btn-brd-alt)}

/* Switch */
.switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .switch-label{font-size:12px;color:var(--muted)}
.switch .theme-slider{position:relative;width:44px;height:24px;background:var(--border);border-radius:999px;transition:background .2s ease,box-shadow .2s ease;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.switch .theme-slider::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--panel);border:1px solid var(--border);border-radius:50%;transition:transform .2s ease,background .2s ease}
.switch input:checked+.theme-slider{background:rgba(96,165,250,.55)}
.switch input:checked+.theme-slider::after{transform:translateX(20px);background:#fff}
:root[data-theme="dark"] .switch .theme-slider{background:#1f2a44}
:root[data-theme="dark"] .switch .theme-slider::after{background:#0b1220;border-color:#243045}
:root[data-theme="dark"] .switch input:checked+.theme-slider{background:rgba(96,165,250,.7)}
:root[data-theme="dark"] .switch input:checked+.theme-slider::after{background:#cfe3ff;border-color:#3b82f6}

/* Controls */
.controls.one-col{max-width:1100px;margin:0 auto;padding:0 16px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}
.panel h2{margin:0 0 2px;font-size:18px}
.subtitle{margin:0 0 10px;font-size:12px;color:var(--muted)}
.row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin:12px 0}
.row .hint{grid-column:2 / -1;color:var(--muted);font-size:12px;justify-self:end}
.row input[type=range]{grid-column:1 / -1;width:100%}

/* Slider */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;accent-color:var(--primary)}
input[type=range]:focus{outline:none}
/* Track */
input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--slider-track);border-radius:999px}
input[type=range]::-moz-range-track{height:6px;background:var(--slider-track);border-radius:999px}
input[type=range]::-moz-range-progress{height:6px;background:var(--slider-track);border-radius:999px}
input[type=range]::-ms-track{height:6px;background:transparent;border-color:transparent;color:transparent}
input[type=range]::-ms-fill-lower{background:var(--slider-track);border-radius:999px}
input[type=range]::-ms-fill-upper{background:var(--slider-track);border-radius:999px}
/* Thumb */
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-7px;width:20px;height:20px;border-radius:50%;background:var(--slider-thumb-bg);border:2px solid var(--slider-thumb-brd);box-shadow:0 0 0 1px rgba(0,0,0,.10);transition:box-shadow .15s ease,transform .05s ease,background .2s ease,border-color .2s ease}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(96,165,250,.15)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(0.96);box-shadow:0 0 0 5px rgba(96,165,250,.22)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--slider-thumb-bg);border:2px solid var(--slider-thumb-brd);box-shadow:0 0 0 1px rgba(0,0,0,.10);transition:box-shadow .15s ease,transform .05s ease,background .2s ease,border-color .2s ease}
input[type=range]:hover::-moz-range-thumb{box-shadow:0 0 0 4px rgba(96,165,250,.15)}
input[type=range]:active::-moz-range-thumb{transform:scale(0.96);box-shadow:0 0 0 5px rgba(96,165,250,.22)}
/* Tastatur-Fokus */
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--slider-focus)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 6px var(--slider-focus)}

.row output{grid-column:1 / -1;background:transparent;border:0;padding:0;color:var(--muted)}

/* Summary: 2 Karten */
.summary.two-col{max-width:1100px;margin:12px auto;padding:0 16px;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:900px){.summary.two-col{grid-template-columns:1fr 1fr}}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px}
.card .label{font-size:14px}
.card .value{font-size:28px;font-weight:700}
.card .hint{font-size:12px;color:var(--muted)}

/* Visualisierung */
.viz{max-width:1100px;margin:12px auto 8px;padding:0 16px}
.orient{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-bottom:8px}
.stage{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:48px 24px;height:520px;overflow:hidden}
@media (max-width:640px){.stage{height:460px;padding:40px 16px}}
.axis.v{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#e5e7eb;transform:translateX(-50%)}
.axis.h{position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(59,130,246,.25)}
.wheel{position:absolute;left:50%;text-align:center}
.wheel.current{bottom:50%;transform:translateX(-50%)}
.wheel.next{top:50%;transform:translateX(-50%)}
.wheel img{width:280px;max-width:100%;height:auto;user-select:none;pointer-events:none;image-rendering:auto;transform:scaleX(-1)} /* gespiegelt */

/* Overlays (nur in der Viz) */
.viz .ov{position:absolute;left:50%;top:50%;background:var(--ov-bg);border:1px solid var(--ov-brd);color:var(--ov-fg);padding:6px 10px;border-radius:10px;font-size:12px;line-height:1.25;backdrop-filter:blur(2px)}
.viz .ov-top{transform:translate(-50%,-30%)}
.viz .ov-bottom{transform:translate(-50%,12%)}

/* Aufnahme-Leiste unter der Bühne */
.shotbar{max-width:1100px;margin:8px auto 16px;padding:0 16px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.shot-actions{display:flex;gap:10px;flex-wrap:wrap}
.shot-controls{display:flex;align-items:center;gap:6px;background:var(--btn-bg-alt);color:var(--btn-fg-alt);border:1px solid var(--btn-brd-alt);border-radius:10px;padding:6px 8px}
.shot-select{background:transparent;border:none;color:inherit;font:inherit;outline:none;cursor:pointer}
.shot-label{font-size:12px;opacity:.75}

/* Fuss */
.page-foot{max-width:1100px;padding:0 16px 24px;margin:0 auto;color:var(--muted)}

/* Sticky Flatee Logo oben */
.logo-center {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
}

.logo-center .logo-img {
  height: 40px;
  width: auto;
  max-width: 180px;
}