/* =====================================================================
   SpielAtze - Basis-Design (Sticker-Arcade-Look)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root{
  --ink:#08060f;
  --ink-soft:#140f24;
  --bg:#0a0716;
  --bg-2:#120b26;
  --panel:rgba(255,255,255,.055);
  --panel-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.14);
  --txt:#f6f2ff;
  --txt-dim:#b9aed6;
  --txt-mute:#8d82ab;

  --pink:#ff2ea6;
  --violet:#8b5cf6;
  --cyan:#22d3ee;
  --lime:#a3e635;
  --yellow:#facc15;
  --orange:#fb923c;
  --red:#ef4444;
  --green:#22c55e;

  --grad-hot:linear-gradient(135deg,var(--pink),var(--violet));
  --grad-cool:linear-gradient(135deg,var(--cyan),var(--violet));
  --grad-fun:linear-gradient(135deg,var(--lime),var(--cyan));

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-full:999px;
  --shadow-hard:0 8px 0 var(--ink);
  --shadow-soft:0 24px 60px rgba(0,0,0,.55);
  --ring:0 0 0 3px rgba(255,46,166,.35);

  --font-head:'Fredoka','Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --font-body:'Outfit','Segoe UI',system-ui,-apple-system,sans-serif;

  --ease-pop:cubic-bezier(.22,1.4,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--txt);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-head{font-family:var(--font-head);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--pink);color:#fff}

/* ---------- Hintergrund: Aurora + Raster + Rauschen ---------- */
.sa-bg{position:fixed;inset:0;z-index:-3;overflow:hidden;background:
  radial-gradient(1200px 700px at 12% -10%,#2a1152 0%,transparent 60%),
  radial-gradient(1000px 700px at 92% 8%,#0b2f52 0%,transparent 62%),
  radial-gradient(900px 900px at 50% 120%,#3d0b3a 0%,transparent 60%),
  linear-gradient(180deg,#0a0716,#080512 60%,#0a0716);}
.sa-bg::after{content:'';position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 20%,transparent 75%);}

.blob{position:fixed;z-index:-2;border-radius:50%;filter:blur(80px);opacity:.42;pointer-events:none;
  animation:blobFloat 18s ease-in-out infinite;will-change:transform}
.blob.b1{width:420px;height:420px;background:var(--pink);top:-120px;left:-100px}
.blob.b2{width:480px;height:480px;background:var(--violet);top:20%;right:-160px;animation-delay:-6s}
.blob.b3{width:380px;height:380px;background:var(--cyan);bottom:-140px;left:22%;animation-delay:-11s}
.blob.b4{width:300px;height:300px;background:var(--lime);bottom:12%;right:12%;opacity:.22;animation-delay:-3s}

@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,-40px) scale(1.12)}
  66%{transform:translate(-40px,50px) scale(.94)}
}

/* schwebende Deko-Emojis */
.sa-floaties{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.floaty{position:absolute;font-size:26px;opacity:.16;animation:floatUp linear infinite;filter:drop-shadow(0 0 12px rgba(255,46,166,.4))}
@keyframes floatUp{
  0%{transform:translateY(110vh) rotate(0deg);opacity:0}
  10%{opacity:.2}
  90%{opacity:.2}
  100%{transform:translateY(-20vh) rotate(360deg);opacity:0}
}

/* ---------- Layout ---------- */
.wrap{width:min(1240px,92vw);margin-inline:auto}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px}
.spacer{flex:1}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--grad-hot);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:3px solid var(--ink);border-radius:var(--r-full);
  background:var(--btn-bg);color:#fff;font-family:var(--font-head);font-weight:600;font-size:16px;
  cursor:pointer;box-shadow:0 6px 0 var(--ink),0 14px 26px rgba(0,0,0,.4);
  transition:transform .16s var(--ease-pop),box-shadow .16s var(--ease-pop),filter .2s;
  overflow:hidden;white-space:nowrap;text-align:center;
}
.btn::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease-out)}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 10px 0 var(--ink),0 20px 34px rgba(0,0,0,.5)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(3px) scale(.99);box-shadow:0 2px 0 var(--ink)}
.btn:focus-visible{outline:none;box-shadow:0 6px 0 var(--ink),0 0 0 4px rgba(255,255,255,.5)}
.btn.ghost{--btn-bg:rgba(255,255,255,.07);border-color:var(--line);box-shadow:0 4px 0 rgba(0,0,0,.35);backdrop-filter:blur(8px)}
.btn.ghost:hover{--btn-bg:rgba(255,255,255,.14)}
.btn.cool{--btn-bg:var(--grad-cool)}
.btn.fun{--btn-bg:var(--grad-fun);color:#08060f}
.btn.danger{--btn-bg:linear-gradient(135deg,#ef4444,#b91c1c)}
.btn.sm{padding:9px 16px;font-size:14px;border-width:2px;box-shadow:0 4px 0 var(--ink)}
.btn.lg{padding:18px 38px;font-size:19px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none;filter:saturate(.4)}

.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px;
  border:2px solid var(--line);background:rgba(255,255,255,.06);cursor:pointer;
  transition:transform .18s var(--ease-pop),background .2s,border-color .2s;font-size:16px}
.icon-btn:hover{transform:translateY(-2px) rotate(-6deg);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3)}
.icon-btn:active{transform:translateY(1px) scale(.94)}

/* ---------- Karten / Panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-soft)}

.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--txt-dim)}
.chip.hot{background:rgba(255,46,166,.18);border-color:rgba(255,46,166,.45);color:#ffd7ee}
.chip.new{background:rgba(163,230,53,.18);border-color:rgba(163,230,53,.45);color:#e6ffb8}
.chip.warn{background:rgba(250,204,21,.16);border-color:rgba(250,204,21,.4);color:#fff0b8}

/* ---------- Formulare ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field > label{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--txt-dim);
  display:flex;align-items:center;gap:8px}
.input,.textarea,select.input{
  width:100%;padding:14px 16px;border-radius:var(--r-md);
  border:2px solid var(--line);background:rgba(9,6,20,.6);color:var(--txt);
  transition:border-color .2s,box-shadow .2s,background .2s;font-size:15px}
.input:hover,.textarea:hover{border-color:rgba(255,255,255,.28)}
.input:focus,.textarea:focus{outline:none;border-color:var(--pink);box-shadow:var(--ring);background:rgba(9,6,20,.85)}
.textarea{min-height:96px;resize:vertical;font-family:var(--font-body)}
.input::placeholder,.textarea::placeholder{color:var(--txt-mute)}
.hint{font-size:12.5px;color:var(--txt-mute)}
.hint.ok{color:#a3e635}
.hint.bad{color:#fb7185}

.input-prefix{display:flex;align-items:center;border:2px solid var(--line);border-radius:var(--r-md);
  background:rgba(9,6,20,.6);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.input-prefix:focus-within{border-color:var(--pink);box-shadow:var(--ring)}
.input-prefix span{padding:14px 6px 14px 16px;color:var(--txt-mute);font-weight:600;white-space:nowrap}
.input-prefix .input{border:0;background:transparent;padding-left:2px;box-shadow:none}
.input-prefix .input:focus{box-shadow:none}

/* ---------- Toasts ---------- */
.toast-wrap{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:min(420px,90vw)}
.toast{display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:var(--r-md);
  border:2px solid var(--ink);background:linear-gradient(135deg,#1a1030,#241242);color:#fff;
  box-shadow:0 8px 0 rgba(0,0,0,.45),0 20px 40px rgba(0,0,0,.5);
  animation:toastIn .45s var(--ease-pop) both;font-size:14.5px;line-height:1.45}
.toast.ok{background:linear-gradient(135deg,#14532d,#166534);border-color:#052e16}
.toast.err{background:linear-gradient(135deg,#7f1d1d,#991b1b);border-color:#450a0a}
.toast.info{background:linear-gradient(135deg,#1e3a8a,#3730a3);border-color:#0b1a4a}
.toast .t-ico{font-size:20px;line-height:1.2}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(60px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(60px) scale(.9)}}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;z-index:800;display:grid;place-items:center;padding:20px;
  background:rgba(5,3,12,.72);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .3s}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{width:min(720px,96vw);max-height:90vh;overflow:auto;padding:28px;border-radius:var(--r-xl);
  border:3px solid var(--ink);background:linear-gradient(160deg,#170e2c,#10091f);
  box-shadow:0 20px 0 rgba(0,0,0,.4),0 40px 90px rgba(0,0,0,.65);
  transform:translateY(40px) scale(.94);opacity:0;transition:transform .42s var(--ease-pop),opacity .3s}
.modal-back.open .modal{transform:none;opacity:1}
.modal h2{font-size:28px;margin-bottom:4px}
.modal .modal-sub{color:var(--txt-mute);font-size:14.5px;margin-bottom:22px}
.modal-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.modal-close{margin-left:auto}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--pink),var(--violet));border-radius:99px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--violet),var(--cyan));background-clip:padding-box}

/* ---------- Reveal beim Scrollen ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}

/* ---------- Konfetti ---------- */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:9998}

/* ---------- Utility ---------- */
.grad-text{background:var(--grad-hot);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text.cool{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text}
.center{text-align:center}
.hidden{display:none !important}
.wobble{animation:wobble 3.5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.pulse{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.spin-slow{animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}