/* =============================================================================
   base.css — Reset, Design-Tokens, Typografie, Schriften
   Quelle der Tokens: rules/design-system.md (WCAG 2.2 AA geprüft).
   Tokens NICHT paraphrasieren — 1:1 übernommen.
   ============================================================================= */

/* --- Schriften (selbst gehostet, kein Google-CDN — revDSG) -------------------
   Fünf @font-face-Deklarationen für die fünf tatsächlich genutzten Schnitte
   (Lora Italic/Bold, Inter Regular/Medium/Bold). Relative Pfade ab dieser
   CSS-Datei — funktionieren in Classic UND Composer Mode, weil CSS und fonts/
   im selben Public-Assets-Baum liegen.
   ACHTUNG (LEARNINGS): Fonts werden ohne ?mtime-Query referenziert und liegen
   unter Cache-Control immutable — nie in-place ersetzen, sondern umbenennen.
   Das Preload im Partial FontPreload.html muss dieselbe URL ohne Query nutzen.

   ENTFERNT 07.08.2026: Lora Regular (400 normal). Keine einzige Regel fordert
   diese Kombination an — jedes font-serif-Element ist entweder eine Headline
   (h1–h4 = weight 700), explizit 600/700 (.stat-tile__value, .ausb-faq__q::after,
   .team-card__photo--placeholder) oder italic (.quote__text, .site-footer__claim,
   .headline-accent). Die Datei lora-regular.woff2 bleibt im Repo, wird aber von
   nichts mehr referenziert und kann bei Gelegenheit gelöscht werden. */
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora/lora-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('../fonts/lora/lora-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/inter/inter-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Design-Tokens ---------------------------------------------------------- */
:root {
    /* Farben (WCAG 2.2 AA geprüft — Kontraste als Kommentar) */
    --color-bg: #faf9f6;
    --color-text: #1e3d38;          /* 11.2:1 auf bg */
    --color-primary: #2a6b5a;       /* 5.9:1 auf bg */
    --color-primary-dark: #205044;  /* Hover für Primary-Buttons */
    --color-accent: #c5583a;        /* 4.1:1 — NUR Flächen/Icons/grosse Headlines */
    --color-accent-text: #a8452c;   /* 5.6:1 auf bg — Akzent-Text/Links */
    --color-accent-text-dark: #8f3a24; /* Link-Hover (dunkler, nicht auf accent wechseln) */
    --color-muted: #5a6b64;         /* 5.3:1 auf bg — Meta-Text */
    --color-border: #b8c4be;        /* dekorative Card-Borders */
    --color-border-input: #5a6b64;  /* WCAG 1.4.11 Non-text Contrast 3:1 */
    --color-white: #ffffff;

    /* Typografie */
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --body-size: 18px;              /* Zielgruppe 50+ */
    --body-line-height: 1.6;
    --heading-line-height: 1.2;

    /* Spacing-Skala (Basis 8px) */
    --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
    --space-5: 48px; --space-6: 64px; --space-7: 96px;

    /* Radius */
    --radius-card: 16px;
    --radius-button: 8px;
    --radius-input: 8px;

    /* Schatten (dezent) */
    --shadow-card: 0 2px 8px rgba(30, 61, 56, 0.08);

    /* Sticky-Header-Höhe (für scroll-margin-top der Ankerziele) */
    --header-height: 80px;
}

/* --- Moderner Minimal-Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
/* :where() hält die Spezifität bei 0 — sonst schlägt dieser Reset (0-1-1)
   Komponenten-Klassen wie .mainnav__sublist (0-1-0) und frisst deren
   padding (Mobil-Audit 07.08.2026: 2. Menüebene ohne Einrückung). */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }

/* --- Basis-Typografie -------------------------------------------------------- */
body {
    font-family: var(--font-sans);
    font-size: var(--body-size);
    line-height: var(--body-line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: var(--heading-line-height);
    color: var(--color-text);
    text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }

p, li { max-width: 66ch; }

/* <address> wird für Adressblöcke semantisch genutzt (Standort-Detail, Praxis-
   Kontakt, Praxis-Startseite). Der Browser-Default stellt es kursiv dar — das
   ist hier unerwünscht: die Optik soll identisch zum vorherigen <p>/<dd>-
   Markup bleiben. Bewusst OHNE max-width — die tragenden Klassen
   (.hero__lead, .standort-detail__facts dd) bringen ihre Breite selbst mit. */
address { font-style: normal; }

/* Lora Italic nur für kurze Schlüsselwörter in Headlines */
.headline-accent { font-style: italic; color: var(--color-accent-text); }

a { color: var(--color-accent-text); text-decoration: underline; }

/* --- Barrierefreiheit -------------------------------------------------------- */
/* Sichtbarer Fokus-Ring (NIE outline:none) */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip-Link: nur bei Fokus sichtbar */
.skip-link {
    position: absolute;
    left: var(--space-2);
    top: -100px;
    z-index: 1000;
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: top 0.2s ease-out;
}
.skip-link:focus { top: var(--space-2); }

/* Sprungziele nicht unter dem Sticky-Header verschwinden lassen */
:target, [id] { scroll-margin-top: var(--header-height); }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}