/* ═══════════════════════════════════════════════════════════════════════
   BUILDER-V2 — scoped stylesheet for the Season Pass / Loot Crate / Insurance
   pages (players + team builders + the case-opening reel).

   WHY THIS FILE EXISTS: base.html carries the whole neon shell inline and does
   NOT link the old `laramidia-web.css` (that file is the retired green OBSIDIAN
   theme; linking it wholesale would fight the neon shell via global html/body/
   aside/scrollbar rules). This file contains ONLY the `--cc-*` design tokens
   (remapped to Shorty's neon magenta) plus the class-scoped components those
   pages use — no global element selectors, so it can be linked safely.

   Load it in base.html BEFORE the inline <style> blocks so the shell keeps
   ownership of any shared variable.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Surfaces (dark neutral — same as the shell's) */
    --cc-bg-0: #060a0e;  --cc-bg-1: #0a0f14;  --cc-bg-2: #12181f;
    --cc-bg-3: #171e26;  --cc-bg-4: #1e2731;  --cc-bg-5: #26313d;

    /* Borders — cool neutral + neon-magenta emphasis */
    --cc-bd-1: rgba(190, 160, 255, 0.10);
    --cc-bd-2: rgba(190, 160, 255, 0.18);
    --cc-bd-3: rgba(255, 30, 136, 0.32);
    --cc-bd-grid: rgba(190, 160, 255, 0.05);

    /* Text */
    --cc-tx-1: #e2e8f0;  --cc-tx-2: #bcc6df;  --cc-tx-3: #8790ad;
    --cc-tx-4: #5b6486;  --cc-tx-invert: #060a0e;

    /* Primary accent — Shorty neon magenta */
    --cc-accent: #ff1e88;  --cc-accent-hi: #ff70c2;  --cc-accent-lo: #c01568;
    --cc-accent-soft: rgba(255, 30, 136, 0.14);
    --cc-accent-glow: rgba(255, 30, 136, 0.40);
    --cc-accent-line: rgba(255, 30, 136, 0.58);
    --cc-accent-rgb: 255, 30, 136;

    /* Secondary / semantic */
    --cc-amber: #fbbf24;  --cc-amber-hi: #fcd34d;
    --cc-amber-soft: rgba(251, 191, 36, 0.14);  --cc-amber-line: rgba(251, 191, 36, 0.45);
    --cc-success: #34d399;  --cc-warn: #fbbf24;  --cc-danger: #ef4444;
    --cc-danger-soft: rgba(239, 68, 68, 0.14);
    --cc-info: #22d3ee;  --cc-info-soft: rgba(34, 211, 238, 0.14);

    /* Font weights + mono (radii come from the shell's own --r-* tokens) */
    --cc-fw-normal: 400;  --cc-fw-medium: 500;
    --cc-fw-semibold: 600;  --cc-fw-bold: 700;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ─── cc-* base components (extracted from the OBSIDIAN theme) ─── */
.cc-panel {
    background: var(--cc-bg-2);
    border: 1px solid var(--cc-bd-1);
    border-radius: var(--r-md);
    padding: 1rem 1.25rem;
    position: relative;
}
.cc-panel--elevated {
    background: var(--cc-bg-3);
    box-shadow: var(--shadow-md);
}
.cc-panel--accent {
    border-color: var(--cc-accent-line);
}

/* Panel with corner-brackets — tactical feel */
.cc-panel--tactical {
    position: relative;
}
.cc-panel--tactical::before,
.cc-panel--tactical::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--cc-accent);
    pointer-events: none;
}
.cc-panel--tactical::before {
    top: -1px;
    left: -1px;
    border-right: 0;
    border-bottom: 0;
}
.cc-panel--tactical::after {
    bottom: -1px;
    right: -1px;
    border-left: 0;
    border-top: 0;
}

/* ── Section header ── */
.cc-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cc-bd-1);
}
.cc-section-title {
    font-size: 0.75rem;
    font-weight: var(--cc-fw-semibold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cc-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.cc-section-title::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--cc-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--cc-accent);
}
.cc-section-hint {
    font-size: 0.72rem;
    color: var(--cc-tx-4);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}

/* ── Metric card ── */
.cc-metric {
    background: var(--cc-bg-2);
    border: 1px solid var(--cc-bd-1);
    border-radius: var(--r-sm);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cc-metric-label {
    font-size: 0.62rem;
    font-weight: var(--cc-fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cc-tx-4);
    font-family: 'JetBrains Mono', monospace;
}
.cc-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
    font-weight: var(--cc-fw-medium);
    color: var(--cc-accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.cc-metric-value--tx-1 { color: var(--cc-tx-1); }
.cc-metric-value--amber { color: var(--cc-amber); }
.cc-metric-value--danger { color: var(--cc-danger); }
.cc-metric-hint {
    font-size: 0.7rem;
    color: var(--cc-tx-4);
}

/* ── Buttons ── */
.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: var(--cc-bg-3);
    color: var(--cc-tx-1);
    border: 1px solid var(--cc-bd-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: var(--cc-fw-medium);
    letter-spacing: 0.02em;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    text-decoration: none;
}
.cc-btn:hover:not(:disabled) {
    background: var(--cc-bg-4);
    border-color: var(--cc-bd-3);
    color: var(--cc-tx-1);
}
.cc-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cc-btn--primary {
    background: var(--cc-accent);
    color: var(--cc-tx-invert);
    border-color: transparent;
    font-weight: var(--cc-fw-semibold);
}
.cc-btn--primary:hover:not(:disabled) {
    background: var(--cc-accent-hi);
    box-shadow: 0 0 0 2px var(--cc-accent-soft);
    color: var(--cc-tx-invert);
}

.cc-btn--tactical {
    background: transparent;
    color: var(--cc-accent);
    border-color: var(--cc-accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    padding: 0.5rem 0.85rem;
}
.cc-btn--tactical:hover:not(:disabled) {
    background: var(--cc-accent-soft);
    color: var(--cc-accent-hi);
}

.cc-btn--danger {
    background: transparent;
    color: var(--cc-danger);
    border-color: var(--cc-danger);
}
.cc-btn--danger:hover:not(:disabled) {
    background: var(--cc-danger-soft);
}

/* ── Status Pills ── */
.cc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    background: var(--cc-bg-3);
    border: 1px solid var(--cc-bd-2);
    color: var(--cc-tx-2);
    border-radius: var(--r-xs);
    font-size: 0.68rem;
    font-weight: var(--cc-fw-medium);
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    white-space: nowrap;
}
.cc-pill--accent {
    background: var(--cc-accent-soft);
    border-color: var(--cc-accent-line);
    color: var(--cc-accent);
}
.cc-pill--amber {
    background: var(--cc-amber-soft);
    border-color: var(--cc-amber-line);
    color: var(--cc-amber);
}
.cc-pill--danger {
    background: var(--cc-danger-soft);
    border-color: rgba(239, 68, 68, 0.45);
    color: var(--cc-danger);
}
.cc-pill--info {
    background: var(--cc-info-soft);
    border-color: rgba(34, 211, 238, 0.35);
    color: var(--cc-info);
}

/* Pulse-dot indicator (online/live/etc.) */
.cc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 8px var(--cc-accent);
    display: inline-block;
    flex-shrink: 0;
}
.cc-dot--pulse {
    animation: cc-pulse 2s infinite;
}
@keyframes cc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--cc-accent-glow), 0 0 8px var(--cc-accent); }
    50%      { box-shadow: 0 0 0 6px transparent, 0 0 12px var(--cc-accent); }
}
.cc-dot--amber { background: var(--cc-amber); box-shadow: 0 0 8px var(--cc-amber); }
.cc-dot--danger { background: var(--cc-danger); box-shadow: 0 0 8px var(--cc-danger); }

/* ── Inputs ── */
.cc-input,
.cc-select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--cc-bg-1);
    color: var(--cc-tx-1);
    border: 1px solid var(--cc-bd-2);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 0.85rem;
    transition: border-color 120ms ease, background 120ms ease;
}
.cc-input:focus,
.cc-select:focus {
    border-color: var(--cc-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--cc-accent-soft);
}
.cc-input::placeholder { color: var(--cc-tx-4); }


/* ═══════════════════════════════════════════════════════════════════════
   PORTED FROM BASE PANEL — Season Pass / Loot Crates / Insurance / Builder
   All rules are --cc-* token-based, so they adopt this panel's admin theme.
   ═══════════════════════════════════════════════════════════════════════ */
.mono { font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); }
/* Icon glyph helper for the _icons.html `ico.i(...)` macro (Font Awesome). */
.ic { display: inline-block; line-height: 1; color: inherit; vertical-align: -0.08em; }
/* ═══════════════════════════════════════════════════════════════════════
   KISTEN, VERSICHERUNG, BUILDER
   ═══════════════════════════════════════════════════════════════════════
   Die Seltenheitsfarben sind die EINZIGEN, die ausserhalb der Leitfarbe
   stehen. Das ist Absicht: sie sind eine Rangfolge, keine Auszeichnung
   des Servers — und sie muessen in beiden Revieren gleich aussehen,
   sonst hiesse dasselbe Legendary im Teampanel etwas anderes.
   ═══════════════════════════════════════════════════════════════════════ */

