/* Stimmungsbild – Designsystem. Hell/Dunkel über prefers-color-scheme, Handy zuerst. */
@font-face { font-family: "Bricolage"; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Bricolage"; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-weight: 300 900; font-display: swap;
  src: url("/static/fonts/figtree-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f3ede2; --surface: #fffcf6; --surface-2: #f8f2e7; --ink: #1d1a33; --muted: #6b6580; --line: #e4dccb;
  --accent: #ff5b36; --accent-soft: #ffe3da; --on-accent: #fff;
  --avg: #2f3fe0; --ok: #12805c; --err: #c4301c; --warn: #a86400;
  --shadow: 0 1px 0 rgba(29,26,51,.04), 0 10px 30px -12px rgba(29,26,51,.22);
  --face-ink: #2b1f2e;
  --display: "Bricolage", "Figtree", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --r: 20px; --r-sm: 12px; --ease: cubic-bezier(.2,.8,.2,1);
  --blob1: #ffd2c2; --blob2: #cfe3ff; --blob3: #ffeaa8; --grain: .05;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14121f; --surface: #1d1a2d; --surface-2: #252139; --ink: #f4efe5; --muted: #a49fb8; --line: #332f4b;
    --accent: #ff7656; --accent-soft: #3d2420; --on-accent: #1a0d08;
    --avg: #9fb0ff; --ok: #4fd1a1; --err: #ff8470; --warn: #f0b24d;
    --shadow: 0 1px 0 rgba(255,255,255,.03), 0 14px 34px -14px rgba(0,0,0,.7);
    --blob1: #4a2430; --blob2: #1f2a58; --blob3: #3a3015; --grain: .09; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; color: var(--ink); font: 400 1rem/1.5 var(--body); background: var(--bg); overflow-x: hidden; position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60vmax 50vmax at 8% -10%, var(--blob1), transparent 60%),
              radial-gradient(55vmax 45vmax at 105% 10%, var(--blob2), transparent 60%),
              radial-gradient(50vmax 40vmax at 60% 115%, var(--blob3), transparent 60%); opacity: .75; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 7vw, 2.9rem); }
h2 { font-size: 1.3rem; }
p { margin: 0; }
a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accent) 70%, transparent); text-underline-offset: .18em; text-decoration-thickness: .1em; }
a:hover { text-decoration-color: var(--accent); }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: var(--on-accent); }

