/*
 * OPASCA Veranstaltungen – Rückblick-Seite (Galerie)
 * Baut auf veranstaltungen.css auf (Farben, Buttons, Sprungleiste, Einblendungen).
 */

.opv.opv-gal {
	padding-top: clamp(16px, 3vw, 40px);
}

.opv-gal .opv-gal__h2 {
	margin: 0 0 clamp(20px, 2.5vw, 28px);
}

.opv-gal .opv-section__head .opv-gal__h2 {
	margin: 0;
}

.opv-gal .opv-section {
	margin: 0 0 clamp(72px, 10vw, 128px);
}

/* ---------- Kopfbereich: Titel überlappt das Key-Visual ---------- */

.opv-gal .opv-gh {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	min-height: clamp(560px, 82vh, 820px);
	overflow: hidden;
	border-radius: var(--opv-r-lg);
	background: var(--opv-ink);
	color: #fff;
	isolation: isolate;
}

.opv-gal .opv-gh__media {
	position: relative;
	grid-column: 5 / -1;
	grid-row: 1;
	overflow: hidden;
	background: var(--opv-ink);
}

.opv-gal .opv-gh__visual {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Verlauf vom Textfeld ins Bild: sichert die Lesbarkeit dort, wo der Titel das Bild überlappt. */
.opv-gal .opv-gh__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, var(--opv-ink) 0%, rgb(14 42 59 / .78) 22%, rgb(14 42 59 / .3) 52%, rgb(14 42 59 / 0) 78%),
		linear-gradient(to top, rgb(14 42 59 / .6) 0%, rgb(14 42 59 / 0) 42%);
	pointer-events: none;
}

.opv-gal .opv-gh__content {
	position: relative;
	z-index: 2;
	grid-column: 1 / span 8;
	grid-row: 1;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 2vw, 26px);
	padding: clamp(28px, 5vw, 64px);
}

.opv-gal .opv-gh__title {
	max-width: 15ch;
	margin: 0;
	padding: 0 0 .08em;
	overflow-y: clip;
	font-family: inherit;
	font-size: clamp(2.25rem, 5.6vw, 5.25rem);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.04em;
	color: #fff;
	text-shadow: 0 2px 28px rgb(7 22 33 / .35);
	text-wrap: balance;
}

.opv-gal .opv-gh__title-inner {
	display: block;
}

.opv-gal .opv-gh p.opv-gh__thanks {
	max-width: 38ch;
	margin: 0;
	font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
	font-weight: 500;
	line-height: 1.45;
	color: rgb(255 255 255 / .9);
	text-shadow: 0 1px 16px rgb(7 22 33 / .4);
}

.opv-gal .opv-gh__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 6px 0 0;
}

.opv-gal .opv-gh__fact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px 0 14px;
	border: 1px solid rgb(255 255 255 / .18);
	border-radius: 999px;
	background: rgb(7 22 33 / .45);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.opv-gal .opv-gh__fact dt {
	margin: 0;
	color: var(--opv-cyan);
}

.opv-gal .opv-gh__fact dt svg {
	display: block;
}

.opv-gal .opv-gh__fact dd {
	margin: 0;
	font-size: .9375rem;
	font-weight: 600;
	color: #fff;
}

