/**
 * studiobro - Landingpage-Layout der Produktseite (Single Product Page 1.0)
 * Ablage: wp-content/themes/studiobro/landingpage.css
 * Eingebunden aus woocommerce/single-product/landingpage.php (mit filemtime-Version).
 *
 * Vorlage: Tissi-Solutions/studiobro/index.html - Masse, Animationen und Schriften
 * von dort. Abweichungen nach Kundenentscheid (05.10.2026):
 *   - Karten im Kartenstil von Staging (Rahmen 1px rgba(255,255,255,.07),
 *     Radius 20px, Schatten 10px 10px 15px rgba(0,0,0,.5)), auch "Die Macher".
 *     Einzige Ausnahme: der Leuchtrand um das Produktvideo im Hero.
 *   - Seitenfarbe und Akzentfarbe kommen pro Produkt aus ACF und stehen als
 *     Variablen am Wurzel-Element .sblp (--sblp-bg, --sblp-bg-rgb,
 *     --sblp-akzent-rgb, --sblp-faq-bg).
 *   - Audio-Demos und Testimonials benutzen Markup und Gestaltung des Themes.
 *
 * Die versteckten Ausgangszustaende der Animationen haengen an .sblp-js, das
 * erst das Skript setzt - ohne Skript (oder bei reduzierter Bewegung) ist alles
 * sofort sichtbar.
 *
 * Spezifitaet: style.css arbeitet mit Ketten wie
 * ".woocommerce-page.single-product .product-extra h2". Wo Theme-Regeln
 * dazwischenfunken (Abstaende von .product-extra, Schriften), steht hier der
 * volle Praefix plus .sblp.
 */

/* =========================================================
   SCHRIFTEN (selbst gehostet, nur Latin - deckt Deutsch und Englisch)
========================================================= */

@font-face {
	font-family: "Sora";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/Sora-Variable.woff2") format("woff2");
}

@font-face {
	font-family: "Doto";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/Doto-Variable.woff2") format("woff2");
}


/* =========================================================
   GRUNDLAGEN
========================================================= */

/* Das Theme setzt den Inhalt mit .first-container 171px unter den Kopf und
   rueckt ihn seitlich ein. Die Landingpage laeuft randlos und beginnt ganz
   oben - der Hero schiebt seinen Inhalt selbst unter den Kopf. */
.first-container:has(.sblp) {
	margin-top: 0;
	padding-left: 0;
	padding-right: 0;
	max-width: none;
}

.sblp {
	--sblp-section-fade: 180px;
	--sblp-kopf: 171px;   /* Abstand unter dem fixen Theme-Kopf, wie .first-container */

	/* Kartenstil von Staging */
	--sblp-karte-rand: 1px solid rgba(255, 255, 255, .07);
	--sblp-karte-radius: 20px;
	--sblp-karte-schatten: 10px 10px 15px 0 rgba(0, 0, 0, .5);
	--sblp-karte-bg: #202530;   /* Flaeche der Audio-Karten auf Staging */

	position: relative;
	width: 100%;
	overflow-x: clip;
	/* eigene Stapelebene: die Hintergruende der Abschnitte (::before,
	   z-index -1) liegen ueber dieser Flaeche und unter allen Inhalten */
	isolation: isolate;
	background: var(--sblp-bg);
	color: #fff;
	font-family: "Sora", sans-serif;
}

/* iOS: Schrift nicht selbst nachskalieren (Text-Autosizing) */
.sblp {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.sblp :where(h1, h2, h3, h4, p, span, small, a, button, li, div, strong, em, input) {
	font-family: inherit;
}

.sblp--kopfabstand {
	padding-top: calc(var(--sblp-kopf) + var(--sb-cd-push, 0px));
}

.sblp a {
	color: inherit;
}

/* :where() haelt die Spezifitaet niedrig - sonst schluege diese Regel die
   eigenen max-width-Werte (z. B. Titelbild 620px auf dem Handy). */
.sblp :where(img, video) {
	max-width: 100%;
}

.sblp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sblp-karte {
	border: var(--sblp-karte-rand);
	border-radius: var(--sblp-karte-radius);
	box-shadow: var(--sblp-karte-schatten);
	overflow: hidden;
}


/* =========================================================
   ABSCHNITTE UND HINTERGRUENDE
========================================================= */

.sblp-section {
	position: relative;
	width: 100%;
}

/* Hintergrundbilder: Ueberblenden von Bild zu Bild (Fassung 13,
   Kundenwunsch 05./06.10.2026 - "moeglichst kein Uebergang erkennbar").
   Frueher blendete jedes Hintergrundbild oben und unten in die Seitenfarbe
   #202530 - die Bildraender sind aber viel dunkler (#05-#1c, gemessen),
   dazwischen stand ein heller Streifen. Jetzt:
   - Das Bild liegt in ::before hinter allen Inhalten, reicht um
     --sblp-section-fade nach OBEN in den vorigen Abschnitt und blendet dort
     von durchsichtig zu voll ein.
   - Folgt ein Abschnitt MIT Bild, reicht es ebenso weit nach UNTEN, voll
     deckend - das naechste blendet darueber ein. Bild geht direkt in Bild
     ueber, die Seitenfarbe kommt nicht dazwischen.
   - Folgt ein Abschnitt OHNE Bild (Testimonials, FAQ ...), blendet es unten
     in die Seitenfarbe aus - die Abschnitte ohne Bild stehen einfarbig in
     der Seitenfarbe (Kundenentscheid: kein dunkler Verlauf).
   - Direkt nach dem Hero reicht das Bild so weit hoch, wie dessen
     Hintergrundvideo ausblendet (1,6 x Fade), und zwar voll deckend - sonst
     schimmerte dazwischen die Seitenfarbe durch und am Bildanfang stand ein
     Strich (Fassung 12). */
.sblp-section.sblp-hat-hg {
	--sblp-x-oben: var(--sblp-section-fade);
	--sblp-m-oben: calc(var(--sblp-section-fade) * 1.6);
	--sblp-x-unten: 0px;
	--sblp-m-unten: var(--sblp-section-fade);
}

.sblp-section.sblp-hat-hg::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--sblp-x-oben));
	bottom: calc(-1 * var(--sblp-x-unten));
	z-index: -1;
	pointer-events: none;
	background: var(--sblp-hg) center center / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sblp-m-oben), #000 calc(100% - var(--sblp-m-unten)), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--sblp-m-oben), #000 calc(100% - var(--sblp-m-unten)), transparent 100%);
}

/* es folgt ein Abschnitt mit Bild: unten voll deckend durchziehen */
.sblp-section.sblp-hat-hg:has(+ .sblp-hat-hg) {
	--sblp-x-unten: var(--sblp-section-fade);
	--sblp-m-unten: 0px;
}

