/*
Theme Name: Farthest Outpost 2026
Theme URI: https://farthest-outpost.com/
Author: Patrick
Description: Block-Theme für Farthest Outpost, Child-Theme von Twenty Twenty-Five.
Template: twentytwentyfive
Requires at least: 7.0
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: farthest2026
*/

html {
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
}

/* Sektionen liegen direkt aneinander, die Schrägen regeln die Übergänge. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Footer 1px hochziehen, sonst blitzt bei krummen Pixelwerten eine dunkle Haarlinie über ihm durch. */
.wp-site-blocks > footer.wp-block-template-part {
	position: relative;
	margin-block-start: -1px;
}

/* GSAP legt festgehaltene Sektionen in ein div.pin-spacer, WordPress würde es sonst auf die Inhaltsbreite begrenzen. */
.has-global-padding > .pin-spacer:has(> .alignfull) {
	max-width: none !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
}

.pin-spacer > .alignfull {
	width: 100% !important;
	max-width: none !important;
}

/* Header */

body:not(.editor-styles-wrapper) .wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	transition: background-color .3s;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0);
}

.wp-site-blocks > header.fo-solid {
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent);
	backdrop-filter: blur(6px);
}

/* Schrägen */

:is(.is-style-fo-schraeg-oben, .is-style-fo-schraeg-unten, .is-style-fo-schraeg-beide, .is-style-fo-hero, .is-style-fo-merch-buehne) {
	position: relative;
	z-index: 1;
}

.is-style-fo-schraeg-oben {
	clip-path: polygon(0 var(--wp--custom--slant), 100% 0, 100% 100%, 0 100%);
}

.is-style-fo-schraeg-unten,
.is-style-fo-hero {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--wp--custom--slant)), 0 100%);
}

.is-style-fo-schraeg-beide,
.is-style-fo-merch-buehne {
	clip-path: polygon(0 var(--wp--custom--slant), 100% 0, 100% calc(100% - var(--wp--custom--slant)), 0 100%);
}

/* Treffen zwei Schrägen aufeinander, rückt die untere Sektion hoch, damit kein Keil dazwischen bleibt. */
:is(.is-style-fo-schraeg-unten, .is-style-fo-schraeg-beide, .is-style-fo-hero, .is-style-fo-merch-buehne) + :is(.is-style-fo-schraeg-oben, .is-style-fo-schraeg-beide, .is-style-fo-merch-buehne) {
	margin-block-start: calc(-1 * var(--wp--custom--slant));
}

/* Spalte so breit wie ihr Inhalt (Überschrift neben dem Video-Raster, Merch-Kopf). „auto“ als Spaltenbreite verwirft der Editor beim Speichern, deshalb als Klasse. */
.wp-block-columns > .wp-block-column.fo-spalte-auto.fo-spalte-auto {
	flex: 0 0 auto;
}

/* Die Mail-Adresse in Überschriftgröße muss auf dem Handy umbrechen dürfen (Umbruch ist im Editor nicht einstellbar). */
a[href^="mailto:"] {
	overflow-wrap: anywhere;
}

/* Hero: Video getönt, Raster und Verlauf darüber */

.is-style-fo-hero :is(.wp-block-cover__video-background, .wp-block-cover__image-background) {
	filter: grayscale(1) contrast(1.25) brightness(.8);
	transform-origin: 50% 40%;
}

/* Die Overlay-Farbe des Covers färbt das Video ein statt es abzudecken. */
.is-style-fo-hero .wp-block-cover__background {
	mix-blend-mode: multiply;
}

/* Bei Inhaltsposition „unten links“ schrumpft der Inhalt sonst auf seine Breite (Kern-Regel mit vier Klassen). */
.wp-block-cover.is-style-fo-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

.is-style-fo-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image: var(--wp--custom--raster), linear-gradient(0deg, color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent), transparent 60%);
	background-size: var(--fo-raster, 4px) var(--fo-raster, 4px), 100% 100%;
}

/* Inhalt über dem Raster, das Raster liegt nur auf dem Video. */
.is-style-fo-hero > .wp-block-cover__inner-container {
	z-index: 2;
}

/* Kontur-Wort (Schrift in theme.json) */

