/*
Theme Name: vis-à-vis
Theme URI:
Author: Philipp Tschonitsch
Author URI:
Description: Block-Theme für die Theatergruppe. Alle Gestaltungswerte (Farben, Schriften, Abstände) stehen in theme.json — nicht in dieser Datei. Hier steht nur, was sich mit theme.json nicht ausdrücken lässt.
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Version: 0.11.8
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: visavis
*/

/*
 * Bewusst fast leer.
 *
 * In einem Block-Theme ist theme.json die einzige Quelle für Farben, Schriften,
 * Abstände und Radien — das Gegenstück zur tokens.css aus dem Portfolio-Projekt.
 * WordPress erzeugt daraus automatisch CSS-Variablen (--wp--preset--color--...)
 * und stellt dieselben Werte im Editor als Auswahl bereit. Wer hier Hex-Codes
 * hinschreibt, hängt den Editor ab: Die Auswahl im Backend zeigt dann andere
 * Werte als die Website ausgibt.
 *
 * Hier gehört nur hinein, was theme.json strukturell nicht kann.
 */

/*
 * Sprungziele werden angefahren, nicht angesprungen.
 *
 * Betrifft die Menüpunkte "Termine", "Im Repertoire" und "Kontakt": Statt
 * hart umzuschalten, scrollt die Seite dorthin. Das erhält die Orientierung —
 * man sieht, wohin man sich bewegt.
 *
 * scroll-padding-top hält den festklebenden Kopfbereich frei. Ohne das
 * verschwindet die angesteuerte Überschrift hinter dem Menü. 9rem statt
 * vorher 6rem: Der Kopf ist einzeilig gemessen rund 136 px (8,5rem) hoch;
 * 6rem ließen Sprungziele knapp darunter rutschen. 9rem gibt etwas Luft.
 */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 9rem;
}

/*
 * Wer Bewegung reduziert hat, springt wie gehabt. Sanftes Scrollen über lange
 * Strecken gehört zu den Effekten, die Übelkeit auslösen können.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Sichtbarer Fokus. WordPress' Standard verschwindet auf dunklen Flächen. */
:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
}

/*
 * Sprunglink zum Inhalt.
 * Den Link selbst setzt WordPress bei Block-Themes automatisch ein; sein
 * Standardaussehen passt aber nicht zur Seite. Nur die sichtbare Form wird
 * hier korrigiert.
 */
.skip-link:focus {
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--hintergrund);
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}

/* ==========================================================================
   Scroll-Animationen
   ==========================================================================

   Die Versteck-Regel hängt an .visavis-js — einer Klasse, die erst das
   JavaScript setzt. Ohne Skript greift sie nie, und alles ist von Anfang an
   sichtbar. Andersherum (im CSS verstecken, per JS zeigen) wäre die Seite ohne
   JavaScript leer.

   Animiert werden ausschließlich transform und opacity. Beides kann die
   Grafikkarte allein, ohne dass der Browser das Layout neu berechnen muss —
   deshalb ruckelt es nicht. Eine Animation von height oder top täte das.
*/

.visavis-js .visavis-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: opacity, transform;
}

.visavis-js .visavis-reveal.ist-sichtbar {
	opacity: 1;
	transform: none;
	will-change: auto;
}

