/* Draw Wheel — Systemschrift, keine Anfragen an Dritte */
:root {
  --bg: #faf7f2; --bg2: #f1ece3; --surface: #ffffff; --surface2: #f6f2ea;
  --ink: #1d1b33; --muted: #5d5a73; --line: #e2dccf;
  --accent: #5a49d6; --accent-ink: #ffffff; --accent-soft: #e9e6ff;
  --warm: #ef5b3f; --ok: #14804f;
  --shadow: 0 1px 2px rgba(29,27,51,.06), 0 8px 24px -10px rgba(29,27,51,.18);
  --radius: 18px; --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12111c; --bg2: #181726; --surface: #1d1c2e; --surface2: #25243a;
    --ink: #efeefb; --muted: #aeacc6; --line: #34324c;
    --accent: #9a8cff; --accent-ink: #14112e; --accent-soft: #2d2a55; --warm: #ff7a5f; --ok: #4cd28f;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #12111c; --bg2: #181726; --surface: #1d1c2e; --surface2: #25243a;
  --ink: #efeefb; --muted: #aeacc6; --line: #34324c;
  --accent: #9a8cff; --accent-ink: #14112e; --accent-soft: #2d2a55; --warm: #ff7a5f; --ok: #4cd28f;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px -10px rgba(0,0,0,.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; font: 1rem/1.6 var(--font); color: var(--ink); background: var(--bg);
  background-image: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
                    radial-gradient(40rem 24rem at -10% 10%, color-mix(in srgb, var(--warm) 10%, transparent), transparent 70%);
  background-repeat: no-repeat; min-height: 100vh; overflow-wrap: anywhere;
}
img, svg, canvas { max-width: 100%; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 8px; }
.wrap { width: min(100% - 32px, 1120px); margin-inline: auto; }
.ic { width: 1.25em; height: 1.25em; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Kopf ---- */
.site-head { view-transition-name: site-head; padding: 14px 0 6px; }
.head-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; }
.brand { min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; min-height: 44px; }
.brand svg { width: 34px; height: 34px; }
.head-tools { display: flex; align-items: center; gap: 8px; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; width: auto; gap: 4px; padding: 0 10px 0 12px; font-size: .875rem; font-weight: 700; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu .chev { width: 16px; height: 16px; transition: transform .2s ease; }
.lang-menu[open] .chev { transform: rotate(180deg); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 220px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgb(0 0 0 / .16); transform-origin: top right; animation: menu-in .18s cubic-bezier(.3,1.3,.5,1); }
.lang-menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.lang-menu a:hover { background: var(--surface2); }
.lang-menu a[aria-current="true"] { background: var(--accent-soft); }
.lang-menu .lc { width: 2.2em; font-size: .875rem; font-weight: 800; color: var(--muted); }
@keyframes menu-in { from { transform: scale(.94) translateY(-4px); } }
.icon-btn { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--surface2); }
.icon-btn .ic { width: 22px; height: 22px; }
#theme-toggle .t { display: none; }
:root:not([data-theme]) #theme-toggle .t-auto, :root[data-theme="light"] #theme-toggle .t-light, :root[data-theme="dark"] #theme-toggle .t-dark { display: block; }
.tools-nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.tools-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 650; font-size: .94rem; border: 1px solid transparent; }
.tools-nav a:hover { background: var(--surface); border-color: var(--line); }
.tools-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }

/* ---- Einstieg ---- */
.hero { padding: 22px 0 10px; max-width: 52rem; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.03em; margin: 0 0 10px; font-weight: 850; text-wrap: balance; }
.lead { font-size: clamp(1rem, .95rem + .3vw, 1.18rem); color: var(--muted); margin: 0; max-width: 46rem; text-wrap: pretty; }

/* ---- Karten, Knoepfe ---- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.panel h2 { font-size: 1.05rem; margin: 0; letter-spacing: -.01em; }
.btn { font: inherit; font-weight: 700; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .12s ease, background .15s; }
.btn:hover { background: var(--bg2); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn.big { min-height: 52px; padding: 0 28px; font-size: 1.08rem; }
.btn.small { min-height: 44px; padding: 0 12px; font-size: .94rem; gap: 6px; }
input[type="number"], select, input[type="text"], textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; min-height: 44px; padding: 8px 12px; width: 100%; }
input[type="number"] { width: 6.5rem; }
textarea { resize: vertical; line-height: 1.5; }
label { font-weight: 650; font-size: .94rem; }
.check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--accent); }
.controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; }
.controls .field { display: grid; gap: 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Werkzeug-Layout ---- */
.tool-grid { display: grid; gap: 18px; margin: 18px 0 8px; align-items: start; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); } }
.names { view-transition-name: names-panel; }
.names-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.names textarea { min-height: 220px; }
@media (min-width: 900px) { .names textarea { min-height: 340px; } }
.names-status { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 2px; color: var(--muted); font-size: .94rem; }
.names-status button { font: inherit; font-weight: 700; color: var(--accent); background: none; border: 0; cursor: pointer; min-height: 44px; padding: 0 6px; text-decoration: underline; }
.names-status [hidden] { display: none; }

