/*
Theme Name: theater festival isny 2026
Theme URI: https://theaterfestival-isny.de
Author: Theaterfestival Isny e.V.
Author URI: https://theaterfestival-isny.de
Description: Offizielles, hochperformantes und barrierefreies Full Site Editing (FSE) Block Theme für das Theaterfestival Isny 2026. Entwickelt für kompromisslose Geschwindigkeit, vollständige Barrierefreiheit (WCAG 2.1 AA) und 100 % DSGVO-Konformität durch ausschließlich lokal gehostete Webfonts und native WordPress-Core-Blöcke – komplett ohne fremde Plugins oder Page-Builder-Overhead.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theaterfestival-isny
Tags: block-theme, full-site-editing, accessibility-ready, custom-colors, custom-typography, custom-logo, editor-style, featured-images, wide-blocks
*/

/*
 * Zusätzliche Utility- und Barrierefreiheits-Regeln,
 * die über theme.json hinausgehen (z. B. sichtbarer Tastatur-Fokus,
 * Skip-Links, flüssige Hover-Invertierungen).
 */

/* Dark Mode: folgt der Systemeinstellung. Statt nur body umzufärben,
   werden die Preset-Farbvariablen selbst getauscht (heller Hintergrund
   "surface" <-> dunkler Text "black", dunkelgraue Standardschrift "muted"
   -> weiß). Da JEDE "has-X-background-color"/"has-X-color"-Klasse (Cover,
   Buttons, festival-card, Footer-Weißbereich, Links, Fließtext, ...) diese
   Variablen referenziert statt fester Hex-Werte, färbt sich dadurch die
   GESAMTE Seite konsistent um – ausschließlich über bestehende
   Palette-Farben, keine neuen Hex-Werte im Markup. Farbfläche mit eigenem,
   bewusst unveränderlichem Grauton (Header-Overlay) bleibt unangetastet;
   der Footer bekommt unten eine eigene, noch dunklere Variante (siehe
   Footer-Regeln), damit er sich im Dark Mode sichtbar vom übrigen
   Seitenhintergrund absetzt. */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--surface: #1D1D1B;
		--wp--preset--color--black: #FFFFFF;
		--wp--preset--color--muted: #FFFFFF;
		--wp--preset--color--panel: #262626;
		--wp--preset--color--footer-bar: #16161F;
	}
}

/* Sticky-Header: eigene Klasse statt nativem Block-Support "position:sticky"
   (der native Support validiert in dieser WP-Version fehlerhaft und markiert
   den Block dauerhaft als "ungültiger Inhalt", selbst mit von WordPress selbst
   erzeugtem Markup).
   Wichtig: sticky greift hier am äußeren, von WordPress automatisch um jeden
   Template-Part gelegten <header class="wp-block-template-part"> an, NICHT
   am inneren .sticky-header selbst. Der äußere Wrapper umschließt nur genau
   dieses eine Kind ohne eigenes Padding, ist also exakt so hoch wie der
   Header selbst – als "containing block" für sticky bietet er dadurch keinen
   Spielraum, das Element verliert seine Position sofort wieder aus dem
   Viewport. Sticky auf dem äußeren Wrapper nutzt stattdessen dessen
   eigentlichen Vorfahren (.wp-site-blocks, so hoch wie die ganze Seite) als
   containing block und funktioniert dadurch korrekt über die ganze Seite. */
header.wp-block-template-part:has(header.sticky-header) {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Skip Link (Tastaturnavigation / Screenreader) */
.skip-link {
	position: absolute;
	top: -999px;
	left: 1rem;
	background: var(--wp--preset--color--primary, #0fbdbf);
	color: var(--wp--preset--color--black, #1D1D1B);
	padding: 0.75rem 1.5rem;
	font-weight: 700;
	z-index: 99999;
	text-decoration: none;
	border: 2px solid var(--wp--preset--color--black, #1D1D1B);
}

.skip-link:focus {
	top: 1rem;
}

/* Plakativer Tastaturfokus für Barrierefreiheit (WCAG 2.1 AA) */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary, #0fbdbf);
	outline-offset: 3px;
}

/* Navigation: Desktop Menülinks & Hover */
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 400;
	font-size: 1.125rem;
	transition: color 0.2s ease;
	text-decoration: none;
	padding: 0.2rem 0.75rem;
}

/* Header-Menü: Work Sans (Astra-Systemschrift, nicht Roboto) */
header .wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--work-sans, "Work Sans", sans-serif);
}

