/* Eine Reise mit dem Licht – schwarz, viel Raum, eine Akzentfarbe pro Station (--akzent) */
:root {
  --akzent: #f5e3b0;
  --grund: #05060a;
  --flaeche: #0e1016;
  --linie: rgba(255, 255, 255, 0.12);
  --text: #e9e6df;
  --leise: #9a978f;
  --titel: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", Calibri, "Segoe UI", sans-serif;
  --lauf: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--lauf); font-size: 18px; line-height: 1.6; }
img, video { max-width: 100%; display: block; }
a { color: var(--akzent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

.marke { font-family: var(--titel); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; color: var(--leise); }
h1, h2, h3 { font-family: var(--titel); font-weight: 400; letter-spacing: 0.04em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2.6rem, 8vw, 6rem); text-transform: uppercase; letter-spacing: 0.08em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 0.9rem; }
p { margin: 0 0 1rem; }
.breite { width: min(1080px, 100% - 32px); margin-inline: auto; }
.schmal { width: min(720px, 100% - 32px); margin-inline: auto; }

/* Kopf */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: linear-gradient(rgba(5, 6, 10, 0.85), rgba(5, 6, 10, 0)); }
.kopf a { color: var(--text); font-family: var(--titel); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; }
.kopf a { white-space: nowrap; }
.kopf nav { display: flex; gap: 22px; }

/* Buehne: grosses Bild oder Video mit Titel */
.buehne { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.buehne.halb { min-height: 78svh; }
.buehne video, .buehne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5, 6, 10, 0.3) 0%, rgba(5, 6, 10, 0.1) 30%, rgba(5, 6, 10, 0.55) 62%, rgba(5, 6, 10, 0.95) 100%); }
.buehne .inhalt { position: relative; z-index: 2; padding: 0 0 clamp(28px, 7vh, 72px); }
.buehne .inhalt .marke, .buehne .unter { text-shadow: 0 1px 10px #000, 0 0 2px #000; }
.buehne .inhalt > .marke { color: var(--text); opacity: 0.85; }
.buehne h1 { text-shadow: 0 2px 26px rgba(0, 0, 0, 0.8), 0 0 3px rgba(0, 0, 0, 0.6); }
.buehne .unter { font-size: clamp(1.05rem, 2.2vw, 1.35rem); color: var(--text); max-width: 34ch; margin-top: 0.6rem; }
.uhr { display: inline-flex; gap: 0.6em; align-items: baseline; margin-top: 1.2rem; padding: 8px 14px; border: 1px solid var(--linie);
  border-radius: 999px; background: rgba(5, 6, 10, 0.55); font-family: var(--titel); letter-spacing: 0.08em; }
.uhr b { color: var(--akzent); font-weight: 400; }

.knopf { display: inline-block; padding: 14px 26px; border: 1px solid var(--akzent); color: var(--grund); background: var(--akzent);
  font-family: var(--titel); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.85rem; border-radius: 2px; cursor: pointer; }
.knopf:hover { text-decoration: none; filter: brightness(1.1); }
.knopf.leer { background: transparent; color: var(--akzent); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }

section { padding: clamp(48px, 9vh, 96px) 0; }
section + section { border-top: 1px solid var(--linie); }
.gross { font-size: clamp(1.15rem, 2.3vw, 1.45rem); line-height: 1.55; }

/* Fakten */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--linie); margin: 0; padding: 0; }
.fakten div { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--linie); }
.fakten dt { font-family: var(--titel); letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.74rem; color: var(--akzent); }
.fakten dd { margin: 4px 0 0; }

/* Aha-Moment */
.aha { border-left: 2px solid var(--akzent); padding: 6px 0 6px 22px; }
.aha .marke { color: var(--akzent); }

