/* Basis: Reset, Typo-Skala, Layout-Primitive.
   Alle Werte aus tokens.css. Keine Schatten, Headlines nie fett
   — siehe docs/design-system.md */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-steel);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip statt hidden: 'hidden' macht den Body zu einem Scrollcontainer,
     und dann greift 'position: sticky' darin nicht mehr — die Filmbuehne
     blieb dadurch nicht stehen. 'clip' klemmt genauso, ohne Container. */
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

/* ---------- Typo-Rollen ---------- */

.t-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-graphite);
  text-wrap: balance;
}

.t-heading-lg {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-graphite);
  text-wrap: balance;
}

.t-heading {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-graphite);
}

.t-subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-steel);
}

.t-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-slate);
}

/* Eyebrow in Mono, wie im Referenzsystem. Sie liest sich technisch statt
   dekorativ und setzt sich klar vom Fliesstext ab. */
.t-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-kicker);
  line-height: var(--leading-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--akzent-tief);
  font-weight: var(--weight-regular);
}

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ---------- Barrierefreiheit ---------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  transform: translateY(-120%);
  background: var(--color-graphite);
  color: var(--color-on-dark);
  padding: 14px 20px;
  font-size: var(--text-caption);
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* Sprungnavigation: erreicht jede Sektion per Tastatur,
   ohne dass gescrollt werden muss. docs/barrierefreiheit.md */
.sprungnav {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.sprungnav:focus-within {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: auto; height: auto;
  clip-path: none;
  z-index: 99;
  background: var(--color-graphite);
  padding: 12px clamp(20px, 5vw, 48px);
}
.sprungnav:focus-within ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--element-gap);
}
.sprungnav a {
  color: var(--color-on-dark);
  font-size: var(--text-caption);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.sprungnav a:hover,
.sprungnav a:focus-visible { border-bottom-color: var(--akzent); }

.noscript-hinweis {
  max-width: var(--page-max-width);
  margin: var(--section-gap) auto;
  padding: var(--card-padding);
  background: var(--color-ash);
  border-top: 2px solid var(--akzent);
  border-radius: var(--radius-card);
}

/* ---------- Gleisband: Kapitelnavigation und Fortschritt ---------- */

.gleisband {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--color-canvas);
  border-top: 1px solid #e2e1de;
}

.gleisband__liste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px clamp(16px, 4vw, 48px) 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gleisband__liste::-webkit-scrollbar { display: none; }

.gleisband__link {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-slate);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease;
}
.gleisband__link:hover { color: var(--akzent); }
/* Das aktive Kapitel deutlich markieren. Wer schnell an einer Zug-Sequenz
   vorbeiscrollt, verliert sonst die Orientierung — die Leiste ist die
   einzige Anzeige, die dauerhaft steht. */
.gleisband__link[aria-current='true'] {
  color: var(--akzent-tief);
  font-weight: var(--weight-medium);
}
.gleisband__link[aria-current='true']::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--akzent);
  margin-right: 7px;
  vertical-align: 1px;
}

.gleisband__schiene {
  position: relative;
  height: 6px;
  background: repeating-linear-gradient(90deg, #d8d6d1 0 5px, transparent 5px 16px);
  border-top: 1px solid #e2e1de;
}
.gleisband__fuellung {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--akzent);
}
.gleisband__marke {
  position: absolute;
  top: -3px;
  left: 0;
  width: 26px; height: 12px;
  border-radius: 2px;
  background: var(--color-graphite);
}

/* Das Gleisband aus Version 1 ist entfallen — kein Platzhalter noetig. */

@media (max-width: 700px) {
  .gleisband__liste { justify-content: flex-start; }
}