.visavis-js .visavis-reveal-langsam {
	transition:
		opacity 1200ms cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Sicherheitsnetz: Selbst wenn das Skript die Klasse gesetzt hat, hat die
   Systemeinstellung das letzte Wort. */
@media (prefers-reduced-motion: reduce) {
	.visavis-js .visavis-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   Die Bühne — ein Bild, zwei Auftritte
   ==========================================================================

   assets/bilder/buehne.webp liegt an ZWEI Stellen: hinter dem Vorhang im
   Aufmacher und unter dem Repertoire-Abschnitt. Das ist Absicht — es ist
   derselbe Raum. Der Vorhang geht auf, man sieht die Bühne; weiter unten
   steht man wieder darin, jetzt mit Scheinwerfern auf den vier Stücken.

   Der Scrim steht deshalb hier und nicht zweimal weiter unten: Ändert man ihn,
   müssen beide Auftritte mitgehen, sonst sind es plötzlich zwei Räume.

   35 % ist gemessen, nicht geschätzt: Die hellste nennenswerte Fläche des
   Bildes ist der beleuchtete Holzboden (#C98147, 99. Perzentil). Weiß darauf
   käme ungedämpft auf 3,13:1, mit 35 % auf 5,26:1. Die Scheinwerferlampen
   selbst sind heller (#FAEFDE) und bleiben unter jeder vertretbaren Dämpfung
   unter 4,5:1 — dort darf schlicht keine Schrift stehen. Sie liegen in einem
   schmalen Band im oberen Fünftel des Bildes.
*/

:root {
	--buehne-scrim: color-mix(in srgb, var(--wp--preset--color--dunkel) 35%, transparent);

	/*
	 * Zweite, tiefere Stufe für den unteren Bildbereich.
	 *
	 * Der beleuchtete Holzboden ist die hellste Fläche des Bildes, und genau
	 * dort stehen im Repertoire-Abschnitt die Beschreibungstexte. Mit den
	 * 35 % von oben kam der gedämpfte Text dort auf gemessene 1,17:1 — vorher,
	 * auf der gleichmäßig dunklen Fläche, waren es 8,71:1.
	 *
	 * 65 % gerechnet gegen den hellsten Bodenton (#C98147) und die gedämpfte
	 * Textfarbe (color-mix aus akzent-kontrast 76 % und dunkel): rund 5,5:1.
	 *
	 * Bewusst als Verlauf und nicht als stärkerer Scrim überall: Oben hängen
	 * die Scheinwerfer, die die Szene überhaupt tragen. Die gleichmäßig
	 * abzudunkeln würde die Lesbarkeit unten erkaufen, indem es die Wirkung
	 * oben wegnimmt.
	 */
	--buehne-scrim-tief: color-mix(in srgb, var(--wp--preset--color--dunkel) 65%, transparent);

	/*
	 * Zwei Dunkelstufen für den sichtbaren „Velvet"-Verlauf der dunklen Bänder.
	 * Das Marken-Dunkel --dunkel (#12312f) liegt bewusst in der MITTE: Der Verlauf
	 * geht von einem tieferen Fast-Schwarz (oben-links) über --dunkel zu einem
	 * helleren Teal (unten-rechts). So wird aus der früher flach wirkenden Fläche
	 * ein klar lesbarer Hell-Dunkel-Verlauf (Stitch-Referenz „Termine").
	 */
	--visavis-dunkel-tief: #0a2028;   /* Sockel: fast-schwarzes Petrol (oben-links) */
	--visavis-dunkel-hell: #1a4a57;   /* Glanz: helleres Petrol (unten-rechts) */
}

/* ==========================================================================
   Der Vorhang
   ==========================================================================

   Beim Betreten füllt das Logo den Bildschirm. Scrollt man, teilt sich die
   Fläche und fährt nach links und rechts auf — dahinter liegt die Seite.

   Aufbau:
   - Die Bühne ist doppelt so hoch wie der Bildschirm. Diese zusätzliche Höhe
     ist der Weg, den man scrollt, während der Vorhang aufgeht.
   - Ihr Inhalt klebt oben fest (sticky), bleibt also stehen, während man
     scrollt.
   - Die beiden Vorhanghälften sind ::before und ::after — dafür braucht es
     keine leeren <div>, und der Block bleibt im Editor normal bearbeitbar.
   - Das Skript liefert nur --auf (0 bis 1). Die gesamte Bewegung steht hier.

   Ohne JavaScript fehlt .visavis-vorhang-an, und alles Folgende greift nicht:
   Der Aufmacher ist dann ein gewöhnlicher Abschnitt. Deshalb steht der
   Normalzustand oben und die Inszenierung darunter — nicht umgekehrt.
*/

/* --- Aufmacher, Normalzustand (auch ohne JavaScript) -------------------- */

.visavis-buehne {
	position: relative;
	overflow: hidden;
}

/*
 * Echter Vollbleed über die ganze Viewport-Breite — für Aufmacher UND
 * Repertoire dieselbe Technik.
 *
 * Der Seiteninhalt (.entry-content) ist alignwide und deshalb auf wideSize
 * (90rem = 1440px) gedeckelt. Der frühere Vollbleed zog nur um den
 * Wurzel-Innenabstand (48px) nach außen — das reicht bis rund 1536px Viewport.
 * Darüber (z. B. 2000px-Monitor) blieben ~230px weiß auf jeder Seite; hinter
 * dem geöffneten Vorhang erschien die Bühne als schmaler Kasten mit Rändern.
 *
 * calc(50% - 50vw) verankert die linke Kante am linken Viewport-Rand,
 * unabhängig davon, wie breit die zentrierte Inhaltsspalte gerade ist.
 *
 * Die DOPPELTE Klasse (.visavis-buehne.alignfull) ist kein Zufall: WordPress
 * setzt für verschachteltes alignfull den Rand per :where()-Regel auf 0 zurück
 * (Spezifität 0,1,0). Mit nur .visavis-buehne (ebenfalls 0,1,0) gewänne bei
 * Gleichstand die später stehende Core-Regel — der Rand bliebe 0, die Bühne
 * schmal. Der zweite Klassenname hebt die Spezifität auf 0,2,0. Genau derselbe
 * Grund, aus dem .visavis-repertoire-szene.alignfull doppelt benannt ist.
 */
.visavis-buehne.alignfull,
.visavis-repertoire-szene.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * Überlauf-Schutz für den Vollbleed. `clip` (nicht `hidden`) verhindert
 * waagerechtes Scrollen, OHNE einen Scroll-Container zu bilden — position:
 * sticky (Kopf, Aufmacher-Inhalt) bleibt dadurch funktionsfähig, und die
 * fixed-Vorhanghälften bleiben unberührt.
 */
body {
	overflow-x: clip;
}

/* --- Aufmacher als Vorhang (nur mit JavaScript) ------------------------- */

.visavis-vorhang-an .visavis-buehne {
	--auf: 0;
	position: relative; /* Bezug für das absolut liegende Vorhang-Video */

	/*
	 * Scrollstrecke, über die der Vorhang aufgeht.
	 *
	 * 150% heißt: Der erste Bildschirm steht still, die restlichen 50%
	 * Bildschirmhöhe sind der Weg. Vorher 175% — das ließ nach dem Öffnen einen
	 * langen Leerlauf, in dem Logo und Kernsatz noch auf der leeren Bühne
	 * standen, während das Repertoire von unten hochkroch (beide gleichzeitig
	 * sichtbar, „doppelter" Eindruck). Kürzer holt das Repertoire direkt hinter
	 * den offenen Vorhang. Bei 130% wirkte das Öffnen selbst zu hastig — 150%
	 * ist der Kompromiss. Feinregler für das Tempo: genau dieser Wert.
	 */
	min-height: 100vh;
	min-height: 100dvh;

	/*
	 * Die Bühne hinter dem Vorhang.
	 *
	 * Vorher lag hier gar nichts: Ging der Vorhang auf, kam der helle
	 * Seitenhintergrund zum Vorschein. Deshalb musste die Schrift ihre Farbe
	 * mitwandern lassen. Jetzt liegt dahinter ein echter Bühnenraum — derselbe,
	 * der weiter unten den Repertoire-Abschnitt trägt. Damit ist der Aufmacher
	 * durchgehend dunkel, und die Schrift kann durchgehend hell bleiben.
	 *
	 * background-attachment: fixed ist hier kein Effekt, sondern Notwendigkeit.
	 * Die Vorhanghälften sind position: fixed und stehen im Bildschirm still,
	 * während man scrollt. Eine mitscrollende Bühne würde unter dem stehenden
	 * Vorhang wegrutschen. Nebenbei bemisst "fixed" das cover am BILDSCHIRM
	 * statt am 175vh hohen Block — sonst würde das Bild auf 175vh Höhe
	 * hochgerechnet und man sähe nur noch einen Ausschnitt davon.
	 *
	 * Warum die Bühne an .visavis-buehne hängt und nicht an einer eigenen
	 * Ebene: .visavis-buehne__inhalt hat z-index 2 und bildet damit einen
	 * eigenen Stapelkontext. Alles darin läge zwangsläufig ÜBER den Hälften
	 * (z-index 1) — auch mit z-index -1. Die beiden Pseudoelemente von
	 * .visavis-buehne sind bereits die Hälften, also bleibt der eigene
	 * Hintergrund des Blocks die einzige Ebene unterhalb des Vorhangs.
	 *
	 * Das !important stand schon vorher hier: WordPress gibt für Group-Blöcke
	 * eigene Hintergrundregeln aus, die sonst gewinnen.
	 */
	background-image:
		url("assets/bilder/buehne-standbild.webp") !important;

	/*
	 * Kurtinenloses Bühnenbild OHNE Scrim. buehne-standbild.webp IST der exakte
	 * letzte Frame des Vorhang-Videos — dadurch ist das Bild, auf das das Video beim
	 * Ausblenden übergibt, PIXELGLEICH: man sieht keinen Übergang, keinen Fade, das
	 * Videobild „bleibt einfach stehen". Aufmacher UND Repertoire teilen exakt diesen
	 * einen fixen Hintergrund (gleich cover/center-top/fixed, kein Schleier) → die
	 * Bühne läuft durch, ohne Kante. Der frühere 35%-Scrim machte den Grund milchig
	 * und ist raus. Lesbarkeit trägt der von Natur dunkle Bühnenmittelgrund.
	 * (Alternative buehne-scharf.webp — 1440p-Downscale des 4K, höher aufgelöst, aber
	 * ein anderes Rendering als das Video → dort ein minimaler sichtbarer Übergang;
	 * liegt gesichert in website/_quellen, falls je gebraucht.)
	 *
	 * VORHANGLOSE Bühne statt der gerahmten buehne.webp:
	 * Der Schiebevorhang öffnet sonst auf ein Bild, das an den Rändern SELBST
	 * geraffte Vorhänge trägt — zwei Vorhänge übereinander, der zweite taucht auf,
	 * sobald der erste weg ist. buehne-offen.webp ist ein eigens erzeugtes 16:9-Bild
	 * (aus buehne-offen-quelle.png): derselbe Raum — Scheinwerferreihe, dunkle
	 * Rückwand, Holzboden —, aber OHNE Seitenvorhänge, die Ränder laufen ins
	 * Schwarz. Der Schiebevorhang öffnet damit auf genau EINE leere Bühne.
	 *
	 * cover + center top: Das Bild ist echtes 16:9 (1672×941) wie das Fenster,
	 * also füllt cover randlos ohne nennenswerten Beschnitt; center top hält die
	 * Scheinwerfer oben sicher im Bild. background-color nur als Fallback.
	 */
	background-color: var(--wp--preset--color--dunkel) !important;
	background-repeat: no-repeat !important;
	background-position: center top !important;
	background-size: cover !important;
	background-attachment: fixed !important;

	padding: 0 !important;
	overflow: visible;
}

/*
 * Der sichtbare Teil klebt oben fest, während die Strecke durchläuft.
 *
 * Wichtig: Diese Regel gilt dem gemeinsamen Rahmen, nicht den einzelnen
 * Blöcken darin. Griffe sie auf jedes Kind, würde jedes für sich
 * bildschirmhoch und klebrig — Logo, Satz und Buttons lägen übereinander
 * statt untereinander. Genau das war zuerst der Fall.
 */
.visavis-vorhang-an .visavis-buehne__inhalt {
	position: sticky;
	top: 0;
}

/*
 * Die beiden Vorhanghälften.
 *
 * 52% statt 50%, damit in der Mitte kein heller Spalt aufblitzt. Früher
 * standen hier 50.5% — das reichte gegen Rundungsfehler bei Bruchteilen von
 * Pixeln, nicht aber gegen das Schwingen weiter unten: Bewegen sich die
 * Hälften gegenläufig, wandert ihre Unterkante um einige Pixel auseinander.
 * Auf schmalen Bildschirmen ist 1% Überlappung dafür zu wenig.
 */
.visavis-vorhang-an .visavis-buehne::before,
.visavis-vorhang-an .visavis-buehne::after {
	content: "";
	position: fixed;
	top: 0;
	bottom: 0;
	width: 52%;
	z-index: 1;

	/*
	 * Bewegt wird nur transform (die scrollgesteuerte Öffnung) — das läuft auf
	 * der Grafikkarte. Kein background-Wert ändert sich während des Scrollens;
	 * sonst müsste das Stoffbild bei jedem Bild neu gerastert werden.
	 */
	will-change: transform;

	/* --- Stellschrauben -------------------------------------------------- */

	/*
	 * Raffung: Um wie viel sich die Hälfte beim Aufgehen zusammenzieht. Deutlich
	 * höher als früher (0,22) — echter Stoff ballt sich beim Öffnen sichtbar. Ein
	 * zaghaftes Stauchen las sich wie ein schrumpfendes Bild, nicht wie Stoff.
	 * transform-origin liegt außen, die Raffung zieht also zur Quaste.
	 */
	--raffung: 0.5;

	/*
	 * Legibilitäts-Scrim: „Dunkel" halbtransparent ÜBER dem Stoffbild.
	 *
	 * Der Aufmacher trägt weißen Text (akzent-kontrast). Der hellste
	 * Faltenglanz des Fotos käme ungedämpft nur auf 2,5:1 — die Regel verlangt
	 * 4,5:1. 45% drücken den hellsten Punkt auf gemessene 5,0:1. Unter ~40%
	 * wird die Grenze gerissen; höher wird der Samt unnötig stumpf. Das ist die
	 * Stellschraube für den Kompromiss aus Tiefe und Lesbarkeit.
	 */
	--vorhang-scrim: color-mix(in srgb, var(--wp--preset--color--dunkel) 45%, transparent);

	/*
	 * Wandernder Schatten statt flacher Wäsche — DAS macht aus dem rutschenden
	 * Bild geöffneten Stoff. Der Scrim ist jetzt WAAGERECHT und an --auf gekoppelt:
	 *
	 *   innen (Bühnenmitte): bleibt konstant 45 %. Hier steht der weiße Hero-Text,
	 *          der bis 70 % Öffnung voll sichtbar ist — die Kante darf nie heller
	 *          werden, sonst reißt der Kontrast (4,5:1). Das Licht im sich
	 *          öffnenden Spalt kommt ohnehin echt von der beleuchteten Bühne
	 *          dahinter, nicht von künstlich aufgehellter Fläche.
	 *   außen (zur Quaste): wird beim Öffnen DUNKLER (45 % → 70 %). Dort ballt sich
	 *          der geraffte Stoff dicht zusammen und liegt im Schatten. Nebenbei
	 *          verschmilzt die dunkle Außenkante besser mit dem dunklen Samt im
	 *          Bühnenfoto — die alte harte Naht wird weicher.
	 *
	 * Bei --auf = 0 sind beide 45 %: identisch zur bisherigen gleichmäßigen Wäsche.
	 */
	--scrim-innen: var(--vorhang-scrim);
	--scrim-aussen: color-mix(in srgb, var(--wp--preset--color--dunkel) calc(45% + var(--auf, 0) * 25%), transparent);

	/* --- Der Stoff ------------------------------------------------------- */

	/*
	 * Der Samt kommt jetzt als echtes Foto statt aus gestapelten Verläufen —
	 * reine Verläufe lasen sich zu glatt und zu regelmäßig, nach „schlechtem
	 * HTML". Auf jeder Hälfte liegen genau zwei Ebenen: oben der Scrim (für die
	 * Lesbarkeit des weißen Textes), darunter das Stoff-Foto. Das Bild selbst
	 * steht pro Hälfte in ::before/::after (links bzw. gespiegelt rechts), weil
	 * es sich unterscheidet; background-color trägt, falls das Bild fehlt.
	 */
	background-color: var(--wp--preset--color--dunkel);
	background-repeat: no-repeat;
	background-size: cover;
}

/*
 * Linke Hälfte. transform-origin liegt an der oberen ÄUSSEREN Ecke: Die
 * Raffung (scaleX) zieht den Stoff beim Öffnen zur Außenkante, wo ein echter
 * Vorhang zusammengebunden wird.
 */
.visavis-vorhang-an .visavis-buehne::before {
	left: 0;

	/*
	 * background-position: right BOTTOM.
	 *
	 * Rechts (waagerecht): Die Innenkante (Bildschirmmitte, wo sich die Hälften
	 * treffen) ist die RECHTE Kante des Streifens; außen wird abgeschnitten, die
	 * Mittelkante bleibt stehen.
	 *
	 * Bottom (senkrecht): Der Goldsaum sitzt am UNTEREN Bildrand — vorher stand
	 * hier `top`, wodurch der Saum auf breiten 16:9-Monitoren unter die Kante
	 * fiel (cover skaliert nach Breite, das höhere Bild wird unten beschnitten).
	 * Unten verankert bleibt der Saum bei jedem Seitenverhältnis sichtbar;
	 * abgeschnitten wird stattdessen oben, wo nur ruhig auslaufende Falten sind.
	 */
	background-image:
		linear-gradient(to bottom, transparent 80%, rgba(2, 3, 0, 0.9) 97%),
		linear-gradient(to left, var(--scrim-innen), var(--scrim-aussen)),
		url("assets/bilder/vorhang-links.webp");
	background-position: right bottom;

	transform-origin: left top;
	transform:
		translate3d(calc(var(--auf) * var(--auf) * -100%), 0, 0)
		scaleX(calc(1 - var(--auf) * var(--raffung)));
}

/* Rechte Hälfte spiegelbildlich. */
.visavis-vorhang-an .visavis-buehne::after {
	right: 0;

	/*
	 * Spiegelbildlich: das gespiegelt exportierte Foto, Innenkante
	 * (Bildschirmmitte) = LINKE Kante des Streifens. Spiegeln als eigene Datei
	 * statt per scaleX(-1), damit es nicht mit dem Scroll-Transform kollidiert.
	 */
	background-image:
		linear-gradient(to bottom, transparent 80%, rgba(2, 3, 0, 0.9) 97%),
		linear-gradient(to right, var(--scrim-innen), var(--scrim-aussen)),
		url("assets/bilder/vorhang-rechts.webp");
	background-position: left bottom;

	transform-origin: right top;
	transform:
		translate3d(calc(var(--auf) * var(--auf) * 100%), 0, 0)
		scaleX(calc(1 - var(--auf) * var(--raffung)));
}

/*
 * Warum die Bewegung quadriert wird: var(--auf) * var(--auf) statt var(--auf).
 * Damit läuft der Vorhang träge an und wird gegen Ende schneller — die
 * Schwere, die schwerer Stoff hat. Eine transition mit fester Dauer wäre hier
 * falsch: Der Scroll steuert die Position direkt, eine Transition liefe ihr
 * dauernd hinterher und schösse beim schnellen Scrollen über das Ende hinaus.
 */

/* Logo und Text liegen über dem Vorhang. */
.visavis-vorhang-an .visavis-buehne__inhalt {
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;

	/*
	 * Logo, Kernsatz und Buttons blenden aus, sobald der Vorhang fast offen ist.
	 *
	 * Vorher blieben sie stehen und liefen erst durch Weiterscrollen nach oben
	 * hinaus. Seit das Repertoire direkt dahinter liegt, überschnitt sich das:
	 * Der Hero-Inhalt stand noch im Bild, während die Stücke schon von unten
	 * hochstiegen — beides gleichzeitig sichtbar, der „doppelte" Eindruck, den
	 * die Screenshots zeigten.
	 *
	 * Jetzt an --auf gekoppelt: bis 70 % Öffnung voll lesbar (man hat Zeit für
	 * den Kernsatz), dann verblasst der Inhalt über die letzten 30 %. Ist der
	 * Vorhang offen, ist er weg — die Bühne gehört ab da den Stücken. Nur
	 * opacity, das läuft auf der GPU; der Inhalt bleibt im Fluss und scrollt
	 * anschließend ganz normal hinaus.
	 */
	opacity: clamp(0, calc((1 - var(--auf)) * 3.33), 1);
	will-change: opacity;
}

/* ===========================================================================
   VORHANG-VIDEO (18.08.) — der Aufmacher-Vorhang ist jetzt ein echtes Video
   (Theater_curtain_opening…mp4), das js/vorhang.js aus dem Scrollstand durchspult
   (film.currentTime = fortschritt * dauer). Es ERSETZT die CSS-Vorhanghälften.
   Logo/Kernsatz/Buttons bleiben durchgehend sichtbar (kein Ausblenden mehr) — der
   Kernsatz steht am Ende im Bühnenlicht. Ohne JS bleibt das Video verborgen, dann
   trägt der buehne-offen.webp-Hintergrund den Aufmacher (offene Bühne + Inhalt).
   =========================================================================== */

/* Ohne die von JS gesetzte Klasse (kein JS / reduced-motion): Video aus. */
.visavis-buehne__film {
	display: none;
}

.visavis-vorhang-an .visavis-buehne__film {
	display: block;
	/*
	 * fixed (20.08.): Das Video ist VIEWPORT-verankert — genauso wie der fixe
	 * Bühnen-Hintergrund (background-attachment: fixed). Vorher lag es absolute und
	 * scrollte mit; sein Bild wanderte dann relativ zum fixen Hintergrund, und beim
	 * Übergeben ins Repertoire entstand die sichtbare Kante. fixed + object-position
	 * center top rechnet exakt denselben cover-Ausschnitt wie der Hintergrund → Video
	 * und Bühne stehen deckungsgleich, in jeder Scrollposition. Da es so den ganzen
	 * Schirm deckt, wird es nach dem Öffnen ausgeblendet (ist-offen); darunter liegt
	 * das identische, kurtinenlose Standbild — also ohne Sprung.
	 */
	position: fixed;
	inset: 0;
	width: 100%;  /* bezogen auf den Viewport (fixed) — nötig, sonst nimmt das */
	height: 100%; /* <video> als ersetztes Element seine intrinsische Größe (1280×720) */
	/*
	 * cover + center (03.09.): Das Video (16:9) füllt den Viewport immer ganz. Ein
	 * Browserfenster ist meist breiter als 16:9 (Adressleiste/Tabs nehmen Höhe), darum
	 * wird etwas Höhe beschnitten — seit „center" gleichmäßig oben UND unten statt nur
	 * unten (vorher „center top"): der Vorhang wirkt so weniger gezoomt. „contain"
	 * (ganzes Video, schwarze Seitenbalken) war kurz drin und ist auf Philipps Wunsch
	 * wieder raus (Backup style.css.vor-cover-center-*). Schwarzer Grund bleibt als
	 * Sicherheitsnetz, falls beim Laden kurz nichts gemalt ist.
	 */
	object-fit: cover;
	object-position: center;
	background-color: #000;
	/*
	 * z-index 0 (24.08.): Das Video liegt jetzt HINTER dem gesamten Inhalt —
	 * Hero-Inhalt (z-index 2) UND Repertoire (z-index 1) stehen darüber. So kann
	 * das Video die durchgehende Bühne für Aufmacher UND Repertoire sein, statt
	 * nach dem Öffnen an ein Standbild zu übergeben (Philipp-Wunsch: das Video
	 * "gehört" zum Repertoire, es hört nicht auf). Der frühere <video>-vs-<img>-
	 * Übergangsunterschied entfällt damit ganz — es bleibt durchweg dasselbe Video.
	 */
	z-index: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;

	/*
	 * WICHTIG gegen das "Vollseiten-Video"-Problem: Ein position:fixed-<video>
	 * deckt — anders als ein background-attachment:fixed-Bild — den GANZEN Viewport
	 * und würde die helleren Abschnitte unter dem Repertoire überdecken. Darum
	 * beschneidet vorhang.js das Video pro Frame auf den Bereich Oberkante →
	 * Repertoire-Unterkante (--film-clip = abzuschneidende Höhe unten). Ohne JS
	 * ist das Video ohnehin display:none.
	 */
	clip-path: inset(0 0 var(--film-clip, 0px) 0);
}

/*
 * Ist das Repertoire komplett über den oberen Bildrand gescrollt, ruht das Video:
 * ausgeblendet (und von vorhang.js pausiert) — es deckt dann nichts mehr und
 * dekodiert nicht unnötig weiter (Philipp-Wunsch: pausieren, wenn aus dem Bild).
 */
.visavis-buehne__film.film-ruht {
	opacity: 0;
}

/* Das Video ersetzt die CSS-Vorhanghälften vollständig. */
.visavis-vorhang-an .visavis-buehne::before,
.visavis-vorhang-an .visavis-buehne::after {
	display: none;
}

/*
 * Repertoire-Bühne: MIT JS (vorhang-an) trägt das durchlaufende Video den Grund.
 * Darum den eigenen fixen Bild-/Farbgrund hier wegnehmen, damit das Video (z-index 0,
 * fixed, dahinter) durchscheint. Das Repertoire selbst bekommt z-index 1, damit die
 * Coverflow-Karten und Texte ÜBER dem Video liegen. Ohne JS bleibt die eigene Bühne
 * aus buehne-standbild.webp (Regel weiter unten, ungescoped) erhalten.
 */
.visavis-vorhang-an .visavis-repertoire-szene {
	position: relative;
	z-index: 1;
	background-image: none;
	background-color: transparent;
}

/* Logo/Kernsatz/Buttons bleiben durchgehend sichtbar (überschreibt das Ausblenden oben). */
.visavis-vorhang-an .visavis-buehne__inhalt {
	opacity: 1;
}

/*
 * Die Schrift bleibt hell — durchgehend.
 *
 * Früher wanderte sie mit dem Vorhang von Hell nach Dunkel, weil hinter dem
 * geöffneten Vorhang der helle Seitenhintergrund lag. Seit dort die Bühne
 * steht, ist der Grund von Anfang bis Ende dunkel: Der Farbwechsel wäre jetzt
 * nicht nur überflüssig, er wäre falsch — dunkle Schrift auf dunkler Bühne.
 *
 * Das ist nebenbei die ruhigere Lösung. Eine Schrift, die beim Scrollen ihre
 * Farbe ändert, zieht Aufmerksamkeit auf einen Vorgang, der nichts erklärt.
 * Bewegt wird jetzt nur noch der Vorhang.
 */
.visavis-vorhang-an .visavis-buehne__inhalt,
.visavis-vorhang-an .visavis-buehne__inhalt h1 {
	color: var(--wp--preset--color--akzent-kontrast);
}

/* Die Unterzeile bleibt im hellen Petrol — guter Kontrast auf Dunkel. */
.visavis-vorhang-an .visavis-buehne__inhalt .has-akzent-hell-color {
	color: var(--wp--preset--color--akzent-hell) !important;
}

/* „Mobiles Theater für Kinder und Erwachsene" — der wichtigste Hinweis: es ist eine
   MOBILE Bühne. Prominent gesetzt (groß, kräftig, gesperrt), damit es sofort ins Auge
   springt — unabhängig vom Vorhang-Zustand. */
.visavis-buehne__inhalt .has-akzent-hell-color {
	font-size: clamp(1.3rem, 2.6vw, 2.1rem) !important;   /* schlägt WPs has-gross-font-size !important */
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-top: var(--wp--preset--spacing--20);
}

/* Kernsatz gezähmt: Logo (groß) + Kernsatz + Mobil-Zeile + Buttons sollen zusammen in
   EINEN Blick passen, damit die Mobil-Info sofort sichtbar ist (Hero nicht zu hoch).
   !important, weil WPs has-titel-font-size selbst mit !important kommt. */
.visavis-buehne__inhalt h1 {
	font-size: clamp(1.9rem, 4.2vw, 3.4rem) !important;
	line-height: 1.12;
}

/* Der Umriss-Button ebenso; sein Rahmen erbt die Farbe über currentColor. */
.visavis-vorhang-an .visavis-buehne__inhalt .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--akzent-kontrast);
	border-color: currentColor;
}

/*
 * Füll-Button nach dem Vorbild theaterhaus: Der Umriss-Button füllt sich beim
 * Hover in 0,5 s von links mit Türkis, die runde Vorderkante quadriert sich am
 * Ende, die Schrift kippt auf Dunkel. Site-weit für alle Umriss-Buttons.
 *
 * Die Füllung ist eine FESTE Farbe (akzent-hell), NICHT currentColor: currentColor
 * würde beim Hover mit der Schriftfarbe mitkippen und die Füllung unsichtbar machen.
 * Türkis mit dunkler Schrift liest sich auf hellem wie dunklem Grund.
 */
.is-style-outline .wp-block-button__link {
	background-image: linear-gradient(
		var(--wp--preset--color--akzent-hell),
		var(--wp--preset--color--akzent-hell)
	);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0% 100%;
	transition: background-size 0.5s cubic-bezier(0.61, 0.13, 0.25, 1),
		color 0.5s cubic-bezier(0.61, 0.13, 0.25, 1),
		border-color 0.5s cubic-bezier(0.61, 0.13, 0.25, 1);
}
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
	background-size: 100% 100%;
	border-color: var(--wp--preset--color--akzent-hell);
}
/*
 * Schrift kippt auf Dunkel. Der dritte/vierte Selektor mit .visavis-buehne__inhalt
 * hebt die Spezifität über die Aufmacher-Regel (die die Umriss-Schrift hell setzt),
 * sonst bliebe die Schrift auf dem dunklen Aufmacher-Button hell auf hellem Türkis.
 */
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible,
.visavis-buehne__inhalt .is-style-outline .wp-block-button__link:hover,
.visavis-buehne__inhalt .is-style-outline .wp-block-button__link:focus-visible {
	color: var(--wp--preset--color--dunkel);
}

/*
 * Ganz offen: Der Vorhang darf keine Klicks mehr abfangen. Die Klasse setzt
 * das Skript, sobald der Fortschritt praktisch 1 erreicht hat.
 */
.visavis-vorhang-an .visavis-buehne.ist-offen,
.visavis-vorhang-an .visavis-buehne.ist-offen .visavis-buehne__inhalt {
	pointer-events: none;
}

.visavis-vorhang-an .visavis-buehne.ist-offen::before,
.visavis-vorhang-an .visavis-buehne.ist-offen::after {
	visibility: hidden;
}

/* --- Kopfbereich: immer sichtbar, immer lesbar -------------------------- */

/*
 * Sticky sitzt am WordPress-eigenen WRAPPER, nicht am Kopf selbst — Auflösung
 * der „Sticky-Kontext-Falle" (10.09. entdeckt, per Screenshot gemeldet:
 * Menüleiste bewegte sich beim Scrollen NICHT mit, verschwand nach wenigen
 * Pixeln komplett statt oben stehen zu bleiben).
 *
 * Ursache: `wp:template-part` mit tagName="header" rendert IMMER einen
 * zusätzlichen `<header class="wp-block-template-part">` um den eigentlichen
 * Kopf herum. Dieser Wrapper schrumpft auf die Höhe seines Inhalts (~136 px)
 * — exakt so hoch wie der Kopf selbst. position:sticky auf dem INNEREN
 * Element (.visavis-kopf) kann sich aber nur innerhalb der Box seines
 * direkten Elternelements bewegen, und die bot praktisch keinen Spielraum:
 * der Kopf war technisch sticky, hatte aber nichts, worin er "stehenbleiben"
 * konnte, und scrollte faktisch normal mit.
 *
 * Sticky auf dem WRAPPER wirkt stattdessen gegen DESSEN Elternelement
 * (.wp-site-blocks, so hoch wie die ganze Seite) — dort ist reichlich Platz.
 * .visavis-kopf bleibt `position: relative`, damit die ::before-Glasebenen
 * weiter unten (Start- UND Unterseiten) sich weiterhin an IHM ausrichten,
 * nicht am Wrapper.
 *
 * Der z-index bleibt entscheidend: Die Vorhanghälften liegen auf 1, der Kopf
 * muss darüber. Ohne das verschwindet das Menü hinter dem Vorhang, sobald man
 * die Startseite betritt.
 */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 20;
}
/*
 * Rand der Kopfzeile: fest 15px, bei jeder Breite (23.09.).
 * Vorher: Innenabstand 5vw, aber die Zeile darin (align:full) wurde von
 * WordPress um die Wurzel-Polsterung (80px) nach außen gezogen. Bei 1920px
 * blieben so 15px Rand (95 − 80) — das ist die abgenommene Optik. Unter ~1600px
 * war der Innenabstand kleiner als 80px, die Zeile ragte über den Bildschirm:
 * Logo links angeschnitten, und auf dem Handy lag der ☰-Knopf außerhalb des
 * Bildschirms (Menü nicht erreichbar). Jetzt: 15px Innenabstand, Zeile ohne
 * Außenzug — bei 1920px pixelgleich, darunter nichts mehr abgeschnitten.
 */
.visavis-kopf {
	position: relative;
	padding-left: 15px !important;
	padding-right: 15px !important;
}
.visavis-kopf > .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Auf der Vorhang-Startseite ist der Kopf ein Overlay, kein Flow-Element.
 *
 * Als sticky nahm er 136 px Flow-Höhe VOR der Bühne ein. Der Aufmacher-Inhalt
 * ist 100vh hoch und zentriert sich darin — beginnt aber dadurch erst bei
 * y=164 und ragte 164 px unter die Falz: Überschrift, Buttons und der Hinweis
 * "weiterscrollen" lagen unsichtbar darunter (gemessen bei 1280 × 800). Kein
 * Verkleinern des Logos behebt das, weil die Verschiebung die Zentrierung
 * selbst betrifft, nicht die Inhaltshöhe.
 *
 * fixed nimmt keinen Flow-Platz: Die Bühne beginnt bei 0, der Inhalt zentriert
 * über den vollen Bildschirm. Der Kopf ist bei geschlossenem Vorhang ohnehin
 * transparent und als schwebende Ebene gedacht — hier wird er es auch
 * technisch. Nur bei Vorhang-an, also nur auf der Startseite; Unterseiten
 * behalten den mitscrollenden sticky-Kopf.
 */
