/* =========================================================
   Mehr Bewegung, dauerhaft und ruhig (Vorschau 03.11.2026)
   Jede Seite bekommt im Kopf ein Motiv, das sich immer leise bewegt.
   Alles hinter dem Text (z-index 1), wenig Deckkraft, nur transform/opacity.
   ========================================================= */
.bw-flaeche { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero .wrap, .bf-hero .wrap, .hc-hero .wrap { position: relative; z-index: 2; }

/* Lichtpunkte steigen auf (Startseite, Mindset, Checks) */
.bw-funke { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(233,205,125,.95), rgba(212,181,101,0) 70%); opacity: 0;
  animation: bwSteigen var(--t) linear var(--d) infinite; }
@keyframes bwSteigen { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 70% { opacity: .55; }
  100% { opacity: 0; transform: translate(var(--w, 20px), -760px); } }

/* Ruhiger Puls unten im Kopf der Startseite: erst ein Ausschlag, dann sanfte Welle */
.bw-puls { position: absolute; z-index: 1; left: 0; right: 0; bottom: 18px; height: 60px; overflow: hidden; pointer-events: none; opacity: .55; }
.bw-puls svg { display: block; width: 200%; height: 60px; animation: bwLauf 14s linear infinite; }
.bw-puls path { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bwLauf { to { transform: translateX(-50%); } }

/* Die fünf Farbpunkte der Methode pulsieren nacheinander */
.sn-bereich h4::before { animation: bwPunkt 5s ease-in-out infinite; }
.sn-bereich:nth-child(2) h4::before { animation-delay: 1s; }
.sn-bereich:nth-child(3) h4::before { animation-delay: 2s; }
.sn-bereich:nth-child(4) h4::before { animation-delay: 3s; }
.sn-bereich:nth-child(5) h4::before { animation-delay: 4s; }
@keyframes bwPunkt { 0%, 70%, 100% { transform: scale(1); opacity: 1; } 80% { transform: scale(1.7); opacity: .65; } }

/* Mindset: Gedanken ziehen leise vorbei und lösen sich auf */
.bw-gedanke { position: absolute; left: var(--x); bottom: -40px; font-family: var(--serif); font-style: italic; white-space: nowrap;
  font-size: var(--g, 1.4rem); color: var(--creme); opacity: 0; animation: bwZiehen var(--t) linear var(--d) infinite; }
@keyframes bwZiehen { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .16; } 70% { opacity: .1; }
  100% { opacity: 0; transform: translateY(-620px); } }

