/* =====================================================================
   morovd.de · Site-Chrome (site-weit)
   Palette als CSS-Variablen, Reset, globaler Header + Sprach-Umschalter,
   gemeinsames Unterseiten-Grundgerüst. Der Hero bringt sein eigenes CSS
   (hero-scrolly.css) mit.
   ===================================================================== */
:root {
  --c-black:         #0A1A18; /* Petrol-Schwarz – Seiten-/Tiefenhintergrund, dunkle Übergänge */
  --c-petrol-deep:   #0D2430; /* Tiefes Petrol (Ostsee-Tiefe) – Haupthintergrund / Bühne */
  --c-petrol-patina: #1C3945; /* Petrol-Patina (Ostsee-Tiefe) – Cards/Panels */
  --c-patina:        #84A4AC; /* Patina (Ostsee-Tiefe, textsicher AA) – kühles Highlight, Labels/Captions */
  --c-creme:         #F4EEE1; /* Creme          – Überschriften */
  --c-sand:          #C9BD9F; /* Sandgrau       – Fließtext */
  --c-champagne:     #E3CC97; /* Champagner     – betonte Titelwörter */
  --c-brass:         #C7A765; /* Antik-Messing  – Labels, Linien, Trenner */
  --c-warn:          #E3A24A; /* Warm-Amber     – Fehler-/Warnzustände (Formulare etc.) */

  /* ---- Schriften ----------------------------------------------------
     Megrim NUR für große Display-Headlines (>=~32px), nie für Fließtext
     oder kleine Schrift. Im Zweifel Tenor Sans. */
  --font-display: 'Megrim', sans-serif;     /* nur große Headlines */
  --font-text:    'Tenor Sans', sans-serif; /* Text + kleine Headlines + UI */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-petrol-deep); /* Seitenhintergrund = Petrol */
  color: var(--c-sand);
  font-family: var(--font-text);
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   Globaler Header (Variante A, schlank): Wortmarke links · Menü zentriert
   · Sprach-Umschalter rechts. Liegt fix über dem Inhalt, transparent mit
   weichem Scrim — funktioniert über dem Bild-Band wie über Petrol.
   ===================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(0.9rem, 2.4vh, 1.6rem) clamp(1.4rem, 4.5vw, 3.5rem);
  /* Kein Verlaufs-Scrim mehr — der Übergang zum Bild ist eine feine,
     leuchtende Haarlinie an der Unterkante (::after) mit dezentem Schein
     (::before). Header sitzt über dem petrol-schwarzen Letterbox-Bereich,
     Schrift bleibt auch ohne Scrim gut lesbar. */
  animation: site-header-in 0.9s ease both;
}
@keyframes site-header-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Petrol-Glas -----------------------------------------------------
   Eigener Layer hinter dem Header-Inhalt. Standardmäßig unsichtbar (Landing
   bleibt transparent mit Haarlinie); nur auf Bildband-Unterseiten
   (body:has(.sp-hero,.pr-hero)) eingeblendet. Das in den Header ragende Bild
   bleibt sichtbar, scheint aber gedämpft durch -> Navi überall lesbar.
   Die Unterkante fadet per mask weich ins Bild aus (kein harter Glasrand). */
