/* Reel Battle – „Petrol Noir“ (design-final.md, 02.11.2026). Kein Framework, keine Inline-Styles (CSP style-src 'self'). */
@font-face{font-family:"RB Display";src:url(/assets/fonts/instrument-serif-latin-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"RB Display Fallback";src:local("Georgia");size-adjust:88%;ascent-override:96%;descent-override:24%}

:root{
  color-scheme:dark;
  --c-stage:#001a1c; --c-stage-2:#002629; --c-petrol:#004348; --c-black:#000;
  --c-ink:#fdf9f5; --c-ink-2:rgba(253,249,245,.72); --c-ink-3:rgba(253,249,245,.54);
  --c-line:rgba(147,204,179,.16); --c-line-2:rgba(147,204,179,.50);
  --c-mint:#93ccb3; --c-coral:#ea6268; --c-coral-press:#d9535a; --c-on-coral:#001a1c;
  --c-copper:#d29d65; --c-on-copper:#001a1c; --c-error:#ff9da1;
  --backdrop:rgba(0,10,11,.78);
  --scrim:linear-gradient(to top,rgba(0,18,20,.92) 0%,rgba(0,18,20,.55) 38%,rgba(0,18,20,0) 62%);
  --scrim-top:linear-gradient(to bottom,rgba(0,18,20,.60) 0%,rgba(0,18,20,0) 28%);
  --header-bg:rgba(0,26,28,.88); --glass:rgba(0,38,41,.72);
  --f-display:"RB Display","RB Display Fallback","Bodoni 72",Didot,Georgia,serif;
  --f-ui:system-ui,-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --t-masthead:clamp(84px,27vw,232px); --t-display:clamp(40px,10.5vw,76px); --t-h2:clamp(34px,8.5vw,52px);
  --t-sheet:30px; --t-count:clamp(44px,13vw,80px);
  --t-lead:18px; --lh-lead:1.45; --t-body:16px; --lh-body:1.5; --t-small:14px; --lh-small:1.45;
  --t-meta:12px; --lh-meta:1.3; --t-label:11px;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:72px;
  --gutter:20px; --grid-gap:2px; --maxw:1240px; --header-h:52px; --tap:44px;
  --r-input:6px; --r-pill:999px; --r-sheet:16px;
  --sh-sheet:0 -16px 48px rgba(0,0,0,.55); --sh-toast:0 10px 30px rgba(0,0,0,.50);
  --e-out:cubic-bezier(.2,.8,.2,1); --e-in:cubic-bezier(.4,0,1,1);
  --d-press:120ms; --d-state:200ms; --d-pip:260ms; --d-sheet:320ms; --d-player:380ms;
}
@media (min-width:720px){:root{--gutter:32px;--grid-gap:4px}}
@media (prefers-contrast:more){:root{--c-ink-2:#fdf9f5;--c-ink-3:rgba(253,249,245,.8);--c-line:rgba(147,204,179,.4);--c-line-2:rgba(147,204,179,.8)}}
@media (prefers-reduced-motion:reduce){:root{--d-press:0ms;--d-state:120ms;--d-pip:0ms;--d-sheet:120ms;--d-player:120ms}*{scroll-behavior:auto!important}}
@media (prefers-reduced-transparency:reduce){:root{--glass:#002629;--header-bg:#001a1c}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root{--glass:#002629;--header-bg:#001a1c}}

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 8px)}
html,body{background:var(--c-stage);color:var(--c-ink)}
body{margin:0;font:400 var(--t-body)/var(--lh-body) var(--f-ui);overflow-x:clip;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased}
html.locked,html.locked body{overflow:hidden}
html.locked{scrollbar-gutter:stable}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--c-mint)}
:focus-visible{outline:2px solid var(--c-mint);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.label{font-size:var(--t-label);line-height:1.2;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--c-ink-3)}
.meta{font-size:var(--t-meta);line-height:var(--lh-meta);font-weight:500;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.small{font-size:var(--t-small);line-height:var(--lh-small)}
.ink2{color:var(--c-ink-2)} .ink3{color:var(--c-ink-3)} .mint{color:var(--c-mint)} .copper{color:var(--c-copper)} .strong{color:var(--c-ink);font-weight:600}
.display{font-family:var(--f-display);font-size:var(--t-display);line-height:1;letter-spacing:-.01em}
.rule{border:0;border-top:1px solid var(--c-line);margin:0}
.skip{position:absolute;left:8px;top:-60px;z-index:100;height:44px;display:inline-flex;align-items:center;padding:0 16px;background:var(--c-stage-2);color:var(--c-ink);border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:8px}
svg{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.fill{fill:currentColor;stroke:none}

/* ---------- Knöpfe ---------- */
.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:transparent;color:var(--c-mint);font-size:var(--t-small);font-weight:600;transition:background var(--d-state),border-color var(--d-state)}
.btn-outline:hover{background:rgba(147,204,179,.08);border-color:var(--c-mint)}
.textbtn{background:none;border:0;padding:10px 0;min-height:44px;color:var(--c-mint);font-size:var(--t-small);font-weight:600;text-align:left}
.textbtn.inline{min-height:0;padding:0;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.textlink{color:var(--c-mint);text-decoration:underline;text-underline-offset:3px}
/* Bleiben auf der Seite: keine Langdruck-Vorschau („In neuem Tab öffnen“) auf Links, Videos und Vorschaubildern */
a[href],video,.tile img,.pl-media img,.winner-thumb img{-webkit-touch-callout:none;-webkit-user-drag:none}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 20px;border:0;border-radius:var(--r-pill);background:var(--c-coral);color:var(--c-on-coral);font-size:16px;font-weight:600;transition:background var(--d-press),transform var(--d-press);-webkit-tap-highlight-color:transparent}
.cta:focus-visible{outline-color:var(--c-ink)}
.cta:active{background:var(--c-coral-press);transform:scale(.98)}
.cta.cta-ink{background:var(--c-ink);color:var(--c-stage)}
.cta.cta-ink:active{background:#e9e3dc}
.cta.is-voted{background:transparent;border:1.5px solid var(--c-coral);color:var(--c-coral);cursor:default;transform:none}
.cta.is-off{background:transparent;border:1px solid var(--c-line-2);color:var(--c-ink-3);cursor:default;transform:none}
.cta.is-busy{cursor:progress}
.cta[disabled]{opacity:.7;cursor:progress}
.ghost{width:100%;min-height:48px;border:1px solid var(--c-line);border-radius:var(--r-pill);background:transparent;color:var(--c-ink-2);font-weight:600}
.ghost:hover{border-color:var(--c-line-2);color:var(--c-ink)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-style:dotted}}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:8px;height:calc(var(--header-h) + env(safe-area-inset-top));padding:env(safe-area-inset-top) calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));background:var(--header-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--c-line)}
.wordmark{background:none;border:0;padding:12px 0;min-height:44px;font-size:var(--t-label);font-weight:600;letter-spacing:.2em;color:var(--c-ink-2)}
.top-r{display:flex;align-items:center;gap:6px;min-width:0}
.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px 0 4px;border:1px solid var(--c-line-2);border-radius:var(--r-pill);background:transparent;color:var(--c-ink);font-size:var(--t-meta);font-weight:600;white-space:nowrap;min-width:0;position:relative}
.pill::after{content:"";position:absolute;inset:-5px 0}
.pill:hover{background:var(--c-petrol)}
.pill-avs{display:inline-flex;padding-left:0}
.pill-avs:empty{display:none}
.pill-avs .av{width:24px;height:24px;margin-right:-8px;box-shadow:0 0 0 1.5px var(--c-stage);font-size:9px}
.pill-avs .av:last-child{margin-right:2px}
.pill-avs:empty + .pill-dot{margin-left:8px}
.pill-dot{width:6px;height:6px;border-radius:50%;background:var(--c-mint);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.pill-dot{animation:none}}
.pill[data-state="freeze"] .pill-l{color:var(--c-mint)}
.pill[data-state="result"] .pill-l,.pill[data-state="ended"] .pill-l{color:var(--c-copper)}
.pill[data-state="result"] .pill-dot,.pill[data-state="ended"] .pill-dot{background:var(--c-copper);animation:none}
.pill-text{display:none;font-weight:500;color:var(--c-ink-2);overflow:hidden;text-overflow:ellipsis;max-width:420px}
.pill-text b{font-weight:500;color:var(--c-ink-3);margin:0 4px 0 0}
.pill-text b.r1{color:var(--c-copper)}
@media (min-width:1024px){.pill-text{display:inline}}
.pips{display:inline-flex;align-items:center;gap:8px;min-width:44px;min-height:44px;padding:0 4px;background:none;border:0;justify-content:center}
.pip-row{display:inline-flex;gap:6px}
.pip{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-line-2);transition:background var(--d-pip) var(--e-out),transform var(--d-pip) var(--e-out)}
.pip.used{background:var(--c-coral);box-shadow:none}
.pip.pop{animation:pip var(--d-pip) var(--e-out)}
@keyframes pip{from{transform:scale(.6);opacity:.3}to{transform:scale(1);opacity:1}}
.pips-l{display:none;font-size:var(--t-meta);font-weight:500;color:var(--c-ink-2);white-space:nowrap}
@media (min-width:720px){.pips-l{display:inline}}

