/* ==========================================================================
   LHAW.DEVELOPMENT — /ki · „Die goldene Strecke"
   Das KI-Angebot als Streckenplan: ein goldener Faden verbindet die
   Stationen, der Schwarm der Startseite formt den Slash. Editorial,
   asymmetrisch, Mono als Signatur — keine Karten-Raster von der Stange.
   ========================================================================== */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/hanken-grotesk-latin-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --black: #0C0A06;
  --black-soft: #14110A;
  --card: #131009;
  --paper: #F2EDE2;
  --paper-soft: #A89E8A;
  --gold: #C6B085;
  --gold-bright: #EFE3C8;
  --gold-deep: #6E5A36;    /* Gold, dunkel genug für Text auf Papier (AA) */
  --line: rgba(242, 237, 226, .14);
  --rail: rgba(198, 176, 133, .38);
  --dots: rgba(242, 237, 226, .28);

  --ink: #191510;          /* Text auf der hellen Hauptbahnhof-Karte */
  --ink-soft: #5E564A;
  --ink-line: rgba(25, 21, 16, .16);

  --sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  background: var(--black);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a, a:visited { color: inherit; }
img { display: block; }

::selection { background: var(--gold); color: var(--black); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.gs { color: var(--gold); }

.skip {
  position: fixed; top: 14px; left: 14px; z-index: 100;
  background: var(--gold); color: var(--black);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  padding: 12px 18px; text-decoration: none;
  transform: translateY(-220%);
  transition: transform .3s var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ---------- Schwarm-Canvas & Atmosphäre ----------------------------------- */

#swarm {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
  pointer-events: none;
}

.grain {
  position: fixed; inset: -100px; z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05;
  animation: grain-shift 1.1s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-28px, 16px); }
  66% { transform: translate(18px, -24px); }
  100% { transform: translate(0, 0); }
}

.vignette {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 42%, transparent 55%, rgba(5, 4, 2, .5) 100%);
}

/* ---------- Header: nur Wortmarke + ein CTA ---------------------------------- */

.top {
  position: relative; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  padding: 26px clamp(20px, 5vw, 56px);
}
.top__logo img { height: 10px; width: auto; }
/* .top-Vorfahre erhöht die Spezifität über die späteren .btn-Regeln */
.top .top__cta { display: none; }
@media (min-width: 640px) { .top .top__cta { display: inline-block; } }

/* Kapitel-Indikator — feine Ziffern am rechten Rand (nur breite Screens) */
.acts {
  position: fixed; right: clamp(16px, 2.2vw, 34px); top: 50%;
  transform: translateY(-50%);
  z-index: 7;
  display: none;
  flex-direction: column; align-items: flex-end; gap: 13px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
}
.acts a {
  color: var(--paper-soft); opacity: .35;
  text-decoration: none;
  padding: 2px 3px;
  transition: opacity .35s ease, color .35s ease;
}
.acts a:hover { opacity: .9; }
.acts a.act-on { color: var(--gold); opacity: 1; }
@media (min-width: 1280px) and (pointer: fine) { .acts { display: flex; } }

/* ---------- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  padding: 1.2em 1.9em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .5s ease;
}
.btn--gold {
  background: var(--gold); border-color: var(--gold); color: var(--black);
}
.btn--gold:hover {
  background: var(--gold-bright); border-color: var(--gold-bright);
  box-shadow: 0 0 44px rgba(198, 176, 133, .35);
}
.btn--ghost { border-color: rgba(242, 237, 226, .35); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: var(--paper); color: var(--black); }
.btn--ink {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.btn--ink:hover { background: var(--black); box-shadow: 0 0 34px rgba(12, 10, 6, .35); }
.btn--cta { padding: .58em 1.4em; font-size: 11.5px; line-height: 1.22; }
.btn--sup { padding-top: .78em; padding-bottom: .82em; line-height: 1.25; }
.btn__sup {
  display: block;
  font-size: 9px; font-weight: 500;
  letter-spacing: .2em; opacity: .62;
  margin-bottom: 1px;
  text-transform: none;
}

/* ---------- Sektions-Gerüst ------------------------------------------------------ */

