/* ══════════════════════════════════════════════════════════════════════════
   REDWEB ZEITACHSE - die beiden Epochen-Portale
   ──────────────────────────────────────────────────────────────────────────
   EINE Datei fuer beide Portale. Der Unterschied zwischen Vergangenheit und
   Zukunft steckt ausschliesslich in den Tokens unter `.zx--past` und
   `.zx--future`; die Bausteine selbst sind identisch.

   Der Grund ist nicht Sparsamkeit, sondern Aussage: es sind zwei Ansichten
   DESSELBEN Universums, nicht zwei Produkte. Waeren es zwei Stylesheets,
   liefen sie beim ersten Nachziehen auseinander.

   ⚠ Markenwerte mit Rueckfall, wie in `shell.css`. `design.css` wird hier
   zwar mitgeladen, aber der Rueckfall kostet nichts und haelt die Datei fuer
   sich lauffaehig.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --zx-red: var(--rw-primary-hi, #d11414);
  --zx-red-deep: var(--rw-primary, #980A0A);
  --zx-violet: var(--rw-secondary, #AB27E8);
  --zx-text: var(--rw-text, #e9ecf3);
  --zx-muted: var(--rw-muted, #8b93a3);
  --zx-dim: var(--rw-dim, #5d6473);
  --zx-line: var(--rw-stroke, rgba(255, 255, 255, .07));
  --zx-line-2: var(--rw-stroke-2, rgba(255, 255, 255, .14));

  --zx-top: 60px;
  --zx-max: 1180px;
}

/* ── Epochen-Tokens ─────────────────────────────────────────────────────── */
.zx--past {
  --zx-bg: #07060c;
  --zx-panel: #100b18;
  --zx-accent: var(--zx-violet);
  --zx-accent-2: var(--zx-red);
  --zx-accent-rgb: 171, 39, 232;
  --zx-glow: rgba(171, 39, 232, .34);
}

.zx--future {
  --zx-bg: #04070c;
  --zx-panel: #0a1018;
  --zx-accent: #38e0d6;
  --zx-accent-2: var(--zx-violet);
  --zx-accent-rgb: 56, 224, 214;
  --zx-glow: rgba(56, 224, 214, .26);
}