.visavis-vorhang-an .visavis-kopf {
	position: fixed;
	left: 0;
	right: 0;
}
/*
 * iPhone (WebKit — Safari UND Firefox, alle iOS-Browser nutzen WebKit): Der
 * fixe Kopf steckt im sticky-Wrapper von oben. WebKit wendet beim Scrollen
 * den sticky-Versatz des Wrappers ZUSÄTZLICH auf das fixe Kind an — der Kopf
 * rutschte mit nach unten, stand mitten im Bild und sprang (Philipp, 14.10.,
 * iPhone seines Vaters; Chrome/Samsung war in Ordnung). Auf der Vorhang-Seite
 * braucht der Wrapper kein sticky: Der Kopf ist hier ohnehin fixed. relative
 * statt static, damit z-index 20 (über den Vorhanghälften) weiter greift.
 */
.visavis-vorhang-an header.wp-block-template-part {
	position: relative;
}

/*
 * Der Aufmacher muss bei y = 0 beginnen. Zwei Block-Abstände (je 1,75 rem) schoben ihn
 * auf 56 px nach unten — und damit die Hero-Buttons an die Falz (bei 1920 × 1080 lagen
 * sie bei ~950–1010 px, „Weiterscrollen" schon darunter):
 * 1. WPs Block-Gap vor <main>: der Kopf ist hier fixed und 0 px hoch, der Abstand
 *    dahinter bleibt aber. Auf der Vorhang-Seite raus.
 * 2. Block-Gap vor .visavis-buehne__inhalt: das fixe <video> ist ihr Element-Geschwister,
 *    darum bekommt sie den „* + *"-Abstand. Der Rand fällt durch die Bühne nach oben durch
 *    (Margin-Collapsing) und rückt den ganzen Aufmacher ab. Ebenfalls raus.
 */
.visavis-vorhang-an main {
	margin-block-start: 0;
}

.visavis-buehne > .visavis-buehne__inhalt {
	margin-block-start: 0;
}

/*
 * Solange der Vorhang zu ist, steht der Kopf vor dunklem Grund und braucht
 * helle Schrift. Geht er auf, wandert die Farbe zurück ins normale Dunkel.
 *
 * color-mix erledigt den Übergang stufenlos: Bei --vorhang-auf = 0 ist die
 * Schrift vollständig hell, bei 1 vollständig normal.
 *
 * Der Umschaltpunkt lag früher bei 0,71 (Faktor 1.4) — damals wurde es hinter
 * dem Vorhang ja schon hell. Seit dort die Bühne steht, bleibt der Grund unter
 * dem Kopf bis zuletzt dunkel: Oben im Bühnenbild liegt die schwarze
 * Deckenzone. Der Wechsel gehört deshalb ans ENDE und passiert jetzt in den
 * letzten 10 % — genau dann, wenn --vorhang-auf 1 erreicht und der Aufmacher
 * nach oben hinausläuft. Gemeinsamer Takt mit dem Hintergrund weiter unten,
 * damit Schriftfarbe und Balken zusammen umschalten statt nacheinander.
 */
.visavis-vorhang-an .visavis-kopf,
.visavis-vorhang-an .visavis-kopf .wp-block-site-title a,
.visavis-vorhang-an .visavis-kopf .wp-block-navigation a {
	color: color-mix(
		in srgb,
		var(--wp--preset--color--text)
			calc(clamp(0, (var(--vorhang-auf, 1) - 0.9) * 10, 1) * 100%),
		var(--wp--preset--color--akzent-kontrast)
	);
}

/* Ohne Vorhang — also auf allen Unterseiten — schlicht mitscrollend, aber
   NICHT mehr als feste helle Fläche: Frosted Glass wie auf der Startseite
   (Philipp, 09.09.), hier in der hellen Variante. Anders als beim Vorhang-
   Kopf (der auf einem FIXED Video liegt, also immer echten Bildinhalt zum
   Durchscheinen hat) sitzt dieser Kopf nur STICKY — bei Scroll-Position 0
   überlappt er noch gar keinen Seiteninhalt. Ein Bleed/Fade nach unten (wie
   ursprünglich versucht) erzeugte deshalb einen sichtbaren Bruch zur Fläche
   darunter. Der Kopf bleibt daher als eigenständige, in sich geschlossene
   Glas-Fläche stehen — kein Ausbluten, kein Fade.
   WICHTIG: body:not(.home) — die Startseite hat ihr EIGENES Glas weiter
   unten im Dokument (body.home .visavis-kopf::before). Ohne dieses Scoping
   griff diese Regel zusätzlich zur Startseiten-Regel: zwei backdrop-filter
   auf demselben Element übereinander erzeugten sichtbare Doppel-Unschärfe-
   Artefakte auf dem Vorhang-Video (Philipp hat das zurückgemeldet).
   ZUSÄTZLICH ausgeschlossen: .page-template-stueck / .visavis-dunkelkopf-
   seite — die haben ebenfalls ihr eigenes (dunkles) Glas weiter unten. Ohne
   diesen Ausschluss gewann DIESE helle Regel dort trotzdem: „body:not(.home)"
   zählt spezifitätsmäßig als Element + eine Klasse, exakt gleichauf mit den
   zwei Klassen der dunklen Regel — nur eben eine Handvoll Zeilen früher im
   Dokument, aber Gleichstand + späterer Fund reicht nicht, wenn die konkrete
   Formel minimal danebenliegt. Ergebnis war ein heller Kopf mit weißer,
   unlesbarer Schrift auf allen Stück-/Termine-/Kontakt-Seiten (10.09.
   entdeckt, per Screenshot gemeldet). Der explizite Ausschluss macht die
   beiden Regeln überschneidungsfrei statt auf Spezifität zu wetten.
   23.09.: zusätzlich :not(:has(.visavis-stueck-buehne)) — erkennt Stück-Seiten
   am Inhalt statt an der Körperklasse. Im Editor gibt es keine Körperklassen
   (.page-template-stueck fehlt dort), der Aufmacher steht aber im Inhalt. */
body:not(.home):not(.page-template-stueck):not(.visavis-dunkelkopf-seite):not(:has(.visavis-stueck-buehne)):not(:has(.visavis-termine-kopfband)) .visavis-kopf {
	background: color-mix(in srgb, #ffffff 62%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent) 10%, transparent);
}

/*
 * Mit Vorhang: Hintergrund erst einblenden, wenn dieser fast offen ist. Davor
 * läge ein heller Balken über der dunklen Fläche.
 */
.visavis-vorhang-an .visavis-kopf {
	background: color-mix(
		in srgb,
		var(--wp--preset--color--hintergrund)
			calc(clamp(0, (var(--vorhang-auf, 1) - 0.9) * 10, 1) * 100%),
		transparent
	);
}

@media (prefers-reduced-motion: reduce) {
	.visavis-vorhang-an .visavis-kopf,
	.visavis-vorhang-an .visavis-kopf .wp-block-site-title a,
	.visavis-vorhang-an .visavis-kopf .wp-block-navigation a {
		color: var(--wp--preset--color--text);
	}

	.visavis-vorhang-an .visavis-kopf {
		background: var(--wp--preset--color--hintergrund);
	}
}

/*
 * Hinweis zum Scrollen. Ohne ihn steht man vor einem Vollbild und weiß nicht,
 * dass es weitergeht — der häufigste Fehler bei solchen Aufmachern.
 */
.visavis-buehne__hinweis {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent-hell);
	opacity: calc(1 - var(--auf) * 3);
}

.visavis-vorhang-an .visavis-buehne__hinweis {
	display: block;
	animation: visavis-wippen 2.4s ease-in-out infinite;
}

@keyframes visavis-wippen {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, 0.4rem); }
}

/* Bewegung unerwünscht: kein Vorhang, kein Wippen, normaler Abschnitt. */
@media (prefers-reduced-motion: reduce) {
	.visavis-vorhang-an .visavis-buehne {
		min-height: 0;
	}

	.visavis-vorhang-an .visavis-buehne::before,
	.visavis-vorhang-an .visavis-buehne::after {
		display: none;
	}

	.visavis-vorhang-an .visavis-buehne__inhalt {
		position: static;
		opacity: 1;
		transform: none;
		min-height: 0;
	}

	.visavis-buehne__hinweis {
		display: none;
	}
}

/*
 * Das Logo. Es kommt eine Spur zu groß herein und setzt sich dann —
 * als würde ein Vorhang aufgehen. Bewusst dezent: Ein Logo, das
 * hereinspringt, wirkt beim zweiten Besuch aufdringlich.
 */
/*
 * Das Logo wird über die HÖHE begrenzt, nicht über die Breite.
 *
 * Vorher stand hier width: min(260px, 55vw) — eine reine Breitenangabe. Weil
 * das Logo hochformatig ist (534 × 762, Verhältnis 1:1,43), wurden daraus
 * 371 px Höhe. Gemessen bei 1280 × 720: Der Aufmacher-Inhalt war damit 788 px
 * hoch, also 68 px höher als der Bildschirm — Überschrift (113 %), Unterzeile
 * (122 %), Buttons (137 %) und selbst der Hinweis "weiterscrollen" (136 %)
 * lagen unter der Falz. Auf einem Laptop sah man das Logo und sonst nichts,
 * nicht einmal den Kernsatz.
 *
 * Der Fehler steckte in der Achse: Ein hochformatiges Bild in einem Bereich,
 * dessen knappe Größe die Höhe ist, darf nicht über die Breite bemessen
 * werden. 38vh lässt Platz für alles Übrige und wächst auf hohen Bildschirmen
 * mit; min() mit der natürlichen Höhe verhindert, dass es je hochgerechnet
 * wird. Die Breite folgt über width: auto dem Seitenverhältnis, max-width
 * fängt sehr schmale Fenster ab.
 */
.visavis-buehne__logo img {
	display: block;
	margin-inline: auto;
	width: auto;
	height: auto;
	max-height: min(34vh, 340px);
	/* 03.09.: neues Gesichter-Bild ist 3:2 (1536×1024) mit Luft um die Gesichter — die
	   Breitengrenze war für das alte, fast quadratische Logo gesetzt (400px) und hätte die
	   Gesichter auf ~260px Höhe gedrückt. Höher gesetzt, damit die Höhe (34vh/340px) zieht. */
	max-width: min(520px, 80vw);
	/* Weicher Schein, damit das Petrol-Logo sich vom dunklen Vorhang abhebt (solider). */
	filter: drop-shadow(0 0 2.5rem rgba(0, 0, 0, 0.6));
}

/* Wortmarke „Theater vis-à-vis" als echter Poppins-Text unter den Gesichtern — statt
   Bild-Schriftzug: lesbar, gestochen scharf, einheitlich mit der Seiten-Schrift.
   (Barrierefrei abgedeckt über den echten Website-Titel im Kopf.) */
.visavis-buehne__logo { text-align: center; }
.visavis-buehne__logo::after {
	content: "Theater vis-à-vis";
	display: block;
	margin-top: 0.6rem;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 400;
	font-size: clamp(1.6rem, 4.2vw, 3.1rem);
	letter-spacing: 0.03em;
	line-height: 1;
	color: var(--wp--preset--color--akzent-kontrast);
}

