/* Gerüst aller statischen Seiten — Handbuch und Rechtstexte.

   Beide Bereiche liegen als statische HTML-Seiten neben der Anwendung und können deren Tokens
   nicht importieren (sie stecken im gebauten Bundle). Die Werte unten sind bewusste KOPIEN aus
   ratefatz-frontend/src/styles/tokens/ — Akzent fest auf Salbei, wie ihn die Startseite pinnt.
   Ändert sich dort eine Farbe, gehört sie hier UND im Inline-Block der 404-Seite nachgezogen
   (docs/frontend/rechtstexte.md).

   Diese Datei trägt Tokens, Seitenaufbau und Grundtypografie. Was nur ein Bereich braucht, steht
   in recht/recht.css bzw. handbuch/handbuch.css — beide Seiten laden erst diese Datei, dann ihre
   eigene. Vorher lag das Gerüst zweimal da und lief auseinander.

   Schriften bleiben Systemschriften: die woff2-Dateien der Anwendung tragen im Bau einen Hash
   im Namen und sind von einer statischen Seite aus nicht verlässlich erreichbar. */

:root {
  --bg: #14100E;
  --bg2: #0D0A08;
  --surface: #1F1915;
  --surface2: #292118;

  --ink: #F8F1E7;
  --body: #DCD1C4;
  --muted: #A2958A;
  /* --faint bleibt als Kopie stehen, wird hier aber nicht verwendet: In den kleinen
     Versal-Labels blieb es unter dem lesbaren Kontrast. */
  --faint: #6E6258;

  --line: #2E2620;
  --line2: #453A31;

  --accent: #A9C273;
  --accent-strong: #6D8B3C;
  --accent-ink: #131807;
  --accent-soft: rgba(169, 194, 115, .14);
  --accent-line: rgba(169, 194, 115, .45);

  --warn: #DCB65A;
  --warn-soft: rgba(220, 182, 90, .12);
  --warn-line: rgba(220, 182, 90, .4);

  --font-sans: 'Helvetica Neue', system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: ui-monospace, monospace;

  --shadow: 0 24px 64px rgba(0, 0, 0, .5);
  --lip: inset 0 1px 0 rgba(255, 255, 255, .045);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --topbar: 58px;
}

/* Das Spiel folgt immer der Geräteeinstellung — die statischen Seiten tun dasselbe. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F7F2E9;
    --bg2: #EFE7DA;
    --surface: #FFFFFF;
    --surface2: #FAF5EC;

    --ink: #1B1512;
    --body: #3A312A;
    --muted: #6B5F55;
    --faint: #9C9084;

    --line: #E7DED0;
    --line2: #CFC3B3;

    --accent: #4F6B22;
    --accent-strong: #4F6B22;
    --accent-ink: #FFFFFF;
    --accent-soft: rgba(79, 107, 34, .10);
    --accent-line: rgba(79, 107, 34, .34);

    --warn: #8A6516;
    --warn-soft: rgba(138, 101, 22, .09);
    --warn-line: rgba(138, 101, 22, .32);

    --shadow: 0 22px 52px rgba(84, 62, 40, .18);
    --lip: inset 0 1px 0 rgba(255, 255, 255, .7);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Spalte über die volle Höhe, damit die Fußzeile auf kurzen Seiten unten klebt statt mitten
   im Bild zu enden. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

/* Gemeinsame Breite von Kopfleiste, Inhalt und Fußzeile. Ab 1280px kommt die dritte Spalte
   dazu, deshalb darf die Seite dort breiter werden. */
.bound {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Der erste Tabstopp jeder Seite: sichtbar nur, solange er den Fokus hat. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 30;
  padding: 10px 16px;
  border-radius: 11px;
  border: 1px solid var(--accent-line);
  background: var(--surface);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s var(--ease);
}

.skip:focus { top: 10px; }

