/* ============================================================================
 * 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: 500;
    letter-spacing: -0.01em;
}

h1 { font-size: 1.6rem; margin-bottom: 1.25rem; }
h5 { font-size: 1.05rem; }
h1:focus { outline: none; }

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

/* ── 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); }