.opv-gal .opv-gh__toggle {
	position: absolute;
	right: clamp(16px, 2vw, 28px);
	bottom: clamp(16px, 2vw, 28px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgb(255 255 255 / .3);
	border-radius: 50%;
	background: rgb(7 22 33 / .45);
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.opv-gal .opv-gh__toggle svg {
	display: block;
	width: 18px;
	height: 18px;
}

.opv-gal .opv-gh__icon-play,
.opv-gal .opv-gh__toggle.is-paused .opv-gh__icon-pause {
	display: none;
}

.opv-gal .opv-gh__toggle.is-paused .opv-gh__icon-play {
	display: block;
}

/* Ladeeindruck: Bild setzt sich, Titel steigt aus der Maske */
.opv.opv-js .opv-gh__visual {
	animation: opv-settle 1.8s var(--opv-ease) both;
}

.opv.opv-js .opv-gh__title-inner {
	animation: opv-rise 1s var(--opv-ease) .15s both;
}

.opv.opv-js .opv-gh__thanks,
.opv.opv-js .opv-gh__facts {
	animation: opv-fade .8s var(--opv-ease) .5s both;
}

@keyframes opv-settle {
	from { opacity: .35; transform: scale(1.08); }
	to { opacity: 1; transform: none; }
}

/* ---------- Schnelleinstieg ---------- */

.opv-gal .opv-jump {
	max-width: 100%;
	margin: clamp(20px, 3vw, 32px) 0 clamp(48px, 7vw, 88px);
	overflow-x: auto;
	scrollbar-width: none;
}

.opv-gal .opv-jump::-webkit-scrollbar {
	display: none;
}

.opv-gal .opv-switch__link {
	white-space: nowrap;
}

.opv-gal .opv-jump__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	margin-left: 6px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--opv-cyan);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--opv-ink);
	text-decoration: none;
	transition: background-color .25s;
}

.opv-gal .opv-jump__cta:hover {
	background: #7fd0f3;
	color: var(--opv-ink);
}

/* ---------- Recap-Video ---------- */

.opv-gal .opv-gv__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--opv-r-lg);
	background: var(--opv-ink);
}

.opv-gal .opv-gv__poster {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 1s var(--opv-ease);
}

.opv-gal .opv-gv__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60% 70% at 50% 50%, rgb(7 22 33 / .15) 0%, rgb(7 22 33 / .6) 100%);
	pointer-events: none;
}

.opv-gal .opv-gv__frame.is-playing::after {
	display: none;
}

.opv-gal .opv-gv__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	color: #fff;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	font-weight: 600;
	text-decoration: none;
	text-shadow: 0 1px 12px rgb(7 22 33 / .5);
}

.opv-gal .opv-gv__play:hover,
.opv-gal .opv-gv__play:focus-visible {
	color: #fff;
}

.opv-gal .opv-gv__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -8px;
	border-radius: var(--opv-r-lg);
}

.opv-gal .opv-gv__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(72px, 9vw, 108px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--opv-cyan);
	transition: transform .4s var(--opv-ease);
}

.opv-gal .opv-gv__icon::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 12%;
	border-style: solid;
	border-width: 13px 0 13px 21px;
	border-color: transparent transparent transparent var(--opv-ink);
}

.opv-gal .opv-gv__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgb(66 186 238 / .55);
	animation: opv-ring 2.4s ease-out infinite;
}

@keyframes opv-ring {
	from { box-shadow: 0 0 0 0 rgb(66 186 238 / .55); }
	to { box-shadow: 0 0 0 26px rgb(66 186 238 / 0); }
}

.opv-gal .opv-gv__play:hover .opv-gv__icon {
	transform: scale(1.07);
}

.opv-gal .opv-gv__frame:hover .opv-gv__poster {
	transform: scale(1.03);
}

.opv-gal .opv-gv__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.opv-gal .opv-gv p.opv-gv__hint {
	margin: 10px 0 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--opv-muted);
}

.opv-gal .opv-gv p.opv-gv__hint a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.opv-gal .opv-gv p.opv-gv__hint a:hover {
	color: var(--opv-blue);
}

/* ---------- Fotos: Reihen gleicher Höhe, Hoch- und Querformate behalten ihr Format ---------- */

.opv-gal .opv-gp__count {
	margin: 0;
	font-size: .9375rem;
	color: var(--opv-muted);
}

.opv-gal .opv-gp__grid {
	--opv-row: clamp(150px, 19vw, 290px);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(6px, .9vw, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Letzte Reihe nicht auf volle Breite ziehen – außer sie ist fast voll (JavaScript setzt .is-flush) */
.opv-gal .opv-gp__grid::after {
	content: "";
	flex-grow: 999999;
}

.opv-gal .opv-gp__grid.is-flush::after {
	display: none;
}

.opv-gal .opv-gp__item {
	position: relative;
	flex-grow: calc(var(--ar) * 100);
	flex-basis: calc(var(--ar) * var(--opv-row));
	min-width: 0;
	margin: 0;
	aspect-ratio: var(--ar);
}

.opv-gal .opv-gp__item[hidden] {
	display: none;
}

.opv-gal .opv-gp__link {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: var(--opv-surface);
	cursor: zoom-in;
}

.opv-gal .opv-gp__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .8s var(--opv-ease);
}

.opv-gal .opv-gp__link::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(14 42 59 / 0);
	transition: background-color .35s;
}