.zx--present {
  --zx-bg: var(--rw-bg, #090b10);
  --zx-panel: var(--rw-panel, #121620);
  --zx-accent: var(--zx-red);
  --zx-accent-2: var(--zx-violet);
  --zx-accent-rgb: 209, 20, 20;
  --zx-glow: rgba(209, 20, 20, .28);
}

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

.zx {
  margin: 0;
  background: var(--zx-bg);
  color: var(--zx-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.zx a { color: inherit; }

.zx-eyebrow {
  margin: 0 0 14px;
  color: var(--zx-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.zx-h2 {
  margin: 0 0 16px;
  font-size: clamp(23px, 3.6vw, 36px);
  font-weight: 800;
  letter-spacing: -.015em;
}

/* ── Kopfzeile ──────────────────────────────────────────────────────────── */
/* ⚠⚠ DIE SEITLICHEN ABSTAENDE HALTEN DIE ZEITKANTEN FREI.
   Die Eckgriffe des Overlays sind 76px breit und liegen mit z-index 1070 weit
   ueber dieser Kopfzeile (z-index 40). Ohne den Abstand laege der linke Griff
   auf dem Markenzeichen und der rechte auf dem Knopf "Gegenwart"; beide waeren
   anklickbar und der Besucher traefe den falschen. 86px sind die 76px des
   Griffs plus etwas Luft. */
.zx-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--zx-top);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 86px;
  background: rgba(6, 6, 12, .82);
  border-bottom: 1px solid var(--zx-line);
  backdrop-filter: blur(14px);
}

.zx-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }

.zx-brand__mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 15px;
  background: linear-gradient(150deg, var(--zx-red), var(--zx-red-deep));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.zx-brand__text { display: flex; flex-direction: column; line-height: 1; }
.zx-brand__text b { font-size: 12.5px; font-weight: 900; letter-spacing: .2em; }
.zx-brand__text span {
  margin-top: 3px; font-size: 8.5px; font-weight: 800;
  letter-spacing: .28em; color: var(--zx-accent);
}

/* Die Zeitleiste in der Kopfzeile: drei Punkte, der eigene leuchtet. */
.zx-axis { display: flex; align-items: center; gap: 8px; margin: 0 auto; }

.zx-axis__step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  color: var(--zx-dim);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.zx-axis__step:hover { color: var(--zx-muted); }

.zx-axis__step.is-current {
  color: var(--zx-text);
  border-color: rgba(var(--zx-accent-rgb), .42);
  background: rgba(var(--zx-accent-rgb), .10);
}

.zx-axis__dot { width: 5px; height: 5px; background: currentColor; }
.zx-axis__step.is-current .zx-axis__dot {
  background: var(--zx-accent);
  box-shadow: 0 0 9px var(--zx-accent);
}

.zx-axis__line { width: 26px; height: 1px; background: var(--zx-line-2); }

.zx-top__back {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 7px 13px; color: var(--zx-muted);
  border: 1px solid var(--zx-line-2);
  font-size: 11px; font-weight: 700; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  transition: color .18s ease, background .18s ease;
}
.zx-top__back:hover { color: var(--zx-text); background: rgba(255, 255, 255, .05); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.zx-hero {
  position: relative;
  min-height: calc(100svh - var(--zx-top));
  display: flex;
  align-items: center;
  padding: 60px 20px 80px;
  overflow: hidden;
}

.zx-hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--zx-max); margin: 0 auto; }

.zx-hero__title {
  margin: 0 0 20px;
  font-size: clamp(42px, 10vw, 104px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.035em;
  background: linear-gradient(150deg, #fff 8%, var(--zx-accent) 62%, var(--zx-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zx-hero__lead {
  max-width: 620px;
  margin: 0 0 30px;
  color: var(--zx-muted);
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.65;
}

/* Vergangenheit: Nebel. Zwei sehr weiche Farbwolken, keine Bewegung im
   Ruhezustand ausser einem sehr langsamen Atmen. */
.zx-hero__fog {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(46% 52% at 22% 28%, rgba(171, 39, 232, .30), transparent 62%),
    radial-gradient(44% 48% at 78% 64%, rgba(152, 10, 10, .26), transparent 62%),
    radial-gradient(60% 60% at 50% 110%, rgba(171, 39, 232, .14), transparent 60%);
  filter: blur(28px);
  animation: zx-drift 26s ease-in-out infinite alternate;
}

@keyframes zx-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/* Zukunft: ein feines Datengitter mit Tiefe. */
.zx-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 224, 214, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 224, 214, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(72% 62% at 50% 34%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 34%, #000 20%, transparent 78%);
}

.zx--future .zx-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 46% at 78% 26%, rgba(171, 39, 232, .24), transparent 62%),
    radial-gradient(44% 44% at 16% 72%, rgba(56, 224, 214, .18), transparent 62%);
  pointer-events: none;
}

.zx-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, transparent, var(--zx-accent));
  opacity: .5;
}

/* ── Zitat ──────────────────────────────────────────────────────────────── */
.zx-quote {
  max-width: 560px;
  margin: 0 0 32px;
  padding: 16px 0 16px 20px;
  border-left: 2px solid rgba(var(--zx-accent-rgb), .55);
}
.zx-quote p {
  margin: 0 0 8px;
  font-size: clamp(16px, 2.2vw, 21px);
  font-style: italic;
  line-height: 1.5;
  color: var(--zx-text);
}
.zx-quote cite {
  color: var(--zx-dim);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Knoepfe ────────────────────────────────────────────────────────────── */
.zx-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.zx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border: 0;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%);
}

.zx-btn:hover { filter: brightness(1.14); transform: translateY(-1px); }

