/* Studio Child Theme — Seitenkopf und Rahmen 1:1 nach der SaaS (22.08.2026):
   Hero-Bild fest 280px (mobil 180) mit fixer Navi darüber, weiße Bühne mit
   50px Seitenabstand, Rundung nur unten, dunkler Footer. */

@font-face {
	font-family: "Montserrat";
	src: url("fonts/montserrat.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Nothing You Could Do";
	src: url("fonts/nothing-you-could-do.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* Geschwungenes, aufrechtes „ju" in der Wortmarke (Reform + ju) */
.stbh-ju {
	font-family: "Nothing You Could Do", "Snell Roundhand", cursive;
	font-weight: 400;
	-webkit-text-stroke: .5px currentColor;
	font-size: 1.12em;
	line-height: 1;
	margin-left: 3px;
}

:root {
	--stbh-brand: #6d5548;   /* Logo-Braun */
	--stbh-taupe: #f0eae6;   /* Logo-Creme */
	--stbh-ink: #2a2522;
	/* Einheitlicher Sektionsabstand oben/unten für alle Bänder der Startseite */
	--stbh-space: 120px;
}

body {
	font-family: "Montserrat", -apple-system, sans-serif;
}

/* YOOtheme-Reste ausblenden: Serifen-Titel + Theme-Kopf/-Fuß auf Studio-Seiten */
.uk-article-title { display: none; }
body.stbh-page .tm-header,
body.stbh-page .tm-header-mobile,
body.stbh-page .tm-footer { display: none; }

/* ---------- Bühne + Hero ---------- */
.stbh-stage {
	padding: 0 50px 14px;
	position: sticky;
	top: 0;
	z-index: 90;
	background: #fff;
}
.stbh-hero {
	background-color: var(--stbh-ink);
	position: relative;
	height: 280px;
	border-radius: 0 0 56px 56px;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	color: #fff;
}
.stbh-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 12, .45) 0%, rgba(10, 10, 12, .08) 34%,
		rgba(10, 10, 12, .12) 62%, rgba(10, 10, 12, .55) 100%);
}
.stbh-copy {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 0 clamp(24px, 4vw, 56px) clamp(24px, 3vw, 36px);
}
.stbh-copy h1 {
	color: #fff;
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.01em;
	margin: 0;
}

/* Startseite: Video ist der Kopf — volle Breite und Höhe. Es bleibt beim
   Scrollen stehen, der Inhalt schiebt sich als Taupe-Fläche mit Fußrundung
   darüber (wie der Footer, Farbe der Kurskarten). */
/* Die Bühne bleibt unter dem Seiteninhalt (z-index:2) — sonst schöbe sie sich
   beim Scrollen über alles. Die Navigation steht deshalb im Markup VOR der
   Bühne und hat damit ihren eigenen Stapelkontext. */
.stbh-stage--video { position: sticky; top: 0; z-index: 1; padding: 0; }
.stbh-hero--video { height: 100vh; border-radius: 0; background: var(--stbh-ink); }
body.home .tm-page {
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 56px 56px 0 0;
	/* clip statt hidden: hidden macht tm-page zum Scroll-Container und
	   sticky-Sektionen darin kleben sonst nie */
	overflow: hidden;
	overflow: clip;
	padding-bottom: 40px;
}
body.home { background: var(--stbh-ink); }
body.home .tm-main { background: transparent; padding-top: 0; padding-bottom: 0; }
/* Kein Weiß am Anfang: die Theme-Abstände über dem Taupe-Band fallen weg,
   die Fläche erscheint erst beim Scrollen (kein Vorab-Überlappen) */
body.home .uk-article .uk-margin-medium { margin-top: 0 !important; }
/* Erste Sektion nach dem Video: Taupe-Band in voller Breite (Kurskarten-Farbe) */
body.home .stbh-feature {
	margin-inline: calc(50% - 50vw);
	padding: var(--stbh-space) 50px;
	background: var(--stbh-taupe);
}
/* Der FAQ-Block zieht sich 56px über das Taupe — unten ausgleichen, damit der
   sichtbare Abstand dem der anderen Sektionen entspricht */