/* Groessenvergleich */
.vergleich { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 6vw, 70px); min-height: 280px; overflow: hidden; }
.kugel { border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff8, transparent 60%), var(--f); box-shadow: inset -12px -14px 30px #0009; }
.vergleich figure { margin: 0; display: grid; justify-items: center; gap: 12px; }
.vergleich figcaption { font-family: var(--titel); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.74rem; color: var(--leise); text-align: center; }

/* Fotos */
.foto { margin: 0 0 32px; }
.foto img { width: 100%; background: #000; }
.foto figcaption { padding-top: 10px; color: var(--leise); font-size: 0.92rem; }
.foto .credit { display: block; font-size: 0.8rem; opacity: 0.8; }
.hinweis { color: var(--leise); font-size: 0.92rem; border: 1px solid var(--linie); padding: 14px 16px; border-radius: 4px; }
.hinweis b { color: var(--text); font-weight: 600; }

/* Stationsliste */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.karte { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--flaeche); color: var(--text); }
.karte img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.karte:hover img { transform: scale(1.05); }
.karte span { position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; background: linear-gradient(transparent, rgba(5, 6, 10, 0.9));
  font-family: var(--titel); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.82rem; }
.karte small { display: block; color: var(--f, var(--akzent)); letter-spacing: 0.08em; text-transform: none; font-size: 0.78rem; }

