/* Historic Horizons, Themenseite. Dunkle Bühne der Marke (74 - Brands und Styles/Historic Horizons, design-tokens.json):
   Gold auf Tiefschwarz als Lesefarbe, Messing für Linien, Pergament für Mengensatz. Radius null, Haarlinien statt
   Schatten, keine serifenlose Schrift. Modul SEITEN, TIK-0896. */

@font-face { font-family: "Cinzel"; src: url("schriften/Cinzel-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("schriften/Cinzel-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/Spectral-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/Spectral-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/Spectral-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Spectral"; src: url("schriften/Spectral-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schriften/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("schriften/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --grund: #0A0A0B;         /* Tiefschwarz, Bühne */
  --flaeche: #1A160E;       /* Bitumen, abgesetzte Fläche */
  --linie: #3F301C;         /* Haarlinie auf der Bühne */
  --gold: #E0C084;          /* Lesefarbe, 11,35:1 */
  --messing: #B0874A;       /* Linie, Rahmen, Datierung, 6,04:1 */
  --schrift: #F2EBDD;       /* Pergament als Mengensatz auf Tiefschwarz */
  --schrift-2: #C9BBA0;     /* zurückgenommen, gleiche Wärme */
  --aus: #8A7C66;           /* nicht verfügbar, 4,86:1 */
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --text: "Spectral", Georgia, "Times New Roman", serif;
  --daten: "IBM Plex Mono", ui-monospace, monospace;
  --rand: clamp(1.25rem, 4vw, 3.5rem);
  --spalte: 40rem;          /* rund 70 Zeichen Spectral bei 1,125rem */
  --bahn: 7.6rem;           /* Höhe einer Beschriftungsbahn an der Zeitachse (Datum, Abstand, drei Titelzeilen) */
  --abstand: 2rem;          /* von der Linie zur ersten Bahn, darunter liegen Skalenschrift und »heute« */
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--grund); color-scheme: dark; scrollbar-color: var(--messing) var(--grund); }
body {
  margin: 0; background: var(--grund); color: var(--schrift);
  font: 400 1.125rem/1.7 var(--text); font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--gold); color: var(--grund); }
