:root {
  --bg: #0f172a;
  --text: #f1f5f9;
  --text-gedaempft: #cbd5e1;
  --akzent: #7dd3fc;
  --akzent-stark: #38bdf8;
  --rand: rgba(255, 255, 255, 0.14);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f8fafc;
    --text: #0f172a;
    --text-gedaempft: #475569;
    --akzent: #0369a1;
    --akzent-stark: #0284c7;
    --rand: rgba(15, 23, 42, 0.14);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f8fafc;
  --text: #0f172a;
  --text-gedaempft: #475569;
  --akzent: #0369a1;
  --akzent-stark: #0284c7;
  --rand: rgba(15, 23, 42, 0.14);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--akzent); text-decoration: underline; text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--akzent-stark); outline-offset: 2px; }

.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: 0.55rem 1rem;
  background: var(--bg);
  border-bottom: 1px solid var(--rand);
}
.kopf-links { display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; overflow: hidden; }
.orrery-link { flex-shrink: 0; font-weight: 700; color: var(--text); text-decoration: none; }
.orrery-link:hover { text-decoration: underline; }
.kopf-titel {
  color: var(--text-gedaempft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sprachwahl { flex-shrink: 0; font-size: 0.875rem; }
.sprachwahl [aria-current] { color: var(--text); font-weight: 700; }
.kopf-rechts { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.kopf-knopf {
  min-width: 40px;
  min-height: 40px;
  padding: 0 0.6rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.kopf-knopf[hidden] { display: none; }
.kopf-knopf[aria-pressed="true"] { color: var(--akzent); border-color: var(--akzent); }
@media (pointer: coarse) {
  .kopf-knopf { min-width: 44px; min-height: 44px; }
}
/* 44 px Knopf + 2 · 0,4 rem + 1 px Rand = 57,8 px: die Kopfzeile bleibt bei 60 px. */
@media (pointer: coarse) { .kopf { padding: 0.4rem 1rem; } }

.navknopf {
  position: fixed;
  z-index: 25;
  top: 4.5rem;
  left: 0.75rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  font: inherit;
  cursor: pointer;
}
@media (min-width: 900px) { .navknopf { display: none; } }

.nav-ueberschrift { margin: 0 0 0.5rem; font-weight: 700; }
.nav-seiten { list-style: none; margin: 0 0 1rem; padding: 0; }
.nav-seiten a[aria-current="page"] { color: var(--text); font-weight: 700; }
.toc { list-style: none; margin: 0; padding: 0; }
.toc .toc-2 { margin: 0.35rem 0; }
.toc .toc-3 {
  display: none;
  margin: 0.2rem 0 0.2rem 1rem;
  font-size: 0.9em;
}
.toc .toc-3.offen { display: list-item; }
.toc a[aria-current="location"] { color: var(--akzent); font-weight: 700; }

@media (min-width: 900px) {
  body { display: grid; grid-template-columns: 280px minmax(0, 1fr); }
  .kopf, .fuss { grid-column: 1 / -1; }
  .nav {
    grid-column: 1;
    width: 280px;
    align-self: start;
    position: sticky;
    top: 60px;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 1rem;
    border-right: 1px solid var(--rand);
  }
  main.inhalt { grid-column: 2; }
}
@media (max-width: 899px) {
  body { overflow-x: hidden; }
  .nav {
    position: fixed;
    z-index: 24;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 320px);
    max-height: 100vh;
    overflow-y: auto;
    /* Unter dem festen Knopf „Inhalt“ (4,5 rem + 44 px = 116 px) beginnen, sonst verdeckt er die Überschrift. */
    padding: 8rem 1rem 1rem;
    background: var(--bg);
    border-right: 1px solid var(--rand);
    transform: translateX(-105%);
    transition: transform 0.15s ease;
  }
  .nav[data-offen="true"] { transform: translateX(0); }
}

main.inhalt {
  padding: 1.5rem 1rem 3rem;
  max-width: 72ch;
}
main.inhalt :is(h1, h2, h3, h4) { line-height: 1.25; }
main.inhalt :is(h2, h3, h4)[id] { scroll-margin-top: 4.5rem; }
main.inhalt img { max-width: 100%; height: auto; }
main.inhalt .tabelle { overflow-x: auto; border: 1px solid var(--rand); border-radius: 0.4rem; margin: 1rem 0; }
main.inhalt .tabelle table { width: 100%; border-collapse: collapse; }
main.inhalt .tabelle th, main.inhalt .tabelle td { padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rand); text-align: left; }
/* Nur Zahlenspalten (GFM-Tabellensyntax --:, marked rendert sie mit align="right") nicht
   umbrechen lassen — eine Fließtextspalte wie „Meilenstein" in der Zeitleiste bekommt kein
   align="right" und bricht wie gewohnt um, statt die 72ch-Spalte am Desktop zu sprengen. */
main.inhalt .tabelle th[align="right"], main.inhalt .tabelle td[align="right"] { white-space: nowrap; }
main.inhalt pre { overflow-x: auto; padding: 0.75rem; border: 1px solid var(--rand); border-radius: 0.4rem; }
main.inhalt code { font-family: ui-monospace, "Cascadia Code", monospace; }

.fuss {
  padding: 1.5rem 1rem 3rem;
  color: var(--text-gedaempft);
  font-size: 0.875rem;
  border-top: 1px solid var(--rand);
}
.fuss a { color: var(--text-gedaempft); }
.vorlesen-knopf svg { display: block; width: 1.15em; height: 1.15em; margin: auto; }
.vorlesen-aktiv {
  background: color-mix(in srgb, var(--akzent) 12%, var(--bg));
  box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--akzent) 12%, var(--bg));
  border-radius: 0.2rem;
}
.vorlesen-leiste {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--rand);
  border-radius: 0.75rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3);
}
.vorlesen-leiste[hidden] { display: none; }
.vorlesen-leiste button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.5rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  font: inherit;
  cursor: pointer;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .vorlesen-aktiv { outline: 2px solid var(--akzent); outline-offset: 0.2rem; }
}
@media (forced-colors: active) {
  .vorlesen-aktiv { outline: 2px solid Highlight; }
}
body.vorlesen-laeuft .fuss { padding-bottom: 6rem; }