.r-common    { color: #a9c2ca; border-color: rgba(169,194,202,.35); }
.r-uncommon  { color: #6ee7b7; border-color: rgba(110,231,183,.35); }
.r-rare      { color: #7dd3fc; border-color: rgba(125,211,252,.35); }
.r-epic      { color: #c084fc; border-color: rgba(192,132,252,.38); }
.r-legendary { color: #f5b563; border-color: rgba(245,181,99,.40); }
.r-mythic    { color: #fb7185; border-color: rgba(251,113,133,.45); }

.crate__rar {
    display: inline-block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.08rem 0.4rem;
    border-radius: 5px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

/* ─── Kisten des Spielers ──────────────────────────────────────────── */
.crate-grid {
    display: grid;
    /* `min(17rem, 100%)` und nicht `17rem`: auf einem Telefon ist die
       Spalte schmaler als 17rem, und die Karte schob die ganze Seite
       24px nach rechts. */
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
}
.crate { padding: 0; overflow: hidden; }
.crate__lid {
    height: 5.5rem;
    display: grid;
    place-items: center;
    color: var(--cc-accent-hi);
    background: radial-gradient(circle at 50% 30%,
                rgba(var(--cc-accent-rgb), 0.16), var(--cc-bg-1));
    border-bottom: 1px solid var(--cc-bd-1);
    transition: background 400ms ease;
}
/* Nach dem Oeffnen faerbt sich der Deckel in der Seltenheit — das ist
   der Moment, auf den alles hinauslaeuft. */
.crate.is-open.r-legendary .crate__lid { background: radial-gradient(circle at 50% 30%, rgba(245,181,99,.28), var(--cc-bg-1)); }
.crate.is-open.r-mythic    .crate__lid { background: radial-gradient(circle at 50% 30%, rgba(251,113,133,.32), var(--cc-bg-1)); }
.crate.is-open.r-epic      .crate__lid { background: radial-gradient(circle at 50% 30%, rgba(192,132,252,.24), var(--cc-bg-1)); }
.crate__body { padding: 0.9rem 1rem 1rem; }
.crate__name { font-weight: 700; color: var(--cc-tx-1); font-size: 0.92rem; }
.crate__meta { font-size: 0.62rem; color: var(--cc-tx-4); margin-top: 0.15rem; }
.crate__frozen { color: #7dd3fc; }

.crate__pool { margin: 0.7rem 0; display: flex; flex-direction: column; gap: 0.2rem; }
.crate__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    color: var(--cc-tx-2);
}
.crate__row.is-gone { opacity: 0.35; text-decoration: line-through; }
.crate__ri { color: var(--cc-tx-4); display: inline-flex; }
.crate__what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.crate__pct { color: var(--cc-tx-4); font-size: 0.62rem; flex: none; }

.crate__open { width: 100%; justify-content: center; }
.crate__result { margin-top: 0.7rem; font-size: 0.75rem; color: var(--cc-tx-2); }
.crate__got {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.crate__gotwhat { color: var(--cc-tx-1); font-weight: 600; margin-top: 0.15rem; }
.crate__seed { font-size: 0.54rem; color: var(--cc-tx-4); margin-top: 0.3rem;
               word-break: break-all; }

.crate__fair { margin-top: 0.8rem; font-size: 0.68rem; color: var(--cc-tx-4); }
.crate__fair summary { cursor: pointer; color: var(--cc-tx-3); }
.crate__fair p { margin: 0.4rem 0; line-height: 1.5; }
.crate__hash { font-size: 0.52rem; word-break: break-all; color: var(--cc-tx-4); }

/* ─── Versicherung ─────────────────────────────────────────────────── */
.ins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 0.8rem;
    margin-top: 0.8rem;
    align-items: start;
}
.ins-card { padding: 1.1rem 1.2rem; }
/* Die Karte, auf der etwas wartet, ist die einzige mit Rahmen. */
.ins-card--hot {
    border-color: rgba(var(--cc-accent-rgb), 0.35);
    background: rgba(var(--cc-accent-rgb), 0.045);
}
.ins-claim {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--cc-bd-1);
}
.ins-claim:last-of-type { border-bottom: 0; }
.ins-claim__n { font-weight: 700; color: var(--cc-tx-1); }
.ins-claim__m { font-size: 0.68rem; color: var(--cc-tx-4); margin-bottom: 0.5rem; }
.ins-claim__msg, .ins-msg { font-size: 0.72rem; margin-top: 0.4rem; }
.ins-msg.is-ok  { color: #34d399; }
.ins-msg.is-bad { color: #ef6a6a; }
.ins-note {
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--cc-tx-4);
    margin: 0.8rem 0 0;
    padding-top: 0.7rem;
    border-top: 1px solid var(--cc-bd-1);
}
.ins-live { display: flex; align-items: center; gap: 0.8rem; }
.ins-live__ic {
    width: 3rem; height: 3rem; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    color: var(--cc-accent-hi);
    background: rgba(var(--cc-accent-rgb), 0.10);
    border: 1px solid rgba(var(--cc-accent-rgb), 0.22);
}
.ins-live__n { font-weight: 700; color: var(--cc-tx-1); }
.ins-live__m { font-size: 0.64rem; color: var(--cc-tx-4); }
.ins-count {
    font-size: 2.4rem; font-weight: 700; color: var(--cc-tx-1);
    line-height: 1; margin: 0.3rem 0 0.6rem;
    font-variant-numeric: tabular-nums;
}

/* ─── Builder ──────────────────────────────────────────────────────── */
.spb-top { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.spb-pick, .spb-new, .crate-add, .crate-grant {
    display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.spb-pick .cc-input { min-width: 18rem; }
.spb-num { width: 4.6rem; }
.spb-sel { max-width: 14rem; }
.spb-hint { font-size: 0.68rem; color: var(--cc-tx-4); margin: 0.3rem 0 0; max-width: 60ch; }

.spb-check { padding: 1.1rem 1.3rem; margin-top: 0.8rem; }
.spb-check__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 1rem;
}
.spb-val { font-size: 1rem; font-weight: 700; color: var(--cc-tx-1); margin-top: 0.2rem; }
.spb-val--warn { color: #f5b563; }
.spb-val--ok { color: #34d399; }
.spb-sub { font-size: 0.66rem; color: var(--cc-tx-3); margin-top: 0.15rem; }
.spb-sub b { color: var(--cc-tx-1); }
.spb-actions {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-top: 1rem; padding-top: 0.9rem;
    border-top: 1px solid var(--cc-bd-1);
}
.spb-spacer { flex: 1; }
.spb-check__over { font-size: 0.7rem; color: var(--cc-tx-3); display: flex;
                   align-items: center; gap: 0.3rem; }
.spb-msg { margin-top: 0.7rem; font-size: 0.75rem; }
.spb-msg.is-ok  { color: #34d399; }
.spb-msg.is-bad { color: #ef6a6a; }

.spb-table-wrap { padding: 1.1rem 0 1rem; margin-top: 0.8rem; }
.spb-table-wrap .cc-section-head { padding: 0 1.3rem; }
.spb-scroll { overflow-x: auto; padding: 0 1.3rem; }
.spb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    /* Feste Spaltenbreiten. Ohne das reisst das JSON-Feld (`flex: 1`)
       seine Zelle so breit, dass die zweite Spur in die naechste Zeile
       rutscht -- die beiden Spuren standen dann untereinander statt
       nebeneinander, und der Vergleich frei/premium war weg. */
    table-layout: fixed;
    min-width: 46rem;
}
.spb-table col.c-tier { width: 3.2rem; }
.spb-table col.c-track { width: auto; }
.spb-table th {
    text-align: left; padding: 0.4rem 0.5rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--cc-tx-4); font-weight: 500;
    border-bottom: 1px solid var(--cc-bd-2);
    position: sticky; top: 0; background: var(--cc-bg-2); z-index: 1;
}
.spb-table td { padding: 0.25rem 0.5rem; border-bottom: 1px solid var(--cc-bd-1); }
.spb-t { color: var(--cc-tx-3); width: 3rem; font-variant-numeric: tabular-nums; }
/* Jede fuenfte Stufe traegt mehr — sie soll auch beim Bauen auffallen. */
.spb-table tr.is-milestone .spb-t { color: var(--cc-accent-hi); font-weight: 700; }
.spb-table tr.is-milestone td { background: rgba(var(--cc-accent-rgb), 0.035); }
/* Eine leere Stufe ist ein Fehler, kein Sonderfall — sie faellt auf. */
.spb-table tr.is-empty .spb-t::after { content: " !"; color: #f5b563; }
/* Der Flex-Container sitzt IN der Zelle, nicht auf ihr.
   `display: flex` auf einem <td> nimmt die Zelle aus dem
   Tabellenlayout heraus -- sie wird zum Block, und die zweite Spur
   rutscht unter die erste statt daneben. */
.spb-td { vertical-align: middle; }
.spb-cell { display: flex; gap: 0.25rem; align-items: center; }
.spb-cell .cc-input { padding: 0.15rem 0.35rem; font-size: 0.7rem; }
.spb-kind { flex: 0 1 7.5rem; min-width: 5rem; }
.spb-qty { flex: 0 0 3.4rem; width: 3.4rem; }
.spb-payload { flex: 1 1 5rem; min-width: 3.5rem; }
.spb-state { width: 1rem; font-size: 0.75rem; color: var(--cc-tx-4); }
.spb-state.is-ok  { color: #34d399; }
.spb-state.is-bad { color: #ef6a6a; }

/* ─── Kistenbauer ──────────────────────────────────────────────────── */
.crate-cols {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 0.8rem;
    margin-top: 0.8rem;
    align-items: start;
}
@media (max-width: 62rem) { .crate-cols { grid-template-columns: 1fr; } }
.crate-cols > .cc-panel { padding: 1.1rem 1.3rem; }
.crate-pool tr.is-gone { opacity: 0.45; }
.crate-pct { color: var(--cc-accent-hi); }
.crate-pl { font-size: 0.58rem; color: var(--cc-tx-4); margin-left: 0.3rem; }
.crate-add { margin-top: 0.8rem; padding-top: 0.8rem;
             border-top: 1px solid var(--cc-bd-1); }

.crate-frozen {
    padding: 1rem 1.2rem;
    margin-top: 0.8rem;
    border-color: rgba(125, 211, 252, 0.32);
    background: rgba(125, 211, 252, 0.05);
}
.crate-frozen__t {
    font-weight: 700; color: #7dd3fc; font-size: 0.85rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.crate-frozen p {
    font-size: 0.76rem; line-height: 1.55; color: var(--cc-tx-2);
    margin: 0.5rem 0 0; max-width: 68ch;
}

.crate-sim { margin-top: 0.7rem; }
.crate-sim__h { font-size: 0.62rem; color: var(--cc-tx-4); margin-bottom: 0.35rem; }
.crate-sim__r {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.68rem; padding: 0.15rem 0;
}
.crate-sim__r .mono { color: var(--cc-tx-1); }
.crate-sim__soll { margin-left: auto; color: var(--cc-tx-4); }

/* ═══════════════════════════════════════════════════════════════════════
   GEFUEHRTE EINRICHTUNG (Season Pass · Lootkisten)
   ═══════════════════════════════════════════════════════════════════════
   Das Kernstueck ist `.wz-card.is-later`: Schritte, die noch nicht dran
   sind, werden GEDAEMPFT — nicht ausgeblendet. Ausblenden nimmt die
   Uebersicht („wie viel kommt noch?"), gleich stark anzeigen nimmt die
   Fuehrung. Gedaempft ist beides.

   Nichts ist gesperrt. Wer weiss, was er tut, springt vor.
   ═══════════════════════════════════════════════════════════════════════ */

.wz { display: flex; flex-direction: column; gap: 0.8rem; }

/* ─── Kopf mit Schrittleiste ───────────────────────────────────────── */
.wz-head { padding: 1.2rem 1.4rem; }
.wz-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.wz-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.76rem;
    color: var(--cc-tx-4);
    position: relative;
}
/* Der Strich zwischen den Schritten. Ueber ::after am Schritt und nicht
   als eigenes Element -- sonst muesste die Vorlage wissen, welcher der
   letzte ist. */
.wz-step:not(:last-child)::after {
    content: "";
    width: 1.1rem;
    height: 1px;
    background: var(--cc-bd-2);
    margin-left: 0.5rem;
}
.wz-step__n {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--cc-bd-2);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
}
.wz-step.is-done { color: var(--cc-tx-3); }
.wz-step.is-done .wz-step__n {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.08);
}
.wz-step.is-now { color: var(--cc-tx-1); font-weight: 600; }
.wz-step.is-now .wz-step__n {
    color: var(--cc-accent-hi);
    border-color: rgba(var(--cc-accent-rgb), 0.5);
    background: rgba(var(--cc-accent-rgb), 0.12);
}

.wz-pick {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--cc-bd-1);
}
.wz-pick .cc-input { flex: 1; max-width: 34rem; }

/* ─── Die Schrittkarten ────────────────────────────────────────────── */
.wz-card {
    padding: 1.2rem 1.4rem;
    transition: opacity 200ms ease, border-color 200ms ease;
    /* Erledigte Schritte treten zurueck, bleiben aber lesbar: man will
       nachsehen koennen, was man eingestellt hat. */
    opacity: 0.72;
}
/* Der aktuelle Schritt ist der einzige mit Rahmen UND voller Deckkraft.
   Mehrere Hervorhebungen nebeneinander heben sich gegenseitig auf. */
.wz-card.is-now {
    opacity: 1;
    border-color: rgba(var(--cc-accent-rgb), 0.42);
    box-shadow: 0 0 0 1px rgba(var(--cc-accent-rgb), 0.12),
                0 20px 44px -30px rgba(var(--cc-accent-rgb), 0.5);
}
/* Ein schmaler Streifen an der Kante. Er sagt „hier weiter" auch dann,
   wenn man mitten auf der Seite steht und die Schrittleiste oben nicht
   mehr sieht. */
.wz-card.is-now::before {
    content: "";
    position: absolute;
    left: -1px; top: 1.15rem; bottom: 1.15rem;
    width: 3px;
    border-radius: 3px;
    background: var(--cc-accent);
    box-shadow: 0 0 12px var(--cc-accent-glow);
}
.wz-card { position: relative; }
/* Was noch nicht dran ist, tritt deutlich zurueck -- verschwindet aber
   nicht: die Uebersicht „wie viel kommt noch" bleibt. */
.wz-card.is-later { opacity: 0.38; }
.wz-card.is-later:hover, .wz-card.is-later:focus-within { opacity: 1; }

.wz-card__h {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}
.wz-card__h h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--cc-tx-1);
    margin: 0;
    letter-spacing: -0.01em;
}
.wz-card__n {
    width: 1.7rem;
    height: 1.7rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.74rem;
    color: var(--cc-tx-3);
    border: 1px solid var(--cc-bd-2);
}
.wz-card.is-now .wz-card__n {
    color: var(--cc-accent-hi);
    border-color: rgba(var(--cc-accent-rgb), 0.5);
    background: rgba(var(--cc-accent-rgb), 0.12);
}
.wz-card__x {
    margin-left: auto;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.62rem;
    color: var(--cc-tx-4);
}

.wz-p {
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--cc-tx-3);
    margin: 0 0 1rem;
    max-width: 74ch;
}
.wz-p strong { color: var(--cc-tx-1); }
.wz-ok { color: #34d399; }
.wz-warn { color: #f5b563; }

.wz-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.8rem;
}
.wz-over {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.8rem;
    font-size: 0.74rem;
    color: var(--cc-tx-3);
    flex-wrap: wrap;
}

.wz-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1.2rem;
    margin-bottom: 1rem;
}
.wz-fact { font-size: 0.7rem; color: var(--cc-tx-3); margin-top: 0.2rem; }
.wz-fact b { color: var(--cc-tx-1); }

/* ─── Signaturstufen ───────────────────────────────────────────────── */
.wz-sig { display: flex; flex-direction: column; gap: 1rem; }
.wz-sig__row {
    padding: 0.9rem 1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--cc-bd-1);
    background: rgba(255, 255, 255, 0.02);
}
.wz-sig__t {
    font-weight: 700;
    color: var(--cc-accent-hi);
    font-size: 0.86rem;
    margin-bottom: 0.6rem;
}
.wz-sig__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}
@media (max-width: 54rem) { .wz-sig__cols { grid-template-columns: 1fr; } }
.wz-sig__col { display: flex; flex-direction: column; gap: 0.5rem; }
.wz-sig__col .cc-btn { align-self: flex-start; }
.wz-sig__msg { font-size: 0.74rem; margin-top: 0.5rem; }
.wz-sig__msg.is-ok  { color: #34d399; }
.wz-sig__msg.is-bad { color: #ef6a6a; }

/* ─── Der Ausnahmeweg ──────────────────────────────────────────────── */
.wz-fine { padding: 0; }
.wz-fine > summary {
    padding: 1rem 1.4rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--cc-tx-2);
    font-size: 0.85rem;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.wz-fine > summary::-webkit-details-marker { display: none; }
.wz-fine > summary::before {
    content: "▸";
    color: var(--cc-tx-4);
    transition: transform 180ms ease;
    display: inline-block;
}
.wz-fine[open] > summary::before { transform: rotate(90deg); }
.wz-fine > summary:hover { color: var(--cc-tx-1); }

/* ─── Der Belohnungs-Waehler ───────────────────────────────────────── */
.rp { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
.rp-kind { min-width: 9.5rem; }
.rp-f { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.rp-f[hidden] { display: none; }
.rp-lbl {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cc-tx-4);
}
.rp-hilfe {
    font-size: 0.66rem;
    line-height: 1.45;
    color: var(--cc-tx-4);
    max-width: 34ch;
    text-transform: none;
    letter-spacing: 0;
}
.rp-hilfe a { color: var(--cc-accent); }
.rp-leer {
    font-size: 0.7rem;
    color: #f5b563;
    flex-basis: 100%;
}
.rp-leer[hidden] { display: none; }
.rp-leer a { color: var(--cc-accent); }

/* In der Feinschliff-Tabelle muss alles in eine Zeile passen. */
.rp--kompakt { flex-wrap: nowrap; gap: 0.25rem; align-items: center; }
.rp--kompakt .rp-lbl, .rp--kompakt .rp-hilfe, .rp--kompakt .rp-leer { display: none; }
.rp--kompakt .rp-f { flex-direction: row; }
.rp--kompakt .cc-input { padding: 0.15rem 0.35rem; font-size: 0.7rem; }
.rp--kompakt .rp-kind { min-width: 7rem; }
.rp--kompakt .rp-menge input { width: 3.4rem; }
.rp--kompakt select[name^="f_"] { max-width: 9rem; }

/* ─── Kisteninhalt als Liste mit Balken ────────────────────────────── */
.cr-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1.1rem; }
.cr-row {
    display: grid;
    grid-template-columns: 5.6rem 1fr 7rem 3.4rem 4.4rem 1.4rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--cc-bd-1);
    font-size: 0.75rem;
}
.cr-row:last-child { border-bottom: 0; }
.cr-row.is-gone { opacity: 0.42; }
@media (max-width: 52rem) {
    .cr-row { grid-template-columns: 5.6rem 1fr 3.4rem 1.4rem; }
    .cr-bar, .cr-stock { display: none; }
}
.cr-what { color: var(--cc-tx-1); min-width: 0; }
.cr-detail { color: var(--cc-tx-4); font-size: 0.66rem; margin-left: 0.4rem; }
.cr-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cr-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-accent-lo), var(--cc-accent));
}
.cr-pct { text-align: right; color: var(--cc-accent-hi); font-size: 0.7rem; }
.cr-stock { text-align: right; color: var(--cc-tx-4); font-size: 0.64rem; }
.cr-del {
    width: 1.4rem; height: 1.4rem;
    border: 0; border-radius: 5px;
    background: transparent; color: var(--cc-tx-4);
    cursor: pointer; line-height: 1;
}
.cr-del:hover { color: #ef6a6a; background: rgba(239, 106, 106, 0.12); }
.cr-add { margin-top: 0.4rem; padding-top: 1rem; border-top: 1px solid var(--cc-bd-1); }

/* ═══════════════════════════════════════════════════════════════════
   KISTENWALZE + PASS-LEBENSZYKLUS
   ═══════════════════════════════════════════════════════════════════

   Die Walze ist die einzige Stelle im Panel, die sechs Sekunden lang
   nichts tut ausser Spannung aufzubauen. Das ist Absicht: eine Kiste,
   die sich beim Klick sofort in eine Zeile Text verwandelt, ist kein
   Ereignis. Deshalb laeuft sie lang, wird langsam, und bleibt ein
   bisschen daneben stehen.

   Was sie NICHT tut: wuerfeln. Das Ergebnis steht fest, bevor sich das
   erste Bild bewegt.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ein stiller Knopf ────────────────────────────────────────────── */
.cc-btn--ghost {
    background: transparent;
    border-color: var(--cc-bd-2);
    color: var(--cc-tx-3);
}
.cc-btn--ghost:hover {
    border-color: var(--cc-accent-line);
    color: var(--cc-accent-hi);
    background: rgba(var(--cc-accent-rgb), 0.06);
}

/* ═══ Der Vorhang ══════════════════════════════════════════════════ */
/* Flex und nicht Grid, und eine feste Breite mit max-width statt
   `min(880px, 100%)`. Der Grund ist keine Geschmacksfrage: in einem
   `place-items: center`-Raster wird das Kind nach Inhalt bemessen, und
   das Prozent darin hat nichts, woran es sich messen koennte. Der
   Kasten war beim ersten Layout 143px breit -- so breit wie seine
   Kopfzeile -- und erst danach 880. Die Walze rechnet aber genau in
   diesem ersten Moment aus, wo sie stehenbleiben soll: sie waere drei
   Kacheln neben dem Gewinn gelandet. */
.kw {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}
.kw[hidden] { display: none; }

.kw__bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%,
                rgba(8, 14, 20, 0.86), rgba(4, 7, 10, 0.96));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: kw-ein 0.28s ease-out both;
}

.kw__box {
    position: relative;
    width: 880px;
    max-width: 100%;
    border: 1px solid var(--cc-bd-2);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--cc-bg-2), var(--cc-bg-1));
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6);
    padding: 1.1rem 1.2rem 1.3rem;
    animation: kw-auf 0.34s cubic-bezier(.2, .9, .25, 1) both;
}

