/* ───────────────────────────────────────────────────────────────────────
   kontakt.css — Komponenten der Kontaktseite (Erweiterung zu legal.css)
   Tokens: oklch via var(); Schatten als --scrim-Fallback (DESIGN.md-Elevation).
   ───────────────────────────────────────────────────────────────────────── */

/* Kontaktformular */
.kontakt-form { margin-top: var(--s-7); display: grid; gap: var(--s-5); max-width: 640px; }
.kf-row { display: grid; gap: var(--s-5); }
@media (min-width: 620px) { .kf-row { grid-template-columns: repeat(2, 1fr); } }

.kf-field { display: flex; flex-direction: column; gap: var(--s-2); }
.kf-field > span {
  font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-600);
}
.kf-field .req { color: var(--accent-600); margin-left: 2px; }

.kf-field input, .kf-field select, .kf-field textarea {
  font-family: var(--font-sans); font-size: var(--type-body); color: var(--ink-900);
  background: var(--paper-00); border: 1px solid var(--ink-200); border-radius: var(--r-sm);
  padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box;
  transition: border-color 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 160ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.kf-field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.kf-field input:focus, .kf-field select:focus, .kf-field textarea:focus {
  outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-100);
}

.kontakt-form .btn { align-self: flex-start; }
.kf-note { font-size: var(--type-body-sm); color: var(--ink-600); margin: var(--s-2) 0 0; line-height: 1.5; }
.kf-note a { color: var(--accent-600); }
.kf-required-hint { font-size: var(--type-body-sm); color: var(--ink-500); margin: 0; }
.kf-required-hint .req { color: var(--accent-600); }

.btn .arrow { transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.btn:hover .arrow { transform: translateX(3px); }

/* Direktkontakt-Liste */
.direkt-list { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .direkt-list { grid-template-columns: repeat(3, 1fr); } }
.direkt-list__item { display: flex; flex-direction: column; gap: var(--s-1); }
.direkt-list__key {
  font-family: var(--font-mono); font-size: var(--type-eyebrow); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-600);
}
.direkt-list__val { font-size: 19px; color: var(--ink-900); line-height: 1.3; }
.direkt-list__val a { color: var(--accent-600); text-decoration: none; }
.direkt-list__val a:hover { text-decoration: underline; }
.direkt-list__note { font-size: var(--type-body-sm); color: var(--ink-600); margin-top: var(--s-1); }

/* Skip-Link */
.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--ink-900); color: var(--paper-00);
  padding: var(--s-3) var(--s-4); border-radius: 0 0 var(--r-sm) 0; z-index: 200;
}
.skip-link:focus { left: 0; }

/* Reduced Motion — page-scoped (site-motion.css schrumpft nur Distanzen) */
@media (prefers-reduced-motion: reduce) {
  .kf-field input, .kf-field select, .kf-field textarea,
  .btn .arrow, .btn:hover .arrow { transition: none; transform: none; }
}