/* direkt nach einem Hero: voll deckend unter dessen ausblendendes Video */
.sblp-hero + .sblp-section.sblp-hat-hg {
	--sblp-x-oben: calc(var(--sblp-section-fade) * 1.6);
	--sblp-m-oben: 0px;
}


/* =========================================================
   GEMEINSAME TITEL
========================================================= */

.sblp .sblp-titel {
	margin: 0 auto 55px;
	padding: 0;
	color: #fff;
	font-family: "Doto", monospace;
	font-size: clamp(28px, 2.5vw, 44px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: .08em;
	text-align: center;
	text-transform: none;
	text-shadow:
		0 0 8px rgba(255, 255, 255, .12),
		0 2px 8px rgba(0, 0, 0, .35);
}

.sblp.sblp-js .sblp-titel {
	opacity: 0;
	transform: translateY(35px);
	filter: blur(5px);
	letter-spacing: .18em;
	transition:
		opacity 700ms ease,
		transform 800ms cubic-bezier(.22, 1, .36, 1),
		filter 700ms ease,
		letter-spacing 900ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-titel.is-visible {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	letter-spacing: .08em;
}


/* =========================================================
   HERO
========================================================= */

.sblp-hero {
	position: relative;
	width: 100%;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 30px 30px 120px;
	overflow: hidden;
}

/* Hintergrundbild des Hero (Platzhalter fuers Hintergrundvideo) in ::before
   mit demselben weichen Auslauf wie das Video. Als Flaeche des Abschnitts
   endete es hart an der Unterkante - mit Platzhalter war dort ein Strich zu
   sehen (Fassung 25, Handy und Desktop). Das Video liegt darueber. */
.sblp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--sblp-hg, none) center top / cover no-repeat;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
}

.sblp-hero:not(.sblp-hero--oben)::before {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--sblp-section-fade) * 1.6), #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--sblp-section-fade) * 1.6), #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
}

/* Ganz oben: unter dem fixen Kopf (und der Kaufleiste) durch. Die Kaufleiste
   schiebt den body per padding-top nach unten (--sb-cd-push) - das nimmt der
   Hero mit negativem Rand zurueck und legt es in den Innenabstand. */
.sblp-hero--oben {
	margin-top: calc(-1 * var(--sb-cd-push, 0px));
	padding-top: calc(var(--sblp-kopf) + var(--sb-cd-push, 0px) + 30px);
}

.sblp-hero-bgvideo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: none !important;
	object-fit: cover;
	object-position: center top;
	z-index: 0;
}

/* Hintergrundvideo blendet unten aus (statt Farbverlauf darueber) -
   darunter liegt schon der Hintergrund des naechsten Abschnitts. Ein Hero
   weiter unten blendet auch oben ein. */
.sblp-hero-bgvideo {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
}

.sblp-hero:not(.sblp-hero--oben) .sblp-hero-bgvideo {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--sblp-section-fade) * 1.6), #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--sblp-section-fade) * 1.6), #000 calc(100% - var(--sblp-section-fade) * 1.6), transparent 100%);
}

.sblp-hero-inhalt {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
}

/* .sblp davor: WooCommerce setzt ".woocommerce-page img { max-width: 100% }" */
.sblp .sblp-hero-titelbild {
	display: block;
	width: 74%;
	max-width: 1180px;
	height: auto;
}

/* Ausnahme vom Kartenstil: Leuchtrand in der Akzentfarbe (Vorlage) */
.sblp-hero-video {
	width: 100%;
	max-width: 800px;
	margin-top: 40px;
	line-height: 0;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .38);
	box-shadow:
		0 0 16px 3px rgba(var(--sblp-akzent-rgb), .62),
		0 0 40px 8px rgba(var(--sblp-akzent-rgb), .34),
		0 0 80px 14px rgba(var(--sblp-akzent-rgb), .18);
}

.sblp-hero-produktvideo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}


/* =========================================================
   FEATURES
========================================================= */

.sblp-features {
	padding: 80px 40px 120px;
}

