/* Hero — product page v2 ("Products - alle einzeln", handoff 2026-10-20): a stage of one viewport (min 620, max 840,
   padding-top 28), text column 600×500 left, laptop 600 right (right edge 107 from the canvas, vertically centred).
   With key features the stage is sticky below the pinned 60px header and the page scrolls through hero → features →
   summary (pace "Quick": 0.35 viewport per step; view.js adds .is-live on ≥ 1024px). Without .is-live everything is
   shown statically. */
.bd-stage__track { position: relative; }
/* The stage fills the space under the header and the section bar (--bd-secbar, pages with a section bar). */
.bd-stage__inner { position: relative; box-sizing: border-box; display: flex; align-items: center; min-height: 620px; height: calc(100vh - var(--bd-header-h) - var(--bd-secbar, 0px)); max-height: 840px; padding-top: 28px; }
.bd-stage__panels { position: relative; z-index: 1; width: 600px; height: 500px; }
.bd-stage__panel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 460ms var(--bd-ease), transform 560ms var(--bd-ease), visibility 0s linear 560ms; }
.bd-stage__panel.is-before { transform: translateY(-18px); }
.bd-stage__panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 460ms var(--bd-ease), transform 560ms var(--bd-ease), visibility 0s; }
.bd-stage__feature .bd-kicker { margin: 0; font-size: 12px; }
.bd-stage__title { margin: 16px 0 0; font: 700 44px/1.1 var(--wp--preset--font-family--montserrat); letter-spacing: -.02em; color: var(--bd-haze); text-wrap: balance; }
.bd-stage__body { margin: 20px 0 0; max-width: 540px; font: 600 18px/1.6 var(--wp--preset--font-family--montserrat); color: var(--bd-body); }
.bd-stage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }

.bd-hero__platforms { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bd-hero__title { font: 700 var(--wp--preset--font-size--display)/1.04 var(--wp--preset--font-family--montserrat); letter-spacing: -.025em; margin: 22px 0 0; color: var(--bd-haze); }
/* Announced plugin (2026-10-22): the "Upcoming" chip next to the title. */
.bd-hero__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 0; }
.bd-hero__title-row .bd-hero__title { margin: 0; }
.bd-stage__bar .bd-upcoming-chip { margin-left: 10px; }
.bd-hero__lead { font: 600 var(--wp--preset--font-size--lead)/1.5 var(--wp--preset--font-family--montserrat); color: rgba(255,255,255,.82); margin: 18px 0 0; max-width: 600px; }
.bd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 34px; }
.bd-hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; list-style: none; margin: 22px 0 0; padding: 0; font: 600 13px/1.5 var(--wp--preset--font-family--montserrat); color: rgba(255,255,255,.75); }
.bd-hero__proof li + li::before { content: "·"; opacity: .45; margin-right: 10px; }