.visavis-js .visavis-buehne__logo {
	opacity: 0;
	transform: scale(1.06);
	transition:
		opacity 900ms ease-out,
		transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.visavis-js .visavis-buehne__logo.ist-sichtbar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.visavis-js .visavis-buehne__logo {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*
 * Der Leitsatz. Etwas später als das Logo — erst das Bild, dann das Wort.
 */
.visavis-buehne__satz {
	max-width: 24ch;
	margin-inline: auto;
	text-align: center;
	text-wrap: balance;
}

/* --- Bildreihe ---------------------------------------------------------- */

.visavis-buehne__bilder {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--20);
}

@media (max-width: 40rem) {
	.visavis-buehne__bilder {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Auf schmalen Bildschirmen füllt das dritte Bild die Reihe. */
	.visavis-buehne__bilder > *:nth-child(3) {
		grid-column: span 2;
	}
}

.visavis-buehne__bilder figure,
.visavis-buehne__bilder img {
	margin: 0;
	display: block;
}

/* Runde Karten mit Petrol-/Türkis-Rahmen (Philipps PPT-Mockup, 24.08.):
   der Akzent-Ton als „Passepartout" um das gerundete Foto. */
.visavis-buehne__bilder figure {
	background: var(--wp--preset--color--akzent);
	padding: 0.6rem;
	border-radius: 0;
	box-shadow: 0 8px 22px -14px color-mix(in srgb, var(--wp--preset--color--dunkel) 60%, transparent);
}

.visavis-buehne__bilder img {
	width: 100%;
	height: 100%;
	max-height: 22rem;
	object-fit: cover;
	border-radius: 0;
}

/*
 * Platzhalter im Layout deutlich sichtbar machen.
 * Alles, was noch echten Inhalt braucht, bekommt diese Klasse — damit nichts
 * versehentlich als fertiger Text durchgeht und live geht.
 */
.visavis-platzhalter {
	outline: 2px dashed #b3261e;
	outline-offset: 4px;
	background: #fff4f3;
	color: #5c1310;
}
/* Dieselbe Markierung im Editor — das Attribut setzt js/platzhalter-editor.js
   an Textfeldern mit [eckigen Klammern]. Auf der Website gibt es es nie. */
[data-visavis-platzhalter] {
	outline: 2px dashed #b3261e;
	outline-offset: 4px;
	background: #fff4f3;
	color: #5c1310 !important;
}

/* ===== Repertoire: Diashow-Story und Bühnenlicht ========================= */

/*
 * Zwei zusammengehörige Abschnitte, beide von js/szene.js bewegt. Wie beim
 * Vorhang liefert das Skript nur Zahlen; die gesamte Gestaltung steht hier.
 *
 * Ohne JavaScript passiert schlicht nichts: --p steht auf 1 (Endzustand), und
 * die Abblendung der Textschritte hängt an .visavis-szene-an, das nur gesetzt
 * wird, wenn Bewegung erwünscht ist. Die Seite bleibt vollständig lesbar.
 */

/* --- Diashow-Story: Bild bleibt stehen, Text läuft daran vorbei ---------- */

.visavis-story__buehne {
	/*
	 * Klebt am oberen Rand, während die Textspalte weiterscrollt. Deshalb
	 * liegt sticky auf DIESEM Kasten und nicht auf der Spalte: Die Spalte wird
	 * von Flexbox auf volle Zeilenhöhe gestreckt und hätte keinen Spielraum.
	 */
	position: sticky;
	top: 12vh;
	aspect-ratio: 3 / 4;
	border-radius: 0;
	overflow: hidden;
	background: var(--wp--preset--color--flaeche);
}

/* Die Bilder liegen gestapelt und werden überblendet. */
.visavis-story__frame {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 600ms ease-out, transform 900ms ease-out;
}

.visavis-story__frame.ist-aktiv {
	opacity: 1;
	transform: none;
}

/*
 * Ohne Skript ist keins aktiv — dann muss wenigstens das erste zu sehen sein.
 *
 * WICHTIG: nur greifen lassen, wenn das Skript NICHT lief. Ohne diese
 * Einschraenkung hat die Regel dieselbe Spezifitaet wie ".ist-aktiv" (beide
 * 0,2,0), steht aber spaeter — und gewinnt damit immer. Folge war: Bild 1
 * blendete nie aus, die anderen legten sich nur darueber.
 */
html:not(.visavis-szene-an) .visavis-story__frame:first-child {
	opacity: 1;
	transform: none;
}

.visavis-story__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

/*
 * Großer Abstand zwischen den Schritten: Er bestimmt, wie lange ein Bild
 * stehen bleibt. Kleiner = die Bilder hetzen durch.
 */
.visavis-story__steps {
	display: grid;
	gap: 38vh;
	padding-block: 14vh 18vh;
}

/* Abblenden nur mit Skript — ohne JS müssen alle Texte voll lesbar sein. */
.visavis-szene-an .visavis-story__step {
	opacity: 0.34;
	transition: opacity 400ms ease-out;
}

.visavis-szene-an .visavis-story__step.ist-aktiv {
	opacity: 1;
}

@media (width < 46rem) {
	/*
	 * Nicht mehr klebend, aber weiterhin "relative" — die Bilder liegen
	 * absolut darin; bei "static" würden sie aus dem Kasten herausfallen.
	 */
	.visavis-story__buehne {
		position: relative;
		top: auto;
		aspect-ratio: 4 / 3;
	}

	.visavis-story__steps {
		gap: var(--wp--preset--spacing--40);
		padding-block: var(--wp--preset--spacing--30);
	}

	/* Auf dem Handy gibt es kein stehendes Bild — dann auch nicht abblenden. */
	.visavis-szene-an .visavis-story__step {
		opacity: 1;
	}

	/*
	 * Aufmacher auf schmalen, niedrigen Handys kompakter.
	 *
	 * Auf 375 × 812 bricht der Kernsatz auf drei Zeilen und das Logo ist über
	 * die Breite (55vw) auf rund 294 px Höhe getrieben. Zusammen mit Unterzeile
	 * und Buttons lief der Inhalt über die Falz — die Buttons lagen unsichtbar
	 * darunter. Hier zählt die Höhe, nicht die Breite: Das Logo wird über die
	 * Höhe gedeckelt (22vh), der Innenabstand des Inhalts schrumpft.
	 */
	.visavis-vorhang-an .visavis-buehne__logo img {
		max-height: 22vh;
	}

	.visavis-vorhang-an .visavis-buehne__inhalt {
		padding-block: var(--wp--preset--spacing--20);
	}

	/*
	 * Die Abstände zwischen Logo, Kernsatz, Unterzeile und Buttons zusammen-
	 * ziehen. Der Kernsatz ist auf 375 px dreizeilig (221 px hoch) — mit den
	 * großzügigen Desktop-Abständen (zusammen 124 px) lagen die Buttons sonst
	 * knapp unter der Falz. gap ersetzt die Block-Ränder; margin-block: 0 nimmt
	 * die vom Editor gesetzten Ränder der einzelnen Blöcke heraus, sonst
	 * addierten sie sich zum gap.
	 */
	.visavis-vorhang-an .visavis-buehne__inhalt {
		gap: 0.9rem;
	}

	/*
	 * Das !important ist hier nötig, nicht bequem: Der Blockeditor setzt die
	 * Ränder zwischen den Blöcken mit höherer Spezifität (bzw. inline), sie
	 * ließen sich sonst nicht auf 0 bringen — und addierten sich zum gap, sodass
	 * die Lücken auf 64 px WUCHSEN statt zu schrumpfen. Mit dem Reset trägt
	 * allein der einheitliche gap den Abstand. Dasselbe Mittel, das das Theme
	 * schon für die Preset-Farbklassen auf der Bühne braucht.
	 */
	.visavis-vorhang-an .visavis-buehne__inhalt > * {
		margin-block: 0 !important;
	}
}

/*
 * Niedrige, aber breite Bildschirme — der typische Laptop (1366 × 768, 1536 × 864).
 * Die Handy-Abfrage oben greift über die BREITE; hier fehlte sie: Logo (34vh), Wortmarke,
 * dreizeiliger Kernsatz, Mobil-Zeile und Buttons brauchten zusammen rund 900 px — bei
 * 768 px Höhe lagen Mobil-Zeile und Buttons unter der Falz (gemessen 2026-09-03).
 * Gleiche Technik wie beim Handy (Logo über die Höhe deckeln, gap statt Block-Ränder),
 * dazu Kernsatz, Wortmarke und Mobil-Zeile eine Stufe kleiner — über vh, damit sie mit
 * der verfügbaren Höhe wachsen. 56 rem = 896 px: 1080er-Monitore bleiben unberührt.
 */
@media (height < 56rem) and (width >= 46rem) {
	.visavis-vorhang-an .visavis-buehne__logo img {
		max-height: 22vh;
	}

	.visavis-vorhang-an .visavis-buehne__logo::after {
		font-size: clamp(1.4rem, 3.4vh, 2.2rem);
		margin-top: 0.4rem;
	}

	/* !important aus demselben Grund wie oben: WPs has-titel-font-size kommt mit !important. */
	.visavis-vorhang-an .visavis-buehne__inhalt h1 {
		font-size: clamp(1.6rem, 4.6vh, 2.6rem) !important;
	}

	.visavis-vorhang-an .visavis-buehne__inhalt .has-akzent-hell-color {
		font-size: clamp(1.1rem, 2.6vh, 1.5rem) !important;
	}

	.visavis-vorhang-an .visavis-buehne__inhalt {
		padding-block: var(--wp--preset--spacing--20);
		gap: 0.9rem;
	}

	.visavis-vorhang-an .visavis-buehne__inhalt > * {
		margin-block: 0 !important;
	}

	.visavis-vorhang-an .visavis-buehne__hinweis {
		bottom: 1rem;
	}
}

/* ============================================================================
   HERO „SÄULE" — alles mittig untereinander (03.09., 6. Runde mit Philipp)
   ----------------------------------------------------------------------------
   Reihenfolge im Bild: Wortmarke „Theater vis-à-vis" (riesig, mittig, randfüllend)
   → Logo mittig darunter → „Mobiles Theater…" → Kernsatz → Buttons. Alles zentriert;
   in einer mittigen Säule wirkt linksbündiger Text wie ein Versehen.

   Flex statt Grid: Die Abfolge ist linear, und über `order` lässt sich die Wortmarke
   (das ::after der Figur, im DOM NACH dem Bild) vor das Logo ziehen. Die Figur selbst
   ist `display: contents`, damit <img> und ::after eigene Flex-Kinder sind.
   DOM-Reihenfolge bleibt Logo → h1 (Kernsatz) → p (Untertitel) → Buttons; optisch steht
   der Untertitel vor dem Kernsatz (order), Screenreader lesen die logische Folge.

   Höhenrechnung (1920 × 1080): Kopf 108 + Innenabstand 130 + Wortmarke ~210 + Logo max
   34vh (367) + Untertitel 63 + Kernsatz 34 + Buttons 60 + Abstände ~110 ≈ 1082 — darum
   ist das Logo hier über die Höhe gedeckelt und nicht über die Breite.
   ========================================================================== */
.visavis-vorhang-an .visavis-buehne__inhalt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: clamp(0.6rem, 1.4vh, 1.1rem);
	/* !important: der Block trägt padding-top inline (spacing-40). Kopf ist fixed (~108 px),
	   die Wortmarke soll direkt darunter beginnen. */
	padding-top: clamp(8rem, 13vh, 9.5rem) !important; /* 19.10.: Kopf mit Original-Logo ist höher */
	/* Der „Weiterscrollen"-Hinweis liegt absolut 2,5 rem über der Unterkante. Der Innenabstand
	   muss ihn freihalten, sonst stehen die Buttons auf ihm (gesehen 03.09. bei 1920 × 1080). */
	padding-bottom: clamp(3.2rem, 6vh, 4.5rem) !important;
}

/* WPs constrained-Layout zentriert Kinder mit margin-left/right:auto !important — hier
   trägt der Flex-Container die Zentrierung, die Ränder müssen weg (sonst zusätzliche Lücken). */
.visavis-vorhang-an .visavis-buehne__inhalt > :not(.visavis-buehne__hinweis) {
	max-width: none;
	margin-block: 0 !important;
	margin-inline: 0 !important;
}

/* Die Figur löst sich auf: Bild und Wortmarke werden eigene Flex-Kinder.
   (Ihr Reveal-Fade entfällt damit — ein Element ohne Box hat keine Deckkraft.) */
.visavis-vorhang-an .visavis-buehne__logo {
	display: contents;
}

/* Reihenfolge im Bild — DOM: img, h1, p, buttons. */
.visavis-vorhang-an .visavis-buehne__logo::after { order: -2; }   /* Wortmarke ganz oben */
.visavis-vorhang-an .visavis-buehne__logo img { order: -1; }      /* Logo darunter */
.visavis-vorhang-an .visavis-buehne__inhalt .has-akzent-hell-color { order: 1; }
.visavis-vorhang-an .visavis-buehne__inhalt h1 { order: 2; }
.visavis-vorhang-an .visavis-buehne__inhalt .wp-block-buttons { order: 3; }

/* Wortmarke: mittig, randfüllend.
   GEMESSEN (03.09., Probe im Browser): „Theater vis-à-vis" ist in Poppins 600 mit
   −0.05em Laufweite genau 8,02 × so breit wie die Schriftgröße. 11,6vw ≈ 97 % der
   nutzbaren Breite — bei 1920 UND bei 1366; 14vw lief 121 px über.
   Wer Schrift oder Laufweite ändert, muss diesen Wert neu messen.
   19.10.: Aileron statt Poppins + Silke „Überschriften nicht ganz so groß" → nicht mehr
   randfüllend; Aileron braucht weniger negative Laufweite, sonst kleben die Buchstaben. */
.visavis-vorhang-an .visavis-buehne__logo::after {
	align-self: stretch;
	margin: 0;
	text-align: center;
	font-weight: 600;
	font-size: clamp(2.4rem, 9vw, 14rem); /* 19.10. Philipp/Silke: wieder größer, aber nicht mehr randfüllend (früher 11,6vw) */
	letter-spacing: -0.02em;
	line-height: 0.95;
	white-space: nowrap;
}

/* Logo: mittig unter der Wortmarke, über die HÖHE gedeckelt (s. Rechnung oben). */
.visavis-vorhang-an .visavis-buehne__logo img {
	display: block;
	width: auto;
	height: auto;
	/* Philipp: „viel größer" (03.09.). Der Aufmacher muss trotzdem in EINEN Bildschirm.
	   Gerechnet für 1920 × 1080: Innenabstand 108 + Wortmarke 210 + Abstände 60 + Untertitel 62
	   + Kernsatz 44 + Buttons 56 + Innenabstand unten 38 = 578. Rechnerisch blieben 500 px
	   (42vh) — praktisch schob das den „Weiterscrollen"-Hinweis (absolut, 2,5rem über der
	   Unterkante) hinter die Buttons. 38vh lässt ihm Luft. Wer hier höher geht, prüfe den Hinweis. */
	max-height: clamp(9rem, 26vh, 24rem); /* 19.10.: 31→26vh, Platz für größere Wortmarke + höheren Kopf */ /* 31vh: der zweizeilige Untertitel-Balken braucht mehr Höhe (03.09.) */
	max-width: min(60vw, 760px);
	margin-block: clamp(0.1rem, 0.6vh, 0.5rem);
	filter: drop-shadow(0 0 2.5rem rgba(0, 0, 0, 0.6));
}

/* „Mobiles Theater für Kinder und Erwachsene" — die KERNBOTSCHAFT (03.09., Philipp: „unser M3").
   Kein Kasten mehr: groß, weiß, fett, mit kräftigem Schatten, damit sie auch ohne Band auf
   dem bewegten Vorhang sofort steht. Der Schatten (mehrlagig) ersetzt die Lesbarkeit, die vorher
   das Petrol-Band gab. color !important, weil eine frühere Regel akzent-hell !important setzt. */
.visavis-vorhang-an .visavis-buehne__inhalt .has-akzent-hell-color {
	font-size: clamp(1.8rem, 4vw, 4rem) !important;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-align: center;
	color: var(--wp--preset--color--akzent-kontrast) !important;
	max-width: 20ch;
	text-shadow:
		0 0.12em 0.5em rgba(0, 0, 0, 0.85),
		0 0 0.12em rgba(0, 0, 0, 0.7);
}

/* Kernsatz: ruhiger, weiß, mittig. */
.visavis-vorhang-an .visavis-buehne__inhalt h1 {
	font-size: clamp(1.1rem, 1.8vw, 1.7rem) !important;
	line-height: 1.3;
	text-align: center;
	max-width: 44ch;
}

/* Laptop-Höhen: Wortmarke etwas kleiner, Logo flacher — sonst rutschen die Buttons unter die Falz. */
@media (height < 56rem) and (width >= 46rem) {
	.visavis-vorhang-an .visavis-buehne__logo::after {
		font-size: clamp(2rem, 8.5vw, 12rem); /* 19.10.: Mittelweg alt 11,2vw / zu klein 6,5vw */
	}

	.visavis-vorhang-an .visavis-buehne__logo img {
		max-height: 21vh; /* 19.10.: 28→21vh, sonst Buttons unter der Falz */
		margin-block: 0;
	}

	.visavis-vorhang-an .visavis-buehne__inhalt {
		gap: clamp(0.5rem, 1.4vh, 1rem);
		padding-top: clamp(7rem, 13vh, 8.5rem) !important; /* 19.10.: höherer Kopf (Logo) */
	}
}

/* Handy: dieselbe Säule, nur darf die Wortmarke umbrechen. */
@media (width < 46rem) {
	.visavis-vorhang-an .visavis-buehne__logo::after {
		white-space: normal;
		font-size: clamp(1.8rem, 11vw, 3.6rem); /* 19.10.: größer, passt mit Aileron noch in eine Zeile */
	}

	.visavis-vorhang-an .visavis-buehne__logo img {
		max-height: 30vh;
		max-width: 78vw;
	}
}

/* Handy: die zwei Hero-Buttons (Termine / Gastspiel). Die Gruppe ist im Block auf
   „links" gestellt — am Desktop unsichtbar, weil sie dort genau so breit ist wie die
   Buttons und als Ganzes mittig sitzt. Auf dem Handy brechen sie um, die Gruppe wird
   bildschirmbreit, und beide klebten links, unterschiedlich lang (Philipp, 23.09.).
   Hier: mittig und gleich breit — nebeneinander, solange Platz ist, sonst untereinander. */
@media (width < 46rem) {
	.visavis-buehne__inhalt .wp-block-buttons {
		width: 100%;
		justify-content: center !important;
	}
	.visavis-buehne__inhalt .wp-block-button {
		flex: 1 1 14rem;
		max-width: 18rem;
	}
	.visavis-buehne__inhalt .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
	/* Dasselbe für die Buttons im Stück-Aufmacher — dort linksbündig wie der Text
	   darüber, aber gleich breit statt versetzt. */
	.visavis-stueck-knoepfe .wp-block-button,
	.visavis-schluss-downloads .wp-block-button {
		flex: 1 1 14rem;
		max-width: 18rem;
	}
	.visavis-stueck-knoepfe .wp-block-button__link,
	.visavis-schluss-downloads .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* Handy: der Kopf-Button „Gastspiel anfragen" bricht unter die Kopfzeile und lag seit dem
   maximalen Hero AUF der Wortmarke (gesehen 03.09., 400 px breit). Auf schmalen Schirmen
   raus — „Kontakt" steht im Menü, und der Hero hat denselben Button direkt darunter. */
@media (width < 46rem) {
	/* Spezifität 0,3,0: WPs Layout-Klasse .wp-block-buttons-is-layout-flex {display:flex}
	   wird später ausgegeben und schlug die einfache Klasse. */
	.visavis-kopf .wp-block-buttons.visavis-kopf__cta {
		display: none;
	}
}

/* --- ☰-Menü (23.09.) ---------------------------------------------------
   WordPress schaltet erst unter 600px auf das ☰-Menü um. Logo + Menü + Button
   brauchen aber gemessen ~1245px — auf Tablets und kleinen Laptops war die
   Leiste gequetscht („Kontakt" abgeschnitten, Button in zweiter Zeile).
   Deshalb bis 82rem (1312px) ☰ statt voller Leiste; bei 1366px passt sie. */
@media (600px <= width < 82rem) {
	.visavis-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.visavis-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	/* WordPress blendet das ✕ zum Schließen ab 600px aus — hier wird es gebraucht. */
	.visavis-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default) .wp-block-navigation__responsive-container-close {
		display: flex;
	}
	/* ☰ nach rechts außen, hinter den Button (sonst stünde er in der Mitte,
	   wo vorher die Menüleiste war): Logo … [Gastspiel anfragen] [☰] */
	.visavis-kopf .wp-block-navigation {
		order: 3;
	}
	.visavis-kopf .visavis-kopf__cta {
		margin-left: auto;
	}
}

/* Das aufgeklappte Menü: dunkel wie der Kopf, weiße Schrift. Vorher weißer
   Grund (WordPress-Standard) + weiße Links (unsere Kopf-Farbe) = die
   Menüpunkte waren unsichtbar. */
.visavis-kopf .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--dunkel) !important;
	color: var(--wp--preset--color--akzent-kontrast) !important;
	padding: 1.5rem clamp(1.5rem, 6vw, 4rem);
}
.visavis-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--akzent-kontrast) !important;
	font-size: 1.35rem;
	padding-block: 0.35rem;
}
.visavis-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.visavis-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--akzent-hell) !important;
}

/* Untermenü „Repertoire → Erwachsene / Kinder" (Silke, 19.10.). Am Desktop klappt es
   als Kasten auf — derselbe Fall wie oben: WordPress-Weiß + unsere weißen Kopf-Links =
   unsichtbar. Darum dunkel wie der Kopf. Im aufgeklappten Handy-Menü steht es eingerückt
   in der Liste und braucht keinen eigenen Kasten. */
.visavis-kopf .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--dunkel) !important;
	border: 1px solid var(--wp--preset--color--akzent) !important;
	padding-block: 0.4rem;
	min-width: 11rem;
}
.visavis-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--akzent-kontrast) !important;
	padding: 0.45rem 1.1rem !important;
}
.visavis-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.visavis-kopf .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--akzent-hell) !important;
}
.visavis-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background: transparent !important;
	padding: 0 !important;
	align-items: flex-end !important; /* rechtsbündig wie die übrigen Punkte */
}
.visavis-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.1rem;              /* kleiner = erkennbar als Unterpunkte von „Repertoire" */
	padding: 0.2rem 0 !important;
}

/* ============================================================================
   REPERTOIRE — Bühnen-Karussell (Coverflow mit EINEM Scheinwerfer)
   ----------------------------------------------------------------------------
   Ersetzt das alte 3x3-Raster (neun gleichzeitig beleuchtete Stücke). Neue Idee
   (17.08., mit Philipp erarbeitet): eine dunkle Bühne, ein fester Scheinwerfer in
   der Mitte, immer nur EIN Stück im Licht — die anderen warten gedimmt, aber
   erkennbar in der Reihe. Blättern schiebt das nächste ins Licht (Endlos-Schleife).

   Aufbau in Schichten:
     1. .visavis-repertoire-szene   — die dunkle Bühne (full-bleed), Grund + Dunst.
     2. .visavis-karussell          — eine Bühne je Gruppe (kleine / große Helden),
                                       gestapelt, je über die volle Breite.
     3. .visavis-karussell__reihe   — die Stücke. OHNE JS eine schlichte, lesbare
                                       Liste; MIT JS (Klasse .ist-an je Reihe,
                                       gesetzt von karussell.js) das Coverflow.
     4. .visavis-karte              — ein Stück (Bild + Titel + Satz).

   Bewegt wird nur transform/opacity/filter, und nur unter no-preference — wer
   Bewegung reduziert, bekomt dieselbe Bühne, nur ohne Gleiten.
   ============================================================================ */

/* --- Die dunkle Bühne ------------------------------------------------------- */

.visavis-repertoire-szene {
	position: relative;
	isolation: isolate;
	overflow: hidden; /* clippt seitliche Peeks/Kegelunschärfe — kein Querüberlauf */

	/*
	 * Voll bis an beide Bildschirmkanten, von Hand (nicht width:100vw — das zählt
	 * den Scrollbalken mit und erzeugt waagerechten Überlauf). Zweimal, weil
	 * WordPress die alignfull-Ränder bei verschachtelten has-global-padding-
	 * Containern wieder auf 0 setzt (siehe Falle 8) — der zweite Klassenname
	 * hebt uns per Spezifität darüber.
	 */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);

	/*
	 * EXAKT derselbe fixe Hintergrund wie der Aufmacher (.visavis-buehne):
	 * dasselbe scharfe, kurtinenlose Bild (buehne-scharf.webp), gleich
	 * fixed/cover/center top, OHNE Scrim. Beide fixed → der Boden fluchtet; gleiches
	 * Bild ohne Abdunklung → an der Nahtstelle keine sichtbare Kante. Der frühere
	 * 35%-Scrim (linear-gradient) wusch die Bühne milchig — er ist raus, das scharfe
	 * Bild steht jetzt klar.
	 */
	background-color: var(--wp--preset--color--dunkel);
	background-image:
		url("assets/bilder/buehne-standbild.webp");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}

.visavis-repertoire-szene.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * ENTFERNT (20.08.): Lichtschimmer (::before) und feiner Rausch-/Dunst-Layer
 * (::after) lagen über der Bühne und ließen den Grund milchig/verschwommen wirken.
 * Das scharfe buehne-scharf.webp trägt seine Lichtstimmung selbst — die Overlays
 * sind daher aus. (Bei Bedarf leicht wieder aktivierbar.)
 */
.visavis-repertoire-szene::before,
.visavis-repertoire-szene::after {
	display: none;
}

/*
 * Schrift auf der dunklen Bühne: durchgehend hell. Bewusst NICHT an JS gebunden —
 * ohne Skript ist die Bühne genauso dunkel. Das !important ist nötig, weil
 * WordPress Preset-Farbklassen (.has-gedaempft-color) selbst mit !important
 * ausgibt.
 */
.visavis-repertoire-szene,
.visavis-repertoire-szene h2,
.visavis-repertoire-szene h3,
.visavis-repertoire-szene h3 a,
.visavis-repertoire-szene h4,
.visavis-repertoire-szene h4 a {
	color: var(--wp--preset--color--akzent-kontrast);
}

.visavis-repertoire-szene h4 a,
.visavis-repertoire-szene h3 a {
	text-decoration: none;
}

.visavis-repertoire-szene .has-gedaempft-color {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 82%, var(--wp--preset--color--dunkel)) !important;
}

/* Fokus muss auch auf Dunkel deutlich sichtbar bleiben. */
.visavis-repertoire-szene a:focus-visible,
.visavis-karussell__pfeil:focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent-hell);
	outline-offset: 3px;
}

