/* kontakt.css — Kontaktformular (Klickdummy).
   Farben und Maße ausschließlich aus tokens.css. Die Karte (.karte) und der
   Zeigereffekt kommen aus varianten.css; Formularfelder sehen aus wie in der
   Terminbuchung, damit beide Formulare dieselbe Hand zeigen. */

.karte { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-radius: var(--r-md); padding: var(--s-5); }

/* Formular links, direkter Kontakt rechts daneben und beim Scrollen stehend.
   Schmal kommt der direkte Kontakt unter das Formular. */
.kf-raster { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-6);
  align-items: start; }
@media (min-width: 60em) {
  .kf-raster { grid-template-columns: minmax(0,1fr) minmax(0,19rem); gap: var(--s-7); }
  .kf-direkt { position: sticky; inset-block-start: 7.5rem; }
}
@media (min-width: 40em) { .kf.karte { padding: var(--s-6); } }

.kf .kf-hinweis { font-size: var(--t-sm); color: var(--text-sekund); margin: 0 0 var(--s-6);
  letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* ---- Gruppen: nummeriert wie die Sektionen der Seite ---- */
.kf-gruppe { border: 0; padding: 0; margin: 0 0 var(--s-7); min-inline-size: 0;
  display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-5) var(--s-5); }
@media (min-width: 40em) {
  .kf-gruppe { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .kf-voll { grid-column: 1 / -1; }
}
.kf-gruppe > legend { display: flex; align-items: baseline; gap: var(--s-3);
  float: left; grid-column: 1 / -1; inline-size: 100%; padding: 0 0 var(--s-3); margin: 0;
  border-block-end: 1px solid var(--c-linie);
  font-family: var(--f-display); font-weight: 500; font-optical-sizing: auto;
  font-size: var(--t-lg); letter-spacing: var(--ls-lg); line-height: var(--lh-lg); }
/* float nimmt der Legende die Sonderrolle: Browser setzen eine Legende sonst
   auf die obere Rahmenlinie und schieben sie halb aus der Gruppe heraus. So
   wird sie ein gewöhnliches Rasterelement über beide Spalten. */
.kf-nr { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400;
  color: var(--akzent-hell); letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }

/* ---- Felder ---- */
.kf-feld { min-inline-size: 0; }
.kf label, .kf-anrede > legend { display: block; font-size: var(--t-sm); font-weight: 500;
  margin-block-end: var(--s-2); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.kf-optional { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 400;
  color: var(--text-sekund); margin-inline-start: var(--s-1);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); }
.kf input[type="text"], .kf input[type="tel"], .kf input[type="email"], .kf textarea {
  inline-size: 100%; min-block-size: var(--s-7); padding: var(--s-3);
  font: inherit; background: var(--bg-karte); color: var(--c-marine);
  border: 1px solid var(--c-linie); border-radius: var(--r-sm);
  transition: border-color var(--e-farbe); }
.kf input:hover, .kf textarea:hover { border-color: color-mix(in srgb, var(--c-marine) 40%, var(--c-linie)); }
.kf textarea { min-block-size: 8rem; resize: vertical; }
.kf input::placeholder, .kf textarea::placeholder { color: color-mix(in srgb, var(--text-sekund) 70%, transparent); }
.kf input:focus-visible, .kf textarea:focus-visible, .kf button:focus-visible,
.kf-fertig button:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 2px; }
.kf [aria-invalid="true"] { border-color: var(--c-storno); }
.feld-fehler { display: block; font-size: var(--t-sm); color: var(--c-storno);
  margin-block-start: var(--s-2); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.feld-fehler:empty { display: none; }

/* ---- Anrede: drei Kacheln mit echten Radios darunter ---- */
.kf-anrede { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.kf-anrede > legend { float: none; padding: 0; }
.kf-anrede-wahl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-3); }
.kf-anrede input { position: absolute; inline-size: 1px; block-size: 1px;
  margin: -1px; overflow: hidden; clip-path: inset(50%); }