@keyframes kw-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes kw-auf {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.kw__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.kw__name {
    font-weight: var(--cc-fw-semibold);
    color: var(--cc-tx-1);
    letter-spacing: 0.01em;
}
.kw__zu {
    width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center;
    border: 1px solid var(--cc-bd-2);
    border-radius: 8px;
    background: transparent;
    color: var(--cc-tx-4);
    cursor: pointer;
}
.kw__zu:hover { color: var(--cc-tx-1); border-color: var(--cc-bd-3); }

/* ── Die Bahn ─────────────────────────────────────────────────────── */
.kw__bahn {
    position: relative;
    height: 148px;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--cc-bd-1);
    background:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 44px),
        var(--cc-bg-0);
    /* Die Raender ausblenden. Ohne das sieht man die Kacheln an der
       Kante hart abreissen, und die Walze wirkt wie eine Liste, die
       verschoben wird -- statt wie etwas, das durchlaeuft. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0,
        #000 11%, #000 89%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0,
        #000 11%, #000 89%, transparent 100%);
}
.kw__bahn[hidden] { display: none; }

/* `left: 50%` ist der eigentliche Trick. Damit liegt der Nullpunkt des
   Bandes schon auf der Marke, und das Skript muss die Breite der Bahn
   nie messen -- es rechnet nur noch in Kacheln. Vorher hing das Ziel an
   `clientWidth`, und genau diese Messung war im entscheidenden Moment
   noch nicht belastbar: die Walze blieb neben dem Gewinn stehen. */
.kw__band {
    position: absolute;
    top: 10px;
    left: 50%;
    display: flex;
    gap: 8px;                       /* == LUECKE im Skript */
    will-change: transform;
}

/* ── Die Marke ────────────────────────────────────────────────────── */
.kw__marke {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 0;
    z-index: 3;
    pointer-events: none;
}
.kw__marke i {
    position: absolute;
    left: -1px; top: 6px; bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent,
                var(--cc-accent) 18%, var(--cc-accent) 82%, transparent);
    box-shadow: 0 0 12px rgba(var(--cc-accent-rgb), 0.55);
}
.kw__marke.is-tick i { animation: kw-tick 0.16s ease-out; }
@keyframes kw-tick {
    0%   { box-shadow: 0 0 22px rgba(var(--cc-accent-rgb), 0.95); width: 3px; }
    100% { box-shadow: 0 0 12px rgba(var(--cc-accent-rgb), 0.55); width: 2px; }
}

/* ── Eine Kachel ──────────────────────────────────────────────────── */
.kw-k {
    flex: 0 0 132px;                /* == KACHEL im Skript */
    width: 132px;
    height: 128px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.6rem 0.5rem;
    border: 1px solid var(--cc-bd-1);
    border-top-width: 3px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--cc-bg-3), var(--cc-bg-2));
    text-align: center;
}
/* Die Seltenheit faerbt den oberen Rand -- die Farben stehen schon
   weiter oben als .r-*, hier kommt nur der Rand dazu. */
.kw-k.r-common    { border-top-color: #a9c2ca; }
.kw-k.r-uncommon  { border-top-color: #6ee7b7; }
.kw-k.r-rare      { border-top-color: #7dd3fc; }
.kw-k.r-epic      { border-top-color: #c084fc; }
.kw-k.r-legendary { border-top-color: #f5b563; }
.kw-k.r-mythic    { border-top-color: #fb7185; }

.kw-k__ic { font-size: 1.5rem; line-height: 1; }
.kw-k__t {
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--cc-tx-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kw-k__r {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.56rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--cc-tx-4);
}

/* Der Gewinn, sobald die Walze steht. */
.kw-k.is-landed {
    animation: kw-treffer 0.42s cubic-bezier(.2, .9, .25, 1) both;
    box-shadow: 0 0 0 1px currentColor, 0 0 26px -4px currentColor;
}
@keyframes kw-treffer {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.09); }
    100% { transform: scale(1.04); }
}

/* ── Das Ergebnis ─────────────────────────────────────────────────── */
.kw__preis {
    margin-top: 1.1rem;
    text-align: center;
    animation: kw-auf 0.4s cubic-bezier(.2, .9, .25, 1) both;
}
.kw__preis[hidden] { display: none; }

.kw__rar {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.kw__was {
    font-size: 1.35rem;
    font-weight: var(--cc-fw-semibold);
    color: var(--cc-tx-1);
    line-height: 1.2;
}
.kw__hin {
    font-size: 0.76rem;
    color: var(--cc-tx-4);
    margin-top: 0.28rem;
}
.kw__nachweis {
    margin: 0.9rem auto 0.9rem;
    max-width: 46ch;
    text-align: left;
    font-size: 0.7rem;
    color: var(--cc-tx-4);
}
.kw__nachweis summary { cursor: pointer; color: var(--cc-tx-3); }
.kw__nachweis p { margin: 0.45rem 0 0; }
/* Nur der Seed bricht mitten im Zeichen -- er ist eine Zahl ohne
   Trennstellen. Der Erklaertext daneben tat es auch und las sich dann
   wie „before you open / ed." */
.kw__nachweis #kw-seed { word-break: break-all; }
.kw__nachweis code { color: var(--cc-accent-hi); }

.kw__ruhig {
    margin: 0.6rem 0 0;
    text-align: center;
    font-size: 0.68rem;
    color: var(--cc-tx-4);
}
.kw__ruhig[hidden] { display: none; }
.kw__ruhig span { opacity: 0.7; }

.kw__fehler {
    margin: 1rem 0 0;
    text-align: center;
    color: var(--cc-danger);
    font-size: 0.82rem;
}
.kw__fehler[hidden] { display: none; }

/* Ein Hauch Seltenheitsfarbe auf dem ganzen Kasten, sobald klar ist,
   was drin war. Bei Common bleibt es absichtlich unauffaellig. */
.kw.is-fertig.r-epic      .kw__box { border-color: rgba(192, 132, 252, 0.4); }
.kw.is-fertig.r-legendary .kw__box { border-color: rgba(245, 181, 99, 0.45); }
.kw.is-fertig.r-mythic    .kw__box {
    border-color: rgba(251, 113, 133, 0.5);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.6),
                0 0 60px -18px rgba(251, 113, 133, 0.55);
}

@media (max-width: 640px) {
    .kw__bahn { height: 132px; }
    .kw__was  { font-size: 1.15rem; }
}

/* Wer Bewegung abbestellt hat, bekommt das Beiwerk nicht: kein
   Aufziehen des Kastens, kein Aufploppen der Gewinnkachel.

   Die Walze selbst laeuft trotzdem, nur kuerzer -- sie ist der Grund,
   warum jemand geklickt hat. Sie darf hier auch gar nicht stehen: die
   Regel weiter oben in dieser Datei setzt unter derselben Bedingung
   `transition-duration: 0.001ms !important` fuer JEDES Element. Genau
   daran ist die erste Fassung gescheitert. Deshalb bewegt das Skript
   das Band ueber `element.animate()`, wo keine CSS-Eigenschaft
   mitredet. */
@media (prefers-reduced-motion: reduce) {
    .kw__bg, .kw__box, .kw__preis { animation: none; }
    .kw-k.is-landed { animation: none; }
    .kw__marke.is-tick i { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PASS: LAUFZEIT UND KNOEPFE
   ═══════════════════════════════════════════════════════════════════ */
.sp-lauf { margin-top: 1rem; }

.sp-lauf__tage { display: flex; align-items: center; gap: 0.6rem; }
.sp-lauf__tage .cc-input { width: 6rem; }

.sp-lauf__stand {
    border: 1px solid var(--cc-bd-1);
    border-left: 2px solid var(--cc-accent);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    background: var(--cc-bg-2);
}
.sp-lauf__stand.is-paused { border-left-color: var(--cc-warn); }
.sp-lauf__stand.is-ended  { border-left-color: var(--cc-bd-3); }

.sp-lauf__zeit {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
    color: var(--cc-tx-1);
}
.sp-lauf__punkt {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--cc-accent);
    box-shadow: 0 0 0 3px rgba(var(--cc-accent-rgb), 0.16);
    align-self: center;
}
/* Ein blinkender Punkt heisst „es laeuft gerade". Bei Pause und Ende
   blinkt er nicht -- sonst hiesse er nichts. */
.sp-lauf__stand:not(.is-paused):not(.is-ended) .sp-lauf__punkt {
    animation: sp-puls 2.4s ease-in-out infinite;
}
@keyframes sp-puls {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--cc-accent-rgb), 0.16); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--cc-accent-rgb), 0.05); }
}
.sp-lauf__stand.is-paused .sp-lauf__punkt {
    background: var(--cc-warn);
    box-shadow: 0 0 0 3px rgba(245, 181, 99, 0.16);
}
.sp-lauf__stand.is-ended .sp-lauf__punkt {
    background: var(--cc-tx-4);
    box-shadow: none;
}

