/* =====================================================================
   HS Meta Boxes Content Template – Frontend-Styles
   Orientiert an einem modernen "Care Monitor"-Landingpage-Design.
   Alle Custom-Properties beginnen mit --hsmbct-.
   ===================================================================== */

:root {
	--hsmbct-font:           'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
	--hsmbct-primary:        #008a69;
	--hsmbct-primary-dark:   #006f54;
	--hsmbct-primary-ghost:  #f0faf6;
	--hsmbct-secondary:      #FF7900;
	--hsmbct-text:           #636363;
	--hsmbct-muted:          #636363;
	--hsmbct-gray-dark:      #636363;
	--hsmbct-dark:           #1a1a1a;
	--hsmbct-heading:        #1a1a1a;
	--hsmbct-white:          #ffffff;
	--hsmbct-gray-light:     #F4F4F4;
	--hsmbct-border:         #e0e0e0;
	--hsmbct-border-green:   #d4e8e2;
	--hsmbct-radius:         12px;
	--hsmbct-radius-sm:      8px;
	--hsmbct-shadow:         0 1px 4px rgba(0, 0, 0, 0.08);
	--hsmbct-maxw:           1080px;
	/* Standard-Inhaltsbreite der Sektionen (max. 1100px, responsiv abgestuft). */
	--hsmbct-container:      1100px;
}

/* Responsive Marken fuer die Sektionsbreite: max. 1100px, dann Abstufungen. */
@media (max-width: 1200px) {
	:root { --hsmbct-container: 990px; }
}
@media (max-width: 992px) {
	:root { --hsmbct-container: 880px; }
}
@media (max-width: 782px) {
	:root { --hsmbct-container: 100%; }
}

/* =====================================================================
   DESIGN-THEMES – ueber die Design-Metabox waehlbar. Jede Klasse
   ueberschreibt nur --hsmbct-*-Variablen; einzelne Werte lassen sich
   zusaetzlich per Inline-Style (Design-Metabox) feinjustieren.
   ===================================================================== */

/* VmedD / Editorial: warme Neutraltoene, Schibsted Grotesk, weichere Radien. */
.hsmbct-theme--vmedd {
	--hsmbct-font:          'Schibsted Grotesk', system-ui, -apple-system, "Segoe UI", sans-serif;
	--hsmbct-text:          #5f5f58;
	--hsmbct-muted:         #8a877e;
	--hsmbct-gray-dark:     #5f5f58;
	--hsmbct-heading:       #1c1c1a;
	--hsmbct-dark:          #1c1c1a;
	--hsmbct-gray-light:    #efede7;
	--hsmbct-border:        #eae8e2;
	--hsmbct-border-green:  #d7e7e0;
	--hsmbct-primary-ghost: #e7f1ed;
	--hsmbct-radius:        16px;
	--hsmbct-radius-sm:     12px;
	--hsmbct-shadow:        0 12px 32px rgba(0, 0, 0, 0.10);
}
.hsmbct-page.hsmbct-theme--vmedd {
	background: #f5f4f0;
}

/* Blau / Corporate: klassisches teejit-Blau statt Gruen. */
.hsmbct-theme--blue {
	--hsmbct-primary:        #28658c;
	--hsmbct-primary-dark:   #1f4f6e;
	--hsmbct-primary-ghost:  #eef4f8;
	--hsmbct-border-green:   #d3e2ec;
}

/* ── Grundlayout ──────────────────────────────────────────────────── */
.hsmbct-main {
	font-family: var(--hsmbct-font);
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
	font-size: 15px;
	line-height: 1.6;
	/* Eigener Stapelkontext: haelt alle internen z-index (z.B. Header-Inhalt)
	   im Template-Bereich – so ueberlagert der Inhalt nie das (ausgeklappte)
	   Menue des Themes, u.a. auf iOS Safari beim Scrollen nach ganz oben. */
	position: relative;
	z-index: 0;
	isolation: isolate;
}
.hsmbct-page * {
	box-sizing: border-box;
}
/* Der Theme-Wrapper traegt die Theme-Klasse + Inline-Overrides; die Schrift
   liest er aus der (ggf. ueberschriebenen) --hsmbct-font-Variable. */
.hsmbct-page {
	font-family: var(--hsmbct-font);
}

/* Theme-Wrapper freigeben, damit die Sektionen ihre eigene Breite bestimmen
   und randlos (ohne Padding) ueber die volle Breite laufen. */
.content_wrap:has(.hsmbct-main) {
	width: auto;
	padding: 0;
}

.hsmbct-section {
	position: relative;
	/* Das Band ist immer volle Breite – dadurch spannen Hintergrundfarbe,
	   Rahmen und Schatten stets ueber die komplette Breite. Padding nur
	   oben/unten, kein Padding links/rechts. */
	width: 100%;
	padding: 48px 0;
}
/* Inhalt: standardmaessig auf die responsive Container-Breite begrenzt
   (max. 1100px, dann 990px/880px/…) – gilt fuer ALLE Sektionstypen, inkl.
   Header, Image-Divider und Fullwidth. Per Sektions-Option (--hsmbct-sec-maxw)
   individuell ueberschreibbar; das farbige Band bleibt dahinter voll sichtbar. */
.hsmbct-section > * {
	width: var(--hsmbct-sec-w, 100%);
	max-width: min(100%, var(--hsmbct-sec-maxw, var(--hsmbct-container, 1100px)));
	margin-left: auto;
	margin-right: auto;
}
/* Option „Responsive Breakpoints ueberschreiben": die vom Plugin gesetzte
   responsive Breite wird entfernt; die Breite wird durch eigenes CSS
   definiert (z.B. ueber die Sektions-ID/Anker oder diese Klasse). */
.hsmbct-section--custom-width > * {
	width: auto;
	max-width: none;
}
/* Sektions-Linkfarbe: nur Inhalts-Links (keine Buttons/Trust/Logos).
   Standard = Primaerfarbe, per Sektions-Option ueberschreibbar. */
.hsmbct-header-html a,
.hsmbct-measure a,
.hsmbct-ctasec-text a,
.hsmbct-fullwidth a,
.hsmbct-textimages a,
.hsmbct-imgtext-content a {
	color: var(--hsmbct-sec-link, var(--hsmbct-primary));
}

/* =====================================================================
   HEADER
   ===================================================================== */
