/* Hintergrund (Brett 21 A–F): eine feste Ebene hinter der ganzen Seite. Welche Varianten laufen, stellt Eric in der
   Verwaltung ein (einstellung „hintergrund“); mehrere dürfen gleichzeitig an sein. Bewegung immer langsam und aus bei
   „weniger Bewegung“. Ohne Auswahl bleibt es beim schlichten Hintergrund. */
.hg-ebene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  --hg-punkt: rgba(255,255,255,.16); --hg-linie: rgba(255,255,255,.24); --hg-rille: rgba(255,255,255,.14); --hg-staerke: .52; --hg-korn: .28; }
[data-theme="light"] .hg-ebene { --hg-punkt: rgba(0,0,0,.18); --hg-linie: rgba(0,0,0,.24); --hg-rille: rgba(0,0,0,.14); --hg-staerke: .4; --hg-korn: .16; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .hg-ebene { --hg-punkt: rgba(0,0,0,.18); --hg-linie: rgba(0,0,0,.24);
  --hg-rille: rgba(0,0,0,.14); --hg-staerke: .4; --hg-korn: .16; } }
.hg-ebene > div { position: absolute; inset: 0; }

/* Damit die Ebene durchscheint, malen Seite, Kopf und untere Leiste nicht mehr deckend */
body.mit-hg .seite { background: transparent; }
body.mit-hg .kopf, body.mit-hg .unten, body.mit-hg .ed-leiste { background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* A Aurora: weiche Farbwolken */
.hg-a i { position: absolute; width: 55vw; height: 70vh; border-radius: 50%; filter: blur(90px); opacity: var(--hg-staerke);
  animation: hg-wandern 32s ease-in-out infinite alternate; will-change: transform; }
.hg-a i:nth-child(1) { background: #FF9A52; left: -12vw; top: -25vh; }
.hg-a i:nth-child(2) { background: #8A5CD6; right: -15vw; top: 15vh; animation-duration: 38s; animation-delay: -10s; }
.hg-a i:nth-child(3) { background: #2E8B57; left: 25vw; bottom: -40vh; animation-duration: 44s; animation-delay: -18s; opacity: calc(var(--hg-staerke) * .75); }
@keyframes hg-wandern { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.12); } 100% { transform: translate(-6vw, 10vh) scale(.95); } }

/* B Punktraster mit Licht (folgt am Rechner der Maus) */
.hg-b { background-image: radial-gradient(var(--hg-punkt) 1px, transparent 1.4px); background-size: 22px 22px; }
.hg-b::after { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; left: 0; top: 0;
  background: radial-gradient(circle, rgba(255,154,82,.32), transparent 65%);
  transform: translate(calc(var(--mx, 60vw) - 320px), calc(var(--my, 25vh) - 320px)); transition: transform .6s ease-out; }
.hg-b.wandert::after { animation: hg-licht 22s ease-in-out infinite alternate; }
@keyframes hg-licht { from { transform: translate(5vw, 0); } to { transform: translate(55vw, 45vh); } }

/* C Lo-fi-Körnung */
.hg-c::before { content: ""; position: absolute; inset: -50%; opacity: var(--hg-korn); animation: hg-korn .9s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hg-c::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255,190,140,.14), transparent 60%), repeating-linear-gradient(0deg, var(--hg-punkt) 0 1px, transparent 1px 4px);
  opacity: .5; }
@keyframes hg-korn { 0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } }

/* D Schwebende Formen (Umrisse von App-Symbolen) */
.hg-d i { position: absolute; border: 1.5px solid var(--hg-linie); border-radius: 24%; animation: hg-schweben 16s ease-in-out infinite alternate; }
.hg-d i:nth-child(odd) { border-radius: 50%; }
@keyframes hg-schweben { from { transform: translateY(-14px) rotate(-6deg); } to { transform: translateY(18px) rotate(8deg); } }

/* E Farbe der App der Woche */
.hg-e { background: radial-gradient(80% 60% at 78% -12%, color-mix(in srgb, var(--hg-farbe, #3A7BD5) 68%, transparent), transparent 70%),
  radial-gradient(55% 45% at 8% -5%, color-mix(in srgb, var(--hg-farbe, #3A7BD5) 36%, transparent), transparent 70%); }

/* F Schallplatte unten rechts */
.hg-f::before, .hg-f::after { content: ""; position: absolute; width: 760px; height: 760px; right: -240px; bottom: -300px; border-radius: 50%;
  animation: hg-drehen 70s linear infinite; }
.hg-f::before { background: repeating-radial-gradient(circle, var(--hg-rille) 0 1px, transparent 1px 7px), radial-gradient(circle, #FF9A52 0 8%, transparent 8.4%); }
.hg-f::after { background: conic-gradient(from 0deg, transparent, var(--hg-rille) 8%, transparent 16%, transparent 50%, var(--hg-rille) 58%, transparent 66%); }
@keyframes hg-drehen { to { transform: rotate(360deg); } }
@media (max-width: 699px) { .hg-f::before, .hg-f::after { width: 460px; height: 460px; right: -200px; bottom: -220px; } }

@media (prefers-reduced-motion: reduce) { .hg-ebene *, .hg-ebene *::before, .hg-ebene *::after, .hg-ebene > div::before, .hg-ebene > div::after { animation: none !important; } }