/* Farben von pr0gramm.com bzw. pr0.app uebernommen (dort aus den
   CSS-Variablen der laufenden Seite ausgelesen, nicht geschaetzt):

     #161618  Grundflaeche       (--t-background-color)
     #252527  Karten und Leisten
     #333335  Kanten
     #ee4d2e  Markenorange       (--theme-main-color)
     #d23c22  Logo-Orange        (--theme-logo-color)
     #75c0c7  Tuerkis, Links     (--theme-secondary-color / --t-link-color)

   Die Originalseite ist ausschliesslich dunkel. Das helle Theme hier ist
   deshalb eine Ableitung: dieselben Farbtoene, nur so weit abgedunkelt, dass
   sie auf hellem Grund noch tragen. Beide Varianten sind vollstaendig
   gesetzt, damit die Seite nie Farben vom Browser erbt. */
:root {
  --bg: #f2f2f0; --surface: #ffffff; --border: #dcdcd6;
  --ink: #161618; --ink-2: #55555a; --ink-3: #87878c;
  --accent: #1f7d85; --brand: #d23c22;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618; --surface: #252527; --border: #333335;
    --ink: #f2f5f4; --ink-2: #a7a7a8; --ink-3: #6f6f71;
    --accent: #75c0c7; --brand: #ee4d2e;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); line-height: 1.5;
}
/* Nur die Kopfzeile der Seite, nicht jedes <header> darin -- der Aufsatz
   hat einen eigenen. */
body > header {
  display: flex; align-items: center; gap: 1.25rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--surface); flex-wrap: wrap;
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
/* Wie auf pr0gramm: das "pr0" traegt das Orange, der Rest bleibt neutral. */
.brand span { color: var(--brand); }
/* Navigation: je Kategorie ein Menue.

   Vorher lagen alle Analysen als Links nebeneinander in der Kopfzeile. Das
   trug 18 Eintraege noch knapp und waere mit jeder weiteren Analyse laenger
   geworden — die Kopfzeile umbrach schon auf dem Laptop in drei Reihen. Jetzt
   traegt sie so viele Knoepfe, wie es Kategorien gibt, und die Zahl der
   Analysen darin ist ihr egal.

   Getragen von <details>/<summary>: aufklappen, schliessen und die
   Tastaturbedienung macht der Browser. Das Skript in base.html ergaenzt nur
   Bequemlichkeiten. */
nav { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }
.navgruppe { position: relative; }
.navgruppe summary {
  list-style: none; cursor: pointer; white-space: nowrap;
  color: var(--ink-2); font-size: .9rem;
  padding: .35rem .7rem; border-radius: 6px;
  border: 1px solid transparent;
}
/* Der Standardpfeil von Safari sitzt aussen und laesst sich nur so entfernen. */
.navgruppe summary::-webkit-details-marker { display: none; }
/* Eigener Pfeil, der die Richtung mitdreht — er ist der einzige Hinweis
   darauf, dass hinter dem Knopf noch etwas steckt. */
.navgruppe summary::after {
  content: "▾"; font-size: .7em; margin-left: .4em;
  display: inline-block; color: var(--ink-3);
}
.navgruppe[open] summary::after { transform: rotate(180deg); }
.navgruppe summary:hover { background: var(--bg); color: var(--ink); }
/* Die Kategorie, in der die gerade gezeigte Analyse liegt. Leiser als ein
   aktiver Link — sie sagt "hier bist du", nicht "das ist ausgewaehlt". */
.navgruppe summary.on { color: var(--ink); border-color: var(--border); }
.navgruppe[open] summary { background: var(--bg); color: var(--ink); }