.hsmbct-header {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

/* Vollflaechiges Hintergrundbild (als <img>, object-fit, lazy) */
.hsmbct-header--bg {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hsmbct-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
}
.hsmbct-header--fixed .hsmbct-bg-img {
	position: fixed;
}
.hsmbct-header--bg .hsmbct-header-inner {
	position: relative;
	z-index: 2;
	max-width: var(--hsmbct-hdr-inner-maxw, 640px);
	padding: 40px 24px;
}
/* Schlichter Header ohne Bild: Inhalt volle Breite (per Option begrenzbar). */
.hsmbct-header--plain {
	position: relative;
}
.hsmbct-header--plain .hsmbct-header-inner {
	max-width: var(--hsmbct-hdr-inner-maxw, 100%);
	margin-left: auto;
	margin-right: auto;
}
/* Lesbarkeits-Overlay/Farbverlauf – NUR wenn ein Bild hinterlegt und der
   Verlauf aktiviert ist (Klasse .hsmbct-header--overlay). Farben/Winkel
   kommen aus den Header-Optionen ueber die CSS-Variable. */
.hsmbct-header--bg.hsmbct-header--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--hsmbct-hdr-overlay, linear-gradient(180deg, rgba(0, 0, 0, 0.20), rgba(0, 0, 0, 0.45)));
}
/* Heller Text nur ueber Bild (sonst Standard-Textfarben, damit ohne Bild
   auf hellem Hintergrund lesbar). */
.hsmbct-header--bg.hsmbct-header--has-img .hsmbct-header-inner,
.hsmbct-header--bg.hsmbct-header--has-img .hsmbct-h1,
.hsmbct-header--bg.hsmbct-header--has-img .hsmbct-h2 {
	color: var(--hsmbct-white);
}
.hsmbct-header--bg.hsmbct-header--has-img .hsmbct-sub,
.hsmbct-header--bg.hsmbct-header--has-img .hsmbct-sub2 {
	color: rgba(255, 255, 255, 0.9);
}
/* Bild-Caption: als Block UNTER dem Bild. Ausrichtung + optionaler
   Hintergrund/Textfarbe kommen ueber Klassen bzw. Inline-Style. */
.hsmbct-header-caption {
	display: flex;
	padding: 6px 0 0;
}
.hsmbct-header-caption--left {
	justify-content: flex-start;
}
.hsmbct-header-caption--center {
	justify-content: center;
}
.hsmbct-header-caption--right {
	justify-content: flex-end;
}
.hsmbct-header-caption > span {
	font-size: 12px;
	line-height: 1.4;
	color: var(--hsmbct-muted);
	padding: 4px 8px;
	border-radius: 4px;
}

/* Bild neben Text (links / rechts) */
.hsmbct-header--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
	background: transparent;
	border: none;
}
.hsmbct-header--split.hsmbct-header--right {
	direction: rtl;
}
.hsmbct-header--split.hsmbct-header--right > * {
	direction: ltr;
}
.hsmbct-header-media {
	position: relative;
	min-height: 320px;
	margin: 0;
	border-radius: var(--hsmbct-radius);
	overflow: hidden;
}
.hsmbct-header--split .hsmbct-header-inner {
	padding: 40px;
}
/* Bild + Caption stapeln (Caption unter dem Bild) in der Bild-Spalte. */
.hsmbct-header-media-col {
	display: flex;
	flex-direction: column;
}

/* Header-Typografie */
.hsmbct-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hsmbct-primary);
	line-height: 1.2;
}
.hsmbct-eyebrow-icon {
	display: inline-flex;
	align-items: center;
	color: inherit;
}
.hsmbct-eyebrow-icon .hsmbct-icon {
	width: 18px;
	height: 18px;
	font-size: 18px;
}
/* Ueber Bild: Signalfarbe fuer guten Kontrast auf dem dunklen Overlay. */
.hsmbct-header--has-img .hsmbct-eyebrow {
	color: var(--hsmbct-secondary);
}
/* Eyebrow als eigenstaendiger Lead-Block (Sektionen ohne Ueberschrift). */
.hsmbct-section-lead {
	margin: 0 auto 16px;
}
.hsmbct-h1 {
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
	margin: 0 0 14px;
}
.hsmbct-sub {
	font-size: 16px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	margin: 0 0 20px;
	line-height: 1.6;
}
.hsmbct-h2 {
	font-size: 20px;
	font-weight: 500;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
	margin: 16px 0 8px;
}
.hsmbct-sub2 {
	font-size: 15px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	margin: 0 0 20px;
}
.hsmbct-header-html {
	color: inherit;
}
.hsmbct-header-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}
.hsmbct-header--bg .hsmbct-header-ctas {
	justify-content: center;
}

/* =====================================================================
   CTA-BUTTON
   ===================================================================== */
.hsmbct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--hsmbct-btn-radius, var(--hsmbct-radius-sm));
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	/* Farben, Rahmen und Hover kommen aus den CTA-Optionen (CSS-Variablen). */
	border: var(--hsmbct-btn-bw, 2px) solid var(--hsmbct-btn-border, var(--hsmbct-btn-bg, var(--hsmbct-primary)));
	background-color: var(--hsmbct-btn-bg, var(--hsmbct-primary));
	color: var(--hsmbct-btn-color, var(--hsmbct-white));
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
/* Standard-Hover (keine eigenen Hover-Farben gesetzt): leicht abdunkeln. */
.hsmbct-btn:hover {
	filter: brightness(0.93);
	text-decoration: none;
}
/* Eigene Hover-Farben gesetzt: Filter aus, definierte Farben nutzen. */
.hsmbct-btn--customhover:hover {
	filter: none;
	background-color: var(--hsmbct-btn-hbg, var(--hsmbct-btn-bg, var(--hsmbct-primary)));
	color: var(--hsmbct-btn-hcolor, var(--hsmbct-btn-color, var(--hsmbct-white)));
	border-color: var(--hsmbct-btn-hborder, var(--hsmbct-btn-border, var(--hsmbct-btn-bg, var(--hsmbct-primary))));
}
.hsmbct-btn:active {
	transform: translateY(1px);
}
.hsmbct-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

/* =====================================================================
   CARD-TOGGLE-SLIDER
   ===================================================================== */
.hsmbct-cardslider {
	position: relative;
	/* Container-Kontext fuer die Tab-Umschaltung (reagiert auf die Slider-Breite). */
	container: hsmbct-cardslider / inline-size;
	/* Ueberschreibbar per Slider-Optionen (Inline-Style am Wrapper). */
	--hsmbct-card-active-bg: var(--hsmbct-primary-ghost);
	--hsmbct-panel-active-bg: var(--hsmbct-primary-ghost);
}
.hsmbct-cardslider-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}
.hsmbct-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	background: var(--hsmbct-white);
	border: 2px solid var(--hsmbct-border-green);
	border-radius: var(--hsmbct-radius);
	padding: 18px 16px;
	cursor: pointer;
	font-family: inherit;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.hsmbct-card:hover {
	border-color: var(--hsmbct-primary);
	background: var(--hsmbct-primary-ghost);
}
.hsmbct-card.is-active {
	border-color: var(--hsmbct-primary);
	background: var(--hsmbct-card-active-bg);
}
.hsmbct-card-icon {
	color: var(--hsmbct-primary);
	display: inline-flex;
}
.hsmbct-card-title {
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
}
.hsmbct-card-sub {
	display: block;
	width: 100%;
	font-size: 12px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	line-height: 1.45;
}
.hsmbct-card-cta {
	margin-top: 8px;
}