/* ---- Gluecksrad ---- */
.wheel-card { display: grid; gap: 14px; justify-items: center; }
.wheel-stage { position: relative; width: min(100%, 560px); aspect-ratio: 1; touch-action: pan-y; cursor: pointer; overflow: clip; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.wheel-stage:focus-visible { outline-offset: 6px; }
#wheel { position: absolute; left: 3%; top: 6%; width: 94%; height: 94%; border-radius: 50%; will-change: transform; }
.wheel-stage::before { content: ""; position: absolute; left: 3%; top: 6%; width: 94%; height: 94%; border-radius: 50%; box-shadow: 0 14px 34px -14px rgba(29,27,51,.45); }
.wheel-stage.is-demo #wheel { filter: grayscale(.4); }
.pointer { position: absolute; left: 50%; top: 0; width: 9%; margin-left: -4.5%; z-index: 3; transform-origin: 50% 18%; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); pointer-events: none; }
.pointer svg { display: block; width: 100%; height: auto; fill: var(--warm); stroke: var(--surface); stroke-width: 3; }
.hub { position: absolute; left: 50%; top: 53%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid var(--surface); background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 850; font-size: clamp(.875rem, 2.8vw, 1.1rem); letter-spacing: 0; cursor: pointer; z-index: 2; box-shadow: 0 6px 16px -4px rgba(0,0,0,.45); min-width: 44px; min-height: 44px; padding: 0; transition: scale .15s; }
.hub:hover { scale: 1.05; }
.hub:active { scale: .94; }
.hub:disabled { opacity: .85; cursor: progress; }
.stage-tools { position: absolute; right: 0; top: 0; display: flex; gap: 8px; z-index: 4; }

.history { width: 100%; }
.history-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.history h2 { font-size: 1rem; }
#history { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; counter-reset: h; min-height: 40px; }
#history li { counter-increment: h; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); font-weight: 650; font-size: .94rem; }
#history li:first-child { background: var(--accent); color: var(--accent-ink); }
.hint { margin: 6px 0 0; color: var(--muted); font-size: .94rem; min-height: 24px; }
.wheel-card:fullscreen { background: var(--bg); align-content: center; padding: 16px; overflow: auto; }
.wheel-card:fullscreen .wheel-stage { width: min(92vw, 78vh); }

