/*
 * Kompo „hintergrundanimation“ 1.0.0 – Ebenen und Farben (Plan docs/plaene/Kompo-hintergrund.md, K-7, K-11).
 *
 * Farben: eigene Variablen mit Rückfall auf das Gestaltungsprofil. Claude setzt sie je Seite oder Bereich im CSS an der
 * Bühne oder einem umgebenden Element; das Skript liest sie an der Bühne ab. Das Profil kennt keine eigenen Werte für den
 * dunklen Modus – die Vorgaben sind deshalb hell und dunkel gleich, der Block für dunkel hält die Stelle für eigene Werte.
 *
 * Ebenen: Die Fläche liegt immer unter allem aus dem Entwurf und nimmt keine Klicks. Bei „seite“ hängt sie an body
 * (z-index -1: über der Grundfarbe des Seitenaufbaus, unter dem Inhalt); bei „element“ legt sich die Bühne über den ganzen
 * umgebenden Bereich nach hinten – der Bereich braucht position: relative und einen eigenen Stapel (isolation: isolate).
 * Die Angaben, die diese Reihenfolge tragen, sind !important: Das CSS des Beitrags lädt danach, und übliche Regeln wie
 * „.einstieg > * { position: relative; z-index: 1 }“ ließen die Animation sonst still verschwinden (Gesamtprüfung, Befund 4).
 */
:root {
  --m3d-hintergrundanimation-farbe-1: var(--m3d-farbe-akzent, #e8a33d);
  --m3d-hintergrundanimation-farbe-2: var(--m3d-farbe-motiv-1, #5fc6d6);
  --m3d-hintergrundanimation-farbe-flocke: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --m3d-hintergrundanimation-farbe-1: var(--m3d-farbe-akzent, #e8a33d);
    --m3d-hintergrundanimation-farbe-2: var(--m3d-farbe-motiv-1, #5fc6d6);
    --m3d-hintergrundanimation-farbe-flocke: #ffffff;
  }
}

canvas.m3d-hintergrundanimation {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
}

[data-m3d-kompo="hintergrundanimation"][data-m3d-hintergrundanimation-bereich="element"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

canvas.m3d-hintergrundanimation-flaeche {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

canvas.m3d-hintergrundanimation[hidden],
canvas.m3d-hintergrundanimation-flaeche[hidden] {
  display: none !important;
}