img { display: block; max-width: 100%; height: auto; }
.unsichtbar { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main:focus { outline: none; }
a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--messing); }
a:hover { text-decoration-color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
input, textarea { caret-color: var(--gold); }

.sprung { position: absolute; left: var(--rand); top: -3rem; padding: .5rem .8rem; background: var(--gold); color: var(--grund); z-index: 5; }
.sprung:focus { top: .75rem; }

/* Kopf */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem var(--rand); border-bottom: 1px solid var(--linie);
}
.marke { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.marke__signet { width: 2.75rem; height: 2.75rem; }
.marke__wort {
  font: 400 .95rem/1 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
}
.sprachen { display: flex; gap: 0; font: 500 .78rem/1 var(--daten); letter-spacing: .12em; }
.sprachen > * { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem;
  padding: 0 .6rem; border: 1px solid var(--linie); margin-left: -1px; }
.sprachen a { text-decoration: none; color: var(--schrift-2); }
.sprachen a:hover { color: var(--gold); border-color: var(--messing); }
.sprachen__aktiv { color: var(--grund); background: var(--gold); border-color: var(--gold) !important; }
.sprachen__aus { color: var(--aus); }

/* Auftakt */
.auftakt { padding: clamp(3.5rem, 11vh, 7.5rem) var(--rand) 1.5rem; text-align: center; }
.auftakt__titel, .blatt__titel, .exponat__titel, .punkt__titel, .blaettern a, .fehlt h1, .fehlt h2 { overflow-wrap: break-word; }
.auftakt__titel {
  margin: 0; font: 400 clamp(2.4rem, 7.2vw, 5.8rem)/1.02 var(--display); letter-spacing: .09em;
  text-transform: uppercase; color: var(--gold); text-wrap: balance;
}
.auftakt__claim { margin: 1.4rem auto 0; font: italic 400 clamp(1.1rem, 2vw, 1.45rem)/1.4 var(--text); color: var(--schrift-2); }

/* Zeitachse */
.achse { padding: clamp(2rem, 6vh, 4rem) var(--rand) 0; }
.achse__titel, .bestand__titel {
  margin: 0 0 1.5rem; font: 500 .8rem/1 var(--daten); letter-spacing: .24em; text-transform: uppercase;
  color: var(--messing); text-align: center;
}
/* Beschriftungen liegen auf Bahnen (erweiterung.py, bahnen_verteilen): --bo und --bu zählen die Bahnen über und unter der
   Linie, --ebene die Bahn eines Punkts. Die Raute sitzt am Ende der Verbindungslinie und gehört zum Link. */
.achse__buehne {
  position: relative; max-width: 84rem; margin: 0 auto;
  --linie-y: calc(var(--bo, 1) * var(--bahn) + var(--abstand));
  height: calc((var(--bo, 1) + var(--bu, 0)) * var(--bahn) + 2 * var(--abstand));
}
.achse__linie { position: absolute; left: 0; right: 0; top: var(--linie-y); height: 1px; }
/* Die Linie ist ein eigenes Element, damit ihre Einzeichnen-Bewegung Striche und Beschriftung nicht mitbeschneidet. */
.achse__linie::before { content: ""; position: absolute; inset: 0; background: var(--messing); }
.achse__tick { position: absolute; left: var(--pos); top: -.45rem; width: 1px; height: .9rem; background: var(--messing); }
.achse__tick > span, .achse__heute > span {
  position: absolute; top: 1.05rem; white-space: nowrap;
  font: 400 .72rem/1 var(--daten); letter-spacing: .06em; color: var(--messing); font-variant-numeric: lining-nums;
}
.achse__tick > span { left: 50%; transform: translateX(-50%); }
.achse__tick--rand > span { left: 0; transform: none; }
.achse__heute { position: absolute; right: 0; top: 0; }
.achse__heute::before {
  content: ""; position: absolute; right: -.35rem; top: -.35rem; width: .7rem; height: .7rem; background: var(--gold);
  transform: rotate(45deg);
}
.achse__heute > span { right: -.35rem; top: .75rem; color: var(--gold); }
.achse__punkte { list-style: none; margin: 0; padding: 0; }
.achse__band { display: none; }
.punkt { position: absolute; left: var(--pos); top: var(--linie-y); width: 22%; height: 0; }
.punkt--rechts { left: calc(var(--pos) - 22%); }
.punkt__verweis {
  position: absolute; left: 0; right: 0; display: grid; gap: .3rem; padding: 0 0 0 1rem;
  border-left: 1px solid var(--messing); text-decoration: none;
  --weg: calc(var(--abstand) + var(--ebene, 0) * var(--bahn));
}
.punkt--oben .punkt__verweis { bottom: var(--weg); }
.punkt--unten .punkt__verweis { top: var(--weg); }
.punkt--rechts .punkt__verweis { padding: 0 1rem 0 0; border-left: 0; border-right: 1px solid var(--messing); text-align: right; }
/* Verbindungslinie von der Beschriftung zur Achse, am Ende die Raute */
.punkt__verweis::before, .punkt__verweis::after { content: ""; position: absolute; left: -1px; }
.punkt__verweis::before { width: 1px; height: var(--weg); background: var(--messing); }
.punkt--oben .punkt__verweis::before { top: 100%; }
.punkt--unten .punkt__verweis::before { bottom: 100%; }
.punkt__verweis::after {
  width: .6rem; height: .6rem; margin-left: -.3rem; background: var(--grund); border: 1px solid var(--gold);
  transform: rotate(45deg);
}
.punkt--oben .punkt__verweis::after { top: calc(100% + var(--weg) - .3rem); }
.punkt--unten .punkt__verweis::after { bottom: calc(100% + var(--weg) - .3rem); }
.punkt--rechts .punkt__verweis::before, .punkt--rechts .punkt__verweis::after { left: auto; right: -1px; }
.punkt--rechts .punkt__verweis::after { margin: 0 -.3rem 0 0; }
.punkt__verweis:hover::after, .punkt__verweis:focus-visible::after { background: var(--gold); }
.punkt__datum { font: 500 .8rem/1.2 var(--daten); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-variant-numeric: lining-nums; }
.punkt__abstand { font: 400 .78rem/1.2 var(--daten); color: var(--schrift-2); font-variant-numeric: lining-nums; }
.punkt__titel {
  font: 400 clamp(1rem, 1.3vw, 1.2rem)/1.25 var(--display); letter-spacing: .03em; color: var(--schrift); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.punkt__verweis:hover .punkt__titel, .punkt__verweis:focus-visible .punkt__titel { color: var(--gold); }
/* Kein Platz auf einer Bahn: nur die Raute, der Titel steht im Exponat darunter und im Tooltip */
.punkt--stumm { width: 0; }
.punkt--stumm .punkt__verweis { top: -.6rem; bottom: auto; width: 1.2rem; height: 1.2rem; margin-left: -.6rem; padding: 0; border: 0; }
.punkt--stumm .punkt__verweis > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.punkt--stumm .punkt__verweis::before { display: none; }
.punkt--stumm { left: var(--pos); }
.punkt--stumm .punkt__verweis::after { top: .3rem; bottom: auto; left: .6rem; right: auto; margin: 0 0 0 -.3rem; }
.achse__hinweis { max-width: 38rem; margin: 1rem auto 0; text-align: center; font-size: .95rem; color: var(--schrift-2); }

@media (prefers-reduced-motion: no-preference) {
  .achse__linie::before { animation: zeichnen 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes zeichnen { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
}

/* Bestand */
.bestand { padding: clamp(4rem, 12vh, 7rem) var(--rand) 0; }
.bestand__liste { list-style: none; margin: 0 auto; padding: 0; max-width: 72rem; }
.exponat {
  display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: 2.5rem 0; border-top: 1px solid var(--linie);
}
.exponat:last-child { border-bottom: 1px solid var(--linie); }
.exponat__bild { display: block; outline: 1px solid var(--messing); outline-offset: .45rem; }
.exponat__bild img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.etikett__datum { margin: 0 0 .6rem; font: 500 .8rem/1.3 var(--daten); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.etikett__datum span { display: block; color: var(--schrift-2); text-transform: none; letter-spacing: .02em; font-weight: 400; }
.exponat__titel { margin: 0 0 .8rem; font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--display); letter-spacing: .03em; text-wrap: balance; }
.exponat__titel a { color: var(--schrift); text-decoration: none; }
.exponat__titel a:hover { color: var(--gold); }
.exponat__einleitung { margin: 0 0 1rem; color: var(--schrift-2); max-width: 38rem; }
.exponat__fakten { margin: 0; font: 400 .78rem/1.4 var(--daten); color: var(--messing); letter-spacing: .04em; font-variant-numeric: lining-nums; }

/* Blatt: Artikel und Rechtstexte */
.blatt { padding: clamp(2rem, 6vh, 4rem) var(--rand) 0; }
.blatt__kopf { max-width: var(--spalte); margin: 0 auto; }
.blatt__zurueck { margin: 0 0 1.6rem; font: 500 .78rem/1 var(--daten); letter-spacing: .12em; text-transform: uppercase; }
.blatt__zurueck a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.blatt__daten { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 2rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.blatt__daten > div { padding: .8rem 1.4rem .8rem 0; margin-right: 1.4rem; }
.blatt__daten dt { font: 500 .7rem/1 var(--daten); letter-spacing: .2em; text-transform: uppercase; color: var(--messing); margin-bottom: .45rem; }
.blatt__daten dd { margin: 0; font: 400 .9rem/1.3 var(--daten); color: var(--gold); font-variant-numeric: lining-nums; }
.blatt__daten dd span { display: block; color: var(--schrift-2); }
.blatt__titel { margin: 0; font: 400 clamp(1.7rem, 4.6vw, 3.5rem)/1.12 var(--display); letter-spacing: .04em; color: var(--gold); text-wrap: balance; }
.blatt__einleitung { margin: 1.5rem 0 0; font: 300 clamp(1.2rem, 2vw, 1.4rem)/1.55 var(--text); color: var(--schrift); }
.blatt__stand { margin: .8rem 0 0; font: 400 .8rem/1 var(--daten); color: var(--messing); }
.blatt__titelbild { max-width: 68rem; margin: clamp(2.5rem, 6vh, 4rem) auto; outline: 1px solid var(--messing); outline-offset: .5rem; }
.blatt__titelbild img { width: 100%; }
.blatt__text { max-width: var(--spalte); margin: 0 auto; }
.blatt--recht .blatt__text { margin-top: 2.5rem; font-variant-numeric: lining-nums; }
.blatt__text h2, .blatt__text h3 { font-family: var(--display); font-weight: 400; color: var(--gold); letter-spacing: .03em; text-wrap: balance; }
.blatt__text h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.2; margin: 3.2rem 0 1rem; }
.blatt__text h3 { font-size: 1.3rem; line-height: 1.25; margin: 2.4rem 0 .8rem; }
.blatt__text p { margin: 0 0 1.25rem; }
.blatt__text strong { font-weight: 600; color: var(--schrift); }
.blatt__text p:has(> img) { margin: 2.5rem 0 .8rem; }
.blatt__text p > img { width: 100%; outline: 1px solid var(--linie); background: var(--flaeche); }
.blatt__text p:has(> img) + p > em:only-child { display: block; font-size: .92rem; line-height: 1.5; color: var(--schrift-2); }
.blatt__text p:has(> img:nth-of-type(2)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.blatt__text blockquote { margin: 2rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 1px solid var(--messing); font-style: italic; color: var(--schrift); }
.blatt__text ul, .blatt__text ol { padding-left: 1.3rem; margin: 0 0 1.25rem; }
.blatt__text li { margin-bottom: .4rem; }
.blatt__text li::marker { color: var(--messing); }
.blatt__text hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }
.blatt__text table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.5rem 0; font-variant-numeric: lining-nums tabular-nums; }
.blatt__text th, .blatt__text td { text-align: left; padding: .55rem .7rem .55rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.blatt__text th { font: 500 .75rem/1.2 var(--daten); letter-spacing: .12em; text-transform: uppercase; color: var(--messing); }

.erstquelle { max-width: var(--spalte); margin: 3.5rem auto 0; padding: 1.6rem 0; border-top: 1px solid var(--messing); border-bottom: 1px solid var(--linie); }
.erstquelle h2 { margin: 0 0 .6rem; font: 500 .75rem/1 var(--daten); letter-spacing: .22em; text-transform: uppercase; color: var(--messing); }
.erstquelle p { margin: 0 0 .5rem; color: var(--schrift-2); }
.blaettern { max-width: var(--spalte); margin: 2.5rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.blaettern a { display: grid; gap: .35rem; text-decoration: none; font: 400 1.05rem/1.3 var(--display); color: var(--schrift); }
.blaettern a:hover { color: var(--gold); }
.blaettern span { font: 500 .72rem/1 var(--daten); letter-spacing: .2em; text-transform: uppercase; color: var(--messing); }
.blaettern__nach { text-align: right; grid-column: 2; }

/* Fuß */
.fuss { margin-top: clamp(3rem, 8vh, 5rem); padding: 3rem var(--rand) 3.5rem; border-top: 1px solid var(--linie); text-align: center; }
.fuss__marke img { width: 3.5rem; height: 3.5rem; margin: 0 auto; }
.fuss__claim { margin: 1rem 0 0; font: 400 .9rem/1.4 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.fuss__dach { margin: 1.4rem 0 .6rem; font-size: .95rem; }
.fuss__dach a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.fuss__recht a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem; }
.fuss__recht { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; font: 400 .78rem/1 var(--daten); letter-spacing: .1em; text-transform: uppercase; }
.fuss a { color: var(--schrift-2); }
.fuss a:hover { color: var(--gold); }

/* Fehlerseite */
.fehlt { max-width: 38rem; margin: 0 auto; padding: clamp(4rem, 14vh, 8rem) var(--rand) 0; text-align: center; }
.fehlt img { margin: 0 auto 2rem; }
.fehlt h1 { margin: 0 0 1rem; font: 400 clamp(1.6rem, 4vw, 2.4rem)/1.2 var(--display); color: var(--gold); letter-spacing: .04em; text-wrap: balance; }
.fehlt p { color: var(--schrift-2); }
.fehlt__sprache + .fehlt__sprache { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.fehlt h2 { margin: 0 0 .8rem; font: 400 clamp(1.25rem, 3vw, 1.6rem)/1.25 var(--display); color: var(--gold); letter-spacing: .04em; text-wrap: balance; }
.fehlt__vorschlaege { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--messing); }
.fehlt__vorschlaege h2 { font: 500 .78rem/1 var(--daten); letter-spacing: .22em; text-transform: uppercase; color: var(--messing); }
.fehlt__vorschlaege ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.fehlt__vorschlaege li + li { border-top: 1px solid var(--linie); }
.fehlt__vorschlaege a { display: block; padding: .8rem 0; font: 400 1.05rem/1.3 var(--display); color: var(--schrift); text-decoration: none; }
.fehlt__vorschlaege a:hover { color: var(--gold); }

/* Schmale Bildschirme: die Zeitachse steht senkrecht, fern oben, heute unten. Statt gestauchter Abstände zeigen
   Zehnerbänder (achse__band), wie weit ein Beitrag zurückliegt; stumme Punkte bekommen hier ihre volle Beschriftung. */
@media (max-width: 59.99rem) {
  .achse__buehne { height: auto; padding: .25rem 0 2.6rem 1.8rem; }
  .achse__linie { top: 0; bottom: 0; left: .3rem; right: auto; width: 1px; height: auto; }
  .achse__tick { display: none; }
  .achse__heute { right: auto; left: 0; top: auto; bottom: 0; }
  .achse__heute::before { right: auto; left: -.35rem; top: auto; bottom: -.35rem; }
  .achse__heute > span { right: auto; left: 1.15rem; top: auto; bottom: -.4rem; }
  .achse__band {
    display: block; position: relative; margin: -.6rem 0 1.4rem; font: 400 .72rem/1 var(--daten); letter-spacing: .06em;
    color: var(--messing); font-variant-numeric: lining-nums;
  }
  .achse__band::before { content: ""; position: absolute; left: -1.95rem; top: .35rem; width: .9rem; height: 1px; background: var(--messing); }
  .punkt, .punkt--rechts, .punkt--stumm { position: relative; left: 0; top: auto; width: auto; height: auto; margin: 0 0 2rem; }
  .punkt__verweis, .punkt--oben .punkt__verweis, .punkt--unten .punkt__verweis, .punkt--rechts .punkt__verweis,
  .punkt--stumm .punkt__verweis {
    position: relative; top: auto; bottom: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; text-align: left;
  }
  .punkt--stumm .punkt__verweis > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .punkt__verweis::before, .punkt--stumm .punkt__verweis::before { display: none; }
  .punkt__verweis::after, .punkt--oben .punkt__verweis::after, .punkt--unten .punkt__verweis::after,
  .punkt--rechts .punkt__verweis::after, .punkt--stumm .punkt__verweis::after {
    left: -1.5rem; right: auto; top: .3rem; bottom: auto; margin: 0 0 0 -.3rem;
  }
  .punkt__titel { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 1.1rem; }
  /* Nur hier trennen: lange Komposita in Cinzel liefen bei 320 und 390 px aus dem Bild, am Desktop ist Platz */
  .auftakt__titel, .blatt__titel, .exponat__titel, .punkt__titel, .blaettern a, .fehlt h1, .fehlt h2 { hyphens: auto; -webkit-hyphens: auto; }
  .achse__hinweis-quer { display: none; }
  .marke__wort { letter-spacing: .14em; }
  @media (prefers-reduced-motion: no-preference) {
    @keyframes zeichnen { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  }
  .exponat { grid-template-columns: 1fr; padding: 2rem 0; }
  .blaettern { grid-template-columns: 1fr; }
  .blaettern__nach { grid-column: 1; text-align: left; }
}
@media (max-width: 26rem) {
  .kopf { flex-wrap: wrap; }
  .marke__wort { font-size: .85rem; letter-spacing: .1em; }
}