/*
 * 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.prm-kz .prm-kz-hinweis {
	position: absolute;
	z-index: 2;
	max-width: calc(100% - 16px);
	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 {
	color: inherit;
	text-decoration: underline;
}

.prm-kz-pos-oben-links { top: 8px; left: 8px; }

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

.prm-kz-pos-oben-rechts { top: 8px; right: 8px; }

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

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

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

.prm-kz-pos-unten-links { bottom: 8px; left: 8px; }

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

.prm-kz-pos-unten-rechts { right: 8px; bottom: 8px; }

/* Zwei Hinweise an derselben Position: den zweiten darunter setzen. */
.prm-kz .prm-kz-hinweis + .prm-kz-hinweis.prm-kz-pos-oben-links,
.prm-kz .prm-kz-hinweis + .prm-kz-hinweis.prm-kz-pos-oben-mitte,
.prm-kz .prm-kz-hinweis + .prm-kz-hinweis.prm-kz-pos-oben-rechts {
	top: calc(8px + var(--prm-kz-groesse, 12px) * 1.3 + var(--prm-kz-abstand, 6px) * 2 + 6px);
}

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

/* 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;
	}
}

@media (max-width: 600px) {

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