/* Die Reise: Kinomodus */
.kino { padding-top: 64px; background: #000; }
.kino video { width: 100%; max-height: calc(100svh - 150px); background: #000; }
.leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.leiste .jetzt { font-family: var(--titel); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; }
.leiste .jetzt b { color: var(--akzent); font-weight: 400; }
.kapitel { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
.kapitel button { background: transparent; color: var(--text); border: 1px solid var(--linie); padding: 8px 12px; cursor: pointer; font: inherit;
  font-family: var(--titel); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; border-radius: 2px; }
.kapitel button:hover, .kapitel button[aria-current="true"] { border-color: var(--f, var(--akzent)); color: var(--f, var(--akzent)); }
.kapitel button small { color: var(--leise); margin-left: 6px; }

/* Weiter / Zurueck */
.weiter { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.weiter a { display: block; padding: 18px; border: 1px solid var(--linie); color: var(--text); }
.weiter a:hover { border-color: var(--akzent); text-decoration: none; }
.weiter a:last-child { text-align: right; }
.weiter .marke { display: block; margin-bottom: 4px; }

footer { padding: 40px 0 60px; color: var(--leise); font-size: 0.85rem; border-top: 1px solid var(--linie); }
footer a { color: var(--leise); text-decoration: underline; }
table.quellen { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.quellen th, table.quellen td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--linie); }
table.quellen th { font-family: var(--titel); letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.72rem; color: var(--leise); font-weight: 400; }
.tabelle { overflow-x: auto; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .kopf { padding: 12px 16px; }
  .kopf a { font-size: 0.68rem; letter-spacing: 0.14em; }
  .kopf nav { gap: 14px; }
  .kopf nav a.breit { display: none; }
  .weiter { grid-template-columns: 1fr; }
  .weiter a:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .karte img { transition: none; }
}

/* Massstab: die Erde ist 1 Pixel. --x = Lage der Lichtbahn */
.m-seite { --x: 34%; }
.m-kopf { padding: 130px 0 40px; }
.m-kopf h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.m-tempo { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.4rem; align-items: center; }
.m-tempo button, .m-sprung button { background: transparent; color: var(--text); border: 1px solid var(--linie); padding: 10px 14px; cursor: pointer;
  font: inherit; font-family: var(--titel); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; border-radius: 2px; white-space: nowrap; }
.m-tempo button[aria-pressed="true"] { background: var(--akzent); color: var(--grund); border-color: var(--akzent); }
.m-tempo button:hover, .m-sprung button:hover { border-color: var(--akzent); color: var(--akzent); }
.m-tempo button[aria-pressed="true"]:hover { color: var(--grund); }
.m-hud { position: fixed; top: 46px; left: 0; right: 0; z-index: 15; display: flex; flex-wrap: wrap; gap: 4px 22px; justify-content: center;
  padding: 8px 16px; background: rgba(5, 6, 10, 0.97); border-bottom: 1px solid var(--linie); font-family: var(--titel); letter-spacing: 0.08em; font-size: 0.86rem; }
.m-hud span { white-space: nowrap; }
.m-hud b { color: var(--akzent); font-weight: 400; font-variant-numeric: tabular-nums; }
.m-hud .marke { font-size: 0.66rem; margin-right: 6px; }
.m-bahn { position: relative; overflow: hidden; }
.m-linie { position: absolute; top: 0; bottom: 0; left: var(--x); width: 1px; background: linear-gradient(var(--akzent), rgba(245, 227, 176, 0.25) 300px, rgba(245, 227, 176, 0.12)); }
.m-k { position: absolute; left: var(--x); width: 0; height: 0; }
.m-punkt { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 50%; background: var(--f); min-width: 1px; min-height: 1px; }
.m-k.klein .m-punkt::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border: 1px solid var(--f); border-radius: 50%; opacity: 0.55; }
.m-k.sonne .m-punkt { box-shadow: 0 0 40px 10px rgba(255, 179, 71, 0.45); }
.m-k.ring .m-punkt::before { content: ""; position: absolute; left: 50%; top: 50%; width: 245%; height: 60%; transform: translate(-50%, -50%) rotate(-18deg);
  border: 1px solid var(--f); border-radius: 50%; opacity: 0.8; }
.m-text { position: absolute; left: var(--ab, 22px); top: 0; transform: translateY(-50%); width: min(46vw, 320px); }
.m-text b { display: block; font-family: var(--titel); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--f); }
.m-text small { display: block; color: var(--leise); font-size: 0.82rem; line-height: 1.45; }
.m-text a { font-size: 0.82rem; color: var(--f); }
.m-mond { position: absolute; left: 30px; top: 0; width: 1px; height: 1px; background: #cfd3d6; }
.m-notiz { position: absolute; left: calc(var(--x) + 26px); width: min(56vw, 420px); margin: 0; color: var(--leise); font-size: 1.02rem; line-height: 1.5; transform: translateY(-50%); }
.m-guertel { position: absolute; left: 0; right: 0; opacity: 0.5;
  background-image: radial-gradient(circle, var(--f) 0.6px, transparent 1px), radial-gradient(circle, var(--f) 0.5px, transparent 0.9px);
  background-size: 173px 911px, 259px 1543px; background-position: 40px 100px, 130px 600px; }
.m-ende { padding: 90px 0 150px; border-top: 1px solid var(--linie); }
.m-sprung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto;
  background: rgba(5, 6, 10, 0.9); border-top: 1px solid var(--linie); scrollbar-width: thin; }
.m-sprung .marke { align-self: center; flex: none; }
.m-seite footer { padding-bottom: 110px; }
@media (max-width: 640px) {
  .m-seite { --x: 20%; }
  .m-hud { font-size: 0.78rem; gap: 2px 14px; }
  .m-notiz { width: 68vw; left: calc(var(--x) + 18px); font-size: 0.95rem; }
  .m-text { width: 64vw; }
}

/* Impressum und Datenschutz */
.recht h1 { font-size: clamp(1.45rem, 6.2vw, 3.2rem); letter-spacing: 0.05em; overflow-wrap: anywhere; hyphens: auto; }
.recht h2 { margin-top: 2.4rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.recht h3 { margin-top: 1.6rem; font-size: 1.05rem; letter-spacing: 0.06em; color: var(--akzent); }
.recht p, .recht li { color: var(--text); font-size: 1rem; }
.recht ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.recht li { margin-bottom: 0.4rem; }
.recht a { text-decoration: underline; overflow-wrap: anywhere; }
.recht mark { background: #ffd24a; color: #111; padding: 0 4px; border-radius: 2px; }