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

:root {
	--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%; }
}

/* ── Grundlayout ──────────────────────────────────────────────────── */
.hsmbct-main {
	font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--hsmbct-sec-text, var(--hsmbct-text));
	font-size: 15px;
	line-height: 1.6;
}
.hsmbct-page * {
	box-sizing: border-box;
}

/* 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);
}
.hsmbct-header-caption {
	position: absolute;
	right: 12px;
	bottom: 10px;
	z-index: 2;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
	background: rgba(0, 0, 0, 0.35);
	padding: 3px 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;
}
.hsmbct-header-media .hsmbct-header-caption {
	color: var(--hsmbct-white);
}

/* 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;
}
.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-primary-ghost);
}
.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;
}
/* 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;
}

.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;
}
.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-media {
		min-height: 220px;
	}
	.hsmbct-sec-heading,
	.hsmbct-ctasec-heading {
		font-size: 22px;
	}
	.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);
}
.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;
	}
}