/* ---------- Kopfleiste ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}

.topbar .bound {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topbar);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-serif);
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Die RF-Bildmarke links vom Titel. Sie kommt als Hintergrund und nicht als <img>, da sie
   schmückt und nichts sagt, was der Titel daneben nicht schon sagt — ein Screenreader liest
   „Ratefatz" und nicht zweimal dasselbe. Dieselbe Datei liefert das Tab-Icon, sie liegt also
   ohnehin im Cache. */
.brand-marke {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  background: url("/favicon-192.png") center / contain no-repeat;
}

/* Dieselbe Bewegung wie im Tab (Max, 03.08.2026), nur ohne Worker: Die beiden Kacheln umkreisen
   die Mitte auf einem QUADRAT — R startet links, F steht ihr immer genau gegenüber, beide laufen
   im Uhrzeigersinn. Das Quadrat statt eines Kreises ist der Grund, warum sie sich in jeder
   Stellung genau berühren, nie überlappen und die Hüllbreite konstant bleibt; im Worker leistet
   das `r = (s/2) / max(|cos|, |sin|)`, hier der Pfad. Die Buchstaben bleiben aufrecht
   (`offset-rotate: 0deg`) — gekippt wären sie in dieser Größe nicht mehr lesbar.

   Nur mit offset-path: Fehlt die Unterstützung, bleibt es beim ruhenden Bild der Regel oben,
   statt dass beide Kacheln übereinander in der Ecke liegen. */
@supports (offset-path: path("M 0 0 L 1 1")) {
  .brand-marke { background: none; }

  .brand-marke::before,
  .brand-marke::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    background: center / contain no-repeat;
    offset-rotate: 0deg;
    animation: rf-umlauf 5s linear infinite;
  }

  .brand-marke::before {
    background-image: url("/favicon-tile-r.png");
    offset-path: path("M 8 16 L 8 8 L 24 8 L 24 24 L 8 24 Z");
  }

  .brand-marke::after {
    background-image: url("/favicon-tile-f.png");
    offset-path: path("M 24 16 L 24 24 L 8 24 L 8 8 L 24 8 Z");
  }
}

/* Zwei Sekunden Umlauf, drei Sekunden Ruhe — dieselben Zeiten wie im Tab (dort 29 Frames à 1/15 s
   plus 3 s Standzeit auf Frame 0). Die Ruhelage ist bildgleich zum stehenden Logo. */
@keyframes rf-umlauf {
  0% { offset-distance: 0%; }
  40% { offset-distance: 100%; }
  100% { offset-distance: 100%; }
}

/* Auf schmalen Geräten trägt die Bildmarke den Namen allein: Titel, Bildmarke und die drei
   Wege daneben passen sonst nicht nebeneinander. Für Screenreader bleibt der Titel stehen. */
