/* =========================================================
   satz.css — Schriften, Farben, Reset, Lesetypografie

   Die Seite ist ein Bericht, kein Produkt. Wer sie liest, sucht
   Klarheit über die eigene Lage, oft spät und oft heimlich.
   Deshalb: Lesetypografie statt Interface, Papier statt Fläche,
   keine Bewegung, keine Kacheln, fast keine Farbe.
   ========================================================= */

/* --- Selbst gehostete Schriften (keine externen Requests) --- */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-optical-sizing: auto;
  font-display: swap;
  src: url('../fonts/sourceserif-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-optical-sizing: auto;
  font-display: swap;
  src: url('../fonts/sourceserif-latin-ext.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-display: swap;
  src: url('../fonts/sourceserif-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400;
  font-optical-sizing: auto;
  font-display: swap;
  src: url('../fonts/sourceserif-italic-latin-ext.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;
}
/* Die Groteske trägt nur das Beiwerk: Tabellenköpfe, Marginalien,
   Bedienelemente. Im Fließtext kommt sie nicht vor. */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sourcesans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sourcesans-latin-ext.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;
}

/* --- Token --- */
:root {
  /* Papier, nicht Fläche. Leicht warm, damit es nicht klinisch wirkt. */
  --papier:      #f7f5f1;
  --papier-satz: #fdfcfa;
  --tinte:       #1c1a17;
  --tinte-weich: #45413b;
  --tinte-leise: #6a655d;

  /* Die Balken beider Spalten haben denselben Ton. Zwei verschiedene
     Töne würden eine Spalte optisch schwerer machen als die andere,
     und das behauptet etwas, was die Daten nicht hergeben. Der
     Unterschied entsteht allein aus der Länge. */
  --saeule:      #55504a;

  /* Die einzige Farbe der Seite. Sie ist für den Notfall reserviert
     und kommt sonst nirgends vor. */
  --notruf:      #96341f;

  --linie:       #ddd8d0;
  --linie-fest:  #8a8175;

  --serif:  'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --grotesk: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --satzbreite: 34rem;   /* rund 68 Zeichen */
  --seite:      52rem;   /* Satzspiegel samt Marginalspalte */
  --rand:       clamp(1.25rem, 5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #171614;
    --papier-satz: #1d1b18;
    --tinte:       #eae7e1;
    --tinte-weich: #bab5ac;
    --tinte-leise: #928d84;

    --saeule:      #b3aea5;

    --notruf:      #e08e75;

    --linie:       #34312c;
    --linie-fest:  #7a7469;
  }
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol, fieldset, legend, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-inline-size: 0; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }

/* Sprungziele und Tastaturfokus landen unter dem stehenden Kopf
   (3 rem hoch), nicht dahinter. */
html { scroll-padding-top: 4.5rem; }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: clamp(1.05rem, .35vw + 1rem, 1.18rem);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Überschriften: Grade statt Größe --- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.006em;
  text-wrap: balance;
  color: var(--tinte);
}
h1 {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.14;
  font-weight: 400;      /* die Frage wird gestellt, nicht gerufen */
  letter-spacing: -.012em;
}
h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
h3 { font-size: 1.12rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }

p { text-wrap: pretty; }
em { font-style: italic; }
strong { font-weight: 600; }

/* Ziffern laufen überall auf gleicher Breite, damit sich Spalten
   untereinander vergleichen lassen. */
.zahl { font-variant-numeric: tabular-nums lining-nums; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linie-fest);
  text-underline-offset: .18em;
}
a:hover { text-decoration-color: currentColor; }

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

/* --- Hilfsklassen --- */
.sprungmarke {
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 20;
  padding: .6rem 1rem;
  background: var(--tinte);
  color: var(--papier);
  text-decoration: none;
  transform: translateY(-200%);
}
.sprungmarke:focus,
.sprungmarke:focus-visible { transform: translateY(0); }

/* Bewegung nur an wenigen Stellen, einmalig und ruhig: Balken wachsen,
   Zahlenblöcke blenden ein, Antworten klappen weich auf. Der Hilfeteil
   bewegt sich nie. Bei reduzierter Bewegung steht alles still. */
.bewegt [data-einblenden] {
  opacity: 0;
  transform: translateY(.6rem);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.bewegt [data-einblenden].is-visible { opacity: 1; transform: none; }
.bewegt [data-einblenden] + [data-einblenden] { transition-delay: .15s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}