/* ============================================================
   Formular-Baukasten: gemeinsames Aussehen (db/120)
   Wird von termin.html und kontakt.html geladen und von der
   Vorschau im Editor mitbenutzt. Alle Farben und Rundungen
   kommen aus CSS-Variablen, die FB.designAnwenden setzt.
   ============================================================ */
:root{
  --accent:#2563EB; --surface:#FFFFFF; --surface-2:#F1F5F9;
  --border:#E2E8F0; --text:#0F172A; --muted:#64748B;
  --gruen:#16A34A; --rot:#DC2626; --radius:16px;
  --feld-bg:#FFFFFF; --feld-fill:#F1F5F9;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,'Segoe UI',system-ui,sans-serif;background:#F6F8FC;color:var(--text);
     font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.huelle{max-width:470px;margin:0 auto;padding:20px 14px calc(30px + env(safe-area-inset-bottom))}
.karte{background:var(--surface);border-radius:var(--radius);padding:24px 20px;position:relative;
       box-shadow:0 1px 2px rgba(15,23,42,.05), 0 18px 44px -28px rgba(15,23,42,.45)}

/* ---------- Kopf ---------- */
.fb-cover{height:88px;border-radius:var(--radius) var(--radius) 0 0;margin:-24px -20px 0}
.fb-logo{width:56px;height:56px;border-radius:14px;background:#fff;display:grid;place-items:center;
     box-shadow:0 4px 14px rgba(15,23,42,.16);border:1px solid rgba(15,23,42,.06);
     position:relative;z-index:2;overflow:hidden}
.fb-logo.auf-cover{margin:-30px 0 10px}
.fb-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.fb-titel{font-size:19px;font-weight:800;margin:12px 0 3px;letter-spacing:-.02em}
.fb-unter{font-size:13px;color:var(--muted);margin:0 0 17px}

/* ---------- Felder ---------- */
.fb-feld{margin-bottom:13px}
.fb-feld > label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.fb-opt{float:right;font-weight:600;color:var(--muted);font-size:11px;
     background:var(--surface-2);border-radius:999px;padding:1px 7px}
.fb-hilfe{font-size:11.5px;color:var(--muted);margin-top:4px}
.fb-zeile{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-ueberschrift{font-size:15.5px;font-weight:800;margin:18px 0 6px;letter-spacing:-.01em}
.fb-infotext{font-size:12.5px;color:var(--muted);margin:0 0 13px}
.fb-trenner{border:0;border-top:1px solid var(--border);margin:16px 0}

.fb-feld input[type=text],.fb-feld input[type=email],.fb-feld input[type=tel],
.fb-feld input[type=number],.fb-feld input[type=date],.fb-feld textarea,.fb-feld select{
  width:100%;padding:11px 12px;font:inherit;font-size:16px;color:var(--text);
  border-radius:calc(var(--radius) * .62);background:var(--feld-bg);border:1px solid var(--border)}
.fb-feld textarea{resize:vertical;min-height:76px}
.fb-feld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px, 5px 5px;background-repeat:no-repeat;padding-right:34px}
.fb-feld input:focus,.fb-feld textarea:focus,.fb-feld select:focus{
  border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}

/* Feld-Stile */
body[data-stil=gefuellt] .fb-feld input,body[data-stil=gefuellt] .fb-feld textarea,
body[data-stil=gefuellt] .fb-feld select{background:var(--feld-fill);border-color:transparent}
body[data-stil=unterstrichen] .fb-feld input,body[data-stil=unterstrichen] .fb-feld textarea,
body[data-stil=unterstrichen] .fb-feld select{background:transparent;border:0;border-bottom:1.5px solid var(--border);
  border-radius:0;padding-left:2px;padding-right:2px}

/* ---------- Auswahlkacheln und Mehrfachauswahl ---------- */
.fb-kacheln{display:grid;gap:7px}
.fb-kachel{display:flex;align-items:center;gap:9px;border:1.5px solid var(--border);
  border-radius:calc(var(--radius) * .62);padding:11px 12px;font-size:13.5px;font-weight:600;
  background:var(--feld-bg);cursor:pointer;transition:.14s}
.fb-kachel:hover{border-color:var(--accent)}
.fb-kachel input{position:absolute;opacity:0;width:0;height:0}
.fb-punkt{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);flex:none}
.fb-kasten{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--border);flex:none;
  display:grid;place-items:center;color:#fff;font-size:11px;line-height:1}
