/* ===================== Grundlagen ===================== */
:root{
  --bg:#0b1020; --bg2:#141b36;
  --panel:rgba(255,255,255,.055);
  --rand:rgba(255,255,255,.13);
  --text:#eef2ff; --schwach:#a4aec9;
  --gold:#ffcc33; --blau:#3d7dff; --gruen:#4fd18b; --lila:#8a5cff;
  --radius:18px;
  --schatten:0 18px 50px rgba(0,0,0,.45);
  --tippziel:48px;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  font-family:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 15% -10%, #26326e 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #4a1e5c 0%, transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  /* Touch/iPad */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  overscroll-behavior-y:none;
}
input,select,textarea{-webkit-user-select:text; user-select:text}

#sternenhimmel{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.38), transparent),
    radial-gradient(2px 2px at 45% 70%, rgba(255,255,255,.32), transparent),
    radial-gradient(1.5px 1.5px at 85% 60%, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 10% 85%, rgba(255,255,255,.28), transparent),
    radial-gradient(1.5px 1.5px at 60% 92%, rgba(255,255,255,.34), transparent);
  animation:funkeln 6s ease-in-out infinite alternate;
}
@keyframes funkeln{from{opacity:.35}to{opacity:.85}}

main{position:relative; z-index:1; padding:20px clamp(12px,3vw,36px) 80px; max-width:1500px; margin:0 auto}
h1,h2,h3{margin:0 0 .4em; letter-spacing:.3px}
h2{font-size:1.2rem}
h3{font-size:.82rem; color:var(--schwach); text-transform:uppercase; letter-spacing:1.2px; margin:22px 0 10px}