.sblp-features-grid {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(var(--sblp-spalten, 4), minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}

.sblp-feature {
	position: relative;
	width: 100%;
}

.sblp.sblp-js .sblp-feature {
	opacity: 0;
	transform: translateY(70px);
	transition:
		opacity 700ms ease,
		transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-feature.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp-feature-media {
	display: block;
	width: 100%;
	line-height: 0;
}

.sblp-feature-video {
	display: block;
	width: 100%;
	height: auto;
}

.sblp-feature-text {
	position: absolute;
	top: 67%;
	left: 0;
	width: 100%;
	padding: 0 26px;
	z-index: 2;
	color: #fff;
	font-size: clamp(13px, 1.05vw, 18px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -.01em;
	text-align: left;
	text-shadow:
		0 1px 3px rgba(0, 0, 0, .70),
		0 2px 10px rgba(0, 0, 0, .55);
}


/* =========================================================
   VIDEOS (YouTube)
========================================================= */

.sblp-action {
	padding: 100px 40px 140px;
}

.sblp-action .sblp-titel {
	margin-bottom: 42px;
}

.sblp-action-liste {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.sblp-action-liste--eins {
	max-width: 800px;
	grid-template-columns: 1fr;
}

.sblp-yt {
	--sblp-yt-rand: 0px;   /* 05.10.: Rand wieder wie die anderen Karten (1px) */
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	/* Wie die anderen Karten eine eigene Flaeche: Auf dem dunklen Vorschaubild
	   vor dunklem Hintergrund waeren Rahmen und Schatten sonst unsichtbar. */
	background: var(--sblp-karte-bg);
}

.sblp.sblp-js .sblp-yt {
	opacity: 0;
	transform: translateY(70px);
	transition:
		opacity 750ms ease,
		transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-yt.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp .sblp-yt-knopf {
	position: absolute;
	inset: var(--sblp-yt-rand);
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	z-index: 2;
	overflow: hidden;
	border-radius: calc(var(--sblp-karte-radius) - var(--sblp-yt-rand));
}

.sblp-yt-bild {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition:
		transform 350ms ease,
		filter 350ms ease;
}

.sblp-yt-knopf:hover .sblp-yt-bild,
.sblp-yt-knopf:focus-visible .sblp-yt-bild {
	transform: scale(1.015);
	filter: brightness(1.06);
}

/* Ohne Vorschaubild: Flaeche mit Abspielzeichen statt Bild von YouTube */
.sblp-yt-platzhalter {
	display: flex;
	align-items: flex-end;
	width: 100%;
	height: 100%;
	padding: 22px 26px;
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .10) 0 34px, transparent 35px),
		linear-gradient(135deg, #0b0f18 0%, #1a2030 100%);
	color: rgba(255, 255, 255, .88);
	font-size: 16px;
	text-align: left;
}

.sblp-yt-platzhalter::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-35%, -50%);
}

.sblp-yt iframe {
	position: absolute;
	inset: var(--sblp-yt-rand);
	width: calc(100% - 2 * var(--sblp-yt-rand));
	height: calc(100% - 2 * var(--sblp-yt-rand));
	border: 0;
	border-radius: calc(var(--sblp-karte-radius) - var(--sblp-yt-rand));
	display: block;
}

.sblp-yt-hinweis {
	max-width: 1200px;
	margin: 22px auto 0;
	color: rgba(255, 255, 255, .55);
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.sblp.sblp-js .sblp-yt-hinweis {
	opacity: 0;
	transition: opacity 700ms ease 500ms;
}

.sblp.sblp-js .sblp-yt-hinweis.is-visible {
	opacity: 1;
}


/* =========================================================
   WORKFLOW
========================================================= */

.sblp-workflow {
	padding: 100px 40px 145px;
	/* kein overflow:hidden - der Hintergrund (::before) reicht zum
	   Ueberblenden ueber den Abschnitt hinaus; seitlich klemmt .sblp */
}

.sblp-workflow-inhalt {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.sblp .sblp-workflow .sblp-titel {
	margin-bottom: 18px;
}

.sblp-workflow-unterzeile {
	width: 100%;
	max-width: 760px;
	margin: 0 auto 76px;
	color: rgba(255, 255, 255, .74);
	font-size: clamp(16px, 1.25vw, 21px);
	line-height: 1.5;
	text-align: center;
}

.sblp.sblp-js .sblp-workflow-unterzeile {
	opacity: 0;
	transform: translateY(25px);
	transition:
		opacity 700ms ease 100ms,
		transform 750ms cubic-bezier(.22, 1, .36, 1) 100ms;
}

.sblp.sblp-js .sblp-workflow-unterzeile.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp-workflow-zeilen {
	display: flex;
	flex-direction: column;
	gap: 92px;
}

.sblp-workflow-zeile {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 76px;
	align-items: center;
}

.sblp.sblp-js .sblp-workflow-zeile {
	opacity: 0;
	transform: translateY(55px);
	transition:
		opacity 800ms ease,
		transform 850ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-workflow-zeile.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp-workflow-media {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sblp-workflow-rahmen {
	width: 100%;
	max-width: 432px;
	margin: 0 auto;
	line-height: 0;
	background: #080b11;
}

.sblp-workflow-video {
	display: block;
	width: 100%;
	height: auto;
}

.sblp-workflow-text {
	width: 100%;
	max-width: 470px;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(16px, 1.13vw, 19px);
	line-height: 1.72;
	justify-self: start;
}

/* Jede zweite Zeile: Text links, Video rechts (wie Zeile 2 der Vorlage) */
.sblp-workflow-zeile:nth-child(even) .sblp-workflow-text {
	order: -1;
	justify-self: end;
}


/* =========================================================
   AUDIO-DEMOS (Theme-Player, Kartenstil von Staging)
========================================================= */

.sblp-audio {
	padding: 100px 40px 140px;
}

.woocommerce-page.single-product .sblp .product-extra.sblp-audio-liste {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}


/* =========================================================
   DIE MACHER
========================================================= */

.sblp-macher {
	padding: 110px 40px 150px;
}

.sblp-macher-rahmen {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 34px 42px 42px;
	background: var(--sblp-karte-bg);
}

.sblp.sblp-js .sblp-macher-rahmen {
	opacity: 0;
	transform: translateY(45px);
	transition:
		opacity 750ms ease 120ms,
		transform 750ms cubic-bezier(.22, 1, .36, 1) 120ms;
}

.sblp-macher-bild {
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	line-height: 0;
}

.sblp.sblp-js .sblp-macher-bild {
	opacity: 0;
	transform: translateY(45px);
	transition:
		opacity 750ms ease 180ms,
		transform 750ms cubic-bezier(.22, 1, .36, 1) 180ms;
}

.sblp-macher-bild img {
	display: block;
	width: 100%;
	height: auto;
}

.sblp-macher-texte {
	width: 100%;
	max-width: 980px;
	margin: 36px auto 0;
	display: grid;
	grid-template-columns: repeat(var(--sblp-spalten, 2), minmax(0, 1fr));
	gap: 52px;
	align-items: start;
}

.sblp-macher-text {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(13px, 1vw, 16px);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: -.01em;
	text-align: left;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.sblp.sblp-js .sblp-macher-text {
	opacity: 0;
	transform: translateY(35px);
	transition:
		opacity 750ms ease,
		transform 750ms cubic-bezier(.22, 1, .36, 1);
}

.sblp .sblp-macher-text p {
	margin: 0;
}

.sblp .sblp-macher-text p + p {
	margin-top: 18px;
}

.sblp.sblp-js .sblp-macher-rahmen.is-visible,
.sblp.sblp-js .sblp-macher-bild.is-visible,
.sblp.sblp-js .sblp-macher-text.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================================
   TESTIMONIALS (Flickity aus js/main.js, Karten im Staging-Stil)
========================================================= */

.sblp-stimmen {
	padding: 100px 0 140px;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials {
	margin: 0;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials {
	margin-bottom: 0;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial {
	padding: 10px 0 30px;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .inner {
	width: 86%;
	padding: 40px 44px 34px;
	background: var(--sblp-karte-bg);
}

.sblp.sblp-js .sblp-stimmen-slider {
	opacity: 0;
	transform: translateY(70px);
	transition:
		opacity 700ms ease,
		transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-stimmen-slider.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================================
   FAQ
========================================================= */

.sblp-faq {
	padding: 115px 40px 160px;
}

/* FAQ-Flaeche: Seitenfarbe (Flaeche von .sblp; Kundenwunsch 05.10.,
   vorher #111722). */

.sblp .sblp-faq .sblp-titel {
	margin-bottom: 24px;
}

.sblp-faq-intro {
	width: 100%;
	max-width: 900px;
	margin: 0 auto 60px;
	color: rgba(255, 255, 255, .68);
	font-size: 15px;
	line-height: 1.7;
	text-align: center;
}

.sblp .sblp-faq-intro p {
	margin: 0;
}

.sblp .sblp-faq-intro a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .42);
}

.sblp.sblp-js .sblp-faq-intro {
	opacity: 0;
	transform: translateY(25px);
	transition:
		opacity 700ms ease 120ms,
		transform 700ms cubic-bezier(.22, 1, .36, 1) 120ms;
}

.sblp.sblp-js .sblp-faq-intro.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp-faq-liste {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}

/* Trennstriche OBEN an jeder Zeile (Fassung 19): so gleitet der Strich bei
   der Auf-/Zuklapp-Animation mit der Zeile darunter mit. Unten an der
   eigenen Zeile blieb er beim Zuklappen an der alten Stelle stehen. Den
   untersten Strich traegt die letzte Zeile selbst. */
.sblp-faq-item {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, .18);
	transition: background 250ms ease;
}

.sblp-faq-item:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, .18);
}

/* Zuklappen: Flaeche und Plus gleich zu Beginn zuruecknehmen (das Skript
   setzt is-zu), nicht erst am Ende der Animation */
.sblp-faq-item.is-open.is-zu {
	background: transparent;
}

.sblp-faq-item.is-open.is-zu .sblp-faq-icon {
	transform: none;
}

.sblp.sblp-js .sblp-faq-item {
	opacity: 0;
	transform: translateY(35px);
	transition:
		opacity 650ms ease,
		transform 700ms cubic-bezier(.22, 1, .36, 1),
		background 250ms ease;
}

.sblp.sblp-js .sblp-faq-item.is-visible {
	opacity: 1;
	/* none statt translateY(0): sonst bliebe jede Zeile dauerhaft eine eigene
	   Grafikebene - iOS setzte den Text beim Aufklappen darin neu (Ruckeln) */
	transform: none;
}

.sblp-faq-item.is-open {
	background: rgba(255, 255, 255, .035);
}

.sblp .sblp-faq-frage {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
	margin: 0;
	padding: 27px 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #fff;
	font-family: "Sora", sans-serif;
	font-size: clamp(15px, 1.15vw, 19px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.sblp-faq-frage-text {
	flex: 1;
}

.sblp-faq-icon {
	/* dauerhaft eigene Ebene: sonst setzt iOS das Zeichen am Ende der
	   Drehung neu aufs Pixelraster und es zuckt */
	will-change: transform;
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	opacity: .82;
	transition:
		transform 350ms cubic-bezier(.22, 1, .36, 1),
		opacity 250ms ease;
}

.sblp-faq-icon::before,
.sblp-faq-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1px;
	background: #fff;
	transform: translate(-50%, -50%);
}

.sblp-faq-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.sblp-faq-item.is-open .sblp-faq-icon {
	transform: rotate(45deg);
}

/* Aufklappen OHNE Hoehenanimation (Fassung 16): Auf dem iPhone ruckelte
   der Text bei jeder Hoehenanimation (max-height, height per CSS, height
   in ganzen Pixeln per Skript - alles beim Kunden getestet). Jetzt ist die
   Antwort sofort in voller Hoehe da, der Text blendet nur ueber die
   Deckkraft ein - nichts verschiebt sich waehrend der Animation. */
.sblp-faq-antwort-huelle {
	height: 0;
	overflow: hidden;
}

.sblp-faq-item.is-open .sblp-faq-antwort-huelle {
	height: auto;
}

/* Animation (Fassung 22): Das Skript schaltet das Layout in einem Schritt
   um und verschiebt danach die Zeilen per top (position: relative) und die
   Freilegung der Antwort per clip-path - Bild fuer Bild in GANZEN Pixeln,
   ohne eigene Grafikebenen. Ebenen (transform, will-change, backface,
   opacity-Uebergaenge) liessen WebKit am Ende der Animation die Darstellung
   umschalten (Text rastete sichtbar ein) und verschluckten 1px-Rahmen. */
.sblp-faq-item {
	position: relative;
}

.sblp-faq-antwort {
	max-width: 940px;
	padding: 0 50px 30px 8px;
	color: rgba(255, 255, 255, .70);
	font-size: clamp(13px, .95vw, 16px);
	line-height: 1.75;
}

.sblp .sblp-faq-antwort p {
	margin: 0;
}

.sblp .sblp-faq-antwort p + p {
	margin-top: 18px;
}

.sblp .sblp-faq-antwort ul,
.sblp .sblp-faq-antwort ol {
	margin: 12px 0 0 1.2em;
}

.sblp .sblp-faq-antwort strong {
	color: rgba(255, 255, 255, .94);
}

.sblp .sblp-faq-antwort a {
	color: #fff;
}

.sblp .sblp-faq-antwort code {
	display: inline-block;
	margin-top: 6px;
	max-width: 100%;
	color: rgba(255, 255, 255, .88);
	background: none;
	font-family: monospace;
	overflow-wrap: anywhere;
}


/* =========================================================
   KAUFEN
========================================================= */

.sblp-kaufen {
	padding: 90px 40px 120px;
}

.sblp-kaufen-karte {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 38px 44px;
	background: var(--sblp-karte-bg);
	text-align: center;
}

.sblp.sblp-js .sblp-kaufen-karte {
	opacity: 0;
	transform: translateY(70px);
	transition:
		opacity 700ms ease,
		transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-kaufen-karte.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp-kaufen-text {
	margin-bottom: 24px;
	color: rgba(255, 255, 255, .80);
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.6;
}

.sblp .sblp-kaufen-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 30px;
}

.sblp .sblp-kaufen-zeile .price {
	margin: 0;
	color: #fff;
	font-size: clamp(22px, 1.8vw, 30px);
	font-weight: 600;
}

.sblp .sblp-kaufen-zeile .price del {
	margin-right: 10px;
	opacity: .5;
	font-weight: 400;
}

.sblp .sblp-kaufen-zeile .price ins {
	text-decoration: none;
}


/* =========================================================
   TEXT & MEDIEN
========================================================= */

.sblp-frei {
	padding: 100px 40px 140px;
}

.sblp-frei-raster {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 76px;
	align-items: center;
}

.sblp-frei--oben,
.sblp-frei--ohne {
	max-width: 900px;
	grid-template-columns: 1fr;
	gap: 40px;
}

.sblp-frei--rechts .sblp-frei-medium {
	order: 2;
}

.sblp.sblp-js .sblp-frei-raster {
	opacity: 0;
	transform: translateY(55px);
	transition:
		opacity 800ms ease,
		transform 850ms cubic-bezier(.22, 1, .36, 1);
}

.sblp.sblp-js .sblp-frei-raster.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.sblp-frei-medium {
	line-height: 0;
}

.sblp-frei-video {
	display: block;
	width: 100%;
	height: auto;
}

.sblp-frei-text {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(16px, 1.13vw, 19px);
	line-height: 1.72;
}

.sblp .sblp-frei-text p {
	margin: 0;
}

.sblp .sblp-frei-text p + p {
	margin-top: 18px;
}


/* =========================================================
   KAUFLEISTE OHNE COUNTDOWN (studiobro-product-countdown.php)
   Die Leiste blendet ab 1024px den Kampagnen-Text aus, weil dort die
   Zahlenkacheln stehen. Ohne Countdown steht an seiner Stelle der
   Produktname - der bleibt sichtbar und kuerzt sich bei Platzmangel.
========================================================= */

@media screen and (max-width: 1024px) {
	.sb-countdown.sb-countdown--ohne-zeit .sb-countdown__label {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 14px;
	}
}


/* Kaufleiste buendig mit dem Seitenkopf (Kundenwunsch 05.10.2026):
   Produktname auf der Linie des Logos, Kauf-Button rechts auf der Linie des
   Menue-Symbols. Das letzte Symbol im Kopf traegt im Theme margin-right 30px
   (ueber 780px), die Leiste ohne diesen Versatz ragte 30px weiter heraus.
   Auf schmalen Handys rueckte die Leiste auf 12px ein, der Kopf steht auf 20px. */
@media screen and (min-width: 1281px) {
	body .sb-countdown .sb-countdown__inner {
		padding-right: 140px;
	}
}

@media screen and (min-width: 781px) and (max-width: 1280px) {
	body .sb-countdown .sb-countdown__inner {
		padding-right: 90px;
	}
}

@media screen and (max-width: 780px) {
	body .sb-countdown .sb-countdown__inner {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* =========================================================
   KOPFABSTAND WIE IM THEME (.first-container)
========================================================= */

@media screen and (max-width: 1280px) {
	.sblp {
		--sblp-kopf: 117px;
	}
}

@media screen and (max-width: 780px) {
	.sblp {
		--sblp-kopf: 77px;
	}
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

	.sblp {
		--sblp-section-fade: 130px;
	}

	.sblp-hero {
		min-height: auto;
		padding: 28px 28px 90px;
	}

	.sblp-hero--oben {
		padding-top: calc(var(--sblp-kopf) + var(--sb-cd-push, 0px) + 28px);
	}

	.sblp .sblp-hero-titelbild {
		width: 82%;
		max-width: 850px;
	}

	.sblp-hero-video {
		max-width: 720px;
		margin-top: 30px;
	}

	.sblp-features {
		padding: 70px 28px 95px;
	}

	.sblp .sblp-titel {
		font-size: 36px;
	}

	.sblp .sblp-features .sblp-titel {
		margin-bottom: 45px;
	}

	.sblp-features-grid {
		max-width: 900px;
		grid-template-columns: repeat(min(var(--sblp-spalten, 4), 2), minmax(0, 1fr));
		gap: 24px;
	}

	.sblp-feature-text {
		padding: 0 24px;
		font-size: 15px;
	}

	.sblp-action {
		padding: 75px 28px 100px;
	}

	.sblp-action-liste {
		max-width: 820px;
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.sblp-workflow {
		padding: 80px 28px 110px;
	}

	.sblp-workflow-unterzeile {
		max-width: 680px;
		margin-bottom: 60px;
		font-size: 18px;
	}

	.sblp-workflow-zeilen {
		gap: 72px;
	}

	.sblp-workflow-zeile {
		max-width: 880px;
		margin: 0 auto;
		gap: 44px;
	}

	.sblp-workflow-text {
		font-size: 16px;
		line-height: 1.65;
	}

	.sblp-workflow-rahmen {
		max-width: 390px;
	}

	.sblp-audio {
		padding: 75px 28px 100px;
	}

	.woocommerce-page.single-product .sblp .product-extra.sblp-audio-liste {
		max-width: 820px;
	}

	.sblp-macher {
		padding: 80px 28px 105px;
	}

	.sblp-macher-rahmen {
		max-width: 900px;
		padding: 30px 30px 36px;
	}

	.sblp-macher-bild {
		max-width: 800px;
	}

	.sblp-macher-texte {
		max-width: 800px;
		margin-top: 32px;
		gap: 38px;
	}

	.sblp-macher-text {
		font-size: 14px;
		line-height: 1.65;
	}

	.sblp-stimmen {
		padding: 75px 0 100px;
	}

	.sblp-faq {
		padding: 80px 28px 110px;
	}

	.sblp-faq-liste {
		max-width: 900px;
	}

	.sblp-kaufen,
	.sblp-frei {
		padding: 75px 28px 100px;
	}

	.sblp-frei-raster {
		gap: 44px;
	}
}


/* =========================================================
   HANDY
========================================================= */

@media (max-width: 768px) {

	.sblp {
		--sblp-section-fade: 90px;
	}

	.sblp-hero {
		min-height: auto;
		padding: 20px 18px 65px;
	}

	.sblp-hero--oben {
		padding-top: calc(var(--sblp-kopf) + var(--sb-cd-push, 0px) + 20px);
	}

	.sblp .sblp-hero-titelbild {
		width: 94%;
		max-width: 620px;
	}

	.sblp-hero-video {
		max-width: 620px;
		margin-top: 20px;
		border-radius: 14px;
	}

	.sblp-hero-produktvideo {
		border-radius: 14px;
	}

	.sblp .sblp-titel {
		font-size: 31px;
		letter-spacing: .06em;
	}

	.sblp.sblp-js .sblp-titel {
		letter-spacing: .13em;
	}

	.sblp.sblp-js .sblp-titel.is-visible {
		letter-spacing: .06em;
	}

	/* FEATURES HANDY: Medium links quadratisch, Text rechts */

	.sblp-features {
		padding: 60px 18px 78px;
		background-position: center top;
	}

	.sblp .sblp-features .sblp-titel {
		margin-bottom: 34px;
	}

	.sblp-features-grid {
		width: 100%;
		max-width: 620px;
		margin: 0 auto;
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.sblp-feature {
		display: grid;
		grid-template-columns: minmax(130px, 38%) minmax(0, 62%);
		width: 100%;
		height: auto;
		padding: 0;
		align-items: stretch;
		background: rgba(7, 12, 23, .95);
	}

	.sblp.sblp-js .sblp-feature {
		transform: translateY(42px);
	}

	.sblp-feature-media {
		position: relative;
		display: block;
		width: calc(100% - 14px);
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 14px 0 14px 14px;
		align-self: center;
		overflow: hidden;
		border-radius: 10px;
		background: rgba(3, 8, 18, .72);
		z-index: 0;
	}

	.sblp-feature-video {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center center;
	}

	.sblp-feature-text {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: 100%;
		min-height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20px 22px;
		background:
			linear-gradient(
				90deg,
				rgba(8, 13, 25, .91) 0%,
				rgba(8, 13, 25, .97) 38%,
				rgba(8, 13, 25, .995) 100%
			);
		font-size: 13px;
		line-height: 1.48;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .70);
		z-index: 2;
	}

	.sblp-feature-text br + br {
		display: none;
	}

	.sblp-feature::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: calc(38% - 20px);
		width: 40px;
		pointer-events: none;
		background:
			linear-gradient(
				to right,
				rgba(8, 13, 25, 0) 0%,
				rgba(8, 13, 25, .35) 45%,
				rgba(8, 13, 25, .91) 100%
			);
		z-index: 1;
	}

	/* VIDEOS HANDY */

	.sblp-action {
		padding: 60px 18px 80px;
		background-position: center top;
	}

	.sblp-action .sblp-titel {
		margin-bottom: 32px;
	}

	.sblp-action-liste {
		max-width: 620px;
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.sblp.sblp-js .sblp-yt {
		transform: translateY(45px);
	}

	/* WORKFLOW HANDY: Video immer ueber dem Text */

	.sblp-workflow {
		padding: 60px 18px 85px;
		background-position: center top;
	}

	.sblp .sblp-workflow .sblp-titel {
		margin-bottom: 17px;
	}

	.sblp-workflow-unterzeile {
		max-width: 560px;
		margin-bottom: 48px;
		font-size: 16px;
	}

	.sblp-workflow-zeilen {
		max-width: 620px;
		margin: 0 auto;
		gap: 58px;
	}

	.sblp-workflow-zeile {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.sblp.sblp-js .sblp-workflow-zeile {
		transform: translateY(45px);
	}

	.sblp-workflow-text,
	.sblp-workflow-zeile:nth-child(even) .sblp-workflow-text {
		order: 0;
		max-width: 520px;
		margin: 0 auto;
		justify-self: center;
		font-size: 15px;
		line-height: 1.65;
	}

	.sblp-workflow-rahmen {
		max-width: 432px;
	}

	/* AUDIO HANDY */

	.sblp-audio {
		padding: 60px 18px 80px;
		background-position: center top;
	}

	.sblp .sblp-audio .sblp-titel {
		margin-bottom: 34px;
	}

	.woocommerce-page.single-product .sblp .product-extra.sblp-audio-liste {
		max-width: 620px;
	}

	/* DIE MACHER HANDY: Bild und Texte untereinander */

	.sblp-macher {
		padding: 60px 18px 85px;
		background-position: center top;
	}

	.sblp .sblp-macher .sblp-titel {
		margin-bottom: 36px;
	}

	.sblp-macher-rahmen {
		max-width: 620px;
		padding: 20px 18px 26px;
	}

	.sblp-macher-bild {
		max-width: 560px;
	}

	.sblp-macher-texte {
		max-width: 520px;
		margin-top: 28px;
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.sblp-macher-text {
		width: 100%;
		font-size: 14px;
		line-height: 1.65;
	}

	.sblp .sblp-macher-text p + p {
		margin-top: 15px;
	}

	/* TESTIMONIALS HANDY */

	.sblp-stimmen {
		padding: 60px 0 80px;
	}

	.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial {
		width: 86vw;
	}

	.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .inner {
		width: 92%;
		padding: 26px 22px 22px;
	}

	/* FAQ HANDY */

	.sblp-faq {
		padding: 60px 18px 85px;
	}

	.sblp .sblp-faq .sblp-titel {
		margin-bottom: 20px;
	}

	.sblp-faq-intro {
		max-width: 520px;
		margin-bottom: 42px;
		font-size: 14px;
	}

	.sblp .sblp-faq-frage {
		gap: 18px;
		padding: 21px 4px;
		font-size: 15px;
	}

	.sblp-faq-antwort {
		padding: 0 34px 24px 4px;
		font-size: 14px;
	}

	/* KAUFEN, TEXT & MEDIEN HANDY */

	.sblp-kaufen,
	.sblp-frei {
		padding: 60px 18px 80px;
	}

	.sblp-kaufen-karte {
		padding: 28px 22px;
	}

	.sblp-frei-raster {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.sblp-frei--rechts .sblp-frei-medium {
		order: 0;
	}
}


/* =========================================================
   KLEINE SMARTPHONES
========================================================= */

@media (max-width: 480px) {

	.sblp {
		--sblp-section-fade: 75px;
	}

	.sblp-hero {
		padding: 16px 14px 55px;
	}

	.sblp-hero--oben {
		padding-top: calc(var(--sblp-kopf) + var(--sb-cd-push, 0px) + 16px);
	}

	.sblp .sblp-hero-titelbild {
		width: 97%;
	}

	.sblp .sblp-titel {
		font-size: 27px;
		letter-spacing: .045em;
	}

	.sblp.sblp-js .sblp-titel {
		letter-spacing: .11em;
	}

	.sblp.sblp-js .sblp-titel.is-visible {
		letter-spacing: .045em;
	}

	.sblp-features {
		padding: 52px 14px 66px;
	}

	.sblp .sblp-features .sblp-titel {
		margin-bottom: 28px;
	}

	.sblp-features-grid {
		gap: 13px;
	}

	.sblp-feature {
		grid-template-columns: minmax(112px, 36%) minmax(0, 64%);
	}

	.sblp-feature-media {
		width: calc(100% - 12px);
		margin: 12px 0 12px 12px;
		border-radius: 9px;
	}

	.sblp-feature-text {
		padding: 16px;
		font-size: 12px;
		line-height: 1.44;
	}

	.sblp-feature::after {
		left: calc(36% - 18px);
		width: 36px;
	}

	.sblp-action,
	.sblp-audio,
	.sblp-kaufen,
	.sblp-frei {
		padding: 52px 14px 68px;
	}

	.sblp-workflow {
		padding: 52px 14px 72px;
	}

	.sblp-workflow-unterzeile {
		margin-bottom: 40px;
		font-size: 14px;
	}

	.sblp-workflow-zeilen {
		gap: 48px;
	}

	.sblp-workflow-text,
	.sblp-workflow-zeile:nth-child(even) .sblp-workflow-text {
		font-size: 14px;
		line-height: 1.6;
	}

	.sblp-macher {
		padding: 52px 14px 72px;
	}

	.sblp .sblp-macher .sblp-titel {
		margin-bottom: 30px;
	}

	.sblp-macher-rahmen {
		padding: 14px 14px 22px;
	}

	.sblp-macher-texte {
		margin-top: 24px;
		gap: 24px;
	}

	.sblp-macher-text {
		font-size: 13px;
		line-height: 1.6;
	}

	.sblp-stimmen {
		padding: 52px 0 68px;
	}

	.sblp-faq {
		padding: 52px 14px 72px;
	}

	.sblp-faq-intro {
		margin-bottom: 36px;
		font-size: 13px;
	}

	.sblp .sblp-faq-frage {
		padding: 19px 2px;
		font-size: 14px;
	}

	.sblp-faq-antwort {
		padding: 0 28px 22px 2px;
		font-size: 13px;
	}
}


/* =========================================================
   HANDY: KARTEN BUENDIG MIT LOGO UND MENUE-SYMBOL
   Kundenwunsch 05.10.2026. Die Vorlage hat 18px (bis 768) bzw. 14px
   (bis 480) Seitenrand, der Seitenkopf 20px. Hier fuer alle Abschnitte
   20px, damit Karten, Kaufleiste und Kopf auf einer Linie stehen.
========================================================= */

@media (max-width: 768px) {
	.sblp-features,
	.sblp-action,
	.sblp-workflow,
	.sblp-audio,
	.sblp-macher,
	.sblp-faq,
	.sblp-kaufen,
	.sblp-frei {
		padding-left: 20px;
		padding-right: 20px;
	}
}


/* =========================================================
   KUNDENFEEDBACK 05.10.2026 (FASSUNG 5)
========================================================= */

/* Abstaende zwischen den Abschnitten kleiner (vorher 80-115px oben,
   120-160px unten). */
.sblp-section:not(.sblp-hero) {
	padding-top: 64px;
	padding-bottom: 72px;
}

.sblp-hero {
	padding-bottom: 72px;
}

@media (max-width: 1024px) {
	.sblp-section:not(.sblp-hero) {
		padding-top: 56px;
		padding-bottom: 64px;
	}

	.sblp-hero {
		padding-bottom: 64px;
	}
}

@media (max-width: 768px) {
	.sblp-section:not(.sblp-hero) {
		padding-top: 44px;
		padding-bottom: 52px;
	}

	/* Hero-Video so breit wie die Karten darunter (20px Rand) */
	.sblp-hero {
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 52px;
	}
}

@media (max-width: 480px) {
	.sblp-section:not(.sblp-hero) {
		padding-top: 40px;
		padding-bottom: 48px;
	}
}

/* FAQ auf dem iPhone: kein grauer Tipp-Blitz, keine Theme-Animation am
   Knopf (button { transition: all }); die Einblend-Verzoegerung der Liste
   gilt nicht mehr fuer das Aufklappen. */
.sblp .sblp-faq-frage {
	-webkit-tap-highlight-color: transparent;
	transition: none;
}

.sblp .sblp-faq-frage:focus,
.sblp .sblp-faq-frage:active {
	background: transparent;
	color: #fff;
	outline: none;
}

.sblp .sblp-faq-frage:focus-visible {
	outline: 2px solid rgba(255, 255, 255, .6);
	outline-offset: -2px;
}

.sblp.sblp-js .sblp-faq-item.is-visible {
	transition-delay: 0s !important;
}

/* Testimonials: alle Karten gleich hoch und gleich gesetzt. Das Theme
   vergroessert die ausgewaehlte Karte (Schrift, Bild) und laesst den Slider
   ihrer Hoehe folgen - laengere Nachbarn wurden unten abgeschnitten. Die
   Hoehenanpassung schaltet das Skript im Template ab und gleicht die
   Kartenhoehen an. */
.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial {
	display: flex;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .inner {
	display: flex;
	flex-direction: column;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .inner .meta {
	margin-top: auto;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial p,
.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial.is-selected p {
	margin-bottom: 37px;
	font-size: 1em;
}

.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .meta .thumb img,
.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial.is-selected .meta .thumb img {
	width: 80px;
	min-width: 80px;
	height: 80px;
}

@media (max-width: 780px) {
	.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .meta .thumb img,
	.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial.is-selected .meta .thumb img {
		width: 50px;
		min-width: 50px;
		height: 50px;
	}

	.woocommerce-page.single-product .sblp .product-extra.extra-testimonials .testimonials .testimonial .meta .thumb {
		margin-right: 20px;
	}
}


/* =========================================================
   HERO GENAU EINE BILDSCHIRMHOEHE, KAUFLEISTE ERST NACH DEM HERO
   Kundenwunsch 05.10.2026 (Fassung 7)

   Kaufleiste: ganz oben ausgeblendet; das Skript im Template blendet sie
   ein (.sblp-leiste-an), sobald gescrollt wird. Der
   body behaelt auf dieser Seite keinen Leisten-Versatz - die Leiste legt
   sich ueber den Inhalt, nichts springt.

   Hero: 100vh (100svh auf Handys), beginnt direkt unter der Menuezeile.
   Titelbild und Produktvideo skalieren so, dass beide ganz sichtbar sind:
     frei   = Hoehe - Unterkante Menuezeile - Luft oben - Luft unten
     Titel  = hoechstens 32 % von frei, sonst Breite x Anteil / 3
              (Titelbild ist 3:1 und hat selbst schon Luft um die Schrift)
     Video  = Breite aus Resthoehe x Seitenverhaeltnis (Mediathek,
              --sblp-video-ratio), hoechstens 800px bzw. Inhaltsbreite
========================================================= */

body.sb-has-countdown:has(.sblp) {
	padding-top: 0;
}

/* nur ab Tablet: auf dem Handy steht die Leiste schon beim Laden
   (Kundenwunsch Fassung 24) */
@media (min-width: 769px) {
	body:has(.sblp) .sb-countdown[data-dauerhaft]:not(.sblp-leiste-an) {
		display: none;
	}
}

body:has(.sblp) .sb-countdown.sblp-leiste-an {
	animation: sblp-leiste-ein 350ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Handy: Leiste steht ab dem Laden - kein Hereingleiten */
@media (max-width: 768px) {
	body:has(.sblp) .sb-countdown.sblp-leiste-an {
		animation: none;
	}
}

@keyframes sblp-leiste-ein {
	from {
		opacity: 0;
		transform: translateY(-14px);
	}
}

.sblp-hero--oben {
	--sblp-menue: 91px;          /* Ersatz, bis das Skript gemessen hat */
	--sblp-hero-luft-oben: 0px;
	--sblp-hero-luft-unten: 30px;
	--sblp-hero-rand: 30px;
	--sblp-titel-anteil: .74;
	--sblp-hero-luecke: clamp(8px, 2.5vh, 40px);
	--sblp-oben: var(--sblp-kopf-ist, var(--sblp-menue));
	--sblp-frei: calc(100svh - var(--sblp-oben) - var(--sblp-hero-luft-oben) - var(--sblp-hero-luft-unten));
	--sblp-titel-h: min(calc((100vw - 2 * var(--sblp-hero-rand)) * var(--sblp-titel-anteil) / 3), 393px, calc(var(--sblp-frei) * .32));

	height: 100vh;
	height: 100svh;
	min-height: 460px;
	margin-top: 0;
	/* Nicht abschneiden: Der Leuchtrand des Produktvideos reicht ~90px nach
	   aussen, unten bleiben nur 30px - mit overflow:hidden entstand dort eine
	   harte Kante. Das Hintergrundvideo sitzt exakt in der Box. */
	overflow: visible;
	align-items: stretch;
	padding-top: calc(var(--sblp-oben) + var(--sblp-hero-luft-oben));
	padding-bottom: var(--sblp-hero-luft-unten);
}

.sblp-hero--oben .sblp-hero-inhalt {
	height: 100%;
	justify-content: center;
	gap: var(--sblp-hero-luecke);
}

.sblp .sblp-hero--oben .sblp-hero-titelbild {
	flex: none;
	width: auto;
	height: var(--sblp-titel-h);
	max-width: 100%;
}

.sblp .sblp-hero--oben .sblp-hero-video {
	flex: none;
	margin-top: 0;
	max-width: none;
	width: min(800px, 100%, calc((var(--sblp-frei) - var(--sblp-titel-h) - var(--sblp-hero-luecke)) * var(--sblp-video-ratio, 1.5)));
}

@media (max-width: 1280px) {
	.sblp-hero--oben {
		--sblp-menue: 86px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.sblp-hero--oben {
		--sblp-menue: 78px;
		--sblp-hero-rand: 28px;
		--sblp-titel-anteil: .82;
	}
}

@media (max-width: 768px) {
	.sblp-hero--oben {
		--sblp-menue: 144px;   /* Kopf 80 + Kaufleiste 64 (Ersatz bis gemessen) */
		--sblp-hero-luft-oben: 10px;
		--sblp-hero-rand: 20px;
		--sblp-titel-anteil: .94;
	}
}

@media (max-width: 480px) {
	.sblp-hero--oben {
		--sblp-titel-anteil: .97;
	}
}


/* =========================================================
   HERO AUF DEM HANDY (Fassung 10, 05.10.2026)
   Auf dem Handy begrenzt die Breite Logo und Video - bei voller
   Bildschirmhoehe stuenden beide als schmaler Block in der Mitte, darueber
   und darunter ~180px leerer Hintergrund. Deshalb hier: Hero so hoch wie
   sein Inhalt, Logo direkt unter dem Menue.
   Das Titelbild (2172 x 724) hat um den Schriftzug durchsichtigen Rand:
   oben/unten je ~23 %, links/rechts je ~4,3 % (im Browser ausgemessen).
   Es wird um diesen Rand breiter gezogen und mit negativen Abstaenden
   eingefasst - der Schriftzug fluchtet so mit den Karten (20px).
========================================================= */

@media (max-width: 768px) {
	.sblp-hero--oben {
		height: auto;
		min-height: 0;
	}

	/* so breit wie die Karten darunter (dort max. 620px) */
	.sblp-hero--oben .sblp-hero-inhalt {
		height: auto;
		max-width: 620px;
		margin: 0 auto;
		justify-content: flex-start;
		gap: 14px;
	}

	.sblp .sblp-hero--oben .sblp-hero-titelbild {
		width: calc(100% / .915);
		height: auto;
		max-width: none;
		margin: -7% -4.65%;
	}

	.sblp .sblp-hero--oben .sblp-hero-video {
		width: 100%;
	}
}


/* Handy: Hintergrundbilder oben verankern (wie die Vorlage) */
@media (max-width: 768px) {
	.sblp-section.sblp-hat-hg::before {
		background-position: center top;
	}
}


/* =========================================================
   FAQ AUF GANZEN PIXELN (Fassung 20, iPhone)
   Ursache aller FAQ-Zuckler auf iOS: Die Zeilen lagen auf krummen
   Positionen (Liste ab 7137,461px, Zeilen 79,59 / 99,89px hoch, Zeilen-
   hoehe 20,3px usw.). Waehrend einer Animation zeichnet iOS sie dort, in
   Ruhe rastet es sie aufs Pixelraster - das Einrasten war zu sehen.
   Jetzt: Zeilenhoehen auf ganze Pixel gerundet (round(), Rueckfall auf
   den alten Wert davor), und das Skript im Template richtet die Liste
   selbst auf einen ganzen Pixel aus (Ausgleich oben, --sblp-faq-raster).
========================================================= */

.sblp .sblp-faq-frage {
	line-height: 1.45;
	line-height: round(1.45em, 1px);
}

.sblp-faq-antwort {
	line-height: 1.75;
	line-height: round(1.75em, 1px);
}

.sblp .sblp-faq-liste {
	padding-top: var(--sblp-faq-raster, 0px);
}

/* Kantenglaettung vereinheitlichen (macOS; Recherche WebKit-Foren). Das
   backface-visibility aus Fassung 21 ist wieder raus - es verschluckte
   Trennstriche (bekannter Safari-Fehler mit Ebenen und 1px-Rahmen). */
.sblp-faq-liste {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Nur das Plus bleibt dauerhaft eigene Ebene (dreht sich; keine Rahmen,
   die verschwinden koennten). Zeilen bewusst OHNE Ebene, siehe oben. */

/* Pfade (inline-block) oben ausrichten - auf der Grundlinie machten sie
   die Antwort um einen halben Pixel hoeher (389,5px gemessen) */
.sblp .sblp-faq-antwort code {
	vertical-align: top;
}


/* =========================================================
   PLATZHALTER -> VIDEO (Fassung 24)
   Das Platzhalter-Bild steht im Fluss und bestimmt die Groesse; das Video
   liegt darueber, zunaechst unsichtbar, und wird vom Skript eingeblendet,
   sobald es durchspielen kann und laeuft. Deckkraft 0,001 statt 0: Safari
   haelt ganz unsichtbare Videos sonst unter Umstaenden an.
========================================================= */

.sblp :has(> .sblp-ph-video) {
	position: relative;
}

.sblp .sblp-ph-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .001;
}

.sblp .sblp-ph-blende {
	opacity: .001;
}

@media (max-width: 768px) {
	.sblp .sblp-feature-media .sblp-ph-video {
		object-fit: contain;
	}
}


/* =========================================================
   UEBERSCHRIFTEN MIT GSAP SCRAMBLETEXT (Fassung 24)
   Das Skript blendet sie ein und laesst die Zeichen sich "entschluesseln";
   die CSS-Einblendung (Versatz, Unschaerfe, Buchstabenabstand) ist fuer
   diese Ueberschriften aus.
========================================================= */

.sblp .sblp-titel.sblp-titel--gsap {
	transition: none;
}


/* Handy: Hintergrundvideo samt Platzhalter so verschoben, dass die gelbe
   Lichtlinie auf Hoehe der Wellenlinie im Produktvideo liegt (Versatz
   misst das Skript, --sblp-hg-versatz; Fassung 27) */
@media (max-width: 768px) {
	.sblp-hero--oben .sblp-hero-bgvideo,
	.sblp-hero--oben::before {
		transform: translateY(var(--sblp-hg-versatz, 0px));
	}
}