:root {
  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --ink: #181c21;
  --muted: #6b717a;
  --line: #e4e2dc;
  --line-strong: #d3d0c8;
  --accent: #1f5e5c;
  --accent-ink: #ffffff;
  --accent-soft: #e2eeec;
  --accent-hover: #174a48;
  --ok: #1e7855;
  --ok-soft: #e1f2ea;
  --warn: #9a6400;
  --warn-soft: #fbf0d9;
  --danger: #b03a2e;
  --danger-soft: #f9e6e3;
  --info-soft: #e6eef8;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20, 24, 28, .04), 0 4px 16px rgba(20, 24, 28, .04);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131517;
    --surface: #1b1e21;
    --surface-2: #202427;
    --ink: #eceae5;
    --muted: #9aa0a7;
    --line: #2c3034;
    --line-strong: #3a3f44;
    --accent: #5fb3ad;
    --accent-ink: #0f1a19;
    --accent-soft: #1d3332;
    --accent-hover: #79c4be;
    --ok: #5cc296;
    --ok-soft: #173126;
    --warn: #e2b357;
    --warn-soft: #3a2e15;
    --danger: #ec7d70;
    --danger-soft: #3b1f1b;
    --info-soft: #1c2735;
    --shadow: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.08rem; font-weight: 650; }
