/* Aussehen des Zeitstrahls auf geschichte.html.
   Eigene kleine Datei, weil rechtstext.css laut eigenem Kommentar den
   beiden Rechtsseiten gehoert. Farben, Schriften und Grundraster kommen
   von dort — hier steht nur, was der Zeitstrahl zusaetzlich braucht.

   Was hier bewusst UEBERSCHRIEBEN wird und warum: `.rt-kicker`,
   `.rt-stand` und der Fokusring. Der Grund steht jeweils an Ort und
   Stelle. Geaendert wird nur auf dieser Seite — rechtstext.css bleibt
   unangetastet, sonst wandert jede Korrektur ungefragt in Impressum
   und Datenschutz. */

:root {
  /* Gold als Textfarbe auf Cream. `--gold-deep` (#8a6a2f) aus
     rechtstext.css kommt auf 4,04:1 und faellt damit unter den
     geforderten 4,5:1 fuer Fliesstext. Diese Abdunklung erreicht
     4,68:1 und ist vom Original kaum zu unterscheiden.
     Gerechnet nach WCAG-Formel gegen #ece6da. */
  --gold-text: #7f6029;

  /* Breite der Jahresspalte und Abstand zur Linie. Beide stecken auch
     in `--strahl-x`, damit die Linie der Einschuebe exakt dort sitzt,
     wo die Linie der Stationen laeuft. */
  --jahr-b: clamp(78px, 10vw, 132px);
  --strahl-gap: 28px;
  --strahl-x: calc(var(--jahr-b) + var(--strahl-gap));
}

/* Die Seite braucht mehr Spalte als ein reiner Rechtstext: links steht
   die Jahreszahl, rechts der Satz. Mit 680px bliebe fuer den Satz zu
   wenig uebrig. */
.rt-inhalt {
  max-width: 820px;
  /* Geometrie unveraendert gegenueber rechtstext.css vor dem
     Spaltenfix: die Bildstrecken rechnen ihren Ausbruch aus der
     Breite von `.rt-inhalt`, und die ist auf die Spur eingemessen. */
  padding-inline: 6vw;
  /* Weniger Vorlauf als in rechtstext.css: dort steht die Ueberschrift
     am Anfang des Textteils, hier traegt sie der Auftakt darueber. */
  padding-top: clamp(34px, 4.2vw, 58px);
}

/* Sichtbarer Fokus. rechtstext.css setzt nur den Skip-Link; alles
   andere haengt am Standardring des Browsers, der auf Cream schwach
   ausfaellt. */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}
/* Auf den dunklen Flaechen kommt derselbe Ton nur auf 3,05:1 und
   verschwindet im Anthrazit. Dort der aufgehellte: 11,93:1. */
.rt-kopf :focus-visible,
footer :focus-visible,
.gs-auftakt :focus-visible {
  outline-color: var(--gold-light);
}

/* --- Der Auftakt ----------------------------------------------------- */
/* Zwei Felder statt eines Querbands. Die Aufnahme ist ein Hochformat und
   stand vorher als 46vh hohes Band ueber die volle Breite: bei 1600px
   Fenster musste sie dafuer um das Anderthalbfache hochgerechnet werden,
   und vom Motiv blieb ein Streifen Fassade. Hochkant neben dem Text wird
   sie verkleinert — schaerfer, und das Haus ist als Haus zu erkennen.

   Der Kopfbalken darueber ist ebenfalls Anthrazit; beides liest sich als
   ein dunkler Block, aus dem der Text in die helle Seite entlaesst. */
/* Seit 24.08.2026 auf derselben Spur wie die Unterseiten mit
   `seite.css` — der Auftakt lief vorher randlos und stand damit bei
   1975px Fenster auf 68, waehrend der Inhalt der Ideenbox auf 447
   beginnt. Das dunkle Band bleibt randlos, nur sein Inhalt rueckt auf
   die Spur; die seitliche Polsterung ist deshalb von den Kindern
   hierher gewandert, und den Abstand zwischen Text und Bild traegt
   jetzt `column-gap`. */
.gs-auftakt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  column-gap: clamp(24px, 4.5vw, 68px);
  padding-inline: var(--spur-rand);
  background: var(--anthracite);
  color: var(--cream);
}

