/* =========================================================
   Bewegung je Seite (Vorschau 03.11.2026, nur lokal)
   Ruhig und zum Thema. Nur transform und opacity werden bewegt.
   Bei „Bewegung reduzieren“ steht alles still im Endzustand.
   ========================================================= */
@keyframes bwAuf { to { opacity: 1; transform: none; } }
@keyframes bwEin { to { opacity: 1; } }

/* ---------- Startseite ---------- */
/* Überschrift baut sich Wort für Wort auf */
.bw-w { display: inline-block; opacity: 0; transform: translateY(.35em);
  animation: bwAuf .8s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(.3s + var(--i, 0) * .12s); }
/* Goldstrich malt sich ein, danach erscheint der Satz */
.bw-pinsel svg { transform-origin: 0 50%; transform: scaleX(0); animation: bwMalen 1.1s cubic-bezier(.65,0,.35,1) 1.2s forwards; }
.bw-pinsel .line { opacity: 0; animation: bwEin .7s ease 2.1s forwards; }
@keyframes bwMalen { to { transform: none; } }
/* Warmes Licht atmet hinter dem Foto */
.bw-licht { position: absolute; z-index: 1; right: 0; top: 4%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(212,181,101,.46), rgba(212,181,101,0)); animation: bwAtmen 7s ease-in-out infinite; }
@keyframes bwAtmen { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }

/* ---------- Mindset: Gedankenkarussell kommt zur Ruhe ---------- */
.bw-karussell { position: relative; width: 320px; height: 320px; margin: 36px auto 0; }
.bw-ring { position: absolute; inset: 0; }
.bw-pos { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateY(-128px) rotate(calc(-1 * var(--a))); }
.bw-wort { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; padding: 5px 11px; border-radius: 999px;
  font-family: var(--serif); font-size: .9rem; color: var(--anthrazit); background: var(--weiss); border: 1px solid var(--linie); opacity: .95; }
.bw-gegen { position: absolute; left: 0; top: 0; }
.bw-karussell::before { content: ""; position: absolute; inset: 30px; border-radius: 50%; border: 1px dashed var(--gold); opacity: .6; }
.bw-ruhe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .02em; font-size: 2.1rem; color: var(--gold-warm); }
.bw-karussell.in .bw-ring { animation: bwDrehen 12s cubic-bezier(.12,.6,.22,1) forwards; }
.bw-karussell.in .bw-gegen { animation: bwGegen 12s cubic-bezier(.12,.6,.22,1) forwards; }
.bw-karussell.in .bw-wort { animation: bwLeiser 12s ease forwards; }
.bw-karussell.in .bw-ruhe { animation: bwRuhe 1.6s ease 9.5s forwards; }
@keyframes bwDrehen { from { transform: rotate(0); } to { transform: rotate(720deg); } }
@keyframes bwGegen { from { transform: rotate(0); } to { transform: rotate(-720deg); } }
@keyframes bwLeiser { 0% { opacity: .95; } 100% { opacity: .38; } }
@keyframes bwRuhe { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------- Hormone Frauen: Sterne funkeln, der Mond wandert ---------- */
.hc .hc-o-sterne circle { transform-box: fill-box; transform-origin: center; animation: bwFunkeln 3.4s ease-in-out infinite; }
.hc .hc-o-sterne circle:nth-child(2n) { animation-delay: 1.1s; }
.hc .hc-o-sterne circle:nth-child(3n) { animation-delay: 2.2s; }
@keyframes bwFunkeln { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(2.2); } }
.hc .hc-o-mond { transform-box: fill-box; transform-origin: center; animation: bwMond 16s ease-in-out infinite alternate; }
@keyframes bwMond { from { transform: translate(0, 0); } to { transform: translate(-104px, 64px); } }

/* ---------- Hormone Männer: Morgenlicht steigt auf ---------- */
.bw-morgen { position: absolute; z-index: 1; left: -10%; right: -10%; bottom: -12%; height: 85%; pointer-events: none;
  background: radial-gradient(60% 70% at 38% 100%, rgba(201,172,119,.55), rgba(201,172,119,.18) 50%, rgba(201,172,119,0) 78%);
  opacity: 0; transform: translateY(30%);
  animation: bwSonne 6s cubic-bezier(.2,.7,.3,1) .4s forwards, bwGlimmen 8s ease-in-out 6.5s infinite alternate; }
@keyframes bwSonne { to { opacity: 1; transform: none; } }
@keyframes bwGlimmen { from { opacity: 1; } to { opacity: .72; } }
.mn .hero .wrap { position: relative; z-index: 2; }

/* ---------- KI ohne Angst: Zettelstapel wird kleiner ---------- */
.bw-stapel { position: relative; width: 190px; height: 210px; margin: 26px auto 0; }
.bw-zettel, .bw-fertig { position: absolute; left: 20px; top: 20px; width: 150px; height: 175px; border-radius: 10px; }
.bw-zettel { background: var(--weiss) repeating-linear-gradient(180deg, transparent 0 22px, rgba(194,154,61,.35) 22px 23px) 0 34px / 100% calc(100% - 50px) no-repeat;
  border: 1px solid var(--linie); box-shadow: var(--shadow-soft);
  transform: translate(calc(var(--i) * -3px), calc(var(--i) * 4px)) rotate(calc((var(--i) - 2.5) * 2.4deg)); }
.bw-fertig { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: var(--weiss); border: 1px solid var(--gold); box-shadow: var(--shadow); opacity: 0; transform: scale(.92);
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--anthrazit); }
.bw-fertig b { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--gold); color: var(--anthrazit); font-size: 1.3rem; }
.bw-stapel.in .bw-zettel { animation: bwWeg .9s cubic-bezier(.5,0,.75,0) forwards; animation-delay: calc(.6s + (5 - var(--i)) * .42s); }
.bw-stapel.in .bw-fertig { animation: bwAuf .7s cubic-bezier(.2,.75,.25,1) 3.4s forwards; }
@keyframes bwWeg { to { opacity: 0; transform: translate(170px, -60px) rotate(24deg); } }

@media (max-width: 640px) {
  .bw-licht { width: 420px; height: 420px; right: -20%; top: 4%; }
  .bw-karussell { width: 260px; height: 260px; }
  .bw-karussell::before { inset: 34px; }
  .bw-pos { transform: rotate(var(--a)) translateY(-92px) rotate(calc(-1 * var(--a))); }
  .bw-wort { font-size: .7rem; line-height: 1.2; padding: 4px 8px; white-space: normal; width: max-content; max-width: 92px; text-align: center; }
  .bw-ruhe { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bw-w, .bw-pinsel svg, .bw-pinsel .line { opacity: 1; transform: none; animation: none; }
  .bw-licht, .bw-morgen { animation: none; opacity: .8; transform: none; }
  .bw-karussell.in .bw-ring, .bw-karussell.in .bw-gegen, .bw-karussell.in .bw-wort { animation: none; }
  .bw-ruhe { opacity: 1; transform: translate(-50%, -50%); animation: none !important; }
  .hc .hc-o-sterne circle, .hc .hc-o-mond { animation: none; }
  .bw-zettel { animation: none !important; opacity: 0; }
  .bw-fertig { opacity: 1; transform: none; animation: none !important; }
}