.hsmbct-cardslider-panels {
	position: relative;
}
.hsmbct-panel {
	background: var(--hsmbct-primary-ghost);
	border: 1px solid var(--hsmbct-border-green);
	border-radius: var(--hsmbct-radius);
	padding: 26px 28px;
}
.hsmbct-panel.is-active {
	background: var(--hsmbct-panel-active-bg);
}

/* ── Register/Tabs (opt-in) – NUR auf breiterem Slider (Desktop). Auf schmalem
   Slider wird der Card-Slider generell als Accordion dargestellt (siehe unten). */
@container hsmbct-cardslider (min-width: 561px) {
	.hsmbct-cardslider--tabs .hsmbct-cardslider-cards {
		margin-bottom: 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
	}
	.hsmbct-cardslider--tabs .hsmbct-cardslider-cards > .hsmbct-card {
		flex: 1 1 0;
		min-width: 0;
	}
	.hsmbct-cardslider--tabs .hsmbct-cardslider-panels {
		position: relative;
		z-index: 1;
	}
	.hsmbct-cardslider--tabs .hsmbct-panel {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}
	.hsmbct-cardslider--tabs .hsmbct-card:not(.is-active) {
		margin-bottom: 10px;
	}
	.hsmbct-cardslider--tabs .hsmbct-card.is-active {
		position: relative;
		z-index: 2;
		margin-bottom: -2px;
		border: 2px solid var(--hsmbct-border-green);
		border-bottom: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* ── Mobile: Card-Slider als Accordion ───────────────────────────────
   Karte = Kopfzeile (Icon LINKS neben Titel/Untertitel, Chevron rechts),
   Panel klappt direkt darunter auf. Volle Breite. Karten & Panels werden per
   display:contents zu direkten Flex-Kindern und per --hsmbct-o verschachtelt;
   die Toggle-Logik im JS haelt genau ein Panel offen. Umschaltpunkt je
   Kartenzahl: 2->480, 3->700, 4->920, 5->1140, 6+ ->1360 px. */
@container hsmbct-cardslider (max-width: 400px) {
	.hsmbct-cardslider--cards-1 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider--cards-1 .hsmbct-cardslider-cards,
	.hsmbct-cardslider--cards-1 .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card,
	.hsmbct-cardslider--cards-1 .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card-title,
	.hsmbct-cardslider--cards-1 .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider--cards-1 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider--cards-1 .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider--cards-1 .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
}
@container hsmbct-cardslider (max-width: 480px) {
	.hsmbct-cardslider--cards-2 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider--cards-2 .hsmbct-cardslider-cards,
	.hsmbct-cardslider--cards-2 .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card,
	.hsmbct-cardslider--cards-2 .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card-title,
	.hsmbct-cardslider--cards-2 .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider--cards-2 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider--cards-2 .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider--cards-2 .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
}
@container hsmbct-cardslider (max-width: 700px) {
	.hsmbct-cardslider--cards-3 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider--cards-3 .hsmbct-cardslider-cards,
	.hsmbct-cardslider--cards-3 .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card,
	.hsmbct-cardslider--cards-3 .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card-title,
	.hsmbct-cardslider--cards-3 .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider--cards-3 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider--cards-3 .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider--cards-3 .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
}
@container hsmbct-cardslider (max-width: 920px) {
	.hsmbct-cardslider--cards-4 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider--cards-4 .hsmbct-cardslider-cards,
	.hsmbct-cardslider--cards-4 .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card,
	.hsmbct-cardslider--cards-4 .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card-title,
	.hsmbct-cardslider--cards-4 .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider--cards-4 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider--cards-4 .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider--cards-4 .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
}
@container hsmbct-cardslider (max-width: 1140px) {
	.hsmbct-cardslider--cards-5 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider--cards-5 .hsmbct-cardslider-cards,
	.hsmbct-cardslider--cards-5 .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card,
	.hsmbct-cardslider--cards-5 .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card-title,
	.hsmbct-cardslider--cards-5 .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider--cards-5 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider--cards-5 .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider--cards-5 .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
}
@container hsmbct-cardslider (max-width: 1360px) {
	.hsmbct-cardslider--cards-6 {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider--cards-6 .hsmbct-cardslider-cards,
	.hsmbct-cardslider--cards-6 .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card,
	.hsmbct-cardslider--cards-6 .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card-title,
	.hsmbct-cardslider--cards-6 .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider--cards-6 .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider--cards-6 .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider--cards-6 .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
}
/* Fallback ohne Container-Query-Unterstuetzung: Accordion per Viewport. */
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
	.hsmbct-cardslider {
		display: flex;
		flex-direction: column;
		gap: 8px;
		/* volle Breite (bricht seitlichen Abstand von Theme/Sektion auf) */
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.hsmbct-cardslider .hsmbct-cardslider-cards,
	.hsmbct-cardslider .hsmbct-cardslider-panels {
		display: contents;
	}
	.hsmbct-cardslider .hsmbct-card,
	.hsmbct-cardslider .hsmbct-panel {
		order: var(--hsmbct-o, 0);
	}
	.hsmbct-cardslider .hsmbct-card {
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 14px;
		row-gap: 2px;
		align-items: center;
		text-align: left;
		width: auto;
		min-width: 0;
		margin: 0;
		position: relative;
		padding: 16px 44px 16px 18px;
		border: 2px solid var(--hsmbct-border-green);
		border-radius: var(--hsmbct-radius);
	}
	.hsmbct-cardslider .hsmbct-card:not(:has(.hsmbct-card-icon)) {
		grid-template-columns: 1fr;
	}
	.hsmbct-cardslider .hsmbct-card-icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}
	.hsmbct-cardslider .hsmbct-card-title,
	.hsmbct-cardslider .hsmbct-card-sub {
		grid-column: 2;
		width: auto;
		text-align: left;
	}
	.hsmbct-cardslider .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-title,
	.hsmbct-cardslider .hsmbct-card:not(:has(.hsmbct-card-icon)) .hsmbct-card-sub {
		grid-column: 1;
	}
	.hsmbct-cardslider .hsmbct-card-cta {
		grid-column: 1 / -1;
		margin-top: 8px;
	}
	.hsmbct-cardslider .hsmbct-card::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 18px;
		width: 9px;
		height: 9px;
		margin-top: -6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		opacity: .55;
		transition: transform .2s ease;
	}
	.hsmbct-cardslider .hsmbct-card.is-active::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}
	.hsmbct-cardslider .hsmbct-cardslider-panels .hsmbct-panel {
		display: none;
		position: static;
		opacity: 1;
		transform: none;
		inset: auto;
		margin: 0;
		width: 100%;
	}
	.hsmbct-cardslider .hsmbct-cardslider-panels .hsmbct-panel.is-active {
		display: block;
	}
	}
}

