/* Kontaktformular (kontakt-formular.js). Ruhig und schlicht: Glasfelder, eine Kappen-Pille zum Senden, Meldungen unbunt
   mit Zeichen. Hell oder dunkel (data-kf-thema setzt der Baustein nach dem Container oder data-thema); auf Seiten mit den
   Variablen der Rechtsseiten (--text, --text2, --accent, --font) nimmt er deren Werte. Keine Warnfarbe: Fehler in hellem
   Stahlblau mit „!“, Erfolg in Azur mit „✓“ (Designregeln, Meldungen). Ziele mindestens 44 px, Schrift in Feldern 16 px
   (sonst vergrößert iOS beim Antippen). Kontraste prüft tests/kontakt-browser.test.mjs hell und dunkel. */
[data-kontakt-formular] {
  font-family: var(--font, 'Inter Tight', system-ui, sans-serif);
  color: var(--kf-text);
  text-align: left;
}
[data-kf-thema="dunkel"] {
  --kf-text: var(--text, #ffffff);
  --kf-text2: var(--text2, rgba(223, 235, 255, 0.82));
  --kf-leise: rgba(200, 220, 245, 0.74);
  --kf-feld: rgba(255, 255, 255, 0.06);
  --kf-feld-fokus: rgba(255, 255, 255, 0.09);
  --kf-rand: rgba(160, 200, 255, 0.50);   /* Feldrand mindestens 3:1 zum Grund (WCAG 1.4.11; Prüfrunde M1: vorher 0,30 = 2,3:1) */
  --kf-akzent: var(--accent, #3DE0FF);
  --kf-pille: linear-gradient(90deg, rgba(61, 224, 255, 0.16), rgba(255, 210, 120, 0.16));
  --kf-pille-hover: linear-gradient(90deg, rgba(61, 224, 255, 0.26), rgba(255, 210, 120, 0.26));
  --kf-tinte: #041018;
  --kf-fehler: #8CAFFE;
  --kf-erfolg: #1FA3E8;
  --kf-box: rgba(255, 255, 255, 0.05);
  color-scheme: dark;
}
[data-kf-thema="hell"] {
  --kf-text: #13222b;
  --kf-text2: #33474f;
  --kf-leise: #4c5f68;
  --kf-feld: #ffffff;
  --kf-feld-fokus: #ffffff;
  --kf-rand: #7d8f98;
  --kf-akzent: #0c6577;
  --kf-pille: linear-gradient(90deg, rgba(12, 101, 119, 0.10), rgba(128, 85, 0, 0.08));
  --kf-pille-hover: linear-gradient(90deg, rgba(12, 101, 119, 0.17), rgba(128, 85, 0, 0.13));
  --kf-tinte: #ffffff;
  --kf-fehler: #2b4c9c;
  --kf-erfolg: #0b6ea8;
  --kf-box: rgba(19, 34, 43, 0.04);
  color-scheme: light;
}
[data-kontakt-formular] *, [data-kontakt-formular] *::before, [data-kontakt-formular] *::after { box-sizing: border-box; }
[data-kontakt-formular] [hidden] { display: none !important; }
[data-kontakt-formular] .kf { display: grid; gap: 18px; margin: 0; }
/* Name und E-Mail nebeneinander, sobald der Container breit genug ist (ohne Container-Abfrage: der Baustein bleibt
   auch in einem Flex-Container ohne feste Breite sichtbar) */
[data-kontakt-formular] .kf-reihe { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items: start; }
[data-kontakt-formular] .kf-feld { display: grid; gap: 6px; min-width: 0; }
[data-kontakt-formular] .kf-label { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--kf-text); }
[data-kontakt-formular] .kf-frei { font-weight: 400; color: var(--kf-leise); }
[data-kontakt-formular] p.kf-hilfe,
[data-kontakt-formular] p.kf-zaehler { margin: 0; font-size: 13px; line-height: 1.45; color: var(--kf-leise); }
[data-kontakt-formular] p.kf-zaehler { margin: 0; font-variant-numeric: tabular-nums; }
[data-kontakt-formular] p.kf-zaehler.kf-zaehler-voll { color: var(--kf-fehler); font-weight: 600; }
[data-kontakt-formular] .kf-eingabe {
  display: block; width: 100%; min-height: 44px; margin: 0; padding: 11px 14px;
  font: 400 16px/1.45 var(--font, 'Inter Tight', system-ui, sans-serif); color: var(--kf-text);
  background: var(--kf-feld); border: 1px solid var(--kf-rand); border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-appearance: none; appearance: none;
}
[data-kontakt-formular] textarea.kf-eingabe { min-height: 168px; resize: vertical; }
[data-kontakt-formular] .kf-eingabe:hover { border-color: color-mix(in srgb, var(--kf-akzent) 45%, var(--kf-rand)); }
[data-kontakt-formular] .kf-eingabe:focus { outline: none; }
[data-kontakt-formular] .kf-eingabe:focus-visible {
  background: var(--kf-feld-fokus); border-color: var(--kf-akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kf-akzent) 28%, transparent);
}
[data-kontakt-formular] .kf-eingabe[aria-invalid="true"] { border-color: var(--kf-fehler); border-width: 2px; padding: 10px 13px; }
/* Fokus auch auf einem Feld mit Fehler deutlich (Prüfrunde M2): Der Fehlerrand überdeckt sonst den Fokusrand, und der
   Schatten allein hat auf Weiß nur etwa 1,6:1 — ein Ring in der Akzentfarbe mit Abstand, mindestens 3:1 zum Grund */
