/* =====================================================================
   HS VmedD Startseite – Frontend-Styles
   Orientiert am Design der VmedD "Care Monitor"-Landingpages.
   Alle Custom-Properties beginnen mit --vmedd-.
   ===================================================================== */

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

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

/* ── Grundlayout ──────────────────────────────────────────────────── */
.vmedd-main {
	color: var(--vmedd-sec-text, var(--vmedd-text));
}
.vmedd-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(.vmedd-main) {
	width: auto;
	padding: 0;
}

.vmedd-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 (--vmedd-sec-maxw)
   individuell ueberschreibbar; das farbige Band bleibt dahinter voll sichtbar. */
.vmedd-section > * {
	width: var(--vmedd-sec-w, 100%);
	max-width: min(100%, var(--vmedd-sec-maxw, var(--vmedd-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). */
.vmedd-section--custom-width > * {
	width: auto;
	max-width: none;
}
/* Sektions-Linkfarbe: nur Inhalts-Links (keine Buttons/Trust/Logos).
   Standard = Primaerfarbe, per Sektions-Option ueberschreibbar. */
.vmedd-header-html a,
.vmedd-measure a,
.vmedd-ctasec-text a,
.vmedd-fullwidth a,
.vmedd-textimages a,
.vmedd-imgtext-content a {
	color: var(--vmedd-sec-link, var(--vmedd-primary));
}

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

/* Vollflaechiges Hintergrundbild (als <img>, object-fit, lazy) */
.vmedd-header--bg {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.hsvmedd-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
}
.vmedd-header--fixed .hsvmedd-bg-img {
	position: fixed;
}
.vmedd-header--bg .vmedd-header-inner {
	position: relative;
	z-index: 2;
	max-width: var(--vmedd-hdr-inner-maxw, 640px);
	padding: 40px 24px;
}
/* Schlichter Header ohne Bild: Inhalt volle Breite (per Option begrenzbar). */
.vmedd-header--plain {
	position: relative;
}
.vmedd-header--plain .vmedd-header-inner {
	max-width: var(--vmedd-hdr-inner-maxw, 100%);
	margin-left: auto;
	margin-right: auto;
}
/* Lesbarkeits-Overlay/Farbverlauf – NUR wenn ein Bild hinterlegt und der
   Verlauf aktiviert ist (Klasse .vmedd-header--overlay). Farben/Winkel
   kommen aus den Header-Optionen ueber die CSS-Variable. */
.vmedd-header--bg.vmedd-header--overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--vmedd-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). */
.vmedd-header--bg.vmedd-header--has-img .vmedd-header-inner,
.vmedd-header--bg.vmedd-header--has-img .vmedd-h1,
.vmedd-header--bg.vmedd-header--has-img .vmedd-h2 {
	color: var(--vmedd-white);
}
.vmedd-header--bg.vmedd-header--has-img .vmedd-sub,
.vmedd-header--bg.vmedd-header--has-img .vmedd-sub2 {
	color: rgba(255, 255, 255, 0.9);
}
.vmedd-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) */
.vmedd-header--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
	background: transparent;
	border: none;
}
.vmedd-header--split.vmedd-header--right {
	direction: rtl;
}
.vmedd-header--split.vmedd-header--right > * {
	direction: ltr;
}
.vmedd-header-media {
	position: relative;
	min-height: 320px;
	margin: 0;
	border-radius: var(--vmedd-radius);
	overflow: hidden;
}
.vmedd-header--split .vmedd-header-inner {
	padding: 40px;
}
.vmedd-header-media .vmedd-header-caption {
	color: var(--vmedd-white);
}

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

/* =====================================================================
   CTA-BUTTON
   ===================================================================== */