.wp-block-group:has(> [class*="is-style-fo-kontur"]) {
	position: relative;
	overflow: hidden;
}

.wp-block-group:has(> [class*="is-style-fo-kontur"]) > :not([class*="is-style-fo-kontur"]) {
	position: relative;
	z-index: 1;
}

.wp-block-group > [class*="is-style-fo-kontur"] {
	position: absolute;
	top: 50%;
	left: -2%;
	z-index: 0;
	width: max-content;
	max-width: none;
	transform: translateY(-50%);
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--wp--preset--color--orange) 22%, transparent);
	pointer-events: none;
	user-select: none;
}

.wp-block-group.has-orange-background-color > [class*="is-style-fo-kontur"] {
	-webkit-text-stroke-color: color-mix(in srgb, var(--wp--preset--color--ink) 16%, transparent);
}

.wp-block-group > .is-style-fo-kontur-oben {
	top: var(--wp--custom--slant);
	transform: none;
}

.wp-block-group > .is-style-fo-kontur-unten {
	top: auto;
	bottom: var(--wp--custom--slant);
	transform: none;
}

.wp-block-group > [class*="is-style-fo-kontur"] + * {
	margin-block-start: 0;
}

/* Im Editor steht das Wort im Fluss, damit es sich anklicken lässt. */
.editor-styles-wrapper .wp-block-group > [class*="is-style-fo-kontur"] {
	position: static;
	transform: none;
	pointer-events: auto;
}

/* Video-Karte (Titel, Abstände und Ränder in theme.json) */

.is-style-fo-video-karte {
	position: relative;
	display: grid;
}

.is-style-fo-video-karte > * {
	grid-area: 1 / 1;
}

.is-style-fo-video-karte > :is(.wp-block-video, .wp-block-image) {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--custom--ink-3);
}

.is-style-fo-video-karte :is(video, img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter .3s, transform .5s;
}

.is-style-fo-video-karte:hover :is(video, img) {
	filter: grayscale(1) contrast(1.2);
	transform: scale(1.04);
}

/* Play-Symbol als SVG, iOS zeigt ▶ als Emoji. Füllfarbe = Ink. */
.is-style-fo-video-karte::after {
	content: "";
	position: absolute;
	top: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	z-index: 2;
	width: 44px;
	height: 44px;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M0 0v18l16-9z' fill='%230d0d0c'/%3E%3C/svg%3E") 55% 50% / 14px 16px no-repeat,
		var(--wp--preset--color--orange);
	box-shadow: 0 0 0 2px var(--wp--preset--color--ink);
	pointer-events: none;
}

.is-style-fo-video-karte > :not(.wp-block-video, .wp-block-image) {
	z-index: 1;
	align-self: end;
	background: linear-gradient(0deg, color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent), transparent);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .25s;
}

/* Die ganze Karte ist klickbar, der Link liegt im Titel. */
.is-style-fo-video-karte a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.is-style-fo-video-karte:is(:hover, :focus-within, .fo-on) > :not(.wp-block-video, .wp-block-image) {
	opacity: 1;
	transform: none;
}

.is-style-fo-video-karte.fo-on > :is(.wp-block-video, .wp-block-image) {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: -3px;
}

.editor-styles-wrapper .is-style-fo-video-karte > :not(.wp-block-video, .wp-block-image) {
	opacity: 1;
	transform: none;
}

.editor-styles-wrapper .is-style-fo-video-karte a::after {
	display: none;
}

@media (max-width: 899px), (hover: none) {
	.is-style-fo-video-karte > :not(.wp-block-video, .wp-block-image) {
		opacity: 1;
		transform: none;
	}
}

/* Fernseher: Der Versatz nach oben ist am Block eingestellt, die Antenne liegt hinter den Karten. */

.wp-block-fo-fernseher {
	position: relative;
	z-index: 1;
	width: min(750px, 100%);
	margin-inline: auto;
	padding-top: clamp(56px, 10vw, 100px);
	color: var(--wp--preset--color--ink);
}

.wp-block-group:has(> .wp-block-fo-fernseher) > .wp-block-columns {
	position: relative;
	z-index: 2;
}

.fo-tv-antenne {
	position: absolute;
	top: 0;
	left: 38%;
	width: 44%;
	height: auto;
}

