/* Design-Token-Korrekturen — wird NACH dem Hauptstylesheet geladen und überschreibt
 * dort definierte Custom Properties bzw. Regeln.
 *
 * Bewusst als eigene Datei statt als Änderung in hypofy.webflow.css und
 * hypofy.webflow.shared.*.min.css: die Site lädt zwei getrennte 175-KB-Stylesheets
 * (41 Seiten das eine, 38 Seiten das andere). Eine Änderung dort träfe die
 * Cache-Umbenenn-Regel und damit 79 Referenzen — und müsste doppelt gepflegt werden.
 */

/* --- Font-Fallback -------------------------------------------------------------
 * Vorher: "Outfit CSTM", Verdana, sans-serif. Verdana ist metrisch deutlich breiter
 * als Outfit; bei blockierter oder langsamer Webfont verschiebt sich das Layout
 * sichtbar. Die Systemschriften unten liegen metrisch nahe an Outfit.
 * "Outfit" bleibt als zweite Familie drin — /css/outfit.css deklariert sie.
 */
/* Der Token wird im Hauptstylesheet an vier Stellen neu definiert — auf :root UND auf
   body (inklusive drei Media-Queries). Eine :root-Definition allein verliert deshalb
   gegen die body-Definition. Zusätzlich setzt body die font-family literal, also ganz
   ohne Token; darum beide Wege überschreiben. */
:root,
body {
  --_typography---fonts--primary-font: "Outfit CSTM", "Outfit", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
  font-family: var(--_typography---fonts--primary-font);
}

/* --- Formularfelder ------------------------------------------------------------
 * Der Bestand setzt auf .form-text-field: 12px Radius an den oberen Ecken plus eine
 * schwarze 1px-Unterkante (border-style: none none solid, border-bottom schwarz).
 * Beides raus: Ecken gerade, Unterkante im hellen Grau, das in derselben Regel
 * schon für die übrigen Seiten hinterlegt ist. Die Kante bleibt, damit das Feld
 * auch auf weißem Grund als Feld erkennbar ist.
 * Kein Pill-Radius hier — Pill-Felder neben Pill-Buttons wirkten zu rund
 * (Rollback 2026-07-28). Die 999px im Bestand sitzen auf Toggle-Switches, dort
 * ist Pill korrekt und bleibt. */
.form-text-field,
.form-text-field.remarks-field {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-color: #d9d9d9;
}

/* --- Zeilenlänge ---------------------------------------------------------------
 * Gemessen im Blog: 720px Spaltenbreite bei 16,5px Schrift = 98 Zeichen pro Zeile,
 * lesbar sind 70–75. 34em ≈ 561px ≈ 75 Zeichen — das obere Ende der Spanne, also der
 * kleinste nötige Eingriff.
 * Nicht in ch: bei Outfit ist 1ch = 10,82px (die Ziffer 0 ist breit), 75ch wären 812px
 * und damit breiter als die Spalte — die Einheit führt hier in die Irre.
 * Begrenzung auf die Textelemente, nicht auf den Container: Bilder, Tabellen und
 * Einbettungen behalten die volle Breite.
 */
.rich-text-blog p,
.rich-text-blog li,
.rich-text-blog blockquote {
  max-width: 34em;
}

/* --- Sichtbarer Focus-Ring -----------------------------------------------------
 * Im Bestand existierte genau eine Focus-Regel (.form-text-field:focus).
 * Tastaturbedienung war damit praktisch unsichtbar. Gold hebt sich auf den hellen
 * Flächen und auf der dunklen CTA-Kachel gleichermaßen ab.
 * :focus-visible statt :focus, damit Mausklicks keinen Ring hinterlassen.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--_colors---brand-colors--gold);
  outline-offset: 3px;
}