/* ============================================================
   SITE-BASIS — gemeinsame Typografie und Farben der öffentlichen Seiten
   Wird als LETZTES Stylesheet geladen (nach den Seiten-Stylesheets).

   Grundsätze:
   - EINE Schriftfamilie: Nunito für Überschriften, Nunito Sans für Text (Menü, Seiten und Footer gleich).
   - Wenige feste Schriftstufen (siehe --fs-*); Mindestgröße 12 px.
   - Kontrast: Text mind. 4,5:1 (Grau nie heller als --text-2; weiße Schrift nie auf dem hellen Markenblau).
   - Markenblau #0096ff bleibt für große Flächen, Linien, Logo, Licht und große Wörter.
     Für Schaltflächen mit Text gilt --accent-solid, für Blau als Textfarbe --accent-text.
   Diese Variablen haben eigene Namen und stören keine Seiten-Variablen.
   ============================================================ */
:root {
    --accent-solid: #0077cc;         /* Knopf-Füllung mit weißer Schrift: 4,7:1 */
    --accent-solid-hover: #0068b8;   /* Hover: 5,9:1 */
    --accent-text: #005fa3;          /* Blau als Textfarbe auf Weiß, Grau und Blau-Tönung: ≥ 5:1 */

    --text-1: #111113;
    --text-2: #636366;               /* Zweittext: 4,7:1 auf Weiß, 4,5:1 auf #f5f5f7 */

    /* Schriftstufen (Basis 16 px) */
    --fs-xs:  .75rem;      /* 12  Kleingedrucktes, Etiketten */
    --fs-sm:  .875rem;     /* 14  Hilfetexte, Meta */
    --fs-md:  .9375rem;    /* 15  Bedienelemente, Listen */
    --fs-base: 1rem;       /* 16  Fließtext */
    --fs-lg:  1.125rem;    /* 18  Einleitungen */
    --fs-xl:  1.25rem;     /* 20  Kleine Titel */
    --fs-2xl: 1.5rem;      /* 24  Titel */
    --fs-3xl: 1.75rem;     /* 28  Zwischenüberschriften */
    --fs-4xl: 2rem;        /* 32  Überschriften */

    --font-text: 'Nunito Sans', 'Nunito', sans-serif;
    --font-head: 'Nunito', 'Nunito Sans', sans-serif;
}

body {
    font-family: var(--font-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Überschriften: gleiche Familie überall, ausgewogener Zeilenumbruch */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Menü, Konto-Menü und Footer in derselben Schrift wie die Seiten */
.glass-navbar, .side-sheet, .bottom-sheet, .top-info-bar, .megamenu, .nav-pop, .nav-cart-panel,
.footer-modern { font-family: var(--font-text); }
.footer-modern h1, .footer-modern h2, .footer-modern h3, .footer-modern h4, .footer-modern h5, .footer-modern h6,
.sheet-user-name, .nav-pop-title { font-family: var(--font-head); }

/* Knöpfe: kräftiges Blau mit weißer Schrift (Kontrast), Hover etwas dunkler */
.btn--accent:hover, .shop-btn--primary:hover, .kp-btn--primary:hover, .mqm-btn--primary:hover, .auth-btn--primary:hover,
.software-pricing-btn--primary:hover, .device-btn--primary:hover, .faq-contact-btn--primary:hover, .nav-cart-cta:hover {
    background: var(--accent-solid-hover);
    border-color: var(--accent-solid-hover);
}

/* Tastatur-Fokus überall sichtbar */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
}