/* Überschriften des Repertoires — „Für KLEINE Helden" links, „Für GROßE Helden" rechts
   (Philipp, 03.09.): Die alte Überschrift „Im Repertoire" ist ersatzlos entfallen, die
   beiden Gruppen-Titel tragen jetzt die Maximalismus-Handschrift. Sie sind dafür von h3
   zu h2 geworden (`tools/helden-ueberschriften.php`) — die Gliederung bleibt sauber, weil
   sie nun die Überschriften des Abschnitts sind. Der Anker #repertoire sitzt an der Sektion,
   damit die Navigation weiter dorthin springt.

   GEMESSEN (Probe im Browser, Poppins 600, −0.03em): „Für KLEINE Helden" ist 8,29 ×,
   „Für GROßE Helden" 8,16 × so breit wie die Schriftgröße (zum Vergleich „Im Repertoire":
   6,46 × — deshalb durfte das 13vw groß sein). 11,2vw füllt damit rund 97 % der Breite bei
   1920 UND 1366, und beide Zeilen werden fast gleich lang: links und rechts ein Paar.
   Wer den Text ändert, muss neu messen.

   19.10.: Silke — Texte jetzt „Mobiles Theater für Kinder / Erwachsene" (fast doppelt so
   lang) und Überschriften „nicht ganz so groß". Darum kleiner und Umbruch erlaubt statt
   eine Zeile über die volle Breite. Feinschliff nach dem Wechsel auf Aileron. */
.visavis-helden-titel {
	max-width: none;                 /* WP-constrained-Zentrierung aufheben */
	/* Echte linke bzw. rechte Kante: Die Titel stehen IN .visavis-karussell (alignwide, max
	   90rem) — dort begannen sie auf breiten Schirmen erst bei 232 px. Dieselbe Ausbruch-
	   Technik wie bei der Sektion, aber um den Bühnen-Innenabstand zurückgesetzt. 50vw zählt
	   den Scrollbalken mit; die Sektion hat overflow:hidden, der Rest wird sauber geklippt. */
	margin: 0 calc(50% - 50vw + 2.25rem) var(--wp--preset--spacing--40);
	/* 19.10. Philipp: EINE Zeile, nicht fett, „proportional richtig" (Claude entscheidet).
	   Rangordnung: Wortmarke „Theater vis-à-vis" 9vw = Stufe 1, diese Abschnittstitel
	   ≈ 55 % davon = 5vw = Stufe 2, Stücktitel im Karussell = Stufe 3. Randfüllend
	   (gemessen 6,8vw) war zu nah an der Wortmarke — zwei gleich laute Zeilen.
	   „Mobiles Theater für Erwachsene" ≈ 14,2 × Schriftgröße breit → bei 5vw ~74 % der
	   Breite, passt damit bis hinunter zu 640 px sicher in eine Zeile. */
	font-weight: 600;
	white-space: nowrap;
	font-size: clamp(2rem, 5vw, 8rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
}

/* Beide Titel linksbündig (Philipp, 03.09.): die rechtsbündige Variante wirkte unruhig. */
#kleine-helden, #grosse-helden { text-align: left; }

@media (width < 40rem) {
	/* Auf dem Handy umbrechen statt überlaufen — und beide linksbündig, sonst franst die
	   rechte Gruppe über zwei Zeilen unruhig aus. */
	.visavis-helden-titel {
		white-space: normal;
		font-size: clamp(1.6rem, 8vw, 2.6rem); /* ~70 % der Wortmarke am Handy (11vw) */
		text-wrap: balance;               /* „Mobiles Theater / für Kinder", kein einsames Wort */
		margin-inline: 0;
	}

}

/* --- Eine Bühne je Gruppe --------------------------------------------------- */

.visavis-karussell {
	position: relative; /* Bezug für den Regler */
	margin-top: var(--wp--preset--spacing--60);

	/* Der eine warme Scheinwerferton. HIER auf Bühnen-Ebene, damit ihn sowohl die
	   Reihe (Kegel) als auch der Regler (Griff/Schiene sind Geschwister der Reihe,
	   nicht ihre Kinder) erben — sonst wäre var(--kegel) am Regler undefiniert. */
	--kegel: #4fa8c6;   /* Repertoire-Akzent: helles PETROL (früher warmes Gold) — Silkes Ent-Orange */
}

/* Die Gruppen-Titel sind seit 03.09. h2 mit der Klasse .visavis-helden-titel (Regel oben).
   Diese Regel bleibt als Rückfall für handgeschriebene h3 in Blockmustern. */
.visavis-karussell > h3 {
	text-align: left;
	font-size: clamp(1.9rem, 4vw, 3rem);
	letter-spacing: -0.01em;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* Einheitliches Bildformat (3:4) — gilt in BEIDEN Zuständen (Liste und Coverflow).
   Der stärkste Ruhe-Hebel: unterschiedlich hohe Fotos flüchten sonst treppenartig. */
.visavis-karte figure.wp-block-image,
.visavis-karte figure.wp-block-image > a {
	display: block;
	width: 100%;
	margin: 0;
}

.visavis-karte figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	border-radius: 0;
}

.visavis-karte h4 {
	margin-top: var(--wp--preset--spacing--30);
	line-height: 1.15;
}

.visavis-karte p {
	margin-top: var(--wp--preset--spacing--20);
}

/* ===========================================================================
   GRUNDZUSTAND OHNE JS — eine schlichte, lesbare Liste (Fundament / Fallback)
   =========================================================================== */

.visavis-karussell__reihe {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.visavis-karussell__reihe > .visavis-karte {
	width: min(100%, 22rem);
	text-align: center;
}

/* ===========================================================================
   MIT JS — Coverflow. karussell.js setzt .ist-an je Reihe und je Karte
   data-pos="center|vor|zurueck|weg". karussell.js setzt außerdem die Höhe der
   Reihe (--reihe-hoehe) auf die der Mittelkarte, damit nichts abgeschnitten wird.
   =========================================================================== */

.visavis-karussell__reihe.ist-an {
	--peek: clamp(8rem, 24vw, 17rem); /* seitlicher Versatz je Distanzschritt (größer für Maximalismus) */
	/* --kegel erbt von .visavis-karussell (damit ihn auch der Regler sieht) */

	/*
	 * Stellschrauben des stufenlosen Coverflows. karussell.js setzt je Karte nur
	 * --d (vorzeichenbehaftete Distanz zur Mitte, gewickelt) und --ad (Betrag); die
	 * gesamte Optik rechnet das CSS daraus. So bleibt das Tuning hier, nicht im JS.
	 *   --scale-fall  wie schnell die Karten zur Seite kleiner werden
	 *   --dim         wie stark die Nachbarn abdunkeln (Helligkeit fällt mit --ad)
	 *   --fade-ende   ab welcher Distanz eine Karte ganz verschwindet
	 *   --text-fall   wie schnell Titel/Satz neben der Mitte ausblenden
	 */
	--scale-fall: 0.28;
	--dim: 0.3;
	--fade-ende: 1.7;
	--text-fall: 1.7;

	display: block;
	position: relative;
	min-height: var(--reihe-hoehe, 30rem);
	margin-inline: auto;
	overflow: visible;
}

/*
 * Der Scheinwerferkegel — EINER, fest über der Mitte. Trapez (oben schmal aus
 * der Lampe, unten breit), warm, weich, als LICHT gerechnet (mix-blend screen
 * addiert den Ton auf das Dunkel statt es zu trüben). Statisch — er schwingt
 * nicht, er steht. Liegt hinter den Karten (z-index 1); die Mittelkarte (z 3)
 * leuchtet zusätzlich über ihre eigene Helligkeit.
 */
.visavis-karussell__reihe.ist-an::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	top: -8%;
	width: min(92vw, 34rem);
	height: 116%;
	translate: -50% 0;
	pointer-events: none;
	filter: blur(14px);
	mix-blend-mode: screen;
	clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--kegel) 60%, transparent) 0%,
		color-mix(in srgb, var(--kegel) 22%, transparent) 42%,
		transparent 86%
	);
	transition: opacity 0.35s ease;
}

/* Der Lichtfleck am Boden unter der Mittelkarte. */
.visavis-karussell__reihe.ist-an::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: -1.4rem;
	width: min(64vw, 22rem);
	height: 3.4rem;
	translate: -50% 0;
	pointer-events: none;
	filter: blur(12px);
	mix-blend-mode: screen;
	border-radius: 50%;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--kegel) 46%, transparent),
		transparent
	);
	transition: opacity 0.35s ease;
}

/*
 * Jede Karte absolut, oben ausgerichtet (transform-origin: top center → die
 * skalierten Nachbarn fluchten mit der Bildoberkante der Mitte). Grundwert =
 * „weg" (unsichtbar), die data-pos-Regeln holen center/vor/zurueck heraus.
 */
.visavis-karussell__reihe.ist-an .visavis-karte {
	position: absolute;
	top: 0;
	left: 50%;
	width: min(82vw, 25rem);
	margin: 0;
	transform-origin: top center;

	/* Grundwert = weit weg & unsichtbar; karussell.js überschreibt --d/--ad je Bild.
	   So sitzt vor dem ersten Frame nichts Sichtbares an falscher Stelle. */
	--d: 4;
	--ad: 4;

	/*
	 * Stufenlose Coverflow-Geometrie, komplett aus --d (Distanz, ±) und --ad (Betrag):
	 *   seitlicher Versatz  = --d · --peek (auf ±2 geklemmt, damit ferne Karten am
	 *                         Rand parken statt ins Nirgendwo zu wandern)
	 *   Größe               = 1 − --scale-fall · --ad (Mindestgröße 0.5)
	 *   Sichtbarkeit        = voll bis --ad = --fade-ende − 0.7, dann aus
	 * BEWUSST OHNE CSS-transition: die Bewegung liefert karussell.js Frame für Frame
	 * (Drag am Regler, Einrasten per rAF). Ein zweiter transition-Lauf würde dagegen
	 * kämpfen. z-index und pointer-events setzt das Skript inline je Karte.
	 */
	transform:
		translateX(calc(-50% + clamp(-2, var(--d), 2) * var(--peek)))
		scale(max(0.5, calc(1 - var(--scale-fall) * var(--ad))));
	opacity: clamp(0, calc((var(--fade-ende) - var(--ad)) / 0.7), calc(1 - 0.3 * min(var(--ad), 1)));
	z-index: 0;
	pointer-events: none;
	text-align: center;
}

/*
 * Licht auf dem Stück: die Mitte ist voll hell, die wartenden Nachbarn dimmen mit
 * wachsender Distanz — aber bleiben ERKENNBAR (Mindesthelligkeit --dim). Das Bild
 * kommt aus dem Dunkel, während es in die Mitte gleitet.
 */
.visavis-karussell__reihe.ist-an .visavis-karte img {
	filter: brightness(max(var(--dim), calc(1 - var(--dim) * var(--ad))));
}

/* Titel + Satz nur nahe der Mitte; blenden mit --ad aus (Nachbarn zeigen nur ihr Bild). */
.visavis-karussell__reihe.ist-an .visavis-karte :is(h4, p) {
	opacity: clamp(0, calc(1 - var(--text-fall) * var(--ad)), 1);
}

/*
 * Dezenter Lichtsaum von oben auf dem Bild (nur Mitte spürbar) — das theaterhaus-
 * hafte „sauber", nur warm. Darf keine Klicks abfangen.
 */
.visavis-karussell__reihe.ist-an .visavis-karte .wp-block-image { position: relative; }
.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte .wp-block-image::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: 0;
	mix-blend-mode: screen;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--kegel) 22%, transparent) 0%,
		transparent 45%
	);
}

/* --- Hover: dezent, mit kleinem Scheinwerfer-Moment ------------------------- */

/* Wartende Nachbarkarte „atmet auf" (Einladung, sie anzuklicken). karussell.js
   markiert die beiden direkten Nachbarn mit .ist-nachbar. Nur bei echtem Zeiger
   und ohne reduced-motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-nachbar {
		transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
	}
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-nachbar img {
		transition: filter 0.5s cubic-bezier(0.25, 0.1, 0.25, 1),
		            transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
	}
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-nachbar:hover {
		opacity: calc(var(--opacity, 1) + 0.12) !important;
	}
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-nachbar:hover img {
		filter: brightness(0.55);
		transform: translateY(-3px);
	}
}

/* Mittelkarte (von karussell.js mit .ist-mitte markiert): feine warme
   Unterstreichung am Titel … */
.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte h4 a {
	box-shadow: inset 0 -0.1em 0 0 transparent;
	transition: box-shadow 0.25s ease;
}
.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte h4 a:hover {
	box-shadow: inset 0 -0.1em 0 0 color-mix(in srgb, var(--kegel) 85%, transparent);
}

/*
 * Sichtbarer Karten-Hover wie theaterhaus: ein warmer Rahmen schnappt beim Hover
 * aufs Bild — aus scale(0.8)+durchsichtig auf scale(1)+voll. Dazu hebt sich das
 * Bild leicht. Nur auf der Mittelkarte (die verlinkt zum Stück) und nur unter
 * no-preference; der Rahmen fängt keine Klicks ab.
 */
.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte .wp-block-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: 0;
	box-shadow: inset 0 0 0 0.2rem color-mix(in srgb, var(--kegel) 85%, transparent);
	opacity: 0;
	transform: scale(0.8);
}

@media (prefers-reduced-motion: no-preference) {
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte .wp-block-image::before {
		transition: transform 0.3s ease-out, opacity 0.3s ease-out;
	}
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte .wp-block-image {
		transition: transform 0.3s ease-out, filter 0.5s ease;
	}
}

.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte:hover .wp-block-image::before {
	opacity: 1;
	transform: scale(1);
}
.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte:hover .wp-block-image {
	transform: translateY(-6px);
}

/* … und der Scheinwerfer wird EINE Spur heller, sobald man auf die Mitte zeigt.
   :has() lässt den Kegel (am Reihen-Element) auf den Hover der Karte reagieren. */
.visavis-karussell__reihe.ist-an:has(.visavis-karte.ist-mitte:hover)::before {
	opacity: 1.15;
}
.visavis-karussell__reihe.ist-an:has(.visavis-karte.ist-mitte:hover)::after {
	opacity: 1.25;
}

/* --- Der Bogen-Regler („Scheibe") — ersetzt die Pfeile ---------------------- */
/* Pfeil-Buttons — dezente Pfeile an den Rändern des Karussells, erscheinen bei
   Hover (Netflix/Apple-TV-Stil). Auf Touch-Geräten dauerhaft sichtbar. */
