/* =============================================================================
   luithardt.family – bewegter Hintergrund (hintergrund.js baut die Ebene .hg).
   Fünf Arten, wählbar im Dropdown oben (nur angemeldet), Standard „huegel“:
     huegel      Hügel schwingen leicht, Sonne/Mond glimmt, zwei Vögel ziehen vorbei
     goldstaub   feine goldene Lichtpunkte steigen langsam auf
     seidenband  goldene Wellenlinien ziehen ruhig durchs Bild
     licht       große weiche Lichtflecken wandern langsam
     zweige      Äste wachsen aus den unteren Ecken, Blätter wiegen sich, ab und zu fällt eins
   Bewegt werden nur transform/opacity (flüssig, schont den Akku). Bei „Bewegung reduzieren“
   steht alles still. Grundfarbe bleibt --grund aus seite.css.
   ============================================================================= */
.hg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Farben: Gold wie im Logo; im Dunkeln Hügel in Nachtblau und Gold etwas kräftiger */
:root {
  --hg-gold: 201, 151, 63; --hg-stark: 1;
  --hg-h1: #e7dcc4; --hg-h2: #dfd0b1; --hg-h3: #d6c59f; --hg-h4: #cdb98e; --hg-sonne: #f0d9a6;
  --hg-vogel: rgba(30, 42, 68, .35); --hg-licht: rgba(255, 255, 255, .85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --hg-stark: 1.6; --hg-h1: #172036; --hg-h2: #1a2440; --hg-h3: #1e2a48; --hg-h4: #222f50; --hg-sonne: #d9ae5f;
    --hg-vogel: rgba(232, 211, 162, .35); --hg-licht: rgba(60, 85, 140, .35);
  }
}
:root[data-thema="dunkel"] {
  --hg-stark: 1.6; --hg-h1: #172036; --hg-h2: #1a2440; --hg-h3: #1e2a48; --hg-h4: #222f50; --hg-sonne: #d9ae5f;
  --hg-vogel: rgba(232, 211, 162, .35); --hg-licht: rgba(60, 85, 140, .35);
}

/* --- huegel ------------------------------------------------------------------------ */
.hg .hu { animation: hg-schwingen var(--d) ease-in-out infinite alternate; }
@keyframes hg-schwingen { from { transform: translateX(calc(var(--s) * -1)); } to { transform: translateX(var(--s)); } }
.hg .sonne { animation: hg-glimmen 10s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes hg-glimmen { from { opacity: .55; transform: scale(.95); } to { opacity: 1; transform: scale(1.06); } }
.hg .vogel { fill: none; stroke: var(--hg-vogel); stroke-width: 2; stroke-linecap: round;
             animation: hg-fliegen var(--d) linear infinite; animation-delay: var(--w); }
.hg .vogel path { animation: hg-flattern 1.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes hg-fliegen { from { transform: translate(-120px, 0); } to { transform: translate(1750px, -90px); } }
@keyframes hg-flattern { to { transform: scaleY(.55); } }

/* --- goldstaub --------------------------------------------------------------------- */
.hg .staub { position: absolute; bottom: -10px; border-radius: 50%;
             background: rgba(var(--hg-gold), calc(.45 * var(--hg-stark)));
             box-shadow: 0 0 6px rgba(var(--hg-gold), calc(.35 * var(--hg-stark)));
             animation: hg-steigen var(--d) linear infinite; animation-delay: var(--w); }
@keyframes hg-steigen {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(var(--x), -55vh); }
  90%  { opacity: .8; }
  100% { transform: translate(0, -110vh); opacity: 0; }
}

/* --- seidenband -------------------------------------------------------------------- */
.hg .welle { animation: hg-ziehen var(--d) linear infinite; }
.hg .welle.rueck { animation-direction: reverse; }
@keyframes hg-ziehen { to { transform: translateX(-800px); } }
.hg .atmen { animation: hg-atmen 18s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes hg-atmen { from { transform: scaleY(.85); } to { transform: scaleY(1.15); } }
.hg .linie { fill: none; stroke: rgba(var(--hg-gold), calc(var(--a) * var(--hg-stark))); }
.hg .band { fill: rgba(var(--hg-gold), calc(.10 * var(--hg-stark))); }

/* --- licht ------------------------------------------------------------------------- */
.hg .fleck { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
             animation: hg-wandern var(--d) ease-in-out infinite alternate; }
.hg .f1 { left: -20vmax; top: -25vmax; --d: 34s; background: radial-gradient(circle, rgba(var(--hg-gold), calc(.30 * var(--hg-stark))) 0, transparent 62%); }
.hg .f2 { right: -25vmax; top: 10vh; --d: 42s; animation-delay: -12s; background: radial-gradient(circle, var(--hg-licht) 0, transparent 60%); }
.hg .f3 { left: 20vw; bottom: -40vmax; --d: 38s; animation-delay: -20s; background: radial-gradient(circle, rgba(214, 180, 120, calc(.28 * var(--hg-stark))) 0, transparent 62%); }
@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); }
}

