/*!
 * scriptloader 1.1.2
 * Generischer Zwei-Klick-Loader für iframes und externe Skripte.
 *
 * Konfiguration:
 * - über data-sl-* Attribute am Loader-Element
 * - CSS-Variablen werden durch das JavaScript gesetzt
 *
 * Namespace:
 * - Block: .scriptloader
 * - Elemente: .scriptloader__*
 * - Zustände: .scriptloader--*
 */

.scriptloader {
	/*
     * Sichere, funktionale Standardwerte.
     * Die Vorschau bleibt lesbar, auch wenn Redakteure keine Farben setzen.
     */
	--sl-width: 100%;
	--sl-aspect-ratio: 16 / 10;
	--sl-background: linear-gradient(
		10deg,
		rgb(23 156 125 / 20%) 10%,
		rgb(0 91 127 / 20%) 100%
	);
	--sl-overlay-background: rgb(0 0 0 / 62%);
	--sl-overlay-color: #ffffff;
	--sl-overlay-padding: clamp(0.875rem, 2vw, 1.5rem);
	--sl-overlay-gap: 1rem;
	--sl-preview-fit: cover;
	--sl-preview-position: center;
	--sl-button-background: #005b7f;
	--sl-button-background-hover: #004662;
	--sl-button-color: #ffffff;
	--sl-button-border-radius: 0.25rem;
	/*
	 * Fehler-Textfarbe. Default inherit, damit die Notice die
	 * Seitentextfarbe übernimmt. data-sl-error-color überschreibt
	 * gezielt, falls der Container-Hintergrund zu wenig Kontrast bietet.
	 */
	--sl-error-color: inherit;

	position: relative;
	isolation: isolate;
	display: grid;
	width: var(--sl-width);
	max-width: 100%;
	height: var(--sl-height, auto);
	aspect-ratio: var(--sl-aspect-ratio);
	overflow: hidden;
	background: var(--sl-background);
	text-align: center;
}

/*
 * Query-Container für den Hinweistext.
 *
 * Bewusst nur solange der Loader nicht aktiv ist: container-type
 * erzeugt Layout-Containment, und das würde position:fixed in
 * injizierten Skript-Widgets (Modals, Tooltips) an diesen Container
 * binden. Nach dem Klick ist der Hinweis ohnehin ausgeblendet.
 *
 * container-name ist Pflicht, nicht Kosmetik: eine unbenannte
 * @container-Abfrage würde gegen den NÄCHSTEN Container auflösen –
 * bei Themes/Page-Buildern mit eigenen Containern also womöglich
 * gegen ein fremdes Element.
 */
.scriptloader:not(.scriptloader--active) {
	container: scriptloader / inline-size;
}

/*
 * Vorschau, Overlay und die spätere Inhaltsfläche liegen in derselben Grid-Zelle.
 * overflow:hidden ist hier unkritisch: Nur Bild/iframe werden beschnitten.
 * Der Datenschutztext scrollt innerhalb von .scriptloader__overlay-body.
 */
.scriptloader
	> :is(
		.scriptloader__preview,
		.scriptloader__overlay,
		.scriptloader__stage,
		.scriptloader__status
	) {
	grid-area: 1 / 1;
	min-width: 0;
	min-height: 0;
}

/* ------------------------------------------------------------------------- */
/* Vorschau                                                                  */
/* ------------------------------------------------------------------------- */

.scriptloader__preview {
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: var(--sl-preview-fit);
	object-position: var(--sl-preview-position);
}

/* ------------------------------------------------------------------------- */
/* Datenschutz-Overlay                                                       */
/* ------------------------------------------------------------------------- */

.scriptloader__overlay {
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	padding: var(--sl-overlay-padding);
	gap: var(--sl-overlay-gap);
	color: inherit;
	background: transparent;
}

/*
 * Dunkles Overlay nur bei Vorschau-Bild:
 * Ohne Preview bleibt der Hintergrund-Verlauf sichtbar und der
 * Hinweistext in der normalen (geerbten) Textfarbe lesbar.
 * Mit Preview liefert das Scrim den nötigen Kontrast zum Bild.
 */
.scriptloader--has-preview .scriptloader__overlay {
	color: var(--sl-overlay-color);
	background: var(--sl-overlay-background);
}

/*
 * Der Button bleibt außerhalb des Scrollbereichs.
 * Auch bei langem Hinweistext ist er sofort sichtbar und erreichbar.
 */
.scriptloader__overlay-controls {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}

/*
 * Nur der Textbereich darf scrollen.
 * Dadurch verschwindet der Button nicht aus einem schmalen 16:9-Container.
 */