/* ---- Dialog ---- */
dialog.dlg { border: 0; border-radius: 24px; padding: 28px 24px 22px; background: var(--surface); color: var(--ink); width: min(92vw, 440px); text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); overflow: visible; }
dialog.dlg::backdrop { background: rgba(14,12,32,.55); backdrop-filter: blur(3px); }
dialog.dlg[open] { animation: pop .55s var(--spring, cubic-bezier(.3,1.5,.5,1)); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.dlg-kicker { margin: 0; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .875rem; }
.dlg-name { margin: 8px 0 20px; font-size: clamp(1.8rem, 7vw, 2.6rem); font-weight: 850; line-height: 1.12; letter-spacing: -.02em; color: var(--accent); overflow-wrap: anywhere; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.confetti { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; left: 50%; top: 40%; width: 9px; height: 14px; border-radius: 3px; display: block; }

/* ---- Ziehen, Gruppen, Mischen ---- */
.hat-stage { display: grid; gap: 12px; margin-top: 14px; }
.hat { width: 64px; height: 64px; color: var(--accent); transform-origin: 50% 90%; }
.hat.wiggle { animation: wiggle .8s ease; }
@keyframes wiggle { 20% { transform: rotate(-9deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } }
.slips, .rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slips { min-height: 120px; align-content: start; }
.slip, .row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; min-height: 52px; }
.slip.sub { opacity: .8; border-style: dashed; }
.rank { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .94rem; font-variant-numeric: tabular-nums; }
.rank.wide { border-radius: 10px; font-size: .875rem; letter-spacing: .02em; }
.rname { font-weight: 700; font-size: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
.row { padding: 8px 12px; min-height: 48px; }
.rows-empty, .empty { color: var(--muted); margin: 0; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font-weight: 650; min-height: 40px; max-width: 100%; overflow-wrap: anywhere; }
.chip.leader { background: var(--accent); color: var(--accent-ink); }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; margin-top: 14px; }
.groups-grid:empty { display: none; }
.gcard { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--surface2); }
.gcard h3 { margin: 0 0 10px; font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.gcount { background: var(--ink); color: var(--bg); border-radius: 999px; padding: 0 10px; font-size: .875rem; min-height: 24px; display: inline-grid; place-items: center; }
.pool-title { margin: 14px 0 8px; font-size: .94rem; color: var(--muted); font-weight: 700; }
.pool-wrap[hidden] { display: none; }
.proof { margin-top: 14px; border: 1px dashed var(--accent); border-radius: 14px; padding: 14px; background: var(--accent-soft); }
.proof[hidden] { display: none; }
.proof pre { margin: 8px 0 12px; white-space: pre-wrap; font: .94rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.gw-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow: auto; display: grid; gap: 2px; font-size: .94rem; }
.gw-list .off { color: var(--muted); text-decoration: line-through; }
details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.stats { color: var(--muted); margin: 10px 0 0; min-height: 24px; }
.tool-card { min-width: 0; }

/* ---- Fliesstext ---- */
.prose { max-width: 50rem; margin: 40px 0 24px; }
.prose h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); letter-spacing: -.02em; margin: 2em 0 .5em; line-height: 1.2; }
.prose h3 { font-size: 1.1rem; margin: 1.4em 0 .3em; }
.prose p, .prose li { color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 4px 0; }
.faq details p { margin: 0 0 14px; }
.faq summary::marker { color: var(--accent); }
.note { font-size: .94rem; color: var(--muted); border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.legal { max-width: 46rem; margin: 20px 0 40px; }
.legal h2 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.legal address { font-style: normal; }
.prose .also, .also { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.also a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-weight: 700; color: var(--ink); }
.also a:hover { border-color: var(--accent); }

/* ---- Fuss, Hinweis ---- */
.site-foot { margin-top: 48px; padding: 22px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .94rem; }
.foot-row { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0 4px; }
.site-foot nav a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px 0 0; }
.site-foot nav a:hover { color: var(--ink); }
.site-foot p { margin: 4px 0; }
.foot-more { margin-top: 6px; align-items: center; }
.foot-more span { margin-right: 8px; }
#toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 140%); background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px; font-weight: 650; z-index: 60; max-width: min(92vw, 420px); text-align: center; transition: transform .45s cubic-bezier(.3,1.4,.5,1), visibility 0s .45s; pointer-events: none; visibility: hidden; }
#toast.show { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }

/* ---- 404 ---- */
.nf { padding: 40px 0; max-width: 40rem; }

/* ---- Seitenuebergaenge ---- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
::view-transition-group(site-head), ::view-transition-group(names-panel) { animation-duration: .4s; animation-timing-function: cubic-bezier(.3,1.2,.5,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (max-width: 420px) {
  .wrap { width: min(100% - 24px, 1120px); }
  .panel { padding: 14px; }
  .btn.big { padding: 0 22px; }
}

/* ---- Druck: hell, nur Ergebnis ---- */
@media print {
  :root, :root[data-theme="dark"] { --bg: #fff; --surface: #fff; --surface2: #fff; --ink: #000; --muted: #333; --line: #999; --accent: #000; --accent-soft: #eee; --accent-ink: #fff; color-scheme: light; }
  body { background: #fff !important; color: #000; }
  .site-head, .site-foot, .prose, .names, .controls, .actions, .tools-nav, #toast, .hat-stage .hat, .skip, .pool-wrap, .no-print { display: none !important; }
  .tool-grid { display: block; margin: 0; }
  .panel { box-shadow: none; border: 0; padding: 0; }
  .gcard { break-inside: avoid; border: 1px solid #000; background: #fff; }
  .chip { background: #fff; border: 1px solid #999; color: #000; }
  .chip.leader { background: #000; color: #fff; }
  .hero { padding: 0 0 12px; }
  .lead { display: none; }
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.panel { position: relative; }
#sound-btn[aria-pressed="true"] .i-off, #sound-btn[aria-pressed="false"] .i-on { display: none; }
.prose .also { padding: 0; }
.stage-tools #full-btn[hidden] { display: inline-grid; visibility: hidden; }
.tool-card .actions { margin-top: 14px; }
.controls .field input[type="text"] { width: min(100%, 22rem); }
.controls { margin-bottom: 4px; }