.opv-gal .opv-gp__link:hover .opv-gp__img {
	transform: scale(1.045);
}

.opv-gal .opv-gp__link:hover::after {
	background: rgb(14 42 59 / .14);
}

.opv-gal .opv-gp__link:focus-visible {
	outline: 3px solid var(--opv-blue);
	outline-offset: 3px;
}

.opv.opv-js .opv-gp__item[data-opv-reveal] {
	transform: translateY(22px) scale(.97);
}

.opv.opv-js .opv-gp__item[data-opv-reveal].is-in {
	transform: none;
}

.opv-gal .opv-gp__more {
	display: flex;
	justify-content: center;
	margin-top: clamp(24px, 3vw, 36px);
}

.opv-gal .opv-gp__more[hidden] {
	display: none;
}

/* Nur auf dem Handy nötig, wenn dort weniger Fotos in der Vorschau stehen */
@media (min-width: 641px) {
	.opv-gal .opv-gp__more--mobile {
		display: none;
	}
}

.opv-gal .opv-gp__removal {
	max-width: 70ch;
	margin: clamp(20px, 2.5vw, 28px) auto 0;
	font-size: .875rem;
	text-align: center;
	color: var(--opv-muted);
}

/* ---------- Speaker: Text überlappt das Porträt auf eigener Fläche ---------- */

.opv-gal .opv-gs__list {
	display: grid;
	gap: clamp(48px, 7vw, 96px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.opv-gal .opv-gs__item {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	margin: 0;
}

.opv-gal .opv-gs__portrait {
	grid-column: 1 / span 5;
	grid-row: 1;
	aspect-ratio: 4 / 5;
	border-radius: var(--opv-r);
}

.opv-gal .opv-gs__panel {
	position: relative;
	z-index: 1;
	grid-column: 5 / span 7;
	grid-row: 1;
	margin-bottom: clamp(24px, 4vw, 56px);
	padding: clamp(24px, 3.4vw, 48px);
	border-radius: var(--opv-r);
	background: var(--opv-surface);
}

.opv-gal .opv-gs__item:nth-child(even) .opv-gs__portrait {
	grid-column: 8 / span 5;
}

.opv-gal .opv-gs__item:nth-child(even) .opv-gs__panel {
	grid-column: 2 / span 7;
}

.opv-gal .opv-gs__item.is-textonly .opv-gs__panel {
	grid-column: 1 / -1;
	margin: 0;
}

.opv-gal .opv-gs__name {
	margin: 0;
	font-family: inherit;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.03em;
	color: var(--opv-ink);
}

.opv-gal .opv-gs__role {
	margin: 8px 0 0;
	font-size: .9375rem;
	color: var(--opv-muted);
}

.opv-gal .opv-gs__talk {
	margin: 20px 0 0;
	padding-left: 14px;
	border-left: 3px solid var(--opv-cyan);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--opv-ink);
}

.opv-gal .opv-gs__text {
	max-width: 58ch;
	margin: 16px 0 0;
	color: var(--opv-muted);
}

.opv-gal .opv-gs__dl {
	gap: 10px;
	margin-top: 24px;
	background: #fff;
}

.opv-gal .opv-gs__dl svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.opv-gal .opv-gs__meta {
	font-size: .8125rem;
	font-weight: 500;
	color: var(--opv-muted);
}

/* ---------- Pre-Registration ---------- */

.opv-gal .opv-gc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 24px 48px;
	padding: clamp(32px, 5vw, 64px);
	border-radius: var(--opv-r-lg);
	background: var(--opv-ink);
	color: #fff;
}

.opv-gal .opv-gc__title {
	margin: 0;
	font-family: inherit;
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.035em;
	color: #fff;
	text-wrap: balance;
}