.fo-tv-rahmen {
	padding: clamp(8px, 1.4vw, 14px);
	border-radius: clamp(18px, 3vw, 30px);
	background: var(--wp--preset--color--ink);
}

.fo-tv-innen {
	display: flex;
	gap: clamp(12px, 2vw, 22px);
	padding: clamp(12px, 2.2vw, 22px);
	border-radius: clamp(12px, 2vw, 20px);
	background: var(--wp--custom--tv--innen);
}

.fo-tv-bildschirm {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12% / 15%;
	background: #000;
	box-shadow: inset 0 0 0 2px var(--wp--custom--tv--rand);
}

.fo-tv-bildschirm :is(img, video) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .3s;
}

.fo-tv-bildschirm .fo-an {
	opacity: 1;
}

/* Karten ohne Teaser zeigen ihr Standbild mit langsamem Zoom. */
.fo-tv-bild.fo-an {
	animation: fo-tv-zoom 8s ease-out both;
}

@keyframes fo-tv-zoom {
	to {
		transform: scale(1.12);
	}
}

.fo-tv-raster {
	position: absolute;
	inset: 0;
	opacity: .4;
	pointer-events: none;
	background: var(--wp--custom--raster) 0 0 / 4px 4px;
}

.fo-tv-seite {
	display: flex;
	flex: 0 0 clamp(64px, 17%, 140px);
	flex-direction: column;
	gap: clamp(10px, 1.6vw, 16px);
}

.fo-tv-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(8px, 1.4vw, 14px);
	padding: clamp(8px, 1.4vw, 14px) 0;
	border-radius: 10px;
	background: var(--wp--custom--tv--panel);
}

.fo-tv-panel span,
.fo-tv-knoepfe i {
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--custom--tv--knopf);
	box-shadow: inset 0 0 0 3px var(--wp--custom--tv--knopf-rand);
}

.fo-tv-panel span {
	width: 62%;
}

.fo-tv-knoepfe {
	display: flex;
	justify-content: center;
	gap: 16%;
	margin-top: auto;
	padding-bottom: 6px;
}

.fo-tv-knoepfe i {
	width: 22%;
}

.fo-tv-fuesse {
	display: flex;
	justify-content: space-between;
	width: 72%;
	margin: 0 auto;
}

.fo-tv-fuesse i {
	width: clamp(28px, 5vw, 48px);
	height: clamp(10px, 1.6vw, 16px);
	border-radius: 0 0 6px 6px;
	background: var(--wp--preset--color--ink);
}

@media (max-width: 899px) {
	.wp-block-fo-fernseher {
		display: none;
	}
}

/* Gig: Datum links, Ort und Details in der Mitte, Tickets rechts; mobil untereinander. */

.wp-block-fo-gig {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--line);
}

.wp-block-fo-gig + .wp-block-fo-gig {
	margin-block-start: 0;
}

.fo-gig-datum {
	display: flex;
	flex-direction: column;
	min-width: 5ch;
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	font-weight: 900;
	line-height: .9;
	text-transform: uppercase;
	color: var(--wp--preset--color--orange);
}

.fo-gig-tag {
	font-size: var(--wp--preset--font-size--large);
}