h3 { font-size: .95rem; font-weight: 650; }
p { margin: 0 0 .8em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; }
small, .small { font-size: .84rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.spacer { flex: 1; }
[hidden] { display: none !important; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 28px; padding-bottom: 48px; min-height: calc(100vh - 140px); }
.footer { color: var(--muted); font-size: .8rem; padding-bottom: 28px; }

/* Kopfzeile */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark, .auth-logo {
  width: 26px; height: 26px; border-radius: 8px; background: var(--accent);
  -webkit-mask: none; position: relative; flex: none;
}
.brand-mark::after, .auth-logo::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 7px; height: 12px;
  border: solid var(--accent-ink); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.mainnav { display: flex; gap: 4px; overflow-x: auto; }
.mainnav a { color: var(--muted); padding: 7px 12px; border-radius: 8px; font-weight: 550; white-space: nowrap; }
.mainnav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.mainnav a.active { color: var(--ink); background: var(--accent-soft); }
.usermenu { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.user-link { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.user-link:hover { text-decoration: none; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }

/* Logo */
.brand-logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.brand-name.has-logo { color: var(--muted); font-weight: 600; padding-left: 12px; border-left: 1px solid var(--line); }
.auth-logo-img { display: block; height: 64px; width: auto; max-width: 240px; object-fit: contain; margin-bottom: 18px; }
.logo-preview { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 16px; margin-bottom: 12px; border: 1px dashed var(--line-strong); border-radius: 10px; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
.logo-preview img { max-height: 80px; max-width: 100%; }
.facts-inline { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 14px; font-size: .92rem; }
.facts-inline dt { color: var(--muted); }
.facts-inline dd { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.text-warn { color: var(--warn); }
.mt { margin-top: 20px; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; font-size: .92rem; line-height: 1;
  padding: 10px 16px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted); text-decoration: none; }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .link-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.btn-sm { padding: 7px 11px; font-size: .84rem; border-radius: 8px; }
.btn-block { width: 100%; }
.danger { color: var(--danger) !important; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

/* Formulare */
label { display: block; font-weight: 600; font-size: .9rem; }
label small { font-weight: 400; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=number],
input[type=datetime-local], input:not([type]), select, textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-weight: 400; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 9px;
}
textarea { resize: vertical; min-height: 80px; }
input[readonly], textarea[readonly], input:disabled, select:disabled { background: var(--surface-2); color: var(--muted); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; flex: none; }
.stack > * + * { margin-top: 14px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 400; }
.check:last-of-type { border-bottom: 0; }
.check input { margin-top: 3px; }
.check span strong { display: block; font-weight: 600; }
.check span small { display: block; color: var(--muted); }
.check.inline { padding: 0; border: 0; align-items: center; gap: 8px; font-size: .88rem; }
.check.is-disabled { opacity: .55; cursor: not-allowed; }
.radio-line { display: flex; gap: 10px; align-items: center; font-weight: 500; padding: 6px 0; cursor: pointer; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 600; font-size: .9rem; margin-bottom: 8px; padding: 0; }

/* Meldungen */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-size: .93rem; border: 1px solid transparent; }
.flash-success { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.flash-error { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.flash-info { background: var(--info-soft); }
.notice { background: var(--warn-soft); color: var(--warn); padding: 10px 12px; border-radius: 8px; }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; box-shadow: var(--shadow); }
.panel.flush { padding: 0; overflow: hidden; }
.panel > h2:first-child { margin-bottom: 14px; }
.prose { font-size: 1rem; }

/* Seitenkopf */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head p { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.back { display: inline-block; font-size: .88rem; color: var(--muted); margin-bottom: 8px; }
.badges { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.head-actions { display: flex; gap: 8px; }

/* Badges */
.status, .type-tag, .role, .ok-chip, .todo-chip, .pdf-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 650;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; line-height: 1.5;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-draft { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.status-scheduled { background: var(--warn-soft); color: var(--warn); }
.status-open { background: var(--ok-soft); color: var(--ok); }
.status-closed { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.type-tag { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); font-weight: 550; }
.role { border: 1px solid var(--line); }
.role-admin { background: #2b2f36; color: #fff; border-color: #2b2f36; }
.role-creator { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.role-voter { background: var(--surface-2); color: var(--ink); }
.role-observer { background: var(--info-soft); color: #3d5f8a; border-color: transparent; }
@media (prefers-color-scheme: dark) { .role-admin { background: #eceae5; color: #131517; } .role-observer { color: #9ec0e8; } }
.ok-chip { background: var(--ok-soft); color: var(--ok); }
.todo-chip { background: var(--warn-soft); color: var(--warn); }
.pdf-chip { background: var(--danger-soft); color: var(--danger); }
.count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .75rem; text-align: center; color: var(--muted); font-weight: 600; }

/* Login */
.auth-card { max-width: 400px; margin: 7vh auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 34px; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.45rem; }
.auth-logo { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 18px; }
.auth-logo::after { left: 13px; top: 8px; width: 10px; height: 18px; border-width: 0 4px 4px 0; }

/* Übersicht */
.pending { display: grid; gap: 8px; margin-bottom: 26px; }
.pending-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink);
}
.pending-item:hover { text-decoration: none; background: var(--accent-hover); }
.pending-item .muted { color: inherit; opacity: .75; }
.pending-title { font-weight: 650; }
.pending-cta { margin-left: auto; font-weight: 650; white-space: nowrap; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-ink); box-shadow: 0 0 0 0 var(--accent-ink); animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; overflow-x: auto; }
.tabs a { padding: 6px 12px; border-radius: 7px; color: var(--muted); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.tabs a:hover { text-decoration: none; color: var(--ink); }
.tabs a.active { background: var(--accent-soft); color: var(--accent); }
.tabs a.active .count { background: transparent; border-color: transparent; color: inherit; }
.search input, .search select { margin: 0; min-width: 220px; padding: 8px 12px; }

.poll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.poll-card {
  display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; color: var(--ink); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.poll-card:hover { text-decoration: none; border-color: var(--line-strong); transform: translateY(-1px); }
.poll-card h3 { font-size: 1.05rem; margin: 0; }
.poll-card-top { display: flex; gap: 6px; flex-wrap: wrap; }
.poll-card-desc { color: var(--muted); font-size: .9rem; margin: 0; }
.poll-card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .85rem; margin-top: auto; padding-top: 4px; }
.poll-card-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.meter { height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.empty-state { text-align: center; padding: 60px 20px; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* Abstimmung */
.manage-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.manage-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 0 6px; }
.inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.poll-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.poll-side .panel { padding: 18px; }

.file-list { list-style: none; padding: 0; margin: 0 0 12px; }
.file-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.file-list li:last-child { border-bottom: 0; }
.file-name { font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.pdf-icon { font-size: .66rem; font-weight: 800; letter-spacing: .03em; color: var(--danger); background: var(--danger-soft); padding: 5px 6px; border-radius: 5px; flex: none; }
.pdf-viewer { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 6px 0 14px; }
.pdf-viewer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.pdf-viewer iframe { display: block; width: 100%; height: 70vh; border: 0; background: #525659; }
.upload-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--line); }
.upload-inline input[type=file] { font-size: .86rem; flex: 1; min-width: 200px; }

.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 26px; text-align: center;
  background: var(--surface-2); cursor: pointer; font-weight: 550; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.choice-list { display: grid; gap: 8px; margin-bottom: 16px; }
.choice {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line);
  border-radius: 10px; cursor: pointer; font-weight: 550; transition: border-color .12s, background .12s;
}
.choice:hover { border-color: var(--line-strong); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-mark { width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; flex: none; display: grid; place-items: center; transition: all .12s; }
.vote-form[data-type=multiple] .choice-mark { border-radius: 6px; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input:checked + .choice-mark { border-color: var(--accent); background: var(--accent); }
.choice input:checked + .choice-mark::after { content: ""; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: translate(0, -1px) rotate(45deg); }
.choice input:focus-visible + .choice-mark { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice.is-disabled { opacity: .45; cursor: not-allowed; }
.choice-yesno { grid-template-columns: repeat(3, 1fr); }
.choice-yesno .choice { justify-content: center; padding: 18px; font-size: 1.02rem; }
.choice-yesno .yn-0:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); }
.choice-yesno .yn-0 input:checked + .choice-mark { background: var(--ok); border-color: var(--ok); }
.choice-yesno .yn-1:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }
.choice-yesno .yn-1 input:checked + .choice-mark { background: var(--danger); border-color: var(--danger); }

.scale-list { display: grid; gap: 4px; margin-bottom: 16px; }
.scale-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.scale-row legend { float: left; margin: 0; font-weight: 600; }
.scale-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.scale-buttons label { position: relative; }
.scale-buttons input { position: absolute; opacity: 0; }
.scale-buttons span { display: grid; place-items: center; width: 38px; height: 38px; border: 1.5px solid var(--line-strong); border-radius: 9px; cursor: pointer; font-weight: 650; }
.scale-buttons input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.scale-buttons input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.voted-panel { display: flex; gap: 16px; align-items: flex-start; }
.voted-check { width: 40px; height: 40px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-weight: 800; flex: none; }

.results-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.verdict { padding: 12px 14px; border-radius: 9px; font-weight: 650; margin-bottom: 16px; border-left: 4px solid; }
.verdict-ok { background: var(--ok-soft); color: var(--ok); }
.verdict-no { background: var(--danger-soft); color: var(--danger); }
.bars { display: grid; gap: 14px; margin-bottom: 8px; }
.bar-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-weight: 550; }
.bar-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar { height: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: color-mix(in srgb, var(--accent) 45%, var(--surface)); border-radius: 999px; transition: width .5s ease; }
.bar-row.is-leader .bar span { background: var(--accent); }
.bar-row.is-leader .bar-label > span:first-child { font-weight: 700; }

.stat-num { font-size: 2rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.stat .meter { margin-top: 10px; }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.people { list-style: none; padding: 0; margin: 0; font-size: .9rem; max-height: 280px; overflow: auto; }
.people li { padding: 4px 0; border-bottom: 1px solid var(--line); }

.comments { list-style: none; padding: 0; margin: 0; }
.comments li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.comments li:last-child { border-bottom: 0; }
.comments p { margin: 4px 0 0; }

/* Tabellen */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.panel:not(.flush) .table th { background: transparent; padding-left: 0; }
.panel:not(.flush) .table td { padding-left: 0; }
.table .actions { white-space: nowrap; }
.table .actions .inline-form { display: inline-flex; }
.is-inactive td { opacity: .55; }

/* Editor */
.editor .panel > label, .editor .panel > div, .editor .panel > fieldset { margin-bottom: 14px; }
.type-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.type-picker legend { grid-column: 1 / -1; }
.type-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; }
.type-option input { margin-top: 3px; }
.type-option strong { display: block; font-weight: 650; }
.type-option small { display: block; color: var(--muted); }
.type-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.type-picker:disabled .type-option { opacity: .6; cursor: not-allowed; }
.participants { border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; overflow: hidden; }
.participants-tools { display: flex; gap: 12px; align-items: center; padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.participants-tools input { margin: 0; padding: 7px 10px; }
.participants-list { max-height: 280px; overflow: auto; padding: 4px 12px; }
.participant { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-weight: 500; cursor: pointer; }
.participants.is-disabled { opacity: .5; pointer-events: none; }
.sticky-actions { position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); padding: 14px 0; border-top: 1px solid var(--line); z-index: 5; }

/* Benutzer */
.role-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.role-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; color: var(--ink); }
.role-card:hover { text-decoration: none; border-color: var(--line-strong); }
.role-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.role-card p { margin: 8px 0 0; }
.role-card-head { display: flex; justify-content: space-between; align-items: center; }
.role-count { font-size: 1.3rem; font-weight: 750; }
.grid-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; }
.grid-form .form-end { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
.grid-form .mode-pick { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mode-pick .mode-password { max-width: 280px; margin: 0; }
.create-user summary { cursor: pointer; list-style: none; }
.create-user summary::-webkit-details-marker { display: none; }
.create-user[open] summary { margin-bottom: 16px; }
.invite-box { border-color: var(--accent); background: var(--accent-soft); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { margin: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; }

@media (max-width: 900px) {
  .poll-layout { grid-template-columns: 1fr; }
  .poll-side { order: -1; }
  .role-cards { grid-template-columns: repeat(2, 1fr); }
  .grid-form, .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .wrap { padding: 0 16px; }
  .topbar-inner { gap: 12px; height: auto; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
  .mainnav { order: 3; width: 100%; }
  .user-name, .brand-name.has-logo { display: none; }
  h1 { font-size: 1.45rem; }
  .row, .type-picker { grid-template-columns: 1fr; }
  .choice-yesno { grid-template-columns: 1fr; }
  .search input, .search select { min-width: 0; width: 100%; }
  .search { width: 100%; }
  .pending-item { flex-wrap: wrap; }
  .pending-cta { margin-left: 23px; }
  .panel { padding: 16px; }
  .role-cards { grid-template-columns: 1fr; }
  .head-actions { width: 100%; }
}
@media print {
  .topbar, .manage-bar, .head-actions, .vote-panel, .footer { display: none; }
  body { background: #fff; }
}

/* Live-Punkt */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-right: 6px; vertical-align: middle; animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
.btn-primary .live-dot { background: #ff8a8a; }

/* Vollbild-Live-Ansicht */
.live-body { background: #0f1214; color: #eef0ee; min-height: 100vh; }
.live-body { --surface: #181c1f; --surface-2: #1d2226; --line: #2b3136; --line-strong: #3a4147; --ink: #eef0ee; --muted: #98a1a8; --accent: #5fb3ad; --accent-ink: #0f1a19; --accent-soft: #1d3332; --ok: #5cc296; --ok-soft: #173126; --danger: #ec7d70; --danger-soft: #3b1f1b; color-scheme: dark; }
.live { min-height: 100vh; display: flex; flex-direction: column; padding: 3vh 5vw; gap: 3vh; }
.live-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.live-brand { display: flex; align-items: center; gap: 14px; font-weight: 650; color: var(--muted); font-size: clamp(14px, 1.3vw, 20px); }
.live-brand .logo-img { height: clamp(32px, 5vh, 56px); width: auto; max-width: 240px; object-fit: contain; }
.live-status { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; font-size: clamp(14px, 1.2vw, 18px); }
.live-status[data-status=closed] .live-dot, .live-status[data-status=scheduled] .live-dot { background: var(--muted); animation: none; }
.live-main { flex: 1; display: flex; flex-direction: column; gap: 3.5vh; max-width: 1400px; width: 100%; margin: 0 auto; }
.live-kicker { color: var(--accent); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: clamp(12px, 1.1vw, 16px); margin: 0; }
.live-title { font-size: clamp(30px, 4.6vw, 72px); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
.live-stats { display: grid; grid-template-columns: 2fr 1fr; gap: 2vw; }
.live-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(16px, 2.4vh, 32px) clamp(18px, 2vw, 36px); }
.live-big { font-size: clamp(40px, 6vw, 96px); font-weight: 750; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.live-big small { font-size: .45em; color: var(--muted); font-weight: 600; }
.live-label { color: var(--muted); font-size: clamp(14px, 1.3vw, 20px); margin-top: 8px; }
.live-meter { height: 12px; border-radius: 999px; background: var(--surface-2); margin-top: 18px; overflow: hidden; }
.live-meter span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .8s ease; }
.live-results .verdict { font-size: clamp(16px, 1.8vw, 28px); padding: 16px 22px; }
.live-bars { display: grid; gap: clamp(14px, 2.6vh, 30px); }
.live-bars .bar-label { font-size: clamp(18px, 2.2vw, 34px); margin-bottom: 10px; }
.live-bars .bar-value { font-weight: 700; }
.live-bars .bar-value small { font-size: .6em; font-weight: 600; }
.live-bars .bar { height: clamp(16px, 2.6vh, 30px); border: 0; }
.live-bars .bar span { transition: width .8s cubic-bezier(.2,.8,.2,1); }
.live-hidden { font-size: clamp(18px, 2vw, 30px); color: var(--muted); text-align: center; padding: 6vh 0; border: 1px dashed var(--line-strong); border-radius: 18px; }
.live-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: clamp(13px, 1.1vw, 17px); border-top: 1px solid var(--line); padding-top: 2vh; }
.live-foot strong { color: var(--ink); }
.live-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 700px) { .live-stats { grid-template-columns: 1fr; } }

/* Kopfzeile kompakter bei vielen Menüpunkten */
.user-name { white-space: nowrap; }
@media (max-width: 1180px) { .user-name, .brand-name.has-logo { display: none; } }
@media (max-width: 1400px) { .brand-name.has-logo { display: none; } }
.mainnav { min-width: 0; flex: 1 1 auto; }
.brand { flex: none; }

/* QR-Code */
.qr-icon { width: 14px; height: 14px; display: inline-block; background:
  linear-gradient(currentColor 0 0) 0 0 / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 100% 0 / 5px 5px no-repeat,
  linear-gradient(currentColor 0 0) 0 100% / 5px 5px no-repeat, linear-gradient(currentColor 0 0) 70% 70% / 3px 3px no-repeat; }
.qr-dialog { border: 1px solid var(--line); border-radius: 16px; padding: 22px; width: min(420px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.qr-dialog::backdrop { background: rgba(15, 18, 20, .55); }
.qr-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.qr-box { background: #fff; border-radius: 12px; padding: 10px; margin: 0 auto 12px; width: min(300px, 100%); border: 1px solid var(--line); }
.qr-box svg, .live-qr-code svg, .poster-qr svg { display: block; width: 100%; height: auto; }
.qr-actions { margin-top: 14px; }
.live-stats { grid-template-columns: 2fr 1fr auto; }
.live-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.live-qr-code { width: clamp(110px, 13vw, 210px); background: #fff; padding: 8px; border-radius: 12px; }
.live-qr .live-label { margin-top: 10px; }
@media (max-width: 700px) { .live-stats { grid-template-columns: 1fr; } }

/* Druckbarer Aushang */
.print-body { background: #e9e7e2; color: #181c21; }
.print-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 210mm; margin: 16px auto; padding: 0 8px; flex-wrap: wrap; }
.poster { width: 210mm; min-height: 297mm; margin: 0 auto 32px; background: #fff; padding: 18mm 20mm; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.poster-head { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding-bottom: 8mm; border-bottom: 1px solid #e4e2dc; margin-bottom: 12mm; }
.poster-logo { height: 18mm; width: auto; max-width: 70mm; object-fit: contain; }
.poster-app { font-weight: 650; color: #6b717a; font-size: 13pt; }
.poster-kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 750; color: #1f5e5c; font-size: 12pt; margin: 0 0 4mm; }
.poster-title { font-size: 30pt; line-height: 1.12; margin: 0 0 6mm; letter-spacing: -.01em; }
.poster-desc { font-size: 12.5pt; color: #3a4047; max-width: 150mm; margin: 0 0 8mm; }
.poster-qr { width: 95mm; margin: 4mm 0 6mm; }
.poster-cta { font-size: 16pt; font-weight: 700; margin: 0 0 3mm; }
.poster-deadline { font-size: 13pt; color: #3a4047; margin: 0; }
.poster-foot { margin-top: auto; padding-top: 10mm; width: 100%; border-top: 1px solid #e4e2dc; display: grid; gap: 4mm; font-size: 11pt; color: #6b717a; }
.poster-url { color: #181c21; font-size: 12.5pt; word-break: break-all; }
.poster-note { font-size: 10pt; }
@media print {
  @page { size: A4; margin: 0; }
  .print-body { background: #fff; }
  .print-toolbar { display: none; }
  .poster { box-shadow: none; margin: 0; width: 210mm; height: 297mm; }
}

.chips { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Gastzugang */
.guest-modes { display: grid; gap: 8px; margin-bottom: 8px; }
.guest-admin .copy-row { margin-bottom: 8px; }
.code-stats { display: flex; align-items: center; gap: 22px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 10px 0; flex-wrap: wrap; }
.code-stats > div { display: flex; flex-direction: column; line-height: 1.2; }
.code-stats strong { font-size: 1.4rem; }
.code-create, .code-list { padding: 10px 0; }
.code-create summary, .code-list summary { cursor: pointer; }
.code-create form, .code-list .table-wrap { margin-top: 12px; }
.stack-sm > * + * { margin-top: 12px; }
.mono, .code-input { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; }
.code-input { font-size: 1.1rem; text-transform: uppercase; }
.guest-body .guest-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.guest-top-inner { display: flex; align-items: center; justify-content: center; min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.guest-top .brand-logo { height: 48px; max-width: 240px; }
.guest-main { max-width: 720px; padding-top: 28px; padding-bottom: 32px; }
.guest-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); margin-bottom: 18px; }
.guest-card h1 { font-size: 1.6rem; }
.guest-desc { margin: 14px 0 6px; }
.guest-section { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
@media (max-width: 640px) { .guest-card { padding: 18px; } .guest-main { padding-top: 16px; } }

/* Code-Druckbogen: 2 x 4 Karten pro A4-Seite */
.code-sheet { width: 210mm; min-height: 297mm; margin: 0 auto 24px; background: #fff; padding: 10mm; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); gap: 0; box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.code-card { display: flex; gap: 5mm; padding: 6mm; border: 1px dashed #b9b6ae; align-items: center; color: #181c21; break-inside: avoid; }
.code-card.is-used { opacity: .35; }
.code-card-qr { width: 30mm; flex: none; }
.code-card-qr svg { display: block; width: 100%; height: auto; }
.code-card-body { min-width: 0; display: flex; flex-direction: column; gap: 1.5mm; }
.code-card-head { display: flex; align-items: center; gap: 2mm; font-size: 7.5pt; color: #6b717a; font-weight: 600; }
.code-card-head .logo-img { height: 6mm; width: auto; max-width: 24mm; object-fit: contain; }
.code-card-title { font-weight: 700; font-size: 10.5pt; line-height: 1.2; }
.code-card-label { font-size: 9pt; color: #1f5e5c; font-weight: 650; }
.code-card-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15pt; font-weight: 700; letter-spacing: .08em; }
.code-card-hint { font-size: 7pt; color: #6b717a; line-height: 1.35; word-break: break-all; }
@media print {
  .code-sheet { box-shadow: none; margin: 0; width: 210mm; height: 297mm; page-break-after: always; }
  .code-sheet:last-of-type { page-break-after: auto; }
}

/* Logo-Fläche (bei hellen Logos auf hellem Grund bzw. dunklen auf dunklem Grund) */
.logo-img { display: block; }
.logo-img.plate-on-light.ctx-light, .logo-img.plate-on-light.ctx-auto,
.logo-img.plate-on-dark.ctx-dark { padding: 5px 10px; border-radius: 8px; }
.logo-img.plate-on-light.ctx-light, .logo-img.plate-on-light.ctx-auto { background: var(--plate-light); }
.logo-img.plate-on-dark.ctx-dark { background: var(--plate-dark); }
.code-card-head .logo-img.plate-on-light { padding: 1mm 2mm; border-radius: 1.5mm; }
.poster-logo.plate-on-light { padding: 3mm 5mm; border-radius: 3mm; }
@media (prefers-color-scheme: dark) {
  .logo-img.ctx-auto, .logo-img.plate-on-light.ctx-auto { background: transparent; padding: 0; }
  .logo-img.ctx-auto.plate-on-dark { background: var(--plate-dark); padding: 5px 10px; border-radius: 8px; }
}
@media print { .logo-img { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.logo-preview-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.logo-preview-pair .logo-preview { margin: 0; flex-direction: column; gap: 6px; }
.logo-preview-pair .logo-preview:not(.on-dark) { background: repeating-conic-gradient(#eeece8 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; border-color: #d3d0c8; }
.logo-preview-pair .logo-preview:not(.on-dark) small { color: #6b717a; }
.logo-preview.on-dark { background: #131517; border-color: #2c3034; }
.logo-preview .logo-img { max-height: 64px; max-width: 100%; height: auto; }
.logo-preview small { font-size: .75rem; }
.logo-preview.on-dark small { color: #9aa0a7; }