.opv-gal .opv-gc__text {
	max-width: 54ch;
	margin: 14px 0 0;
	color: rgb(255 255 255 / .82);
}

.opv-gal .opv-gc__btn {
	background: var(--opv-cyan);
	color: var(--opv-ink);
}

.opv-gal .opv-gc__btn:hover {
	background: #fff;
	color: var(--opv-ink);
}

/* ---------- Danke-Abschnitt: dunkle Fläche, blaues Licht von rechts ---------- */

.opv-gal .opv-gt {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(44px, 7vw, 104px) clamp(24px, 6vw, 88px) clamp(52px, 7.5vw, 112px);
	border-radius: var(--opv-r-lg);
	background: #050d13;
	color: #fff;
}

.opv-gal .opv-gt__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2.5vw, 32px);
}

/*
 * Volle Seitenbreite: Das Skript misst Seitenbreite und Lage des Inhaltsbereichs.
 * Der Hintergrund läuft über die ganze Seite, die Inhalte bleiben bündig mit dem übrigen Seiteninhalt.
 * Ohne Skript bleibt der Abschnitt als abgerundete Fläche im Inhaltsbereich.
 */
.opv-gal .opv-gt.is-bleed {
	width: var(--opv-page-w);
	max-width: none;
	margin-left: var(--opv-bleed-left);
	padding-right: 0;
	padding-left: 0;
	border-radius: 0;
}

.opv-gal .opv-gt.is-bleed .opv-gt__inner {
	width: var(--opv-inner-w);
	margin-left: var(--opv-inner-left);
}

.opv.opv-gal.has-closing {
	padding-bottom: 0;
}

/* Lichtschein von rechts */
.opv-gal .opv-gt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(38% 70% at 100% 50%, rgb(120 210 245 / .55) 0%, rgb(66 186 238 / 0) 100%),
		radial-gradient(62% 105% at 104% 50%, rgb(66 186 238 / .7) 0%, rgb(33 120 170 / .32) 45%, rgb(5 13 19 / 0) 100%);
	transform-origin: 100% 50%;
	animation: opv-glow 8s ease-in-out infinite alternate;
	pointer-events: none;
}

