/**
 * Modul: CSS Reset
 * Zweck: Browser-Defaults normalisieren, Box-Sizing, Touch-Verhalten
 * Abhängigkeiten: tokens.css
 */

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

/* DIE EINE AUSNAHME VOM `margin: 0` DARUEBER - und sie muss hier stehen.
 *
 * Ein modales `<dialog>` zentriert der Browser NICHT ueber `position`, sondern
 * allein ueber den Aussenabstand: sein UA-Blatt setzt `inset: 0` (alle vier
 * Kanten) und ueberlaesst `margin: auto` die Mitte. Der Stern oben ist eine
 * Autoren-Regel und schlaegt das UA-Blatt - `margin: 0` liess damit JEDEN
 * nativen Dialog in der linken oberen Ecke kleben, festgenagelt an `inset: 0`.
 *
 * Betroffen war nicht eine Stelle, sondern jede: die Symbolauswahl
 * (components/icon-picker.js - Schnellzugriffe, Kalender, Schichtplan,
 * Abfallarten) und der Zuschnitt-Dialog fuers Profilbild (utils/avatar-crop.js).
 * Beide bringen eigene Regeln mit, keine der beiden setzte einen Abstand, und
 * beide erbten deshalb dieselbe Ecke. Genau deshalb wird das hier zurueckgeholt
 * und nicht in den zwei Stylesheets einzeln nachgetragen: die naechste
 * `<dialog>`-Verwendung braucht dann keinen dritten Nachtrag.
 *
 * `auto` ist woertlich der UA-Wert, den der Reset entfernt hat - das stellt das
 * Standardverhalten wieder her, statt eine eigene Zentrierung zu erfinden. */
dialog {
  margin: auto;
}

html {
  font-family: var(--font-sans);
  /* 100% statt 16px: die rem-Skala folgt damit der Schriftgrößen-EINSTELLUNG
   * des Browsers (WCAG 1.4.4), nicht nur dem Seitenzoom; der Default bleibt
   * 16px und ändert nichts am gerenderten Standardbild. */
  font-size: 100%;
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
}

body {
  /* Dieselbe Kette wie an .app-shell in layout.css, mit der Begruendung dort
   * (#1276): 100dvh, wo der Browser dvh kennt; sonst -webkit-fill-available,
   * das sich an html (height: 100%) misst und auf iOS 13.4 bis 15.3 die
   * sichtbare Hoehe ergibt; sonst 100vh. Ohne jede Hoehe waechst der Body mit
   * seinem Inhalt, overflow: hidden schneidet nichts mehr ab, und der
   * Hauptbereich hat keine Grenze, an der er scrollen koennte. */
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--color-bg);
}

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

/* `display: block` oben ist eine Autorenregel und schlaegt das UA-`[hidden]` -
 * jedes `<img hidden>` der App stand damit sichtbar da, etwa das noch nicht
 * geladene Dokument-Thumbnail ueber seinem Glyph (#1340, test:hidden-cascade). */
img[hidden], svg[hidden], video[hidden] {
  display: none;
}

/* `color: inherit` ist hier die WICHTIGSTE Zeile, und sie hat gefehlt: `a` und
 * `input, textarea, select` erben ihre Farbe direkt darunter, `button` als
 * einziges der vier tat es nicht. Ohne sie nimmt ein Button die UA-Farbe
 * `buttontext`, also Schwarz - in BEIDEN Themes. Im Light faellt das nicht auf,
 * im Dark stand ein schwarzes Icon auf #0A0A0C: 1.06:1 (gemessen an
 * #cal-prev/#cal-next, #budget-prev/#budget-next, #rail-toggle).
 *
 * Sichtbar wurde es nur an Knöpfen OHNE Variantenklasse: `.btn--primary`,
 * `--secondary` und `--ghost` setzen alle eine Farbe, `.btn--icon` allein nicht.
 * Deshalb ist der Ort hier und nicht bei `.btn` - der Reset hat `font`, `border`
 * und `background` zurückgesetzt und `color` bei genau dem Element vergessen,
 * das es am nötigsten hat. `inherit` statt eines festen Tokens, weil ein Button
 * auf farbigem Grund die Farbe seiner Flaeche braucht, nicht die des Bodys.
 * Guard: Sonde 14 in test-document-guards.js. */
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Fokus-Styles (Accessibility)
 *
 * Die einzige Basisregel. Sie liest die Tokens aus tokens.css §7b; wer den Ring
 * anders will, überschreibt dort `--focus-ring-color`, statt hier eine zweite
 * Spezifikation danebenzustellen - genau so entstanden die sechs, die es vorher
 * gab (Critique P1, 2026-07-30). */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

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

/* Versteckte, aber zugängliche Elemente */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}