.zx-btn--primary { background: linear-gradient(135deg, var(--zx-violet), var(--zx-red-deep)); }
.zx-btn--future  { background: linear-gradient(135deg, #38e0d6, var(--zx-violet)); color: #04121a; }

.zx-btn--ghost {
  background: transparent;
  color: var(--zx-text);
  box-shadow: inset 0 0 0 1px var(--zx-line-2);
}
.zx-btn--ghost:hover { background: rgba(255, 255, 255, .05); }

.zx-cta__note { margin: 0; max-width: 420px; color: var(--zx-dim); font-size: 12.5px; line-height: 1.6; }

/* ── Baender ────────────────────────────────────────────────────────────── */
.zx-band { padding: 74px 20px; border-top: 1px solid var(--zx-line); }
.zx-band__inner { max-width: var(--zx-max); margin: 0 auto; }
.zx-band__lead { max-width: 620px; margin: 0 0 32px; color: var(--zx-muted); font-size: 14.5px; line-height: 1.7; }
.zx-band--feature { background: var(--zx-panel); }

/* ── Raster ─────────────────────────────────────────────────────────────── */
.zx-grid { display: grid; gap: 16px; }
.zx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.zx-grid--4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.zx-card {
  padding: 24px 22px;
  background: var(--zx-panel);
  border: 1px solid var(--zx-line);
  border-top: 2px solid rgba(var(--zx-accent-rgb), .55);
}
.zx-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.zx-card p { margin: 0 0 10px; color: var(--zx-muted); font-size: 13.5px; line-height: 1.7; }
.zx-card__source {
  margin: 14px 0 0 !important;
  color: var(--zx-dim) !important;
  font-size: 10px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── Kacheln fuer spaeteren Inhalt ──────────────────────────────────────── */
.zx-tile {
  position: relative;
  padding: 22px 18px 40px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--zx-line);
}
.zx-tile i { display: block; margin-bottom: 12px; font-size: 21px; color: var(--zx-accent); opacity: .8; }
.zx-tile h3 { margin: 0 0 7px; font-size: 14.5px; font-weight: 750; }
.zx-tile p { margin: 0; color: var(--zx-dim); font-size: 12px; line-height: 1.6; }

.zx-tile__state {
  position: absolute;
  left: 18px;
  bottom: 15px;
  color: var(--zx-dim);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

/* ⚠ `is-locked` ist eine ehrliche Anzeige, keine Attrappe: die Kachel sieht
   nicht anklickbar aus, weil sie es nicht ist. Zum Oeffnen spaeter genuegt
   ein `href` und das Entfernen dieser Klasse. */
.zx-tile.is-locked { cursor: default; }
.zx-tile.is-locked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .014) 0 6px, transparent 6px 12px);
  pointer-events: none;
}

/* ── Der Hauptweg ───────────────────────────────────────────────────────── */
.zx-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 44px; align-items: center; }
.zx-feature__text p { color: var(--zx-muted); font-size: 14.5px; line-height: 1.75; }

.zx-list { margin: 20px 0 26px; padding: 0; list-style: none; }
.zx-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  color: var(--zx-muted);
  font-size: 13.5px;
  border-bottom: 1px solid var(--zx-line);
}
.zx-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 8px;
  height: 1px;
  background: var(--zx-accent);
}

.zx-feature__visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; }

/* Vergangenheit: ein Guardian-Ring. Reines CSS, kein Bild, damit das Portal
   ohne zusaetzliche Ladezeit steht. */
.zx-rune {
  width: min(74%, 300px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--zx-accent-rgb), .42);
  border-radius: 50%;
  box-shadow: 0 0 60px var(--zx-glow), inset 0 0 60px var(--zx-glow);
  position: relative;
  animation: zx-spin 44s linear infinite;
}
.zx-rune::before, .zx-rune::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(var(--zx-accent-rgb), .3);
  border-radius: 50%;
}
.zx-rune::after { inset: 29%; border-style: dashed; }

@keyframes zx-spin { to { transform: rotate(360deg); } }

/* Zukunft: ein Signalfeld. */
.zx-signal {
  width: min(74%, 300px);
  aspect-ratio: 1;
  position: relative;
  background:
    repeating-linear-gradient(0deg, rgba(56, 224, 214, .16) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(171, 39, 232, .12) 0 1px, transparent 1px 14px);
  border: 1px solid rgba(var(--zx-accent-rgb), .34);
  box-shadow: 0 0 60px var(--zx-glow);
}
.zx-signal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(56, 224, 214, .5), transparent);
  height: 22%;
  animation: zx-scan 4.5s ease-in-out infinite;
}

@keyframes zx-scan {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50%      { transform: translateY(360%); opacity: .8; }
}

/* ── Sagas ──────────────────────────────────────────────────────────────── */
.zx-sagas { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--zx-line); border: 1px solid var(--zx-line); }

.zx-saga a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  background: var(--zx-bg);
  text-decoration: none;
  transition: background .16s ease, padding-left .16s ease;
}
.zx-saga a:hover { background: var(--zx-panel); padding-left: 26px; }