/* Toggle (fade) */
.hsmbct-cardslider[data-mode="toggle"] .hsmbct-panel,
.hsmbct-cardslider[data-transition="fade"] .hsmbct-panel {
	display: none;
}
.hsmbct-cardslider[data-mode="toggle"] .hsmbct-panel.is-active,
.hsmbct-cardslider[data-transition="fade"] .hsmbct-panel.is-active {
	display: block;
	animation: hsmbct-fade 0.3s ease;
}
@keyframes hsmbct-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Auto-Slider (Ueberlagerung) */
.hsmbct-cardslider[data-mode="auto"] .hsmbct-cardslider-panels {
	overflow: hidden;
}
.hsmbct-cardslider[data-mode="auto"] .hsmbct-panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}
.hsmbct-cardslider[data-mode="auto"] .hsmbct-panel.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.hsmbct-toptag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 14px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 500;
	margin-bottom: 14px;
	background: var(--hsmbct-primary);
	color: var(--hsmbct-white);
}
.hsmbct-panel-title {
	font-size: 19px;
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
	margin: 0 0 8px;
}
.hsmbct-panel-text {
	font-size: 14px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	line-height: 1.65;
	margin-bottom: 14px;
}
.hsmbct-panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.hsmbct-tag {
	background: var(--hsmbct-white);
	border: 1px solid var(--hsmbct-border-green);
	border-radius: 20px;
	padding: 4px 13px;
	font-size: 12px;
	color: var(--hsmbct-primary);
}
.hsmbct-panel-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Panel mit Bild: linker Block (Toptag oben + Text) + Bild rechts.
   Grid, damit der Toptag mobil UEBER dem Bild bleibt. Bildhoehe = Blockhoehe. */
.hsmbct-panel-body--has-media {
	display: grid;
	grid-template-columns: 1fr 40%;
	grid-template-areas:
		"toptag media"
		"main   media";
	column-gap: 24px;
}
.hsmbct-panel-body--has-media > .hsmbct-toptag {
	grid-area: toptag;
	align-self: start;
	justify-self: start;
	margin-bottom: 10px;
}
.hsmbct-panel-body--has-media > .hsmbct-panel-main {
	grid-area: main;
	min-width: 0;
}
.hsmbct-panel-body--has-media > .hsmbct-panel-media {
	grid-area: media;
}
.hsmbct-panel-media {
	display: flex;
	flex-direction: column;
	min-height: 160px;        /* dynamisch = Hoehe des linken Blocks (Grid) */
}
.hsmbct-panel-media__frame {
	position: relative;
	flex: 1 1 auto;
	min-height: 120px;
	border-radius: var(--hsmbct-radius);
	overflow: hidden;
}
.hsmbct-panel-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Bild-Caption (fuer alle Bilder): unter dem Bild oder im Bild (Overlay). */
.hsmbct-imgcap {
	display: flex;
	margin: 0;
}
.hsmbct-imgcap--left {
	justify-content: flex-start;
}
.hsmbct-imgcap--center {
	justify-content: center;
}
.hsmbct-imgcap--right {
	justify-content: flex-end;
}
.hsmbct-imgcap > span {
	font-size: 12px;
	line-height: 1.4;
	padding: 4px 8px;
}
.hsmbct-imgcap--below {
	padding: 6px 0 0;
}
.hsmbct-imgcap--below > span {
	color: var(--hsmbct-muted);
}
.hsmbct-imgcap--overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 8px;
	pointer-events: none;
}
.hsmbct-imgcap--overlay > span {
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
}
/* Medienspalte: Figure + „unter dem Bild"-Caption (imgtext/bullets). */
.hsmbct-media-col {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hsmbct-media-col > figure {
	flex: 1 1 auto;
	margin: 0;
}
/* Mobile (schmaler Slider): Toptag -> Bild -> restlicher Text. */
@container hsmbct-cardslider (max-width: 600px) {
	.hsmbct-panel-body--has-media {
		grid-template-columns: 1fr;
		grid-template-areas:
			"toptag"
			"media"
			"main";
		column-gap: 0;
		row-gap: 12px;
	}
	.hsmbct-panel-body--has-media > .hsmbct-toptag {
		margin-bottom: 0;
	}
	.hsmbct-panel-body--has-media > .hsmbct-panel-media {
		min-height: 0;
	}
	.hsmbct-panel-media__frame {
		aspect-ratio: 16 / 9;
		max-height: 200px;
		min-height: 0;
	}
}
@supports not (container-type: inline-size) {
	@media (max-width: 600px) {
		.hsmbct-panel-body--has-media {
			grid-template-columns: 1fr;
			grid-template-areas: "toptag" "media" "main";
			column-gap: 0;
			row-gap: 12px;
		}
		.hsmbct-panel-body--has-media > .hsmbct-toptag { margin-bottom: 0; }
		.hsmbct-panel-body--has-media > .hsmbct-panel-media { min-height: 0; }
		.hsmbct-panel-media__frame { aspect-ratio: 16 / 9; max-height: 200px; min-height: 0; }
	}
}

.hsmbct-cardslider-nav {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 18px;
}
.hsmbct-arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--hsmbct-border);
	background: var(--hsmbct-white);
	color: var(--hsmbct-primary);
	font-size: 18px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.hsmbct-arrow:hover {
	background: var(--hsmbct-primary-ghost);
}
.hsmbct-cardslider-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}
.hsmbct-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--hsmbct-border);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.hsmbct-dot.is-active {
	background: var(--hsmbct-primary);
	transform: scale(1.2);
}

/* =====================================================================
   TRUST-TEXT (Icon + Text nebeneinander)
   ===================================================================== */
.hsmbct-trusttext {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 40px;
}
.hsmbct-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
}
.hsmbct-trust-icon {
	display: inline-flex;
	color: var(--hsmbct-primary);
	flex-shrink: 0;
}
.hsmbct-trust-icon .hsmbct-icon {
	width: 20px;
	height: 20px;
	font-size: 20px;
}
a.hsmbct-trust-item:hover .hsmbct-trust-txt {
	color: var(--hsmbct-primary);
}

/* =====================================================================
   TRUST-LOGO (row / column / slider, Graustufe -> Farbe bei Hover)
   ===================================================================== */