/* ===================== Kopfzeile ===================== */
.kopf{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px clamp(12px,3vw,36px);
  padding-top:calc(10px + env(safe-area-inset-top));
  background:rgba(10,14,30,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rand);
}
.marke{display:flex; align-items:center; gap:11px; margin-right:auto}
.marke h1{font-size:1.1rem; margin:0; background:linear-gradient(90deg,#fff,#ffd76a);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.untertitel{margin:1px 0 0; font-size:.7rem; color:var(--schwach)}
.logo-wesen{
  width:38px; height:38px; border-radius:12px; flex:none; display:block;
  background:linear-gradient(145deg,#ffd76a,#ff8b4d 55%,#c31432);
  box-shadow:0 0 18px rgba(255,180,70,.45); position:relative;
  animation:logo-wippen 3.4s ease-in-out infinite;
}
.logo-wesen::before,.logo-wesen::after{
  content:''; position:absolute; top:13px; width:7px; height:9px; border-radius:50%; background:#1a1024;
}
.logo-wesen::before{left:9px} .logo-wesen::after{right:9px}
@keyframes logo-wippen{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

.reiter{display:flex; gap:4px; background:rgba(255,255,255,.06); padding:4px;
  border-radius:999px; border:1px solid var(--rand); overflow-x:auto; max-width:100%}
.reiter-knopf{
  border:0; background:transparent; color:var(--schwach); cursor:pointer;
  padding:10px 17px; border-radius:999px; font:inherit; font-weight:700; font-size:.85rem;
  transition:.25s; white-space:nowrap; min-height:var(--tippziel);
}
.reiter-knopf.aktiv{background:linear-gradient(135deg,var(--blau),var(--lila)); color:#fff;
  box-shadow:0 6px 18px rgba(61,125,255,.4)}

.kopf-rechts{display:flex; align-items:center; gap:9px}
.sterne-anzeige{
  display:flex; align-items:center; gap:6px; background:rgba(255,204,51,.13);
  border:1px solid rgba(255,204,51,.35); padding:9px 14px; border-radius:999px;
  font-weight:900; color:var(--gold); font-size:.92rem;
}
.stern-icon{filter:drop-shadow(0 0 6px rgba(255,204,51,.6))}
.icon-knopf{
  border:1px solid var(--rand); background:rgba(255,255,255,.06); color:var(--text);
  width:var(--tippziel); height:var(--tippziel); border-radius:13px; cursor:pointer;
  font-size:1.05rem; transition:.18s; flex:none;
}
.icon-knopf:active{transform:scale(.92); background:rgba(255,255,255,.2)}

/* ===================== Ansichten ===================== */
.ansicht{display:none; animation:rein .4s ease}
.ansicht.aktiv{display:block}
@keyframes rein{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}

.panel{
  background:var(--panel); border:1px solid var(--rand); border-radius:var(--radius);
  padding:20px; backdrop-filter:blur(10px); box-shadow:var(--schatten);
}
.hinweis{color:var(--schwach); font-size:.88rem; margin:0 0 16px; line-height:1.5}

/* ===================== Season-Banner ===================== */
.season-banner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(138,92,255,.28), rgba(61,125,255,.16) 55%, rgba(255,204,51,.16));
  border:1px solid var(--rand); border-radius:var(--radius);
  padding:18px 22px; margin-bottom:20px; position:relative; overflow:hidden;
}
.season-banner::after{
  content:''; position:absolute; inset:-40%;
  background:linear-gradient(115deg,transparent 42%, rgba(255,255,255,.13) 50%, transparent 58%);
  animation:glanz-lauf 5s linear infinite; pointer-events:none;
}
@keyframes glanz-lauf{from{transform:translateX(-55%)}to{transform:translateX(55%)}}
.season-text{flex:1; min-width:220px; position:relative}
.season-marke{font-size:.7rem; font-weight:900; letter-spacing:2.5px; color:var(--gold)}
.season-banner h2{font-size:1.6rem; margin:2px 0 4px}
#season-info{margin:0; font-size:.85rem; color:var(--schwach)}
.season-rechts{position:relative; display:grid; gap:6px; justify-items:end}
.season-countdown{margin:0; font-size:.72rem; color:var(--schwach)}
.season-wahl{
  background:rgba(10,14,30,.7); border:1px solid var(--rand); color:var(--text);
  padding:11px 14px; border-radius:12px; font:inherit; font-size:.85rem; min-height:var(--tippziel);
}

/* ===================== Lern-Raster ===================== */
.lern-raster{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.rechte-spalte{display:grid; gap:18px}
.statistik-panel{grid-column:1 / -1}
@media(max-width:900px){.lern-raster{grid-template-columns:1fr}}
.hinweis.klein{font-size:.8rem; margin-bottom:10px}
.season-spruch{margin:0 0 4px; font-size:.88rem; color:#e6ecff; font-style:italic}

/* ---- Niveau ---- */
.niveau-liste{display:grid; gap:9px}
.niveau-zeile{display:flex; align-items:center; gap:10px; font-size:.84rem}
.nv-icon{font-size:1rem; width:22px; text-align:center}
.nv-name{min-width:68px; font-weight:700}
.nv-bar{flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.11); overflow:hidden}
.nv-bar i{display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.2,.9,.3,1);
  background:linear-gradient(90deg,#4fd18b,#5aa9ff 55%,#ffcc33)}
.nv-stufe{min-width:72px; text-align:right; font-weight:800; color:var(--gold); font-size:.78rem}

/* ---- Season-Vorschau ---- */
.vorschau-panel{position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(138,92,255,.2), rgba(255,204,51,.1))}
.vorschau-panel::after{content:''; position:absolute; inset:-40%;
  background:linear-gradient(115deg,transparent 42%, rgba(255,255,255,.1) 50%, transparent 58%);
  animation:glanz-lauf 6s linear infinite; pointer-events:none}
.vorschau-inhalt{display:flex; gap:16px; align-items:center; flex-wrap:wrap; position:relative}
.vorschau-text{flex:1; min-width:190px}
.vorschau-marke{font-size:.65rem; font-weight:900; letter-spacing:2px; color:var(--gold)}
.vorschau-text h3{margin:3px 0 6px; font-size:1.2rem; color:var(--text);
  text-transform:none; letter-spacing:0}
.vorschau-text p{margin:0 0 5px; font-size:.82rem; color:var(--schwach); line-height:1.5}
.vorschau-packs strong{color:var(--text)}
.vorschau-countdown strong{color:var(--gold); font-size:1rem}
.vorschau-wesen{display:flex; gap:8px}
.vorschau-wesen-feld{width:64px; text-align:center; opacity:.85}
.vorschau-wesen-feld svg{width:100%; display:block; filter:blur(1px)}
.vorschau-wesen-feld span{font-size:.62rem; color:var(--schwach); font-weight:800}

/* Schritte 0/4 */
.schritte{display:flex; gap:9px; margin:6px 0 8px}
.schritte i{
  flex:1; height:14px; border-radius:99px; background:rgba(255,255,255,.1);
  border:1px solid var(--rand); transition:.35s;
}
.schritte i.voll{
  background:linear-gradient(90deg,var(--gruen),var(--gold));
  box-shadow:0 0 14px rgba(79,209,139,.55); border-color:transparent;
  animation:schritt-pop .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes schritt-pop{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.schritt-text{font-size:.82rem; color:var(--schwach); margin:0 0 16px}
.schritt-text span{color:var(--gold); font-weight:900}

/* ===================== Knöpfe ===================== */
.gross-knopf{
  width:100%; border:0; cursor:pointer; font:inherit; color:#fff;
  padding:16px 22px; border-radius:16px; display:grid; gap:2px; min-height:var(--tippziel);
  background:linear-gradient(135deg,#ff4d4d,#c31432 55%, #7b1fa2 100%);
  box-shadow:0 14px 34px rgba(195,20,50,.4);
  transition:transform .16s, box-shadow .16s; position:relative; overflow:hidden;
}
.gross-knopf span{font-size:1.05rem; font-weight:900}
.gross-knopf small{font-size:.73rem; opacity:.85}
.gross-knopf:active{transform:scale(.97)}
.gross-knopf::after{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  animation:knopf-glanz 3s linear infinite; pointer-events:none;
}
@keyframes knopf-glanz{from{left:-60%}to{left:130%}}
.gross-knopf.klein{width:auto; padding:13px 24px; border-radius:13px}
.gross-knopf.klein span{font-size:.92rem}
.gross-knopf.blau{background:linear-gradient(135deg,#3d7dff,#8a5cff); box-shadow:0 14px 34px rgba(61,125,255,.4)}

.text-knopf{
  border:1px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  padding:13px 20px; border-radius:13px; cursor:pointer; font:inherit; font-weight:700;
  font-size:.86rem; transition:.18s; min-height:var(--tippziel);
}
.text-knopf:active{transform:scale(.96); background:rgba(255,255,255,.18)}
.text-knopf.gefahr{color:#ff9a9a; border-color:rgba(255,120,120,.3)}
.knopf-reihe{display:flex; gap:10px; flex-wrap:wrap}

/* ===================== Segmente & Schalter ===================== */
.wahl-zeile{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.wahl-label{font-size:.8rem; color:var(--schwach); font-weight:700; min-width:52px}
.segment{display:flex; gap:4px; background:rgba(255,255,255,.06); padding:4px;
  border-radius:13px; border:1px solid var(--rand); flex-wrap:wrap}
.segment button{
  border:0; background:transparent; color:var(--schwach); cursor:pointer;
  padding:11px 16px; border-radius:10px; font:inherit; font-size:.82rem; font-weight:700;
  transition:.18s; min-height:44px;
}
.segment button.aktiv{background:rgba(255,255,255,.2); color:#fff}
.segment.klein button{padding:10px 13px; font-size:.78rem}

.schalter{display:flex; align-items:center; gap:11px; margin-top:16px; cursor:pointer;
  font-size:.86rem; color:var(--schwach); min-height:var(--tippziel)}
.schalter input{width:22px; height:22px; accent-color:var(--gruen); cursor:pointer}

/* ===================== Pack-Regal ===================== */
.pack-regal{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:560px){.pack-regal{grid-template-columns:1fr}}
.regal-pack{
  border:1px solid var(--rand); border-radius:16px; padding:14px; text-align:center;
  background:rgba(255,255,255,.05); display:grid; gap:10px; justify-items:center;
  transition:.2s; position:relative; overflow:hidden;
}
.regal-pack.hat{border-color:rgba(255,204,51,.45); background:rgba(255,204,51,.09)}
.regal-pack .pack-bild{width:clamp(112px, 10.5vw, 188px); aspect-ratio:96/136; height:auto; border-radius:clamp(12px,1vw,18px);
  position:relative; overflow:hidden; border:2px solid rgba(255,255,255,.35);
  display:grid; place-content:center; justify-items:center; gap:clamp(4px,.5vw,10px);
  box-shadow:0 14px 32px rgba(0,0,0,.5); transition:transform .25s}
.regal-pack.hat .pack-bild{animation:pack-wippen 2.6s ease-in-out infinite}
@keyframes pack-wippen{0%,100%{transform:rotate(-2deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-4px)}}
@media (prefers-reduced-motion: reduce){.regal-pack.hat .pack-bild{animation:none}}
.regal-pack .pack-bild .pack-icon{font-size:clamp(2.4rem, 3.6vw, 4.4rem); line-height:1; padding:.22em;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.5) 0%, rgba(255,255,255,.18) 45%, transparent 70%);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
.regal-pack .pack-bild .pack-karten-zahl{font-size:clamp(.66rem, .75vw, .9rem); letter-spacing:.12em;
  background:rgba(0,0,0,.28); padding:3px 9px; border-radius:99px}
.regal-pack .pack-bild span{position:relative; font-weight:900; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.regal-pack .pack-name{font-weight:900; font-size:clamp(.95rem, 1.1vw, 1.25rem)}
.regal-pack .pack-elemente{font-size:clamp(.72rem, .9vw, 1rem) !important}
.packs-panel .regal-pack{padding:clamp(14px,1.4vw,24px)}
.regal-pack .pack-menge{font-size:.78rem; color:var(--schwach)}
.regal-pack .pack-menge b{color:var(--gold); font-size:1.1rem}
.regal-pack .pack-elemente{font-size:.72rem; color:var(--schwach); line-height:1.4}
.regal-pack button{width:100%}
.regal-pack button:disabled{opacity:.4; cursor:default; box-shadow:none}
.regal-pack button:disabled::after{display:none}

/* ===================== Statistik ===================== */
.statistik-raster{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
@media(max-width:820px){.statistik-raster{grid-template-columns:repeat(3,1fr)}}
.stat{background:rgba(255,255,255,.05); border:1px solid var(--rand);
  border-radius:14px; padding:13px 8px; text-align:center}
.stat b{display:block; font-size:1.35rem; color:var(--gold); font-weight:900}
.stat span{font-size:.68rem; color:var(--schwach)}

.seltenheits-liste{display:grid; gap:8px}
.seltenheits-zeile{display:flex; align-items:center; gap:10px; font-size:.85rem}
.seltenheits-zeile .sym{font-size:1rem; width:20px; text-align:center}
.seltenheits-zeile .name{flex:1}
.seltenheits-zeile .bar{height:6px; flex:1; max-width:150px; border-radius:99px;
  background:rgba(255,255,255,.1); overflow:hidden}
.seltenheits-zeile .bar i{display:block; height:100%; border-radius:99px; transition:width .5s}
.seltenheits-zeile .wert{font-weight:800; color:var(--schwach); min-width:52px; text-align:right}

.besondere-liste{display:flex; gap:9px; flex-wrap:wrap; min-height:40px}
.besondere-chip{
  display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.07);
  border:1px solid var(--rand); border-radius:11px; padding:7px 12px; font-size:.8rem; cursor:pointer;
}
.besondere-chip.aa{border-color:rgba(90,169,255,.5); background:rgba(90,169,255,.12)}
.besondere-chip.fa{border-color:rgba(255,204,51,.55); background:rgba(255,204,51,.12)}
.leer-text{color:var(--schwach); font-size:.84rem}

/* ===================== Album ===================== */
.album-kopf{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:12px}
.album-kopf h2{margin:0}
.album-zahl{color:var(--gold); font-size:.92rem; margin-left:6px}
.album-werkzeuge{display:flex; gap:9px; margin-left:auto; flex-wrap:wrap}
#album-suche{
  background:rgba(255,255,255,.07); border:1px solid var(--rand); color:var(--text);
  padding:11px 14px; border-radius:12px; font:inherit; font-size:.85rem; min-width:180px;
  min-height:var(--tippziel);
}
#album-suche::placeholder{color:var(--schwach)}

.balken-gross{height:10px; background:rgba(255,255,255,.1); border-radius:99px;
  overflow:hidden; margin-bottom:18px}
.balken-gross i{display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,var(--blau),var(--gruen) 50%, var(--gold));
  box-shadow:0 0 18px rgba(255,204,51,.45); transition:width .7s cubic-bezier(.2,.9,.3,1)}

.album-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:12px}
.album-feld{
  aspect-ratio:.8; border-radius:14px; border:1px solid var(--rand);
  background:rgba(255,255,255,.045); display:grid; place-items:center; position:relative;
  cursor:pointer; transition:transform .18s, box-shadow .18s; padding:4px; overflow:hidden;
}
.album-feld:active{transform:scale(.94)}
.album-feld svg{width:100%; height:74%; display:block}
.album-feld .nr{position:absolute; top:5px; left:8px; font-size:.72rem; color:var(--schwach); font-weight:800}
.album-feld .nm{font-size:.82rem; text-align:center; line-height:1.1; color:var(--text); font-weight:700;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.album-feld.fehlend .nm{color:var(--schwach); opacity:.5}
.album-feld.fehlend svg{opacity:.55}
.album-feld .punkt{position:absolute; top:5px; right:8px; font-size:.86rem}
.album-feld .anzahl{position:absolute; bottom:3px; right:6px; font-size:.58rem; font-weight:900;
  color:var(--gold); background:rgba(0,0,0,.45); padding:1px 5px; border-radius:6px}
.album-feld .var-marke{position:absolute; bottom:3px; left:5px; display:flex; gap:3px}
.album-feld .var-marke i{font-style:normal; font-size:.5rem; font-weight:900; padding:1px 4px;
  border-radius:4px; background:var(--blau); color:#fff}
.album-feld .var-marke i.fa{background:var(--gold); color:#3a2a00}
.album-feld.neu::before{content:'NEU'; position:absolute; top:4px; right:5px; z-index:3;
  background:var(--gruen); color:#052; font-size:.52rem; font-weight:900;
  padding:2px 5px; border-radius:5px}
.album-feld.s-episch{border-color:rgba(199,125,255,.5); box-shadow:0 0 16px rgba(199,125,255,.22)}
.album-feld.s-legendaer{border-color:rgba(255,204,51,.6); box-shadow:0 0 20px rgba(255,204,51,.3)}
.album-feld.fehlend.s-episch,.album-feld.fehlend.s-legendaer{border-color:var(--rand); box-shadow:none}

/* ===================== Shop ===================== */
.shop-kopf{margin-bottom:20px}
.sterne-gross{display:inline-flex; align-items:center; gap:9px; font-size:1.15rem; font-weight:900;
  color:var(--gold); background:rgba(255,204,51,.12); border:1px solid rgba(255,204,51,.35);
  padding:11px 20px; border-radius:999px}
.shop-inhalt{display:grid; gap:26px}
.shop-gruppe h3{margin-top:0}
.shop-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:13px}
.shop-karte{
  border:1px solid var(--rand); border-radius:16px; padding:16px; background:rgba(255,255,255,.05);
  display:grid; gap:9px; align-content:start; transition:.2s; position:relative; overflow:hidden;
}
.shop-karte.aktiv{border-color:var(--gruen); background:rgba(79,209,139,.1)}
.shop-karte.gekauft:not(.aktiv){border-color:rgba(90,169,255,.4)}
.shop-vorschau{height:74px; border-radius:11px; overflow:hidden; position:relative; border:1px solid var(--rand)}
.shop-karte b{font-size:.95rem}
.shop-karte p{margin:0; font-size:.77rem; color:var(--schwach); line-height:1.45}
.shop-preis{display:flex; align-items:center; gap:6px; font-weight:900; color:var(--gold); font-size:.88rem}
.shop-karte button{width:100%}
.shop-karte button:disabled{opacity:.45; cursor:default}
.shop-marke{position:absolute; top:10px; right:10px; font-size:.6rem; font-weight:900;
  padding:3px 8px; border-radius:6px; background:var(--gruen); color:#052}

/* ===================== Overlays ===================== */
.overlay{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:18px;
  background:rgba(6,9,20,.85); backdrop-filter:blur(8px); animation:rein .28s ease;
  overflow-y:auto; overscroll-behavior:contain;
}
.overlay.dunkel{background:radial-gradient(circle at 50% 45%, rgba(40,20,80,.88), rgba(4,6,15,.97))}

/* ---- Aufgabe ---- */
.aufgabe-hintergrund{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.aufgabe-box{
  width:min(560px,100%); position:relative;
  background:linear-gradient(160deg,rgba(26,34,71,.96),rgba(19,25,54,.96));
  border:1px solid var(--rand); border-radius:22px; padding:22px;
  box-shadow:0 30px 80px rgba(0,0,0,.6); animation:box-rein .4s cubic-bezier(.2,1.2,.4,1);
  max-height:calc(100dvh - 36px); overflow-y:auto;
}
@keyframes box-rein{from{transform:scale(.88) translateY(18px); opacity:0}to{transform:none; opacity:1}}
.aufgabe-kopf{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.chip{background:rgba(255,255,255,.09); padding:8px 14px; border-radius:99px;
  font-size:.76rem; color:var(--schwach); font-weight:800}
.chip.blau{background:linear-gradient(135deg,var(--blau),var(--lila)); color:#fff}
#vorlesen-knopf{margin-left:auto}
#vorlesen-knopf.spricht{background:var(--gruen); color:#052; animation:neu-puls 1s infinite}

.mini-schritte{display:flex; gap:6px; margin-bottom:14px}
.mini-schritte i{flex:1; height:7px; border-radius:99px; background:rgba(255,255,255,.12); transition:.3s}
.mini-schritte i.voll{background:linear-gradient(90deg,var(--gruen),var(--gold))}

.aufgabe-anweisung{color:var(--schwach); font-size:.88rem; margin:0 0 8px}

/* Lesetext (Anton-Stil) */
.aufgabe-lesetext{
  background:rgba(255,255,255,.94); color:#1c2233; border-radius:14px;
  padding:16px 18px; margin:0 0 14px; font-size:1.06rem; line-height:1.65;
  font-weight:600; letter-spacing:.2px; border-left:6px solid var(--blau);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

.aufgabe-frage{
  font-size:clamp(1.5rem,5vw,2.3rem); font-weight:900; text-align:center; padding:20px 12px;
  background:rgba(255,255,255,.06); border-radius:16px; margin-bottom:14px; line-height:1.35;
  border:1px solid var(--rand);
}
.aufgabe-frage.englisch{color:var(--gold); letter-spacing:.5px}
.aufgabe-frage.bilderzeile{font-size:clamp(1.6rem,6vw,2.6rem); letter-spacing:6px; line-height:1.5}

.aufgabe-hilfe{
  display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap;
  background:rgba(255,204,51,.13); border:1px solid rgba(255,204,51,.4);
  border-radius:14px; padding:12px 16px; margin-bottom:14px;
  animation:box-rein .3s cubic-bezier(.2,1.2,.4,1);
}
.hilfe-bild{font-size:2.6rem; line-height:1}
.hilfe-text{font-size:.86rem; color:#ffe9a8; font-weight:700; text-align:center}

.antworten{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.antworten.lang{grid-template-columns:1fr}
.antworten.lang .antwort{font-size:.95rem; padding:16px 14px; text-align:left; line-height:1.4}
@media(max-width:440px){.antworten{grid-template-columns:1fr}}

/* Bild-Antworten */
.antworten.bild-antworten{grid-template-columns:1fr 1fr; gap:12px}
.bild-antwort{
  border:2px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  border-radius:16px; cursor:pointer; font:inherit; transition:.15s;
  display:grid; gap:6px; place-items:center; padding:16px 10px; min-height:112px;
}
.bild-antwort .ba-bild{font-size:2.8rem; line-height:1.1}
.bild-antwort .ba-text{font-size:.86rem; font-weight:800}
.bild-antwort:active:not(:disabled){transform:scale(.95)}
.bild-antwort:disabled{cursor:default}
.bild-antwort.richtig{background:linear-gradient(135deg,#2fbf71,#14894c); border-color:#4fd18b;
  color:#fff; animation:puls-gruen .5s ease}
.bild-antwort.falsch{background:linear-gradient(135deg,#c0392b,#7b1d14); border-color:#ff7a6a;
  animation:wackeln .4s ease}
.antwort{
  border:2px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  padding:20px 12px; border-radius:15px; cursor:pointer; font:inherit; font-size:1.1rem;
  font-weight:800; transition:.15s; min-height:62px;
}
.antwort:active:not(:disabled){transform:scale(.96)}
.antwort:disabled{cursor:default}
.antwort.richtig{background:linear-gradient(135deg,#2fbf71,#14894c); border-color:#4fd18b;
  color:#fff; animation:puls-gruen .5s ease}
.antwort.falsch{background:linear-gradient(135deg,#c0392b,#7b1d14); border-color:#ff7a6a;
  animation:wackeln .4s ease}
@keyframes puls-gruen{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes wackeln{0%,100%{transform:translateX(0)}25%{transform:translateX(-9px)}75%{transform:translateX(9px)}}
.aufgabe-feedback{text-align:center; font-weight:800; min-height:22px; margin:13px 0 0; font-size:.92rem}

/* Aufgaben-Hintergründe aus dem Shop */
.hg-teilchen{position:absolute; border-radius:50%; animation:hg-steigen linear infinite}
@keyframes hg-steigen{from{transform:translateY(0) scale(1); opacity:.75}
  to{transform:translateY(-110vh) scale(.4); opacity:0}}
.hg-sterne{background:radial-gradient(circle at 30% 20%, rgba(90,120,255,.25), transparent 60%)}
.hg-vulkan{background:linear-gradient(0deg, rgba(200,40,20,.4), transparent 65%)}
.hg-tiefsee{background:linear-gradient(0deg, rgba(10,60,120,.55), transparent 70%)}
.hg-dschungel{background:linear-gradient(0deg, rgba(20,90,40,.45), transparent 68%)}
.hg-neon{background:linear-gradient(120deg, rgba(255,0,140,.22), rgba(0,220,255,.22))}

/* ---- Pack öffnen ---- */
.oeffnen-buehne{width:min(1150px,100%); display:grid; place-items:center; padding:10px 0}
.oeffnen-hinweis{color:var(--schwach); font-size:.9rem; margin-bottom:18px; text-align:center;
  animation:atmen 2s ease-in-out infinite}
@keyframes atmen{0%,100%{opacity:.55}50%{opacity:1}}
.pack-schritt{display:grid; place-items:center; perspective:900px}

.pack-objekt{
  width:214px; height:302px; border-radius:16px; position:relative; overflow:hidden;
  border:2px solid rgba(255,255,255,.35); cursor:pointer;
  box-shadow:0 24px 55px rgba(0,0,0,.55), inset 0 0 60px rgba(255,255,255,.1);
  display:grid; place-items:center; animation:pack-schweben 3.6s ease-in-out infinite;
}
@keyframes pack-schweben{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-13px) rotate(2deg)}
}
.pack-glanz{position:absolute; inset:-40%;
  background:linear-gradient(115deg,transparent 38%, rgba(255,255,255,.7) 48%, transparent 58%);
  animation:glanz-lauf 3s linear infinite}
.pack-inhalt{position:relative; display:grid; justify-items:center; gap:8px;
  text-shadow:0 3px 12px rgba(0,0,0,.6); padding:10px}
.pack-logo{width:76px; height:76px; border-radius:22px; display:grid; place-items:center;
  background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.5); font-size:2.1rem}
.pack-titel{font-size:1.5rem; font-weight:900; letter-spacing:2px; color:#fff; text-align:center}
.pack-season{font-size:.68rem; letter-spacing:2.5px; color:rgba(255,255,255,.9); font-weight:800}
.pack-sub{font-size:.8rem; letter-spacing:1.5px; color:#fff; font-weight:900;
  background:rgba(0,0,0,.35); padding:4px 12px; border-radius:99px}

.pack-objekt.reisst{animation:pack-zittern .45s ease-in-out 2}
@keyframes pack-zittern{
  0%,100%{transform:translate(0) rotate(0)} 20%{transform:translate(-9px,4px) rotate(-4deg)}
  40%{transform:translate(9px,-5px) rotate(4deg)} 60%{transform:translate(-7px,-3px) rotate(-3deg)}
  80%{transform:translate(7px,4px) rotate(3deg)}
}
.pack-objekt.weg-standard{animation:pack-weg .5s ease forwards}
@keyframes pack-weg{to{transform:scale(1.7); opacity:0; filter:blur(8px)}}
.pack-objekt.weg-explosion{animation:pack-knall .55s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes pack-knall{40%{transform:scale(1.3) rotate(6deg)}to{transform:scale(3.2); opacity:0; filter:brightness(3) blur(14px)}}
.pack-objekt.weg-wirbel{animation:pack-wirbel .8s cubic-bezier(.5,0,.7,1) forwards}
@keyframes pack-wirbel{to{transform:rotate(920deg) scale(.02); opacity:0}}
.pack-objekt.weg-regenbogen{animation:pack-regen .7s ease forwards}
@keyframes pack-regen{
  30%{filter:hue-rotate(180deg) brightness(1.8)}
  60%{filter:hue-rotate(360deg) brightness(2.6)}
  to{transform:scale(2.2); opacity:0; filter:hue-rotate(520deg) brightness(4) blur(12px)}
}

.karten-schritt{display:grid; justify-items:center; width:100%}
.karten-stapel{display:flex; gap:13px; justify-content:center; flex-wrap:wrap;
  perspective:1400px; min-height:320px}
.oeffnen-leiste{display:flex; gap:12px; align-items:center; justify-content:center;
  margin-top:22px; flex-wrap:wrap}

/* ===================== KARTE ===================== */
.karte{
  --kb:230px;
  width:var(--kb); height:auto; aspect-ratio:63/88; position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.3,.9,.3,1.1); cursor:pointer;
  animation:karte-flieg .55s cubic-bezier(.2,1.2,.4,1) backwards;
}
@keyframes karte-flieg{
  from{transform:translateY(150px) scale(.5) rotate(-16deg); opacity:0}
  to{transform:none; opacity:1}
}
.karte.umgedreht{transform:rotateY(180deg)}
.karte-seite{position:absolute; inset:0; border-radius:calc(var(--kb) * .055); backface-visibility:hidden;
  -webkit-backface-visibility:hidden; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.55)}

/* Rückseiten */
.karte-rueck{border:5px solid #f2f2f2; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 8px, transparent 8px 16px),
    linear-gradient(160deg,#2b3a8f,#14194a 60%,#0a0d2b)}
.karte-rueck.r-gold{border-color:#f7e3a8;
  background:repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 7px, transparent 7px 14px),
    linear-gradient(150deg,#c9962c,#ffdf85 45%,#8a6516)}
.karte-rueck.r-neon{border-color:#ff6ad5;
  background:repeating-linear-gradient(-35deg, rgba(255,255,255,.08) 0 9px, transparent 9px 18px),
    linear-gradient(160deg,#2b0f4a,#ff2e9a 55%,#00d9ff)}
.karte-rueck.r-kosmos{border-color:#b8c6ff;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.4), transparent 12%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.3), transparent 10%),
    radial-gradient(circle at 50% 80%, rgba(160,120,255,.5), transparent 45%),
    linear-gradient(160deg,#160c3d,#3b1d7a 60%,#080520)}
.rueck-zeichen{width:86px; height:86px; border-radius:26px; display:grid; place-items:center;
  background:rgba(255,255,255,.18); border:4px solid rgba(255,255,255,.75); font-size:2.4rem;
  box-shadow:0 0 28px rgba(255,255,255,.3)}

/* Vorderseite – alle Größen hängen an der Kartenbreite (cqw),
   so sieht die Karte auf dem Handy, im Album und gedruckt (63 × 88 mm) gleich aus */
.karte-vor{
  transform:rotateY(180deg); border:calc(var(--kb) * .026) solid #f4d78a; padding:calc(var(--kb) * .028);
  background:linear-gradient(165deg, var(--t1,#888), var(--t2,#444));
  display:flex; flex-direction:column; gap:calc(var(--kb) * .013); container-type:inline-size; color:#141414;
  font-family:inherit; line-height:1.15;
}
.karte.d-silber .karte-vor{border-color:#dde3ec}
.karte.d-holz .karte-vor{border-color:#9c6b3f}
.karte.d-prisma .karte-vor{border-color:#ffb3f0;
  border-image:linear-gradient(60deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff,#c77dff) 1}

.karte-kopf{display:flex; align-items:center; gap:1.6cqw; min-width:0}
.karte-stufe{font-size:3.3cqw; font-weight:900; text-transform:uppercase; letter-spacing:.2cqw;
  background:rgba(0,0,0,.3); color:#fff; padding:.7cqw 2cqw; border-radius:99px; white-space:nowrap}
.karte-name{font-weight:900; font-size:6.3cqw; flex:1; min-width:0; line-height:1.05;
  text-shadow:0 1px 0 rgba(255,255,255,.4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.karte-kp{font-weight:900; font-size:6.8cqw; color:#a3121b; white-space:nowrap; line-height:1}
.karte-kp small{font-size:3.2cqw; margin-right:.5cqw; vertical-align:.4cqw}
.karte-typ{flex:none; width:8.6cqw; height:8.6cqw; border-radius:50%; display:grid; place-items:center;
  font-size:5cqw; background:radial-gradient(circle at 35% 30%, #fff, rgba(255,255,255,.75));
  box-shadow:0 .5cqw 1.4cqw rgba(0,0,0,.35), inset 0 0 0 .5cqw var(--t3,#fff)}

.karte-entw{display:flex; align-items:center; gap:1.4cqw; font-size:3.1cqw; margin:-.4cqw 0 -.2cqw;
  background:rgba(255,255,255,.55); border-radius:99px; padding:.3cqw 2.2cqw .3cqw .6cqw; align-self:flex-start;
  max-width:100%; white-space:nowrap; overflow:hidden}
.karte-entw svg{width:6.4cqw; height:6.4cqw; flex:none; background:rgba(255,255,255,.8); border-radius:50%}
.karte-entw span{overflow:hidden; text-overflow:ellipsis}

.karte-bild{
  flex:0 0 auto; height:62cqw; border:1.1cqw solid #d9b45c; border-radius:2cqw;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.95), rgba(255,255,255,.55) 45%, transparent 75%),
    linear-gradient(160deg, var(--t3,#ddd), var(--t1,#bbb));
  display:grid; place-items:center; overflow:hidden; position:relative;
  box-shadow:inset 0 0 3cqw rgba(0,0,0,.25);
}
.karte.d-silber .karte-bild{border-color:#c8d0dc}
.karte.d-holz .karte-bild{border-color:#8a5f38}
.karte-bild svg{width:100%; height:100%; display:block; position:relative}

.karte-info{font-size:2.8cqw; font-style:italic; font-weight:700; text-align:center; margin-top:-.6cqw;
  padding:.5cqw 2cqw; border-radius:99px; background:linear-gradient(90deg, transparent, rgba(255,236,170,.85), transparent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.karte-text{flex:1; display:flex; flex-direction:column; justify-content:center; gap:2cqw; min-height:0;
  background:rgba(255,255,255,.8); border-radius:2.2cqw; padding:1.8cqw 2.4cqw; color:#1a1a1a}
.angriff{display:grid; grid-template-columns:10.6cqw 1fr auto; align-items:center; gap:2cqw}
.angriff .a-name{font-weight:900; font-size:4.8cqw; line-height:1.08; min-width:0}
.angriff .a-name small{display:block; font-size:2.8cqw; font-weight:600; color:#3a3a3a; margin-top:.4cqw; line-height:1.2}
.angriff .a-schaden{font-weight:900; font-size:6.6cqw; color:#a3121b; min-width:9cqw; text-align:right}
.energie{display:flex; gap:.7cqw; flex-wrap:wrap; max-width:10.6cqw}
.energie i{width:4.6cqw; height:4.6cqw; border-radius:50%; display:block;
  background:radial-gradient(circle at 35% 30%, #fff 0 12%, var(--t3,#ffd36b) 40%, var(--t2,#a66) 100%);
  border:.45cqw solid rgba(0,0,0,.4)}
.energie.leer{font-weight:900; font-size:3.6cqw; opacity:.6}

.karte-werte{display:grid; grid-template-columns:repeat(3,1fr); gap:1cqw; text-align:center;
  background:rgba(255,255,255,.6); border-radius:2.2cqw; padding:1cqw 1.4cqw}
.karte-werte > span{display:grid; justify-items:center; align-content:center; gap:.4cqw; font-size:3.4cqw}
.karte-werte small{font-size:2.5cqw; text-transform:uppercase; letter-spacing:.2cqw; opacity:.72; font-weight:800}
.karte-werte b{font-weight:900; white-space:nowrap}
.karte-werte .energie{max-width:none; justify-content:center}
.karte-werte .energie i{width:3.6cqw; height:3.6cqw}

.karte-wissen{font-size:2.9cqw; font-style:italic; line-height:1.25; color:#262626;
  border:.35cqw solid rgba(0,0,0,.18); border-radius:1.6cqw; padding:1cqw 2cqw; background:rgba(255,255,255,.42)}

.karte-fuss{display:flex; align-items:center; gap:1.6cqw; font-size:2.9cqw; font-weight:800; color:#141414; min-width:0}
.karte-set{opacity:.78; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.karte-nr{margin-left:auto; opacity:.8; white-space:nowrap}
.seltenheit-sym{font-size:4.6cqw; font-weight:900; line-height:1}
.art-marke{font-size:2.7cqw; font-weight:900; padding:.4cqw 1.6cqw; border-radius:1.2cqw;
  background:#1b2340; color:#fff; white-space:nowrap}
.typ-chip{background:rgba(255,255,255,.8); border-radius:99px; padding:2px 7px;
  font-size:.58rem; font-weight:900; display:flex; align-items:center; gap:3px}

/* --- Alt-Art: großes Bild mit Strahlen --- */
.karte.art-altart .karte-bild{height:80cqw; border-width:.7cqw}
.karte.art-altart .karte-wissen,.karte.art-altart .karte-info{display:none}
.karte.art-altart .karte-entw{position:relative; z-index:2}   /* woraus es sich entwickelt, steht auf jeder Variante */
.karte.art-altart .karte-bild::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 115%, rgba(255,255,255,.85), transparent 55%),
    repeating-conic-gradient(from 0deg at 50% 120%, rgba(255,255,255,.5) 0 6deg, transparent 6deg 12deg);
}

/* --- Full-Art: Bild über die ganze Karte --- */
.karte.art-fullart .karte-bild{
  position:absolute; inset:0; height:auto; border:0; border-radius:0; margin:0;
  background:radial-gradient(circle at 50% 38%, rgba(255,255,255,.55), transparent 62%),
    linear-gradient(170deg, var(--t3,#ddd), var(--t2,#444));
}
.karte.art-fullart .karte-bild svg{width:120%; height:120%; margin:-10% 0 0}
.karte.art-fullart .karte-kopf,.karte.art-fullart .karte-text,.karte.art-fullart .karte-werte,
.karte.art-fullart .karte-fuss,.karte.art-fullart .karte-entw{position:relative; z-index:2}
.karte.art-fullart .karte-kopf{color:#fff; text-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.9)}
.karte.art-fullart .karte-name{text-shadow:0 .6cqw 2.4cqw rgba(0,0,0,.9)}
.karte.art-fullart .karte-kp{color:#ffd76a}
.karte.art-fullart .karte-text{flex:0 0 auto; margin-top:auto; background:rgba(12,14,28,.78); color:#fff; backdrop-filter:blur(3px)}
.karte.art-fullart .angriff .a-name small{color:#cfd6ee}
.karte.art-fullart .angriff .a-schaden{color:#ff9a9a}
.karte.art-fullart .karte-werte{background:rgba(12,14,28,.7); color:#fff}
.karte.art-fullart .karte-info,.karte.art-fullart .karte-wissen{display:none}
.karte.art-fullart .karte-fuss{color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8)}

/* --- Glitzer nach Seltenheit --- */
.glitzer{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:9px}
.glitzer::before{
  content:''; position:absolute; inset:-50%;
  background:linear-gradient(115deg, transparent 26%, rgba(255,255,255,.55) 40%,
    rgba(255,120,220,.4) 47%, rgba(120,220,255,.4) 54%, rgba(255,255,160,.45) 62%, transparent 76%);
  background-size:230% 230%; mix-blend-mode:color-dodge; opacity:0;
}
.karte[data-glitzer="1"] .glitzer::before{opacity:.55}
.karte[data-glitzer="2"] .glitzer::before{opacity:.8}
.karte[data-glitzer="3"] .glitzer::before{opacity:1}
.funke{position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 7px 2px rgba(255,255,255,.9); animation:funke-blitz 2.4s ease-in-out infinite}
@keyframes funke-blitz{
  0%,100%{transform:scale(0); opacity:0}
  45%{transform:scale(1.25); opacity:1}
  70%{transform:scale(0); opacity:0}
}
.karte[data-glitzer="2"] .karte-vor,.karte[data-glitzer="3"] .karte-vor{
  animation:karte-leuchten 2.4s ease-in-out infinite}
@keyframes karte-leuchten{
  0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 20px rgba(255,215,120,.3)}
  50%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 46px rgba(255,215,120,.75)}
}
.karte[data-seltenheit="legendaer"] .karte-vor{border-color:#ffd34d}
.karte[data-seltenheit="episch"] .karte-vor{border-color:#d8a8ff}

.neu-abzeichen{
  position:absolute; top:16cqw; left:2cqw; z-index:6;
  background:linear-gradient(135deg,#4fd18b,#0f9b5c); color:#fff; font-size:.66rem;
  font-weight:900; padding:4px 9px; border-radius:8px; transform:rotate(9deg);
  box-shadow:0 6px 16px rgba(0,0,0,.45); animation:neu-puls 1.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes neu-puls{0%,100%{transform:rotate(9deg) scale(1)}50%{transform:rotate(9deg) scale(1.12)}}
.karte.art-fullart .neu-abzeichen{top:14cqw; left:auto; right:3cqw}

.strahlen{position:absolute; inset:-60px; border-radius:50%; pointer-events:none; opacity:0; z-index:-1;
  background:conic-gradient(from 0deg, transparent 0 8deg, rgba(255,225,140,.55) 8deg 16deg, transparent 16deg 24deg)}
.karte.enthuellt .strahlen{animation:strahlen-burst 1s ease-out}
@keyframes strahlen-burst{
  0%{opacity:0; transform:scale(.4) rotate(0)} 30%{opacity:.95}
  100%{opacity:0; transform:scale(1.6) rotate(120deg)}
}
@keyframes buehne-beben{
  0%,100%{transform:translate(0)} 20%{transform:translate(-8px,5px)}
  40%{transform:translate(8px,-6px)} 60%{transform:translate(-6px,-4px)} 80%{transform:translate(6px,5px)}
}
.beben{animation:buehne-beben .45s ease}

/* ---- Belohnung nach 4 Aufgaben ---- */
.belohnung{text-align:center; display:grid; justify-items:center; gap:14px; width:min(620px,100%)}
.belohnung h2{font-size:1.6rem; margin:0;
  background:linear-gradient(90deg,#fff,var(--gold)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.belohnung-pack{display:grid; place-items:center}
.belohnung-pack .pack-objekt{width:160px; height:226px; cursor:default}
.belohnung-pack .pack-titel{font-size:1.1rem}
.belohnung-pack .pack-logo{width:56px; height:56px; font-size:1.5rem; border-radius:16px}
.belohnung-text{margin:0; color:var(--schwach); font-size:.92rem; line-height:1.6}
.belohnung-text strong{color:var(--gold)}
.belohnung-frage{margin:2px 0 0; font-weight:900; font-size:1rem}

/* ---- Zusammenfassung ---- */
.zusammenfassung{text-align:center; width:min(920px,100%)}
.zusammenfassung h2{font-size:1.55rem; margin-bottom:8px;
  background:linear-gradient(90deg,#fff,var(--gold)); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.sterne-gewinn{color:var(--gold); font-weight:900; margin:0 0 18px; font-size:.95rem; min-height:20px}
.zusammenfassung-karten{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-bottom:22px}
.mini-karte{width:106px; border-radius:12px; padding:7px; border:2px solid var(--rand);
  background:rgba(255,255,255,.07); cursor:pointer; transition:.18s; position:relative}
.mini-karte:active{transform:scale(.95)}
.mini-karte svg{width:100%; height:64px; display:block}
.mini-karte b{display:block; font-size:.68rem; margin-top:3px}
.mini-karte span{font-size:.6rem; color:var(--schwach)}
.mini-karte.neu{border-color:var(--gruen); box-shadow:0 0 16px rgba(79,209,139,.35)}
.mini-karte.neu::after{content:'NEU'; position:absolute; top:-8px; right:-6px; background:var(--gruen);
  color:#052; font-size:.54rem; font-weight:900; padding:2px 6px; border-radius:6px}
.mini-karte .var{position:absolute; top:-8px; left:-6px; font-size:.54rem; font-weight:900;
  padding:2px 6px; border-radius:6px; background:var(--blau); color:#fff}
.mini-karte .var.fa{background:var(--gold); color:#3a2a00}
.zusammenfassung-leiste{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

/* ---- Detail ---- */
.detail-huelle{display:grid; place-items:center; gap:14px; position:relative; width:min(760px,100%)}
.detail-huelle .karte{--kb:min(360px, 84vw, 62vh); cursor:default; margin-inline:auto}
.detail-zu{position:absolute; top:-6px; right:0; z-index:5}
.blaetter-knopf{position:absolute; top:50%; transform:translateY(-50%);
  border:1px solid var(--rand); background:rgba(255,255,255,.1); color:#fff;
  width:56px; height:56px; border-radius:50%; font-size:2rem; cursor:pointer; line-height:1}
.blaetter-knopf:active{transform:translateY(-50%) scale(.9)}
.blaetter-knopf.links{left:0} .blaetter-knopf.rechts{right:0}
@media(max-width:720px){.blaetter-knopf{width:48px;height:48px;font-size:1.6rem}
  .blaetter-knopf.links{left:-4px}.blaetter-knopf.rechts{right:-4px}}
/* Handy: Die große Karte füllt die Breite – Schließen und Blättern kommen in eine Leiste darüber,
   sonst liegen sie auf der Karte (Wischen zum Blättern geht weiterhin) */
@media(max-width:600px){
  .detail-huelle{padding-top:54px}
  .detail-zu{top:0}
  .blaetter-knopf{top:0; transform:none; width:46px; height:46px}
  .blaetter-knopf:active{transform:scale(.9)}
  .blaetter-knopf.links{left:0} .blaetter-knopf.rechts{right:58px}
}
.detail-varianten{display:flex; gap:9px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.07); border:1px solid var(--rand); border-radius:14px; padding:11px 16px}
.var-knopf{border:1px solid var(--rand); background:rgba(255,255,255,.07); color:var(--text);
  padding:9px 15px; border-radius:10px; cursor:pointer; font:inherit; font-size:.78rem; font-weight:800}
.var-knopf.aktiv{background:var(--blau); border-color:var(--blau); color:#fff}
.var-knopf:disabled{opacity:.35; cursor:default}
.detail-info{background:rgba(255,255,255,.07); border:1px solid var(--rand); border-radius:13px;
  padding:11px 18px; display:flex; gap:18px; font-size:.82rem; flex-wrap:wrap; justify-content:center}
.detail-info b{color:var(--gold)}

/* Entwicklungsreihe */
.detail-reihe{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid var(--rand); border-radius:14px; padding:10px 16px}
.reihe-titel{font-size:.7rem; font-weight:900; letter-spacing:1.4px; color:var(--schwach);
  text-transform:uppercase; width:100%; text-align:center}
.reihe-pfeil{color:var(--schwach); font-size:1.1rem}
.reihe-glied{background:transparent; border:2px solid transparent; border-radius:12px;
  cursor:pointer; padding:4px; display:grid; justify-items:center; gap:1px; color:var(--text); font:inherit}
.reihe-glied svg{width:56px; display:block}
.reihe-glied span{font-size:.62rem; font-weight:800}
.reihe-glied.aktiv{border-color:var(--gold); background:rgba(255,204,51,.12)}
.reihe-glied.fehlt{opacity:.5}
.reihe-glied:active{transform:scale(.94)}

/* Neuigkeiten */
.neuigkeiten-inhalt h3{color:var(--gold); text-transform:none; letter-spacing:0; font-size:1rem; margin-top:14px}
.neuigkeiten-inhalt ul{margin:0; padding-left:20px; color:var(--schwach); font-size:.88rem; line-height:1.7}
.neuigkeiten-inhalt li{margin-bottom:3px}

/* ===================== Urkunde ===================== */
.urkunde-huelle{display:grid; place-items:center; gap:16px}
.gesperrt-panel{max-width:560px; text-align:center}
.schloss{font-size:3.2rem; margin-bottom:8px; animation:logo-wippen 3s ease-in-out infinite}
.gesperrt-zahl{color:var(--schwach); font-size:.88rem}
.gesperrt-zahl span{color:var(--gold); font-weight:900}
.urkunde-frei{display:grid; gap:15px; justify-items:center; width:100%}
.namens-zeile{display:flex; gap:11px; align-items:center; flex-wrap:wrap; justify-content:center}
.namens-zeile label{font-weight:700; font-size:.88rem}
#urkunde-name{background:rgba(255,255,255,.08); border:1px solid var(--rand); color:var(--text);
  padding:13px 16px; border-radius:12px; font:inherit; font-size:1rem; min-width:210px;
  min-height:var(--tippziel)}
#urkunde-leinwand{width:100%; max-width:1000px; height:auto; border-radius:16px;
  box-shadow:0 26px 70px rgba(0,0,0,.6); background:#fff}

/* ===================== Konfetti & Toast ===================== */
#konfetti{position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden}
.schnipsel{position:absolute; width:11px; height:16px; border-radius:2px; animation:fallen linear forwards}
@keyframes fallen{
  from{transform:translateY(-20px) rotate(0); opacity:1}
  to{transform:translateY(105vh) rotate(720deg); opacity:.15}
}
.toast{
  position:fixed; left:50%; transform:translateX(-50%); z-index:300;
  bottom:calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(135deg,#1d2a5c,#2b1b55); border:1px solid var(--rand);
  color:#fff; padding:14px 24px; border-radius:14px; font-weight:800; font-size:.9rem;
  box-shadow:0 16px 40px rgba(0,0,0,.5); animation:toast-rein .35s cubic-bezier(.2,1.3,.4,1);
  max-width:calc(100vw - 32px); text-align:center;
}
@keyframes toast-rein{from{transform:translate(-50%,24px); opacity:0}to{transform:translate(-50%,0); opacity:1}}

/* ===================== Touch / kleine Geräte ===================== */
@media (hover:hover) and (pointer:fine){
  .reiter-knopf:hover{color:#fff}
  .segment button:hover{color:#fff}
  .icon-knopf:hover{background:rgba(255,255,255,.16); transform:translateY(-2px)}
  .gross-knopf:hover{transform:translateY(-3px) scale(1.012)}
  .text-knopf:hover{background:rgba(255,255,255,.16)}
  .album-feld:hover{transform:translateY(-6px) scale(1.05); box-shadow:0 14px 30px rgba(0,0,0,.5); z-index:2}
  .antwort:hover:not(:disabled){background:rgba(255,255,255,.17); transform:translateY(-3px); border-color:var(--blau)}
  .mini-karte:hover{transform:translateY(-6px); background:rgba(255,255,255,.15)}
  .blaetter-knopf:hover{background:rgba(255,255,255,.24)}
  .shop-karte:hover{transform:translateY(-4px)}
  .besondere-chip:hover{background:rgba(255,255,255,.16)}
}
@media(max-width:700px){
  .kopf{gap:10px} .marke-text{display:none}
  .reiter{order:3; width:100%; justify-content:space-between}
  .reiter-knopf{flex:1; padding:11px 8px; font-size:.8rem; text-align:center}
  .karten-stapel{gap:9px} .karten-stapel .karte{--kb:min(44vw, 200px)}
  .season-banner h2{font-size:1.3rem}
  main{padding-bottom:90px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ===================== Version 4: Konto, Tausch, Pause ===================== */

/* Kopfleiste */
.spielzeit{display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.07);
  border:1px solid var(--rand); padding:9px 13px; border-radius:999px;
  font-weight:800; font-size:.82rem; color:var(--schwach)}
.spielzeit.knapp{border-color:rgba(255,180,80,.5); color:#ffcb7a; background:rgba(255,180,80,.12)}
.konto-chip{background:rgba(90,169,255,.16); border:1px solid rgba(90,169,255,.4);
  color:#cfe3ff; padding:9px 14px; border-radius:999px; font-weight:800; font-size:.8rem;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media(max-width:820px){.spielzeit{display:none} .konto-chip{display:none}}

/* Anmeldung */
.aufgabe-box.schmal{width:min(420px,100%)}
.aufgabe-box.schmal h2{font-size:1.3rem; margin:8px 0 12px}
.feld-zeile{display:grid; gap:5px; margin-bottom:12px}
.feld-zeile label{font-size:.78rem; color:var(--schwach); font-weight:700}
.feld-zeile input{background:rgba(255,255,255,.08); border:1px solid var(--rand); color:var(--text);
  padding:13px 15px; border-radius:12px; font:inherit; font-size:.95rem; min-height:var(--tippziel)}
.feld-zeile input:focus{outline:2px solid var(--blau); outline-offset:1px}
#anmeldung-wechsel{margin-bottom:16px; flex-wrap:wrap}
.anmeldung-fehler{color:#ff9a9a; font-size:.84rem; font-weight:700; min-height:18px; margin:0 0 10px}

/* Pause */
.pause-overlay{background:radial-gradient(circle at 50% 40%, rgba(30,60,50,.96), rgba(4,10,8,.99)); z-index:400}
.pause-box{text-align:center; max-width:440px; display:grid; gap:14px; justify-items:center; padding:20px}
.pause-gesicht{font-size:4.5rem; animation:logo-wippen 3s ease-in-out infinite}
.pause-box h2{font-size:1.7rem; margin:0;
  background:linear-gradient(90deg,#fff,#8ff0c0); -webkit-background-clip:text; background-clip:text; color:transparent}
.pause-box p{margin:0; color:#c8d8d0; font-size:.95rem; line-height:1.6}
.pause-klein{font-size:.82rem !important; color:#8fa89c !important}
.pause-uhr-huelle{position:relative; width:150px; height:150px; display:grid; place-items:center; margin:6px 0}
.pause-kreis{position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(#4fd18b calc(var(--anteil,0) * 360deg), rgba(255,255,255,.12) 0);
  mask:radial-gradient(circle, transparent 62%, #000 63%);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 63%)}
.pause-uhr{font-size:2.3rem; font-weight:900; color:#8ff0c0; font-variant-numeric:tabular-nums}

/* Stufenanzeige */
.nv-zaehler{min-width:46px; text-align:right; font-size:.7rem; color:var(--schwach); font-weight:700}

/* Tausch */
.tausch-inhalt{display:grid; gap:18px}
.tausch-liste{display:grid; gap:9px}
.tausch-zeile{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--rand); border-radius:14px; padding:9px 13px}
.tz-bild{width:52px; flex:none}
.tz-bild svg{width:100%; display:block}
.tz-text{flex:1; display:grid}
.tz-text b{font-size:.92rem}
.tz-text span{font-size:.72rem; color:var(--schwach)}
.tausch-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:11px}
.tausch-karte{border:1px solid var(--rand); background:rgba(255,255,255,.05); border-radius:14px;
  padding:8px 6px; display:grid; justify-items:center; gap:2px; cursor:pointer; color:var(--text);
  font:inherit; transition:.18s}
.tausch-karte svg{width:100%; max-width:76px; display:block}
.tausch-karte b{font-size:.76rem}
.tausch-karte span{font-size:.66rem; color:var(--schwach)}
.tausch-karte .tk-aktion{margin-top:4px; font-size:.66rem; font-weight:900; color:#fff;
  background:linear-gradient(135deg,var(--blau),var(--lila)); padding:4px 10px; border-radius:99px}
.tausch-karte.passend{cursor:default}
.tausch-karte.passend .tk-aktion{background:rgba(255,204,51,.2); color:var(--gold)}
.tausch-karte:active{transform:scale(.95)}

/* Bonus-Karte */
.bonus-karte .karte-vor.bonus-vor{
  background:linear-gradient(160deg,#ffd76a,#ff9d3c 55%,#c9622c);
  display:grid; place-items:center; border-color:#fff0c0}
.bonus-inhalt{display:grid; justify-items:center; gap:2px; position:relative; z-index:2;
  text-shadow:0 2px 10px rgba(0,0,0,.4)}
.bonus-stern{font-size:3.2rem; animation:neu-puls 1.4s ease-in-out infinite}
.bonus-zahl{font-size:2rem; color:#fff; font-weight:900}
.bonus-text{font-size:.74rem; font-weight:900; color:#5a3200; letter-spacing:1px}
.mini-karte.bonus{border-color:rgba(255,204,51,.6); background:rgba(255,204,51,.12)}
.mini-bonus{font-size:2.6rem; line-height:1.2}

/* Unikat */
.art-marke.unikat{background:linear-gradient(135deg,#ffd24a,#ff6ad5); color:#2a1030}
.mini-karte.unikat{border-color:#ffd24a; box-shadow:0 0 22px rgba(255,210,74,.45)}
.mini-karte .var.uni{background:linear-gradient(135deg,#ffd24a,#ff6ad5); color:#2a1030}
.album-feld .var-marke i.uni{background:linear-gradient(135deg,#ffd24a,#ff6ad5); color:#2a1030}
.besondere-chip.uni{border-color:#ffd24a; background:rgba(255,210,74,.15)}
.karte[data-glitzer="4"] .karte-vor{animation:unikat-leuchten 2s ease-in-out infinite}
@keyframes unikat-leuchten{
  0%,100%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 24px rgba(255,210,74,.6)}
  50%{box-shadow:0 16px 40px rgba(0,0,0,.55), 0 0 60px rgba(255,120,220,.9)}
}
.karte[data-glitzer="4"] .glitzer::before{opacity:1; animation:holo-wandern 3s linear infinite}
@keyframes holo-wandern{from{background-position:0% 50%}to{background-position:200% 50%}}

/* Kartenränder */
.kartenrand{position:absolute; inset:0; pointer-events:none; border-radius:9px; z-index:3}
.karte.rand-punkte .kartenrand{
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) top/100% 3px no-repeat,
             repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) bottom/100% 3px no-repeat,
             repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) left/3px 100% no-repeat,
             repeating-linear-gradient(0deg, rgba(255,255,255,.85) 0 4px, transparent 4px 10px) right/3px 100% no-repeat;
  opacity:.75}
.karte.rand-zacken .kartenrand{
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.9) 0 5px, transparent 5px 10px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:4px; opacity:.55}
.karte.rand-foliengold .kartenrand{
  background:linear-gradient(115deg,#c9962c,#ffe9a3 45%,#c9962c 60%,#fff6d0 80%,#c9962c);
  background-size:250% 100%; animation:rand-wandern 4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:4px}
.karte.rand-regenbogen .kartenrand{
  background:linear-gradient(90deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff,#c77dff,#ff6ad5);
  background-size:300% 100%; animation:rand-wandern 5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px}
.karte.rand-sternen .kartenrand{
  background:radial-gradient(circle, #fff 1px, transparent 1.6px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:6px;
  animation:rand-funkeln 2.2s ease-in-out infinite}
.karte.rand-flammen .kartenrand{
  background:linear-gradient(0deg,#ff3c00,#ffb03a 40%,#ffe14d 70%,#ff6b2c);
  background-size:100% 250%; animation:rand-lodern 2.4s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px}
@keyframes rand-wandern{from{background-position:0% 50%}to{background-position:250% 50%}}
@keyframes rand-lodern{from{background-position:50% 0%}to{background-position:50% 250%}}
@keyframes rand-funkeln{0%,100%{opacity:.45}50%{opacity:1}}

/* Karten-Designs neu */
.karte.d-obsidian .karte-vor{border-color:#1a1a24;
  box-shadow:inset 0 0 0 2px rgba(255,210,90,.5), 0 16px 40px rgba(0,0,0,.6)}
.karte.d-eis .karte-vor{border-color:#bdf0ff;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.7), 0 16px 40px rgba(0,0,0,.5)}

/* Shop-Extras */
.karte.extra-aura[data-glitzer="2"] .karte-vor,
.karte.extra-aura[data-glitzer="3"] .karte-vor,
.karte.extra-aura[data-glitzer="4"] .karte-vor{filter:drop-shadow(0 0 14px rgba(180,140,255,.75))}
.karte.extra-thron[data-seltenheit="legendaer"] .strahlen{opacity:.5;
  animation:thron-dreh 9s linear infinite;
  background:conic-gradient(from 0deg, transparent 0 6deg, rgba(255,215,110,.7) 6deg 12deg, transparent 12deg 18deg)}
@keyframes thron-dreh{to{transform:rotate(360deg)}}

.rand-vorschau{position:absolute; inset:0; background:linear-gradient(160deg,#3a4468,#222a45);
  display:grid; place-items:center}
.rand-vorschau span{width:62%; height:62%; border-radius:6px; display:block}
.rand-vorschau.rand-standard span{border:2px solid #8b93ad}
.rand-vorschau.rand-punkte span{border:3px dotted #fff}
.rand-vorschau.rand-zacken span{border:3px dashed #fff}
.rand-vorschau.rand-foliengold span{border:4px solid #ffd966}
.rand-vorschau.rand-regenbogen span{border:4px solid; border-image:linear-gradient(90deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff) 1}
.rand-vorschau.rand-sternen span{border:4px double #fff}
.rand-vorschau.rand-flammen span{border:4px solid #ff7a2c; box-shadow:0 0 14px #ff7a2c}
.extra-vorschau{position:absolute; inset:0; display:grid; place-items:center; font-size:2rem;
  background:rgba(255,255,255,.05)}
.extra-vorschau.extra-aura{background:radial-gradient(circle,#6b4bb8,#1b1030)}
.extra-vorschau.extra-thron{background:radial-gradient(circle,#c9962c,#2a1d05)}
.extra-vorschau.extra-funkeln{background:radial-gradient(circle,#3d5aa8,#101838)}

/* ---- Aufgaben-Overlay aufgeräumt ---- */
.aufgabe-kopf{justify-content:space-between; flex-wrap:nowrap}
.kopf-werkzeuge{display:flex; gap:7px; margin-left:auto}
#vorlesen-knopf{margin-left:0}
.aufgabe-leiste{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.aufgabe-leiste .mini-schritte{flex:1; margin:0}
.leiste-info{font-size:.72rem; color:var(--schwach); font-weight:700; white-space:nowrap}
.leiste-info b{color:var(--gold)}
@media(max-width:460px){ .leiste-info{font-size:.66rem} }

.feld-hilfe{font-size:.72rem; color:var(--schwach); line-height:1.45; margin-top:2px}

/* ===================== Beta-Kennzeichnung & Rechtliches ===================== */
.beta-marke{
  font-size:.52rem; font-weight:900; letter-spacing:1.4px; vertical-align:middle;
  background:linear-gradient(135deg,#ff8b4d,#c31432); color:#fff;
  padding:3px 7px; border-radius:6px; margin-left:6px;
  -webkit-text-fill-color:#fff; box-shadow:0 3px 10px rgba(195,20,50,.4);
}

.fusszeile{
  margin-top:40px; padding:22px clamp(14px,3vw,28px);
  border-top:1px solid var(--rand); background:rgba(255,255,255,.035);
  border-radius:var(--radius); display:grid; gap:12px; justify-items:center; text-align:center;
}
.fuss-hinweis{margin:0; font-size:.8rem; color:var(--schwach); line-height:1.6; max-width:720px}
.fuss-hinweis strong{color:#ffcb7a}
.fuss-nav{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.fuss-nav a{color:var(--schwach); font-size:.85rem; font-weight:700; text-decoration:none;
  padding:9px 4px; min-height:var(--tippziel); display:flex; align-items:center}
.fuss-nav a:hover{color:var(--text); text-decoration:underline}

/* Willkommens-Hinweis */
.willkommen-punkte{display:grid; gap:12px; margin:4px 0 16px}
.wp{display:flex; gap:12px; align-items:flex-start; font-size:.86rem;
  color:var(--schwach); line-height:1.55}
.wp b{color:var(--text)}
.wp-zeichen{font-size:1.4rem; line-height:1.2; flex:none}
.willkommen-recht{text-align:center; font-size:.8rem; margin:0 0 16px}
.willkommen-recht a{color:var(--schwach)}

/* Rechtsseiten (Impressum, Datenschutz) */
body.rechtsseite{padding:0}
.rechts-huelle{max-width:820px; margin:0 auto; padding:26px clamp(14px,4vw,34px) 70px;
  position:relative; z-index:1}
.zurueck-link{display:inline-flex; align-items:center; min-height:var(--tippziel);
  color:var(--schwach); text-decoration:none; font-weight:700; font-size:.88rem; margin-bottom:10px}
.zurueck-link:hover{color:var(--text)}
.rechts-text{background:var(--panel); border:1px solid var(--rand); border-radius:var(--radius);
  padding:clamp(20px,4vw,36px); backdrop-filter:blur(10px); box-shadow:var(--schatten);
  -webkit-user-select:text; user-select:text}
.rechts-text h1{font-size:1.7rem; margin:0 0 22px;
  background:linear-gradient(90deg,#fff,#ffd76a); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.rechts-text h2{font-size:1.02rem; margin:26px 0 8px; color:var(--text);
  text-transform:none; letter-spacing:0}
.rechts-text p{margin:0 0 12px; font-size:.9rem; line-height:1.7; color:#ccd5ea}
.rechts-text ul{margin:0 0 14px; padding-left:22px; font-size:.9rem; line-height:1.8; color:#ccd5ea}
.rechts-text li{margin-bottom:4px}
.rechts-text a{color:#8ab6ff}
.rechts-text code{background:rgba(255,255,255,.1); padding:1px 6px; border-radius:5px;
  font-size:.84em; color:#ffd76a}
.rechts-text strong{color:var(--text)}
.stand{margin-top:28px !important; font-size:.8rem !important; color:var(--schwach) !important;
  font-style:italic}
.fuss-links{margin-top:18px !important; padding-top:16px; border-top:1px solid var(--rand);
  font-size:.86rem !important}

.hinweis-kasten{border-radius:14px; padding:16px 20px; margin:20px 0;
  border:1px solid var(--rand); background:rgba(255,255,255,.05)}
.hinweis-kasten h2{margin-top:0 !important}
.hinweis-kasten p:last-child{margin-bottom:0}
.hinweis-kasten.beta{border-color:rgba(255,139,77,.45); background:rgba(255,139,77,.1)}
.hinweis-kasten.ki{border-color:rgba(138,92,255,.45); background:rgba(138,92,255,.1)}
.hinweis-kasten.gut{border-color:rgba(79,209,139,.45); background:rgba(79,209,139,.1)}

/* ===================== Version 5: Season 2, Glück, Bestenliste ===================== */

/* 10 Schritte bis zum Pack */
.schritte{gap:5px}
.schritte i{height:12px}
.mini-schritte{gap:4px}

/* Belohnung: zwei Packs, Bonus-Sterne */
.belohnung-packs{display:flex; gap:16px; justify-content:center; align-items:center}
.belohnung-packs.doppelt .pack-objekt:first-child{transform:rotate(-7deg)}
.belohnung-packs.doppelt .pack-objekt:last-child{transform:rotate(7deg)}
.belohnung-bonus{margin-top:12px; font-size:1.5rem; font-weight:900; color:var(--gold);
  text-shadow:0 0 18px rgba(255,204,51,.7); animation:neu-puls 1.2s ease-in-out infinite}

/* Halloween-Thema für die ganze Seite, sobald Season 2 gewählt ist */
body.thema-halloween{
  background:
    radial-gradient(1000px 650px at 12% -10%, #4a1f78 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #7a3310 0%, transparent 55%),
    linear-gradient(180deg,#0e0818 0%, #1c0f2e 100%);
  background-attachment:fixed;
}
body.thema-halloween .season-banner{
  background:linear-gradient(120deg, rgba(123,63,209,.4), rgba(255,138,31,.25) 60%, rgba(20,10,36,.4));
  border-color:rgba(255,138,31,.35)
}
body.thema-halloween .season-banner::before{
  content:'🦇  🎃  🦇'; position:absolute; right:clamp(160px,28vw,340px); top:14px;
  font-size:1.3rem; letter-spacing:10px; opacity:.55; animation:fledermaus-schweben 5s ease-in-out infinite;
  pointer-events:none
}
@keyframes fledermaus-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body.thema-halloween .season-marke{color:#ff9a3c}
body.thema-halloween .reiter-knopf.aktiv{background:linear-gradient(135deg,#ff8a1f,#7b3fd1);
  box-shadow:0 6px 18px rgba(255,138,31,.35)}
body.thema-halloween .gross-knopf:not(.blau){background:linear-gradient(135deg,#ff8a1f,#c2410c 55%,#6b21a8)}
body.thema-halloween .schritte i.voll,
body.thema-halloween .mini-schritte i.voll{background:linear-gradient(90deg,#ff8a1f,#b16cff)}
@media(max-width:700px){body.thema-halloween .season-banner::before{display:none}
body.thema-halloween .season-banner{background:linear-gradient(120deg, rgba(74,31,120,.92), rgba(122,51,16,.85) 65%, rgba(30,14,48,.92))}}

/* Karten aus Season 2 */
.karte.thema-halloween .karte-vor{background:linear-gradient(165deg, var(--t1,#888) 0%, #2a1540 88%)}
.karte.thema-halloween .karte-bild{
  background:
    radial-gradient(circle at 78% 22%, #fff4c2 0 9%, rgba(255,244,194,.25) 10%, transparent 17%),
    linear-gradient(180deg,#2d1a52 0%, #6b3a8c 62%, #e8843a 100%)}
.karte.thema-halloween.art-fullart .karte-bild{
  background:
    radial-gradient(circle at 80% 18%, #fff4c2 0 7%, transparent 13%),
    linear-gradient(180deg,#1a0f33 0%, #4a2470 60%, #c2621f 100%)}
.karte.thema-halloween .karte-text{background:rgba(255,248,238,.85)}
.karte.thema-halloween .karte-kopf .karte-name{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.karte.thema-halloween .karte-fuss{color:#f4ecff}
.karte.thema-halloween .karte-werte{background:rgba(255,248,238,.8)}

/* Shop */
.shop-season{position:absolute; top:10px; left:10px; font-size:.6rem; font-weight:900;
  padding:3px 8px; border-radius:6px; background:linear-gradient(135deg,#ff8a1f,#7b3fd1); color:#fff; z-index:2}
.shop-karte.saison-artikel{border-color:rgba(255,138,31,.35)}

/* Tausch */
.tausch-info{padding:14px 18px; background:rgba(123,63,209,.14); border-color:rgba(177,108,255,.35)}
.tausch-bald{text-align:center}
.tausch-bald-icon{font-size:3rem; display:block; margin-bottom:6px; animation:fledermaus-schweben 3s ease-in-out infinite}

/* Bestenliste */
.bestenliste-inhalt{display:grid; gap:16px}
.bestenliste-raster{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:820px){.bestenliste-raster{grid-template-columns:1fr}}
.bl-liste{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.bl-zeile{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.05);
  border:1px solid var(--rand); border-radius:12px; padding:10px 14px; font-size:.92rem}
.bl-zeile.ich{border-color:var(--gold); background:rgba(255,204,51,.12)}
.bl-platz{min-width:30px; text-align:center; font-weight:900; font-size:1.05rem}
.bl-name{flex:1; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bl-wert{font-weight:900; color:var(--gold)}
.bl-urkunden{display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.bl-urkunden i{font-style:normal; font-size:.72rem; font-weight:900; padding:3px 8px; border-radius:7px;
  background:rgba(255,255,255,.1)}
.bl-meins{margin:14px 0 0; font-size:.86rem; color:var(--schwach)}
.bl-meins strong{color:var(--gold)}
.bl-versteckt{text-align:center}
.anmeldung-schalter{margin:0 0 10px; font-size:.82rem}

/* Flatternde Tiere bei Pack-Animationen */
.schwarm-tier{position:absolute; animation:schwarm-flug 2.2s cubic-bezier(.3,.6,.4,1) forwards; will-change:transform}
@keyframes schwarm-flug{
  0%{transform:translate(0,0) scale(.4); opacity:0}
  15%{opacity:1}
  100%{transform:translate(var(--dx), var(--dy)) scale(1.2) rotate(20deg); opacity:0}
}
.pack-objekt.weg-feuerwerk{animation:pack-weg .45s ease forwards}
.pack-objekt.weg-fledermausschwarm{animation:pack-davon 1.1s cubic-bezier(.5,0,.6,1) forwards}
@keyframes pack-davon{30%{transform:translateY(12px) rotate(-6deg)}100%{transform:translate(40vw,-70vh) rotate(35deg) scale(.3); opacity:0}}
.pack-objekt.weg-geisterspuk{animation:pack-geist 1.1s ease forwards}
@keyframes pack-geist{50%{opacity:.35; filter:blur(2px) brightness(1.6)}100%{opacity:0; transform:translateY(-60px) scale(1.15); filter:blur(10px)}}

/* Neue Aufgaben-Hintergründe */
.hg-weltall{background:radial-gradient(circle at 75% 25%, rgba(255,155,224,.28), transparent 35%), linear-gradient(160deg,rgba(10,6,32,.7),rgba(42,22,96,.55))}
.hg-polarlicht{background:linear-gradient(170deg, transparent 20%, rgba(29,122,90,.4) 50%, rgba(90,63,168,.35) 75%, transparent)}
.hg-wolkenschloss{background:linear-gradient(180deg,rgba(255,179,107,.3),rgba(185,216,255,.25))}
.hg-lavahoehle{background:radial-gradient(circle at 50% 120%, rgba(255,106,44,.55), transparent 60%)}
.hg-kristallhoehle{background:linear-gradient(135deg,rgba(74,58,138,.45),rgba(122,214,255,.3))}
.hg-kuerbisfeld{background:radial-gradient(circle at 80% 18%, rgba(255,243,176,.35), transparent 15%), linear-gradient(180deg, transparent 55%, rgba(63,90,29,.45))}
.hg-spukschloss{background:radial-gradient(circle at 20% 20%, rgba(255,243,176,.3), transparent 14%), linear-gradient(180deg,rgba(42,20,80,.6),rgba(18,10,36,.6))}

/* Neue Kartenrückseiten */
.karte-rueck.r-holo{border-color:#fff;
  background:linear-gradient(115deg,#ff6ad5,#ffd93d 25%,#4fd18b 45%,#5aa9ff 65%,#c77dff 85%,#ff6ad5);
  background-size:250% 250%; animation:rand-wandern 6s linear infinite}
.karte-rueck.r-kuerbis{border-color:#ffb36b;
  background:radial-gradient(circle at 50% 50%, #ff8a1f 0 30%, transparent 31%), repeating-linear-gradient(90deg,#2a1540 0 12px,#3a1f5c 12px 24px)}
.karte-rueck.r-fledermaus{border-color:#c8b8ff;
  background:radial-gradient(circle at 50% 45%, #fff4c2 0 28%, #ffe38a 29%, transparent 31%), linear-gradient(180deg,#120a24,#3a1f5c)}
.karte-rueck.r-spinnennetz{border-color:#d8d8e8;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.22) 0 2deg, transparent 2deg 30deg),
             repeating-radial-gradient(circle at 50% 50%, transparent 0 14px, rgba(255,255,255,.2) 15px 16px), #1a1426}

/* Neue Kartendesigns */
.karte.d-diamant .karte-vor{border-color:#e8f6ff;
  box-shadow:inset 0 0 0 2px rgba(120,200,255,.8), 0 0 18px rgba(180,230,255,.55), 0 16px 40px rgba(0,0,0,.5)}
.karte.d-kuerbisrahmen .karte-vor{border-color:#ff8a1f; box-shadow:inset 0 0 0 3px #6b2fa8, 0 16px 40px rgba(0,0,0,.5)}
.karte.d-mondnacht .karte-vor{border-color:#c8d2ff; box-shadow:inset 0 0 0 2px #1b2a6b, 0 0 16px rgba(200,210,255,.35), 0 16px 40px rgba(0,0,0,.5)}

/* Neue Kartenränder */
.karte.rand-blitze .kartenrand{
  background:repeating-linear-gradient(60deg, #ffe14d 0 3px, transparent 3px 14px);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px; animation:rand-funkeln .9s steps(2) infinite}
.karte.rand-spinnweben .kartenrand{
  background:
    radial-gradient(circle at 0 0, transparent 0 10px, rgba(255,255,255,.55) 11px 12px, transparent 13px 20px, rgba(255,255,255,.45) 21px 22px, transparent 23px) top left/46px 46px no-repeat,
    radial-gradient(circle at 100% 100%, transparent 0 10px, rgba(255,255,255,.55) 11px 12px, transparent 13px 20px, rgba(255,255,255,.45) 21px 22px, transparent 23px) bottom right/46px 46px no-repeat}
.karte.rand-kerzenschein .kartenrand{
  background:linear-gradient(0deg,#ffb13b,#ffe7a0 50%,#ff8a1f); background-size:100% 300%;
  animation:rand-lodern 1.6s ease-in-out infinite alternate;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:4px; filter:drop-shadow(0 0 6px #ffb13b)}

/* Neue große Stücke */
.karte.extra-galaxie[data-seltenheit="episch"] .karte-bild,
.karte.extra-galaxie[data-seltenheit="legendaer"] .karte-bild{
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 70% 20%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 40% 75%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 65%, #ffe6ff 0 1px, transparent 2px),
    radial-gradient(ellipse at 60% 50%, rgba(199,125,255,.55), transparent 55%),
    linear-gradient(160deg,#0a0620,#2a1660 60%,#5a1f6e)}
.geister-schweif{position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; border-radius:9px}
.geister-schweif i{position:absolute; font-style:normal; font-size:1rem; opacity:0; animation:geist-kreisen 4.5s ease-in-out infinite}
.geister-schweif i:nth-child(1){left:8%; top:30%}
.geister-schweif i:nth-child(2){right:10%; top:12%; animation-delay:1.5s}
.geister-schweif i:nth-child(3){left:45%; bottom:26%; animation-delay:3s}
@keyframes geist-kreisen{0%,100%{opacity:0; transform:translateY(8px)}40%{opacity:.85}60%{opacity:.85; transform:translateY(-10px)}}
.extra-vorschau.extra-geisterschweif{background:radial-gradient(circle,#4a2470,#120a24)}
.extra-vorschau.extra-galaxie{background:radial-gradient(circle,#5a1f6e,#0a0620)}
.extra-vorschau.extra-regenbogenholo{background:linear-gradient(120deg,#ff6ad5,#ffd93d,#4fd18b,#5aa9ff,#c77dff)}
.rand-vorschau.rand-blitze span{border:4px dashed #ffe14d}
.rand-vorschau.rand-spinnweben span{border:3px dotted #e8e8f4; border-radius:14px}
.rand-vorschau.rand-kerzenschein span{border:4px solid #ffb13b; box-shadow:0 0 14px #ffb13b}

/* =====================================================================
   Version 6: Gestaltung – Lesbarkeit, klarere Knöpfe, Halloween-Kulisse
   ===================================================================== */

/* ---------- Schrift & Kontrast ----------
   ui-rounded ist die runde Systemschrift von iPad/iPhone/Mac (gut lesbar für Kinder).
   Es wird keine Schrift aus dem Internet geladen. */
:root{
  --schwach:#bcc5de;
  --text:#f3f5ff;
  --panel-fest:rgba(20,24,52,.78);
  --fokus:#ffd24a;
}
html{font-size:17px}
@media(max-width:600px){html{font-size:16px}}
body{
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.45;
}
h2{font-size:1.3rem}
h3{font-size:.84rem; letter-spacing:1px}
.hinweis{font-size:.95rem; line-height:1.55}
.hinweis.klein{font-size:.86rem}
.untertitel{font-size:.76rem}
.season-marke{font-size:.78rem}
#season-info{font-size:.92rem}
.season-spruch{font-size:.98rem}
.schritt-text{font-size:.92rem}
.gross-knopf span{font-size:1.1rem}
.gross-knopf small{font-size:.82rem; opacity:.92}
.gross-knopf.klein span{font-size:.98rem}
.text-knopf{font-size:.92rem}
.segment button{font-size:.9rem; color:#c9d0e6}
.segment.klein button{font-size:.86rem}
.segment button.aktiv{background:#fff; color:#1b1f3b; box-shadow:0 3px 10px rgba(0,0,0,.25)}
.wahl-label{font-size:.9rem; color:#d3d9ec}
.schalter{font-size:.95rem; color:#dde2f2}
.chip{font-size:.82rem}
.aufgabe-anweisung{font-size:1.02rem; color:#dde3f5; font-weight:600}
.aufgabe-feedback{font-size:1.05rem}
.antwort{font-size:1.2rem}
.antworten.lang .antwort{font-size:1.02rem}
.bild-antwort .ba-text{font-size:.95rem}
.hilfe-text{font-size:.95rem}
.shop-karte b{font-size:1.02rem}
.shop-karte p{font-size:.86rem; color:#c3cae0}
.shop-preis{font-size:.95rem}
.reiter-knopf{font-size:.92rem; color:#c9d0e6}
.album-feld .nr{font-size:.7rem; color:#c9d0e6}
.album-feld .nm{font-size:.74rem}
.album-feld.fehlend .nm{opacity:.8}
.album-feld.fehlend svg{opacity:.75}

/* Tastatur-Bedienung sichtbar machen */
:focus-visible{outline:3px solid var(--fokus); outline-offset:3px; border-radius:10px}
button:focus:not(:focus-visible){outline:none}

/* Bildlaufleisten dezent (verhindert helle Streifen in Fenstern) */
*{scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22); border-radius:99px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}
.aufgabe-box{overflow-x:hidden}

/* ---------- Panels: etwas fester, damit Text überall gut lesbar ist ---------- */
.panel{background:var(--panel-fest); border-color:rgba(255,255,255,.12)}
.panel > h2:first-child{display:flex; align-items:center; gap:8px}

/* ---------- Knöpfe: gesperrt sieht auch gesperrt aus ---------- */
button.gross-knopf:disabled,
.regal-pack button:disabled,
.shop-karte button:disabled{
  background:rgba(255,255,255,.07) !important; color:#aab2cc; box-shadow:none !important; opacity:1;
  border:1px dashed rgba(255,255,255,.22); cursor:default;
}
.gross-knopf:disabled::after{display:none}
.shop-karte button.ausgewaehlt:disabled{background:rgba(79,209,139,.18) !important; color:#9ff0c4; border:1px solid rgba(79,209,139,.5)}
.shop-karte button.zu-teuer:disabled{color:#ffd98a}
.regal-pack button small{font-size:.76rem}
@media(hover:hover){
  .gross-knopf:not(:disabled):hover{filter:brightness(1.08); box-shadow:0 16px 40px rgba(0,0,0,.35)}
  .text-knopf:hover,.icon-knopf:hover{background:rgba(255,255,255,.14)}
  .antwort:not(:disabled):hover,.bild-antwort:not(:disabled):hover{border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.12)}
  .reiter-knopf:not(.aktiv):hover{color:#fff; background:rgba(255,255,255,.08)}
}
.shop-marke{font-size:.66rem; padding:4px 9px; z-index:2}
.shop-season{top:auto; bottom:auto; left:auto; right:10px; top:10px}
.shop-karte.aktiv .shop-season{display:none}

/* ---------- Schalter statt kleiner Kästchen ---------- */
.schalter input[type=checkbox]{
  -webkit-appearance:none; appearance:none; flex:none; margin:0;
  width:50px; height:30px; border-radius:99px; position:relative; cursor:pointer;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); transition:background .2s;
}
.schalter input[type=checkbox]::after{
  content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .2s cubic-bezier(.3,1.4,.5,1);
}
.schalter input[type=checkbox]:checked{background:var(--gruen); border-color:var(--gruen)}
.schalter input[type=checkbox]:checked::after{transform:translateX(20px)}

/* ---------- Season-Auswahl als große Knöpfe ---------- */
.season-rechts{justify-items:stretch}
.season-knoepfe{display:grid; gap:8px; min-width:min(300px,100%)}
.season-knopf{
  display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer;
  font:inherit; color:var(--text); padding:10px 14px; min-height:56px; border-radius:14px;
  background:rgba(10,12,30,.55); border:2px solid rgba(255,255,255,.14); transition:.2s;
}
.season-knopf .sk-symbol{font-size:1.5rem; line-height:1}
.season-knopf .sk-text{display:grid; gap:1px}
.season-knopf b{font-size:.95rem}
.season-knopf small{font-size:.8rem; color:var(--schwach)}
.season-knopf.aktiv{border-color:var(--gold); background:rgba(255,204,51,.14); box-shadow:0 0 0 3px rgba(255,204,51,.15)}
.season-knopf.spuk.aktiv{border-color:#ff9a3c; background:rgba(255,138,31,.16); box-shadow:0 0 18px rgba(255,138,31,.35)}
.season-knopf.aktiv::after{content:'✓'; margin-left:auto; font-weight:900; color:var(--gold)}
.season-knopf.spuk.aktiv::after{color:#ff9a3c}
.season-knopf:disabled{opacity:.55; cursor:default}
.season-knopf:not(.aktiv):not(:disabled):active{transform:scale(.97)}
@media(hover:hover){.season-knopf:not(.aktiv):not(:disabled):hover{border-color:rgba(255,255,255,.4)}}
@media(max-width:700px){.season-rechts{width:100%} .season-knoepfe{grid-template-columns:1fr 1fr; min-width:0}
  .season-knopf{padding:9px 10px; gap:8px} .season-knopf b{font-size:.86rem}}

/* ---------- Bestenliste ---------- */
.bl-kopf{display:flex; gap:12px; align-items:center; margin-bottom:14px}
.bl-kopf h2{margin:0}
.bl-symbol{font-size:1.8rem; width:52px; height:52px; display:grid; place-items:center; flex:none;
  border-radius:14px; background:rgba(255,255,255,.08)}
.bl-unter{margin:2px 0 0; font-size:.86rem; color:var(--schwach)}
.bl-zeile{font-size:1rem; padding:11px 14px}
.bl-zeile.podest{background:rgba(255,204,51,.07)}
.bl-zeile.ich{border-color:var(--gold); background:rgba(255,204,51,.16)}
.bl-name small{color:var(--schwach); font-weight:700}
.bl-wert{font-size:1.1rem}
.bl-wert small{font-size:.78rem; color:var(--schwach); font-weight:700}
.bl-leer{list-style:none; padding:14px; border-radius:12px; background:rgba(255,255,255,.04);
  color:var(--schwach); text-align:center; font-size:.95rem}
.bl-meins{font-size:.95rem}

/* ---------- Fledermäuse beim Pack-Öffnen ---------- */
.fledermaus{
  position:absolute; width:var(--gr); height:calc(var(--gr) / 2); opacity:0;
  animation:fl-flug var(--flug) cubic-bezier(.35,.4,.45,1) forwards; will-change:transform, opacity;
}
.fledermaus svg, .hk-fl svg{width:100%; height:100%; overflow:visible; display:block}
.fledermaus svg{fill:#2a1846; stroke:#ffb35c; stroke-width:.9; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(255,150,60,.85))}
.fl-links,.fl-rechts{transform-origin:32px 16px; animation:fl-schlag var(--schlag, .16s) ease-in-out infinite alternate}
.fl-auge{fill:#ffd24a}
@keyframes fl-schlag{from{transform:scaleY(1)}to{transform:scaleY(-.3)}}
@keyframes fl-flug{
  0%  {transform:translate(-50%,-50%) scale(.15); opacity:0}
  12% {opacity:1}
  45% {transform:translate(calc(-50% + var(--mx)), calc(-50% + var(--my))) scale(1)}
  85% {opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.75); opacity:0}
}

/* ---------- Halloween-Kulisse (nur im Halloween-Look sichtbar) ---------- */
#halloween-kulisse{display:none; position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
body.thema-halloween #halloween-kulisse{display:block}
.hk-mond{
  position:absolute; bottom:calc(min(42vh,420px) - 40px); left:6vw; width:clamp(80px,9vw,140px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fffbe6 0 30%, #ffe7a3 62%, #f5c86a 100%);
  box-shadow:0 0 50px 14px rgba(255,220,140,.25), 0 0 140px 50px rgba(255,160,60,.12);
  opacity:.85;
}
.hk-mond::before,.hk-mond::after{content:''; position:absolute; border-radius:50%; background:rgba(210,160,80,.28)}
.hk-mond::before{width:18%; height:18%; top:28%; left:52%}
.hk-mond::after{width:12%; height:12%; top:58%; left:30%}
.hk-land{position:absolute; left:0; right:0; bottom:0; width:100%; height:min(42vh,420px)}
.hk-fenster rect{filter:drop-shadow(0 0 6px #ffb347); animation:hk-flackern 4s ease-in-out infinite}
.hk-fenster rect:nth-child(2n){animation-delay:-1.7s}
.hk-kuerbis .hk-gesicht{fill:#ffe27a; filter:drop-shadow(0 0 5px #ffb000); animation:hk-flackern 2.6s ease-in-out infinite}
.hk-kuerbis:nth-of-type(2n) .hk-gesicht{animation-delay:-1.1s}
@keyframes hk-flackern{0%,100%{opacity:1}40%{opacity:.82}55%{opacity:.95}70%{opacity:.7}}
.hk-nebel{position:absolute; left:-20%; width:140%; height:22vh; bottom:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(190,170,230,.16), transparent 65%); filter:blur(8px)}
.hk-nebel1{animation:hk-nebel 38s ease-in-out infinite alternate}
.hk-nebel2{bottom:6vh; opacity:.7; animation:hk-nebel 52s ease-in-out infinite alternate-reverse}
@keyframes hk-nebel{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
.hk-fl{position:absolute; left:-80px; width:46px; height:23px; opacity:.75}
.hk-fl svg{fill:#0e0819}
.hk-fl .fl-links,.hk-fl .fl-rechts{--schlag:.22s}
.hk-fl1{top:14vh; animation:hk-vorbei 26s linear infinite 3s}
.hk-fl2{top:24vh; width:32px; height:16px; animation:hk-vorbei 34s linear infinite 14s}
.hk-fl3{top:8vh; width:38px; height:19px; animation:hk-vorbei 30s linear infinite 22s}
@keyframes hk-vorbei{
  0%{transform:translate(0,0)} 25%{transform:translate(28vw,-3vh)} 50%{transform:translate(55vw,2vh)}
  75%{transform:translate(85vw,-4vh)} 100%{transform:translate(calc(100vw + 160px),0)}
}
body.thema-halloween #sternenhimmel{opacity:.8}
body.thema-halloween .panel{background:rgba(24,14,40,.8); border-color:rgba(255,170,90,.16)}
body.thema-halloween .kopf{background:rgba(16,9,28,.85); border-bottom-color:rgba(255,170,90,.2)}
body.thema-halloween .season-banner::before{display:none}
.fusszeile{position:relative; z-index:1}
@media(prefers-reduced-motion:reduce){
  .hk-fl,.hk-nebel,.hk-fenster rect,.hk-kuerbis .hk-gesicht{animation:none}
  .hk-fl{display:none}
}

/* Kopfzeile: rechte Knöpfe bleiben rechts, auch wenn die Zeile umbricht */
.kopf-rechts{margin-left:auto}

/* Kopfzeile auf iPad hochkant und Handy: oben Logo + Knöpfe, darunter die Reiter */
@media(max-width:1100px){
  .kopf{gap:8px 12px; padding-top:calc(8px + env(safe-area-inset-top)); padding-bottom:8px}
  .marke{order:1}
  .kopf-rechts{order:2}
  .reiter{order:3; width:100%; justify-content:space-between}
  .reiter-knopf{flex:1 0 auto; padding:9px 12px; min-height:44px}
}
@media(max-width:600px){
  .untertitel{display:none}
  .kopf-rechts{gap:6px}
  .kopf-rechts .icon-knopf{width:42px; height:42px; border-radius:12px}
  .sterne-anzeige{padding:8px 11px}
  .reiter-knopf{padding:8px 10px; font-size:.86rem}
}
.reiter{scrollbar-width:none}
.reiter::-webkit-scrollbar{display:none}
@media(max-width:480px){
  .season-knoepfe{grid-template-columns:1fr}
  .season-knopf{min-height:52px}
  .season-banner{padding:16px}
  .season-banner h2{font-size:1.4rem}
}
/* Inhalte liegen immer auf einem festen Grund – die Kulisse stört nie beim Lesen */
.shop-karte,.regal-pack,.album-feld,.tausch-karte,.tausch-zeile{background-color:rgba(20,24,52,.88)}
body.thema-halloween .shop-karte,
body.thema-halloween .regal-pack,
body.thema-halloween .album-feld,
body.thema-halloween .tausch-karte,
body.thema-halloween .tausch-zeile{background-color:rgba(26,15,42,.92)}
.shop-karte.aktiv{background-color:rgba(18,52,44,.92)}
.hk-mond{opacity:.6}
@media(max-width:700px){.hk-mond{display:none}}

/* =====================================================================
   Version 7: Spuknacht-Szene als Standard, Sammlerstücke
   ===================================================================== */

/* ---------- Aufgaben-Hintergrund „Spuknacht“ und „Mitternachtsfest“ ---------- */
.hg-spuknacht{background:linear-gradient(180deg, rgba(45,26,82,.55), rgba(20,10,36,.35) 60%, transparent)}
.hg-mitternachtsfest{background:linear-gradient(180deg, rgba(20,10,42,.7), rgba(58,31,92,.45))}
.hg-mond{position:absolute; top:6vh; right:8vw; width:clamp(70px,12vw,130px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 36%, #fffbe6 0 30%, #ffe7a3 62%, #f5c86a 100%);
  box-shadow:0 0 50px 14px rgba(255,220,140,.25); opacity:.8}
.hg-mitternachtsfest .hg-mond{top:auto; bottom:18vh; right:auto; left:50%; transform:translateX(-50%);
  width:clamp(180px,34vw,360px); opacity:.55; box-shadow:0 0 120px 40px rgba(255,210,120,.3)}
.hg-land{position:absolute; left:0; right:0; bottom:0; width:100%; height:28vh}
.hg-fenster rect{filter:drop-shadow(0 0 4px #ffb347)}
.hg-kuerbisse path{filter:drop-shadow(0 0 4px #ffb000)}
.hg-fl{position:absolute; left:-60px; width:40px; height:20px; opacity:.8}
.hg-fl svg{width:100%; height:100%; fill:#0e0819; overflow:visible}
.hg-fl1{top:14vh; animation:hk-vorbei 18s linear infinite 1s}
.hg-fl2{top:26vh; width:28px; height:14px; animation:hk-vorbei 24s linear infinite 9s}
.hg-teilchen.laterne{border-radius:40% 40% 30% 30%; box-shadow:0 0 10px 3px rgba(255,170,70,.55)}
@media(prefers-reduced-motion:reduce){.hg-fl{display:none}}

/* ---------- Shop: Sammlerstücke und Zeit bis zum Kauf ---------- */
.shop-sammler{justify-self:start; font-size:.7rem; font-weight:900; letter-spacing:.5px; padding:3px 9px; border-radius:99px;
  background:linear-gradient(135deg,#ffe38a,#c9962c); color:#3a2600}
.shop-karte.sammler{border-color:rgba(255,215,110,.45);
  box-shadow:inset 0 0 0 1px rgba(255,215,110,.15), 0 0 24px rgba(255,200,90,.08)}
.shop-preis{flex-wrap:wrap}
.shop-dauer{margin-left:auto; font-size:.76rem; font-weight:700; color:var(--schwach)}

/* ---------- Rückseite „Mondgold“ ---------- */
.karte-rueck.r-mondgold{border-color:#ffe7a3; position:relative; overflow:hidden;
  background:radial-gradient(circle at 50% 42%, #fff6cf 0 18%, #f3c65a 30%, transparent 31%),
    repeating-radial-gradient(circle at 50% 42%, rgba(255,230,160,.18) 0 3px, transparent 3px 11px),
    linear-gradient(160deg,#2a1a05,#6b4a12 55%,#1a1003)}
.karte-rueck.r-mondgold::after{content:''; position:absolute; inset:-40%;
  background:linear-gradient(115deg, transparent 40%, rgba(255,245,200,.55) 50%, transparent 60%);
  animation:mondgold-glanz 4s ease-in-out infinite}
@keyframes mondgold-glanz{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* ---------- Pack-Animation „Hexenkessel“ ---------- */
.pack-objekt.weg-hexenkessel{animation:hexenkessel 1.2s cubic-bezier(.5,0,.7,.4) forwards}
@keyframes hexenkessel{
  20%{transform:translateY(-18px) rotate(-6deg); filter:none}
  60%{filter:drop-shadow(0 0 30px #7dff6a) hue-rotate(60deg)}
  100%{transform:translateY(60vh) scale(.4) rotate(18deg); opacity:0; filter:drop-shadow(0 0 40px #7dff6a) hue-rotate(90deg)}
}

/* ---------- Design „Nachtkristall“ ---------- */
.karte.d-nachtkristall .karte-vor{border-color:#b98cff; position:relative;
  box-shadow:inset 0 0 0 2px rgba(220,190,255,.8), 0 0 22px rgba(170,110,255,.6), 0 16px 40px rgba(0,0,0,.5)}
.karte.d-nachtkristall .karte-vor::before{content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit; padding:5px;
  background:conic-gradient(from var(--kristall-winkel,0deg), #6b3fd1, #e6d4ff, #7b3fd1, #3a1f7a, #c9a8ff, #6b3fd1);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; animation:kristall-dreh 5s linear infinite}
@property --kristall-winkel{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes kristall-dreh{to{--kristall-winkel:360deg}}

/* ---------- Rand „Geisterlicht“ ---------- */
.karte.rand-geisterlicht .kartenrand{
  background:conic-gradient(from var(--geist-winkel,0deg), transparent 0 55%, #7dffb2 70%, #c38bff 85%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; padding:5px;
  filter:drop-shadow(0 0 6px #7dffb2); animation:geist-kreis 3.2s linear infinite}
@property --geist-winkel{syntax:'<angle>'; inherits:false; initial-value:0deg}
@keyframes geist-kreis{to{--geist-winkel:360deg}}
.rand-vorschau.rand-geisterlicht span{border:4px solid #7dffb2; box-shadow:0 0 14px #7dffb2, inset 0 0 10px #c38bff}

/* ---------- Großes Stück „Kronjuwelen“ ---------- */
.karte.extra-kronjuwelen .karte-vor{box-shadow:inset 0 0 0 2px rgba(255,225,130,.9), 0 0 18px rgba(255,200,80,.55), 0 16px 40px rgba(0,0,0,.5)}
.kronjuwelen{position:absolute; inset:0; pointer-events:none; z-index:5}
.kronjuwelen i{position:absolute; width:12px; height:12px; transform:rotate(45deg); border-radius:2px;
  box-shadow:0 0 8px currentColor; animation:juwel-blitz 2.4s ease-in-out infinite}
.kronjuwelen i:nth-child(1){top:4px; left:4px; background:#ff4d6d; color:#ff4d6d}
.kronjuwelen i:nth-child(2){top:4px; right:4px; background:#4dd2ff; color:#4dd2ff; animation-delay:.6s}
.kronjuwelen i:nth-child(3){bottom:4px; left:4px; background:#5dff8a; color:#5dff8a; animation-delay:1.2s}
.kronjuwelen i:nth-child(4){bottom:4px; right:4px; background:#c77dff; color:#c77dff; animation-delay:1.8s}
@keyframes juwel-blitz{0%,100%{filter:brightness(1)}50%{filter:brightness(1.9); box-shadow:0 0 16px currentColor}}
.extra-vorschau.extra-kronjuwelen{background:radial-gradient(circle,#c9962c,#3a2605)}

/* ---------- Großes Stück „Legende der Spuknacht“ ---------- */
.karte.extra-mondlegende .karte-bild{
  background:radial-gradient(circle at 72% 30%, #fffbe6 0 16%, rgba(255,226,150,.55) 22%, transparent 40%),
    linear-gradient(180deg,#1f1140 0%, #4a2470 65%, #c2621f 100%)}
.karte.extra-mondlegende .karte-vor{box-shadow:0 0 22px rgba(255,190,90,.55), 0 16px 40px rgba(0,0,0,.5)}
.mond-legende{position:absolute; left:0; right:0; top:14%; height:46%; pointer-events:none; z-index:5}
.ml-bahn{position:absolute; left:50%; top:50%; width:0; height:0; animation:ml-kreis 6s linear infinite}
.ml-bahn.ml-b2{animation-duration:8.5s; animation-direction:reverse}
.ml-bahn span{position:absolute; left:62px; top:-8px; width:30px; height:15px; display:block}
.ml-b2 span{left:-78px; top:10px; width:24px; height:12px}
.ml-bahn svg{width:100%; height:100%; overflow:visible; fill:#1a0f2e; stroke:#ffb35c; stroke-width:1; filter:drop-shadow(0 0 4px rgba(255,160,70,.8))}
@keyframes ml-kreis{to{transform:rotate(360deg)}}
.extra-vorschau.extra-mondlegende{background:radial-gradient(circle at 60% 40%, #fffbe6 0 18%, #f3c65a 26%, #4a2470 60%, #120a24)}
@media(prefers-reduced-motion:reduce){.ml-bahn,.kronjuwelen i,.karte-rueck.r-mondgold::after{animation:none}}
/* Lange Pack-Namen (z. B. „Fledermausflug“) passen auf das Pack */
.pack-titel{font-size:clamp(1.05rem, 1.2rem + .4vw, 1.5rem); letter-spacing:1px; max-width:100%;
  overflow-wrap:anywhere; hyphens:auto; line-height:1.15; padding-inline:6px}
.belohnung-pack .pack-titel{font-size:1rem}

/* Lesetext steht unter der Frage: gut sichtbar, mit Abstand zu den Antworten */
.aufgabe-frage + .aufgabe-lesetext{margin-top:-2px}
.aufgabe-lesetext{font-size:1.12rem}

/* =====================================================================
   Version 8: Anmeldung mit Code, Lehrer-Klassen, Codes drucken
   ===================================================================== */

/* ---------- Anmeldefenster ---------- */
.anmeldung-weg{margin-bottom:16px; display:grid; grid-template-columns:1fr 1fr}
.anmeldung-weg button{font-size:1rem; min-height:50px}
.code-eingabe{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace !important; font-size:1.5rem !important;
  letter-spacing:4px; text-align:center; text-transform:uppercase; font-weight:800}
.code-eingabe::placeholder{letter-spacing:4px; opacity:.35}
.anmeldung-trenner{display:flex; align-items:center; gap:12px; margin:22px 0 10px; color:var(--schwach); font-size:.9rem; font-weight:700}
.anmeldung-trenner::before,.anmeldung-trenner::after{content:''; flex:1; height:1px; background:var(--rand)}
.code-fertig-text{font-size:1.02rem; line-height:1.55; margin:0 0 14px}
.code-gross{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:clamp(2rem,9vw,2.8rem); font-weight:800;
  letter-spacing:6px; text-align:center; padding:18px 10px; border-radius:16px; margin-bottom:16px;
  background:#fffbe9; color:#1b1f3b; border:3px dashed #e0b33a; user-select:text; -webkit-user-select:text}
.code-gross.klein{font-size:1.6rem; padding:12px; letter-spacing:4px; margin-bottom:10px}
.code-fertig-knoepfe{justify-content:space-between; align-items:center}
.pflicht{color:#ff9a9a}
textarea{font:inherit; width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--rand);
  background:rgba(10,12,30,.6); color:var(--text); resize:vertical; min-height:120px; line-height:1.5;
  -webkit-user-select:text; user-select:text}

/* ---------- Lehrer: Klassen ---------- */
.klassen-raster{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start}
@media(max-width:820px){.klassen-raster{grid-template-columns:1fr}}
.klassen-liste{display:grid; gap:8px}
.klassen-zeile{display:flex; align-items:center; gap:12px; text-align:left; font:inherit; color:var(--text); cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid var(--rand); border-radius:13px; padding:12px 16px; min-height:56px}
.klassen-zeile:hover{background:rgba(255,255,255,.1)}
.kz-name{font-weight:900; font-size:1.1rem; min-width:3.5em}
.kz-info{color:var(--schwach); font-size:.9rem; flex:1}
.kz-pfeil{font-size:1.5rem; color:var(--schwach)}
.klasse-kopf{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px}
.klasse-titel{flex:1; min-width:160px}
.klasse-titel h2{margin:0}
.klasse-tabelle-huelle{overflow-x:auto; margin:6px 0 14px}
.klasse-tabelle{width:100%; border-collapse:collapse; font-size:.95rem}
.klasse-tabelle th{text-align:left; color:var(--schwach); font-size:.82rem; padding:8px; border-bottom:1px solid var(--rand)}
.klasse-tabelle td{padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.06)}
.kt-nr{color:var(--schwach); width:2.5em}
.kt-name{width:100%; min-width:120px; font:inherit; padding:8px 10px; border-radius:9px; border:1px solid var(--rand);
  background:rgba(10,12,30,.5); color:var(--text)}
.kt-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-weight:800; letter-spacing:2px; white-space:nowrap;
  -webkit-user-select:text; user-select:text}
.kt-gespielt{color:var(--schwach); white-space:nowrap}
.klasse-knoepfe{justify-content:space-between}

/* ---------- Druckansicht (auf dem Bildschirm als Vorschau) ---------- */
.druck-overlay{position:fixed; inset:0; z-index:300; overflow-y:auto; background:#e9eaf0; color:#111}
.druck-leiste{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px clamp(12px,3vw,32px); background:#1b1f3b; color:#fff}
.druck-leiste > div{flex:1; min-width:200px; display:grid}
.druck-leiste .hinweis{color:#c9d0e6; margin:0}
#druck-bereich{padding:20px 12px 60px; display:grid; gap:20px; justify-items:center}
.druck-seite{width:min(210mm,100%); background:#fff; box-shadow:0 4px 20px rgba(0,0,0,.18); padding:10mm;
  display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(50mm,auto); gap:0}
.druck-karte{border:1.5px dashed #9aa0b4; padding:5mm 6mm; display:grid; align-content:start; gap:1.5mm; color:#111;
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS",sans-serif; break-inside:avoid}
.dk-kopf{display:flex; align-items:center; gap:6px; font-size:11pt; flex-wrap:wrap}
.dk-logo{width:16px; height:16px; border-radius:5px; background:linear-gradient(145deg,#ffd76a,#ff8b4d 55%,#c31432); flex:none}
.dk-klasse{margin-left:auto; font-size:8.5pt; color:#555}
.dk-name{font-size:15pt; font-weight:800; margin-top:1mm}
.dk-code-titel{font-size:8pt; color:#555; text-transform:uppercase; letter-spacing:1px}
.dk-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:21pt; font-weight:800; letter-spacing:3px;
  border:2px solid #111; border-radius:3mm; padding:1.5mm 3mm; justify-self:start}
.dk-anleitung{margin:1mm 0 0; padding-left:4.5mm; font-size:8.5pt; line-height:1.45; color:#333}

@media print{
  @page{size:A4; margin:0}
  html,body{background:#fff !important}
  body > *:not(#druck-overlay){display:none !important}
  #druck-overlay{position:static; overflow:visible; background:#fff}
  .druck-leiste{display:none !important}
  #druck-bereich{padding:0; display:block}
  .druck-seite{width:210mm; min-height:297mm; box-shadow:none; padding:10mm; margin:0; break-after:page;
    grid-template-rows:repeat(5, 55.4mm)}
  .druck-seite:last-child{break-after:auto}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}
.feld-zeile label{font-size:.88rem; color:#d3d9ec}
.feld-hilfe{font-size:.82rem}
.aufgabe-box.schmal{width:min(460px,100%)}
.aufgabe-box a, .panel a{color:#9cc6ff; text-underline-offset:2px}
/* Druckkarten kompakt genug für 5 Reihen pro A4-Seite */
.druck-karte{padding:3.5mm 5mm; gap:1mm}
.dk-name{font-size:14pt; margin-top:.5mm; line-height:1.15}
.dk-code{font-size:19pt; padding:1mm 3mm; line-height:1.2}
.dk-anleitung{font-size:8pt; line-height:1.35; margin-top:.5mm}
.dk-kopf{flex-wrap:nowrap; min-width:0}
.dk-klasse{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:62%}
.dk-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dk-kopf b{white-space:nowrap; flex:none}


/* ---------- Tausch-Post ---------- */
.post-knopf{position:relative}
.post-knopf.hat-post{animation:post-wackeln 2.4s ease-in-out infinite}
@keyframes post-wackeln{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-14deg)}93%{transform:rotate(12deg)}97%{transform:rotate(-6deg)}}
.post-zahl{position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:99px;
  background:#ff4d6d; color:#fff; font-size:.68rem; font-weight:900; display:grid; place-items:center;
  box-shadow:0 0 0 2px #0b1020}
.post-liste{display:grid; gap:12px; margin-top:10px}
.post-eintrag{border:1px solid var(--rand); border-radius:14px; padding:12px 14px; background:rgba(255,255,255,.05)}
.post-eintrag.neu{border-color:var(--gruen); box-shadow:0 0 18px rgba(79,209,139,.25)}
.post-kopf{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; align-items:baseline}
.post-kopf span{font-size:.8rem; color:var(--schwach)}
.post-tausch{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:8px 0 4px}
.post-wesen{display:grid; justify-items:center; text-align:center; gap:2px}
.post-wesen svg{width:78px; height:78px}
.post-wesen b{font-size:.85rem}
.post-wesen.rein b{color:var(--gruen)}
.post-label{font-size:.7rem; color:var(--schwach); text-transform:uppercase; letter-spacing:.5px}
.post-pfeil{font-size:1.6rem; color:var(--gold)}
.post-danke{margin:6px 0 0; font-size:.88rem}
.post-liste.kompakt .post-wesen svg{width:58px; height:58px}

/* ===================== Kribbel-Kampf ===================== */
.kampf-start-raster{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:820px){.kampf-start-raster{grid-template-columns:1fr}}
.kampf-start-raster .gross-knopf{width:100%; margin:14px 0 6px}
.kampf-deck-vorschau{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.kampf-deck-vorschau .dv{width:46px; height:46px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center}
.kampf-deck-vorschau svg{width:100%; height:100%}

.kampf-feld{display:grid; gap:10px; max-width:980px; margin:0 auto}
.kf-leiste{display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; font-weight:800; font-size:.9rem;
  background:rgba(255,255,255,.06); border:1px solid var(--rand); border-radius:12px; padding:8px 14px}
.kf-seite{display:grid; grid-template-columns:minmax(150px,220px) 1fr; gap:12px; align-items:end;
  padding:12px; border-radius:18px; background:rgba(255,255,255,.04); border:1px solid var(--rand)}
.kf-seite.gegner{grid-template-columns:1fr minmax(150px,220px); background:rgba(255,80,110,.06)}
.kf-seite.du{background:rgba(80,170,255,.07)}
.kf-bank{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.kf-aktiv{display:grid}
.kf-meldung{min-height:64px; text-align:center; display:grid; align-content:center; gap:2px; padding:6px 10px}
.kf-meldung p{margin:0; font-size:.95rem}
.kf-meldung p.wichtig{font-weight:900}
.kf-meldung p.alt{font-size:.8rem; color:var(--schwach); font-weight:600}

.kw{position:relative; display:grid; gap:4px; padding:7px; border-radius:14px; cursor:pointer; color:#141414; font:inherit;
  text-align:left; border:3px solid rgba(255,255,255,.75); background:linear-gradient(165deg, var(--t1), var(--t2));
  box-shadow:0 8px 20px rgba(0,0,0,.4); transition:transform .15s, box-shadow .15s; min-width:0}
.kw.aktiv{border-color:#ffd76a; box-shadow:0 0 0 2px rgba(255,215,106,.4), 0 10px 26px rgba(0,0,0,.5)}
.kw.waehlbar{animation:kw-puls 1s ease-in-out infinite; border-color:#4fd18b}
@keyframes kw-puls{0%,100%{box-shadow:0 0 0 0 rgba(79,209,139,.7)}50%{box-shadow:0 0 0 7px rgba(79,209,139,0)}}
.kw:active{transform:scale(.97)}
.kw-kopf{display:flex; align-items:center; gap:5px; min-width:0}
.kw-kopf b{font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kw.aktiv .kw-kopf b{font-size:1rem}
.kw-typ{flex:none; width:22px; height:22px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:.75rem}
.kw-bild{display:grid; place-items:center; background:radial-gradient(circle, rgba(255,255,255,.9), rgba(255,255,255,.35) 70%);
  border-radius:10px; aspect-ratio:1.25}
.kw-bild svg{width:100%; height:100%}
.kw-kp{position:relative; height:16px; border-radius:99px; background:rgba(0,0,0,.35); overflow:hidden}
.kw-kp i{position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,#3fcf7d,#9ef07a); transition:width .5s}
.kw-kp i.knapp{background:linear-gradient(90deg,#ff5a5a,#ffb15a)}
.kw-kp em{position:relative; display:block; text-align:center; font-style:normal; font-size:.68rem; font-weight:900; color:#fff;
  line-height:16px; text-shadow:0 1px 2px rgba(0,0,0,.8)}
.kw-energie{display:flex; gap:3px; flex-wrap:wrap; min-height:14px; align-items:center}
.kw-energie i{width:13px; height:13px; border-radius:50%; border:2px solid rgba(0,0,0,.4);
  background:radial-gradient(circle at 35% 30%, #fff 0 12%, var(--t3,#ffd36b) 40%, var(--t2) 100%)}
.kw-energie small{font-size:.65rem; opacity:.7; font-weight:700}
.kw-schild{position:absolute; top:-8px; right:-8px; font-size:1.2rem}
.kw-leer,.kw-platz{border:2px dashed rgba(255,255,255,.2); border-radius:14px; min-height:90px; display:grid; place-items:center;
  color:var(--schwach); font-size:.8rem}
.kw.getroffen{animation:kw-treffer .5s ease}
@keyframes kw-treffer{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-2deg)}40%{transform:translateX(8px) rotate(2deg)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
.kw-trefferzahl{position:absolute; left:50%; top:30%; transform:translateX(-50%); font-size:2rem; font-weight:900; color:#ff4d4d;
  text-shadow:0 2px 0 #fff, 0 0 12px rgba(0,0,0,.6); pointer-events:none; animation:treffer-zahl 1.1s ease-out forwards}
@keyframes treffer-zahl{from{opacity:1; transform:translate(-50%,0) scale(.6)}30%{transform:translate(-50%,-10px) scale(1.25)}to{opacity:0; transform:translate(-50%,-50px) scale(1)}}

.kf-aktionen{display:grid; gap:10px; padding:12px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid var(--rand)}
.kf-angriffe{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px}
.kf-angriff{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; text-align:left; font:inherit; color:#fff;
  padding:10px 12px; border-radius:12px; border:2px solid rgba(255,120,120,.6); background:linear-gradient(135deg,rgba(255,80,80,.35),rgba(150,30,60,.35));
  cursor:pointer; --t3:#ffd36b; --t2:#a66}
.kf-angriff b{font-size:1rem}
.kf-angriff em{font-style:normal; font-weight:900; font-size:1.3rem; color:#ffd76a}
.kf-angriff small{grid-column:1 / -1; font-size:.78rem; color:#e3e6f5}
.kf-angriff.aus{opacity:.45; filter:grayscale(.6)}
.kf-angriff .energie{max-width:none}
.kf-angriff .energie i{width:15px; height:15px; border-radius:50%; border:2px solid rgba(0,0,0,.4); display:block;
  background:radial-gradient(circle at 35% 30%, #fff 0 12%, #ffd36b 40%, #a65 100%)}
.kf-knoepfe{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.kf-knoepfe .gross-knopf{margin-left:auto}
.kf-knoepfe .erledigt{opacity:.55}
.kf-warte,.kf-ende{text-align:center; font-weight:900; font-size:1.1rem; padding:8px}
.kf-ende{font-size:1.6rem}
.kf-hand-titel{margin:4px 0 0}
.kf-hand{display:flex; gap:10px; overflow-x:auto; padding:6px 2px 12px; scroll-snap-type:x mandatory}
.hk{flex:0 0 118px; scroll-snap-align:start; display:grid; justify-items:center; gap:2px; padding:8px 6px; border-radius:14px;
  font:inherit; color:#141414; cursor:pointer; border:3px solid rgba(255,255,255,.4); background:linear-gradient(165deg,var(--t1),var(--t2));
  opacity:.6; transition:transform .15s}
.hk.spielbar{opacity:1; border-color:#4fd18b; box-shadow:0 0 14px rgba(79,209,139,.45)}
.hk:active{transform:scale(.95)}
.hk svg{width:84px; height:70px}
.hk b{font-size:.8rem; text-align:center; line-height:1.1}
.hk-stufe{font-size:.62rem; font-weight:900; background:rgba(0,0,0,.3); color:#fff; padding:1px 7px; border-radius:99px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hk-kp{font-size:.7rem; font-weight:800}
#kampf-aufgeben{justify-self:center; margin-top:6px}
@media(max-width:600px){
  .kf-seite,.kf-seite.gegner{grid-template-columns:1fr}
  .kf-seite.gegner .kf-aktiv{order:-1}
  .kf-aktiv .kw{max-width:240px; justify-self:center; width:100%}
  .kw-kopf b{font-size:.72rem}
}
#kampf-karte-overlay .karte{--kb:min(340px, 84vw, 62vh); cursor:default}

/* Album & Detail: Drucken */
.album-druck{display:flex; justify-content:flex-end; margin:-6px 0 12px}
#detail-drucken{justify-self:center}

/* ===================== Karten drucken ===================== */
.druck-optionen{width:min(210mm,100%); display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; background:#fff;
  border-radius:12px; padding:12px 16px; box-shadow:0 4px 20px rgba(0,0,0,.12); color:#111}
.druck-optionen label{display:flex; gap:8px; align-items:center; font-weight:700}
.druck-optionen select{font:inherit; padding:6px 10px; border-radius:8px; border:1px solid #bbb; max-width:100%}
.druck-optionen .schalter span{color:#111}
.druck-optionen .hinweis{color:#555}
#druck-seiten{display:grid; gap:20px; justify-items:center}
.druck-seite.druck-karten{grid-template-columns:repeat(3, 63mm); grid-auto-rows:88mm; gap:2mm; justify-content:center;
  align-content:start; padding:10mm 8mm}
.druck-k{--kb:63mm; animation:none !important; cursor:default; transform:none !important}
.druck-k .karte-seite{box-shadow:none; border-radius:3mm; outline:.2mm dashed #999; outline-offset:.6mm}
.druck-k .karte-vor{transform:none; animation:none !important}
.druck-rueck .karte-rueck{transform:none}
.druck-rueck-inhalt{display:grid; justify-items:center; gap:3mm; color:#fff; text-align:center}
.druck-rueck-inhalt .rueck-zeichen{width:22mm; height:22mm; font-size:11mm; border-radius:6mm}
.druck-rueck-inhalt b{font-size:5mm; letter-spacing:.3mm}
.druck-rueck-inhalt small{font-size:2.8mm; opacity:.85}
.druck-luecke{border:0}
.druck-seite.druck-text{display:block; padding:12mm 14mm; font-family:ui-rounded,"SF Pro Rounded","Nunito","Trebuchet MS",sans-serif; color:#111}
.druck-text h1{font-size:18pt; margin:0 0 3mm}
.druck-text h2{font-size:12pt; margin:4mm 0 1.5mm}
.druck-text p,.druck-text li{font-size:9.6pt; line-height:1.42}
.druck-text ol,.druck-text ul{margin:0; padding-left:5mm}
.dr-intro{margin:0 0 2mm}
.dr-spalten{columns:2; column-gap:8mm}
.dr-spalten section{break-inside:avoid; margin-bottom:2mm}
.dr-fuss{font-size:8pt !important; color:#666; margin-top:5mm}
.dm-raster{display:flex; flex-wrap:wrap; gap:3mm; margin-bottom:3mm}
.dm-energie{width:14mm; height:14mm; border-radius:50%; border:.5mm solid #333;
  background:radial-gradient(circle at 35% 30%, #fff 0 12%, #ffd36b 40%, #c9762c 100%)}
.dm-schaden{width:14mm; height:14mm; border-radius:50%; border:.5mm solid #7a0d14; background:#e2333f; color:#fff;
  display:grid; place-items:center; font-weight:900; font-size:11pt}
.dm-schaden.gross{width:17mm; height:17mm; background:#8a0f19; font-size:13pt}
.dm-stern{width:16mm; height:16mm; border:.5mm dashed #999; border-radius:3mm; display:grid; place-items:center; font-size:20pt}
.dm-muenze{width:22mm; height:22mm; border-radius:50%; border:.6mm solid #8a6a16; background:radial-gradient(circle,#ffe58a,#d9a521);
  display:grid; place-items:center; font-weight:900; font-size:11pt; color:#5a3f00}

@media print{
  .druck-optionen{display:none !important}
  #druck-seiten{display:block}
  .druck-seite.druck-karten{display:grid; width:210mm; height:297mm; min-height:0; grid-template-rows:repeat(3, 88mm);
    padding:10mm 8mm; break-after:page}
  .druck-seite.druck-text{width:210mm; min-height:297mm; break-after:page; box-shadow:none}
  .druck-k .glitzer,.druck-k .funke{display:none}
}

/* Full-Art bleibt auch in Season 2 dunkel hinterlegt, damit die weiße Schrift lesbar ist */
.karte.thema-halloween.art-fullart .karte-text{background:rgba(12,14,28,.8)}
.karte.thema-halloween.art-fullart .karte-werte{background:rgba(12,14,28,.72)}

/* Hinweis zur Speicherung im Browser (statt Cookie-Banner) – liegt über allem, auch über dem Willkommen-Fenster */
.speicher-hinweis{position:fixed; left:50%; transform:translateX(-50%); z-index:450;
  bottom:calc(14px + env(safe-area-inset-bottom)); width:min(680px, calc(100% - 24px));
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px;
  background:linear-gradient(135deg,#1d2a5c,#2b1b55); border:1px solid var(--rand); color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.55); animation:toast-rein .35s cubic-bezier(.2,1.3,.4,1)}
.speicher-hinweis[hidden]{display:none}
.speicher-hinweis p{margin:0; font-size:.84rem; line-height:1.45; flex:1}
.speicher-hinweis a{color:var(--gold)}
.speicher-hinweis .gross-knopf{flex:none; width:auto; padding:10px 18px}
@media(max-width:560px){.speicher-hinweis{flex-direction:column; align-items:stretch; text-align:left}}
@media print{.speicher-hinweis{display:none !important}}

/* Kribbel-Kampf: gesperrt bis 20 verschiedene Karten */
.reiter-knopf.gesperrt{opacity:.62}
.kampf-gesperrt{max-width:560px; margin:24px auto; text-align:center; display:grid; gap:12px; justify-items:center; padding:28px 22px}
.kampf-gesperrt h2{margin:0}
.kampf-gesperrt p{margin:0; color:var(--schwach); line-height:1.5}
.kampf-gesperrt p b{color:var(--text)}
.kg-schloss{font-size:3.2rem; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.kg-balken{width:100%; height:14px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.kg-balken i{display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ffcc33,#ff6ad5); transition:width .6s}
.kg-zahl{font-size:1.05rem}
.kampf-gesperrt .gross-knopf{width:auto; padding-inline:24px}

/* =====================================================================
   Version 11: neue Aufgaben-Hintergründe (Kürbis & Spuk, Winter)
   ===================================================================== */
.hg-fl3{top:8vh; width:34px; height:17px; animation:hk-vorbei 15s linear infinite 4s}
.hg-fl4{top:34vh; width:24px; height:12px; animation:hk-vorbei 20s linear infinite 12s}
.hg-fl5{top:20vh; width:44px; height:22px; animation:hk-vorbei 13s linear infinite 7s}
.hg-fl6{top:40vh; width:30px; height:15px; animation:hk-vorbei 26s linear infinite 2s}

.hg-kuerbisparade{background:radial-gradient(ellipse at 50% 110%, rgba(255,138,31,.35), transparent 60%), linear-gradient(180deg,rgba(26,16,51,.75),rgba(42,18,56,.5))}
.hg-flackern .glut{animation:kuerbis-flackern 1.8s ease-in-out infinite; filter:drop-shadow(0 0 3px #ffb000)}
.hg-flackern g:nth-child(odd) .glut{animation-duration:2.4s; animation-delay:-.7s}
.hg-flackern g:nth-child(3n) .glut{animation-duration:1.3s}
@keyframes kuerbis-flackern{0%,100%{opacity:1} 40%{opacity:.55} 60%{opacity:.9} 75%{opacity:.6}}

.hg-geisterwald{background:linear-gradient(180deg,rgba(10,30,32,.75),rgba(20,44,40,.55) 60%,rgba(8,20,18,.7))}
.hg-geisterwald .hk-nebel{background:radial-gradient(ellipse at center, rgba(200,255,235,.2), transparent 65%)}
.hg-geist{position:absolute; width:clamp(34px,5vw,58px); opacity:.0; animation:geist-schweben 16s ease-in-out infinite}
.hg-geist svg{width:100%; height:auto; display:block; filter:drop-shadow(0 0 10px rgba(220,255,240,.6))}
.hg-geist1{left:8%; top:22%}
.hg-geist2{left:62%; top:12%; animation-delay:-5s; animation-duration:19s}
.hg-geist3{left:34%; top:40%; animation-delay:-11s; animation-duration:22s; transform:scale(.7)}
@keyframes geist-schweben{0%{opacity:0; transform:translate(0,10px)} 20%{opacity:.85} 50%{opacity:.7; transform:translate(40px,-18px)}
  80%{opacity:.85} 100%{opacity:0; transform:translate(80px,6px)}}

.hg-hexenhaus{background:radial-gradient(ellipse at 30% 100%, rgba(90,209,106,.25), transparent 55%), linear-gradient(180deg,rgba(28,18,51,.75),rgba(16,10,30,.55))}
.hg-blase{transform-box:fill-box; transform-origin:center; animation:blase-steigen 2.2s ease-in infinite}
.hg-blase.hb2{animation-delay:-.8s} .hg-blase.hb3{animation-delay:-1.5s}
@keyframes blase-steigen{0%{transform:translateY(0) scale(.6); opacity:0} 30%{opacity:1} 100%{transform:translateY(-22px) scale(1.2); opacity:0}}
.hg-hexe{position:absolute; top:12%; left:-120px; width:clamp(70px,9vw,110px); animation:hk-vorbei 21s linear infinite 3s}
.hg-hexe svg{width:100%; height:auto; display:block}

.hg-nebelfriedhof{background:linear-gradient(180deg,rgba(30,28,52,.75),rgba(20,18,36,.55))}

.hg-fledermaushoehle{background:radial-gradient(ellipse at 50% 60%, rgba(122,92,255,.18), transparent 60%), linear-gradient(180deg,rgba(16,8,30,.9),rgba(30,16,50,.6))}
.hg-decke{position:absolute; left:0; right:0; top:0; width:100%; height:16vh}

.hg-spinnenkeller{background:linear-gradient(180deg,rgba(30,24,20,.8),rgba(18,14,12,.75))}
.hg-mauer{position:absolute; inset:0; opacity:.22;
  background:linear-gradient(90deg, transparent 0 calc(50% - 1px), #000 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) 0 0/80px 40px,
             linear-gradient(90deg, transparent 0 1px, transparent 1px) 40px 20px/80px 40px,
             repeating-linear-gradient(180deg, transparent 0 18px, #000 18px 20px), #6a5a48}
.hg-netz{position:absolute; top:0; width:clamp(120px,22vw,240px); aspect-ratio:1; opacity:.55;
  background:repeating-conic-gradient(from 90deg at 0 0, rgba(255,255,255,.55) 0 1deg, transparent 1deg 15deg),
             repeating-radial-gradient(circle at 0 0, transparent 0 18px, rgba(255,255,255,.4) 19px 20px)}
.hg-netz-l{left:0}
.hg-netz-r{right:0; transform:scaleX(-1)}
.hg-spinne{position:absolute; top:-6%; width:clamp(26px,3.6vw,40px); animation:spinne-seil 6s ease-in-out infinite}
.hg-spinne svg{width:100%; height:auto; display:block}
.hg-spinne.hs1{left:18%} .hg-spinne.hs2{left:58%; animation-delay:-2s; animation-duration:7.5s} .hg-spinne.hs3{left:82%; animation-delay:-4s; animation-duration:5.2s}
@keyframes spinne-seil{0%,100%{transform:translateY(-20%)} 50%{transform:translateY(55%)}}

.hg-schneegestoeber{background:linear-gradient(180deg,rgba(40,70,120,.65),rgba(90,130,180,.45))}
.hg-winterwald{background:linear-gradient(180deg,rgba(10,20,52,.8),rgba(30,52,100,.55))}
.hg-sternpunkte{position:absolute; inset:0 0 40% 0;
  background:radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px), radial-gradient(circle at 34% 8%, #fff 0 1px, transparent 2px),
             radial-gradient(circle at 58% 22%, #fff 0 1.4px, transparent 2.4px), radial-gradient(circle at 76% 10%, #fff 0 1px, transparent 2px),
             radial-gradient(circle at 90% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 46% 36%, #fff 0 1px, transparent 2px)}
.hg-teilchen.schnee{border-radius:50%; animation-name:hg-fallen; animation-timing-function:linear; box-shadow:0 0 6px rgba(255,255,255,.6)}
@keyframes hg-fallen{0%{transform:translate(0,0)} 25%{transform:translate(12px,32vh)} 50%{transform:translate(-8px,64vh)}
  75%{transform:translate(10px,96vh)} 100%{transform:translate(0,130vh)}}
@media(prefers-reduced-motion:reduce){.hg-geist,.hg-hexe,.hg-spinne,.hg-blase,.hg-flackern .glut{animation:none} .hg-geist{opacity:.7}}

/* Version 11: neue Kartenrückseiten */
.karte-rueck.r-geisterchen{border-color:#d8d0ff; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg opacity='.9'%3E%3Cpath d='M18 8c-7 0-10 6-10 12v14l4-3 3 4 3-4 3 4 3-4 4 3V20c0-6-3-12-10-12z' fill='%23f4f1ff'/%3E%3Ccircle cx='14' cy='19' r='2' fill='%232b1d42'/%3E%3Ccircle cx='22' cy='19' r='2' fill='%232b1d42'/%3E%3C/g%3E%3Cg opacity='.55' transform='translate(30 28) scale(.7)'%3E%3Cpath d='M18 8c-7 0-10 6-10 12v14l4-3 3 4 3-4 3 4 3-4 4 3V20c0-6-3-12-10-12z' fill='%23f4f1ff'/%3E%3Ccircle cx='14' cy='19' r='2' fill='%232b1d42'/%3E%3Ccircle cx='22' cy='19' r='2' fill='%232b1d42'/%3E%3C/g%3E%3C/svg%3E") 0 0/34% auto, radial-gradient(circle at 50% 40%, #3a2a6a, #120a24)}
.karte-rueck.r-kuerbislaterne{border-color:#ffb36b; background:radial-gradient(circle at 50% 52%, rgba(255,190,80,.55), transparent 55%), linear-gradient(180deg,#1a0f2e,#3a1f5c)}
.karte-rueck.r-kuerbislaterne::before{content:''; position:absolute; inset:18% 14%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='56' rx='38' ry='31' fill='%23e2701a'/%3E%3Cellipse cx='50' cy='56' rx='16' ry='31' fill='%23f28a2e'/%3E%3Cpath d='M48 26q2-12 10-14' stroke='%233b5d1e' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 50l8-12 8 12zM54 50l8-12 8 12zM28 64q22 18 44 0l-6 4-6-4-6 5-6-5-6 5-6-5z' fill='%23ffe27a'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 14px rgba(255,170,60,.75)); animation:kuerbis-flackern 2.2s ease-in-out infinite}
.karte-rueck.r-hexenhut{border-color:#c8a6ff; background:radial-gradient(circle at 50% 44%, #fff4c2 0 20%, #ffe38a 21%, rgba(255,227,138,.25) 30%, transparent 46%), linear-gradient(180deg,#120a24,#2a1450)}
.karte-rueck.r-hexenhut::before{content:''; position:absolute; inset:16% 10% 24%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='74' rx='40' ry='9' fill='%232b1d42'/%3E%3Cpath d='M30 72L44 30Q48 18 62 12Q54 26 58 36L70 72z' fill='%233b2a5c'/%3E%3Crect x='31' y='62' width='38' height='7' fill='%23ff8a1f'/%3E%3Crect x='45' y='60' width='10' height='11' fill='none' stroke='%23ffd24a' stroke-width='2'/%3E%3Cpath d='M76 18l2 5 5 .5-4 3 1 5-4-3-4 3 1-5-4-3 5-.5z M18 30l1.5 3.5 3.5.4-2.7 2 .8 3.6-3.1-2-3.1 2 .8-3.6-2.7-2 3.5-.4z' fill='%23ffe066'/%3E%3C/svg%3E") center/contain no-repeat}
.karte-rueck.r-schneeflocke{border-color:#e6f6ff; background:radial-gradient(circle at 50% 45%, #7fd0ff, #1b3a8a 75%)}
.karte-rueck.r-schneeflocke::before{content:''; position:absolute; inset:18%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23ffffff' stroke-width='4' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 50 50)'%3E%3Cpath d='M50 12V88M50 24l-8-8M50 24l8-8M50 76l-8 8M50 76l8 8'/%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Cpath d='M50 12V88M50 24l-8-8M50 24l8-8M50 76l-8 8M50 76l8 8'/%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Cpath d='M50 12V88M50 24l-8-8M50 24l8-8M50 76l-8 8M50 76l8 8'/%3E%3C/g%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='6' fill='%23ffffff'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.7)); animation:flocke-drehen 18s linear infinite}
@keyframes flocke-drehen{to{transform:rotate(360deg)}}
.karte-rueck.r-kuerbislaterne .rueck-zeichen,.karte-rueck.r-hexenhut .rueck-zeichen,.karte-rueck.r-schneeflocke .rueck-zeichen{opacity:0}

/* Version 11: Kürbisranke als Kartenrand */
.karte.rand-kuerbisranke .kartenrand{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36Q4 10 30 6' stroke='%234f9a2a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 18q-6-2-6-8 6 1 6 8zM22 9q0-6 6-7 0 6-6 7z' fill='%236fbf3a'/%3E%3Cellipse cx='9' cy='31' rx='7' ry='6' fill='%23ff8a1f'/%3E%3Cellipse cx='9' cy='31' rx='3' ry='6' fill='%23ffa64d'/%3E%3C/svg%3E") top left/26% auto no-repeat;
  box-shadow:inset 0 0 0 3px rgba(79,154,42,.75)}
.karte.rand-kuerbisranke .kartenrand::after{content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36Q4 10 30 6' stroke='%234f9a2a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 18q-6-2-6-8 6 1 6 8zM22 9q0-6 6-7 0 6-6 7z' fill='%236fbf3a'/%3E%3Cellipse cx='9' cy='31' rx='7' ry='6' fill='%23ff8a1f'/%3E%3Cellipse cx='9' cy='31' rx='3' ry='6' fill='%23ffa64d'/%3E%3C/svg%3E") top left/26% auto no-repeat; transform:rotate(180deg)}
.rand-vorschau.rand-kuerbisranke span{border:3px solid #4f9a2a; border-radius:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36Q4 10 30 6' stroke='%234f9a2a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M12 18q-6-2-6-8 6 1 6 8zM22 9q0-6 6-7 0 6-6 7z' fill='%236fbf3a'/%3E%3Cellipse cx='9' cy='31' rx='7' ry='6' fill='%23ff8a1f'/%3E%3Cellipse cx='9' cy='31' rx='3' ry='6' fill='%23ffa64d'/%3E%3C/svg%3E") top left/40% auto no-repeat}
@media(prefers-reduced-motion:reduce){.karte-rueck.r-kuerbislaterne::before,.karte-rueck.r-schneeflocke::before{animation:none}}

/* =====================================================================
   Version 11: Shop mit Kategorien, Vorschau & Musik
   ===================================================================== */
.shop-kategorien{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; margin:6px 0 14px}
.shop-kat{display:grid; justify-items:center; gap:3px; padding:12px 8px; border-radius:14px; cursor:pointer;
  border:1px solid var(--rand); background:rgba(20,24,52,.78); color:var(--text); font:inherit; transition:.18s}
.shop-kat .sk-icon{font-size:1.7rem; line-height:1}
.shop-kat b{font-size:.86rem}
.shop-kat small{font-size:.7rem; color:var(--schwach)}
.shop-kat:hover{border-color:rgba(255,204,51,.5); transform:translateY(-2px)}
.shop-kat.aktiv{background:linear-gradient(135deg,#ff8a1f,#8a3fd9); border-color:transparent; box-shadow:0 10px 26px rgba(138,63,217,.35)}
.shop-kat.aktiv small{color:#fff}
.shop-filter{margin:0 0 16px; width:max-content; max-width:100%; flex-wrap:wrap}
.shop-tipp{margin:-4px 0 12px}
.shop-vorschau{cursor:pointer; height:96px}
.shop-vorschau:hover{outline:2px solid rgba(255,204,51,.6)}
.shop-knoepfe{display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; margin-top:auto}
.shop-knoepfe .gross-knopf{width:100%}
.shop-ansehen{white-space:nowrap}
.shop-karte.gesperrt .shop-vorschau{filter:saturate(.6) brightness(.85)}
@media(max-width:560px){.shop-knoepfe{grid-template-columns:1fr}}

.shop-vorschau-box{width:min(620px,100%)}
.shop-vorschau-box .aufgabe-kopf{display:flex; justify-content:space-between; align-items:center}
.shop-vorschau-box h2{margin:8px 0 2px}
.sv-buehne{position:relative; margin:12px 0; min-height:240px; display:grid; place-items:center; gap:10px; border-radius:16px;
  background:rgba(0,0,0,.25); border:1px solid var(--rand); overflow:hidden; padding:14px}
.sv-aktionen{display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap}
.sv-aktionen .gross-knopf{min-width:200px}
.sv-szene{position:relative; width:100%; aspect-ratio:16/10; border-radius:12px; overflow:hidden;
  background:linear-gradient(160deg,#1a2247,#131936); display:grid; place-items:center}
.sv-szene .aufgabe-hintergrund{position:absolute; inset:0}
.sv-szene .hg-mond{top:8%; right:8%; width:16%}
.sv-szene .hg-land{height:34%}
.sv-szene .hg-decke{height:22%}
.sv-szene .hg-fl{transform-origin:left}
.sv-szene .hk-nebel{height:30%}
.sv-aufgabe{position:relative; z-index:2; display:grid; justify-items:center; gap:6px; padding:12px 18px; border-radius:14px;
  background:rgba(19,25,54,.86); border:1px solid var(--rand); box-shadow:0 12px 30px rgba(0,0,0,.45)}
.sv-aufgabe small{color:var(--schwach)}
.sv-aufgabe b{font-size:1.8rem}
.sv-antworten{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.sv-antworten span{padding:6px 18px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid var(--rand); font-weight:800; text-align:center}
.sv-buehne .sv-karte{--kb:min(230px, 62vw); cursor:pointer}
.sv-buehne.sv-animation{min-height:360px}
.sv-buehne.sv-animation .pack-objekt{width:170px; height:240px; cursor:default}
.sv-sound-icon{position:relative; width:110px; height:110px; border-radius:24px; overflow:hidden}
.sv-sound-icon > div{font-size:3.4rem !important}
.sv-sound-knoepfe{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}

/* Plattenspieler unten links */
.musik-disc{position:fixed; left:calc(14px + env(safe-area-inset-left)); bottom:calc(14px + env(safe-area-inset-bottom)); z-index:150;
  width:54px; height:54px; border-radius:50%; border:2px solid rgba(255,255,255,.25); padding:0; cursor:pointer;
  background:rgba(14,10,30,.85); box-shadow:0 10px 28px rgba(0,0,0,.55); display:grid; place-items:center}
.musik-disc[hidden],.musik-weiter[hidden]{display:none}
.disc-platte{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:repeating-radial-gradient(circle, #111 0 2px, #1d1d24 2px 4px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.disc-platte i{width:14px; height:14px; border-radius:50%; background:radial-gradient(circle,#111 0 2px,#ff8a1f 2.5px 100%)}
.musik-disc.laeuft .disc-platte,.sv-platte.laeuft .disc-platte{animation:platte-drehen 2.2s linear infinite}
.musik-disc.laeuft{border-color:#ffcc33; box-shadow:0 0 0 4px rgba(255,204,51,.18), 0 10px 28px rgba(0,0,0,.55)}
.musik-disc:not(.laeuft) .disc-platte{opacity:.75}
@keyframes platte-drehen{to{transform:rotate(360deg)}}
.musik-weiter{position:fixed; left:calc(76px + env(safe-area-inset-left)); bottom:calc(22px + env(safe-area-inset-bottom)); z-index:150;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--rand); background:rgba(14,10,30,.85); color:#fff; cursor:pointer}
.sv-platte .disc-platte{width:130px; height:130px}
.sv-platte .disc-platte i{width:40px; height:40px; background:radial-gradient(circle,#111 0 5px,#ff8a1f 6px 100%)}
@media(prefers-reduced-motion:reduce){.musik-disc.laeuft .disc-platte,.sv-platte.laeuft .disc-platte{animation:none}}
@media print{.musik-disc,.musik-weiter{display:none !important}}
@media(max-width:700px){
  .shop-kategorien{display:flex; overflow-x:auto; gap:8px; padding-bottom:6px; margin-inline:-4px; padding-inline:4px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .shop-kat{flex:none; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:7px; row-gap:0;
    align-items:center; justify-items:start; padding:9px 13px; scroll-snap-align:start}
  .shop-kat .sk-icon{grid-row:1 / span 2; font-size:1.35rem}
  .shop-kat b{font-size:.82rem; white-space:nowrap}
}
.sv-szene{aspect-ratio:4/3; cursor:pointer}
.sv-aufgabe{transform:scale(.82); transition:opacity .25s, transform .25s}
.sv-szene.ohne-aufgabe .sv-aufgabe{opacity:0; transform:scale(.6)}
@media(max-width:560px){.sv-szene{aspect-ratio:3/4} .sv-aufgabe{transform:scale(.7)}}
.hg-fledermaushoehle .hg-fl1{animation-delay:-3s} .hg-fledermaushoehle .hg-fl2{animation-delay:-11s}
.hg-fledermaushoehle .hg-fl3{animation-delay:-6s} .hg-fledermaushoehle .hg-fl4{animation-delay:-14s}
.hg-fledermaushoehle .hg-fl5{animation-delay:-1s} .hg-fledermaushoehle .hg-fl6{animation-delay:-9s}
.hg-fledermaushoehle .hg-fl svg{fill:#05020b}
.hg-nebelfriedhof .hg-land,.hg-kuerbisparade .hg-land{height:34vh}

/* =====================================================================
   Version 11: Winter-Thema (Season 3 „Winterwunderland“)
   ===================================================================== */
#winter-kulisse{display:none; position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden}
body.thema-winter #winter-kulisse{display:block}
body.thema-winter #halloween-kulisse{display:none}
.wk-land{position:absolute; left:0; right:0; bottom:0; width:100%; height:26vh; opacity:.9}
.wk-schnee{position:absolute; inset:-100% 0 0 0;
  background-image:radial-gradient(circle, rgba(255,255,255,.9) 0 1.6px, transparent 2.4px),
                   radial-gradient(circle, rgba(255,255,255,.7) 0 1.1px, transparent 1.9px);
  background-size:120px 120px, 70px 70px; background-position:0 0, 35px 50px; animation:wk-fallen 22s linear infinite}
.wk-s2{background-size:180px 180px, 110px 110px; opacity:.7; animation-duration:34s; animation-delay:-8s}
.wk-s3{background-size:260px 260px, 150px 150px; opacity:.5; animation-duration:48s; animation-delay:-20s}
@keyframes wk-fallen{from{transform:translate(0,0)} to{transform:translate(40px,50%)}}
@media(prefers-reduced-motion:reduce){.wk-schnee{animation:none}}

body.thema-winter{
  background:
    radial-gradient(1000px 650px at 12% -10%, #2a5aa8 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #5aa8d8 0%, transparent 55%),
    linear-gradient(180deg,#0a1530 0%, #14284f 100%);
  background-attachment:fixed;
}
body.thema-winter .season-banner{background:linear-gradient(120deg, rgba(90,168,216,.35), rgba(224,67,94,.22) 60%, rgba(10,21,48,.45)); border-color:rgba(160,220,255,.4)}
body.thema-winter .season-banner::before{content:'❄  ⛄  ❄'; position:absolute; right:clamp(160px,28vw,340px); top:14px;
  font-size:1.3rem; letter-spacing:10px; opacity:.6; animation:fledermaus-schweben 5s ease-in-out infinite; pointer-events:none}
body.thema-winter .season-marke{color:#8fd8ff}
body.thema-winter .reiter-knopf.aktiv{background:linear-gradient(135deg,#5ab8ff,#e0435e); box-shadow:0 6px 18px rgba(90,184,255,.35)}
body.thema-winter .gross-knopf:not(.blau){background:linear-gradient(135deg,#e0435e,#b8283f 55%,#2f6db8)}
body.thema-winter .schritte i.voll,body.thema-winter .mini-schritte i.voll{background:linear-gradient(90deg,#8fd8ff,#ffffff)}
body.thema-winter .panel{background:rgba(14,28,58,.82); border-color:rgba(160,220,255,.18)}
body.thema-winter .kopf{background:rgba(10,20,44,.86); border-bottom-color:rgba(160,220,255,.22)}
body.thema-winter .shop-karte,body.thema-winter .regal-pack,body.thema-winter .album-feld,
body.thema-winter .tausch-karte,body.thema-winter .tausch-zeile{background-color:rgba(14,28,58,.92)}
@media(max-width:700px){body.thema-winter .season-banner::before{display:none}}
.season-knopf.winter.aktiv{border-color:#8fd8ff; box-shadow:0 0 0 3px rgba(143,216,255,.18)}

/* Karten aus Season 3 */
.karte.thema-winter .karte-vor{background:linear-gradient(165deg, var(--t1,#888) 0%, #16305e 90%)}
.karte.thema-winter .karte-bild{
  background:
    radial-gradient(circle at 20% 22%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 15%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 35%, #fff 0 1px, transparent 2px), radial-gradient(circle at 85% 40%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(ellipse at 50% 112%, #ffffff 0 34%, transparent 35%),
    linear-gradient(180deg,#1b3a7a 0%, #4f8fd0 60%, #cfe8ff 100%)}
.karte.thema-winter.art-fullart .karte-bild{
  background:radial-gradient(circle at 25% 20%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 75% 30%, #fff 0 1.5px, transparent 2.5px),
    linear-gradient(180deg,#0d1f4a 0%, #2a5aa8 60%, #9fd4ff 100%)}
.karte.thema-winter .karte-text{background:rgba(246,251,255,.88)}
.karte.thema-winter .karte-kopf .karte-name{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6)}
.karte.thema-winter .karte-fuss{color:#eaf6ff}
.karte.thema-winter .karte-werte{background:rgba(246,251,255,.82)}
.karte.thema-winter.art-fullart .karte-text{background:rgba(10,20,44,.8)}
.karte.thema-winter.art-fullart .karte-werte{background:rgba(10,20,44,.72)}
/* Shop-Knöpfe untereinander – nebeneinander wurden sie zu schmal */
.shop-knoepfe{grid-template-columns:1fr; gap:6px}
.shop-knoepfe .shop-ansehen{justify-self:stretch; text-align:center; padding:7px 10px; font-size:.82rem}
.shop-knoepfe .gross-knopf span{white-space:nowrap}

/* =====================================================================
   Version 11: Karten-Druck zum Ausschneiden mit dem Cutter
   – 3 × 3 Karten (63 × 88 mm) lückenlos, exakt mittig auf A4,
     damit Vorder- und Rückseite beim beidseitigen Druck aufeinanderpassen
   – jede Seite genau eine A4-Seite hoch (keine leeren Seiten im PDF)
   ===================================================================== */
.druck-seite.druck-karten{--oben:16.5mm; position:relative; width:210mm; height:297mm; min-height:0; padding:var(--oben) 10.5mm; gap:0;
  grid-template-columns:repeat(3, 63mm); grid-template-rows:repeat(3, 88mm); grid-auto-rows:88mm;
  justify-content:start; align-content:start; overflow:hidden; flex:none}
.druck-k .karte-seite{border-radius:0; outline:none; box-shadow:none}
.druck-k .karte-vor,.druck-k .karte-rueck{border-radius:0}
.druck-k .kartenrand{border-radius:0}
.druck-luecke{background:#fff}
.schnittmarken{position:absolute; inset:0; pointer-events:none}
.schnittmarken i{position:absolute; background:#555}
.sm-senkrecht{width:.2mm; margin-left:-.1mm; top:3mm; height:10mm; box-shadow:0 calc(var(--oben) + 264mm) 0 #555}
.sm-waagerecht{height:.2mm; margin-top:-.1mm; left:2mm; width:7mm; box-shadow:199mm 0 0 #555}
#druck-seiten{overflow-x:auto; max-width:100%}
.druck-seite.druck-text{height:297mm; min-height:0; overflow:hidden}

@media print{
  html,body{height:auto !important; margin:0 !important; padding:0 !important}
  #druck-overlay,#druck-bereich,#druck-seiten{margin:0 !important; padding:0 !important; overflow:visible !important; max-width:none}
  .druck-seite,.druck-seite.druck-karten,.druck-seite.druck-text{width:210mm; height:296.6mm; min-height:0; margin:0;
    break-after:page; page-break-after:always; break-inside:avoid; overflow:hidden; box-shadow:none}
  .druck-seite.druck-karten{--oben:16.3mm}
  .druck-seite:last-child{break-after:auto; page-break-after:auto}
}
.druck-rueck .karte-rueck{border:0}   /* kein heller Rand – sonst weiße Streifen zwischen den Rückseiten */
.druck-k .rueck-zeichen{box-shadow:none}
.druck-k, .druck-k *, .druck-k *::before, .druck-k *::after{animation:none !important}
.kf-belohnung{font-weight:900; font-size:1.15rem; color:var(--gold); text-align:center; animation:toast-rein .4s cubic-bezier(.2,1.3,.4,1)}

/* =====================================================================
   Version 12: Winter-Packs mit eigenem Motiv
   ===================================================================== */
.pack-stil-geschenk,.pack-stil-flocke{isolation:isolate}
/* Geschenk: rotes Papier, goldenes Band über Kreuz, große Schleife */
.pack-stil-geschenk{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23fff1a8'%3E%3Cpath d='M10 8l1.2 3 3 1.2-3 1.2L10 16.4 8.8 13.4 5.8 12.2l3-1.2z' opacity='.8'/%3E%3Ccircle cx='42' cy='16' r='1.3' opacity='.7'/%3E%3Cpath d='M44 40l.9 2.2 2.2.9-2.2.9-.9 2.2-.9-2.2-2.2-.9 2.2-.9z' opacity='.75'/%3E%3Ccircle cx='18' cy='46' r='1' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0/34% auto,
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 45%),
    linear-gradient(150deg,#ff4d5e,#c4182f 55%,#7a0f22) !important}
.pack-stil-geschenk::before{content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(90deg, transparent calc(50% - 9%), #ffd24a calc(50% - 9%), #fff0a8 calc(50% - 3%), #f0b92e calc(50% + 3%), #c8921c calc(50% + 9%), transparent calc(50% + 9%)),
             linear-gradient(0deg, transparent calc(58% - 6.5%), #ffd24a calc(58% - 6.5%), #fff0a8 calc(58% - 2%), #f0b92e calc(58% + 2%), #c8921c calc(58% + 6.5%), transparent calc(58% + 6.5%));
  box-shadow:inset 0 0 0 3px rgba(255,210,74,.55)}
.pack-stil-geschenk::after{content:''; position:absolute; left:50%; top:1%; width:70%; aspect-ratio:120/70; transform:translateX(-50%); z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cg stroke='%23a8740f' stroke-width='2'%3E%3Cpath d='M60 38 C38 6 6 4 10 26 C13 42 40 44 60 38Z' fill='%23ffd24a'/%3E%3Cpath d='M60 38 C82 6 114 4 110 26 C107 42 80 44 60 38Z' fill='%23ffd24a'/%3E%3Cpath d='M56 40 L40 68 L50 64 L54 70 L60 42Z' fill='%23f0b92e'/%3E%3Cpath d='M64 40 L80 68 L70 64 L66 70 L60 42Z' fill='%23f0b92e'/%3E%3C/g%3E%3Cpath d='M60 36 C44 14 20 12 20 24' stroke='%23fff3b0' stroke-width='3' fill='none' opacity='.7'/%3E%3Cpath d='M60 36 C76 14 100 12 100 24' stroke='%23fff3b0' stroke-width='3' fill='none' opacity='.7'/%3E%3Cellipse cx='60' cy='38' rx='10' ry='9' fill='%23f0b92e' stroke='%23a8740f' stroke-width='2'/%3E%3Cellipse cx='57' cy='35' rx='3.5' ry='2.5' fill='%23fff3b0'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); pointer-events:none}
/* Flocke: Eis, Schneeflocken-Muster, Schneehaube oben */
.pack-stil-flocke{background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cg opacity='.32'%3E%3Cuse href='%23f' transform='translate(4 6) scale(.7)'/%3E%3Cuse href='%23f' transform='translate(46 30) scale(.5)'/%3E%3Cuse href='%23f' transform='translate(14 50) scale(.45)'/%3E%3Cuse href='%23f' transform='translate(56 2) scale(.35)'/%3E%3C/g%3E%3Cdefs%3E%3Cg id='f' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 15 15)'%3E%3Cpath d='M15 3V27M15 8l-3-3M15 8l3-3M15 22l-3 3M15 22l3 3'/%3E%3C/g%3E%3Cg transform='rotate(60 15 15)'%3E%3Cpath d='M15 3V27M15 8l-3-3M15 8l3-3M15 22l-3 3M15 22l3 3'/%3E%3C/g%3E%3Cg transform='rotate(120 15 15)'%3E%3Cpath d='M15 3V27M15 8l-3-3M15 8l3-3M15 22l-3 3M15 22l3 3'/%3E%3C/g%3E%3C/g%3E%3C/defs%3E%3C/svg%3E") 0 0/52% auto,
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(160deg,#9fe6ff,#3d8fe0 50%,#1b3a8a) !important}
.pack-stil-flocke::before{content:''; position:absolute; left:-2%; right:-2%; top:-1px; height:16%; z-index:3; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V14C190 18 186 30 180 30C174 30 172 18 162 20C150 22 152 36 142 36C132 36 136 20 120 20C106 20 110 28 98 28C86 28 90 16 76 18C64 20 66 34 54 34C44 34 46 20 34 20C22 20 22 30 12 30C4 30 2 20 0 18Z' fill='%23ffffff'/%3E%3Cpath d='M0 0H200V8C170 12 140 6 100 10C60 14 30 6 0 10Z' fill='%23eaf6ff'/%3E%3C/svg%3E") top/100% 100% no-repeat; filter:drop-shadow(0 3px 3px rgba(20,50,110,.35))}
.pack-stil-flocke::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3Cg transform='rotate(60 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3Cg transform='rotate(120 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 18% 74%/16% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%23e6f7ff' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3Cg transform='rotate(60 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3Cg transform='rotate(120 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 82% 30%/12% auto no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' fill='none'%3E%3Cg transform='rotate(0 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3Cg transform='rotate(60 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3Cg transform='rotate(120 15 15)'%3E%3Cpath d='M15 4V26M15 8.5l-2.6-2.6M15 8.5l2.6-2.6M15 21.5l-2.6 2.6M15 21.5l2.6 2.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 76% 84%/9% auto no-repeat;
  animation:frost-funkeln 3.2s ease-in-out infinite}
@keyframes frost-funkeln{0%,100%{opacity:.55} 50%{opacity:1}}
.pack-stil-geschenk .pack-inhalt,.pack-stil-flocke .pack-inhalt{z-index:2}
.pack-stil-geschenk > span,.pack-stil-flocke > span{z-index:2}
.pack-stil-geschenk .pack-glanz,.pack-stil-flocke .pack-glanz{z-index:2}
.pack-stil-geschenk .pack-logo,.pack-stil-geschenk .pack-icon{background:radial-gradient(circle, rgba(255,240,168,.55), rgba(255,210,74,.12) 60%, transparent 72%)}
.pack-stil-flocke .pack-logo,.pack-stil-flocke .pack-icon{background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,.18) 55%, transparent 72%)}
.pack-stil-geschenk .pack-titel,.pack-stil-flocke .pack-titel{text-shadow:0 3px 10px rgba(0,0,0,.65)}
.pack-objekt.pack-stil-geschenk .pack-inhalt{margin-top:40%; gap:5px}
.pack-objekt.pack-stil-geschenk .pack-logo{width:58px; height:58px; font-size:1.7rem}
.pack-objekt.pack-stil-flocke .pack-inhalt{margin-top:14%}
.regal-pack .pack-bild.pack-stil-geschenk{place-content:end center; padding-bottom:12%}
.regal-pack .pack-bild.pack-stil-flocke{place-content:center; padding-top:10%}
@media(prefers-reduced-motion:reduce){.pack-stil-flocke::after{animation:none}}

/* =====================================================================
   Version 12: Helle Darstellung (Einstellungen → Darstellung)
   ===================================================================== */
body.hell{
  --bg:#eef3ff; --bg2:#dde7fb; --panel:rgba(255,255,255,.88); --panel-fest:rgba(255,255,255,.94);
  --rand:rgba(30,45,100,.16); --text:#1b2346; --schwach:#4c5778; --schatten:0 14px 36px rgba(40,60,120,.18);
  background:
    radial-gradient(1100px 700px at 15% -10%, #cfdcff 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #f1dcff 0%, transparent 55%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed; color:var(--text);
}
body.hell #sternenhimmel{opacity:.15}
body.hell .kopf{background:rgba(255,255,255,.88); border-bottom-color:var(--rand); box-shadow:0 4px 18px rgba(40,60,120,.08)}
body.hell .panel,body.hell .shop-karte,body.hell .regal-pack,body.hell .album-feld,body.hell .tausch-karte,
body.hell .tausch-zeile,body.hell .shop-kat,body.hell .season-banner,body.hell .stat,body.hell .kampf-start-raster > *{
  background-color:rgba(255,255,255,.9); border-color:var(--rand)}
body.hell .regal-pack.hat{background:rgba(255,236,170,.55); border-color:rgba(214,160,20,.45)}
body.hell .aufgabe-box,body.hell .shop-vorschau-box{background:linear-gradient(160deg,#ffffff,#eef3ff); color:var(--text); border-color:var(--rand)}
body.hell .overlay{background:rgba(220,230,250,.82)}
body.hell .overlay.dunkel{background:rgba(14,20,44,.86)}
body.hell .segment{background:rgba(30,45,100,.07); border-color:var(--rand)}
body.hell .segment button{color:var(--text)}
body.hell .segment button.aktiv{background:#fff; color:#1b2346; box-shadow:0 2px 8px rgba(40,60,120,.18)}
body.hell .reiter{background:rgba(30,45,100,.06); border-color:var(--rand)}
body.hell .reiter-knopf{color:#2a3358}
body.hell .reiter-knopf.aktiv{color:#fff}
body.hell .icon-knopf,body.hell .text-knopf{background:rgba(255,255,255,.85); color:var(--text); border-color:var(--rand)}
body.hell .sterne-anzeige,body.hell .spielzeit,body.hell .konto-chip{background:rgba(255,255,255,.85); color:var(--text); border-color:var(--rand)}
body.hell .antwort{background:#fff; color:var(--text); border-color:var(--rand)}
body.hell .antwort.richtig{background:#d6f7e4; border-color:#2fa36b; color:#145c3a}
body.hell .antwort.falsch{background:#ffe1e6; border-color:#e0435e; color:#7a1428}
body.hell .aufgabe-frage,body.hell .aufgabe-lesetext{background:rgba(30,45,100,.05); color:var(--text); border-color:var(--rand)}
body.hell input[type="text"],body.hell input[type="email"],body.hell input[type="password"],body.hell select,body.hell textarea{
  background:#fff; color:var(--text); border-color:var(--rand)}
body.hell .schritte i,body.hell .mini-schritte i,body.hell .kg-balken,body.hell .niveau-balken{background:rgba(30,45,100,.1)}
body.hell .toast{background:linear-gradient(135deg,#ffffff,#eef3ff); color:var(--text); border-color:var(--rand); box-shadow:0 16px 40px rgba(40,60,120,.25)}
body.hell .speicher-hinweis{background:linear-gradient(135deg,#ffffff,#eef3ff); color:var(--text)}
body.hell .speicher-hinweis a{color:#b07400}
body.hell .fusszeile{color:var(--schwach)}
body.hell .fusszeile a{color:#2f5bd1}
body.hell .hinweis,body.hell .leer-text{color:var(--schwach)}
body.hell .musik-disc,body.hell .musik-weiter{background:rgba(255,255,255,.92); border-color:var(--rand)}
body.hell .musik-weiter{color:var(--text)}
body.hell .sv-buehne{background:rgba(30,45,100,.05)}
body.hell .kampf-feld .kf-zeile,body.hell .kf-leiste,body.hell .kf-meldung{color:var(--text)}

/* Themen in hell */
body.hell.thema-halloween{background:
    radial-gradient(1000px 650px at 12% -10%, #ead8ff 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #ffe0c2 0%, transparent 55%),
    linear-gradient(180deg,#fbf3ff 0%, #f3e6ff 100%); background-attachment:fixed}
body.hell.thema-halloween .panel,body.hell.thema-halloween .kopf,body.hell.thema-halloween .shop-karte,body.hell.thema-halloween .regal-pack,
body.hell.thema-halloween .album-feld,body.hell.thema-halloween .tausch-karte,body.hell.thema-halloween .tausch-zeile{background-color:rgba(255,255,255,.9); border-color:rgba(160,90,40,.18)}
body.hell.thema-halloween .season-banner{background:linear-gradient(120deg, #f0e2ff, #ffe7cf 60%, #f6eaff); border-color:rgba(255,138,31,.35)}
body.hell.thema-halloween #halloween-kulisse{opacity:.35}
body.hell.thema-winter{background:
    radial-gradient(1000px 650px at 12% -10%, #cfe6ff 0%, transparent 60%),
    radial-gradient(900px 600px at 95% 0%, #ffdfe6 0%, transparent 55%),
    linear-gradient(180deg,#f2f8ff 0%, #dcebfb 100%); background-attachment:fixed}
body.hell.thema-winter .panel,body.hell.thema-winter .kopf,body.hell.thema-winter .shop-karte,body.hell.thema-winter .regal-pack,
body.hell.thema-winter .album-feld,body.hell.thema-winter .tausch-karte,body.hell.thema-winter .tausch-zeile{background-color:rgba(255,255,255,.9); border-color:rgba(60,120,200,.2)}
body.hell.thema-winter .season-banner{background:linear-gradient(120deg, #e3f2ff, #ffe6ec 60%, #eef6ff); border-color:rgba(90,168,216,.4)}
body.hell .wk-schnee{background-image:radial-gradient(circle, rgba(120,170,225,.75) 0 1.6px, transparent 2.4px), radial-gradient(circle, rgba(150,190,235,.6) 0 1.1px, transparent 1.9px)}
body.hell .wk-land{opacity:.6}
/* hell: Schriften, die für dunklen Grund gedacht waren */
body.hell{--gold:#b98200}
body.hell .marke h1{background:linear-gradient(90deg,#1b2346,#b98200); -webkit-background-clip:text; background-clip:text; color:transparent}
body.hell .season-spruch,body.hell .wahl-label,body.hell .feld-zeile label,body.hell .schalter span{color:var(--text)}
body.hell .season-marke{color:#c25e00}
body.hell.thema-winter .season-marke{color:#2a6fb0}
body.hell .season-knopf{background:rgba(255,255,255,.88); border-color:var(--rand); color:var(--text)}
body.hell .season-knopf small{color:var(--schwach)}
body.hell .season-knopf:disabled{opacity:.6}
body.hell .gross-knopf:disabled{background:#e4e9f6 !important; color:#4c5778; box-shadow:none}
body.hell .gross-knopf:disabled small{color:#5d6888}
body.hell .vorschau-marke{color:#c25e00}
body.hell .fusszeile strong{color:#b98200}
body.hell .shop-karte p,body.hell .album-feld .nr{color:var(--schwach)}
body.hell .sterne-gross{color:var(--text); background:rgba(255,236,170,.5); border-color:rgba(185,130,0,.35)}
body.hell .aufgabe-anweisung,body.hell .leiste-info{color:var(--schwach)}
body.hell .aufgabe-feedback{color:var(--text)}
body.hell .aufgabe-box h2,body.hell .aufgabe-box h3{color:var(--text)}
body.hell .hilfe-text{color:#9a6a00}
body.hell .anmeldung-fehler,body.hell .pflicht{color:#c4182f}
body.hell .fuss-hinweis strong{color:#b06400}
body.hell .rechts-text p,body.hell .rechts-text ul{color:var(--text)}
body.hell .segment button:not(.aktiv),body.hell .reiter-knopf:not(.aktiv){color:#2a3358}
body.hell .reiter-knopf:not(.aktiv):hover{color:#1b2346; background:rgba(30,45,100,.08)}
body.hell .schalter{color:var(--text)}
body.hell .kf-angriff{color:var(--text); background:linear-gradient(135deg,#ffe6e6,#ffd2db); border-color:rgba(220,60,80,.5)}
body.hell .kf-angriff em{color:#c4182f}
body.hell .kf-angriff small{color:var(--schwach)}
body.hell .kf-angriff.aus{opacity:.55}
body.hell .blaetter-knopf{background:rgba(255,255,255,.18)}

/* =====================================================================
   Version 12: Kribbeln kompakter – Gegner, Meldungen, Angriffe und Hand
   passen auf einen Bildschirm
   ===================================================================== */
.kampf-feld{gap:8px; max-width:1040px}
.kf-leiste{padding:5px 12px; font-size:.82rem}
.kf-seite,.kf-seite.gegner{grid-template-columns:minmax(120px,165px) 1fr; gap:10px; padding:8px 10px; align-items:center}
.kf-seite.gegner{grid-template-columns:1fr minmax(120px,165px)}
.kf-bank{grid-template-columns:repeat(3,minmax(0,135px)); gap:8px; justify-content:start}
.kf-seite.gegner .kf-bank{justify-content:end}
.kw{padding:5px; gap:3px; border-radius:12px}
.kw-bild{aspect-ratio:1.7}
.kw-kopf b,.kw.aktiv .kw-kopf b{font-size:.8rem}
.kw-typ{width:18px; height:18px; font-size:.65rem}
.kw-kp{height:14px}
.kw-kp em{font-size:.62rem}
.kw-energie{min-height:12px}
.kw-energie i{width:11px; height:11px}
.kw-leer,.kw-platz{min-height:70px}
.kf-meldung{min-height:44px; padding:2px 8px}
.kf-meldung p{font-size:.88rem}
.kf-meldung p.alt{font-size:.74rem}
.kf-aktionen{padding:8px 10px; gap:8px}
.kf-angriffe{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px}
.kf-angriff{padding:7px 10px}
.kf-angriff em{font-size:1.1rem}
.kf-hand-titel{margin:0; font-size:.85rem}
.kf-hand{gap:8px; padding:4px 2px 8px}
.hk{flex:0 0 96px; padding:5px 4px}
.hk svg{width:66px; height:52px}
.hk b{font-size:.72rem}
/* Ziel des eigenen Angriffs */
.kw.ziel{border-color:#ff4d6d; box-shadow:0 0 0 3px rgba(255,77,109,.35), 0 8px 20px rgba(0,0,0,.4)}
.kw.ziel::after{content:'🎯 Ziel'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); z-index:3;
  background:#ff4d6d; color:#fff; font-size:.66rem; font-weight:900; padding:2px 8px; border-radius:99px; white-space:nowrap}
@media(max-width:700px){
  .kf-seite,.kf-seite.gegner{grid-template-columns:minmax(0,1.25fr) minmax(0,3fr); gap:6px; padding:6px}
  .kf-seite.gegner{grid-template-columns:minmax(0,3fr) minmax(0,1.25fr)}
  .kf-seite.gegner .kf-aktiv{order:0}
  .kf-aktiv .kw{max-width:none}
  .kf-bank{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
  .kw-kopf b,.kw.aktiv .kw-kopf b{font-size:.62rem}
  .kw-typ{display:none}
  .kw-energie small{display:none}
  .kw-bild{aspect-ratio:1.3}
  .kw-leer,.kw-platz{min-height:56px; font-size:.6rem}
  .kf-leiste{font-size:.72rem; gap:6px; padding:4px 8px}
  .hk{flex-basis:82px} .hk svg{width:56px; height:44px}
}
#kampf-feld{scroll-margin-top:96px}
.kw-bild{aspect-ratio:2.1}
.kf-seite,.kf-seite.gegner{grid-template-columns:minmax(110px,150px) 1fr}
.kf-seite.gegner{grid-template-columns:1fr minmax(110px,150px)}
.kf-bank{grid-template-columns:repeat(3,minmax(0,122px))}
.kf-meldung p:nth-child(n+3){display:none}
.kf-meldung{min-height:36px}
.kf-aktionen .hinweis.klein{margin:0; font-size:.72rem}
.hk{flex-basis:88px; gap:1px} .hk svg{width:58px; height:44px}
@media(max-width:700px){ .kw-bild{aspect-ratio:1.4} }
@media(max-width:700px){
  .kf-seite,.kf-seite.du{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr); gap:6px; padding:6px}
  .kf-seite.gegner{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
  .kf-bank{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px}
  .kf-aktiv .kw-bild{aspect-ratio:1.25}
  .kf-bank .kw-bild{aspect-ratio:1.15}
  .kf-angriff small{font-size:.7rem}
  .kf-knoepfe{gap:6px}
  .kf-knoepfe .text-knopf{padding:8px 10px; font-size:.8rem}
}

/* =====================================================================
   Version 12.5: Kribbeln übersichtlicher, Tutorial, Spielarten
   ===================================================================== */
/* Aktiv und Bank klar beschriften */
.kf-aktiv,.kf-bank{position:relative}
.kf-aktiv::before,.kf-bank::before{position:absolute; top:-9px; z-index:3; font-size:.62rem; font-weight:900; letter-spacing:.06em;
  padding:2px 8px; border-radius:99px; pointer-events:none; white-space:nowrap}
.kf-aktiv::before{content:'⚔️ AKTIV – KÄMPFT'; left:50%; transform:translateX(-50%); background:#ffd76a; color:#3a2a00}
.kf-bank::before{content:'BANK – RESERVE'; left:8px; background:rgba(255,255,255,.18); color:var(--text); border:1px solid var(--rand)}
.kf-seite.gegner .kf-bank::before{left:auto; right:8px}
.kf-seite{padding-top:14px}
.kf-aktiv .kw{border-width:3px}
.kf-aktiv .kw.aktiv{transform:scale(1.03); box-shadow:0 0 0 3px rgba(255,215,106,.55), 0 0 22px rgba(255,215,106,.45), 0 10px 24px rgba(0,0,0,.45)}
.kf-bank .kw{opacity:.92; filter:saturate(.9)}
.kf-bank .kw.waehlbar{opacity:1; filter:none}
body.hell .kf-bank::before{background:#fff}
/* Tipp: was jetzt? */
.kf-tipp{margin:0; padding:7px 12px; border-radius:12px; font-size:.86rem; font-weight:700; line-height:1.4;
  background:rgba(79,209,139,.12); border:1px solid rgba(79,209,139,.4)}
.kf-tipp:empty{display:none}
.tipp-puls{animation:tipp-puls 1.1s ease-in-out infinite !important; position:relative; z-index:2}
@keyframes tipp-puls{0%,100%{box-shadow:0 0 0 0 rgba(79,209,139,.0)} 50%{box-shadow:0 0 0 6px rgba(79,209,139,.55), 0 0 22px rgba(79,209,139,.6)}}
@media(prefers-reduced-motion:reduce){.tipp-puls{animation:none !important; outline:3px solid #4fd18b}}
.kf-unten{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
/* Spielart-Wahl */
.kampf-modus{width:100%; margin-bottom:6px}
.kampf-modus button{flex:1; display:grid; gap:1px; padding:10px 8px; font-weight:900}
.kampf-modus button small{font-size:.7rem; font-weight:700; opacity:.75}
/* Tutorial */
.kribbel-tutorial-box{text-align:center}
.kt-bild{font-size:4rem; line-height:1; margin:10px 0 4px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.35)); animation:toast-rein .4s cubic-bezier(.2,1.3,.4,1)}
.kribbel-tutorial-box h2{margin:6px 0}
.kt-text{font-size:1.02rem; line-height:1.6; margin:0 0 12px; min-height:5.2em}
.kt-punkte{display:flex; gap:6px; justify-content:center; margin-bottom:12px}
.kt-punkte i{width:9px; height:9px; border-radius:50%; background:rgba(127,140,180,.35)}
.kt-punkte i.aktiv{background:var(--gold); transform:scale(1.25)}
.kt-knoepfe{display:flex; justify-content:space-between; align-items:center; gap:10px}
.kt-knoepfe .gross-knopf{width:auto; padding-inline:26px}
.kw.ziel::after{top:auto; bottom:-11px}

/* =====================================================================
   Version 13: Pack-Animationen, die man wirklich sieht
   ===================================================================== */
.pack-effekt{position:fixed; width:0; height:0; pointer-events:none; z-index:210}
/* Kometeneinschlag: Komet saust von oben rechts heran, Blitz beim Aufprall */
.effekt-komet span{position:absolute; font-size:64px; line-height:1; transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 14px #ffb347) drop-shadow(0 0 30px #ff6a2c);
  animation:komet-flug .62s cubic-bezier(.55,0,.9,.55) forwards}
@keyframes komet-flug{
  from{transform:translate(calc(-50% + 60vw), calc(-50% - 60vh)) scale(.6) rotate(-10deg); opacity:0}
  15%{opacity:1}
  to{transform:translate(-50%,-50%) scale(1.4) rotate(-10deg); opacity:1}
}
.effekt-blitz{width:10px; height:10px}
.effekt-blitz::before{content:''; position:absolute; left:-50vmax; top:-50vmax; width:100vmax; height:100vmax; border-radius:50%;
  background:radial-gradient(circle, #fff 0 8%, rgba(255,200,90,.85) 18%, rgba(255,120,40,.35) 35%, transparent 60%);
  animation:blitz-auf .8s ease-out forwards}
@keyframes blitz-auf{from{transform:scale(.05); opacity:1}60%{opacity:.9}to{transform:scale(1); opacity:0}}
.pack-objekt.weg-komet{animation:pack-komet .9s cubic-bezier(.3,0,.6,1) forwards}
@keyframes pack-komet{
  0%{transform:none}
  12%{transform:translateY(14px) scale(.94) rotate(-4deg); filter:brightness(2.4)}
  40%{transform:translateY(-10px) scale(1.12) rotate(5deg); filter:brightness(1.6) sepia(.6) hue-rotate(-20deg)}
  100%{transform:translateY(40px) scale(.15) rotate(40deg); opacity:0; filter:brightness(3) blur(8px)}
}
/* Sternenportal: ein Wirbelring wächst hinter dem Pack, das Pack wird hineingezogen */
.effekt-portal i{position:absolute; left:calc(var(--pw) * -1); top:calc(var(--pw) * -1); width:calc(var(--pw) * 2); height:calc(var(--pw) * 2);
  border-radius:50%; opacity:0;
  background:conic-gradient(from 0deg, #6a2cff, #24d6ff, #ff6ad5, #6a2cff, #24d6ff, #ff6ad5, #6a2cff);
  -webkit-mask:radial-gradient(circle, transparent 0 34%, #000 36% 62%, transparent 64%);
  mask:radial-gradient(circle, transparent 0 34%, #000 36% 62%, transparent 64%);
  animation:portal-auf 1.8s ease forwards; filter:drop-shadow(0 0 18px #8a5cff)}
.effekt-portal i + i{animation-direction:normal; animation-name:portal-auf2; opacity:0;
  -webkit-mask:radial-gradient(circle, rgba(0,0,0,.9) 0 30%, transparent 33%); mask:radial-gradient(circle, rgba(0,0,0,.9) 0 30%, transparent 33%);
  background:radial-gradient(circle, #fff 0 10%, #b98cff 30%, #2a0f6b 60%)}
@keyframes portal-auf{0%{transform:scale(.1) rotate(0); opacity:0}25%{opacity:1}70%{transform:scale(1) rotate(400deg); opacity:1}
  100%{transform:scale(1.5) rotate(720deg); opacity:0}}
@keyframes portal-auf2{0%,20%{transform:scale(.1); opacity:0}45%{opacity:1}75%{transform:scale(1); opacity:1}100%{transform:scale(2.4); opacity:0}}
.pack-objekt.weg-portal{animation:pack-portal .95s cubic-bezier(.6,0,.8,.6) forwards}
@keyframes pack-portal{to{transform:rotate(540deg) scale(.04); opacity:0; filter:hue-rotate(180deg) brightness(2)}}
/* Feuerwerk: das Pack steigt als Rakete auf, oben platzen bunte Sterne */
.pack-objekt.weg-feuerwerk{animation:pack-rakete .8s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes pack-rakete{
  0%{transform:none}
  20%{transform:translateY(10px) scale(.95)}
  100%{transform:translateY(-55vh) scale(.25) rotate(8deg); opacity:0; filter:brightness(2.2)}
}
.effekt-rakete{transform:translate(var(--rx,0), -36vh)}
.effekt-rakete.r1{--rx:-22vw; transform:translate(-22vw,-28vh)}
.effekt-rakete.r2{--rx:22vw; transform:translate(22vw,-30vh)}
.effekt-rakete i{position:absolute; width:9px; height:9px; margin:-4.5px; border-radius:50%;
  background:var(--f,#ffd93d); box-shadow:0 0 10px var(--f,#ffd93d), 0 0 22px var(--f,#ffd93d);
  animation:funke-weg 1.2s ease-out forwards}
.effekt-rakete.r1 i{--f:#ff5d9e} .effekt-rakete.r2 i{--f:#5aa9ff}
.effekt-rakete i:nth-child(3n){--f:#4fd18b} .effekt-rakete i:nth-child(4n){--f:#ffffff}
.effekt-rakete i:nth-child(1){--a:0deg} .effekt-rakete i:nth-child(2){--a:30deg} .effekt-rakete i:nth-child(3){--a:60deg}
.effekt-rakete i:nth-child(4){--a:90deg} .effekt-rakete i:nth-child(5){--a:120deg} .effekt-rakete i:nth-child(6){--a:150deg}
.effekt-rakete i:nth-child(7){--a:180deg} .effekt-rakete i:nth-child(8){--a:210deg} .effekt-rakete i:nth-child(9){--a:240deg}
.effekt-rakete i:nth-child(10){--a:270deg} .effekt-rakete i:nth-child(11){--a:300deg} .effekt-rakete i:nth-child(12){--a:330deg}
@keyframes funke-weg{from{transform:rotate(var(--a)) translateX(0) scale(1.4); opacity:1}
  to{transform:rotate(var(--a)) translateX(min(22vw,170px)) scale(.4); opacity:0}}
/* Sternenknall: Druckwelle */
.effekt-ring::before{content:''; position:absolute; width:40px; height:40px; left:-20px; top:-20px; border-radius:50%;
  border:6px solid #ffd93d; box-shadow:0 0 30px #ffd93d, inset 0 0 20px #ffd93d; animation:ring-auf .8s ease-out forwards}
.effekt-ring.lila::before{border-color:#c38bff; box-shadow:0 0 30px #8a5cff, inset 0 0 20px #8a5cff}
@keyframes ring-auf{from{transform:scale(.3); opacity:1}to{transform:scale(12); opacity:0; border-width:1px}}
@media (prefers-reduced-motion: reduce){ .pack-effekt{display:none} }

/* ---------- Einmalige Angebote im Shop (Halloween-Pack) ---------- */
.angebote{display:grid; gap:12px; margin:0 0 16px}
.angebot{display:flex; gap:18px; align-items:center; padding:14px 18px; border-radius:20px; position:relative; overflow:hidden;
  background:linear-gradient(120deg, rgba(255,138,31,.28), rgba(123,63,209,.32)); border:2px solid rgba(255,170,80,.75);
  box-shadow:0 0 0 4px rgba(255,138,31,.12), 0 12px 30px rgba(0,0,0,.3)}
.angebot.gekauft{opacity:.7; border-color:rgba(255,255,255,.25)}
.angebot .angebot-pack{width:96px; height:136px; flex:none; animation:pack-wippen 2.6s ease-in-out infinite; cursor:default}
.angebot .angebot-pack{display:grid; place-items:center}
.angebot .angebot-pack .pack-inhalt{gap:4px; padding:0}
.angebot .angebot-pack .pack-season,.angebot .angebot-pack .pack-sub{display:none}
.angebot .angebot-pack .pack-logo{width:46px; height:46px; border-radius:14px; font-size:1.7rem}
.angebot .angebot-pack .pack-titel{font-size:.72rem; letter-spacing:.5px}
@media (max-width:520px){ .angebot .angebot-pack .pack-logo{width:38px; height:38px; font-size:1.4rem} .angebot .angebot-pack .pack-titel{font-size:.62rem} }
.angebot-text{display:grid; gap:4px; min-width:0}
.angebot-text b{font-size:1.3rem}
.angebot-text p{margin:0; color:var(--schwach, #c9d0e6)}
.angebot-marke{font-size:.72rem; font-weight:900; letter-spacing:1px; color:#ffb35c}
.angebot-kaufen{justify-self:start; margin-top:6px}
body.hell .angebot{background:linear-gradient(120deg, rgba(255,170,80,.25), rgba(170,120,255,.22))}
@media (max-width:520px){ .angebot{gap:12px; padding:12px} .angebot .angebot-pack{width:74px; height:104px} .angebot-text b{font-size:1.1rem} }
.reiter-knopf.mit-angebot{position:relative}
.reiter-knopf.mit-angebot::after{content:attr(data-angebot); position:absolute; top:-6px; right:-4px; font-size:.95rem;
  animation:neu-puls 1.6s ease-in-out infinite}

/* ---------- Kribbeln: Aktionskarten ---------- */
.aktion-knopf{border-color:rgba(79,209,139,.6) !important}
.aktion-knopf small{opacity:.75; font-size:.78em}
.kw-trefferzahl.heilung{color:#4fd18b; text-shadow:0 0 8px rgba(79,209,139,.8), 0 2px 0 #0b3a22}
.aktionskarte-flug{position:fixed; left:50%; top:45%; z-index:220; pointer-events:none;
  transform:translate(-50%,-50%); animation:ak-weg 2.3s ease forwards}
.ak-karte{width:170px; aspect-ratio:63/88; border-radius:14px; padding:12px; display:grid; align-content:center; justify-items:center;
  gap:6px; text-align:center; color:#10301f; border:4px solid #f4d78a;
  background:radial-gradient(circle at 50% 30%, #ffffff, #c9f5d9 55%, #7fdcaa);
  box-shadow:0 0 0 3px rgba(255,255,255,.25), 0 0 40px rgba(79,209,139,.7), 0 20px 40px rgba(0,0,0,.45);
  animation:ak-dreh .55s cubic-bezier(.2,1.3,.4,1)}
.aktionskarte-flug.computer .ak-karte{background:radial-gradient(circle at 50% 30%, #fff, #dfe4ff 55%, #a9b4ff); color:#1b2250;
  box-shadow:0 0 40px rgba(110,130,255,.7), 0 20px 40px rgba(0,0,0,.45)}
.ak-karte small{font-weight:900; letter-spacing:1px; text-transform:uppercase; font-size:.66rem; opacity:.7}
.ak-icon{font-size:3.2rem; line-height:1}
.ak-karte b{font-size:1.15rem}
.ak-karte p{margin:0; font-size:.82rem; line-height:1.3}
@keyframes ak-dreh{from{transform:rotateY(90deg) scale(.6)}to{transform:none}}
@keyframes ak-weg{0%,75%{opacity:1; transform:translate(-50%,-50%)}100%{opacity:0; transform:translate(-50%,-80%) scale(.85)}}

/* =====================================================================
   Version 13: Drucken – Karten auswählen, Spielbrett, Aktionskarten
   und KEINE leeren Seiten mehr: Jede Druckseite ist nur 268 mm hoch
   (statt einer vollen A4-Seite). So passt sie auch dann auf ein Blatt,
   wenn Browser oder iPad eigene Ränder hinzufügen – genau das hat
   vorher eine leere Seite dazwischen erzeugt.
   ===================================================================== */
.druck-seite.druck-karten{--links:10.5mm}
#druck-los:disabled{opacity:.45}
/* Auswahl im Druckfenster */
.druck-wahl{display:grid; gap:10px}
.dw-kopf{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center}
.dw-kopf .text-knopf{color:#1b2a6b; border-color:#9aa6d8}
.dw-raster{display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:8px; max-height:46vh; overflow-y:auto; padding:2px}
.dw-karte{display:grid; justify-items:center; gap:2px; padding:6px 4px; border-radius:12px; border:2px solid #d5d9ea; background:#f5f6fb;
  color:#111; font:inherit; cursor:pointer; position:relative; transition:transform .12s, border-color .12s}
.dw-karte:active{transform:scale(.96)}
.dw-karte .dw-bild{width:56px; height:56px; display:block}
.dw-karte .dw-bild svg{width:100%; height:100%}
.dw-karte b{font-size:.74rem; line-height:1.15; text-align:center; overflow-wrap:anywhere}
.dw-karte small{font-size:.66rem; color:#666}
.dw-karte.an{border-color:#2fb36a; background:#e4f8ec; box-shadow:0 0 0 2px rgba(47,179,106,.25)}
.dw-karte.an::after{content:'✓'; position:absolute; top:4px; right:6px; width:20px; height:20px; border-radius:50%;
  background:#2fb36a; color:#fff; font-weight:900; font-size:.8rem; display:grid; place-items:center}

/* Aktionskarten (Druck) */
.druck-aktion .karte-seite{position:absolute; inset:0; display:grid; align-content:center; justify-items:center; text-align:center;
  gap:2mm; padding:5mm; border-radius:0; box-shadow:none}
.dak-vor{background:radial-gradient(circle at 50% 30%, #ffffff, #d4f6e1 55%, #8fe0b4); color:#10301f;
  border:2.2mm solid #f1cf73 !important}
.dak-vor small{font-weight:900; letter-spacing:.4mm; text-transform:uppercase; font-size:2.6mm; opacity:.7}
.dak-icon{font-size:16mm; line-height:1}
.dak-vor b{font-size:5.4mm}
.dak-vor p{margin:0; font-size:3.3mm; line-height:1.3}
.dak-vor em{font-style:normal; font-size:2.4mm; opacity:.7; margin-top:2mm}
.dak-rueck{background:repeating-linear-gradient(45deg, #1f6b46 0 4mm, #258454 4mm 8mm); color:#fff}
.dak-rueck span{font-size:16mm} .dak-rueck b{font-size:7mm; letter-spacing:1.5mm} .dak-rueck small{font-size:2.8mm; opacity:.85}

/* Spielbrett (eine ganze Seite je Spieler) */
.druck-seite.druck-brett{display:grid; grid-template-columns:100%; grid-auto-rows:auto; align-content:start; gap:4mm}
.sb-kopf{display:flex; justify-content:space-between; align-items:center; gap:4mm; font-size:11pt; flex-wrap:wrap}
.sb-kopf b{font-size:14pt}
.sb-punkte i{display:inline-block; width:7mm; height:7mm; border:.5mm dashed #888; border-radius:50%; margin-left:1.5mm; vertical-align:middle}
.sb-hinweis{text-align:center; font-size:8pt !important; color:#777; margin:0}
.sb-reihe{display:grid; grid-template-columns:repeat(3, 64mm); gap:3mm; justify-content:center}
.sb-platz{height:89mm; border:.6mm dashed #8a93b8; border-radius:4mm; display:grid; place-content:center; justify-items:center;
  text-align:center; gap:1.5mm; color:#5b6488; background:#f4f6ff; padding:3mm}
.sb-platz b{font-size:13pt; letter-spacing:.5mm}
.sb-platz small{font-size:8pt; max-width:50mm; line-height:1.3}
.sb-icon{font-size:13mm; line-height:1; opacity:.55}
.sb-aktiv{border:1mm solid #e0a020; background:#fff5d6; color:#8a5a00; box-shadow:inset 0 0 0 1.4mm #fff, inset 0 0 0 1.9mm #f4c76a}
.sb-ablage{background:#f3f3f3; color:#777}
.sb-zug{border:.4mm solid #ccd2e8; border-radius:4mm; padding:3mm 5mm; font-size:9.5pt}
.sb-zug ol{margin:1.5mm 0 0; padding-left:5mm; columns:2; column-gap:8mm}
.sb-zug li{font-size:9.5pt !important; line-height:1.5 !important}

@media print{
  /* Keine feste Papiergröße: A4 und US-Letter funktionieren beide (bei „A4“ hat der Browser auf Letter-Papier hochskaliert) */
  @page{size:auto; margin:0}
  html,body{height:auto !important; margin:0 !important; padding:0 !important}
  #druck-overlay,#druck-bereich,#druck-seiten{margin:0 !important; padding:0 !important; overflow:visible !important; max-width:none !important; display:block !important}
  .druck-optionen{display:none !important}
  /* Alle Seiten: A4-breit (210 mm), aber nur 271 mm hoch. Der Browser skaliert die Seite auf die Papierbreite –
     auf US-Letter (215,9 mm) wird sie dadurch knapp 3 % größer. Mit 271 mm passt sie trotzdem auf ein Blatt.
     Vorher (296,6 mm) lief der Rest auf eine zweite, fast leere Seite. */
  .druck-seite,.druck-seite.druck-karten,.druck-seite.druck-text{width:210mm !important; height:271mm !important; min-height:0 !important;
    margin:0 !important; box-shadow:none !important; overflow:hidden !important;
    break-after:page; page-break-after:always; break-inside:avoid; break-before:auto}
  .druck-seite:last-child{break-after:auto; page-break-after:auto}
  /* Karten: 3 × 3 lückenlos, waagerecht mittig (wichtig für die Rückseiten) */
  .druck-seite.druck-karten{--links:10.5mm; --oben:5mm; padding:5mm 10.5mm 2mm !important;
    grid-template-columns:repeat(3, 63mm); grid-template-rows:repeat(3, 88mm); justify-content:start; align-content:start}
  .druck-seite.druck-karten .sm-senkrecht{top:1.5mm; height:3mm; box-shadow:0 268mm 0 #555}
  .druck-seite.druck-karten .sm-waagerecht{left:2mm; width:7mm; box-shadow:199mm 0 0 #555}
  /* Textseiten (Regeln, Marken, Spielbrett) */
  .druck-seite.druck-text{padding:8mm 12mm 3mm !important; display:block}
  .druck-seite.druck-brett{display:grid !important; grid-template-rows:none !important; grid-auto-rows:auto; padding:6mm 8mm 2mm !important}
  /* Codes für Lehrkräfte: 5 Reihen */
  .druck-seite:not(.druck-karten):not(.druck-text){padding:5mm 10mm 2mm !important; grid-template-rows:repeat(5, 52.6mm) !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
  .dk-anleitung b{overflow-wrap:anywhere}
}

/* ---------- Einleitung für neue Spieler (mit Infos für Eltern) ---------- */
.einleitung-box{width:min(520px,100%)}
.ein-seite{display:grid; gap:10px; text-align:center}
.ein-seite[hidden]{display:none}
.ein-bild{font-size:3.2rem; line-height:1}
.ein-seite h2{margin:0}
.ein-seite p{margin:0}
.ein-schritte{display:grid; gap:8px; text-align:left; margin-top:4px}
.ein-schritte div{display:grid; grid-template-columns:44px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center;
  padding:10px 12px; border-radius:14px; background:rgba(127,140,200,.12)}
.ein-schritte span{grid-row:span 2; font-size:1.8rem; text-align:center}
.ein-schritte small{color:var(--schwach, #c9d0e6); line-height:1.3}
.ein-klassen{justify-content:center; margin:6px auto 0}
.ein-klassen button{min-width:46px; font-size:1.1rem}
.ein-eltern{text-align:left; margin:0; padding-left:18px; display:grid; gap:8px; line-height:1.4; font-size:.93rem}
.ein-fuss{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:16px}
.ein-fuss .kt-punkte{margin:0}
.neu-hallo{font-weight:800; margin:0 0 4px; color:var(--gold)}

/* Rückseite „Drachenwappen“ – hatte bisher kein eigenes Aussehen */
.karte-rueck.r-drache{border-color:#e8b44a; position:relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,210,110,.45) 0 22%, transparent 40%),
    radial-gradient(circle at 50% 0, transparent 0 9px, rgba(0,0,0,.28) 10px 11px, transparent 12px) 0 0 / 22px 14px,
    radial-gradient(circle at 50% 0, transparent 0 9px, rgba(255,200,90,.22) 10px 11px, transparent 12px) 11px 7px / 22px 14px,
    linear-gradient(160deg,#7a1414,#b2261a 45%,#3d0808)}
.karte-rueck.r-drache .rueck-zeichen{font-size:0; background:radial-gradient(circle,#ffe39a,#d99a2b 70%,#8a5a0f); border-color:#ffe8a8;
  border-radius:50% 50% 46% 46% / 40% 40% 60% 60%; box-shadow:0 0 22px rgba(255,190,80,.6)}
.karte-rueck.r-drache .rueck-zeichen::after{content:'🐉'; font-size:2.6rem}
.sv-buehne .karte-rueck.r-drache .rueck-zeichen::after{font-size:2.6rem}
.shop-vorschau .karte-rueck.r-drache .rueck-zeichen::after{font-size:1.2rem}
.druck-k .karte-rueck.r-drache .rueck-zeichen::after{font-size:11mm}

/* Sammler-Packs für alte Seasons */
.angebot.sammler-pack{background:linear-gradient(120deg, rgba(46,163,255,.22), rgba(123,31,162,.28)); border-color:rgba(120,180,255,.6);
  box-shadow:0 0 0 4px rgba(46,163,255,.1), 0 12px 30px rgba(0,0,0,.3)}
.angebot.sammler-pack .angebot-marke{color:#8cc8ff}
.sammler-info{font-size:.85rem; opacity:.9}
.angebot .shop-dauer{font-size:.75rem; opacity:.75; justify-self:start; margin:0; position:static}
body.hell .angebot.sammler-pack{background:linear-gradient(120deg, rgba(46,163,255,.16), rgba(170,120,255,.18))}