/* Gerüst */
.shell { width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px max(40px, env(safe-area-inset-bottom)); }
.shell.wide { max-width: 1080px; }
.shell.narrow { max-width: 440px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0 18px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.05rem var(--display); letter-spacing: -.01em; text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .72rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.polltitle { font: 600 .95rem var(--display); color: var(--muted); max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.lead { color: var(--muted); font-size: 1.05rem; margin-top: 10px; text-wrap: pretty; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* Karten */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.card h2 { margin-bottom: 4px; }

/* Buttons */
.btn { --b: var(--ink); --t: var(--surface); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border: 1.5px solid var(--b); border-radius: 999px; background: var(--b); color: var(--t); font: 700 .97rem var(--body); cursor: pointer; text-decoration: none;
  transition: transform .15s var(--ease), box-shadow .15s, background .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px var(--ink); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.accent { --b: var(--accent); --t: var(--on-accent); }
.btn.ghost { --b: var(--line); background: transparent; color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink); box-shadow: none; }
.btn.danger { --b: var(--err); background: transparent; color: var(--err); }
.btn.danger:hover { background: var(--err); color: var(--surface); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .88rem; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: none; pointer-events: none; }
.btn .spin { width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 12px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.iconbtn:hover { border-color: var(--ink); }

/* Formulare */
label.lbl { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.input, textarea.input, select.input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface-2);
  color: var(--ink); font: 500 16px var(--body); transition: border-color .15s, box-shadow .15s; }
textarea.input { min-height: 120px; resize: vertical; line-height: 1.45; }
.input::placeholder { color: color-mix(in oklab, var(--muted) 75%, transparent); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent); }
.hint { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.field + .field { margin-top: 14px; }
.msg { padding: 10px 14px; border-radius: 12px; font-size: .94rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); }
.msg.ok { color: var(--ok); background: color-mix(in oklab, var(--ok) 12%, var(--surface)); border-color: color-mix(in oklab, var(--ok) 35%, var(--line)); }
.msg.err { color: var(--err); background: color-mix(in oklab, var(--err) 10%, var(--surface)); border-color: color-mix(in oklab, var(--err) 35%, var(--line)); }
.msg.warn { color: var(--warn); background: color-mix(in oklab, var(--warn) 12%, var(--surface)); border-color: color-mix(in oklab, var(--warn) 35%, var(--line)); }
.statusline { min-height: 1.6em; text-align: center; font-weight: 600; font-size: .98rem; }
.statusline.ok { color: var(--ok); } .statusline.err { color: var(--err); }

/* Kommentarbox */
.cbox { margin-top: 20px; }
.cbox .crow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.cbox small { color: var(--muted); font-variant-numeric: tabular-nums; }
.cbox .cstatus { margin-top: 10px; min-height: 1.3em; font-size: .92rem; font-weight: 600; }
.cstatus.ok { color: var(--ok); } .cstatus.err { color: var(--err); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: 999px; font: 700 .76rem var(--body); letter-spacing: .02em; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.chip.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.avg { background: color-mix(in oklab, var(--avg) 14%, var(--surface)); color: var(--avg); border-color: transparent; }

/* Toasts */
.toasts { position: fixed; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 8px; z-index: 50; pointer-events: none; padding: 0 16px; }
.toast { pointer-events: auto; max-width: 480px; padding: 12px 18px; border-radius: 14px; background: var(--ink); color: var(--surface); font-weight: 600; box-shadow: var(--shadow); animation: toastin .35s var(--ease); }
.toast.err { background: var(--err); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes toastin { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* Dialog */
dialog { border: 0; border-radius: 24px; padding: 0; background: var(--surface); color: var(--ink); width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
dialog::backdrop { background: rgba(20,18,31,.55); backdrop-filter: blur(4px); }
dialog[open] { animation: dlg .3s var(--ease); }
@keyframes dlg { from { opacity: 0; transform: translateY(16px) scale(.97); } }
.dlg-body { padding: 22px; overflow: auto; max-height: calc(100dvh - 32px); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* Startseite */
.hero { padding-top: clamp(8px, 5vh, 56px); }
.hero h1 { font-size: clamp(2.5rem, 11vw, 4.6rem); line-height: .98; }
.hero h1 em { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .14em; border-radius: 99px; background: var(--accent); opacity: .28; }
.codebox { margin-top: 28px; display: flex; gap: 10px; padding: 8px; border-radius: 26px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--shadow); }
.codebox input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: 800 clamp(1.5rem, 8vw, 2.1rem) var(--display); letter-spacing: .28em; text-transform: uppercase; padding: 0 12px; text-align: center; }
.codebox input::placeholder { color: color-mix(in oklab, var(--muted) 45%, transparent); letter-spacing: .28em; }
.codebox input:focus { outline: none; }
.codebox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent), var(--shadow); }
.codebox .btn { min-height: 56px; border-radius: 20px; }
.facerow { display: flex; gap: 8px; margin-top: 36px; }
.facerow svg { width: 100%; max-width: 64px; animation: bob 3.6s ease-in-out infinite; }
.facerow svg:nth-child(2) { animation-delay: -.7s; } .facerow svg:nth-child(3) { animation-delay: -1.4s; }
.facerow svg:nth-child(4) { animation-delay: -2.1s; } .facerow svg:nth-child(5) { animation-delay: -2.8s; }
@keyframes bob { 50% { transform: translateY(-7px) rotate(-3deg); } }
.features { display: grid; gap: 12px; margin-top: 36px; }
.feat { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.feat b { font-family: var(--display); font-size: 1.05rem; display: block; }
.feat span { color: var(--muted); font-size: .94rem; }
.feat .ic { width: 44px; height: 44px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; }

/* Workshop-Teilnahme */
.board { display: grid; grid-template-columns: 22px 18px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 6px; margin-top: 22px; }
.ytitle { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: center; }
.ytitle span { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .85rem var(--body); white-space: nowrap; }
.ylabels { grid-row: 1; grid-column: 2; display: grid; grid-template-rows: repeat(4, 1fr); }
.ylabels span { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--muted); white-space: nowrap; transition: color .2s; }
.xlabels { grid-row: 2; grid-column: 3; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 6px; }
.xlabels span { text-align: center; font-size: .7rem; color: var(--muted); transition: color .2s; }
.xtitle { grid-row: 3; grid-column: 3; text-align: center; font: 700 .85rem var(--body); padding-top: 4px; }
.ylabels span.on, .xlabels span.on { color: var(--ink); font-weight: 800; }
.padfield { grid-row: 1; grid-column: 3; position: relative; aspect-ratio: 1; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; border-radius: 20px; }
.bands { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; }
.band { background: color-mix(in oklab, var(--c) 42%, var(--surface)); transition: background .25s; }
.band:nth-child(1) { border-top-left-radius: 20px; } .band:nth-child(4) { border-top-right-radius: 20px; }
.band:nth-child(13) { border-bottom-left-radius: 20px; } .band:nth-child(16) { border-bottom-right-radius: 20px; }
.band.on { background: color-mix(in oklab, var(--c) 72%, var(--surface)); }
.hl, .vl { position: absolute; border: 0 dashed var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; }
.hl { left: 0; right: 0; border-top-width: 1.5px; } .vl { top: 0; bottom: 0; border-left-width: 1.5px; }
.pin { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface);
  box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(0,0,0,.35); opacity: 0; transform: scale(.4); pointer-events: none; transition: transform .25s var(--ease), opacity .15s; }
.padfield.has .pin { opacity: 1; transform: scale(1); } .padfield.has .hl, .padfield.has .vl { opacity: .3; }
.padfield.drag .pin { transform: scale(1.25); transition-duration: .1s; }
.padfield:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 22px; }
.readout { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.readout > div { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; }
.readout small { color: var(--muted); display: block; font-size: .78rem; font-weight: 600; }
.readout b { font: 700 1.7rem var(--display); font-variant-numeric: tabular-nums; }
.readout em { font-style: normal; color: var(--muted); font-size: .82rem; margin-left: 4px; }

/* Team-Teilnahme */
.moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 26px; }
.mood { appearance: none; border: 0; background: transparent; padding: 10px 2px 8px; border-radius: 22px; cursor: pointer; display: grid; justify-items: center; gap: 8px; color: var(--ink);
  font: 700 .72rem/1.15 var(--body); text-align: center; transition: background .2s, transform .25s var(--ease), opacity .2s; -webkit-tap-highlight-color: transparent; position: relative; }
.mood svg { width: 100%; max-width: 92px; height: auto; transition: transform .35s var(--ease), filter .25s; overflow: visible; }
.mood:hover svg { transform: translateY(-4px) rotate(-3deg); }
.mood:active svg { transform: scale(.92); }
.mood span { min-height: 2.3em; display: grid; align-items: start; }
.moods.chosen .mood:not(.on) { opacity: .5; } .moods.chosen .mood:not(.on):hover { opacity: .9; }
.mood.on { background: var(--surface); box-shadow: 0 0 0 2.5px var(--ink), var(--shadow); }
.mood.on svg { transform: translateY(-6px) scale(1.12); filter: drop-shadow(0 10px 12px color-mix(in oklab, var(--mc) 55%, transparent)); }
.mood.on span { font-weight: 800; }
.mood.on::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 11px; display: grid; place-items: center; }
.mood.pop svg { animation: pop .55s var(--ease); }
@keyframes pop { 0% { transform: scale(.8); } 55% { transform: translateY(-10px) scale(1.22) rotate(4deg); } 100% { transform: translateY(-6px) scale(1.12); } }
.mood-rail { height: 8px; border-radius: 8px; margin: 14px 4px 0; background: linear-gradient(90deg, var(--rail)); opacity: .85; }

