/* Wortduell – das Wortspiel für alle (gehört zu /js/game.js). Nutzt die Farbvariablen aus app.css.
   Aufbau: Tokens → Grundlagen → Knöpfe/Eingaben → Startseite → Spielflächen → Ergebnisse → Telefon */

/* ================= Tokens ================= */
.wd{
  --wd-r:20px;--wd-rs:14px;
  --wd-ok:var(--ok,#059669);--wd-bad:var(--bad,#E11D48);
  --wd-line:color-mix(in srgb,var(--fg) 11%,transparent);
  --wd-line2:color-mix(in srgb,var(--fg) 18%,transparent);
  --wd-raise:color-mix(in srgb,var(--surface) 96%,#fff);
  --wd-card:linear-gradient(180deg,var(--wd-raise) 0%,var(--surface) 100%);
  --wd-well:color-mix(in srgb,var(--fg) 4.5%,var(--surface));
  --wd-e1:0 1px 1px rgba(15,23,42,.04),0 2px 6px -1px rgba(15,23,42,.07);
  --wd-e2:0 1px 2px rgba(15,23,42,.05),0 8px 24px -8px rgba(15,23,42,.14),0 24px 48px -24px rgba(15,23,42,.16);
  --wd-e3:0 2px 4px rgba(15,23,42,.06),0 18px 40px -12px rgba(15,23,42,.22);
  --wd-hi:inset 0 1px 0 rgba(255,255,255,.7);
  --wd-acc2:color-mix(in srgb,var(--accent) 70%,#7C3AED);
  --wd-pri:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#fff) 0%,var(--accent) 48%,color-mix(in srgb,var(--accent) 82%,#1E1B4B) 100%);
  --wd-glow:0 10px 28px -8px color-mix(in srgb,var(--accent) 60%,transparent);
  --wd-okg:linear-gradient(180deg,#22C55E 0%,#16A34A 45%,#047857 100%);
  /* Antwortkacheln: Rose, Blau, Violett, Smaragd – überall weiße Schrift mit gutem Kontrast */
  --wd-ga:linear-gradient(150deg,#FB7185 0%,#E11D48 52%,#BE123C 100%);
  --wd-gb:linear-gradient(150deg,#60A5FA 0%,#2563EB 52%,#1D4ED8 100%);
  --wd-gc:linear-gradient(150deg,#A78BFA 0%,#7C3AED 52%,#6D28D9 100%);
  --wd-gd:linear-gradient(150deg,#34D399 0%,#059669 52%,#047857 100%);
  --wd-ease:cubic-bezier(.2,.8,.2,1);--wd-spring:cubic-bezier(.3,1.4,.5,1);
  max-width:1000px;margin:0 auto;position:relative;color:var(--fg);font-feature-settings:"ss01","cv11"}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wd{
  --wd-raise:color-mix(in srgb,var(--surface) 92%,#fff);
  --wd-e1:0 1px 0 rgba(255,255,255,.04) inset,0 2px 8px rgba(0,0,0,.25);
  --wd-e2:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -10px rgba(0,0,0,.55);
  --wd-e3:0 1px 0 rgba(255,255,255,.06) inset,0 20px 44px -14px rgba(0,0,0,.65);
  --wd-hi:inset 0 1px 0 rgba(255,255,255,.06);--wd-line:rgba(255,255,255,.08);--wd-line2:rgba(255,255,255,.14)}}
:root[data-theme="dark"] .wd{
  --wd-raise:color-mix(in srgb,var(--surface) 92%,#fff);
  --wd-e1:0 1px 0 rgba(255,255,255,.04) inset,0 2px 8px rgba(0,0,0,.25);
  --wd-e2:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px -10px rgba(0,0,0,.55);
  --wd-e3:0 1px 0 rgba(255,255,255,.06) inset,0 20px 44px -14px rgba(0,0,0,.65);
  --wd-hi:inset 0 1px 0 rgba(255,255,255,.06);--wd-line:rgba(255,255,255,.08);--wd-line2:rgba(255,255,255,.14)}

/* ================= Grundlagen ================= */
.wd *{box-sizing:border-box}
.wd.wd-in{animation:wdIn .42s var(--wd-ease)}
@keyframes wdIn{from{opacity:0;transform:translateY(12px) scale(.992)}to{opacity:1;transform:none}}
.wd button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.wd svg{width:20px;height:20px;flex:none}
.wd :focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:2px}
.wd-muted{color:var(--muted)}
.wd-center{text-align:center}
.wd-flex{flex:1}
.wd-kicker{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.wd-lead{margin:6px 0 0;color:var(--muted);font-size:15.5px;line-height:1.55}
.wd-h{font-family:var(--fd,inherit);font-size:32px;line-height:1.08;letter-spacing:-.03em;margin:6px 0 4px;font-weight:800;text-wrap:balance}
.wd-h2{margin:0 0 10px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.wd-note{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.wd-note[hidden]{display:none}
.wd-warn{color:var(--wd-bad);font-weight:700}
/* deutscher UI-Text auch in RTL-Oberflächen in richtiger Reihenfolge */
.wd :is(.wd-tags span,.wd-seg button,.wd-kbtn,.wd-tn,.wd-ln,.wd-psc,.wd-pod b,.wd-pill,.wd-btn span,.wd-fchip span,.wd-prog b,.wd-prog span,.wd-sbt,.wd-pz span){unicode-bidi:plaintext}

/* ================= Knöpfe & Eingaben ================= */
.wd-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:1px solid var(--wd-line2);border-radius:var(--wd-rs);
  background:var(--wd-card);color:var(--fg);font-weight:700;font-size:15.5px;letter-spacing:-.01em;cursor:pointer;
  box-shadow:var(--wd-e1),var(--wd-hi);transition:transform .16s var(--wd-ease),box-shadow .2s,background .2s,border-color .2s,color .2s,filter .2s}
.wd-btn:hover{transform:translateY(-1px);box-shadow:var(--wd-e2),var(--wd-hi);border-color:color-mix(in srgb,var(--fg) 24%,transparent)}
.wd-btn:active{transform:translateY(0) scale(.975);box-shadow:var(--wd-e1);transition-duration:.06s}
.wd-btn:disabled{background:var(--fill2);border:1px dashed var(--wd-line2);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none;filter:none}
.wd-btn.wd-pri:not(:disabled){background:var(--wd-pri);color:var(--on-accent);border-color:color-mix(in srgb,var(--accent) 70%,#000);
  box-shadow:var(--wd-glow),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18)}
.wd-btn.wd-pri:not(:disabled):hover{filter:brightness(1.05) saturate(1.05);box-shadow:0 14px 32px -8px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18)}
.wd-btn.wd-okb:not(:disabled){background:var(--wd-okg);color:#fff;border-color:#047857;box-shadow:0 10px 28px -8px rgba(5,150,105,.7),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18);animation:wdNudge .5s var(--wd-spring)}
@keyframes wdNudge{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
.wd-btn.wd-ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
.wd-btn.wd-ghost:hover{background:var(--fill2);color:var(--fg);transform:none;box-shadow:none}
.wd-btn.wd-sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:12px}
.wd-btn.wd-sm svg{width:17px;height:17px}
.wd-wide{width:100%}
.wd-go{min-height:56px;font-size:16.5px;border-radius:16px}
.wd-busy{pointer-events:none;opacity:.6}
.wd-fwd{transform:scaleX(-1)}
body.rtl .wd-fwd{transform:none}
.wd-ib{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;border:1px solid var(--wd-line);background:var(--wd-card);box-shadow:var(--wd-e1);flex:none;cursor:pointer;transition:transform .15s var(--wd-ease),box-shadow .2s}
.wd-ib:hover{transform:translateY(-1px);box-shadow:var(--wd-e2)}
.wd-ib:active{transform:scale(.94)}
.wd-ib:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
body.rtl .wd-ib svg{transform:scaleX(-1)}
.wd-lab{display:block;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--muted);margin:18px 0 8px}
.wd-inp{width:100%;height:50px;border-radius:var(--wd-rs);border:1px solid var(--wd-line2);background:var(--bg);padding:0 16px;font-size:16.5px;font-weight:600;color:var(--fg);outline:0;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.06);transition:border-color .2s,box-shadow .2s,background .2s}
.wd-inp::placeholder{color:var(--soft,var(--muted));font-weight:500}
.wd-inp:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.wd-codeinp{font-family:var(--fd,inherit);font-size:28px;letter-spacing:.42em;text-transform:uppercase;text-align:center;height:62px;padding-inline-start:.42em;direction:ltr}
.wd-codeinp::placeholder{opacity:.3}
.wd-check{display:flex;align-items:center;gap:10px;margin:16px 0 2px;font-weight:600;font-size:15px;cursor:pointer}
.wd-check input{width:20px;height:20px;accent-color:var(--accent)}
.wd-select{width:100%;min-width:0;height:50px;border-radius:var(--wd-rs);border:1px solid var(--wd-line2);background-color:var(--bg);color:var(--fg);font:inherit;font-size:15.5px;font-weight:600;padding:0 42px 0 14px;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23838CA0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:18px;transition:border-color .2s,box-shadow .2s}
body.rtl .wd-select{padding:0 14px 0 42px;background-position:left 13px center}
.wd-select:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)}
.wd-shake{animation:wdShake .4s;border-color:var(--wd-bad)!important}
@keyframes wdShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.wd-ferr{margin:10px 0 0;color:var(--wd-bad);font-weight:700;font-size:14px}
.wd-msg{background:color-mix(in srgb,var(--warn,#D97706) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn,#D97706) 30%,transparent);color:var(--fg);border-radius:var(--wd-rs);padding:12px 16px;font-weight:600;margin:0 0 16px}
.wd-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:color-mix(in srgb,var(--fg) 92%,transparent);color:var(--bg);padding:11px 20px;border-radius:999px;font-weight:700;z-index:50;animation:wdToast .3s var(--wd-spring);margin:0;max-width:90vw;text-align:center;box-shadow:var(--wd-e3);backdrop-filter:blur(8px)}
@keyframes wdToast{from{opacity:0;transform:translate(-50%,12px) scale(.96)}}

/* Segmente */
.wd-seg{display:flex;background:var(--wd-well);border:1px solid var(--wd-line);border-radius:14px;padding:4px;gap:4px;box-shadow:inset 0 1px 2px rgba(15,23,42,.05)}
.wd-seg button{flex:1;min-height:40px;border:0;border-radius:10px;background:transparent;font-weight:700;font-size:14.5px;padding:0 6px;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,box-shadow .25s,transform .12s}
.wd-seg button:hover{color:var(--fg)}
.wd-seg button:active{transform:scale(.96)}
.wd-seg button[aria-checked="true"]{background:var(--wd-card);color:var(--accent);box-shadow:var(--wd-e1),var(--wd-hi)}
.wd-seg4{flex-wrap:wrap}
.wd-seg4 button{flex:1 1 calc(50% - 4px);font-size:14px}
@media (min-width:521px){.wd-seg4 button{flex:1 1 0}}

/* Karten */
.wd-card{background:var(--wd-card);border-radius:24px;padding:22px;box-shadow:var(--wd-e2),var(--wd-hi);border:1px solid var(--wd-line)}
.wd-hl{box-shadow:0 0 0 3px var(--accent),var(--wd-e2)}
.wd-card-h{display:flex;gap:12px;align-items:flex-start;margin-bottom:4px}
.wd-card-h h2{margin:0;font-size:19px;font-weight:800;letter-spacing:-.015em}
.wd-card-h h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.wd-card-h p{margin:3px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.wd-ico{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none;color:#fff;background:var(--wd-pri);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
.wd-ico2{background:linear-gradient(150deg,#FBBF24,#D97706);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -6px rgba(217,119,6,.55)}
.wd-ico3{background:linear-gradient(150deg,#2DD4BF,#0F766E);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -6px rgba(15,118,110,.55)}
.wd-ico4{background:linear-gradient(150deg,#C084FC,#6D28D9);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -6px rgba(109,40,217,.55)}
.wd-ico-s{width:36px;height:36px;border-radius:12px}
.wd-ico-s svg{width:18px;height:18px}
.wd-card .wd-btn.wd-wide{margin-top:18px}

/* ================= Startseite ================= */
.wd-hero{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;padding:32px 30px 30px;margin-bottom:16px;color:#fff;
  background:var(--grad,linear-gradient(130deg,#2563EB,#7C3AED));box-shadow:0 24px 50px -18px color-mix(in srgb,var(--accent-l,#2563EB) 55%,transparent)}
.wd-hero::before,.wd-hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(40px);opacity:.55;pointer-events:none}
.wd-hero::before{width:260px;height:260px;right:-60px;top:-90px;background:rgba(255,255,255,.45)}
.wd-hero::after{width:220px;height:220px;left:-80px;bottom:-120px;background:color-mix(in srgb,#F472B6 70%,transparent)}
.wd-hero .wd-lead{color:rgba(255,255,255,.86);max-width:520px}
.wd-title{font-family:var(--fd,inherit);font-size:56px;line-height:.98;letter-spacing:-.045em;margin:0 0 10px;font-weight:800;max-width:calc(100% - 140px);text-shadow:0 2px 20px rgba(0,0,0,.12)}
.wd-tagline{margin:0;font-size:17px;font-weight:700;line-height:1.35;max-width:calc(100% - 140px);color:#fff}
.wd-hero-art{position:absolute;inset-inline-end:22px;top:20px;display:grid;grid-template-columns:repeat(2,54px);gap:10px;pointer-events:none}
.wd-hero-art span{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font:800 26px/1 var(--fd,inherit);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 20px -8px rgba(0,0,0,.35);animation:wdBob 4s ease-in-out infinite}
.wd-hero-art span:nth-child(1){background:var(--wd-ga);transform:rotate(-6deg)}
.wd-hero-art span:nth-child(2){animation-delay:.5s;background:var(--wd-gb);transform:rotate(5deg)}
.wd-hero-art span:nth-child(3){animation-delay:1s;background:var(--wd-gc);transform:rotate(4deg)}
.wd-hero-art span:nth-child(4){animation-delay:1.5s;background:var(--wd-gd);transform:rotate(-5deg)}
@keyframes wdBob{50%{translate:0 -6px}}

.wd-langbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--wd-card);border:1px solid var(--wd-line);border-radius:22px;padding:14px 16px;margin-bottom:16px;box-shadow:var(--wd-e1),var(--wd-hi)}
.wd-langbar label{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:0;cursor:pointer}
.wd-langbar label>span:last-child{display:flex;flex-direction:column;gap:2px}
.wd-langbar small{color:var(--muted);font-size:13px;line-height:1.35}
.wd-lbi{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);flex:none}
.wd-langbar .wd-select{flex:0 1 300px}

.wd-mode{position:relative;background:var(--wd-card);border:1px solid var(--wd-line);border-radius:26px;padding:22px;box-shadow:var(--wd-e2),var(--wd-hi);margin-bottom:16px;overflow:hidden}
.wd-mode::before{content:"";position:absolute;inset:0 0 auto 0;height:120px;background:radial-gradient(70% 100% at 0% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%);pointer-events:none}
body.rtl .wd-mode::before{background:radial-gradient(70% 100% at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.wd-mode-loc::before{background:radial-gradient(70% 100% at 0% 0%,rgba(139,92,246,.12),transparent 70%)}
.wd-mode-hl{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent),var(--wd-e2)}
.wd-mode-h{position:relative;display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.wd-mode-h h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em}
.wd-mode-h p{margin:5px 0 0;color:var(--muted);font-size:15px;line-height:1.5;max-width:640px}
.wd-mode-h .wd-ico{width:50px;height:50px;border-radius:16px}
.wd-mode-h .wd-ico svg{width:24px;height:24px}
.wd-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.wd-tags span{padding:5px 11px;border-radius:999px;background:var(--wd-well);border:1px solid var(--wd-line);font-size:12.5px;font-weight:700;color:var(--muted)}
.wd-grid,.wd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.wd-grid-b{align-items:stretch}
.wd-grid-b>.wd-mode,.wd-grid-b>.wd-card{margin:0;display:flex;flex-direction:column}
.wd-grid-b>.wd-mode .wd-btn,.wd-grid-b>.wd-card .wd-btn{margin-top:auto}
.wd-grid-b>.wd-card .wd-lvnow{margin-bottom:16px}
.wd-mode .wd-card.wd-sub{background:var(--wd-well);box-shadow:none;border-color:var(--wd-line);border-radius:20px;padding:18px}
.wd-sub .wd-inp,.wd-sub .wd-select{background-color:var(--surface)}
.wd-lvnow{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:14px 16px;border-radius:var(--wd-rs);background:var(--wd-well);border:1px solid var(--wd-line);font-weight:600;color:var(--muted)}
.wd-lvnow b{font:800 26px/1 var(--fd,inherit);color:var(--accent)}
.wd-lvnone{justify-content:center}

/* ================= Kopfzeile im Spiel ================= */
.wd-top{display:flex;align-items:center;gap:8px;margin-bottom:14px;min-height:42px;flex-wrap:wrap}
.wd-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;background:var(--wd-card);border:1px solid var(--wd-line);box-shadow:var(--wd-e1);font-weight:700;font-size:13.5px;white-space:nowrap}
.wd-pill svg{width:16px;height:16px;color:var(--accent)}
.wd-code{font-family:var(--fd,inherit);letter-spacing:.16em;background:var(--wd-pri);color:var(--on-accent);border-color:transparent}
.wd-me{font-weight:700;font-size:14px;color:var(--muted);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Fortschritt in der Einstufung */
.wd-dots{flex:1;display:flex;gap:5px;justify-content:center}
.wd-dots i{height:8px;flex:1;max-width:30px;border-radius:99px;background:var(--fill);transition:background .3s}
.wd-dots .wd-dok{background:var(--wd-ok)}.wd-dots .wd-dno{background:var(--wd-bad)}
.wd-dots .wd-dcur{background:var(--accent);animation:wdPulse 1.4s infinite}
@keyframes wdPulse{50%{opacity:.45}}

/* ================= Frage ================= */
.wd-stage{max-width:760px;margin:0 auto;transition:filter .3s}
.wd-prompt{position:relative;overflow:hidden;text-align:center;border:1px solid var(--wd-line);border-radius:26px;padding:24px 22px 26px;margin-bottom:14px;
  background:radial-gradient(120% 90% at 50% -10%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 62%),var(--wd-card);box-shadow:var(--wd-e2),var(--wd-hi);transition:filter .3s,opacity .3s}
.wd-kind{--kc:var(--accent);display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:color-mix(in srgb,var(--kc) 82%,var(--fg));background:color-mix(in srgb,var(--kc) 13%,transparent);border:1px solid color-mix(in srgb,var(--kc) 22%,transparent)}
.wd-kind::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--kc)}
.wd-k-syn{--kc:#2563EB}.wd-k-ant{--kc:#E11D48}.wd-k-bed{--kc:#7C3AED}.wd-k-erk{--kc:#0D9488}
.wd-k-art{--kc:#D97706}.wd-k-satz{--kc:#16A34A}.wd-k-luk{--kc:#DB2777}
.wd-hint{margin:12px 0 2px;color:var(--muted);font-weight:600;font-size:15px}
.wd-hint2{margin:0 0 4px;color:var(--muted);font-size:14px;font-weight:500;opacity:.85}
.wd-pw{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.wd-pword{margin:6px 0 0;font-family:var(--fd,inherit);font-size:clamp(30px,7.4vw,48px);line-height:1.08;font-weight:800;letter-spacing:-.035em;overflow-wrap:anywhere}
.wd-long .wd-pword{font-family:var(--f,inherit);font-size:clamp(18px,4.4vw,23px);font-weight:600;letter-spacing:-.005em;line-height:1.45}
.wd-spk{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--wd-line);background:var(--wd-card);box-shadow:var(--wd-e1);color:var(--accent);flex:none;cursor:pointer;transition:transform .15s var(--wd-ease)}
.wd-spk:hover{transform:scale(1.06)}
.wd-spk:active{transform:scale(.94)}
.wd-spk svg{width:19px;height:19px}

/* Antwortkacheln */
.wd-ans{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wd-ans.wd-n3{grid-template-columns:repeat(3,1fr)}
.wd .wd-opt{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:14px;min-height:88px;padding:14px 16px;border:1px solid rgba(0,0,0,.08);border-radius:var(--wd-r);color:#fff;font-weight:700;font-size:17px;line-height:1.25;text-align:start;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.14),0 10px 24px -10px rgba(15,23,42,.45);
  transition:transform .18s var(--wd-ease),opacity .3s,filter .3s,box-shadow .2s;animation:wdPop .45s var(--wd-spring) backwards;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.wd .wd-opt::before{content:"";position:absolute;inset:0 0 50% 0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0));pointer-events:none}
.wd-opt:nth-child(2){animation-delay:.05s}.wd-opt:nth-child(3){animation-delay:.1s}.wd-opt:nth-child(4){animation-delay:.15s}
@keyframes wdPop{from{opacity:0;transform:translateY(10px) scale(.95)}}
.wd-opt:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.14),0 16px 30px -12px rgba(15,23,42,.55)}
.wd-opt:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.14),0 4px 10px -4px rgba(15,23,42,.4);transition-duration:.06s}
.wd-opt:disabled{cursor:default}
.wd-c0{background:var(--wd-ga)}.wd-c1{background:var(--wd-gb)}.wd-c2{background:var(--wd-gc)}.wd-c3{background:var(--wd-gd)}
.wd-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex:none;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.38);color:#fff;font:800 16px/1 var(--fd,inherit);text-shadow:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.12);backdrop-filter:blur(4px)}
.wd-art .wd-opt{justify-content:center;font-size:26px;font-family:var(--fd,inherit);letter-spacing:-.02em}
.wd-art .wd-der{background:var(--wd-gb)}.wd-art .wd-die{background:var(--wd-ga)}.wd-art .wd-das{background:var(--wd-gd)}
.wd-art .wd-badge{display:none}
.wd-art .wd-ol{flex:none}
.wd-ol{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto;text-align:start}
.wd-otx{display:block}
.wd-om{display:block;font-size:13.5px;font-weight:600;opacity:.9;line-height:1.3;text-shadow:none;animation:wdIn .35s var(--wd-ease)}
.wd-locked .wd-opt:not(.wd-sel){opacity:.35;filter:saturate(.45)}
.wd-sel{transform:scale(1.02);box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--fg)!important}
.wd-view .wd-opt{opacity:.96}
.wd-right{animation:wdRight .6s var(--wd-spring);box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--wd-ok),0 16px 34px -10px color-mix(in srgb,var(--wd-ok) 60%,transparent)!important;opacity:1!important;filter:none!important}
.wd-right .wd-badge{background:#fff;color:#047857;font-size:0;border-color:#fff}
.wd-right .wd-badge::before{content:"✓";font-size:20px;font-weight:900}
@keyframes wdRight{30%{transform:scale(1.045)}60%{transform:scale(.99)}}
.wd-wrong{animation:wdShake .45s;opacity:.92!important}
.wd-wrong .wd-badge{background:rgba(15,23,42,.55);border-color:rgba(255,255,255,.3);font-size:0}
.wd-wrong .wd-badge::before{content:"✕";font-size:17px;font-weight:900}
.wd-dim{opacity:.3!important;filter:saturate(.3)!important}

/* Satz bauen */
.wd-satz{display:flex;flex-direction:column;gap:12px}
.wd-line{min-height:76px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;align-content:center;padding:12px;border-radius:var(--wd-r);border:2px dashed var(--wd-line2);background:var(--wd-well);transition:border-color .3s,background .3s}
.wd-line[hidden]{display:none}
.wd-line.wd-good{border:2px solid var(--wd-ok);background:color-mix(in srgb,var(--wd-ok) 10%,var(--surface))}
.wd-line.wd-bad{border:2px solid var(--wd-bad);background:color-mix(in srgb,var(--wd-bad) 8%,var(--surface));animation:wdShake .45s}
.wd-ph{color:var(--muted);font-size:14px;margin:auto}
.wd-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wd-chip{border-radius:12px;padding:11px 15px;font-size:17px;font-weight:700;background:var(--wd-card);border:1px solid var(--wd-line2);box-shadow:var(--wd-e1),inset 0 -2px 0 var(--fill);cursor:pointer;transition:transform .14s var(--wd-ease),opacity .2s;animation:wdPop .35s var(--wd-spring) backwards}
.wd-chip:hover:not(:disabled){transform:translateY(-1px)}
.wd-chip:active:not(:disabled){transform:scale(.94)}
.wd-chip.wd-used{opacity:.18;transform:scale(.92)}
.wd-chip.wd-on{background:var(--wd-pri);color:var(--on-accent);border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.wd-sol{padding:12px 14px;border-radius:var(--wd-rs);background:color-mix(in srgb,var(--wd-ok) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--wd-ok) 25%,transparent);font-size:16px}
.wd-sol b{color:var(--wd-ok)}

/* Bedeutung nach der Auflösung */
.wd-mean{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:14px 0 0;padding:13px 16px;border-radius:18px;background:color-mix(in srgb,var(--accent) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:var(--wd-e1);animation:wdBanner .45s var(--wd-spring)}
.wd-mk{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.wd-mean b{font-size:17px}
.wd-mean span:last-child{color:var(--fg);font-size:16px}

/* Zeitring + Pause */
.wd-qhead{display:flex;align-items:center;justify-content:center;gap:12px;max-width:760px;margin:0 auto 14px;min-height:68px;flex-wrap:wrap}
.wd-clock{display:flex;align-items:center;gap:10px}
.wd-ring{position:relative;width:66px;height:66px;flex:none;border-radius:50%;background:var(--wd-card);box-shadow:var(--wd-e2),var(--wd-hi);transition:transform .3s var(--wd-spring)}
.wd-ring svg{position:absolute;inset:3px;width:60px;height:60px;transform:rotate(-90deg)}
body.rtl .wd-ring svg{transform:rotate(-90deg) scaleY(-1)}
.wd-rbg{fill:none;stroke:var(--fill);stroke-width:5}
.wd-rfg{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 45%,transparent))}
.wd-ring .wd-secs{position:absolute;inset:0;display:grid;place-items:center;font:800 21px/1 var(--fd,inherit);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--fg)}
.wd-hurry .wd-rfg{stroke:var(--wd-bad);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--wd-bad) 55%,transparent))}
.wd-hurry .wd-ring{animation:wdBeat 1s ease-in-out infinite}
.wd-hurry .wd-secs{color:var(--wd-bad)}
@keyframes wdBeat{50%{transform:scale(1.06)}}
.wd-over .wd-ring,.wd-done .wd-ring{animation:none}
.wd-over .wd-secs{color:var(--wd-bad)}
.wd-paused .wd-rfg{stroke:var(--muted);filter:none}
.wd-paused .wd-ring{animation:none}
.wd-pz{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px 0 13px;border-radius:999px;border:1px solid var(--wd-line2);background:var(--wd-card);box-shadow:var(--wd-e1),var(--wd-hi);font-weight:800;font-size:14.5px;cursor:pointer;transition:transform .15s var(--wd-ease),background .2s,color .2s,box-shadow .2s}
.wd-pz svg{width:16px;height:16px}
.wd-pz:hover{transform:translateY(-1px);box-shadow:var(--wd-e2)}
.wd-pz:active{transform:scale(.95)}
.wd-pz[aria-pressed="true"]{background:var(--wd-pri);color:var(--on-accent);border-color:transparent;box-shadow:var(--wd-glow)}
.wd-pz:disabled{opacity:.4;cursor:default;transform:none;box-shadow:none}
.wd-pzmsg{margin:0;font-weight:800;color:var(--accent);font-size:15px;min-width:0}
.wd-pzmsg:empty{display:none}
.wd-frozen .wd-prompt,.wd-frozen .wd-ans,.wd-frozen .wd-satz{filter:blur(7px) saturate(.6);opacity:.55;pointer-events:none;user-select:none}

.wd-waitmsg{text-align:center;color:var(--muted);font-weight:700;min-height:24px;margin:16px 0 0}
.wd-waitmsg svg{width:22px;height:22px;vertical-align:-5px;margin-inline-end:6px}
.wd-hostrow{margin-top:12px}
.wd-timeup{color:var(--wd-bad);font-size:18px;animation:wdShake .45s}
.wd-lok{color:var(--wd-ok);font-size:18px}.wd-lno{color:var(--wd-bad)}

/* Rückmeldung (Einstufung) */
.wd-fb{position:sticky;bottom:12px;max-width:760px;margin:14px auto 0;display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;border-radius:20px;font-weight:800;font-size:18px;color:#fff;opacity:0;transform:translateY(16px);pointer-events:none;
  box-shadow:var(--wd-e3);transition:opacity .25s,transform .35s var(--wd-spring)}
.wd-fb.wd-show{opacity:1;transform:none;pointer-events:auto}
.wd-fb span{flex:1}
.wd-fb svg{width:26px;height:26px}
.wd-fbok{background:var(--wd-okg)}.wd-fbno{background:var(--wd-ga)}
.wd-fb .wd-btn{background:#fff;color:#111;border-color:transparent}

/* Ergebnis Einstufung */
.wd-result{max-width:520px;margin:10px auto;text-align:center}
.wd-bigLv{font:800 108px/1 var(--fd,inherit);letter-spacing:-.05em;background:linear-gradient(140deg,var(--accent),var(--wd-acc2) 60%,#DB2777);-webkit-background-clip:text;background-clip:text;color:transparent;animation:wdZoom .7s var(--wd-spring)}
@keyframes wdZoom{from{transform:scale(.4);opacity:0}}
.wd-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:22px 0 10px}
.wd-meter span{padding:10px 0;border-radius:12px;background:var(--wd-well);border:1px solid var(--wd-line);font-weight:800;color:var(--muted)}
.wd-meter .wd-m-past{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--fg)}
.wd-meter .wd-m-on{background:var(--wd-pri);color:var(--on-accent);transform:scale(1.06);box-shadow:var(--wd-glow)}
.wd-stat{font-size:16px;color:var(--muted)}.wd-stat b{color:var(--fg);font-size:20px}
.wd-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ================= Lobby ================= */
.wd-codebox{position:relative;overflow:hidden;isolation:isolate;text-align:center;border-radius:28px;padding:24px 18px;color:#fff;background:var(--grad,linear-gradient(130deg,#1E3A8A,#6D28D9));margin-bottom:16px;box-shadow:0 24px 50px -18px color-mix(in srgb,var(--accent-l,#2563EB) 55%,transparent)}
.wd-codebox::before{content:"";position:absolute;z-index:-1;width:240px;height:240px;right:-60px;top:-100px;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(40px)}
.wd-codebox p{margin:0;opacity:.92;font-weight:600}
.wd-codebox .wd-btn{background:rgba(255,255,255,.16);color:#fff;margin-top:16px;border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.wd-codebox .wd-btn:hover{background:rgba(255,255,255,.26)}
.wd-bigcode{display:flex;justify-content:center;gap:10px;margin-top:16px;direction:ltr}
.wd-bigcode span{display:grid;place-items:center;width:clamp(56px,16vw,86px);height:clamp(68px,19vw,100px);border-radius:20px;background:linear-gradient(180deg,#fff,#EEF2FF);color:#1E1B4B;font:800 clamp(38px,11vw,62px)/1 var(--fd,inherit);box-shadow:inset 0 -4px 0 rgba(30,27,75,.1),0 12px 24px -10px rgba(0,0,0,.35);animation:wdPop .5s var(--wd-spring) backwards}
.wd-bigcode span:nth-child(2){animation-delay:.07s}.wd-bigcode span:nth-child(3){animation-delay:.14s}.wd-bigcode span:nth-child(4){animation-delay:.21s}
.wd-lgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.wd-lgrid>*,.wd-grid2>*,.wd-revgrid>*{min-width:0}
.wd-plh{display:flex;align-items:baseline;gap:8px;font-weight:800;margin-bottom:14px}
.wd-plh b{font:800 22px/1 var(--fd,inherit);color:var(--accent)}
.wd-plist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wd-pchip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--wd-well);border:1px solid var(--wd-line);font-weight:700;font-size:15px;animation:wdPop .4s var(--wd-spring)}
body.rtl .wd-pchip{padding:5px 5px 5px 12px}
.wd-pchip.wd-mine{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.wd-kick{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:0 2px;margin-inline-start:-2px;cursor:pointer}
.wd-av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:14px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.wd-av0{background:linear-gradient(150deg,#FB7185,#E11D48)}.wd-av1{background:linear-gradient(150deg,#60A5FA,#2563EB)}.wd-av2{background:linear-gradient(150deg,#FBBF24,#D97706)}.wd-av3{background:linear-gradient(150deg,#34D399,#059669)}
.wd-av4{background:linear-gradient(150deg,#A78BFA,#7C3AED)}.wd-av5{background:linear-gradient(150deg,#F472B6,#DB2777)}.wd-av6{background:linear-gradient(150deg,#2DD4BF,#0D9488)}.wd-av7{background:linear-gradient(150deg,#FB923C,#EA580C)}
.wd-empty{color:var(--muted);margin:6px 0;list-style:none}
.wd-set>.wd-lab:first-child,.wd-set>.wd-ws:first-child>.wd-lab:first-child{margin-top:0}
.wd-lobby.wd-center{max-width:520px;margin:20px auto}
.wd-lobby.wd-center .wd-plcard{margin-top:22px;text-align:start}
.wd-pulse{display:grid;place-items:center;width:88px;height:88px;margin:0 auto;border-radius:50%;background:var(--wd-okg);color:#fff;animation:wdRing 1.8s infinite;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.wd-pulse svg{width:42px;height:42px}
@keyframes wdRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--wd-ok) 50%,transparent)}100%{box-shadow:0 0 0 28px transparent}}
.wd-wait{display:grid;place-items:center;min-height:240px}
.wd-spin{width:42px;height:42px;border-radius:50%;border:4px solid var(--fill);border-top-color:var(--accent);animation:wdSpin .8s linear infinite}
@keyframes wdSpin{to{transform:rotate(360deg)}}

/* Wortauswahl */
.wd-ws{margin-bottom:2px}
.wd-wsp{margin-top:10px}
.wd-wsp>.wd-note:first-child{margin-top:0}
.wd-chipset{display:flex;flex-wrap:wrap;gap:6px;max-height:212px;overflow:auto;padding:2px;margin:-2px;scrollbar-width:thin}
.wd-fchip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--wd-line2);background:var(--wd-card);font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:var(--wd-e1);transition:background .2s,border-color .2s,color .2s,transform .12s}
body.rtl .wd-fchip{padding:0 12px 0 6px}
.wd-fchip small{display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:var(--wd-well);color:var(--muted);font-size:11.5px;font-weight:800}
.wd-fchip:active{transform:scale(.95)}
.wd-fchip[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 12%,var(--surface));border-color:var(--accent);color:color-mix(in srgb,var(--accent) 80%,var(--fg))}
.wd-fchip[aria-pressed="true"] small{background:var(--accent);color:var(--on-accent)}
.wd-fchip:disabled{opacity:.4;cursor:default}
.wd-lvset .wd-fchip{min-width:72px;justify-content:space-between}
.wd-wscount{margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.45}
.wd-wscount b{color:var(--fg);font-size:15px}
.wd-ownbar{display:flex;align-items:center;gap:10px}
.wd-ownq{height:44px;font-size:15px}
.wd-owncnt{flex:none;font-weight:800;font-size:13px;color:var(--accent);white-space:nowrap}
.wd-ownact{display:flex;gap:4px;margin:6px 0 4px;flex-wrap:wrap}
.wd-ownlist{list-style:none;margin:0;padding:4px;max-height:280px;overflow:auto;border-radius:var(--wd-rs);background:var(--wd-well);border:1px solid var(--wd-line);scrollbar-width:thin}
.wd-ownit{min-width:0;display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 10px;border:0;border-radius:10px;background:transparent;text-align:start;cursor:pointer;transition:background .15s}
.wd-ownit:hover{background:var(--fill2)}
.wd-ck{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--wd-line2);background:var(--surface);flex:none;transition:background .15s,border-color .15s}
.wd-ck svg{width:14px;height:14px;opacity:0;color:var(--on-accent);transition:opacity .15s}
.wd-ownit[aria-checked="true"] .wd-ck{background:var(--accent);border-color:var(--accent)}
.wd-ownit[aria-checked="true"] .wd-ck svg{opacity:1}
.wd-ownw{font-weight:700;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.wd-ownt{flex:1;min-width:0;color:var(--muted);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-ownl{margin-inline-start:auto;font-size:11px;font-weight:800;color:var(--muted);padding:2px 7px;border-radius:999px;background:var(--surface)}

/* Countdown */
.wd-cd{padding:40px 0}
.wd-count{font:800 136px/1 var(--fd,inherit);margin:26px 0 18px;letter-spacing:-.05em;background:linear-gradient(160deg,var(--accent),var(--wd-acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.wd-pop{animation:wdCount .9s var(--wd-spring)}
@keyframes wdCount{0%{transform:scale(1.8);opacity:0}40%{transform:scale(1);opacity:1}100%{opacity:.9}}

/* ================= Auflösung (online) ================= */
.wd-revgrid{display:grid;grid-template-columns:1fr 330px;gap:18px;align-items:start}
.wd-rev .wd-prompt{padding:16px 18px 18px}
.wd-rev .wd-pword{font-size:clamp(24px,5vw,34px)}
.wd-rev .wd-long .wd-pword{font-size:clamp(16px,3.8vw,20px)}
.wd-rev .wd-opt{min-height:64px;animation:none}
.wd-res{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:20px;color:#fff;margin-bottom:12px;box-shadow:var(--wd-e2);animation:wdBanner .5s var(--wd-spring)}
@keyframes wdBanner{from{transform:translateY(-14px) scale(.96);opacity:0}}
.wd-res svg{width:34px;height:34px;padding:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.wd-res div{flex:1;display:flex;flex-direction:column;line-height:1.2}
.wd-res b{font-size:20px}.wd-res span{opacity:.92;font-weight:600}
.wd-resok{background:var(--wd-okg)}.wd-resno{background:var(--wd-ga)}
.wd-rank{font:800 15px/1 var(--fd,inherit);background:rgba(255,255,255,.2);padding:8px 12px;border-radius:999px;white-space:nowrap}
.wd-dist{display:flex;gap:12px;justify-content:center;align-items:flex-end;height:120px;margin-top:16px}
.wd-db{position:relative;width:56px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;background:transparent!important;border:0!important;box-shadow:none!important}
.wd-db::before{display:none}
.wd-db i{display:block;width:100%;height:4%;border-radius:12px 12px 5px 5px;transition:height .8s var(--wd-ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.wd-db.wd-c0 i{background:var(--wd-ga)}.wd-db.wd-c1 i{background:var(--wd-gb)}.wd-db.wd-c2 i{background:var(--wd-gc)}.wd-db.wd-c3 i{background:var(--wd-gd)}
.wd-db:not(.wd-dright) i{opacity:.35}
.wd-db b{position:absolute;top:-2px;font-weight:800}
.wd-dl{margin-top:6px;font:800 14px/1 var(--fd,inherit);color:var(--muted)}
.wd-dright .wd-dl{color:var(--wd-ok)}
.wd-lb h3{margin:0 0 12px;font-size:17px;font-weight:800}
.wd-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wd-lrow{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--wd-well);border:1px solid var(--wd-line);font-weight:700;animation:wdSlide .45s var(--wd-ease) backwards}
.wd-lrow:nth-child(2){animation-delay:.05s}.wd-lrow:nth-child(3){animation-delay:.1s}.wd-lrow:nth-child(4){animation-delay:.15s}.wd-lrow:nth-child(5){animation-delay:.2s}
@keyframes wdSlide{from{opacity:0;transform:translateX(-14px)}}
.wd-lrow.wd-mine{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.wd-rk{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fill);font-size:14px;flex:none}
.wd-r1 .wd-rk{background:linear-gradient(150deg,#FDE047,#EAB308);color:#3B2A00}.wd-r2 .wd-rk{background:linear-gradient(150deg,#E2E8F0,#94A3B8);color:#1F2633}.wd-r3 .wd-rk{background:linear-gradient(150deg,#F4B183,#C2702E);color:#2B1606}
.wd-ln{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-gain{color:var(--wd-ok);font-size:13.5px;font-weight:800}
.wd-sc{font:800 16px/1 var(--fd,inherit);min-width:48px;text-align:end;font-variant-numeric:tabular-nums}
.wd-lsep{text-align:center;color:var(--muted);line-height:.6;list-style:none}
.wd-pause{width:48px;height:48px}
.wd-pause.wd-off{background:var(--wd-pri);color:var(--on-accent)}
.wd-nextn{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:99px;background:rgba(255,255,255,.25);font-size:13px;margin-inline-start:4px}

/* ================= Zusammen vor Ort ================= */
.wd-how{margin-bottom:16px}
.wd-how ol{margin:0;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px}
.wd-how li{counter-increment:st;position:relative;padding-inline-start:38px;min-height:26px;color:var(--muted);font-size:15px;line-height:1.5}
.wd-how li::before{content:counter(st);position:absolute;inset-inline-start:0;top:-1px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:800;font-size:13px}
.wd-how b{color:var(--fg)}
.wd-teams{display:flex;flex-direction:column;gap:8px}
.wd-trow{display:flex;align-items:center;gap:8px;animation:wdPop .35s var(--wd-spring) backwards}
.wd-trow .wd-inp{height:46px;font-size:16px;flex:1;min-width:0}
.wd-tdel svg{width:16px;height:16px}
.wd-tadd{margin-top:12px}
.wd-tadd svg{width:17px;height:17px}
.wd-kinds{display:flex;flex-wrap:wrap;gap:6px}
.wd-kbtn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--wd-line2);background:transparent;font-weight:700;font-size:14px;color:var(--muted);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .12s}
.wd-kbtn:active{transform:scale(.95)}
.wd-kbtn[aria-pressed="true"]{background:var(--wd-card);color:var(--fg);border-color:color-mix(in srgb,var(--kc,var(--accent)) 50%,transparent);box-shadow:var(--wd-e1)}
.wd-kbtn[aria-pressed="false"]{text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.7}
.wd-kdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--kc,var(--accent))}
.wd-kbtn[aria-pressed="false"] .wd-kdot{background:var(--fill)}
.wd-lstage .wd-prompt{padding:28px 22px 30px}
.wd-lstage .wd-pword{font-size:clamp(34px,8.4vw,64px)}
.wd-lstage .wd-long .wd-pword{font-size:clamp(20px,4.6vw,30px)}
.wd-lstage .wd-hint{font-size:17px}
.wd-lstage .wd-opt{min-height:98px;font-size:clamp(17px,2.4vw,22px)}
.wd-lchips .wd-chip{font-size:clamp(18px,2.6vw,24px);padding:12px 16px;cursor:default}
.wd-lchips.wd-dimmed{opacity:.45}
.wd-lctl{margin-top:10px}
.wd-award{background:var(--wd-card);border:1px solid var(--wd-line);border-radius:24px;padding:18px;box-shadow:var(--wd-e2),var(--wd-hi);animation:wdBanner .45s var(--wd-spring)}
.wd-award .wd-lab{margin-top:0}
.wd-tbtns{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.wd-tbtn{display:flex;align-items:center;gap:9px;min-height:54px;padding:6px 12px 6px 7px;border-radius:16px;border:1.5px solid var(--wd-line2);background:var(--wd-card);box-shadow:var(--wd-e1);font-weight:700;font-size:15px;text-align:start;cursor:pointer;transition:transform .15s var(--wd-ease),background .2s,border-color .2s,box-shadow .2s}
body.rtl .wd-tbtn{padding:6px 7px 6px 12px}
.wd-tbtn:hover{transform:translateY(-1px);box-shadow:var(--wd-e2)}
.wd-tbtn:active{transform:scale(.97)}
.wd-tn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-tbtn b{font-size:13px;color:var(--muted);opacity:.7;padding:3px 8px;border-radius:999px;background:var(--wd-well)}
.wd-tbtn[aria-pressed="true"]{border-color:var(--wd-ok);background:color-mix(in srgb,var(--wd-ok) 11%,var(--surface));box-shadow:0 0 0 3px color-mix(in srgb,var(--wd-ok) 18%,transparent);animation:wdNudge .4s var(--wd-spring)}
.wd-tbtn[aria-pressed="true"] b{color:#fff;opacity:1;background:var(--wd-ok)}
.wd-tnone .wd-avx{background:var(--fill);color:var(--muted);box-shadow:none}
.wd-avx svg{width:14px;height:14px}
.wd-tnone[aria-pressed="true"]{border-color:var(--muted);background:var(--wd-well);box-shadow:0 0 0 3px var(--fill)}
.wd-next{margin-top:14px}
.wd-next svg{width:18px;height:18px}
#wd-nexthint{margin-top:8px}

/* feste Leiste: Fortschritt + Punktestand */
.wd-lhead{position:sticky;top:calc(env(safe-area-inset-top,0px) + 61px);z-index:15;margin:-8px -6px 16px;padding:10px 6px 12px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(170%) blur(18px);-webkit-backdrop-filter:saturate(170%) blur(18px);border-bottom:1px solid var(--wd-line)}
.wd-ltop{margin-bottom:10px;flex-wrap:nowrap}
.wd-prog{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wd-prog b{font:800 19px/1.1 var(--fd,inherit);letter-spacing:-.02em}
.wd-prog span{color:var(--muted);font-weight:700;font-size:13px;padding:3px 9px;border-radius:999px;background:var(--wd-well);border:1px solid var(--wd-line)}
.wd-pbar{height:6px;border-radius:99px;background:var(--fill);overflow:hidden;margin-bottom:12px}
.wd-pbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--wd-acc2));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent);transition:width .6s var(--wd-ease)}
.wd-sb{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:3px;margin:-3px;scroll-snap-type:x proximity}
.wd-sb::-webkit-scrollbar{display:none}
.wd-sbc{display:flex;align-items:center;gap:2px;flex:none;padding:4px;border-radius:999px;background:var(--wd-card);border:1px solid var(--wd-line);box-shadow:var(--wd-e1),var(--wd-hi);scroll-snap-align:start;transition:border-color .3s,box-shadow .3s,background .3s}
.wd-sbc.wd-sblead{border-color:color-mix(in srgb,#EAB308 70%,transparent);background:linear-gradient(180deg,color-mix(in srgb,#FDE047 18%,var(--surface)),var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,#EAB308 50%,transparent) inset,0 6px 16px -6px rgba(234,179,8,.45)}
.wd-sbn{display:flex;align-items:center;gap:7px;min-width:0;padding:0 4px}
.wd-sbav{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:800;font-size:12px;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.wd-sbav svg{width:14px;height:14px}
.wd-sblead .wd-sbav{background:linear-gradient(150deg,#FDE047,#CA8A04)!important;color:#3B2A00}
.wd-sbt{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}
.wd-sbs{min-width:30px;text-align:center;font:800 19px/1 var(--fd,inherit);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.wd-sbb{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:0;background:var(--wd-well);color:var(--fg);cursor:pointer;flex:none;transition:background .15s,transform .1s,color .15s}
.wd-sbb:hover{background:var(--fill);color:var(--accent)}
.wd-sbb:active{transform:scale(.88)}
.wd-sbb:disabled{opacity:.3;cursor:default}
.wd-sbb svg{width:14px;height:14px}
@media (min-width:861px){.wd-sb{flex-wrap:wrap;overflow:visible}}

/* ================= Siegertreppchen ================= */
.wd-final{text-align:center;max-width:640px;margin:0 auto;position:relative;z-index:1}
.wd-win{animation:wdZoom .7s var(--wd-spring)}
.wd-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;margin:28px auto 8px;max-width:520px;min-height:290px}
.wd-pod{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.wd-pod b{font-size:16px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px}
.wd-pod .wd-av{width:56px;height:56px;font-size:22px;box-shadow:0 0 0 4px var(--bg),0 10px 20px -8px rgba(0,0,0,.35);animation:wdZoom .6s var(--wd-spring) backwards}
.wd-psc{font-weight:800;color:var(--muted);font-size:14px}
.wd-block{width:100%;border-radius:20px 20px 8px 8px;display:grid;place-items:start center;padding-top:14px;color:#fff;font:800 42px/1 var(--fd,inherit);text-shadow:0 2px 6px rgba(0,0,0,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 0 rgba(0,0,0,.12),0 18px 30px -16px rgba(0,0,0,.4);animation:wdRise 1s var(--wd-ease) backwards;transform-origin:bottom}
@keyframes wdRise{from{transform:scaleY(0)}}
.wd-p1 .wd-block{height:170px;background:linear-gradient(180deg,#FDE047,#EAB308 60%,#CA8A04);animation-delay:.9s}
.wd-p2 .wd-block{height:120px;background:linear-gradient(180deg,#E2E8F0,#94A3B8);animation-delay:.5s}
.wd-p3 .wd-block{height:86px;background:linear-gradient(180deg,#F4B183,#C2702E);animation-delay:.1s}
.wd-p1 .wd-av{animation-delay:1.4s}.wd-p2 .wd-av{animation-delay:1s}.wd-p3 .wd-av{animation-delay:.6s}
.wd-pod.wd-mine b{color:var(--accent)}
.wd-myrank{font-size:16px;color:var(--muted);margin:14px 0}
.wd-myrank b{color:var(--fg);font-size:20px}
.wd-final .wd-lb{text-align:start;margin-top:16px}
.wd-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}
.wd-confetti i{position:absolute;top:-20px;left:var(--x);width:9px;height:14px;border-radius:2px;opacity:0;animation:wdFall var(--t) var(--d) cubic-bezier(.3,.6,.6,1) forwards}
.wd-confetti i.wd-cr{width:10px;height:10px;border-radius:50%}
@keyframes wdFall{0%{opacity:1;transform:translate(0,0) rotate(0)}85%{opacity:1}100%{opacity:0;transform:translate(var(--dx),105vh) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.wd *,.wd.wd-in{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}.wd-confetti{display:none}}

/* ================= Telefon ================= */
@media (max-width:860px){
  .wd-grid,.wd-grid2{grid-template-columns:1fr}
  .wd-lgrid,.wd-revgrid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .wd-hero{padding:24px 20px 22px;border-radius:24px}
  .wd-title{font-size:42px}
  .wd-title,.wd-tagline{max-width:calc(100% - 92px)}
  .wd-tagline{font-size:15px}
  .wd-hero-art{grid-template-columns:repeat(2,38px);gap:7px;top:16px;inset-inline-end:14px}
  .wd-hero-art span{width:38px;height:38px;font-size:18px;border-radius:12px}
  .wd-hero .wd-lead{font-size:14.5px}
  .wd-card{padding:18px;border-radius:22px}
  .wd-mode{padding:18px;border-radius:24px}
  .wd-mode-h{gap:12px}
  .wd-mode-h .wd-ico{width:44px;height:44px;border-radius:14px}
  .wd-mode-h h2{font-size:20px}
  .wd-mode .wd-card.wd-sub{padding:16px}
  .wd-langbar .wd-select{flex:1 1 100%}
  .wd-prompt{padding:18px 14px 20px;border-radius:22px}
  .wd .wd-opt{min-height:80px;padding:12px;gap:10px;font-size:15.5px}
  .wd-ans{gap:10px}
  .wd-ans.wd-lng{grid-template-columns:1fr}
  .wd-lng .wd-opt{min-height:62px}
  .wd-rev .wd-lng .wd-opt{min-height:52px}
  .wd-badge{width:30px;height:30px;border-radius:10px;font-size:14px}
  .wd-art .wd-opt{font-size:21px}
  .wd-chip{font-size:16px;padding:10px 12px}
  .wd-lstage .wd-opt{min-height:74px}
  .wd-tbtns{grid-template-columns:1fr 1fr}
  .wd-lhead{margin:-6px -16px 12px;padding:8px 16px 10px}
  .wd-podium{min-height:250px;gap:6px}
  .wd-p1 .wd-block{height:140px}.wd-p2 .wd-block{height:100px}.wd-p3 .wd-block{height:72px}
  .wd-h{font-size:27px}
  .wd-count{font-size:112px}
  .wd-bigLv{font-size:90px}
  .wd-res{padding:12px 14px}
  .wd-me{display:none}
  .wd-ring{width:60px;height:60px}
  .wd-ring svg{inset:2px;width:56px;height:56px}
}