/* ===== Spielfelder (Lex 18.10.2026): Widgets statt Textboxen ===== */
.sfWeg{display:none!important}.sfKlein{max-width:100%;opacity:.8;font-size:13px;margin-top:6px}
.sfStufen{display:grid;gap:12px;margin-top:8px}.sfStufe,.sfZahl{display:flex;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sfVis{flex:0 0 150px;min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.sfVis svg{width:100%;max-height:120px}.sfVis svg.sfSand,.sfVis svg.sfSack{width:84px}
.sfVis.wipp svg{animation:sfWipp .5s cubic-bezier(.3,1.7,.5,1)}@keyframes sfWipp{0%{transform:scale(.88) rotate(-4deg)}100%{transform:none}}
.sfVgl{font-size:12px;color:var(--dim)}.sfRechts{flex:1;min-width:0}.sfLabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.sfPills{display:flex;flex-wrap:wrap;gap:7px}.sfPill,.sfOpt{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e8efe4;border-radius:99px;padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer;min-height:38px;transition:transform .15s cubic-bezier(.3,1.7,.5,1),background .15s,border-color .15s}
.sfPill:hover,.sfOpt:hover{transform:translateY(-2px);border-color:#78f05d}.sfPill:active,.sfOpt:active{transform:scale(.94)}
.sfPill.an,.sfOpt.an{background:linear-gradient(180deg,rgba(120,240,93,.32),rgba(120,240,93,.12));border-color:#78f05d;color:#fff;box-shadow:0 0 18px rgba(120,240,93,.25)}
.sfRange{width:100%;margin-top:12px;-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;background:linear-gradient(90deg,#78f05d var(--p,0%),rgba(255,255,255,.12) var(--p,0%));outline:none}
.sfRange::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid #78f05d;cursor:grab;box-shadow:0 2px 10px rgba(0,0,0,.5)}.sfRange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #78f05d}
.sfFaden{stroke-dasharray:3 3;animation:sfRiesel .5s linear infinite}@keyframes sfRiesel{to{stroke-dashoffset:-6}}
.sfMuenze{animation:sfMuenze .35s cubic-bezier(.3,1.6,.5,1) both}@keyframes sfMuenze{from{opacity:0;transform:translateY(-24px)}}
.sfPunkt{animation:sfPop .3s cubic-bezier(.3,1.8,.5,1) both}@keyframes sfPop{from{transform:scale(0)}}.sfRaum{transition:all .4s}
.sfGross{display:flex;align-items:center;gap:12px}.sfWert{font-size:34px;min-width:120px;text-align:center;font-variant-numeric:tabular-nums}.sfMinus,.sfPlus{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;font-size:22px;cursor:pointer;transition:transform .12s}.sfMinus:active,.sfPlus:active{transform:scale(.88)}
.sfAuswahl{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}.sfOpt{border-radius:16px;padding:12px 18px;font-size:15px;display:inline-flex;gap:9px;align-items:center}.sfOptI{font-size:20px}
.sfGaeste{margin-top:8px}.sfBuehne{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;min-height:120px;padding:18px 20px 10px;border-radius:18px;background:radial-gradient(90% 120% at 50% 100%,rgba(120,240,93,.12),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sfBuehne::after{content:'';position:absolute;left:6%;right:6%;bottom:8px;height:3px;border-radius:3px;background:rgba(255,255,255,.12)}
.sfGruppe{position:relative;width:118px;margin:0 -16px;transform:rotate(var(--r,0deg))}.sfGruppe svg{width:100%;height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}.sfGruppe.neu{animation:sfPlopp .55s cubic-bezier(.3,1.9,.5,1)}@keyframes sfPlopp{0%{transform:translateY(-70px) scale(.3);opacity:0}100%{transform:rotate(var(--r,0deg))}}
.sfBuehne.bumm{animation:sfBumm .4s}@keyframes sfBumm{30%{transform:scale(1.015)}}.sfLeer{color:var(--dim);font-size:13.5px;align-self:center}
.sfStat{font-size:12.5px;color:#78f05d;margin:6px 2px;min-height:18px}.sfKacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.sfGast{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 8px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);color:#e8efe4;cursor:pointer;font:inherit;transition:transform .15s cubic-bezier(.3,1.7,.5,1),border-color .15s}
.sfGast:hover{transform:translateY(-3px) rotate(-1deg);border-color:rgba(120,240,93,.6)}.sfGast:active{transform:scale(.95)}.sfGast.an{background:linear-gradient(180deg,rgba(120,240,93,.22),rgba(120,240,93,.06));border-color:#78f05d;box-shadow:0 0 20px rgba(120,240,93,.2)}
.sfGastBild svg{width:84px;height:62px}.sfGastName{font-size:12.5px;text-align:center;line-height:1.3}.sfNeu{margin-top:10px}.sfNeuIn,.sfAddIn{width:100%;background:#0b1118;border:1px dashed rgba(255,255,255,.2);border-radius:10px;color:#fff;padding:10px 12px;font:inherit}
.sfKarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}.sfKarte{position:relative;display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 18px rgba(0,0,0,.28);transform:rotate(var(--r,0deg));animation:sfAuf .5s cubic-bezier(.3,1.7,.5,1) both;transition:transform .18s,box-shadow .18s}
@keyframes sfAuf{from{opacity:0;transform:translateY(24px) scale(.88)}}.sfKarte:hover{transform:translateY(-4px) rotate(0);box-shadow:inset 0 0 0 1px rgba(120,240,93,.5),0 14px 28px rgba(0,0,0,.4)}
.sfKarte.gewaehlt{background:linear-gradient(160deg,rgba(224,163,59,.28),rgba(224,163,59,.06));box-shadow:inset 0 0 0 2px #e0a33b,0 0 28px rgba(224,163,59,.3)}
.sfKTxt{font-size:15px;line-height:1.45;min-height:44px;outline:none}.sfKTxt[contenteditable=true]{background:rgba(255,255,255,.07);border-radius:8px;padding:4px 6px}.sfKAkt{display:flex;gap:6px;align-items:center}
.sfWaehl{flex:1;border:0;border-radius:10px;padding:9px 12px;font:inherit;font-weight:700;background:linear-gradient(180deg,#78f05d,#4dc033);color:#0d1a0a;cursor:pointer;min-height:38px;box-shadow:0 3px 0 #2c7a1b;transition:transform .08s,box-shadow .08s}.sfWaehl:active{transform:translateY(2px);box-shadow:0 1px 0 #2c7a1b}.sfKarte.gewaehlt .sfWaehl{background:linear-gradient(180deg,#f5c04a,#e0a33b);box-shadow:0 3px 0 #8a5d10}
.sfIk{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;font-size:15px}.sfIk:hover{border-color:#c94fb0}.sfAdd{display:flex;gap:8px;margin-top:12px}
.sfSiegel{position:relative;overflow:hidden;padding:18px 20px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}.sfSiegel.voll{background:linear-gradient(160deg,rgba(224,163,59,.2),rgba(201,79,176,.1));box-shadow:inset 0 0 0 2px rgba(224,163,59,.7),0 0 30px rgba(224,163,59,.18)}
.sfSTxt{font:700 21px/1.35 Georgia,serif;color:#fff;padding-right:130px}.sfSLeer{color:var(--dim);font-size:14px}.sfLadeBahn{height:8px;border-radius:99px;background:rgba(255,255,255,.12);margin-top:14px;overflow:hidden}.sfLade{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#e0a33b,#78f05d)}.sfSiegel.lade .sfLade{animation:sfLaden 1s cubic-bezier(.3,.8,.3,1) both}@keyframes sfLaden{from{width:0}}
.sfStempel{position:absolute;right:16px;top:14px;padding:5px 12px;border:2px solid #78f05d;color:#78f05d;border-radius:8px;font-weight:800;font-size:12px;letter-spacing:.12em;transform:rotate(-7deg)}.sfSiegel.lade .sfStempel{animation:sfStempel .35s .9s cubic-bezier(.3,2,.5,1) both}@keyframes sfStempel{from{opacity:0;transform:scale(2.4) rotate(-20deg)}}
.sfBew{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.sfBew.ok{box-shadow:inset 0 0 0 2px #78f05d}.sfBewKopf{display:flex;gap:18px;align-items:center;margin-bottom:12px}.sfBewSumme{display:flex;flex-direction:column}.sfBewSumme b{font-size:44px;line-height:1;color:#78f05d}.sfBewSumme small{color:var(--dim)}.sfRadar{width:150px;height:150px;margin-left:auto}.sfRadarFl{transition:all .3s}
.sfBewListe{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:6px 20px}.sfKrit{display:flex;align-items:center;gap:10px;padding:6px 0}.sfKI{font-size:20px;width:28px;text-align:center}.sfKN{flex:1;font-size:14px}.sfPunkte{display:flex;gap:6px}.sfPkt{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:transparent;cursor:pointer;transition:transform .12s cubic-bezier(.3,1.9,.5,1),background .12s}.sfPkt:hover{transform:scale(1.18)}.sfPkt.an{background:#78f05d;border-color:#78f05d;box-shadow:0 0 10px rgba(120,240,93,.5)}
.sfBewAkt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.sfHint{font-size:12.5px;color:var(--dim)}
.sfChipRaum{display:flex;flex-wrap:wrap;gap:8px}.sfChip{display:inline-flex;align-items:center;gap:6px;padding:7px 8px 7px 14px;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);animation:sfAuf .4s cubic-bezier(.3,1.7,.5,1) both;font-size:14px}.sfChip button{width:24px;height:24px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}.sfChip button:hover{background:#c94fb0}
@media (max-width:900px){.sfStufe,.sfZahl{flex-direction:column;align-items:stretch}.sfVis{flex-basis:auto}.sfSTxt{padding-right:0;font-size:18px}.sfStempel{position:static;display:inline-block;margin-top:10px}.sfBewKopf{flex-wrap:wrap}.sfRadar{margin:0 auto}}
@media (prefers-reduced-motion:reduce){.sfKarte,.sfChip,.sfGruppe.neu,.sfMuenze,.sfPunkt,.sfFaden{animation:none!important}}

/* ===== Erfolge (Achievement-Pop-ups, Fortschritt) ===== */
#erfStapel{position:fixed;top:70px;right:18px;z-index:8500;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:min(340px,calc(100vw - 36px))}
.erfPop{pointer-events:auto;display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(18,26,40,.96),rgba(30,20,44,.96));box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(120,240,93,.55);cursor:pointer;animation:erfEin .55s cubic-bezier(.3,1.6,.5,1) both;position:relative;overflow:hidden}
.erfPop::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);animation:erfGlanz .9s .3s ease-out}
.erfPop.aus{animation:erfAus .35s ease-in both}.erfPop.gross{box-shadow:0 14px 40px rgba(0,0,0,.6),inset 0 0 0 2px #e0a33b,0 0 30px rgba(224,163,59,.35)}
.erfIk{flex:0 0 46px;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:radial-gradient(circle at 30% 25%,rgba(120,240,93,.35),rgba(201,79,176,.18))}.erfPop.gross .erfIk{background:radial-gradient(circle at 30% 25%,rgba(224,163,59,.5),rgba(201,79,176,.2))}
.erfTxt{min-width:0}.erfKopf{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#78f05d;font-weight:800}.erfPop.gross .erfKopf{color:#e0a33b}.erfTitel{font-size:15px;font-weight:700;color:#fff;line-height:1.3}.erfSub{font-size:12.5px;color:#aab6c3;line-height:1.4;margin-top:2px}.erfGeh{font-size:11.5px;color:#78f05d;margin-top:3px}
@keyframes erfEin{from{opacity:0;transform:translateX(60px) scale(.9)}}@keyframes erfAus{to{opacity:0;transform:translateX(60px)}}@keyframes erfGlanz{to{transform:translateX(120%)}}
#erfPille{position:fixed;left:288px;bottom:16px;z-index:8400;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:99px;background:rgba(14,20,31,.92);box-shadow:0 6px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.14);color:#e8efe4;font:inherit;font-size:12.5px;cursor:pointer;border:0}
#erfPille .rg{width:30px;height:30px;position:relative}#erfPille svg{width:100%;height:100%;transform:rotate(-90deg)}#erfPille circle{fill:none;stroke-width:4}.erfBg{stroke:rgba(255,255,255,.12)}.erfFg{stroke:#78f05d;stroke-linecap:round;transition:stroke-dasharray .6s}
#erfListe{position:fixed;left:288px;bottom:60px;z-index:8450;width:min(360px,calc(100vw - 30px));max-height:min(60vh,520px);overflow:auto;padding:14px;border-radius:18px;background:rgba(14,20,31,.98);box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14);animation:erfEin .35s both}
#erfListe h4{margin:0 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#78f05d}.erfZ{display:flex;gap:10px;align-items:center;padding:7px 4px;border-radius:10px;font-size:13.5px;cursor:pointer}.erfZ:hover{background:rgba(255,255,255,.06)}.erfZ.zu{opacity:.38;filter:grayscale(1)}.erfZ .ik{width:30px;text-align:center;font-size:18px}.erfZ small{display:block;color:var(--dim);font-size:11.5px}
@media (max-width:900px){#erfPille{left:12px;bottom:70px}#erfListe{left:12px;bottom:112px}#erfStapel{top:56px;right:10px}}
@media (prefers-reduced-motion:reduce){.erfPop,.erfPop::before{animation:none!important}}
#erfPille{bottom:62px}#erfListe{bottom:106px}
#erfStapel{top:112px}#erfPille{left:auto;right:330px}#erfListe{left:auto;right:330px}
.sfZahl .sfVis:has(.sfPlan),.sfStufe .sfVis:has(.sfPlan){flex-basis:230px}

/* ===== Whiteboard spielerisch ===== */
#wbWelt .zettel{background:linear-gradient(160deg,#1c2638,#141b2a);color:#eef2e8;border-radius:14px;border-top-width:5px;box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.07);transform:rotate(var(--r,0deg));transition:transform .18s cubic-bezier(.3,1.7,.5,1),box-shadow .18s}
#wbWelt .zettel:hover{transform:translateY(-4px) rotate(0) scale(1.03);box-shadow:0 18px 32px rgba(0,0,0,.55),inset 0 0 0 1px rgba(120,240,93,.45);z-index:3}
#wbWelt .zettel.an{outline:none;box-shadow:0 0 0 2px #78f05d,0 0 26px rgba(120,240,93,.45);transform:rotate(0) scale(1.04);z-index:4}
#wbWelt .zettel .zkopf{color:#9fb0c4}#wbWelt .zettel .zkopf button{color:#9fb0c4}#wbWelt .zettel .zkopf button:hover{color:#fff}.wbIk{font-style:normal;font-size:13px}
#wbWelt .zettel textarea{color:#eef2e8;font-size:14px}#wbWelt .zettel textarea:focus{background:rgba(255,255,255,.08)}
#wbWelt .zettel.kat-pool{background:linear-gradient(160deg,#2a2d33,#1f2227);opacity:.8}#wbWelt .zettel.kat-frage{background:linear-gradient(160deg,#233048,#1a2438)}
#wbWelt .zettel .quelle,#wbWelt .zettel small{color:#8fa0b4}
.wbPop{animation:wbPop .55s cubic-bezier(.3,1.9,.5,1) both}@keyframes wbPop{from{opacity:0;transform:translateY(-34px) scale(.5) rotate(-8deg)}}
#wbWelt .buendel{border-radius:18px;border-color:rgba(120,240,93,.55);background:radial-gradient(120% 120% at 0% 0%,rgba(120,240,93,.1),rgba(201,79,176,.05))}
#wbAktion{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);z-index:9;display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:99px;background:rgba(14,20,31,.96);box-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(120,240,93,.5);animation:wbAEin .3s cubic-bezier(.3,1.8,.5,1) both}
#wbAktion.zu{animation:wbAAus .2s both}@keyframes wbAEin{from{opacity:0;transform:translate(-50%,24px) scale(.9)}}@keyframes wbAAus{to{opacity:0;transform:translate(-50%,16px)}}
.wbAN{padding:0 8px 0 6px;color:#9fb0c4;font-size:13px}.wbAN b{color:#78f05d;font-size:16px}
.wbA{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:99px;padding:9px 16px;font:inherit;font-size:13.5px;cursor:pointer;min-height:40px;transition:transform .12s cubic-bezier(.3,1.8,.5,1)}
.wbA:hover{transform:translateY(-2px);border-color:#78f05d}.wbA:active{transform:scale(.94)}.wbA.prim{background:linear-gradient(180deg,#78f05d,#4dc033);color:#0d1a0a;font-weight:700;border-color:transparent;box-shadow:0 3px 0 #2c7a1b}
@media (prefers-reduced-motion:reduce){.wbPop,#wbAktion{animation:none!important}}

#erfPille,#erfListe{right:70px}
body:not(.rechtsZu) #erfPille{display:none}