.site-header__glass {
  position: absolute;
  inset: 0 0 -30px 0;          /* ragt 30px nach unten -> Raum für den Fade */
  z-index: -1;                  /* hinter Wortmarke/Nav/Utility, vor dem Bild */
  pointer-events: none;
  opacity: 0;                   /* Landing: aus */
  background: linear-gradient(to bottom,
    rgba(12, 33, 31, 0.66) 0%,  /* Petrol, oben dichter */
    rgba(12, 33, 31, 0.40) 60%,
    rgba(12, 33, 31, 0.00) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
body:has(.sp-hero, .pr-hero, .lg-hero, .ko-hero, .ek-stage) .site-header__glass {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
}

/* Filigrane, leuchtende Trennlinie Header <-> Bild. Beide Pseudo-Elemente
   werden an den Enden weich ausgeblendet (mask), damit die Linie nicht hart
   an die Viewport-Ränder stößt. */
.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}
.site-header::before {            /* weicher Lichtschein um die Linie */
  bottom: -5px;
  height: 11px;
  background: linear-gradient(to bottom,
    rgba(227, 204, 151, 0) 0%,
    rgba(227, 204, 151, 0.22) 45%,
    rgba(227, 204, 151, 0.22) 55%,
    rgba(227, 204, 151, 0) 100%);
}
.site-header::after {             /* die Haarlinie selbst (Champagner) */
  bottom: 0;
  height: 1px;
  background: rgba(227, 204, 151, 0.9);
}

.site-header__brand {
  justify-self: start;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.72rem;              /* gleiche Größe wie die Nav daneben */
  letter-spacing: 0.40em;          /* etwas weiter -> Wortmarke bleibt eigenständig */
  text-transform: uppercase;
  color: var(--c-creme);
  text-decoration: none;
  padding-left: 0.40em; /* optischer Ausgleich für letter-spacing */
}
.site-header__brand:focus-visible { outline: 1px solid var(--c-brass); outline-offset: 4px; }

.site-header__nav { justify-self: center; display: flex; gap: clamp(1.2rem, 2.6vw, 2.75rem); }
.site-header__nav a {
  position: relative;
  display: block;
  padding: 0.5rem 0;            /* erhöht das Touch-/Klick-Ziel */
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-sand);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
/* Hover/Focus, der von außen gekoppelte Glow (.is-glow von der Landmarke)
   und der aktive Punkt auf Unterseiten (.is-current) teilen sich das Aussehen. */
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav a.is-glow,
.site-header__nav a.is-current { color: var(--c-champagne); }
.site-header__nav a.is-glow { text-shadow: 0 0 18px rgba(227, 204, 151, 0.5); }
.site-header__nav a:focus-visible { outline: 1px solid var(--c-brass); outline-offset: 4px; }
.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.15em;
  height: 1px;
  background: var(--c-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after,
.site-header__nav a.is-glow::after,
.site-header__nav a.is-current::after { transform: scaleX(1); }

.site-header__utility { justify-self: end; display: flex; align-items: center; gap: 14px; }
.site-header__usep { width: 1px; height: 12px; background: rgba(199, 167, 101, 0.45); }

/* Diskreter Legal-/Impressum-Link (Feindruck: gemischte Schreibung, leise) */
.site-header__legal {
  font-family: var(--font-text);
  font-size: 0.74rem;
  letter-spacing: 0.01em;
  color: rgba(201, 189, 159, 0.6); /* Sand, gedämpft -> ruhige Rangordnung */
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-header__legal:hover,
.site-header__legal.is-current { color: var(--c-champagne); }
.site-header__legal:focus-visible { color: var(--c-champagne); outline: 1px solid var(--c-brass); outline-offset: 3px; }
/* Musik-Toggle — gleicher Look wie lang-toggle, nur Icon statt Text */
.audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-sand);
  background: transparent;
  border: 1px solid rgba(199, 167, 101, 0.5);
  border-radius: 2px;
  padding: 4px 7px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.audio-toggle:hover { color: var(--c-champagne); border-color: var(--c-brass); }
.audio-toggle:focus-visible { color: var(--c-champagne); outline: 1px solid var(--c-brass); outline-offset: 3px; }
.audio-toggle.is-muted { color: rgba(201,189,159,0.4); border-color: rgba(199,167,101,0.2); }
/* Einmaliger Glimmer beim Erstbesuch: „hier gibt es Klang". Wird per JS
   (ambient-audio.js) genau einmal gesetzt und endet von selbst. Steht NACH
   .is-muted, damit die wärmere Farbe gewinnt, solange der Glimmer läuft. */
.audio-toggle.is-hint {
  animation: audio-hint 1.8s ease-in-out infinite;
}
/* höhere Spezifität als .is-muted -> Icon leuchtet während des Glimmers mit */
.audio-toggle.is-hint,
.audio-toggle.is-muted.is-hint {
  color: var(--c-champagne);
  border-color: var(--c-brass);
}
@keyframes audio-hint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,167,101,0); }
  50%      { box-shadow: 0 0 0 3px rgba(199,167,101,0.12), 0 0 14px rgba(227,204,151,0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .audio-toggle.is-hint { animation: none; box-shadow: 0 0 0 2px rgba(199,167,101,0.28); }
}

/* Ein-Knopf-Sprachumschalter (zeigt die Zielsprache), dezenter Button-Look */
.lang-toggle {
  font-family: var(--font-text);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sand);
  background: transparent;
  border: 1px solid rgba(199, 167, 101, 0.5);
  border-radius: 2px;
  padding: 4px 9px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.lang-toggle:hover { color: var(--c-champagne); border-color: var(--c-brass); }
.lang-toggle:focus-visible { color: var(--c-champagne); outline: 1px solid var(--c-brass); outline-offset: 3px; }

/* (Früherer Invert-Modus über hellen Bild-Heros entfernt — ersetzt durch das
   Petrol-Glas .site-header__glass, das die Navi über jedem Bild lesbar hält.
   Die Schrift bleibt jetzt site-weit hell.) */
.site-header__brand { transition: color 0.3s ease; }

@media (max-width: 700px) {
  .site-header { gap: 0.75rem; padding: 0.8rem 1rem; }
  .site-header__brand { font-size: 0.62rem; letter-spacing: 0.30em; padding-left: 0.30em; }
  .site-header__nav { gap: 0.9rem; }
  .site-header__nav a { font-size: 0.62rem; letter-spacing: 0.14em; }
  .lang-toggle { font-size: 0.58rem; padding: 3px 7px; }
  .audio-toggle { padding: 3px 6px; }
  .site-header__utility { gap: 12px; }
  .site-header__legal { font-size: 0.62rem; }
}

/* Kleine Phones: enger packen, damit der Header (Wortmarke · 4 Punkte ·
   Toggle · Legal) nicht horizontal überläuft. */
@media (max-width: 430px) {
  .site-header { gap: 0.5rem; padding: 0.7rem 0.85rem; }
  .site-header__brand { font-size: 0.6rem; letter-spacing: 0.20em; padding-left: 0.20em; }
  .site-header__nav { gap: 0.65rem; }
  .site-header__nav a { font-size: 0.6rem; letter-spacing: 0.08em; }
  .site-header__utility { gap: 9px; }
  .lang-toggle { font-size: 0.56rem; padding: 3px 6px; }
  .site-header__legal { font-size: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-header { animation: none; }
}

/* =====================================================================
   Übergang Landing -> Unterseite (Cross-Document View Transitions)
   ---------------------------------------------------------------------
   Wo unterstützt (Chromium/Safari) blendet die Navigation sanft über —
   ein „Durchschreiten" statt hartem Schnitt. Wo nicht unterstützt, lädt
   die Seite normal (graceful no-op). Der Header bleibt als eigene Gruppe
   stehen, statt mitzublenden. reduced-motion: sofort, ohne Bewegung.
   ===================================================================== */
@view-transition { navigation: auto; }

@keyframes vt-fade-in  { from { opacity: 0; transform: scale(1.012); } }
@keyframes vt-fade-out { to   { opacity: 0; transform: scale(0.994); } }

::view-transition-old(root) {
  animation: vt-fade-out 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.52s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Header nicht mitblenden: eigene, stehende Transition-Gruppe. */
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* =====================================================================
   HAMBURGER-MENÜ & MOBILE NAVIGATION
   Breakpoint ≤ 768 px: Hamburger sichtbar, Desktop-Nav ausgeblendet.
   Overlay liegt hinter dem Header (z-index 45 < Header 50), der Header
   bleibt immer oben sichtbar (Wortmarke · Audio · Sprache · X).
   ===================================================================== */

/* ---- Hamburger-Button ---------------------------------------------- */
.site-header__burger {
  display: none;                /* Desktop: versteckt */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-sand);
  transition: color 0.3s ease;
}
.site-header__burger:hover { color: var(--c-champagne); }
.site-header__burger:focus-visible { outline: 1px solid var(--c-brass); outline-offset: 3px; }

.site-header__burger-bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform          0.38s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity            0.28s ease,
    background-color   0.25s ease;
}

/* 3 Streifen → X-Morphing */
.site-header__burger[aria-expanded="true"] { color: var(--c-brass); }
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---- Mobile Breakpoint: Desktop-Nav ausblenden, Hamburger einblenden */
@media (max-width: 768px) {
  .site-header                { grid-template-columns: 1fr auto; }
  .site-header__nav           { display: none; }
  .site-header__usep          { display: none; }
  .site-header__legal         { display: none; }
  .site-header__burger        { display: flex; }
}

/* ---- Mobile Nav Overlay ------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 45;                  /* hinter Header (50), vor allem anderen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: var(--c-black);

  /* Geschlossen-Zustand */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Desktop: Overlay komplett entfernen */
@media (min-width: 769px) {
  .mobile-nav           { display: none; }
  .site-header__burger  { display: none !important; }
}

/* Atmosphärischer Petrol-Schimmer */
.mobile-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 22% 58%, rgba(13, 36, 48, 0.95) 0%, transparent 70%),
    radial-gradient(ellipse 55% 45% at 76% 35%, rgba(28, 57, 69, 0.40) 0%, transparent 60%);
  pointer-events: none;
}

