:root {
    /* Grundfarben (hier schnell anpassbar) */
    --color-bg-body: #f3f4f6;
    --color-bg-card: #ffffff;
    --color-bg-card-secondary: #f9fafb;
    --color-border: #e5e7eb;
    --color-text-main: #111827;
    --color-text-muted: #6b7280;

    /* Akzent-/Statusfarben */
    --color-accent: #2563eb;
    --color-accent-dark: #1d4ed8;
    --color-accent-soft: #eff6ff;
    --color-accent-soft-border: #bfdbfe;

    --color-success: #16a34a;
    --color-success-soft: #dcfce7;
    --color-danger: #ef4444;

    /* Platz-Zustände */
    --color-place-free-bg: #f9fafb;
    --color-place-free-border: #d1d5db;
    --color-place-free-text: #374151;

    --color-place-active-bg: var(--color-accent);
    --color-place-active-border: var(--color-accent-dark);
    --color-place-active-text: #ffffff;

    --color-place-used-bg: #e5e7eb;
    --color-place-used-border: #d1d5db;
    --color-place-used-text: #6b7280;

    /* Typografie / Größen */
    --font-size-base: 16px;
    --font-size-small: 0.9rem;
    --font-size-heading: 2.2rem;
    --radius-lg: 14px;
    --radius-md: 8px;

    /* Schatten */
    --shadow-soft: 0 12px 30px rgba(15, 23, 42, 0.08);
    --shadow-subtle: 0 1px 4px rgba(15, 23, 42, 0.08);

    /* Layoutbreiten */
    --app-max-width: 960px;
    --app-wide-width: 1280px;
    --app-narrow-width: 560px;
}

* { box-sizing: border-box; }

html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 28px;
    min-height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at top left, #e0f2fe, #f3f4f6) fixed;
    color: var(--color-text-main);
    line-height: 1.45;
}

a { color: var(--color-accent); }
code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.app { max-width: var(--app-max-width); margin: 0 auto; }
.app-wide { max-width: var(--app-wide-width); }
.app-narrow { max-width: var(--app-narrow-width); }

.app-header { text-align: center; margin-bottom: 24px; }
.app-header h1 { margin: 0 0 6px; font-size: var(--font-size-heading); letter-spacing: 0.03em; }
.app-header p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-small); }

.app-header-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; text-align: left;
}
.app-header-row h1 { font-size: 1.6rem; margin: 0; }
.header-nav { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { margin: 0; }

.badge {
    display: inline-block; vertical-align: middle;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    background: var(--color-accent-soft); color: var(--color-accent-dark);
    border: 1px solid var(--color-accent-soft-border);
}

.card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow-soft);
    margin-bottom: 22px;
}
.card-secondary { background: var(--color-bg-card-secondary); box-shadow: var(--shadow-subtle); }
.card h2, .card h3 { margin-top: 0; }
.card.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.admin-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; align-items: start; }

.kicker {
    font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-accent);
}
.card .sub { margin: 22px 0 8px; font-size: 1rem; }

.error {
    padding: 11px 14px; border-radius: var(--radius-md);
    background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.35);
    color: #b91c1c; font-size: var(--font-size-small); margin-bottom: 18px;
}

/* ---------- Formulare ---------- */
label { display: block; font-weight: 500; font-size: 0.95rem; }

input[type="text"], input[type="password"], textarea {
    width: 100%; font: inherit; padding: 10px 12px; margin-top: 5px;
    border-radius: var(--radius-md); border: 1px solid var(--color-border);
    background: #f9fafb; color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); background: #ffffff;
}
textarea { min-height: 140px; resize: vertical; }

.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-bottom: 12px; color: var(--color-text-muted); }
.check input { width: 18px; height: 18px; accent-color: var(--color-accent); }

