/* SKG Meldeformular – WCAG 2.1 AA. Helles, kontrastreiches Theme. */

:root{
  --bg:#f4f5f7;
  --surface:#ffffff;
  --ink:#1a1d24;        /* 14:1 auf surface */
  --muted:#54596b;      /* 6.8:1 auf surface */
  --line:#c3c8d4;
  --primary:#1d4ed8;    /* 6.3:1 auf weiss; per Config ueberschreibbar */
  --primary-ink:#ffffff;
  /* Hover wird aus der (ggf. konfigurierten) Primaerfarbe abgeleitet */
  --primary-hover:color-mix(in srgb, var(--primary), #000 14%);
  --focus:#b54708;      /* kraeftiger Fokusring */
  --req:#b42318;
  --ok-bg:#e7f6ec;
  --ok-ink:#1a5e34;
  --err-bg:#fdecea;
  --err-ink:#b42318;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--schrift, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
  display:flex;
  flex-direction:column;
}

:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:3px;}

.skip-link{
  position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;
  padding:8px 14px;z-index:100;
}
.skip-link:focus{left:8px;top:8px;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);border:0;
}

#kopf{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
#kopf-brand{display:flex;align-items:center;gap:10px;min-width:0;}
#kopf-logo{height:28px;width:auto;max-width:160px;object-fit:contain;}
#kopf-titel{font-weight:700;}
#kopf-melder{color:var(--muted);font-size:14px;}

#main{flex:1;display:flex;flex-direction:column;min-height:0;}
.screen{flex:1;display:flex;flex-direction:column;}
.screen[hidden]{display:none;}

/* Boxen-Layout (Login, Mode, Form, Done) */
#screen-login,#screen-mode,#screen-form,#screen-preview,#screen-done,#screen-final{
  align-items:center;justify-content:flex-start;overflow-y:auto;padding:32px 20px;
}
.box{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:28px;width:100%;max-width:520px;
}
.box.wide{max-width:760px;}
.box-titel{font-size:24px;margin-bottom:8px;}
.box-text{color:var(--muted);margin-bottom:18px;}
/* Grosses Logo auf der Einstiegsseite: gibt der ersten Seite ein Gesicht.
   max-width statt fester Breite, damit auch breite Wort-Logos passen. */
.login-logo{
  display:block;height:auto;max-height:88px;max-width:100%;
  margin:0 auto 20px;object-fit:contain;
}

/* Weiche Dubletten-Warnung in der Vorschau. Bewusst als Hinweis gestaltet, nicht
   als Fehler: sie informiert, sie blockiert nicht. Deshalb geldb/amber statt rot -
   Rot ist im Rest der Oberflaeche fuer echte Fehler reserviert. */
.dubletten-warnung{
  border:1px solid #b54708;border-left-width:5px;border-radius:8px;
  background:#fffaf0;padding:14px 16px;margin:18px 0;
}
.dubletten-titel{font-weight:700;color:#93370d;margin-bottom:6px;}
.dubletten-text{color:var(--ink);font-size:14px;margin:6px 0 0;}
.dubletten-liste{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.dubletten-liste li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;
}
.dubletten-name{font-weight:600;}
.dubletten-detail{color:var(--muted);font-size:14px;}
.dubletten-marke{
  font-size:12px;font-weight:600;color:#93370d;background:#fef0c7;
  border-radius:999px;padding:2px 8px;
}
.dubletten-link{color:var(--primary);font-size:14px;margin-left:auto;}

/* Schlussbildschirm: ruhig und eindeutig - hier ist der Vorgang zu Ende. */
.final-box{text-align:center;}
.final-box dl{text-align:left;display:inline-block;margin:4px 0 16px;}
.final-haken{
  width:64px;height:64px;margin:4px auto 16px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok-ink);
  font-size:34px;line-height:64px;font-weight:700;
}
#done-abschluss{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}