.hsmbct-trustlogo {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	justify-content: center;
}
.hsmbct-trustlogo--column {
	flex-direction: column;
}
.hsmbct-trustlogo--slider {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	justify-content: flex-start;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
.hsmbct-trustlogo--slider .hsmbct-logo-item {
	scroll-snap-align: center;
	flex: 0 0 auto;
}
.hsmbct-logo-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
	transform-origin: center;
	will-change: transform;
}
/* Grow-Effekt: Logo waechst beim Hover/Fokus etwas an. */
.hsmbct-logo-item:hover,
.hsmbct-logo-item:focus-visible {
	transform: scale(1.12);
}
.hsmbct-logo-imgs {
	position: relative;
	display: inline-flex;
}
.hsmbct-logo-imgs img {
	display: block;
	max-height: 150px;
	max-width: 150px;
	height: auto;
	object-fit: contain;
	width: auto;
	transition: opacity 0.2s ease;
}
.hsmbct-logo-color {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.hsmbct-logo-item:hover .hsmbct-logo-color {
	opacity: 1;
}
.hsmbct-logo-item:hover .hsmbct-logo-gray {
	opacity: 0;
}

/* =====================================================================
   ICON / Hilfsklassen
   ===================================================================== */
.hsmbct-icon {
	display: inline-flex;
	vertical-align: middle;
	font-size: 24px;
}
.hsmbct-icon--svg,
img.hsmbct-icon {
	width: 24px;
	height: 24px;
}
.hsmbct-icon--svg svg {
	width: 100%;
	height: 100%;
	display: block;
}
.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Links ohne Text-Decoration (Trust-Bereiche) */
.hsmbct-nolink,
.hsmbct-nolink:hover,
.hsmbct-nolink:focus {
	text-decoration: none;
}

/* =====================================================================
   GEMEINSAM: Abschnitts-Kopf + Raster + Item-Typografie
   ===================================================================== */
.hsmbct-sec-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px;
}
.hsmbct-sec-heading {
	font-size: 26px;
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
	margin: 0 0 10px;
}
.hsmbct-sec-subtitle {
	font-size: 16px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	margin: 0;
}
.hsmbct-grid {
	display: grid;
	gap: 20px;
}
.hsmbct-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hsmbct-grid--2    { grid-template-columns: repeat(2, 1fr); }
.hsmbct-grid--3    { grid-template-columns: repeat(3, 1fr); }
.hsmbct-grid--4    { grid-template-columns: repeat(4, 1fr); }
.hsmbct-item-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
	margin: 12px 0 6px;
}
.hsmbct-item-text {
	font-size: 14px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	line-height: 1.6;
	margin: 0;
}
.hsmbct-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

/* ── Problem-Sektion ──────────────────────────────────────────────── */
.hsmbct-prob-item {
	background: var(--hsmbct-white);
	border: 1px solid var(--hsmbct-border);
	border-radius: var(--hsmbct-radius);
	padding: 22px 20px;
}
.hsmbct-prob-icon,
.hsmbct-feat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: var(--hsmbct-primary-ghost);
	color: var(--hsmbct-primary);
}
.hsmbct-prob-icon .hsmbct-icon,
.hsmbct-feat-icon .hsmbct-icon {
	width: 24px;
	height: 24px;
	font-size: 24px;
}

/* ── Feature-Sektion ──────────────────────────────────────────────── */
.hsmbct-feat-item {
	display: block;
	background: var(--hsmbct-white);
	border: 1px solid var(--hsmbct-border-green);
	border-radius: var(--hsmbct-radius);
	padding: 22px 20px;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.05s ease;
}
a.hsmbct-feat-item:hover {
	box-shadow: var(--hsmbct-shadow);
	transform: translateY(-2px);
}

/* ── Testimonials ─────────────────────────────────────────────────── */
.hsmbct-testi-item {
	margin: 0;
	background: var(--hsmbct-white);
	border: 1px solid var(--hsmbct-border);
	border-radius: var(--hsmbct-radius);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.hsmbct-testi-stars {
	color: var(--hsmbct-secondary);
	font-size: 16px;
	letter-spacing: 2px;
}
.hsmbct-testi-quote {
	margin: 0;
	font-size: 15px;
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
	line-height: 1.65;
	font-style: italic;
}
.hsmbct-testi-author {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
}
.hsmbct-testi-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.hsmbct-testi-meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.hsmbct-testi-name { color: var(--hsmbct-sec-heading, var(--hsmbct-dark)); font-size: 14px; }
.hsmbct-testi-role { color: var(--hsmbct-sec-text, var(--hsmbct-muted)); font-size: 12px; }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.hsmbct-faq-list {
	max-width: 760px;
	margin: 0 auto;
}
.hsmbct-faq {
	border: 1px solid var(--hsmbct-border);
	border-radius: var(--hsmbct-radius-sm);
	background: var(--hsmbct-white);
	margin-bottom: 10px;
}
.hsmbct-faq-q {
	cursor: pointer;
	list-style: none;
	padding: 16px 44px 16px 18px;
	position: relative;
	font-weight: 600;
	font-size: 15px;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
}
.hsmbct-faq-q::-webkit-details-marker { display: none; }
.hsmbct-faq-q::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--hsmbct-primary);
	transition: transform 0.15s ease;
}
.hsmbct-faq[open] .hsmbct-faq-q::after {
	content: "\2212"; /* minus */
}
.hsmbct-faq-a {
	padding: 0 18px 16px;
	font-size: 14px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	line-height: 1.65;
}

/* ── CTA-Sektion ──────────────────────────────────────────────────── */
.hsmbct-ctasec {
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}
.hsmbct-ctasec--left {
	text-align: left;
}
.hsmbct-ctasec--right {
	text-align: right;
}
.hsmbct-ctasec-heading {
	font-size: 26px;
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-dark));
	margin: 0 0 12px;
}
.hsmbct-ctasec-text {
	font-size: 16px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	margin: 0 0 8px;
	line-height: 1.6;
}
.hsmbct-ctasec .hsmbct-ctas {
	justify-content: center;
}
.hsmbct-ctasec--left .hsmbct-ctas {
	justify-content: flex-start;
}
.hsmbct-ctasec--right .hsmbct-ctas {
	justify-content: flex-end;
}

/* ── Fullwidth (Editor) ───────────────────────────────────────────── */
.hsmbct-fullwidth {
	line-height: 1.7;
}
.hsmbct-fullwidth img { max-width: 100%; height: auto; }

/* ── Image-Divider ────────────────────────────────────────────────── */
.hsmbct-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	border-radius: var(--hsmbct-radius);
}
.hsmbct-divider::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.35);
}
.hsmbct-divider-inner {
	position: relative;
	z-index: 2;
	padding: 32px 24px;
	max-width: 720px;
}
.hsmbct-divider-title {
	font-size: 30px;
	font-weight: 600;
	margin: 0 0 8px;
}
.hsmbct-divider-sub {
	font-size: 17px;
	margin: 0;
}

/* ── Bild & Text ──────────────────────────────────────────────────── */
.hsmbct-imgtext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}
.hsmbct-imgtext--right {
	direction: rtl;
}
.hsmbct-imgtext--right > * {
	direction: ltr;
}
/* Bild an der Aussenkante einruecken (Abstand an der Bildseite je Variante).
   Als margin, weil das Bild die Figure absolut ausfuellt – padding wuerde
   das Bild nicht sichtbar verschieben. Gilt fuer Figure und Medienspalte. */
