/* Zeitstrahl. Eine Jahresleiste mit dem Jahr des gerade sichtbaren Eintrags (klebt oben, am Handy über der Linie, in der breiten Spalte
   links), rechts läuft die Linie mit den Ereignissen. Die Leiste gibt es nur mit JavaScript (Klasse zs-js), ohne bleibt es eine
   schlichte Liste, in der jeder Eintrag sein Jahr selbst nennt. Der Text steht still, nichts blendet beim Scrollen ein; bewegt
   sich nur die Jahreszahl, wenn sie wechselt (einmal, kurz). */
.zeitstrahl {
  --zs-oben: calc(var(--kopf-hoehe, 0px) + .5rem);
  --zs-x: .65rem;                      /* Mitte der Linie */
  --zs-einzug: 1.9rem;
  margin-block: 1.5rem 2.5rem;
  container-type: inline-size;         /* das Layout richtet sich nach der Breite des Zeitstrahls, nicht nach dem Fenster */
}

/* Jahresleiste */
.zs-jahre { margin-bottom: .75rem; }
.zs-chips {
  position: relative;
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: .2rem .15rem .6rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.zs-chips li { flex: 0 0 auto; }
.zs-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .95rem;
  border: 1px solid var(--farbe-linie, #d8cfbd);
  border-radius: 999px;
  background: var(--farbe-flaeche, #fffdf8);
  color: var(--farbe-text, #1f1a14);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.zs-chip:hover { border-color: var(--farbe-akzent, #8a3b2a); }
.zs-chip:focus-visible { outline: 3px solid var(--farbe-fokus, #1a5fb4); outline-offset: 2px; }
.zs-chip[aria-current="true"] { background: var(--farbe-akzent, #8a3b2a); border-color: var(--farbe-akzent, #8a3b2a); color: var(--farbe-auf-akzent, #fff); }

/* Linie */
.zs-buehne { position: relative; }
.zs-linie { position: relative; margin: 0; padding: 0 0 0 var(--zs-einzug); list-style: none; }
.zs-linie::before {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: 0;
  left: calc(var(--zs-x) - 1px);
  width: 2px;
  background: var(--farbe-linie, #d8cfbd);
}

.zs-eintrag { position: relative; padding-bottom: 1.6rem; scroll-margin-top: calc(var(--zs-oben) + 7.5rem); }
.zs-eintrag:last-child { padding-bottom: .5rem; }
.zs-punkt {
  position: absolute;
  top: .55rem;
  left: calc(var(--zs-x) - var(--zs-einzug) - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--farbe-akzent, #8a3b2a);
  border-radius: 50%;
  background: var(--farbe-papier, #f7f3ea);
}
.zs-eintrag.is-reached .zs-punkt { background: var(--farbe-akzent, #8a3b2a); }

.zs-karte > * { min-width: 0; }
.zs-karte {
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: .6rem 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--farbe-linie, #d8cfbd);
  border-radius: var(--radius, 10px);
  background: var(--farbe-flaeche, #fffdf8);
}
.zs-zeit { margin: 0; color: var(--farbe-akzent, #8a3b2a); font-weight: 700; font-variant-numeric: tabular-nums; }
.zs-titel { overflow-wrap: anywhere; hyphens: auto; margin: .1rem 0 .3rem; font-family: var(--schrift-ueberschrift, Georgia, 'Times New Roman', serif); font-size: 1.25rem; line-height: 1.25; }
.zs-titel a { display: inline-block; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: none; }   /* Tippziel mindestens 44 px, ohne die Zeile zu verlängern */
.zs-titel a:hover { text-decoration: underline; }
.zs-kurz { margin: 0; font-size: var(--t-klein); line-height: 1.5; }
.zs-bild { margin: 0; }
.zs-bild a { display: block; line-height: 0; background: var(--farbe-flaeche-2, #efe8d9); border-radius: 6px; overflow: hidden; }
.zs-bild img { display: block; width: auto; max-width: 100%; height: auto; max-height: 15rem; margin-inline: auto; object-fit: contain; }
.zs-bild figcaption { margin-top: .3rem; font-size: var(--t-klein); line-height: 1.35; color: var(--farbe-text-leise, #6b6254); }
.zs-bild figcaption small { display: block; }
.zs-quelle { grid-column: 1 / -1; margin: 0; padding-top: .5rem; border-top: 1px dashed var(--farbe-linie, #d8cfbd); font-size: var(--t-klein); line-height: 1.4; color: var(--farbe-text-leise, #6b6254); }

/* Jahresleiste (nur mit JavaScript): die Jahreszahl in der Titelschrift, darunter oder daneben die Epoche, unterstrichen in Ocker */
.zs-jahr { display: none; }
.zs-js .zs-jahr {
  position: sticky;
  top: var(--zs-oben);
  z-index: 5;
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .9rem;
  padding: .3rem .2rem .45rem;
  background: var(--farbe-papier, #f7f3ea);
  border-bottom: 3px solid var(--ocker-fl);
}
.zs-jahrzahl {
  display: block;
  font-family: var(--schrift-ueberschrift, Georgia, 'Times New Roman', serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-text, #1f1a14);
}
.zs-jahrzahl.tick { animation: zs-setzt var(--d-teil) var(--kurve-setzen); }
@keyframes zs-setzt { from { transform: translateY(.2em); opacity: .2; } to { transform: none; opacity: 1; } }
.zs-epoche { font-size: var(--t-klein); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--farbe-text-leise, #6b6254); }

@container (min-width: 40rem) {
  .zs-buehne { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .zs-js .zs-jahr {
    top: calc(var(--zs-oben) + 1rem);
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    margin: 0;
    padding: .2rem 0 .3rem 1rem;
    border-bottom: 0;
    border-left: 4px solid var(--ocker-fl);
  }
  .zs-jahrzahl { font-size: 3rem; }
  .zs-eintrag { scroll-margin-top: calc(var(--zs-oben) + 1rem); }
}

/* Ruhe: keine Bewegung, alles steht sofort */
@media (prefers-reduced-motion: reduce) {
  .zeitstrahl *, .zeitstrahl *::before, .zeitstrahl *::after { animation: none !important; transition: none !important; }
  .zs-chips { scroll-behavior: auto; }
}
html[data-bewegung="ruhig"] .zeitstrahl *, html[data-bewegung="ruhig"] .zeitstrahl *::before, html[data-bewegung="ruhig"] .zeitstrahl *::after { animation: none !important; transition: none !important; }