/* Felder */
.feld{margin-bottom:16px;min-width:0;}
.feld label{display:block;font-weight:600;margin-bottom:6px;}
.feld input,.feld textarea,.feld select{
  width:100%;padding:10px 12px;font-size:16px;font-family:inherit;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;
}
.feld textarea{resize:vertical;min-height:84px;}
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--focus);}
.feld input.invalid,.feld textarea.invalid{border-color:var(--req);background:var(--err-bg);}
.feld .hilfe{color:var(--muted);font-size:13px;margin-top:4px;}
.feld-check .check-label{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;}
.feld-check input[type=checkbox]{width:18px;height:18px;flex:none;}

/* SKG-Suche & Verknüpfung (Veranstalter/Ort) */
.link-search{margin-bottom:14px;}
.link-search input[type=search]{width:100%;padding:10px 12px;font-size:16px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);}
.link-search input[type=search]:focus{border-color:var(--focus);}
.link-results{display:flex;flex-direction:column;gap:4px;margin-top:6px;}
.link-result{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;}
.link-result:hover{border-color:var(--primary);background:var(--bg);}
.link-result-name{font-weight:600;}
.link-result-sub{font-size:13px;color:var(--muted);}
.link-hint{font-size:13px;color:var(--muted);padding:6px 2px;}
.linked-card{border:1px solid var(--ok-ink);background:var(--ok-bg);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;margin-bottom:14px;}
.linked-badge{font-size:13px;font-weight:600;color:var(--ok-ink);}
.linked-name{font-weight:700;}
.linked-sub{font-size:14px;color:var(--ink);}
.linked-card .btn-sek{align-self:flex-start;margin-top:6px;}