.kf-anrede label { display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  margin: 0; min-block-size: 44px; padding: var(--s-2) var(--s-3); cursor: pointer;
  font-size: var(--t-base); font-weight: 400; background: var(--bg-karte);
  border: 1px solid var(--c-linie); border-radius: var(--r-sm);
  letter-spacing: var(--ls-base); line-height: var(--lh-base);
  transition: border-color var(--e-farbe), background-color var(--e-farbe); }
.kf-anrede label:hover { border-color: var(--c-marine); }
.kf-anrede label::before { content: ""; inline-size: 11px; block-size: 11px; flex: none;
  border: 1.5px solid var(--c-linie); border-radius: 50%;
  transition: border-color var(--e-farbe), box-shadow var(--e-farbe); }
.kf-anrede input:checked + label { border-color: var(--c-marine); background: var(--bg-seite); }
.kf-anrede input:checked + label::before { border-color: var(--akzent-hell);
  box-shadow: inset 0 0 0 2px var(--bg-karte), inset 0 0 0 11px var(--akzent-hell); }
.kf-anrede input:focus-visible + label { outline: 3px solid var(--akzent-hell); outline-offset: 2px; }
.kf-anrede[aria-invalid="true"] label { border-color: var(--c-storno); }

/* ---- Einwilligung ---- */
.kf-einwilligung { display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: var(--s-2) var(--s-3); align-items: start;
  padding: var(--s-4); margin-block-end: var(--s-6);
  background: var(--bg-seite); border-inline-start: 3px solid var(--c-gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.kf-einwilligung input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.1rem 0 0;
  accent-color: var(--c-marine); cursor: pointer; }
.kf-einwilligung label { margin: 0; font-weight: 400; font-size: var(--t-xs);
  letter-spacing: var(--ls-xs); line-height: 1.55; color: var(--text-primar); cursor: pointer;
  hyphens: auto; }
.kf-einwilligung label::after { content: " *"; color: var(--akzent-hell); }
.kf-einwilligung .feld-fehler { grid-column: 2; margin: 0; }
.kf-einwilligung:has([aria-invalid="true"]) { border-inline-start-color: var(--c-storno); }

.kf .kf-entwurf, .kf-fertig .kf-entwurf { font-size: var(--t-sm); color: var(--text-sekund);
  margin: var(--s-4) 0 0; letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }

/* ---- Bestätigung ---- */
.kf-fertig { background: var(--bg-karte); border: 1px solid var(--c-linie);
  border-inline-start: 3px solid var(--c-geprueft); border-radius: var(--r-md);
  padding: var(--s-6); }
.kf-fertig:focus { outline: none; }
.kf-fertig h2 { margin: 0 0 var(--s-3); }
.kf-fertig p { margin: 0 0 var(--s-3); }
.kf-fertig .btn-zweit { margin-block-start: var(--s-4); }

/* ---- Direkter Kontakt ---- */
.kf-direkt h2 { font-size: var(--t-lg); letter-spacing: var(--ls-lg); line-height: var(--lh-lg);
  margin: 0 0 var(--s-4); }
.kf-direkt dl { margin: 0; display: grid; gap: var(--s-1); }
.kf-direkt dt { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--text-sekund);
  letter-spacing: var(--ls-xs); line-height: var(--lh-xs); margin-block-start: var(--s-3); }
.kf-direkt dt:first-child { margin-block-start: 0; }
.kf-direkt dd { margin: 0; font-size: var(--t-sm); letter-spacing: var(--ls-sm); line-height: var(--lh-sm); }
.kf-direkt a, .kf-termin a { color: var(--text-primar); text-decoration-color: var(--akzent-hell);
  text-underline-offset: 3px; }
.kf-direkt a:hover { text-decoration-thickness: 2px; }
.kf-direkt .nummer { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.kf-direkt .kf-termin { margin: var(--s-5) 0 0; padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--c-linie); font-size: var(--t-sm); font-weight: 500; }
.kf-termin a::after { content: " →"; }

@media (prefers-reduced-motion: reduce) {
  .kf input, .kf textarea, .kf-anrede label, .kf-anrede label::before { transition: none; }
}