/* Feine senkrechte Lichtstreifen im Schein */
.opv-gal .opv-gt::after {
	content: "";
	position: absolute;
	inset: 0 0 0 45%;
	z-index: -1;
	background: repeating-linear-gradient(90deg, rgb(190 235 255 / .16) 0 1px, rgb(190 235 255 / 0) 1px 8px);
	-webkit-mask-image: radial-gradient(70% 90% at 100% 50%, #000 0%, transparent 75%);
	mask-image: radial-gradient(70% 90% at 100% 50%, #000 0%, transparent 75%);
	pointer-events: none;
}

@keyframes opv-glow {
	from { opacity: .8; transform: scaleX(.94); }
	to { opacity: 1; transform: none; }
}

/* Key-Visual links, dunkel und in Graustufen */
.opv-gal .opv-gt__visual {
	position: absolute;
	inset: 0 42% 0 0;
	z-index: -2;
	pointer-events: none;
}

.opv-gal .opv-gt__visual img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: .3;
	filter: grayscale(1) contrast(1.15) brightness(.75);
	-webkit-mask-image: linear-gradient(to right, #000 15%, transparent 92%);
	mask-image: linear-gradient(to right, #000 15%, transparent 92%);
}

.opv-gal .opv-gt__title {
	grid-column: 1 / span 10;
	grid-row: 1;
	max-width: 17ch;
	margin: 0;
	font-family: inherit;
	font-size: clamp(2.5rem, 6.6vw, 5.75rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -.035em;
	color: #fff;
	text-wrap: balance;
}

.opv-gal .opv-gt__title strong {
	font-weight: 700;
	color: var(--opv-cyan);
}

.opv-gal .opv-gt__meta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	grid-column: 1 / span 4;
	grid-row: 2;
	align-self: start;
	margin-top: clamp(48px, 8vw, 116px);
	padding-right: 12px;
	font-size: .875rem;
	line-height: 1.6;
	color: rgb(255 255 255 / .66);
}

.opv-gal .opv-gt .opv-gt__meta p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
}

.opv-gal .opv-gt__body {
	grid-column: 5 / -1;
	grid-row: 2;
	margin-top: clamp(40px, 7vw, 104px);
}

.opv-gal .opv-gt p.opv-gt__lead {
	max-width: 30ch;
	margin: 0;
	font-size: clamp(1.25rem, 2.3vw, 1.875rem);
	font-weight: 300;
	line-height: 1.35;
	color: rgb(255 255 255 / .94);
}

.opv-gal .opv-gt p.opv-gt__next {
	max-width: 50ch;
	margin: clamp(28px, 3.4vw, 44px) 0 0;
	font-size: .9375rem;
	color: rgb(255 255 255 / .72);
}

.opv-gal .opv-gt p.opv-gt__next strong {
	display: block;
	margin-bottom: 4px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.opv-gal .opv-gt__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 24px;
	padding: 0 24px;
	border: 1px solid rgb(255 255 255 / .6);
	border-radius: 999px;
	font-size: .9375rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transition: background-color .25s, border-color .25s, color .25s;
}

.opv-gal .opv-gt__btn:hover {
	border-color: var(--opv-cyan);
	background: var(--opv-cyan);
	color: var(--opv-ink);
}

.opv-gal .opv-gt__btn:focus-visible {
	outline: 3px solid var(--opv-cyan);
	outline-offset: 3px;
}

@media (max-width: 960px) {
	.opv-gal .opv-gt__title,
	.opv-gal .opv-gt__body,
	.opv-gal .opv-gt__meta {
		grid-column: 1 / -1;
	}

	.opv-gal .opv-gt__meta {
		grid-row: 3;
		margin-top: 40px;
		padding-top: 24px;
		border-top: 1px solid rgb(255 255 255 / .14);
	}

	.opv-gal .opv-gt__visual {
		inset: 0 0 45% 0;
	}

	.opv-gal .opv-gt__visual img {
		-webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 95%);
		mask-image: linear-gradient(to bottom, #000 10%, transparent 95%);
	}

	.opv-gal .opv-gt::before {
		background:
			radial-gradient(70% 45% at 100% 100%, rgb(120 210 245 / .5) 0%, rgb(66 186 238 / 0) 100%),
			radial-gradient(110% 70% at 100% 105%, rgb(66 186 238 / .65) 0%, rgb(33 120 170 / .28) 45%, rgb(5 13 19 / 0) 100%);
		transform-origin: 100% 100%;
	}

	.opv-gal .opv-gt::after {
		inset: 40% 0 0 0;
		-webkit-mask-image: radial-gradient(90% 80% at 100% 100%, #000 0%, transparent 75%);
		mask-image: radial-gradient(90% 80% at 100% 100%, #000 0%, transparent 75%);
	}
}

@media (max-width: 640px) {
	.opv-gal .opv-gt {
		padding: 40px 22px 44px;
		border-radius: var(--opv-r);
	}

	.opv-gal .opv-gt.is-bleed {
		padding-right: 0;
		padding-left: 0;
		border-radius: 0;
	}

	.opv-gal .opv-gt__body {
		margin-top: 28px;
	}
}

/* ---------- Responsiv ---------- */

@media (max-width: 960px) {
	.opv-gal .opv-gh {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.opv-gal .opv-gh__media {
		grid-column: 1;
		aspect-ratio: 4 / 3;
	}

	.opv-gal .opv-gh__media::after {
		background: linear-gradient(to top, var(--opv-ink) 0%, rgb(14 42 59 / .55) 32%, rgb(14 42 59 / 0) 62%);
	}

	.opv-gal .opv-gh__content {
		grid-column: 1;
		grid-row: 2;
		margin-top: clamp(-120px, -18vw, -72px);
		padding-top: 0;
	}

	.opv-gal .opv-gh__toggle {
		top: 16px;
		bottom: auto;
	}

	.opv-gal .opv-gs__item,
	.opv-gal .opv-gs__item:nth-child(even) {
		grid-template-columns: minmax(0, 1fr);
	}

	.opv-gal .opv-gs__portrait,
	.opv-gal .opv-gs__item:nth-child(even) .opv-gs__portrait {
		grid-column: 1;
		grid-row: 1;
		width: min(100%, 460px);
	}

	.opv-gal .opv-gs__panel,
	.opv-gal .opv-gs__item:nth-child(even) .opv-gs__panel {
		grid-column: 1;
		grid-row: 2;
		margin: -64px 0 0 clamp(16px, 6vw, 48px);
	}

	.opv-gal .opv-gs__item.is-textonly .opv-gs__panel {
		grid-row: 1;
		margin: 0;
	}

	.opv-gal .opv-gc {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}
}

@media (max-width: 640px) {
	.opv.opv-gal {
		padding-top: 12px;
	}

	.opv-gal .opv-section {
		margin-bottom: 64px;
	}

	.opv-gal .opv-gh,
	.opv-gal .opv-gv__frame,
	.opv-gal .opv-gc {
		border-radius: var(--opv-r);
	}

	.opv-gal .opv-gh__content {
		gap: 16px;
		padding: 0 20px 24px;
	}

	.opv-gal .opv-gh__fact {
		min-height: 40px;
		padding: 0 14px 0 12px;
	}

	.opv-gal .opv-jump {
		margin: 16px 0 40px;
	}

	/* Große Fotos: eine Spalte in voller Breite, Hochformate höchstens 4:5 */
	.opv-gal .opv-gp__grid {
		gap: 10px;
	}

	.opv-gal .opv-gp__grid::after {
		display: none;
	}

	.opv-gal .opv-gp__item {
		flex: 0 0 100%;
		aspect-ratio: var(--ar-m, var(--ar));
	}

	.opv-gal .opv-gp__grid:not(.is-expanded) [data-opv-mobile-extra] {
		display: none;
	}

	.opv-gal .opv-gp__link {
		border-radius: 12px;
	}

	.opv-gal .opv-gs__panel,
	.opv-gal .opv-gs__item:nth-child(even) .opv-gs__panel {
		margin: -56px 0 0 16px;
		padding: 22px 20px;
	}

	.opv-gal .opv-gs__item.is-textonly .opv-gs__panel {
		margin: 0;
	}

	.opv-gal .opv-gc {
		padding: 28px 22px;
	}
}

/* ---------- Kopfbereich über die volle Seitenbreite ---------- */

/*
 * Der Kopfbereich bleibt im Inhaltsbereich (Texte bündig mit der Seite); Hintergrund und Bild reichen
 * bis an die Seitenränder. Die Abstände zu den Rändern (--opv-edge-l/-r) setzt ein kleines Skript direkt
 * nach dem Kopfbereich, noch vor dem ersten Zeichnen – dadurch springt nichts.
 * Oben ohne Rundung, direkt unter dem Header; unten abgerundet.
 */
.opv.opv-gal {
	padding-top: 0;
}

.opv-gal .opv-gh {
	overflow: visible;
	border-radius: 0;
	background: none;
}

.opv-gal .opv-gh::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--opv-edge-r, 0px);
	bottom: 0;
	left: var(--opv-edge-l, 0px);
	z-index: -1;
	border-radius: 0 0 var(--opv-r-lg) var(--opv-r-lg);
	background: var(--opv-ink);
}

/* Überschrift an der Breite des Inhaltsbereichs ausrichten, nicht an der Bildschirmbreite */
.opv-gal .opv-gh {
	container-type: inline-size;
}

@supports (font-size: 1cqi) {
	.opv-gal .opv-gh__title {
		max-width: 16ch;
		font-size: clamp(2.25rem, 8.5cqi, 5.25rem);
	}
}

@media (min-width: 961px) {
	.opv-gal .opv-gh__media {
		position: absolute;
		top: 0;
		right: var(--opv-edge-r, 0px);
		bottom: 0;
		left: 38%;
		grid-column: auto;
		grid-row: auto;
		border-radius: 0 0 var(--opv-r-lg) 0;
	}

	.opv-gal .opv-gh__content {
		grid-column: 1 / -1;
		padding-left: 0;
	}
}

@media (max-width: 960px) {
	.opv-gal .opv-gh__media {
		margin-right: var(--opv-edge-r, 0px);
		margin-left: var(--opv-edge-l, 0px);
	}

	.opv-gal .opv-gh__content {
		padding-right: 0;
		padding-left: 0;
	}
}

@media (max-width: 640px) {
	.opv-gal .opv-gh {
		border-radius: 0;
	}

	.opv-gal .opv-gh::before {
		border-radius: 0 0 var(--opv-r) var(--opv-r);
	}
}

/* ---------- Vollbildansicht (liegt außerhalb von .opv, direkt im body) ---------- */

html.opv-lb-open {
	overflow: hidden;
}

.opv-lb {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100vw !important;
	max-width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	max-height: 100dvh !important;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: rgb(6 18 27 / .97);
	font-family: inherit;
	color: #fff;
}

.opv-lb::backdrop {
	background: rgb(6 18 27 / .7);
}

.opv-lb[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	animation: opv-lb-in .28s ease-out;
}

@keyframes opv-lb-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.opv-lb *,
.opv-lb *::before,
.opv-lb *::after {
	box-sizing: border-box;
}

.opv-lb__top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px clamp(12px, 3vw, 28px);
}

.opv-lb__count {
	font-size: .9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.opv-lb__report {
	margin-left: auto;
	font-size: .875rem;
	color: rgb(255 255 255 / .85);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.opv-lb__report:hover {
	color: #fff;
}

.opv-lb__close,
.opv-lb__nav {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .1);
	color: #fff;
	cursor: pointer;
	transition: background-color .2s;
}

.opv-lb__close {
	margin-left: 8px;
}

.opv-lb__report + .opv-lb__close {
	margin-left: 0;
}

.opv-lb__count + .opv-lb__close {
	margin-left: auto;
}

.opv-lb__close:hover,
.opv-lb__nav:hover {
	background: rgb(255 255 255 / .2);
}

.opv-lb__close:focus-visible,
.opv-lb__nav:focus-visible,
.opv-lb__report:focus-visible {
	outline: 3px solid var(--opv-cyan, #42baee);
	outline-offset: 3px;
}

.opv-lb__close svg,
.opv-lb__nav svg {
	width: 22px;
	height: 22px;
}

.opv-lb__stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 0;
	padding: 0 clamp(8px, 7vw, 96px);
	touch-action: pan-y;
}

.opv-lb__stage {
	overflow: hidden;
}

/*
 * Nie größer als der Bildschirm: Höhe abzüglich Kopfzeile und Bildunterschrift.
 * !important, weil Themes oft eigene Bildregeln setzen (z. B. height: auto), die sonst gewinnen.
 */
.opv-lb .opv-lb__stage .opv-lb__img {
	display: block;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: calc(100vh - 150px) !important;
	max-height: calc(100dvh - 150px) !important;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	object-fit: contain;
	transition: opacity .25s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
	user-select: none;
}

.opv-lb .opv-lb__stage .opv-lb__img.is-loading {
	opacity: 0;
	transform: scale(.985);
}

.opv-lb__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.opv-lb__nav--prev {
	left: clamp(8px, 2vw, 28px);
}

.opv-lb__nav--next {
	right: clamp(8px, 2vw, 28px);
}

.opv-lb__caption {
	min-height: 1.5em;
	margin: 0;
	padding: 10px clamp(12px, 3vw, 28px) 18px;
	font-size: .9375rem;
	text-align: center;
	color: rgb(255 255 255 / .8);
}

@media (max-width: 640px) {
	.opv-lb__nav {
		top: auto;
		bottom: 12px;
		transform: none;
		background: rgb(255 255 255 / .16);
	}

	.opv-lb__stage {
		padding: 0 0 72px;
	}

	.opv-lb .opv-lb__stage .opv-lb__img {
		max-height: calc(100vh - 222px) !important;
		max-height: calc(100dvh - 222px) !important;
		border-radius: 0;
	}

}

@media (prefers-reduced-motion: reduce) {
	.opv-lb[open],
	.opv-lb .opv-lb__stage .opv-lb__img {
		animation: none;
		transition: none;
	}

	.opv-gal .opv-gv__icon::after,
	.opv-gal .opv-gt::before {
		animation: none;
	}
}