/* ==========================================================================
   Kontakt & Rechtliches — ruhiger Token-/Typo-Refresh
   Nur Kontakt-, Impressum- und Datenschutzseite. Konsumiert ausschliesslich
   Tokens/Primitives aus style.css, erfindet keine neuen Farben.
   ========================================================================== */

/* ---------- Kontakt: Page-Hero-H1 auf die laute Stufe ---------- */
.page-hero h1 {
  font-size: var(--size-loud);
}

/* ---------- Kontakt: Formular-Karte als Papier-Ring statt Schwebe-Schatten
   .paper-card/.strong liefern Hintergrund, Radius und Ring bereits aus
   style.css (Kaskade); hier nur der alte Rand entfernt, damit Ring und
   Border sich nicht doppeln. ---------- */
.kontakt-form-wrap.paper-card {
  border: none;
}

/* ---------- Kontakt: "Oder direkt per Mail"-Label mono-artig ---------- */
.kontakt-mail-label {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  letter-spacing: .16em;
}

/* ---------- Kontakt: Fokus-Ring in Marken-Stops statt Default-Orange
   Fallback zuerst (opake Kante fuer Browser ohne color-mix), danach die
   weiche Variante — ungueltige color-mix-Deklaration wird ignoriert,
   die opake Kante bleibt bestehen. ---------- */
#kontakt-form .field input:focus,
#kontakt-form .field textarea:focus,
#kontakt-form .field select:focus {
  /* --c2 (Orange), NIE --c4: Rot ist im System exklusiv die Fehlerfarbe
     (.field.invalid) - Fokus muss von Invalid unterscheidbar bleiben. */
  border-color: var(--c2);
  box-shadow: 0 0 0 3px var(--c2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c2) 22%, transparent);
}
/* Invalid schlaegt Fokus: waehrend der Fehlerkorrektur (Feld ist .invalid UND
   :focus) muss der rote Rand sichtbar bleiben - die ID-Fokus-Regel oben
   wuerde sonst per Spezifitaet die .field.invalid-Regel aus style.css schlucken. */
#kontakt-form .field.invalid input:focus,
#kontakt-form .field.invalid textarea:focus {
  border-color: var(--c4);
}

/* Mail-Link: der Bestands-border-bottom-Hover wuerde mit der grad-underline
   eine Doppel-Linie bilden - Bestandslinie aus, nur die Verlaufslinie lebt. */
.kontakt-mail-link,
.kontakt-mail-link:hover,
.kontakt-mail-link:focus-visible {
  border-bottom: none;
}

/* ---------- Impressum/Datenschutz: H1 moderat angehoben
   Bewusst zwischen Bestand (52px) und --size-loud (96px) — Rechtstexte
   fluestern weiterhin, bekommen nur mehr Praesenz. ---------- */
.legal-layout h1 {
  font-size: clamp(36px, 6.4vw, 70px);
}

/* ---------- Datenschutz: Abschnitts-Nummern in Clash Display mit
   dezenter Verlaufslinie darunter. Reiner Stil-Wrapper um die im Text
   bereits vorhandene Ziffer ("1." etc.) — keine Textaenderung. ---------- */
.legal-num {
  display: inline-block;
  position: relative;
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  padding-bottom: 2px;
  margin-right: 2px;
}
.legal-num::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--grad);
  opacity: .5;
}

/* Datenschutz-TOC-Links und Mail-Link im Kontaktformular bekommen die
   Verlaufs-Underline direkt ueber die Klasse .grad-underline im HTML (wie
   an anderer Stelle der Seite bereits ueblich). Der Datenschutz-Link im
   Formular-Hinweis hat in style.css aber eine dauerhafte text-decoration
   -- die muss weichen, sonst doppelt sich die Linie beim Hover. */
.form-hint a.grad-underline {
  text-decoration: none;
}