/* Farbverlauf „Kräftig“ für alle Seiten (Technik nach btc-farbverlauf, Farben von Emailfy).
   farbverlauf.js legt zwei Ebenen hinter den Inhalt:
   #fv-surface  feste Grundfläche, deren Farbe sich beim Scrollen verschiebt
   #fv-felder   weiche Farbflächen, die mit der Seite scrollen, oben und unten transparent auslaufend
   Ohne JavaScript bleibt die Seite im bisherigen dunklen Look. */
:root {
  --fv-violet: 265 75% 52%;
  --fv-night: 222 72% 46%;
  --fv-teal: 186 70% 36%;
  --fv-mint: 121 95% 76%;
  --fv-warm: 18 78% 56%;
}
#fv-surface { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--fv-surface, var(--bg)); }
#fv-felder { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.fv-feld {
  position: absolute; left: 0; right: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.fv-feld--oben {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}
html.fv-an .v1-ticker, html.fv-an .an-trust { background: hsl(260 40% 6% / 0.55); }

/* Farbflächen, wechselnde Seiten */
.fv-a { background: radial-gradient(70% 60% at 88% 8%, hsl(var(--fv-violet) / 0.33), transparent 70%), radial-gradient(60% 55% at 4% 92%, hsl(var(--fv-night) / 0.26), transparent 72%), radial-gradient(34% 30% at 70% 62%, hsl(var(--fv-mint) / 0.08), transparent 70%); }
.fv-b { background: radial-gradient(80% 70% at -8% 30%, hsl(var(--fv-night) / 0.26), transparent 72%), radial-gradient(60% 60% at 108% 78%, hsl(var(--fv-violet) / 0.20), transparent 72%); }
.fv-c { background: radial-gradient(70% 60% at 108% 22%, hsl(var(--fv-violet) / 0.26), transparent 72%), radial-gradient(70% 60% at -6% 82%, hsl(var(--fv-night) / 0.23), transparent 72%); }
.fv-d { background: radial-gradient(76% 64% at 106% 16%, hsl(var(--fv-teal) / 0.30), transparent 72%), radial-gradient(46% 40% at -4% 78%, hsl(var(--fv-mint) / 0.10), transparent 72%); }
.fv-e { background: radial-gradient(80% 66% at -10% 26%, hsl(var(--fv-violet) / 0.28), transparent 72%), radial-gradient(64% 56% at 110% 80%, hsl(var(--fv-warm) / 0.16), transparent 72%); }
.fv-f { background: radial-gradient(70% 60% at 104% 12%, hsl(var(--fv-warm) / 0.20), transparent 72%), radial-gradient(76% 64% at -6% 70%, hsl(var(--fv-night) / 0.26), transparent 72%); }
.fv-g { background: radial-gradient(70% 66% at -8% 40%, hsl(var(--fv-teal) / 0.26), transparent 72%), radial-gradient(64% 60% at 108% 64%, hsl(var(--fv-violet) / 0.23), transparent 72%); }
.fv-h { background: radial-gradient(70% 50% at 108% 18%, hsl(var(--fv-night) / 0.23), transparent 72%), radial-gradient(56% 44% at -8% 84%, hsl(var(--fv-violet) / 0.16), transparent 72%); }
.fv-z { background: radial-gradient(60% 56% at 50% 40%, hsl(var(--fv-mint) / 0.15), transparent 70%), radial-gradient(70% 60% at 0% 100%, hsl(var(--fv-violet) / 0.26), transparent 72%), radial-gradient(60% 50% at 100% 0%, hsl(var(--fv-teal) / 0.20), transparent 72%); }

/* Die Flächen bewegen sich sehr langsam */
@media (prefers-reduced-motion: no-preference) {
  .fv-feld { animation: fv-drift 26s ease-in-out infinite alternate; will-change: transform; }
  .fv-feld:nth-child(even) { animation-duration: 32s; animation-direction: alternate-reverse; }
}
@keyframes fv-drift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1.03); }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.06); }
}