/* MG Cookie Banner – Platzhalter des Server-Blockers (MGCB_Blocker), aus MG Connector (embed-blocker.css).
 * Wird nur eingebunden, wenn auf der Seite ein Platzhalter steht. Keine eigene Schrift. Farben neutral und über
 * Variablen überschreibbar (--mgcb-vb-grund, --mgcb-vb-text, --mgcb-vb-knopf, --mgcb-vb-knopf-text).
 * Seitenverhältnis kommt inline aus width/height des Original-Iframes (sonst 16:9), damit beim Laden nichts springt. */

.mgcb-vb {
	--mgcb-vb-grund: #2b3242;
	--mgcb-vb-schleier: rgba(0, 0, 0, .58);
	--mgcb-vb-text: #fff;
	position: relative;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	margin-inline: auto;
	border-radius: 8px;
	background: var(--mgcb-vb-grund);
	color: var(--mgcb-vb-text);
	font-family: inherit;
	line-height: 1.45;
	container-type: inline-size;
}
.mgcb-vb *, .mgcb-vb *::before, .mgcb-vb *::after { box-sizing: border-box; }
/* Höhe nach Seitenverhältnis: ein Element ohne Breite mit prozentualem Innenabstand (bezieht sich auf die BREITE).
 * Die Hülle ist so hoch wie das Höhere von beidem; auf dem Handy wächst sie mit dem Hinweis, statt ihn abzuschneiden.
 * ⚠️ Nicht durch `aspect-ratio` ersetzen: Damit wächst die Box in Chrome nicht mit (gemessen in MG Connector). */
.mgcb-vb::before {
	content: "";
	flex: 0 0 0;
	width: 0;
	padding-top: var(--mgcb-vb-hoehe, 56.25%);
}

/* Original lag absolut in einer Seitenverhältnis-Hülle (Gutenberg, Bricks, Elementor, FitVids, eigenes Theme):
 * Der Platzhalter füllt dieselbe Hülle, statt sie zu verdoppeln. */
.mgcb-vb.mgcb-vb--fuellt,
.wp-has-aspect-ratio .wp-block-embed__wrapper > .mgcb-vb,
.wp-embed-aspect-16-9 .wp-block-embed__wrapper > .mgcb-vb,
.fluid-width-video-wrapper > .mgcb-vb,
.embed-responsive > .mgcb-vb,
.elementor-video-iframe.mgcb-vb,
.elementor-wrapper > .mgcb-vb,
.brxe-video > .mgcb-vb {
	position: absolute;
	inset: 0;
	height: 100%;
	max-width: none;
	overflow: auto;
}
.mgcb-vb.mgcb-vb--fuellt::before,
.wp-block-embed__wrapper > .mgcb-vb::before,
.fluid-width-video-wrapper > .mgcb-vb::before,
.embed-responsive > .mgcb-vb::before,
.elementor-video-iframe.mgcb-vb::before,
.elementor-wrapper > .mgcb-vb::before,
.brxe-video > .mgcb-vb::before { content: none; }

.mgcb-vb__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
	max-width: none;
	border-radius: inherit;
}
/* Ruhiger Schleier über dem Vorschaubild, damit der Hinweis lesbar bleibt (flach, kein Verlauf). */
.mgcb-vb--bild .mgcb-vb__inhalt { background: var(--mgcb-vb-schleier); }

.mgcb-vb__inhalt {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border-radius: inherit;
	padding: 1.25em;
	text-align: center;
}
/* Schmal (Handy): kleineres Symbol, weniger Rand. In einer festen Seitenverhältnis-Hülle (--fuellt) kann der
 * Platzhalter nicht wachsen; dort fallen Symbol und Zweitknopf weg, damit Hinweis und „Laden" sichtbar bleiben. */
@container (max-width: 420px) {
	.mgcb-vb__inhalt { padding: .75em; }
	.mgcb-vb__play svg { width: 2.25em; height: 2.25em; }
	.mgcb-vb--fuellt .mgcb-vb__play,
	.mgcb-vb--fuellt .mgcb-vb__alle { display: none; }
}

.mgcb-vb__play { line-height: 0; color: var(--mgcb-vb-text); opacity: .92; }
.mgcb-vb__play svg { width: 2.75em; height: 2.75em; display: block; }

.mgcb-vb .mgcb-vb__titel {
	margin: 0;
	color: var(--mgcb-vb-text);
	font-size: 1em;
	font-weight: 700;
	line-height: 1.3;
}
.mgcb-vb .mgcb-vb__hinweis {
	margin: 0;
	max-width: 36em;
	color: var(--mgcb-vb-text);
	font-size: .875em;
	opacity: .9;
}
.mgcb-vb .mgcb-vb__link,
.mgcb-vb .mgcb-vb__link:hover,
.mgcb-vb .mgcb-vb__link:focus-visible {
	color: var(--mgcb-vb-text);
	text-decoration: underline;
	text-underline-offset: .15em;
}

/* Knöpfe: 44 px Tippfläche. */
.mgcb-vb .mgcb-vb__laden {
	min-height: 44px;
	padding: .75em 1.3em;
	border: 0;
	border-radius: 8px;
	background: var(--mgcb-vb-knopf, #fff);
	color: var(--mgcb-vb-knopf-text, #1f2937);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.mgcb-vb .mgcb-vb__alle {
	min-height: 44px;
	padding: .25em .5em;
	border: 0;
	background: none;
	color: var(--mgcb-vb-text);
	font: inherit;
	font-size: .875em;
	text-decoration: underline;
	text-underline-offset: .15em;
	opacity: .85;
	cursor: pointer;
}
.mgcb-vb .mgcb-vb__laden:focus-visible,
.mgcb-vb .mgcb-vb__alle:focus-visible,
.mgcb-vb .mgcb-vb__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Nach der Einwilligung: das echte Iframe füllt die Hülle. */
.mgcb-vb.is-loaded { background: #000; }
.mgcb-vb.is-loaded iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Terminkalender (Cal.com, Calendly): feste Höhe statt Seitenverhältnis. */
.mgcb-vb.mgcb-vb--termin{min-height:22rem;display:flex;align-items:center;justify-content:center}
.mgcb-vb.mgcb-vb--termin::before{display:none}
.mgcb-vb.mgcb-vb--termin .mgcb-vb__inhalt{position:static}