.visavis-karussell__pfeil {
	position: absolute;
	top: 50%;
	z-index: 120;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 4.5rem;
	padding: 0;
	border: none;
	background: color-mix(in srgb, #0a0a0a 55%, transparent);
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
	            background 0.3s ease;
	-webkit-tap-highlight-color: transparent;
}
.visavis-karussell__pfeil svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.visavis-karussell__pfeil--links  { left: 0; }
.visavis-karussell__pfeil--rechts { right: 0; }

@media (hover: hover) {
	.visavis-karussell:hover .visavis-karussell__pfeil {
		opacity: 1;
	}
	.visavis-karussell__pfeil:hover {
		background: color-mix(in srgb, #0a0a0a 75%, transparent);
		color: #fff;
	}
}
@media (hover: none) {
	.visavis-karussell__pfeil {
		opacity: 0.7;
	}
}
.visavis-karussell__pfeil:focus-visible {
	opacity: 1;
	outline: 3px solid var(--wp--preset--color--akzent-hell);
	outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
	.visavis-karussell__pfeil { transition: none; }
}

/* --- Handy ------------------------------------------------------------------ */

@media (width < 46rem) {
	.visavis-karussell__reihe.ist-an {
		--peek: clamp(5rem, 30vw, 8rem);
	}
	.visavis-karussell__reihe.ist-an .visavis-karte {
		width: min(66vw, 15rem);
	}
	/* Auf dem Handy nur Bild + Titel im Licht — der Satz spart Höhe. */
	.visavis-karussell__reihe.ist-an .visavis-karte.ist-mitte p { display: none; }
	.visavis-karussell__pfeil {
		width: 2.25rem;
		height: 3.5rem;
	}
	.visavis-karussell__pfeil svg {
		width: 1.2rem;
		height: 1.2rem;
	}
}

/* ===========================================================================
   Bewegung unerwünscht — nur Inhalt.
   Für das Karussell ist nichts weiter nötig: die Coverflow-Optik rechnet das CSS
   aus --d/--ad (kein CSS-Übergang, das Layout steht also ruhig — Mitte im Licht,
   Nachbarn gedimmt), und karussell.js lässt unter reduced-motion das Einrasten
   sofort springen statt zu gleiten. Der Kegel steht. Hier nur die Story-Diashow
   bewegungslos stellen.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.visavis-story__buehne {
		position: static;
		aspect-ratio: auto;
		overflow: visible;
	}

	.visavis-story__frame {
		position: static;
		opacity: 1;
		transform: none;
		transition: none;
		margin-bottom: var(--wp--preset--spacing--20);
	}

	.visavis-story__frame img {
		height: auto;
	}

	.visavis-story__steps {
		gap: var(--wp--preset--spacing--40);
		padding-block: var(--wp--preset--spacing--30);
	}
}

/* ===========================================================================
   Repertoire-Überschriften: Lora (selbst gehostet, woff2, DSGVO-sauber — kein
   Google-CDN). BEWUSST nur im Repertoire angewandt; der Rest der Seite behält
   seine Überschrift-Schrift (Georgia-Stack aus theme.json). Die frühere Georgia
   „stach hier zu stark raus" (Philipp, 18.08.). Lässt sich später global ziehen,
   indem man elements.heading.fontFamily in theme.json auf Lora setzt.
   =========================================================================== */
@font-face {
	font-family: "Lora";
	src: url("assets/fonts/lora-400-latin.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Lora";
	src: url("assets/fonts/lora-600-latin.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}

/* Playfair Display + Inter (selbst gehostet, DSGVO-sauber) — für den Termine-Agenda-Look
   (Stitch-Design). Nur dort verwendet, siehe plugins/visavis-termine/block/stil.css und die
   Termine-Seite. Kein Google-Fonts-CDN. */
@font-face {
	font-family: "Playfair Display";
	src: url("assets/fonts/playfair-600-latin.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Playfair Display";
	src: url("assets/fonts/playfair-700-latin.woff2") format("woff2");
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-400-latin.woff2") format("woff2");
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-600-latin.woff2") format("woff2");
	font-weight: 600; font-style: normal; font-display: swap;
}

.visavis-repertoire-szene h2,
.visavis-repertoire-szene h3,
.visavis-repertoire-szene h4 {
	font-family: var(--wp--preset--font-family--text);
}

/* ===========================================================================
   TERMINE-SEITE — Stitch-"Dark Hero" (24.08.2026)
   Nur auf der Seite mit Slug "termine" (Body-Klasse aus functions.php). Dunkles
   Kopf-Band (Navigation + Titel), helle Agenda-Karten (Block-CSS im Plugin),
   dunkles CTA-Band. Türkis-Marke + Playfair. Alle anderen Seiten unberührt.
   =========================================================================== */

/* --- Kopf/Navigation auf dunklen Seiten (Termine-/Kontakt-Seite UND
   Stück-Seiten) — EXAKT dieselbe Blur-Technik wie die Startseite (Philipp,
   11.09.: „nimm den Blur eins zu eins wie auf der Startseite" — keine eigene
   Farbfüllung, einfach durchsichtig). Kopf selbst transparent, ein ::before
   dahinter trägt eine neutral-dunkle, halbdurchsichtige Tönung + Backdrop-
   Blur und fadet per Maske nach unten weich aus — identische Werte wie
   body.home .visavis-kopf::before weiter unten, absichtlich keine Türkis-
   Füllung: Der Blur soll den ECHTEN Inhalt dahinter zeigen, nicht eine
   Kopie davon vortäuschen.
   Damit dahinter beim Scroll-Stand 0 auch tatsächlich etwas zu blurren ist
   (auf der Startseite übernimmt das die Video-Ebene, die ohnehin die ganze
   Seite unterlegt), zieht der Aufmacher/das Kopfband direkt darunter per
   negativem margin-top unter den Kopf (siehe .visavis-stueck-buehne /
   .visavis-termine-kopfband weiter unten) — der Kopf überlappt so von
   Anfang an das obere Ende der türkisen Fade, statt erst danach zu beginnen.
   Vorher stand hier eine geschlossene Fläche ohne Bleed; die griff wegen
   eines Spezifitäts-Patzers in der hellen Grundregel aber ohnehin nie
   (siehe Kommentar dort) — der Kopf war fälschlich hell. */
.visavis-dunkelkopf-seite .visavis-kopf,
.page-template-stueck .visavis-kopf,
body:has(.visavis-stueck-buehne) .visavis-kopf,
body:has(.visavis-termine-kopfband) .visavis-kopf {
	background: transparent !important;
	border-bottom: none !important;
}
.visavis-dunkelkopf-seite .visavis-kopf::before,
.page-template-stueck .visavis-kopf::before,
body:has(.visavis-stueck-buehne) .visavis-kopf::before,
body:has(.visavis-termine-kopfband) .visavis-kopf::before {
	content: "";
	position: absolute;
	inset: 0;
	bottom: -3rem;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(14, 15, 16, 0.52) 0%,
		rgba(14, 15, 16, 0.26) 55%,
		transparent 100%);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
.visavis-dunkelkopf-seite .visavis-kopf .wp-block-site-title a,
.page-template-stueck .visavis-kopf .wp-block-site-title a,
body:has(.visavis-stueck-buehne) .visavis-kopf .wp-block-site-title a,
body:has(.visavis-termine-kopfband) .visavis-kopf .wp-block-site-title a {
	color: var(--wp--preset--color--akzent-hell); /* türkiser Schriftzug */
}
.visavis-dunkelkopf-seite .visavis-kopf .wp-block-navigation,
.visavis-dunkelkopf-seite .visavis-kopf .wp-block-navigation a,
.page-template-stueck .visavis-kopf .wp-block-navigation,
.page-template-stueck .visavis-kopf .wp-block-navigation a,
body:has(.visavis-stueck-buehne) .visavis-kopf .wp-block-navigation,
body:has(.visavis-stueck-buehne) .visavis-kopf .wp-block-navigation a,
body:has(.visavis-termine-kopfband) .visavis-kopf .wp-block-navigation,
body:has(.visavis-termine-kopfband) .visavis-kopf .wp-block-navigation a {
	color: var(--wp--preset--color--akzent-kontrast); /* weiß */
}
.visavis-dunkelkopf-seite .visavis-kopf .wp-block-navigation a:hover,
.page-template-stueck .visavis-kopf .wp-block-navigation a:hover,
body:has(.visavis-stueck-buehne) .visavis-kopf .wp-block-navigation a:hover,
body:has(.visavis-termine-kopfband) .visavis-kopf .wp-block-navigation a:hover {
	color: var(--wp--preset--color--akzent-hell);
}

/* --- „Gastspiel anfragen"-Knopf im Kopf (auf allen Seiten sichtbar) --- */
.visavis-kopf__cta .wp-block-button__link {
	/* 19.10.: vorher Petrol hell + Dunkel = 3,8:1 (zu wenig). Petrol + Weiß = 5,7:1. */
	background-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0;
	padding: 0.6em 1.4em;
	font-weight: 600;
	border: none;
}
.visavis-kopf__cta .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--akzent) 80%, black); /* dunkler statt heller: Weiß bleibt lesbar */
}

/* --- Titel-Band: verschmilzt optisch mit dem dunklen Kopf --- */
.visavis-dunkelkopf-seite main {
	margin-top: 0 !important;
}
.visavis-dunkelkopf-seite .wp-block-post-title {
	display: none; /* Titel steht im dunklen Band, nicht doppelt */
}
/* Randlos über die volle Breite (wie .visavis-repertoire-szene) und ohne Lücke
   nach oben, damit das Band optisch mit dem dunklen Kopf verschmilzt. */
.visavis-dunkelkopf-seite main,
.visavis-dunkelkopf-seite main > .wp-block-post-content {
	margin-top: 0 !important;
}
.visavis-termine-kopfband {
	background: var(--wp--preset--color--dunkel);
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0 !important;
	/* Zieht 9rem unter den Kopf (dieselbe Kopf-Höhen-Näherung wie
	   scroll-padding-top oben) — der transparente Blur-Kopf hat dadurch von
	   Anfang an echten Inhalt zum Durchscheinen, statt vor einer weißen
	   Fläche zu schweben. Der zusätzliche padding-top gleicht das aus, damit
	   Titel/Intro optisch an derselben Stelle stehen bleiben. */
	margin-top: -9rem !important;
	padding-top: calc(9rem + clamp(2.5rem, 5vw, 4rem));
	padding-bottom: clamp(3rem, 7vw, 5rem);
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-bottom: var(--wp--preset--spacing--60) !important;
	max-width: none !important;
}
/* Titel/Intro im Band auf die Inhaltsbreite einrücken (wie die Karten darunter). */
.visavis-termine-kopfband > * {
	max-width: var(--wp--style--global--wide-size, 60rem);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}
.visavis-termine-kopfband__titel {
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	color: var(--wp--preset--color--akzent-kontrast);
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1.1;
	margin: 0;
}
.visavis-termine-kopfband__intro {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 85%, transparent);
	max-width: 42rem;
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.6;
}

/* --- CTA-Band „Ich komme zu Ihnen" --- */
.visavis-termine-cta {
	background: var(--wp--preset--color--dunkel);
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
	gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--60);
}
.visavis-termine-cta__titel {
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--akzent-kontrast);
	margin: 0;
}
.visavis-termine-cta__text {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 80%, transparent);
	margin: 0.35em 0 0;
}
.visavis-termine-cta__knopf .wp-block-button__link {
	/* 19.10.: vorher Petrol hell + Dunkel = 3,8:1 (zu wenig). Petrol + Weiß = 5,7:1. */
	background-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0;
	padding: 0.8em 1.8em;
	font-weight: 600;
	border: none;
}
.visavis-termine-cta__knopf .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--akzent) 80%, black); /* dunkler statt heller: Weiß bleibt lesbar */
}

/* --- Startseite: „Alle Termine ansehen"-Knopf unter den 3 Terminen --- */
.visavis-termine-mehr {
	margin-top: var(--wp--preset--spacing--40);
}
.visavis-termine-mehr .wp-block-button__link {
	/* 19.10.: vorher Petrol hell + Dunkel = 3,8:1 (zu wenig). Petrol + Weiß = 5,7:1. */
	background-color: var(--wp--preset--color--akzent);
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0;
	padding: 0.8em 2em;
	font-weight: 600;
	border: none;
}
.visavis-termine-mehr .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--akzent) 80%, black); /* dunkler statt heller: Weiß bleibt lesbar */
}

/* --- „Velvet Fade": alle dunklen Bänder mit SICHTBAREM Verlauf dunkel→hell.
   Früher lagen die zwei Verlaufsstopps (#1e3d3a → #12312f) fast auf derselben
   Farbe — die Fläche wirkte flach. Jetzt: diagonaler Verlauf von Fast-Schwarz
   (oben-links) über --dunkel zu hellerem Teal (unten-rechts), plus ein weicher
   türkiser Scheinwerfer-Schimmer unten-rechts (die „zweite Farbe", wie in der
   Stitch-Referenz: radial #11cfbc bei geringer Deckkraft). Rundungen/Padding
   der Bänder bleiben unverändert. --- */
.visavis-termine-kopfband,
.visavis-termine-cta,
.visavis-termine-band {
	background:
		radial-gradient(130% 110% at 82% 118%,
			color-mix(in srgb, var(--wp--preset--color--akzent-hell) 20%, var(--visavis-dunkel-hell)) 0%,
			transparent 60%),
		linear-gradient(145deg,
			var(--visavis-dunkel-tief) 0%,
			var(--wp--preset--color--dunkel) 58%,
			var(--visavis-dunkel-hell) 100%) !important;
}

/* --- Startseite: dunkles Band um Überschrift + Intro des Termine-Abschnitts
   (spiegelt das Kopf-Band der /termine-Seite). --- */
.visavis-termine-band {
	color: var(--wp--preset--color--akzent-kontrast);
	border-radius: 0;
	padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
	margin-bottom: var(--wp--preset--spacing--50);
	text-align: center;
}
.visavis-termine-band__titel {
	font-family: var(--wp--preset--font-family--text);
	color: var(--wp--preset--color--akzent-kontrast) !important;
	margin: 0;
}
.visavis-termine-band__intro {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 82%, transparent);
	margin: 0.5em 0 0;
}

/* --- Große, kombinierte CTA-Box (Startseite): „Alle Termine" + Telefon +
   „Ich komme zu Ihnen" in EINER größeren dunklen Box. --- */
.visavis-termine-cta--gross {
	padding: clamp(2.5rem, 6.25vw, 4.5rem) clamp(2.25rem, 6.25vw, 4.5rem);
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--50);
}
.visavis-termine-cta--gross .visavis-termine-cta__titel {
	font-size: clamp(2rem, 4vw, 2.75rem);
}
.visavis-termine-cta--gross .visavis-termine-cta__text {
	font-size: var(--wp--preset--font-size--gross);
}

/* --- Startseite: die 3 Termine-Karten liegen jetzt IN einer dunklen Box
   (visavis-termine-band--karten); Karten links, „Alle Termine ansehen"
   zentriert darunter. Abstand zur CTA-Box wie zuvor (nur CTA-margin-top). --- */
.visavis-termine-band--karten {
	margin-bottom: 0;
	padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem);
}
.visavis-termine-band--karten .visavis-termine {
	text-align: left;
	margin-top: var(--wp--preset--spacing--40);
}
.visavis-termine-band--karten .visavis-termine-mehr {
	margin-top: var(--wp--preset--spacing--40);
}
.visavis-termine-cta__tel {
	margin: 0.9em 0 0;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 72%, transparent);
	/* Schriftgröße kommt jetzt als Block-Attribut aus dem Editor (fontSize),
	   damit sie dort änderbar ist — nur die Startseite nutzt diese Klasse. */
}
.visavis-termine-cta__tel a {
	color: var(--wp--preset--color--akzent-hell);
}
.visavis-termine-cta__knoepfe {
	gap: 0.75rem;
}
/* Sekundär-Knopf (Umriss) auf dunklem Grund */
.visavis-termine-cta__knopf-sek .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--akzent-kontrast);
	border: 1px solid var(--wp--preset--color--akzent-hell);
	border-radius: 0;
	padding: 0.7em 1.8em;
	font-weight: 600;
}
.visavis-termine-cta__knopf-sek .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 15%, transparent);
}

/* =======================================================================
   STÜCK-SEITEN (templates/stueck.html) — 08.09.
   Aufbau: dunkler Aufmacher mit dem Plakat links und Titel/Kurztext rechts,
   darunter der helle Lesebereich, zum Schluss ein dunkles Anfrage-Band.

   Zentrale Entscheidung: DAS PLAKAT WIRD NIE BESCHNITTEN. Die Stück-Plakate
   tragen ihren eigenen Titel im Bild und haben Seitenverhältnisse von 0,72
   (Rilke, hoch) bis 1,33 (Bläserquintett, quer). Ein Vollbild-Band mit fester
   Höhe schnitt bei Hochformaten Kopf und Fuß ab und ließ ausgerechnet den
   eingebrannten Schriftzug mit der Seitenüberschrift kollidieren. Deshalb:
   eigene Spalte, natürliche Höhe, Text daneben statt darüber.
   ======================================================================= */

/* --- Aufmacher: dunkles Band mit Fade + Plakat links ---------------- */
/* Der Fade-Hintergrund ist derselbe, den das Termine-Band auf der Startseite
   und /termine/ tragen — dadurch spielt die Stück-Seite optisch in derselben
   Familie: kein flaches Dunkel, sondern ein weicher Verlauf mit Petrol-Kern
   und Türkis-Schimmer unten rechts. WordPress' eigene Hintergrund-Klasse
   `has-dunkel-background-color` würde sonst gewinnen — daher !important. */
.visavis-stueck-buehne {
	/* Zieht 9rem unter den Kopf (dieselbe Kopf-Höhen-Näherung wie
	   scroll-padding-top oben) — der transparente Blur-Kopf hat dadurch von
	   Anfang an echten Inhalt zum Durchscheinen, statt vor einer weißen
	   Fläche zu schweben. Der zusätzliche padding-top gleicht das aus, damit
	   Plakat/Titel optisch an derselben Stelle stehen bleiben. */
	margin-top: -9rem !important;
	margin-bottom: 0 !important;
	padding-top: calc(9rem + clamp(2.75rem, 6vw, 5rem));
	padding-bottom: clamp(2.75rem, 6vw, 5rem);
	background:
		radial-gradient(130% 110% at 82% 118%,
			color-mix(in srgb, var(--wp--preset--color--akzent-hell) 20%, var(--visavis-dunkel-hell)) 0%,
			transparent 60%),
		linear-gradient(145deg,
			var(--visavis-dunkel-tief) 0%,
			var(--wp--preset--color--dunkel) 58%,
			var(--visavis-dunkel-hell) 100%) !important;
	color: var(--wp--preset--color--akzent-kontrast);
}

/* Breadcrumb ganz oben: Repertoire / Rilke — auf dieselbe Breite wie der
   Aufmacher-Grid gezogen, sonst klebt er ganz links am Bildschirmrand
   während der Aufmacher darunter zentriert sitzt. */
.visavis-stueck-breadcrumb {
	max-width: 78rem !important;
	margin: 0 auto var(--wp--preset--spacing--30) !important;
	width: 100%;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 85%, transparent);
}
.visavis-stueck-breadcrumb a {
	color: inherit;
	text-decoration: none;
}
.visavis-stueck-breadcrumb a:hover {
	color: var(--wp--preset--color--akzent-hell);
}
/* Der Schrägstrich kommt aus dem CSS statt als eigenes <span> im Text — so
   kann Silke ihn beim Tippen nicht versehentlich löschen (23.09.). */
.visavis-stueck-breadcrumb a::after {
	content: "/";
	display: inline-block;
	margin-inline: 0.6rem 0.35rem;
	opacity: 0.5;
}

/* Die drei vollbreiten Abschnitte (Aufmacher, Lesebereich, Schluss) sollen
   direkt aneinanderstoßen. Ohne diese Regel setzt der globale Block-Gap
   (theme.json) einen Abstand zwischen sie — durch den Abstand scheint der
   helle Seitengrund als Streifen zwischen dunkel und hell durch. !important,
   weil WordPress den Abstand selbst mit Klassen-Kombination setzt. */
.visavis-lesebereich,
.visavis-stueck-schluss {
	margin-block: 0 !important;
}

/* Zwei Spalten ab 48rem: Plakat | Worte. Der Aufmacher braucht mehr Breite
   als die Standard-Content-Size (50rem in theme.json), damit die rechte
   Spalte Platz für Titel + Lede + Meta hat — sonst bricht der Titel in
   4 Zeilen und Buttons/Meta stapeln. Deshalb explizit auf wideSize (90rem)
   ziehen, mit auto-margin, damit er unter dem Constrained-Layout doch die
   volle Breite bekommt. */
.visavis-stueck-aufmacher {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	max-width: 78rem !important;
	width: 100%;
	margin-inline: auto !important;
}
@media (width >= 48rem) {
	.visavis-stueck-aufmacher {
		/* Plakat kräftig größer — ein echtes Foyer-Plakat wirkt nur, wenn es
		   dem Titel als Bild-Anker gleichwertig gegenübersteht. Von 340px auf
		   440px, damit die Bild-Text-Balance stimmt. */
		grid-template-columns: minmax(300px, 440px) 1fr;
	}
}

/* Plakat/Bühnenfoto: gerahmte Box mit dünnem Petrol-Rahmen + weicher
   Schlagschatten, wie ein echter Aushang im Foyer. Der Rahmen greift den
   Türkis-Schimmer des Fade-Hintergrunds auf. */
.visavis-stueck-plakat {
	margin: 0;
	padding: 0.65rem;
	background: color-mix(in srgb, var(--visavis-dunkel-tief) 60%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 40%, transparent);
	border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
	box-shadow:
		0 1.5rem 3rem -0.5rem rgba(0, 0, 0, 0.55),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--akzent-hell) 15%, transparent) inset;
}
.visavis-stueck-plakat img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
}

.visavis-stueck-worte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

/* Kategorie-Label mit türkisem Punkt: „• Theater vis-à-vis Eigenproduktion" */
.visavis-stueck-label {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 !important;
	padding: 0.35rem 0.85rem;
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 15%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 30%, transparent);
	border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent-hell);
}
/* Der Punkt ist ein ::before statt eines leeren <span> im Text — beim Tippen
   nicht versehentlich löschbar (23.09.). */
.visavis-stueck-label::before {
	content: "";
	flex-shrink: 0;
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--akzent-hell);
	box-shadow: 0 0 0.5rem color-mix(in srgb, var(--wp--preset--color--akzent-hell) 70%, transparent);
}

.visavis-stueck-titel {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	max-width: 16ch;
}
.visavis-stueck-lede,
.visavis-stueck-lede p {
	margin: 0;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	max-width: 46ch;
	font-style: italic;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 88%, transparent);
}
.visavis-stueck-kurztext {
	margin: 0 !important;
	max-width: 42ch;
	line-height: 1.55;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 78%, transparent);
}

/* „Mobil buchbar für" — Kästchen-Reihe direkt über den Buttons (23.09.).
   Wer das Stück buchen kann, soll ein Veranstalter ohne Scrollen sehen und
   gleich darunter „Gastspiel anfragen" finden. Eine normale Liste: Silke
   ergänzt/löscht Einträge im Editor (Enter = neues Kästchen). */
