/* ============================================================================
 * BASE — Typografie, Grundformatierung, Icon-Hilfsklassen
 * Herkunft: Con4Mews (wwwroot/css/site.css)
 * Setzt 01-tokens.css voraus.
 * ==========================================================================*/

html, body {
    font-family: var(--font-family-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: var(--line-height-base);
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

/* Redesign 01.09.2026: h1 als klarer Seitenanker (Refactoring UI: Ueberschrift deutlich vom Text
   absetzen). Nutzerfeedback 21.10.2026 ("zu gross und zu grob"): Skala nach Fluent 2 (Title 3
   24px, Subtitle 1 20px, Subtitle 2 16px) statt Bootstraps 2rem/1.75rem/1.5rem fuer h2-h4 - sonst
   waren Abschnittsueberschriften fast so gross wie der Seitentitel. Klassen .h1-.h6 (z. B. die
   haeufigen <h2 class="h5 card-title">) erhalten dieselben Werte wie die Elemente. */
h1, .h1 { font-size: 1.5rem; margin-bottom: 1rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.125rem; }
h4, .h4, h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: var(--font-size-base); }

/* Bootstraps "bolder" (= 700) auf <strong>/<b>/.fw-bold gibt es als Inter-Schnitt nicht (geladen:
   400-600) - der Browser fettete kuenstlich nach, was grob wirkte. Halbfett ist der kraeftigste
   echte Schnitt. */
b, strong { font-weight: var(--font-weight-semibold); }
.fw-bold { font-weight: var(--font-weight-semibold) !important; }
h1:focus { outline: none; }

a, .btn-link {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color var(--motion-fast);
}
a:hover { color: var(--color-primary); }

/* Redesign 01.09.2026: sichtbarer, auf die Markenfarbe abgestimmter Fokusring statt des
   Browser-Standards - WCAG 2.2 SC 2.4.7 "Focus Visible" fuer Tastaturnutzung. outline-offset haelt
   den Ring sichtbar von eng anliegenden Nachbarelementen ab. UX-Review 21.10.2026: Farbe ueber
   --color-focus-ring statt --color-primary (SC 1.4.11 verlangt >=3:1, --color-primary lag auf
   hellem Grund bei ~2.2:1). */
:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Formularfelder haben bereits einen eigenen, in die Feldoptik integrierten Fokus-Ring
   (box-shadow, siehe .form-control:focus/.form-select:focus in 04-components.css) - der globale
   Outline-Ring darueber wirkte als ueberfluessiger zweiter Ring, daher hier bewusst deaktiviert. */
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none;
}

/* ── Icon-Hilfsklassen ────────────────────────────────────────────────────
   Einheitliche Icon-Groessen fuer Inline-SVG-Icons (z. B. Lucide/Blazicons).
   Ersetzt Inline-Styles in Komponenten fuer konsistente Groessen im ganzen UI. */
.icon--sm      { width: 0.8rem;  height: 0.8rem;  margin-right: 0.25rem; }
.icon--md      { width: 0.85rem; height: 0.85rem; margin-right: 0.25rem; }
.icon--btn     { width: 0.9rem;  height: 0.9rem;  margin-right: 0.3rem;  }
.icon--nav     { width: 1rem;    height: 1rem;    margin-right: 0.4rem;  }
.icon--mobile-nav { width: 1rem; height: 1rem; color: #F1F5F9 !important; stroke: #F1F5F9 !important; }
.icon--stat    { width: 1rem;    height: 1rem;                           }
.icon--heading { width: 1.4rem;  height: 1.4rem;  margin-right: 0.3rem; vertical-align: middle; }

/* ── Validation ──────────────────────────────────────────────────────────*/
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-primary); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger-text); } /* --color-danger nur ~3.8:1 (SC 1.4.3) */

/* ── Spinner (falls kein Bootstrap-Spinner-Markup verwendet wird) ─────────*/
.spinner-border { color: var(--color-primary); }