.fo-gig-monat,
.fo-gig-details,
.fo-gig-hinweis {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.fo-gig-info > *,
.fo-gig-links > .fo-gig-hinweis {
	margin: 0;
}

.fo-gig-ort {
	font-size: var(--wp--preset--font-size--large);
}

.fo-gig-details,
.fo-gig-hinweis {
	color: var(--wp--preset--color--mute);
}

.fo-gig-vorbei {
	opacity: .5;
}

@media (max-width: 640px) {
	.wp-block-fo-gig {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.fo-gig-links {
		grid-column: 1 / -1;
	}
}

/* About: versetztes Bild (Rahmen und Ränder in theme.json) */

.wp-block-image.is-style-fo-versetzt {
	position: relative;
	width: 72%;
}

/* Diskografie: main.js baut aus den Release-Gruppen Feature, Leiste und Hintergrund. Das Feature übernimmt die Schrift der Release-Blöcke, die Leiste ist eigenes Bedienelement. Ohne JS und im Editor bleibt das Raster. */

.is-style-fo-diskografie.fo-bereit {
	display: none;
}

.fo-disko-sektion {
	position: relative;
	overflow: hidden;
}

.fo-disko-sektion > :not(.fo-disko-hg) {
	position: relative;
	z-index: 1;
}

/* Ebenen aus main.js liegen über die volle Breite, das Inhaltslayout würde sie begrenzen. */
.fo-disko-sektion > .fo-disko-hg,
.is-style-fo-merch-buehne > .fo-merch-geist {
	max-width: none !important;
	margin: 0 !important;
}

.fo-disko-hg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.fo-disko-hg-bild {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(100%, 1100px);
	background-position: center;
	background-size: cover;
	filter: brightness(.38) saturate(.85);
}

.fo-disko-hg-verlauf {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(270deg, color-mix(in srgb, var(--wp--preset--color--ink) 15%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--ink) 70%, transparent) 35%, var(--wp--preset--color--ink) 70%),
		linear-gradient(0deg, var(--wp--preset--color--ink) 0%, transparent 18%, transparent 85%, var(--wp--preset--color--ink) 100%);
}

.fo-disko-feature {
	--fo-cover: min(500px, 40vw);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.fo-disko-cover {
	position: relative;
	width: var(--fo-cover);
	aspect-ratio: 1;
	background: var(--wp--preset--color--ink-2);
}

.fo-disko-cover img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fo-disko-cover.fo-leer img {
	display: none;
}

.fo-disko-text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.fo-disko-text > * {
	margin: 0;
}

.fo-disko-leiste-wrap {
	--fo-eintrag: 180px;
	--fo-rand: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--content-size)) / 2));
	position: relative;
	margin-top: var(--wp--preset--spacing--50);
}

.fo-disko-leiste {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) calc(100% - var(--fo-rand) - var(--fo-eintrag)) var(--wp--preset--spacing--30) var(--fo-rand);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--fo-rand);
	scrollbar-width: none;
}

.fo-disko-eintrag {
	display: flex;
	flex: 0 0 var(--fo-eintrag);
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--bone);
	font: inherit;
	text-align: left;
	cursor: pointer;
	opacity: .45;
	scroll-snap-align: start;
	transition: opacity .3s;
}

.fo-disko-eintrag :is(img, .fo-disko-leer) {
	display: block;
	width: var(--fo-eintrag);
	height: var(--fo-eintrag);
	object-fit: cover;
	background: var(--wp--preset--color--ink-2);
	outline: 3px solid transparent;
	outline-offset: -3px;
	transition: outline-color .3s;
}

.fo-disko-eintrag-titel {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.25;
}

.fo-disko-eintrag-typ {
	font-family: var(--wp--preset--font-family--jetbrains-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mute);
}

.fo-disko-eintrag:hover {
	opacity: .8;
}

.fo-disko-eintrag:is(.fo-on, :focus-visible) {
	opacity: 1;
}

.fo-disko-eintrag.fo-on :is(img, .fo-disko-leer) {
	outline-color: var(--wp--preset--color--orange);
}

:is(.fo-disko-eintrag, .fo-disko-pfeil, .fo-gb-taste):focus-visible {
	outline: 3px solid var(--wp--preset--color--orange);
	outline-offset: 3px;
}

.fo-disko-pfeil {
	position: absolute;
	top: calc(var(--wp--preset--spacing--20) + var(--fo-eintrag) / 2);
	right: var(--wp--style--root--padding-right);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 2px solid var(--wp--custom--line);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	transform: translateY(-50%);
}

.fo-disko-pfeil:hover {
	border-color: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--orange);
}

.fo-disko-zurueck {
	right: calc(var(--wp--style--root--padding-right) + 56px);
}

/* Handy: kein großes Cover, die Leiste ist die Auswahl und steht unter der Überschrift. So passt die Sektion in einen Bildschirm. */
@media (max-width: 640px) {
	.fo-disko-sektion {
		display: flex;
		flex-direction: column;
	}

	.fo-disko-sektion > :not(.alignfull, .fo-disko-hg) {
		width: 100%;
	}

	.fo-disko-leiste-wrap {
		--fo-eintrag: 136px;
		order: 1;
		margin-top: var(--wp--preset--spacing--30);
	}

	.fo-disko-feature {
		order: 2;
		grid-template-columns: 1fr;
	}

	.fo-disko-cover,
	.fo-disko-pfeil {
		display: none;
	}

	.fo-disko-text {
		gap: var(--wp--preset--spacing--20);
	}
}