body.home .stbh-quotes { padding-bottom: calc(var(--stbh-space) + 56px); }
/* Dramaturgie: die Bildkarte dockt unter der Navi an und bleibt stehen, während man
   ihren Inhalt durchwischt. Danach schiebt sich das weiße Vorteils-Band darüber —
   alles Spätere muss deshalb darüber liegen. */
@media (min-width: 861px) {
	/* Auslauf unter der Karte, damit sie angedockt stehen bleibt. Sticky wird von der
	   CONTENT-Box des Elternteils begrenzt — Padding schafft dort keinen Raum, ein
	   Pseudo-Element dagegen schon. Das weiße Band wird um denselben Betrag
	   hochgezogen und schiebt sich dadurch über die Karte. */
	body.home .stbh-stack { padding-bottom: 0; }
	/* Scrollstrecke, auf der die Karte angedockt steht: darauf laufen die beiden
	   Inhaltswechsel (erste ~55 %), danach die Standzeit, dann das weiße Band.
	   Der Vorlauf des weißen Bandes ist größer als die Karte hoch ist (700px),
	   damit es sie vollständig zudeckt, bevor der Stapel sich löst — sonst bleibt
	   die weiße Textkachel über der Bandkante stehen und es sieht aus wie zwei
	   Flächen. */
	body.home .stbh-stack::after { content: ""; display: block; height: 2220px; }
	body.home .stbh-benefits { margin-top: -760px; }
	/* body.home davor, weil .stbh-stack__frame weiter unten steht und sonst bei
	   gleicher Spezifität sein position:relative gewinnt */
	body.home .stbh-stack__frame { position: sticky; top: var(--stbh-dock, 92px); }
	/* Schatten an der Oberkante: sonst stoßen zwei weiße Flächen (Textkachel der
	   Karte und das Band) stumpf aneinander und der Übergang wirkt wie ein Fehler */
	body.home .stbh-benefits {
		position: relative;
		z-index: 2;
		border-radius: 56px;
		box-shadow: 0 -26px 50px rgba(20, 18, 18, .17);
	}
	body.home .stbh-quotes { position: relative; z-index: 2; }
}
/* Inhalte kommen weich von unten herein (Klassen setzt das Footer-Skript) */
.stbh-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
}
.stbh-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.stbh-reveal { opacity: 1; transform: none; transition: none; }
}
body.home .stbh-faqwrap, body.home .stbh-footer { position: relative; z-index: 2; }
/* Der anthrazitfarbene FAQ-Block läuft über die Taupe-Fläche: die Überlappung
   legt Taupe (statt Video) hinter die Rundungs-Ecken */