.gs-auftakt-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5.5vw, 86px) 0 clamp(36px, 4.5vw, 70px);
}

.gs-ort {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Dasselbe Mass wie die Auftakt-Ueberschrift der Ideenbox (`h1` in
   seite.css) — die beiden Auftakte stehen seit dem 24.08. auf derselben
   Spur und sollen sich auch typografisch als eine Familie lesen. Vorher
   lief die Geschichte auf 78px gegen 54px und wirkte wie eine andere
   Seite. Die Werte stehen hier ausgeschrieben, weil geschichte.html
   `seite.css` nicht laedt; aendert sich dort etwas, gehoert es hierher
   nachgezogen. */
.gs-auftakt h1 {
  margin: 0;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(32px, 3.9vw, 54px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
/* Wie `h1 em` in seite.css: die Pointe der Ueberschrift steht in Gold.
   Vorher war die ganze Zeile cremeweiss und las sich neben der Ideenbox
   wie eine andere Seite. Gold auf Anthrazit: 12,4:1. */
.gs-auftakt h1 em {
  font-style: normal;
  color: var(--gold);
}
/* Sobald ein Canvas da ist, MUSS der CSS-Verlauf weichen — sonst
   malen zwei Schichten dieselben Buchstaben, versetzt um den
   Ueberhang des Canvas ("Mitsprachee", 24.08.). */
.gs-auftakt h1 em:has(> canvas.gold3d-schicht):not(.gold-flach) {
  background: none;
}

/* `gold-flach` setzt kopf.js, wenn die Pointe mehr Textzeilen
   braucht als das Canvas gemalt hat. Dann verschwindet das Canvas
   und der CSS-Verlauf oben bleibt stehen — er bricht mit dem Text
   um, das Canvas kann das nicht. */
.gs-auftakt h1 em.gold-flach > canvas.gold3d-schicht {
  display: none;
}


.gs-vorspann {
  max-width: 30em;
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  color: var(--cream-soft);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}

/* Der Sprung in den Strahl. Wer hier ueber die Suche landet, hatte oben
   bisher nur „Zurueck zur Startseite“ — also den Ausgang. Das hier ist
   der Eingang. */
/* Die Form kommt aus `.cta-btn` (rechtstext.css) — dieselbe Handlung,
   dasselbe Aussehen wie „Idee einwerfen" auf der Ideenbox. Hier bleibt
   nur, was die Stelle braucht: der Abstand nach oben und der Pfeil, der
   beim Ueberfahren nach unten zeigt. */
.gs-runter {
  align-self: start;
  margin-top: clamp(26px, 3.4vw, 42px);
  text-decoration: none !important;
}
.gs-runter span {
  display: inline-block;
  transition: transform 220ms ease;
}
.gs-runter:hover span {
  transform: translateY(4px);
}
@media (prefers-reduced-motion: reduce) {
  .gs-runter span {
    transition: none;
  }
}

/* Das Bild wird aus dem Zeilenfluss genommen. `height: 100%` allein
   reicht nicht: die Grid-Zeile ist automatisch hoch, ihre Hoehe kommt
   also aus dem Inhalt — und der Inhalt will 100 Prozent von ihr. Diese
   Schleife loest der Browser zugunsten der Eigenhoehe des Bildes auf,
   gemessen 868px bei 579px Spaltenbreite. Die Messleiste rutschte damit
   unter die Falz, und genau die soll man sehen.

   Absolut gesetzt traegt das Bild nichts mehr zur Zeilenhoehe bei; die
   bestimmen der Text und die Mindesthoehe hier. */
.gs-auftakt-bild {
  position: relative;
  min-height: clamp(300px, 34vw, 470px);
}
.gs-auftakt-bild picture {
  position: absolute;
  inset: 0;
  display: block;
}

.gs-auftakt-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Die Fahne ueber dem Eingang sitzt bei 72 Prozent der Bildhoehe —
     der Bildtext verspricht sie, also muss sie zu sehen sein. */
  object-position: center 68%;
}

/* Die Messleiste: 1857, die Spanne, 2027. Sie traegt die These der Seite
   in einer Zeile — wer nur den Kopf sieht, hat sie trotzdem gelesen. */
.gs-spanne {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--line-dunkel);
}
/* Waagrecht keine eigene Polsterung mehr: die Spur setzt der Auftakt.
   „1857" steht damit auf derselben Kante wie die Ueberschrift. Die
   Trennlinien bekommen ihren Abstand ueber die Zellen selbst. */
.gs-spanne > div {
  padding: clamp(16px, 2vw, 24px) 0;
}
.gs-spanne > div + div {
  padding-left: clamp(16px, 2vw, 28px);
}
.gs-spanne > div:not(:last-child) {
  padding-right: clamp(16px, 2vw, 28px);
}
.gs-spanne > div + div {
  border-left: 1px solid var(--line-dunkel);
}
.gs-spanne-mitte {
  text-align: center;
}
.gs-spanne > div:last-child {
  text-align: right;
}
.gs-spanne dt {
  margin: 0 0 6px;
  color: var(--cream-soft);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gs-spanne dd {
  margin: 0;
  color: var(--gold-light);
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* Ein Auftritt, gestaffelt. Nur beim Laden, nicht beim Scrollen — der
   Kopf steht ohnehin schon im Bild. */
@media (prefers-reduced-motion: no-preference) {
  .gs-ort,
  .gs-auftakt h1,
  .gs-vorspann,
  .gs-runter,
  .gs-spanne {
    animation: gs-auftritt 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .gs-auftakt h1 { animation-delay: 70ms; }
  .gs-vorspann   { animation-delay: 150ms; }
  .gs-runter     { animation-delay: 230ms; }
  .gs-spanne     { animation-delay: 300ms; }
}

@keyframes gs-auftritt {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Kopf der Seite -------------------------------------------------- */

.rt-kicker {
  color: var(--gold-text);
}

/* Der Vorspann ist der Satz, an dem die Seite haengt. In rechtstext.css
   steht er als 13px-Randnotiz unter der Ueberschrift — hinter einer
   56px-Zeile liest sich das wie eine Fussnote. Hier traegt er. */
.rt-stand {
  max-width: 30em;
  border-bottom: 0;
  padding-bottom: 0;
  color: var(--anthracite);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.55;
}

/* Die Erklaerung der offenen Jahre. Steht vor dem Strahl und bleibt
   trotzdem leise: eine Randnotiz an einer Haarlinie, kein vierter
   gestrichelter Kasten. */
.gs-fussnote {
  max-width: 34em;
  margin: clamp(26px, 3.4vw, 38px) 0 clamp(44px, 5.5vw, 66px) !important;
  padding-left: 18px;
  border-left: 2px solid var(--gold-text);
  color: var(--grau);
  font-size: 13.5px;
  line-height: 1.7;
}
.gs-fussnote b {
  color: var(--anthracite);
}

/* --- Der Zeitstrahl -------------------------------------------------- */
/* Eine einzige Liste von 1857 bis 2027. Links das Jahr, rechts die
   Station; die Linie laeuft durch die Textspalte, der Punkt sitzt auf
   ihr. Die Bildstrecken liegen als `.gs-einschub` in derselben Liste
   und fuehren die Linie weiter — vorher zerfiel der Strahl in drei
   Stuecke, und mit ihm die Chronologie. */
.gs-strahl {
  scroll-margin-top: clamp(24px, 5vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gs-station {
  display: grid;
  grid-template-columns: var(--jahr-b) 1fr;
  gap: 0 var(--strahl-gap);
}

/* Die Jahreszahl traegt die Seite. Sie ist das einzige Element, das in
   jeder Station wiederkehrt, und deshalb gross genug, um den Rhythmus
   vorzugeben — vorher war sie mit 20px kleiner als die Ueberschrift
   daneben, und der Strahl hatte keine Ordnung. */
.gs-jahr {
  padding-top: 22px;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--gold-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* „Jahr offen“: kein Kasten. Der gestrichelte Strich haelt genau den
   Platz frei, den eine vierstellige Zahl brauchen wuerde — die Luecke
   ist damit sichtbar, ohne wie ein Fehler auszusehen. */
.gs-offen {
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--gold-text);
  color: var(--gold-text);
  font-family: 'Manrope', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

/* Die Marke ist nur 11px hoch, die Jahreszahl 46 — mit gleichem
   Abstand von oben saesse sie deutlich unter der Ueberschrift daneben.
   Der Zuschlag setzt sie optisch auf dieselbe Linie. */
.gs-station[data-offen="true"] .gs-jahr {
  padding-top: 30px;
}

.gs-inhalt {
  position: relative;
  padding: 26px 0 34px 30px;
  border-left: 1px solid var(--line-hell);
}

/* Der Punkt auf der Linie. Datierte Stationen tragen ihn gefuellt,
   undatierte hohl — der Unterschied ist ohne Legende lesbar.
   Farbe ist `--gold-text` statt `--gold`: als Bedienelement braucht
   der Punkt 3:1, und #c9a24b auf Cream kommt nur auf 1,93:1. */
.gs-inhalt::before {
  content: "";
  position: absolute;
  top: 32px;
  left: -6px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--gold-text);
  border-radius: 50%;
  background: var(--gold-text);
}
.gs-station[data-offen="true"] .gs-inhalt::before {
  background: var(--cream);
}

/* Die letzte Station schliesst die Linie ab, statt sie auslaufen zu
   lassen. Eigene Klasse statt `:last-child`: nach der Station folgt
   noch ein Einschub, und der soll die Linie nicht wieder aufnehmen. */
.gs-station--schluss .gs-inhalt {
  border-left-color: transparent;
  box-shadow: inset 1px 0 0 0 var(--line-hell);
}
.gs-station--schluss .gs-inhalt::after {
  content: "";
  position: absolute;
  top: 38px;
  bottom: 0;
  left: -1px;
  width: 1px;
  background: var(--cream);
}

.gs-inhalt h2 {
  margin: 0 0 8px !important;
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.gs-inhalt p {
  margin: 0 !important;
  max-width: 34em;
  color: var(--grau);
  font-size: 16px;
}

/* Der Einschub fuehrt die Linie durch die Bildstrecke hindurch. Sie
   liegt darunter: wo das Bild steht, verschwindet sie, in den
   Zwischenraeumen ist sie wieder da. */
.gs-einschub {
  position: relative;
}
.gs-einschub::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--strahl-x);
  width: 1px;
  background: var(--line-hell);
  z-index: 0;
}
.gs-einschub > .gs-strecke {
  position: relative;
  z-index: 1;
}
/* Der letzte Einschub kommt nach der Schluss-Station. Dort ist die
   Zeitlinie schon abgeschlossen — sonst steht neben der Treppe noch
   ein Linienstummel, der nirgendwo hinfuehrt. */
.gs-strahl > .gs-einschub:last-child::before {
  content: none;
}

/* --- Was bleibt ------------------------------------------------------ */
/* Ein Band ueber die volle Streckenbreite. Vorher ein grauer Kasten in
   der Textspalte, der neben den Bildstrecken verschwand — dabei ist es
   die Antwort des Hauses auf den Umbau. */
.gs-bestand {
  margin-top: clamp(50px, 6vw, 78px) !important;
  padding-top: 26px;
  border-top: 2px solid var(--anthracite);
}
.gs-bestand h2 {
  margin: 0 0 4px !important;
  font-family: 'Archivo Black', "Arial Black", sans-serif !important;
  font-size: clamp(19px, 2.2vw, 23px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}
.gs-bestand ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 clamp(12px, 2vw, 26px);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.gs-bestand li {
  margin: 0 !important;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line-hell);
  font-family: 'Archivo Black', "Arial Black", sans-serif;
  font-size: clamp(13px, 1.35vw, 17px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

/* --- Auftakt auf schmalen Fenstern ------------------------------------ */
@media (max-width: 820px) {
  /* Bild nach oben: es ist der Haken, der Text die Einordnung. */
  .gs-auftakt {
    grid-template-columns: 1fr;
  }
  .gs-auftakt-bild {
    order: -1;
  }
  .gs-auftakt-bild {
    min-height: clamp(240px, 56vw, 420px);
  }
  .gs-auftakt-bild img {
    object-position: center 70%;
  }
}

@media (max-width: 520px) {
  /* Drei Spalten waeren hier 85px breit — „169 Jahre“ passt nicht.
     Also drei Zeilen, Bezeichnung links, Wert rechts. */
  .gs-spanne {
    grid-template-columns: 1fr;
  }
  .gs-spanne > div,
  .gs-spanne-mitte,
  .gs-spanne > div:last-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 22px;
    text-align: left;
  }
  .gs-spanne > div + div {
    border-left: 0;
    border-top: 1px solid var(--line-dunkel);
  }
  .gs-spanne dt {
    margin: 0;
  }
  .gs-spanne dd {
    font-size: 22px;
  }
}

/* --- Schmale Fenster ------------------------------------------------- */
@media (max-width: 620px) {
  /* Der Strahl bleibt ein Strahl. Vorher fielen Linie und Punkte auf
     dem Telefon ganz weg und uebrig blieb eine Liste — ausgerechnet
     auf dem Geraet, mit dem die meisten hier ankommen. Jetzt ruecken
     Jahr und Text in dieselbe Spalte, die Schiene bleibt links. */
  :root {
    --jahr-b: 0px;
    --strahl-gap: 0px;
    --strahl-x: 0px;
  }
  .gs-station {
    grid-template-columns: 1fr;
  }
  .gs-jahr {
    position: relative;
    padding: 26px 0 0 26px;
    border-left: 1px solid var(--line-hell);
    text-align: left;
    font-size: clamp(28px, 9vw, 38px);
  }
  .gs-jahr::before {
    content: "";
    position: absolute;
    top: 32px;
    left: -6px;
    width: 11px;
    height: 11px;
    border: 2px solid var(--gold-text);
    border-radius: 50%;
    background: var(--gold-text);
  }
  .gs-station[data-offen="true"] .gs-jahr::before {
    background: var(--cream);
  }
  .gs-inhalt {
    padding: 10px 0 30px 26px;
  }
  /* Der Punkt steht jetzt am Jahr; in der Textzelle waere er doppelt. */
  .gs-inhalt::before {
    display: none;
  }
  .gs-station--schluss .gs-inhalt::after {
    top: 0;
  }

  .gs-bestand ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Auftritt beim Scrollen ------------------------------------------ */
/* Ohne JavaScript: `animation-timeline: view()` haengt die Bewegung an
   den Scrollstand. Browser ohne diese Technik zeigen die Seite einfach
   fertig an — es gibt nichts, was erst eingeblendet werden muesste. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .gs-station,
    .gs-einschub > .gs-strecke,
    .gs-bestand,
    .gs-raster {
      animation: gs-auf linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 24%;
    }
  }
}

@keyframes gs-auf {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== Goldschrift in den Ueberschriften =============================
   Die Pointe traegt denselben Blattgold-Verlauf wie die Startseite ihn
   fuer `.house-xray h2 em` benutzt: `--gold-schrift` (steht in
   kopf.css) wird per `background-clip: text` durch die Buchstaben
   gestanzt, die eigene Farbe faellt auf transparent. `--glanz` fuehrt
   die Lichtbahn, das erledigt kopf.js — die Schrift schimmert also mit
   der Maus mit.

   BEWUSST NUR CSS, kein WebGL. `gold3d.js` malt Ueberschriften auf ein
   Canvas, das die Zeilen exakt nachzeichnet — es teilt sie aber NUR an
   `<br>`. Ein Satz ohne harten Umbruch wird einzeilig gemalt, waehrend
   der Text darunter umbricht; auf der Lage-Seite stand daraufhin "Neun
   Minuten zum Ba" (24.08.). Der CSS-Verlauf hat das Problem nicht: er
   folgt dem Text, gleich wie oft er umbricht.

   Deshalb bleibt die Pointe auch `inline` — ein Block wuerde nur die
   Zeile brechen, ohne etwas zu gewinnen. */
.gs-auftakt h1 em {
  /* Block, damit `gold3d.js` die Pointe fassen darf: sein Filter
     laesst inline-Elemente aus. Der CSS-Verlauf darunter bleibt der
     Notfallpfad fuer Telefon, "weniger Bewegung" und fehlendes WebGL. */
  display: block;
  background: var(--gold-schrift);
  background-blend-mode: var(--gold-mischung);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Die Kursive haengt ueber ihre Zeilenbox hinaus. Weil die Schrift per
     background-clip gemalt wird, endet die Farbe an der Boxkante — das
     letzte Zeichen einer Zeile war sonst angeschnitten. Der Innenrand
     verbreitert die Malflaeche, der negative Aussenrand nimmt ihn fuers
     Layout zurueck, `clone` gibt ihn jeder Zeile einzeln. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.14em;
  margin: 0 -0.14em;
}