.sp-lauf__bahn {
    height: 4px;
    margin: 0.7rem 0 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.sp-lauf__bahn span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-accent-lo), var(--cc-accent));
    transition: width 0.6s ease;
}
.sp-lauf__stand.is-paused .sp-lauf__bahn span {
    background: linear-gradient(90deg, rgba(245,181,99,.5), var(--cc-warn));
}

.sp-lauf__daten {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.66rem;
    color: var(--cc-tx-4);
}

.sp-lauf__knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0.9rem 0 0.6rem;
}
.sp-lauf__opt {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: 0.72rem;
    color: var(--cc-tx-4);
    cursor: pointer;
}


/* ═══════════════════════════════════════════════════════════════════════
   SEASON PASS — die Leiter
   ═══════════════════════════════════════════════════════════════════════
   Sechzig Stufen passen nicht untereinander. Sie liegen waagerecht und
   rollen seitlich — die Form, die jeder aus Spielen kennt, und die
   einzige, die „naechste Stufe" und „Ziel" gleichzeitig zeigt.

   Farben kommen aus den `--cc-*`-Marken, also gilt hier dasselbe wie
   ueberall: Spielerrevier cyan, Teamrevier bernstein, ohne eine einzige
   zusaetzliche Regel.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Kopf ─────────────────────────────────────────────────────────── */
.sp-head { padding: 1.4rem 1.5rem; }
.sp-head__row { display: flex; align-items: center; gap: 1.4rem; }
@media (max-width: 34rem) { .sp-head__row { flex-direction: column; align-items: flex-start; gap: 1rem; } }

.sp-tier {
    flex: none;
    width: 5.4rem;
    height: 5.4rem;
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    align-content: center;
    background: radial-gradient(circle at 40% 30%,
                rgba(var(--cc-accent-rgb), 0.20), var(--cc-bg-1));
    border: 1px solid var(--cc-bd-2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.sp-tier__n {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cc-accent-hi);
    font-variant-numeric: tabular-nums;
}
.sp-tier__l { font-size: 0.62rem; color: var(--cc-tx-4); margin-top: 0.2rem; }

.sp-head__mid { flex: 1; min-width: 0; }
.sp-head__title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--cc-tx-1);
    margin: 0.1rem 0 0.7rem;
}
.sp-head__bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    overflow: hidden;
}
.sp-head__bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-accent-lo), var(--cc-accent-hi));
    box-shadow: 0 0 14px var(--cc-accent-glow);
    transition: width 600ms cubic-bezier(.2, .9, .2, 1);
}
.sp-head__sub { font-size: 0.76rem; color: var(--cc-tx-3); margin-top: 0.5rem; }
.sp-head__sub .mono { color: var(--cc-tx-1); }

/* ─── Heute ────────────────────────────────────────────────────────── */
.sp-today { padding: 1.15rem 1.3rem; margin-top: 0.8rem; }
.sp-today__why {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--cc-tx-4);
    margin: 0 0 0.9rem;
    max-width: 62ch;
}
.sp-today__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
    gap: 0.7rem;
}
.sp-src {
    padding: 0.6rem 0.7rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--cc-bd-1);
    background: rgba(255, 255, 255, 0.02);
}
.sp-src__n {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-tx-3);
}
.sp-src__bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin: 0.45rem 0 0.35rem;
}
.sp-src__bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cc-accent-lo), var(--cc-accent));
}
/* Voll ist eine Grenze, keine Leistung — warm statt in der Leitfarbe,
   sonst sieht „ausgeschoepft" aus wie „geschafft". */
.sp-src.is-full .sp-src__bar i { background: linear-gradient(90deg, #c78a2a, #f5b563); }
.sp-src.is-full .sp-src__n { color: var(--cc-tx-4); }
.sp-src__v {
    font-size: 0.68rem;
    color: var(--cc-tx-1);
    font-variant-numeric: tabular-nums;
}
.sp-src__v span { color: var(--cc-tx-4); }

/* ─── Die Leiter ───────────────────────────────────────────────────── */
.sp-ladder-wrap { padding: 1.15rem 0 1.3rem; margin-top: 0.8rem; }
.sp-ladder-wrap .cc-section-head { padding: 0 1.3rem; }

.sp-ladder {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    /* Der Innenabstand gehoert an den Rollbereich und nicht an die
       Karte: sonst klebt die erste Stufe am Rand, sobald man rollt. */
    padding: 0.3rem 1.3rem 0.9rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--cc-bd-2) transparent;
}
.sp-ladder::-webkit-scrollbar { height: 7px; }
.sp-ladder::-webkit-scrollbar-thumb { background: var(--cc-bd-2); border-radius: 999px; }

.sp-col {
    flex: none;
    width: 4.1rem;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.3rem;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: border-color 200ms ease, background 200ms ease;
}
.sp-col.is-locked { opacity: 0.5; }
/* Wo man GERADE steht. Die einzige Stufe mit einem Rahmen — mehrere
   Hervorhebungen nebeneinander heben sich gegenseitig auf. */
.sp-col.is-now {
    border-color: rgba(var(--cc-accent-rgb), 0.35);
    background: rgba(var(--cc-accent-rgb), 0.05);
    opacity: 1;
}
.sp-col__n {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cc-tx-3);
    font-variant-numeric: tabular-nums;
}
.sp-col.is-now .sp-col__n { color: var(--cc-accent-hi); }
.sp-col__sp {
    font-size: 0.58rem;
    color: var(--cc-tx-4);
    font-variant-numeric: tabular-nums;
}

.sp-cell {
    position: relative;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.1rem;
    border: 1px solid var(--cc-bd-1);
    background: var(--cc-bg-3);
    color: var(--cc-tx-2);
    transition: transform 180ms cubic-bezier(.34, 1.28, .5, 1),
                border-color 180ms ease, box-shadow 220ms ease;
}
.sp-cell--leer { background: transparent; border-style: dashed; opacity: 0.35; }
.sp-cell__q {
    font-size: 0.6rem;
    color: var(--cc-tx-3);
    font-variant-numeric: tabular-nums;
}
/* Die Premium-Zelle steht optisch tiefer, damit die beiden Spuren auch
   ohne Beschriftung auseinanderzuhalten sind. */
.sp-cell--premium { background: var(--cc-bg-2); border-style: dashed; }

.sp-cell.is-claimed { opacity: 0.42; }
.sp-cell__done {
    position: absolute;
    right: 0.2rem;
    bottom: 0.15rem;
    font-size: 0.7rem;
    color: var(--cc-accent);
}

/* Abholbereit. Das ist die einzige Stelle auf der Seite, die sich
   dauerhaft bewegt — sie ist auch die einzige, die eine Handlung
   verlangt. */
.sp-cell.is-ready {
    cursor: pointer;
    border-color: rgba(var(--cc-accent-rgb), 0.5);
    color: var(--cc-accent-hi);
    background: rgba(var(--cc-accent-rgb), 0.10);
    animation: sp-atmen 2.4s ease-in-out infinite;
}
.sp-cell.is-ready:hover { transform: translateY(-3px) scale(1.05); }
@keyframes sp-atmen {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cc-accent-rgb), 0.30); }
    50%      { box-shadow: 0 0 18px -2px rgba(var(--cc-accent-rgb), 0.55); }
}
.sp-cell.is-busy { opacity: 0.5; cursor: progress; animation: none; }
.sp-cell.is-error {
    border-color: rgba(239, 106, 106, 0.6);
    background: rgba(239, 106, 106, 0.12);
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .sp-cell.is-ready { animation: none; }
    .sp-head__bar i { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   COMMAND RAIL — two-part navigation (primary area rail + secondary column)
   Ported from the base panel; --cc-*-token-based so it adopts Shorty's neon.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --shell-gap: 0.85rem;
    --lm-banner: 0px;
    --rail-w: 6.4rem;
    --ctx-w:  12.5rem;
    --top-h:  3.5rem;
    --r-xs: 3px; --r-sm: 5px; --r-lg: 12px; --r-xl: 16px;
}
/* Base glider element — the script (moveRail) sets left/top/height/transform. */
.nav-rail {
    position: absolute; left: 0; top: 0; z-index: 1; opacity: 0;
    pointer-events: none;
    transition: transform 300ms cubic-bezier(.34,1.28,.5,1),
                height 300ms cubic-bezier(.34,1.28,.5,1), opacity 200ms ease;
}
.shell:has(.cmd-rail) { display: block; }

/* ═══ 1 · DIE SCHIENE ═══════════════════════════════════════════════
   Sieben Plaetze beim Spieler, beim Team so viele wie Kategorien. Sie
   passt immer ohne Rollen auf den Schirm — das ist der ganze Punkt. */
.cmd-rail {
    position: fixed;
    left: var(--shell-gap);
    top: calc(var(--lm-banner) + var(--shell-gap));
    bottom: var(--shell-gap);
    width: var(--rail-w);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.85rem 0 0.75rem;
    /* Deckend, nicht durchscheinend: auf Kartenseiten schaltet eine
       Regel weiter oben jede Weichzeichnung ab, und eine halbdurch-
       sichtige Flaeche waere dort dann einfach loechrig. */
    background: linear-gradient(178deg, #0b1317 0%, var(--cc-bg-2) 55%, #080e11 100%);
    border: 1px solid var(--cc-bd-1);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85),
                inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
/* Ein Lichtkegel von oben. Gibt der Schiene Tiefe, ohne eine Kante zu
   zeichnen. */
.cmd-rail::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 9.5rem;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: radial-gradient(70% 100% at 50% 0%,
                rgba(var(--cc-accent-rgb), 0.11), transparent 70%);
    pointer-events: none;
}
.cmd-rail > * { position: relative; z-index: 1; }

.rail-mark {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    flex: none;
    display: grid;
    place-items: center;
    margin-bottom: 0.6rem;
    background: radial-gradient(circle at 40% 30%,
                rgba(var(--cc-accent-rgb), 0.18), var(--cc-bg-2));
    border: 1px solid var(--cc-bd-2);
    transition: transform 220ms cubic-bezier(.34, 1.28, .5, 1);
}
.rail-mark img {
    width: 1.55rem;
    height: 1.55rem;
    object-fit: contain;
    filter: drop-shadow(0 0 9px var(--cc-accent-glow)) saturate(0.6) brightness(1.15);
}
.rail-mark:hover { transform: translateY(-2px) scale(1.04); }

.rail-slots {
    position: relative;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    /* Rollen ist der Notnagel, nicht der Normalfall: bei sehr vielen
       Team-Kategorien auf einem kurzen Schirm muss die Schiene nachgeben,
       statt den Fuss hinauszudruecken. */
    overflow-y: auto;
    scrollbar-width: none;
}
.rail-slots::-webkit-scrollbar { width: 0; }

/* Die Kapsel. EIN Element fuer die ganze Schiene — eine Markierung pro
   Platz koennte nicht wandern, und genau das Wandern ist die Bewegung. */
.rail-capsule {
    position: absolute;
    left: 50%;
    top: 0;
    width: 5.2rem;
    height: 3.25rem;   /* Startwert; die echte Hoehe setzt das Skript */
    margin-left: -2.6rem;
    border-radius: 0.9rem;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    background: linear-gradient(140deg,
                rgba(var(--cc-accent-rgb), 0.22),
                rgba(var(--cc-accent-rgb), 0.05));
    border: 1px solid rgba(var(--cc-accent-rgb), 0.34);
    box-shadow: 0 8px 22px -10px rgba(var(--cc-accent-rgb), 0.8),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: transform 420ms cubic-bezier(.34, 1.28, .5, 1),
                height 420ms cubic-bezier(.34, 1.28, .5, 1),
                opacity 200ms ease;
}
/* Die helle Kappe am linken Rand — dasselbe Motiv wie beim Gleiter in
   der Spalte, damit beide Ebenen zusammengehoeren. */
.rail-capsule::before {
    content: "";
    position: absolute;
    left: -0.45rem;
    top: 0.7rem;
    bottom: 0.7rem;
    width: 3px;
    border-radius: 3px;
    background: var(--cc-accent);
    box-shadow: 0 0 12px var(--cc-accent);
}

.rail-slot {
    position: relative;
    z-index: 2;
    width: 5.2rem;
    flex: none;
    border: 0;
    border-radius: 0.9rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.5rem 0.25rem 0.45rem;
    color: var(--cc-tx-3);
    cursor: pointer;
    transition: color 180ms ease, transform 200ms cubic-bezier(.34, 1.28, .5, 1);
}
.rail-slot:hover { color: var(--cc-tx-1); transform: translateY(-1px); }
.rail-slot.on { color: var(--cc-accent-hi); }
.rail-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Feste Hoehe, damit die Beschriftung darunter auf einer Linie
       bleibt -- egal ob darueber ein gezeichnetes Zeichen oder ein
       selbst gewaehltes Emoji steht. Ein Emoji bringt seine eigene
       Zeilenhoehe mit; ohne diese Zeile verschoebe es den Namen um ein
       paar Pixel, und bei sieben Plaetzen untereinander faellt das
       sofort auf. */
    height: 1.4rem;
    font-size: 1.15rem;
    line-height: 1;
}
.rail-ic .ic { font-size: 1.15rem; }
/* Ein selbst gewaehltes Emoji. Etwas kleiner als ein gezeichnetes
   Zeichen: Emoji sind vollflaechig und wirken bei gleicher Punktgroesse
   deutlich schwerer als eine Strichzeichnung daneben. */