.hsmbct-imgtext--left > .hsmbct-imgtext-media,
.hsmbct-imgtext--left > .hsmbct-media-col {
	margin-left: 24px;
}
.hsmbct-imgtext--right > .hsmbct-imgtext-media,
.hsmbct-imgtext--right > .hsmbct-media-col {
	margin-right: 24px;
}
.hsmbct-imgtext-media {
	position: relative;
	min-height: 320px;
	margin: 0;
	border-radius: var(--hsmbct-radius);
	overflow: hidden;
}
.hsmbct-imgtext-content {
	line-height: 1.7;
}
.hsmbct-imgtext-content img { max-width: 100%; height: auto; }

/* ── Text mit umflossenen Bildern ─────────────────────────────────── */
.hsmbct-textimages {
	line-height: 1.75;
}
.hsmbct-textimages::after {
	content: "";
	display: block;
	clear: both;
}
.hsmbct-textimages img {
	max-width: var(--hsmbct-ti-imgmax, 100%);
	height: auto;
	border: var(--hsmbct-ti-imgborder, none);
	border-radius: var(--hsmbct-ti-imgradius, 0);
	box-shadow: var(--hsmbct-ti-imgshadow, none);
}
.hsmbct-textimages .alignleft {
	float: left;
	margin: 6px 24px 16px 0;
	max-width: var(--hsmbct-ti-imgmax, 50%);
}
.hsmbct-textimages .alignright {
	float: right;
	margin: 6px 0 16px 24px;
	max-width: var(--hsmbct-ti-imgmax, 50%);
}
.hsmbct-textimages .aligncenter {
	display: block;
	margin: 16px auto;
}
.hsmbct-textimages .wp-caption { max-width: var(--hsmbct-ti-imgmax, 50%); }
.hsmbct-textimages .wp-caption-text {
	font-size: 12px;
	color: var(--hsmbct-sec-text, var(--hsmbct-muted));
	text-align: center;
	margin-top: 4px;
}

/* ── Info & Statistik (Eyebrow, Lead, Stat-Callout, Chips) ─────────── */
.hsmbct-infostat {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.hsmbct-infostat .hsmbct-h2 {
	font-size: 26px;
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-heading));
	margin: 8px 0 12px;
}
.hsmbct-lead {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--hsmbct-sec-heading, var(--hsmbct-heading));
	margin: 0 0 14px;
}
.hsmbct-measure {
	max-width: none;
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
	line-height: 1.7;
}
.hsmbct-measure p { margin: 0 0 12px; }
.hsmbct-measure p:last-child { margin-bottom: 0; }

/* Stat-Callout */
.hsmbct-stat-callout {
	display: flex;
	align-items: center;
	gap: 20px;
	background: var(--hsmbct-primary-ghost);
	border: 1px solid var(--hsmbct-border-green);
	border-left: 4px solid var(--hsmbct-primary);
	border-radius: var(--hsmbct-radius);
	padding: 22px 24px;
}
.hsmbct-stat-num {
	flex-shrink: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: var(--hsmbct-stat-accent, var(--hsmbct-primary));
}
.hsmbct-stat-txt {
	font-size: 14px;
	line-height: 1.55;
	color: var(--hsmbct-stat-text, var(--hsmbct-sec-text, var(--hsmbct-text)));
}

/* Chips */
.hsmbct-chips-heading {
	font-weight: 600;
	color: var(--hsmbct-sec-heading, var(--hsmbct-heading));
	margin: 0 0 12px;
}
.hsmbct-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.hsmbct-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--hsmbct-white);
	border: 1px solid var(--hsmbct-border);
	font-size: 14px;
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
}
.hsmbct-chip-icon {
	display: inline-flex;
	align-items: center;
	color: var(--hsmbct-chip-accent, var(--hsmbct-primary));
}
.hsmbct-chip-icon .hsmbct-icon {
	width: 18px;
	height: 18px;
	font-size: 18px;
}
.hsmbct-chip-icon .material-symbols-outlined {
	font-size: 18px;
}

/* Scroll-Einblendung fuer [data-reveal]-Bloecke und alle Item-Elemente.
   Nur mit JS aktiv; ohne JS oder bei reduzierter Bewegung bleibt alles
   sofort sichtbar. Armierung ohne Uebergang (kein Aufblitzen); JS entfernt
   die Klassen nach der Animation wieder, damit eigene Hover-Transitions der
   Items (z. B. feat-/logo-item) unveraendert bleiben. */
.hsmbct-page .is-revealing:not(.is-visible) {
	opacity: 0;
	transform: translateY(16px);
	transition: none;
	will-change: opacity, transform;
}
.hsmbct-page .is-revealing.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.55s ease, transform 0.55s ease;
	transition-delay: var(--hsmbct-reveal-delay, 0ms);
}

/* =====================================================================
   RESPONSIVE MARKEN (.hsmbct-section) – vertikaler Abstand je Breakpoint
   ===================================================================== */
/* Sehr grosse Screens */
@media (min-width: 1600px) {
	.hsmbct-section {
		padding: 64px 0;
	}
}
/* Desktop (Standard: 48px 0) */
@media (max-width: 1280px) {
	.hsmbct-section {
		padding: 44px 0;
	}
}
/* Tablet quer */
@media (max-width: 1024px) {
	.hsmbct-section {
		padding: 40px 0;
	}
}
/* Tablet hoch / grosses Handy */
@media (max-width: 782px) {
	.hsmbct-section {
		padding: 32px 0;
	}
}
/* Handy */
@media (max-width: 600px) {
	.hsmbct-section {
		padding: 28px 0;
	}
}
/* Kleines Handy */
@media (max-width: 480px) {
	.hsmbct-section {
		padding: 22px 0;
	}
}

/* Responsiv: seitlicher Innenabstand von 20px. Ueberschreibt ein moegliches 0
   (auch aus einer eigenen Padding-Option), damit Inhalte auf kleineren
   Screens nicht am Rand kleben. */