.vmedd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--vmedd-btn-radius, var(--vmedd-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(--vmedd-btn-bw, 2px) solid var(--vmedd-btn-border, var(--vmedd-btn-bg, var(--vmedd-primary)));
	background-color: var(--vmedd-btn-bg, var(--vmedd-primary));
	color: var(--vmedd-btn-color, var(--vmedd-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. */
.vmedd-btn:hover {
	filter: brightness(0.93);
	text-decoration: none;
}
/* Eigene Hover-Farben gesetzt: Filter aus, definierte Farben nutzen. */
.vmedd-btn--customhover:hover {
	filter: none;
	background-color: var(--vmedd-btn-hbg, var(--vmedd-btn-bg, var(--vmedd-primary)));
	color: var(--vmedd-btn-hcolor, var(--vmedd-btn-color, var(--vmedd-white)));
	border-color: var(--vmedd-btn-hborder, var(--vmedd-btn-border, var(--vmedd-btn-bg, var(--vmedd-primary))));
}
.vmedd-btn:active {
	transform: translateY(1px);
}
.vmedd-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

/* =====================================================================
   CARD-TOGGLE-SLIDER
   ===================================================================== */
.vmedd-cardslider {
	position: relative;
}
.vmedd-cardslider-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}
.vmedd-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
	background: var(--vmedd-white);
	border: 2px solid var(--vmedd-border-green);
	border-radius: var(--vmedd-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;
}
.vmedd-card:hover {
	border-color: var(--vmedd-primary);
	background: var(--vmedd-primary-ghost);
}
.vmedd-card.is-active {
	border-color: var(--vmedd-primary);
	background: var(--vmedd-primary-ghost);
}
.vmedd-card-icon {
	color: var(--vmedd-primary);
	display: inline-flex;
}
.vmedd-card-title {
	display: block;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	color: var(--vmedd-sec-heading, var(--vmedd-dark));
}
.vmedd-card-sub {
	display: block;
	width: 100%;
	font-size: 12px;
	color: var(--vmedd-sec-text, var(--vmedd-muted));
	line-height: 1.45;
}
.vmedd-card-cta {
	margin-top: 8px;
}

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

.vmedd-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(--vmedd-primary);
	color: var(--vmedd-white);
}
.vmedd-panel-title {
	font-size: 19px;
	font-weight: 600;
	color: var(--vmedd-sec-heading, var(--vmedd-dark));
	margin: 0 0 8px;
}
.vmedd-panel-text {
	font-size: 14px;
	color: var(--vmedd-sec-text, var(--vmedd-muted));
	line-height: 1.65;
	margin-bottom: 14px;
}
.vmedd-panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}
.vmedd-tag {
	background: var(--vmedd-white);
	border: 1px solid var(--vmedd-border-green);
	border-radius: 20px;
	padding: 4px 13px;
	font-size: 12px;
	color: var(--vmedd-primary);
}
.vmedd-panel-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

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

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

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

/* =====================================================================
   ICON / Hilfsklassen
   ===================================================================== */
.vmedd-icon {
	display: inline-flex;
	vertical-align: middle;
	font-size: 24px;
}
.vmedd-icon--svg,
img.vmedd-icon {
	width: 24px;
	height: 24px;
}
.vmedd-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) */
.vmedd-nolink,
.vmedd-nolink:hover,
.vmedd-nolink:focus {
	text-decoration: none;
}

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

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

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

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

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

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

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

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

/* ── Bild & Text ──────────────────────────────────────────────────── */
.vmedd-imgtext {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}
.vmedd-imgtext--right {
	direction: rtl;
}
.vmedd-imgtext--right > * {
	direction: ltr;
}
.vmedd-imgtext-media {
	position: relative;
	min-height: 320px;
	margin: 0;
	border-radius: var(--vmedd-radius);
	overflow: hidden;
}
.vmedd-imgtext-content {
	line-height: 1.7;
}
.vmedd-imgtext-content img { max-width: 100%; height: auto; }

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

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

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

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

/* Einblend-Animation (nur mit JS aktiv; ohne JS bleibt alles sichtbar). */
.vmedd-infostat [data-reveal].is-revealing {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.55s ease, transform 0.55s ease;
	will-change: opacity, transform;
}
.vmedd-infostat [data-reveal].is-revealing.is-visible {
	opacity: 1;
	transform: none;
}

/* =====================================================================
   RESPONSIVE MARKEN (.vmedd-section) – vertikaler Abstand je Breakpoint
   ===================================================================== */
/* Sehr grosse Screens */
@media (min-width: 1600px) {
	.vmedd-section {
		padding: 64px 0;
	}
}
/* Desktop (Standard: 48px 0) */
@media (max-width: 1280px) {
	.vmedd-section {
		padding: 44px 0;
	}
}
/* Tablet quer */
@media (max-width: 1024px) {
	.vmedd-section {
		padding: 40px 0;
	}
}
/* Tablet hoch / grosses Handy */
@media (max-width: 782px) {
	.vmedd-section {
		padding: 32px 0;
	}
}
/* Handy */
@media (max-width: 600px) {
	.vmedd-section {
		padding: 28px 0;
	}
}
/* Kleines Handy */
@media (max-width: 480px) {
	.vmedd-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) {
	.vmedd-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

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

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