.ic--eigen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-style: normal;
}
.rail-ic .ic--eigen { font-size: 1rem; }

/* Der Name steht DAUERHAFT unter dem Zeichen.
   Ein Pinsel fuer „Studio" oder ein Schild fuer „Clan" ist keine
   Konvention, die jemand kennt -- und ein Hinweis, der erst beim
   Ueberfahren erscheint, hilft dem nicht, der nicht weiss, wo er
   ueberfahren soll. Deshalb kein Aufklapp-Hinweis, sondern Text.

   Selbst benannte Team-Kategorien koennen lang sein; die werden
   abgeschnitten, den vollen Namen traegt `title`. */
.rail-name {
    max-width: 100%;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    line-height: 1.15;
    text-align: center;
    color: currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Der Aufklapp-Hinweis von frueher ist ersatzlos weg: der Name steht
   jetzt dauerhaft unter dem Zeichen, ein zweites Mal beim Ueberfahren
   waere nur Unruhe. */

/* Der Punkt am Bereich. Sagt „hier drin wartet etwas", ohne dass man
   den Bereich oeffnen muss -- und geschlossen sind immer sechs von
   sieben. Er traegt die Zahl, solange sie einstellig ist; darueber
   „9+", denn die genaue Menge aendert an der Handlung nichts.

   Rot, nicht in der Leitfarbe: es ist eine Aufforderung, keine
   Auszeichnung. In der Leitfarbe waere er von der aktiven Kapsel kaum
   zu unterscheiden. */
.rail-pip {
    position: absolute;
    top: 0.3rem;
    right: 0.55rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.58rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: #ef4444;
    /* Der Ring trennt die Ziffer vom Zeichen darunter. */
    box-shadow: 0 0 0 2px var(--cc-bg-2);
    pointer-events: none;
}
.rail-pip[hidden] { display: none; }

.rail-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.5rem 0.15rem;
    margin-top: 0.5rem;
    width: 100%;
    border-top: 1px solid var(--cc-bd-1);
}

/* Das Tor zur anderen Seite. Es dreht sich beim Ueberfahren — eine
   kleine Geste, die sagt: hier wechselt etwas Grosses. */
.rail-gate {
    width: 5.2rem;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem 0.45rem;
    border-radius: 0.9rem;
    border: 1px solid var(--cc-bd-2);
    background: rgba(var(--cc-accent-rgb), 0.07);
    color: var(--cc-accent);
    transition: transform 240ms cubic-bezier(.34, 1.28, .5, 1),
                background 180ms ease;
}
/* Kein Drehen mehr. Solange das Tor ein rundes Zeichen war, war die
   Drehung eine nette Geste; mit Beschriftung darunter kippt der Text
   mit und wird unleserlich. */
.rail-gate:hover {
    transform: translateY(-1px);
    background: rgba(var(--cc-accent-rgb), 0.15);
}

.rail-av {
    position: relative;
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 0.8rem;
    overflow: visible;
    font-weight: 700;
    font-size: 0.85rem;
    color: #042032;
    background: linear-gradient(140deg, var(--cc-accent-hi), var(--cc-accent-lo));
    box-shadow: 0 8px 20px -10px rgba(var(--cc-accent-rgb), 0.9);
    transition: transform 220ms cubic-bezier(.34, 1.28, .5, 1);
}
.rail-av:hover { transform: translateY(-2px); }
.rail-av img { width: 100%; height: 100%; border-radius: 0.8rem; object-fit: cover; }
/* Der Punkt am Rand sagt, in welchem Zustand das Konto ist. Vorher stand
   das als Wort in der Benutzerzeile; auf der Schiene ist dafuer kein
   Platz, und der Punkt genuegt. Der Titel am Verweis nennt den Namen. */
.rail-av__ring {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--cc-bg-2);
}
.rail-av__ring.is-team { background: var(--cc-accent); }
.rail-av__ring.is-ok   { background: #34d399; }
.rail-av__ring.is-open { background: #f5b048; }

/* ═══ 2 · DIE BEREICHSSPALTE ════════════════════════════════════════ */
.cmd-ctx {
    position: fixed;
    left: calc(var(--rail-w) + var(--shell-gap) * 2);
    top: calc(var(--lm-banner) + var(--shell-gap));
    bottom: var(--shell-gap);
    width: var(--ctx-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: linear-gradient(178deg, #0b1317 0%, var(--cc-bg-2) 60%, #080e11 100%);
    border: 1px solid var(--cc-bd-1);
    border-radius: var(--r-xl);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.ctx-head { padding: 1rem 0.6rem 0.6rem; }
.ctx-kick {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-tx-4);
}
.ctx-name {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--cc-tx-1);
    margin-top: 0.2rem;
}
.ctx-desc {
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--cc-tx-4);
    margin-top: 0.3rem;
    /* Zwei Zeilen sind das Budget. Laengere Beschreibungen wuerden die
       Spalte auseinanderziehen und die Verweise nach unten druecken. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ctx-nav {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 0.35rem 0.4rem 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--cc-bd-2) transparent;
}
.ctx-nav::-webkit-scrollbar { width: 5px; }
.ctx-nav::-webkit-scrollbar-thumb { background: var(--cc-bd-2); border-radius: 999px; }
.ctx-area[hidden] { display: none; }

/* Beim Bereichswechsel laufen die Zeilen gestaffelt ein. Der Ruhezustand
   ist SICHTBAR — ohne Skript steht die Spalte fertig da, die Bewegung
   kommt nur beim Wechsel dazu. */
.ctx-area.is-entering > .nav-link {
    animation: ctx-enter 340ms cubic-bezier(.34, 1.28, .5, 1) both;
}
@keyframes ctx-enter {
    from { opacity: 0; transform: translateX(-9px); }
    to   { opacity: 1; transform: none; }
}

/* ─── Die Zeilen ───────────────────────────────────────────────────
   Die alten Regeln hingen an `aside#sidebar` und greifen nicht mehr.
   Hier steht die Zeile neu — schmaler als frueher, weil die Spalte
   schmaler ist. */
#sidebar-nav.ctx-nav .nav-link {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.8rem;
    margin: 0;
    padding: 0.28rem 0.5rem;
    /* Kill the old overlay TILE look (card bg + border + big radius) so a
       row is just a row — icon + label, nothing around it. */
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: var(--r-sm);
    color: var(--cc-tx-3);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    text-shadow: none;
    text-decoration: none;
    /* One line, always — long labels never wrap to two rows. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 150ms ease, background 150ms ease;
}
#sidebar-nav.ctx-nav .nav-link .nav-icon {
    width: 1.05rem;
    height: auto;
    flex: none;
    display: inline-flex;
    justify-content: center;
    /* No chip: transparent, no border, no box; emoji at a sane size (the
       old overlay set 18px). */
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 0.9rem;
    color: inherit;
    opacity: 0.9;
    transition: transform 150ms cubic-bezier(.34, 1.28, .5, 1);
}
#sidebar-nav.ctx-nav .nav-link .nav-icon .ic { font-size: 0.95rem; }
#sidebar-nav.ctx-nav .nav-link:hover { color: var(--cc-tx-1); background: rgba(255, 255, 255, 0.035); }
#sidebar-nav.ctx-nav .nav-link:hover .nav-icon { transform: scale(1.14); }
#sidebar-nav.ctx-nav .nav-link.active {
    color: var(--cc-tx-1);
    font-weight: 600;
    /* A clean full-width highlight — NOT a bordered box (the old base rule
       added an inset 1px border via box-shadow; kill it here). */
    box-shadow: none;
    background: linear-gradient(100deg,
                rgba(var(--cc-accent-rgb), 0.16),
                rgba(var(--cc-accent-rgb), 0.02));
}
#sidebar-nav.ctx-nav .nav-link.active .nav-icon { color: var(--cc-accent-hi); opacity: 1; }
.nav-link--quiet { color: var(--cc-tx-4); }

/* Die Zahl an einer Zeile (offene Tickets, neue Bewerbungen …). Kam
   vorher als Tailwind-Klassenkette aus der Vorlage; als eigene Klasse
   passt sie sich dem Revier an, statt immer bernsteinfarben zu sein. */
.nav-badge {
    margin-left: auto;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cc-accent-hi);
    background: rgba(var(--cc-accent-rgb), 0.13);
    border: 1px solid rgba(var(--cc-accent-rgb), 0.3);
}
.nav-badge.hidden { display: none; }

.ctx-empty {
    padding: 0.75rem 0.7rem;
    font-size: 0.75rem;
    color: var(--cc-tx-4);
}
.ctx-empty a { color: var(--cc-accent); text-decoration: underline; }

.ctx-foot { padding: 0.6rem; border-top: 1px solid var(--cc-bd-1); }
.ctx-find {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--cc-bd-1);
    background: rgba(255, 255, 255, 0.02);
    color: var(--cc-tx-4);
    font-size: 0.76rem;
    cursor: pointer;
    transition: border-color 180ms ease, color 180ms ease;
}
.ctx-find:hover { border-color: var(--cc-bd-3); color: var(--cc-tx-2); }
.ctx-find > span { text-align: left; }
.ctx-find b {
    margin-left: auto;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--cc-tx-3);
    border: 1px solid var(--cc-bd-2);
    border-radius: 5px;
    padding: 0.05rem 0.3rem;
}

/* ─── Der Gleiter ──────────────────────────────────────────────────
   Das Element und sein Skript (`moveRail`) bleiben, wie sie waren — nur
   die Gestalt wechselt vom duennen Balken zur gefuellten Kapsel mit
   heller Kappe. Dieselbe Form wie auf der Schiene: beide Ebenen zeigen
   „hier stehst du" auf die gleiche Art.

   Die Hoehe kommt aus dem Skript, deshalb steht sie hier nicht. */
.ctx-nav .nav-rail {
    width: calc(100% - 1.2rem);
    border-radius: var(--r-sm);
    background: transparent;
    border: 1px solid rgba(var(--cc-accent-rgb), 0.26);
    box-shadow: 0 6px 18px -12px rgba(var(--cc-accent-rgb), 0.9);
}
.ctx-nav .nav-rail::after {
    content: "";
    position: absolute;
    left: -1px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2.5px;
    border-radius: 3px;
    background: var(--cc-accent);
    box-shadow: 0 0 9px var(--cc-accent);
}

/* ═══ 3 · DIE KOPFLEISTE ════════════════════════════════════════════
   Neu. Das Panel hatte oben gar nichts — die Glocke musste deshalb ganz
   unten in die Benutzerzeile, wo sie niemand sucht. */
.cmd-top {
    position: fixed;
    top: calc(var(--lm-banner) + var(--shell-gap));
    left: calc(var(--rail-w) + var(--ctx-w) + var(--shell-gap) * 3);
    right: var(--shell-gap);
    height: var(--top-h);
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    background: linear-gradient(178deg, rgba(11, 19, 23, 0.92), rgba(8, 14, 17, 0.78));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--cc-bd-1);
    border-radius: var(--r-lg);
    box-shadow: 0 16px 40px -26px rgba(0, 0, 0, 0.9);
}
.cmd-burger { display: none; }