@media (max-width: 620px) {
  .brand { gap: 0; }

  .brand-wort {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Sagt, in welchem Bereich man gelandet ist. Auf schmalen Geräten hat das keinen Platz. */
.where {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 14px;
  border-left: 1px solid var(--line2);
}

.topnav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav a {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}

.topnav a:hover { color: var(--ink); }

.topnav a[aria-current] {
  color: var(--accent);
  background: var(--accent-soft);
}

.topnav .go {
  border-color: var(--accent-line);
  color: var(--accent);
}

.topnav .go:hover { background: var(--accent-soft); color: var(--accent); }

@media (max-width: 620px) {
  .where { display: none; }
  .topnav { gap: 2px; }
  .topnav a { padding: 7px 9px; font-size: 13.5px; }
}

/* ---------- Seitengerüst ---------- */

.shell {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-block: 26px 56px;
}

@media (min-width: 900px) {
  .shell { grid-template-columns: 218px minmax(0, 1fr); gap: 32px; }
}

/* Erst ab hier ist Platz für die Sprungmarken rechts. Übersichtsseiten haben keine und
   bekommen die Breite stattdessen für ihre Kacheln. */
@media (min-width: 1280px) {
  .bound { max-width: 1260px; }
  .shell { grid-template-columns: 236px minmax(0, 1fr); }
  .shell:has(.onthis) { grid-template-columns: 236px minmax(0, 1fr) 208px; }
}

/* ---------- Linke Spalte: alle Seiten des Bereichs ---------- */

.rail { min-width: 0; }

@media (min-width: 900px) {
  .rail {
    position: sticky;
    top: calc(var(--topbar) + 26px);
    max-height: calc(100vh - var(--topbar) - 52px);
    overflow-y: auto;
  }
}

/* --muted statt --faint: In dieser Größe und in Versalien bliebe --faint auf beiden Gründen
   unter dem lesbaren Kontrast. */
.rail-title,
.onthis-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
  padding-left: 13px;
}

.rail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.rail-list li { margin: 0; }

.rail-list a {
  display: flex;
  gap: 9px;
  padding: 7px 13px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}

.rail-list a:hover { color: var(--ink); border-left-color: var(--line2); }

.rail-list a[aria-current] {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

/* Auf schmalen Geräten wird aus der Spalte eine Zeile: eine wischbare Reihe Marken über dem
   Text, da eine 40 Zeilen hohe Liste vor der Überschrift niemandem hilft. */
@media (max-width: 899px) {
  .rail {
    margin-inline: -24px;
    padding-inline: 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar { display: none; }
  .rail-title { display: none; }

  .rail-list {
    display: flex;
    gap: 8px;
    border-left: 0;
    padding-bottom: 2px;
  }

  .rail-list li { flex: 0 0 auto; }

  .rail-list a {
    margin-left: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13.5px;
    white-space: nowrap;
  }

  .rail-list a[aria-current] {
    border-color: var(--accent-line);
    background: var(--accent-soft);
  }
}

@media (max-width: 560px) {
  .bound { padding-inline: 16px; }
  .rail { margin-inline: -16px; padding-inline: 16px; }
  .shell { padding-block: 16px 0; }
}

/* ---------- Rechte Spalte: Sprungmarken der Seite ---------- */

.onthis { display: none; }

@media (min-width: 1280px) {
  .onthis {
    display: block;
    position: sticky;
    top: calc(var(--topbar) + 26px);
    max-height: calc(100vh - var(--topbar) - 52px);
    overflow-y: auto;
  }
}

.onthis ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.onthis li { margin: 0; }

.onthis a {
  display: block;
  padding: 6px 13px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}

.onthis a:hover { color: var(--accent); border-left-color: var(--accent-line); }

/* ---------- Der Inhalt ---------- */

main {
  min-width: 0;
  border-radius: 20px;
  border: 1px solid var(--line2);
  background: var(--surface);
  box-shadow: var(--shadow), var(--lip);
  padding: 34px clamp(20px, 4vw, 40px) 30px;
}

/* Ohne Nebenspalten hätte der Text sonst die volle Fensterbreite. Die Breite muss dabei
   ausdrücklich dastehen: Ein Rasterfeld mit `margin: auto` bemisst sich sonst nach seinem
   breitesten Inhalt, und die Tabellen sprengen damit die Seite. */
@media (max-width: 899px) {
  main { width: 100%; max-width: 720px; margin-inline: auto; }
}

/* Auf dem Handy fällt die Karte weg. Rand, Rundung und Schatten kosten dort nur Breite, und eine
   schwebende Insel auf 390 px sieht aus wie ein Fenster im Fenster: Der Inhalt läuft stattdessen
   randlos von Kante zu Kante und bis an die Fußzeile.

   Die Fläche bleibt --surface. Ohne sie verlören Kacheln, Tabellen und der Hinweiskasten ihren
   Untergrund — im hellen Theme liegt --surface2 so dicht an --bg, dass sie unsichtbar würden.

   `width: auto` muss ausdrücklich dastehen: Die Regel darüber setzt `width: 100%`, und mit fester
   Breite verschiebt der negative Rand die Fläche nur, statt sie zu verbreitern. Der Block gehört
   deshalb HINTER die Grundregel — davor gewinnt sie und die Karte bleibt stehen. */
@media (max-width: 560px) {
  main {
    width: auto;
    max-width: none;
    margin-inline: -16px;
    padding: 24px 16px 28px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Mono-Kleinstlabel über der Überschrift — dieselbe Rolle wie im Spiel. */
.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 7px;
}

h1 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 42px);
  line-height: 1.08;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 8px;
}

h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 30px 0 8px;
  scroll-margin-top: calc(var(--topbar) + 18px);
}

h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 5px;
}