.small, .muted { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* ---------- Buttons ---------- */
.btn-row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.btn-row-end { justify-content: flex-end; }
.btn-row-split > .btn { flex: 1; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px; min-height: 42px;
    border-radius: 999px; border: none; cursor: pointer;
    font: inherit; font-size: .95rem; font-weight: 500; text-decoration: none;
    background: var(--color-accent); color: #ffffff;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
    box-shadow: 0 2px 7px rgba(37, 99, 235, 0.3);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--color-accent-dark); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(37, 99, 235, 0.35); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-secondary { background: #e5e7eb; color: #374151; box-shadow: none; }
.btn-secondary:hover { background: #d1d5db; }
.btn-ghost { background: transparent; color: var(--color-text-muted); box-shadow: none; }
.btn-ghost:hover { background: #f3f4f6; color: var(--color-text-main); }
.btn-danger { background: #fee2e2; color: #b91c1c; box-shadow: none; }
.btn-danger:hover { background: #fecaca; }
.btn-toggle { background: #fff; color: var(--color-accent-dark); border: 1px solid var(--color-accent-soft-border); box-shadow: none; }
.btn-toggle:hover { background: var(--color-accent-soft); }
.btn-toggle.is-on { background: var(--color-accent-soft); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.btn-sm { padding: 6px 12px; min-height: 34px; font-size: .85rem; }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-grow { flex: 1; }

.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--color-text-muted); text-decoration: underline; cursor: pointer; }

/* ---------- Tabelle ---------- */
.table-wrapper { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table thead { background: #f3f4f6; }
.table th, .table td { border: 1px solid var(--color-border); padding: 7px 9px; text-align: left; white-space: nowrap; }
.table th { font-weight: 600; }
.table tbody tr:nth-child(even) { background: #f9fafb; }
.table .place-col { width: 1%; text-align: center; font-weight: 600; position: sticky; left: 0; background: inherit; }
.table thead .place-col { background: #f3f4f6; }
.table tbody tr .place-col { background: #fff; }
.table tbody tr:nth-child(even) .place-col { background: #f9fafb; }
.table .is-me { background: var(--color-accent-soft) !important; }
.placeholder { color: var(--color-text-muted); font-style: italic; }

/* ---------- Aktuelles Item ---------- */
.current-item-wrapper { display: flex; justify-content: center; margin: 18px 0; }
.current-item {
    font-size: 2rem; font-weight: 600; text-align: center; line-height: 1.2;
    padding: 18px 28px; border-radius: 999px;
    background: var(--color-accent-soft); color: var(--color-accent-dark);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
    border: 1px solid var(--color-accent-soft-border);
    max-width: 90%; overflow-wrap: anywhere;
}
.is-new { animation: pop .35s ease both; }
.current-item-sm { font-size: 1.3rem; padding: 10px 20px; }

@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stage-title { font-weight: 600; }
.stage-count { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: var(--font-size-small); }

.progress { height: 6px; background: var(--color-border); border-radius: 99px; overflow: hidden; margin: 10px 0 4px; }
.progress-bar { height: 100%; background: var(--color-accent); border-radius: 99px; transition: width .4s ease; }

/* ---------- Chips / Status ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips-center { justify-content: center; }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px; border-radius: 999px; font-size: .9rem;
    background: #f3f4f6; color: #374151; border: 1px solid var(--color-border);
}
.chip.is-done { background: var(--color-success-soft); color: #166534; border-color: #bbf7d0; }
.chip-removable { padding-right: 4px; }
.chip-x {
    border: none; background: transparent; color: var(--color-text-muted); cursor: pointer;
    width: 24px; height: 24px; border-radius: 50%; font-size: 1.05rem; line-height: 1;
}
.chip-x:hover { background: #fee2e2; color: #b91c1c; }

.status-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.status-list li {
    display: flex; justify-content: space-between; gap: 8px; padding: 7px 11px;
    border-radius: var(--radius-md); background: #f9fafb; border: 1px solid var(--color-border); font-size: .92rem;
}
.status-list li.is-done { background: var(--color-success-soft); border-color: #bbf7d0; }
.status-place { color: var(--color-text-muted); white-space: nowrap; }
.status-list li.is-done .status-place { color: #166534; font-weight: 600; }

.control-title { font-size: 1.35rem; font-weight: 700; margin: 2px 0; }

/* ---------- Rankings-Liste ---------- */
.ranking-list { list-style: none; margin: 0; padding: 0; }
.ranking-row {
    display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
    padding: 12px 0; border-top: 1px solid var(--color-border);
}
.ranking-row:first-child { border-top: none; }
.ranking-info { min-width: 0; flex: 1 1 220px; }
.ranking-title { font-weight: 600; }
.ranking-items { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Mitspieler: Platz-Slots ---------- */
.me-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-size: .95rem; }
.hint { text-align: center; color: var(--color-text-muted); margin: 0 0 14px; }
.hint.is-ok { color: #166534; font-weight: 500; }

.slots { display: flex; flex-direction: column; gap: 8px; }
.slot {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 8px 12px 8px 8px; min-height: 52px;
    border-radius: 12px; font: inherit; text-align: left;
    border: 1px solid var(--color-place-free-border);
    background: var(--color-place-free-bg); color: var(--color-place-free-text);
    -webkit-tap-highlight-color: transparent;
}
.slot-num {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid var(--color-place-free-border); font-weight: 700;
}
.slot-item { flex: 1; min-width: 0; overflow-wrap: anywhere; }

button.slot { cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .05s ease; }
.slot.is-free .slot-item { color: var(--color-text-muted); font-style: italic; }
.slot.is-free:hover, .slot.is-free:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); outline: none; }
.slot.is-free:active { transform: scale(.99); }

.slot.is-selected {
    background: var(--color-place-active-bg); border-color: var(--color-place-active-border);
    color: var(--color-place-active-text); font-weight: 600;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
}
.slot.is-selected .slot-num { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); color: #fff; }
.slot.is-selected:disabled { opacity: 1; cursor: default; }

.slot.is-used { background: var(--color-place-used-bg); color: var(--color-place-used-text); border-style: dashed; border-color: var(--color-place-used-border); }
.slot.is-used .slot-num { background: transparent; }
.slot.is-empty { opacity: .6; }
.slot.is-busy { opacity: .6; pointer-events: none; }

/* ---------- Eingeblendete Plätze ---------- */
.reveal-head { font-weight: 600; margin: 4px 0 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill { font-size: .85rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--color-accent-soft); color: var(--color-accent-dark); }
.reveal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.reveal-card {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-radius: 12px; background: #fff; border: 1px solid var(--color-border);
}
.reveal-place {
    flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-accent); color: #fff; font-weight: 700;
}
.reveal-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal-card.is-empty { opacity: .55; }
.reveal-card.is-empty .reveal-place { background: var(--color-place-used-bg); color: var(--color-place-used-text); }

/* ---------- Gemeinsames Ranking ---------- */
.consensus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.consensus-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 12px;
    border-radius: 12px; background: #f9fafb; border: 1px solid var(--color-border);
}
.consensus-rank {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; background: #e5e7eb; color: #374151;
}
.consensus-item { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.consensus-avg { color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .9rem; }
.top-1 .consensus-rank { background: #facc15; color: #713f12; }
.top-2 .consensus-rank { background: #d1d5db; color: #1f2937; }
.top-3 .consensus-rank { background: #f5c69b; color: #7c2d12; }

/* ---------- Toast / Offline ---------- */
.toast {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 12px;
    background: #111827; color: #fff; font-size: .95rem; box-shadow: var(--shadow-soft); z-index: 50;
    animation: pop .2s ease;
}
.toast-error { background: #b91c1c; }
.offline {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    padding: 6px 12px; text-align: center; font-size: .85rem;
    background: #fef3c7; color: #92400e; border-bottom: 1px solid #fde68a;
}

/* =========================================================
   SCREEN / BEAMER – dunkel, groß, kontrastreich
   ========================================================= */
.page-screen {
    --color-bg-card: #111c33;
    --color-bg-card-secondary: #0d1629;
    --color-border: #24324f;
    --color-text-main: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-accent-soft: #1e3a8a;
    --color-accent-soft-border: #3b82f6;
    --color-place-used-bg: #1e293b;
    --color-place-used-text: #64748b;
    --color-success-soft: #14532d;
    --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.35);
    --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.3);

    background: radial-gradient(circle at 20% 0%, #1e3a8a 0%, #0b1220 55%) fixed;
    font-size: clamp(16px, 1.4vw, 26px);
    padding: clamp(16px, 3vw, 48px);
}
.page-screen .app-screen { max-width: 1600px; }
.page-screen .muted { font-size: .9em; }

.hero, .stage { text-align: center; margin-bottom: 2vh; }
.hero { padding-top: 4vh; }
.hero-title { font-size: clamp(2.2rem, 5.5vw, 5.5rem); line-height: 1.05; margin: .2em 0 .25em; letter-spacing: .01em; }
.lead { font-size: clamp(1.1rem, 2vw, 2rem); color: var(--color-text-muted); margin: 0 0 4vh; }
.page-screen .kicker { color: #93c5fd; font-size: .9em; }

.join-box {
    display: inline-flex; align-items: center; gap: clamp(16px, 3vw, 48px); text-align: left;
    padding: clamp(14px, 2vw, 32px); border-radius: 24px;
    background: var(--color-bg-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-soft);
    max-width: 100%;
}
.qr { background: #fff; padding: 12px; border-radius: 14px; line-height: 0; flex: 0 0 auto; }
.qr img, .qr canvas { width: clamp(140px, 18vw, 320px) !important; height: auto !important; display: block; }
.join-url { font-size: clamp(1.1rem, 2.4vw, 2.4rem); font-weight: 700; margin: .2em 0; overflow-wrap: anywhere; }
.page-screen .chips { margin-top: 3vh; gap: .5em; }
.page-screen .chip { font-size: 1em; padding: .35em .9em; background: rgba(255,255,255,.06); color: var(--color-text-main); border-color: var(--color-border); }
.page-screen .chip.is-done { background: #14532d; color: #bbf7d0; border-color: #166534; }

.page-screen .stage-head { font-size: 1.2em; }
.page-screen .stage-count { font-size: 1em; }
.page-screen .progress { height: 8px; background: rgba(255,255,255,.1); }
.page-screen .current-item-wrapper { margin: 5vh 0; }
.page-screen .current-item {
    font-size: clamp(2.2rem, 6vw, 6.5rem); padding: .35em 1em; border-radius: 1em;
    background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; border-color: #60a5fa;
    box-shadow: 0 20px 60px rgba(37, 99, 235, .45);
}
.page-screen .reveal-head { justify-content: center; font-size: 1.2em; }
.page-screen .pill { background: #1d4ed8; color: #fff; font-size: .9em; }
.page-screen .reveal-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); gap: .6em; text-align: left; }
.page-screen .reveal-card { background: var(--color-bg-card); border-color: var(--color-border); padding: .5em .8em; }
.page-screen .reveal-place { width: 2em; height: 2em; font-size: 1.2em; }
.page-screen .reveal-name { font-size: 1.1em; }

.page-screen .table thead, .page-screen .table thead .place-col { background: #16213b; }
.page-screen .table tbody tr .place-col { background: var(--color-bg-card-secondary); }
.page-screen .table tbody tr:nth-child(even), .page-screen .table tbody tr:nth-child(even) .place-col { background: #111c33; }
.page-screen .table { font-size: .95em; }
.page-screen .consensus-row { background: rgba(255,255,255,.04); border-color: var(--color-border); font-size: 1.05em; }
.page-screen .consensus-rank { background: #334155; color: #e2e8f0; }
.page-screen .top-1 .consensus-rank { background: #facc15; color: #713f12; }
.page-screen .top-2 .consensus-rank { background: #cbd5e1; color: #1f2937; }
.page-screen .top-3 .consensus-rank { background: #f5c69b; color: #7c2d12; }

.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2vw; align-items: start; }

.fs-btn {
    position: fixed; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #e2e8f0;
    font-size: 1.2rem; cursor: pointer; opacity: .35; transition: opacity .2s ease;
}
.fs-btn:hover { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .admin-grid { grid-template-columns: 1fr; }
    .final-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    body { padding: 16px; }
    .card { padding: 18px 16px; border-radius: 12px; }
    .app-header h1 { font-size: 1.8rem; }
    .app-header-row h1 { font-size: 1.35rem; }
    .current-item { max-width: 100%; font-size: 1.6rem; padding: 14px 18px; border-radius: 22px; }
    .join-box { flex-direction: column; text-align: center; }
    .btn-row .btn-grow, .btn-row .btn-toggle { flex: 1 1 auto; }
}

@media (max-width: 420px) {
    .page-play .app-header { margin-bottom: 12px; }
    .page-play .app-header h1 { font-size: 1.4rem; }
    .ranking-actions { width: 100%; }
    .ranking-actions .btn { flex: 1; }
}

/* Beamer: Tabelle umbrechen statt scrollen, Ø-Werte lesbar */
.page-screen .table th, .page-screen .table td { white-space: normal; overflow-wrap: anywhere; }
.page-screen .consensus-avg { font-size: .85em; }
.page-screen .table-wrapper { overflow-x: visible; }
.page-screen .table .place-col { white-space: nowrap; overflow-wrap: normal; }

/* =========================================================
   Spieleransicht: klare Farbcodes für Plätze
   Blau = deine aktuelle Wahl · Grau = schon vergeben · Grün = frei
   ========================================================= */
:root {
    --slot-free-bg: #f0fdf4;
    --slot-free-border: #4ade80;
    --slot-free-num: #16a34a;
    --slot-free-text: #166534;
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin: 0 0 12px; font-size: .85rem; color: var(--color-text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.dot-selected { background: var(--color-accent); }
.dot-used { background: #9ca3af; }
.dot-free { background: var(--slot-free-bg); border: 2px solid var(--slot-free-border); }

.slot { border-width: 2px; }
.slot-tag { flex: 0 0 auto; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Frei */
.slot.is-free { background: var(--slot-free-bg); border: 2px solid var(--slot-free-border); color: var(--slot-free-text); }
.slot.is-free .slot-num { background: var(--slot-free-num); border-color: var(--slot-free-num); color: #fff; }
.slot.is-free .slot-item { color: var(--slot-free-text); font-style: normal; font-weight: 500; }
.slot.is-free:hover, .slot.is-free:focus-visible { border-color: var(--slot-free-num); box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); }

/* Deine Wahl */
.slot.is-selected { border: 2px solid var(--color-accent-dark); box-shadow: 0 6px 16px rgba(37, 99, 235, .35); transform: scale(1.015); }
.slot.is-selected .slot-num { background: #fff; color: var(--color-accent-dark); border-color: #fff; }
.slot.is-selected .slot-tag { color: #dbeafe; }

/* Vergeben */
.slot.is-used { background: #e5e7eb; border: 2px solid #d1d5db; color: #6b7280; }
.slot.is-used .slot-num { background: #9ca3af; border-color: #9ca3af; color: #fff; }
.slot.is-used .slot-item { text-decoration: line-through; text-decoration-color: rgba(107,114,128,.5); }
.slot.is-used .slot-tag { color: #9ca3af; }
.page-play .card:has(.kicker) .slot.is-used .slot-item { text-decoration: none; } /* Endergebnis: nicht durchstreichen */

/* Gesperrt / leer */
.slot.is-empty { background: #fff; border: 2px dashed #e5e7eb; color: #9ca3af; opacity: 1; }
.slot.is-empty .slot-num { background: #f3f4f6; border-color: #e5e7eb; color: #9ca3af; }

/* Live-Platzierungen */
.reveal-count { font-weight: 400; font-size: .85em; color: var(--color-text-muted); }
.reveal-card.is-empty .reveal-name { color: var(--color-text-muted); }

/* =========================================================
   Countdown
   ========================================================= */
.countdown { position: fixed; z-index: 40; pointer-events: none; }
.countdown-label { font-weight: 600; }
.countdown-num { font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.countdown-num.tick { animation: tick .45s ease; }
.countdown-bar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.countdown-bar > div { height: 100%; background: currentColor; border-radius: 99px; transition: width .1s linear; }
@keyframes tick { from { transform: scale(1.35); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* Banner (Handy, Admin) – oben, blockiert nichts */
.countdown-banner { top: 0; left: 0; right: 0; padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px) * 0); background: #1d4ed8; color: #fff; box-shadow: 0 6px 20px rgba(15,23,42,.25); }
.countdown-banner .countdown-inner { max-width: var(--app-max-width); margin: 0 auto; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num label" "num extra" "bar bar"; column-gap: 14px; align-items: center; }
.countdown-banner .countdown-num { grid-area: num; font-size: 2.6rem; min-width: 1.2em; text-align: center; }
.countdown-banner .countdown-label { grid-area: label; font-size: .95rem; }
.countdown-banner .countdown-extra { grid-area: extra; font-size: .85rem; opacity: .9; }
.countdown-banner .countdown-bar { grid-area: bar; margin-top: 8px; }
.countdown-banner.is-urgent { background: #dc2626; animation: urgent 1s ease-in-out infinite; }
@keyframes urgent { 50% { background: #b91c1c; } }
body.has-countdown { padding-top: 110px; }

/* Overlay (Beamer) – groß über allem */
.countdown-overlay { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(11, 18, 32, .86); backdrop-filter: blur(6px); color: #fff; }
.countdown-overlay .countdown-inner { text-align: center; max-width: 80vw; }
.countdown-overlay .countdown-label { font-size: clamp(1.4rem, 3vw, 3rem); color: #93c5fd; }
.countdown-overlay .countdown-num { font-size: clamp(8rem, 28vw, 26rem); color: #fff; text-shadow: 0 10px 60px rgba(37, 99, 235, .7); }
.countdown-overlay .countdown-extra { font-size: clamp(1.1rem, 2vw, 2rem); color: #fca5a5; margin-bottom: 3vh; }
.countdown-overlay .countdown-bar { height: 10px; width: min(60vw, 900px); margin: 0 auto; color: #3b82f6; }

/* =========================================================
   Ausgeschieden
   ========================================================= */
.out-tag { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 99px; background: #fee2e2; color: #b91c1c; vertical-align: middle; }
.reveal-card.is-out { opacity: .6; }
.reveal-card.is-out .reveal-place { background: #fee2e2; color: #b91c1c; }
.reveal-card.is-out .reveal-name { text-decoration: line-through; }
.page-screen .reveal-card.is-out .reveal-place { background: #450a0a; color: #fca5a5; }
.page-screen .out-tag { background: #450a0a; color: #fca5a5; }

.out-box { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: .95rem; }
.hint.is-urgent { color: #b91c1c; font-weight: 700; }

.status-list li.is-out { background: #fef2f2; border-color: #fecaca; align-items: center; }
.status-list li.is-out small { font-size: .8rem; }
.cd-admin { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.cd-admin .btn-row { margin: 0; }
.status-list li.is-out small { display: block; }
.reveal-card.is-out .reveal-name { white-space: normal; }