/* Sommer Design System 2.0 – Basis. Setzt nur Tokens aus tokens/tokens.css ein; keine eigenen Farb- oder Maßwerte.
   Reihenfolge der Einbindung: tokens/tokens.css → css/base.css → css/components.css → Projekt-CSS. */

@font-face { font-family: Archivo; src: url('../fonts/Archivo-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Manrope; src: url('../fonts/Manrope-variable.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

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

/* Raster: eine linke Kante für alle Bänder. --ds-gutter = Seitenrand (Token gutter, schmal gutter-narrow),
   --ds-edge = Seitenrand oder, auf breiten Bildschirmen, Abstand bis zum 1200-px-Container. Bruchstelle 600 px. */
:root { --ds-gutter: var(--size-gutter); --ds-edge: max(var(--ds-gutter), calc((100% - var(--size-container-max)) / 2)); }
@media (max-width: 600px) { :root { --ds-gutter: var(--size-gutter-narrow); } }
/* Band: Fläche über die volle Breite, Inhalt an der gemeinsamen Kante */
.ds-band { padding-left: var(--ds-edge); padding-right: var(--ds-edge); }
/* Container: Inhalt im 1200-px-Rahmen mit Seitenrand */
.ds-container { max-width: calc(var(--size-container-max) + 2 * var(--ds-gutter)); margin-left: auto; margin-right: auto; padding-left: var(--ds-gutter); padding-right: var(--ds-gutter); }

body {
  margin: 0;
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-text);
  font-size: var(--type-body-md-size);
  font-weight: var(--type-body-md-weight);
  line-height: var(--type-body-md-leading);
  /* keine -webkit-font-smoothing: antialiased – auf macOS wird Text damit dünner und schlechter lesbar (Testerrückmeldung 11.11.2026) */
}

/* Werkzeuge: App-Typografie. Nie auf <html> selbst setzen: sonst schrumpft die rem-Basis und alle rem-Größen mit */
[data-density="compact"]:not(html), html[data-density="compact"] body {
  font-size: var(--type-app-body-size);
  line-height: var(--type-app-body-leading);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); text-wrap: balance; }
h1 { font-size: var(--type-h1-size); font-weight: var(--type-h1-weight); line-height: var(--type-h1-leading); letter-spacing: var(--type-h1-tracking); }
h2 { font-size: var(--type-h2-size); font-weight: var(--type-h2-weight); line-height: var(--type-h2-leading); letter-spacing: var(--type-h2-tracking); }
h3 { font-size: var(--type-h3-size); font-weight: var(--type-h3-weight); line-height: var(--type-h3-leading); letter-spacing: var(--type-h3-tracking); }
h4 { font-size: var(--type-h4-size); font-weight: var(--type-h4-weight); line-height: var(--type-h4-leading); letter-spacing: var(--type-h4-tracking); }
[data-density="compact"] h1 { font-size: var(--type-app-title-size); line-height: var(--type-app-title-leading); }
[data-density="compact"] h2 { font-size: var(--type-app-heading-size); line-height: var(--type-app-heading-leading); }
[data-density="compact"] h3, [data-density="compact"] h4 {
  font-family: var(--type-app-subheading-family); font-size: var(--type-app-subheading-size);
  font-weight: var(--type-app-subheading-weight); line-height: var(--type-app-subheading-leading); letter-spacing: 0;
}

p { margin: 0 0 var(--space-xs); }
small, .ds-small { font-size: var(--type-app-small-size); }

a { color: var(--color-text-link); text-underline-offset: 2px; }
a:hover { color: var(--color-text-primary); }

/* Fokus: immer sichtbar bei Tastaturbedienung, nie entfernen */
:focus-visible { outline: var(--size-focus-ring) solid var(--color-border-focus); outline-offset: var(--size-focus-offset); }

.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Eingebettetes Symbol-Sprite: unsichtbar, ohne Platz (das Attribut hidden wirkt auf <svg> nicht überall); nicht display: none */
.ds-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ds-skip-link { position: absolute; left: -9999px; }
.ds-skip-link:focus { left: var(--space-sm); top: var(--space-2xs); z-index: var(--layer-dialog); background: var(--color-bg-surface); padding: var(--space-2xs) var(--space-xs); }

.ds-numeric { font-variant-numeric: tabular-nums; }
.ds-label-caps {
  font-size: var(--type-label-caps-size); font-weight: var(--type-label-caps-weight);
  letter-spacing: var(--type-label-caps-tracking); text-transform: uppercase; color: var(--color-text-muted);
}

::selection { background: var(--color-accent-tint); color: var(--color-text-primary); }

@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; }
}

/* Hohe Kontraste (Windows): Systemfarben, Rahmen und Fokus bleiben sichtbar */
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}