/* =========================================================
   Herzschlag im Kopf (KI und Mindset, Vorschau 03.11.2026)
   Eine goldene Herzlinie schlägt im Tempo von Alltagsmomenten.
   Gezeichnet von js/herzschlag.js, hier nur Platz und Schrift.
   ========================================================= */
.bw-herz { pointer-events: none; }
.bw-herz-momente { display: none; }
.bw-herz-lage { margin: 0; font-family: var(--serif); color: #F9F8F6; line-height: 1.35; }
.bw-herz-bpm { margin: 6px 0 0; font-family: var(--label); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.bw-herz canvas { display: block; width: 100%; }
/* Text, Zahl und Linie wechseln gemeinsam */
.bw-herz-lage, .bw-herz-bpm, .bw-herz canvas { transition: opacity .45s ease; }
.bw-herz.aus .bw-herz-lage, .bw-herz.aus .bw-herz-bpm, .bw-herz.aus canvas { opacity: 0; }

/* KI: rechte Spalte, über den zwei Auswahl-Kästen */
.bw-herz--spalte { position: relative; padding: 0 4px 4px; }
.bw-herz--spalte .bw-herz-lage { font-size: 1.3rem; min-height: 2.7em; }
.bw-herz--spalte canvas { height: 96px; margin-top: 10px; }

/* Mindset: wie eine Einblendung unten im Foto */
.bw-herz--foto { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 56px 22px 0;
  background: linear-gradient(to top, rgba(20,18,15,.92) 0%, rgba(20,18,15,.7) 55%, rgba(20,18,15,0) 100%); }
.bw-herz--foto .bw-herz-lage { font-size: 1.15rem; min-height: 1.4em; }
.bw-herz--foto canvas { height: 70px; margin-top: 4px; }

@media (max-width: 920px) {
  .bw-herz--spalte .bw-herz-lage { font-size: 1.1rem; min-height: 2.8em; }
  .bw-herz--spalte canvas { height: 80px; }
  .bw-herz--foto { padding: 44px 16px 0; }
  .bw-herz--foto .bw-herz-lage { font-size: 1rem; min-height: 2.8em; }
  .bw-herz--foto canvas { height: 60px; }
}