[data-kontakt-formular] .kf-eingabe[aria-invalid="true"]:focus-visible { outline: 2px solid var(--kf-akzent); outline-offset: 2px; }
/* Fehler je Feld: Zeichen „!“ im Kreis und Satz, Farbe hilft nur mit */
[data-kontakt-formular] p.kf-fehler {
  display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0;
  font-size: 13.5px; line-height: 1.45; font-weight: 500; color: var(--kf-fehler);
}
[data-kontakt-formular] p.kf-fehler::before {
  content: '!'; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 800; line-height: 1;
}
/* Köderfeld: für Menschen und Bildschirmleser unsichtbar, für Automaten ein Feld wie jedes andere */
[data-kontakt-formular] .kf-koeder {
  position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
}
[data-kontakt-formular] p.kf-hinweis { margin: 0; font-size: 13px; line-height: 1.55; color: var(--kf-text2); }
[data-kontakt-formular] p.kf-hinweis a,
[data-kontakt-formular] .kf-status a { color: var(--kf-akzent); text-decoration: underline; text-underline-offset: 3px; border: 0; }
[data-kontakt-formular] .kf-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Senden: die Kappen-Pille der Website (ui-neu.css .kp-primary) in 44 px */
[data-kontakt-formular] .kf-senden {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 66px 0 20px;
  border: 0; border-radius: 999px; background: var(--kf-pille); color: var(--kf-text);
  font: 700 11.5px/1 var(--font, 'Inter Tight', system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;   /* wie die Kappen-Knöpfe (Designregeln) */
  white-space: nowrap; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
[data-kontakt-formular] .kf-senden::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 50px; background: var(--kf-akzent);
  opacity: var(--neu-cap-alpha, .66); clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; transition: width .18s ease;
}
[data-kontakt-formular][data-kf-thema="hell"] .kf-senden::after { opacity: 1; }
[data-kontakt-formular] .kf-senden::before {
  content: ''; position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; z-index: 2; pointer-events: none;
  background-color: var(--kf-tinte);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h13M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h13M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
[data-kontakt-formular] .kf-senden:hover { background: var(--kf-pille-hover); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
[data-kontakt-formular] .kf-senden:hover::after { width: 54px; }
[data-kontakt-formular] .kf-senden:focus-visible,
[data-kontakt-formular] .kf-text-knopf:focus-visible,
[data-kontakt-formular] a:focus-visible { outline: 2px solid var(--kf-akzent); outline-offset: 3px; }
/* Die Bestätigung bekommt den Fokus nur, damit Bildschirmleser sie vorlesen — sie ist nicht bedienbar, also ohne Ring */
[data-kontakt-formular] .kf-danke-titel:focus { outline: none; }
[data-kontakt-formular] .kf-senden[aria-disabled="true"] { opacity: .6; cursor: progress; transform: none; box-shadow: none; }
/* Meldung unter dem Knopf: unbunt, ruhig */
[data-kontakt-formular] .kf-status:empty { display: none; }
[data-kontakt-formular] .kf-status p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kf-text2); }
[data-kontakt-formular] .kf-status-stoerung {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--kf-box);
  box-shadow: inset 0 0 0 1px var(--kf-rand);
}
[data-kontakt-formular] .kf-status-stoerung::before {
  content: 'i'; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px;
  border: 1.5px solid var(--kf-text2); border-radius: 50%; font: italic 700 12px/1 Georgia, serif; color: var(--kf-text2);
}
[data-kontakt-formular] .kf-adresse { font-weight: 600; color: var(--kf-text); -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
/* Bestätigung nach dem Senden */
[data-kontakt-formular] .kf-danke { display: grid; gap: 6px; justify-items: start; padding: 4px 0; }
[data-kontakt-formular] p.kf-danke-titel {
  display: flex; gap: 10px; align-items: center; margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--kf-text);
  border-radius: 6px;
}
[data-kontakt-formular] p.kf-danke-titel::before {
  content: '✓'; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--kf-erfolg); color: var(--kf-tinte); font-size: 15px; font-weight: 800;   /* Prüfrunde M2: Weiß auf Azur hatte 2,8:1 */
}
/* Lange Adressen in der Bestätigung brechen um, statt aus der Karte zu laufen (Prüfrunde M2) */
[data-kontakt-formular] p.kf-danke-text { margin: 0 0 6px 36px; font-size: 15px; line-height: 1.6; color: var(--kf-text2); min-width: 0; overflow-wrap: anywhere; }
[data-kontakt-formular] .kf-text-knopf {
  min-height: 44px; margin: 0 0 0 36px; padding: 0 2px; border: 0; background: none; color: var(--kf-akzent); cursor: pointer;
  font: 500 14px/1.4 var(--font, 'Inter Tight', system-ui, sans-serif); text-decoration: underline; text-underline-offset: 3px;
}
/* „Vertrag widerrufen“ (widerruf-formular.js): die Erklärung zum Prüfen vor „Widerruf bestätigen“ und der Knopf zurück */
[data-kontakt-formular] .kf-erklaerung { display: grid; gap: 10px; padding: 16px 18px; border-radius: 12px; background: var(--kf-box); box-shadow: inset 0 0 0 1px var(--kf-rand); }
[data-kontakt-formular] p.kf-erklaerung-titel { margin: 0; font-size: 15px; line-height: 1.4; font-weight: 650; color: var(--kf-text); border-radius: 6px; }
[data-kontakt-formular] p.kf-erklaerung-titel:focus { outline: none; }
[data-kontakt-formular] .kf-erklaerung blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--kf-text); }
[data-kontakt-formular] .kf-erklaerung dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0; font-size: 14px; line-height: 1.5; }
[data-kontakt-formular] .kf-erklaerung dt { color: var(--kf-leise); }
[data-kontakt-formular] .kf-erklaerung dd { margin: 0; color: var(--kf-text); overflow-wrap: anywhere; }
@media (max-width: 420px) {
  [data-kontakt-formular] .kf-erklaerung dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-kontakt-formular] .kf-erklaerung dd + dt { margin-top: 6px; }
}
[data-kontakt-formular] .kf-zweit {
  min-height: 44px; margin: 0; padding: 0 18px; border: 1px solid var(--kf-rand); border-radius: 999px; background: transparent;
  color: var(--kf-text); font: 600 14px/1 var(--font, 'Inter Tight', system-ui, sans-serif); cursor: pointer;
}
[data-kontakt-formular] .kf-zweit:hover { border-color: var(--kf-akzent); }
[data-kontakt-formular] .kf-zweit:focus-visible { outline: 2px solid var(--kf-akzent); outline-offset: 3px; }
[data-kontakt-formular] .kf-zweit:disabled { opacity: .55; cursor: default; }
/* Erzwungene Systemfarben (Kontrastmodus): Fokus und Felder als echte Linien, sonst verschwänden Ring und Schatten */
@media (forced-colors: active) {
  [data-kontakt-formular] .kf-eingabe:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  [data-kontakt-formular] .kf-eingabe { border: 1px solid CanvasText; }
  [data-kontakt-formular] .kf-senden { border: 1px solid ButtonText; }
  /* Kappe in der Textfarbe, Pfeil darauf in der Knopffarbe — sonst verschwände der Pfeil in der Kappe (Prüfrunde M1) */
  [data-kontakt-formular] .kf-senden::after { forced-color-adjust: none; background: ButtonText; opacity: 1; }
  [data-kontakt-formular] .kf-senden::before { forced-color-adjust: none; background: ButtonFace; }
  [data-kontakt-formular] .kf-danke-titel:focus { outline: 2px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  [data-kontakt-formular] .kf-eingabe, [data-kontakt-formular] .kf-senden, [data-kontakt-formular] .kf-senden::after { transition: none; }
  [data-kontakt-formular] .kf-senden:hover { transform: none; }
}