/* ============================================================
   base.css — eigene Basis & Reset (Claude-Look)
   Ladereihenfolge:  pico.min.css → tokens.css → base.css → main.css
   Schreibt einen schlanken, kompakten Grund-Look fest, unabhaengig
   von Picos Defaults (das fruehere Semantic-Reset ist entfallen).
   Werte kommen ausschliesslich aus tokens.css.
   ============================================================ */

/* --- 1) Kompakte, FESTE Root-Schrift -----------------------------------
   Pico skaliert die Schrift je Breakpoint hoch (bis 131%). Wir pinnen sie
   auf die Token-Basis -> konstant & kompakt, kein Hochskalieren auf Desktop. */
:root { --pico-font-size: var(--font-size-root); }
html  { font-size: var(--font-size-root); }

/* --- 2) Schlanker, robuster Reset (best practice) ---------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
img, svg, video, canvas { max-width: 100%; }

/* Headings im Claude-Stil: ruhiges Semibold, enge Zeilen, leicht negatives Tracking.
   Margin bewusst 0 (s. Reset oben) -> vertikaler Rhythmus kommt gezielt aus den
   Komponenten (kein versehentliches "Kleben" oder Doppel-Spacing). Konvention:
     - Seiten-Header  (hgroup)              -> margin-bottom: var(--space-6)
     - Section-Label  (h2.card_title_extern)-> margin: var(--space-6) 0 var(--space-3)
     - Titel in Kacheln/Titlebars            -> bleiben bündig (margin 0)
   Alle Abstände aus der Spacing-Skala (--space-*), nie Hartwerte. */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-tight);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text-strong);
}

/* --- 3) Links: Claude-Look ---------------------------------------------
   Keine Unterstreichung; nur dezent beim Hover. Farbe bleibt wie von den
   Komponenten vorgegeben (nicht global ueberschreiben). */
a, [role="link"] { text-decoration: none; }
a:hover, [role="link"]:hover { text-decoration: underline; }

/* --- 4) Sichtbarer Fokus (Tastatur-Bedienung) -------------------------- */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }