/* survey.css — ausgelagert aus index.html (#26, Token-/Wartbarkeit). Stil der Survey-Verwaltung. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--slate-50, #f4f6f8); color: var(--text-body, #1b2733); font: var(--text-base, 15px/1.5 sans-serif); }
.top { background: var(--surface, #fff); border-bottom: 1px solid var(--border, #dde3e9); }
.top .in { max-width: 1200px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.top img { height: 26px; } .top .sub { color: var(--text-muted, #5b6b7a); font: var(--text-small, 13px sans-serif); }
.top .sp { flex: 1; } .top a { color: var(--text-muted, #5b6b7a); text-decoration: none; font: var(--text-small, 13px sans-serif); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 20px; }
h1 { font: var(--fw-bold, 700) var(--fs-2xl, 20px)/1.2 var(--font-sans, sans-serif); color: var(--text-strong, #1b3a5b); margin: 4px 0 2px; }
.lead { color: var(--text-muted, #5b6b7a); margin: 0 0 18px; }
.card { background: var(--surface, #fff); border: 1px solid var(--border, #dde3e9); border-radius: var(--radius-md, 6px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05)); padding: 18px 20px; margin-bottom: 16px; }
.card h2 { font: var(--fw-semibold, 600) var(--fs-lg, 18px)/1.2 var(--font-sans, sans-serif); color: var(--text-strong, #102030); margin: 0 0 4px; }
label { display: block; font: var(--text-small, 13px sans-serif); color: var(--text-muted, #5b6b7a); margin-bottom: 5px; }
input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border, #dde3e9); border-radius: var(--radius-sm, 4px); font: inherit; background: var(--surface, #fff); color: var(--text-body, inherit); }
/* iOS-Fix (Survey-Pro): Eingaben >=16px verhindern den Auto-Zoom; KEIN user-scalable=no. */
input, select, textarea { font-size: 16px; }
input, select, textarea, .btn { min-height: 44px; }
/* iOS Safe-Area: Topbar unter der Notch, Inhalt über dem Home-Indicator. */
.top { padding-top: env(safe-area-inset-top); }
.wrap { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
textarea { resize: vertical; min-height: 84px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.check { display: flex; align-items: center; gap: 7px; } .check input { width: auto; }
/* Primär-CTA in Marken-Petrol (Akzent = Aktion) — nicht generisches Navy. */
.btn { background: var(--action-accent, #2E7D8A); color: #fff; border: 0; border-radius: var(--radius-sm, 4px); padding: 9px 16px; font: var(--fw-semibold,600) var(--fs-sm,14px) var(--font-sans,sans-serif); cursor: pointer; }
.btn.ghost { background: transparent; color: var(--text-strong, #102030); border: 1px solid var(--border, #dde3e9); }
.btn.danger { color: var(--critical, #C62828); border-color: var(--critical-bd, #f0c4c4); }
.btn:hover { filter: brightness(1.06); }
.btn:focus-visible { outline: 2px solid var(--focus-ring, #3E8E9B); outline-offset: 1px; }
.req { color: var(--critical, #C62828); font-weight: 700; }
.hint { color: var(--text-muted, #5b6b7a); font: var(--text-small, 13px sans-serif); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font: var(--fw-semibold,600) var(--fs-2xs,11px) sans-serif; }
.badge.aktiv { background: var(--ok-bg, #e3f3e8); color: var(--ok, #1d6b3a); } .badge.beendet { background: var(--surface-2, #eef2f6); color: var(--text-muted, #5b6b7a); }
.stats { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0; }
.stats .ms { background: var(--slate-50, #f4f6f8); border-radius: var(--radius-sm,4px); padding: 8px 12px; min-width: 120px; }
.stats .ms b { display: block; font: var(--fw-bold,700) var(--fs-xl,20px)/1.1 var(--font-sans,sans-serif); color: var(--text-strong,#1b3a5b); }
.stats .ms small { color: var(--text-subtle,#8090a0); font-size: 12px; }
/* Frage als 2-zeilige Karte: Zeile 1 Kern (Frage/Typ/Pflicht/Aktionen), Zeile 2 Detail (Optionen/Erklärung). */
.uq { border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); padding: 12px 14px; margin-bottom: 10px; background: var(--surface,#fff); }
.uq-r1, .uq-r2 { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.uq-r2 { margin-top: 8px; }
.uq-f { flex: 1; min-width: 150px; }
.uq-f-label { flex: 3; }
.uq-f-typ { flex: 1; min-width: 150px; }
.uq-f-req { flex: 0 0 auto; align-self: center; white-space: nowrap; }
.uq-acts { display: flex; gap: 4px; margin-left: auto; }
.uq-acts .btn { padding: 6px 10px; }
.uq-adv-wrap { margin-top: 8px; }
.uq-adv-toggle { background: none; border: 0; color: var(--text-link,#266875); font: var(--text-small,13px sans-serif); cursor: pointer; padding: 2px 0; }
.uq-adv-toggle:hover { text-decoration: underline; }
.uq-adv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.uq-adv.hidden { display: none; }
.uq.dragging { opacity: .45; }
.uq.drop-before { box-shadow: 0 -3px 0 0 var(--navy-500,#1b3a5b); }
.uq.drop-after { box-shadow: 0 3px 0 0 var(--navy-500,#1b3a5b); }
.uq-grip { align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 22px; padding: 0 2px; color: var(--text-subtle,#8090a0); font-size: 18px; line-height: 1; cursor: grab; user-select: none; border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-sm,4px); background: var(--surface,#fff); touch-action: none; }
.uq-grip:hover { color: var(--text-strong,#1b3a5b); background: var(--bg,#f5f7fa); }
.uq-grip:active { cursor: grabbing; }
/* ===== Survey123-Stil: 3 Zonen — Canvas (links) · Eigenschaften (Mitte) · Live-Vorschau (rechts) ===== */
.u-builder { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,320px) minmax(300px,340px); gap: 16px; align-items: start; }
.u-canvas-col { min-width: 0; }
.u-inspector-col { min-width: 0; }
.u-preview-col { min-width: 0; }
/* Live-Vorschau als „Gerät": Markenkopf + gerendertes Teilnehmer-Formular, aktualisiert beim Tippen. */
.u-device { position: sticky; top: 12px; border: 1px solid var(--border,#dde3e9); border-radius: 12px; overflow: hidden; background: var(--surface,#fff); box-shadow: 0 6px 20px rgba(16,32,48,.10); max-width: 400px; margin-left: auto; margin-right: auto; transition: max-width .15s; }
/* #24: Geraete-Umschalter — Default Handy-Breite (mobile-first), Desktop = volle Spaltenbreite. */
.u-device.dev-desktop { max-width: none; }
.u-dev-toggle { margin-left: auto; display: inline-flex; gap: 3px; }
.u-dev-toggle button { border: 1px solid var(--border,#dde3e9); background: var(--surface,#fff); border-radius: 5px; padding: 1px 7px; cursor: pointer; font-size: 13px; line-height: 1.4; color: var(--text-muted,#5b6b7a); }
.u-dev-toggle button.active { background: var(--action-accent,#2E7D8A); color: #fff; border-color: var(--action-accent,#2E7D8A); }
.u-device-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--slate-50,#eef2f6); border-bottom: 1px solid var(--border,#dde3e9);
font: var(--fw-semibold,600) var(--fs-2xs,11px) var(--font-sans,sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted,#5b6b7a); }
.u-device-bar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--action-accent,#2E7D8A); }
.u-device-screen { max-height: calc(100vh - 92px); overflow: auto; background: var(--bg-app,#f5f7fa); }
.u-device-head { background: linear-gradient(135deg, var(--navy-500,#1b3a5b), var(--navy-600,#152e49)); color: #fff; padding: 16px; }
.u-device-head b { display: block; font: var(--fw-bold,700) var(--fs-lg,17px)/1.25 var(--font-sans,sans-serif); }
.u-device-head .h { margin: 5px 0 0; font-size: 13px; color: rgba(255,255,255,.82); }
#u_lp_body { padding: 14px 16px 18px; }
#u_lp_body .pv-field:last-of-type { margin-bottom: 14px; }
#u_inspector { position: sticky; top: 12px; border: 1px solid var(--border,#dde3e9); border-radius: 12px; background: var(--slate-50,#f9fafb); padding: 0 14px 14px; overflow: hidden; }
/* "Eigenschaften"-Kopf als Panel-Leiste — spiegelt die Live-Vorschau-Leiste (Zonen wirken als Paar). */
#u_inspector > .blockh { margin: 0 -14px 12px; padding: 9px 14px; background: var(--surface,#fff); border-bottom: 1px solid var(--border,#dde3e9);
font: var(--fw-semibold,600) var(--fs-sm,14px) var(--font-sans,sans-serif); color: var(--text-strong,#102030); }
#u_insp_empty { padding-top: 2px; }
#u_insp_empty { margin: 0; }
/* Im Inspektor stapeln die Frage-Felder vertikal (schmale Spalte). */
.u-inspector-col .uq { border: 0; padding: 0; margin: 0; background: transparent; }
.u-inspector-col .uq-r1, .u-inspector-col .uq-r2 { flex-direction: column; align-items: stretch; gap: 12px; }
.u-inspector-col .uq-r2 { margin-top: 12px; }
.u-inspector-col .uq-f, .u-inspector-col .uq-f-typ, .u-inspector-col .uq-f-label { flex: 1 1 auto; min-width: 0; width: 100%; }
.u-inspector-col .uq-f-req { align-self: flex-start; }
.u-inspector-col .uq-acts { display: none; } /* Sortieren/Löschen sitzt am Canvas, nicht im Inspektor */
/* nur die ausgewählte Frage-Karte im Inspektor zeigen */
#u_questions .uq { display: none; }
#u_questions .uq.is-active { display: block; }
/* Antwort-Vorlagen (#9): Schnell-Auswahl fertiger Optionslisten */
.uq-preset-wrap { margin-top: 6px; }
.uq-preset-wrap.hidden { display: none; }
.uq-preset { width: 100%; }
/* Canvas-Karten = Frageliste mit Antwortfeld-Vorschau, klickbar zum Auswählen */
#u_canvas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.qcard { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border,#dde3e9); border-left: 3px solid transparent; border-radius: var(--radius-md,6px); background: var(--surface,#fff); padding: 10px 12px; cursor: pointer; }
.qcard:hover { border-color: var(--text-strong,#1b3a5b); }
.qcard.is-sel { border-color: var(--text-strong,#1b3a5b); border-left-color: var(--action-accent,#2E7D8A); box-shadow: 0 2px 8px rgba(27,58,91,.08); }
.qcard.dragging { opacity: .45; }
.qcard.drop-before { box-shadow: 0 -3px 0 0 var(--navy-500,#1b3a5b); }
.qcard.drop-after { box-shadow: 0 3px 0 0 var(--navy-500,#1b3a5b); }
.qc-grip { color: var(--text-subtle,#8090a0); font-size: 16px; line-height: 1.4; cursor: grab; user-select: none; touch-action: none; padding: 2px 0; }
.qc-grip:active { cursor: grabbing; }
.qc-main { flex: 1; min-width: 0; }
.qc-head { display: flex; align-items: baseline; gap: 8px; }
.qc-num { color: var(--text-subtle,#8090a0); font: var(--fw-bold,700) var(--fs-sm,13px) var(--font-sans,sans-serif); }
.qc-label { font: var(--fw-semibold,600) var(--fs-md,15px) var(--font-sans,sans-serif); color: var(--text-strong,#102030); overflow: hidden; text-overflow: ellipsis; }
.qc-label.empty { color: var(--text-subtle,#8090a0); font-style: italic; font-weight: 400; }
.qc-req { color: var(--critical,#C62828); font-weight: 700; }
.qc-typ { margin-left: auto; flex: 0 0 auto; background: var(--slate-50,#eef2f6); color: var(--text-muted,#5b6b7a); border-radius: 999px; padding: 1px 9px; font: var(--fw-semibold,600) var(--fs-2xs,11px) sans-serif; }
.qc-prev { margin-top: 7px; pointer-events: none; }
.qc-prev input, .qc-prev select, .qc-prev textarea { background: var(--slate-50,#f4f6f8); }
.qc-prev .pv-opt { color: var(--text-muted,#5b6b7a); }
.qc-del { flex: 0 0 auto; align-self: flex-start; background: none; border: 0; color: var(--text-subtle,#8090a0); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.qc-del:hover { color: var(--critical,#C62828); background: var(--critical-bd,#f7e4e4); }
/* Schmaler: Vorschau klappt unter Canvas+Eigenschaften (volle Breite, nicht mehr klebend). */
@media (max-width: 1100px) { .u-builder { grid-template-columns: minmax(0,1fr) minmax(280px,320px); } .u-preview-col { grid-column: 1 / -1; } .u-device { position: static; } .u-device-screen { max-height: 70vh; } }
@media (max-width: 820px) { .u-builder { grid-template-columns: 1fr; } #u_inspector { position: static; } }
.hidden { display: none; }
/* Ergebnis-Dashboard */
.charts { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 14px; margin: 10px 0; }
.qchart { border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-sm,4px); padding: 10px 12px; background: var(--surface,#fff); }
.qchart .qh { font: var(--fw-semibold,600) var(--fs-sm,14px) var(--font-sans,sans-serif); color: var(--text-strong,#102030); margin-bottom: 8px; }
.bar { display: flex; align-items: center; gap: 8px; margin: 4px 0; font: var(--fs-sm,13px) var(--font-sans,sans-serif); }
.bar .blbl { flex: 0 0 38%; color: var(--text-body,#1b2733); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .btrk { flex: 1; height: 14px; background: var(--slate-50,#eef2f6); border-radius: 7px; overflow: hidden; }
.bar .bfil { display: block; width: 0; height: 100%; background: var(--navy-500,#1b3a5b); border-radius: 7px; } /* Breite dynamisch per CSSOM (data-w) gesetzt */
.bar .bval { flex: 0 0 28px; text-align: right; color: var(--text-muted,#5b6b7a); }
.nstat { display: flex; gap: 14px; flex-wrap: wrap; }
.nstat span { display: flex; flex-direction: column; }
.nstat b { font: var(--fw-bold,700) var(--fs-lg,16px) var(--font-sans,sans-serif); color: var(--text-strong,#1b3a5b); }
.nstat span { font-size: 11px; color: var(--text-subtle,#8090a0); }
.rtab { border-collapse: collapse; width: 100%; font: var(--fs-sm,13px) var(--font-sans,sans-serif); margin-top: 8px; }
.rtab th, .rtab td { border: 1px solid var(--border,#dde3e9); padding: 5px 8px; text-align: left; vertical-align: top; }
.rtab th { background: var(--slate-50,#f4f6f8); font-weight: 600; }
/* Reiter-Navigation */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--border,#dde3e9); margin: 8px 0 16px; }
/* „Mehr"-Tab + Backdrop nur mobil (Bottom-Sheet); auf Desktop stehen die Aktionen im header.top. */
#tabnav .tab-more, #u_moreback { display: none; }
.tab { appearance: none; background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
padding: 10px 16px; font: var(--fw-semibold,600) var(--fs-md,15px) var(--font-sans,sans-serif); color: var(--text-muted,#5b6b7a);
cursor: pointer; border-radius: 8px 8px 0 0; }
.tab:hover { background: var(--slate-50,#f4f6f8); color: var(--text-strong,#102030); }
.tab.is-active { color: var(--text-strong,#1b3a5b); border-bottom-color: var(--text-strong,#1b3a5b); }
.tabpanel { display: none; }
.tabpanel.is-active { display: block; }
/* Vorlagen-Schnellwahl: kompakte, gleich breite Karten (Assistent-Stil), kein Vollbreiten-Riese. */
.choose-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 10px; margin: 12px 0 2px; align-items: stretch; }
.choose-card { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); background: var(--surface,#fff);
padding: 11px 13px; cursor: pointer; font: inherit; transition: border-color .12s, box-shadow .12s; }
.choose-card:hover { border-color: var(--action-accent,#2E7D8A); box-shadow: 0 2px 8px rgba(27,58,91,.08); }
.choose-card b { display: block; font-size: var(--fs-sm,14px); color: var(--text-strong,#102030); margin-bottom: 2px; }
.choose-card span { font-size: var(--fs-2xs,12px); color: var(--text-muted,#5b6b7a); line-height: 1.35; }
/* nix.map#279: "Leeres Formular" ist keine Vorlage, sondern der neutrale Ausweg -- optisch abgesetzt (gestrichelt) und ans Rasterende gestellt. */
.choose-card--blank { border-style: dashed; background: transparent; order: 1; }
.choose-card--blank:hover { border-color: var(--text-muted,#5b6b7a); box-shadow: none; }
.choose-card--blank b, .choose-card--blank span { color: var(--text-muted,#5b6b7a); }
/* Editor-Bloecke */
.fieldblock { border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); padding: 14px 16px; margin: 0 0 14px; background: var(--surface,#fff); }
.fieldblock > .blockh { margin: 0 0 10px; font: var(--fw-semibold,600) var(--fs-md,16px) var(--font-sans,sans-serif); color: var(--text-strong,#102030); }
/* Erfolgs-/Hinweis-Toast (kurze Rueckmeldung nach dem Anlegen/Speichern) */
#toastwrap { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--navy-500,#1b3a5b); color: #fff; padding: 11px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(16,32,48,.22);
font: var(--fw-semibold,600) var(--fs-sm,14px) var(--font-sans,sans-serif); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: var(--critical,#C62828); }
/* Native Datums-/Zeit-Felder an die uebrigen Inputs angleichen (tabellarische Ziffern). */
input[type=date], input[type=datetime-local] { font-variant-numeric: tabular-nums; }
/* Sticky-Aktionsleiste: "Umfrage anlegen" bleibt beim Scrollen immer erreichbar. */
#u_actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 14px -20px -18px; padding: 12px 20px; background: var(--surface, #fff); border-top: 1px solid var(--border, #dde3e9);
box-shadow: 0 -2px 8px rgba(13,28,42,.06); border-radius: 0 0 var(--radius-md, 6px) var(--radius-md, 6px); }
/* Mobil: Formularzeilen sauber stapeln statt unkontrolliert umzubrechen (vorher keine Media-Query). */
@media (max-width: 640px) {
.row { flex-direction: column; align-items: stretch; }
.row > div { min-width: 0 !important; width: 100%; }
.uq-r1, .uq-r2 { flex-direction: column; align-items: stretch; }
.uq-f { min-width: 0; width: 100%; }
.uq-acts { margin-left: 0; }
.uq-grip { align-self: flex-start; }
/* Finger-Bedienung: Sekundaer-Controls (Tabs, Feld-Palette, Geraete-Umschalter) auf >=44px.
Die Formular-Inputs/.btn sind bereits 44px (oben); hier die kleineren Schaltflaechen nachziehen. */
.tab { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
/* !important schlaegt die spaeter im File stehende Reset-Regel .qpal{min-height:0}. */
.qpal { min-height: 44px !important; padding-top: 11px; padding-bottom: 11px; }
.u-dev-toggle button { min-height: 44px; padding: 8px 12px; }
/* Kleine Builder-Schaltflaechen (Frage loeschen ×, Bedingungs-Umschalter) fuer Finger vergroessern. */
.qc-del { min-width: 44px; min-height: 44px; padding: 6px 10px; }
.uq-adv-toggle { min-height: 44px; padding: 10px 0; }
body { font-size: 15px; } /* etwas groesser fuers Handy-Lesen */
/* UI-Redesign P2 (Survey): die 4 Bereichs-Tabs als Bottom-Bar (maps.me/Google-News-Prinzip).
Reine CSS-Umpositionierung — die data-tab-Handler + der Panel-Wechsel bleiben unveraendert.
Original-Textlabel via font-size:0 ausgeblendet, Icon (::before) + Kurzlabel (::after) gesetzt;
der DOM-Text bleibt fuer Screenreader erhalten. */
#tabnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; margin: 0; gap: 0;
flex-wrap: nowrap; border-bottom: none; border-top: 1px solid var(--navy-700, #223a52);
background: var(--navy-600, #1b3a5b); padding-bottom: env(safe-area-inset-bottom); }
#tabnav .tab { flex: 1 1 0; min-height: 56px; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 3px; margin: 0; padding: 6px 2px;
border: none; color: var(--navy-100, #b9c6d3); font-size: 0; }
#tabnav .tab::before { font-size: 19px; line-height: 1; }
#tabnav .tab::after { font-size: 10px; line-height: 1.1; font-weight: 600; }
#tabnav .tab[data-tab="neu"]::before { content: "＋"; } #tabnav .tab[data-tab="neu"]::after { content: "Erstellen"; }
#tabnav .tab[data-tab="formulare"]::before { content: "▤"; } #tabnav .tab[data-tab="formulare"]::after { content: "Formulare"; }
#tabnav .tab[data-tab="vorlagen"]::before { content: "▦"; } #tabnav .tab[data-tab="vorlagen"]::after { content: "Vorlagen"; }
#tabnav .tab[data-tab="live"]::before { content: "◉"; } #tabnav .tab[data-tab="live"]::after { content: "Live"; }
#tabnav .tab[data-tab="feedback"]::before { content: "✉"; } #tabnav .tab[data-tab="feedback"]::after { content: "Feedback"; }
#tabnav .tab.is-active { color: #fff; background: none; border-bottom: none; }
#tabnav .tab.is-active::before { color: var(--petrol-300, #7fd1c9); } /* theme-ok: fixe helle Akzentfarbe auf fixer Navy-Bar (wie Viewer-Bottom-Nav) */
/* „Mehr"-Tab (nur mobil): oeffnet header.top als Bottom-Sheet mit den Sekundaer-Aktionen. */
#tabnav .tab-more { display: flex; }
#tabnav .tab-more::before { content: "⋯"; }
#tabnav .tab-more::after { content: "Mehr"; }
/* header.top wird auf dem Handy zum Bottom-Sheet (statt gedraengte Zeile ganz oben). Die App-Navi
steht bereits im #geolage-topstrip darueber; hier NUR die Sekundaer-Aktionen als Liste. */
header.top { position: fixed; left: 0; right: 0; bottom: calc(56px + env(safe-area-inset-bottom));
z-index: 1001; background: var(--surface, #fff); border-top: 1px solid var(--border, #dde3e9);
border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; box-shadow: 0 -8px 28px rgba(13,28,42,.22);
transform: translateY(calc(100% + 72px)); transition: transform var(--dur-base, .25s) ease;
max-height: 72vh; overflow-y: auto; }
header.top.sheet-open { transform: translateY(0); }
header.top::before { content: "Mehr"; display: block; text-align: center; position: sticky; top: 0;
background: inherit; color: var(--text-muted, #64748b); padding: 14px 0 10px;
font: var(--fw-semibold, 600) 13px/1 var(--font-sans, sans-serif); letter-spacing: .02em; }
header.top .in { flex-direction: column; align-items: stretch; gap: 2px; padding: 0 10px 12px; }
/* Redundantes im Sheet weg (Brand/Titel/App-Nav stehen oben im Topstrip). */
header.top .in > a.flex, header.top .in .sub, header.top .in .sp, header.top .in #geolage-appnav { display: none; }
/* Aktions-Links als klare Listenzeilen (>=48px Tap-Ziel). */
header.top .in > a:not(.flex), header.top .in a.gl-account {
min-height: 48px; display: flex; align-items: center; padding: 0 14px; border-radius: 10px;
color: var(--text-strong, #102030); font-weight: 600; text-decoration: none; }
header.top .in > a:not(.flex):active, header.top .in a.gl-account:active { background: var(--slate-50, #f1f5f9); }
/* display:block hier noetig: die Basis-Regel (#u_moreback{display:none}) gilt immer und wird
sonst mobil nie ueberschrieben -> Backdrop bliebe unsichtbar (kein Dimmen, kein Tap-to-close). */
#u_moreback { display: block; position: fixed; inset: 0; bottom: calc(56px + env(safe-area-inset-bottom));
z-index: 1000; background: rgba(11, 22, 34, .4); }
#u_moreback[hidden] { display: none; }
/* Seiteninhalt + sticky Actionbar ueber die Bottom-Bar heben. */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
#u_actionbar { bottom: calc(56px + env(safe-area-inset-bottom)); }
/* Anmelden-Knopf (Demo-Sandbox) von der Tab-Leiste weg nach oben-rechts (unter den Header). */
.demo-login-fab { top: calc(76px + env(safe-area-inset-top)) !important; right: 12px !important;
bottom: auto !important; left: auto !important; transform: none !important; }
/* Hell/Dunkel-Umschalter (#themeToggle aus /vendor/theme.js, inline bottom:14px) ueber die
Bottom-Nav heben — sonst ueberdeckt der runde Knopf den "Feedback"-Tab (analog Viewer). */
#themeToggle { bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
}
/* Vorschau-Modal: zeigt das Formular so, wie Teilnehmer es ausfüllen (read-only). */
.pv-overlay { position: fixed; inset: 0; background: var(--surface-overlay, rgba(8,18,28,.55)); z-index: 1000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.pv-overlay.hidden { display: none; }
.pv-modal { background: var(--bg-app, #f5f7fa); border: 1px solid var(--border, #dde3e9); border-radius: var(--radius-md, 6px); max-width: 640px; width: 100%; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.2)); }
.pv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border, #dde3e9); position: sticky; top: 0; background: var(--surface, #fff); border-radius: var(--radius-md, 6px) var(--radius-md, 6px) 0 0; }
.pv-body { padding: 18px; }
.pv-field { margin-bottom: 14px; }
.pv-field > label.q { display: block; font-weight: 600; color: var(--text-strong, #102030); margin-bottom: 4px; }
.pv-field .h { font: var(--text-small, 13px sans-serif); color: var(--text-muted, #5b6b7a); margin: 0 0 6px; }
.pv-opt { display: flex; align-items: center; gap: 7px; margin: 3px 0; font-weight: 400; }
.pv-opt input { width: auto; }
/* Demo-Modus-Banner (No-Login-Sandbox, #7) — "nur gucken" deutlich machen. */
.demo-banner { background: var(--navy-50, #eef4fb); border: 1px solid var(--navy-200, #c3d6ec); border-left: 4px solid var(--action-accent, #2E7D8A);
border-radius: var(--radius-md, 6px); padding: 11px 14px; margin: 0 0 16px; color: var(--text-strong, #102030); font: var(--text-small, 13px sans-serif); line-height: 1.5; }
.demo-banner a { color: var(--action-accent, #2E7D8A); font-weight: 600; text-decoration: none; white-space: nowrap; }
.demo-banner a:hover { text-decoration: underline; }
/* ===== Redesign v2 (#36-Vorlage Survey123): Fragetyp-Palette · Einstellungs-Panel · Footer ===== */
/* Fragetyp-Palette: Kacheln zum direkten Hinzufügen eines Fragetyps (statt nur "+ Frage"). */
.qpalette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 12px; }
.qpalette .ph { grid-column: 1 / -1; font: var(--fw-bold,700) var(--fs-2xs,11px) var(--font-sans,sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle,#8090a0); margin: 0 0 2px; }
.qpal { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); background: var(--surface,#fff); cursor: pointer; text-align: left; font: var(--fw-semibold,600) var(--fs-2xs,12px) var(--font-sans,sans-serif); color: var(--text-strong,#102030); transition: border-color .12s, background .12s; min-height: 0; }
.qpal:hover { border-color: var(--action-accent,#2E7D8A); background: var(--petrol-50,#eff6f7); }
.qpal .g { width: 24px; height: 24px; flex: none; border-radius: 5px; background: var(--slate-50,#eef2f6); color: var(--action-accent,#2E7D8A); display: inline-flex; align-items: center; justify-content: center; font: var(--fw-bold,700) 13px/1 var(--font-mono,monospace); }
/* Einstellungs-Panel: Beschreibung/Ort einklappbar gruppieren statt langem Stapel. */
details.u-settings { border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); background: var(--surface,#fff); margin: 0 0 14px; overflow: hidden; box-shadow: var(--shadow-sm,0 1px 2px rgba(0,0,0,.05)); }
details.u-settings > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; user-select: none; }
details.u-settings > summary::-webkit-details-marker { display: none; }
details.u-settings > summary .si { width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm,5px); background: var(--petrol-50,#eff6f7); color: var(--action-accent,#2E7D8A); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
details.u-settings > summary .st { flex: 1; min-width: 0; }
details.u-settings > summary .st b { display: block; font: var(--fw-semibold,600) var(--fs-md,15px) var(--font-sans,sans-serif); color: var(--text-strong,#102030); }
details.u-settings > summary .st small { display: block; font: var(--text-small,13px sans-serif); color: var(--text-muted,#5b6b7a); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.u-settings > summary .sx { color: var(--text-subtle,#8090a0); transition: transform .16s; flex: none; }
details.u-settings[open] > summary .sx { transform: rotate(180deg); }
details.u-settings > .u-settings-body { padding: 2px 16px 16px; border-top: 1px solid var(--divider,#eef1f4); }
details.u-settings .fieldblock { border: 0; padding: 14px 0 0; margin: 0; box-shadow: none; background: transparent; }
details.u-settings .fieldblock + .fieldblock { border-top: 1px solid var(--divider,#eef1f4); }
/* App-Footer: Version · Stand · geolage.de — auf allen Reitern. */
.app-footer { max-width: 1200px; margin: 8px auto 0; padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border-top: 1px solid var(--border,#dde3e9); color: var(--text-muted,#5b6b7a); font: var(--text-small,13px sans-serif); }
.app-footer .ft-brand { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-body,#1b2733); }
.app-footer .ft-sep { color: var(--border-strong,#c2ccd6); }
.app-footer .ft-ver { font-family: var(--font-mono,monospace); }
.app-footer .ft-sp { flex: 1; }
.app-footer a { color: var(--text-link,#266875); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.app-footer a:hover { text-decoration: underline; }
/* #152: aus inline style= extrahiert (CSP: kein style-src 'unsafe-inline' noetig) */
.flex { display: flex; }
.display-contents { display: contents; }
.fw-400 { font-weight: 400; }
.fw-600 { font-weight: 600; }
.items-end { align-items: flex-end; }
.mt-4-only { margin: 4px 0 0; }
.mt-2-only { margin: 2px 0 0; }
.mb-10 { margin: 0 0 10px; }
.my-8 { margin: 8px 0; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mw-90 { min-width: 90px; }
.mw-150 { min-width: 150px; }
.mw-160 { min-width: 160px; }
.col-flex1-110 { flex: 1; min-width: 110px; }
.col-flex1-180 { flex: 1; min-width: 180px; }
.col-flex1-200 { flex: 1; min-width: 200px; }
.col-flex2-200 { flex: 2; min-width: 200px; }
.col-flex2-220 { flex: 2; min-width: 220px; }
.u-tplsave-actions { margin: 8px 0 2px; }
.u-checkin-opts { margin: 4px 0 0 22px; }
.u-map { height: 260px; border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); overflow: hidden; }
/* Aus inline style= der JS-HTML-Builder extrahiert (survey.templates/auswertung/ui/builder.js).
Nur Design-Tokens, kein rohes Palette-Token als Textfarbe / kein #fff als Flaeche. */
.mb-6 { margin: 0 0 6px; }
.mb-12 { margin: 0 0 12px; }
.mt-4-0 { margin: 4px 0 0; }
.u-center { text-align: center; }
.u-link-break { word-break: break-all; }
/* System-Vorlagen-Buttons im Vorlagen-Reiter (Abstand zwischen den Kacheln). */
.u-tpluse-btn { margin: 2px 4px 2px 0; }
/* Foto-Antworten in der Auswertung: Vorschau-Raster + einzelne Thumbnails. */
.u-photo-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.u-photo-thumb { height: 64px; width: 64px; object-fit: cover; border-radius: var(--radius-md,6px); border: 1px solid var(--border,#dde3e9); }
/* Loeschen-Button je Antwortzeile (nutzt zusaetzlich .btn.ghost.danger). */
.u-respdel { padding: 2px 8px; }
/* QR-Block (Teilnahme-Link) in der Formular-Liste. */
.u-qr-block { margin: 2px 0 8px; }
.u-qr-img { border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); vertical-align: middle; }
/* "Auf dem Handy ansehen"-Modal: Titel + Hinweis. */
.u-mv-title { margin: 0 0 6px; color: var(--text-strong,#102030); }
.u-mv-hint { margin: 0 0 12px; }
.u-pv-hint { margin: 0 0 16px; }
/* Formular-Karte in der Auswertung: Kopf-Ueberschrift kleiner. */
.u-card-h2 { font-size: var(--fs-lg,16px); }
/* Antwort-Standort-Karte (eingebettet je Umfrage). */
.u-smap { height: 300px; margin-top: 8px; border: 1px solid var(--border,#dde3e9); border-radius: var(--radius-md,6px); overflow: hidden; }
.u-map-err { padding: 12px; }
/* Offene Rueckmeldungen (Feedback-Reiter): kompakte Karte. */
.u-fb-card { margin: 6px 0; padding: 10px 12px; }
/* Vorschau-Optionen (rating/likert): horizontal bzw. gestapelt — ueberschreibt das .pv-opt-Default (flex). */
.pv-opt.inline { display: inline-flex; margin-right: 12px; }
.pv-opt.inline-sm { display: inline-flex; margin-right: 8px; }
.pv-opt.stack { display: inline-flex; flex-direction: column; align-items: center; margin-right: 10px; text-align: center; }
.hint.tiny { font-size: 11px; }
.hint.tiny-cap { font-size: 11px; max-width: 80px; }
/* Absenden-Button in der Live-Vorschau (volle Breite). */
.u-submit-full { margin-top: 6px; width: 100%; }
/* Builder: Bedingungs-Label + schmale Wert-Eingabe. */
.uq-cond-label { font-weight: 600; margin: 0; }
.uq-cond-vinput { width: 160px; }
/* Builder: Berechnungs-Felder (Eingabe-Auswahl, Faktor/Rundung, Parameter). */
.uq-calc-inputs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.uq-calc-note { margin: 4px 0 0; }
.uq-calc-row { display: flex; gap: 10px; flex-wrap: wrap; }
.uq-calc-numin { width: 120px; }
.uq-calc-input-lbl { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.uq-calc-arg-lbl { display: block; margin-top: 4px; }
.uq-calc-arg-name { font-weight: 600; }
/* ===================== Modul live: Host-Tab (Live-Beteiligung) ===================== */
.live-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Native Checkbox nicht aufblähen lassen (sonst umbricht das Label unnötig, Review 08.07.) */
.live-check input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.live-optrow { display: flex; gap: 8px; margin-bottom: 6px; }
.live-optinput { flex: 1; min-height: 40px; padding: 0 12px; border: 1px solid var(--border, #dde3e9);
border-radius: var(--radius-md, 10px); font: inherit; background: var(--surface, #fff); color: var(--text-strong, #1b3a5b); }
.btn-sm { min-height: 34px; padding: 4px 12px; font-size: .85rem; }
.live-listrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px;
border: 1px solid var(--border, #dde3e9); border-radius: var(--radius-md, 10px); margin-bottom: 8px; background: var(--surface, #fff); }
.live-listmain { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-listcode { flex: 0 0 auto; font: 700 .85rem/1 ui-monospace, monospace; color: #fff; background: var(--navy-600, #1b3a5b); /* theme-ok */
border-radius: var(--radius-pill, 999px); padding: 5px 10px; letter-spacing: .06em; }
.live-listtitle { color: var(--text-strong, #1b3a5b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-listmeta { font-size: .8rem; color: var(--text-muted, #6b7885); white-space: nowrap; }
/* Schmale Screens: Meta + Button brechen unter die Code+Titel-Zeile (kein Overlap, Review 08.07.) */
@media (max-width: 480px) { .live-listmain { flex-basis: 100%; } .live-listmeta { order: 2; } }
.live-codeline { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.live-bigcode { font: 800 2rem/1 ui-monospace, monospace; letter-spacing: .12em; color: var(--text-strong, #1b3a5b); }
/* Einzel-Eigenschaften statt Kurzform: "font: inherit" ist ungueltig (inherit gilt
dort als Familienname) und wird komplett verworfen — siehe live.css. */
.live-statuspill { font-family: inherit; font-size: .75rem; font-weight: 700; line-height: 1; letter-spacing: .08em; color: var(--text-muted, #6b7885);
background: var(--bg-sunken, #eef2f6); border-radius: var(--radius-pill, 999px); padding: 5px 11px; }
.live-statuspill.is-open { color: #fff; background: var(--petrol-500, #1f6f78); } /* theme-ok */
.live-flagpill { font-family: inherit; font-size: .75rem; font-weight: 600; line-height: 1; color: var(--text-muted, #6b7885);
background: var(--bg-sunken, #eef2f6); border-radius: var(--radius-pill, 999px); padding: 5px 10px; }
/* Aktive-Teilnehmer-Puls */
.live-activebar { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
background: var(--bg-sunken, #eef2f6); border: 1px solid var(--border, #dde3e9); border-radius: var(--radius-md, 12px); }
.live-activenum { font: 800 1.6rem/1 ui-monospace, monospace; color: var(--petrol-500, #1f6f78); } /* theme-ok */
.live-activelbl { color: var(--text-muted, #6b7885); font-size: .9rem; }
.live-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.live-linkbox { min-width: 0; }
.live-link { color: var(--text-link, #1f6f78); word-break: break-all; font-size: .9rem; }
.live-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.live-detres { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.live-detbar { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--bg-sunken, #f4f6f8);
border-radius: var(--radius-md, 8px); }
.live-detlabel { color: var(--text-strong, #1b3a5b); font-weight: 600; }
.live-detcount { font: 700 .95rem/1 ui-monospace, monospace; color: var(--text-link, #1f6f78); }
.live-subhead { margin: 6px 0 8px; font-size: 1rem; color: var(--text-strong, #1b3a5b); }
.live-sublist { display: flex; flex-direction: column; gap: 6px; }
.live-subrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border, #dde3e9);
border-radius: var(--radius-md, 8px); background: var(--surface, #fff); }
.live-subrow.is-pending { border-color: var(--action-warn, #b26a00); background: var(--bg-sunken, #fdf6ec); }
.live-subrow.is-hidden { opacity: .5; }
.live-subtext { flex: 1; color: var(--text-body, #2b3a48); }
/* Zustimmung im Q&A-Modus — feste Breite, damit die Fragetexte untereinander buendig stehen. */
.live-subvotes { min-width: 46px; text-align: center; font: 700 .85rem/1 ui-monospace, monospace;
color: var(--text-link, #1f6f78); background: var(--bg-sunken, #eef2f6);
border-radius: var(--radius-pill, 999px); padding: 5px 8px; }
/* Moderations-Leiste: sagt im Klartext, dass Beitraege noch nicht an der Wand stehen,
und bietet die Sammelfreigabe an. Ohne sie war der Wartezustand nur an der Zeilenfarbe
zu erahnen. */
.live-modbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
padding: 9px 12px; border-radius: var(--radius-md, 8px); border: 1px solid var(--border, #dde3e9);
background: var(--surface-2, #f5f7fa); }
.live-modbar.is-warn { border-color: var(--action-warn, #b26a00); background: var(--bg-sunken, #fdf6ec); }
.live-modtext { flex: 1; min-width: 220px; color: var(--text-body, #2b3a48); }
/* #237: Branding-Formular (Modul white-label) — Logo/Akzentfarbe/Titelzeile fuer Gaeste-Seite + Projektion. */
.live-theme { display: flex; flex-direction: column; gap: 8px; max-width: 360px; margin: 0 0 18px; }
.live-field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--text-muted, #6b7885); }
.live-themeinput { min-height: 38px; padding: 0 10px; border: 1px solid var(--border, #dde3e9);
border-radius: var(--radius-md, 8px); background: var(--surface, #fff); color: var(--text-strong, #1b3a5b); font: inherit; }
.live-err { color: var(--critical, #C62828); font-size: .85rem; margin: 0; }