/* Header-Navigation: weiße Schrift auf dunklem Overlay. Der Header-Overlay ist
   IMMER dunkel, unabhängig vom Light/Dark-Mode der Seite – deshalb bewusst
   fest #ffffff statt der "surface"-Variable, die im Dark Mode umdefiniert
   wird (sonst würde der Nav-Text im Dark Mode mit umkippen und auf dem
   weiterhin dunklen Header unlesbar werden). */
header .wp-block-navigation .wp-block-navigation-item__content {
	color: #ffffff !important;
}

header .wp-block-navigation .wp-block-navigation-item__content:hover,
header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: #ffffff !important;
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--secondary, #ffed00);
}

/* Footer-Navigation (rechtliche Links): 60% Schwarz */
footer .wp-block-navigation .wp-block-navigation-item__content {
	color: rgba(0, 0, 0, 0.6) !important;
}

footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary, #0fbdbf) !important;
}

/* Auf Handydisplays: rechtliche Links im Footer untereinander statt
   nebeneinander (flexWrap allein lässt bei etwas mehr Platz noch zwei pro
   Zeile stehen). */
@media (max-width: 599.98px) {
	footer .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-end;
	}
}

/* Dark Mode: Footer-Adressfläche bekommt die eigene, dunklere Palette-Farbe
   "dark" (#16161F, bisher ungenutzt) statt der allgemeinen "surface"-Variable
   (die auf demselben Ton wie der übrige Seitenhintergrund läge) – dadurch
   setzt sich der Footer sichtbar vom Content darüber ab. Höhere Spezifität
   als die generierte ".has-surface-background-color"-Klasse durch den
   zusätzlichen "footer"-Selektor. Die 60%-Schwarz-Linkfarbe der
   Rechtliches-Leiste wird auf helles Grau gedreht, sonst unlesbar auf dem
   jetzt dunklen Hintergrund. */
@media (prefers-color-scheme: dark) {
	footer.has-surface-background-color,
	footer .has-surface-background-color {
		background-color: var(--wp--preset--color--dark, #16161F) !important;
	}

	footer .wp-block-navigation .wp-block-navigation-item__content {
		color: rgba(255, 255, 255, 0.7) !important;
	}
}

/* Navigation: Barrierefreies Mobile-Menü Drawer. Hintergrund über die
   "surface"-Variable statt fest #ffffff, damit der Drawer im Dark Mode
   mitdunkelt (der Text darunter nutzt bereits die "black"-Variable, die im
   Dark Mode automatisch weiß wird – beides zusammen ergibt dunkler
   Drawer-Hintergrund + helle Schrift im Dark Mode, ohne eigene Zusatzregeln). */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--surface, #ffffff) !important;
	padding: 3rem 2rem !important;
}

/* Schließen-Kreuz (X) des Drawers: Core setzt es fest auf Schwarz. Über die
   "black"-Variable geführt, damit es wie der Drawer-Text im Dark Mode
   automatisch weiß wird statt auf dem dann dunklen Drawer-Hintergrund zu
   verschwinden. */
.wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--black, #1D1D1B) !important;
}

