/* =========================================================
   Numa Marke: gemeinsam fuer Startseite und alle Unterseiten.
   Geist (selbst gehostet) und der bewegte Hintergrund
   (<div class="bg">: tiefes Blau, Lichter wandern, nur Transform).
   ========================================================= */

@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/geist-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url(../fonts/geist-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Grundflaeche + Lichter als eigene Ebenen; jede wandert in ihrem Takt */
.bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: radial-gradient(90% 90% at 45% 45%, #1A5296, #1B4F86 40%, #173F66 70%, #0D2238 100%); } /* taste-skill-ignore: Grund aus 1.jpg */
.bg i { position: absolute; border-radius: 50%; will-change: transform; }
.bg__blue  { left: 20%; top: -38%; width: 70vmax; height: 56vmax; background: radial-gradient(closest-side, #1C6BFF, rgba(28, 107, 255, .55) 45%, transparent); animation: bg-blue 13s ease-in-out infinite alternate; }
.bg__sky   { left: 55%; top: 10%; width: 46vmax; height: 46vmax; background: radial-gradient(closest-side, rgba(70, 150, 230, .55), transparent); animation: bg-sky 17s ease-in-out infinite alternate; }
.bg__teal  { left: 18%; top: 62%; width: 72vmax; height: 52vmax; background: radial-gradient(closest-side, rgba(82, 151, 165, .85), rgba(82, 151, 165, .3) 55%, transparent); animation: bg-teal 15s ease-in-out infinite alternate; }
.bg__cyan  { left: 62%; top: 66%; width: 52vmax; height: 46vmax; background: radial-gradient(closest-side, #96F0E2, rgba(110, 205, 205, .55) 40%, transparent); animation: bg-cyan 11s ease-in-out infinite alternate; }
.bg__dark-l { left: -26%; top: -6%; width: 56vmax; height: 90vmax; background: radial-gradient(closest-side, #050C18, rgba(5, 12, 24, .8) 45%, transparent); animation: bg-dark-l 19s ease-in-out infinite alternate; }
.bg__dark-r { left: 80%; top: 28%; width: 40vmax; height: 56vmax; background: radial-gradient(closest-side, #030606, rgba(3, 6, 6, .8) 45%, transparent); animation: bg-dark-r 14s ease-in-out infinite alternate; }
.bg__flash { left: 50%; top: 50%; width: 120vmax; height: 120vmax; translate: -50% -50%; background: radial-gradient(closest-side, rgba(150, 230, 255, .55), rgba(60, 150, 255, .2) 45%, transparent); opacity: 0; } /* Tap-Blitz aus der Szene */
@keyframes bg-blue   { 0% { transform: translate(-14vw, 0) scale(1); } 50% { transform: translate(10vw, 6vh) scale(1.15); } 100% { transform: translate(18vw, -4vh) scale(.92); } }
@keyframes bg-sky    { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-34vw, 22vh) scale(1.3); } }
@keyframes bg-teal   { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(22vw, -10vh) scale(1.12); } 100% { transform: translate(-12vw, 4vh) scale(.95); } }
@keyframes bg-cyan   { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30vw, -6vh) scale(1.2); } 100% { transform: translate(-8vw, -22vh) scale(.9); } }
@keyframes bg-dark-l { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(12vw, 18vh) scale(1.15); } }
@keyframes bg-dark-r { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-16vw, -14vh) scale(1.25); } }
html.is-tapflash .bg__flash { animation: bg-flash 1.4s cubic-bezier(.2, .7, .3, 1); }
@keyframes bg-flash { 0% { opacity: 0; transform: scale(.4); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .bg i { animation: none !important; } }