/* Der Build: gepinnte Glaswalze neben der Figur (aus Build Varianten 2b).
   Farben kommen aus den Theme-Variablen der Seite, hell und dunkel. */
.bs { --bs-glass: rgba(255,255,255,0.34); --bs-glass-b: rgba(255,255,255,0.72); --bs-gold: var(--accent-text); }
[data-theme='dark'] .bs { --bs-glass: rgba(52,44,34,0.38); --bs-glass-b: rgba(243,238,228,0.22); --bs-gold: var(--ws-gold); }
.bs-track { position: relative; height: 620vh; }
/* Die Bühne pinnt ab Oberkante; eigener Abstand oben würde nur Leerraum vor dem Titel erzeugen */
.ws-home-section.bs { padding-top: 0; }
.bs-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.bs-spot { position: absolute; left: -10%; bottom: -20%; width: 80%; height: 110%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(191,174,134,0.26), rgba(191,174,134,0.07) 55%, transparent 75%); }
[data-theme='dark'] .bs-spot { background: radial-gradient(closest-side, rgba(191,174,134,0.18), rgba(191,174,134,0.05) 55%, transparent 75%); }
.bs-ghost { position: absolute; right: 2%; bottom: 14%; z-index: 0; font-family: var(--font-display); font-size: clamp(160px, 26vw, 420px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(191,174,134,0.38); pointer-events: none; font-variant-numeric: tabular-nums; }
.bs-copy { position: absolute; left: clamp(24px,4vw,56px); top: clamp(72px,10vh,104px); width: min(440px, 40vw); z-index: 3; }
.bs-h2 { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px,3.4vw,50px); line-height: 1.04; letter-spacing: -0.01em; color: var(--fg); }
.bs-h2 em { font-style: italic; color: var(--bs-gold); }
.bs-intro { margin: 16px 0 0; max-width: 40ch; font-size: clamp(13px,1.15vw,15px); line-height: 1.75; color: var(--fg-mute); text-wrap: pretty; }
/* Figur an Breite und Höhe gebunden (1000/604 = 1.656), bleibt beim Scroll gleich groß */
.bs-fig { position: absolute; left: 0; bottom: 0; z-index: 1; width: min(60vw, 1000px, calc((100vh - 230px) * 1.656)); pointer-events: none; }
.bs-fig img { display: block; width: 100%; height: auto; }
.bs-lane { position: absolute; left: 36%; right: 6%; top: 24%; bottom: 0; z-index: 4; perspective: 2600px; }
.bs-card { position: absolute; left: 50%; top: 50%; width: min(380px, 88%); margin: 0; padding: 22px 24px 22px 22px; border-radius: 22px;
  display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 16px; align-items: start; opacity: 0;
  background: var(--bs-glass); border: 1px solid var(--bs-glass-b); border-bottom-color: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.55), inset 0 -1px 1px rgba(0,0,0,0.06), 0 30px 60px -30px rgba(26,23,20,0.28);
  will-change: transform, opacity; backface-visibility: hidden; }
[data-theme='dark'] .bs-card { box-shadow: inset 0 1px 1px rgba(243,238,228,0.22), inset 0 -1px 1px rgba(0,0,0,0.3), 0 30px 70px -28px rgba(0,0,0,0.6); }
.bs-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 42%); opacity: 0.55; }
[data-theme='dark'] .bs-card::after { background: linear-gradient(135deg, rgba(191,174,134,0.16), transparent 45%); opacity: 1; }
.bs-ico { width: 50px; height: 50px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--bs-gold);
  background: rgba(191,174,134,0.14); box-shadow: inset 0 0 0 1px rgba(191,174,134,0.5), inset 0 1px 1px rgba(255,255,255,0.5); }
[data-theme='dark'] .bs-ico { box-shadow: inset 0 0 0 1px rgba(191,174,134,0.5), inset 0 1px 1px rgba(243,238,228,0.18); }
.bs-nr { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--bs-gold); }
.bs-t { display: block; margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(16px,1.35vw,19px); line-height: 1.25; color: var(--fg); }
.bs-d { display: block; margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--fg-mute); }
.bs-hud { position: absolute; right: calc(clamp(16px,3vw,48px) + 76px); bottom: clamp(18px,4vh,40px); z-index: 5; display: flex; align-items: center; gap: 14px; }
.bs-count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--bs-gold); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; }
.bs-rail { width: clamp(120px, 16vw, 240px); height: 1px; background: var(--line); }
.bs-rail i { display: block; height: 1px; width: 0%; background: var(--ws-gold); }
.bs-done { position: absolute; left: 50%; bottom: clamp(18px,4vh,40px); z-index: 5; transform: translate(-50%, 10px); opacity: 0;
  transition: opacity 600ms, transform 600ms cubic-bezier(.16,1,.3,1); display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bs-gold); }
.bs-done.is-on { opacity: 1; transform: translate(-50%, 0); }
.bs-done::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--ws-gold); box-shadow: 0 0 0 5px rgba(191,174,134,0.2); }
@media (max-width: 1100px) {
  .bs-fig { width: min(74vw, calc((100vh - 250px) * 1.656)); }
  .bs-copy { width: min(420px, 60vw); }
  .bs-lane { left: 40%; top: 30%; }
}
@media (max-width: 760px) {
  .bs-copy { left: 20px; right: 20px; width: auto; top: 64px; }
  .bs-h2 { font-size: 30px; }
  .bs-intro { font-size: 13px; }
  .bs-fig { width: 128vw; left: -6vw; }
  /* Bahn zwischen Text und Kopf, damit das Gesicht frei bleibt */
  /* Bahn beginnt erst unter dem Einleitungstext und reicht bis knapp über den Kopf */
  .bs-lane { left: 16px; right: 16px; top: 39%; bottom: calc(128vw * 0.604 - 72px); }
  /* Längerer Scrollweg, damit jede Kachel länger stehen bleibt */
  .bs-track { height: 900vh; }
  .bs-card { width: min(340px, 92%); padding: 16px 18px 16px 16px; grid-template-columns: 40px minmax(0,1fr); gap: 12px; border-radius: 18px; }
  .bs-ico { width: 40px; height: 40px; }
  .bs-hud { left: 20px; right: 96px; justify-content: space-between; }
  .bs-ghost { right: 4%; top: 36%; bottom: auto; font-size: 44vw; }
}
@media (max-height: 640px) and (min-width: 761px) { .bs-intro { display: none; } }

/* Zeiger-Reaktion: warmes Licht folgt der Maus auf der Kachel, goldene Kante hebt sich */
.bs-card { --bs-gl: 0; }
.bs-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: var(--bs-gl);
  background: radial-gradient(260px 180px at var(--bs-mx, 50%) var(--bs-my, 30%), rgba(255,248,232,0.55), rgba(255,248,232,0) 70%);
  box-shadow: inset 0 0 0 1px rgba(191,174,134,0.7); mix-blend-mode: soft-light; }
[data-theme='dark'] .bs-card::before { background: radial-gradient(260px 180px at var(--bs-mx, 50%) var(--bs-my, 30%), rgba(191,174,134,0.3), rgba(191,174,134,0) 70%); mix-blend-mode: screen; }
.bs-card .bs-ico { transition: transform 600ms cubic-bezier(.16,1,.3,1), box-shadow 600ms; transform: translateZ(0) scale(calc(1 + var(--bs-gl) * 0.06)); }
@media (hover: none), (prefers-reduced-motion: reduce) { .bs-card::before { display: none; } }