/* Feines Grain (passt zur Prosa-/Echo-Textur) */
.mobile-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.55;
  pointer-events: none;
}

/* Vertikale Messing-Naht links (Designmotiv: Warnstein-Naht aus Prosa) */
.mobile-nav__rail {
  position: absolute;
  left: clamp(1.4rem, 4.5vw, 3.5rem);
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent                    0%,
    rgba(199, 167, 101, 0.45)     25%,
    rgba(199, 167, 101, 0.45)     75%,
    transparent                   100%);
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
  transition:
    opacity   0.55s ease           0.06s,
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;
}
.mobile-nav.is-open .mobile-nav__rail {
  opacity: 1;
  transform: scaleY(1);
}

/* ---- Nav-Links ---------------------------------------------------- */
.mobile-nav__links {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

.mobile-nav__links a {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10.5vw, 4.8rem);
  color: var(--c-creme);
  letter-spacing: 0.07em;
  text-decoration: none;
  line-height: 1.25;
  padding: 0.08em 0.5em;
  cursor: pointer;

  /* Geschlossen: unsichtbar + leicht versetzt */
  opacity: 0;
  transform: translateY(18px);
  transition:
    color     0.3s  ease,
    opacity   0.18s ease,
    transform 0.18s ease;
}

/* Messing-Unterline (wächst bei Hover / aktiver Seite) */
.mobile-nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0.08em;
  left: 0.5em;
  right: 0.5em;
  height: 1px;
  background: var(--c-brass);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-nav__links a:hover::after,