.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-close path {
	fill: var(--wp--preset--color--black, #1D1D1B) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black, #1D1D1B) !important;
	font-size: 1.4rem;
	font-weight: 700;
	padding: 0.75rem 0;
}

/* Mobile-Drawer: aktiver Menüpunkt (geladene Seite) bekommt die gelbe Markierung
   als Unterstreichung statt als Textfarbe (die Header-Regel für current-menu-item
   macht den Text sonst weiß = unsichtbar auf dem weißen Drawer-Hintergrund; reines
   Gelb auf Weiß wäre als Textfarbe zu kontrastarm zum Lesen). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black, #1D1D1B) !important;
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--secondary, #ffed00);
}

/* Mobile-Drawer hat weißen Hintergrund: Hover muss dunkel bleiben, sonst
   verschwindet der Text (die Header-Hover-Regel macht ihn sonst weiß). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--black, #1D1D1B) !important;
	box-shadow: inset 0 -3px 0 var(--wp--preset--color--primary, #0fbdbf);
}

/* Header-Navigation: ab Desktop-Breite (1024px) wieder normale Zeile statt Burger-Menü.
   overlayMenu ist auf "always" gesetzt, damit WordPress das Burger-Markup grundsätzlich
   rendert; hier wird es oberhalb der Schwelle einfach wieder als Inline-Leiste gezeigt. */
@media (min-width: 1024px) {
	header .wp-block-navigation__responsive-container-open,
	header .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	header .wp-block-navigation__responsive-container {
		display: flex !important;
		position: static !important;
		inset: auto !important;
		width: auto !important;
		height: auto !important;
		background: transparent !important;
		padding: 0 !important;
		z-index: auto !important;
		visibility: visible !important;
		opacity: 1 !important;
	}

	header .wp-block-navigation__responsive-container-content {
		padding: 0 !important;
	}

	header .wp-block-navigation__container {
		display: flex !important;
		flex-direction: row !important;
	}

	header .wp-block-navigation__container .wp-block-navigation-item__content {
		color: #ffffff !important;
		font-size: 1.125rem !important;
		font-weight: 400 !important;
		padding: 0.4rem 0.75rem !important;
	}
}

/* Unterhalb 1024px: Burger-Button sichtbar, weiß auf dem dunklen Header */
@media (max-width: 1023.98px) {
	header .wp-block-navigation__responsive-container-open {
		color: #ffffff;
	}

	header .wp-block-navigation__responsive-container-open .wp-block-navigation__responsive-container-open path,
	header .wp-block-navigation__responsive-container-open svg {
		fill: #ffffff;
	}
}

/* Header: kein automatischer Block-Gap-Abstand oberhalb der Nav-Zeile */
header.wp-block-group > .alignwide {
	margin-top: 0 !important;
}

/* Site Logo im Header (hart kodiert) */
.site-logo-link {
	display: block;
	line-height: 0;
}

.site-logo-img {
	height: 56px;
	width: 92.9px;
	display: block;
}

/* Mobil: Logo etwas kompakter */
@media (max-width: 600px) {
	.site-logo-img {
		height: 44px;
		width: 73px;
	}
}

/* Ab Desktop-Breite (genug Platz, Nav ist ausgeklappt): Logo größer und hängt
   über den unteren Header-Rand hinaus, Logo-Mitte sitzt auf der Header-Kante. */
@media (min-width: 1024px) {
	.header-row {
		position: relative;
	}

	.site-logo-slot {
		width: 149px;
		flex: 0 0 149px;
	}

	.site-logo-link {
		position: absolute;
		left: 0;
		bottom: -51px;
	}

	.site-logo-img {
		height: 90px;
		width: 149px;
	}
}

/* Footer: Punkte-Deko, per CSS-Maske gelb eingefärbt (SVG als background-image
   lässt sich sonst nicht umfärben), unten rechtsbündig direkt an der Kante zur
   grauen Leiste. */
.footer-dots-bg {
	position: relative;
	overflow: hidden;
}

.footer-dots-bg::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 480px;
	height: 349px;
	max-width: 100%;
	background-color: var(--wp--preset--color--secondary, #ffed00);
	-webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/Elemente/Punkte.svg);
	mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/Elemente/Punkte.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: right bottom;
	mask-position: right bottom;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
	z-index: 0;
}

.footer-dots-bg > * {
	position: relative;
	z-index: 1;
}

/* Seiten-Hero (page.html): gemeinsamer Wrapper um Zacken-Deko + Cover-Block, damit
   die Deko NICHT im Cover selbst sitzt (Cover schneidet eigenen Inhalt ab) und frei
   über den Rand hinausragen kann. Zacken-Element inline als SVG mit CSS-Klassen
   eingebunden (nicht per mask-image/url() – externe SVGs lassen sich von unserer
   Seiten-CSS aus nicht erreichen/umfärben). Original ist zweifarbig (viele Linien
   in einer Farbe, wenige Akzent-Linien), daher zwei Klassen. */
.page-hero-wrap {
	position: relative;
}

/* Der Cover-Block selbst ist display:flex (contentPosition steuert
   justify-content/align-items) – der Inner-Container ist ein Flex-Kind ohne
   eigene Breite und schrumpft daher auf seine Inhaltsbreite, statt die volle
   Cover-Breite einzunehmen. width:100% erzwingt die volle Breite (das native
   Cover-Innenpadding wurde bereits per Block-Einstellung auf 0 gesetzt, siehe
   page.html, damit "100%" hier wirklich der vollen Viewport-Breite entspricht).
   Der Innenabstand wird danach mit der GLEICHEN Formel berechnet, die
   WordPress selbst für die "wide"-Zentrierung von festival-card innerhalb von
   main nutzt: main-Innenabstand (1.5rem) + halber Restplatz bis zur
   wideSize-Grenze BEZOGEN AUF mains Content-Box (also abzüglich mains
   eigenem 2×1.5rem-Innenabstand) + festival-card-Innenabstand (3rem) – damit
   die Überschrift exakt mit dem Fließtext der Karte darunter fluchtet, bei
   jeder Breite. */
