/* =====================================================================
   Strenschnuppen — Sternkonstellationen + vereinzelte Quer-Flüge (Rand → Rand)
   ===================================================================== */

[data-sternschnuppen] {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

/* Inhalt & Header über dem fixierten Sternenhimmel (alle Hauptseiten mit body.page) */
body.page {
  position: relative;
}

/* z-index 0: gleicher Stapel wie fixer Sternenhimmel (z:0), sichtbar durch transparente Bereiche; Header nutzt global z-index:50 in 05-components.css */
body.page #content {
  position: relative;
  z-index: 0;
}

/* Sternkonstellationen — kleine leuchtende Punkte (hinter den Sternschnuppen) */
[data-sternschnuppen] .sternschnuppen__constellations {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

[data-sternschnuppen] .sternschnuppen__meteors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Periodisch: hell → dimmer → wieder hell; Minimum bleibt sichtbar (kein vollständiges Erlöschen) */
@keyframes sternschnuppen-star-twinkle {
  0%,
  13% {
    opacity: var(--star-op-high, 0.9);
    transform: scale(1.02);
  }
  30% {
    opacity: var(--star-op-mid, 0.42);
    transform: scale(0.98);
  }
  42%,
  52% {
    opacity: var(--star-op-out, 0.26);
    transform: scale(0.93);
  }
  64% {
    opacity: var(--star-op-mid, 0.44);
    transform: scale(0.97);
  }
  78% {
    opacity: var(--star-op-high, 0.94);
    transform: scale(1.06);
  }
  90%,
  100% {
    opacity: var(--star-op-high, 0.88);
    transform: scale(1.02);
  }
}

[data-sternschnuppen] .sternschnuppen__star {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: var(--d, 2px);
  height: var(--d, 2px);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.75) 42%,
    rgba(220, 230, 255, 0.35) 100%
  );
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 6px rgba(255, 255, 255, 0.55),
    0 0 14px rgba(200, 220, 255, 0.22);
  filter: blur(0.25px);
  animation: sternschnuppen-star-twinkle var(--star-cycle, 13.5s) linear infinite;
  animation-delay: var(--tw, 0s);
}

/* Planeten: runde Vollfarb-Kugel (::after) + Nebelring (::before), Farbe nachglimmend */
@keyframes sternschnuppen-planet-nebula {
  0%,
  100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  28% {
    opacity: 0.38;
    transform: translate(-50%, -50%) scale(1.025);
  }
  55% {
    opacity: 0.26;
    transform: translate(-50%, -50%) scale(0.998);
  }
  78% {
    opacity: 0.44;
    transform: translate(-50%, -50%) scale(1.018);
  }
}

@keyframes sternschnuppen-planet-core {
  0%,
  100% {
    filter: brightness(0.96) saturate(0.88);
  }
  50% {
    filter: brightness(1.05) saturate(0.96);
  }
}

[data-sternschnuppen] .sternschnuppen__planet {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  /* Max. 8px: kleiner als das ehem. zentrale Gold (9px); Pseudos nutzen dieselbe Größe */
  --planet-size: min(var(--pd, 7px), 8px);
  width: var(--planet-size);
  height: var(--planet-size);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  isolation: isolate;
  /* Sichtbar vor dem Seitenhintergrund, aber nicht dominant */
  opacity: 0.72;
}

[data-sternschnuppen] .sternschnuppen__planet::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: calc(var(--planet-size) * 2.45);
  height: calc(var(--planet-size) * 2.45);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(1px);
  animation: sternschnuppen-planet-nebula var(--planet-nebula-cycle, 16s) ease-in-out infinite;
  animation-delay: var(--tw, 0s);
}

[data-sternschnuppen] .sternschnuppen__planet::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: sternschnuppen-planet-core var(--planet-cycle, 18s) ease-in-out infinite;
  animation-delay: var(--tw, 0s);
}

[data-sternschnuppen] .sternschnuppen__planet--violet::before {
  background: radial-gradient(
    circle at 50% 48%,
    color-mix(in srgb, var(--accent) 28%, transparent) 0%,
    color-mix(in srgb, var(--accent) 11%, transparent) 46%,
    color-mix(in srgb, var(--accent) 4%, transparent) 66%,
    transparent 80%
  );
  box-shadow:
    0 0 calc(var(--planet-size) * 0.38) color-mix(in srgb, var(--accent) 14%, transparent),
    0 0 calc(var(--planet-size) * 0.65) color-mix(in srgb, var(--accent) 7%, transparent);
}

