/* =====================================================================
   BASE.CSS — Schriften, Reset, Typografie, Fokus, Hilfsklassen.
   Keine Farbwerte hier: alles kommt aus colors.css.
   ===================================================================== */

/* Schriften liegen lokal in /fonts (keine Anfragen an Google/Dritte → DSGVO-freundlich) */
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
    --font-ui: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
    --radius: 20px;
    --radius-sm: 14px;
    --tap: 44px;                 /* Mindestgröße für Touch-Ziele */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

body.dialog-open { overflow: hidden; }

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--info); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

img, svg { max-width: 100%; }

::placeholder { color: var(--muted); opacity: 1; }

/* ---------- Fokus: gut sichtbar für Tastatur & Screenreader-Nutzer ---------- */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 6px;
}
/* Überschriften werden per Skript fokussiert (Seitenwechsel) – dort keinen Ring zeigen */
h1:focus, main:focus { outline: none; }

/* ---------- Icons ---------- */
.ico {
    width: 22px; height: 22px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.ico-sm { width: 16px; height: 16px; }
.ico-lg { width: 26px; height: 26px; stroke-width: 2.2; }

/* ---------- Hilfsklassen ---------- */
.hidden { display: none !important; }
.block { display: block; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { font-family: var(--font-mono); font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.sub { font-size: 14px; color: var(--muted); }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: fixed; left: 12px; top: -80px; z-index: 100;
    background: var(--accent); color: var(--on-accent);
    padding: 12px 16px; border-radius: 12px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Bewegung reduzieren (Betriebssystem-Einstellung) ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}