@media (max-width: 1200px) {
	.hsmbct-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 782px) {
	.hsmbct-header--split {
		grid-template-columns: 1fr;
	}
	.hsmbct-header--split.hsmbct-header--right {
		direction: ltr;
	}
	.hsmbct-header-media {
		min-height: 220px;
	}
	.hsmbct-header--split .hsmbct-header-inner {
		padding: 24px;
	}
	.hsmbct-h1 {
		font-size: 24px;
	}
	.hsmbct-trusttext {
		gap: 16px 24px;
	}
	.hsmbct-grid--2,
	.hsmbct-grid--3,
	.hsmbct-grid--4 {
		grid-template-columns: 1fr;
	}
	.hsmbct-imgtext {
		grid-template-columns: 1fr;
	}
	.hsmbct-imgtext--right {
		direction: ltr;
	}
	.hsmbct-imgtext--left > .hsmbct-imgtext-media,
	.hsmbct-imgtext--left > .hsmbct-media-col,
	.hsmbct-imgtext--right > .hsmbct-imgtext-media,
	.hsmbct-imgtext--right > .hsmbct-media-col {
		margin-left: 0;
		margin-right: 0;
	}
	.hsmbct-imgtext-media {
		min-height: 220px;
	}
	.hsmbct-divider-title {
		font-size: 24px;
	}
	.hsmbct-textimages .alignleft,
	.hsmbct-textimages .alignright {
		float: none;
		display: block;
		margin: 16px auto;
		max-width: 100%;
	}
	.hsmbct-stat-callout {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.hsmbct-stat-num {
		font-size: 32px;
	}
}

/* =====================================================================
   BARRIEREFREIHEIT: Bewegungen reduzieren
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hsmbct-logo-item,
	.hsmbct-logo-imgs img,
	.hsmbct-btn,
	.hsmbct-card,
	.hsmbct-feat-item {
		transition: none;
	}
	.hsmbct-logo-item:hover,
	.hsmbct-logo-item:focus-visible {
		transform: none;
	}
}

/* =====================================================================
   BULLET POINTS
   ===================================================================== */
.hsmbct-bullets__body {
	/* min-width:0 erlaubt der Textspalte, im Grid zu schrumpfen; ohne dies
	   wuerde langer Inhalt die Spalte aufblaehen bzw. abgeschnitten werden. */
	min-width: 0;
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.hsmbct-bullets__lead {
	margin-bottom: 12px;
}
.hsmbct-bullets__title {
	color: var(--hsmbct-sec-heading, var(--hsmbct-heading));
	margin: 0 0 12px;
	line-height: 1.25;
}
.hsmbct-bullets__intro {
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
	margin: 0 0 22px;
}
.hsmbct-bullets__intro > :first-child { margin-top: 0; }
.hsmbct-bullets__intro > :last-child  { margin-bottom: 0; }
.hsmbct-bullets__intro a,
.hsmbct-bullet__desc a {
	color: var(--hsmbct-sec-link, var(--hsmbct-primary));
}

/* Bullet-Liste */
.hsmbct-bullets__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.hsmbct-bullet {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.hsmbct-bullet__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 24px;
	color: var(--hsmbct-primary);
}
/* Optional: Icon in farbigem Kreis. Hintergrund/Groesse kommen per Inline-Style
   aus den Sektions-Optionen (Standardwerte hier). Die Glyph-Farbe steuert das
   Icon-Modul je Bullet. */
.hsmbct-bullet__icon--circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--hsmbct-primary-ghost);
}
/* Listenpunkte (fuer Eintraege ohne Icon): gefuellter Punkt oder offener Kreis. */
.hsmbct-bullet__marker {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: 7px;
	border-radius: 50%;
	box-sizing: border-box;
}
.hsmbct-bullet__marker--disc {
	background: var(--hsmbct-primary);
}
.hsmbct-bullet__marker--circle {
	border: 2px solid var(--hsmbct-primary);
	background: transparent;
}
.hsmbct-bullet__content {
	flex: 1 1 auto;
	min-width: 0;
}
.hsmbct-bullet__title {
	display: block;
	color: var(--hsmbct-sec-heading, var(--hsmbct-heading));
	font-weight: 600;
	font-size: 16px;
	line-height: 1.4;
}
.hsmbct-bullet__desc {
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
	margin-top: 4px;
	font-size: 15px;
	line-height: 1.6;
}
.hsmbct-bullet__desc > :first-child { margin-top: 0; }
.hsmbct-bullet__desc > :last-child  { margin-bottom: 0; }

/* Layout mit Bild links / rechts neben den Bullets – IMMER exakt 50/50.
   repeat(2, minmax(0,1fr)) haelt beide Spalten strikt auf halber Breite;
   ohne das minmax(0,…) darf eine Spalte (z.B. das Bild) breiter als ihr
   Anteil werden und der Textspalte Platz nehmen -> abgeschnittener Text. */
.hsmbct-bullets--has-media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: stretch;
}
.hsmbct-bullets--has-media .hsmbct-bullets__body {
	align-self: center; /* Text vertikal mittig neben dem Bild */
}
.hsmbct-bullets--left .hsmbct-bullets__media {
	order: -1; /* Bild vor die Textspalte ziehen */
}
.hsmbct-bullets__media {
	position: relative;
	min-width: 0;
	min-height: 320px;
	margin: 0;
	border-radius: var(--hsmbct-radius);
	overflow: hidden;
}

@media (max-width: 782px) {
	.hsmbct-bullets--has-media {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	/* Bild auf Mobil immer unter die Bullets */
	.hsmbct-bullets--left .hsmbct-bullets__media,
	.hsmbct-bullets--right .hsmbct-bullets__media {
		order: 0;
	}
	.hsmbct-bullets__media {
		min-height: 220px;
	}
}

/* =====================================================================
   VIDEO-GALERIE / SHOWCASE
   ===================================================================== */
.hsmbct-gallery-item { display: flex; flex-direction: column; }
.hsmbct-gallery-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--hsmbct-radius);
	background: var(--hsmbct-gray-light);
}
.hsmbct-ratio--16x9 { aspect-ratio: 16 / 9; }
.hsmbct-ratio--4x3  { aspect-ratio: 4 / 3; }
.hsmbct-ratio--3x2  { aspect-ratio: 3 / 2; }
.hsmbct-ratio--1x1  { aspect-ratio: 1 / 1; }
.hsmbct-gallery-media > img,
.hsmbct-gallery-media > .hsmbct-bg-img,
.hsmbct-gallery-media > video,
.hsmbct-gallery-embed,
.hsmbct-gallery-embed iframe,
.hsmbct-gallery-fallback,
.hsmbct-gallery-nothumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.hsmbct-gallery-media > video { object-fit: cover; }
.hsmbct-gallery-embed iframe { border: 0; }
.hsmbct-gallery-fallback {
	display: flex; align-items: center; justify-content: center;
	background: var(--hsmbct-dark); color: #fff; text-decoration: none; font-weight: 600;
}
.hsmbct-gallery-nothumb { background: linear-gradient(135deg, var(--hsmbct-primary-ghost), var(--hsmbct-gray-light)); }
.hsmbct-gallery-body { padding: 14px 2px 0; }

/* =====================================================================
   WORKFLOW / PROZESS-SCHRITTE
   ===================================================================== */
.hsmbct-step {
	/* Neutraler, halbtransparenter Kartenhintergrund – funktioniert auf
	   hellen und dunklen Sektions-Hintergruenden gleichermassen. */
	background: rgba(127, 127, 127, 0.06);
	border: 1px solid rgba(127, 127, 127, 0.18);
	border-radius: var(--hsmbct-radius);
	padding: 24px;
}
.hsmbct-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hsmbct-step__num { font-size: 30px; font-weight: 800; line-height: 1; color: var(--hsmbct-primary); }
.hsmbct-step__icon { display: inline-flex; font-size: 24px; color: var(--hsmbct-primary); }
.hsmbct-step .hsmbct-item-title { margin: 0 0 6px; }