[data-sternschnuppen] .sternschnuppen__planet--violet::after {
  background: radial-gradient(
    circle at 32% 28%,
    color-mix(in srgb, var(--accent) 42%, color-mix(in srgb, var(--bg) 40%, white)) 0%,
    color-mix(in srgb, var(--accent) 58%, var(--bg)) 50%,
    color-mix(in srgb, var(--accent) 32%, var(--bg)) 100%
  );
  box-shadow:
    inset 0 0 calc(var(--planet-size) * 0.48) color-mix(in srgb, var(--bg) 78%, var(--accent)),
    inset calc(var(--planet-size) * -0.05) calc(var(--planet-size) * -0.08) calc(var(--planet-size) * 0.28)
      color-mix(in srgb, var(--bg) 58%, var(--accent)),
    0 0 calc(var(--planet-size) * 0.3) color-mix(in srgb, var(--accent) 28%, transparent),
    0 0 calc(var(--planet-size) * 0.58) color-mix(in srgb, var(--accent) 14%, transparent);
}

[data-sternschnuppen] .sternschnuppen__planet--cyan::before {
  background: radial-gradient(
    circle at 48% 52%,
    color-mix(in srgb, var(--accent-2) 26%, transparent) 0%,
    color-mix(in srgb, var(--accent-2) 9%, transparent) 48%,
    color-mix(in srgb, var(--accent-2) 3.5%, transparent) 68%,
    transparent 82%
  );
  box-shadow:
    0 0 calc(var(--planet-size) * 0.38) color-mix(in srgb, var(--accent-2) 13%, transparent),
    0 0 calc(var(--planet-size) * 0.65) color-mix(in srgb, var(--accent-2) 6%, transparent);
}

[data-sternschnuppen] .sternschnuppen__planet--cyan::after {
  background: radial-gradient(
    circle at 34% 30%,
    color-mix(in srgb, var(--accent-2) 40%, color-mix(in srgb, var(--bg) 35%, white)) 0%,
    color-mix(in srgb, var(--accent-2) 55%, var(--bg)) 50%,
    color-mix(in srgb, var(--accent-2) 30%, var(--bg)) 100%
  );
  box-shadow:
    inset 0 0 calc(var(--planet-size) * 0.48) color-mix(in srgb, var(--bg) 78%, var(--accent-2)),
    inset calc(var(--planet-size) * -0.05) calc(var(--planet-size) * -0.08) calc(var(--planet-size) * 0.28)
      color-mix(in srgb, var(--bg) 60%, var(--accent-2)),
    0 0 calc(var(--planet-size) * 0.3) color-mix(in srgb, var(--accent-2) 26%, transparent),
    0 0 calc(var(--planet-size) * 0.58) color-mix(in srgb, var(--accent-2) 12%, transparent);
}

/* Vereinzelte Bahnen: Kugel vorn, Schweif hinten — rotate = atan2(Δx, -Δy) zur Keyframe-Verschiebung (Δx,Δy) */
@keyframes sternschnuppe-bl-tr {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(128deg);
  }
  1.5% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(128deg);
  }
  2.5% {
    opacity: 0.62;
    transform: translate3d(0, 0, 0) rotate(128deg);
  }
  15% {
    opacity: 0.62;
    transform: translate3d(118vw, 92vh, 0) rotate(128deg);
  }
  16.5% {
    opacity: 0;
    transform: translate3d(118vw, 92vh, 0) rotate(128deg);
  }
}

@keyframes sternschnuppe-tl-br {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(138.4deg);
  }
  1% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(138.4deg);
  }
  2% {
    opacity: 0.55;
    transform: translate3d(0, 0, 0) rotate(138.4deg);
  }
  13.5% {
    opacity: 0.55;
    transform: translate3d(105vw, 118vh, 0) rotate(138.4deg);
  }
  15% {
    opacity: 0;
    transform: translate3d(105vw, 118vh, 0) rotate(138.4deg);
  }
}