p { margin: 0 0 13px; text-wrap: pretty; }

/* Kopf jeder Seite: Label, Titel, Anrisssatz. Die Linie sitzt am Kopf und nicht am Anrisssatz,
   damit sie über die ganze Breite läuft, während der Satz auf Lesebreite bleibt. */
.pagehead {
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 64ch;
  margin-bottom: 20px;
}

.pagehead .lead { margin-bottom: 0; }

ul, ol { margin: 0 0 13px; padding-left: 21px; }
li { margin-bottom: 7px; }

strong { color: var(--ink); font-weight: 600; }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

a { color: var(--accent); }

/* ---------- Kachelliste der Übersichtsseiten ---------- */

.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

@media (min-width: 1100px) {
  .toc { grid-template-columns: 1fr 1fr; }
}

.toc li { margin: 0; }

.toc a {
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: border-color .15s var(--ease), background-color .15s var(--ease), transform .18s var(--ease);
}

.toc a:hover, .toc a:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

@media (hover: hover) {
  .toc a:hover { transform: translateY(-2px); }
}

.toc .what {
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  margin-top: 3px;
}

/* ---------- Blätterleiste am Fuß des Inhalts ---------- */

nav.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

nav.pager a, nav.pager span {
  flex: 1 1 150px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--body);
  transition: border-color .15s var(--ease), color .15s var(--ease);
}

nav.pager a:hover, nav.pager a:focus-visible { border-color: var(--accent-line); color: var(--accent); }

/* Am Anfang und am Ende fehlt ein Nachbar — der Platz bleibt trotzdem stehen, damit die Leiste
   nicht bei jedem Blättern die Knöpfe verschiebt. */
nav.pager span { opacity: .35; }

nav.pager .home { flex: 0 1 auto; }

/* Stand der Fassung, ganz unten unter der Blätterleiste. */
.stand {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Fußzeile ---------- */

.sitefoot {
  margin-top: auto;
  background: var(--bg2);
  border-top: 1px solid var(--line);
}

.sitefoot .foot-cols {
  display: grid;
  gap: 24px 32px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding-block: 30px 26px;
}

/* Urheberrechtsvermerk, auf jeder Seite dieselbe Zeile. Er ist nicht vorgeschrieben — der
   Schutz entsteht mit dem Werk —, aber er benennt den Urheber „in der üblichen Weise" und
   löst damit die Vermutung des § 10 UrhG aus (docs/frontend/rechtstexte.md). */
.sitefoot .foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding-block: 16px 26px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

.foot-legal p { margin: 0; }

.sitefoot h2 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}

.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: 6px; }

.sitefoot a {
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}

.sitefoot a:hover { color: var(--accent); }

.foot-brand {
  font-family: var(--font-serif);
  font-size: 20px;
  color: var(--ink);
  margin: 0 0 6px;
}

.foot-note { font-size: 13px; color: var(--muted); margin: 0; }

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Wer weniger Bewegung eingestellt hat, bekommt die ruhende Marke: `animation: none` hält die
   Kacheln bei offset-distance 0 — also genau in der Stellung des stehenden Logos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
}