/* Aussehen des Umfrage-Formulars.
 *
 * Wird von ZWEI Seiten geladen: von der Umfrage selbst (index.html) und vom
 * Editor der Verwaltung, der das Formular originalgetreu zeigt. Deshalb ist
 * alles unter `.survey` geschachtelt — sonst kollidierten `.btn`, `.tab` und
 * `.option` mit dem dunklen Rahmen der Verwaltung.
 *
 * Heller Intranet-Stil. Der Hintergrund bleibt transparent, damit die
 * einbettende Intranet-Seite durchscheint und das iFrame nicht als Kasten
 * auffällt. Bewusst kompakt: Die Elternseite kann die Höhe des iFrames nicht
 * nachregeln (Pirobase lässt kein JavaScript zu), der Inhalt muss also in eine
 * feste Höhe passen. Deshalb Reiter statt Endlosliste.
 */

.survey {
  --blue:#0064d2; --blue-dk:#00499c; --blue-soft:rgba(0,100,210,.07);
  --ink:#003057; --text:#1f2d3a; --muted:#5f6f7e; --line:#ccd6e0;
  --ok:#0a7d4b; --warn:#9a5b00; --err:#b3261e;

  color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.45;
  padding:2px 0 10px;
}
.survey *, .survey *::before, .survey *::after { box-sizing:border-box; }

/* ── Reiter ────────────────────────────────────────────────────────────── */
.survey .tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.survey .tab {
  background:#fff; border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:7px 16px; font-size:.85rem; font-family:inherit;
  cursor:pointer; transition:.12s; white-space:nowrap;
}
.survey .tab:hover { border-color:var(--blue); color:var(--blue); }
.survey .tab[aria-selected="true"] { background:var(--blue); border-color:var(--blue); color:#fff; }

.survey h2 { margin:0 0 12px; font-size:1.02rem; color:var(--ink); font-weight:600; }

/* ── Themenauswahl ─────────────────────────────────────────────────────── */
.survey .options { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }

.survey .sec-head { margin:12px 0 2px; }
.survey .sec-head:first-child { margin-top:0; }
.survey .sec-head b { display:block; font-size:.83rem; color:var(--ink); font-weight:600; }
.survey .sec-head span { display:block; font-size:.76rem; color:var(--muted); }

.survey .option {
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
  background:#fff; transition:.12s;
}
.survey .option:hover { border-color:var(--blue); }
.survey .option:has(input:checked) { border-color:var(--blue); background:var(--blue-soft); }
.survey .option:has(input:focus-visible) { outline:2px solid var(--blue); outline-offset:2px; }
.survey .option input { position:absolute; opacity:0; pointer-events:none; }

.survey .box {
  flex:0 0 auto; width:19px; height:19px; border-radius:4px;
  border:1.5px solid #9fb0c0; background:#fff;
  display:grid; place-items:center; color:transparent; font-size:.7rem;
  transition:.12s;
}
.survey .option:has(input:checked) .box { background:var(--blue); border-color:var(--blue); color:#fff; }

.survey .ico { flex:0 0 auto; font-size:1.05rem; line-height:1; }
.survey .option span.label { flex:1; font-size:.9rem; color:var(--ink); }

/* ── Freitextfeld ──────────────────────────────────────────────────────── */
.survey .comment-toggle {
  display:block; width:100%; text-align:left; background:none; cursor:pointer;
  border:1px dashed var(--line); border-radius:8px; padding:9px 12px;
  font-family:inherit; font-size:.85rem; color:var(--muted); transition:.12s;
  margin-bottom:14px;
}
.survey .comment-toggle:hover { border-color:var(--blue); color:var(--blue); }
.survey .comment-toggle[aria-expanded="true"] { margin-bottom:8px; }
.survey .comment-toggle .plus { color:var(--blue); font-weight:600; margin-right:2px; }
.survey .comment-field { margin-bottom:14px; }

/* ── Knöpfe ────────────────────────────────────────────────────────────── */
.survey .btn {
  background:var(--blue); color:#fff; border:1px solid var(--blue);
  border-radius:999px; padding:9px 22px; font-size:.87rem; font-weight:600;
  font-family:inherit; cursor:pointer; transition:.12s;
}
.survey .btn:hover:not(:disabled) { background:var(--blue-dk); border-color:var(--blue-dk); }
.survey .btn:disabled { opacity:.45; cursor:not-allowed; }
.survey .btn-ghost { background:#fff; color:var(--ink); border-color:var(--line); }
.survey .btn-ghost:hover { border-color:var(--blue); color:var(--blue); background:#fff; }
.survey .row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.survey .hint { font-size:.79rem; color:var(--muted); }

/* ── Ergebnisbalken ────────────────────────────────────────────────────── */
.survey .bars { display:flex; flex-direction:column; gap:11px; }
.survey .bar-head { display:flex; justify-content:space-between; align-items:baseline;
                    gap:10px; margin-bottom:4px; }
.survey .bar-head .name { font-size:.87rem; color:var(--ink); }
.survey .bar-head .num  { font-size:.79rem; color:var(--muted); white-space:nowrap;
                          font-variant-numeric:tabular-nums; }
.survey .track { height:8px; background:#e4eaf0; border-radius:999px; overflow:hidden; }
.survey .fill  { height:100%; width:0; background:var(--blue); border-radius:999px;
                 transition:width .5s cubic-bezier(.4,0,.2,1); }
.survey .total { margin-top:14px; padding-top:11px; border-top:1px solid var(--line);
                 display:flex; justify-content:space-between; align-items:center;
                 gap:10px; flex-wrap:wrap; font-size:.8rem; color:var(--muted); }

/* ── Tipps ─────────────────────────────────────────────────────────────── */
.survey .field { margin-bottom:10px; }
.survey .field label { display:block; font-size:.79rem; color:var(--muted); margin-bottom:4px; }
.survey .inp {
  background:#fff; color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:8px 11px; font-family:inherit; font-size:.87rem;
}
.survey .field textarea.inp { width:100%; resize:vertical; }
.survey .inp:focus { outline:none; border-color:var(--blue); }

.survey .tip-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.survey .tip { border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#fff; }
.survey .tip h4 { margin:0 0 4px; font-size:.87rem; color:var(--ink); }
.survey .tip p  { margin:0; font-size:.85rem; white-space:pre-wrap; overflow-wrap:anywhere; }
.survey .tip .meta { margin-top:6px; font-size:.73rem; color:var(--muted); }
.survey .empty { color:var(--muted); font-size:.83rem; }

/* ── Meldungen ─────────────────────────────────────────────────────────── */
.survey .msg { border-radius:8px; padding:9px 12px; font-size:.83rem; margin-bottom:12px;
               border:1px solid transparent; }
.survey .msg.ok   { background:#e8f5ee; border-color:#b6ddc7; color:var(--ok); }
.survey .msg.warn { background:#fdf3e2; border-color:#efd6a8; color:var(--warn); }
.survey .msg.err  { background:#fdeceb; border-color:#f2c2be; color:var(--err); }

.survey [hidden] { display:none !important; }