.cmd-crumb {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.76rem;
    color: var(--cc-tx-4);
}
.cmd-crumb__grp { flex: none; }
.cmd-crumb__sl { opacity: 0.5; flex: none; }
.cmd-crumb__now {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cc-tx-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cmd-fill { flex: 1; }

.cmd-ico {
    width: 2rem;
    height: 2rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--r-sm);
    border: 0;
    background: transparent;
    color: var(--cc-tx-4);
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
.cmd-ico:hover { color: var(--cc-tx-1); background: rgba(255, 255, 255, 0.07); }
.cmd-ico--discord:hover { color: #fff; background: #5865F2; }
.cmd-ico--out:hover { color: #fca5a5; background: rgba(248, 113, 113, 0.14); }

/* Die Glocke war fuer die Fusszeile gebaut: sie klappte nach OBEN auf und
   war links verankert. Oben rechts muss beides andersherum. */
.cmd-top .bell-panel {
    bottom: auto;
    top: calc(100% + 0.55rem);
    left: auto;
    right: 0;
}

/* ═══ 4 · DER INHALT ════════════════════════════════════════════════ */
.cmd-main {
    margin-left: calc(var(--rail-w) + var(--ctx-w) + var(--shell-gap) * 3);
    padding-top: calc(var(--top-h) + var(--shell-gap) * 2);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.cmd-main > #page { flex: 1; }

.cmd-scrim {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(3, 7, 9, 0.66);
    border: 0;
    padding: 0;
}
.cmd-scrim[hidden] { display: none; }

/* ═══ 5 · SCHMALE SCHIRME ═══════════════════════════════════════════
   Die Schiene bleibt IMMER stehen — sie ist schmal genug und ist der
   einzige Weg zwischen den Bereichen. Nur die Spalte faehrt zur Seite. */
@media (max-width: 60rem) {
    .cmd-ctx {
        transform: translateX(calc(-100% - var(--rail-w) - var(--shell-gap) * 2));
        transition: transform 300ms cubic-bezier(.34, 1.28, .5, 1);
    }
    .cmd-ctx.is-open { transform: none; }
    .cmd-top  { left: calc(var(--rail-w) + var(--shell-gap) * 2); }
    .cmd-main { margin-left: calc(var(--rail-w) + var(--shell-gap) * 2); }
    .cmd-burger {
        display: grid;
        place-items: center;
        width: 2rem;
        height: 2rem;
        flex: none;
        border: 0;
        border-radius: var(--r-sm);
        background: transparent;
        color: var(--cc-tx-3);
        cursor: pointer;
    }
    .cmd-burger:hover { color: var(--cc-tx-1); background: rgba(255, 255, 255, 0.07); }
}
@media (max-width: 30rem) {
    /* Icon-only rail on phones: the truncated "Dashbo..." labels looked rough
       and the wide rail ate the content column. Icons + the top-bar crumb are
       enough to know where you are, and the content gains ~30px. */
    :root { --rail-w: 3.9rem; }
    .rail-name { display: none; }
    .rail-slot, .rail-gate, .rail-capsule { width: 3.1rem; }
    .rail-slot, .rail-gate { min-height: 3.1rem; }
    .rail-capsule { margin-left: -1.55rem; }
    .rail-ic { font-size: 1.3rem; }
    .cmd-top { padding: 0 0.55rem; gap: 0.25rem; }
    .cmd-crumb__grp, .cmd-crumb__sl { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rail-capsule { transition: opacity 200ms ease; }
    .ctx-area.is-entering > .nav-link { animation: none; }
    .cmd-ctx { transition: none; }
}

/* ═══ 6 · MOBILE-SICHERHEIT — keine Verzerrung durch zu breite Inhalte ═════
   Ein Element, das breiter als das Handy ist (breite Tabelle, langer
   Steam-Link, breite Flex-Reihe), zwingt den Browser den Layout-Viewport zu
   verbreitern — dann wird die GANZE Seite herunterskaliert und wirkt
   "verschoben/verzerrt", und die Schmal-Schiene (<=30rem) greift nie. Wir
   halten die Breite hart auf der Geraetebreite und lassen breite Blöcke IN
   ihrer eigenen Box scrollen statt die Seite zu sprengen. */
.cmd-main, #page { min-width: 0; }          /* Content-Spalte darf schrumpfen */
#page { overflow-wrap: break-word; }        /* lange Tokens/URLs umbrechen */

@media (max-width: 60rem) {
    /* Nichts darf den Layout-Viewport ueber die Geraetebreite hinaus ziehen.
       'clip' (nicht 'hidden'!) — 'hidden' wuerde bei height:100%-Body einen
       eigenen Scroll-Container erzeugen und window-Scroll/Anker kaputt machen;
       'clip' kappt nur horizontal und laesst die vertikale Achse in Ruhe. */
    html, body { overflow-x: clip; max-width: 100%; }
    /* Breite Tabellen scrollen in ihrer EIGENEN Box (interne Spalten-
       Ausrichtung bleibt, weil nur das <table>-Element block wird). */
    #page table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Bilder nie breiter als ihre Spalte — Leaflet-Kacheln ausgenommen. */
    #page img:not([class*="leaflet"]) { max-width: 100%; height: auto; }
}

/* Notch-/Home-Indicator-Abstand (nur aktiv wenn das Geraet Insets meldet;
   auf normalen Screens sind alle env()-Werte 0 -> kein sichtbarer Effekt). */
@supports (padding: env(safe-area-inset-left)) {
    .cmd-rail { padding-left: env(safe-area-inset-left, 0px); }
    .cmd-main { padding-right: env(safe-area-inset-right, 0px); }
    .cmd-main > footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}


/* Shorty's nav-groups (<details>) act as command-rail AREAS: the JS promotes
   each into a switchable area. Hide their summaries and lay their links out
   as a vertical column (overriding the old overlay tile-grid). */
#sidebar-nav .nav-group { margin: 0 !important; }
#sidebar-nav .nav-group > summary { display: none !important; }
#sidebar-nav .nav-group[hidden] { display: none !important; }
#sidebar-nav .nav-group > .nav-group-content {
    display: flex !important;
    flex-direction: column;
    gap: 0.12rem;
    grid-template-columns: none !important;
    animation: none !important;
}
/* The rail's own logo mark (text initial when there is no logo image) */
.rail-mark__txt {
    font-family: var(--font-mono, monospace); font-weight: 800; font-size: 1.1rem;
    color: var(--cc-accent-hi);
    text-shadow: 0 0 12px var(--cc-accent-glow);
}

/* ═══════════════════════════════════════════════════════════════════════
   KING OF THE HILL — Admin (Zonen-Zeichner + Reward-Pool)
   ═══════════════════════════════════════════════════════════════════════ */
.koth-draw { display: flex; flex-direction: column; gap: 0.6rem; }
.koth-map {
    width: 100%; height: 440px;
    border: 1px solid var(--cc-bd-2);
    border-radius: 12px; overflow: hidden;
    background: var(--cc-bg-0);
}
.koth-map .leaflet-container { background: var(--cc-bg-0); }

.koth-drawbar {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    background: var(--cc-bg-1);
    border: 1px solid var(--cc-bd-1);
    border-radius: 10px;
}
.koth-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 9rem; }
.koth-field--grow { flex: 1 1 12rem; }
.koth-field .rp-lbl { display: flex; align-items: center; gap: 0.4rem; }
.koth-hint {
    flex-basis: 100%; margin: 0.1rem 0 0;
    font-size: 0.72rem; color: var(--cc-tx-3);
}

/* Radius-Slider in Marken-Neon */
.koth-slider { width: 100%; accent-color: var(--cc-accent); cursor: pointer; height: 1.9rem; }

/* Krone im Zeichen-Marker */
.koth-pin {
    font-size: 22px; line-height: 26px; text-align: center;
    filter: drop-shadow(0 0 6px var(--cc-accent-glow)) drop-shadow(0 1px 2px rgba(0,0,0,0.8));
    pointer-events: none;
}

/* Farbpunkt in der Zonenliste (an/aus) */
.koth-swatch {
    width: 0.7rem; height: 0.7rem; border-radius: 50%;
    background: var(--cc-cyan, #19e6ff);
    box-shadow: 0 0 6px rgba(25, 230, 255, 0.6);
    align-self: center;
}
.koth-swatch.is-off { background: var(--cc-tx-4); box-shadow: none; }
.koth-zrow { cursor: pointer; }
.koth-zrow:hover { border-color: var(--cc-accent-line); }
.koth-zname { cursor: pointer; }

/* Reward-Pool als Chip-Gitter */
.koth-pool {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.5rem; margin-bottom: 0.4rem;
}
.koth-chip {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    background: var(--cc-bg-2);
    border: 1px solid var(--cc-bd-1);
    border-radius: 10px;
}
.koth-chip__ico {
    font-size: 1.2rem; line-height: 1;
    width: 2rem; height: 2rem; flex: 0 0 2rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--cc-bg-3); border-radius: 8px;
}
.koth-chip__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.koth-chip__kind { color: var(--cc-tx-1); font-weight: 600; text-transform: capitalize; font-size: 0.85rem; }
.koth-chip__qty { color: var(--cc-accent-hi); font-family: var(--font-mono, monospace); }
.koth-chip__meta {
    font-size: 0.68rem; color: var(--cc-tx-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.koth-chip__x {
    margin-left: auto; flex: 0 0 auto;
    width: 1.5rem; height: 1.5rem; border-radius: 6px;
    border: none; background: transparent; color: var(--cc-tx-4);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.koth-chip__x:hover { background: rgba(255, 60, 90, 0.16); color: #ff5a72; }

/* Der Hinzufügen-Block unter dem Pool */
.koth-add-reward {
    margin-top: 0.6rem; padding: 0.75rem 0.8rem;
    background: var(--cc-bg-1);
    border: 1px dashed var(--cc-bd-2);
    border-radius: 10px;
}
.koth-add-reward__h {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cc-tx-3); margin-bottom: 0.55rem;
}
.koth-pool-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem; }
.koth-pool-add .rp { flex: 1 1 20rem; }

/* ═══════════════════════════════════════════════════════════════════
   SEASON PASS — die Buehne (ported from Laramidia/NonPaid 2026-09-29)
   Player season-pass stage. Accent is --sp-c (defaults to Shorty cyan
   #67e8f9); all other colours read --cc-*/--sp-* (derived from --sp-c),
   so it renders in the Primal Legacy palette automatically. sp2-* only — no
   admin classes. The old .sp-head/.sp-ladder/.sp-col player CSS above is
   now dead (template moved to sp2-*).
   ═══════════════════════════════════════════════════════════════════ */
.sp2-root {
    
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: calc(100dvh - 2 * var(--shell-gap, 0.85rem));
    margin: calc(-1 * var(--shell-gap, 0.85rem))
            calc(-1 * var(--shell-gap, 0.85rem)) -2.5rem;

    --sp-hell:  #a1f1fb;   /* static: 62% cyan + white */
    --sp-tief:  #3b848e;   /* static: 55% cyan + near-black */
    --sp-linie: rgba(103,232,249,0.34);
    --sp-dunst: rgba(103,232,249,0.14);
    --sp-text:  #bbe9f1;   /* static: 30% cyan + cool white */
    --sp-matt:  #6c98a2;   /* static: 22% cyan + slate */
}
.sp2-atmo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg,
        transparent 0, #000 260px,
        #000 calc(100% - 200px), transparent 100%);
    mask-image: linear-gradient(180deg,
        transparent 0, #000 260px,
        #000 calc(100% - 200px), transparent 100%);
}
.sp2-dunst {
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 9%, #000 91%, transparent 100%);
}
.sp2-licht {
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0, #000 16%, #000 84%, transparent 100%);
}
.sp2-dunst {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        
        radial-gradient(84% 56% at 50% 12%, var(--sp-dunst), transparent 66%),
        radial-gradient(120% 80% at 50% 106%, var(--cc-bg-0, #030709), transparent 58%),
        
        repeating-linear-gradient(90deg,
            rgba(255,255,255,0.012) 0 1px, transparent 1px 68px);
}
.sp2-inhalt {
    position: relative;
    z-index: 1;
    
    max-width: min(1400px, 100%);
    margin: 0 auto;
    padding: clamp(2.4rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) 4rem;
}
.sp2-hero { text-align: center; }
.sp2-hero__text { max-width: 46rem; margin: 0 auto; }
.sp2-uhr, .sp2-banner { max-width: 46rem; }
.sp2-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.42em;
    margin-left: 0.42em;
    text-transform: uppercase;
    color: var(--sp-text);
    opacity: 0;
    animation: sp2Auf 0.7s ease 0.15s forwards;
}
.sp2-titel {
    font-size: clamp(2.2rem, 6vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    margin: 0.55rem 0 0.7rem;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg,
                #ffffff 0%, var(--sp-hell) 46%, var(--sp-tief) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 30px var(--sp-dunst));
    animation: sp2Titel 0.9s cubic-bezier(.2,.7,.2,1) 0.1s both;
}
.sp2-titel__n { font-variant-numeric: tabular-nums; }
.sp2-sub {
    color: var(--sp-matt);
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    line-height: 1.6;
    max-width: 44rem;
    margin: 0 auto;
    opacity: 0;
    animation: sp2Auf 0.7s ease 0.35s forwards;
}
.sp2-sub .mono { color: var(--sp-hell); }
@keyframes sp2Titel {
    from { opacity: 0; transform: translateY(20px) scale(.97); filter: blur(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sp2Auf {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.sp2-ring {
    --p: 0;
    width: clamp(9rem, 22vw, 12rem);
    height: clamp(9rem, 22vw, 12rem);
    margin: clamp(1.4rem, 3vw, 2.2rem) auto clamp(1rem, 2vw, 1.6rem);
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    
    background:
        conic-gradient(var(--sp-c) calc(var(--p) * 1%),
                       rgba(255,255,255,0.05) 0);
    animation: sp2Ring 1.1s cubic-bezier(.2,.7,.2,1) 0.25s both;
}
.sp2-ring::after {
    
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background:
        radial-gradient(120% 120% at 50% 0%,
            color-mix(in srgb, var(--sp-c) 9%, var(--cc-bg-2, #0a1114)),
            var(--cc-bg-1, #05090c));
    box-shadow: inset 0 0 34px -8px var(--sp-dunst);
}
.sp2-ring__kern { position: relative; z-index: 1; text-align: center; }
.sp2-ring__n {
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 26px var(--sp-dunst);
}
.sp2-ring__l {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sp-matt);
    margin-top: 0.2rem;
}
@keyframes sp2Ring { from { opacity: 0; transform: scale(.92); } to { opacity: 1; } }
.sp2-zahlen {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(1.4rem, 5vw, 3.4rem);
    opacity: 0;
    animation: sp2Auf 0.7s ease 0.55s forwards;
}
.sp2-zahl { text-align: center; }
.sp2-zahl b {
    display: block;
    font-size: clamp(1.15rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--sp-hell);
    line-height: 1.2;
}
.sp2-zahl span {
    display: block;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sp-matt);
    margin-top: 0.15rem;
}
.sp2-knopf {
    display: inline-block;
    margin-top: 1.4rem;
    padding: 0.55rem 1.3rem;
    border: 1px solid var(--sp-linie);
    border-radius: 999px;
    color: var(--sp-hell);
    text-decoration: none;
    font-size: 0.84rem;
    transition: border-color .3s, background .3s;
}
.sp2-knopf:hover {
    border-color: var(--sp-c);
    background: var(--sp-dunst);
}
.sp2-abschnitt { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.sp2-kopf {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.5rem;
}
.sp2-punkt {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sp-c);
    box-shadow: 0 0 12px var(--sp-c);
    animation: sp2Puls 3.4s ease-in-out infinite;
    flex: none;
}
@keyframes sp2Puls {
    0%, 100% { box-shadow: 0 0 9px var(--sp-c); }
    50%      { box-shadow: 0 0 22px var(--sp-c), 0 0 38px var(--sp-dunst); }
}
.sp2-label {
    text-transform: uppercase;
    letter-spacing: 0.17em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--sp-text);
}
.sp2-linie {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--sp-linie), transparent);
}
.sp2-note { font-size: 0.7rem; color: var(--sp-matt); }
.sp2-hier {
    font-size: 0.7rem;
    color: var(--sp-hell);
    background: transparent;
    border: 1px solid var(--sp-linie);
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    cursor: pointer;
}
.sp2-hier:hover { border-color: var(--sp-c); }
.sp2-erklaerung {
    color: var(--sp-matt);
    font-size: 0.78rem;
    line-height: 1.6;
    max-width: 62ch;
    margin: 0 0 1rem;
}
.sp2-hinweis {
    color: var(--sp-matt);
    font-size: 0.72rem;
    margin: 0.8rem 0 0;
    text-align: center;
}
.sp2-quellen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 0.5rem;
}
.sp2-quelle {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.7rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--cc-bd-1);
    border-radius: 10px;
    background: color-mix(in srgb, var(--sp-c) 4%, var(--cc-bg-2, #0a1114));
}
.sp2-quelle.is-voll { border-color: var(--sp-linie); }
.sp2-quelle__n {
    font-size: 0.76rem;
    color: var(--cc-tx-2);
    text-transform: capitalize;
}
.sp2-quelle__v {
    font-size: 0.72rem;
    color: var(--sp-hell);
    text-align: right;
}
.sp2-quelle__v span { color: var(--sp-matt); }
.sp2-quelle__bahn {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.sp2-quelle__bahn i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sp-tief), var(--sp-c));
    transition: width .6s ease;
}
.sp2-quelle.is-voll .sp2-quelle__bahn i { background: var(--sp-hell); }
.sp2-leiter {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1.5rem 0 0.6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--sp-linie) transparent;
}
.sp2-leiter::-webkit-scrollbar { height: 7px; }
.sp2-leiter::-webkit-scrollbar-thumb {
    background: var(--sp-linie); border-radius: 999px;
}
.sp2-gleis { position: relative; width: max-content; min-width: 100%; }
.sp2-schiene {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(255,255,255,0.055);
}
.sp2-schiene i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sp-tief), var(--sp-c));
    box-shadow: 0 0 12px var(--sp-dunst);
}
.sp2-spalten { display: flex; gap: 0.45rem; padding-top: 0.9rem; }
.sp2-spalte {
    flex: 0 0 4.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.sp2-spalte__n {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--cc-tx-4);
    font-variant-numeric: tabular-nums;
}
.sp2-spalte.is-erreicht .sp2-spalte__n { color: var(--sp-hell); }
.sp2-spalte.is-jetzt .sp2-spalte__n {
    color: #fff;
    text-shadow: 0 0 14px var(--sp-c);
}
.sp2-spalte.is-meilenstein .sp2-spalte__n::after {
    content: "";
    display: block;
    width: 3px; height: 3px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: var(--sp-c);
}
.sp2-spalte__sp {
    font-size: 0.58rem;
    color: var(--cc-tx-4);
    opacity: 0.7;
}
.sp2-karte {
    position: relative;
    width: 4.2rem;
    height: 4.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    border: 1px solid var(--cc-bd-1);
    border-radius: 12px;
    background: linear-gradient(160deg,
                var(--cc-bg-3, #0e1619), var(--cc-bg-1, #05090c));
    color: var(--cc-tx-4);
    overflow: hidden;
    transition: border-color .3s, transform .3s, box-shadow .3s, color .3s;
}
.sp2-karte--leer {
    background: transparent;
    border-style: dashed;
    border-color: rgba(255,255,255,0.05);
}
.sp2-karte__glanz {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    background: radial-gradient(80% 120% at 0% 0%,
                color-mix(in srgb, var(--sp-c) 22%, transparent), transparent 62%);
}
.sp2-karte__q { font-size: 0.6rem; }
.sp2-karte__haken {
    position: absolute;
    top: 4px; right: 5px;
    color: var(--sp-hell);
    line-height: 1;
}
.sp2-karte.is-bereit {
    cursor: pointer;
    color: #fff;
    border-color: var(--sp-c);
    background: linear-gradient(160deg,
                color-mix(in srgb, var(--sp-c) 18%, var(--cc-bg-3, #0e1619)),
                var(--cc-bg-1, #05090c));
    box-shadow: 0 0 0 1px var(--sp-dunst), 0 6px 24px -10px var(--sp-c);
    animation: sp2Warten 2.6s ease-in-out infinite;
}
@keyframes sp2Warten {
    0%, 100% { box-shadow: 0 0 0 1px var(--sp-dunst), 0 6px 22px -12px var(--sp-c); }
    50%      { box-shadow: 0 0 0 1px var(--sp-linie), 0 8px 30px -8px var(--sp-c); }
}
.sp2-karte.is-bereit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 32px -10px var(--sp-c);
}
.sp2-karte.is-bereit:hover .sp2-karte__glanz { opacity: 1; }
.sp2-karte.is-geholt {
    border-color: var(--sp-linie);
    color: var(--sp-text);
    animation: none;
}
.sp2-karte.is-frisch { animation: sp2Geholt 1.4s ease-out; }
@keyframes sp2Geholt {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 var(--sp-c); }
    28%  { transform: scale(1.14); box-shadow: 0 0 0 8px transparent; }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}
.sp2-spalte.is-zu .sp2-karte { opacity: 0.42; }
.sp2-karte.is-laeuft { opacity: 0.5; }
.sp2-karte.is-fehler {
    border-color: var(--cc-danger, #ef6a6a);
    animation: sp2Zittern 0.4s;
}
@keyframes sp2Zittern {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.sp2-karte--premium { border-style: solid; }
.sp2-karte--premium::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sp-c), transparent);
    opacity: 0.55;
}
@media (max-width: 640px) {
  .sp2-spalte { flex-basis: 4rem; }
  .sp2-karte { width: 3.7rem; height: 3.7rem; }
  .sp2-zahlen { gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sp2-titel, .sp2-eyebrow, .sp2-sub, .sp2-zahlen, .sp2-ring { animation: none; opacity: 1; }
  .sp2-punkt, .sp2-karte.is-bereit { animation: none; }
}
.sp2-banner {
    position: relative;
    max-width: 720px;
    margin: 0 auto clamp(1.2rem, 3vw, 2rem);
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 21 / 9;
    animation: sp2Auf 0.8s ease both;
}
.sp2-banner img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sp2-banner__rand {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 42%, var(--cc-bg-0, #030709) 99%),
        radial-gradient(120% 80% at 50% 0%,
            color-mix(in srgb, var(--sp-c) 18%, transparent), transparent 70%);
    box-shadow: inset 0 0 0 1px var(--sp-linie);
    border-radius: inherit;
}
.sp2-motto {
    max-width: 40rem;
    margin: -0.2rem auto 0.9rem;
    font-size: clamp(0.9rem, 2.1vw, 1.1rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--sp-hell);
    opacity: 0;
    animation: sp2Auf 0.7s ease 0.45s forwards;
}
.sp2-licht {
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    
    mix-blend-mode: screen;
}
.sp2-licht span {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(60px);
    will-change: transform, opacity;
}
.sp2-licht__a {
    width: 46vw; height: 46vw;
    min-width: 320px; min-height: 320px;
    top: -8%; left: 6%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--sp-c) 26%, transparent) 0%,
        transparent 66%);
    animation: sp2LichtA 37s ease-in-out infinite;
}
.sp2-licht__b {
    width: 38vw; height: 38vw;
    min-width: 260px; min-height: 260px;
    top: 24%; right: 2%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--sp-c) 18%, transparent) 0%,
        transparent 68%);
    animation: sp2LichtB 43s ease-in-out infinite;
}
.sp2-licht__c {
    width: 54vw; height: 30vw;
    min-width: 340px; min-height: 200px;
    bottom: -6%; left: 22%;
    background: radial-gradient(ellipse,
        color-mix(in srgb, var(--sp-c) 14%, transparent) 0%,
        transparent 70%);
    animation: sp2LichtC 53s ease-in-out infinite;
}
@keyframes sp2LichtA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: .75; }
    33%      { transform: translate3d(7vw, 5vh, 0) scale(1.14); opacity: 1; }
    66%      { transform: translate3d(-4vw, 9vh, 0) scale(.94); opacity: .6; }
}
@keyframes sp2LichtB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);          opacity: .55; }
    40%      { transform: translate3d(-9vw, -6vh, 0) scale(1.22); opacity: .9; }
    75%      { transform: translate3d(3vw, 7vh, 0) scale(.9);     opacity: .45; }
}
@keyframes sp2LichtC {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);         opacity: .5; }
    50%      { transform: translate3d(-6vw, -4vh, 0) scale(1.3); opacity: .82; }
}
.sp2-stil--ember .sp2-licht { opacity: 1; }
.sp2-stil--drift .sp2-licht { opacity: .7; }
.sp2-stil--drift .sp2-licht span { animation-duration: 71s; }
.sp2-stil--drift .sp2-dunst::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 38%,
        color-mix(in srgb, var(--sp-c) 7%, transparent) 50%, transparent 62%);
    animation: sp2Schleier 61s linear infinite;
}
@keyframes sp2Schleier {
    from { transform: translateX(-60%); }
    to   { transform: translateX(60%); }
}
.sp2-stil--pulse .sp2-licht span { animation: none; opacity: .7; }
.sp2-stil--pulse .sp2-licht { animation: sp2Atmen 7s ease-in-out infinite; }
@keyframes sp2Atmen { 0%, 100% { opacity: .6 } 50% { opacity: 1 } }
.sp2-stil--still .sp2-licht span { animation: none; }
.sp2-karte__bild {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    opacity: 0.82;
    transition: opacity .3s, transform .3s;
}
.sp2-karte:hover .sp2-karte__bild { opacity: 1; transform: scale(1.06); }
.sp2-karte__bild ~ .sp2-karte__q {
    position: relative;
    z-index: 1;
    align-self: stretch;
    margin-top: auto;
    text-align: center;
    background: linear-gradient(180deg, transparent, rgba(3,7,9,0.88));
    padding: 0.5rem 0 0.15rem;
}
.sp2-spalte.is-kiste,
.sp2-spalte.is-signatur { --gold: #f5c15e; --gold-hell: #ffe6ad; }
.sp2-spalte.is-kiste .sp2-spalte__n,
.sp2-spalte.is-signatur .sp2-spalte__n {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(245, 193, 94, 0.55);
}
.sp2-spalte.is-kiste .sp2-spalte__n::after,
.sp2-spalte.is-signatur .sp2-spalte__n::after {
    content: "";
    display: block;
    width: 4px; height: 4px;
    margin: 3px auto 0;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold);
}
.sp2-spalte.is-kiste .sp2-karte:not(.sp2-karte--leer),
.sp2-spalte.is-signatur .sp2-karte:not(.sp2-karte--leer) {
    border-color: rgba(245, 193, 94, 0.5);
    background: linear-gradient(160deg,
                rgba(245, 193, 94, 0.13), var(--cc-bg-1, #05090c));
    animation: sp2Gold 3.6s ease-in-out infinite;
}
@keyframes sp2Gold {
    0%, 100% { box-shadow: 0 0 0 1px rgba(245,193,94,0.16),
                           0 4px 20px -12px rgba(245,193,94,0.55); }
    50%      { box-shadow: 0 0 0 1px rgba(245,193,94,0.4),
                           0 8px 30px -8px rgba(245,193,94,0.75); }
}
.sp2-spalte.is-kiste .sp2-karte:not(.sp2-karte--leer)::after,
.sp2-spalte.is-signatur .sp2-karte:not(.sp2-karte--leer)::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 42%;
    left: -60%;
    pointer-events: none;
    background: linear-gradient(105deg, transparent,
                rgba(255, 236, 190, 0.28), transparent);
    animation: sp2Streif 3.6s ease-in-out infinite;
}
@keyframes sp2Streif {
    0%, 62% { left: -60%; }
    100%    { left: 130%; }
}
.sp2-spalte.is-signatur .sp2-spalte__n {
    color: var(--gold-hell);
    font-size: 0.78rem;
}
.sp2-spalte.is-signatur .sp2-karte:not(.sp2-karte--leer) {
    border-width: 2px;
    border-color: rgba(255, 230, 173, 0.62);
}
.sp2-spalte.is-signatur .sp2-spalte__sp { color: var(--gold); opacity: 1; }
.sp2-spalte.is-kiste .sp2-karte.is-bereit,
.sp2-spalte.is-signatur .sp2-karte.is-bereit {
    border-color: var(--gold-hell);
    box-shadow: 0 0 0 1px rgba(245,193,94,0.3),
                0 8px 30px -8px rgba(245,193,94,0.8);
}
@media (prefers-reduced-motion: reduce) {
  .sp2-licht, .sp2-licht span, .sp2-banner { animation: none; }
  .sp2-stil--drift .sp2-dunst::after { animation: none; }
  .sp2-spalte.is-kiste .sp2-karte::after,
    .sp2-spalte.is-signatur .sp2-karte::after { animation: none; display: none; }
  .sp2-spalte.is-kiste .sp2-karte,
    .sp2-spalte.is-signatur .sp2-karte { animation: none; }
  .sp2-stil--pulse .sp2-dunst { animation: none; }
}
.sp2-karte__lupe {
    position: absolute;
    z-index: 2;
    bottom: 3px; right: 3px;
    width: 1.25rem; height: 1.25rem;
    display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 5px;
    background: rgba(3, 7, 9, 0.72);
    color: #fff;
    cursor: zoom-in;
    padding: 0;
    opacity: 0;
    transition: opacity .2s;
}
.sp2-karte:hover .sp2-karte__lupe,
.sp2-karte__lupe:focus-visible { opacity: 1; }
@media (hover: none) {
  .sp2-karte__lupe { opacity: 0.85; }
}
.sp2-naechstes {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.1rem;
    padding: 0.28rem 0.85rem;
    border: 1px solid rgba(245, 193, 94, 0.32);
    border-radius: 999px;
    background: rgba(245, 193, 94, 0.07);
    font-size: 0.76rem;
    color: #ffe6ad;
    opacity: 0;
    animation: sp2Auf 0.7s ease 0.5s forwards;
}
.sp2-naechstes b { color: #ffd98f; }
.sp2-naechstes span { color: #c9a875; }
.sp2-naechstes__mark {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #f5c15e;
    box-shadow: 0 0 10px #f5c15e;
}
.sp2-bahn { display: flex; align-items: stretch; gap: 0.2rem; }
.sp2-spuren {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-right: 0.5rem;
    
    margin-top: 3.35rem;
}
.sp2-spuren__l {
    height: 4.2rem;
    display: flex;
    align-items: center;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sp-matt);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    justify-content: center;
}
.sp2-spuren__l--p { color: var(--sp-text); }
.sp2-zettel {
    position: fixed;
    left: 50%;
    bottom: 2.2rem;
    transform: translateX(-50%);
    z-index: 940;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 1.1rem 0.7rem 0.7rem;
    border: 1px solid var(--sp-linie, rgba(103,232,249,.34));
    border-radius: 14px;
    background: linear-gradient(180deg, var(--cc-bg-3, #0e1619),
                                        var(--cc-bg-1, #05090c));
    box-shadow: 0 18px 46px -16px rgba(0,0,0,0.8),
                0 0 34px -14px var(--sp-c, #67e8f9);
    animation: sp2Zettel 0.42s cubic-bezier(.2,.9,.25,1) both;
}
.sp2-zettel.is-weg { animation: sp2ZettelWeg 0.55s ease forwards; }
@keyframes sp2Zettel {
    from { opacity: 0; transform: translate(-50%, 18px) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes sp2ZettelWeg {
    to { opacity: 0; transform: translate(-50%, 12px); }
}
.sp2-zettel img {
    width: 2.6rem; height: 2.6rem;
    border-radius: 9px;
    object-fit: cover;
    flex: none;
}
.sp2-zettel__t { display: flex; flex-direction: column; line-height: 1.25; }
.sp2-zettel__k {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sp-matt);
}
.sp2-zettel__t b { color: var(--cc-tx-1); font-size: 0.92rem; }
@media (prefers-reduced-motion: reduce) {
  .sp2-naechstes { animation: none; opacity: 1; }
  .sp2-zettel { animation: none; }
}
.sp2-uhr {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin: 0 auto clamp(1.2rem, 3vw, 2rem);
    padding: 0.5rem 1.1rem;
    max-width: 44rem;
    border: 1px solid var(--sp-linie);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sp-c) 6%, transparent);
    font-size: 0.78rem;
    color: var(--sp-text);
}
.sp2-uhr b { color: #fff; }
.sp2-uhr span { color: var(--sp-matt); }
.sp2-uhr__p {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--sp-c);
    box-shadow: 0 0 10px var(--sp-c);
    flex: none;
}
.sp2-uhr.is-knapp {
    border-color: rgba(245, 181, 99, 0.5);
    background: rgba(245, 181, 99, 0.08);
    color: #ffe0b0;
}
.sp2-uhr.is-knapp b { color: #ffd08a; }
.sp2-uhr.is-knapp span { color: #c9a875; }
.sp2-uhr.is-knapp .sp2-uhr__p {
    background: var(--cc-warn);
    box-shadow: 0 0 10px var(--cc-warn);
    animation: sp2Puls 1.8s ease-in-out infinite;
}
.sp2-aufholen,
.sp2-nadel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.9rem;
    padding: 0.28rem 0.9rem;
    border-radius: 999px;
    font-size: 0.76rem;
    border: 1px solid var(--sp-linie);
    background: color-mix(in srgb, var(--sp-c) 7%, transparent);
    color: var(--sp-text);
}
.sp2-aufholen b, .sp2-nadel b { color: var(--sp-hell); }
.sp2-aufholen span, .sp2-nadel span { color: var(--sp-matt); }
.sp2-nadel__weg {
    border: 0; background: transparent;
    color: var(--sp-matt);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0 0 0 0.15rem;
}
.sp2-nadel__weg:hover { color: var(--sp-hell); }
.sp2-woche { margin-bottom: 1.1rem; }
.sp2-woche__t {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sp-matt);
    margin-bottom: 0.5rem;
}
.sp2-woche.is-jetzt .sp2-woche__t { color: var(--sp-hell); }
.sp2-woche__t span { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.sp2-missionen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 0.6rem;
}
.sp2-mission {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--cc-bd-1);
    border-radius: 12px;
    background: linear-gradient(160deg,
                color-mix(in srgb, var(--sp-c) 4%, var(--cc-bg-2)),
                var(--cc-bg-1));
    transition: border-color .3s, box-shadow .3s;
}
.sp2-mission__t {
    color: var(--cc-tx-1);
    font-weight: var(--cc-fw-semibold);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.sp2-mission__ok { color: var(--sp-hell); }
.sp2-mission__b {
    color: var(--sp-matt);
    font-size: 0.74rem;
    line-height: 1.5;
    min-height: 2.2em;
}
.sp2-mission__bahn {
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    margin: 0.25rem 0 0.1rem;
}
.sp2-mission__bahn i {
    display: block; height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sp-tief), var(--sp-c));
    transition: width .5s ease;
}
.sp2-mission__f {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--sp-matt);
}
.sp2-mission__sp { color: var(--sp-text); }
.sp2-mission__k {
    border: 1px solid var(--sp-c);
    border-radius: 999px;
    background: color-mix(in srgb, var(--sp-c) 16%, transparent);
    color: #fff;
    font-size: 0.72rem;
    padding: 0.2rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.sp2-mission__k:hover { background: color-mix(in srgb, var(--sp-c) 28%, transparent); }
.sp2-mission__k:disabled { opacity: .5; cursor: default; }
.sp2-mission.is-bereit {
    border-color: var(--sp-c);
    box-shadow: 0 0 0 1px var(--sp-dunst), 0 6px 22px -12px var(--sp-c);
}
.sp2-mission.is-geholt { opacity: 0.62; }
.sp2-mission.is-geholt .sp2-mission__bahn i { background: var(--sp-matt); }
.sp2-ueber {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--cc-bd-1);
    border-radius: 12px;
    background: var(--cc-bg-2);
}
.sp2-ueber.is-bereit {
    border-color: rgba(245, 193, 94, 0.5);
    background: rgba(245, 193, 94, 0.06);
}
.sp2-ueber__l { display: flex; align-items: baseline; gap: 0.55rem; }
.sp2-ueber__n {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--sp-hell);
    line-height: 1;
}
.sp2-ueber.is-bereit .sp2-ueber__n { color: #ffd98f; }
.sp2-ueber__t { font-size: 0.76rem; color: var(--sp-matt); }
.sp2-ueber__bahn {
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
}
.sp2-ueber__bahn i {
    display: block; height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sp-tief), var(--sp-c));
}
.sp2-ueber .sp2-knopf { margin-top: 0; padding: 0.35rem 1rem; }
.sp2-kapitel {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    position: relative;
}
.sp2-kapitel::before {
    content: "";
    position: absolute;
    top: 1.4rem; bottom: 1.2rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--sp-linie), transparent);
}
.sp2-kapitel span {
    position: relative;
    width: 1.35rem; height: 1.35rem;
    display: grid; place-items: center;
    border: 1px solid var(--sp-linie);
    border-radius: 50%;
    background: var(--cc-bg-0, #030709);
    color: var(--sp-text);
    font-size: 0.6rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.sp2-spalte__n {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
.sp2-spalte__n:hover { text-decoration: underline dotted; }
@media (prefers-reduced-motion: reduce) {
  .sp2-uhr.is-knapp .sp2-uhr__p { animation: none; }
}
@media (min-width: 1200px) {
  .sp2-hero {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "banner banner"
            "text   ring"
            "zahlen zahlen";
        align-items: center;
        column-gap: clamp(2rem, 4vw, 4rem);
        text-align: left;
    }
  .sp2-banner { grid-area: banner; max-width: none; }
  .sp2-hero__text { grid-area: text; margin: 0; max-width: 34rem; }
  .sp2-ring { grid-area: ring; margin: 0; }
  .sp2-zahlen { grid-area: zahlen; justify-content: flex-start;
                    margin-top: 1.4rem; padding-top: 1.4rem;
                    border-top: 1px solid var(--cc-bd-1); }
  .sp2-sub, .sp2-motto { margin-left: 0; margin-right: 0; }
  .sp2-eyebrow { margin-left: 0; }
  .sp2-uhr { max-width: none; justify-content: flex-start; }
  .sp2-ring { width: 13.5rem; height: 13.5rem; }
  .sp2-spalte { flex-basis: 5rem; }
  .sp2-karte { width: 4.6rem; height: 4.6rem; }
}
@media (min-width: 1650px) {
  .sp2-spalte { flex-basis: 5.4rem; }
  .sp2-karte { width: 5rem; height: 5rem; }
  .sp2-karte__ic { font-size: 1.45rem; }
}
/* Shorty: readable Season-Pass CTA button (solid cyan, dark text) */
.sp2-root .sp2-knopf {
    background: var(--sp-c);
    color: #052a30;
    border: 0;
    font-weight: 700;
    cursor: pointer;
}
.sp2-root .sp2-knopf:hover { background: var(--sp-hell); color: #04181c; }