/* Festgehalten (Desktop): Sektion füllt den Bildschirm, die Seite scrollt durch die Releases. */
.fo-disko-sektion.fo-gepinnt {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding-top: 96px !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
}

/* Im Flex-Container würden die zentrierten Kinder sonst je Release ihre Breite ändern. */
.fo-gepinnt > :not(.alignfull, .fo-disko-hg) {
	width: 100%;
}

.fo-gepinnt > .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

.fo-gepinnt .fo-disko-feature {
	--fo-cover: min(40vw, clamp(200px, calc(100vh - 540px), 500px));
	margin-bottom: var(--wp--preset--spacing--20);
}

.fo-gepinnt .fo-disko-text {
	gap: var(--wp--preset--spacing--20);
}

.fo-gepinnt .fo-disko-leiste-wrap {
	margin-top: 0;
}

.fo-gepinnt .fo-disko-leiste {
	overflow-x: hidden;
	padding-bottom: var(--wp--preset--spacing--20);
	scroll-snap-type: none;
}

/* Fighter-Zeile: 8-Bit-Hover (Innenabstand und Hintergrund in theme.json, Bildgröße am Bild-Block) */

.is-style-fo-fighter-zeile {
	position: relative;
	transition: transform .12s steps(2), box-shadow .12s steps(2), background-color .12s steps(2);
}

/* Mindestbreite für Name und Song: Wird es zu eng, rutscht der Button in die nächste Zeile. */
.is-style-fo-fighter-zeile > .wp-block-group {
	flex: 1 1 10rem;
	min-width: 0;
}

.is-style-fo-fighter-zeile .wp-block-image {
	flex: 0 0 auto;
}

.is-style-fo-fighter-zeile img {
	background: var(--wp--preset--color--ink);
	image-rendering: pixelated;
}

.is-style-fo-fighter-zeile .wp-block-button__link {
	white-space: nowrap;
}

.is-style-fo-fighter-zeile::before {
	content: "";
	position: absolute;
	inset: -4px;
	pointer-events: none;
	opacity: 0;
	background:
		linear-gradient(90deg, var(--wp--preset--color--ink) 50%, transparent 0) 0 0 / 16px 4px repeat-x,
		linear-gradient(90deg, var(--wp--preset--color--ink) 50%, transparent 0) 0 100% / 16px 4px repeat-x,
		linear-gradient(0deg, var(--wp--preset--color--ink) 50%, transparent 0) 0 0 / 4px 16px repeat-y,
		linear-gradient(0deg, var(--wp--preset--color--ink) 50%, transparent 0) 100% 0 / 4px 16px repeat-y;
}

.is-style-fo-fighter-zeile:is(:hover, :focus-within) {
	transform: translate(-6px, -6px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
	background-color: color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
}

.is-style-fo-fighter-zeile:is(:hover, :focus-within)::before {
	opacity: 1;
	animation: fo-pixelrahmen .6s steps(2) infinite;
}

@keyframes fo-pixelrahmen {
	to {
		background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px;
	}
}

/* Fighter-Zeile „Coming Soon“: Video noch nicht veröffentlicht, Figur gesperrt wie im Auswahlbildschirm */
.is-style-fo-fighter-zeile.fo-coming-soon > :is(.wp-block-image, .wp-block-group) {
	filter: grayscale(1);
}

.is-style-fo-fighter-zeile.fo-coming-soon:is(:hover, :focus-within) {
	transform: none;
	box-shadow: none;
	background-color: transparent;
}

.is-style-fo-fighter-zeile.fo-coming-soon::before {
	display: none;
}

.is-style-fo-fighter-zeile.fo-coming-soon .wp-block-button__link {
	cursor: default;
	background: transparent;
	color: var(--wp--preset--color--ink);
	border: 2px dashed currentColor;
}

/* Gameboy (Farbe, Ecken, Schatten und Innenabstand in theme.json, Breite = Spalte) */

.is-style-fo-gameboy {
	position: relative;
	margin-inline: auto;
}

/* Mobil steht der Gameboy unter den Fightern, die Spalte ist dann bildschirmbreit. */
@media (max-width: 899px) {
	.is-style-fo-gameboy {
		max-width: 240px;
	}
}

.is-style-fo-gameboy::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 38px;
	border-radius: 10px 0 0 0;
	background: rgb(255 255 255 / .133);
	mix-blend-mode: overlay;
	pointer-events: none;
}