@keyframes sternschnuppe-l-r {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(84.6deg);
  }
  1.2% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(84.6deg);
  }
  2.2% {
    opacity: 0.52;
    transform: translate3d(0, 0, 0) rotate(84.6deg);
  }
  11% {
    opacity: 0.52;
    transform: translate3d(128vw, -12vh, 0) rotate(84.6deg);
  }
  12.5% {
    opacity: 0;
    transform: translate3d(128vw, -12vh, 0) rotate(84.6deg);
  }
}

/* Sehr dezentes Flackern nur am Schweif (Opazität) */
@keyframes sternschnuppen-tail-flicker {
  0%,
  100% {
    opacity: 0.54;
  }
  24% {
    opacity: 0.66;
  }
  48% {
    opacity: 0.48;
  }
  71% {
    opacity: 0.62;
  }
  88% {
    opacity: 0.52;
  }
}

/* Spalte: oben Kugel (vorne), darunter Schweif (hinten) — rotate = atan2(Δx,-Δy) zur Verschiebung (screen +y unten) */
[data-sternschnuppen] .sternschnuppen__streak {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 14px;
  height: auto;
  min-height: calc(var(--head, 6px) + var(--len, 80px));
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  transform-origin: 50% 0;
  will-change: transform, opacity;
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  --len: 86px;
  --tail-w: 2px;
  --head: 6px;
}

[data-sternschnuppen] .sternschnuppen__streak--bl-tr {
  left: -4%;
  top: 10%;
  bottom: auto;
  animation-name: sternschnuppe-bl-tr;
  animation-duration: 72s;
  animation-delay: 0s;
}

[data-sternschnuppen] .sternschnuppen__streak--tl-br {
  left: 8%;
  top: -6%;
  bottom: auto;
  animation-name: sternschnuppe-tl-br;
  animation-duration: 88s;
  animation-delay: -36s;
  --len: 92px;
}

[data-sternschnuppen] .sternschnuppen__streak--l-r {
  left: -5%;
  top: 32%;
  bottom: auto;
  animation-name: sternschnuppe-l-r;
  animation-duration: 64s;
  animation-delay: -52s;
  --len: 72px;
  --head: 5px;
}

/* Leuchtende Kugel an der Spitze (vorne in Flugrichtung) */
[data-sternschnuppen] .sternschnuppen__streak::before {
  content: "";
  flex-shrink: 0;
  width: var(--head, 6px);
  height: var(--head, 6px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.85) 45%,
    rgba(200, 220, 255, 0.45) 100%
  );
  box-shadow:
    0 0 3px rgba(255, 255, 255, 1),
    0 0 10px rgba(255, 255, 255, 0.75),
    0 0 22px rgba(255, 255, 255, 0.45),
    0 0 40px rgba(180, 210, 255, 0.25);
  filter: blur(0.35px);
  z-index: 2;
}

/* Senkrechter Schweif unter der Kugel */
[data-sternschnuppen] .sternschnuppen__streak::after {
  content: "";
  flex-shrink: 0;
  width: var(--tail-w, 2px);
  height: var(--len, 80px);
  margin-top: -1px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.48) 0%,
    rgba(255, 255, 255, 0.2) 24%,
    rgba(255, 255, 255, 0.07) 52%,
    transparent 100%
  );
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.1),
    0 0 12px rgba(255, 255, 255, 0.04);
  filter: blur(0.55px);
  animation: sternschnuppen-tail-flicker 2.35s ease-in-out infinite;
}

