/* Dateipfad: assets/css/bi-abstimmung.css
   Abstimmung – Einladung, Seite ohne Event, Beispiele und Verwaltung (assets/js/bi-abstimmung.js).
   Nur Farb-Variablen des Designs (--primary-color, --bg-card, --text-main …) – passt zu «Schlicht» und «Hochzeit». Mobile zuerst. */

.ab-poll { padding: 4px 0 0; }
.ab-poll + .ab-poll { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--border-color, #e2e8f0); }
.ab-poll-head { margin-bottom: 12px; }
.ab-poll-title { margin: 0 0 8px; font-size: 1.12rem; font-weight: 800; color: var(--text-main, #0f172a); line-height: 1.3; overflow-wrap: anywhere; }
.ab-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ab-pills .zm-pill { white-space: normal; }
.ab-intro { margin: 10px 0 0; font-size: 0.88rem; color: var(--text-muted, #64748b); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.ab-hint { font-size: 0.8rem; color: var(--text-muted, #64748b); margin: 0 0 12px; display: flex; gap: 7px; align-items: center; }
.ab-hint i { color: var(--primary-color, #2771c8); }

/* Formular */
.ab-form { margin: 0; }
.ab-q { border: none; margin: 0 0 16px; padding: 0; min-width: 0; }
.ab-q legend { font-weight: 800; font-size: 0.95rem; color: var(--text-main, #0f172a); padding: 0; margin: 0 0 2px; line-height: 1.35; overflow-wrap: anywhere; }
.ab-q-n { color: var(--primary-color, #2771c8); }
.ab-q-hint { font-size: 0.74rem; color: var(--text-muted, #64748b); margin: 0 0 8px; }
.ab-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ab-opt { position: relative; display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid var(--border-color, #e2e8f0); border-radius: 14px; padding: 11px 13px; background: var(--bg-card, #ffffff);
          cursor: pointer; transition: border-color 0.15s, background 0.15s; min-height: 46px; box-sizing: border-box; }
.ab-opt:hover { border-color: var(--primary-color, #2771c8); }
.ab-opt input[type="radio"], .ab-opt input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ab-opt:focus-within { outline: 2px solid var(--primary-color, #2771c8); outline-offset: 2px; }
.ab-mark { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-color, #cbd5e1); flex-shrink: 0; margin-top: 1px; box-sizing: border-box; background: var(--bg-card, #ffffff); position: relative; }
.ab-opt input[type="checkbox"] ~ .ab-mark { border-radius: 6px; }
.ab-opt.is-on { border-color: var(--primary-color, #2771c8); background: var(--primary-bg-light, rgba(39, 113, 200, 0.07)); }
.ab-opt.is-on .ab-mark { border-color: var(--primary-color, #2771c8); background: var(--primary-color, #2771c8); }
.ab-opt.is-on .ab-mark::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ab-opt.is-on input[type="radio"] ~ .ab-mark::after { left: 4px; top: 4px; width: 8px; height: 8px; border: none; border-radius: 50%; background: #ffffff; transform: none; }
.ab-opt input:disabled ~ .ab-mark { opacity: 0.55; }
.ab-opt-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ab-opt-txt b { font-size: 0.9rem; color: var(--text-main, #0f172a); line-height: 1.35; overflow-wrap: anywhere; }
.ab-opt-txt small { font-size: 0.78rem; color: var(--text-muted, #64748b); line-height: 1.4; overflow-wrap: anywhere; }
.ab-opt .ab-other { margin-top: 6px; font-size: 16px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.ab-added { color: #b45309 !important; font-weight: 700; }
body.dark-mode .ab-added { color: #fbbf24 !important; }
.ab-add { margin-top: 8px; font-size: 0.84rem; }
.ab-consent { margin: 4px 0 12px; font-size: 0.82rem; }
.ab-consent a { color: var(--primary-color, #2771c8); font-weight: 700; }
.ab-withdraw { text-align: center; margin-top: 10px; font-size: 0.84rem; }

/* Ergebnis */
.ab-results { margin-top: 4px; }
.ab-rq { margin: 0 0 16px; }
.ab-rq-title { font-weight: 800; font-size: 0.92rem; color: var(--text-main, #0f172a); margin: 0 0 8px; overflow-wrap: anywhere; }
.ab-bar { margin: 0 0 10px; }
.ab-bar-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.86rem; margin-bottom: 4px; }
.ab-bar-lbl { min-width: 0; overflow-wrap: anywhere; color: var(--text-main, #0f172a); font-weight: 600; }
.ab-bar-n { flex-shrink: 0; font-weight: 800; color: var(--text-muted, #64748b); font-size: 0.8rem; white-space: nowrap; }
.ab-track { height: 10px; border-radius: 999px; background: var(--bg-body, #eef2f7); overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); }
.ab-track span { display: block; height: 100%; border-radius: 999px; background: var(--primary-color, #2771c8); opacity: 0.55; transition: width 0.5s ease; }
.ab-bar.is-best .ab-track span { opacity: 1; }
.ab-bar.is-best .ab-bar-lbl { font-weight: 800; }
.ab-bar.is-best .ab-bar-lbl i { color: #d97706; }
.ab-you { font-size: 0.68rem; font-weight: 800; color: var(--primary-color, #2771c8); background: var(--primary-bg-light, rgba(39, 113, 200, 0.1)); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.ab-names { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ab-names span { font-size: 0.72rem; background: var(--bg-body, #f1f5f9); border: 1px solid var(--border-color, #e2e8f0); color: var(--text-muted, #64748b); border-radius: 999px; padding: 2px 8px; }
.ab-others, .ab-comments { margin-top: 10px; background: var(--bg-body, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 10px 12px; }
.ab-others-t { font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted, #64748b); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; }
.ab-other-row, .ab-comment-row { font-size: 0.84rem; color: var(--text-main, #0f172a); padding: 4px 0; overflow-wrap: anywhere; }
.ab-comment-row { display: flex; flex-direction: column; gap: 1px; border-top: 1px dashed var(--border-color, #e2e8f0); }
.ab-comment-row:first-of-type { border-top: none; }
.ab-comment-row small { font-size: 0.74rem; color: var(--text-muted, #64748b); }

/* Verwaltung */
.ab-hpoll-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 10px; }
.ab-hpoll-head > div { flex: 1 1 220px; }
.ab-hpoll .ab-rq.is-compact { margin-bottom: 10px; }
.ab-hpoll .ab-rq.is-compact .ab-bar { margin-bottom: 6px; }
.ab-hacts { margin-top: 12px; }
.ab-hacts .btn { flex: 1 1 auto; justify-content: center; }
.ab-added-pill { font-size: 0.66rem; font-weight: 800; color: #b45309; background: rgba(245, 158, 11, 0.12); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.ab-prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-color, #e2e8f0); font-size: 0.86rem; }
.ab-prow:first-of-type { border-top: none; }
.ab-prow > span { min-width: 0; overflow-wrap: anywhere; }
.ab-prow .btn { flex-shrink: 0; padding: 6px 10px; }
.ab-more { grid-template-columns: minmax(0, 1fr); }

/* Editor */
.ab-tpls { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-tpl { border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #ffffff); color: var(--text-main, #0f172a); border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.ab-tpl i { color: var(--primary-color, #2771c8); }
.ab-tpl:hover { border-color: var(--primary-color, #2771c8); }
.ab-eq { border: 1px solid var(--border-color, #e2e8f0); border-radius: 16px; padding: 12px; margin: 0 0 10px; background: var(--bg-body, #f8fafc); }
.ab-eq-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.86rem; }
.ab-eq .form-control { font-size: 16px; box-sizing: border-box; width: 100%; }
.ab-eq-type { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.ab-eq-type .pht-seg { margin: 0; }
.ab-eq-type .pht-seg button { white-space: nowrap; }
.ab-maxp { display: inline-flex; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--text-muted, #64748b); font-weight: 700; }
.ab-maxp select { width: auto; padding: 6px 8px; font-size: 0.9rem; }
.ab-eopts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ab-eopt { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 6px; align-items: start; }
.ab-eopt-in { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ab-eopt .ab-descr { font-size: 0.86rem; padding: 6px 10px; }
.ab-eopt.is-added .form-control:first-child { border-color: rgba(245, 158, 11, 0.6); }
.ab-eopt .pht-opt-del { margin-top: 6px; }
@media (min-width: 640px) {
    .ab-opts.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}