.is-style-fo-gameboy > .wp-block-image {
	position: relative;
	padding: 20px 30px;
	background: var(--wp--custom--gehaeuse);
}

.is-style-fo-gameboy > .wp-block-image img {
	width: 100%;
	height: auto;
	image-rendering: pixelated;
}

.is-style-fo-gameboy > .wp-block-audio audio {
	width: 100%;
}

/* Sobald main.js die Tasten gebaut hat, steuern ▶ und ■ den Track. */
.is-style-fo-gameboy.fo-bereit > .wp-block-audio {
	display: none;
}

.fo-gb-steuerung {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 28px;
}

.fo-gb-kreuz {
	position: relative;
	width: 50px;
	height: 50px;
}

.fo-gb-kreuz::before,
.fo-gb-kreuz::after {
	content: "";
	position: absolute;
	background: var(--wp--custom--gehaeuse);
}

.fo-gb-kreuz::before {
	left: 35%;
	width: 30%;
	height: 100%;
}

.fo-gb-kreuz::after {
	top: 35%;
	width: 100%;
	height: 30%;
}

.fo-gb-tasten {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.fo-gb-taste {
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--wp--custom--gehaeuse);
	color: #999;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.fo-gb-taste:last-child {
	margin-top: -14px;
}

.fo-gb-taste:is(:hover, .fo-on) {
	color: var(--wp--preset--color--orange);
}

/* ▶ blinkt dezent, bis es einmal gedrückt wurde. */
.fo-gb-taste.fo-hinweis {
	animation: fo-druecken 1.2s steps(1) infinite;
}

@keyframes fo-druecken {
	50% {
		color: var(--wp--preset--color--orange);
		box-shadow: 0 0 0 3px var(--wp--preset--color--orange);
	}
}

.fo-gb-pillen {
	display: flex;
	justify-content: center;
	gap: 12px;
	padding: 30px 0 10px;
}

.fo-gb-pillen span {
	width: 46px;
	height: 9px;
	border-radius: 100px;
	background: var(--wp--custom--gehaeuse);
}

/* Merch-Bühne: gestapelt (mobil, ohne JS, Editor), ab 900 px festgehalten */

.is-style-fo-merch-buehne {
	overflow: hidden;
}

.is-style-fo-merch-buehne::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 40% 55% at 50% 0%, color-mix(in srgb, var(--wp--preset--color--bone) 16%, transparent), transparent 70%),
		radial-gradient(ellipse 30% 12% at 50% 80%, rgb(0 0 0 / .9), transparent 70%);
}

.is-style-fo-merch-buehne > * {
	position: relative;
}

.is-style-fo-merch-buehne .wp-block-gallery.has-nested-images {
	flex-direction: column;
	align-items: center;
}

.is-style-fo-merch-buehne .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	width: auto;
	margin: 0;
}

.is-style-fo-merch-buehne .wp-block-gallery.has-nested-images figure.wp-block-image img {
	flex: 0 0 auto;
	width: min(86vw, 420px);
	height: auto;
	max-height: 420px;
	object-fit: contain;
	filter: drop-shadow(0 30px 40px rgb(0 0 0 / .8));
}

/* Flache Produkte (Klasse fo-merch-cover am Bild): kleiner und mit Kastenschatten. */
.is-style-fo-merch-buehne .wp-block-gallery.has-nested-images figure.wp-block-image.fo-merch-cover img {
	width: min(64vw, 300px);
	box-shadow: 0 30px 50px rgb(0 0 0 / .8);
	filter: none;
}

/* Die Galerie legt Bildunterschriften sonst als Verlauf über das Bild. Schrift kommt aus theme.json (Element „Bildunterschrift“). */
.is-style-fo-merch-buehne .wp-block-gallery.has-nested-images figure.wp-block-image::before {
	display: none;
}