/* ---------- Hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:var(--s-5) var(--gutter) var(--s-6)}
.labelrow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:var(--t-label);font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--c-ink-3)}
.masthead{font-family:var(--f-display);font-size:var(--t-masthead);line-height:.84;letter-spacing:-.025em;margin:10px 0 14px;font-weight:400}
.masthead span{display:block}
.masthead span+span{padding-left:.42em}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--c-ink-2);max-width:28ch;margin:16px 0 24px;text-wrap:pretty}
.cd .label{margin-bottom:8px}
.cd.is-last .cd-label-c,.cd.is-last #cd-label{color:var(--c-coral)}
.cd-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:420px}
.cd-grid>div{display:flex;flex-direction:column;gap:4px;padding:0 12px;border-left:1px solid var(--c-line)}
.cd-grid>div:first-child{padding-left:0;border-left:0}
.cd-n{font-family:var(--f-display);font-size:var(--t-count);line-height:1;font-variant-numeric:tabular-nums}
.cd-end{font-size:var(--t-lead);color:var(--c-ink-2);max-width:30ch}
.rules{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.rules li{padding:12px 10px;font-size:var(--t-small);line-height:1.35;color:var(--c-ink-2);border-left:1px solid var(--c-line)}
.rules li:first-child{border-left:0;padding-left:0}
@media (max-width:359px){.rules{grid-template-columns:1fr}.rules li{border-left:0;padding-left:0;border-top:1px solid var(--c-line)}.rules li:first-child{border-top:0}}
.hero-join{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
/* Handy (QR-Scan): Kopf bleibt unter ~72svh, damit die erste Reel-Reihe über dem Falz anschaut (design §2) */
@media (max-width:719px){
  .hero{padding:var(--s-3) var(--gutter) var(--s-4)}
  .masthead{font-size:clamp(68px,21vw,232px);margin:6px 0 10px}
  .lead{margin:12px 0 14px}
  :root{--t-count:clamp(40px,11vw,80px)}
  .rules{margin-top:14px}
  .rules li{padding:8px 8px}
  .hero-join{margin-top:14px}
  .sec-head{padding:var(--s-4) var(--gutter) var(--s-3)}
}
@media (min-width:1024px){
  .hero{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;padding-top:var(--s-6)}
  .masthead{font-size:clamp(120px,15vw,232px)}
  .hero-b .lead{margin-top:0}
  .rules{grid-template-columns:1fr}
  .rules li{border-left:0;padding-left:0;border-top:1px solid var(--c-line)}
  .rules li:first-child{border-top:0}
}

