/* VERNETZT.DIGITAL – Popups (Werte aus divi-presets.md, Abschnitt 6) */
.vd-popup-layer {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.vd-popup-layer[hidden] { display: none; }
.vd-popup-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 10, 20, .6);
}
.vd-popup-dialog {
	position: relative;
	width: 100%;
	max-width: 680px;
	max-height: 88vh;
	max-height: 88dvh; /* sichtbare Höhe ohne Browserleisten (Handy) */
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--gcid-ydj74q3j00, #fefefe);
	color: var(--gcid-body-color, #292929);
	border: 1px solid var(--gcid-25juuo1ayp, #e2e6ec);
	border-radius: 16px;
	padding: 30px;
	box-shadow: 0 20px 50px rgba(5, 10, 20, .35);
}
.vd-popup-dialog:focus { outline: none; }
.vd-popup-close {
	position: sticky;
	top: 0;
	float: right;
	margin: -14px -14px 0 12px;
	width: 40px;
	height: 40px;
	border: 1px solid var(--gcid-25juuo1ayp, #e2e6ec);
	border-radius: 50%;
	background: var(--gcid-ydj74q3j00, #fefefe);
	color: var(--gcid-heading-color, #002d64);
	font: 700 22px/1 Arial, sans-serif;
	cursor: pointer;
	z-index: 1;
}
.vd-popup-close:hover { background: var(--gcid-zuxgbnxvik, #f4f6f9); }
.vd-popup-close:focus-visible { outline: 3px solid var(--gcid-secondary-color, #3b82f6); outline-offset: 2px; }

/* Der Divi-Abschnitt im Dialog: ohne eigene Fläche und Abstände. */
.vd-popup-dialog .et_pb_section.vd-popup {
	display: block;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.vd-popup-dialog .et_pb_row { padding: 0 !important; width: 100% !important; max-width: none !important; }
.vd-popup-layer .vd-popup-dialog h2 { font-size: 26px; line-height: 1.2; padding-right: 40px; }
.vd-popup-layer .vd-popup-dialog h3 {
	font-size: 15px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--gcid-primary-color, #002d64);
	margin-top: 18px;
	padding-bottom: 6px;
}
.vd-popup-dialog ul { padding-left: 1.2em; }
.vd-popup-dialog li { margin-bottom: 6px; }

html.vd-popup-open { overflow: hidden; }
/* Der Inhaltsbereich bildet bei Divi eine eigene Ebene (z-index 1); solange ein Popup offen ist,
   liegt er über dem Kopf, damit der Hintergrund auch den Kopf abdunkelt. */
html.vd-popup-open .et-l--post .et_builder_inner_content { z-index: 100001; }

@media (max-width: 480px) {
	.vd-popup-layer { padding: 8px; align-items: flex-end; }
	/* 0.9.1: Höhe nach dem sichtbaren Bereich (dvh) – sonst rutscht der Kopf mit × unter die Adressleiste. */
	.vd-popup-dialog { padding: 22px 18px; max-height: 85vh; max-height: calc(100dvh - 72px); border-radius: 16px 16px 12px 12px; }
	.vd-popup-layer .vd-popup-dialog h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: no-preference) {
	.vd-popup-dialog { animation: vd-popup-in .18s ease-out; }
	@keyframes vd-popup-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Popup mit Kennzeichen „Empfohlen“ (Klasse vd-kennz), seit 0.9.2: sieht aus wie die Karte auf der Seite –
   blauer Rahmen, Kennzeichen sitzt fest auf der oberen Kante und scrollt nicht mit. Dafür scrollt der Inhalt
   (.vd-popup-body) statt des ganzen Dialogs; Kennzeichen und × stehen außerhalb des Scrollbereichs. */
.vd-popup-dialog.vd-popup-has-kennz { overflow: visible !important; display: flex; flex-direction: column; padding: 0 !important; border: 2px solid var(--gcid-secondary-color, #3b82f6) !important; border-radius: 14px !important; }
.vd-popup-has-kennz .vd-popup-body { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; padding: 30px; border-radius: 12px; }
.vd-popup-has-kennz .vd-popup-close { position: absolute !important; top: 12px; right: 12px; margin: 0 !important; float: none !important; }
.vd-popup-has-kennz .vd-popup-body .et_pb_section, .vd-popup-has-kennz .vd-popup-body .et_pb_row, .vd-popup-has-kennz .vd-popup-body .et_pb_column { position: static !important; }
.vd-popup-dialog.vd-popup-has-kennz .vd-kennz { position: absolute !important; top: -12px !important; left: 20px !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; z-index: 3; }
@media (max-width: 480px) { .vd-popup-has-kennz .vd-popup-body { padding: 22px 18px; } }

/* Notfall-Popup (#it-notfall): Anruf-Knopf in einer Zeile, Schritte gut lesbar (0.9.1).
   Das Divi-Preset setzt Schrift und Abstand mit „body #page-container …“ und !important – daher gleich starke Auswahl. */
body #page-container .vd-popup-dialog #it-notfall ol li { font-size: 18px !important; line-height: 1.5 !important; margin-bottom: 6px; }
body #page-container .vd-popup-dialog #it-notfall .et_pb_button { white-space: nowrap !important; }
@media (max-width: 480px) {
	body #page-container .vd-popup-dialog #it-notfall .et_pb_button { transition: none !important; font-size: 15px !important; padding: 10px 14px !important; }
	body #page-container .vd-popup-dialog #it-notfall .et_pb_button:after { display: none !important; }
	body #page-container .vd-popup-dialog #it-notfall ol li { font-size: 17px !important; }
}
@media (max-width: 350px) {
	body #page-container .vd-popup-dialog #it-notfall .et_pb_button { white-space: normal !important; }
}
.vd-popup-dialog .et_pb_row, .vd-popup-dialog .et_pb_column, .vd-popup-dialog .et_pb_section.vd-popup { overflow: visible !important; }