body.home .stbh-faqwrap { margin-top: -56px; }
body.home .tm-page { padding-bottom: 0; background: var(--stbh-taupe); }
.stbh-hero--video::before {
	z-index: 1;
	/* Farbschleier: warm getönt in der Mitte, dunkler Fuß für den Text */
	background: linear-gradient(180deg, rgba(10, 10, 12, .38) 0%, rgba(109, 85, 72, .28) 52%,
		rgba(10, 10, 12, .6) 100%);
}
/* Headline + Button mittig auf dem Video */
.stbh-copy--video {
	margin: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	text-align: center;
}
.stbh-copy--video h1 {
	font-size: clamp(2.8rem, 6vw, 5.4rem);
	font-weight: 500;
	line-height: 1.08;
}
/* Button auf dem Video: keine Fläche, nur weiße Kontur; Hover füllt weiß */
.stbh-copy--video .stbh-cta {
	background: transparent;
	border: 1.5px solid #fff;
}
.stbh-copy--video .stbh-cta::before { background: #fff; }
.stbh-copy--video .stbh-cta:hover { color: var(--stbh-ink); }
.stbh-herovideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Ohne Unterlegung: fährt die Navi über helle Flächen, wird die Schrift schwarz */
.stbh-nav a, .stbh-brand, .stbh-account__name, .stbh-burger summary span { transition: color .25s ease, background .25s ease; }
.stbh-nav.is-light a:not(.stbh-pill), .stbh-nav.is-light .stbh-brand { color: var(--stbh-ink); }
.stbh-nav.is-light .stbh-nav__left > nav a:hover { color: var(--stbh-ink); }
.stbh-nav.is-light .stbh-nav__right > a:not(.stbh-pill):hover { color: var(--stbh-ink); }
.stbh-nav.is-light .stbh-brand:hover { color: var(--stbh-ink); }
.stbh-nav.is-light .stbh-nav__left > nav a.is-active { color: #e8d5c4; }
.stbh-nav.is-light .stbh-burger summary span { background: var(--stbh-ink); }
.stbh-nav.is-light .stbh-account__name { color: var(--stbh-ink); }
.stbh-nav.is-light .stbh-avatar { background: var(--stbh-taupe); color: var(--stbh-brand); }
.stbh-nav.is-light .stbh-credits { background: rgba(37, 39, 41, .08); color: var(--stbh-ink); }

/* ---------- Fixe Navi ---------- */
.stbh-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 18px;
	padding: 28px 100px 20px;
	transition: padding .35s ease;
}
body.admin-bar .stbh-nav { top: 32px; }
.stbh-nav a { color: #fff; text-decoration: none; }
.stbh-nav a:hover, .stbh-nav a:focus,
.stbh-menu a:hover, .stbh-burger__panel a:hover,
.stbh-footer a:hover { text-decoration: none; }
.stbh-nav__right > a:not(.stbh-pill):hover { color: #fff; opacity: .75; }
.stbh-nav__left { display: flex; align-items: center; gap: 26px; }
.stbh-nav__left > nav { display: flex; gap: 24px; }
.stbh-nav__left > nav a { font-weight: 500; font-size: .95rem; white-space: nowrap; }
.stbh-nav__left > nav a:hover { opacity: .75; color: #fff; }
.stbh-nav__left nav a.is-active { color: var(--stbh-brand); }
.stbh-nav__left > nav a.is-active:hover { color: #e8d5c4; opacity: 1; }
.stbh-brand {
	justify-self: center;
	font-weight: 500;
	font-size: 1.35rem;
	letter-spacing: -.01em;
	white-space: nowrap;
}
.stbh-brand:hover { color: #fff; opacity: .85; }
.stbh-nav__right { justify-self: end; display: flex; align-items: center; gap: 14px; font-size: .9rem; }

.stbh-credits {
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	padding: 9px 15px;
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
}
.stbh-pill {
	white-space: nowrap;
	display: inline-block;
	border-radius: 999px;
	padding: 12px 20px;
	font-weight: 500;
	font-size: .9rem;
	line-height: 1;
	background: rgba(12, 12, 14, .82);
	color: #fff;
}
.stbh-pill:hover { background: #000; color: #fff; }

/* Burger */
.stbh-burger { position: relative; }
.stbh-burger summary { list-style: none; cursor: pointer; display: flex; flex-direction: column;
	gap: 4px; padding: 8px 4px; margin: 0; }
.stbh-burger summary::-webkit-details-marker { display: none; }
.stbh-burger summary span { width: 20px; height: 2px; background: #fff; border-radius: 2px; }
.stbh-burger__panel { position: absolute; left: 0; top: calc(100% + 12px); background: #fff;
	border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .25); min-width: 220px; padding: 8px;
	display: flex; flex-direction: column; z-index: 40; }
.stbh-burger__panel { gap: 2px; }
.stbh-burger__panel a { color: var(--stbh-ink); font-weight: 500; padding: 11px 14px; border-radius: 10px; white-space: nowrap; }
.stbh-burger__panel a:hover { background: #f4f2f0; color: var(--stbh-brand); }

/* Konto-Menü (Avatar + Dropdown) */
.stbh-account { position: relative; }
.stbh-account summary { list-style: none; margin: 0; display: flex; align-items: center; gap: 10px;
	cursor: pointer; padding: 6px; border-radius: 999px; }
.stbh-account summary::-webkit-details-marker { display: none; }
.stbh-avatar { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--stbh-ink);
	display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .82rem; }
.stbh-account__name { color: #fff; font-weight: 500; }
.stbh-menu { position: absolute; right: 0; top: calc(100% + 10px); background: #fff;
	border: 1px solid #eee; border-radius: 14px; box-shadow: 0 18px 44px rgba(37, 39, 41, .14);
	min-width: 240px; padding: 8px; display: flex; flex-direction: column; }
.stbh-menu a { display: block; color: var(--stbh-ink); font-weight: 500; font-size: .92rem;
	padding: 10px 12px; border-radius: 10px; }
.stbh-menu a:hover { background: #f4f2f0; color: var(--stbh-brand); }
.stbh-menu__meta { padding: 10px 12px; font-size: .85rem; color: #6f635b; border-bottom: 1px solid #eee;
	margin-bottom: 6px; }

/* Burger-Plugin (alt) auf Studio-Seiten aus */
body.stbh-page .rdbg-toggle { display: none; }

/* Seiten-Wipe: schräge Bahn fährt beim Navigieren von links nach rechts durch
   (nur Navi-Links). Das Bild steht fest im Viewport — sichtbar wird es nur
   dort, wo die Bahn gerade drüberfährt (Fenster-Effekt per clip-path). */
.stbh-wipe-bg { display: none; }
.stbh-wipe {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background-color: var(--stbh-taupe);
	background-size: cover;
	background-position: center;
	pointer-events: none;
	clip-path: polygon(-170% 0, -20% 0, -30% 100%, -180% 100%);
}
.stbh-wipe::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(240, 234, 230, .8);
}
.stbh-wipe.is-anim {
	transition: clip-path .9s cubic-bezier(.65, 0, .35, 1);
}

/* ---------- FAQ im Footer-Bereich ---------- */
.stbh-faqwrap {
	background: var(--stbh-ink);
	margin-top: var(--stbh-space);
	border-radius: 56px 56px 0 0;
	/* Die weiße Karte steht tief im Grau: oben viel dunkle Fläche, unten bündig */
	padding: var(--stbh-space) 50px 0;
}
.stbh-faq {
	background: #fff;
	border-radius: 28px 28px 0 0;
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(28px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 1.6fr;
	gap: clamp(28px, 5vw, 80px);
}
.stbh-faq__intro h2 {
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(2rem, 3.4vw, 3.1rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--stbh-ink);
	margin: 0 0 18px;
}
.stbh-faq__intro p { color: #6f635b; line-height: 1.65; margin: 0; }
.stbh-faq__intro a { color: var(--stbh-brand); font-weight: 500; text-decoration: none; }
.stbh-faq__intro a:hover { text-decoration: underline; text-underline-offset: 3px; }
.stbh-faq__item { border-top: 1px solid #e7e5e2; }
.stbh-faq__item:last-child { border-bottom: 1px solid #e7e5e2; }
.stbh-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0;
	margin: 0;
	font-weight: 600;
	font-size: 1.12rem;
	color: var(--stbh-ink);
}
.stbh-faq__item summary::-webkit-details-marker { display: none; }
.stbh-faq__item[open] > summary { margin-bottom: 0; }
.stbh-faq__plus {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--stbh-ink);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	transition: transform .35s ease, background .2s ease;
}
.stbh-faq__item[open] .stbh-faq__plus { transform: rotate(45deg); background: var(--stbh-brand); }
.stbh-faq__item > p { margin: 0; padding: 0 60px 24px 0; color: #55524e; line-height: 1.65; }

/* Antworten gleiten sanft auf und zu (natives details-Accordion, Chrome 131+;
   ältere Browser öffnen ohne Animation) */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
}
.stbh-faq__item::details-content {
	block-size: 0;
	overflow: clip;
	opacity: 0;
	transition: block-size .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease,
		content-visibility .45s allow-discrete;
}
.stbh-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* ---------- Vollflächige Video-Sektion ---------- */
.stbh-video {
	margin-inline: calc(50% - 50vw + 50px);
	margin-bottom: 60px;
}
.stbh-video video {
	display: block;
	width: 100%;
	height: calc(100vh - 330px);
	min-height: 420px;
	object-fit: cover;
	border-radius: 28px;
}

/* ---------- Bild-Sektion mit überlappender Text-Kachel ---------- */
.stbh-feature {
	position: relative;
	margin-inline: calc(50% - 50vw + 50px);
}
/* Bildfeld auf FAQ-Breite begrenzt; die Kachel bleibt im Bild */
.stbh-feature__inner {
	position: relative;
	max-width: 1344px; /* optische Breite der FAQ-Karte (1200 + Innenabstände) */
	margin-inline: auto;
}
.stbh-feature__img {
	display: block;
	width: 100%;
	height: clamp(420px, 56vw, 700px);
	object-fit: cover;
	border-radius: 28px;
}
.stbh-feature__panel {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 560px;
	background: #fff;
	border-radius: 0 28px 0 28px;
	padding: clamp(30px, 4vw, 56px) clamp(30px, 4vw, 56px) clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px);
}
.stbh-feature__panel h2 {
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.7rem, 2.8vw, 2.6rem);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--stbh-ink);
	margin: 0 0 26px;
}
.stbh-feature__panel hr { border: 0; border-top: 1px solid #e7e5e2; margin: 0 0 26px; }
.stbh-feature__panel p { color: #55524e; line-height: 1.65; margin: 0 0 28px; }
.stbh-cta {
	display: inline-flex;
	align-items: center;
	padding: 14px 26px;
	border-radius: 999px;
	background: var(--stbh-brand);
	color: #fff;
	font-weight: 500;
	font-size: .92rem;
	line-height: 1;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.stbh-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--stbh-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.stbh-cta:hover { color: #fff; text-decoration: none; }
.stbh-cta:hover::before { transform: scaleX(1); }

/* ---------- Bildkarte als Wisch-Slider: drei Inhalte an derselben Stelle ---------- */
.stbh-stack__frame { position: relative; max-width: 1344px; margin-inline: auto; }
.stbh-stack__viewport { overflow: hidden; border-radius: 28px; }
/* Alle Karten liegen in derselben Rasterzelle, also exakt übereinander. Das Skript
   blendet sie am Scrollfortschritt ineinander — kein Schieben, kein harter Wechsel. */
.stbh-stack__track { display: grid; touch-action: pan-y; }
/* Doppelte Klasse, weil .stbh-feature__inner weiter unten in der Datei steht und
   sonst bei gleicher Spezifität seine Breite gewinnt */
.stbh-feature__inner.stbh-stack__card {
	grid-area: 1 / 1;
	max-width: none;
	margin-inline: 0;
	user-select: none;
	will-change: transform, opacity;
}
/* Ohne Skript ist nur die erste Karte zu sehen */
.stbh-stack__card:not(:first-child) { clip-path: inset(0 0 100% 0); }
.stbh-stack__card .stbh-feature__img { will-change: transform; }
.stbh-stack__card .stbh-feature__img { border-radius: 0; pointer-events: none; }
/* Dunkle Pille, damit die Punkte auf hellen wie dunklen Bildstellen lesbar bleiben */
.stbh-stack__dots {
	position: absolute;
	right: 28px;
	/* oben statt unten: unten rechts sitzt die feste „Anfragen“-Pille */
	top: 28px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(20, 18, 18, .38);
	backdrop-filter: blur(6px);
}
.stbh-stack__dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background .25s ease, width .25s ease;
}
.stbh-stack__dots button.is-active { background: #fff; width: 24px; }

/* ---------- Vorteile: drei Karten mit Icon auf dem Taupe-Band ---------- */
.stbh-benefits {
	margin: 0;
	margin-inline: calc(50% - 50vw);
	padding: var(--stbh-space) 50px;
	background: #fff;
	border-radius: 0 0 56px 56px;
	font-family: "Montserrat", -apple-system, sans-serif;
}
.stbh-benefits *, .stbh-benefits *::before, .stbh-benefits *::after { box-sizing: border-box; }
.stbh-benefits__inner { max-width: 1344px; margin-inline: auto; }
.stbh-benefits__eyebrow {
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--stbh-brand);
	margin: 0;
}
.stbh-benefits h2 {
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.015em;
	color: var(--stbh-ink);
	margin: 14px 0 0;
}
.stbh-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 52px;
}
.stbh-benefit {
	display: flex;
	flex-direction: column;
	min-height: 420px;
	padding: 40px 34px 36px;
	background: #f6f5f3;
	border-radius: 28px;
}
.stbh-benefit__icon { color: var(--stbh-brand); }
.stbh-benefit__icon svg { width: 34px; height: 34px; display: block; }
.stbh-benefit h3 {
	font-family: inherit;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--stbh-ink);
	margin: auto 0 0;
	padding-top: 48px;
}
.stbh-benefit p {
	color: #55524e;
	font-size: .98rem;
	line-height: 1.65;
	margin: 12px 0 0;
	max-width: 34ch;
}
@media (max-width: 900px) {
	.stbh-benefits { padding: var(--stbh-space) 24px; }
	.stbh-benefits__grid { grid-template-columns: 1fr; }
	.stbh-benefit { min-height: 0; }
	.stbh-benefit h3 { padding-top: 36px; }
}

/* ---------- Bewertungs-Slider: dunkle Fläche direkt nach dem Taupe-Band ---------- */
.stbh-quotes {
	margin: 0;
	margin-inline: calc(50% - 50vw);
	padding: var(--stbh-space) 50px;
	background: var(--stbh-taupe);
	font-family: "Montserrat", -apple-system, sans-serif;
}
.stbh-quotes *, .stbh-quotes *::before, .stbh-quotes *::after { box-sizing: border-box; }
.stbh-quotes h2 {
	font-family: "Nothing You Could Do", "Snell Roundhand", cursive;
	font-size: clamp(2rem, 3.4vw, 3.2rem);
	font-weight: 400;
	-webkit-text-stroke: .6px currentColor;
	letter-spacing: 0;
	color: var(--stbh-brand);
	text-align: center;
	margin: 0 0 44px;
}
.stbh-quotes__viewport { overflow: hidden; max-width: 1344px; margin-inline: auto; }
.stbh-quotes__track {
	display: flex;
	gap: 20px;
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}
.stbh-quote {
	flex: 0 0 calc((100% - 40px) / 3);
	margin: 0;
	background: #f6f5f3;
	border-radius: 28px;
	padding: 40px 34px 32px;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.stbh-quote__mark {
	font-family: Georgia, serif;
	font-size: 2.2rem;
	line-height: 1;
	color: var(--stbh-brand);
}
.stbh-quote blockquote {
	margin: auto 0;
	padding: 18px 0;
	font-family: inherit;
	font-size: 1.06rem;
	line-height: 1.6;
	color: var(--stbh-ink);
}
.stbh-quote figcaption { color: #6f635b; font-size: .88rem; margin-top: auto; }
.stbh-quotes__nav { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.stbh-quotes__nav button {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	color: var(--stbh-ink);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.stbh-quotes__nav button:hover:not(:disabled) { background: var(--stbh-brand); color: #fff; }
.stbh-quotes__nav button:disabled { opacity: .3; cursor: default; }

/* Schwebender Kontakt-Pill: Status-Punkt + Avatar + „Anfragen" → /kontakt/ */
.stbh-contactpill {
	position: fixed;
	right: 50px;
	bottom: 24px;
	z-index: 150;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: #4c4c4c;
	color: #fff;
	border-radius: 999px;
	padding: 8px 28px 8px 8px;
	font-weight: 500;
	font-size: 1.05rem;
	text-decoration: none;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
	overflow: hidden;
}
/* Hover wie die anderen Buttons: weinrote Fläche fährt von links durch */
.stbh-contactpill::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--stbh-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.stbh-contactpill { transition: transform .35s cubic-bezier(.65, 0, .35, 1), opacity .25s ease; }
/* Sobald der Footer im Blick ist, macht die Pill den Links Platz. */
.stbh-contactpill.is-tucked { transform: translateY(160%); opacity: 0; pointer-events: none; }
.stbh-contactpill:hover { color: #fff; text-decoration: none; }
.stbh-contactpill:hover::before { transform: scaleX(1); }
.stbh-contactpill__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--stbh-taupe);
	background-size: cover;
	background-position: center;
	display: inline-block;
}

/* Kurz-Kontaktfeld: geht über dem Anfragen-Pill auf */
.stbh-anfrage {
	position: fixed;
	right: 50px;
	bottom: 100px;
	z-index: 200;
	width: 340px;
	max-width: calc(100vw - 28px);
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
	padding: 24px;
}
.stbh-anfrage[hidden] { display: none; }
.stbh-anfrage h3 {
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--stbh-ink);
	margin: 0 0 16px;
}
.stbh-anfrage__close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: none;
	border: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: #9a968f;
	cursor: pointer;
	padding: 4px;
}
.stbh-anfrage__close:hover { color: var(--stbh-ink); }
.stbh-anfrage form { display: flex; flex-direction: column; gap: 12px; }
.stbh-anfrage label { display: block; margin: 0; }
.stbh-anfrage input:not(.stbh-anfrage__hp):not([type="checkbox"]),
.stbh-anfrage textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #e7e5e2;
	border-radius: 12px;
	font: inherit;
	font-size: .92rem;
	line-height: 1.4;
	color: var(--stbh-ink);
	background: #fff;
	resize: none;
}
.stbh-anfrage input::placeholder, .stbh-anfrage textarea::placeholder { color: #6f635b; }
.stbh-anfrage input:focus, .stbh-anfrage textarea:focus {
	outline: none;
	border-color: var(--stbh-brand);
	box-shadow: 0 0 0 1px var(--stbh-brand);
}
.stbh-anfrage .stbh-cta { border: 0; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 500; align-self: flex-start; }
.stbh-anfrage label.stbh-anfrage__ds { display: flex; align-items: flex-start; gap: 8px; font-size: .78rem; color: #6f635b; line-height: 1.45; }
.stbh-anfrage__ds input { flex: 0 0 auto; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; accent-color: var(--stbh-brand); }
.stbh-anfrage__ds a { color: var(--stbh-brand); font-weight: 500; text-decoration: none; }
.stbh-anfrage__ds a:hover { text-decoration: underline; }
.stbh-anfrage__ok { color: #2f6d3f; background: #e7f1e7; border-radius: 12px; padding: 14px 16px; margin: 0; line-height: 1.5; }
.stbh-anfrage__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Footer ---------- */
.stbh-faqwrap + .stbh-footer { margin-top: 0; border-radius: 0; }
.stbh-footer {
	background: var(--stbh-ink);
	color: #cfcfcf;
	margin-top: 60px;
	border-radius: 56px 56px 0 0;
	/* Unten Luft für die fest sitzende Anfragen-Pill (24px Abstand + 62px Höhe),
	   damit die Rechtslinks auch ohne JavaScript nie darunter liegen. */
	padding: 44px clamp(24px, 5vw, 64px) 110px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	font-size: .88rem;
}
.stbh-footer__brand { color: #fff; font-weight: 600; font-size: 1.05rem; }
.stbh-footer__links { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.stbh-footer__links a { color: #cfcfcf; text-decoration: none; }
.stbh-footer__links a:hover { color: #fff; }

/* Ab hier trägt die Zeile die Hauptnavigation nicht mehr — der Burger, der
   ohnehin immer daneben steht, übernimmt sie vollständig. */
@media (max-width: 1100px) {
	/* Direktes Kind: das Burger-Panel ist ebenfalls ein <nav>, steckt aber im
	   <details> — ohne das „>" würde es hier mit ausgeblendet und das Menü
	   ginge nie auf. */
	.stbh-nav__left > nav { display: none; }
}

@media (max-width: 860px) {
	:root { --stbh-space: 64px; }
	.stbh-quotes { margin-top: 0; margin-inline: calc(50% - 50vw); padding: var(--stbh-space) 14px; }
	body.home .stbh-feature { padding: var(--stbh-space) 14px; }
	.stbh-quote { flex: 0 0 100%; min-height: 0; padding: 30px 24px 26px; }
	.stbh-feature { margin-inline: calc(50% - 50vw + 14px); }
	.stbh-feature__img { height: 300px; border-radius: 20px; }
	.stbh-feature__panel { position: static; max-width: none; border-radius: 0; padding: 26px 22px 30px; }
	.stbh-faqwrap { margin-top: var(--stbh-space); border-radius: 40px 40px 0 0; padding: var(--stbh-space) 14px 0; }
	.stbh-faq { grid-template-columns: 1fr; }
	.stbh-faq__item summary { font-size: 1rem; padding: 18px 0; }
	.stbh-faq__item > p { padding-right: 0; }
	.stbh-stage { padding: 0 14px 10px; }
	.stbh-hero { height: 180px; }
	/* Beide Regeln oben stehen später im Stylesheet als die Video-Varianten und
	   haben dieselbe Spezifität — ohne diese zwei Zeilen wird die Bühne auf der
	   Startseite auf 180px gestaucht und bekommt Seitenränder. */
	.stbh-stage--video { padding: 0; }
	.stbh-hero--video { height: 100vh; height: 100svh; min-height: 480px; border-radius: 0; }
	.stbh-nav { padding: 14px 22px 12px; gap: 10px; }
	.stbh-nav__left > nav { display: none; }
	.stbh-brand { font-size: 1.15rem; }
	.stbh-account__name, .stbh-credits { display: none; }
	.stbh-copy h1 { font-size: 1.8rem; }
	/* Die Wortmarke darf schrumpfen und notfalls kürzen, statt die Zeile
	   aufzusprengen — sie steht sonst über dem rechten Block. */
	.stbh-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	body.admin-bar .stbh-nav { top: 46px; }
}

/* Unter 600px passen Wortmarke, Ton, „Anmelden" und die Konto-Pille nicht mehr
   nebeneinander — der rechte Block ragte aus dem Fenster und wurde vom
   overflow:hidden des Hero abgeschnitten, die Knöpfe waren also spurlos weg.
   Beide Wege stehen im Burger. */
@media (max-width: 600px) {
	.stbh-nav__right > a:not(.stbh-pill) { display: none; }
	.stbh-nav__right > .stbh-pill { display: none; }
}

/* Ton an/aus im Kopf: aus = durchgestrichen, an = Wellen */
.stbh-sound {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 999px;
	background: rgba(255, 255, 255, .16); color: #fff;
	cursor: pointer; transition: background .2s ease, color .2s ease;
}
.stbh-sound svg { width: 20px; height: 20px; display: block; }
.stbh-sound:hover { background: rgba(255, 255, 255, .3); }
.stbh-sound .stbh-sound__wave { opacity: 0; transition: opacity .25s ease; }
.stbh-sound.is-on .stbh-sound__wave { opacity: 1; }
.stbh-sound.is-on .stbh-sound__off { opacity: 0; }
.stbh-sound__off { transition: opacity .25s ease; }
.stbh-nav.is-light .stbh-sound { background: rgba(37, 39, 41, .08); color: var(--stbh-ink); }
.stbh-nav.is-light .stbh-sound:hover { background: rgba(37, 39, 41, .16); }
@media (max-width: 860px) { .stbh-sound { width: 34px; height: 34px; } }

/* Vorspann über der Bildkarte: füllt die Bühne, damit die Karte erst beim
   Weiterscrollen auftaucht. Mittig, damit er als eigener Auftritt liest. */
.stbh-stack__intro {
	max-width: 900px;
	margin: 0 auto var(--stbh-space);
	/* Bühnenhöhe abzüglich Navi und Sektionsabstand — die Karte bleibt darunter */
	min-height: calc(100svh - var(--stbh-space) - var(--stbh-dock, 112px));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--stbh-ink);
}
.stbh-stack__intro h2 {
	font-family: "Montserrat", -apple-system, sans-serif;
	font-size: clamp(2.4rem, 5vw, 4.2rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--stbh-ink);
	margin: 0;
	max-width: 16ch;
}
.stbh-stack__lead {
	margin: 26px 0 0;
	max-width: 52ch;
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	line-height: 1.65;
	color: #55524e;
}
.stbh-stack__intro .stbh-cta { margin-top: 36px; }

@media (max-width: 860px) {
	.stbh-stack__intro {
		/* Auf dem Handy trägt die Bühnenhöhe nicht mehr: der Text steht dann
		   mittig in einer fast leeren Fläche. Also nur so hoch wie nötig. */
		min-height: 0;
		padding: 8px 0 0;
		margin-bottom: 40px;
	}
	.stbh-stack__intro h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.stbh-stack__lead { font-size: 1rem; margin-top: 20px; }
}