main { position: relative; z-index: 5; }

.wrap {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}
.wrap--narrow { max-width: 820px; }
.wrap--center { text-align: center; }

.sec { padding: clamp(64px, 11vw, 130px) 0; scroll-margin-top: 40px; }

.kicker {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-soft);
  margin-bottom: 20px;
}
.kicker .gs { margin-right: .5em; }
.kicker--center { text-align: center; }
.kicker__geo {
  display: block;
  margin-top: 6px;
  opacity: .6;
  letter-spacing: .18em;
}
@media (min-width: 700px) {
  .kicker__geo { display: inline; margin: 0 0 0 1.6em; }
}

.sec h2 {
  font-family: var(--sans);
  font-weight: 250;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.sec__sub {
  margin-top: 12px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.sec__close {
  margin: 52px 0 0 auto;
  max-width: 46ch;
  color: var(--paper-soft);
  text-wrap: balance;
}

/* ---------- Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: calc(92svh - 62px);
  display: flex; align-items: center;
  padding: clamp(40px, 8vw, 90px) 0 clamp(90px, 14svh, 150px);
}
.hero__title {
  font-weight: 250;
  font-size: clamp(38px, 7vw, 74px);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .6);
}
.hero__title em { font-style: normal; color: var(--gold); }
.hero__lead {
  margin-top: 26px;
  max-width: 52ch;
  font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.65;
  color: var(--paper-soft);
  text-shadow: 0 1px 16px rgba(0, 0, 0, .7);
}
.hero__cta {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.hero__trust {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-soft);
}
.hero__trust .gs { margin-right: .55em; }

.scrolldown {
  position: absolute;
  left: 50%; bottom: 4.5svh;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; text-decoration: none;
  color: var(--paper-soft);
  z-index: 6;
}
.scrolldown span {
  width: 1px; height: 44px;
  background: linear-gradient(var(--gold), transparent);
  animation: drop 2.2s var(--ease-out) infinite;
}
@keyframes drop {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Die Lage: Zahlen-Ledger ------------------------------------------------ */

.facts { margin-top: 48px; }
.fact {
  display: grid;
  gap: 6px 44px;
  padding: 26px 0 24px;
  border-top: 1px solid var(--line);
}
.facts .fact:last-child { border-bottom: 1px solid var(--line); }
.fact__num {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--gold-bright);
  text-wrap: nowrap;
}
.fact--date .fact__num { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.4; }
.fact__txt { color: var(--paper-soft); font-size: 15.5px; max-width: 52ch; }
.fact__src {
  margin-top: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-soft); opacity: .8;
}
.fact__src::before { content: "— "; color: var(--gold); }
@media (min-width: 860px) {
  .fact { grid-template-columns: 340px 1fr; align-items: start; }
  .fact__num { text-align: left; }
  /* Treppen-Versatz: die Zahlenkolonne rückt Zeile für Zeile nach rechts */
  .fact:nth-child(2) { padding-left: 56px; }
  .fact:nth-child(3) { padding-left: 112px; }
}

/* ---------- Die Strecke ------------------------------------------------------------ */

.rail {
  --railx: 15px;                     /* x-Position des goldenen Fadens */
  position: relative;
  margin-top: 54px;
  padding-left: 46px;
}
.rail__line {
  position: absolute;
  left: var(--railx); top: -10px; bottom: -10px;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--rail) 40px,
    var(--rail) calc(100% - 40px),
    transparent
  );
}
/* „Der nächste Zug": ein Lichtpunkt wandert die Strecke entlang */
.rail__line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(239, 227, 200, .95) 4%,
    transparent 8%,
    transparent 100%
  );
  background-size: 100% 1600px;
  background-repeat: no-repeat;
  animation: zug 9s linear infinite;
}
@keyframes zug {
  from { background-position-y: -1600px; }
  to   { background-position-y: calc(100% + 1600px); }
}