.navmenu {
  position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0;
  display: flex; flex-direction: column; gap: .1rem;
  min-width: 12rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.navmenu a {
  color: var(--ink-2); text-decoration: none; font-size: .9rem;
  padding: .35rem .6rem; border-radius: 5px; white-space: nowrap;
}
.navmenu a:hover { background: var(--bg); color: var(--ink); }
.navmenu a.on { background: var(--brand); color: #fff; }

/* Auf schmalen Fenstern hat ein schwebendes Menue keinen Platz neben sich —
   dort klappt es in den Fluss auf und schiebt die Seite nach unten. */
@media (max-width: 640px) {
  /* `flex-basis`, nicht `width`: nav ist ein Flex-Element mit `flex: 1`, und
     das setzt `flex-basis: 0%` -- eine Breitenangabe daneben bleibt
     wirkungslos. Mit width:100% blieb die Leiste hier 162 px schmal, jeder
     Knopf landete auf einer eigenen Zeile und die Kopfzeile war 218 px hoch.
     `order` schiebt die Leiste in die zweite Zeile, damit der Stand oben
     neben der Marke bleibt statt allein darunter zu stehen. */
  nav { flex-basis: 100%; order: 1; }
  .navgruppe { position: static; }
  .navmenu {
    position: static; flex-direction: row; flex-wrap: wrap;
    box-shadow: none; margin-top: .35rem;
  }
}
.stand { color: var(--ink-3); font-size: .8rem; white-space: nowrap; }
main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; letter-spacing: -.01em; }
h2 { font-size: 1rem; margin: 0 0 .3rem; }
.lead { color: var(--ink-2); margin: 0 0 1.5rem; max-width: 62ch; }

/* Diagrammseiten laufen ueber die volle Fensterbreite: bei einer Zeitreihe
   ist jeder zusaetzliche Pixel ein Tag mehr, den man unterscheiden kann. */
body.wide main, body.wide footer { max-width: none; }
body.wide .lead { margin-bottom: 0; max-width: 90ch; }
.kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.presets { display: flex; gap: .3rem; flex-wrap: wrap; }
.presets button {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: .35rem .75rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
}
.presets button:hover { border-color: var(--accent); color: var(--ink); }
.presets button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

.chart {
  height: clamp(400px, 68vh, 900px); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: .5rem;
}
.chart[aria-busy] { display: grid; place-items: center; color: var(--ink-3); }
.chart[aria-busy]::after { content: "lädt …"; }

/* Leiste unter dem Diagramm: verschiebt den Ausschnitt, ohne den Zoom
   anzufassen, und zeigt zugleich, wo im Zeitraum man steht.

   Bewusst ein eigener Daumen statt einer echten Scrollleiste — macOS blendet
   System-Leisten nach kurzer Zeit aus, egal wie man sie gestaltet. Als
   Positionsanzeige muss sie aber stehen bleiben.

   Die Einrückung setzt das Skript auf die Achsenränder der Figure, damit die
   Leiste unter der Zeichenfläche liegt und nicht unter der Beschriftung. */
.scrollzeile { padding: 0 calc(.5rem + 1px); }
.leiste {
  position: relative; height: 12px; margin-top: .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; touch-action: none;
}
.daumen {
  position: absolute; top: 1px; bottom: 1px; left: 0;
  background: var(--ink-3); border-radius: 5px;
  cursor: grab; touch-action: none;
  /* Kein transition auf transform: die Position wird pro Bild gesetzt, eine
     Überblendung würde dem Zeiger sichtbar hinterherlaufen. */
}
.daumen:hover { background: var(--accent); }
.daumen.greift { background: var(--accent); cursor: grabbing; }
/* Passt der ganze Zeitraum ins Fenster, gibt es nichts zu schieben. */
.leiste.voll { cursor: default; }
.leiste.voll .daumen { cursor: default; opacity: .5; }
.meta { color: var(--ink-3); font-size: .85rem; margin-top: .75rem; }
.meta a { color: var(--accent); }
.err { color: #e34948; padding: 2rem; }
/* Die beiden Zeitpunkte auf der Startseite: was wurde wann geholt, was wann
   gerechnet. Absolut gross, die relative Angabe leise daneben. */
.staende { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 0 0 1.75rem; }
.staende dt {
  color: var(--ink-3); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: .2rem;
}
.staende dd { margin: 0; font-size: 1.05rem; color: var(--ink); }
.staende dd span { color: var(--ink-3); font-size: .85rem; margin-left: .4rem; }

/* Abschnitte der Startseite. Die Überschrift trägt eine Linie, damit die
   Kategorien auch beim Überfliegen als getrennte Blöcke lesbar sind. */
.kategorie { margin: 0 0 2rem; }
.kategorie h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 0 0 .8rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.card h3 { font-size: 1rem; margin: 0 0 .3rem; }

.cards { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.card {
  display: block; padding: 1.1rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  text-decoration: none; color: var(--ink);
}
.card:hover { border-color: var(--accent); }
.card p { color: var(--ink-2); font-size: .88rem; margin: 0; }
pre {
  background: var(--surface); border: 1px solid var(--border);
  padding: 1rem; border-radius: 8px; overflow-x: auto; font-size: .85rem;
}
footer {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 2rem;
  display: flex; justify-content: space-between;
  color: var(--ink-3); font-size: .8rem; border-top: 1px solid var(--border);
}

/* Fliesstext (Methodikseite). Enger als die Diagrammseiten: Zeilen ueber
   volle Fensterbreite liest niemand. */
.text { max-width: 68ch; margin: 0 0 2.25rem; }
.text h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 1.75rem 0 .6rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--border);
}
.text p { margin: 0 0 .9rem; }
.text code {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: .05em .35em; font-size: .88em;
}
.vorbehalte { margin: 0; }
.vorbehalte div { margin: 0 0 1rem; }
.vorbehalte dt { font-weight: 600; margin-bottom: .15rem; }
.vorbehalte dt a { color: var(--accent); text-decoration: none; }
.vorbehalte dt a:hover { text-decoration: underline; }
.vorbehalte dd { margin: 0; color: var(--ink-2); }

/* Der Vorbehalt unter einem Diagramm. Zugeklappt ist er eine Zeile; er soll
   niemanden aufhalten, der nur die Kurve sehen will. */
.vorbehalt {
  max-width: 68ch; margin-top: 1rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
.vorbehalt summary {
  cursor: pointer; padding: .55rem .85rem;
  color: var(--ink-2); font-size: .85rem;
}
.vorbehalt summary:hover { color: var(--ink); }
.vorbehalt p {
  margin: 0 .85rem .85rem; color: var(--ink-2); font-size: .9rem;
}
.vorbehalt .mehr { font-size: .85rem; }
.vorbehalt a { color: var(--accent); }
footer a { color: var(--ink-3); }
footer a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- Aufsatz

   Die Startseite ist ein Fliesstext mit eingebetteten Diagrammen. Zwei
   Spaltenbreiten: der Text bleibt bei rund 68 Zeichen lesbar, die Diagramme
   duerfen darueber hinausgehen -- 24 Stunden oder 236 Monate brauchen Breite.
   Deshalb ist `.abschnitt` ein Raster mit einer schmalen Mittelspur und einer
   breiten Randspur, in die nur die Figures ausbrechen. */
body.aufsatz {
  /* Eine Breite fuer die ganze Textspalte. Nicht `68ch` je Element: `ch`
     haengt von der Schriftgroesse des Elements ab, und eine 1,2-rem-
     Ueberschrift waere damit breiter als der Absatz darunter -- sichtbar als
     versetzter linker Rand. */
  --spalte: 43rem;
}
body.aufsatz main { max-width: 1180px; }

.aufsatzkopf { max-width: var(--spalte); margin: 1rem auto 3rem; }
.aufsatzkopf h1 {
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 .75rem;
}
.aufsatzkopf .lead {
  font-size: 1.15rem; color: var(--ink-2); margin: 0 0 2rem;
}
.aufsatzkopf .staende { margin: 0; }

/* Inhaltsverzeichnis */
.inhalt { max-width: var(--spalte); margin: 0 auto 4rem; }
.inhalt ol {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--border);
}
.inhalt li { border-bottom: 1px solid var(--border); }
.inhalt a {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 .5rem;
  padding: .7rem .25rem; text-decoration: none; color: var(--ink);
}
.inhalt a:hover { background: var(--surface); }
.inhalt .nr {
  grid-row: span 2; color: var(--ink-3); font-variant-numeric: tabular-nums;
  font-size: .9rem; padding-top: .1rem;
}
.inhalt .kt { font-weight: 600; }
.inhalt .kf { color: var(--ink-2); font-size: .9rem; }

/* Kapitel */
.kapitel { margin: 0 0 5rem; scroll-margin-top: 1rem; }
.kapitelkopf {
  max-width: var(--spalte); margin: 0 auto 2.5rem;
  border-top: 2px solid var(--brand); padding-top: 1rem;
}
.kapitelkopf .nr {
  margin: 0 0 .3rem; color: var(--brand); font-size: .8rem;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.kapitelkopf h2 {
  font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .4rem; letter-spacing: -.01em;
}
.kapitelkopf .frage { margin: 0; color: var(--ink-2); font-size: 1.05rem; }

.abschnitt { margin: 0 0 3.5rem; }
.abschnitt h3 {
  max-width: var(--spalte); margin: 0 auto .8rem; font-size: 1.2rem;
  letter-spacing: -.01em;
}
.abschnitt p {
  max-width: var(--spalte); margin: 0 auto 1rem; font-size: 1.02rem; line-height: 1.65;
}

/* Eingebettetes Diagramm: breiter als der Text, mit Bildunterschrift. */
.diagramm { margin: 2rem 0 0; }
.diagramm .chart { height: clamp(340px, 52vh, 560px); }
.diagramm figcaption {
  max-width: var(--spalte); margin: .7rem auto 0;
  color: var(--ink-3); font-size: .88rem; line-height: 1.5;
}
.diagramm figcaption .mehr { display: block; margin-top: .3rem; }
.diagramm figcaption a { color: var(--accent); text-decoration: none; }
.diagramm figcaption a:hover { text-decoration: underline; }

.ausklang {
  max-width: var(--spalte); margin: 0 auto; padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.ausklang h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.ausklang p { margin: 0 0 .8rem; color: var(--ink-2); }
.ausklang a { color: var(--accent); }

/* Der Link zur Uebersicht in der Kopfzeile -- sieht aus wie ein
   Navigationsmenue, klappt aber nichts auf. */
.navlink {
  white-space: nowrap; color: var(--ink-2); font-size: .9rem;
  padding: .35rem .7rem; border-radius: 6px;
  border: 1px solid transparent; text-decoration: none;
}
.navlink:hover { color: var(--ink); background: var(--bg); }
.abschnitt a { color: var(--accent); }