/* Bild-Upload (Bestätigungsscreen) */
.upload-h{font-size:18px;margin:22px 0 6px;}
.upload-list{display:flex;flex-direction:column;gap:16px;margin:12px 0;}
.upload-card{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface);}
.upload-card .feld{margin-bottom:10px;}
.upload-card select{width:100%;padding:9px 10px;font-size:16px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);}
.feld-stack{display:flex;flex-direction:column;gap:6px;}
.lizenz-hilfe{margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 12px;}
.lizenz-hilfe summary{cursor:pointer;color:var(--primary);font-weight:600;}
.lizenz-hilfe p{margin:8px 0;font-size:14px;}
.lizenz-hilfe .lizenz-hilfe-h{font-weight:700;color:var(--ink);margin-top:10px;}
/* Pflicht-Lizenz im reinen KI-Dialog (0.18.0) */
.lizenz-ki select{width:100%;}
.lizenz-dl{margin:6px 0 2px;}
.lizenz-dl dt{font-weight:600;margin-top:8px;}
.lizenz-dl dd{margin:0;font-size:14px;color:var(--muted);}
.upload-status{margin-top:8px;font-size:14px;}
.upload-status.ok{color:var(--ok-ink);font-weight:600;}
.upload-status.err{color:#b42318;font-weight:600;}

.btn-wand{margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:13px;
  font-weight:600;color:var(--primary);background:var(--surface);border:1px solid var(--primary);
  border-radius:8px;cursor:pointer;}
.btn-wand:hover:not(:disabled){background:var(--primary);color:#fff;}
.btn-wand:disabled{opacity:.6;cursor:default;}
.ki-hinweis{margin-top:6px;font-size:13px;color:var(--muted);}
.ki-hinweis.ok{color:var(--ok-ink);font-weight:600;}
.ki-hinweis.err{color:#b42318;}

.req{color:var(--req);margin-left:2px;}
.opt{color:var(--muted);font-weight:400;font-size:13px;}
.fehler{color:var(--err-ink);font-size:14px;margin-top:6px;}
.zaehler{color:var(--muted);font-size:12px;margin-top:4px;text-align:right;}
.zaehler.over{color:var(--err-ink);font-weight:600;}
.zaehler.ok{color:var(--ok-ink);font-weight:600;}

/* Formular-Sektionen + mehrspaltiges Layout (breite Schirme) */
#screen-form .box{max-width:880px;}
.form-section{border:0;padding:0;margin:0 0 22px;min-width:0;}
/* Abstand zwischen „+ Termin hinzufügen“ und dem Absende-Knopf (0.18.1) */
#schedule-form:not(:empty){margin-bottom:22px;}
.form-legend{
  font-size:15px;font-weight:700;color:var(--ink);width:100%;
  padding:0 0 6px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.form-row{display:grid;gap:0 16px;}
.form-row.cols-2{grid-template-columns:1fr 1fr;}
.form-row.cols-3{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:600px){
  .form-row.cols-2,.form-row.cols-3{grid-template-columns:1fr;}
}

/* Buttons */
.btn-primary{
  background:var(--primary);color:var(--primary-ink);border:0;border-radius:8px;
  padding:12px 20px;font-size:16px;font-weight:600;cursor:pointer;
}
.btn-primary:hover{background:var(--primary-hover);}
.btn-primary:disabled{background:#9aa3b8;cursor:not-allowed;}
button{font-family:inherit;}
.btn-sek{
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:8px 12px;cursor:pointer;font-size:14px;
}
.btn-sek:hover{border-color:var(--muted);}

/* Wechsel zwischen KI-Dialog und Formular */
.mode-switch{margin-bottom:14px;}
.mode-switch .btn-sek{font-size:13px;}

/* Variantenwahl */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.mode-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  background:var(--surface);border:2px solid var(--line);border-radius:12px;
  padding:20px;cursor:pointer;
}
.mode-card:hover{border-color:var(--primary);}
.mode-card-titel{font-size:18px;font-weight:700;}
.mode-card-text{color:var(--muted);font-size:14px;}

/* KI-Dialog Split-Layout */
.split{flex-direction:row;min-height:0;}
.ki-main{flex:1;display:flex;flex-direction:column;min-width:0;padding:16px;}
#chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:8px;}
.bubble{max-width:80%;padding:10px 14px;border-radius:12px;}
.bubble.user{align-self:flex-end;background:var(--primary);color:#fff;}
.bubble.assistant{align-self:flex-start;background:#eef1f6;color:var(--ink);}
.bubble.thinking{color:var(--muted);font-style:italic;}
.bubble.thinking .dots::after{content:'';animation:thinking-dots 1.2s steps(1,end) infinite;}
@keyframes thinking-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}
@media (prefers-reduced-motion: reduce){.bubble.thinking .dots::after{content:'…';animation:none;}}
#ki-eingabe{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px;}
/* Datei/Foto und Webseite: gleich gestaltete, gut sichtbare Knoepfe (mind. 44 px hoch, gut tippbar) */
#import-row{display:flex;gap:8px;flex-wrap:wrap;}
.import-url{display:flex;gap:8px;flex:1;flex-wrap:wrap;min-width:0;}
#import-row input[type=url]{flex:1;min-width:180px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:16px;}
.btn-import{
  min-height:44px;padding:8px 14px;font-size:15px;font-weight:600;white-space:nowrap;
  color:var(--primary);background:var(--surface);border:2px solid var(--primary);border-radius:8px;cursor:pointer;
}
.btn-import:hover:not(:disabled){background:var(--primary);color:var(--primary-ink);}
.btn-import:focus-visible,#send-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px;}
.btn-import:disabled,#send-btn:disabled{opacity:.55;cursor:default;}
#text-row{display:flex;gap:8px;}
#text-row textarea{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;resize:vertical;font-family:inherit;font-size:16px;}
#send-btn{width:48px;font-size:20px;background:var(--primary);color:#fff;border:0;border-radius:8px;cursor:pointer;}

.ki-side{
  width:340px;border-left:1px solid var(--line);background:var(--surface);
  padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;
}

/* Fortschritt */
.progress h2{font-size:15px;margin-bottom:8px;}
.progress ul{list-style:none;display:flex;flex-direction:column;gap:4px;}
.progress li{display:flex;align-items:center;gap:8px;font-size:14px;}
.progress .mark{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.progress li.done .mark{background:var(--ok-ink);border-color:var(--ok-ink);color:#fff;}
.progress li.done{color:var(--muted);}
.badge-ok{display:inline-block;background:var(--ok-bg);color:var(--ok-ink);padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600;margin-top:8px;}

/* eventSchedule – Karten mit Einzelfeldern */
.sched h2{font-size:16px;margin-bottom:4px;}
.sched-hint{color:var(--muted);font-size:13px;margin-bottom:12px;}
/* Termin-Karte als <details>: zugeklappt zeigt sie nur Nummer und Datum. Bei einer
   Reihe mit vielen Terminen ist die ausgeklappte Liste sonst unuebersichtlich. */
.sched-card{
  border:1px solid var(--line);border-radius:10px;margin-bottom:12px;background:var(--surface);
}
/* Karten, in denen eine Pflichtangabe fehlt, sind erzwungen offen und werden
   hervorgehoben - sonst uebersieht der Melder, warum das Absenden scheitert. */
.sched-card-problem{border-color:#b54708;border-left-width:4px;}

.sched-card-head{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 14px;cursor:pointer;list-style:none;border-radius:10px;
}
.sched-card-head::-webkit-details-marker{display:none;}   /* eigenes Dreieck, siehe unten */
.sched-card-head::before{
  content:'';flex:none;width:0;height:0;
  border-left:6px solid var(--muted);border-top:5px solid transparent;border-bottom:5px solid transparent;
  transition:transform .15s ease;
}
.sched-card[open] > .sched-card-head::before{transform:rotate(90deg);}
.sched-card-head:hover{background:var(--bg);}
.sched-card-head:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;}

.sched-card-titel{font-size:15px;font-weight:700;padding:0;}
.sched-card-kurz{color:var(--muted);font-size:14px;}
.sched-card-warn{
  font-size:12px;font-weight:600;color:#93370d;background:#fef0c7;
  border-radius:999px;padding:2px 8px;
}
/* Der Entfernen-Knopf sitzt am Fuss der aufgeklappten Karte (nicht in der
   Kopfzeile - er wuerde sonst in den angesagten Namen des Aufklapp-Schalters
   wandern). */
.sched-card-body{padding:0 14px 14px;}
.sched-card-weg{margin-top:14px;}
.sched-allday{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.sched-allday label{font-weight:600;font-size:14px;}
.sched-allday input{width:18px;height:18px;}
.sched-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.sched-field{display:flex;flex-direction:column;gap:4px;}
.sched-field-wide{grid-column:1 / -1;}
.sched-field label{font-size:13px;font-weight:600;color:var(--muted);}
.sched-field input,.sched-field select{
  padding:8px 10px;font-size:15px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.sched-field input:focus,.sched-field select:focus{border-color:var(--focus);}
.sched-recur{margin-top:12px;display:flex;flex-direction:column;gap:4px;}
.sched-recur > label{font-size:13px;font-weight:600;color:var(--muted);}
.sched-recur > select{
  padding:8px 10px;font-size:15px;font-family:inherit;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.sched-recur > select:focus{border-color:var(--focus);}
.sched-recur-custom{
  margin-top:10px;padding:12px;background:var(--bg);border-radius:8px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;
}
.sched-recur-tage{grid-column:1 / -1;margin:0;font-size:13px;color:var(--muted);}

@media (max-width:520px){
  #file-btn,#url-btn{width:100%;}
  .sched-grid,.sched-recur-custom{grid-template-columns:1fr;}
}
/* In der schmalen KI-Sidebar immer einspaltig (haengt an Container-, nicht Fensterbreite) */
#schedule-ki .sched-grid,#schedule-ki .sched-recur-custom{grid-template-columns:1fr;}

/* Tabellen-Felder (Preise, Buchungslinks): dieselben Karten wie bei den Terminen */
.tabelle .tab-titel{font-weight:600;margin-bottom:4px;}
.tabelle .hilfe{margin-top:0;margin-bottom:10px;}
.tab-karten{display:flex;flex-direction:column;align-items:stretch;}
.tab-karten > .btn-sek{align-self:flex-start;}
.tab-problem{margin-top:10px;font-size:13px;font-weight:600;color:#93370d;}
.tab-karte .sched-card-warn[hidden]{display:none;}
.feld.tabelle .sched-field input[aria-invalid=true]{border-color:var(--req);background:var(--err-bg);}

/* Vorschau vor dem Absenden */
.pv-block{margin-bottom:22px;}
.pv-h{font-size:16px;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--line);}
.pv-dl{display:flex;flex-direction:column;gap:7px;}
.pv-row{display:grid;grid-template-columns:170px 1fr;gap:2px 14px;}
.pv-row dt{font-weight:600;color:var(--muted);}
.pv-row dd{margin:0;overflow-wrap:anywhere;}
.pv-row dd.pv-mehrzeilig{white-space:pre-line;}
.pv-termin{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin-bottom:10px;background:var(--bg);}
.pv-th{font-size:14px;font-weight:700;margin-bottom:8px;}
/* Zustimmung (optionales Einwilligungs-Haekchen vor dem Absenden).
   Der Text ist bei einigen Installationen ~1000 Zeichen lang: eigener Kasten,
   etwas kleinere Schrift, Absaetze mit Luft - und begrenzte Zeilenlaenge, damit
   er auf breiten Schirmen lesbar bleibt statt quer durchzulaufen.
   white-space:pre-line macht einzelne Umbrueche des Config-Textes sichtbar,
   ohne dass das Frontend HTML erzeugen muesste (XSS-Regel: nur textContent). */
.zust-block{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:14px 16px;margin:18px 0;}
.zust-text{max-width:70ch;}
/* Texte, die eine Installation selbst setzen darf (oberflaeche.texte): Zeilenumbrueche und
   Leerzeilen aus der Config bleiben sichtbar, ganz ohne innerHTML. */
.mehrzeilig{white-space:pre-line;}
.zust-text p{font-size:14px;color:var(--ink);white-space:pre-line;overflow-wrap:anywhere;}
.zust-text p + p{margin-top:8px;}
.zust-check{margin:12px 0 0;}
/* Haekchen oben ausrichten: bei mehrzeiliger Beschriftung saehe zentriert falsch aus.
   Tippziel bewusst 24 px (WCAG 2.5.5 Zielgroesse, Smartphone-Bedienung). */
.zust-check .check-label{align-items:flex-start;font-weight:400;}
.zust-check input[type=checkbox]{width:24px;height:24px;margin-top:1px;}
.zust-check.invalid{background:var(--err-bg);border-radius:6px;padding:6px 8px;margin-left:-8px;}
.zust-fehler:empty{display:none;}
.zust-fehler{font-weight:600;}
.zust-link{margin-top:10px;font-size:14px;}
.zust-link a{color:var(--primary);}

#preview-captcha:not(:empty){margin:18px 0;}
.preview-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px;}

dl#done-detail{margin:8px 0 16px;}
dl#done-detail dt{font-weight:600;}
dl#done-detail dd{margin:0 0 10px;color:var(--muted);}
dl#done-detail dd.dd-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
dl#done-detail dd.dd-id code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--ink);overflow-wrap:anywhere;}
.btn-copy{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:13px;}
.btn-copy:hover{border-color:var(--primary);}

.banner-err{background:var(--err-bg);color:var(--err-ink);border:1px solid var(--err-ink);border-radius:8px;padding:10px 14px;margin-bottom:14px;}

@media (max-width:760px){
  .mode-grid{grid-template-columns:1fr;}
  /* KI-Dialog: gesamter Screen scrollt, Chat begrenzt -> nichts wird abgeschnitten */
  .split{flex-direction:column;overflow-y:auto;}
  .ki-main{flex:none;padding:12px;}
  #chat{flex:none;min-height:200px;max-height:48vh;}
  .ki-side{width:auto;border-left:0;border-top:1px solid var(--line);overflow:visible;}
  /* Kompaktere Abstaende auf kleinen Screens */
  #screen-login,#screen-mode,#screen-form,#screen-preview,#screen-done,#screen-final{padding:18px 12px;}
  .box{padding:18px;border-radius:10px;}
  .box-titel{font-size:21px;}
  .login-logo{max-height:64px;margin-bottom:16px;}
  #kopf{padding:10px 14px;}
  #kopf-melder{font-size:13px;}
  /* Aktionen volle Breite und gut tippbar */
  .preview-actions{flex-direction:column-reverse;}
  .preview-actions .btn-primary,.preview-actions .btn-sek{width:100%;padding:13px 16px;}
  .btn-primary{width:100%;}
  .pv-row{grid-template-columns:1fr;gap:0;}
  .pv-row dt{margin-top:2px;}
}

/* Fusszeile: Datenschutz-Link (nur sichtbar, wenn oberflaeche.datenschutzUrl gesetzt) */
#fuss{max-width:920px;margin:0 auto;padding:12px 16px 20px;width:100%;text-align:center;}
#fuss a{color:var(--primary);text-decoration:underline;font-size:14px;}
#fuss a:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px;}

/* Einordnung: Mehrfachauswahl als Checkbox-Gruppe */
.feld-multiselect{margin-bottom:18px;}
.einordnung-intro{margin-bottom:14px;}
/* --- Mehrfachauswahl mit Tippfilter (Combobox + Chips) --- */
.ms-gruppe{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--surface);}
.ms-gruppe.invalid{border-color:var(--req);background:var(--err-bg);}
.ms-label-zeile{display:block;margin-bottom:8px;cursor:pointer;}
.ms-label{font-weight:600;}
.ms-zaehler{font-weight:400;font-size:13px;color:var(--muted);}

/* Chip-Leiste: EIN Tab-Stopp, innen Pfeiltasten (roving tabindex im JS) */
.ms-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.ms-chips[hidden]{display:none;}
.ms-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--primary);color:var(--primary-ink,#fff);
  border:1px solid transparent;border-radius:999px;
  padding:5px 10px;font-size:14px;font-family:inherit;line-height:1.3;
  cursor:pointer;min-height:32px;
}
.ms-chip:hover{filter:brightness(1.12);}
.ms-chip:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.ms-chip-x{font-size:16px;line-height:1;opacity:.85;}

/* Eingabefeld + aufklappende Liste */
.ms-feld{position:relative;}
.ms-eingabe{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;
  font-size:16px;font-family:inherit;background:var(--surface);color:var(--ink);
}
.ms-eingabe:focus-visible{outline:3px solid var(--focus);outline-offset:1px;}
.ms-optionen{
  position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:4px;list-style:none;max-height:260px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.ms-optionen[hidden]{display:none;}
.ms-option{
  display:flex;align-items:center;gap:8px;
  padding:9px 10px;border-radius:6px;cursor:pointer;font-size:15px;line-height:1.35;
}
.ms-option:hover{background:var(--bg);}
/* .aktiv = per Pfeiltaste hervorgehoben. Nicht nur Farbe, auch ein Rahmen -
   Farbe allein waere fuer Farbfehlsichtige zu wenig (WCAG 1.4.1). */
.ms-option.aktiv{background:var(--bg);box-shadow:inset 0 0 0 2px var(--primary);}
.ms-option[aria-selected="true"]{font-weight:600;}
.ms-haken{width:14px;flex:none;color:var(--primary);font-weight:700;}
/* "Keine Treffer" liegt ausserhalb der Liste (Spezifikation: eine listbox darf
   nur option-Elemente enthalten), sieht aber aus wie ein Listeneintrag. */
.ms-leer{
  position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);
  margin:0;padding:13px 14px;color:var(--muted);font-size:15px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.ms-leer[hidden]{display:none;}