/* --- zweige ------------------------------------------------------------------------ */
.hg .ast { fill: none; stroke: rgba(var(--hg-gold), calc(.55 * var(--hg-stark))); stroke-width: 2.6; stroke-linecap: round;
           stroke-dasharray: 900; stroke-dashoffset: 900; animation: hg-wachsen 5s ease-out forwards; }
.hg .ast.spaeter { animation-delay: 1.2s; }
.hg .ast.zuletzt { animation-delay: 2s; }
@keyframes hg-wachsen { to { stroke-dashoffset: 0; } }
.hg .blatt { fill: rgba(var(--hg-gold), calc(.42 * var(--hg-stark))); transform-box: fill-box; transform-origin: 0 50%;
             opacity: 0; animation: hg-erscheinen 1.5s ease-out forwards, hg-wiegen var(--d) ease-in-out infinite alternate; }
@keyframes hg-erscheinen { to { opacity: 1; } }
@keyframes hg-wiegen { from { transform: rotate(var(--r)) rotate(-6deg); } to { transform: rotate(var(--r)) rotate(6deg); } }
.hg .fallend { fill: rgba(var(--hg-gold), calc(.32 * var(--hg-stark))); animation: hg-fallen var(--d) linear infinite; animation-delay: var(--w); }
@keyframes hg-fallen {
  0% { transform: translate(0, -60px) rotate(0); opacity: 0; } 10% { opacity: 1; }
  100% { transform: translate(var(--x), 1000px) rotate(540deg); opacity: 0; }
}

/* --- „Bewegung reduzieren“: stilles Bild (Äste fertig, kein Staub, keine fallenden Blätter) */
@media (prefers-reduced-motion: reduce) {
  .hg *, .hg { animation: none !important; }
  .hg .ast { stroke-dashoffset: 0; }
  .hg .blatt { opacity: 1; transform: rotate(var(--r)); }
  .hg .staub, .hg .fallend, .hg .vogel { display: none; }
}

/* --- Auswahl in der Kopfzeile (nur angemeldet, siehe .nur-angemeldet in seite.css) ----
   Runder Knopf mit dem Symbol der gewählten Art (wie Tag/Dunkel), Menü wie eine Karte aus
   den Familien-Mails: weiß, Goldlinie oben, gesperrte Goldzeile, Georgia; gewählte Art mit
   Goldrand links und Haken. */
.hg-wahl { position: relative; }
.hg-knopf { cursor: pointer; }
.hg-knopf svg { color: var(--gold-text); }   /* rund (.knopf.rund), Symbol der gewählten Art in Gold */
.hg-knopf[aria-expanded="true"] { background: var(--kasten); }
.hg-knopf:focus-visible, .hg-menue li:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.hg-menue { position: fixed; z-index: 20; width: 260px; margin: 0; padding: 18px 0 10px; list-style: none;
            background: var(--karte); border-top: 4px solid var(--gold); border-radius: 6px;
            box-shadow: 0 18px 44px -12px rgba(30, 42, 68, .35), 0 0 0 1px var(--linie);
            font: 16px/1.3 var(--schrift); color: var(--text);
            opacity: 0; transform: translateY(-6px); transition: opacity .15s, transform .15s; }
.hg-menue[hidden] { display: block; visibility: hidden; pointer-events: none; }
.hg-menue.offen { opacity: 1; transform: none; }
.hg-menue .oberzeile { padding: 0 20px 10px; font-size: 11px; letter-spacing: 3px; }
.hg-menue li[role="option"] { display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 17px;
                              border-left: 3px solid transparent; cursor: pointer; }
.hg-menue li[role="option"]:hover, .hg-menue li[role="option"]:focus { background: var(--kasten); outline: none; }
.hg-menue li[aria-selected="true"] { border-left-color: var(--gold); background: var(--kasten); color: var(--blau); }
.hg-menue .bild { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
                  border: 1px solid var(--linie); color: var(--gold-text); background: var(--karte); }
.hg-menue .bild svg { width: 20px; height: 20px; }
.hg-menue .name { flex: 1; }
.hg-menue .haken { width: 16px; height: 16px; color: var(--gold); visibility: hidden; }
.hg-menue li[aria-selected="true"] .haken { visibility: visible; }
.hg-menue .hinweis { margin: 6px 20px 0; padding-top: 10px; border-top: 1px solid var(--linie);
                     font-size: 12px; color: var(--leise); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .hg-menue { transition: none; } }