/* ---------- Gewinner ---------- */
.winner{max-width:var(--maxw);margin:0 auto;padding:var(--s-6) var(--gutter) var(--s-5);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.winner-thumb{width:min(100%,320px);aspect-ratio:9/16;border:0;padding:0;background:var(--c-stage-2);border-bottom:4px solid var(--c-copper);position:relative;overflow:hidden}
.winner-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){
  .winner{display:grid;grid-template-columns:5fr 7fr;grid-template-areas:"thumb label" "thumb name" "thumb line" "thumb lot";grid-template-rows:1fr auto auto 1fr;column-gap:48px;row-gap:16px;align-items:start}
  .winner>.label{grid-area:label;align-self:end}
  .winner>#winner-h{grid-area:name}
  .winner>.winner-thumb{grid-area:thumb;justify-self:end;width:min(100%,360px)}
  .winner>#winner-line{grid-area:line;margin:0}
  .winner>#winner-lot{grid-area:lot;justify-self:start}
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t-small);word-break:break-all}
.tie-list{margin:0 0 12px;padding-left:2.2em;list-style:decimal}
#tie-body .body{margin-bottom:10px}

/* ---------- Reel-Raster ---------- */
.reels{padding-top:var(--s-2)}
.reels:focus{outline:0}
.sec-head{max-width:var(--maxw);margin:0 auto;padding:var(--s-5) var(--gutter) var(--s-4)}
.sec-head h2,.how h2,.prize h2,.submit-block h2{font-family:var(--f-display);font-size:var(--t-h2);line-height:1.05;letter-spacing:-.01em}
.sec-head .meta{margin-top:6px}
.freeze-line{max-width:var(--maxw);margin:0 auto 12px;padding:12px var(--gutter);color:var(--c-mint);font-size:var(--t-small);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);max-width:var(--maxw);margin:0 auto}
@media (min-width:720px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 var(--gutter)}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1440px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.grid-msg{max-width:var(--maxw);margin:0 auto;padding:24px var(--gutter);text-align:center;color:var(--c-ink-2);font-size:var(--t-small);display:flex;flex-direction:column;align-items:center;gap:12px}

