/* Website im Unarrow-Look: dunkel zuerst, Leuchten, Milchglas, breite Versalien. Schriften liegen lokal. */
@font-face{font-family:"Archivo";src:url("/fonts/Archivo.ttf") format("truetype");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Nunito";src:url("/fonts/Nunito.ttf") format("truetype");font-weight:200 1000;font-display:swap}
:root{
  --bg:#03040B;--bg-top:#0D1236;--ink:#EEF2FF;--muted:#8E96C8;--glass-top:rgba(255,255,255,.13);--glass-bottom:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.15);--hi:rgba(255,255,255,.24);--shadow:rgba(0,0,0,.35);--gold:#FFD23F;--gold-ink:#FFC94D;--glow:#FFD23F;--accent2:#5AA8FF;
  --wide:"Archivo","SF Pro Expanded","Helvetica Neue",system-ui,sans-serif;--round:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root{
  --bg:#C3D2DF;--bg-top:#E6EDF3;--ink:#172A3E;--muted:#4F6478;--glass-top:rgba(255,255,255,.88);--glass-bottom:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.9);--hi:#fff;--shadow:rgba(23,42,62,.14);--gold-ink:#9A6A05;color-scheme:light}}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:500 17px/1.6 var(--round);
  background:
    radial-gradient(40% 30% at 8% 92%,color-mix(in srgb,var(--glow) 18%,transparent),transparent),
    radial-gradient(45% 28% at 95% 8%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent),
    radial-gradient(95% 60% at 50% 30%,color-mix(in srgb,var(--glow) 12%,var(--bg-top)) 0%,var(--bg) 75%) fixed;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
a{color:inherit}
a:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
main{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:40px;padding:12px 0 56px}
.top{max-width:1040px;margin:0 auto;padding:18px 0 6px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lang{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;font:800 14px var(--round);color:var(--ink);background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));box-shadow:inset 0 1px 0 var(--hi)}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:800 22px var(--round)}
.brand img{border-radius:9px;box-shadow:0 0 14px rgba(255,210,63,.25)}
.eyebrow{font:800 13px/1 var(--round);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;display:flex;align-items:center;gap:10px}
.dot{width:9px;height:9px;border-radius:50%;background:#3FF2E6;box-shadow:0 0 10px #3FF2E6;display:inline-block}
h1,h2,h3{margin:0;line-height:1.1;text-wrap:balance}
.wide{font-family:var(--wide);font-stretch:125%;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-top:28px}
.hero h1{font-size:clamp(30px,9.2vw,100px);letter-spacing:.06em;text-shadow:0 0 28px color-mix(in srgb,var(--glow) 55%,transparent),0 0 2px color-mix(in srgb,var(--glow) 70%,transparent)}
@media (prefers-color-scheme:light){.hero h1{text-shadow:0 2px 0 #fff}.claim em{background:linear-gradient(90deg,#C98A0B,#E06A10)}}
.claim{font:800 clamp(30px,6vw,52px)/1.05 var(--round);margin:0;letter-spacing:-.01em}
.claim em{font-style:normal;background:linear-gradient(90deg,#FFE38A,#FFD23F 45%,#FF9A3C);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:60ch;color:var(--muted);margin:0;font-size:18px}
.wide.sm{font-size:clamp(22px,4vw,30px)}
.wide.md{font-size:clamp(24px,5vw,36px)}
.card{background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));border:1px solid var(--line);border-radius:28px;padding:24px;
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:inset 0 1px 0 var(--hi),0 14px 40px var(--shadow)}
.pill{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 26px;border-radius:999px;text-decoration:none;font:800 17px var(--round)}
.pill.gold{color:#14110A;background:linear-gradient(180deg,#FFE38A,#FFD23F 55%,#E9B820);box-shadow:0 0 26px rgba(255,210,63,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.stores{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.soon{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom));font-weight:800;margin:6px 0 0;box-shadow:inset 0 1px 0 var(--hi)}
.daily{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:700px){.daily{grid-template-columns:1fr}.dailyImg{max-width:300px;margin:0 auto}}
.dailyImg svg,.shareImg svg{width:100%;height:auto;display:block;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35));transform:rotate(-4deg)}
.dailyText{display:flex;flex-direction:column;gap:10px;min-width:0}
.dailyText h2{font:800 26px var(--round)}
.folds{display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);flex-wrap:wrap}
.folds span{margin-left:6px}
.fold{width:22px;height:22px;fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-linecap:round}
.sep{color:var(--muted)}
.muted{color:var(--muted);margin:0}
.small{font-size:14px}
.q{font-family:var(--wide);font-stretch:125%;font-weight:850;text-transform:uppercase;font-size:16px;letter-spacing:.04em;margin-top:6px}
.votes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.votes li{position:relative;display:flex;justify-content:space-between;align-items:center;height:44px;padding:0 16px;border-radius:16px;border:1px solid var(--line);overflow:hidden;font-weight:700;
  background:linear-gradient(180deg,var(--glass-top),var(--glass-bottom))}
.votes li::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:color-mix(in srgb,#FF4FD8 24%,transparent)}
.votes li.me{border:2px solid #FF4FD8}
.votes span,.votes b{position:relative}
.how{display:flex;flex-direction:column;gap:18px;align-items:center}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:8px}
.step h3{font:800 20px var(--round)}
.step p{margin:0;color:var(--muted)}
.num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 16px var(--round);color:#14110A;background:var(--gold);box-shadow:0 0 16px rgba(255,210,63,.5)}
.event{border-color:color-mix(in srgb,#FF4D5E 50%,transparent)}
.event h2{font-family:var(--wide);font-stretch:125%;font-weight:850;text-transform:uppercase;font-size:clamp(22px,4vw,30px);margin:8px 0}
.event p:last-child{margin:0;color:var(--muted);max-width:62ch}
.share{max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.shareImg{width:min(320px,80%)}
.share .votes{width:100%;text-align:left}
.result{font:800 22px var(--round);margin:0}
.stars{color:var(--gold-ink)}
.stars i{font-style:normal;opacity:.3}
.narrow{max-width:560px;margin:40px auto;display:flex;flex-direction:column;gap:14px}
.narrow p{margin:0}
.legal{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.legal h2{font:800 19px var(--round);margin-top:12px}
.legal p{margin:0;color:var(--ink)}
.foot{max-width:1040px;margin:0 auto;padding:24px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:8px}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{text-decoration:none;font-weight:700}
.foot p{margin:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.shots{margin:0 -16px}
.shots ul{list-style:none;margin:0;padding:6px 16px 18px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.shots ul::-webkit-scrollbar{display:none}
.shots li{scroll-snap-align:center}
.shots img{display:block;width:100%;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:0 18px 40px var(--shadow)}
@media (max-width:700px){.shots ul{grid-auto-columns:62%}}