.fb-kachel input:checked ~ .fb-punkt{border-color:var(--accent);box-shadow:inset 0 0 0 3.5px var(--accent)}
.fb-kachel input:checked ~ .fb-kasten{border-color:var(--accent);background:var(--accent)}
.fb-kachel input:checked ~ .fb-kasten::after{content:"\2713"}
.fb-kachel:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, var(--feld-bg))}
.fb-kachel input:focus-visible ~ .fb-punkt,.fb-kachel input:focus-visible ~ .fb-kasten{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent)}

/* ---------- Haken (Checkbox, Einwilligung) ---------- */
.fb-haken{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);
  cursor:pointer;font-weight:500;line-height:1.5}
.fb-haken input{position:absolute;opacity:0;width:0;height:0}
.fb-haken .fb-kasten{margin-top:1px}
.fb-haken input:checked ~ .fb-kasten{border-color:var(--accent);background:var(--accent)}
.fb-haken input:checked ~ .fb-kasten::after{content:"\2713"}
.fb-haken a{color:var(--accent);font-weight:600}

/* ---------- Knopf, Meldungen, Fuss ---------- */
.knopf{width:100%;font:inherit;font-size:15px;font-weight:700;padding:13px;cursor:pointer;
  border-radius:calc(var(--radius) * .68);border:1px solid var(--accent);background:var(--accent);
  color:#fff;margin-top:6px;box-shadow:0 10px 24px -14px var(--accent)}
.knopf:disabled{opacity:.6;cursor:wait}
.knopf.leise{background:var(--surface);color:var(--text);border-color:var(--border);
  font-weight:600;box-shadow:none}
.meldung{border-radius:12px;padding:11px 13px;font-size:13px;margin-bottom:12px;display:none}
.meldung.rot{display:block;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.25);color:var(--rot)}
.brandfuss{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
.brandfuss a{color:var(--accent);text-decoration:none;font-weight:600}
.lade{color:var(--muted);font-size:13px;text-align:center;padding:24px 0}
.leer{color:var(--muted);font-size:13px;text-align:center;padding:18px 0}
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
.fertig{text-align:center;padding:6px 0}
.fertig .haken{width:48px;height:48px;border-radius:50%;background:rgba(22,163,74,.12);color:var(--gruen);
  display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 12px}

/* ---------- Editor-Modus (nur in der Baukasten-Vorschau aktiv) ----------
   Felder sind anklickbar und verschiebbar; die Eingaben selbst sind
   stillgelegt, damit ein Klick immer AUSWAEHLT statt zu tippen. */
body.fb-editor [data-fb]{cursor:pointer;border-radius:10px;transition:box-shadow .12s}
body.fb-editor [data-fb] *{pointer-events:none}
body.fb-editor [data-fb]:hover{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent)}
body.fb-editor .fb-gewaehlt{box-shadow:0 0 0 2px var(--accent) !important;position:relative}
body.fb-editor div.fb-gewaehlt::after{content:"Ausgewählt";position:absolute;top:-9px;right:8px;
  background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;padding:1px 8px;
  border-radius:999px;letter-spacing:.03em;pointer-events:none}
body.fb-editor .fb-ziel{box-shadow:0 0 0 2px var(--accent);outline:2px dashed var(--accent);outline-offset:4px}
body.fb-editor .fb-zieht{opacity:.35}
body.fb-editor hr[data-fb]{padding:6px 0;border-top:0;background:linear-gradient(var(--border),var(--border)) center/100% 1px no-repeat}
body.fb-editor .fb-kopf-klick{cursor:pointer;border-radius:8px;transition:box-shadow .12s}
body.fb-editor .fb-kopf-klick:hover{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent)}