/* Compact product bar (from step 1): name, platforms, CTA. */
.bd-stage__bar { position: absolute; left: var(--bd-gutter); top: 34px; z-index: 2; width: 600px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid rgba(247,248,249,.14); opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity 460ms var(--bd-ease), transform 560ms var(--bd-ease), visibility 0s linear 560ms; }
.bd-stage.is-on .bd-stage__bar { opacity: 1; visibility: visible; transform: none; transition: opacity 460ms var(--bd-ease), transform 560ms var(--bd-ease), visibility 0s; }
.bd-stage__bar-name { font: 700 26px/1.1 var(--wp--preset--font-family--montserrat); letter-spacing: -.015em; color: var(--bd-haze); }
.bd-stage__bar-chips { display: flex; align-items: center; gap: 6px; }
.bd-stage__bar-chip { border: 1px solid rgba(255,255,255,.28); border-radius: var(--bd-r-sm); padding: 3px 8px; font: 600 10.5px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.bd-stage__bar .bd-btn { margin-left: auto; }

/* Progress ("Products - alle einzeln"): bars with step labels under them, "Skip to overview & plans ↓" below. */
.bd-stage__nav { position: absolute; left: var(--bd-gutter); bottom: 18px; z-index: 1; width: min(780px, calc(100% - 2 * var(--bd-gutter))); display: flex; flex-direction: column; gap: 14px; }
.bd-stage__nav nav { flex: 1; display: flex; gap: 10px; }
.bd-stage__nav button { flex: 1 1 auto; white-space: nowrap; min-height: 44px; padding: 12px 0 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 9px; text-align: center; }
.bd-stage__nav button:hover { filter: brightness(1.35); }
.bd-stage__bar-line { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(247,248,249,.18); transition: background 240ms ease-out; }
.bd-stage__nav button.is-past .bd-stage__bar-line { background: rgba(247,248,249,.5); }
.bd-stage__nav button[aria-current="step"] .bd-stage__bar-line { background: linear-gradient(90deg, #a300be, #f53477 50%, #fa9a42); box-shadow: 0 0 14px rgba(250,154,66,.55); }
.bd-stage__label { font: 700 12.5px/1.3 var(--wp--preset--font-family--montserrat); letter-spacing: .01em; color: rgba(247,248,249,.82); transition: color 240ms ease-out; }
.bd-stage__nav button[aria-current="step"] .bd-stage__label { color: var(--bd-haze); }
.bd-stage__nav button:focus-visible { outline: 2px solid var(--bd-sun); outline-offset: 3px; border-radius: 4px; }
.bd-stage__skip { align-self: flex-start; flex: none; display: flex; align-items: center; gap: 6px; min-height: 36px; font: 700 13.5px/1.2 var(--wp--preset--font-family--montserrat); color: var(--bd-sun); }
.bd-stage__skip:hover { color: var(--bd-haze); }

/* Laptop: 600px, turns in from step 1; screens crossfade. */
.bd-laptop { position: absolute; top: 50%; right: calc(var(--bd-gutter) + 27px); width: 600px; margin-top: -200px; pointer-events: none; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); transform-origin: 100% 50%; transition: transform 900ms var(--bd-ease); }
.bd-stage.is-tilted .bd-laptop { transform: perspective(1700px) rotateY(-15deg) rotateX(2deg) scale(.95); }
.bd-laptop__tilt { will-change: transform; } /* gets the short pulse on each step (view.js) */
.bd-laptop__lid { background: linear-gradient(150deg, #3b3966, #1a1746 62%); border: 1px solid rgba(247,248,249,.22); border-bottom: none; border-radius: 24px 24px 4px 4px; padding: 14px 14px 16px; }
/* Screen 732 / 458 (the design's laptop); each layer holds a laptop-mode Screenshot Gallery (assets/css/gallery.css). */
.bd-laptop__screen { position: relative; aspect-ratio: 732 / 458; border-radius: 4px; overflow: hidden; background: #fff; }
.bd-laptop__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms var(--bd-ease) 120ms; }
.bd-laptop__layer.is-active { opacity: 1; }
.bd-laptop__layer > .bd-gallery { position: absolute; inset: 0; border-radius: 0; background: #fff; }
.bd-laptop__illu { position: absolute; inset: 0; }
.bd-laptop__chip { position: absolute; left: 14px; bottom: 14px; z-index: 1; max-width: calc(100% - 28px); box-sizing: border-box; background: rgba(5,1,52,.88); color: var(--bd-haze); border-radius: var(--bd-r-sm); padding: 6px 10px; font: 600 11.5px/1.3 var(--wp--preset--font-family--montserrat); }
.bd-laptop__base { width: calc(100% + 54px); margin-left: -27px; height: 14px; background: linear-gradient(180deg, #565382, #211e49); border: 1px solid rgba(247,248,249,.2); border-top: none; border-radius: 0 0 4px 4px; position: relative; box-shadow: inset 0 1px 0 rgba(247,248,249,.28); box-sizing: border-box; }
.bd-laptop__base span { position: absolute; left: calc(50% - 52px); top: 0; width: 104px; height: 5px; background: rgba(5,1,52,.5); border-radius: 0 0 4px 4px; }

/* Lightbox: only the current screen takes clicks (the others are inert); the "Screenshot to come" chip never catches
   the click. */
.bd-laptop__layer.is-active { pointer-events: auto; }
.bd-laptop__chip { pointer-events: none; }
/* Static list / carousel card: the step's screen under its text as a card-mode gallery (16:10; the hero screenshot
   with the chip where the feature has none); the live sequence shows it in the laptop. */
.bd-stage__shot { position: relative; margin-top: 24px; aspect-ratio: 16 / 10; }
.bd-stage__shot > .bd-gallery { position: absolute; inset: 0; }
.bd-stage__illu { border-radius: var(--bd-r-sm); }
.bd-stage.is-live .bd-stage__shot { display: none; }
/* Layout switch (view.js .is-switching, two frames): no crossfades. */
.bd-stage.is-switching :is(.bd-stage__panel, .bd-stage__bar, .bd-laptop, .bd-laptop__layer) { transition: none; }
/* The cards wrapper only matters for the carousel (< 1024px); "Compare plans" under it likewise. */
.bd-stage__cards { display: contents; }
.bd-stage .bd-stage__cta { display: none; }

/* Scroll sequence (.is-live; template 2026-10-20): the track is 100vh + 35vh per step (pace "Quick", view.js PACE);
   the stage sticks below the pinned header — top --bd-stage-top (60px, the compact header; the theme hides only the
   section bar while the stage is pinned, header.js .is-stage). */
.bd-stage.is-live .bd-stage__track { height: calc(100vh + var(--bd-steps) * 35vh); }
.bd-stage.is-live .bd-stage__sticky { position: sticky; top: var(--bd-stage-top, 60px); }
/* Live height: 100vh − 60 once the stage has reached its sticky top (.is-pinned from view.js, also while it scrolls
   away, so the section bar coming back doesn't move it; min 620, max 840); before that the space under header +
   section bar (--bd-header-offset from the theme's header.js, never less than the stage top), following the header's
   320 ms slide, so the progress nav is in view at load and sits at the bottom while pinned. */
.bd-stage.is-live .bd-stage__inner { height: calc(100vh - max(var(--bd-stage-top, 60px), var(--bd-header-offset, calc(var(--bd-header-h) + var(--bd-secbar, 0px))))); transition: height 320ms var(--bd-ease); }
.bd-stage.is-live.is-pinned .bd-stage__inner { height: calc(100vh - var(--bd-stage-top, 60px)); }
.admin-bar .bd-stage.is-live .bd-stage__sticky { top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--bd-stage-top, 60px)); }
.admin-bar .bd-stage.is-live .bd-stage__inner { height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - max(var(--bd-stage-top, 60px), var(--bd-header-offset, calc(var(--bd-header-h) + var(--bd-secbar, 0px))))); }
.admin-bar .bd-stage.is-live.is-pinned .bd-stage__inner { height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - var(--bd-stage-top, 60px)); }

/* Static (no JS or reduced motion, ≥ 1024px): hero, laptop, then key features and summary as a list; no bar, no
   progress. */
@media (min-width: 1024px) {
	.bd-stage.has-story:not(.is-live) .bd-stage__bar, .bd-stage.has-story:not(.is-live) .bd-stage__nav { display: none; }
	.bd-stage.has-story:not(.is-live) .bd-stage__inner { height: auto; max-height: none; display: block; padding-block: 66px 34px; }
	.bd-stage.has-story:not(.is-live) .bd-stage__panels { height: auto; display: flex; flex-direction: column; gap: 48px; }
	.bd-stage.has-story:not(.is-live) .bd-stage__panel { position: static; opacity: 1; visibility: visible; transform: none; }
	.bd-stage.has-story:not(.is-live) .bd-stage__panel.bd-hero__text { min-height: 500px; }
	.bd-stage.has-story:not(.is-live) .bd-stage__title { font-size: 32px; }
	.bd-stage.has-story:not(.is-live) .bd-laptop { top: 106px; margin-top: 0; }
}

@media (max-width: 1279px) {
	.bd-stage__panels, .bd-stage__bar { width: 520px; }
	.bd-laptop { width: 46%; right: var(--bd-gutter); }
	.bd-stage__title { font-size: 38px; }
	.bd-hero__proof { flex-direction: column; align-items: flex-start; gap: 4px; }
	.bd-hero__proof li + li::before { content: none; }
}

/* Below 1024px (responsive spec §4.2, §4.3): no pinned stage. Hero text, then the laptop (not cropped, column width up
   to 640px, centred), then the key features + summary as a swipeable carousel (cards 86% wide, max. 520, the next one
   peeks; scroll snap), the progress bars as its navigation (view.js), "Compare plans" (primary, full width). */
@media (max-width: 1023px) {
	.bd-stage__inner { height: auto; min-height: 0; max-height: none; padding-block: 48px 40px; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.bd-stage__panels { display: contents; }
	.bd-stage__panel { position: static; opacity: 1; visibility: visible; transform: none; }
	.bd-stage__panel.bd-hero__text { order: 1; min-height: 0; max-width: 640px; }
	.bd-stage .bd-laptop { order: 2; position: relative; top: auto; right: auto; width: min(640px, 100%); margin: 44px 0 0; align-self: center; }
	.bd-stage__bar { display: none; }

	/* Carousel: full-bleed scroller, cards start on the gutter. */
	.bd-stage .bd-stage__cards { order: 4; position: relative; display: flex; align-items: stretch; gap: 14px; margin: 52px calc(-1 * var(--bd-gutter)) 0; padding: 2px var(--bd-gutter) 26px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--bd-gutter); scrollbar-width: none; }
	.bd-stage__cards::-webkit-scrollbar { display: none; }
	.bd-stage__cards:focus-visible { outline-offset: -3px; border-radius: var(--bd-r-card); }
	.bd-stage .bd-stage__feature { flex: 0 0 min(86%, 520px); box-sizing: border-box; justify-content: flex-start; padding: 28px 26px; background: var(--bd-card-bg); border: var(--bd-card-border); border-radius: var(--bd-r-card); box-shadow: var(--bd-card-shadow); scroll-snap-align: start; }
	.bd-stage__feature .bd-kicker { font-size: 11.5px; }
	.bd-stage .bd-stage__title { margin-top: 12px; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; }
	/* Body pushes the screenshot (summary: illustration and buttons) to the card's bottom edge. */
	.bd-stage__body { margin: 10px 0 auto; padding-bottom: 22px; font-size: 14.5px; line-height: 1.5; }
	.bd-stage__feature > .bd-stage__shot { margin-top: 0; }
	.bd-stage__feature .bd-stage__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 20px; }
	.bd-stage__body + .bd-stage__actions { margin-top: 0; }
	.bd-stage__feature .bd-stage__actions .bd-btn { width: 100%; }
	/* "Compare plans" follows the carousel once, so the summary card keeps only "Try it yourself". */
	.bd-stage .bd-stage__compare { display: none; }
	.bd-stage__actions:not(:has(.bd-btn:not(.bd-stage__compare))) { display: none; }

	/* Progress bars = carousel navigation (tap targets 44px; labels stay as accessible names). No "Overview" step and
	   no skip link (the carousel costs no vertical scroll). */
	.bd-stage .bd-stage__nav { order: 5; position: static; width: auto; display: flex; flex-direction: column; gap: 0; }
	.bd-stage__nav nav { gap: 6px; }
	.bd-stage__nav button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0; justify-content: center; }
	.bd-stage__nav button[data-go="0"], .bd-stage__skip { display: none; }
	.bd-stage__nav .bd-stage__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	html:not(.js) .bd-stage__nav nav { display: none; }
	.bd-stage .bd-stage__cta { display: flex; margin-top: 12px; }
}
@media (max-width: 767px) {
	.bd-stage__inner { padding-block: 32px 36px; }
	/* Mobile order (§4.2): platform chips → H1 → lead → buttons (stacked) → laptop (full content width) → proof chips
	   (swipeable) → key feature carousel. */
	.bd-stage__panel.bd-hero__text { display: contents; }
	.bd-hero__text > * { order: 1; }
	.bd-hero__title { margin-top: 18px; }
	.bd-hero__actions { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 28px; }
	.bd-hero__actions .bd-btn { width: 100%; }
	.bd-hero__actions .bd-btn--link { min-height: 44px; }
	/* Full content width (up to 560, so the wider foot stays inside the 20px gutter); shadow halved. */
	.bd-stage .bd-laptop { width: min(100%, 560px); margin-top: 32px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.55)); }
	.bd-laptop__lid { padding: 8px 8px 10px; border-radius: 16px 16px 4px 4px; }
	.bd-laptop__base { width: calc(100% + 7%); margin-left: -3.5%; height: 10px; } /* the foot stays wider than the lid */
	.bd-laptop__base span { width: 64px; left: calc(50% - 32px); height: 4px; }
	.bd-laptop__chip { left: 8px; bottom: 8px; padding: 5px 8px; font-size: 10.5px; }
	.bd-laptop .bd-gallery__chip { top: 6px; right: 6px; width: 26px; height: 26px; }
	.bd-laptop .bd-gallery__chip svg { width: 13px; height: 13px; }
	/* Proof line as chips in one swipeable row with a fade on the right (spec §3 chip rows). */
	.bd-stage .bd-hero__proof { order: 3; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 26px calc(-1 * var(--bd-gutter)) 0; padding: 0 var(--bd-gutter); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
	.bd-hero__proof::-webkit-scrollbar { display: none; }
	.bd-hero__proof li { flex: none; white-space: nowrap; border: 1.5px solid rgba(247,248,249,.2); border-radius: var(--bd-r-pill); padding: 6px 14px; font-size: 12.5px; line-height: 1.2; color: rgba(255,255,255,.85); }
	.bd-hero__proof li:last-child { margin-right: 24px; } /* clear of the fade */
	.bd-stage .bd-stage__cards { margin-top: 44px; }
	.bd-stage .bd-stage__feature { flex-basis: 86%; padding: 22px 20px; }
}

/* Product bar (responsive spec §4.4): below 1024px fixed at the bottom, 60px, ink .94 + blur — product name left,
   the hero CTA right (small). view.js shows it while the hero CTA is out of view and hides it above the footer; it is
   inert while hidden. Below the header's stacking level, so the menu sheet and the lightbox cover it. */
.bd-pbar { display: none; }
@media (max-width: 1023px) {
	.bd-pbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(5,1,52,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(247,248,249,.12); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.7); transform: translateY(100%); visibility: hidden; transition: transform 280ms var(--bd-ease), visibility 0s linear 280ms; }
	.bd-pbar.is-shown { transform: none; visibility: visible; transition: transform 280ms var(--bd-ease), visibility 0s; }
	.bd-pbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
	.bd-pbar__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.2 var(--wp--preset--font-family--montserrat); letter-spacing: -.01em; color: var(--bd-haze); }
	.bd-pbar .bd-pbar__cta { flex: none; }
}