.station {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: clamp(24px, 4vw, 40px);
  margin-bottom: 30px;
  transition: border-color .4s ease;
}
.station:hover { border-color: rgba(198, 176, 133, .4); }

/* Geister-Ziffer der Station — Wasserzeichen im Kartenhintergrund */
.station::before {
  content: attr(data-no);
  position: absolute;
  top: 2px; right: 14px;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 1;
  color: rgba(198, 176, 133, .055);
  pointer-events: none;
  user-select: none;
}

.station__node {
  position: absolute;
  left: calc(-46px + var(--railx)); top: 26px;
  transform: translateX(-50%);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--black);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  box-shadow: 0 0 0 5px var(--black), 0 0 18px rgba(198, 176, 133, .35);
}
.station__node--hbf {
  background: var(--gold); color: var(--black);
  border-color: var(--gold);
  box-shadow: 0 0 0 5px var(--black), 0 0 26px rgba(198, 176, 133, .6);
}

.station__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px;
  margin-bottom: 14px;
  padding-right: 40px;               /* Luft zur Geister-Ziffer */
}
.station__eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
}
.chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--paper-soft);
  margin-left: auto;
}
.chip::before { content: "/"; color: var(--gold); margin-right: .6em; }
.chip--wide { display: block; margin: 18px 0 0; }

.station__title {
  font-weight: 420;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.22;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.station__text {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--paper-soft);
  font-size: 15.5px;
}
.station__list { margin-top: 18px; display: grid; gap: 8px; }
.station__list li {
  font-size: 15px;
  color: var(--paper-soft);
  padding-left: 1.4em; text-indent: -1.4em;
}
.station__list .gs { margin-right: .6em; }

.station__price {
  margin-top: 20px;
  font-family: var(--mono); font-size: 14px;
  color: var(--paper-soft);
}
.station__price strong {
  font-weight: 500;
  font-size: 22px;
  color: var(--gold-bright);
}
.station__fine {
  margin-top: 20px;
  font-size: 13px;
  color: var(--paper-soft);
  max-width: 68ch;
}
.station__foot {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
}
.station__foot .station__price { margin-top: 0; }

.rail__note {
  margin: -12px 0 30px;
  padding-left: 2px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--paper-soft);
  max-width: 72ch;
}

/* Kursbuch-Zeilen: Posten … Punktlinie … Preis */
.tariff { margin-top: 24px; }
.tariff__row {
  display: flex; align-items: baseline; gap: 14px;
  padding: 8px 0;
}
.tariff__row dt {
  display: flex; flex-wrap: wrap; flex: 1; align-items: baseline; gap: 2px 12px;
  min-width: 0;
  font-size: 14.5px; color: var(--paper-soft);
}
.tariff__row dt::after {
  content: "";
  flex: 1; order: 1;
  min-width: 28px;
  border-bottom: 1px dotted var(--dots);
  transform: translateY(-4px);
}
/* Zusatznotiz (z. B. „+99 € je weitere Person") rutscht als eigene Zeile darunter */
.tariff__row dt small {
  order: 2; flex-basis: 100%;
  font-family: var(--mono); font-size: 11px; opacity: .75;
}
.tariff__row dd {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--gold-bright);
  white-space: nowrap;
}

/* ---------- Alternierender Streckenplan (Desktop) ----------------------------------- */

@media (min-width: 1000px) {
  .rail--alt { padding-left: 0; --gap: 64px; }
  .rail--alt .rail__line { left: 50%; }
  .rail--alt .station { width: calc(50% - var(--gap)); }
  .rail--alt .station--l { margin-right: auto; }
  .rail--alt .station--r { margin-left: auto; }
  .rail--alt .station--c { width: 100%; }

  /* Knoten sitzen auf der Mittellinie … */
  .rail--alt .station--l .station__node {
    left: auto; right: calc(-1 * var(--gap));
    transform: translateX(50%);
  }
  .rail--alt .station--r .station__node {
    left: calc(-1 * var(--gap));
    transform: translateX(-50%);
  }
  .rail--alt .station--c .station__node {
    left: 50%; top: -16px;
    transform: translateX(-50%);
  }

  /* … und ein feiner Ausleger verbindet Karte und Faden */
  .rail--alt .station--l::after,
  .rail--alt .station--r::after {
    content: "";
    position: absolute; top: 41px;
    width: var(--gap); height: 1px;
  }
  .rail--alt .station--l::after {
    right: calc(-1 * var(--gap));
    background: linear-gradient(to right, transparent, var(--rail));
  }
  .rail--alt .station--r::after {
    left: calc(-1 * var(--gap));
    background: linear-gradient(to left, transparent, var(--rail));
  }

  .rail--alt .rail__note {
    width: calc(50% - var(--gap));
    margin-left: auto;
    margin-top: -16px;
  }
}

