/* Abfahrt · alfons x — Webapp-Styles (gleiches Design wie die Konzeptseiten) */
:root{
  --night:#0D0706;
  --night-2:#160B09;
  --night-3:#1f0d0b;
  --brick:#7E1A12;
  --brick-deep:#4A0E09;
  --signal:#E5402A;
  --bone:#F3EAE6;
  --ash:#B29C96;
  --ash-dim:#7D6A66;
  --line:rgba(243,234,230,.13);
  --line-strong:rgba(243,234,230,.28);
  --ok:#7BD88F;
  --display:"Poppins","Montserrat","Helvetica Neue",Arial,sans-serif;
  --body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--night)}
body{
  margin:0;min-height:100vh;background:var(--night);color:var(--bone);
  font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%}
a{color:var(--bone)}
p{margin:0}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:lowercase;letter-spacing:-.02em;line-height:.98;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,12vw,56px)}
h2{font-size:clamp(30px,9vw,40px)}
h3{font-size:22px;font-weight:700;line-height:1.1}

.app{max-width:480px;margin:0 auto;padding:20px 16px calc(110px + env(safe-area-inset-bottom,0px));display:grid;gap:22px}
.view{display:grid;gap:20px}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.top img{width:38px;height:38px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px var(--line-strong)}
.top .brand b{font-family:var(--display);font-weight:800;font-size:18px;text-transform:lowercase}
.top .date{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--ash)}
.top .date b{color:var(--signal);font-weight:600}

.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.eyebrow b{color:var(--signal);font-weight:600}
.lede{color:var(--ash);font-size:17px}
.lede strong{color:var(--bone);font-weight:600}
.handle{color:var(--signal);font-weight:600}
.muted{color:var(--ash-dim);font-size:13.5px}
.big-word{font-family:var(--display);font-weight:800;font-size:clamp(50px,16.5vw,92px);line-height:.85;letter-spacing:-.05em}
.big-word span,.red{color:var(--signal)}

/* Hero der Anmeldung */
.hero{position:relative;border-radius:20px;overflow:hidden;padding:26px 20px 24px;display:grid;gap:10px;background:var(--brick-deep)}
.hero::before{content:"";position:absolute;inset:0;background:url("logo.png") center 30%/cover no-repeat;filter:grayscale(1) contrast(1.15) brightness(.5);opacity:.5;mix-blend-mode:luminosity}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,7,6,.05),rgba(126,26,18,.35) 50%,rgba(13,7,6,.95))}
.hero > *{position:relative;z-index:1}
.hero .sub{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.hero .sub span{color:var(--signal)}

.counter{display:flex;align-items:baseline;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--night-2)}
.counter .n{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;color:var(--signal)}
.counter span:last-child{color:var(--ash);font-size:14.5px}