.scriptloader__overlay-body {
	flex: 0 1 auto;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/*
 * Begrenzt die Textbreite auf einen angenehmen Lesefluss.
 * Die vertikale Zentrierung übernimmt justify-content:center
 * des Overlays (Flex-Container). margin-inline:auto zentriert
 * die Box horizontal innerhalb der scrollbaren overlay-body.
 */
.scriptloader__overlay-content {
	width: 100%;
	max-width: 75ch;
	margin-inline: auto;
}

.scriptloader__message,
.scriptloader__note {
	margin: 0;
}

.scriptloader__message + .scriptloader__note {
	margin-top: 1rem;
}

.scriptloader__message a,
.scriptloader__note a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * Sichtbar nur in schmalen Containern. Gemessen wird der Loader
 * selbst, nicht der Viewport – ein 400px-Loader in einer Desktop-
 * Sidebar zählt damit korrekt als schmal.
 *
 * Schwelle projektweit anpassbar; pro Instanz geht es nicht, weil
 * @container keine custom properties in der Bedingung erlaubt.
 *
 * Baseline 2023: Ohne Container-Query-Unterstützung bleibt der Hinweis
 * versteckt, der Button funktioniert unverändert. Bei harter
 * 2021-Vorgabe ersetzt man @container durch @media (max-width: 600px)
 * und lässt den container:-Block oben entfallen – dann misst wieder
 * der Viewport.
 */
.scriptloader__note {
	display: none;
	max-width: 60ch;
	margin-inline: auto;
}

@container scriptloader (max-width: 600px) {
	.scriptloader__note {
		display: block;
	}
}

.scriptloader__note svg {
	display: block;
	width: 100%;
	max-width: 100px;
	height: auto;
	margin: 0 auto 0.5rem;
	opacity: 0.45;
	fill: currentColor;
}

/* ------------------------------------------------------------------------- */
/* Button                                                                    */
/* ------------------------------------------------------------------------- */

.scriptloader__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7em 1.25em;
	border: 0;
	border-radius: var(--sl-button-border-radius);
	color: var(--sl-button-color);
	background: var(--sl-button-background);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.scriptloader__button:hover {
	background: var(--sl-button-background-hover);
}

.scriptloader__button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

/* ------------------------------------------------------------------------- */
/* Geladener Inhalt                                                          */
/* ------------------------------------------------------------------------- */

.scriptloader__stage {
	z-index: 1;
	display: none;
	width: 100%;
	height: 100%;
}

.scriptloader__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Nach Zustimmung verschwinden Vorschau und Overlay vollständig.
 * Das iframe ist dann der allein sichtbare Inhalt des Containers.
 */
.scriptloader--active {
	background: none;
}

.scriptloader--active > .scriptloader__preview,
.scriptloader--active > .scriptloader__overlay {
	display: none;
}

.scriptloader--active > .scriptloader__stage {
	display: block;
}

/* ------------------------------------------------------------------------- */
/* Skript-Modus: Container darf mitwachsen                                    */
/* ------------------------------------------------------------------------- */

/*
 * Im Skript-Modus injizierte Widgets (Karten, Formulare, Feeds) brauchen
 * eine offene Box statt eines festen 16:10-Schnitts. aspect-ratio und
 * overflow:hidden des Grund-Containers werden hier aufgehoben; die Höhe
 * richtet sich nach dem geladenen Inhalt.
 */
.scriptloader--mode-script {
	aspect-ratio: auto;
	height: auto;
	overflow: visible;
}

/* ------------------------------------------------------------------------- */
/* Fehlerzustand                                                              */
/* ------------------------------------------------------------------------- */

/*
 * Tritt beim Laden ein Fehler auf (z. B. 404, abgelehntes Skript),
 * zeigt der Stage die sichtbare Fehlermeldung + Retry-Button.
 *
 * --active setzt background:none, --error stellt den Container-
 * Hintergrund (--sl-background) wieder her, damit die Notice auf
 * einer definierten Fläche sitzt. Die Textfarbe ist ein eigener
 * Kanal --sl-error-color (Default inherit), weil --sl-overlay-color
 * nur im Overlay bei --has-preview greift und sein #ffffff-Default
 * auf dem hellen --sl-background unsichtbar wäre.
 */
.scriptloader--error {
	background: var(--sl-background);
}

.scriptloader--error > .scriptloader__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--sl-overlay-padding);
	gap: var(--sl-overlay-gap);
	color: var(--sl-error-color);
}

.scriptloader__error {
	max-width: 60ch;
	margin: 0;
	text-align: center;
}

/* ------------------------------------------------------------------------- */
/* Optionaler externer Link unterhalb des Loaders                            */
/* ------------------------------------------------------------------------- */

.scriptloader__external-link-wrap {
	margin: 0.75rem 0 0;
}

.scriptloader__external-link {
	display: inline-block;
}

/* ------------------------------------------------------------------------- */
/* Screenreader-Statusmeldung                                                */
/* ------------------------------------------------------------------------- */

.scriptloader__status {
	position: absolute;
	z-index: -1;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Das Overlay ist ein eigenständiger Kontrastbereich.
 * Theme- und Elementor-Farben dürfen Hinweistext und Links darin nicht
 * überschreiben, sonst wäre der Datenschutztext auf Bildern unlesbar.
 *
 * Der Kontrast-Schutz (weißer Text auf dunklem Overlay) gilt nur bei
 * Vorschau-Bild. Ohne Preview steht der Hinweis im geerbten Text-Color
 * und bleibt auf dem hellen Hintergrund-Verlauf lesbar.
 */
.scriptloader--has-preview .scriptloader__overlay .scriptloader__message,
.scriptloader--has-preview .scriptloader__overlay .scriptloader__message *,
.scriptloader--has-preview .scriptloader__overlay .scriptloader__note,
.scriptloader--has-preview .scriptloader__overlay .scriptloader__note * {
	color: var(--sl-overlay-color) !important;
}