/* Formulare, Terminwahl, Prüf-Ergebnis — alles, was mit dem CRM spricht (js/web.js). Ohne style-Attribute (CSP). */
.formular { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 36px); max-width: 640px; }
.formular.klar { background: rgba(255, 255, 255, 0.9); }
.fo-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.fo-feld label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.formular input:not([type="checkbox"]), .formular select, .formular textarea { width: 100%; font: 500 15px var(--f-body); color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px; }
.formular input:focus, .formular select:focus, .formular textarea:focus { outline: 2px solid var(--hi); outline-offset: 1px; }
.formular textarea { resize: vertical; }
.fo-einwilligung { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.fo-einwilligung input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--ink); }
.fo-honig { position: absolute; left: -9999px; width: 1px; height: 1px; }
.fo-meldung { min-height: 1.4em; margin: 0; font-size: 14px; font-weight: 600; color: var(--hi); } .fo-meldung:empty { display: none; }
.fo-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; } .fo-aktion .note { flex: 1 1 200px; }
.rueckfall { margin: 0; } .rueckfall a { text-decoration: underline; text-underline-offset: 3px; }
.kl { font-size: 24px; }

.terminwahl { padding: clamp(20px, 3vw, 36px); max-width: 780px; }
.terminwahl-widget { min-height: 300px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); display: grid; place-items: center; padding: 24px;
  --schrift: var(--f-body); --text: var(--ink-2); --text-leise: var(--muted); --flaeche: #fff; --flaeche-2: #eef2f1; --linie: var(--line); --linie-stark: rgba(10, 20, 22, 0.28);
  --radius: 14px; --radius-gross: 20px; --radius-pill: 999px; --radius-tag: 10px; --akzent: var(--a1); --akzent-hell: color-mix(in oklab, var(--a1) 16%, #fff); --akzent-text: #fff;
  --knopf: var(--ink); --knopf-hover: var(--hi); --knopf-text: #fff; --ok-hell: #e2f6ec; --ok-text: #0a6b3f; --fehler-hell: #fdeaea; --fehler-text: #9b1c1c; }
.terminwahl-widget--da, .terminwahl-widget:has(.st) { display: block; padding: 0; background: #fff; }
.terminwahl-widget[hidden] { display: none; }
.terminwahl-laden { max-width: 420px; text-align: center; font-size: 15px; color: var(--muted); } .terminwahl-laden a { text-decoration: underline; }
.terminwahl-rueckruf h3 { font-size: 22px; font-family: var(--f-display); letter-spacing: -0.02em; } .terminwahl-rueckruf > p { margin-top: 8px; color: var(--ink-2); }
.terminwahl-rueckruf .formular { margin-top: 16px; padding: 0; box-shadow: none; background: none; border: 0; backdrop-filter: none; }
.terminwahl-oder { margin-top: 20px; } .terminwahl-wege { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 600; } .terminwahl-wege a:hover { color: var(--hi); }

/* Ergebnis (Live und Beispiel) */
.erg { display: grid; gap: 20px; align-items: start; } .erg[hidden] { display: none; }
@media (min-width: 960px) { .erg:has(.funde) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.erg-mass { padding: clamp(20px, 3vw, 32px); } .erg-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-bottom: 24px; }
.erg-ring { flex: none; } .erg-zahl { font: 700 38px var(--f-display); fill: var(--ink); }
.erg-titel { font: 600 clamp(20px, 2vw, 26px)/1.2 var(--f-display); letter-spacing: -0.02em; } .erg-url { margin-top: 6px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.erg-fehler { font-size: 17px; font-weight: 600; }
.eg-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }
.eg-bericht { display: grid; gap: 20px; } .eg-bericht[hidden] { display: none; }
.checkfeld { max-width: 640px; }