@media (max-width: 1024px) {
  /* Mobile DOM-Variante (Fallback, falls JS deaktiviert): leichtere Sterne */
  [data-sternschnuppen] .sternschnuppen__star {
    opacity: 0.42;
    box-shadow:
      0 0 1px rgba(255, 255, 255, 0.78),
      0 0 4px rgba(255, 255, 255, 0.38);
    filter: none; /* iPad: filter:blur entfernen */
  }
  /* Pseudo-Elemente der Planeten auf Mobile abschalten -> spart Compositing */
  [data-sternschnuppen] .sternschnuppen__planet {
    opacity: 0.5;
  }
  [data-sternschnuppen] .sternschnuppen__planet::before,
  [data-sternschnuppen] .sternschnuppen__planet::after {
    animation: none;
  }
  /* iPad: Streaks der DOM-Variante komplett aus (Cliprect + 3-Layer-Streak
     erzeugt sonst je Stueck ein eigenes Composite-Layer). */
  [data-sternschnuppen] .sternschnuppen__streak {
    display: none !important;
  }
  /* SVG-Variante: SVG-Filter ssPlanetSoften ist auf Touch teurer als der
     Effekt es wert ist. Sicherheitshalber abstellen. */
  [data-sternschnuppen] .sternschnuppen__svg-planets {
    filter: none !important;
  }
  /* SVG-Streak entfernen, falls das Skript ihn doch zeichnet */
  [data-sternschnuppen] .sternschnuppen__svg-streak {
    display: none !important;
  }
}

/* iOS-spezifisch: vollkommen ohne Composite-Beschleunigung — bringt iPad-
   Renderpipeline aus dem Stocken, ohne die Optik wahrnehmbar zu aendern. */
html.is-ios [data-sternschnuppen],
html.is-touch [data-sternschnuppen] {
  contain: layout paint;
}
html.is-ios [data-sternschnuppen] .sternschnuppen__svg-planets,
html.is-touch [data-sternschnuppen] .sternschnuppen__svg-planets {
  filter: none !important;
}

/* =====================================================================
   SVG-VARIANTE — wird von js/sternschnuppen.js auf Touch/iPad gerendert.
   EIN SVG = EIN Composite-Layer (statt 100+ DOM-Knoten mit blur).
   Damit löst sich das iPad-Ladeproblem, ohne Sterne/Planeten zu opfern.
   ===================================================================== */

[data-sternschnuppen] .sternschnuppen__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* Keine GPU-Reservierung erzwingen — SVG ist ohnehin ein eigener Layer */
  will-change: auto;
  contain: layout style paint;
}

/* Statisch-Modus (Reduced Motion / Reduced Data / Low Memory):
   Keine Animation, kein animation-Dispatch, kein Compositor-Druck. */
[data-sternschnuppen] .sternschnuppen__svg--static * {
  animation: none !important;
  transform: none !important;
}
[data-sternschnuppen] .sternschnuppen__svg--static .sternschnuppen__svg-star {
  opacity: 0.78 !important;
}
[data-sternschnuppen] .sternschnuppen__svg--static .sternschnuppen__svg-aura {
  opacity: 0.55 !important;
}

/* Hintergrund-Glow (lila/cyan/gold) — imitiert body::before-Farbpools.
   Wird von js/sternschnuppen.js auf iPad/Mobile gerendert, weil
   body::before dort über mehrere iOS-Versionen unzuverlässig flackert
   (position:fixed + saturate + blur). Hier garantiert sichtbar. */
[data-sternschnuppen] .sternschnuppen__svg-bg {
  pointer-events: none;
}

[data-sternschnuppen] .sternschnuppen__svg-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 22s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes ssBgFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2.5%, 1.8%) scale(1.06); }
}
@keyframes ssBgFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-2%, -1.4%) scale(1.05); }
}
@keyframes ssBgFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(1.4%, -2%) scale(1.04); }
}

/* Sterne: ein Circle pro Stern, mit Radial-Gradient-Fill (in JS via
   <defs id="ssStarGrad">). Der Gradient erzeugt den weichen Glow —
   identisch zur Desktop-Variante mit box-shadow + radial-gradient,
   aber ohne filter:blur und ohne mehrfachen Composite-Layer. */
[data-sternschnuppen] .sternschnuppen__svg-star {
  /* Twinkle: Helligkeit + minimale Größenänderung, gleiche Kurve wie Desktop */
  opacity: 0.92;
  transform-box: fill-box;
  transform-origin: center;
  animation: sternschnuppen-svg-twinkle var(--ss-twinkle-cycle, 13.5s) linear infinite;
}

@keyframes sternschnuppen-svg-twinkle {
  0%,
  13%   { opacity: 0.92; transform: scale(1.02); }
  30%   { opacity: 0.50; transform: scale(0.97); }
  42%,
  52%   { opacity: 0.32; transform: scale(0.93); }
  64%   { opacity: 0.55; transform: scale(0.97); }
  78%   { opacity: 0.96; transform: scale(1.06); }
  90%,
  100%  { opacity: 0.92; transform: scale(1.02); }
}

