/* ==========================================================================
   CODEWERK LABS — RESET & BASE
   Setzt die Kaskadenschichten und die typografische Grundlage.
   Setzt tokens.css voraus.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities, overrides;

/* ── RESET ────────────────────────────────────────────────────────────────
   Kein fremdes Reset-Paket. Nur das, was tatsächlich stört.
   ────────────────────────────────────────────────────────────────────── */

@layer reset {

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

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

  /* Bewusst KEIN globales scroll-behavior: smooth.
     Drei Gründe, der dritte ist gemessen:
       1. Es überschreibt ein Verhalten, auf das sich Nutzer verlassen —
          ein Sprung soll ein Sprung sein.
       2. Es erzeugt Bewegung für Menschen, die keine angefordert haben.
          Die prefers-reduced-motion-Ausnahme deckt nur die ab, die es
          im Betriebssystem eingestellt haben.
       3. Es stört jedes programmatische Scrollen. Aufgefallen ist es,
          weil Playwright ein Eingabefeld nicht anklicken konnte —
          „element is not stable". Was Automatisierung stört, stört
          auch Screenreader-Steuerung und Sprungmarken.

     Was bleibt, ist scroll-margin unten: Sprungziele landen nicht
     unter dem oberen Seitenrand. Das ist der Teil, der wirklich hilft. */

  body, h1, h2, h3, h4, h5, h6,
  p, figure, blockquote, dl, dd,
  ul, ol, fieldset, legend {
    margin: 0;
    padding: 0;
  }

  ul[role="list"], ol[role="list"] { list-style: none; }

  /* Bilder verhalten sich wie Blockelemente und laufen nie über.
     Das verhindert die häufigste Ursache für horizontalen Overflow. */
  img, picture, svg, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Formularelemente erben Schrift — Browser tun das nicht von selbst */
  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button { background: none; border: none; cursor: pointer; }

  fieldset { border: none; }

  table { border-collapse: collapse; width: 100%; }

  /* Lange Wörter und URLs sprengen sonst schmale Spalten */
  p, li, dd, h1, h2, h3, h4, figcaption {
    overflow-wrap: break-word;
  }

  /* Anker nicht unter einer fixierten Kopfzeile verstecken */
  :target { scroll-margin-block-start: var(--space-20); }
}


/* ── BASE ─────────────────────────────────────────────────────────────────
   Die typografische Grundhaltung: Sans für alles Gelesene,
   Serif ausschließlich für Display-Ebenen.
   ────────────────────────────────────────────────────────────────────── */

@layer base {

  html {
    /* Kein 62.5%-Trick: er bricht die Nutzereinstellung für Schriftgröße */
    font-size: 100%;
  }

  body {
    margin: 0;
    background-color: var(--color-surface);
    color: var(--color-text-primary);

    font-family: var(--font-ui);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Fängt Überläufe ab, die sonst die ganze Seite horizontal scrollen
       lassen. Die eigentliche Ursache wird trotzdem gesucht — dafür gibt
       es tests/visual/overflow. Das hier ist das Netz, nicht die Lösung. */
    overflow-x: clip;
  }


  /* ── Überschriften ──────────────────────────────────────────────────
     Serif, Gewicht 400. Wirkung über Größe und Weißraum, nie über Bold
     (Masterprompt §18).                                              */

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    text-wrap: balance;   /* verhindert einzelne Wörter in der letzten Zeile */
  }

  h1 {
    font-size: var(--text-heading-lg);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
  }

  h2 { font-size: var(--text-heading); }
  h3 { font-size: var(--text-heading-sm); }

  /* Ab H4 wechselt die Rolle von „Editorial" zu „UI-Struktur" —
     deshalb Sans, deshalb etwas mehr Gewicht. */
  h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: var(--weight-medium);
    line-height: var(--leading-subheading);
  }

  h4 { font-size: var(--text-subheading); }
  h5 { font-size: var(--text-body-lg); }
  h6 { font-size: var(--text-body); }


  /* ── Fließtext ──────────────────────────────────────────────────────── */

  p {
    max-width: var(--measure);
    text-wrap: pretty;
  }

  p + p { margin-block-start: var(--space-4); }


  /* ── Links ──────────────────────────────────────────────────────────────
     Kein permanentes Underline, Underline beim Hover (§25).
     Ausnahme: Links im Fließtext bleiben unterstrichen — dort ist die
     Unterscheidbarkeit wichtiger als die Ruhe, und WCAG 1.4.1 verlangt,
     dass Links nicht allein durch Farbe erkennbar sind.               */

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }

  a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

  p > a, li > a, dd > a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--color-text-secondary);
  }

  p > a:hover, li > a:hover, dd > a:hover {
    text-decoration-color: currentColor;
  }


  /* ── Fokus ──────────────────────────────────────────────────────────────
     Sichtbar, kontraststark, überall gleich. Wird nie entfernt.      */

  :focus { outline: none; }

  :focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Auf dunklem Grund muss der Ring hell sein, sonst verschwindet er */
  .is-inverse :focus-visible,
  .u-surface-inverse :focus-visible {
    outline-color: var(--color-text-inverse);
  }


  /* ── Auswahl ──────────────────────────────────────────────────────── */

  ::selection {
    background-color: var(--color-surface-accent);
    color: var(--color-text-on-accent);
  }


  /* ── Listen im Fließtext ──────────────────────────────────────────── */

  ul:not([role="list"]), ol:not([role="list"]) {
    padding-inline-start: var(--space-5);
    max-width: var(--measure);
  }

  li + li { margin-block-start: var(--space-2); }


  /* ── Weitere Textelemente ─────────────────────────────────────────── */

  strong, b { font-weight: var(--weight-strong); }

  em, i { font-style: italic; }

  small {
    font-size: var(--text-caption);
    color: var(--color-text-secondary);
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
  }

  hr {
    border: none;
    border-block-start: 1px solid var(--color-divider);
    margin-block: var(--space-16);
  }

  blockquote {
    font-family: var(--font-display);
    font-size: var(--text-body-lg);
    line-height: var(--leading-subheading);
    max-width: var(--measure-narrow);
  }


  /* ── Nur für Screenreader ─────────────────────────────────────────── */

  .u-visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }


  /* ── Skip-Link ──────────────────────────────────────────────────────────
     Erste fokussierbare Stelle der Seite. Ohne ihn muss jede
     Tastaturnutzerin die komplette Navigation durchtabben.           */

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: 100;
    padding: var(--space-3) var(--space-5);
    background-color: var(--color-surface-inverse);
    color: var(--color-text-inverse);
    border-radius: var(--radius-button);
    font-size: var(--text-caption);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
    text-decoration: none;
  }
}