/* Abgeschlossen-Hinweis */
.notice { margin-top: 16px; }

/* Master (Beamer) */
body.master { height: 100vh; overflow: hidden; }
.mwrap { --pad: 2.6vmin; height: 100vh; padding: var(--pad); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 2vmin; }
.mhead { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; }
.mhead h1 { font-size: clamp(22px, 4.2vmin, 54px); }
.mhead .eyebrow { font-size: clamp(10px, 1.4vmin, 16px); }
.live { display: inline-flex; align-items: center; gap: .8vmin; color: var(--muted); font-weight: 700; font-size: clamp(11px, 1.5vmin, 16px); }
.live::before { content: ""; width: 1.2vmin; height: 1.2vmin; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: beat 2s infinite; }
.live.off::before { background: var(--err); animation: none; }
@keyframes beat { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ok) 60%, transparent); } 80%,100% { box-shadow: 0 0 0 1.4vmin transparent; } }
.mmain { display: grid; gap: 2.4vmin; min-height: 0; grid-template-columns: auto minmax(0, 1fr) clamp(210px, 20vw, 330px); }
.mmain.team { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 400px) clamp(210px, 20vw, 330px); }
.mcard { background: var(--surface); border: 1px solid var(--line); border-radius: 2.4vmin; padding: 2.2vmin; box-shadow: var(--shadow); min-height: 0; }
.mside { display: flex; flex-direction: column; gap: 2vmin; min-height: 0; }
.stage { --gs: calc(100vh - 2 * var(--pad) - 2vmin - 7.2vmin - 8.5vmin); display: grid; grid-template-columns: 2.2em 1.7em var(--gs); grid-template-rows: var(--gs) auto auto; align-self: start; }
.stage .ytitle span { font-size: clamp(13px, 2vmin, 24px); }
.stage .ylabels span, .stage .xlabels span { font-size: clamp(10px, 1.5vmin, 18px); }
.stage .xtitle { font-size: clamp(13px, 2vmin, 24px); padding-top: .6vmin; }
.gridbox { grid-row: 1; grid-column: 3; position: relative; }
.grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: .5vmin; }
.cell { position: relative; background: color-mix(in oklab, var(--c) calc(24% + var(--heat, 0) * 48%), var(--surface)); transition: background .5s; }
.cell:nth-child(1) { border-top-left-radius: 2.4vmin; } .cell:nth-child(4) { border-top-right-radius: 2.4vmin; }
.cell:nth-child(13) { border-bottom-left-radius: 2.4vmin; } .cell:nth-child(16) { border-bottom-right-radius: 2.4vmin; }
.cntlayer { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: .5vmin; pointer-events: none; }
.cntlayer > div { position: relative; }
.cnt:empty { display: none; }
.cnt { position: absolute; top: 5%; right: 6%; padding: .1vmin .8vmin; border-radius: 1vmin; background: color-mix(in oklab, var(--surface) 88%, transparent); font: 800 clamp(12px, 2vmin, 24px) var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.vdots { position: absolute; inset: 0; pointer-events: none; }
.vdot { position: absolute; width: var(--ds); height: var(--ds); margin: calc(var(--ds) / -2) 0 0 calc(var(--ds) / -2); border-radius: 50%; background: var(--ink); opacity: .85;
  transition: left .6s var(--ease), top .6s var(--ease), width .3s, height .3s; animation: dotpop .5s cubic-bezier(.3,1.6,.5,1); }
.vdot.c { box-shadow: 0 0 0 .3vmin var(--surface), 0 0 0 .65vmin var(--accent); }
@keyframes dotpop { from { transform: scale(0); } }
.avg { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; }
.avg.on { opacity: 1; }
.hline, .vline { position: absolute; border: 0 dashed var(--avg); opacity: .75; transition: left .8s var(--ease), top .8s var(--ease); }
.hline { left: 0; right: 0; border-top-width: 2px; } .vline { top: 0; bottom: 0; border-left-width: 2px; }
.marker { position: absolute; width: 6.4vmin; height: 6.4vmin; margin: -3.2vmin 0 0 -3.2vmin; transition: left .8s var(--ease), top .8s var(--ease); }
.marker .ring { position: absolute; inset: 0; border-radius: 50%; border: .5vmin solid var(--avg); background: color-mix(in oklab, var(--avg) 18%, transparent); box-shadow: 0 0 0 .45vmin color-mix(in oklab, var(--surface) 75%, transparent); animation: pulse 2.6s ease-in-out infinite; }
.marker .lbl { position: absolute; inset: 0; display: grid; place-items: center; font: 800 2.6vmin var(--display); color: var(--avg); }
@keyframes pulse { 50% { transform: scale(1.12); } }
.comments { display: flex; flex-direction: column; }
.comments h2 { margin: 0 0 1.4vmin; font-size: clamp(15px, 2.3vmin, 28px); display: flex; justify-content: space-between; align-items: baseline; gap: 1vmin; }
.comments h2 small { color: var(--muted); font: 700 .8em var(--body); font-variant-numeric: tabular-nums; }
.clist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1.2vmin; scrollbar-width: thin; }
.citem { border-left: .7vmin solid var(--c); background: var(--surface-2); border-radius: 1.4vmin; padding: 1.2vmin 1.6vmin; font-size: clamp(13px, 1.95vmin, 23px); line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; animation: slide .5s var(--ease); }
.citem .meta { display: block; margin-top: .6vmin; color: var(--muted); font-size: .72em; font-weight: 600; }
.cempty { color: var(--muted); font-size: clamp(13px, 1.8vmin, 20px); }
@keyframes slide { from { opacity: 0; transform: translateY(-1.4vmin); } }
.qr { display: grid; place-items: center; background: #fff; border-radius: 1.6vmin; padding: 1.4vmin; }
.qr img, .qr canvas { width: 100% !important; height: auto !important; image-rendering: pixelated; display: block; }
.joincode { text-align: center; margin-top: 1.2vmin; }
.joincode small { display: block; color: var(--muted); font-weight: 600; font-size: clamp(10px, 1.4vmin, 16px); }
.joincode b { font: 800 clamp(20px, 3.6vmin, 44px) var(--display); letter-spacing: .14em; }
.joincode i { display: block; font-style: normal; font-weight: 700; font-size: clamp(11px, 1.6vmin, 19px); color: var(--muted); }
.k { color: var(--muted); font-weight: 700; font-size: clamp(11px, 1.5vmin, 17px); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6vmin; }
.big { font: 800 clamp(30px, 7vmin, 84px)/1 var(--display); font-variant-numeric: tabular-nums; }
.avgrow { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .6vmin 1vmin; margin-top: 1vmin; font-weight: 600; font-size: clamp(12px, 1.8vmin, 20px); }
.avgrow b { font: 800 clamp(18px, 3.4vmin, 40px) var(--display); color: var(--avg); font-variant-numeric: tabular-nums; }
.bar { height: .9vmin; border-radius: 1vmin; background: var(--line); overflow: hidden; grid-column: 1 / -1; }
.bar i { display: block; height: 100%; background: var(--avg); width: 0; transition: width .8s var(--ease); }

/* Master Team */
.pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.8vmin; align-items: end; height: 100%; min-height: 0; }
.pcol { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100%; min-height: 0; justify-items: center; gap: 1vmin; }
.pcount { font: 800 clamp(18px, 4.4vmin, 56px)/1 var(--display); font-variant-numeric: tabular-nums; align-self: end; }
.ptrack { width: 100%; max-width: 15vmin; align-self: stretch; display: flex; align-items: flex-end; min-height: 0; border-radius: 2.2vmin 2.2vmin 1vmin 1vmin; background: color-mix(in oklab, var(--mc) 12%, var(--surface-2)); }
.pbar { width: 100%; height: 0; min-height: .8vmin; border-radius: 2.2vmin 2.2vmin 1vmin 1vmin; background: var(--mc); transition: height .9s var(--ease); position: relative; }
.pbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%); }
.pface { width: 100%; max-width: 14vmin; height: auto; }
.plabel { font-weight: 700; text-align: center; font-size: clamp(11px, 1.7vmin, 20px); line-height: 1.15; }
.avgface { display: grid; justify-items: center; gap: 1vmin; text-align: center; }
.avgface svg { width: min(100%, 17vmin); height: auto; overflow: visible; filter: drop-shadow(0 1.4vmin 1.6vmin color-mix(in oklab, var(--mc, var(--muted)) 40%, transparent)); }
.avgface .val { font: 800 clamp(26px, 5.4vmin, 66px)/1 var(--display); font-variant-numeric: tabular-nums; }
.avgface .vlab { font-weight: 700; color: var(--muted); font-size: clamp(12px, 1.9vmin, 22px); }

/* Anmeldung & App */
.authwrap { min-height: 100dvh; display: grid; align-content: center; padding: 20px 16px; }
.authcard { padding: 26px 22px; }
.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nav a, .nav button { font: 700 .92rem var(--body); text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.nav a:hover, .nav button:hover { color: var(--ink); background: var(--surface); }
.nav a[aria-current] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.who { font-size: .85rem; color: var(--muted); font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; transition: .15s; }
.seg label b { font: 700 1rem var(--display); display: flex; align-items: center; gap: 8px; }
.seg label span { font-size: .82rem; color: var(--muted); }
.seg input:checked + label { border-color: var(--ink); background: var(--surface); box-shadow: 0 0 0 1.5px var(--ink); }
.seg input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 3px; }
.pollgrid { display: grid; gap: 14px; margin-top: 14px; }
.poll { display: grid; gap: 12px; position: relative; overflow: hidden; }
.poll.arch { opacity: .72; }
.poll .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.poll h3 { font-size: 1.2rem; overflow-wrap: anywhere; }
.pcode { display: inline-flex; align-items: center; gap: 8px; font: 800 1.3rem var(--display); letter-spacing: .16em; padding: 4px 6px 4px 14px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--line); cursor: pointer; color: var(--ink); }
.pcode:hover { border-color: var(--accent); }
.pcode svg { width: 18px; height: 18px; opacity: .55; margin: 0 6px; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stats b { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.tabs button { border: 0; background: transparent; border-radius: 999px; padding: 6px 16px; font: 700 .88rem var(--body); color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--surface); }
.empty { text-align: center; padding: 34px 16px; }
.empty svg { width: 120px; margin: 0 auto 10px; display: block; }
.ccrow { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ccrow p { white-space: pre-wrap; overflow-wrap: anywhere; }
.ccrow small { display: block; color: var(--muted); margin-top: 3px; font-weight: 600; }
.ccrow.hid p { opacity: .45; text-decoration: line-through; }
.qrbig { display: grid; place-items: center; background: #fff; border-radius: 18px; padding: 16px; max-width: 320px; margin: 0 auto; }
.qrbig img, .qrbig canvas { width: 100% !important; height: auto !important; display: block; }
.users { display: grid; gap: 12px; margin-top: 14px; }
.user { display: grid; gap: 10px; }
.user .uh { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.user.off { opacity: .66; }
.avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font: 800 1.1rem var(--display); background: var(--accent-soft); color: var(--accent); flex: none; }
.pw { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1.5px dashed var(--accent); font: 700 1.15rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }

@media (min-width: 720px) {
  .shell { padding-top: 28px; }
  .pollgrid { grid-template-columns: 1fr 1fr; }
  .users { grid-template-columns: 1fr 1fr; }
  .moods { gap: 10px; } .mood { font-size: .86rem; }
}
@media (max-width: 900px) and (orientation: portrait) {
  body.master { height: auto; overflow: auto; }
  .mwrap { height: auto; } .mmain, .mmain.team { grid-template-columns: 1fr; }
  .stage { --gs: calc(100vw - 2 * var(--pad) - 4em); }
  .pillars { height: 60vh; } .comments { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.shell.hero-w { max-width: 760px; }
.mmain.team .qr { width: min(100%, 23vmin); margin: 0 auto; }
.mmain.team .avgface svg { width: min(100%, 13.5vmin); }
.mmain.team .big { font-size: clamp(26px, 5.4vmin, 64px); }
.mmain.team .mside { gap: 1.6vmin; }
.mmain.team .mcard { padding: 1.8vmin; }
.seg label b span { color: var(--ink); font-size: inherit; }
.seg .ico { width: 26px; height: 26px; flex: none; }
.minigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 26px; height: 26px; }
.minigrid i { border-radius: 4px; background: var(--c); }
@media (max-width: 640px) {
  .topbar:has(.nav a + a) { flex-wrap: wrap; row-gap: 8px; }
  .topbar .nav { width: 100%; flex-wrap: nowrap; justify-content: space-between; margin: 0 -8px; width: calc(100% + 16px); }
  .nav a, .nav button { padding: 8px 10px; font-size: .88rem; }
}
.seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .seg { grid-template-columns: 1fr; } }
.dlg-body:focus { outline: none; }
.mood:disabled { opacity: .55; cursor: default; } .mood:disabled:hover svg { transform: none; }
.cstatus:empty { display: none; }
@media (prefers-color-scheme: dark) {
  .band { background: color-mix(in oklab, var(--c) 58%, var(--surface)); }
  .band.on { background: color-mix(in oklab, var(--c) 85%, var(--surface)); }
  .cell { background: color-mix(in oklab, var(--c) calc(30% + var(--heat, 0) * 50%), var(--surface)); }
}