/* ══════════════════════════════════════════════════════════════════════════
   REDWEB ZEITACHSE - die Zeitkanten
   ──────────────────────────────────────────────────────────────────────────
   Zwei Griffe in den oberen Ecken. Sie sollen nicht wie Menueknoepfe wirken,
   sondern wie eine Kante, an der man die Oberflaeche fassen kann.

   ⚠⚠ MARKENFARBEN MIT RUECKFALL.
   `--rw-primary` und `--rw-secondary` kommen aus
   `public/redstudio/audio/design.css`. Diese Datei ist aber NICHT auf jeder
   Seite geladen (sie haengt an Red Studio, Live und Teilen des World-Admin).
   Deshalb steht ueberall der Markenwert als zweites Argument von `var()`. So
   erbt die Zeitachse die Tokens, wo es sie gibt, und sieht ueberall sonst
   trotzdem richtig aus. Ein viertes Designsystem entsteht dabei nicht.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Gemeinsame Redweb-Grundwerte */
  --rw-time-red: var(--rw-primary-hi, #d11414);
  --rw-time-red-deep: var(--rw-primary, #980A0A);
  --rw-time-violet: var(--rw-secondary, #AB27E8);
  --rw-time-ink: #05060a;

  /* Epochen-eigene Tokens. Nur diese drei Gruppen sind neu; alles andere
     leiht sich die Plattformwerte oben. */
  --rw-time-past-glow: var(--rw-time-violet);
  --rw-time-past-edge: var(--rw-time-red-deep);
  --rw-time-past-fog: 12, 6, 20;

  --rw-time-present-glow: var(--rw-time-red);
  --rw-time-present-edge: var(--rw-time-red-deep);

  --rw-time-future-glow: #38e0d6;
  --rw-time-future-edge: var(--rw-time-violet);
  --rw-time-future-fog: 4, 12, 20;

  /* ⚠⚠ Z-EBENEN, BEWUSST GEWAEHLT, NICHT GERATEN.
     Die Bereichsleiste (`rw-mode-dock`) liegt auf 1080 und ist fest rechts.
     Die Griffe bleiben mit 1070 DARUNTER und weichen ihr zusaetzlich seitlich
     aus (siehe `.rw-mode-dock-present` weiter unten), damit sich beide nie
     gegenseitig verdecken.
     Die Schicht darf ueber der Leiste liegen (1090), weil sie ausschliesslich
     Zierde ist: sie traegt IMMER `pointer-events:none`. Selbst wenn sie
     haengen bliebe, waere die Seite darunter vollstaendig bedienbar. */
  --rw-time-z-handle: 1070;
  --rw-time-z-veil: 1090;

  --rw-time-size: 76px;
}

/* ══ Der Rahmen ═══════════════════════════════════════════════════════════
   Faengt selbst nichts ab. Nur die Griffe nehmen Zeiger an. */
.rw-time {
  --rw-time-p: 0;
  position: fixed;
  inset: 0;
  z-index: var(--rw-time-z-handle);
  pointer-events: none;
}

/* Ein einzelnes Element im Vollbild (Video, Live-Player): ein Griff
   ausserhalb dieses Elements waere unsichtbar und faenge trotzdem Zeiger ab.
   ⚠ Die World-Anwendung nimmt `documentElement` ins Vollbild, nicht ein
   einzelnes Element. Dort greift diese Regel bewusst NICHT, und die
   Zeitachse bleibt benutzbar. Siehe `pruefeVollbild()` im Skript. */
html.rw-time-fullscreen .rw-time { display: none; }

/* ══ Die Griffe ═══════════════════════════════════════════════════════════ */
.rw-time__handle {
  position: absolute;
  top: 0;
  width: var(--rw-time-size);
  height: var(--rw-time-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  cursor: grab;
  pointer-events: auto;
  /* ⚠ PFLICHT. Ohne das uebernimmt der Browser die waagerechte Geste als
     Scrollen oder Zurueckwischen, und der Zug kommt nie bei uns an. Es steht
     NUR auf dem Griff, damit die uebrige Seite normal scrollt. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* Oben links liegt die frueher gelegene Epoche. */
.rw-time__handle--prev {
  left: 0;
  left: env(safe-area-inset-left, 0px);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Oben rechts die spaeter gelegene. */
.rw-time__handle--next {
  right: 0;
  right: env(safe-area-inset-right, 0px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.rw-time__handle:active { cursor: grabbing; }
.rw-time.is-dragging .rw-time__handle { cursor: grabbing; }

/* Die sichtbare Ecke. Ein Farbverlauf, der zur Ecke hin dichter wird, plus
   eine feine Diagonale als Kante. */
.rw-time__handle::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  opacity: .62;
  transition: opacity .22s ease;
}

.rw-time__handle--prev::before {
  background:
    linear-gradient(135deg,
      rgba(171, 39, 232, .55) 0%,
      rgba(152, 10, 10, .34) 42%,
      transparent 72%);
}

.rw-time__handle--next::before {
  background:
    linear-gradient(225deg,
      rgba(56, 224, 214, .42) 0%,
      rgba(171, 39, 232, .40) 45%,
      transparent 74%);
}

/* Die Diagonale selbst: die "Kante", an der gegriffen wird. */
.rw-time__handle::after {
  content: "";
  position: absolute;
  top: 0;
  width: 132%;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: .58;
  transform-origin: 0 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.rw-time__handle--prev::after {
  left: 0;
  color: var(--rw-time-past-glow);
  transform: rotate(45deg);
}

.rw-time__handle--next::after {
  right: 0;
  color: var(--rw-time-future-glow);
  background: linear-gradient(270deg, currentColor, transparent);
  transform-origin: 100% 0;
  transform: rotate(-45deg);
}

.rw-time__handle:hover::before,
.rw-time__handle:focus-visible::before { opacity: .92; }
.rw-time__handle:hover::after,
.rw-time__handle:focus-visible::after { opacity: 1; }

/* ⚠ Sichtbarer Fokus ist Pflicht: der Griff ist ein echter Knopf und muss
   mit der Tastatur auffindbar sein. `outline` statt Schatten, damit er auch
   im Windows-Kontrastmodus stehen bleibt. */
.rw-time__handle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* Sehr leises Atmen im Ruhezustand. Kein Blinken, kein Dauerlicht.
   ⚠ Nur `opacity`, damit die GPU es allein erledigt und kein Layout
   entsteht. */
@keyframes rw-time-breath {
  0%, 100% { opacity: .52; }
  50%      { opacity: .78; }
}

.rw-time__handle::before { animation: rw-time-breath 5.5s ease-in-out infinite; }
.rw-time__handle:hover::before,
.rw-time__handle:focus-visible::before,
.rw-time.is-dragging .rw-time__handle::before { animation: none; }

/* Ist der Griff einmal gefasst, hat die Einladung ihren Zweck erfuellt. */
.rw-time.is-dragging .rw-time__spark,
.rw-time.is-dragging .rw-time__pull::before,
.rw-time.is-dragging .rw-time__pull::after { animation-play-state: paused; opacity: 0; }

/* ══ Lichtpunkt und Sog ═══════════════════════════════════════════════════
   ⚠ Das reine Atmen (oben) war zu still, um als Einladung zu wirken - es
   veraendert nur Deckkraft, keine Position. Diese zwei Elemente bewegen sich
   tatsaechlich ENTLANG der Diagonale (`::after`), von der Ecke nach innen:
   `__spark` ist ein einzelner Lichtpunkt, der die Kante entlanglaeuft.
   `__pull` sind zwei kleine Winkel, die im selben Takt nachziehen und damit
   die Zuggeste vorwegnehmen. Beide `translate()`n in Bildschirm-Koordinaten,
   nicht in der gedrehten Ortsbasis - deshalb steht bei `__pull` das
   `translate()` VOR dem `rotate()` in der Funktionsliste. */
.rw-time__spark {
  position: absolute;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
}

.rw-time__handle--prev .rw-time__spark {
  left: 6px;
  background: var(--rw-time-past-glow);
  box-shadow: 0 0 7px 1px var(--rw-time-past-glow);
  animation: rw-time-spark-prev 2.6s cubic-bezier(.3, .6, .4, 1) infinite;
}

.rw-time__handle--next .rw-time__spark {
  right: 6px;
  background: var(--rw-time-future-glow);
  box-shadow: 0 0 7px 1px var(--rw-time-future-glow);
  animation: rw-time-spark-next 2.6s cubic-bezier(.3, .6, .4, 1) infinite;
}

@keyframes rw-time-spark-prev {
  0%   { transform: translate(2px, 2px); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: .8; }
  100% { transform: translate(58px, 58px); opacity: 0; }
}

@keyframes rw-time-spark-next {
  0%   { transform: translate(-2px, 2px); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: .8; }
  100% { transform: translate(-58px, 58px); opacity: 0; }
}

.rw-time__pull { position: absolute; top: 20px; width: 9px; height: 9px; pointer-events: none; }
.rw-time__pull::before,
.rw-time__pull::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  opacity: 0;
}

.rw-time__handle--prev .rw-time__pull { left: 20px; color: var(--rw-time-past-glow); }
.rw-time__handle--prev .rw-time__pull::before,
.rw-time__handle--prev .rw-time__pull::after { animation: rw-time-pull-prev 2.2s ease-out infinite; }
.rw-time__handle--prev .rw-time__pull::after { animation-delay: .55s; }

.rw-time__handle--next .rw-time__pull { right: 20px; color: var(--rw-time-future-glow); }
.rw-time__handle--next .rw-time__pull::before,
.rw-time__handle--next .rw-time__pull::after { animation: rw-time-pull-next 2.2s ease-out infinite; }
.rw-time__handle--next .rw-time__pull::after { animation-delay: .55s; }

/* Winkel zeigt nach SO (die Ecke oben-links "zieht" nach innen-unten-rechts). */
@keyframes rw-time-pull-prev {
  0%   { transform: translate(0, 0) rotate(90deg); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: translate(11px, 11px) rotate(90deg); opacity: 0; }
}

/* Winkel zeigt nach SW (spiegelbildlich fuer die rechte Ecke). */
@keyframes rw-time-pull-next {
  0%   { transform: translate(0, 0) rotate(180deg); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: translate(-11px, 11px) rotate(180deg); opacity: 0; }
}

/* ══ Die Beschriftung ═════════════════════════════════════════════════════
   Erscheint erst bei Naeherung. Sie steht nie mitten im Inhalt. */
.rw-time__tip {
  position: absolute;
  top: 13px;
  white-space: nowrap;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.rw-time__handle--prev .rw-time__tip { left: 12px; }
.rw-time__handle--next .rw-time__tip { right: 12px; }

/* ⚠ Bewusst OHNE `:hover`. Der Name der Epoche steht bei reinem Ueberfahren
   nicht mehr am Knopf, sondern gross in der Bildschirmmitte - siehe
   `__hoverfx` weiter unten. Am Knopf bleibt die Kurzform nur dort, wo sie
   Pflicht ist: bei Tastaturfokus (kein Hover moeglich) und waehrend eines
   echten Zugs (der Bildschirm ist dort schon von der `__veil` belegt). */
.rw-time__handle:focus-visible .rw-time__tip,
.rw-time.is-dragging .rw-time__tip {
  opacity: 1;
  transform: translateY(0);
}

/* ══ Die Uebergangsschicht ════════════════════════════════════════════════
   ⚠⚠ IMMER `pointer-events:none`. Sie ist reine Zierde. Bliebe sie je
   haengen, waere das ein Schoenheitsfehler und keine Blockade. Genau darauf
   beruht die Entscheidung, sie ueber die Bereichsleiste zu legen. */
.rw-time__veil {
  position: fixed;
  inset: 0;
  z-index: var(--rw-time-z-veil);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.rw-time.is-dragging .rw-time__veil,
.rw-time.is-committing .rw-time__veil {
  visibility: visible;
  opacity: 1;
}

/* Die hereinwachsende Flaeche.
   ⚠ Es wird NICHT die Seite verschoben, sondern diese Schicht ueber sie
   gezogen. Ein `transform` auf dem Body wuerde jeden `position:fixed`-
   Nachkommen der Plattform aus seiner Verankerung reissen: Bereichsleiste,
   Live-Kopfzeile, World-HUD, jeder offene Dialog. Siehe Kopfkommentar in
   `zeitaxe.js`. */
.rw-time__veil::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  transform: scaleX(var(--rw-time-p, 0));
  transition: transform .26s cubic-bezier(.22, .8, .3, 1);
  will-change: transform;
}

.rw-time.is-dragging .rw-time__veil::before { transition: none; }

/* Richtung Vergangenheit: von links herein, dunkel, Nebel, violette Energie. */
.rw-time[data-active-dir="prev"] .rw-time__veil::before {
  left: 0;
  transform-origin: 0 50%;
  background:
    radial-gradient(78% 120% at 0% 42%, rgba(171, 39, 232, .40), transparent 66%),
    radial-gradient(60% 90% at 12% 100%, rgba(152, 10, 10, .34), transparent 62%),
    linear-gradient(90deg,
      rgba(var(--rw-time-past-fog), .97) 0%,
      rgba(var(--rw-time-past-fog), .90) 58%,
      rgba(var(--rw-time-past-fog), .55) 100%);
}

/* Richtung Zukunft: von rechts herein, digitale Linien, kuehles Licht. */
.rw-time[data-active-dir="next"] .rw-time__veil::before {
  right: 0;
  transform-origin: 100% 50%;
  background:
    repeating-linear-gradient(90deg,
      rgba(56, 224, 214, .05) 0 2px, transparent 2px 7px),
    radial-gradient(76% 118% at 100% 44%, rgba(56, 224, 214, .26), transparent 64%),
    radial-gradient(60% 90% at 88% 0%, rgba(171, 39, 232, .34), transparent 62%),
    linear-gradient(270deg,
      rgba(var(--rw-time-future-fog), .97) 0%,
      rgba(var(--rw-time-future-fog), .90) 58%,
      rgba(var(--rw-time-future-fog), .55) 100%);
}

/* Die Vorderkante der Schicht: ein Lichtsaum, der die Bewegung fuehrt. */
.rw-time__veil::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  opacity: calc(var(--rw-time-p, 0) * 1.4);
  transition: left .26s cubic-bezier(.22, .8, .3, 1),
              right .26s cubic-bezier(.22, .8, .3, 1);
}

.rw-time.is-dragging .rw-time__veil::after { transition: none; }

.rw-time[data-active-dir="prev"] .rw-time__veil::after {
  left: calc(var(--rw-time-p, 0) * 100%);
  background: linear-gradient(180deg, transparent, var(--rw-time-past-glow), transparent);
  box-shadow: 0 0 22px 3px rgba(171, 39, 232, .5);
}

.rw-time[data-active-dir="next"] .rw-time__veil::after {
  right: calc(var(--rw-time-p, 0) * 100%);
  background: linear-gradient(180deg, transparent, var(--rw-time-future-glow), transparent);
  box-shadow: 0 0 22px 3px rgba(56, 224, 214, .42);
}

/* Der Name der Zielepoche, waehrend gezogen wird. */
.rw-time__veil-label {
  position: absolute;
  top: 50%;
  font-size: clamp(15px, 3.4vw, 30px);
  font-weight: 900;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .8);
  opacity: calc((var(--rw-time-p, 0) - .25) * 2);
  transform: translateY(-50%);
  white-space: nowrap;
}

.rw-time[data-active-dir="prev"] .rw-time__veil-label { left: 6vw; }
.rw-time[data-active-dir="next"] .rw-time__veil-label { right: 6vw; }

/* ══ Die Hover-Antwort ════════════════════════════════════════════════════
   ⚠⚠ ANDERS ALS `__veil`: Das hier reagiert auf reines Ueberfahren, nicht
   auf einen echten Zug. Bei "Zukunft" vermehren sich blaue Pixel ueber den
   ganzen Schirm, bei "Vergangenheit" reissen violette Risse auf; in der
   Mitte steht das Zielwort. Aufbau- und Abbautakt, Teilchen und Risse selbst
   entstehen in `zeitaxe.js` (`hoverfx*`); hier steht nur der Rahmen.
   ⚠ DREI SCHICHTEN IN FESTER REIHENFOLGE, per Quellreihenfolge im Markup
   (kein `z-index` noetig): `__hoverfx-scrim` (verdunkelt die Seite dahinter)
   -> `__hoverfx-canvas` (Pixel/Risse) -> `__hoverfx-label` (das Wort obenauf).
   Die Deckkraft von Schleier und Beschriftung folgt `--rw-time-hoverfx-i`
   (0..1), das das Skript jeden Frame schreibt - dieselbe Kopplung wie
   `--rw-time-p` bei der Zugschicht. Pixel- und Rissanzahl selbst haengen
   NICHT an dieser Zahl, sondern an eigenen Taktgebern in `zeitaxe.js`: sie
   sollen ueber die Hover-Dauer stetig wachsen, nicht einmalig einschwingen.
   ⚠ IMMER `pointer-events:none`, aus demselben Grund wie bei `__veil`.
   ⚠⚠ BEWUSST OHNE `prefers-reduced-motion`-Rueckfall, anders als das Atmen,
   `__spark`/`__pull` und `__veil`. Absprache mit David am 30.08.2026: der
   Effekt soll auch bei aktiver Systemeinstellung immer laufen. */
.rw-time__hoverfx {
  position: fixed;
  inset: 0;
  z-index: var(--rw-time-z-veil);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.rw-time__hoverfx.is-active { visibility: visible; opacity: 1; }

.rw-time__hoverfx-scrim {
  position: absolute;
  inset: 0;
  background: #000;
  /* Bis zu 50% Deckkraft bei voller Staerke, siehe Kopfkommentar. */
  opacity: calc(var(--rw-time-hoverfx-i, 0) * .5);
}

.rw-time__hoverfx-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.rw-time__hoverfx-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 92vw;
  font-size: clamp(30px, 7.4vw, 88px);
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 4px 40px rgba(0, 0, 0, .85);
  white-space: nowrap;
  opacity: var(--rw-time-hoverfx-i, 0);
}

.rw-time__hoverfx[data-hoverfx-dir="next"] .rw-time__hoverfx-label {
  color: #eafffb;
  text-shadow: 0 0 30px rgba(56, 224, 214, .9), 0 4px 40px rgba(0, 0, 0, .85);
}

.rw-time__hoverfx[data-hoverfx-dir="prev"] .rw-time__hoverfx-label {
  color: #f6eaff;
  text-shadow: 0 0 30px rgba(171, 39, 232, .9), 0 4px 40px rgba(0, 0, 0, .85);
}

/* ══ Der Weg zum Portal der eigenen Epoche ════════════════════════════════
   Nur INNERHALB einer Epoche sichtbar, nicht auf dem Portal selbst. Bewusst
   klein und am unteren Rand: die vorhandene Anwendung soll nicht mit
   zusaetzlicher Navigation zugestellt werden. */
.rw-time__home {
  position: absolute;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  pointer-events: auto;
  color: #d9dbe4;
  background: rgba(6, 7, 12, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  backdrop-filter: blur(7px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
  transition: color .18s ease, border-color .18s ease;
}

.rw-time__home:hover,
.rw-time__home:focus-visible {
  color: #fff;
  border-color: rgba(171, 39, 232, .6);
}

.rw-time__home-dot {
  width: 5px;
  height: 5px;
  background: var(--rw-time-violet);
}

/* ══ Ausweichen vor der Bereichsleiste - NUR WENN SIE WIRKLICH IM WEG IST ══
   ⚠⚠ FRUEHER: fixer 56px-Ausweich, sobald die Leiste (`rw-mode-dock`)
   ueberhaupt auf der Seite war - auch wenn sie dort per `rw_mode_dock_top`
   erst weit unten beginnt (z. B. 130px auf `redwebhp.html.twig`, unterhalb
   des Griffs). Ergebnis: der Griff sass buendig sichtbar dennoch 56px von der
   Kante entfernt, obwohl gar nichts ueberlappte - genau das Problem, das
   David am 30.08.2026 im Screenshot zeigte.
   ⚠⚠ JETZT: `--rw-dock-top` (von `_account_type_switcher.html.twig` auf
   `:root` gesetzt, Vorgabe 9999px = "keine Leiste da") sagt, WO die Leiste
   oben beginnt. Der Ausweich-Betrag ist `max(0, 56px - --rw-dock-top)`:
   beginnt die Leiste bei 0, weicht der Griff volle 56px aus; beginnt sie erst
   bei 56px oder tiefer, ist der Ausweich automatisch 0 und der Griff bleibt
   buendig in der Ecke. Kein Klassen-Umschalter mehr noetig, das gilt fuer
   jeden `rw_mode_dock_top`-Wert von selbst. Der Haltepunkt 701px ist
   DERSELBE wie in der Leiste selbst; wer ihn dort aendert, muss ihn hier
   mitaendern. Unterhalb davon wird die Leiste zu einem schwebenden Knopf
   unten rechts und belegt die obere Ecke nicht mehr. */
@media (min-width: 701px) {
  :root { --rw-time-dock-yield: max(0px, calc(56px - var(--rw-dock-top, 9999px))); }
  .rw-time__handle--next { right: var(--rw-time-dock-yield); }
  .rw-time__veil-label { right: calc(6vw + var(--rw-time-dock-yield)); }
}

/* ══ Schmale Fenster ══════════════════════════════════════════════════════
   ⚠ Die Griffe bleiben auch bei 320px gross genug: 64px Kantenlaenge heisst,
   dass der bedienbare Bereich nahe der Ecke deutlich ueber den geforderten
   44x44 Punkten liegt. Kleiner wird hier bewusst nicht skaliert. */
@media (max-width: 520px) {
  :root { --rw-time-size: 64px; }
  .rw-time__tip { font-size: 9px; letter-spacing: .16em; }
  .rw-time__veil-label { letter-spacing: .22em; }
}

/* Quer liegendes Telefon: sehr wenig Hoehe. Die Griffe duerfen dort nicht
   die halbe Kopfzeile verdecken. */
@media (max-height: 460px) and (orientation: landscape) {
  :root { --rw-time-size: 56px; }
  .rw-time__tip { display: none; }
  .rw-time__home { display: none; }
}

/* ══ Reduzierte Bewegung ══════════════════════════════════════════════════
   ⚠ Die FUNKTION bleibt vollstaendig erhalten. Es entfaellt nur das
   Bewegte: kein Atmen, kein Mitziehen, kein Lichtsaum. Das Skript navigiert
   in diesem Fall direkt, siehe `reduzierteBewegung()`. */
@media (prefers-reduced-motion: reduce) {
  .rw-time__handle::before { animation: none; opacity: .62; }
  .rw-time__veil::before,
  .rw-time__veil::after { transition: none; }
  .rw-time__veil-label { display: none; }
  .rw-time__handle::after,
  .rw-time__tip { transition: none; }
  .rw-time__spark,
  .rw-time__pull::before,
  .rw-time__pull::after { animation: none; opacity: 0; }
  /* `__hoverfx` (Pixelsturm/Risse) ist bewusst NICHT hier drin - siehe
     Kopfkommentar bei `.rw-time__hoverfx` weiter oben. */
}

/* ══ Kontrastmodus ════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
  .rw-time__handle { forced-color-adjust: none; border: 1px solid ButtonText; }
  .rw-time__handle::before { background: ButtonFace; opacity: 1; }
  .rw-time__tip { color: ButtonText; }
  .rw-time__spark,
  .rw-time__pull { display: none; }
  .rw-time__hoverfx { display: none; }
}

/* ══ Die schmale Form fuer eigenstaendige Anwendungen ═════════════════════
   ⚠⚠ WARUM ES DIESE ZWEITE FORM GIBT.
   In `/world` sind BEIDE oberen Ecken belegt: links die Statuskarte
   (`.wld-stats`, mindestens 230px breit), rechts die anklickbare Minikarte
   (`.wld-minimap`, 120x120). Ein Eckgriff laege dort genau auf dem HUD und
   wuerde entweder verdeckt oder wuerde Zeiger abfangen, die dem Spiel
   gehoeren. Statt das HUD umzubauen, zeigt die Zeitachse dort eine schmale
   Leiste unten links, oberhalb der Versionsangabe (`.wld-version`,
   left:14px, bottom:10px). Ziehen gibt es in dieser Form nicht, nur Klick
   und Tastatur; das ist der ehrlichere Weg, als in einer Spielsteuerung um
   Zeiger zu ringen. */
.rw-time--bar { pointer-events: none; }
.rw-time--bar .rw-time__handle,
.rw-time--bar .rw-time__veil { display: none; }

.rw-time__rail {
  position: absolute;
  left: 14px;
  bottom: 34px;
  display: flex;
  align-items: stretch;
  pointer-events: auto;
  background: rgba(6, 7, 12, .78);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

.rw-time__rail-epoch {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: #8b93a3;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, .1);
}

.rw-time__rail-epoch::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--rw-time-past-glow);
  box-shadow: 0 0 8px var(--rw-time-past-glow);
}

.rw-time__rail-link {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  color: #d9dbe4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  font-family: inherit;
  transition: background .16s ease, color .16s ease;
}

.rw-time__rail-link:last-child { border-right: 0; }

.rw-time__rail-link:hover,
.rw-time__rail-link:focus-visible {
  color: #fff;
  background: rgba(171, 39, 232, .18);
}

.rw-time__rail-link:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

@media (max-width: 620px) {
  .rw-time__rail { left: 8px; bottom: 8px; }
  .rw-time__rail-epoch { display: none; }
}