.zx-saga__num {
  flex: 0 0 auto;
  color: var(--zx-accent);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.zx-saga__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.zx-saga__body b { font-size: 15.5px; font-weight: 750; }
.zx-saga__body small { color: var(--zx-dim); font-size: 12.5px; }
.zx-saga i { color: var(--zx-dim); flex: 0 0 auto; }
.zx-saga a:hover i { color: var(--zx-accent); }

/* ── Hinweis ────────────────────────────────────────────────────────────── */
.zx-note {
  display: flex;
  gap: 11px;
  max-width: 720px;
  margin: 30px 0 0;
  padding: 15px 17px;
  background: rgba(255, 255, 255, .02);
  border-left: 2px solid rgba(var(--zx-accent-rgb), .55);
  color: var(--zx-muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.zx-note i { color: var(--zx-accent); flex: 0 0 auto; }

/* ── Weiter in der Zeit ─────────────────────────────────────────────────── */
.zx-band--next { background: var(--zx-panel); }
.zx-next { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.zx-next p { max-width: 520px; margin: 0; color: var(--zx-muted); font-size: 14px; line-height: 1.7; }

/* ── Fusszeile ──────────────────────────────────────────────────────────── */
.zx-foot {
  padding: 40px 20px 56px;
  border-top: 1px solid var(--zx-line);
  text-align: center;
}
.zx-foot p { max-width: 640px; margin: 0 auto 10px; color: var(--zx-muted); font-size: 13px; line-height: 1.75; }
.zx-foot small { color: var(--zx-dim); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

/* ══ Schmale Fenster ══════════════════════════════════════════════════════
   ⚠ Geprueft von 320px aufwaerts. Der kritische Punkt ist die Zeitleiste in
   der Kopfzeile: sie traegt drei Beschriftungen und wuerde sonst umbrechen
   und die Kopfhoehe sprengen. Unter 860px bleiben nur die Punkte. */
@media (max-width: 860px) {
  .zx-feature { grid-template-columns: 1fr; gap: 32px; }
  .zx-feature__visual { order: -1; aspect-ratio: 16 / 10; }
  .zx-band { padding: 56px 18px; }
}

@media (max-width: 720px) {
  .zx-axis__step { padding: 5px 7px; font-size: 0; gap: 0; }
  .zx-axis__step .zx-axis__dot { width: 7px; height: 7px; }
  .zx-axis__line { width: 16px; }
  /* ⚠ Der Knopf "Gegenwart" entfaellt hier ganz, statt auf ein nacktes
     Pfeilsymbol zusammenzuschrumpfen. Zwei Gruende: er passte neben Marke,
     Zeitleiste und dem rechten Eckgriff nicht mehr in die Zeile, und seine
     Funktion ist doppelt vorhanden. Der mittlere Punkt der Zeitleiste fuehrt
     auf `/`, und der Eckgriff oben rechts tut dasselbe. Ein abgeschnittener
     Knopf waere schlechter als kein Knopf. */
  .zx-top__back { display: none; }
  .zx-axis { margin-right: 0; }
}

@media (max-width: 480px) {
  /* ⚠ Der Griff ist hier nur noch 64px breit (siehe shell.css), der Abstand
     schrumpft entsprechend mit.

     ⚠⚠ DIE WORTMARKE WEICHT, NICHT DIE ZEITLEISTE.
     Bei 320px bleiben zwischen den beiden Eckgriffen nur rund 190px. Marke mit
     Schriftzug (115px) UND die drei Punkte der Zeitleiste (95px) passen dort
     nicht nebeneinander; die Leiste lief unter den rechten Griff. Die
     Zeitleiste ist auf diesem Portal die wichtigere Anzeige, denn sie sagt,
     in welcher Epoche man steht. Das Zeichen allein traegt die Marke weiter. */
  .zx-brand__text { display: none; }
  .zx-axis__line { width: 12px; }
  .zx-top { gap: 10px; padding: 0 70px; }
  .zx-brand__text b { font-size: 11px; letter-spacing: .14em; }
  .zx-hero { padding: 44px 16px 64px; }
  .zx-band { padding: 46px 16px; }
  .zx-btn { padding: 14px 20px; font-size: 12.5px; }
  .zx-saga a { gap: 12px; padding: 15px 14px; }
  .zx-tile { padding: 18px 15px 36px; }
}

/* ══ Reduzierte Bewegung ══════════════════════════════════════════════════
   ⚠ Alles Dekorative haelt an. Der Inhalt bleibt unveraendert lesbar; es
   entfaellt nichts ausser der Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .zx-hero__fog,
  .zx-rune,
  .zx-signal::before { animation: none; }
  .zx-btn:hover { transform: none; }
  .zx-saga a:hover { padding-left: 20px; }
  .zx *,
  .zx *::before,
  .zx *::after { transition-duration: .01ms !important; }
}