/* Planeten: Aura (großer Hof) + Body (weiche Plasma-Kugel).
   Body wirkt durch ssPlanetSoften-Filter + ausfadendem Gradient
   bewusst etwas unscharf — so liegt der Planet sichtbar im
   Hintergrund und konkurriert nicht mit dem Inhalt. */
[data-sternschnuppen] .sternschnuppen__svg-planet {
  opacity: 0.65;
  transform-box: fill-box;
  transform-origin: center;
  animation: sternschnuppen-svg-planet-core 20s ease-in-out infinite;
}

[data-sternschnuppen] .sternschnuppen__svg-aura {
  opacity: 0.7;
  transform-box: fill-box;
  transform-origin: center;
  animation: sternschnuppen-svg-aura 18s ease-in-out infinite;
}

[data-sternschnuppen] .sternschnuppen__svg-aura--cyan {
  animation-duration: 19s;
}

@keyframes sternschnuppen-svg-aura {
  0%,
  100% { opacity: 0.45; transform: scale(1); }
  28%  { opacity: 0.75; transform: scale(1.025); }
  55%  { opacity: 0.55; transform: scale(0.998); }
  78%  { opacity: 0.85; transform: scale(1.018); }
}

@keyframes sternschnuppen-svg-planet-core {
  0%,
  100% { filter: brightness(0.96) saturate(0.92); }
  50%  { filter: brightness(1.06) saturate(1.0); }
}

/* Eine einzige sanfte SVG-Sternschnuppe (nur Light-Mode) */
[data-sternschnuppen] .sternschnuppen__svg-streak {
  transform-origin: 0 0;
  transform: translate(-12vw, 18vh);
  opacity: 0;
  animation: sternschnuppen-svg-streak 38s linear infinite;
}

[data-sternschnuppen] .sternschnuppen__svg-streak-tail {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 0.18;
  stroke-linecap: round;
}

[data-sternschnuppen] .sternschnuppen__svg-streak-head {
  fill: #ffffff;
  opacity: 0.92;
}

@keyframes sternschnuppen-svg-streak {
  0%   { transform: translate(-12vw, 18vh); opacity: 0; }
  3%   { opacity: 0; }
  4%   { opacity: 0.7; }
  18%  { transform: translate(112vw, 78vh); opacity: 0.7; }
  19%  { opacity: 0; }
  100% { transform: translate(-12vw, 18vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-sternschnuppen] .sternschnuppen__svg-star,
  [data-sternschnuppen] .sternschnuppen__svg-planet,
  [data-sternschnuppen] .sternschnuppen__svg-aura,
  [data-sternschnuppen] .sternschnuppen__svg-aura--violet,
  [data-sternschnuppen] .sternschnuppen__svg-aura--cyan,
  [data-sternschnuppen] .sternschnuppen__svg-glow {
    animation: none !important;
  }
  [data-sternschnuppen] .sternschnuppen__svg-star {
    opacity: 0.65 !important;
    transform: none !important;
  }
  [data-sternschnuppen] .sternschnuppen__svg-aura {
    opacity: 0.55 !important;
    transform: none !important;
  }
  [data-sternschnuppen] .sternschnuppen__svg-streak {
    display: none;
  }

  [data-sternschnuppen] .sternschnuppen__streak {
    animation: none;
    opacity: 0 !important;
    visibility: hidden;
  }

  [data-sternschnuppen] .sternschnuppen__streak::after {
    animation: none;
  }

  [data-sternschnuppen] .sternschnuppen__star {
    animation: none;
    opacity: 0.55 !important;
    transform: none;
  }

  [data-sternschnuppen] .sternschnuppen__planet {
    opacity: 0.68;
  }

  [data-sternschnuppen] .sternschnuppen__planet::before,
  [data-sternschnuppen] .sternschnuppen__planet::after {
    animation: none !important;
  }

  [data-sternschnuppen] .sternschnuppen__planet::before {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0.95px);
  }

  [data-sternschnuppen] .sternschnuppen__planet::after {
    filter: brightness(0.98) saturate(0.88);
  }
}