.mobile-nav__links a.is-current::after { transform: scaleX(1); }

.mobile-nav__links a:hover         { color: var(--c-champagne); }
.mobile-nav__links a.is-current    { color: var(--c-brass); }
.mobile-nav__links a:focus-visible  {
  outline: 1px solid var(--c-brass);
  outline-offset: 4px;
  color: var(--c-champagne);
}

/* Geöffnet: Links animieren herein — gestaffeltes Erscheinen */
.mobile-nav.is-open .mobile-nav__links a {
  opacity: 1;
  transform: translateY(0);
  transition:
    color     0.3s  ease,
    opacity   0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
/* transition-delay: color | opacity | transform */
.mobile-nav.is-open .mobile-nav__links a:nth-child(1) { transition-delay: 0s, 0.12s, 0.12s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(2) { transition-delay: 0s, 0.21s, 0.21s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(3) { transition-delay: 0s, 0.30s, 0.30s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(4) { transition-delay: 0s, 0.39s, 0.39s; }
.mobile-nav.is-open .mobile-nav__links a:nth-child(5) { transition-delay: 0s, 0.48s, 0.48s; }

/* ---- Footer (Impressum-Link) -------------------------------------- */
.mobile-nav__foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin-top: 2.4rem;

  opacity: 0;
  transition: opacity 0.18s ease;
}
.mobile-nav.is-open .mobile-nav__foot {
  opacity: 1;
  transition: opacity 0.4s ease 0.50s;
}

.mobile-nav__foot-sep {
  width: 36px;
  height: 1px;
  background: rgba(199, 167, 101, 0.38);
}

/* Util-Zeile: Audio · Sprache · Trenner · Legal */
.mobile-nav__util {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-nav__util-sep {
  width: 1px;
  height: 12px;
  background: rgba(199, 167, 101, 0.38);
}

/* Audio-Button im Overlay — gleicher Look wie im Header */
.mobile-nav__audio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(199, 167, 101, 0.3);
  border-radius: 3px;
  color: var(--c-sand);
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.mobile-nav__audio-btn:hover   { color: var(--c-champagne); border-color: var(--c-brass); }
.mobile-nav__audio-btn:focus-visible { color: var(--c-champagne); outline: 1px solid var(--c-brass); outline-offset: 3px; }

/* Sprach-Button im Overlay — gleicher Look wie im Header */
.mobile-nav__lang-btn {
  font-family: var(--font-text);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--c-sand);
  background: none;
  border: 1px solid rgba(199, 167, 101, 0.3);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
  height: 44px;
  min-width: 44px;
}
.mobile-nav__lang-btn:hover   { color: var(--c-champagne); border-color: var(--c-brass); }
.mobile-nav__lang-btn:focus-visible { color: var(--c-champagne); outline: 1px solid var(--c-brass); outline-offset: 3px; }

.mobile-nav__legal {
  font-family: var(--font-text);
  font-size: 0.70rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sand);
  text-decoration: none;
  transition: color 0.3s ease;
}
.mobile-nav__legal:hover,
.mobile-nav__legal.is-current { color: var(--c-champagne); }
.mobile-nav__legal:focus-visible {
  outline: 1px solid var(--c-brass);
  outline-offset: 3px;
  color: var(--c-champagne);
}

/* ---- Hintergrund-Scroll sperren ----------------------------------- */
body.mobile-nav-open { overflow: hidden; }

/* ---- Reduced Motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav,
  .mobile-nav__rail,
  .mobile-nav__links a,
  .mobile-nav__foot {
    transition-duration: 0.01ms !important;
    transition-delay:    0s     !important;
  }
  .mobile-nav__links a { transform: none !important; }
  .mobile-nav__rail    { transform: none !important; }
}