/* Formular */
form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ash)}
.field small{color:var(--ash-dim);font-size:12.5px}
.input{width:100%;background:var(--night-2);color:var(--bone);border:1px solid var(--line-strong);border-radius:12px;padding:13px 14px;font:inherit;font-size:16px}
.input:focus-visible{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
.input-at{display:flex;align-items:center;background:var(--night-2);border:1px solid var(--line-strong);border-radius:12px}
.input-at span{padding-left:14px;color:var(--ash)}
.input-at .input{border:0;background:transparent;padding-left:4px}
.input-at:focus-within{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
.input-at .input:focus-visible{outline:none}
textarea.input{resize:none}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--ash);cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--signal)}
.check a{color:var(--bone)}
.error{color:#ff9c8c;font-size:14px;background:rgba(229,64,42,.12);border:1px solid rgba(229,64,42,.4);border-radius:10px;padding:10px 12px}

/* Buttons */
.btn{display:block;width:100%;border:0;border-radius:999px;padding:15px 18px;text-align:center;font:inherit;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none;background:var(--bone);color:var(--night)}
.btn.red{background:var(--signal);color:#fff}
.btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.btn[disabled]{opacity:.55;cursor:wait}
.btn-row{display:grid;gap:10px}

/* Charakter-Karte */
.char{border-radius:18px;padding:20px 18px;background:linear-gradient(160deg,var(--brick),#2a0906);display:grid;gap:8px;box-shadow:0 30px 60px -30px rgba(229,64,42,.5)}
.char .r{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,234,230,.72)}
.char .n{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;text-transform:lowercase;letter-spacing:-.02em}
.char p{font-size:15px;color:rgba(243,234,230,.92)}
.char p b{color:#fff}
.char.small{padding:14px 16px;gap:4px}
.char.small .n{font-size:24px}
.char.small p{font-size:13.5px}

/* Dashboard */
.progress-head{display:flex;justify-content:space-between;align-items:baseline}
.progress-head .n{font-family:var(--display);font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.progress-head .n span{color:var(--ash-dim)}
.bar{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--signal);border-radius:99px;transition:width .4s}
.tasks{display:grid;gap:10px}
.task{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--night-2)}
button.task{width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.task:hover{border-color:var(--line-strong)}
button.task:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.task .st i{font-style:normal;color:var(--signal);margin-left:6px;font-size:16px}
.task .ic{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;color:var(--ash)}
.task .ic svg{width:22px;height:22px}
.task b{display:block;font-weight:700}
.task small{display:block;color:var(--ash);font-size:13px;margin-top:1px}
.task .st{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash-dim)}
.task.done{border-color:rgba(123,216,143,.35)}
.task.done .ic{border-color:var(--ok);color:var(--ok)}
.task.done .st{color:var(--ok)}
.pot{border-radius:16px;padding:16px;border:1px dashed var(--line-strong);display:grid;gap:6px}
.pot.in{border:1px solid var(--signal);background:rgba(229,64,42,.1)}
.pot b{font-family:var(--display);font-weight:800;font-size:22px;text-transform:lowercase}
.pot p{color:var(--ash);font-size:14.5px}

.vibe-live{border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px}
.vibe-live .avg{display:flex;align-items:baseline;gap:10px}
.vibe-live .avg .n{font-family:var(--display);font-weight:800;font-size:34px;line-height:1}
.vibe-live .avg .n em{font-style:normal;color:var(--signal)}
.vibe-live ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.vibe-live li{font-size:14px;color:var(--ash)}
.vibe-live li b{color:var(--bone);font-weight:600}

/* Zurück-Knopf in Challenges (bleibt beim Scrollen oben) */
.backbtn{position:sticky;top:calc(8px + env(safe-area-inset-top,0px));z-index:30;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 14px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(13,7,6,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--bone);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.backbtn span{font-size:24px;line-height:1;margin-top:-2px;color:var(--signal)}
.backbtn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* Challenge */
.chal-head{display:grid;gap:10px}
.chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px;width:max-content;color:var(--bone)}
.chip.red{background:var(--signal);border-color:var(--signal);color:#fff}
.task-text{font-size:19px;line-height:1.4}
.preview{width:100%;max-width:280px;aspect-ratio:9/16;object-fit:cover;border-radius:14px;justify-self:center;box-shadow:0 0 0 1px var(--line-strong),0 30px 60px -30px rgba(229,64,42,.5)}
.status{font-size:14.5px;color:var(--ash);line-height:1.45}
.status b{color:var(--bone)}
.hint{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(229,64,42,.1);border:1px solid rgba(229,64,42,.4);font-size:14px}
.hint b{color:var(--bone)}
.done-box{border:1px solid rgba(123,216,143,.4);background:rgba(123,216,143,.08);border-radius:14px;padding:14px;display:grid;gap:4px}
.done-box b{color:var(--ok);font-family:var(--display);font-size:20px;text-transform:lowercase}
.stars{display:flex;gap:8px}
.stars button{flex:1;aspect-ratio:1;max-width:64px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;color:var(--ash-dim);font-size:28px;line-height:1;cursor:pointer}
.stars button.on{color:var(--signal);border-color:var(--signal);background:rgba(229,64,42,.1)}
.stars button:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.divider{display:flex;align-items:center;gap:12px;color:var(--ash-dim);font-size:13px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* Gewinner */
.win{border-radius:22px;padding:30px 20px;display:grid;gap:14px;text-align:center;min-height:62vh;align-content:center;
  background:radial-gradient(circle at 20% 15%,rgba(243,234,230,.35) 0 4px,transparent 5px),radial-gradient(circle at 80% 22%,rgba(229,64,42,.9) 0 5px,transparent 6px),
    radial-gradient(circle at 28% 82%,rgba(243,234,230,.3) 0 4px,transparent 5px),radial-gradient(circle at 76% 76%,rgba(229,64,42,.8) 0 4px,transparent 5px),
    radial-gradient(circle at 55% 8%,rgba(243,234,230,.25) 0 3px,transparent 4px),linear-gradient(160deg,var(--signal),var(--brick) 60%,#2a0906)}
.win .n{font-family:var(--display);font-weight:800;font-size:clamp(46px,13.5vw,72px);line-height:.9;letter-spacing:-.04em;text-transform:lowercase}
.win p{color:rgba(243,234,230,.92)}
.live-code{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:18px;font-weight:600;background:rgba(13,7,6,.5);border-radius:999px;padding:10px 18px;justify-self:center;font-variant-numeric:tabular-nums}
.live-code::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.2}}
.drawn{border:1px solid var(--signal);border-radius:16px;padding:18px;background:rgba(229,64,42,.12);display:grid;gap:6px;text-align:center}
.drawn b{font-family:var(--display);font-weight:800;font-size:26px;text-transform:lowercase}

/* Daten löschen */
.reset{display:grid;gap:12px;justify-items:center;padding-top:6px}
.linkbtn{background:none;border:0;color:var(--ash-dim);font:inherit;font-size:13.5px;text-decoration:underline;cursor:pointer;padding:6px}
.linkbtn:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:6px}
.confirm{width:100%;border:1px solid rgba(229,64,42,.5);border-radius:16px;padding:16px;display:grid;gap:10px;background:rgba(229,64,42,.08)}
.confirm b{font-family:var(--display);font-weight:800;font-size:20px;text-transform:lowercase}
.confirm p{color:var(--ash);font-size:14.5px}
.confirm p b{font-family:var(--body);font-size:inherit;text-transform:none;color:var(--bone)}
.btn.danger{background:#b3261e;color:#fff}

/* Tab-Leiste (unten, gut sichtbar) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  background:linear-gradient(180deg,#2b0e0a,#160806);border-top:2px solid var(--signal);
  box-shadow:0 -14px 34px rgba(0,0,0,.65);padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))}
.tabbar a{display:grid;justify-items:center;gap:3px;padding:8px 2px;border-radius:14px;color:#efe1dc;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.01em}
.tabbar svg{width:26px;height:26px}
.tabbar a[aria-current="page"]{color:#fff;background:var(--signal);box-shadow:0 6px 18px -6px rgba(229,64,42,.8)}
.tabbar a[aria-current="page"] svg{color:#fff}
.tabbar a:not([aria-current="page"]):active{background:rgba(229,64,42,.2)}
.tabbar a:focus-visible{outline:2px solid #fff;outline-offset:-2px}

/* Einfache Schritt-Anleitung */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--night-2)}
.steps li::before{content:counter(s);width:38px;height:38px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:18px;grid-row:span 2}
.steps b{font-size:16px}
.steps span{color:var(--ash);font-size:14px;grid-column:2}
.steps.compact li{padding:10px 12px}
.howto{font-size:15px;color:var(--ash);padding:12px 14px;border-radius:12px;background:var(--night-2);border:1px solid var(--line)}
.howto b{color:var(--bone)}
.example-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:#ffd9a8;border:1px dashed rgba(255,190,90,.45);border-radius:10px;padding:7px 10px;text-align:center}

/* Ablauf */
.timeline{list-style:none;margin:0;padding:0;display:grid}
.slot{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);position:relative}
.slot .t{font-family:var(--display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2}
.slot .d{display:grid;gap:3px}
.slot b{font-size:17px}
.slot small{color:var(--ash);font-size:14px}
.slot.hl .t,.slot.hl b{color:var(--signal)}
.slot.past{opacity:.45}
.slot.now{background:rgba(229,64,42,.1);border-radius:12px;padding-inline:10px;margin-inline:-10px;border-bottom-color:transparent}
.slot .chip{margin-top:4px}

/* Lageplan */
.map-wrap{border:1px solid var(--line-strong);border-radius:16px;padding:10px;background:var(--night-2)}
.map-img{width:100%;border-radius:10px;display:block}
.floorplan{width:100%;height:auto;display:block}
.floorplan .wall{fill:none;stroke:var(--bone);stroke-width:3}
.floorplan .zone{fill:rgba(243,234,230,.06);stroke:rgba(243,234,230,.35);stroke-width:1.5}
.floorplan .zone.strong{fill:rgba(229,64,42,.25);stroke:var(--signal)}
.floorplan .zone.dance{fill:rgba(229,64,42,.12);stroke:rgba(229,64,42,.6);stroke-dasharray:6 5}
.floorplan .outside{fill:url(#hatch);stroke:rgba(243,234,230,.3);stroke-dasharray:4 4}
.floorplan .hatch{stroke:rgba(243,234,230,.2);stroke-width:2}
.floorplan .door{fill:var(--night-2)}
.floorplan .lbl{fill:var(--bone);font-family:var(--display);font-weight:700;font-size:16px;text-anchor:middle}
.floorplan .lbl.small{font-size:12px;fill:var(--ash)}
.floorplan .exit{fill:var(--ok);font-family:var(--mono);font-size:10px;font-weight:600}
.floorplan .pin circle{fill:var(--signal);stroke:#fff;stroke-width:2}
.floorplan .pin text{fill:#fff;font-family:var(--display);font-weight:800;font-size:13px;text-anchor:middle}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legend li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:center}
.legend .num{width:28px;height:28px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:13px}
.legend b{display:block}
.legend small{color:var(--ash);font-size:13.5px}

.guard-note{display:flex;align-items:center;gap:10px}
.guard-note svg{width:16px;height:28px;flex:none}

/* Regeln */
.rules{border-radius:18px;padding:18px;display:grid;gap:12px}
.rules h2{font-size:28px}
.rules ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rules li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:16px}
.rules .sym{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px}
.rules.no{background:rgba(229,64,42,.1);border:1px solid rgba(229,64,42,.45)}
.rules.no h2{color:var(--signal)}
.rules.no .sym{background:var(--signal);color:#fff}
.rules.yes{background:var(--night-2);border:1px solid var(--line)}
.rules.yes .sym{background:var(--ok);color:var(--night)}
.help{border-radius:18px;padding:18px;background:var(--bone);color:var(--night);display:grid;gap:6px}
.help .eyebrow{color:#7a1a12}
.help b{font-family:var(--display);font-weight:800;font-size:26px;text-transform:lowercase;line-height:1}
.help p{color:#3a2622;font-size:15.5px}
.zero{border-radius:18px;padding:22px 18px;background:var(--signal);color:#fff;display:grid;gap:8px;text-align:center}
.zero .z{font-family:var(--display);font-weight:800;font-size:64px;line-height:.85;letter-spacing:-.03em;text-transform:lowercase}
.zero .zt{font-family:var(--mono);font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:13px}
.zero p{font-size:15.5px}
.zero .en{font-size:12.5px;opacity:.85}
.sign{text-align:center;font-family:var(--display);font-weight:800;font-size:22px;color:var(--signal);text-transform:lowercase}

.rules-card{display:grid;grid-template-columns:40px 1fr 16px;gap:12px;align-items:center;padding:14px 14px;border-radius:16px;
  border:2px solid var(--signal);background:rgba(229,64,42,.12);color:var(--bone);text-decoration:none;font-size:16px;line-height:1.35}
.rules-card .ri{width:40px;height:40px;border-radius:50%;background:var(--signal);color:#fff;display:grid;place-items:center}
.rules-card .ri svg{width:22px;height:22px}
.rules-card u{color:var(--signal);font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px}
.rules-card .ra{color:var(--signal);font-size:26px;line-height:1}
.rules-card:focus-visible{outline:2px solid #fff;outline-offset:2px}

.route-card{display:grid;grid-template-columns:32px 1fr 12px;gap:10px;align-items:center;padding:9px 12px;border-radius:14px;
  background:var(--night-2);border:1px solid var(--line-strong);color:var(--bone);text-decoration:none}
.route-card:hover{border-color:rgba(229,64,42,.55)}
.route-card .ri{width:32px;height:32px;border-radius:50%;background:rgba(229,64,42,.14);color:var(--signal);display:grid;place-items:center}
.route-card .ri svg{width:18px;height:18px}
.route-card b{display:block;font-weight:700;font-size:15px;line-height:1.2}
.route-card small{display:block;color:var(--ash);font-size:12.5px;margin-top:1px}
.route-card .ra{color:var(--ash);font-size:20px;line-height:1}
.route-card:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* Abschnitte mit roter Trennlinie */
.sec{display:flex;align-items:center;gap:12px;margin-top:10px}
.sec span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);white-space:nowrap}
.sec::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--signal);flex:none}
.sec::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--signal),rgba(229,64,42,.15))}
.sec{flex-direction:row}
/* Anmeldekarte */
.reg-card{border:2px solid var(--signal);border-radius:20px;padding:18px 16px;background:linear-gradient(180deg,rgba(229,64,42,.10),var(--night-2) 40%);box-shadow:0 24px 50px -30px rgba(229,64,42,.7)}
.reg-title{font-size:34px;margin-top:4px}
.reg-card .counter{background:transparent;border-color:var(--line);justify-content:center}
.fineprint{margin-top:18px;font-size:12px;line-height:1.5;color:var(--ash-dim);opacity:.75;text-align:center}
.fineprint a{color:var(--ash)}
.fineprint-zone{margin-top:22px;opacity:.75}

/* Gewinne: Laufband + Übersicht */
.ticker{margin-inline:-16px;background:var(--signal);color:#fff;overflow:hidden;border-radius:0}
.ticker-track{display:flex;width:max-content;animation:ticker 22s linear infinite}
.ticker-set{display:flex;align-items:center;gap:18px;padding:11px 18px 11px 0;white-space:nowrap;font-size:15px}
.ticker-set b{font-family:var(--display);font-weight:800}
.ticker-set i{font-style:normal;opacity:.6}
@keyframes ticker{to{transform:translateX(-50%)}}
.prizes{display:grid;gap:10px}
.prizes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prizes li{border:1px solid var(--line-strong);border-radius:16px;padding:14px 8px 12px;display:grid;justify-items:center;gap:2px;text-align:center;background:linear-gradient(180deg,rgba(229,64,42,.14),transparent)}
.prizes .pi{font-size:28px;line-height:1.1}
.prizes .pc{font-family:var(--display);font-weight:800;font-size:28px;line-height:1;color:var(--signal)}
.prizes b{font-size:13.5px;line-height:1.2}
.prizes small{color:var(--ash);font-size:12px;line-height:1.2}

/* Live-Vibes-Fenster (klein, wischbar) */
.vibes{border:1px solid var(--line);border-radius:16px;padding:12px 0 12px 14px;background:var(--night-2);display:grid;gap:8px}
.vibes-head{display:flex;justify-content:space-between;align-items:baseline;padding-right:14px}
.vibes-avg{font-family:var(--display);font-weight:800;font-size:15px}
.vibes-avg em{font-style:normal;color:var(--signal)}
.vibes-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-right:14px}
.vibes-strip::-webkit-scrollbar{display:none}
.vb{flex:0 0 72%;scroll-snap-align:start;border-radius:12px;padding:9px 12px;background:linear-gradient(160deg,rgba(229,64,42,.16),rgba(229,64,42,.04));border:1px solid rgba(229,64,42,.3);display:grid;gap:2px;min-height:76px}
.vb .vs{color:var(--signal);font-size:13px;letter-spacing:1px}
.vb .vs i{font-style:normal;color:var(--ash-dim)}
.vb p{font-size:14.5px;line-height:1.3;color:var(--bone);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vb small{font-size:12px;color:var(--ash)}

/* Fuß */
.foot{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;font-size:12.5px;color:var(--ash-dim);padding-top:8px}
.foot a{color:var(--ash)}
.demo-banner{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-align:center;color:#ffd9a8;background:rgba(255,190,90,.1);border:1px dashed rgba(255,190,90,.45);border-radius:10px;padding:8px 10px}

/* Admin */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:2px}
.tile .n{font-family:var(--display);font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
.tile small{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.tile.hl{border-color:var(--signal)}
.tile.hl .n{color:var(--signal)}
.winner-card{border-radius:18px;padding:20px 18px;background:linear-gradient(160deg,var(--brick),#2a0906);display:grid;gap:8px}
.winner-card .n{font-family:var(--display);font-weight:800;font-size:36px;line-height:1;text-transform:lowercase}
.winner-card a{color:#fff;font-weight:600}

.spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line-strong);border-top-color:var(--signal);animation:rot .8s linear infinite;justify-self:center}
@keyframes rot{to{transform:rotate(360deg)}}

@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none;width:auto}
  .ticker-set{flex-wrap:wrap;white-space:normal;padding-left:16px}
  .ticker-set + .ticker-set{display:none}
  .live-code::before,.spin{animation:none}
  .bar i{transition:none}
}

/* ---------- Live-Auslosung ---------- */
.draw-card{border-radius:18px;padding:18px 16px;text-align:center;display:grid;gap:6px;justify-items:center;
  background:radial-gradient(120% 90% at 50% 0%,rgba(229,64,42,.28),transparent 70%),var(--night-2);border:1px solid rgba(229,64,42,.55)}
.draw-card .eyebrow{color:var(--signal)}
.draw-cd{font-family:var(--display);font-weight:800;font-size:clamp(30px,9.5vw,42px);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.draw-card p{color:var(--ash);font-size:14.5px;max-width:30ch}
.draw-card p b{color:var(--bone)}
.draw-card.done b{font-family:var(--display);font-weight:800;font-size:26px;text-transform:lowercase}
.draw-card.done .btn{margin-top:6px}
.win-prize{display:grid;justify-items:center;gap:2px;background:rgba(13,7,6,.35);border-radius:16px;padding:12px 14px}
.win-prize span{font-size:34px;line-height:1}
.win-prize b{font-family:var(--display);font-weight:800;font-size:22px}
.win-prize small{color:rgba(243,234,230,.8)}
.win-go{font-size:17px}
.win-go b{color:#fff}

body.show-open{overflow:hidden}
.show{position:fixed;inset:0;z-index:100;overflow:auto;display:flex;flex-direction:column;gap:18px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);
  background:radial-gradient(130% 70% at 50% 0%,rgba(229,64,42,.35),transparent 65%),var(--night);color:var(--bone)}
.show.final{background:radial-gradient(140% 80% at 50% 10%,rgba(229,64,42,.55),transparent 70%),var(--brick-deep)}
.show-top{display:flex;justify-content:space-between;align-items:center}
.show-top .eyebrow{color:var(--signal)}
.show.final .show-top .eyebrow{color:#fff}
.show-x{background:rgba(243,234,230,.1);border:0;color:var(--bone);width:40px;height:40px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
.show-intro{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;animation:pop .5s ease-out}
.show[data-phase="intro"] .show-intro{display:flex}
.show[data-phase="intro"] .show-main{display:none}
.show-round{font-family:var(--display);font-weight:800;font-size:clamp(52px,17vw,88px);line-height:.9;letter-spacing:-.04em;text-transform:lowercase}
.show.final .show-round{font-size:clamp(60px,19vw,104px);color:#fff;text-shadow:0 0 40px rgba(229,64,42,.9)}
.show-icon{font-size:56px;line-height:1.1}
.show-intro b{font-family:var(--display);font-size:24px}
.show-intro small{color:var(--ash)}
.show-main{flex:1;display:flex;flex-direction:column;gap:14px;justify-content:center}
.show-prize{text-align:center;font-family:var(--display);font-weight:700;font-size:18px}
.show-cd{font-family:var(--display);font-weight:800;font-size:clamp(96px,32vw,150px);line-height:.85;text-align:center;color:var(--signal);font-variant-numeric:tabular-nums;min-height:.9em}
.show.final .show-cd{color:#fff;text-shadow:0 0 50px rgba(229,64,42,.95)}
.show-cd.tick{animation:pop .45s ease-out}
.show-slots{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.show-slot{border-radius:14px;padding:11px 14px;text-align:center;background:rgba(243,234,230,.07);border:1px solid var(--line)}
.show-slot b{font-family:var(--display);font-weight:800;font-size:20px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.45;filter:blur(.6px)}
.show.final .show-slot b{font-size:24px}
.show-slot.locked{background:var(--signal);border-color:var(--signal);animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
.show-slot.locked b{opacity:1;filter:none;color:#fff}
.show-slot.me{background:#fff;border-color:#fff;box-shadow:0 0 0 4px var(--signal),0 0 40px rgba(229,64,42,.9)}
.show-slot.me b{color:var(--signal)}
.show-slot.me b::after{content:" – du!"}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.sum{display:grid;gap:16px}
.sum-you{border-radius:16px;padding:16px;background:var(--signal);display:grid;gap:4px;text-align:center}
.sum-you b{font-family:var(--display);font-weight:800;font-size:26px;text-transform:lowercase}
.sum-group{display:grid;gap:8px}
.sum-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sum-group li{border:1px solid var(--line-strong);border-radius:999px;padding:6px 12px;font-weight:600}
.sum-group li.me{background:var(--signal);border-color:var(--signal);color:#fff}
.sum-group li i{font-style:normal;font-family:var(--mono);font-size:11px;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.show-intro,.show-cd.tick,.show-slot.locked{animation:none}}