.visavis-stueck-buchbar {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.visavis-stueck-buchbar-label {
	margin: 0 !important;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent-hell);
}
.visavis-stueck-buchbar-liste {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.visavis-stueck-buchbar-liste li {
	margin: 0;
	padding: 0.4rem 0.85rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 45%, transparent);
	border-radius: 0;
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 12%, transparent);
	color: var(--wp--preset--color--akzent-kontrast);
	font-size: 0.92rem;
	line-height: 1.3;
}

/* Platzhalter im Aufmacher-Bereich: nur so breit wie der Text selbst, damit
   die rot umrandeten Kästen nicht als riesige Balken die Komposition stören.
   Die !important hier überschreiben die max-width-Beschränkungen der
   umgebenden Textblöcke (z. B. .visavis-stueck-kurztext, max-width 42ch),
   damit der Platzhalter seine echte Text-Breite bekommt. Sobald Silke echten
   Text einträgt, verliert der Absatz die Platzhalter-Klasse und verhält sich
   wieder wie ein normaler Fließtext-Block. */
.visavis-stueck-buehne .visavis-platzhalter {
	display: inline-block !important;
	width: fit-content !important;
	max-width: 100% !important;
	/* Warnfarbe durchsetzen: sonst gewinnt die helle Textfarbe des Absatzes
	   (z. B. .visavis-stueck-kurztext) — weiß auf hellem Platzhalter-Grund,
	   der Kasten wirkte leer. */
	color: #5c1310 !important;
}
/* Buttons nebeneinander mit Wrap für schmale Viewports. WordPress' eigenes
   Blocklayout „flex" respektiert normalerweise die Richtung, das Wrap-Verhalten
   auf column ist aber gelegentlich Folge einer engen Content-Breite —
   deshalb hier explizit row + wrap. */
.visavis-stueck-knoepfe {
	margin-top: var(--wp--preset--spacing--20);
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
}
/* Der Termine-Button (akzent-hell + dunkel) verlor durch spezifischere
   dunkle Regeln von .visavis-stueck-buehne die dunkle Textfarbe — hier
   explizit zurücksetzen, damit „Termine ansehen" wieder dunkel auf Türkis steht. */
.visavis-stueck-knoepfe .has-akzent-hell-background-color.has-dunkel-color {
	color: var(--wp--preset--color--dunkel) !important;
}

/* Meta-Zeile am Fuß des Aufmachers: Spieldauer · Musik · Besetzung.
   Nebeneinander in einer Zeile, wrap nur bei sehr schmalen Viewports. */
.visavis-stueck-meta {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 0.5rem 1.75rem !important;
	align-items: center;
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 20%, transparent);
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 80%, transparent);
	font-size: 0.9rem;
}
.visavis-stueck-meta-eintrag {
	margin: 0 !important;
	white-space: nowrap;
}
/* Handy: ein langer Eintrag („Die Musikerinnen des Vaihinger Bläserquintetts
   und Silke Karl", Kleine Hexe) ist breiter als 390 px — mit nowrap schob er
   die ganze Seite breiter und das ☰-Menü aus dem Bild. */
@media (width < 40rem) {
	.visavis-stueck-meta-eintrag {
		white-space: normal;
	}
}

/* --- Lesebereich: zwei Spalten (Hauptteil + Sidebar) ---------------- */
.visavis-lesebereich {
	position: relative;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	background-color: var(--wp--preset--color--hintergrund);
}

/* --- KI-Aquarelle als dezentes Wasserzeichen im Lesebereich --------------- */
/* Seit 23.09.: Das Bild ist ein echtes Block-Hintergrundbild des Abschnitts
   „Lesebereich" (im Editor sichtbar, von Silke austauschbar unter
   „Hintergrundbild"). Der Wasserzeichen-Effekt entsteht durch einen Schleier
   in Hintergrundfarbe DARÜBER: 90 % Deckung = Bild mit 10 % sichtbar, nach
   unten auf 100 % = Bild blendet aus. Rechnerisch identisch mit der früheren
   Lösung (Bild mit opacity .1 + Maske ab 60 %) und gilt für jedes Bild, das
   Silke wählt. [style*=…] zusätzlich, weil der Editor das Bild nur als
   Inline-Stil setzt. */
.visavis-lesebereich:is(.has-background, [style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--preset--color--hintergrund) 90%, transparent) 60%,
		var(--wp--preset--color--hintergrund) 100%);
}
/* Stil „Hintergrundbild deutlicher" (Editor → Lesebereich → Stile): dünnerer
   Schleier, ~25 % Bild statt 10 %. Für dunkle Bilder, die unter dem Standard-
   Schleier nur grau wirken (Schneewittchen, 25.09.). */
.visavis-lesebereich.is-style-bild-deutlich:is(.has-background, [style*="background-image"])::before {
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--preset--color--hintergrund) 75%, transparent) 60%,
		var(--wp--preset--color--hintergrund) 100%);
}
.visavis-lesebereich-haupt {
	position: relative;
	z-index: 1;
}

/* --- Lesebereich einspaltig: Fließtext zentriert, breite Karten-Bereiche - */
/* Der Container ist breit genug für die drei Info-Karten nebeneinander; der
   Fließtext selbst bleibt aber schmal (via max-width auf einzelnen Blöcken),
   damit die Zeilen gut lesbar bleiben. */
.visavis-lesebereich-haupt {
	max-width: 60rem;
	margin-inline: auto;
}

.visavis-lesebereich-breadcrumb {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}

.visavis-lesebereich-haupt .visavis-lesetext > * {
	max-width: var(--visavis-lesebreite, 42rem);
	margin-left: 0 !important;
	margin-right: auto !important;
}
.visavis-lesebereich-haupt .visavis-lesetext > p {
	line-height: 1.7;
}
.visavis-lesebereich-haupt .visavis-lesetext > h2 {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--20);
	padding-top: 0.75rem;
	border-top: 2px solid var(--wp--preset--color--akzent);
	font-size: clamp(1.1rem, 1.6vw, 1.35rem);
	letter-spacing: 0.02em;
}
/* Programmheft-Impressum-Listen (Es spielen, Produktion): Card-Optik mit
   Petrol-Label über der Angabe — wirkt wie ein Programmheft. */
.visavis-lesebereich-haupt .visavis-lesetext > ul {
	list-style: none;
	margin-block: 0;
	background: var(--wp--preset--color--flaeche);
	border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
	padding: 0.5rem clamp(1.1rem, 2.5vw, 1.75rem);
}
.visavis-lesebereich-haupt .visavis-lesetext > ul > li {
	padding: 0.7rem 0;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gedaempft) 20%, transparent);
	line-height: 1.5;
}
.visavis-lesebereich-haupt .visavis-lesetext > ul > li:last-child {
	border-bottom: 0;
}
.visavis-lesebereich-haupt .visavis-lesetext > ul > li strong {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
	margin-bottom: 0.15rem;
}

/* Zitate im Fließtext (Rilke-Zitat, Schneewittchens Schlusssatz …): wie ein
   hervorgehobener Satz im Programmheft — kursiv, etwas größer, Petrol-Linie
   links. Vorher ohne eigene Gestaltung, sahen aus wie ein normaler Absatz. */
.visavis-lesebereich-haupt .visavis-lesetext > .wp-block-quote {
	margin-block: var(--wp--preset--spacing--40) !important;
	padding: 0.2rem 0 0.2rem 1.25rem;
	border-left: 3px solid var(--wp--preset--color--akzent);
	font-size: 1.15rem;
	font-style: italic;
	line-height: 1.6;
}
.visavis-lesebereich-haupt .visavis-lesetext > .wp-block-quote p {
	margin: 0;
}
.visavis-lesebereich-haupt .visavis-lesetext > .wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	font-style: normal;
	color: var(--wp--preset--color--gedaempft);
}

/* --- Kapitel-Kopf im Lesebereich („Zum Stück · Poesie auf Augenhöhe") ------ */
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-kapitel-label {
	max-width: none !important;
	margin: 0 auto var(--wp--preset--spacing--20) !important;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
	position: relative;
}
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-kapitel-label::before,
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-kapitel-label::after {
	content: "";
	display: inline-block;
	width: clamp(2rem, 6vw, 4rem);
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--akzent) 45%, transparent);
	vertical-align: middle;
	margin-inline: 0.75rem;
}
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-kapitel-titel {
	max-width: none !important;
	margin: 0 auto var(--wp--preset--spacing--40) !important;
	padding-top: 0 !important;
	border-top: 0 !important;
	text-align: center;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
	line-height: 1.15;
	letter-spacing: -0.01em;
	font-weight: 700;
}

/* Drop-Cap für den ersten Absatz nach dem Kapitel-Titel: ein großer Initial-
   Buchstabe in Petrol, wie im klassischen Programmheft. */
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-drop-cap::first-letter {
	float: left;
	font-size: 3.5em;
	line-height: 0.85;
	padding-right: 0.15em;
	margin-top: 0.1em;
	font-weight: 600;
	color: var(--wp--preset--color--akzent);
}

/* Ornament-Trenner: Petrol-Raute mittig, links und rechts dünne Linien. */
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-ornament,
.visavis-ornament {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	max-width: 16rem !important;
	margin: var(--wp--preset--spacing--40) auto !important;
	color: var(--wp--preset--color--akzent);
	font-size: 0.6rem;
	line-height: 1;
}
.visavis-ornament span {
	flex: 1;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--akzent) 40%, transparent);
}

/* --- Drei Info-Karten nebeneinander (Eckdaten / Es spielen / Produktion) --- */
.visavis-lesebereich-haupt .visavis-lesetext > .visavis-info-karten {
	max-width: none !important;
	width: 100%;
	margin: var(--wp--preset--spacing--40) 0 !important;
	gap: var(--wp--preset--spacing--30);
}

.visavis-info-karte {
	background: var(--wp--preset--color--flaeche);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent) 20%, transparent);
	border-radius: 0;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}
.visavis-info-karte-titel {
	margin: 0 0 var(--wp--preset--spacing--20) !important;
	padding-bottom: 0.6rem !important;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent) 25%, transparent);
	border-top: 0 !important;
	padding-top: 0 !important;
	font-size: 0.8rem !important;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
}
.visavis-info-karte-liste {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}
.visavis-info-karte-liste li {
	padding: 0.6rem 0 !important;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gedaempft) 15%, transparent) !important;
	line-height: 1.4;
	font-size: 0.95rem;
}
.visavis-info-karte-liste li:last-child {
	border-bottom: 0 !important;
}
.visavis-info-karte-liste li strong {
	display: block !important;
	font-size: 0.7rem !important;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gedaempft) !important;
	margin-bottom: 0.25rem !important;
}
.visavis-info-karte-fuss {
	margin-top: auto !important;
	padding-top: 0.75rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--gedaempft) 15%, transparent);
	font-size: 0.8rem;
	color: var(--wp--preset--color--gedaempft);
	font-style: italic;
}

/* Besetzungs-Zeile in der „Es spielen"-Karte: Name (fett) + Rolle (kursiv). */
.visavis-besetzung-zeile {
	padding: 0.7rem 0 !important;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gedaempft) 15%, transparent);
	gap: 0.1rem !important;
}
.visavis-besetzung-zeile:last-child {
	border-bottom: 0;
}
.visavis-besetzung-name {
	margin: 0 !important;
	font-weight: 600;
	font-size: 1rem;
}
.visavis-besetzung-rolle {
	margin: 0 !important;
	font-size: 0.85rem;
	color: var(--wp--preset--color--gedaempft);
	font-style: italic;
}

/* --- Soziale Medien im Footer: Icon + Text nebeneinander ------------ */
.visavis-sozial {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--klein, 0.85rem);
}
.visavis-sozial a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: inherit;
	text-decoration: none;
	padding: 0.25rem 0;
	transition: color 0.2s;
}
.visavis-sozial a:hover,
.visavis-sozial a:focus-visible {
	color: var(--wp--preset--color--akzent-hell);
}
.visavis-sozial svg {
	display: block;
	flex-shrink: 0;
	color: var(--wp--preset--color--akzent-hell);
}

/* --- Förder- und Kooperations-Logos am Fuß des Footers -------------- */
/* Kleine helle Zeile mit Petrol-Rand oben — trennt die Logos optisch von den
   Kontakt-Spalten. Zwei Gruppen („Gefördert durch", „Kooperationen"), jede
   mit Überschrift vor ihren Logos; nebeneinander, bei wenig Platz untereinander. */
.visavis-partner-band {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 25%, transparent);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 3.5rem;
}
.visavis-partner-gruppe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}
.visavis-partner-label {
	margin: 0 !important;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 90%, transparent);
}
.visavis-partner-liste {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}
.visavis-partner-liste li {
	margin: 0;
	padding: 0;
}
.visavis-partner-liste img {
	display: block;
	max-height: 3.5rem;
	width: auto;
	background: #fff;
	padding: 0.35rem 0.6rem;
	border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
}

/* --- Abschluss-Band: Buchen-CTA + Technische Voraussetzungen ------- */
.visavis-stueck-schluss {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	text-align: left;
	background:
		radial-gradient(130% 110% at 82% 118%,
			color-mix(in srgb, var(--wp--preset--color--akzent-hell) 20%, var(--visavis-dunkel-hell)) 0%,
			transparent 60%) fixed,
		linear-gradient(145deg,
			var(--visavis-dunkel-tief) 0%,
			var(--wp--preset--color--dunkel) 58%,
			var(--visavis-dunkel-hell) 100%) fixed !important;
}
.page-template-stueck footer.wp-block-template-part,
body:has(.visavis-stueck-buehne) footer.wp-block-template-part {
	margin-top: 0 !important;
}
.page-template-stueck footer.wp-block-template-part > .wp-block-group,
body:has(.visavis-stueck-buehne) footer.wp-block-template-part > .wp-block-group {
	margin-top: 0 !important;
	border-radius: 0 !important;
	background:
		radial-gradient(130% 110% at 82% 118%,
			color-mix(in srgb, var(--wp--preset--color--akzent-hell) 20%, var(--visavis-dunkel-hell)) 0%,
			transparent 60%) fixed,
		linear-gradient(145deg,
			var(--visavis-dunkel-tief) 0%,
			var(--wp--preset--color--dunkel) 58%,
			var(--visavis-dunkel-hell) 100%) fixed !important;
}
.visavis-schluss-grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}
@media (width >= 48rem) {
	.visavis-schluss-grid {
		grid-template-columns: 1fr auto;
	}
}
.visavis-schluss-label {
	margin: 0 0 0.75rem !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 90%, transparent);
}
.visavis-stueck-schluss-titel {
	margin: 0 0 var(--wp--preset--spacing--20) !important;
	font-size: clamp(1.6rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	max-width: 24ch;
}
.visavis-stueck-schluss-text {
	margin: 0 !important;
	max-width: 52ch;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 82%, transparent);
	line-height: 1.6;
}
.visavis-schluss-technik {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 25%, transparent);
}
.visavis-schluss-technik-label {
	margin: 0 0 0.75rem !important;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 90%, transparent);
}
.visavis-schluss-technik-liste {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 82%, transparent);
}
/* Download-Knöpfe unter den technischen Voraussetzungen (Pressefotos,
   Datenblatt) + der rote Hinweis, solange sie noch nicht verlinkt sind. */
.visavis-schluss-downloads {
	margin-top: var(--wp--preset--spacing--30) !important;
	gap: 0.75rem !important;
}
.visavis-schluss-hinweis {
	margin-top: 0.75rem !important;
	font-size: 0.85rem;
}
/* Presse-Knöpfe ohne Link („Coming soon", 12.10.): ausgegraut und nicht
   anklickbar. Sobald ein Link eingetragen ist, gilt wieder der normale Stil. */
.visavis-schluss-downloads .wp-block-button__link:not([href]),
.visavis-downloads__knoepfe .wp-block-button__link:not([href]) {
	opacity: 0.5;
}
/* Nicht-klickbar nur auf der Website — im Editor (body.editor-styles-wrapper)
   muss Silke den Knopf anklicken können, um einen Link einzutragen. */
body:not(.editor-styles-wrapper) .visavis-schluss-downloads .wp-block-button__link:not([href]),
body:not(.editor-styles-wrapper) .visavis-downloads__knoepfe .wp-block-button__link:not([href]) {
	cursor: default;
	pointer-events: none;
}
.visavis-stueck-schluss .visavis-schluss-hinweis.visavis-platzhalter {
	display: inline-block;
	width: fit-content;
	max-width: 100%;
}
.visavis-schluss-technik-liste li::before {
	content: "✓";
	color: var(--wp--preset--color--akzent-hell);
	margin-right: 0.5rem;
	font-weight: 700;
}

/* --- Nur im Editor: Seite so zeigen, wie sie im Netz aussieht (23.09.) ----
   Seiten öffnen im Editor mit ihrem Rahmen (functions.php: template-locked).
   Drei Stellen weichen dort sonst ab; alle Klassen hier existieren nur im
   Editor, die Website bleibt unberührt. */

/* 1. Die Datei-Kommentare in Templates/Parts werden im Editor zu gesperrten
      „Classic"-Blöcken (Kommentar in leeren Absätzen, samt Block-Abstand).
      Über dem Kopf stapelte sich daraus eine weiße Fläche von ~120px.
      Gesperrt (is-editing-disabled) sind sie nur als Teil von Template/Part —
      ein Classic-Block im Seiteninhalt bleibt sichtbar. */
.wp-block-freeform.is-editing-disabled {
	display: none !important;
}
.wp-block-freeform.is-editing-disabled + * {
	margin-block-start: 0 !important;
}

/* 2. Der Auszug-Block bietet unter dem Untertitel ein Feld „‚Weiterlesen'-
      Linktext hinzufügen" an. Auf der Website erscheint nie ein Weiterlesen-
      Link (der Untertitel ist kürzer als excerptLength) — im Editor wäre es nur
      eine verwirrende Aufforderung. */
.visavis-stueck-lede .wp-block-post-excerpt__more-text {
	display: none;
}

/* 3. Im Editor steckt der Text eines Listenpunkts in einem eigenen <div>
      (Blockelement) — das Häkchen der Technik-Liste stand dadurch allein in
      einer Zeile über dem Text. */
.visavis-schluss-technik-liste li > .block-editor-rich-text__editable {
	display: inline;
}

/* =======================================================================
   STARTSEITE DURCHGEHEND DUNKEL — kein weißer Hintergrund mehr.
   (Philipp, 07.09.) Alles zwischen Hero und Footer liegt jetzt auf demselben
   fixierten Bühnenbild wie Hero/Repertoire. Bewusst NUR auf body.home gescoped,
   damit Unterseiten unberührt bleiben. Vollständiger Rückbau = diesen Block
   löschen. Referenz: .visavis-repertoire-szene (Bühne), .visavis-termine-band
   (Velvet-Fade), .visavis-repertoire-szene-Schriftregeln.
   ======================================================================= */