.page-hero-cover .wp-block-cover__inner-container {
	position: relative;
	width: 100% !important;
	padding-top: 0.5rem;
	padding-right: 1.5rem;
	padding-bottom: 0.75rem;
	padding-left: calc(1.5rem + max(0px, (100% - 3rem - var(--wp--style--global--wide-size, 1340px)) / 2) + 3rem);
}

/* Adaptiv: WordPress rendert bei gesetztem Beitragsbild ein
   <img class="wp-block-cover__image-background">, ohne Bild fehlt es komplett.
   Darüber unterscheiden wir "mit Foto" von "ohne Foto" rein per CSS, ohne
   zusätzliche Klassen/JS. */

/* Ohne Foto: kompakt, kaum Platz oben (Überschrift bleibt links/türkis wie
   überall sonst im Theme). */
.page-hero-cover:not(:has(img.wp-block-cover__image-background)) {
	min-height: unset !important;
}

.page-hero-cover:not(:has(img.wp-block-cover__image-background)) .wp-block-cover__inner-container {
	padding-top: 1.5rem;
	padding-bottom: 0.5rem;
}

/* Mit Foto: genug Höhe fürs Bild, Text weiß für Lesbarkeit auf dem Foto (bleibt linksbündig, wie ohne Foto).
   Fest #ffffff statt der "surface"-Variable: das Foto bleibt im Dark Mode
   unverändert dasselbe Foto, der Titel muss also unabhängig vom Modus immer
   weiß bleiben (surface würde im Dark Mode dunkel werden und vor dem Foto
   unlesbar sein – gleiche Ursache wie beim Header-Nav-Text). */
.page-hero-cover:has(img.wp-block-cover__image-background) {
	min-height: 420px !important;
}

.page-hero-cover:has(img.wp-block-cover__image-background) .wp-block-post-title {
	color: #ffffff !important;
}

.page-hero-zacken {
	position: absolute;
	top: -1rem;
	right: 0;
	width: 520px;
	height: 244px;
	max-width: 80%;
	z-index: 1;
	opacity: 0.85;
	pointer-events: none;
}

.page-hero-zacken .zacken-line--main {
	stroke: var(--wp--preset--color--muted, #7a7a7a);
	stroke-opacity: 0.35;
}

.page-hero-zacken .zacken-line--accent {
	stroke: var(--wp--preset--color--secondary, #ffed00);
}

.page-hero-cover .wp-block-cover__inner-container > .wp-block-post-title {
	position: relative;
	z-index: 1;
}

/* Startseite: Datums-Streifen direkt nach dem Header. Altes Logo (nur
   Bild-Teil, ohne Schriftzug) als Wasserzeichen zentriert im Hintergrund –
   Farbe kommt ausschließlich aus "surface" (weiß im Light Mode, #1D1D1B im
   Dark Mode, siehe Variablen-Tausch oben), nicht aus der SVG-Datei selbst. */
.hero-date-block {
	position: relative;
	overflow: hidden;
}

.hero-date-block::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(60%, 760px);
	height: 70%;
	transform: translate(-50%, -50%);
	background-color: var(--wp--preset--color--surface);
	mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/TF_Logo_alt_nur_Bild.svg);
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	-webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/TF_Logo_alt_nur_Bild.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	pointer-events: none;
}

/* Datum linksbündig auf Höhe des Fließtexts darunter: gleiche Formel wie
   .page-hero-cover .wp-block-cover__inner-container (main-Innenabstand
   1.5rem + halber Restplatz bis wideSize + festival-card-Innenabstand 3rem). */
.hero-date-text {
	position: relative;
	z-index: 1;
	margin: 0;
	padding-left: calc(1.5rem + max(0px, (100% - 3rem - var(--wp--style--global--wide-size, 1340px)) / 2) + 3rem);
	padding-right: 1.5rem;
}

/* Umbruch nach dem Bindestrich nur auf großen Bildschirmen – auf kleinen
   Screens bricht der Fließtext an dieser Stelle ohnehin von selbst um. */
