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

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.65;
    font-size: 0.95rem;
    scroll-behavior: smooth;
    margin: 0;
}

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

/* Redesign 01.09.2026 (Nutzerwunsch "zentral schöner/angenehmer"): h1 vorher 1.6rem/font-weight
   500 - etwas groesser und kraeftiger fuer mehr Praesenz als Seitenanker (staerkere visuelle
   Hierarchie zum Fliesstext, vgl. Refactoring-UI-Faustregel "vergroessere den Kontrast zwischen
   Ueberschrift und Text staerker als intuitiv"), Buchstabenabstand dafuer minimal enger. */
h1 { font-size: 1.75rem; margin-bottom: 1.25rem; }
h5 { font-size: 1.05rem; }
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.11 "Focus Not Obscured"/SC 2.4.7 "Focus Visible" fuer
   Tastaturnutzung. outline-offset haelt den Ring sichtbar von eng anliegenden Nachbarelementen ab. */
:focus-visible {
    outline: 2px solid var(--color-primary);
    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); }

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