/*
 * Mediathek – Kennzeichnung im Frontend (Urheber- und KI-Hinweis als Ebene über dem Bild).
 * Farben und Maße kommen als CSS-Variablen aus den Einstellungen; alles ist unter .prm-kz gekapselt,
 * damit Theme-Regeln die Hinweise nicht überschreiben.
 */

.prm-kz {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: middle;
}

.prm-kz > img,
.prm-kz > picture,
.prm-kz > a {
	display: block;
	max-width: 100%;
}

/* Ausrichtung klassischer Inhalte: Die Klasse sitzt auf der Hülle (nicht auf dem Bild). */
.prm-kz.alignleft {
	float: left;
}

.prm-kz.alignright {
	float: right;
}

.prm-kz.prm-kz-mitte {
	display: table;
	margin-right: auto;
	margin-left: auto;
}

/* Galerien mit „Bilder zuschneiden“: Die Hülle übernimmt die Rolle des Bildes im Flex-Layout. */
.is-cropped .prm-kz {
	display: flex;
	flex: 1 0 0%;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.is-cropped .prm-kz > img {
	flex: 1 0 0%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Doppelte Klasse: höhere Spezifität als übliche Theme-Regeln (z. B. .entry-content .wp-block-image span).
   .prm-kz-feld (ab 1.4.6): Ebene in Elementor-Galerien, Karussells und der Lightbox (per Skript gesetzt). */
.prm-kz.prm-kz .prm-kz-hinweis,
.prm-kz-feld.prm-kz-feld .prm-kz-hinweis {
	position: absolute;
	z-index: 2;
	max-width: calc(100% - 2 * var(--prm-kz-x, 8px));
	padding: var(--prm-kz-abstand, 6px) calc(var(--prm-kz-abstand, 6px) + 4px);
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--prm-kz-groesse, 12px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--prm-kz-farbe, #fff);
	text-align: left;
	text-shadow: none;
	letter-spacing: normal;
	word-break: break-word;
	pointer-events: auto;
	background: var(--prm-kz-hg, rgba(0, 0, 0, 0.6));
	border-radius: var(--prm-kz-ecken, 6px);
	box-shadow: none;
}

.prm-kz.prm-kz .prm-kz-hinweis a,
.prm-kz-feld.prm-kz-feld .prm-kz-hinweis a {
	color: inherit;
	text-decoration: underline;
}

/* Positionen mit einstellbarem Randabstand (--prm-kz-x seitlich, --prm-kz-y oben/unten). */
.prm-kz-pos-oben-links { top: var(--prm-kz-y, 8px); left: var(--prm-kz-x, 8px); }

.prm-kz-pos-oben-mitte { top: var(--prm-kz-y, 8px); left: 50%; transform: translateX(-50%); }

.prm-kz-pos-oben-rechts { top: var(--prm-kz-y, 8px); right: var(--prm-kz-x, 8px); }

.prm-kz-pos-mitte-links { top: 50%; left: var(--prm-kz-x, 8px); transform: translateY(-50%); }

.prm-kz-pos-mitte { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.prm-kz-pos-mitte-rechts { top: 50%; right: var(--prm-kz-x, 8px); transform: translateY(-50%); }

.prm-kz-pos-unten-links { bottom: var(--prm-kz-y, 8px); left: var(--prm-kz-x, 8px); }

.prm-kz-pos-unten-mitte { bottom: var(--prm-kz-y, 8px); left: 50%; transform: translateX(-50%); }

.prm-kz-pos-unten-rechts { right: var(--prm-kz-x, 8px); bottom: var(--prm-kz-y, 8px); }

/* Zwei Hinweise an derselben Position: den zweiten darunter bzw. darüber setzen (Klasse vom Server/Skript,
   nur wenn beide wirklich dieselbe Position haben – bis 1.4.5 rückte der zweite Hinweis immer). */
.prm-kz-gestapelt.prm-kz-pos-oben-links,
.prm-kz-gestapelt.prm-kz-pos-oben-mitte,
.prm-kz-gestapelt.prm-kz-pos-oben-rechts {
	top: calc(var(--prm-kz-y, 8px) + var(--prm-kz-groesse, 12px) * 1.3 + var(--prm-kz-abstand, 6px) * 2 + 6px);
}

.prm-kz-gestapelt.prm-kz-pos-unten-links,
.prm-kz-gestapelt.prm-kz-pos-unten-mitte,
.prm-kz-gestapelt.prm-kz-pos-unten-rechts {
	bottom: calc(var(--prm-kz-y, 8px) + var(--prm-kz-groesse, 12px) * 1.3 + var(--prm-kz-abstand, 6px) * 2 + 6px);
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-gestapelt.prm-kz-pos-oben-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-gestapelt.prm-kz-pos-oben-mitte,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-gestapelt.prm-kz-pos-oben-rechts {
	top: calc(var(--prm-kz-groesse, 12px) * 1.3 + var(--prm-kz-abstand, 6px) * 2);
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-gestapelt.prm-kz-pos-unten-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-gestapelt.prm-kz-pos-unten-mitte,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-gestapelt.prm-kz-pos-unten-rechts {
	bottom: calc(var(--prm-kz-groesse, 12px) * 1.3 + var(--prm-kz-abstand, 6px) * 2);
}

/* Formen (ab 1.4.6). Band: über die ganze Bildbreite, oben bzw. unten am Rand (Mitte: mittig). */
.prm-kz-form-band.prm-kz-form-band .prm-kz-hinweis {
	right: 0;
	left: 0;
	max-width: none;
	text-align: center;
	border-radius: 0;
	transform: none;
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-oben-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-oben-mitte,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-oben-rechts {
	top: 0;
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-unten-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-unten-mitte,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-unten-rechts {
	bottom: 0;
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-mitte-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-mitte,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-mitte-rechts {
	top: 50%;
	transform: translateY(-50%);
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-oben-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-mitte-links,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-unten-links {
	text-align: left;
}

.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-oben-rechts,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-mitte-rechts,
.prm-kz-form-band .prm-kz-hinweis.prm-kz-pos-unten-rechts {
	text-align: right;
}

/* Nur Text: kein Hintergrund, Schatten für Lesbarkeit auf hellen und dunklen Bildern. */
.prm-kz-form-text.prm-kz-form-text .prm-kz-hinweis {
	padding: 0;
	background: none;
	text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Ebenen in Galerien und Karussells (Kacheln): eine Stufe kleiner. */
.prm-kz-feld.prm-kz-klein .prm-kz-hinweis {
	font-size: calc(var(--prm-kz-groesse, 12px) - 2px);
	padding: calc(var(--prm-kz-abstand, 6px) * 0.6) calc(var(--prm-kz-abstand, 6px) * 0.6 + 3px);
}

/* Feld für die Ebene: nur positionieren, Layout von Galerie/Karussell unverändert. */
.prm-kz-feld-relativ {
	position: relative;
}

/* Ebene über einer Galerie-Kachel, einem Slide oder dem großen Bild der Lightbox (Lage dort per Skript).
   Klicks gehen durch die Ebene hindurch auf die Kachel (Lightbox öffnen), nur Links im Hinweis sind klickbar. */
.prm-kz-feld.prm-kz-ebene {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	line-height: normal;
	pointer-events: none;
}

.prm-kz-feld.prm-kz-ebene .prm-kz-hinweis {
	pointer-events: none;
}

.prm-kz-feld.prm-kz-ebene .prm-kz-hinweis a {
	pointer-events: auto;
}

/* Unter dem Bild (Bildunterschrift). */
.prm-kz-unter {
	display: block;
	margin: 4px 0 0;
	font-size: var(--prm-kz-groesse, 12px);
	line-height: 1.4;
	color: inherit;
	text-align: left;
	opacity: 0.85;
}

/* Nur bei Mauszeiger: einblenden; Tastatur und Touch behalten den Hinweis. */
@media (hover: hover) {

	.prm-kz-hover .prm-kz-hinweis {
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.prm-kz-hover:hover .prm-kz-hinweis,
	.prm-kz-hover:focus-within .prm-kz-hinweis {
		opacity: 1;
	}

	/* Galerien/Karussells: Die Ebene liegt in der Kachel; die Kachel trägt den Hover. */
	.prm-kz-feld-hover .prm-kz-ebene .prm-kz-hinweis {
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.prm-kz-feld-hover:hover .prm-kz-ebene .prm-kz-hinweis,
	.prm-kz-feld-hover:focus-within .prm-kz-ebene .prm-kz-hinweis {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.prm-kz-hover .prm-kz-hinweis,
	.prm-kz-feld-hover .prm-kz-hinweis {
		transition: none;
	}
}

@media (max-width: 600px) {

	.prm-kz.prm-kz .prm-kz-hinweis,
	.prm-kz-feld.prm-kz-feld .prm-kz-hinweis {
		font-size: calc(var(--prm-kz-groesse, 12px) - 1px);
	}
}

/* Beschriftung (ab 1.4.9): Bildunterschrift unter dem Bild oder Band unten auf dem Bild. */
.prm-kz-figur.prm-kz-figur {
	display: block;
	margin: 0;
}

.prm-kz-beschriftung {
	display: block;
	margin: 6px 0 0;
	font-size: 0.875em;
	line-height: 1.4;
	text-align: left;
	color: inherit;
}

.prm-kz-beschriftung.prm-kz-klemmen {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--prm-kz-zeilen, 2);
}

/* Band auf dem Bild: Hülle ist die Bezugsfläche. */
.prm-kz-huelle {
	position: relative;
}

.prm-kz-huelle .prm-kz-beschriftung.prm-kz-beschriftung-band {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	margin: 0;
	padding: var(--prm-kz-abstand, 6px) calc(var(--prm-kz-abstand, 6px) + 4px);
	background: var(--prm-kz-hg, rgba(0, 0, 0, 0.6));
	color: var(--prm-kz-farbe, #fff);
	font-size: var(--prm-kz-groesse, 12px);
	line-height: 1.4;
}

@media (hover: hover) {

	.prm-kz-huelle.prm-kz-hover .prm-kz-beschriftung-band {
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.prm-kz-huelle.prm-kz-hover:hover .prm-kz-beschriftung-band,
	.prm-kz-huelle.prm-kz-hover:focus-within .prm-kz-beschriftung-band {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {

	.prm-kz-huelle .prm-kz-beschriftung-band {
		transition: none;
	}
}