/* 1. Durchgehende Bühne über den ganzen Inhaltsbereich.
   MIT JS (.visavis-vorhang-an) trägt das durchlaufende Vorhang-Video den Grund
   der GANZEN Seite — nicht nur Hero + Repertoire. vorhang.js beschneidet das
   fixe Video jetzt erst an der Unterkante von <main> (statt am Repertoire), und
   die Abschnitte darunter (Regel 1b) liegen mit z-index über dem Video — genau
   wie das Repertoire. Das Standbild hier ist NUR der Fallback ohne JS /
   reduzierte Bewegung; sobald das Video läuft, deckt es dieses Bild ab. */
body.home main {
	background-color: var(--wp--preset--color--dunkel);
	background-image: url("assets/bilder/buehne-standbild.webp");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}

/* 1a. Auch der BODY trägt die Bühne: Lücken zwischen main und Footer (Footer-
   margin-top, Block-Gaps) zeigten sonst den hellen Seitengrund als weißen
   Streifen. Identische fixed-Parameter wie main → deckungsgleich, keine Naht. */
body.home {
	background-color: var(--wp--preset--color--dunkel);
	background-image: url("assets/bilder/buehne-standbild.webp");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}

/* 1b. Alle Inhaltsabschnitte (außer dem Hero, der das Video enthält) sitzen VOR
   dem Video. Das Repertoire bekommt das schon vom Theme (.visavis-vorhang-an
   .visavis-repertoire-szene, z-index 1) — hier für die übrigen Abschnitte
   (Galerie, Einleitung, Termine, Zitat, Kontakt) nachgezogen. */
.visavis-vorhang-an .entry-content > *:not(.visavis-buehne) {
	position: relative;
	z-index: 1;
}

/* (2. entfiel 07.09.: Der Zitat-Kasten ist auf „Über mich" umgezogen —
   auf der Startseite gibt es keine helle flaeche-Sektion mehr.) */

/* 3. Schrift durchgehend hell (wie auf der Repertoire-Bühne). */
body.home main,
body.home main h1,
body.home main h2,
body.home main h3,
body.home main h4,
body.home main p,
body.home main li,
body.home main cite,
body.home main a:not(.wp-block-button__link):not(.wp-element-button) {
	color: var(--wp--preset--color--akzent-kontrast);
}
body.home main .has-gedaempft-color {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 82%, var(--wp--preset--color--dunkel)) !important;
}

/* (4a/4b entfielen 07.09.: Zitat-Kasten auf „Über mich" umgezogen,
   Kontaktformular lebt auf /kontakt/ — beides gibt es auf der Startseite
   nicht mehr.) */

/* 4c. Termin-Karten auf der Startseite: dunkle Karten (Stitch Cinematic Dark,
   13.09.) mit heller Schrift. Die Bühnenregel (3) macht ohnehin alles weiß,
   hier die Details gezielt steuern. */
body.home main .visavis-termin__titel {
	color: var(--wp--preset--color--akzent-kontrast);
}
body.home main .visavis-termin__uhrzeit {
	color: rgba(255, 255, 255, 0.72);
}
body.home main .visavis-termin__ort,
body.home main .visavis-termin__hinweis {
	color: rgba(255, 255, 255, 0.6);
}
body.home main .visavis-termin__tag {
	color: var(--wp--preset--color--akzent-hell);
}
body.home main .visavis-termin__eintritt {
	color: var(--wp--preset--color--akzent-kontrast);
	border-color: rgba(255, 255, 255, 0.28);
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 18%, transparent);
}
body.home main .visavis-termin__link {
	color: var(--wp--preset--color--akzent-kontrast);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
}
body.home main .visavis-termin__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 15%, transparent);
	border-color: var(--wp--preset--color--akzent-hell);
}
body.home main .visavis-termin__wochentag,
body.home main .visavis-termin__monat {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 85%, transparent);
}

/* 4d. Story-Bühne (Diashow) hatte einen hellen flaeche-Grund, der durchscheint,
   wenn gerade kein Bild aktiv ist → weißer Kasten. Auf der Bühne transparent,
   damit dort das Video/der Bühnengrund steht statt Weiß. */
body.home main .visavis-story__buehne {
	background: transparent !important;
}

/* 4e. Platzhalter-Marker behalten ihren gewollt auffälligen Rot-auf-Rosa-Look
   (Regel 3 würde ihren Text hell und damit unleserlich machen). Sie MÜSSEN vor
   dem Livegang ersetzt werden — genau dafür sind sie so grell. */
body.home main .visavis-platzhalter {
	color: #5c1310;
}

/* 5. Menü-Band als FROSTED GLASS mit WEICHER Unterkante (Philipp, 07.09.).
   Kein hart abgeschnittenes Band mehr: Tönung UND Blur laufen nach unten sanft
   aus. Technik: ein eigener Backdrop-Layer (::before) HINTER dem Kopfinhalt, per
   Maske nach unten ausgefadet — so bleibt die Schrift scharf, während das Glas
   ausfranst. Der Kopf selbst ist transparent, keine Trennlinie mehr. */
body.home .visavis-kopf {
	background: transparent !important;
	border-bottom: none !important;
}
body.home .visavis-kopf::before {
	content: "";
	position: absolute;
	inset: 0;
	bottom: -3rem;           /* Blur läuft 3rem unter den Kopf hinaus und fadet dort aus */
	z-index: -1;
	pointer-events: none;
	/* Neutral-dunkle Tönung OHNE Türkis-Stich (nicht var(--dunkel), das ist Teal).
	   Dezent gehalten, damit das Band beim Scrollen nicht ins Auge sticht. */
	background: linear-gradient(to bottom,
		rgba(14, 15, 16, 0.52) 0%,
		rgba(14, 15, 16, 0.26) 55%,
		transparent 100%);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}
body.home .visavis-kopf,
body.home .visavis-kopf .wp-block-site-title a,
body.home .visavis-kopf .wp-block-navigation a {
	color: var(--wp--preset--color--akzent-kontrast) !important;
}

/* 6. Kopf-CTA „Gastspiel anfragen" auf der Bühne NICHT als Vollton-Türkis-Klotz,
   sondern als dezenter Umriss-/Glas-Button (Philipp, 07.09.) — passt zum Glas-Band.
   Nur body.home; Unterseiten behalten den gefüllten Knopf. */
body.home .visavis-kopf__cta .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--akzent-kontrast);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-hell) 70%, transparent);
}
body.home .visavis-kopf__cta .wp-block-button__link:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 18%, transparent);
	border-color: var(--wp--preset--color--akzent-hell);
}

/* 7. Kombinierte Termine-Box (Philipp, 07.09.): Einleitung + Termine + „Kein
   passender Termin?" in EINER Velvet-Fade-Box. Trennlinie setzt den CTA-Teil
   ab; der CTA-Teil ist links/rechts verteilt und braucht keine eigene Box. */
.visavis-termine-trenner {
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 15%, transparent);
	width: 100%;
	max-width: none;
	margin: var(--wp--preset--spacing--50) 0 0;
	opacity: 1;
}
.visavis-termine-kombi--cta {
	gap: var(--wp--preset--spacing--50);
	text-align: center;
	margin-top: var(--wp--preset--spacing--50);
}
/* Auffälliger machen (Philipp, 28.09.): der Aufruf ging auf dem dunklen
   Bühnenboden unter. Titel/Text/Telefon größer + mittig, Knopf mittig.
   WICHTIG: Größe und Ausrichtung stehen als BLOCK-ATTRIBUTE im Seiteninhalt
   (Editor: „Typografie → Größe" für Titel/Text/Telefon, „Ausrichten → mittig"
   für den Knopf) — hier deshalb KEINE festen Schriftgrößen mehr, sonst würde
   CSS die Editor-Einstellung überschreiben. CSS macht nur noch, was der Editor
   nicht kann: Poppins-Gewicht, helle/fette Telefonnummer, kräftigeres Knopf-Padding. */
.visavis-termine-kombi--cta .visavis-termine-cta__titel {
	font-weight: 600;
}
.visavis-termine-kombi--cta .visavis-termine-cta__text {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 92%, transparent);
	margin-top: 0.5em;
}
.visavis-termine-kombi--cta .visavis-termine-cta__tel {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-kontrast) 90%, transparent);
	font-weight: 600;
	margin-top: 0.7em;
}
.visavis-termine-kombi--cta .visavis-termine-cta__knopf .wp-block-button__link {
	padding: 0.9em 2.2em;
}

/* 8. Kombinierte Termine-Box: Der FADE füllt als Band den ganzen Bildschirm von
   links nach rechts (volle Viewport-Breite), der INHALT bleibt aber in der
   richtigen, zentrierten Breite (alignwide) — so wie in der guten Version, ohne
   umbrechende Titel. Technik: der Fade liegt auf einem ::before, das über die
   volle Breite (100vw) und exakt die Höhe der Box läuft; die Box selbst ist
   transparent (überschreibt das !important der gemeinsamen Band-Regel). Höhe =
   nur so viel, wie der Inhalt braucht. ~76 % Deckkraft → Bühne schimmert durch. */
body.home .visavis-termine-band--kombi {
	position: relative;
	background: transparent !important;
}
body.home .visavis-termine-band--kombi::before {
	display: none;
}
body.home footer {
	margin-top: 0 !important;
}

/* --- Startseite: Termin-Karten mit demselben Petrol-Türkis-Verlauf wie die
   Stück-Seiten (.visavis-stueck-buehne) — konsistente Familie statt eigenem,
   zu dunklem Grauton (Philipp, 16.09.). Überschreibt die weißen Karten aus
   dem Plugin nur im Startseite-Kontext; die /termine-Seite bleibt unverändert. --- */
.visavis-termine-band--karten .visavis-termin {
	background:
		radial-gradient(130% 110% at 82% 118%,
			color-mix(in srgb, var(--wp--preset--color--akzent-hell) 20%, var(--visavis-dunkel-hell)) 0%,
			transparent 60%),
		linear-gradient(145deg,
			var(--visavis-dunkel-tief) 0%,
			var(--wp--preset--color--dunkel) 58%,
			var(--visavis-dunkel-hell) 100%);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4);
}
.visavis-termine-band--karten .visavis-termin:hover {
	box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.5);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Datum: dunkles Quadrat (spitze Ecken) mit türkiser Zahl */
.visavis-termine-band--karten .visavis-termin__wann {
	background: color-mix(in srgb, var(--visavis-dunkel-tief) 55%, transparent);
	border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
	padding: 0.8rem 1rem;
	border-right: none;
}
.visavis-termine-band--karten .visavis-termin__tag {
	color: var(--wp--preset--color--akzent-hell);
}
.visavis-termine-band--karten .visavis-termin__wochentag,
.visavis-termine-band--karten .visavis-termin__monat {
	color: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 85%, transparent);
}
.visavis-termine-band--karten .visavis-termin__uhrzeit {
	color: rgba(255, 255, 255, 0.72);
}

/* Titel + Ort: heller Text auf dunkel */
.visavis-termine-band--karten .visavis-termin__titel {
	color: var(--wp--preset--color--akzent-kontrast);
}
.visavis-termine-band--karten .visavis-termin__ort,
.visavis-termine-band--karten .visavis-termin__hinweis {
	color: rgba(255, 255, 255, 0.6);
}

/* Eintritt-Badge: dezent türkis auf dunkel */
.visavis-termine-band--karten .visavis-termin__eintritt {
	border-color: rgba(255, 255, 255, 0.28);
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 18%, transparent);
	color: var(--wp--preset--color--akzent-kontrast);
}

/* Link-Button: Umriss statt gefüllt */
.visavis-termine-band--karten .visavis-termin__link {
	background: transparent;
	color: var(--wp--preset--color--akzent-kontrast);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.visavis-termine-band--karten .visavis-termin__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--akzent-hell) 15%, transparent);
	border-color: var(--wp--preset--color--akzent-hell);
}

/* Mobil: Datum-Box bleibt dunkel, Trennlinie hell */
@media (max-width: 40rem) {
	.visavis-termine-band--karten .visavis-termin__wann {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 0; /* keine runden Ecken (Silke, 23.09.) */
		padding-bottom: 0.8rem;
	}
}

/* ==========================================================================
   GALERIE-SEITE (Seite „Galerie", Post-Slug „galerie", 28.09.)
   Bühnenfotos als Masonry (CSS-Spalten) — kein Beschnitt, gemischte Formate
   bleiben ganz. Petrol-Rahmen, spitze Ecken (Projektlinie), sanfter
   Hover-Schimmer im Stitch-„Spotlight"-Sinn. Sanftes Einblenden über die
   vorhandene .visavis-reveal-Mechanik (translateY+opacity). Klick öffnet das
   Foto groß über die native WordPress-Lightbox — kein Plugin, kein Fremdhost.
   ========================================================================== */
.visavis-galerie {
	column-count: 3;
	column-gap: var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--50);
}
.visavis-galerie .wp-block-image {
	margin: 0 0 var(--wp--preset--spacing--40);
	break-inside: avoid;
}
.visavis-galerie .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border: 2px solid var(--wp--preset--color--akzent);
	border-radius: 0;
	transition: transform 350ms ease, box-shadow 350ms ease, border-color 350ms ease;
}
.visavis-galerie .wp-block-image:hover img,
.visavis-galerie .wp-block-image:focus-within img {
	transform: scale(1.015);
	border-color: var(--wp--preset--color--akzent-hell);
	box-shadow:
		0 0 0 1px var(--wp--preset--color--akzent-hell),
		0 12px 30px rgba(0, 0, 0, 0.28);
}
.visavis-galerie .wp-block-image figcaption {
	margin: 0.55em 0 0;
	text-align: center;
	color: var(--wp--preset--color--akzent);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.02em;
}
/* Galerie-Einblendung kürzer und flacher als der Standard (Philipp 12.10.:
   „braucht zu lange") — bei 23 Bildern wirkt 700 ms träge. */
.visavis-js .visavis-galerie .visavis-reveal {
	transform: translateY(12px);
	transition:
		opacity 450ms ease-out,
		transform 450ms ease-out;
}
.visavis-js .visavis-galerie .visavis-reveal.ist-sichtbar {
	transform: none;
}
@media (max-width: 60rem) {
	.visavis-galerie { column-count: 2; }
}
@media (max-width: 34rem) {
	.visavis-galerie { column-count: 1; }
}

/* ==========================================================================
   REFERENZEN-SEITE (Post 41, 06.10.): Förderer-/Auftraggeber-Logos als Wand.
   Gewöhnliche Bild-Blöcke in .visavis-logowand — Silke ergänzt/entfernt Logos
   im Editor. Gleich große weiße Kacheln, Logo eingepasst (nichts beschnitten),
   spitze Ecken. Keine Lightbox (je Bild aus), kein Hover — Logos sind nicht
   anklickbar.
   ========================================================================== */
.visavis-logowand {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}
@media (min-width: 48rem) {
	.visavis-logowand {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--30);
	}
}
.visavis-logowand .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	aspect-ratio: 3 / 2;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--akzent-kontrast);
	border: 1px solid var(--wp--preset--color--flaeche);
	border-radius: 0;
}
.visavis-logowand .wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
/* Sehr breite Banner-Logos: doppelte Kachel (im Editor: Bild-Block →
   Erweitert → Zusätzliche CSS-Klasse „visavis-logo-breit"). */
.visavis-logowand .wp-block-image.visavis-logo-breit {
	grid-column: span 2;
	aspect-ratio: auto;
}

/* Downloads-/Presse-Seite: zentrierter Block mit den Datei-Knöpfen. */
.visavis-downloads {
	margin-top: var(--wp--preset--spacing--60);
	text-align: center;
}
.visavis-downloads__knoepfe {
	margin-top: var(--wp--preset--spacing--40);
}
/* WICHTIG: WordPress kopiert die Bild-Klassen (auch visavis-reveal) in die
   native Lightbox-Vergrößerung. Dort läuft kein IntersectionObserver, also
   bekäme die vergrößerte Figur nie „ist-sichtbar" und bliebe auf opacity:0 +
   translateY(24px) — das Bild wäre unsichtbar. Hier zurücksetzen (opacity per
   !important erzwungen; transform ohne !important, damit die Zoom-Animation
   der Lightbox weiter über ihre Inline-Styles arbeiten kann). */
.wp-lightbox-overlay .visavis-reveal {
	opacity: 1 !important;
	transform: none;
}
/* Lightbox-Hintergrund: statt der weißen Vollfläche ein dunkler, durchscheinender
   Schleier — die Galerie-Seite schimmert gedimmt durch, das signalisiert „neben
   das Bild klicken schließt" (die Lightbox kann das ohnehin). Das WordPress-scrim
   trägt seine Farbe inline, daher !important. Schließen-X und Pfeile werden hell,
   sonst wären sie auf dem dunklen Grund unsichtbar. */
.wp-lightbox-overlay {
	background-color: rgba(11, 24, 28, 0.76) !important;
}
.wp-lightbox-overlay .scrim {
	background: transparent !important;
}
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button,
.wp-lightbox-overlay .wp-lightbox-close-button svg,
.wp-lightbox-overlay .wp-lightbox-navigation-button svg {
	fill: var(--wp--preset--color--akzent-kontrast) !important;
}
/* Handy: lange Wörter in Überschriften („Haftungsbeschränkung",
   „Leistungsschutzrechte") passen in großer Schrift nicht in 390 px und
   machten die ganze Seite breiter — das ☰-Menü rutschte aus dem Bild.
   Silbentrennung nur für lange Wörter (ab 10 Zeichen), kurze bleiben ganz;
   overflow-wrap als Netz, falls der Browser ein Wort nicht trennen kann. */
@media (width < 40rem) {
	h1, h2, h3, h4, h5, h6 {
		-webkit-hyphens: auto; /* Safari/iPhone */
		hyphens: auto;
		hyphenate-limit-chars: 10 4 4;
		overflow-wrap: break-word;
	}
}

/* Nur helles Farbschema: Browser sollen die Seite nicht eigenmächtig abdunkeln
   (helle Schrift auf hellem Hintergrundbild der Stück-Seiten, Philipp 14.10.).
   Gegenstück zum <meta name="color-scheme"> aus functions.php. */
:root {
	color-scheme: only light;
}

/* Handy: Zitat-Box („Kultur lässt sich nicht kürzen …", Über mich). Seitenrand
   48 px + Box-Innenabstand 48 px + Titelschrift 40 px ließen nur ~200 px Breite —
   ein Wort pro Zeile, ein langer Turm (Philipp, 14.10.). Am Handy weniger
   Innenabstand und das Zitat etwas kleiner (aus dem Titel-Preset abgeleitet). */
@media (width < 40rem) {
	.has-background:has(> .wp-block-quote) {
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
	}
	.wp-block-quote p.has-titel-font-size {
		font-size: calc(var(--wp--preset--font-size--titel) * 0.7) !important;
	}
}

/* Original-Logo im Kopf (Silke, 19.10.): hochkant, darum über die Breite gedeckelt —
   sonst wird der Kopf so hoch, dass er die Wortmarke der Startseite verdeckt. */
.visavis-kopf .wp-block-site-logo img {
	width: 72px;
	height: auto;
}
@media (width < 46rem) {
	.visavis-kopf .wp-block-site-logo img { width: 56px; }
}