/* RailBase Legends – Beta
   Fürs Handy gebaut. Zwei Designs: Silber (data-theme="light") und Schwarz (data-theme="dark").
   Am Computer steht die App als Handy-Spalte in der Mitte. */

/* ---------- Silber ---------- */
:root,:root[data-theme="light"]{
  --aussen:#C9CED3;
  --bg:linear-gradient(180deg,#EEF0F2 0%,#DADEE2 100%);
  --bg-flach:#E4E7EA;
  --surface:#F7F8F9;
  --surface-2:#E3E6E9;
  --fg:#15171A;
  --fg-2:#5A626A;
  --line:rgba(20,22,24,.13);
  --kopf:linear-gradient(180deg,#FAFBFB 0%,#DDE1E5 100%);
  --nav:linear-gradient(180deg,#F7F8F9,#E6E9EC);
  --accent:#D71920;
  --accent-ink:#C8161D;
  --accent-soft:rgba(215,25,32,.1);
  --btn-1:#D11A2A;--btn-2:#A50F22;--btn-kante:#6E0814;
  --ticket:#F4F1EA;--ticket-fg:#16181A;--ticket-loch:var(--bg-flach);
  --badge:#FBF6EA;--badge-rand:#E2C88E;
  --shadow:0 1px 2px rgba(20,22,24,.06),0 6px 18px rgba(20,22,24,.08);
  --shadow-lift:0 4px 10px rgba(20,22,24,.08),0 18px 40px rgba(20,22,24,.14);
  /* Landschaft */
  --sz-himmel-1:#BFD6E8;--sz-himmel-2:#EEF2F5;--sz-berg-1:#9FB0BF;--sz-schnee:#FFFFFF;--sz-berg-2:#71879A;
  --sz-wald:#2F4A3A;--sz-viadukt:#B9BEC3;--sz-gleis:#D71920;--sz-boden:#C9CED3;
  /* Podest: gebürstetes Silber */
  --pd-top:radial-gradient(ellipse at 50% 40%,#FFFFFF 0%,#E3E6E9 45%,#B7BDC3 100%);
  --pd-seite:linear-gradient(180deg,#C9CED3,#8F979F);
  --pd-ring:rgba(255,255,255,.9);
  --rad-nichts:#E3E6E9;
  color-scheme:light;
}
/* ---------- Schwarz ---------- */
:root[data-theme="dark"]{
  --aussen:#050506;
  --bg:linear-gradient(180deg,#141517 0%,#0D0E10 100%);
  --bg-flach:#101113;
  --surface:#1B1D20;
  --surface-2:#26292D;
  --fg:#F3F4F5;
  --fg-2:#A3A9B0;
  --line:rgba(255,255,255,.1);
  --kopf:#121315;
  --nav:#121315;
  --accent:#E3262E;
  --accent-ink:#FF4A52;
  --accent-soft:rgba(227,38,46,.16);
  --btn-1:#F2333B;--btn-2:#C3141C;--btn-kante:#7E0A10;
  --ticket:#F1EEE6;--ticket-fg:#16181A;--ticket-loch:var(--bg-flach);
  --badge:#F5EFE1;--badge-rand:#CDAE6A;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.6);
  --sz-himmel-1:#08090A;--sz-himmel-2:#1A1C1F;--sz-berg-1:#202328;--sz-schnee:#3A3F45;--sz-berg-2:#16181B;
  --sz-wald:#0E1012;--sz-viadukt:#2A2E33;--sz-gleis:#E3262E;--sz-boden:#0B0C0D;
  --pd-top:radial-gradient(ellipse at 50% 40%,#5A6068 0%,#2B2F34 55%,#16181B 100%);
  --pd-seite:linear-gradient(180deg,#2A2E33,#0E0F11);
  --pd-ring:#FF2A33;
  --rad-nichts:#30343A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--aussen)}
body{margin:0;min-height:100vh;background:var(--aussen);color:var(--fg);font-family:"Source Sans 3","Segoe UI",-apple-system,Roboto,Arial,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.op-offen{overflow:hidden}
a{color:inherit}
button{font:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:3px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.zahl,.btn-haupt,h1,h2{font-family:"Barlow Condensed","Arial Narrow",sans-serif}
@keyframes karte-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Die App als Handy-Spalte */
.handy{position:relative;max-width:480px;min-height:100vh;margin:0 auto;background:var(--bg);background-attachment:fixed;box-shadow:0 0 60px rgba(0,0,0,.25)}

/* ---------- Kopfzeile mit Level ---------- */
.topbar{position:sticky;top:0;z-index:30;background:var(--kopf);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.kopf{display:flex;align-items:center;gap:10px;height:60px;padding:0 16px}
.brand{display:flex;align-items:center;gap:8px;min-width:0;color:var(--fg);text-decoration:none}
.mark{display:block;height:24px;aspect-ratio:570/270;color:var(--fg)}
.wm{font:italic 900 26px/1 "Source Sans 3",sans-serif;letter-spacing:-.02em;white-space:nowrap}
.beta-tag{padding:3px 7px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font:800 10px/1 "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.konto-knopf{display:flex;align-items:center;gap:0;margin-left:auto;text-decoration:none;color:var(--fg)}
.avatar{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--fg);background:var(--surface);font:700 22px/1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.avatar.gross{width:64px;height:64px;font-size:34px}
.lvl{margin-left:-10px;padding:6px 10px 6px 16px;border:1px solid var(--line);border-radius:0 999px 999px 0;background:var(--surface-2);font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.04em}
/* Sammler-Level (auf der Seite «Mehr») */
.level-kopf{display:flex;align-items:center;gap:14px}
.level-kopf div{display:grid}
.level-kopf b{font:800 26px/1.1 "Barlow Condensed",sans-serif;text-transform:uppercase}
.level-kopf span:not(.level-zahl){color:var(--fg-2);font-weight:600}
.level-zahl{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,var(--btn-1),var(--btn-2));color:#fff;font:800 30px/1 "Barlow Condensed",sans-serif;box-shadow:0 4px 0 var(--btn-kante)}
.xp-balken{display:block;height:10px;border-radius:10px;background:var(--surface-2);overflow:hidden}
.level-karte p{font-size:14px}
.xp-balken i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--btn-2),var(--accent));transition:width .8s var(--spring,ease)}
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.45,.64,1)}

/* ---------- Seiten und Wechsel ---------- */
main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.view{animation:viewin .4s var(--ease-out)}
.view.von-rechts{animation-name:wisch-rechts}
.view.von-links{animation-name:wisch-links}
@keyframes viewin{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wisch-rechts{from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:none}}
@keyframes wisch-links{from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:none}}
.seite{padding:0 16px}
.titel-block{padding:18px 16px 12px;text-align:center}
.titel-block.links{text-align:left}
h1{margin:0;font-weight:800;font-size:42px;line-height:1;letter-spacing:-.005em}
.titel-block p{margin:6px 0 0;color:var(--fg-2);font-size:17px}
h2{margin:0;font-weight:800;font-size:26px;line-height:1.05}

/* Grosser roter Knopf wie im Mockup */
.btn-haupt{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:64px;padding:0 24px;border:0;border-radius:16px;
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2));color:#fff;font-weight:800;font-size:31px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 0 var(--btn-kante),0 12px 24px rgba(160,10,20,.35);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,filter .2s ease}
.btn-haupt:hover{filter:brightness(1.06)}
.btn-haupt:active{transform:translateY(4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 1px 0 var(--btn-kante),0 6px 12px rgba(160,10,20,.3)}
.btn-haupt:disabled{background:linear-gradient(180deg,#9AA1A8,#7D858D);box-shadow:0 5px 0 #5C636A;cursor:default;filter:none;transform:none;font-size:24px}
.btn-haupt svg{flex:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:700 16px/1 "Source Sans 3",sans-serif;text-decoration:none;cursor:pointer;transition:transform .2s var(--spring)}
.btn:active{transform:scale(.95)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}

/* ---------- Start: Bühne mit Podest ---------- */
.buehne{position:relative;display:grid;justify-items:center;height:min(68vh,560px);min-height:440px;overflow:hidden;isolation:isolate}
.szene{position:absolute;inset:0;z-index:-2;width:100%;height:100%}
.halle{position:absolute;inset:0;z-index:-1;display:none;pointer-events:none}
:root[data-theme="dark"] .halle{display:block}
:root[data-theme="dark"] .szene{opacity:.9}
.halle::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 40% at 50% 78%,rgba(227,38,46,.45),transparent 70%),radial-gradient(ellipse 60% 30% at 50% 20%,rgba(255,255,255,.06),transparent 70%)}
.halle-01{position:absolute;left:-6px;top:22%;font:800 150px/1 "Barlow Condensed",sans-serif;color:rgba(227,38,46,.22);letter-spacing:-.04em}
.halle-fahne{position:absolute;right:16px;top:20%;width:64px;height:120px;background:rgba(200,22,29,.55)}
.halle-fahne::before,.halle-fahne::after{content:"";position:absolute;left:50%;top:38%;background:rgba(255,255,255,.8);transform:translate(-50%,-50%)}
.halle-fahne::before{width:12px;height:38px}
.halle-fahne::after{width:38px;height:12px}
.halle-licht{position:absolute;bottom:22%;width:3px;height:70px;border-radius:3px;background:#FF3B43;box-shadow:0 0 14px 4px rgba(255,40,48,.6);animation:flackern 4s ease-in-out infinite}
.halle-licht.l1{left:8%}.halle-licht.l2{left:20%;animation-delay:1s}.halle-licht.l3{right:20%;animation-delay:2s}.halle-licht.l4{right:8%;animation-delay:.5s}
@keyframes flackern{0%,100%{opacity:1}50%{opacity:.55}}

.buehne-txt{padding:22px 16px 0;text-align:center}
.buehne-txt h1{font-size:clamp(38px,11vw,50px);text-shadow:0 2px 0 rgba(255,255,255,.4)}
:root[data-theme="dark"] .buehne-txt h1{text-shadow:0 3px 14px rgba(0,0,0,.8)}
.buehne-txt p{margin:4px 0 0;font-size:18px;color:var(--fg)}

.podest-bereich{position:absolute;left:0;right:0;bottom:56px;display:grid;justify-items:center}
/* Das Pack auf dem Podest ist der Knopf */
.hero-pack-knopf{position:relative;z-index:2;display:grid;justify-items:center;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-pack-knopf:disabled{cursor:default}
.hero-pack-knopf:disabled .hero-pack{filter:grayscale(.6) brightness(.85)}
.hero-pack-knopf:hover:not(:disabled) .hero-pack{filter:brightness(1.08);box-shadow:0 22px 30px rgba(0,0,0,.35),0 0 40px rgba(227,38,46,.45)}
.hero-pack-knopf:active:not(:disabled) .hero-pack{scale:.95}
.hero-pack-knopf:focus-visible{outline:none}
.hero-pack-knopf:focus-visible .hero-pack{outline:3px solid var(--accent);outline-offset:6px}
/* bereit: Pack wackelt ab und zu, damit man sieht, dass man draufdrücken kann */
.hero-pack-knopf.bereit .hero-pack{animation:pack-schweben 3.4s ease-in-out infinite,pack-locken 4s ease-in-out 1.5s infinite}
@keyframes pack-locken{0%,82%,100%{rotate:0deg}86%{rotate:-4deg}90%{rotate:4deg}94%{rotate:-2deg}}
.hero-tipp{position:absolute;left:50%;top:60%;z-index:3;padding:7px 16px;border-radius:999px;background:rgba(10,11,12,.75);color:#fff;font:700 16px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%);pointer-events:none;backdrop-filter:blur(4px);animation:blinken 1.8s ease-in-out infinite}
.hero-tipp:empty{display:none}
.hero-pack{position:relative;z-index:2;height:clamp(150px,calc(max(min(68vh,560px),440px) - 215px),330px);width:auto;max-width:none;margin-bottom:-34px;border-radius:6px;box-shadow:0 22px 30px rgba(0,0,0,.35);animation:pack-schweben 3.4s ease-in-out infinite}
.podest{position:relative;width:min(78%,340px);height:84px}
.podest-top{position:absolute;inset:0 0 auto;height:56px;border-radius:50%;background:var(--pd-top);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 0 0 2px var(--pd-ring)}
:root[data-theme="dark"] .podest-top{box-shadow:0 0 0 2px var(--pd-ring),0 0 22px 4px rgba(255,40,48,.55),inset 0 0 0 10px rgba(0,0,0,.25)}
.podest-seite{position:absolute;left:0;right:0;top:28px;height:56px;z-index:-1;border-radius:0 0 50% 50% / 0 0 56% 56%;background:var(--pd-seite);box-shadow:0 18px 30px rgba(0,0,0,.35)}
@keyframes pack-schweben{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-10px) rotate(1.5deg)}}

.badge{position:absolute;left:50%;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:2px solid var(--badge-rand);border-radius:999px;background:var(--badge);color:#16181A;font:700 16px/1 "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;transform:translateX(-50%);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.badge svg{color:var(--accent)}
.badge.bereit{animation:badge-puls 2.2s ease-in-out infinite}
@keyframes badge-puls{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}

/* ---------- Packs: Reiter, Karussell, Ticket ---------- */
.reiter{display:grid;grid-template-columns:repeat(4,1fr);margin:0 16px;border-bottom:1px solid var(--line)}
.reiter button{position:relative;height:44px;padding:0;border:0;background:none;color:var(--fg);font:700 19px/1 "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.reiter button+button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--line)}
.reiter button[aria-selected="true"]{color:var(--accent-ink)}
.reiter button[aria-selected="true"]::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;height:3px;border-radius:3px;background:var(--accent)}

.karussell-bereich{position:relative;margin-top:10px}
.karussell{display:flex;gap:0;margin:0;padding:8px 0 6px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.karussell::-webkit-scrollbar{display:none}
.karussell li{flex:0 0 46%;scroll-snap-align:center;display:grid;justify-items:center}
.karussell li:first-child{margin-left:27%}
.karussell li:last-child{margin-right:27%}
.karussell img{width:min(78%,180px);height:auto;border-radius:6px;box-shadow:0 18px 30px rgba(0,0,0,.35);transform:scale(var(--s,1));opacity:var(--o,1);transition:transform .15s linear,opacity .15s linear;cursor:pointer}
.pfeil{position:absolute;top:44%;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(10,11,12,.7);color:#fff;cursor:pointer;transform:translateY(-50%);transition:transform .2s var(--spring)}
.pfeil:active{transform:translateY(-50%) scale(.88)}
.pfeil-links{left:10px}.pfeil-rechts{right:10px}
.punkte-reihe{display:grid;justify-items:center;gap:6px;margin-bottom:12px;color:var(--fg);font:600 14px/1 "Source Sans 3",sans-serif}
.punkte{display:flex;gap:7px;align-items:center}
.punkte i{width:6px;height:6px;border-radius:50%;background:var(--fg-2);opacity:.5;transition:all .25s ease}
.punkte i.an{width:14px;height:14px;background:var(--accent);opacity:1}

/* Ticket mit Löchern links und rechts */
.ticket{position:relative;margin:0 16px 10px;padding:18px 22px 22px;border-radius:12px;background:var(--ticket);color:var(--ticket-fg);box-shadow:var(--shadow);
  -webkit-mask:radial-gradient(circle 12px at 0 50%,transparent 11.5px,#000 12px) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,transparent 11.5px,#000 12px) right/51% 100% no-repeat;
          mask:radial-gradient(circle 12px at 0 50%,transparent 11.5px,#000 12px) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,transparent 11.5px,#000 12px) right/51% 100% no-repeat}
.ticket-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 10px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(0,0,0,.14)}
.ticket-kopf>div{flex:1 1 0;min-width:0}
.ticket-kopf .garantie{flex:none}
.ticket h2{font-size:27px;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
.ticket-kopf span{font-size:17px}
.garantie{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border:2px solid #C9A54E;border-radius:10px;background:linear-gradient(180deg,#F8EBC8,#EBD39A);color:#3A2C07;font:600 14px/1.1 "Source Sans 3",sans-serif;white-space:nowrap}
.garantie svg{color:#B8860B}
.ticket .btn-haupt{font-size:30px}

/* ---------- Glücksrad ---------- */
.rad-buehne{position:relative;width:min(84vw,380px);margin:16px auto 26px}
.rad{display:block;width:100%;height:auto;border-radius:50%;background:var(--surface);box-shadow:0 0 0 8px var(--surface),0 0 0 10px var(--line),var(--shadow-lift);will-change:transform}
:root[data-theme="dark"] .rad{box-shadow:0 0 0 8px #1F2225,0 0 0 10px #E3262E,0 0 40px rgba(227,38,46,.45)}
/* Logo: im schwarzen Design die Variante mit weisser Schrift und weissen Strichen */
:root[data-theme="dark"] .rad-logo-hell,
:root:not([data-theme="dark"]) .rad-logo-dunkel{display:none}
.rad text{font-family:"Barlow Condensed",sans-serif;letter-spacing:.03em}
.rad-zeiger{position:absolute;top:-18px;left:50%;z-index:2;width:32px;height:40px;transform:translateX(-50%);background:var(--accent);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.rad-unten{display:grid;justify-items:center;gap:18px;padding:0 16px}
/* Das Rad selbst ist ein Knopf: bereit = wippt leicht und lädt zum Drücken ein */
.rad-buehne{outline:none;-webkit-tap-highlight-color:transparent}
.rad-buehne.bereit{cursor:pointer}
.rad-buehne.bereit .rad{animation:rad-wippen 2.4s ease-in-out infinite}
.rad-buehne.bereit:hover .rad{animation-play-state:paused;filter:brightness(1.06)}
.rad-buehne.bereit:active .rad{scale:.97}
.rad-buehne:focus-visible .rad{outline:3px solid var(--accent);outline-offset:14px}
/* eigene Eigenschaft «rotate», damit das Wippen die Drehung (transform) nicht stört */
@keyframes rad-wippen{0%,100%{rotate:0deg}50%{rotate:6deg}}
.rad-tipp{position:absolute;left:50%;top:50%;z-index:2;padding:6px 14px;border-radius:999px;background:var(--accent);color:#fff;font:800 16px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;transform:translate(-50%,calc(-50% + 42px));pointer-events:none;opacity:0;transition:opacity .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.rad-buehne.bereit .rad-tipp{opacity:1;animation:blinken 1.6s ease-in-out infinite}
.rad-buehne.dreht .rad-zeiger{animation:zeiger-ticken .12s ease-in-out infinite alternate}
@keyframes zeiger-ticken{from{transform:translateX(-50%) rotate(-8deg)}to{transform:translateX(-50%) rotate(8deg)}}

/* ---------- Gewinn-Fenster vom Glücksrad ---------- */
.gewinn{position:fixed;inset:0;z-index:65;display:grid;place-items:center;padding:20px;background:rgba(6,7,8,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:viewin .3s var(--ease-out)}
.gw-box{position:relative;display:grid;justify-items:center;gap:6px;width:min(100%,420px);padding:34px 26px 26px;border-radius:24px;background:var(--ticket);color:var(--ticket-fg);text-align:center;overflow:hidden;isolation:isolate;
  --gw-farbe:#D71920;box-shadow:0 0 0 3px var(--gw-farbe),0 0 70px color-mix(in srgb,var(--gw-farbe) 60%,transparent),0 30px 60px rgba(0,0,0,.5);animation:gw-auftauchen .65s var(--spring)}
.preis-silber .gw-box{--gw-farbe:#A7AFB7}
.preis-gold .gw-box{--gw-farbe:#D4A21A}
.preis-platin .gw-box{--gw-farbe:#5E7FA8}
.preis-nichts .gw-box{--gw-farbe:#8A939C;animation:gw-nichts .6s ease-out}
.preis-nochmal .gw-box{--gw-farbe:#2E9E5B}
.preis-nochmal .gw-leer{background:rgba(46,158,91,.12);color:#2E9E5B;animation:gw-pack-rein .8s var(--spring) .1s both}
.preis-nochmal .gw-leer svg{animation:dreh-langsam 3s linear infinite}
@keyframes gw-auftauchen{0%{opacity:0;transform:translateY(60px) scale(.6)}60%{opacity:1}100%{transform:none}}
@keyframes gw-nichts{0%{opacity:0;transform:scale(.9)}40%{opacity:1;transform:translateX(-10px)}60%{transform:translateX(8px)}80%{transform:translateX(-4px)}100%{transform:none}}
/* drehende Lichtstrahlen hinter dem Pack */
.gw-strahlen{position:absolute;left:50%;top:150px;z-index:-1;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--gw-farbe) 35%,transparent) 0deg 10deg,transparent 10deg 24deg);
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 65%);mask:radial-gradient(circle,#000 20%,transparent 65%);animation:dreh-langsam 14s linear infinite}
.preis-nichts .gw-strahlen,.preis-nichts .gw-funken{display:none}
/* Funken, die nach aussen fliegen */
.gw-funken{position:absolute;left:50%;top:150px;z-index:-1}
.gw-funken i{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--gw-farbe);opacity:0;animation:funke 1.4s ease-out .35s both}
.gw-funken i:nth-child(odd){background:#FFD54A}
.gw-funken i:nth-child(1){--x:-150px;--y:-90px}.gw-funken i:nth-child(2){--x:140px;--y:-110px}.gw-funken i:nth-child(3){--x:-170px;--y:30px}
.gw-funken i:nth-child(4){--x:165px;--y:40px}.gw-funken i:nth-child(5){--x:-90px;--y:-150px}.gw-funken i:nth-child(6){--x:100px;--y:-160px}
.gw-funken i:nth-child(7){--x:-120px;--y:120px}.gw-funken i:nth-child(8){--x:130px;--y:110px}.gw-funken i:nth-child(9){--x:0px;--y:-180px}
.gw-funken i:nth-child(10){--x:-185px;--y:-30px}.gw-funken i:nth-child(11){--x:185px;--y:-20px}.gw-funken i:nth-child(12){--x:40px;--y:160px}
@keyframes funke{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(320deg) scale(.4)}}
.gw-pack{width:auto;height:min(34vh,250px);margin-bottom:12px;border-radius:6px;box-shadow:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));animation:gw-pack-rein .8s var(--spring) .1s both,pack-schweben 3.4s ease-in-out 1s infinite}
@keyframes gw-pack-rein{0%{opacity:0;transform:translateY(-160px) rotate(-25deg) scale(.5)}100%{opacity:1;transform:none}}
.gw-leer{display:grid;place-items:center;width:110px;height:110px;margin-bottom:10px;border-radius:50%;background:rgba(0,0,0,.06);color:#8A939C}
.gw-kicker{margin:0;color:var(--accent-ink);font:800 16px/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase}
.gw-titel{margin:0;font-size:42px;text-transform:uppercase;letter-spacing:.02em}
.gw-text{margin:0 0 14px;color:#4E555C;font-size:16px}
.gw-knoepfe{display:grid;gap:10px;width:100%}
.gw-knoepfe .btn-haupt{font-size:28px}
.btn.ghost.gw-spaeter{width:100%;color:#16181A;border-color:rgba(0,0,0,.18)}
.rad-legende{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin:0;padding:0;list-style:none;color:var(--fg-2);font-size:14px}
.rad-legende li{display:flex;align-items:center;gap:6px}
.rad-legende i{width:12px;height:12px;border-radius:3px;border:1px solid var(--line)}

/* ---------- Album ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:26px}
.stats div{display:grid;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.stats b{font:800 32px/1 "Barlow Condensed",sans-serif}
.stats span{color:var(--fg-2);font-size:13px}
.sam-h{margin:0 0 12px;font-size:24px;text-transform:uppercase;letter-spacing:.03em}
.empty{display:grid;justify-items:center;gap:6px;margin-bottom:20px;padding:36px 20px;border:2px dashed var(--line);border-radius:18px;text-align:center;color:var(--fg-2)}
.empty svg{color:var(--accent)}
.empty b{color:var(--fg);font-size:19px}

/* Die 7 Karten-Kategorien */
.rar-common{--rar:#8A939C}
.rar-uncommon{--rar:#2E9E5B}
.rar-rare{--rar:#2F6FD6}
.rar-epic{--rar:#8A3FD1}
/* Farben laut Kartenliste: Mythic rot und kupfer, Legendary gold, Special prismatisch und schwarz */
.rar-mythic{--rar:#C2402A;--rar-bild:linear-gradient(135deg,#D7263D,#B87333)}
.rar-legendary{--rar:#D4A017;--rar-bild:linear-gradient(135deg,#F6D365,#C9930A)}
.rar-special{--rar:#1B1D20;--rar-bild:linear-gradient(135deg,#FF5F6D,#FFC371,#47E891,#4FACFE,#B06AB3,#FF5F6D)}
.rar-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 26px;padding:0;list-style:none}
.rar-liste li{animation:karte-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 50ms)}
.rar{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px;width:100%;padding:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--rar);color:var(--fg);text-align:left;cursor:pointer;transition:transform .2s var(--spring)}
.rar:active{transform:scale(.97)}
.rar[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--rar) 50%,transparent)}
.rar-stein{grid-row:span 2;display:inline-block;width:28px;height:28px;border-radius:7px;background:var(--rar-bild,var(--rar));box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);transform:rotate(45deg) scale(.8)}
.rar-special .rar-stein{background-size:300% 300%;animation:schillern 4s linear infinite}
.rar.rar-special{border-color:transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(180deg,#FF5F6D,#FFC371,#47E891,#4FACFE,#B06AB3) border-box}
.rar b{font:700 19px/1.1 "Barlow Condensed",sans-serif;letter-spacing:.02em}
.rar small{color:var(--fg-2);font-size:13px}
@keyframes schillern{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.album-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.album-filter input[type="search"],.album-filter select{height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);font:inherit}
.album-filter .suche{flex:1 1 220px;display:grid}
.album-filter .schalter{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.album-filter .schalter input{width:18px;height:18px;accent-color:var(--accent)}
.karten-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 26px;padding:0;list-style:none}
.karten-grid li{animation:karte-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0) * 40ms)}

/* ---------- Karten-Skizze (Design wird später ersetzt) ---------- */
/* Die Hülle um jede Karte ist der Massstab: 1cqw = 1 % der Kartenbreite */
.flip-seite,.karten-grid>li,.op-karten>li{container-type:inline-size}
.karte{
  --k-tinte:#202326;
  position:relative;display:flex;flex-direction:column;gap:3cqw;
  width:100%;aspect-ratio:5/7;padding:5cqw;overflow:hidden;
  border:2.6cqw solid var(--rar);border-radius:6cqw;
  background:linear-gradient(165deg,color-mix(in srgb,var(--rar) 16%,#fff),#fff 55%);
  color:var(--k-tinte);font-family:"Source Sans 3",sans-serif;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.karte.rar-special{border-color:transparent;background:linear-gradient(165deg,#FFF6F0,#fff 55%) padding-box,linear-gradient(135deg,#FF5F6D,#FFC371,#47E891,#4FACFE,#B06AB3) border-box}
.k-kopf{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.k-nr{font:800 8cqw/1 "Barlow Condensed",sans-serif;color:color-mix(in srgb,var(--k-tinte) 70%,transparent)}
.k-rar{display:inline-flex;align-items:center;gap:1.6cqw;padding:1.6cqw 3.2cqw 1.6cqw 2cqw;border-radius:99px;background:var(--rar-bild,var(--rar));color:#fff;font:700 7cqw/1 "Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.k-rar .rar-stein{width:4.6cqw;height:4.6cqw;border-radius:1.2cqw;background:#fff;box-shadow:none}
.k-bild{display:grid;place-items:center;flex:1;min-height:0;border-radius:3.5cqw;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--rar) 55%,#fff),color-mix(in srgb,var(--rar) 85%,#000));color:rgba(255,255,255,.92);overflow:hidden}
.karte.rar-special .k-bild{background:linear-gradient(135deg,#FF5F6D,#FFC371,#47E891,#4FACFE,#B06AB3);background-size:250% 250%;animation:schillern 6s linear infinite}
.k-zug{width:84%;height:auto;--k-glas:color-mix(in srgb,var(--rar) 70%,#000);filter:drop-shadow(0 1.4cqw 1.4cqw rgba(0,0,0,.25))}
.k-name{margin:0;font:800 9cqw/1 "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-zusatz{margin-top:-1.6cqw;font:600 6cqw/1.15 "Source Sans 3",sans-serif;color:#4E555C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-bild{position:relative}
.k-status{position:absolute;top:2.5cqw;left:2.5cqw;padding:1cqw 2.4cqw;border-radius:99px;background:rgba(0,0,0,.55);color:#fff;font:700 4.6cqw/1.2 "Source Sans 3",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.k-anzahl{position:absolute;right:3cqw;bottom:3cqw;z-index:3;padding:1.4cqw 3cqw;border-radius:99px;background:#D71920;color:#fff;font:800 7cqw/1 "Barlow Condensed",sans-serif;box-shadow:0 2px 6px rgba(0,0,0,.3)}
/* Noch nicht gefunden: grau und blass */
.karte.fehlt{filter:grayscale(1);opacity:.42;box-shadow:none}
.karte.fehlt .k-glanz{display:none}
/* «Neu» beim Aufdecken und in der Übersicht */
.flip.neu .flip-vorne::after,.op-karten li.neu::after{content:"Neu";position:absolute;top:-11px;left:50%;z-index:5;padding:4px 12px;border-radius:99px;background:#D71920;color:#fff;font:800 15px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;transform:translateX(-50%);box-shadow:0 4px 12px rgba(0,0,0,.4)}
.op-karten li{position:relative}
.k-werte{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6cqw;margin:0}
.k-werte div{display:grid;padding:1.8cqw;border-radius:2cqw;background:color-mix(in srgb,var(--rar) 10%,#F2F3F4)}
.k-werte dt{font:700 4.6cqw/1.1 "Source Sans 3",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#626971}
.k-werte dd{margin:0;font:800 7cqw/1.1 "Barlow Condensed",sans-serif}
.k-fuss{font:700 4.4cqw/1 "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8A939C;text-align:center}
.k-glanz{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.karte.rar-epic .k-glanz,.karte.rar-mythic .k-glanz,.karte.rar-legendary .k-glanz,.karte.rar-special .k-glanz{opacity:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;mix-blend-mode:soft-light;animation:glanz 3.2s ease-in-out infinite}
.k-rueck{display:grid;place-items:center;width:100%;height:100%;border-radius:6cqw;
  border:2.6cqw solid #2E3338;
  background:radial-gradient(circle at 50% 45%,rgba(215,25,32,.35),transparent 60%),repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 6px,transparent 6px 12px),#1B1E21;
  box-shadow:inset 0 0 0 1.4cqw #D71920,0 10px 26px rgba(0,0,0,.5)}
.k-rueck-logo{width:58%;height:auto;color:#FFFFFF;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* ---------- Konto und Mehr ---------- */
.panel{display:grid;gap:12px;margin-bottom:14px;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.panel p{margin:0;color:var(--fg-2)}
.panel .btn{justify-self:start}
.panel.muted{background:transparent;box-shadow:none}
.profil{display:flex;align-items:center;gap:14px}
.profil div{display:grid}
.profil b{font:800 26px/1.1 "Barlow Condensed",sans-serif}
.profil span:not(.avatar){color:var(--fg-2)}
.field{display:grid;gap:6px}
.field span{font-weight:700;font-size:15px}
.field input{height:46px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-flach);color:var(--fg);font:inherit}
.field input:focus{outline:none;border-color:var(--accent)}
.design-wahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.design-wahl button{display:grid;justify-items:center;gap:8px;padding:12px;border:2px solid var(--line);border-radius:14px;background:var(--bg-flach);color:var(--fg);font:700 18px/1 "Barlow Condensed",sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.design-wahl button[aria-checked="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.design-wahl i{width:100%;height:46px;border-radius:8px}
.dw-silber i{background:linear-gradient(180deg,#F7F8F9,#C9CED3);box-shadow:inset 0 -12px 0 #D71920}
.dw-schwarz i{background:linear-gradient(180deg,#26292D,#0D0E10);box-shadow:inset 0 -12px 0 #E3262E}
.menu-list{display:grid;gap:2px;margin:0;padding:6px;list-style:none;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.menu-list li>*:only-child,.menu-list li{display:flex;align-items:center;justify-content:space-between;width:100%}
.menu-list li{padding:14px;border-radius:12px}
.menu-list li:has(a){padding:0}
.menu-list a{padding:14px;text-decoration:none;font-weight:700}
.menu-list small{padding:3px 8px;border-radius:999px;background:var(--surface-2);color:var(--fg-2);font-weight:700;font-size:12px}

/* Kurzer Hinweis unten */
.hinweis{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:70;margin:0;padding:10px 18px;border-radius:999px;background:var(--fg);color:var(--bg-flach);font-weight:700;font-size:15px;box-shadow:var(--shadow-lift);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:transform .35s var(--spring),opacity .25s ease;white-space:nowrap}
.hinweis.sichtbar{transform:translate(-50%,0);opacity:1}

/* ---------- Menü unten ---------- */
.tabbar{position:fixed;left:50%;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(6,1fr);width:100%;max-width:480px;height:calc(76px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--nav);border-top:1px solid var(--line);transform:translateX(-50%);box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.tabbar a{position:relative;display:grid;place-items:center;align-content:center;gap:4px;min-width:0;color:var(--fg);font:500 15px/1 "Barlow Condensed",sans-serif;letter-spacing:.02em;text-decoration:none;-webkit-tap-highlight-color:transparent}
.tabbar a+a::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:1px;background:var(--line)}
.tabbar svg{transition:transform .2s var(--spring)}
.tabbar a:active svg{transform:scale(.82)}
.tabbar .t-an{display:none}
.tabbar a[aria-current="page"]{color:var(--accent-ink);font-weight:700}
.tabbar a[aria-current="page"] .t-aus{display:none}
.tabbar a[aria-current="page"] .t-an{display:block}
.tabbar a[aria-current="page"]::after{content:"";position:absolute;top:-1px;left:22%;right:22%;height:4px;border-radius:0 0 4px 4px;background:var(--accent)}
.tabbar a[aria-current="page"] svg{animation:tab-pop .4s var(--spring)}
@keyframes tab-pop{0%{transform:scale(.7) translateY(3px)}100%{transform:none}}
/* Roter Punkt: hier ist etwas bereit */
.tabbar a.punkt span::after{content:"";position:absolute;top:14px;left:calc(50% + 9px);width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface);animation:puls 2s infinite}
@keyframes puls{0%{box-shadow:0 0 0 2px var(--surface),0 0 0 2px rgba(215,25,32,.5)}70%{box-shadow:0 0 0 2px var(--surface),0 0 0 8px rgba(215,25,32,0)}100%{box-shadow:0 0 0 2px var(--surface),0 0 0 2px rgba(215,25,32,0)}}

/* ---------- Pack öffnen ---------- */
.opener{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(40,44,50,.96),rgba(8,9,11,.98));animation:viewin .3s var(--ease-out);overflow-y:auto;overscroll-behavior:contain}
.op-box{display:grid;justify-items:center;gap:14px;width:100%;max-width:480px}
.op-titel{margin:0;color:#F5F6F7;font:700 15px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.op-stage{display:grid;place-items:center;width:100%}
.op-pack{position:relative;padding:0;border:0;background:none;cursor:pointer;animation:pack-schweben 3s ease-in-out infinite}
.op-pack img{height:min(60vh,520px);width:auto;border-radius:8px;box-shadow:0 24px 50px rgba(0,0,0,.6)}
.op-pack::after{content:"";position:absolute;inset:0;border-radius:8px;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;mix-blend-mode:overlay;animation:glanz 2.6s ease-in-out infinite;pointer-events:none}
.op-tipp{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);white-space:nowrap;color:#F5F6F7;font:700 18px/1 "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;animation:blinken 1.6s ease-in-out infinite}
.op-pack:disabled{cursor:default}
.op-pack.op-shake{animation:wackeln .7s ease-in-out}
.op-pack.op-reisst{animation:reissen .5s var(--ease-out) forwards}
@keyframes glanz{0%{background-position:150% 0}100%{background-position:-100% 0}}
@keyframes blinken{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes wackeln{0%,100%{transform:none}15%{transform:rotate(-4deg) scale(1.02)}30%{transform:rotate(4deg) scale(1.04)}45%{transform:rotate(-5deg) scale(1.05)}60%{transform:rotate(5deg) scale(1.06)}80%{transform:rotate(-2deg) scale(1.07)}}
@keyframes reissen{0%{transform:scale(1.07);filter:brightness(1)}40%{transform:scale(1.12);filter:brightness(1.8)}100%{transform:scale(1.25) translateY(-30px);opacity:0;filter:brightness(2.5) blur(4px)}}

.op-einzeln{display:grid;justify-items:center;gap:12px}
.op-zaehler{margin:0;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.1);color:#F5F6F7;font:700 15px/1 "Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.op-slot{width:min(72vw,300px,calc((100vh - 230px) * 5 / 7));aspect-ratio:5/7;perspective:1100px}
.op-hilfe{min-height:1.4em;margin:0;color:#D5D9DD;text-align:center;font-size:15px}
.flip{width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
.flip:active{cursor:grabbing}
.flip-rein{animation:flip-rein .5s var(--spring)}
@keyframes flip-rein{from{opacity:0;transform:translateY(70px) scale(.7) rotate(-8deg)}to{opacity:1;transform:none}}
.flip-innen{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s var(--spring)}
.flip.offen .flip-innen{transform:rotateY(180deg)}
.flip-seite{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-vorne{transform:rotateY(180deg)}
.flip-vorne .karte{height:100%}
.flip:focus-visible .k-rueck{outline:3px solid #fff;outline-offset:4px}
.flip.selten .karte{box-shadow:0 0 0 2px rgba(255,255,255,.8),0 0 60px 10px color-mix(in srgb,var(--rar) 75%,transparent)}
.flip.selten .flip-innen{animation:selten-hops .9s var(--spring) .35s}
@keyframes selten-hops{0%{scale:1}40%{scale:1.08}100%{scale:1}}

.op-karten{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;margin:0;padding:0;list-style:none}
.op-karten li{width:calc((100% - 20px) / 3);max-width:min(150px,calc((100vh - 220px) * 5 / 14));animation:uebersicht-in .55s var(--spring) both;animation-delay:calc(var(--i,0) * 110ms)}
@keyframes uebersicht-in{from{opacity:0;transform:translateY(40px) scale(.6) rotate(6deg)}to{opacity:1;transform:none}}
.op-status{min-height:1.4em;margin:0;color:#D5D9DD;text-align:center;font-size:15px}
.op-knoepfe{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn.ghost.op-close{color:#F5F6F7;border-color:rgba(255,255,255,.35)}

/* ---------- Computer: richtige Webseite statt Handy-Spalte ----------
   Ab 1100 px Breite steht das Menü oben in der Kopfzeile, der Inhalt ist breiter.
   Das Handy-Layout darüber bleibt unverändert (wird später fürs Handy optimiert). */
@media (min-width:1100px){
  .handy{max-width:none;box-shadow:none}
  .kopf{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
  .kopf{height:68px}
  main{max-width:1200px;margin:0 auto;padding:0 32px 60px}
  .seite{padding:0}
  .titel-block{padding:34px 0 20px}
  .titel-block.links{padding-left:0}
  h1{font-size:52px}

  /* Menü oben in der Kopfzeile */
  .tabbar{top:calc(env(safe-area-inset-top,0px) + 10px);bottom:auto;left:50%;width:auto;max-width:none;height:48px;padding:0;
    display:flex;gap:4px;background:none;border:0;box-shadow:none}
  .tabbar a{display:flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;font-size:18px;transition:background-color .2s ease}
  .tabbar a+a::before{display:none}
  .tabbar a:hover{background:var(--surface-2)}
  .tabbar svg{width:22px;height:22px}
  .tabbar a[aria-current="page"]{background:var(--accent-soft)}
  .tabbar a[aria-current="page"]::after{top:auto;bottom:-10px;left:20%;right:20%;height:3px;border-radius:3px}
  .tabbar a.punkt span::after{top:8px;left:30px}

  /* Start: breite Bühne, das Pack ist der Knopf */
  .buehne{height:600px;margin-top:24px;border-radius:24px}
  .buehne-txt{padding-top:40px}
  .buehne-txt h1{font-size:64px}
  .hero-pack{height:330px}

  /* Packs: mehr Packs nebeneinander, Ticket in der Mitte */
  .reiter{max-width:640px;margin:0 auto}
  .karussell li{flex-basis:24%}
  .karussell li:first-child{margin-left:38%}
  .karussell li:last-child{margin-right:38%}
  .karussell img{width:min(86%,230px)}
  .pfeil-links{left:18%}.pfeil-rechts{right:18%}
  .ticket{max-width:560px;margin:0 auto 20px}

  /* Glücksrad: Rad links, Knopf und Ergebnis rechts */
  #v-rad:not([hidden]){display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:40px}
  #v-rad .titel-block{grid-column:1 / -1}
  .rad-buehne{width:min(100%,460px);margin:20px auto}
  .rad-unten{padding:0}

  /* Album: viele Karten nebeneinander */
  .rar-liste{grid-template-columns:repeat(7,minmax(0,1fr))}
  .rar{grid-template-columns:1fr;row-gap:6px;justify-items:start}
  .rar-stein{grid-row:auto}
  .karten-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}

  /* Konto und Mehr: schmale Spalte */
  #v-konto .seite,#v-mehr .seite,#v-freunde .seite,#v-konto .titel-block,#v-mehr .titel-block,#v-freunde .titel-block{max-width:680px}

  /* Pack öffnen: Übersicht mit 5 Karten in einer Reihe */
  .op-box{max-width:980px}
  .op-karten li{width:calc((100% - 40px) / 5);max-width:min(180px,calc((100vh - 220px) * 5 / 7))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
/* RailBase – Silber & Rot / Nachtexpress. Gestaltung ohne Eingriff in Spielregeln. */
:root{--bg:linear-gradient(145deg,#f4f5f6,#e5e8ec);--surface:#fff;--surface-2:#edf0f3;--fg:#17212b;--fg-2:#5b6773;--line:#17212b1a;--shadow:0 8px 30px #25364a09;--shadow-lift:0 20px 60px #25364a20}
:root[data-theme="dark"]{--bg:radial-gradient(ellipse at 80% 0,#25272c,#101215 65%);--surface:#1c2025;--surface-2:#252b31;--fg:#f6f4ef;--fg-2:#a5aeb8;--line:#ffffff16;--shadow:0 8px 30px #0003;--shadow-lift:0 20px 60px #0006}
body{font-family:"Source Sans 3","Segoe UI",sans-serif}
.topbar{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(20px)}
.beta-tag{border:1px solid var(--line);background:transparent;color:var(--fg-2);border-radius:5px}
.avatar{border:1px solid var(--line);background:var(--surface-2)}
.btn-haupt{border-radius:10px;letter-spacing:.035em;font-size:25px;box-shadow:inset 0 1px #ffffff40,0 3px 0 var(--btn-kante),0 10px 22px #c7192020}
.btn-haupt:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px #ffffff40,0 5px 0 var(--btn-kante),0 15px 30px #c7192030}
.btn-haupt:active:not(:disabled){transform:translateY(2px)}
.eyebrow{display:block;margin-bottom:18px;color:var(--accent-ink);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.buehne{background:var(--surface);border:1px solid var(--line)}
.buehne-txt{z-index:4;pointer-events:none}
.buehne-txt h1{letter-spacing:-.035em}
.buehne-txt p{color:var(--fg-2)}
.hero-description{display:none}
.hero-meta{display:flex;gap:20px;margin-top:28px;color:var(--fg-2);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.hero-meta span+span{padding-left:20px;border-left:1px solid var(--line)}
.hero-pack-knopf .hero-pack,.hero-pack-knopf.bereit .hero-pack{animation:rb-float 6s ease-in-out infinite;transition:filter .3s,scale .3s}
.hero-pack-knopf:hover:not(:disabled) .hero-pack{scale:1.035;filter:brightness(1.06);box-shadow:0 24px 42px #0004}
@keyframes rb-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-1deg)}}
.hero-tipp{top:auto;bottom:-112px;min-width:230px;padding:18px 26px;background:linear-gradient(135deg,var(--btn-1),var(--btn-2));border:1px solid #ffffff40;border-radius:9px;font-size:19px;box-shadow:0 4px 0 var(--btn-kante),0 12px 26px #a00a1720;animation:none;opacity:1}
.badge{border:1px solid var(--line);background:var(--surface);color:var(--fg);box-shadow:var(--shadow);font-size:13px;letter-spacing:.06em;padding:10px 16px}
.badge.bereit{animation:none}
.badge.bereit svg{animation:rb-gift 3s ease-in-out infinite}
@keyframes rb-gift{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-14deg)}90%{transform:rotate(14deg)}}
.collection-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;color:var(--fg-2);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.collection-strip strong{font-size:14px;color:var(--fg);letter-spacing:.08em}
.collection-strip .operators{display:flex;gap:25px;flex-wrap:wrap;font-weight:800;color:var(--fg-2);letter-spacing:.03em}
.title-kicker{display:block;margin-bottom:12px;color:var(--accent-ink);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.reiter{padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.reiter button{border-radius:8px;font-size:17px;transition:background .2s,color .2s}
.reiter button[aria-selected="true"]{background:var(--fg);color:var(--surface)}
.reiter button[aria-selected="true"]::after,.reiter button+button::before{display:none}
.karussell-bereich{padding-top:26px;padding-bottom:12px;border-radius:18px;background:radial-gradient(ellipse at 50% 90%,#a2a9b730,transparent 65%)}
.karussell img{box-shadow:0 20px 25px #0003;border-radius:4px}
.punkte i.an{width:22px;height:6px;border-radius:4px}
.ticket{padding:24px 30px 28px;border:1px solid #b9aa902e;box-shadow:0 16px 34px #0000000d}
.ticket-kopf{border-bottom:1px dashed #16181a30;padding-bottom:20px}
.ticket h2{font-size:30px}
.garantie{border-width:1px;border-radius:6px;font-size:12px;padding:8px}
.panel{border-radius:12px;padding:24px;box-shadow:none}
.stats{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:22px 10px;box-shadow:none}
.rar{border-radius:10px;transition:transform .2s,background .2s,border-color .2s}
.rar:hover{transform:translateY(-3px)}
.album-filter{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px}
.karte{border-width:1.3cqw;border-radius:4cqw;padding:5cqw;box-shadow:inset 0 0 0 1cqw #ffffff55,0 8px 22px #0002;transition:transform .3s,box-shadow .3s}
.karten-grid .karte:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:0 15px 25px #0003}
.karte.fehlt{opacity:.65}
.karte.fehlt:hover{opacity:.9}
.k-bild{background:linear-gradient(165deg,transparent 48%,#0002 49%,transparent 50%),radial-gradient(ellipse at 75% 10%,#ffffff70,transparent 65%),linear-gradient(155deg,color-mix(in srgb,var(--rar) 40%,#cad6dd),color-mix(in srgb,var(--rar) 50%,#17232e));border:1px solid #ffffff55;border-radius:2cqw}
.k-bild::before{content:"";position:absolute;inset:25% -15% 0;background:#ffffff18;clip-path:polygon(0 80%,25% 10%,40% 50%,65% 0,100% 85%,100% 100%,0 100%)}
.k-zug{position:relative;z-index:1}
.k-rar{font-size:5.5cqw;letter-spacing:.04em}
.k-rueck{border-width:1.5cqw;border-radius:4cqw;background:linear-gradient(30deg,transparent 45%,#d7192030 46%,#d7192030 48%,transparent 49%),repeating-linear-gradient(135deg,#ffffff04 0 1px,transparent 1px 10px),radial-gradient(ellipse at 50% 40%,#3c2027,#10151b 70%);box-shadow:inset 0 0 0 .6cqw #be8c56, inset 0 0 0 3cqw #11161b,0 15px 50px #0006}
.opener{background:radial-gradient(ellipse at 50% 45%,#3f2630 0,#141b24 40%,#070a10 90%)}
.op-titel{font-size:16px;letter-spacing:.28em}
.op-zaehler{border:1px solid #ffffff20;padding:9px 18px;background:#ffffff08}
.flip.offen .k-glanz{animation:glanz 1.8s ease-out 1}
.rad-unten{gap:28px}
.rad-legende{gap:14px 20px}
.gw-box{border-radius:18px}
@media(min-width:1100px){
 .kopf{height:84px;max-width:1360px;padding:0 48px}.wm{font-size:28px}.mark{height:27px}
 .tabbar{top:18px;gap:6px}.tabbar a{font-family:"Source Sans 3","Segoe UI",sans-serif;font-size:14px;font-weight:650;border-radius:8px;padding:0 18px}.tabbar a[aria-current="page"]::after{bottom:-18px;left:18px;right:18px;height:2px}
 main{max-width:1360px;padding:0 48px 60px}
 .buehne{height:590px;margin-top:32px;border-radius:18px;display:block;box-shadow:0 24px 70px #1d2f4510}
 .buehne-txt{position:absolute;left:58px;top:108px;width:45%;padding:0;text-align:left}
 .buehne-txt h1{font-size:clamp(64px,5.8vw,86px);line-height:.98;max-width:460px;text-shadow:none}
 :root[data-theme="dark"] .buehne-txt h1{text-shadow:none}
 .buehne-txt p{margin-top:20px;font-size:21px}
 .hero-description{display:block;max-width:320px;margin-top:18px;color:var(--fg-2);font-size:15px;line-height:1.7}
 .buehne .szene{left:42%;width:58%;opacity:.48;mask-image:linear-gradient(90deg,transparent,#000 40%)}
 :root[data-theme="dark"] .buehne .szene{opacity:.4}
 .buehne::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 75% 35%,#ffffff60,transparent 55%)}
 :root[data-theme="dark"] .buehne::after{background:radial-gradient(ellipse at 74% 45%,#c7202b24,transparent 50%)}
 .podest-bereich{left:49%;right:3%;bottom:140px}.hero-pack{height:310px;margin-bottom:-28px}
 .podest{width:300px;height:64px}.podest-top{height:46px}.podest-seite{height:42px;top:23px}
 .badge{left:58px;bottom:47px;transform:none}.badge.bereit{transform:none}
 .halle-01{left:auto;right:33%;top:5%;font-size:190px;opacity:.3}.halle-fahne{right:35px;top:0;width:48px;height:110px;opacity:.65}
 .halle-licht{height:90px;bottom:33%}.halle-licht.l1{left:56%}.halle-licht.l2{left:65%}.halle-licht.l3{right:15%}.halle-licht.l4{right:6%}
 .titre-block{padding-top:40px}.titel-block h1{font-size:54px;letter-spacing:-.02em}.titel-block p{font-size:16px;margin-top:12px}
 #v-packs{max-width:1080px;margin:auto}.reiter{max-width:530px;margin:6px auto 0}.karussell img{width:min(75%,190px)}
 .karussell-bereich{margin-top:20px}.ticket{max-width:580px}.punkte-reihe{margin:12px 0 20px}
 #v-rad{padding:0 60px}.rad-buehne{width:380px;margin:45px auto}.rad-unten{max-width:390px}.rad-unten .btn-haupt{height:64px}
 #v-konto .seite,#v-mehr .seite,#v-freunde .seite,#v-konto .titel-block,#v-mehr .titel-block,#v-freunde .titel-block{margin-left:auto;margin-right:auto}
 .karten-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px}
 .op-karten{gap:18px}.op-karten li{width:calc((100% - 72px)/5)}
 .hinweis{bottom:30px}
}
@media(max-width:1099px){.buehne{min-height:560px}.podest-bereich{bottom:150px}.badge{bottom:15px}.eyebrow{font-size:10px;margin-bottom:8px}.hero-meta{display:none}.collection-strip{padding:20px;display:block}.operators{margin-top:12px;gap:14px!important}.buehne-txt h1{font-size:42px}.hero-pack{height:260px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Alpine Edition: Spielbühnen, Metall, Licht und Öffnungseffekte. */
:root{--metall:linear-gradient(125deg,#fafbfc 0%,#b1bbc5 24%,#f7f9fa 48%,#c4ccd3 72%,#fff 100%);--welt:url('../assets/welt/alpenpanorama.png');--spiel-rot:#ed1025}
input,select{font-family:inherit}
.handy{background:linear-gradient(#e5eaf0,#c9d2db)}
:root[data-theme="dark"] .handy{background:radial-gradient(ellipse at 50% 0,#303840,#0d1218 80%)}
.topbar{background:repeating-linear-gradient(0deg,#ffffff14 0 1px,transparent 1px 3px),var(--metall);border-bottom:2px solid #fff9;box-shadow:0 4px 22px #0004}
:root[data-theme="dark"] .topbar{background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),linear-gradient(120deg,#30363c,#11171c 60%,#343b42);border-bottom-color:#74808b}
.tabbar a{transition:color .2s,background .2s,box-shadow .2s}
.tabbar a[aria-current="page"]{box-shadow:inset 0 1px #ffffff20,0 0 20px #ed102516}
.buehne{isolation:isolate;background:linear-gradient(180deg,#e8f3ff55,transparent 40%,#07151d99),var(--welt) center/cover;border:1px solid #c5d1d8;box-shadow:inset 0 0 0 5px #ffffff18,0 22px 45px #0003}
.buehne .szene,.buehne .halle{display:none!important}
.buehne::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,#fff3,transparent 30%,#ffffff18 45%,transparent 55%);background-size:200% 100%;animation:alpen-licht 16s ease-in-out infinite alternate;pointer-events:none}
.buehne::after{display:none}
:root[data-theme="dark"] .buehne{background:linear-gradient(180deg,#05152650,transparent 50%,#07121fbb),var(--welt) center/cover;border-color:#8293a466}
@keyframes alpen-licht{from{background-position:0 0}to{background-position:100% 0}}
.buehne-txt{text-align:center;pointer-events:none}
.buehne-txt h1{color:#101c29;text-shadow:0 2px 0 #ffffffaa,0 0 35px #fff8}
:root[data-theme="dark"] .buehne-txt h1{color:#fff;text-shadow:0 3px 0 #142335,0 4px 22px #0008}
.buehne-txt p{color:#14283c;font-weight:650;text-shadow:0 1px 10px #fff}
:root[data-theme="dark"] .buehne-txt p{color:#edf6ff;text-shadow:0 2px 8px #000}
.buehne .eyebrow{display:inline-block;background:#10222ec9;color:#fff;padding:7px 16px;border:1px solid #ffffff70;border-radius:4px;font-size:10px;letter-spacing:.25em;margin-bottom:12px;backdrop-filter:blur(8px)}
.hero-description,.hero-meta{display:none}
.hero-pack{filter:drop-shadow(0 16px 20px #0008);box-shadow:none;border-radius:3px}
.hero-pack-knopf:hover:not(:disabled) .hero-pack{filter:drop-shadow(0 0 18px #fff8) brightness(1.09);box-shadow:none}
.hero-pack-knopf .hero-pack,.hero-pack-knopf.bereit .hero-pack{animation:pack-vitrine 5s ease-in-out infinite}
@keyframes pack-vitrine{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.podest{width:330px;height:80px;filter:drop-shadow(0 22px 18px #0008)}
.podest-top{height:64px;background:repeating-conic-gradient(from 0deg,#ffffff10 0deg 2deg,#00000008 3deg 4deg),radial-gradient(ellipse,#e5eaf0 20%,#949fa9 66%,#edf4fb 68%,#8c97a0 73%,#eaf2f8 76%,#9ca6af 80%);box-shadow:0 0 0 2px #eef7ff,0 5px 0 #7c8a95,inset 0 0 18px #fff}
.podest-seite{top:32px;height:56px;background:repeating-linear-gradient(0deg,#ffffff18 0 1px,transparent 1px 3px),linear-gradient(90deg,#56616c,#e2e9ef 45%,#6b7884);border-bottom:3px solid #e8f6ff}
:root[data-theme="dark"] .podest-top{box-shadow:0 0 0 2px #fff,0 5px 0 #f82535,0 8px 25px #ff182b,inset 0 0 24px #ffffff80}
.podest-bereich::before{content:"";position:absolute;bottom:12px;width:360px;height:390px;pointer-events:none;background:conic-gradient(from 170deg at 50% 100%,transparent,#ffffff30,transparent 20%,transparent 75%,#ffffff22,transparent);mask-image:linear-gradient(transparent,#000);animation:strahl-atmen 5s ease-in-out infinite}
@keyframes strahl-atmen{50%{opacity:.4;scale:1.08}}
.hero-tipp,.btn-haupt{background:linear-gradient(180deg,#ff4251 0%,#f10c24 48%,#bd0014 100%);border:1px solid #ffb3b9;border-radius:12px;box-shadow:inset 0 2px 2px #ffffff80,inset 0 -3px 2px #73000a66,0 5px 0 #650510,0 8px 0 #14202b99,0 16px 25px #0005;color:#fff;text-shadow:0 2px 1px #8c0013;font-size:27px;font-weight:800;letter-spacing:.05em}
.hero-tipp{bottom:-133px;min-width:330px;padding:20px 30px;font-size:25px}
.hero-tipp::before{content:"";display:inline-block;vertical-align:middle;width:17px;height:24px;border:2px solid currentColor;transform:rotate(12deg);margin-right:14px;background:linear-gradient(transparent 10%,#fff 10% 15%,transparent 15% 85%,#fff 85% 90%,transparent 90%)}
.hero-pack-knopf:hover:not(:disabled) .hero-tipp,.btn-haupt:hover:not(:disabled){filter:brightness(1.12);box-shadow:inset 0 2px #fff8,0 5px 0 #650510,0 0 25px #ff314577}
.hero-pack-knopf:active:not(:disabled) .hero-tipp{translate:0 3px}
.hero-pack-knopf:disabled .hero-tipp{background:linear-gradient(#727e89,#424c55);border-color:#9aa7b2;box-shadow:0 4px 0 #202932;min-width:280px}
.badge{background:linear-gradient(#fffdf2,#eadfbe);color:#19212c;border:2px solid #c79749;box-shadow:inset 0 0 0 2px #fff9,0 4px 12px #0005;border-radius:9px;letter-spacing:.06em;font-size:15px;padding:10px 20px}
.collection-strip{border-bottom-color:#8494a444}
#v-packs{position:relative;isolation:isolate}
#v-packs::before{content:"";position:absolute;inset:15px -30px 0;z-index:-1;background:linear-gradient(var(--surface),transparent 28%,var(--bg-flach) 85%),var(--welt) center/cover;opacity:.3;border-radius:20px;pointer-events:none}
.reiter{background:linear-gradient(#e9eef2,#a5b1bc);border:1px solid #eff5fa;box-shadow:0 4px 15px #0003}
.reiter button{color:#202b35;text-shadow:0 1px #fff8}
.reiter button[aria-selected="true"]{background:linear-gradient(#f8293e,#b50019);color:white;text-shadow:0 1px #59000d;box-shadow:inset 0 1px #fff6,0 2px 5px #0003}
.ticket{background:repeating-linear-gradient(0deg,#ffffff20 0 1px,transparent 1px 3px),linear-gradient(110deg,#f3f6f8,#c4cdd4 50%,#f5f7fa);border:1px solid white;box-shadow:0 12px 30px #0004}
.ticket .btn-haupt{font-size:26px}
.karussell-bereich{background:radial-gradient(ellipse at 50% 95%,#ffffff60,transparent 60%)}
.karussell img{filter:drop-shadow(0 14px 10px #0004);box-shadow:none;transition:transform .2s,opacity .2s,filter .2s}
.karussell img:hover{filter:drop-shadow(0 0 12px #fff8) brightness(1.08)}
/* Rad: echter drehender SVG-Inhalt, feste Metallfassung und fester Zeiger. */
#v-rad{position:relative;isolation:isolate;border:1px solid #c9d9e477;border-radius:20px;margin-top:26px;overflow:hidden;background:linear-gradient(180deg,#e9f5ff55,transparent 50%,#0b192cb3),var(--welt) center/cover;box-shadow:0 22px 45px #0003}
:root[data-theme="dark"] #v-rad{background:linear-gradient(180deg,#0b172f66,transparent 55%,#051020cc),var(--welt) center/cover}
#v-rad .titel-block h1{color:#102033;text-shadow:0 2px 0 #fff9}
#v-rad .titel-block p{color:#182e41;font-weight:600;text-shadow:0 1px 8px #fff}
#v-rad .title-kicker{color:#9d0018}
:root[data-theme="dark"] #v-rad .titel-block h1,:root[data-theme="dark"] #v-rad .titel-block p{color:#fff;text-shadow:0 2px 10px #000}
:root[data-theme="dark"] #v-rad .title-kicker{color:#fff}
.rad-buehne{isolation:isolate;filter:drop-shadow(0 22px 18px #0007)}
.rad-buehne::before{content:"";position:absolute;inset:-17px;border-radius:50%;z-index:-1;background:repeating-conic-gradient(#ffffff12 0deg 1deg,#00000008 1deg 2deg),conic-gradient(#f2f8ff,#657381,#eef4fa,#aab7c4,#fff,#596570,#e8f2fc);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 6px #ffffff40,0 4px 0 2px #35404a,0 0 0 2px #788894}
.rad-buehne::after{content:"R";position:absolute;left:50%;top:50%;display:grid;place-items:center;translate:-50% -50%;width:21%;aspect-ratio:1;border:6px solid #e4eaf0;border-radius:50%;font:italic 900 54px/1 "Segoe UI",sans-serif;color:#fff;text-shadow:0 3px #710013;box-shadow:0 0 0 2px #6a7783,inset 0 2px 5px #fff9,inset 0 -6px 12px #67000d,0 5px 12px #0008;background:radial-gradient(circle at 35% 20%,#ff7b80,#eb001e 45%,#8c0010);pointer-events:none}
.rad{box-shadow:0 0 0 2px #364551!important;border:2px solid #edf4fa;background:#111b23}
.rad path{stroke:#dce6ee!important;stroke-width:.65}
.rad path[style*="#D71920"]{fill:url(#metal-red)!important}
.rad path[style*="#A7AFB7"]{fill:url(#metal-silver)!important}
.rad path[style*="#D4A21A"]{fill:url(#metal-gold)!important}
.rad path[style*="#2B2F35"]{fill:url(#metal-prism)!important}
.rad path[style*="--rad-nichts"]{fill:url(#metal-black)!important}
.rad path[style*="#2E9E5B"]{fill:url(#metal-green)!important}
.rad text{font-size:9px;letter-spacing:.05em;paint-order:stroke;stroke:#0003;stroke-width:.2}
.rad text[style*="--fg-2"]{fill:#d9e4ec!important}
.rad-zeiger{top:-33px;width:43px;height:55px;background:linear-gradient(115deg,#fff 0%,#ff999f 10%,#ff0927 35%,#a40012 70%,#ff7380 90%,#fff 100%);filter:drop-shadow(0 4px 2px #0009);z-index:4}
.rad-tipp{display:none}
.rad-buehne.bereit .rad{animation:rad-wippen 4s ease-in-out infinite}
.rad-buehne.dreht::before{animation:rad-licht .5s ease-in-out infinite alternate}
@keyframes rad-licht{to{box-shadow:inset 0 0 0 2px #fff,0 0 20px #fff,0 0 60px #ffdd9c}}
.rad-buehne.dreht::after{box-shadow:0 0 0 2px #fff,inset 0 2px 5px #fff9,0 0 35px #ff192d}
.rad-legende{background:#091826c9;padding:16px 22px;border:1px solid #ffffff50;border-radius:10px;color:#fff;backdrop-filter:blur(12px)}
.rad-unten .btn-haupt{max-width:430px}
/* Packöffnung: Schweben, Spannung, abgerissener Folienstreifen und Licht. */
.opener{isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#0b182ba6,#02060bf2),var(--welt) center/cover}
.opener::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 48%,transparent 0deg 18deg,#b3dfff08 19deg 23deg,transparent 24deg 40deg);animation:eroeffnung-strahlen 60s linear infinite}
@keyframes eroeffnung-strahlen{to{rotate:360deg}}
.opener::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;background:radial-gradient(circle at 50% 45%,white,#c2e9ff88 15%,transparent 65%)}
.opener:has(.op-reisst)::after{animation:pack-blitz .48s ease-out}
@keyframes pack-blitz{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
.op-pack{isolation:isolate}
.op-pack img{filter:drop-shadow(0 20px 30px #0008);box-shadow:none}
.op-pack::before{content:"";position:absolute;inset:0;z-index:3;background:var(--pack-cover) center top/100% 100% no-repeat;clip-path:polygon(0 0,100% 0,100% 14%,93% 12%,85% 15%,77% 12%,68% 15%,59% 12%,51% 15%,42% 12%,34% 15%,25% 12%,17% 15%,8% 12%,0 15%);opacity:0;pointer-events:none}
.op-pack.op-reisst{animation:none}
.op-pack.op-reisst::before{opacity:1;animation:folie-weg .48s ease-out forwards}
.op-pack.op-reisst img{clip-path:polygon(0 15%,8% 12%,17% 15%,25% 12%,34% 15%,42% 12%,51% 15%,59% 12%,68% 15%,77% 12%,85% 15%,93% 12%,100% 14%,100% 100%,0 100%);animation:pack-huelle .48s ease-in forwards}
@keyframes folie-weg{to{transform:translate(90px,-160px) rotate(30deg);opacity:0}}
@keyframes pack-huelle{0%{transform:scale(1.07)}40%{filter:brightness(1.5);opacity:1}100%{transform:translateY(100px) scale(1.2);opacity:0}}
.op-stage{position:relative}
.op-stage::before{content:"";position:absolute;left:50%;top:50%;width:380px;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(#dbefff44,transparent 65%);pointer-events:none;animation:strahl-atmen 4s infinite}
.op-zaehler{background:linear-gradient(#27394c,#101b29);border:1px solid #8898a7;color:#fff;box-shadow:inset 0 1px #fff3,0 5px 12px #0005}
.flip-rein{animation:karte-aus-pack .6s cubic-bezier(.18,.8,.25,1)}
@keyframes karte-aus-pack{from{opacity:0;transform:translateY(100px) rotateY(-30deg) rotate(-10deg) scale(.6)}to{opacity:1;transform:none}}
.flip.selten.offen::before{content:"";position:absolute;inset:-60px;z-index:-1;background:conic-gradient(transparent,#ffdb8a88,transparent,#c8eaff66,transparent);border-radius:50%;filter:blur(15px);animation:fund-aura 3s linear infinite}
@keyframes fund-aura{to{rotate:360deg}}
.flip.selten.offen .karte{box-shadow:0 0 0 2px #fff,0 0 35px var(--rar),0 0 100px color-mix(in srgb,var(--rar) 60%,transparent)}
.k-bild{background:linear-gradient(0deg,color-mix(in srgb,var(--rar) 55%,#0b172c),transparent),var(--welt) center/cover}
.k-zug{filter:drop-shadow(0 3px 4px #0009)}
.k-rueck{background:linear-gradient(145deg,#111a2ce6,#080e18b3),var(--welt) center/cover;border-color:#9caab8;box-shadow:inset 0 0 0 .6cqw #c1a265,inset 0 0 0 3cqw #11161b,0 15px 50px #0008}
.k-rueck::after{content:"RAILBASE · LEGENDS";position:absolute;bottom:12%;color:#e1c996;font:700 5cqw/1 "Segoe UI",sans-serif;letter-spacing:.1em}
.game-partikel{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.game-partikel i{position:absolute;left:50%;top:44%;width:5px;height:9px;background:var(--funken,#ffe1a3);box-shadow:0 0 10px var(--funken,#ffe1a3);animation:funken-flug .95s ease-out both;animation-delay:var(--delay)}
@keyframes funken-flug{0%{opacity:0;transform:translate(0,0) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.4)}}
.gw-box{border:2px solid #b8a573;box-shadow:0 0 0 5px #17212c,0 0 90px #ead59955;background:linear-gradient(135deg,#fff9e6,#dbe2e9);border-radius:20px}
@media(min-width:1100px){
 main{max-width:1480px;padding:0 38px 40px}.kopf{max-width:1480px;padding:0 38px}
 .buehne{height:720px;margin-top:22px;border-radius:16px}
 .buehne-txt{top:26px;left:0;width:100%;padding:0 24px;text-align:center}
 .buehne-txt h1{font-size:66px;max-width:none;line-height:1}.buehne-txt p{margin:9px 0 0;font-size:23px}
 .podest-bereich{left:0;right:0;bottom:150px}.hero-pack{height:330px;margin-bottom:-30px}
 .badge{bottom:32px;left:50%;transform:translateX(-50%)}.badge.bereit{transform:translateX(-50%)}
 .hero-tipp{bottom:-108px;min-width:360px;padding:17px 30px}
 .collection-strip{padding:18px 4px}
 #v-rad:not([hidden]){display:grid;grid-template-columns:1fr;gap:0;padding:0 35px 32px;min-height:740px}
 #v-rad .titel-block{padding:24px 0 12px;grid-column:auto}#v-rad .titel-block h1{font-size:58px}
 #v-rad .titel-block p{max-width:550px;margin:10px auto 0;font-size:17px}
 #v-rad .title-kicker{margin-bottom:9px}
 .rad-buehne{width:390px;margin:30px auto 35px}
 .rad-unten{width:100%;max-width:none;gap:20px}.rad-unten .btn-haupt{width:390px;height:64px}
 .rad-legende{margin:0}.rad-buehne::after{font-size:49px}
 #v-packs{max-width:1180px}.karussell img{width:min(68%,165px)}.karussell-bereich{padding-top:15px;margin-top:10px}.ticket{padding:20px 28px 24px}.titel-block{padding-top:28px}
}
@media(max-width:1099px){
 .buehne{min-height:690px}.buehne-txt{padding-top:20px}.buehne-txt h1{font-size:43px}.buehne-txt p{font-size:18px}
 .podest-bereich{bottom:157px}.hero-pack{height:300px}.podest{width:280px}.hero-tipp{min-width:290px;bottom:-110px;font-size:22px;padding:18px 22px}.badge{bottom:22px;font-size:13px}
 #v-rad{margin:12px 10px;border-radius:14px;padding-bottom:24px}.rad-buehne{width:min(72vw,340px);margin:32px auto 38px}.rad-buehne::after{font-size:40px;border-width:4px}
 .rad-unten .btn-haupt{font-size:25px}.rad-legende{font-size:12px;gap:10px}.collection-strip{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.game-partikel{display:none}}

/* Öffnung und gleitende Navigation */
.tabbar{isolation:isolate;touch-action:pan-y;--nav-x:0px;--nav-w:0px}
.tabbar::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:var(--nav-w);transform:translateX(var(--nav-x));border-radius:16px;background:linear-gradient(160deg,#f5364650,#c5091f18);border:1px solid #ff667644;box-shadow:inset 0 1px #ffffff22,0 0 18px #ed102518;pointer-events:none;z-index:-1;opacity:var(--nav-visible,0);transition:transform .42s cubic-bezier(.22,.8,.25,1),width .42s ease,opacity .2s}
.tabbar a[aria-current="page"]{background:transparent;box-shadow:none}
.tabbar a[aria-current="page"]::after{display:none}
.tabbar a{transition:color .25s,translate .25s}
.tabbar a[aria-current="page"] svg{animation:nav-anheben .4s ease-out}
@keyframes nav-anheben{0%{transform:translateY(3px) scale(.85)}55%{transform:translateY(-4px) scale(1.12)}100%{transform:none}}
.view.von-rechts{animation:seiten-swipe-rechts .45s cubic-bezier(.22,.8,.25,1)}
.view.von-links{animation:seiten-swipe-links .45s cubic-bezier(.22,.8,.25,1)}
@keyframes seiten-swipe-rechts{from{opacity:0;transform:translateX(65px) scale(.985)}to{opacity:1;transform:none}}
@keyframes seiten-swipe-links{from{opacity:0;transform:translateX(-65px) scale(.985)}to{opacity:1;transform:none}}
.opener:not([hidden]) .op-box{animation:pack-betreten .65s cubic-bezier(.16,.8,.25,1)}
@keyframes pack-betreten{from{opacity:0;transform:translateY(65px) scale(.8)}to{opacity:1;transform:none}}
.op-pack.op-shake{animation:pack-spannung .7s ease-in-out both}
@keyframes pack-spannung{0%{transform:scale(1)}25%{transform:scale(1.04) rotate(-3deg)}45%{transform:scale(1.07) rotate(3deg)}60%{transform:scale(1.09) rotate(-2deg)}80%{transform:scale(1.1) rotate(2deg)}100%{transform:scale(1.1)}}
.op-pack.op-shake::after{inset:12% -3% auto;height:3px;border-radius:50%;background:white;box-shadow:0 0 8px white,0 0 22px #8edbff;mix-blend-mode:normal;transform-origin:left;animation:reisslinie .7s ease-in both}
@keyframes reisslinie{0%,20%{transform:scaleX(0);opacity:0}30%{opacity:1}100%{transform:scaleX(1);opacity:1}}
.op-pack.op-reisst::before{animation:folie-abziehen .48s cubic-bezier(.15,.6,.4,1) forwards}
@keyframes folie-abziehen{0%{transform:scale(1.1)}100%{transform:translate(150px,-140px) rotate(38deg) scale(1.15);opacity:0}}
.op-pack.op-reisst img{animation:huelle-fallen .48s ease-in forwards}
@keyframes huelle-fallen{from{transform:scale(1.1);opacity:1}to{transform:translateY(150px) rotate(-9deg) scale(.92);opacity:0}}
.op-stage:has(.op-pack.op-shake)::after,.op-stage:has(.op-pack.op-reisst)::after{content:"";position:absolute;left:50%;top:46%;width:140px;aspect-ratio:5/7;border:2px solid #d5b97b;border-radius:12px;z-index:-1;background:linear-gradient(135deg,#25334b,#111b2d);box-shadow:8px 6px 0 #8392a4,16px 12px 0 #182538,24px 18px 0 #798b9b;transform:translate(-50%,-50%);animation:karten-stapel .7s ease-out both}
@keyframes karten-stapel{from{opacity:0;translate:0 50px;rotate:-12deg}to{opacity:1;translate:0 -55px;rotate:6deg}}
.flip-rein{animation:karte-heraus .65s cubic-bezier(.16,.8,.25,1)}
@keyframes karte-heraus{from{opacity:0;transform:translateY(100px) rotateY(-35deg) rotate(-8deg) scale(.7)}to{opacity:1;transform:none}}
@media(min-width:1100px){.tabbar::before{top:0;bottom:0;border-radius:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===== Alles auf einen Blick: Start, Packs und Rad passen genau in den Bildschirm =====
   --kopf-h und --nav-h misst js/app.js (misseRahmen). Diese Seiten scrollen nicht mehr;
   Pack, Karussell und Rad werden mit der verfügbaren Höhe grösser oder kleiner.
   Album, Konto und Mehr: siehe Block weiter unten (im Album scrollt nur die Karten-Liste). */
:root{--kopf-h:62px;--nav-h:76px;--frei:calc(100dvh - var(--kopf-h) - var(--nav-h))}
main{padding-bottom:var(--nav-h)!important}
#v-album .seite,#v-konto .seite,#v-mehr .seite,#v-freunde .seite{padding-bottom:28px}

/* Seitenwechsel: die hereingleitende Seite bleibt innerhalb der App (nichts steht mehr über den Rand) */
.handy{overflow-x:clip}
main{overflow:clip} /* auch das kurze Hereingleiten von unten erzeugt keinen Scrollbalken */

#v-start:not([hidden]),#v-packs:not([hidden]),#v-rad:not([hidden]){display:flex;flex-direction:column;box-sizing:border-box;height:var(--frei);min-height:0!important;overflow:hidden}

/* Start: die Bühne füllt den Platz, das Pack richtet sich nach ihrer Höhe */
#v-start{padding-bottom:12px}
#v-start .buehne{flex:1 1 0;height:auto!important;min-height:0!important;container-type:size}
#v-start .collection-strip{flex:none}
#v-start .hero-pack{height:clamp(90px,calc(100cqh - 370px),330px)!important}

/* Packs: Karussell nimmt den freien Platz, Ticket bleibt unten sichtbar */
#v-packs>*{flex:none}
#v-packs .karussell-bereich{flex:1 1 0;min-height:0;container-type:size;padding-top:4px!important;padding-bottom:4px!important;margin-top:8px!important}
#v-packs .karussell{height:100%;padding:4px 0;align-items:center}
#v-packs .karussell li{height:100%;align-content:center}
#v-packs .karussell img{width:auto!important;max-width:90%;height:clamp(60px,calc(100cqh - 52px),300px)}
#v-packs .punkte-reihe{margin:8px 0 10px!important}
/* kein grosses Ticket mehr: nur ein kleinerer Knopf und darunter die kleine Vorrat-Zeile */
#v-packs .ticket{align-self:center;width:calc(100% - 32px);max-width:320px;box-sizing:border-box;margin:0 auto 12px!important;padding:0!important;
  background:none!important;border:0!important;box-shadow:none!important;-webkit-mask:none!important;mask:none!important;border-radius:0!important}
#v-packs .ticket .btn-haupt{height:50px!important;font-size:21px!important;border-radius:999px!important}
#v-packs .ticket .btn-haupt svg{width:22px;height:22px}
#v-packs .tk-vorrat{margin-top:8px;color:var(--fg-2)}
#v-packs .tk-vorrat.hat{color:var(--accent-ink)}
/* klein unter dem Knopf: «Keins im Vorrat · Mind. 1 Rare» */
.tk-vorrat{margin:10px 0 0;text-align:center;color:#5B636B;font:600 13px/1.3 "Source Sans 3",sans-serif;letter-spacing:.03em}
.tk-vorrat.hat{color:#B3101E}

/* Rad: so gross, wie Breite und Höhe es zulassen */
#v-rad:not([hidden]){display:flex!important;height:calc(var(--frei) - 24px);margin-top:12px!important;margin-bottom:12px;padding-bottom:16px!important}
#v-rad>*{flex:none}
#v-rad .rad-platz{flex:1 1 0;min-height:0;width:100%;align-self:stretch;display:grid;place-items:center;container-type:size}
/* 70px Luft für Metallring und Zeiger oben */
#v-rad .rad-buehne{width:clamp(110px,min(calc(100cqh - 70px),calc(100cqw - 60px)),430px)!important;margin:30px auto 18px!important}
#v-rad .rad-unten{padding-bottom:4px}

/* Niedrige Bildschirme: Untertitel ausblenden und alles etwas kompakter */
@media (max-height:760px){
  .titel-block{padding-top:10px!important;padding-bottom:6px!important}
  .titel-block .title-kicker,#v-packs .titel-block p{display:none}
  .titel-block h1{font-size:34px!important}
  #v-rad .titel-block p{font-size:14px!important;margin-top:4px!important}
  #v-rad .rad-legende{display:none}
  .ticket{padding:12px 18px 14px!important}
  .ticket-kopf{padding-bottom:8px!important;margin-bottom:10px!important}
  .ticket h2{font-size:24px!important}
  .ticket .btn-haupt,#v-rad .btn-haupt{height:52px!important;font-size:22px!important}
  .buehne .eyebrow{display:none!important}
  .buehne-txt{padding-top:12px!important}
  .buehne-txt h1{font-size:34px!important}
  .buehne-txt p{font-size:15px!important;margin-top:2px!important}
  #v-start .hero-pack{height:clamp(80px,calc(100cqh - 290px),330px)!important}
  .podest-bereich{bottom:128px!important}
  .hero-tipp{bottom:-96px!important;padding:12px 18px!important;font-size:18px!important;min-width:230px!important}
  .badge{bottom:12px!important}
}
@media (max-height:620px){
  #v-packs .punkte-reihe{display:none}
  #v-packs .reiter button{height:36px}
}
@media (min-width:1100px){
  #v-start{padding-bottom:22px}
  /* am Computer ist die Überschrift grösser: Pack entsprechend kleiner rechnen */
  #v-start .hero-pack{height:clamp(90px,calc(100cqh - 400px),330px)!important}
  #v-rad:not([hidden]){height:calc(var(--frei) - 40px);margin-top:20px!important;margin-bottom:20px}
}

/* ===== Menü unten: ovaler, schwebender Balken ===== */
@media (max-width:1099px){
  .tabbar{left:50%!important;right:auto!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important;
    width:min(calc(100% - 24px),456px)!important;height:62px!important;padding:0 6px!important;border:1px solid var(--line)!important;border-radius:999px!important;
    box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.35)!important;overflow:hidden}
  .tabbar::before{top:6px!important;bottom:6px!important;border-radius:999px!important}
  .tabbar a+a::before{display:none!important}
  .tabbar a{font-size:13px!important;gap:2px!important}
  .tabbar svg{width:22px;height:22px}
  .tabbar a.punkt span::after{top:8px!important}
}
/* Computer: das Menü oben bekommt dieselbe ovale Form */
@media (min-width:1100px){
  .tabbar{padding:4px!important;height:48px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:color-mix(in srgb,var(--surface) 70%,transparent)!important;box-shadow:0 4px 14px rgba(0,0,0,.08)!important}
  .tabbar::before{top:4px!important;bottom:4px!important;border-radius:999px!important}
  .tabbar a{height:38px;border-radius:999px!important}
}

/* ===== Album, Konto und Mehr passen auch in den Bildschirm =====
   Album: nur die Karten-Liste scrollt in ihrem eigenen Bereich, die Seite selbst nicht. */
#v-album:not([hidden]),#v-konto:not([hidden]),#v-mehr:not([hidden]),#v-freunde:not([hidden]){display:flex;flex-direction:column;box-sizing:border-box;height:var(--frei);overflow:hidden}
#v-album>*,#v-konto>*,#v-mehr>*,#v-freunde>*{flex:none}
#v-album .seite{flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding-bottom:8px!important}
#v-album .seite>*{flex:none}
/* etwas kompakter: weniger Luft oben und zwischen den Blöcken, damit mehr Karten sichtbar sind */
#v-album .titel-block{padding-top:12px;padding-bottom:8px}
#v-album .stats{display:flex!important;justify-content:space-around;gap:6px;margin-bottom:8px!important;padding:6px 10px!important}
#v-album .stats div{padding:0!important;border:0!important;background:none!important;text-align:center}
#v-album .stats b{font-size:20px!important}
#v-album .stats span{font-size:11.5px!important}
#v-album .sam-fortschritt{margin-bottom:8px}
#v-album .sam-h{font-size:15px!important;margin:0 0 4px!important}
#v-album .sam-h:first-of-type{display:none}
/* Kategorien als schmale Reihe zum seitlichen Wischen */
#v-album .rar-liste{display:flex!important;gap:8px;overflow-x:auto;margin:0 0 8px!important;padding-bottom:4px;scrollbar-width:thin}
#v-album .rar-liste li{flex:none}
#v-album .rar{display:flex!important;align-items:center;gap:8px;width:auto;padding:6px 11px!important;white-space:nowrap}
#v-album .rar-stein{width:16px;height:16px}
#v-album .rar b{font-size:15px!important}
#v-album .album-filter{margin-bottom:8px!important;padding:6px 8px!important;gap:6px!important}
#v-album .album-filter input[type="search"],#v-album .album-filter select{height:36px}
#v-album .karten-grid{flex:1 1 0!important;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0!important;padding:4px 2px 12px;align-content:start;gap:10px}
#v-album .empty{flex:1 1 0}

#v-konto .seite,#v-mehr .seite,#v-freunde .seite{flex:1 1 0;min-height:0;overflow-y:auto;padding-bottom:8px!important}
#v-konto .panel,#v-mehr .panel,#v-freunde .panel{padding:12px 14px!important;margin-bottom:10px!important;gap:8px!important}
#v-konto .panel p,#v-mehr .panel p,#v-freunde .panel p{font-size:13px}
/* Freunde: die eigene ID gross und gut lesbar */
#v-freunde .id-zeile code{font:800 22px/1 "Barlow Condensed",sans-serif;letter-spacing:.06em}
#v-konto .avatar.gross{width:46px;height:46px;font-size:24px}
#v-konto .profil b{font-size:22px}
/* Profil und Name: ein Kasten, Eingabe und Speichern nebeneinander */
#v-konto .profil-name{display:grid}
#v-konto .profil{display:flex;align-items:center;gap:12px;padding:0;border:0;background:none;box-shadow:none}
#konto-form{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
#konto-form .field input,#konto-form .btn{height:40px}
/* Design: zwei flache Knöpfe mit Farbmuster links */
#v-konto .design-wahl button{display:flex!important;align-items:center;justify-items:start;gap:10px!important;padding:8px 12px!important;font-size:16px!important}
#v-konto .design-wahl i{width:34px!important;height:24px!important;flex:none;border-radius:6px}
/* Anmelden-Hinweis und Zurücksetzen in einer Zeile */
#v-konto .konto-unten{display:flex!important;align-items:center;justify-content:space-between;gap:10px}
#v-konto .konto-unten p{margin:0;flex:1}
#v-konto .konto-unten .btn{flex:none;height:38px;padding:0 14px;font-size:14px}
/* Mehr: Level-Karte kompakt, Menüpunkte als zwei Spalten */
#v-mehr .level-zahl{width:44px;height:44px;font-size:24px}
#v-mehr .level-kopf b{font-size:20px}
#v-mehr .level-karte p{display:none}
#v-mehr .menu-list{display:grid!important;grid-template-columns:1fr 1fr;gap:6px!important;padding:6px!important}
#v-mehr .menu-list li{padding:10px 12px!important;border-radius:10px;background:var(--surface-2)}
#v-mehr .menu-list li:has(a){padding:0!important}
#v-mehr .menu-list a{padding:10px 12px!important;font-size:15px}
@media (min-width:1100px){
  #v-album .rar-liste{flex-wrap:wrap;overflow:visible}
  #v-konto .seite{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;align-content:start}
  #v-konto .seite>.panel:first-child{grid-column:1 / -1}
}

/* ===== Schmale Handys und grosse Schrift: nichts ragt über den Rand =====
   Eingabefelder, Raster und Texte dürfen schmaler werden und umbrechen (z. B. bei vergrösserter Schrift auf dem Handy). */
.panel,.panel>*{min-width:0}
.panel p,.panel b,.panel span,.menu-list span{overflow-wrap:break-word}
.field{min-width:0}
.field input{width:100%;min-width:0}
#konto-form{grid-template-columns:minmax(0,1fr) auto}
#v-konto .profil>div{min-width:0}
.design-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}
.design-wahl button{min-width:0}
#v-mehr .menu-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#v-mehr .menu-list li,#v-mehr .menu-list a,#v-mehr .menu-list span{min-width:0}
/* sehr schmal: Knopf unter das Eingabefeld */
@media (max-width:340px){
  #konto-form{grid-template-columns:1fr}
  .freunde form{flex-wrap:wrap}
  .freunde form .field{flex:1 1 100%}
  #konto-form .btn,.freunde form .btn{width:100%}
}

/* ===== Start und Packs auf einer Seite =====
   Die Alpen-Bühne bleibt. Darin von oben nach unten: Überschrift, Reiter, Karussell auf dem Podest,
   Vorrat-Zeile und die Badge mit dem nächsten Schritt. Keine Pfeile: gewischt wird direkt auf den Packs. */
#v-start .buehne{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;padding-bottom:14px}
#v-start .buehne>*{flex:none}
#v-start .buehne-txt{position:relative!important;top:auto!important;left:auto!important;width:auto!important;padding:16px 16px 0!important}
#v-start .eyebrow{display:none}
#v-start .reiter{align-self:center;width:calc(100% - 32px);max-width:430px;margin:0!important}
#v-start .karussell-bereich{flex:1 1 0;min-height:0;margin:0!important;padding:0!important;background:none!important;container-type:size}
/* Lichtkegel über dem Podest */
#v-start .karussell-bereich::before{content:"";position:absolute;left:50%;bottom:44px;width:min(92%,380px);height:90%;translate:-50% 0;pointer-events:none;
  background:conic-gradient(from 170deg at 50% 100%,transparent,#ffffff30,transparent 20%,transparent 75%,#ffffff22,transparent);mask-image:linear-gradient(transparent,#000);animation:strahl-atmen 5s ease-in-out infinite}
#v-start .karussell-bereich>.podest{position:absolute;left:50%;bottom:6px;z-index:0;width:min(70%,300px);height:72px;translate:-50% 0}
#v-start .podest-top{height:52px}
#v-start .podest-seite{top:26px;height:46px}
#v-start .karussell{position:relative;z-index:1;height:100%;padding:0;align-items:stretch}
/* Die Packs stehen auf dem Podest (Mitte der Podest-Oberseite). Keine Namen darunter: die Vorrat-Zeile sagt alles,
   so bekommt das Pack mehr Platz */
#v-start .karussell li{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:52px}
#v-start .karussell img{width:auto!important;max-width:92%;height:clamp(80px,calc(100cqh - 64px),360px);transform-origin:50% 100%}
#v-start .pk-info{display:grid;justify-items:center;gap:6px}
#v-start .punkte-reihe{margin:0!important}
#v-start .tk-vorrat{margin:0;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--surface) 85%,transparent);color:var(--fg-2);backdrop-filter:blur(6px)}
#v-start .tk-vorrat.hat{color:var(--accent-ink)}
/* Badge steht jetzt unter den Packs und ist ein Knopf */
#v-start .badge{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;align-self:center;cursor:pointer}
#v-start .badge:disabled{cursor:default}
#v-start .badge:not(:disabled):hover{filter:brightness(1.05)}
/* Niedrige Bildschirme (z. B. kleine Handys): weniger Text, damit das Pack gross bleibt */
@media (max-height:700px){
  #v-start .buehne{gap:6px}
  #v-start .buehne-txt p{display:none}
  #v-start .reiter button{height:36px}
  #v-start .punkte-reihe{display:none}
}

/* ===== Level oben: runder Avatar mit rotem XP-Ring, daneben Level, Balken und XP =====
   Dunkle Kapsel mit Silberrand in beiden Designs (Vorlage vom Besitzer). --xp setzt js/app.js (zeichneKopf). */
.level-chip{--xp:0%;display:flex;align-items:center;gap:7px;height:44px;margin-left:auto;padding:0 12px 0 2px;border:1.5px solid #9aa3ad;border-radius:999px;
  background:linear-gradient(180deg,#252a31,#13161a);color:#f3f4f5;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 12px rgba(0,0,0,.3);transition:transform .2s var(--spring)}
.level-chip:active{transform:scale(.96)}
.level-chip .avatar{flex:none;width:38px;height:38px;border:3px solid transparent;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#7a0f16,#2b0507 72%) padding-box,conic-gradient(#ff2d3d var(--xp),rgba(255,255,255,.14) 0) border-box;
  color:#fff;font:800 19px/1 "Barlow Condensed",sans-serif;box-shadow:0 0 10px rgba(255,40,55,.45)}
.lc-text{display:grid;gap:3px;min-width:58px}
.lc-zeile{display:flex;align-items:baseline;gap:5px;line-height:1}
.lc-wort{color:#c9cfd6;font:600 9px/1 "Source Sans 3",sans-serif;letter-spacing:.32em;text-transform:uppercase}
.level-chip .lvl{margin:0;padding:0;border:0;border-radius:0;background:none;color:#fff;font:800 17px/1 "Barlow Condensed",sans-serif;letter-spacing:0}
.lc-balken{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.lc-balken i{display:block;width:0;height:100%;border-radius:4px;background:linear-gradient(90deg,#c3141c,#ff3341);box-shadow:0 0 6px rgba(255,51,65,.8);transition:width .8s var(--spring)}
.lc-xp{color:#aeb6bf;font:600 9px/1 "Source Sans 3",sans-serif;letter-spacing:.04em;white-space:nowrap}
/* Silber-Design: helle, weisse Kapsel mit dunkler Schrift; roter XP-Ring und Balken bleiben */
:root:not([data-theme="dark"]) .level-chip{border-color:#c3cad1;background:linear-gradient(180deg,#ffffff,#e9edf0);color:#15171a;
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(30,40,55,.18)}
:root:not([data-theme="dark"]) .level-chip .avatar{background:radial-gradient(circle at 50% 35%,#ffffff,#e3e7eb 75%) padding-box,conic-gradient(#ff2d3d var(--xp),rgba(20,22,24,.12) 0) border-box;
  color:#15171a;box-shadow:0 0 8px rgba(255,40,55,.3)}
:root:not([data-theme="dark"]) .lc-wort{color:#5a626a}
:root:not([data-theme="dark"]) .level-chip .lvl{color:#15171a}
:root:not([data-theme="dark"]) .lc-balken{background:rgba(20,22,24,.1)}
:root:not([data-theme="dark"]) .lc-xp{color:#5a626a}

/* ===== Album: Titel mit kleiner, unauffälliger Info-Schaltfläche rechts ===== */
.titel-zeile{display:flex;align-items:center;justify-content:space-between;gap:12px}
.info-knopf{flex:none;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--fg-2);font:italic 700 15px/1 Georgia,"Times New Roman",serif;cursor:pointer;opacity:.75;transition:opacity .2s,border-color .2s}
.info-knopf:hover{opacity:1;border-color:var(--fg-2)}
.info-fenster{position:fixed;inset:0;z-index:85;display:grid;place-items:center;padding:20px;background:rgba(4,8,16,.6);backdrop-filter:blur(4px);animation:viewin .2s var(--ease-out)}
.info-box{display:grid;gap:14px;width:min(100%,420px);max-height:calc(100dvh - 40px);overflow-y:auto;padding:20px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--fg);box-shadow:0 24px 60px rgba(0,0,0,.45);animation:frage-rein .35s var(--spring)}
.info-box h2{font-size:26px}
.info-liste{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.info-liste li{display:grid;gap:2px;color:var(--fg-2);font-size:15px;line-height:1.4}
.info-liste b{color:var(--fg);font-size:15px}

/* ===== Menü: Rad, Album, Start, Shop, Mehr =====
   Start steht in der Mitte als runder Knopf, der über den Balken hinausragt (nur auf dem Handy).
   Die Kappe hat die Farbe des Balkens: so hebt sich der Balken mit dem Knopf an. */
:root,:root[data-theme="light"]{--nav-kappe:#F7F8F9}
:root[data-theme="dark"]{--nav-kappe:#121315}
.tabbar{grid-template-columns:repeat(5,1fr)}
.nav-kappe{display:none}
.nav-rund{display:contents}
@media (max-width:1099px){
  .tabbar{overflow:visible!important}
  .tabbar:has(.nav-mitte[aria-current="page"])::before{opacity:0}
  .tabbar a.nav-mitte{z-index:1;align-content:end;padding-bottom:11px}
  .nav-kappe{display:block;position:absolute;left:50%;top:-29px;z-index:-1;width:80px;height:80px;border-radius:50%;translate:-50% 0;background:var(--nav-kappe);
    box-shadow:0 0 0 1px var(--line),0 -6px 14px rgba(0,0,0,.12);clip-path:inset(-30px -30px calc(100% - 31px) -30px)}
  /* weiche Übergänge, wo die Kappe in den Balken übergeht */
  .tabbar a.nav-mitte::before,.tabbar a.nav-mitte::after{content:"";display:block!important;position:absolute;top:-11px;right:auto;bottom:auto;z-index:-1;width:12px;height:12px;border-radius:0;opacity:1;pointer-events:none}
  .tabbar a.nav-mitte::before{left:calc(50% - 45px);background:radial-gradient(circle at 0 0,transparent 11.5px,var(--nav-kappe) 12px)}
  .tabbar a.nav-mitte::after{left:calc(50% + 33px);background:radial-gradient(circle at 100% 0,transparent 11.5px,var(--nav-kappe) 12px)}
  /* Knopf etwas kleiner und höher, damit die Schrift «Start» darunter frei steht */
  .nav-rund{position:absolute;left:50%;top:-24px;display:grid;place-items:center;width:52px;height:52px;border:2px solid #fff;border-radius:50%;translate:-50% 0;
    background:linear-gradient(180deg,#ff4251,#f10c24 48%,#bd0014);color:#fff;box-shadow:inset 0 2px 2px #ffffff80,0 6px 14px rgba(160,10,20,.4);transition:scale .25s var(--spring),box-shadow .25s}
  .nav-rund svg{width:26px;height:26px}
  .tabbar a.nav-mitte[aria-current="page"] .nav-rund{scale:1.06;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 2px 2px #ffffff80,0 8px 18px rgba(160,10,20,.45)}
  .tabbar a.nav-mitte:active .nav-rund{scale:.94}
  .tabbar a.nav-mitte.punkt span::after{top:-22px!important;left:calc(50% + 14px)}
  /* Schrift «Start» unter dem roten Knopf: in Schriftfarbe statt Rot, damit sie gut lesbar ist */
  .tabbar a.nav-mitte,.tabbar a.nav-mitte[aria-current="page"]{color:var(--fg)}
  .tabbar a.nav-mitte span{font-weight:800}
  .tabbar a.nav-mitte{padding-bottom:9px!important}
  /* Hinweis bleibt über dem erhöhten Knopf */
  .hinweis{bottom:calc(116px + env(safe-area-inset-bottom,0px))}
}

/* Lesbare Gewinnsymbole, ruhiger Mittelpunkt und sichtbares Sammelziel. */
#v-rad .rad-buehne.bereit .rad{animation:none}
#v-rad .rad text{font-size:9px;letter-spacing:0;stroke:none}
#v-rad .rad-buehne::after{content:'RB';width:20%;font-size:clamp(22px,4vw,38px);background:radial-gradient(circle at 30% 20%,#71879a,#172b3b 70%);text-shadow:0 2px #000;border-width:4px}
#v-rad .rad-unten{gap:10px;width:100%;max-width:480px;margin:0 auto}
#v-rad #rad-btn{background:linear-gradient(#f8fbff,#c9d6e0);color:#162c3e;border:1px solid #fff;text-shadow:none;box-shadow:0 3px 0 #748897,0 8px 20px #0003;height:44px!important;font-size:19px!important;max-width:320px}
#v-rad #rad-btn:disabled{opacity:.75;box-shadow:none}
.rad-bonus{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border:1px solid #d9e7f5;border-radius:14px;background:linear-gradient(115deg,#f2f8fff2,#d8e5f2eb);box-shadow:0 8px 24px #0b203e30;color:#142b41;text-align:left}
.rad-bonus img{width:35px;height:59px;object-fit:contain;filter:drop-shadow(0 3px 3px #0005)}
.rad-bonus>div{flex:1;min-width:0;display:grid;gap:3px}
.rad-bonus strong{font-size:16px}.rad-bonus span{font-size:12px;font-weight:700}.rad-bonus small{font-size:11px}
.rad-bonus progress{display:block;width:100%;height:7px;border:0;border-radius:10px;overflow:hidden;background:#aebdce}
.rad-bonus progress::-webkit-progress-bar{background:#aebdce}.rad-bonus progress::-webkit-progress-value{background:linear-gradient(90deg,#b8860b,#ffd54a)}
.rad-bonus progress::-moz-progress-bar{background:linear-gradient(90deg,#b8860b,#ffd54a)}
/* Info zum Rad: kleine, unauffällige Schaltfläche rechts unten (der Hintergrund ist dort dunkel) */
.rad-fuss{display:flex;justify-content:flex-end;width:100%}
#v-rad .rad-fuss .info-knopf{width:26px;height:26px;font-size:14px;border-color:rgba(255,255,255,.5);background:rgba(8,22,38,.35);color:#fff;opacity:.75}
#v-rad .rad-fuss .info-knopf:hover{opacity:1;border-color:#fff}
.info-liste .rad-info-chancen{display:grid;gap:4px;margin:4px 0 0;padding:0;list-style:none}
.info-liste .rad-info-chancen li{display:flex;justify-content:space-between;gap:10px;padding-bottom:3px;border-bottom:1px dashed var(--line);font-size:14px}
.info-liste .rad-info-chancen li span:first-child{color:var(--fg);font-weight:700}
#v-rad:not([hidden]){overflow-y:auto!important;min-height:580px!important}
#v-rad .rad-platz{min-height:240px}
#v-rad .titel-block{padding-top:14px!important;padding-bottom:0!important}
#v-rad .titel-block h1{font-size:clamp(30px,4vw,44px)!important}
/* Münz-Gewinn: runder Schatten statt Kasten (das Bild ist rund ausgeschnitten) */
#gewinn[class*="preis-coin"] .gw-pack{width:130px;height:130px;object-fit:contain;border-radius:50%;box-shadow:none}
:root[data-theme="dark"] .rad-bonus{background:linear-gradient(115deg,#1b2e43,#273952);color:#eaf3ff;border-color:#5a7493}
@media(prefers-reduced-motion:reduce){#v-rad *,#v-rad *::before,#v-rad *::after{animation:none!important}}

:root[data-theme='dark'] #v-rad .rad-bonus :is(strong,span,small){color:#eaf3ff!important}
:root[data-theme='dark'] #v-rad .titel-block :is(h1,p){color:#f3f8ff!important;text-shadow:0 2px 6px #0a1d35}