/* ---------- Station 3: Hauptbahnhof (invertierte Karte) ---------------------------- */

.station--hbf {
  background: var(--paper);
  border-color: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 60px rgba(198, 176, 133, .12);
}
.station--hbf::before { color: rgba(25, 21, 16, .05); }
.station--hbf:hover { border-color: var(--gold); }
.station--hbf .station__eyebrow { color: var(--gold-deep); }
.station--hbf .station__text,
.station--hbf .station__list li,
.station--hbf .station__fine { color: var(--ink-soft); }
.station--hbf .station__list .gs { color: var(--gold-deep); }
.station--hbf .chip { color: var(--ink-soft); }
.station--hbf .chip::before { color: var(--gold-deep); }

.station__badge {
  display: inline-block;
  background: var(--gold); color: var(--black);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px 5px;
  margin-bottom: 18px;
}

/* Tariftafel S/M/L/XL — Spalten mit Haarlinien statt Kästen */
.tiers {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--ink-line);
}
.tier {
  position: relative;
  padding: 18px 14px 16px 18px;
  border-bottom: 1px solid var(--ink-line);
}
.tier:nth-child(even) { border-left: 1px solid var(--ink-line); }
.tier--hot { box-shadow: inset 0 2px 0 var(--gold); }
.tier__flag {
  position: absolute; top: 0; right: 0;
  background: var(--gold); color: var(--black);
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 4px 8px 3px;
}
.tier__key {
  font-family: var(--mono); font-size: 22px; font-weight: 500;
  color: var(--ink);
}
.tier__size {
  margin-top: 2px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft);
}
.tier__price {
  margin-top: 12px;
  font-family: var(--mono); font-size: 19px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.tier__price small { font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.tier__inc { margin-top: 6px; font-size: 12.5px; color: var(--ink-soft); }
@media (min-width: 980px) {
  .tiers { grid-template-columns: repeat(4, 1fr); }
  .tier { border-bottom: 0; }
  .tier:nth-child(even) { border-left: 0; }
  .tier + .tier { border-left: 1px solid var(--ink-line); }
  .tiers { border-bottom: 1px solid var(--ink-line); }
}

.station__list--cols { margin-top: 26px; }
@media (min-width: 760px) {
  .station__list--cols { grid-template-columns: 1fr 1fr; gap: 10px 28px; }
}

/* ---------- Station 4: Wissensbasis & Kanäle --------------------------------------- */

.sub { margin-top: 30px; }
.sub__title {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.sub__title::before { content: "/"; margin-right: .6em; }
.sub__text { margin-top: 14px; font-size: 15px; color: var(--paper-soft); max-width: 62ch; }
.sub__price {
  margin-top: 12px;
  font-family: var(--mono); font-size: 13px;
  line-height: 1.9;
  color: var(--paper-soft);
}
.sub__price strong { font-weight: 500; color: var(--gold-bright); }

.channels { margin-top: 4px; }
.channel { padding: 12px 0 10px; }
.channel__top { display: flex; align-items: baseline; gap: 14px; }
.channel__name {
  display: flex; flex: 1; align-items: baseline; gap: 12px;
  min-width: 0;
  font-weight: 550; font-size: 16px;
}
.channel__name::after {
  content: "";
  flex: 1;
  min-width: 28px;
  border-bottom: 1px dotted var(--dots);
  transform: translateY(-4px);
}
.channel__price {
  font-family: var(--mono); font-size: 12.5px;
  color: var(--gold);
  white-space: nowrap;
}
.channel__desc { margin-top: 3px; font-size: 14px; color: var(--paper-soft); }
@media (max-width: 620px) {
  .channel__top { display: block; }
  .channel__name { display: block; }
  .channel__name::after { content: none; }
  .channel__price { display: block; margin-top: 4px; white-space: normal; }
}

/* ---------- Bundle: die Fahrkarte ---------------------------------------------------- */

.ticket {
  position: relative;
  border: 1px solid var(--gold);
  background: var(--card);
  display: grid;
}
.ticket__main { padding: clamp(26px, 4.5vw, 46px); }
.ticket__meta {
  display: flex; flex-wrap: wrap; gap: 6px 28px;
  justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--paper-soft);
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.ticket__meta .gs { margin-right: .5em; }
.ticket__title {
  font-weight: 300;
  font-size: clamp(22px, 2.9vw, 30px);
  line-height: 1.22;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ticket__route {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.ticket__route span { display: flex; align-items: center; }
.ticket__route span::before {
  content: "";
  width: 7px; height: 7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  margin-right: 9px;
}
.ticket__route span:not(:last-child)::after {
  content: "";
  width: 34px; height: 1px;
  background: var(--rail);
  margin: 0 12px;
}
.ticket__text { margin-top: 18px; color: var(--paper-soft); max-width: 52ch; }

.ticket__stub {
  position: relative;
  padding: clamp(26px, 4.5vw, 46px);
  font-family: var(--mono);
  border-top: 1px dashed rgba(198, 176, 133, .5);
}
/* Perforation: gestanzte Löcher an den Enden der Trennlinie */
.ticket__stub::before,
.ticket__stub::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--black);
  border: 1px solid var(--gold);
}
.ticket__stub::before { top: -9.5px; left: -10px; }
.ticket__stub::after  { top: -9.5px; right: -10px; }
.ticket__old {
  font-size: 13px; color: var(--paper-soft);
  text-decoration: line-through;
  text-decoration-color: rgba(168, 158, 138, .7);
}
.ticket__now {
  margin-top: 8px;
  font-size: clamp(40px, 5vw, 52px); font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gold-bright);
}
.ticket__unit {
  margin-top: 8px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--paper-soft);
}
.ticket__save {
  margin-top: 20px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.ticket__save .gs { margin-right: .6em; }
@media (min-width: 860px) {
  .ticket { grid-template-columns: 1fr 300px; }
  .ticket__stub {
    border-top: 0;
    border-left: 1px dashed rgba(198, 176, 133, .5);
    display: flex; flex-direction: column; justify-content: center;
  }
  .ticket__stub::before { top: -10px; left: -9.5px; }
  .ticket__stub::after  { top: auto; bottom: -10px; left: -9.5px; right: auto; }
}

/* ---------- Warum LHAW.DEVELOPMENT: nummerierte Spalten, Treppenversatz ------------- */

.why { margin-top: 48px; }
.why__item {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-top: 34px;
}
.why__item:first-child { margin-top: 0; }
.why__no {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .22em;
  color: var(--paper-soft);
}
.why__no .gs { margin-right: .4em; }
.why__item h3 {
  margin-top: 14px;
  font-weight: 480;
  font-size: 19px;
  letter-spacing: -.005em;
}
.why__item p { margin-top: 12px; font-size: 15px; color: var(--paper-soft); max-width: 44ch; }
@media (min-width: 860px) {
  .why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
  .why__item { margin-top: 0; }
  .why__item:nth-child(2) { margin-top: 44px; }
  .why__item:nth-child(3) { margin-top: 88px; }
}

/* ---------- So starten Sie: Mini-Strecke -------------------------------------------- */

.steps {
  margin-top: 48px;
  display: grid; gap: 34px;
}
.step { position: relative; padding-left: 52px; }
.step__node {
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: var(--black);
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  box-shadow: 0 0 16px rgba(198, 176, 133, .25);
}
.step h3 { font-weight: 480; font-size: 17.5px; }
.step p { margin-top: 6px; font-size: 15px; color: var(--paper-soft); }
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 16px; top: 38px; bottom: -30px;
  width: 1px;
  background: linear-gradient(var(--rail), rgba(198, 176, 133, .1));
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .step { padding-left: 0; padding-top: 52px; }
  .step:not(:last-child)::after {
    left: 44px; right: -16px; top: 16px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(to right, var(--rail), rgba(198, 176, 133, .1));
  }
}

/* ---------- FAQ: nummeriertes Register ---------------------------------------------- */

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: grid;
  grid-template-columns: 3.4em 1fr auto;
  align-items: baseline; gap: 18px;
  padding: 20px 2px;
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--gold-bright); }
.faq__no {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em;
  color: var(--gold);
}
.faq__q {
  font-weight: 480;
  font-size: clamp(15.5px, 1.6vw, 17.5px);
  line-height: 1.4;
}
.faq__mark {
  font-family: var(--mono); font-size: 18px;
  color: var(--gold);
  transition: transform .3s var(--ease-out);
}
.faq__item[open] .faq__mark { transform: rotate(45deg); }
.faq__a {
  padding: 0 2px 22px;
  max-width: 68ch;
  color: var(--paper-soft);
  font-size: 15.5px;
}
@media (min-width: 700px) {
  .faq__a { padding-left: calc(3.4em + 18px); }
}

