/* ─────────────────────────────────────────────────────────────
   site.css — das Grundgerüst. Jede der 38 Seiten bindet es ein.

   HIER STEHT, WAS JEDE SEITE IST: Zurücksetzung, Farben,
   Schriftketten, Grundschrift, Fokusring, die Leiste oben und der
   Streifen unten, dunkler Modus.

   HIER STEHT NICHT, WIE EINE LESESEITE AUSSIEHT. Das war bis zum
   22.09.2026 vermischt und ist nach text.css gewandert — aufgefallen
   an der Startseite, die anders gebaut ist: Ihre Leiste trägt nur den
   Rahmen, das Layout steckt in einem Container darin. Was 37 Seiten
   gleichzeitig brauchen, ist deshalb noch lange nicht dasselbe.

   DIESE DATEI ÄNDERT NICHTS AM AUSSEHEN.
   ───────────────────────────────────────────────────────────── */

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

:root {
  --black: #111111;
  --gray-dark: #444444;
  --gray-mid: #6b6b6b;  /* 5,33 : 1 auf Weiss. Vorher #888888 mit 3,54 : 1 -- unter
                              der Lesbarkeitsschwelle von 4,5 : 1. */
  --gray-light: #f5f5f5;
  --white: #ffffff;
  --border: #e0e0e0;

  --radius-sm: 4px;
  --transition: 0.25s ease;

  /* Schriftketten an EINER Stelle. Fällt Playfair aus, soll die
     Seite auf Georgia landen und nicht auf Times New Roman. */
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  /* Die drei Spaltenbreiten. Mehr Werte gab es vorher, aber keine
     mehr Absichten. */
  --w-wide: 1400px;   /* Startseite */
  --w-page: 860px;    /* Archiv, Projekte */
  --w-read: 640px;    /* Artikel und Lesetexte. Seit 22.09.2026; vorher
                          680px, das ergab rund 77 Zeichen je Zeile. */
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  background: var(--white);
  color: var(--black);
  font-weight: 400;  /* Seit 22.09.2026. Vorher 300 -- der duenne Schnitt
                        traegt Fliesstext am Bildschirm schlecht, besonders
                        bei den kleinen Beschriftungen. 300 gilt NICHT mehr. */
  line-height: 1.8;
}

:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ── Leiste oben ───────────────────────────────────────────────
   Nur Rahmen, Klebeverhalten und Grund. Wie ihr Inhalt angeordnet
   wird, steht in text.css — die Startseite ordnet ihn selbst an. */

nav {
  /* Milchglas beim Scrollen: der Hintergrund bleibt leicht
     durchscheinend, der Inhalt darunter wird weichgezeichnet. */
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  /* aelteres Safari */
  z-index: 100;
}

nav .logo {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--black);
}

/* ── Streifen unten ────────────────────────────────────────── */

footer { border-top: 1px solid var(--border); }

footer p { font-size: 0.8rem; color: var(--gray-mid); }

footer .footer-legal { display: flex; gap: 1.5rem; }

footer .footer-legal a {
  font-size: 0.8rem;
  color: var(--gray-mid);
  text-decoration: none;
  transition: color var(--transition);
}
footer .footer-legal a:hover { color: var(--black); }

/* ── Dunkler Modus ─────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --black: #f0f0f0;
    --gray-dark: #bbbbbb;
    --gray-mid: #949494;  /* 6,18 : 1 auf #121212. Vorher #777777 mit 4,18 : 1. */
    --gray-light: #1e1e1e;
    --white: #121212;
    --border: #2e2e2e;
  }
  nav { background: rgba(18, 18, 18, 0.92); }
}

/* ── Bewegung aus ──────────────────────────────────────────────
   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat, bekommt
   hier alles zurueckgenommen, was sich von selbst bewegt.

   DAS STAND BIS ZUM 25.09.2026 NUR IN index.html -- und `scroll-behavior:
   smooth` weiter oben gilt fuer alle 38 Seiten. Die Regel war beim
   Aufteilen am 22.09.2026 hierher gewandert, ihre Ruecknahme nicht. 37
   Seiten haben die Einstellung deshalb ignoriert, darunter /projekte/,
   wo seit dem 25.09. der Ankersprung von der Startseite landet.

   !important ist noetig: Der Universalselektor hat Spezifitaet 0,0,0 und
   verliert sonst gegen jede Seitenregel. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}