.hero-date-break {
	display: none;
}

@media (min-width: 1024px) {
	.hero-date-break {
		display: inline;
	}
}

/* Titelbild-Streifen: ohne gesetztes Beitragsbild komplett ausblenden statt
   eine leere Fläche zu zeigen. */
.front-hero-image-strip:not(:has(img.wp-block-cover__image-background)) {
	display: none;
}


/* Buttons: Invertierender Festival-Hover-Effekt & harte Kanten */
.wp-block-button__link {
	border-radius: 0 !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
	letter-spacing: 0.02em;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* Festival-Kacheln: klare Kanten, kein Hover-Effekt */
.festival-card {
	background: #ffffff;
	border-radius: 0;
}

/* Dekoratives Festival-Grafikelement (Alte Bildmarke ohne Text) */
.festival-graphic-accent {
	display: block;
	max-height: 55px;
	width: auto;
	opacity: 0.65;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.festival-graphic-accent:hover {
	opacity: 0.95;
	transform: scale(1.02);
}

/* Badges & Akzentstreifen für Veranstaltungen und Workshops (mit Asap Condensed) */
.badge-event {
	display: inline-block;
	font-family: var(--wp--preset--font-family--condensed, "Asap Condensed", sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.35rem 0.85rem;
	background: var(--wp--preset--color--event-primary, #0fbdbf);
	color: var(--wp--preset--color--black, #1D1D1B);
	border: 1.5px solid var(--wp--preset--color--black, #1D1D1B);
}

.badge-workshop {
	display: inline-block;
	font-family: var(--wp--preset--font-family--condensed, "Asap Condensed", sans-serif);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.35rem 0.85rem;
	background: var(--wp--preset--color--workshop-primary, #eb5e1d);
	color: var(--wp--preset--color--black, #1D1D1B);
	border: 1.5px solid var(--wp--preset--color--black, #1D1D1B);
}

/* Event- und Workshop-Karten Farbakzente */
.festival-card--event {
	border-top: 5px solid var(--wp--preset--color--event-primary, #0fbdbf);
}

.festival-card--workshop {
	border-top: 5px solid var(--wp--preset--color--workshop-primary, #eb5e1d);
}

/* Festivalguide: Themen-Kästen per CSS-Mehrspaltenlayout (nativ, ohne JS)
   statt fester Zeilenpaare über wp:columns – dadurch folgt jeder Kasten
   direkt auf den vorherigen in seiner Spalte, unabhängig davon, wie lang der
   Kasten daneben ist (kein toter Abstand mehr durch Zeilen-Ausrichtung).
   Bleibt auf breiten Screens zweispaltig, wird unterhalb 1024px (gleicher
   Umbruchpunkt wie Header-Burger-Menü und Themen-Navigation) einspaltig. */
.fg-cards-masonry {
	column-count: 2;
	column-gap: 2rem;
}

.fg-cards-masonry > * {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	margin-bottom: 2rem;
}

@media (max-width: 1023.98px) {
	.fg-cards-masonry {
		column-count: 1;
	}
}

/* Festivalguide: Tabellen (Öffnungszeiten, Preise, Bewirtungszeiten) ohne
   die native Zellrahmen-Linie von Core, wirkt in den Themen-Kästen
   aufgeräumter als eine vollständige Gitter-Tabelle. */
.fg-table-plain td,
.fg-table-plain th {
	border: none;
	padding: 0.35rem 0.75rem 0.35rem 0;
}

/* Festivalguide: Themen-Piktogramme (Material Symbols, selbst gehostet unter
   assets/images/icons/), eingefärbt über CSS-Maske + Palette-Farbe – gleiche
   Technik wie bei den übrigen CI-Grafikelementen (siehe .footer-dots-bg
   weiter unten), damit die Farbe zentral über theme.json steuerbar bleibt. */
.fg-icon {
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: 1rem;
	background-color: var(--wp--preset--color--primary, #0fbdbf);
	mask-repeat: no-repeat;
	mask-size: contain;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
}

.fg-icon--tickets { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-tickets.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-tickets.svg); }
.fg-icon--camping { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-camping.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-camping.svg); }
.fg-icon--workshops { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-workshops.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-workshops.svg); }
.fg-icon--essen { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-essen.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-essen.svg); }
.fg-icon--awareness { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-awareness.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-awareness.svg); }
.fg-icon--anfahrt { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-anfahrt.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-anfahrt.svg); }
.fg-icon--kinder { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-kinder.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-kinder.svg); }
.fg-icon--barrierefreiheit { mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-barrierefreiheit.svg); -webkit-mask-image: url(/wp-content/themes/theaterfestival-isny/assets/images/icons/icon-barrierefreiheit.svg); }

/* Festivalguide: mitscrollende (sticky) Themen-Navigation mit Icons, bleibt
   unterhalb des ebenfalls sticky Headers stehen. Rein horizontal scrollbar
   statt Umbruch, damit sie auf Schmalbildschirmen kompakt bleibt. */
.fg-subnav {
	position: sticky;
	top: 68px;
	z-index: 50;
	display: flex;
	gap: 1.75rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0.85rem 1.25rem;
	margin-bottom: 2rem;
	background: var(--wp--preset--color--surface, #ffffff);
	border-bottom: 2px solid var(--wp--preset--color--canvas, #d2d6da);
}

.fg-subnav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	flex: 0 0 auto;
	text-decoration: none;
	color: var(--wp--preset--color--black, #1D1D1B);
	font-family: var(--wp--preset--font-family--condensed, "Asap Condensed", sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.fg-subnav a:hover {
	color: var(--wp--preset--color--primary, #0fbdbf);
}

.fg-subnav .fg-icon {
	width: 28px;
	height: 28px;
	margin-bottom: 0;
}

/* Sprungziele der Themen-Karten: Abstand nach oben reservieren, damit die
   Überschrift beim Anklicken eines Subnav-Links nicht unter dem sticky
   Header + der sticky Themen-Navigation verschwindet. */
#tickets,
#kinder-jugendliche,
#camping,
#workshops,
#essen-trinken,
#awareness,
#anreise,
#barrierefreiheit {
	scroll-margin-top: 170px;
}

/* Unterhalb 1024px (gleicher Umbruchpunkt wie das Burger-Menü im Header):
   die Themen-Navigation braucht auf schmalen Screens zu viel horizontales
   Scrollen (kaum zwei Punkte sichtbar). Stattdessen wird sie zu einer
   vertikalen, nur aus Icons bestehenden Leiste am rechten Bildschirmrand,
   fest im Viewport (nicht mehr im Dokumentfluss), damit sie beim Scrollen
   immer erreichbar bleibt. */
@media (max-width: 1023.98px) {
	.fg-subnav {
		position: fixed;
		top: 50%;
		right: 0.6rem;
		left: auto;
		transform: translateY(-50%);
		flex-direction: column;
		overflow: visible;
		background: transparent;
		border-bottom: none;
		padding: 0;
		margin-bottom: 0;
		gap: 0.55rem;
		z-index: 60;
	}

	.fg-subnav a {
		flex-direction: row;
		background: var(--wp--preset--color--primary, #0fbdbf);
		border-radius: 50%;
		width: 42px;
		height: 42px;
		justify-content: center;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	}

	.fg-subnav .fg-icon {
		width: 22px;
		height: 22px;
		background-color: #ffffff;
	}

	.fg-subnav-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	#tickets,
	#kinder-jugendliche,
	#camping,
	#workshops,
	#essen-trinken,
	#awareness,
	#anreise,
	#barrierefreiheit {
		scroll-margin-top: 80px;
	}
}

/* Sponsoren-Logos: Graustufen, im Dark Mode invertiert (viele Logos sind
   schwarz auf transparentem Grund und wären sonst auf dunklem Seitenhinter-
   grund unsichtbar). Reines CSS, weil weder "Graustufen-Filter" noch
   "je nach Farbschema unterschiedlicher Filter" native Block-Einstellungen
   sind. Die Breite/Höhe hier ist KEIN Ersatz für die native Quadrat-Passung
   ("Seitenverhältnis 1:1" + "Skalierung: Enthalten" bleiben die echten
   Bild-Block-Einstellungen) – sie füllt nur die Grid-Zelle, bevor object-fit
   das Logo hineinskaliert. Das lässt sich nicht als Inline-Style am Bild
   selbst lösen, weil WordPress dafür beim Speichern eine exakte Stil-Zeichen-
   kette ohne Breite/Höhe erwartet und der Block sonst als "ungültig" gilt. */
.sponsor-logo-img img {
	width: 100%;
	height: 100%;
	filter: grayscale(1);
}

@media (prefers-color-scheme: dark) {
	.sponsor-logo-img img {
		filter: grayscale(1) invert(1);
	}
}