/* ---------- Finale ------------------------------------------------------------------ */

.finale { padding-bottom: 0; }
.finale .wrap { padding-top: clamp(20px, 5vw, 40px); padding-bottom: clamp(80px, 12vw, 130px); }
.finale__title {
  font-weight: 250;
  font-size: clamp(34px, 5vw, 58px) !important;
}
.finale__text { margin-top: 22px; color: var(--paper-soft); }
.finale__cta {
  margin-top: 38px;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
}
.finale__alt {
  margin-top: 40px;
  font-size: 14.5px;
  color: var(--paper-soft);
}
.finale__alt a { text-decoration: none; transition: color .3s ease; }
.finale__alt a:hover { color: var(--gold); }
.finale__alt span { margin-inline: 12px; opacity: .6; }

/* ---------- Footer ------------------------------------------------------------------ */

.foot {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  align-items: baseline; justify-content: space-between;
  padding: 26px clamp(20px, 5vw, 56px);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--paper-soft);
}
.foot a { text-decoration: none; transition: color .3s ease; }
.foot a:hover { color: var(--gold); }
.foot__links { display: flex; gap: 22px; }
.foot__links span { opacity: .7; }
.foot__note { opacity: .85; }
.foot__slogan {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em;
}
.foot__slogan .gs { margin-right: .5em; }

/* ---------- Pilot-Banner (nur /ki/pilot) -------------------------------------------- */

.pilotband {
  position: relative; z-index: 5;
  background: var(--gold); color: var(--black);
  padding: 14px clamp(20px, 5vw, 56px);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.5;
  text-align: center;
}
.pilotband strong { font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.price--old {
  text-decoration: line-through;
  text-decoration-color: rgba(168, 158, 138, .8);
  opacity: .75;
  font-size: 14px;
  margin-right: .6em;
}

/* ---------- Reveal beim Laden (gestaffeltes Einfaden) ------------------------------- */

html.js .rv {
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.in:nth-child(2)  { transition-delay: .06s; }
html.js .rv.in:nth-child(3)  { transition-delay: .12s; }
html.js .rv.in:nth-child(4)  { transition-delay: .18s; }
html.js .rv.in:nth-child(5)  { transition-delay: .24s; }

/* ---------- Reduzierte Bewegung (Systemeinstellung oder ?anim=0) -------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail__line::after, .scrolldown span, .grain { animation: none; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
}
html.no-anim .rail__line::after,
html.no-anim .scrolldown span,
html.no-anim .grain { animation: none; }
html.no-anim.js .rv { opacity: 1; transform: none; transition: none; }