/* Foto-Rad (Blockstil is-style-foto-rad des Galerie-Blocks), siehe
   assets/js/foto-rad.js. Gilt nur mit JavaScript (Klasse foto-rad--aktiv);
   ohne bleibt die Galerie ein Raster. Bedienelemente in Tinte, je 44 px.
   :not(#foto-rad) hebt die Regeln über die des Kerns und der Bildreihen
   (theme.css, dpk-galerie), die selbst mit einem ID-Teil arbeiten. */

main .wp-block-gallery.has-nested-images.is-style-foto-rad.foto-rad--aktiv:not(#foto-rad) {
	display: block;
	max-width: 36rem;
	margin-block: 0 2.5rem;
}

.foto-rad--aktiv:focus-visible {
	outline: 3px solid var(--wp--preset--color--tinte);
	outline-offset: 4px;
	border-radius: 4px;
}

/* Alle Bilder liegen übereinander in derselben Zelle; sichtbar ist eins.
   Nicht gezeigte Bilder sind display:none (dann lädt der Browser sie nicht),
   beim Wechsel bleibt das alte 300 ms als "ist-gehend" stehen. */
.foto-rad__buehne {
	display: grid;
}

.wp-block-gallery.has-nested-images.foto-rad--aktiv .foto-rad__buehne > figure.wp-block-image:not(#foto-rad) {
	grid-area: 1 / 1;
	width: 100%;
	margin: 0;
	display: none;
	flex-direction: column;
}

.wp-block-gallery.has-nested-images.foto-rad--aktiv .foto-rad__buehne > figure.wp-block-image.ist-gehend:not(#foto-rad) {
	display: flex;
	position: relative;
	z-index: 0;
	animation: foto-rad-aus 300ms ease forwards;
}

@keyframes foto-rad-aus {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes foto-rad-ein {
	from { opacity: 0; }
	to { opacity: 1; }
}

.wp-block-gallery.has-nested-images.foto-rad--aktiv .foto-rad__buehne > figure.wp-block-image.ist-aktiv:not(#foto-rad) {
	display: flex;
	position: relative;
	z-index: 1;
	animation: foto-rad-ein 300ms ease;
}

.wp-block-gallery.has-nested-images.foto-rad--aktiv figure.wp-block-image:not(#foto-rad) img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--wp--preset--color--papier-tief);
	border-radius: var(--wp--custom--radius--foto, 6px);
	flex: 0 0 auto;
}

/* Bildunterschrift unter dem Bild statt darüber gelegt (Kern-Galerie). */
.wp-block-gallery.has-nested-images.foto-rad--aktiv figure.wp-block-image:not(#foto-rad) figcaption {
	position: static;
	background: none;
	color: var(--wp--preset--color--tinte);
	text-shadow: none;
	padding: 0.6rem 0 0;
	margin: 0;
	max-height: none;
	overflow: visible;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
}

.wp-block-gallery.has-nested-images.foto-rad--aktiv figure.wp-block-image:not(#foto-rad) figcaption::before {
	display: none;
}

/* Steuerung */
.foto-rad__steuerung {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 0.5rem;
}

.foto-rad__steuerung button {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 10px;
	border: 2px solid var(--wp--preset--color--tinte);
	border-radius: var(--wp--custom--radius--knopf, 4px);
	background: var(--wp--preset--color--karte);
	color: var(--wp--preset--color--tinte);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.foto-rad__steuerung button:hover {
	background: var(--wp--preset--color--papier-tief);
}

.foto-rad__steuerung button:focus-visible {
	outline: 3px solid var(--wp--preset--color--tinte);
	outline-offset: 2px;
}

.foto-rad__pfeil {
	padding: 0;
}

/* Punkte: Knopf 44 × 44, sichtbarer Punkt 12 px; aktiver Punkt gefüllt. */
.foto-rad__punkte {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	justify-content: center;
}

.foto-rad__steuerung .foto-rad__punkt {
	border: 0;
	background: none;
	padding: 0;
	min-width: 44px;
}

.foto-rad__punkt::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--tinte);
	box-sizing: border-box;
}

.foto-rad__punkt[aria-current="true"]::before {
	background: var(--wp--preset--color--tinte);
}

.foto-rad__steuerung .foto-rad__punkt:hover {
	background: none;
}

.foto-rad__steuerung .foto-rad__punkt:hover::before {
	background: var(--wp--preset--color--linie);
}

.foto-rad__steuerung .foto-rad__punkt[aria-current="true"]:hover::before {
	background: var(--wp--preset--color--tinte);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.has-nested-images.foto-rad--aktiv .foto-rad__buehne > figure.wp-block-image,
	.wp-block-gallery.has-nested-images.foto-rad--aktiv .foto-rad__buehne > figure.wp-block-image.ist-aktiv:not(#foto-rad) {
		animation: none;
	}
}

/* Schmal: Punkte in eigener Zeile über Zurück / Weiter / Pause. */
@media (max-width: 560px) {
	.foto-rad__punkte {
		order: -1;
		flex-basis: 100%;
	}
}