/* =====================================================================
   KONTAKT
   ===================================================================== */
.hsmbct-contact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
	align-items: start;
}
/* Ohne Formular soll die Info-Spalte die volle Breite nutzen. */
.hsmbct-contact__grid:not(:has(.hsmbct-contact__form)) { grid-template-columns: 1fr; }
.hsmbct-contact__text { margin: 12px 0 4px; color: var(--hsmbct-sec-text, var(--hsmbct-text)); }
.hsmbct-contact__list {
	list-style: none; margin: 20px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 16px;
}
.hsmbct-contact-item { display: flex; gap: 14px; align-items: flex-start; }
.hsmbct-contact-item__icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--hsmbct-primary-ghost); color: var(--hsmbct-primary); font-size: 22px;
}
.hsmbct-contact-item__body { display: flex; flex-direction: column; min-width: 0; }
.hsmbct-contact-item__label { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--hsmbct-muted); }
.hsmbct-contact-item__value { font-weight: 600; color: var(--hsmbct-sec-heading, var(--hsmbct-heading)); }
.hsmbct-contact__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* CTAs: sobald sie mobil nicht mehr nebeneinander passen -> untereinander, volle Breite. */
@media (max-width: 600px) {
	.hsmbct-ctas,
	.hsmbct-header-ctas,
	.hsmbct-contact__ctas,
	.hsmbct-panel-ctas {
		flex-direction: column;
		align-items: stretch;
	}
	.hsmbct-ctas > *,
	.hsmbct-header-ctas > *,
	.hsmbct-contact__ctas > *,
	.hsmbct-panel-ctas > * {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}

/* Akzent-Variante: farbiger Block */
.hsmbct-contact--accent .hsmbct-contact__grid {
	background: var(--hsmbct-primary);
	color: #fff;
	border-radius: var(--hsmbct-radius);
	padding: clamp(28px, 4vw, 48px);
	align-items: center;
}
.hsmbct-contact--accent .hsmbct-sec-heading,
.hsmbct-contact--accent .hsmbct-contact-item__value { color: #fff; }
.hsmbct-contact--accent .hsmbct-contact__text,
.hsmbct-contact--accent .hsmbct-sec-subtitle,
.hsmbct-contact--accent .hsmbct-contact-item__label { color: rgba(255, 255, 255, 0.85); }
.hsmbct-contact--accent .hsmbct-contact-item__icon { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* Kontaktformular */
.hsmbct-form { display: flex; flex-direction: column; gap: 12px; }
.hsmbct-contact--accent .hsmbct-contact__form {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--hsmbct-radius);
	padding: 24px;
}
.hsmbct-form__field label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.hsmbct-form input,
.hsmbct-form textarea {
	width: 100%; padding: 12px 14px; font: inherit;
	border: 1px solid var(--hsmbct-border); border-radius: var(--hsmbct-radius-sm);
	background: #fff; color: #1c1c1a;
}
.hsmbct-contact--accent .hsmbct-form__field label { color: #fff; }
.hsmbct-form__submit {
	align-self: flex-start; margin-top: 4px; cursor: pointer;
	background: var(--hsmbct-primary); color: #fff; border: 0;
	padding: 12px 24px; border-radius: 999px; font: inherit; font-weight: 600;
}
.hsmbct-contact--accent .hsmbct-form__submit { background: #fff; color: var(--hsmbct-primary); }
.hsmbct-form__privacy { font-size: 12px; color: var(--hsmbct-muted); }
.hsmbct-contact--accent .hsmbct-form__privacy { color: rgba(255, 255, 255, 0.8); }
.hsmbct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hsmbct-contact__notice { padding: 12px 16px; border-radius: var(--hsmbct-radius-sm); margin-bottom: 14px; font-weight: 600; }
.hsmbct-contact__notice--ok { background: #e7f6ee; color: #186a3b; }
.hsmbct-contact__notice--err { background: #fdecea; color: #b3261e; }

@media (max-width: 782px) {
	.hsmbct-contact__grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   VIDEO-GALERIE: LIGHTBOX-TRIGGER & OVERLAY
   ===================================================================== */
.hsmbct-gallery-trigger {
	appearance: none; -webkit-appearance: none;
	display: block; width: 100%;
	margin: 0; padding: 0; border: 0; cursor: pointer;
	background: var(--hsmbct-gray-light); color: inherit; font: inherit;
}
.hsmbct-gallery-trigger--noposter { background: linear-gradient(135deg, #1c1c1a, #3a3a35); }
.hsmbct-gallery-play {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	transition: transform .18s ease;
}
.hsmbct-gallery-play svg { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35)); }
.hsmbct-gallery-trigger:hover .hsmbct-gallery-play,
.hsmbct-gallery-trigger:focus-visible .hsmbct-gallery-play { transform: scale(1.08); }
.hsmbct-gallery-trigger:focus-visible { outline: 3px solid var(--hsmbct-primary); outline-offset: 2px; }

html.hsmbct-lb-lock { overflow: hidden; }
.hsmbct-lightbox {
	position: fixed; inset: 0; z-index: 99999;
	display: none; align-items: center; justify-content: center;
	padding: clamp(16px, 4vw, 48px);
}
.hsmbct-lightbox.is-open { display: flex; }
.hsmbct-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .82); }
.hsmbct-lightbox__dialog { position: relative; z-index: 1; width: min(1100px, 100%); }
.hsmbct-lightbox__stage {
	position: relative; width: 100%; aspect-ratio: 16 / 9;
	background: #000; border-radius: var(--hsmbct-radius); overflow: hidden;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
.hsmbct-lightbox__stage > video,
.hsmbct-lightbox__stage > iframe,
.hsmbct-lightbox__stage .hsmbct-gallery-embed,
.hsmbct-lightbox__stage .hsmbct-gallery-embed iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.hsmbct-lightbox__stage > video { object-fit: contain; background: #000; }
.hsmbct-lightbox__close {
	position: absolute; top: -14px; right: -14px; z-index: 2;
	width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
	border: 0; background: #fff; color: #1c1c1a;
	font-size: 26px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
@media (max-width: 600px) {
	.hsmbct-lightbox__close { top: 8px; right: 8px; }
}

.hsmbct-form__error { color: #b3261e; font-size: 14px; font-weight: 600; }
.hsmbct-contact--accent .hsmbct-form__error { color: #ffd9d4; }

/* Kontaktformular: AJAX-Ladeindikator & Ergebnis */
.hsmbct-form__result { margin: 0 0 4px; }
.hsmbct-form__result[hidden] { display: none; }
.hsmbct-form__result .hsmbct-contact__notice { margin: 0; }
.hsmbct-form__submit.is-loading { cursor: progress; opacity: .9; }
.hsmbct-spinner {
	display: inline-block;
	width: 14px; height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: hsmbct-spin .6s linear infinite;
}
@keyframes hsmbct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.hsmbct-spinner { animation-duration: 1.4s; }
}