.tile{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--c-stage)}
.frame{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--c-stage-2)}
.frame .thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-press) var(--e-out),filter var(--d-press)}
.frame:active .thumb{transform:scale(.985);filter:brightness(.9)}
@media (hover:hover){.frame:hover .thumb{filter:brightness(.9)}}
.fallback{position:absolute;inset:0;display:grid;place-items:center;background:var(--c-petrol);font-family:var(--f-display);font-size:48px;line-height:1;color:var(--c-ink-3);letter-spacing:.02em}
.t-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;padding:10px;background:var(--scrim-top);pointer-events:none;min-height:70px}
.nr{font-size:var(--t-label);font-weight:600;letter-spacing:.14em;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.badge{width:28px;height:28px;border-radius:50%;background:var(--c-coral);color:var(--c-on-coral);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity var(--d-state) var(--e-out),transform var(--d-state) var(--e-out)}
.badge svg{stroke-width:2.2}
.tile.is-voted .badge{opacity:1;transform:none}
.t-bot{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:4px;padding:48px 10px 10px;background:var(--scrim);pointer-events:none}
.byline{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--t-meta);font-weight:500;color:var(--c-ink-2)}
.byline .handle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.t-name{font-family:var(--f-ui);font-size:14px;line-height:1.25;font-weight:600;color:var(--c-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.igstats{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:var(--t-meta);font-weight:500;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.igstats span{display:inline-flex;align-items:center;gap:4px}
.igstats .cm{display:none}
@media (min-width:720px){.igstats .cm{display:inline-flex}}
.tile-play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;z-index:2;-webkit-tap-highlight-color:transparent}
.tile-play:focus-visible{outline-offset:-3px}
.av{display:inline-grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;background:var(--c-petrol);color:var(--c-ink);font-weight:700;box-shadow:0 0 0 1px rgba(253,249,245,.24);font-family:var(--f-ui);text-transform:uppercase}
.av img{width:100%;height:100%;object-fit:cover}
.av-22{width:22px;height:22px;font-size:10px}
.av-32{width:32px;height:32px;font-size:12px}
.vbar{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;border-top:1px solid var(--c-line);background:var(--c-stage)}
.vote{flex:1;min-width:0;height:48px;display:flex;align-items:center;gap:8px;padding:0;background:none;border:0;text-align:left;font-size:15px;font-weight:600;color:var(--c-coral);white-space:nowrap;overflow:hidden}
.vote .ico{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--c-coral);flex:none}
.vote.is-voted .ico{background:var(--c-coral);box-shadow:none}
.vote.is-off{color:var(--c-ink-3)}
.vote.is-off .ico{display:none}
.vote.is-busy .ico{display:none}
.vote .spin{width:12px;height:12px}
.vote .lbl{overflow:hidden;text-overflow:ellipsis}
/* schmale Kacheln: Beschriftung darf zweizeilig werden statt abgeschnitten (z. B. „Keine Stimme mehr übrig“ bei 390 px) */
@media (max-width:719px){.vote{white-space:normal;line-height:1.2}.vote .lbl{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}}
.count{font-size:var(--t-meta);font-weight:600;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
body:not(.can-vote) .vbar .vote:not(.is-off){display:none}
body:not(.can-vote) .vbar{justify-content:flex-end}
body[data-phase="before"] .vbar{display:none}
.vbar:has(.vote[hidden]):has(.count:empty){display:none}
@media (max-width:389px){.vote{font-size:14px}.vbar{padding:0 10px}}

.tile.skeleton .frame{animation:skel 1.2s ease-in-out infinite alternate}
.tile.skeleton .vbar{height:48px}
@keyframes skel{from{opacity:.6}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tile.skeleton .frame{animation:none}}
.tile.empty .frame{background:transparent;outline:1px dashed var(--c-line-2);outline-offset:-1px;display:grid;place-items:center}
.tile.empty .frame span{font-family:var(--f-display);font-size:28px;color:var(--c-ink-3)}
.tile.empty .vbar{visibility:hidden}
/* Leer-Zustand: so viele Platzhalter wie Spalten (2 / 3 / 4 / 5) */
.grid>li.ph-3,.grid>li.ph-4,.grid>li.ph-5{display:none}
@media (min-width:720px){.grid>li.ph-3{display:block}}
@media (min-width:1024px){.grid>li.ph-4{display:block}}
@media (min-width:1440px){.grid>li.ph-5{display:block}}

/* ---------- Preis ---------- */
.prize{max-width:var(--maxw);margin:0 auto;padding:var(--s-8) var(--gutter)}
.prize-media{margin:0 0 24px}
.prize-media img{width:100%;height:auto;aspect-ratio:600/548;object-fit:cover;background:var(--c-stage-2)}
.prize-media figcaption{margin-top:8px}
.prize-text .label{margin-bottom:10px}
.prize-text h2{margin-bottom:16px}
.prize-list li{padding:14px 0;border-top:1px solid var(--c-line);font-size:var(--t-body)}
.prize-list li:last-child{border-bottom:1px solid var(--c-line)}
.prize-text .small{margin:16px 0 8px}
@media (min-width:1024px){.prize{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}.prize-media{margin:0}}

/* ---------- So geht's ---------- */
.how{max-width:var(--maxw);margin:0 auto;padding:var(--s-8) var(--gutter);border-top:1px solid var(--c-line)}
.how h2{margin-bottom:16px}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:4px;padding:20px 0;border-top:1px solid var(--c-line)}
.steps li:last-child{border-bottom:1px solid var(--c-line)}
.step-n{font-family:var(--f-display);font-size:40px;line-height:1;color:var(--c-ink-3)}
.steps b{display:block;font-weight:600;margin-bottom:4px}
.steps span:not(.step-n){display:block;font-size:var(--t-small);color:var(--c-ink-2)}
@media (min-width:1024px){.steps{display:grid;grid-template-columns:repeat(3,1fr)}.steps li{border-top:0;border-bottom:0!important;border-left:1px solid var(--c-line);padding:20px 24px;grid-template-columns:1fr}.steps li:first-child{border-left:0;padding-left:0}}

.submit-block{max-width:var(--maxw);margin:0 auto;padding:var(--s-7) var(--gutter) var(--s-8);border-top:1px solid var(--c-line);display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--c-line);padding:48px calc(var(--gutter) + env(safe-area-inset-right)) calc(48px + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:8px}
.foot-nav{font-size:var(--t-small);color:var(--c-ink-2);margin-bottom:8px}
.foot-nav a{color:var(--c-ink-2);text-decoration:none;display:inline-block;padding:10px 0}
.foot-nav a:hover{color:var(--c-ink);text-decoration:underline}

/* ---------- Dialoge: gemeinsame Basis ---------- */
dialog{color:var(--c-ink)}
dialog::backdrop{background:var(--backdrop)}

/* Sheet */
.sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:92vh;max-height:92dvh;padding:8px 20px calc(24px + env(safe-area-inset-bottom));border:0;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--c-stage-2);box-shadow:var(--sh-sheet);overflow:auto;overscroll-behavior:contain}
.sheet[open]{animation:sheet-in var(--d-sheet) var(--e-out)}
@keyframes sheet-in{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.grabber{width:36px;height:4px;border-radius:2px;background:var(--c-line-2);margin:0 auto 16px}
.sheet-h{font-family:var(--f-display);font-size:var(--t-sheet);line-height:1.1;margin-bottom:12px}
.sheet .body{color:var(--c-ink-2);margin-bottom:12px}
.sheet-btns{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.sheet .err{font-size:var(--t-small);color:var(--c-error);min-height:0}
.sheet .err:empty{display:none}
.sheet .err:not(:empty){margin:6px 0 4px}
.form-err:not(:empty){padding:10px 12px;border:1px solid rgba(234,98,104,.5);border-radius:var(--r-input);margin-top:12px!important}
.field{display:block;font-size:var(--t-small);font-weight:600;margin:14px 0 6px;color:var(--c-ink)}
.sheet input[type=text],.sheet input[type=url],.sheet input[type=email],.sheet input[type=tel],.sheet input:not([type]),.sheet textarea{width:100%;height:48px;font-size:16px;background:var(--c-stage);border:1px solid var(--c-line-2);border-radius:var(--r-input);padding:0 12px;color:var(--c-ink)}
.sheet textarea{height:auto;padding:10px 12px;resize:vertical}
.sheet input:focus,.sheet textarea:focus{outline:0;border:2px solid var(--c-mint);padding-left:11px}
.sheet textarea:focus{padding:9px 11px}
.sheet input[aria-invalid="true"]{border-color:var(--c-coral)}
.at-input{position:relative}
.at-input>span{position:absolute;left:12px;top:0;height:48px;display:flex;align-items:center;color:var(--c-ink-3);pointer-events:none}
.sheet .at-input input{padding-left:28px}
.sheet .at-input input:focus{padding-left:27px}
.check{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:12px 0;font-size:var(--t-small);line-height:1.4;color:var(--c-ink-2);cursor:pointer;position:relative}
.check input{position:absolute;opacity:0;width:20px;height:20px;margin:0;left:0;top:12px}
.check .box{flex:none;width:20px;height:20px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--c-line-2);display:grid;place-items:center;margin-top:-1px}
.check input:checked + .box{background:var(--c-coral);box-shadow:none}
.check input:checked + .box::after{content:"";width:10px;height:6px;border-left:2px solid var(--c-on-coral);border-bottom:2px solid var(--c-on-coral);transform:translateY(-1px) rotate(-45deg)}
.check input:focus-visible + .box{outline:2px solid var(--c-mint);outline-offset:3px}
.check input[aria-invalid="true"] + .box{box-shadow:inset 0 0 0 1.5px var(--c-coral)}
.check a,.sheet .meta a{color:var(--c-mint)}
.radios{border:0;margin:0 0 4px;padding:0}
.radio{display:flex;align-items:center;gap:12px;min-height:44px;font-size:var(--t-small);color:var(--c-ink-2);cursor:pointer}
.radio input{width:18px;height:18px;accent-color:var(--c-coral);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts:not(:empty){margin:8px 0}
.x{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--c-ink-2);margin:-6px -10px 0 0}
.x:hover{color:var(--c-ink);background:rgba(147,204,179,.08)}
.legal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
@media (min-width:720px){
  .sheet{inset:0;margin:auto;width:440px;max-height:min(86vh,820px);border-radius:var(--r-sheet);padding:28px 32px 28px;box-shadow:0 24px 64px rgba(0,0,0,.6)}
  .sheet .grabber{display:none}
  .sheet-wide{width:720px}
  .sheet[open]{animation:sheet-pop var(--d-sheet) var(--e-out)}
  @keyframes sheet-pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){.sheet[open]{animation:fade var(--d-sheet)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Meine Stimmen */
.mv-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.mv-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 12px;border:1px solid var(--c-line);border-radius:10px}
.mv-row .nr{min-width:34px}
.mv-row .name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mv-row.free{border:1px dashed var(--c-line-2);color:var(--c-ink-3);font-size:var(--t-small);justify-content:center}
.mv-row .ghost{width:auto;min-height:40px;padding:0 16px}

/* Zwischenstand */
.live-line{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.live-line .dot{width:6px;height:6px;border-radius:50%;background:var(--c-mint)}
.st-list{display:flex;flex-direction:column}
.st-row{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:6px 0;border:0;border-top:1px solid var(--c-line);background:none;text-align:left}
.st-row:hover .name{text-decoration:underline;text-underline-offset:3px}
.st-row .rk{width:32px;font-family:var(--f-display);font-size:28px;line-height:1;color:var(--c-ink-3);font-variant-numeric:tabular-nums}
.st-row .rk.r1{color:var(--c-copper)}
.st-row .name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-row .v{font-size:var(--t-meta);font-weight:600;font-variant-numeric:tabular-nums}
.st-empty{padding:16px 0;color:var(--c-ink-2);border-top:1px solid var(--c-line)}

/* Rechtstexte im Sheet */
.sheet-wide{height:92vh;height:92dvh;flex-direction:column;overflow:hidden}
.sheet-wide[open]{display:flex}
@media (min-width:720px){.sheet-wide{height:min(86vh,900px)}}
.legal-tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 8px;border-bottom:1px solid var(--c-line)}
.legal-tabs::-webkit-scrollbar{display:none}
.legal-tabs button{flex:none;white-space:nowrap;background:none;border:0;border-bottom:2px solid transparent;padding:10px 6px;min-height:44px;font-size:13px;color:var(--c-ink-2)}
@media (min-width:720px){.legal-tabs button{font-size:var(--t-small);padding:10px 8px}}
.legal-tabs button[aria-current="page"]{color:var(--c-ink);border-bottom-color:var(--c-mint)}
.legal-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:8px 2px 24px;font-size:var(--t-small);line-height:1.6;color:var(--c-ink-2)}
.legal-body:focus{outline:0}
.legal-body h1{display:none}
.legal-body h2{font-family:var(--f-ui);font-size:16px;font-weight:600;color:var(--c-ink);margin:22px 0 6px}
.legal-body h3{font-size:15px;font-weight:600;color:var(--c-ink);margin:16px 0 4px}
.legal-body p,.legal-body ul,.legal-body ol{margin:0 0 10px}
.legal-body ul,.legal-body ol{padding-left:20px;list-style:disc}
.legal-body ol{list-style:decimal}
.legal-body a{color:var(--c-mint)}
.legal-body .ext-ref{color:var(--c-ink);word-break:break-all}
.legal-body .draft,.legal .draft{padding:10px 12px;border:1px solid rgba(210,157,101,.5);border-radius:var(--r-input);color:var(--c-copper)}
.legal-body table{border-collapse:collapse;width:100%;margin:0 0 12px}
.legal-body td,.legal-body th{border-top:1px solid var(--c-line);padding:6px 8px 6px 0;text-align:left;vertical-align:top}
.legal-body [id]{scroll-margin-top:12px}
.legal-body .flash{animation:flash 1.6s ease-out}
@keyframes flash{from{background:rgba(147,204,179,.18)}to{background:transparent}}

/* ---------- Player ---------- */
.player{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--c-black);overflow:hidden;overscroll-behavior:contain}
.player[open]{animation:pl-in var(--d-player) var(--e-out)}
@keyframes pl-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.player[open]{animation:fade var(--d-player)}}
.player::backdrop{background:var(--c-black)}
.pl{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.pl-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 12px;background:var(--scrim-top)}
.pl-count{font-size:var(--t-meta);font-weight:600;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.gl{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--c-ink)}
.gl:hover{background:rgba(0,67,72,.9)}
.pl-stage{position:relative;min-height:0;overflow:hidden;background:var(--c-black)}
.pl-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.pl-media.is-embed{overflow:auto;align-items:flex-start;padding:8px 28px 12px;-webkit-overflow-scrolling:touch;flex-direction:column;align-items:center}
.pl-bg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(40px);opacity:.35;pointer-events:none}
@media (prefers-reduced-transparency:reduce){.pl-bg{display:none}}
.pl-media video{position:relative;width:100%;height:100%;object-fit:contain;background:transparent}
.pl-poster{position:relative;width:100%;height:100%;object-fit:contain}
.emb-wrap{position:relative;width:min(calc(100vw - 56px),420px);border-radius:12px;background:#fff;overflow:hidden;flex:none;transition:background var(--d-state)}
.emb-wrap.is-loading{background:var(--c-stage-2)}
.emb-wrap.is-loading iframe{opacity:0}
.emb-spin{position:absolute;left:50%;top:120px;width:28px;height:28px;margin-left:-14px;color:var(--c-ink-2)}
.emb-wrap:not(.is-loading) .emb-spin{display:none}
.emb-wrap iframe{transition:opacity var(--d-state)}
.emb-wrap iframe{display:block;width:100%;height:var(--emb-h,760px);border:0;background:#fff}
.emb-note{position:relative;max-width:420px;margin:10px auto 0;text-align:center;color:var(--c-ink-3)}
.pl-msg{position:relative;z-index:1;max-width:320px;margin:0 auto;padding:20px;border-radius:14px;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.pl-msg p{color:var(--c-ink-2);font-size:var(--t-small)}
.pl-msg .t{color:var(--c-ink);font-weight:600;font-size:16px}
.pl-msg .btn-outline{color:var(--c-ink)}
.pl-sound{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;min-height:40px;padding:0 16px;border:0;border-radius:var(--r-pill);background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--c-ink);font-size:var(--t-small);font-weight:600;display:inline-flex;align-items:center;gap:8px;animation:pulse-once .6s ease-out}
@keyframes pulse-once{50%{transform:translateX(-50%) scale(1.06)}}
.pl-play{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);z-index:2}
.pl-play svg{fill:currentColor;stroke:none;margin-left:3px}
.pl-loading{position:relative;color:var(--c-ink-2)}
.pl-loading .spin{width:28px;height:28px}
.pl-nav{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:8px}
.pl-media.is-embed ~ .pl-nav{right:4px}
.pl-media.is-video ~ .pl-nav{top:42%}
.pl-panel{position:relative;z-index:3;padding:14px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(to top,rgba(0,18,20,.98),rgba(0,18,20,.92));border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:10px}
.pl-ask{max-width:340px;gap:14px}
.pl-ask .cta{min-height:48px}
.pl-ask a{color:var(--c-mint);text-decoration:underline;text-underline-offset:3px}
.pl-media.is-consent .pl-bg{opacity:.22}
.pl-media.is-consent{padding:0 64px 0 16px}
@media (min-width:1024px){.pl-media.is-consent{padding:0 16px}}
.pl-id{display:flex;align-items:center;gap:10px;min-width:0}
.pl-idt{min-width:0}
.pl-salon{font-size:18px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-stats{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;color:var(--c-ink-2)}
.pl-stats span{display:inline-flex;align-items:center;gap:4px}
.pl-stats .nocount{color:var(--c-ink-3)}
.pl-stats .ours{margin-left:auto;color:var(--c-ink);font-weight:600}
.pl-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.pips-inline{justify-content:flex-start;padding:0}
body:not(.can-vote) #pl-vote,body:not(.can-vote) .pl-foot .pips-inline{display:none}
.endcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:24px}
.endcard .t{font-family:var(--f-display);font-size:34px;line-height:1.1}
@media (min-width:1024px){
  .player{background:var(--backdrop)}
  .player::backdrop{background:rgba(0,10,11,.9)}
  .pl{grid-template-columns:auto 360px;grid-template-rows:1fr;align-items:center;justify-content:center;gap:24px;padding:24px}
  .pl-top{position:fixed;inset:24px 24px auto 24px;background:none;padding:0;height:auto}
  .pl-stage{width:calc(min(92vh,900px) * 9 / 16);height:min(92vh,900px);border-radius:4px}
  .pl-stage:has(.is-embed){width:476px}
  .pl-nav{position:fixed;right:24px}
  .pl-panel{background:none;border:0;padding:0;gap:14px}
  .pl-salon{font-size:24px;white-space:normal}
}

/* ---------- Toast ---------- */
.toasts{position:fixed;inset:auto 0 calc(16px + env(safe-area-inset-bottom)) 0;width:auto;height:auto;margin:0;border:0;background:transparent;overflow:visible;color:inherit;z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px}
.toasts[popover]:not(:popover-open){display:none}
.toast{display:flex;align-items:center;gap:10px;max-width:440px;padding:12px 16px;border-radius:12px;background:var(--c-stage-2);box-shadow:var(--sh-toast);border:1px solid var(--c-line);font-size:var(--t-small);color:var(--c-ink);animation:toast-in var(--d-sheet) var(--e-out)}
.toast .ok{color:var(--c-coral)}
@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- Eigenständige Seiten: Rechtstexte, 404, Admin ---------- */
main.legal,main.plain{max-width:720px;margin:0 auto;padding:40px var(--gutter) 48px;color:var(--c-ink-2);font-size:15px;line-height:1.6}
main.legal h1,main.plain h1{font-family:var(--f-display);font-size:var(--t-h2);line-height:1.05;color:var(--c-ink);margin:12px 0 20px}
main.legal h2,main.plain h2{font-size:17px;font-weight:600;color:var(--c-ink);margin:26px 0 8px}
main.legal p,main.plain p,main.legal ul{margin:0 0 12px}
main.legal ul,main.legal ol{padding-left:20px;list-style:disc}
main.plain .imprint{margin-top:32px;padding-top:20px;border-top:1px solid var(--c-line)}
main.plain .imprint-data{font-size:var(--t-small);color:var(--c-ink-3)}
main.plain .home{display:inline-flex;align-items:center;min-height:44px;margin-top:8px}
body > footer.foot nav a{color:var(--c-ink-2)}

/* Admin (intern) */
main.admin{max-width:1240px;margin:0 auto;padding:24px var(--gutter) 64px;font-size:14px;color:var(--c-ink-2)}
main.admin h1{font-family:var(--f-display);font-size:40px;color:var(--c-ink);margin-bottom:8px}
main.admin h2{font-size:18px;font-weight:600;color:var(--c-ink);margin:32px 0 10px}
main.admin h3{font-size:15px;font-weight:600;color:var(--c-ink);margin:20px 0 8px}
main.admin p{margin:0 0 10px}
main.admin .row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:10px 0}
main.admin label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--c-ink-3)}
main.admin label.check{flex-direction:row;align-items:center;gap:8px;min-height:0;padding:0}
main.admin label.check input{position:static;opacity:1;width:16px;height:16px}
main.admin input:not([type=checkbox]){height:38px;padding:0 10px;border:1px solid var(--c-line-2);border-radius:var(--r-input);background:var(--c-stage);color:var(--c-ink);font-size:14px;min-width:180px}
main.admin .btn{min-height:38px;padding:0 14px;border-radius:var(--r-pill);font-size:13px;font-weight:600;border:1px solid var(--c-line-2);background:transparent;color:var(--c-ink)}
main.admin .btn-primary{background:var(--c-ink);color:var(--c-stage);border-color:var(--c-ink)}
main.admin .btn[disabled]{opacity:.5}
main.admin .linkbtn{background:none;border:0;color:var(--c-mint);padding:4px 0;font-size:13px;text-decoration:underline;text-underline-offset:2px}
main.admin{overflow-x:clip}
main.admin .tbl{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0}
main.admin .tbl table{margin:0}
main.admin table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
@media (max-width:719px){main.admin input:not([type=checkbox]){min-width:0;width:100%}main.admin .row label{flex:1 1 100%}}
main.admin th,main.admin td{text-align:left;padding:8px 8px 8px 0;border-top:1px solid var(--c-line);vertical-align:top}
main.admin th{color:var(--c-ink-3);font-weight:600;font-size:12px}
main.admin td{color:var(--c-ink)}
main.admin pre{background:var(--c-stage-2);padding:12px;border-radius:8px;overflow:auto;font-size:12px;color:var(--c-ink-2);max-height:400px}
main.admin code{font-size:12px;color:var(--c-mint)}
main.admin .stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:10px 0}
main.admin .stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--c-line);border-radius:8px}
main.admin .stat strong{color:var(--c-ink);font-size:15px}
main.admin .pcard{padding:14px;border:1px solid var(--c-line-2);border-radius:10px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
main.admin .pt{font-weight:600;color:var(--c-ink);font-size:16px}
main.admin .pbtns{display:flex;flex-wrap:wrap;gap:8px}
main.admin a{color:var(--c-mint);word-break:break-all}
main.admin .ig{display:flex;align-items:center;gap:8px;min-width:200px}
main.admin .ig .av{width:28px;height:28px;font-size:11px}
main.admin .ig-st{font-size:12px;color:var(--c-ink-3)}
main.admin .ig-st.ok{color:var(--c-mint)}
main.admin .ig-st.bad{color:var(--c-error)}
main.admin .ig-thumb{width:36px;height:64px;object-fit:cover;border-radius:3px;background:var(--c-stage-2)}
.prize-text .textlink{display:inline-flex;align-items:center;min-height:44px}