/* =============================================================================
   base.css — Lokale Schriften, Reset, Grundtypografie, Fokus, Bewegung
   -----------------------------------------------------------------------------
   Keine Marken-Werte hier — alles über Tokens aus tokens.css.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Lokale Schriften (@font-face)
   Selbst gehostet als woff2 — KEIN Request an fonts.googleapis.com (DSGVO).
   Aufgeteilt nach Unicode-Bereich (latin / latin-ext): der Browser lädt
   latin-ext nur, wenn osteuropäische Zeichen vorkommen. Deutsche Umlaute
   (ä ö ü ß) liegen im latin-Bereich.

   Bewusste Entscheidung: nur woff2, kein woff-Fallback. Jeder Browser ohne
   woff2-Unterstützung kann auch keine ES-Module ausführen, auf denen die Seite
   aufbaut — ein woff-Fallback wäre totes Gewicht. (Siehe README.)
   -------------------------------------------------------------------------- */

/* Space Grotesk — Display/Headlines */
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/space-grotesk-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* IBM Plex Sans — Fließtext/UI */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* IBM Plex Mono — Labels/Code/Metadaten */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* -----------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Verhindert horizontales Wackeln, wenn die Scrollbar erscheint/verschwindet */
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sanfter Übergang beim Theme-Wechsel */
  transition: background var(--transition), color var(--transition);
}

img, picture, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select, button { font: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* -----------------------------------------------------------------------------
   3. Grundtypografie
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { text-wrap: pretty; }

strong, b { font-weight: 600; }

/* -----------------------------------------------------------------------------
   4. Sichtbarer Tastatur-Fokus (Pflicht — Brief Abschnitt 4)
   :focus-visible blendet den Ring nur bei Tastaturnutzung ein.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* Maus-Fokus ohne Ring (nur wo :focus-visible unterstützt wird) */
:focus:not(:focus-visible) { outline: none; }

/* -----------------------------------------------------------------------------
   5. Hilfsklassen
   -------------------------------------------------------------------------- */
/* Nur für Screenreader sichtbar (z. B. Honeypot-Label, Skip-Link-Text) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Sprunglink zum Hauptinhalt (Barrierefreiheit) */
.skip-link {
  position: absolute; left: var(--space-sm); top: -3rem; z-index: 100;
  background: var(--c-amber); color: #fff;
  padding: .6rem 1rem; border-radius: var(--radius);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-sm); }

/* -----------------------------------------------------------------------------
   6. Bewegung reduzieren (Pflicht — Brief Abschnitt 4)
   Wer reduzierte Bewegung wünscht, bekommt eine ruhige Variante ohne Verlust.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Keine Cross-Fade-Übergänge bei reduzierter Bewegung */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* -----------------------------------------------------------------------------
   6b. Seitenübergänge (native Cross-Document View Transitions)
   Weiche App-artige Wechsel zwischen den statischen Seiten — ganz ohne Bibliothek.
   Browser ohne Unterstützung navigieren normal (automatischer Fallback).
   Die persistente Kopfzeile bleibt über den Wechsel hinweg stehen.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .32s; animation-timing-function: var(--ease); }

/* Kopfzeile als eigenes, ruhendes Element durch den Übergang tragen */
.site-header { view-transition-name: site-header; }

/* -----------------------------------------------------------------------------
   7. Wartungsmodus
   - .maintenance-pending: setzt der synchrone Wächter (maintenance-guard.js), wenn
     beim letzten Besuch Wartung aktiv war → Inhalt verbergen, bis das Gate
     entschieden hat (kein Aufblitzen der echten Seite vor dem Redirect).
   - .preview-banner: dezenter Hinweis, wenn Admin/Vorschau die Seite trotz Wartung
     ansieht.
   -------------------------------------------------------------------------- */
html.maintenance-pending body { visibility: hidden; }

.preview-banner {
  position: fixed; left: 50%; bottom: var(--space-sm); transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  max-width: calc(100% - 2 * var(--space-sm));
  padding: .55rem .9rem;
  background: var(--c-petrol); color: var(--on-dark);
  border: 1px solid var(--c-amber); border-radius: var(--radius);
  box-shadow: var(--shadow-card); font-size: var(--fs-small);
}
.preview-banner__mono { font-family: var(--font-mono); color: var(--c-amber); letter-spacing: .04em; }
.preview-banner__exit {
  margin-left: .25rem; padding: .25rem .7rem;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .04em;
  color: var(--on-dark); border: 1px solid var(--on-dark-muted); border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.preview-banner__exit:hover { color: var(--c-amber); border-color: var(--c-amber); }