.is-style-fo-merch-buehne .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	padding: 0;
	overflow: visible;
	background: none;
	text-shadow: none;
}

.fo-stage-photo {
	mix-blend-mode: lighten;
}

.fo-stage-photo img {
	display: block;
}

.is-style-fo-merch-buehne.fo-merch-gepinnt {
	display: flex;
	flex-direction: column;
	height: 100vh;
	padding-top: 88px;
}

.fo-merch-gepinnt > :not(.alignfull, .fo-stage-photo, .fo-merch-geist) {
	width: 100%;
}

.fo-merch-gepinnt > .wp-block-gallery.has-nested-images {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	/* Nur oben und unten: Die Seitenränder (auto) zentrieren die Bühne in der Inhaltsbreite. */
	margin-top: 0 !important;
	margin-bottom: calc(var(--wp--custom--slant) + 40px) !important;
}

.fo-merch-gepinnt > .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
}

.fo-merch-gepinnt > .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: auto;
	max-width: min(640px, 90%) !important;
	max-height: 100%;
}

.fo-merch-gepinnt > .wp-block-gallery.has-nested-images figure.wp-block-image.fo-merch-cover img {
	width: auto;
	height: 78%;
}

.fo-merch-gepinnt > .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	display: none;
}

.fo-merch-gepinnt > .fo-stage-photo {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: min(46vw, 640px);
	margin: 0 !important;
}

.fo-merch-gepinnt > .fo-stage-photo img {
	width: 100% !important;
}

.fo-merch-geist {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	z-index: 0;
	font-family: var(--wp--preset--font-family--big-shoulders-display);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
	line-height: .8;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 2px color-mix(in srgb, var(--wp--preset--color--orange) 30%, transparent);
	pointer-events: none;
	transform: translateY(-50%);
}

/* Foto-Hintergrund (Kontakt): main.js verteilt die Galerie auf zwei gegenläufige Reihen. */

.wp-block-group.is-style-fo-foto-hintergrund {
	position: relative;
	z-index: 0;
	overflow: hidden;
}

.is-style-fo-foto-hintergrund::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--ink) 78%, transparent) 55%,
		color-mix(in srgb, var(--wp--preset--color--ink) 60%, transparent) 100%);
}

.is-style-fo-foto-hintergrund > :not(.wp-block-gallery) {
	position: relative;
	z-index: 1;
}

.is-style-fo-foto-hintergrund > .wp-block-gallery.has-nested-images {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-auto-flow: column;
	grid-auto-columns: clamp(160px, 28vw, 420px);
	max-width: none;
	pointer-events: none;
}

.is-style-fo-foto-hintergrund > .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	position: relative;
	width: auto;
	height: 100%;
	margin: 0;
}

.is-style-fo-foto-hintergrund > .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1);
}

.is-style-fo-foto-hintergrund > .wp-block-gallery.has-nested-images figure.wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--orange);
	mix-blend-mode: multiply;
	opacity: .45;
}

.is-style-fo-foto-hintergrund > .wp-block-gallery.has-nested-images.fo-reihen {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	overflow: hidden;
}

.fo-fotoreihe {
	display: flex;
	flex: 1 1 0;
	gap: var(--wp--preset--spacing--20);
	width: max-content;
	min-height: 0;
}

.is-style-fo-foto-hintergrund .fo-fotoreihe > figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	aspect-ratio: 3 / 2;
}

.editor-styles-wrapper .is-style-fo-foto-hintergrund > .wp-block-gallery.has-nested-images {
	position: relative;
	height: 320px;
	overflow: hidden;
}

/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.is-style-fo-fighter-zeile,
	.is-style-fo-video-karte :is(video, img),
	.is-style-fo-video-karte > * {
		transition: none;
	}

	.is-style-fo-fighter-zeile:is(:hover, :focus-within)::before,
	.fo-gb-taste.fo-hinweis,
	.fo-tv-bild.fo-an {
		animation: none;
	}

	.fo-gb-taste.fo-hinweis {
		box-shadow: 0 0 0 3px var(--wp--preset--color--orange);
	}
}