/* Hormone Frauen und Hormon-Check: Sternenhimmel mit Sternschnuppe */
.bw-stern { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: #F4EDE0; box-shadow: 0 0 6px 1px rgba(244,237,224,.6); opacity: .25; animation: bwBlinken var(--t) ease-in-out var(--d) infinite; }
@keyframes bwBlinken { 0%, 100% { opacity: .2; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
.bw-schnuppe { position: absolute; top: 12%; left: 62%; width: 120px; height: 2px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(244,237,224,0), rgba(244,237,224,.95)); transform: rotate(-24deg);
  animation: bwSchnuppe 9s ease-out 3s infinite; }
@keyframes bwSchnuppe { 0% { opacity: 0; transform: rotate(-24deg) translateX(0); } 3% { opacity: 1; }
  12% { opacity: 0; transform: rotate(-24deg) translateX(-360px); } 100% { opacity: 0; transform: rotate(-24deg) translateX(-360px); } }

/* Hormone Männer: Blätter schweben durch den grünen Kopf */
.bw-blatt { position: absolute; top: -40px; left: var(--x); width: var(--s); height: calc(var(--s) * .55); opacity: 0;
  background: var(--c, #9CAF88); border-radius: 0 100% 0 100%; animation: bwFallen var(--t) linear var(--d) infinite; }
@keyframes bwFallen { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: .55; } 50% { transform: translate(60px, 380px) rotate(160deg); }
  90% { opacity: .4; } 100% { opacity: 0; transform: translate(-20px, 780px) rotate(330deg); } }

/* Hormone Männer: Atem-Kreis zum Mitatmen */
.bw-atem { position: relative; width: 170px; height: 170px; margin: 36px auto 0; }
.bw-atem-kreis { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gruen);
  background: radial-gradient(circle, rgba(156,175,136,.35), rgba(156,175,136,.08) 70%); animation: bwAtem 10s ease-in-out infinite; }
.bw-atem span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--anthrazit); }
.bw-atem .ein { animation: bwEinTxt 10s ease-in-out infinite; }
.bw-atem .aus { opacity: 0; animation: bwAusTxt 10s ease-in-out infinite; }
@keyframes bwAtem { 0%, 100% { transform: scale(.62); } 45%, 55% { transform: scale(1); } }
@keyframes bwEinTxt { 0%, 40% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes bwAusTxt { 0%, 40% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* KI und KI-Check: ruhiges Netz, kleine Funken laufen über die Linien */
.bw-netz { position: absolute; z-index: 1; right: 2%; top: 8%; width: min(560px, 50%); opacity: .55; pointer-events: none; }
.bw-netz svg { display: block; width: 100%; height: auto; overflow: visible; }
.bw-netz line { stroke: rgba(122,180,214,.45); stroke-width: 1; }
.bw-netz circle.k { fill: #7AB4D6; transform-box: fill-box; transform-origin: center; animation: bwKnoten 4s ease-in-out infinite; }
.bw-netz circle.k:nth-of-type(2n) { animation-delay: 1.3s; }
.bw-netz circle.k:nth-of-type(3n) { animation-delay: 2.6s; }
.bw-netz circle.f { fill: var(--gold); }
@keyframes bwKnoten { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
.bw-netz .bahn { animation: bwBahn var(--t) linear var(--d) infinite; }
@keyframes bwBahn { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }

/* Blockaden-Finder: drei verhakte Ringe lösen sich und finden wieder zusammen */
.bw-knoten { position: absolute; z-index: 1; right: 7%; top: 50%; width: 220px; height: 220px; margin-top: -110px; opacity: .6; pointer-events: none; }
.bw-knoten svg { width: 100%; height: 100%; overflow: visible; }
.bw-knoten circle { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.bw-knoten .r1 { animation: bwLoesen1 9s ease-in-out infinite alternate; }
.bw-knoten .r2 { animation: bwLoesen2 9s ease-in-out infinite alternate; }
.bw-knoten .r3 { animation: bwLoesen3 9s ease-in-out infinite alternate; }
@keyframes bwLoesen1 { to { transform: translate(-34px, -22px); } }
@keyframes bwLoesen2 { to { transform: translate(34px, -22px); } }
@keyframes bwLoesen3 { to { transform: translate(0, 40px); } }

/* Zeitfresser-Check: eine Uhr, deren Zeiger laufen */
.bw-uhr { position: absolute; z-index: 1; right: 7%; top: 50%; width: 200px; height: 200px; margin-top: -100px; opacity: .6; pointer-events: none; }
.bw-uhr svg { width: 100%; height: 100%; }
.bw-uhr .rand { fill: none; stroke: var(--gold); stroke-width: 2; }
.bw-uhr .strich { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.bw-uhr .zeiger { stroke: var(--creme); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; }
.bw-uhr .gross { animation: bwDreh 8s linear infinite; }
.bw-uhr .klein { animation: bwDreh 96s linear infinite; }
@keyframes bwDreh { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .bw-netz { width: 90%; right: -20%; top: 2%; opacity: .3; }
  .bw-knoten, .bw-uhr { width: 120px; height: 120px; margin-top: 0; top: 14px; right: 10px; opacity: .35; }
  .bw-gedanke { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-funke, .bw-gedanke, .bw-blatt, .bw-schnuppe { display: none; }
  .bw-puls svg, .bw-stern, .bw-atem-kreis, .bw-atem span, .bw-netz circle, .bw-netz .bahn,
  .bw-knoten circle, .bw-uhr .zeiger, .sn-bereich h4::before { animation: none; }
  .bw-atem .aus { opacity: 0; }
}