/* ==========================================================================
   Theater Auw — Website-Stile
   --------------------------------------------------------------------------
   Alles hängt unter `.tha`. Drei Dinge sind hier bewusst so gebaut:

   1. Die Tokens stehen auf `.tha`, NICHT auf `:root`. Sonst würden `--accent`
      & Co. in das Theme lecken.

   2. DIE SPEZIFITÄTS-TREPPE — die wichtigste Regel dieser Datei:

          Theme-Regeln       z.B. `.entry-content h1`      (0,1,1)
          unser Reset        `.tha.tha :where(…)`          (0,2,0)   schlägt Theme
          unsere Regeln      `.tha.tha .tha-hero`          (0,3,0)   schlägt Reset

      Der Reset setzt `all: revert` auf alles unter `.tha` und neutralisiert
      damit Theme-Meinungen. Er ist aber selbst eine Regel — wer eine
      Komponente mit nur EINER Klasse schreibt (`.tha-hero`, also (0,1,0)),
      verliert gegen den eigenen Reset, und die Regel verpufft ersatzlos.

      Genau das ist am 25.07.2026 passiert: 116 von 122 Regeln wurden vom
      eigenen Reset gelöscht, die Seite sah aus wie ganz ohne CSS.

      DESHALB: jede Regel, die etwas INNERHALB der Wurzel gestaltet, beginnt
      mit `.tha.tha `. Ohne Ausnahme. `preview/test-css.php` prüft das und
      `build.sh` bricht ab, wenn eine Regel zu schwach ist.

      `:where()` steuert bewusst null Spezifität bei — nur deshalb bleibt der
      Reset trotz seiner langen Elementliste bei (0,2,0) und nicht darüber.

   3. Cascade Layers wären hier falsch: ungelayerte Autoren-Stile gewinnen
      gegen ALLE gelayerten. Das Theme ist mit grosser Sicherheit ungelayert,
      wir würden also jeden Konflikt verlieren.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.tha,
body.tha-typo,
body.tha-bericht {
	/* Brand red — aus dem Logo gesampelt */
	--red-500: #ef3b3b;
	--red-600: #e02424;
	--red-700: #b91c1c;
	--red-800: #8f1616;
	--red-100: #fbe3e3;
	--red-50: #fdf1f1;

	/* Bühnendunkel (warmes Fast-Schwarz) */
	--ink-950: #151112;
	--ink-900: #1e1a1b;
	--ink-800: #2b2627;
	--ink-700: #3d3738;

	/* Papier-Neutrale (warm) */
	--paper-0: #ffffff;
	--paper-50: #faf8f4;
	--paper-100: #f2efe8;
	--paper-200: #e5e1d8;
	--gray-400: #a09a96;
	--gray-500: #7d7672;
	--gray-600: #5f5955;
	--gray-700: #453f3c;

	/* Spotlight-Gold — Zweitakzent, ausschliesslich Spielzeit */
	--gold-400: #e3b04b;
	--gold-500: #d19a2f;
	--gold-100: #f9efd9;

	/* Semantisch */
	--green-600: #2f8a5d;
	--green-100: #e0f1e8;
	--amber-600: #c47a12;
	--amber-100: #faeed6;

	/* Aliase */
	--surface-page: var(--paper-50);
	--surface-card: var(--paper-0);
	--surface-sunken: var(--paper-100);
	--surface-stage: var(--ink-950);
	--surface-stage-raised: var(--ink-900);
	--text-body: var(--ink-900);
	--text-muted: var(--gray-500);
	--text-onstage: #f8f6f2;
	--text-onstage-muted: #b5aeaa;
	--accent: var(--red-600);
	--accent-hover: var(--red-700);
	--accent-press: var(--red-800);
	--text-onaccent: #fff;
	--border-subtle: var(--paper-200);
	--border-strong: var(--gray-400);
	--border-onstage: rgba(248, 246, 242, .16);
	--focus-ring: 0 0 0 3px rgba(224, 36, 36, .35);
	--success: var(--green-600);
	--success-bg: var(--green-100);
	--warning: var(--amber-600);
	--warning-bg: var(--amber-100);
	--link: var(--red-600);
	--link-hover: var(--red-700);

	/* Schrift */
	--font-display: 'Big Shoulders', 'Big Shoulders Display', ui-sans-serif, sans-serif;
	--font-body: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
	--text-poster: clamp(44px, 8vw, 104px);
	--text-display: 56px;
	--text-h1: clamp(30px, 4.4vw, 40px);
	--text-h2: 28px;
	--text-h3: 21px;
	--text-lead: 19px;
	--text-body-size: 15.5px;
	--text-small: 14px;
	--text-caption: 12.5px;
	--leading-display: .96;
	--leading-tight: 1.15;
	--leading-body: 1.55;
	--tracking-display: .01em;
	--tracking-caps: .09em;

	/* Raster */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10: 40px;
	--sp-12: 48px;
	--sp-16: 64px;
	--sp-20: 80px;
	--sp-24: 96px;
	--container: 1120px;
	--container-narrow: 720px;

	/* Effekte */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;
	--shadow-card: 0 1px 2px rgba(21, 17, 18, .06), 0 4px 16px rgba(21, 17, 18, .07);
	--shadow-raised: 0 2px 6px rgba(21, 17, 18, .10), 0 12px 32px rgba(21, 17, 18, .14);
	--shadow-stage: 0 24px 60px rgba(0, 0, 0, .45);
	--ease-out: cubic-bezier(.2, .7, .3, 1);
	--dur-fast: 120ms;
	--dur-med: 220ms;
	--spotlight: radial-gradient(ellipse 70% 55% at 50% 18%, rgba(227, 176, 75, .14), transparent 65%);
}

/* --------------------------------------------------------------------------
   2. Abgrenzung gegen das Theme
   `:where()` steuert null Spezifität bei — der Selektor bleibt bei (0,2,0),
   deckt aber alles ab, wozu ein Theme eine Meinung haben dürfte.
   -------------------------------------------------------------------------- */

.tha.tha,
.tha.tha :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, button, img, figure,
	figcaption, dl, dt, dd, table, hr, blockquote, section, div, span, b, i, svg,
	time) {
	all: revert;
}

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

.tha.tha {
	font-family: var(--font-body);
	font-size: var(--text-body-size);
	line-height: var(--leading-body);
	color: var(--text-body);
	background: var(--surface-page);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.tha.tha ul,
.tha.tha ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tha.tha p {
	margin: 0 0 var(--sp-3);
}

.tha.tha img {
	max-width: 100%;
	height: auto;
	display: block;
}

.tha.tha a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.tha.tha a:hover {
	color: var(--link-hover);
}

.tha.tha :focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-sm);
}

/* Notausgang, falls ein sehr aggressives Theme (Divi, Avada …) sich nicht
   geschlagen gibt. Umschaltbar in den Einstellungen — kein neues ZIP nötig. */
.tha.tha.tha--stark,
.tha.tha.tha--stark :where(h1, h2, h3, p, li, a, span, b, div) {
	font-family: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
	text-transform: inherit !important;
}

.tha.tha.tha--stark {
	font-family: var(--font-body) !important;
	line-height: var(--leading-body) !important;
	color: var(--text-body) !important;
	max-width: none !important;
}

/* --------------------------------------------------------------------------
   3. Breite
   -------------------------------------------------------------------------- */

/* `clip` statt `hidden`, sonst hört position:sticky auf zu funktionieren.
   Firefox rechnet die Scrollbar in 100vw mit — deshalb überhaupt clip. */
.tha.tha.tha--width-viewport {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow-x: clip;
}

.tha.tha .tha-wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--sp-6);
}

.tha.tha .tha-narrow {
	max-width: var(--container-narrow);
}

/* --------------------------------------------------------------------------
   4. Typografie
   -------------------------------------------------------------------------- */

.tha.tha .tha-h2,
.tha.tha .tha-h3,
.tha.tha .tha-hero__title {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--leading-tight);
	letter-spacing: var(--tracking-display);
	text-transform: uppercase;
	margin: 0;
	color: var(--text-body);
}

.tha.tha .tha-h2 {
	font-size: var(--text-h1);
}

.tha.tha .tha-h3 {
	font-size: var(--text-h3);
	margin-bottom: var(--sp-2);
}

.tha.tha .tha-h2--onstage {
	color: var(--text-onstage);
}

.tha.tha .tha-kicker {
	font-family: var(--font-body);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--red-600);
	margin: 0 0 var(--sp-2);
}

.tha.tha .tha-head {
	margin-bottom: var(--sp-8);
}

.tha.tha .tha-head--row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

.tha.tha .tha-prose p {
	font-size: 16px;
	max-width: 56ch;
	margin: 0 0 var(--sp-3);
}

.tha.tha .tha-note {
	font-size: var(--text-small);
	color: var(--text-muted);
	margin: var(--sp-3) 0 0;
}

/* --------------------------------------------------------------------------
   5. Sections
   -------------------------------------------------------------------------- */

.tha.tha .tha-section {
	padding: var(--sp-20) 0;
}

.tha.tha .tha-section--page {
	background: var(--surface-page);
}

.tha.tha .tha-section--card {
	background: var(--surface-card);
}

.tha.tha .tha-section--stage {
	background: var(--surface-stage);
	color: var(--text-onstage);
}

.tha.tha .tha-section--contact {
	background: var(--surface-stage);
	color: var(--text-onstage);
	padding: var(--sp-12) 0;
}

.tha.tha .tha-split {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: var(--sp-12);
	align-items: start;
}

.tha.tha .tha-grid {
	display: grid;
	gap: var(--sp-5);
}

.tha.tha .tha-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Das Karten-Raster richtet sich nach der Anzahl Karten. */
.tha.tha .tha-grid--cards {
	grid-template-columns: repeat(var(--tha-cols, 3), 1fr);
}

@media (max-width: 820px) {

	.tha.tha .tha-grid--cards {
		grid-template-columns: repeat(min(var(--tha-cols, 3), 2), 1fr);
	}
}

@media (max-width: 560px) {

	.tha.tha .tha-grid--cards {
		grid-template-columns: 1fr;
	}
}

.tha.tha .tha-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.tha.tha .tha-hero {
	background: var(--surface-stage);
	color: var(--text-onstage);
	position: relative;
	overflow: hidden;
}

.tha.tha .tha-hero--spotlight {
	background-image: var(--spotlight);
}

.tha.tha .tha-hero__inner {
	padding-top: var(--sp-16);
	padding-bottom: var(--sp-20);
	position: relative;
}

.tha.tha .tha-hero__title {
	font-size: var(--text-poster);
	font-weight: 700;
	line-height: var(--leading-display);
	color: var(--text-onstage);
	margin: var(--sp-4) 0 var(--sp-4);
}

.tha.tha .tha-hero__title-accent {
	color: var(--red-500);
}

.tha.tha .tha-hero__title-gold {
	color: var(--gold-400);
}

.tha.tha .tha-hero__sub {
	font-size: var(--text-lead);
	color: var(--text-onstage-muted);
	max-width: 58ch;
	margin: 0 0 var(--sp-8);
}

.tha.tha .tha-hero__actions {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

.tha.tha .tha-hero__signoff {
	margin-top: var(--sp-10);
	font-size: var(--text-small);
	color: var(--text-onstage-muted);
}

/* Wortmarke — nur auf dunklen Flächen. Auf Papier verschwindet sie. */
.tha.tha .tha-wordmark {
	margin-bottom: var(--sp-8);
}

.tha.tha .tha-wordmark__img {
	height: 38px;
	width: auto;
}

.tha.tha .tha-wordmark__text {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	text-transform: lowercase;
	letter-spacing: .02em;
	color: var(--text-onstage);
}

.tha.tha .tha-wordmark__accent {
	color: var(--red-500);
	margin-left: .18em;
}

/* --------------------------------------------------------------------------
   7. Badge & Tag
   -------------------------------------------------------------------------- */

.tha.tha .tha-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	line-height: 1.3;
}

.tha.tha .tha-badge--red {
	background: var(--red-600);
	color: #fff;
}

.tha.tha .tha-badge--gold {
	background: var(--gold-500);
	color: var(--ink-950);
}

.tha.tha .tha-badge--success {
	background: var(--success-bg);
	color: var(--success);
}

.tha.tha .tha-badge--stage {
	background: rgba(248, 246, 242, .12);
	color: var(--text-onstage);
	border: 1px solid var(--border-onstage);
}

.tha.tha .tha-tags {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
	margin: 0 0 var(--sp-4);
}

.tha.tha .tha-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
	color: var(--gray-600);
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   8. Button
   -------------------------------------------------------------------------- */

.tha.tha .tha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 11px 22px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast), color var(--dur-fast);
}

.tha.tha .tha-btn--sm {
	padding: 7px 16px;
	font-size: 14px;
}

.tha.tha .tha-btn--lg {
	padding: 15px 30px;
	font-size: 16px;
}

.tha.tha .tha-btn--primary {
	background: var(--accent);
	color: var(--text-onaccent);
}

.tha.tha .tha-btn--primary:hover {
	background: var(--accent-hover);
	color: var(--text-onaccent);
}

.tha.tha .tha-btn--primary:active {
	background: var(--accent-press);
	transform: translateY(1px);
}

.tha.tha .tha-btn--secondary {
	background: transparent;
	color: var(--text-body);
	border-color: var(--border-strong);
}

.tha.tha .tha-btn--secondary:hover {
	background: var(--surface-sunken);
	color: var(--text-body);
}

.tha.tha .tha-btn--stage {
	background: var(--text-onstage);
	color: var(--ink-950);
}

.tha.tha .tha-btn--stage:hover {
	background: #fff;
	color: var(--ink-950);
}

.tha.tha .tha-btn--ghost-stage {
	background: transparent;
	color: var(--red-500);
}

.tha.tha .tha-btn--ghost-stage:hover {
	background: rgba(248, 246, 242, .08);
	color: var(--red-500);
}

.tha.tha .tha-btn.is-disabled {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

.tha.tha .tha-icon {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   9. Countdown
   -------------------------------------------------------------------------- */

.tha.tha .tha-countdown {
	margin-top: var(--sp-10);
}

.tha.tha .tha-countdown__units {
	display: flex;
	gap: var(--sp-6);
	align-items: baseline;
}

.tha.tha .tha-countdown__unit {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.tha.tha .tha-countdown__unit b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 44px;
	color: var(--gold-400);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tha.tha .tha-countdown__unit i {
	font-style: normal;
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-onstage-muted);
	margin-top: var(--sp-2);
}

.tha.tha .tha-countdown__label {
	font-size: var(--text-small);
	color: var(--text-onstage-muted);
	margin: var(--sp-3) 0 0;
}

/* Ohne JavaScript trägt der Fallback-Text die Aussage, die Ziffernblöcke sind
   dann redundant. Mit JavaScript dreht sich das um. */
.tha.tha .tha-countdown__fallback {
	font-weight: 600;
	color: var(--text-onstage);
}

.tha.tha .tha-js .tha-countdown__fallback {
	display: none;
}

.tha.tha .tha-countdown__units {
	display: none;
}

.tha.tha .tha-js .tha-countdown__units {
	display: flex;
}

/* --------------------------------------------------------------------------
   10. Spieldaten
   -------------------------------------------------------------------------- */

:is(#left-area, body) .tha.tha .tha-dates {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: var(--sp-2);
}

.tha.tha .tha-date {
	display: flex;
	/* Grundlinie statt Mitte: Wochentag (Big Shoulders 15), Datum (Big
	   Shoulders 22) und Zeit (Libre Franklin 14) sitzen sonst zwar in gleich
	   hohen Kästen, aber die Schrift darin jeweils auf anderer Höhe — das
	   liest sich als verschoben. Auf einer Grundlinie steht es wie im
	   gedruckten Programm. */
	align-items: baseline;
	gap: var(--sp-4);
	padding: 14px var(--sp-4);
	border-radius: var(--radius-md);
	transition: background var(--dur-fast);
}

.tha.tha .tha-date:hover {
	background: var(--surface-sunken);
}

.tha.tha .tha-date.is-dim {
	opacity: .55;
}

.tha.tha .tha-date.is-today {
	background: var(--gold-100);
}

.tha.tha .tha-date__wd {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--red-600);
	width: 34px;
	flex: 0 0 34px;
}

.tha.tha .tha-date__d {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	text-transform: uppercase;
	color: var(--text-body);
	width: 64px;
	flex: 0 0 64px;
}

.tha.tha .tha-date__meta {
	font-size: var(--text-small);
	color: var(--text-muted);
	flex: 1 1 auto;
	min-width: 0;
}

.tha.tha .tha-date__label {
	margin-left: var(--sp-2);
	font-weight: 600;
	color: var(--red-600);
}

.tha.tha .tha-date__today {
	margin-left: var(--sp-2);
	font-weight: 600;
	color: var(--gold-500);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: var(--text-caption);
}

.tha.tha .tha-date__status {
	font-size: 13px;
	font-weight: 600;
	flex: 0 0 auto;
	/* Knopf und Status gehören optisch mittig, nicht auf die Textgrundlinie. */
	align-self: center;
}

.tha.tha .tha-date__status--wenige {
	color: var(--warning);
}

.tha.tha .tha-date__status--ausverkauft,
.tha.tha .tha-date__status--vorbei {
	color: var(--text-muted);
}

.tha.tha .tha-date__cta {
	flex: 0 0 auto;
	align-self: center;
}

/* --------------------------------------------------------------------------
   11. Card, Medien, Platzhalter
   -------------------------------------------------------------------------- */

.tha.tha .tha-card {
	background: var(--surface-card);
	border: 1px solid var(--border-subtle);
	box-shadow: var(--shadow-card);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	color: var(--text-body);
}

.tha.tha .tha-card p {
	font-size: 15px;
	color: var(--text-muted);
	margin: 0 0 var(--sp-2);
}

.tha.tha .tha-media,
.tha.tha .tha-placeholder {
	aspect-ratio: var(--tha-ratio, 4 / 3);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.tha.tha .tha-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tha.tha .tha-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--sp-3);
	border: 1.5px dashed var(--border-strong);
	color: var(--text-muted);
	font-size: 13px;
	background: var(--surface-sunken);
}

.tha.tha .tha-placeholder--dark {
	border-color: var(--border-onstage);
	color: var(--text-onstage-muted);
	background: var(--surface-stage-raised);
}

.tha.tha .tha-year__label {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--text-onstage);
	margin: var(--sp-3) 0 0;
}

/* --------------------------------------------------------------------------
   12. Kontakt
   -------------------------------------------------------------------------- */

.tha.tha .tha-contact__text {
	color: var(--text-onstage-muted);
	max-width: 46ch;
	margin: 0 0 var(--sp-3);
}

.tha.tha .tha-contact__mail a {
	color: var(--red-500);
	font-weight: 600;
	font-size: 17px;
}

.tha.tha .tha-contact__signoff {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: var(--text-caption);
	color: var(--text-onstage-muted);
	margin: var(--sp-6) 0 0;
}

/* --------------------------------------------------------------------------
   13. Dialog (Ticketleo-Handoff)
   -------------------------------------------------------------------------- */

.tha.tha .tha-dialog[hidden] {
	display: none;
}

.tha.tha .tha-dialog {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sp-6);
}

.tha.tha .tha-dialog__scrim {
	position: absolute;
	inset: 0;
	background: rgba(21, 17, 18, .62);
}

.tha.tha .tha-dialog__panel {
	position: relative;
	background: var(--surface-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-raised);
	max-width: 480px;
	width: 100%;
	padding: var(--sp-8);
}

.tha.tha .tha-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-3);
}

.tha.tha .tha-dialog__close {
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--sp-1);
	color: var(--gray-500);
	line-height: 0;
}

.tha.tha .tha-dialog__body p {
	font-size: 15px;
}

.tha.tha .tha-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
	flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   14. Sticky CTA
   -------------------------------------------------------------------------- */

.tha.tha .tha-sticky[hidden] {
	display: none;
}

.tha.tha .tha-sticky {
	position: fixed;
	left: 50%;
	bottom: var(--sp-5);
	transform: translateX(-50%);
	z-index: 9000;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	background: var(--ink-900);
	color: var(--text-onstage);
	border: 1px solid var(--border-onstage);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-raised);
	padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
	max-width: calc(100vw - var(--sp-8));
	animation: tha-rise var(--dur-med) var(--ease-out);
}

@keyframes tha-rise {
	from {
		opacity: 0;
		transform: translate(-50%, 10px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

.tha.tha .tha-sticky__text {
	font-family: var(--font-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	font-size: var(--text-small);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   15. Vorschau-Hinweis
   -------------------------------------------------------------------------- */

.tha.tha .tha-preview-note {
	background: var(--warning-bg);
	color: var(--warning);
	font-size: var(--text-small);
	font-weight: 600;
	text-align: center;
	padding: var(--sp-2) var(--sp-4);
	margin: 0;
}

/* --------------------------------------------------------------------------
   16. Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.tha.tha *,
	.tha.tha *::before,
	.tha.tha *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --------------------------------------------------------------------------
   17. Responsive
   Das Design muss auch bei 720px im Theme-Container richtig aussehen —
   das ist ein unterstütztes Layout, kein Fehlerfall.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	.tha.tha .tha-split {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
	}

	.tha.tha .tha-grid--3,
	.tha.tha .tha-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {

	.tha.tha .tha-section {
		padding: var(--sp-12) 0;
	}

	.tha.tha .tha-hero__inner {
		padding-top: var(--sp-10);
		padding-bottom: var(--sp-12);
	}

	.tha.tha .tha-wrap {
		padding: 0 var(--sp-4);
	}

	.tha.tha .tha-grid--3,
	.tha.tha .tha-grid--4 {
		grid-template-columns: 1fr;
	}

	.tha.tha .tha-hero__actions .tha-btn {
		flex: 1 1 auto;
	}

	/* Datumzeile bricht um statt zu quetschen: Wochentag + Datum oben,
	   Zeit und CTA darunter. */
	.tha.tha .tha-date {
		flex-wrap: wrap;
		gap: var(--sp-2) var(--sp-3);
	}

	.tha.tha .tha-date__meta {
		flex: 1 1 100%;
		order: 3;
	}

	.tha.tha .tha-date__status {
		order: 4;
	}

	.tha.tha .tha-date__cta {
		order: 5;
		margin-left: auto;
	}

	.tha.tha .tha-countdown__unit b {
		font-size: 34px;
	}

	.tha.tha .tha-sticky {
		left: var(--sp-3);
		right: var(--sp-3);
		transform: none;
		max-width: none;
		justify-content: space-between;
	}

	@keyframes tha-rise {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* --------------------------------------------------------------------------
   18. Theater-Navigation

   Rendert ein bestehendes WordPress-Menü. Die Markup-Klassen (`menu-item`,
   `sub-menu`, `menu-item-has-children`) kommen von WordPress selbst — deshalb
   braucht es keinen eigenen Walker.
   -------------------------------------------------------------------------- */

.tha.tha .tha-nav {
	background: var(--ink-950);
	border-bottom: 1px solid var(--border-onstage);
	position: relative;
	z-index: 50;
}

.tha.tha .tha-nav--sticky {
	position: sticky;
	/* NICHT 0. Ueber der Seite haengen bis zu drei fest verankerte Leisten:
	   die Admin-Leiste von WordPress (32 px, nur fuer Angemeldete), die graue
	   Vereinsleiste #top-header und Divis Kopfzeile. Alle drei tragen
	   z-index um 100000 — bei `top: 0` verschwindet die Theater-Navigation
	   beim Scrollen lautlos dahinter. Genau das war am 25.07.2026 zu sehen.

	   Wie hoch der Stapel wirklich ist, weiss nur der Browser: die Admin-
	   Leiste fehlt fuer Besucher, und Divi schrumpft seine Kopfzeile beim
	   Scrollen. Deshalb misst das JavaScript nach und setzt die Variable;
	   der Wert hier ist die Rueckfallebene ohne JavaScript. */
	top: var(--tha-sticky-top, 0px);
}

/* Ganz oben statt unter den Leisten des Themes.

   Der Abstand allein genuegt nicht: Divis Kopfzeile und die graue
   Vereinsleiste liegen bei z-index 100000, unsere Leiste bei 50. Ohne Abstand
   verschwaende sie schlicht dahinter. Wer sie ganz oben haben will, braucht
   sie deshalb auch VOR ihnen. Der Abstand nach oben bleibt trotzdem — er ist
   dann nur noch die Admin-Leiste von WordPress, die niemand verdecken soll,
   weil man sonst nicht mehr aus der Seite herauskommt. */
.tha.tha .tha-nav--ganzoben {
	z-index: 100001;
}

/* Notnagel, wenn `sticky` nicht kleben KANN.

   Steht über der Leiste irgendwo ein `overflow: hidden` — Divi setzt das auf
   schmalen Viewports gegen waagrechtes Scrollen —, dann klebt sie an einem
   Kasten, der selbst nie scrollt, und wandert beim Scrollen aus dem Bild. Das
   JavaScript sieht nach und setzt diese Klasse; ein Platzhalter davor hält
   die Höhe frei, damit der Inhalt nicht nach oben springt. */
.tha.tha .tha-nav--fest {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--tha-sticky-top, 0px);
}

.tha.tha .tha-nav__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
	min-height: 64px;
}

.tha.tha .tha-nav__brand {
	text-decoration: none;
	flex: 0 0 auto;
}

.tha.tha .tha-nav__brand .tha-wordmark {
	margin-bottom: 0;
}

.tha.tha .tha-nav__brand .tha-wordmark__text {
	font-size: 21px;
}

.tha.tha .tha-nav__brand .tha-wordmark__img {
	height: 28px;
}

.tha.tha .tha-nav__menu {
	flex: 1 1 auto;
	min-width: 0;
}

.tha.tha .tha-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.tha.tha .tha-nav__list li {
	position: relative;
	margin: 0;
}

.tha.tha .tha-nav__list a {
	display: block;
	padding: 10px var(--sp-3);
	color: var(--text-onstage-muted);
	font-family: var(--font-body);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: none;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: color var(--dur-fast), background var(--dur-fast);
}

.tha.tha .tha-nav__list a:hover,
.tha.tha .tha-nav__list a:focus-visible {
	color: var(--text-onstage);
	background: rgba(248, 246, 242, .07);
}

/* Aktuelle Seite — die roten Klassen setzt WordPress selbst. */
.tha.tha .tha-nav__list .current-menu-item > a,
.tha.tha .tha-nav__list .current-menu-ancestor > a,
.tha.tha .tha-nav__list .current_page_item > a {
	color: var(--text-onstage);
	box-shadow: inset 0 -2px 0 var(--red-600);
}

/* Eltern mit Unterseiten bekommen einen Chevron. */
.tha.tha .tha-nav__list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .42em;
	height: .42em;
	margin-left: .5em;
	vertical-align: .12em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
}

/* --- Untermenüs: Desktop als Aufklapper --- */

:is(#left-area, body) .tha.tha .tha-nav__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--sp-1);
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--ink-900);
	border: 1px solid var(--border-onstage);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-raised);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
	z-index: 60;
}

/* Aufklappen beim Zeigen — und zwar MIT demselben `:is(#left-area, body)`
   wie die Regel darüber, die das Untermenü versteckt. Ohne das Präfix wiegt
   diese Regel fünf Klassen, jene eine ID und vier Klassen; eine ID schlägt
   jede Zahl von Klassen. Das Untermenü bliebe unsichtbar, und «Mitwirkende»
   und «Rückblick» liessen sich am Rechner nicht mehr öffnen. */
:is(#left-area, body) .tha.tha .tha-nav__list li:hover > .sub-menu,
:is(#left-area, body) .tha.tha .tha-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tha.tha .tha-nav__list .sub-menu a {
	white-space: normal;
	font-size: 14px;
}

.tha.tha .tha-nav__cta {
	flex: 0 0 auto;
	margin-left: auto;
}

.tha.tha .tha-nav__toggle {
	display: none;
	align-items: center;
	gap: var(--sp-2);
	margin-left: auto;
	padding: 8px var(--sp-3);
	background: transparent;
	color: var(--text-onstage);
	border: 1px solid var(--border-onstage);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.tha.tha .tha-link-onstage {
	color: var(--red-500);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.tha.tha .tha-kicker--onstage {
	color: var(--red-500);
}

/* --------------------------------------------------------------------------
   19. Rückblick-Jahrgänge (Plakate, Hochformat)
   -------------------------------------------------------------------------- */

:is(#left-area, body) .tha.tha .tha-years {
	display: grid;
	grid-template-columns: repeat(var(--tha-cols, 4), 1fr);
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tha.tha .tha-year {
	margin: 0;
}

.tha.tha .tha-year__link {
	display: block;
	text-decoration: none;
	transition: transform var(--dur-fast) var(--ease-out);
}

.tha.tha .tha-year__link:hover {
	transform: translateY(-3px);
}

.tha.tha .tha-year__meta {
	margin: var(--sp-3) 0 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tha.tha .tha-year__year {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-onstage);
}

.tha.tha .tha-year__title {
	font-size: var(--text-small);
	color: var(--text-onstage-muted);
}

/* --------------------------------------------------------------------------
   20. Navigation und Rückblick — schmale Viewports
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {

	:is(#left-area, body) .tha.tha .tha-years {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 860px) {

	.tha.tha .tha-nav__toggle {
		display: inline-flex;
	}

	/* Die Leiste bleibt EINE Zeile: Wortmarke links, Ticketknopf und Menü
	   rechts. Vorher durfte sie umbrechen, und eine klebende Leiste, die
	   zweizeilig wird, frisst am Handy den halben Bildschirm.

	   Das `auto` sitzt an der Wortmarke, nicht am Knopf: so wird alles nach
	   rechts geschoben, egal ob der Ticketknopf gerade da ist oder nicht. */
	.tha.tha .tha-nav__inner {
		flex-wrap: nowrap;
		gap: var(--sp-3);
		min-height: 56px;
	}

	.tha.tha .tha-nav__brand {
		margin-right: auto;
	}

	.tha.tha .tha-nav__cta {
		margin-left: 0;
		order: 0;
	}

	.tha.tha .tha-nav__toggle {
		margin-left: 0;
		order: 1;
		padding: 9px var(--sp-3);
	}

	/* Das Menü als Blatt UNTER der Leiste, nicht als Teil von ihr.

	   `absolute` statt im Fluss: die Leiste bleibt 56 px hoch, egal wie lang
	   das Menü ist, und das Blatt legt sich über die Seite statt sie
	   auseinanderzuschieben. Es scrollt für sich; `overscroll-behavior`
	   verhindert, dass am Ende der Liste plötzlich die Seite dahinter
	   weiterscrollt. */
	.tha.tha .tha-nav__menu {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: block;
		/* `100%` ist die Höhe der Leiste — das Blatt darf also genau bis zum
		   unteren Bildrand reichen. Die `vh`-Zeile ist für ältere Browser, die
		   `dvh` noch nicht kennen; sonst hätte das Blatt gar keinen Deckel. */
		max-height: calc(100vh - 100%);
		max-height: calc(100dvh - 100%);
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--ink-950);
		border-top: 1px solid var(--border-onstage);
		box-shadow: var(--shadow-raised);
		padding: var(--sp-2) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
	}

	.tha.tha .tha-nav__menu.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.tha.tha .tha-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Fingerbreite Ziele: 48 px ist das Mass, unter dem man danebentippt. */
	.tha.tha .tha-nav__list a {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 11px var(--sp-2);
		border-radius: 0;
		font-size: 17px;
		color: var(--text-onstage);
	}

	.tha.tha .tha-nav__list > li + li {
		border-top: 1px solid var(--border-onstage);
	}

	/* Die aktuelle Seite bekommt einen roten Balken an der Seite. Der
	   Unterstrich vom Desktop geht in einer senkrechten Liste unter — er sieht
	   dort aus wie eine weitere Trennlinie. */
	.tha.tha .tha-nav__list .current-menu-item > a,
	.tha.tha .tha-nav__list .current-menu-ancestor > a,
	.tha.tha .tha-nav__list .current_page_item > a {
		box-shadow: inset 3px 0 0 var(--red-600);
		padding-left: var(--sp-4);
	}

	/* Untermenüs auf dem Handy immer offen und eingerückt — ein Aufklapper,
	   der auf Hover reagiert, ist per Finger nicht bedienbar.

	   Das `:is(#left-area, body)` ist Pflicht: Divi gibt jeder <ul> unter
	   `#left-area` ein eigenes Innenmass, und eine ID schlägt jede Klasse.
	   Ohne das Präfix blieb die Einrückung wirkungslos — Unterpunkte standen
	   genau gleich weit links wie ihre Eltern, und die Liste war eine
	   Aneinanderreihung von vierzehn gleich aussehenden Zeilen. */
	:is(#left-area, body) .tha.tha .tha-nav__list .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
		margin: 0 0 var(--sp-2) var(--sp-2);
		padding: 0 0 0 var(--sp-3);
		border-left: 1px solid var(--border-onstage);
	}

	/* Unterpunkte sind leiser als ihre Eltern — sonst liest sich das Menü als
	   eine einzige lange Liste ohne Gefälle. */
	.tha.tha .tha-nav__list .sub-menu a {
		min-height: 44px;
		font-size: 15px;
		color: var(--text-onstage-muted);
	}

	.tha.tha .tha-nav__list .sub-menu li + li {
		border-top: 1px solid var(--border-onstage);
	}

	.tha.tha .tha-nav__list .menu-item-has-children > a {
		font-weight: 600;
	}

	.tha.tha .tha-nav__list .menu-item-has-children > a::after {
		display: none;
	}

	/* Der Hintergrund hinter dem offenen Blatt. Er verdeckt die Seite, damit
	   klar ist, dass gerade das Menü dran ist — und fängt den Fingertipp
	   daneben ab. */
	.tha.tha .tha-nav__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--dur-fast);
	}

	.tha.tha .tha-nav--offen .tha-nav__backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Innerhalb der Leiste: der Hintergrund ganz unten, darüber die Leiste
	   selbst, zuoberst das Blatt. Alle drei liegen im Stapel der Navigation
	   und damit über der Seite. */
	.tha.tha .tha-nav__inner {
		position: relative;
		z-index: 1;
	}

	.tha.tha .tha-nav__menu {
		z-index: 2;
	}

	.tha.tha .tha-nav__toggle-label--offen,
	.tha.tha .tha-nav__icon--offen {
		display: none;
	}

	.tha.tha .tha-nav__toggle[aria-expanded="true"] .tha-nav__toggle-label--zu,
	.tha.tha .tha-nav__toggle[aria-expanded="true"] .tha-nav__icon--zu {
		display: none;
	}

	.tha.tha .tha-nav__toggle[aria-expanded="true"] .tha-nav__toggle-label--offen,
	.tha.tha .tha-nav__toggle[aria-expanded="true"] .tha-nav__icon--offen {
		display: inline;
	}

	.tha.tha .tha-nav__toggle[aria-expanded="true"] {
		background: rgba(248, 246, 242, .1);
	}
}

/* Über der Breite gibt es kein Blatt und keinen Hintergrund — dort steht das
   Menü ohnehin offen in der Leiste. */
@media (min-width: 861px) {

	.tha.tha .tha-nav__backdrop,
	.tha.tha .tha-nav__toggle-label--offen,
	.tha.tha .tha-nav__icon--offen {
		display: none;
	}
}

/* Wer Bewegung abbestellt hat, bekommt das Menü ohne Überblendung. */
@media (prefers-reduced-motion: reduce) {

	.tha.tha .tha-nav__menu,
	.tha.tha .tha-nav__backdrop {
		transition: none;
		transform: none;
	}
}

/* KEIN `overflow: hidden` auf <html>, solange das Menü offen ist.

   Das waere der uebliche Griff, um die Seite dahinter stillzustellen — und er
   nimmt der klebenden Leiste genau den Kasten weg, an dem sie klebt. Sie
   rutscht dann dorthin, wo sie im Dokument steht: ganz nach oben, aus dem Bild.
   Auf einer weit heruntergescrollten Seite verschwand mit dem Antippen des
   Menues die Leiste samt Menue.

   Stattdessen faengt das JavaScript Wisch und Rad ueber dem Hintergrund ab;
   das Blatt selbst scrollt fuer sich, `overscroll-behavior: contain` haelt den
   Schwung am Listenende bei ihm. */

@media (max-width: 640px) {

	:is(#left-area, body) .tha.tha .tha-years {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   21. Unterseiten — kompakter Kopf statt Plakat-Hero

   Eine Unterseite soll nicht so laut auftreten wie die Startseite. Gleiche
   Bildsprache, aber halbe Lautstärke.
   -------------------------------------------------------------------------- */

.tha.tha .tha-pagehead {
	background: var(--surface-stage);
	color: var(--text-onstage);
	padding: var(--sp-12) 0 var(--sp-10);
}

.tha.tha .tha-pagehead__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 6vw, 64px);
	line-height: var(--leading-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-display);
	color: var(--text-onstage);
	margin: 0;
}

.tha.tha .tha-pagehead__lead {
	font-size: var(--text-lead);
	color: var(--text-onstage-muted);
	max-width: 58ch;
	margin: var(--sp-4) 0 0;
}

.tha.tha .tha-prose--onstage p {
	color: var(--text-onstage-muted);
}

.tha.tha .tha-prose--wide p {
	max-width: 68ch;
}

/* --------------------------------------------------------------------------
   22. Bildergruppen — Schauspieler, Team, Sponsoren

   Eine Komponente für drei Zwecke. Die Spaltenzahl kommt als Custom Property
   aus den Einstellungen, damit nicht für jede Variante eine eigene Klasse
   nötig ist.
   -------------------------------------------------------------------------- */

:is(#left-area, body) .tha.tha .tha-people {
	display: grid;
	grid-template-columns: repeat(var(--tha-cols, 4), 1fr);
	gap: var(--sp-6) var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tha.tha .tha-person {
	margin: 0;
}

.tha.tha .tha-person__meta {
	margin: var(--sp-3) 0 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.tha.tha .tha-person__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--text-body);
}

.tha.tha .tha-person__role {
	font-size: var(--text-small);
	color: var(--text-muted);
}

.tha.tha .tha-section--stage .tha-person__name {
	color: var(--text-onstage);
}

.tha.tha .tha-section--stage .tha-person__role {
	color: var(--text-onstage-muted);
}

/* Porträts: Bild leicht entsättigt, bei Hover in Farbe — ruhiges Raster,
   das trotzdem lebendig wird. */
.tha.tha .tha-people--personen .tha-media {
	border-radius: var(--radius-md);
}

/* Logos stehen fast immer auf Weiss. Deshalb eine helle Karte, `contain`
   statt `cover` und etwas Luft — sonst werden sie beschnitten.

   Das `:is(#left-area, body)` davor ist Pflicht, nicht Zierde: die Grundregel
   von `.tha-people` traegt es auch, und damit eine ID. Ohne dasselbe Praefix
   ist diese Regel schwaecher als die, die sie ueberschreiben soll — sie stuende
   im Stylesheet, taete aber nichts. Genau daran haben die Spaltenzahlen fuer
   schmale Viewports jahrelang gelitten. */
:is(#left-area, body) .tha.tha .tha-people--logos {
	gap: var(--sp-4);
	align-items: stretch;
}

.tha.tha .tha-people--logos .tha-media,
.tha.tha .tha-people--logos .tha-placeholder {
	background: var(--paper-0);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--sp-4);
}

.tha.tha .tha-people--logos .tha-media img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}

.tha.tha .tha-people--logos .tha-person__meta {
	margin-top: var(--sp-2);
}

.tha.tha .tha-people--logos .tha-person__name {
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-muted);
}

@media (max-width: 640px) {

	.tha.tha .tha-pagehead {
		padding: var(--sp-8) 0 var(--sp-6);
	}
}

/* ==========================================================================
   23. Seitenrahmen aufräumen

   Diese Regeln greifen AUSSERHALB von `.tha` — auf das Theme. Deshalb sind sie
   an Körperklassen gebunden, die nur auf Seiten gesetzt werden, auf denen
   unser Inhalt auch wirklich steht, und nur wenn die Admin-Person es
   ausdrücklich einschaltet. `!important` ist hier vertretbar: wir kämpfen
   gegen fremde Theme-Regeln, die wir nicht kennen.
   ========================================================================== */

/* --- Seitentitel ausblenden -------------------------------------------
   Der Titel steht schon gross im Hero. «Test-Home» darüber ist Doppelung. */

body.tha-hide-title .entry-title,
body.tha-hide-title .main_title,
body.tha-hide-title .page-title,
body.tha-hide-title .et_post_meta_wrapper > h1 {
	display: none !important;
}

/* --- Seitenleiste ausblenden -------------------------------------------
   Divi (#sidebar / .et_right_sidebar) plus die üblichen Verdächtigen. */

body.tha-hide-sidebar #sidebar,
body.tha-hide-sidebar .et_pb_widget_area,
body.tha-hide-sidebar .widget-area,
body.tha-hide-sidebar .sidebar,
body.tha-hide-sidebar #secondary {
	display: none !important;
}

/* Divi zeichnet den Trennstrich zur Seitenleiste als Pseudo-Element auf den
   Container. Blendet man nur die Leiste aus, bleibt die Linie mitten im Bild
   stehen. */
body.tha-hide-sidebar #main-content .container::before,
body.tha-hide-sidebar .container::before {
	display: none !important;
}

body.tha-hide-sidebar #left-area {
	width: 100% !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	float: none !important;
}

/* --- Inhaltsbereich auf volle Breite ------------------------------------
   Nur der Inhalt, NICHT die Kopfzeile: `#main-content .container` trifft in
   Divi die Inhaltsspalte, `.container` allein würde auch das Menü sprengen. */

body.tha-full-content #main-content .container,
body.tha-full-content .site-content .content-area,
body.tha-full-content .entry-content {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Divi setzt der Inhaltsspalte oben Abstand für den Seitentitel — der ist
   weg, also darf auch der Abstand weg. Sonst klafft über dem Hero eine Lücke. */
body.tha-full-content.tha-hide-title #main-content .container,
body.tha-full-content.tha-hide-title #left-area {
	padding-top: 0 !important;
}

/* --- Page-Builder-Spalten öffnen ---------------------------------------
   `.tha-host` wird vom JavaScript auf die Ahnenkette gesetzt, wenn unser
   Inhalt in einem Baukasten-Modul steckt (Divi-Zeile, Elementor-Spalte …).
   `!important` ist hier nötig: wir kämpfen gegen Inline-Stile und Regeln,
   die wir nicht kennen. */

body.tha-full-content .tha-host {
	width: 100% !important;
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	float: none !important;
}

/* Hinweis für Angemeldete bei leerer Bildergruppe */
.tha.tha .tha-hint {
	background: var(--warning-bg);
	color: var(--warning);
	border-radius: var(--radius-md);
	padding: var(--sp-4) var(--sp-5);
	font-size: var(--text-small);
	margin: 0;
}

/* --------------------------------------------------------------------------
   24. Gruppenfotos brauchen Platz

   Ein einzelnes Bild in einem Raster bekäme sonst nur eine Spalte — bei einem
   OK-Team-Foto sieht man dann niemanden mehr. Steht ein Bild allein, nimmt es
   die ganze Reihe ein, aber gedeckelt: über etwa 960px wird ein Gruppenfoto
   nicht besser, nur grösser.
   -------------------------------------------------------------------------- */

.tha.tha .tha-people--bilder > .tha-person:only-child {
	grid-column: 1 / -1;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Auch zu zweit oder zu dritt sollen Gruppenfotos nicht briefmarkengross
   werden — deshalb weniger, dafür breitere Spalten. */
:is(#left-area, body) .tha.tha .tha-people--bilder {
	gap: var(--sp-6);
}

/* Bilder mit eigenem Seitenverhältnis: die Box kommt aus den Bild-Metadaten
   (siehe Tha_Renderer::image), deshalb passt `contain` exakt und schneidet
   nichts ab — reserviert aber trotzdem Platz, bevor das Bild geladen ist. */
.tha.tha .tha-media--auto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Die Bildunterschrift eines Gruppenfotos ist eine Bildunterschrift, keine
   Überschrift — sie steht mittig und ruhig unter dem Bild. */
.tha.tha .tha-people--bilder .tha-person__meta {
	text-align: center;
	align-items: center;
}

.tha.tha .tha-people--bilder .tha-person__name {
	font-size: 17px;
}

/* --------------------------------------------------------------------------
   25. Gruppenbild über dem Raster

   Das Ensemble- oder Teamfoto steht als Erstes und darf breit sein: es zeigt
   alle zusammen, die Einzelporträts darunter zeigen jeden für sich.
   -------------------------------------------------------------------------- */

.tha.tha .tha-group-lead {
	margin: 0 0 var(--sp-10);
	max-width: 100%;
}

.tha.tha .tha-group-lead .tha-media,
.tha.tha .tha-group-lead .tha-placeholder {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.tha.tha .tha-section--stage .tha-group-lead .tha-media {
	box-shadow: var(--shadow-stage);
}

.tha.tha .tha-group-lead__caption {
	margin: var(--sp-3) 0 0;
	font-size: var(--text-small);
	color: var(--text-muted);
	text-align: center;
}

.tha.tha .tha-section--stage .tha-group-lead__caption {
	color: var(--text-onstage-muted);
}

/* --------------------------------------------------------------------------
   26. Gruppenbild neben dem Text

   Ein Ensemble-Foto neben dem Stücktext liest sich als Einheit — und bleibt
   dabei in vernünftiger Grösse. Mobile first: erst untereinander, ab 820px
   nebeneinander.
   -------------------------------------------------------------------------- */

.tha.tha .tha-lead-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-6);
	margin-bottom: var(--sp-10);
}

.tha.tha .tha-lead-split .tha-group-lead {
	margin: 0;
}

.tha.tha .tha-lead-split .tha-prose p:last-child {
	margin-bottom: 0;
}

@media (min-width: 820px) {

	.tha.tha .tha-lead-split {
		grid-template-columns: 1.15fr .85fr;
		gap: var(--sp-12);
		align-items: start;
	}
}

/* Ohne Einleitungstext soll das Bild nicht die halbe Seite leer lassen. */
.tha.tha .tha-lead-split--solo {
	grid-template-columns: 1fr;
	max-width: 560px;
}

/* «oben»: breit, aber gedeckelt und mittig. */
.tha.tha .tha-group-lead-wide {
	max-width: 860px;
	margin: 0 auto var(--sp-10);
}

.tha.tha .tha-group-lead-wide .tha-group-lead {
	margin: 0;
}

/* --------------------------------------------------------------------------
   27. Raster — abgestufte Breakpoints je Gruppentyp

   Die eingestellte Spaltenzahl gilt als OBERGRENZE: `min()` senkt sie auf
   schmalen Viewports, hebt sie aber nie an. Wer zwei Spalten eingestellt hat,
   bekommt nie plötzlich drei.

   JEDE Regel hier traegt `:is(#left-area, body)`. Die Grundregel von
   `.tha-people` traegt es auch — und damit eine ID, die jede Klassenregel
   schlaegt, Media Query hin oder her. Ohne das Praefix standen die Sponsoren
   am Handy in fuenf Spalten, 119 px breit, und die Seite ragte ueber den
   rechten Rand hinaus. Die Regeln waren da; sie kamen nur nie zum Zug.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {

	:is(#left-area, body) .tha.tha .tha-people--personen {
		grid-template-columns: repeat(min(var(--tha-cols, 4), 3), 1fr);
	}

	:is(#left-area, body) .tha.tha .tha-people--logos {
		grid-template-columns: repeat(min(var(--tha-cols, 5), 4), 1fr);
	}

	:is(#left-area, body) .tha.tha .tha-people--bilder {
		grid-template-columns: repeat(min(var(--tha-cols, 2), 2), 1fr);
	}

	:is(#left-area, body) .tha.tha .tha-years {
		grid-template-columns: repeat(min(var(--tha-cols, 4), 3), 1fr);
	}
}

@media (max-width: 820px) {

	:is(#left-area, body) .tha.tha .tha-people--personen {
		grid-template-columns: repeat(min(var(--tha-cols, 4), 2), 1fr);
	}

	:is(#left-area, body) .tha.tha .tha-people--logos {
		grid-template-columns: repeat(min(var(--tha-cols, 5), 3), 1fr);
	}

	/* Gruppenfotos untereinander — nebeneinander erkennt man niemanden mehr. */
	:is(#left-area, body) .tha.tha .tha-people--bilder {
		grid-template-columns: 1fr;
	}

	:is(#left-area, body) .tha.tha .tha-years {
		grid-template-columns: repeat(min(var(--tha-cols, 4), 2), 1fr);
	}
}

@media (max-width: 520px) {

	/* Zwei Porträts nebeneinander bleiben auch auf dem Handy lesbar —
	   eines pro Reihe wäre eine sehr lange Seite. */
	:is(#left-area, body) .tha.tha .tha-people--personen,
	:is(#left-area, body) .tha.tha .tha-people--logos,
	:is(#left-area, body) .tha.tha .tha-years {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-4);
	}

	.tha.tha .tha-person__name {
		font-size: 16px;
	}

	.tha.tha .tha-year__year {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   28. Einzelne Bilder gross stellen

   Zwischen Einzelporträts steht manchmal eine Gruppenaufnahme — das
   Tombolateam etwa. Auf der alten Seite bekam sie eine halbe statt einer
   drittel Spalte. Genauso hier: doppelte Breite, eigenes Format, kein
   Zuschnitt.
   -------------------------------------------------------------------------- */

.tha.tha .tha-person--wide {
	grid-column: span 2;
}

.tha.tha .tha-person--wide .tha-media {
	border-radius: var(--radius-md);
}

/* Ab zwei Spalten füllt «gross» ohnehin die Reihe — dann darf es nicht
   über den Rand hinausragen. */
@media (max-width: 820px) {

	.tha.tha .tha-person--wide {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   29. Beschreibungstext unter dem Namen

   Eure Bildunterschriften haben drei Teile: «Name | Funktion | Text». Der
   dritte ist auf der Kulissen-Seite ein ganzes Zitat — der gehört als
   Fliesstext gesetzt, nicht in die kleine Funktionszeile.
   -------------------------------------------------------------------------- */

.tha.tha .tha-person__text {
	margin: var(--sp-2) 0 0;
	font-size: var(--text-small);
	line-height: 1.5;
	color: var(--text-muted);
}

.tha.tha .tha-section--stage .tha-person__text {
	color: var(--text-onstage-muted);
}

/* Kacheln nicht auf Reihenhöhe dehnen: sonst klafft unter den kurzen
   Einträgen eine grosse Leerfläche, weil die Reihe vom längsten Text
   bestimmt wird. */
:is(#left-area, body) .tha.tha .tha-people {
	align-items: start;
}

/* Ein «grosses» Bild steht mit Text meist besser zweispaltig da. */
.tha.tha .tha-person--wide .tha-person__text {
	max-width: 62ch;
}

/* --------------------------------------------------------------------------
   30. Info-Bilder in den Karten

   Eintritte, Speise- und Getränkekarte liegen als Scan aus dem Programmheft
   vor. Sie abzutippen hiesse, dieselbe Angabe zweimal zu pflegen — also klein
   in der Karte zeigen und per Klick gross öffnen.
   -------------------------------------------------------------------------- */

.tha.tha .tha-infoimg {
	display: block;
	position: relative;
	margin-top: var(--sp-4);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--paper-0);
	text-decoration: none;
	transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}

.tha.tha .tha-infoimg:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
}

.tha.tha .tha-infoimg img {
	width: 100%;
	height: auto;
	display: block;
}

.tha.tha .tha-infoimg__hint {
	position: absolute;
	right: var(--sp-2);
	bottom: var(--sp-2);
	background: var(--ink-950);
	color: var(--text-onstage);
	font-family: var(--font-body);
	font-size: var(--text-caption);
	font-weight: 600;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   31. Detaillierte Informationen

   Preise als Zeilen, Saalplan als Bild. Mobile first: erst untereinander,
   ab 820px nebeneinander.
   -------------------------------------------------------------------------- */

.tha.tha .tha-details {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
}

@media (min-width: 820px) {

	.tha.tha .tha-details {
		grid-template-columns: .8fr 1.2fr;
		gap: var(--sp-12);
		align-items: start;
	}
}

.tha.tha .tha-details__sub {
	margin-top: var(--sp-8);
}

/* --- Preise ---

   Zwei Ebenen, zwei Auftritte: die Aufführungsart steht vorn — als rote
   Zwischenzeile über mehreren Preisen oder, wenn sie nur einen kennt, als
   kräftigere Zeile mit Betrag. Ihre Preise rücken darunter ein.

   Ohne diesen Unterschied stand «Abendaufführung» genau so da wie
   «Erwachsene» und las sich, als gehörte es noch zum «Sonntag» darüber. */

.tha.tha .tha-prices {
	margin: 0 0 var(--sp-4);
	border-top: 1px solid var(--border-subtle);
}

.tha.tha .tha-prices__list {
	margin: 0;
}

.tha.tha .tha-prices__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: 10px 0;
	border-bottom: 1px solid var(--border-subtle);
}

/* Die eingerückten Zeilen behalten die durchgehende Haarlinie — sie hält
   die Spalte der Beträge zusammen; eingerückt wird nur die Bezeichnung. */
.tha.tha .tha-prices__list--sub .tha-prices__row {
	padding-left: var(--sp-4);
}

.tha.tha .tha-prices dt {
	margin: 0;
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--text-body);
}

.tha.tha .tha-prices__list--sub dt {
	font-weight: 400;
}

.tha.tha .tha-prices__note {
	display: block;
	margin-top: 1px;
	font-weight: 400;
	font-size: var(--text-caption);
	line-height: 1.4;
	color: var(--text-muted);
}

.tha.tha .tha-prices dd {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--text-body);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* --- Dokumente --- */

:is(#left-area, body) .tha.tha .tha-docs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.tha.tha .tha-docs a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
}

.tha.tha .tha-docs a:hover {
	text-decoration: underline;
}

/* --- Saalplan --- */

.tha.tha .tha-seatmap {
	margin: 0;
}

.tha.tha .tha-seatmap a {
	display: block;
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper-0);
}

.tha.tha .tha-seatmap__note {
	margin: var(--sp-3) 0 0;
	font-size: var(--text-small);
	color: var(--text-muted);
}

/* --- Gezeichneter Saalplan ---

   Ein Raster aus Kästchen, kein Bild. Alle Abstände hängen an --seat-h und
   --seat-gap: eine Zeile ist genau --seat-row hoch. Nur deshalb lässt sich
   die Seitenreihe rechts sauber um ganze Zeilen versetzen, statt sie mit
   Pixelwerten hinzuschieben, die beim nächsten Schriftgrad nicht mehr passen.

   Die Bühnenleiste nimmt das Theaterrot. Wer für einen Jahrgang eine andere
   Farbe will, hinterlegt sie in den Einstellungen; sie kommt als
   --seatplan-accent am Element an. */

.tha.tha .tha-seatplan-scroll {
	overflow-x: auto;
}

.tha.tha .tha-seatplan {
	--seat-h: 22px;
	--seat-gap: 3px;
	--seat-row: calc(var(--seat-h) + var(--seat-gap));
	--seat-aisle: var(--sp-4);
	min-width: 340px;
}

.tha.tha .tha-seatplan__stage {
	margin-bottom: var(--sp-5);
	padding: 6px 0;
	border-radius: var(--radius-sm);
	background: var(--seatplan-accent, var(--accent));
	color: var(--text-onaccent);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: var(--tracking-caps);
	text-align: center;
	text-transform: uppercase;
}

.tha.tha .tha-seatplan__blocks {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}

.tha.tha .tha-seatplan__block {
	flex: 1 1 0;
	min-width: 0;
}

/* Die Seitenreihe ist nur eine Spalte breit — halb so breit wie ein Block. */
.tha.tha .tha-seatplan__block--seite {
	flex: .5 1 0;
}

.tha.tha .tha-seatplan__group {
	display: flex;
	flex-direction: column;
	gap: var(--seat-gap);
}

/* Zwischen vorn und hinten liegt der Gang. */
.tha.tha .tha-seatplan__group--hinten {
	margin-top: var(--seat-aisle);
}

/* Die drei Gruppen der Seitenreihe stehen um 1, 2 respektive 3 Zeilen tiefer
   als ihre Nachbarn — so sitzen sie auch im Saal. */
.tha.tha .tha-seatplan__group--seite-1 {
	margin-top: var(--seat-row);
}

.tha.tha .tha-seatplan__group--seite-2 {
	margin-top: calc(var(--seat-aisle) + var(--seat-row));
}

.tha.tha .tha-seatplan__group--seite-3 {
	margin-top: calc(3 * var(--seat-row) - var(--seat-h));
}

.tha.tha .tha-seatplan__row {
	display: flex;
	gap: var(--seat-gap);
}

.tha.tha .tha-seatplan__seat {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	height: var(--seat-h);
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border-strong);
	border-radius: 3px;
	background: var(--surface-card);
	font-size: 10.5px;
	line-height: 1;
	color: var(--text-body);
	font-variant-numeric: tabular-nums;
}

/* Die letzten zwei Plätze eines Blocks teilen sich eine Zelle. */
.tha.tha .tha-seatplan__seat--doppel {
	word-spacing: 7px;
}

@media (min-width: 820px) {

	.tha.tha .tha-seatplan {
		--seat-h: 24px;
	}

	.tha.tha .tha-seatplan__seat {
		font-size: 11.5px;
	}
}

/* Preisgruppen — «Vorpremiere», «Sonntag» … stehen als Zwischenzeile über
   ihren Beträgen, wie im Programmheft. Viel Luft darüber, wenig darunter:
   so gehört die Zeile sichtbar zu dem, was folgt, und nicht zur Haarlinie
   der Gruppe darüber. */
.tha.tha .tha-prices__group {
	margin: var(--sp-5) 0 var(--sp-1);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--red-600);
}

.tha.tha .tha-prices__group:first-child {
	margin-top: var(--sp-3);
}

/* Kassaöffnungszeiten sind keine Beträge — etwas ruhiger gesetzt. Und keine
   zwei Ebenen: die drei Zeilen stehen gleichberechtigt nebeneinander, also
   auch ohne die kräftigere Schrift der Preis-Oberzeilen. */
.tha.tha .tha-prices--times dt {
	font-weight: 400;
}

.tha.tha .tha-prices--times dd {
	font-size: 17px;
	font-weight: 600;
	color: var(--text-muted);
}

/* ==========================================================================
   32. Chronik — die abgeschlossenen Jahrgänge

   Kein Bildraster: für 1937 bis 2007 gibt es keine Plakate, dafür Angaben.
   Deshalb eine Liste mit fester Jahresspalte — das Auge findet ein Jahr in
   einer Kolonne sofort, in einem Fliesstext nie.
   ========================================================================== */

:is(#left-area, body) .tha.tha .tha-chronik {
	list-style: none;
	margin: var(--sp-6) 0 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.tha.tha .tha-chronik__row {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: var(--sp-4);
	align-items: baseline;
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--line);
}

.tha.tha .tha-chronik__year {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.tha.tha .tha-chronik__body {
	display: block;
}

.tha.tha .tha-chronik__title {
	display: block;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--text);
}

.tha.tha .tha-chronik__genre {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	color: var(--text-muted);
}

.tha.tha .tha-chronik__meta {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var(--text-muted);
}

/* Jahre ohne Aufführung — 1939 und 1942. Die Zeile bleibt stehen, weil die
   Lücke selbst Teil der Geschichte ist, tritt aber zurück. */
.tha.tha .tha-chronik__row--leer .tha-chronik__year {
	color: var(--text-muted);
	font-weight: 400;
}

.tha.tha .tha-chronik__none {
	font-size: 15px;
	font-style: italic;
	color: var(--text-muted);
}

@media (max-width: 560px) {
	.tha.tha .tha-chronik__row {
		grid-template-columns: 4rem 1fr;
		gap: var(--sp-3);
	}
	.tha.tha .tha-chronik__year {
		font-size: 19px;
	}
	.tha.tha .tha-chronik__title {
		font-size: 17px;
	}
}

/* ==========================================================================
   33. Fotos in der Chronik

   Zugeklappt eine Zeile, aufgeklappt ein Raster. Der Knopf sagt, wie viele
   Aufnahmen dahinterstecken — «12 Fotos» ist eine Information, ein blosser
   Pfeil wäre keine.
   ========================================================================== */

.tha.tha .tha-fotos {
	margin-top: var(--sp-3);
}

.tha.tha .tha-fotos__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 3px 10px 3px 0;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--accent);
	list-style: none;
	user-select: none;
}

/* Das eigene Dreieck der Browser sieht in jedem anders aus. */
.tha.tha .tha-fotos__toggle::-webkit-details-marker {
	display: none;
}

.tha.tha .tha-fotos__toggle::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .15s ease;
}

.tha.tha .tha-fotos[open] .tha-fotos__toggle::before {
	transform: rotate(90deg);
}

.tha.tha .tha-fotos__toggle:hover {
	text-decoration: underline;
}

:is(#left-area, body) .tha.tha .tha-fotos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--sp-3);
	margin: var(--sp-3) 0 var(--sp-2);
	padding: 0;
	list-style: none;
	align-items: start;
}

.tha.tha .tha-fotos__grid a {
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: none;
}

.tha.tha .tha-fotos__grid a:hover .tha-img {
	transform: scale(1.04);
}

.tha.tha .tha-fotos__grid .tha-img {
	transition: transform .2s ease;
}

@media (max-width: 560px) {
	:is(#left-area, body) .tha.tha .tha-fotos__grid {
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	}
}

/* --- Navigation des Themes ausblenden -----------------------------------
   Nur die Menüliste, nicht die ganze Kopfzeile. Logo, Suche und die
   Netzwerkleiste darüber bleiben stehen — sie gehören zu stvauw.ch, nicht
   zur Theater-Seite, und ohne sie käme niemand mehr zum Verein zurück.

   Getroffen wird Divis `#top-menu-nav` samt dem Aufklapper fürs Handy; die
   übrigen Selektoren decken die gängigen Themes ab, falls einmal gewechselt
   wird. */

body.tha-hide-themenav #top-menu-nav,
body.tha-hide-themenav #et_mobile_nav_menu,
body.tha-hide-themenav #et-top-navigation > nav,
body.tha-hide-themenav .main-navigation,
body.tha-hide-themenav #site-navigation,
body.tha-hide-themenav .primary-menu-container {
	display: none !important;
}

/* Divi bemisst die Kopfzeile am Menü. Ist es weg, bleibt sonst eine hohe
   leere Leiste stehen — das Logo soll aber nicht plötzlich schweben. */
body.tha-hide-themenav #et-top-navigation {
	padding-top: 0 !important;
}

/* ==========================================================================
   34. Listen gegen Theme-Regeln MIT ID

   Der Reset in Abschnitt 2 liegt bei (0,2,0), die Komponenten bei (0,3,0).
   Divi schreibt aber `#left-area ul { padding: 0 0 23px 1em }` — und eine ID
   wiegt schwerer als jede Zahl von Klassen. Ergebnis am 25.07.2026 auf der
   Live-Seite: die Menüleiste sass 11,5 px zu hoch, weil unter der Liste
   23 px Luft hingen, und Spieldaten wie Rückblick standen 15,5 px eingerückt.

   Kein `!important` — das wäre der Anfang vom Ende der Kaskade. Stattdessen
   `:is(#left-area, body)`: der Selektor trifft ueberall, weil `body` immer
   passt, traegt aber die Spezifitaet des staerksten Arguments — also die
   einer ID. Macht (1,2,1) und schlaegt Divis (1,0,1).

   WICHTIG: jede Regel, die einer <ul> oder <ol> ein eigenes Innenmass gibt,
   braucht denselben Vorsatz. `preview/test-css.php` prueft das.
   ========================================================================== */

:is(#left-area, body) .tha.tha ul,
:is(#left-area, body) .tha.tha ol {
	margin: 0;
	padding: 0;
	list-style: none;
}


/* --- Suche des Themes -----------------------------------------------------
   Divi haengt rechts in der Kopfzeile eine Lupe. Ist die Menueleiste
   ausgeblendet, bleibt sie als 18 Pixel breiter, null Pixel hoher Rest
   stehen — anklickbar, aber ohne sichtbares Feld. Ein Knopf, der nichts
   zeigt und trotzdem reagiert, ist schlimmer als keiner. */

body.tha-hide-themenav #et_top_search,
body.tha-hide-themenav .et_search_outer,
body.tha-hide-themenav .et-search-form {
	display: none !important;
}

/* ==========================================================================
   35. Theater-Typografie für den übrigen Seiteninhalt

   Für Seiten, deren Inhalt NICHT im Shortcode steckt — «Speisekarte» und
   «Berichte» sind mit dem Divi-Theme-Builder gebaut, ihr Inhalt liegt in
   Modulen. Eine Navigationsleiste darüber macht daraus noch keine Seite im
   Theater-Design; darunter blieb Open Sans 14 px in Grau stehen.

   Übernommen werden nur Schrift, Grösse, Farbe und der Papierhintergrund.
   KEINE Abstände, keine Rahmen, keine Rasterangaben — sonst zerlegt es die
   Divi-Module, und das wäre schlimmer als eine fremde Schrift.

   Zwei Dinge halten die Regeln in Schach:

   `:is(#left-area, body)` hebt sie über Divis ID-Regeln, wie in Abschnitt 34.

   `:not(.tha *)` hält sie aus unserem eigenen Baum heraus. Ohne das hätte
   die Navigation ihre eigene Schriftgrösse verloren — beim Messen an der
   Live-Seite fiel genau das auf: 15,5 px wurden zu 16,5 px.
   ========================================================================== */

:is(#left-area, body).tha-typo #main-content,
:is(#left-area, body).tha-typo .site-main {
	background: var(--paper-50);
}

:is(#left-area, body).tha-typo .entry-content p:not(.tha *),
:is(#left-area, body).tha-typo .entry-content li:not(.tha *),
:is(#left-area, body).tha-typo .entry-content td:not(.tha *),
:is(#left-area, body).tha-typo .entry-content .et_pb_text_inner:not(.tha *) {
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--gray-700);
}

:is(#left-area, body).tha-typo .entry-content h1:not(.tha *),
:is(#left-area, body).tha-typo .entry-content h2:not(.tha *),
:is(#left-area, body).tha-typo .entry-content h3:not(.tha *),
:is(#left-area, body).tha-typo .entry-content h4:not(.tha *) {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink-900);
	line-height: 1.05;
	letter-spacing: -0.01em;
}

:is(#left-area, body).tha-typo .entry-content h1:not(.tha *) {
	font-size: clamp(34px, 5vw, 52px);
}

:is(#left-area, body).tha-typo .entry-content h2:not(.tha *) {
	font-size: clamp(26px, 3.4vw, 36px);
}

:is(#left-area, body).tha-typo .entry-content h3:not(.tha *) {
	font-size: 22px;
}

/* Knöpfe behalten ihre eigene Farbe — sie sind bereits gestaltet. */
:is(#left-area, body).tha-typo .entry-content a:not(.tha *):not(.et_pb_button) {
	color: var(--red-700);
}

/* ==========================================================================
   36. Die Leiste in einem Page-Builder-Modul

   Steht `[theater_auw_nav]` allein in einem Divi-Modul — etwa in der
   Theme-Builder-Vorlage der Jahrgangsseiten —, dann umgibt sie ein Modul mit
   3 px Innenabstand oben und eine Sektion mit weissem Hintergrund. Beides
   zusammen ergibt einen hellen Streifen über der dunklen Leiste. Genau der
   war am 25.07.2026 auf /theater/project/2694/ zu sehen: Sektion ab 32,
   Leiste erst ab 35.

   Gelöst mit `:has()`, weil das Modul ein VORFAHRE unserer Wurzel ist — von
   innen kommt man da mit gewöhnlichen Selektoren nicht heran. Kennt ein
   Browser `:has()` nicht, fällt die Regel ersatzlos weg und die 3 px bleiben
   stehen; das ist die harmlose Richtung.

   Getroffen wird ausschliesslich, was unsere Leiste unmittelbar umschliesst
   — daher `.tha--bar` und nicht `.tha`. Ein Modul mit richtigem Inhalt
   behält seine Abstände.
   ========================================================================== */

:is(#left-area, body) .et_pb_module:has(> .tha--bar),
:is(#left-area, body) .et_pb_module:has(> .et_pb_code_inner > .tha--bar),
:is(#left-area, body) .et_pb_module:has(> .et_pb_text_inner > .tha--bar) {
	padding-top: 0;
	padding-bottom: 0;
}

:is(#left-area, body) .et_pb_section:has(.tha--bar) {
	background-color: transparent;
	padding-top: 0;
	padding-bottom: 0;
}

/* ==========================================================================
   37. Speisekarte

   Zwei Karten nebeneinander: Speisen und Getränke. Die Zeilen selbst sind
   dieselbe Komponente wie die Eintrittspreise (`.tha-prices`) — beide sind
   «Bezeichnung links, Betrag rechts, Haarlinie dazwischen», und zwei
   Komponenten dafür wären zwei Stellen zum Auseinanderlaufen.

   `auto-fit` statt zweier fester Spalten: steht nur eine der beiden Karten
   da, nimmt sie die ganze Breite, statt eine leere Hälfte offen zu lassen.
   ========================================================================== */

.tha.tha .tha-karte {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-10);
	margin-top: var(--sp-6);
}

@media (min-width: 820px) {

	.tha.tha .tha-karte {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--sp-12);
		align-items: start;
	}
}

/* Ein Gericht ohne Preis behält seine ganze Zeile — sonst rutschte die
   Bezeichnung in die halbe Breite, obwohl rechts nichts steht. */
.tha.tha .tha-prices--karte .tha-prices__row dt {
	flex: 1 1 auto;
}

/* Gerichtsnamen dürfen umbrechen und stehen etwas ruhiger als Preiszeilen:
   auf einer Karte liest man Zeile für Zeile, nicht Betrag für Betrag. */
.tha.tha .tha-prices--karte dt {
	font-weight: 500;
}

.tha.tha .tha-prices--karte dd {
	font-size: 18px;
}

/* ==========================================================================
   38. Updates

   Eine Liste von Mitteilungen, neueste zuoberst. Das Datum steht auf schmalen
   Viewports über dem Eintrag und ab 720px in einer eigenen Spalte links —
   damit das Auge die Chronologie in einer senkrechten Linie abfahren kann,
   ohne jeden Text zu lesen.

   Die Aussenmasse der <ol> brauchen ID-Stärke: Divi setzt
   `#left-area ul, #left-area ol { padding: 0 0 23px 1em }`, und dagegen
   verliert jede Zahl von Klassen. Siehe Abschnitt 34.
   ========================================================================== */

:is(#left-area, body) .tha.tha .tha-updates {
	list-style: none;
	margin: var(--sp-6) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tha.tha .tha-update {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-2);
	padding: var(--sp-6) 0;
	border-top: 1px solid var(--border-subtle);
}

.tha.tha .tha-update:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 720px) {

	.tha.tha .tha-update {
		grid-template-columns: 12rem 1fr;
		gap: var(--sp-6);
	}
}

.tha.tha .tha-update__date {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: var(--tracking-caps);
	color: var(--red-600);
	font-variant-numeric: tabular-nums;
}

.tha.tha .tha-update__title {
	margin: 0 0 var(--sp-3);
}

/* Ein Bild zum Eintrag bleibt klein: es begleitet die Mitteilung, es ist
   nicht die Mitteilung. Ohne Deckel füllte ein Probenfoto die halbe Seite und
   der nächste Eintrag rutschte aus dem Blick. */
.tha.tha .tha-update__media {
	margin: 0 0 var(--sp-4);
	max-width: 420px;
}

.tha.tha .tha-update__more {
	margin: var(--sp-3) 0 0;
}

.tha.tha .tha-update__more a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--text-small);
	font-weight: 600;
	color: var(--link);
	text-decoration: none;
}

.tha.tha .tha-update__more a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   37. Berichte

   Ein Bericht ist ein Beitrag, kein zusammengesetzter Seitentyp: der Text
   steht so da, wie ihn jemand im Editor geschrieben hat. Abschnitt 34 nimmt
   ihm die Blog-Seitenleiste und gibt ihm die volle Breite; genau das ist
   hier zu viel des Guten. «Volle Breite» heisst auf einem Bildschirm mit
   1270 px eine Zeile von 1255 px — vorher waren es 794, und die waren
   lesbarer. Deshalb bekommt der Text seine Zeilenlaenge zurueck, jetzt aber
   mittig statt am linken Rand neben «Neueste Beiträge».

   Und der Titel bleibt stehen (siehe Tha_Pagechrome::is_bericht) — dann muss
   er auch aussehen wie ein Theater-Titel. Abschnitt 35 fasst ihn nicht an:
   `.entry-title` steht ausserhalb von `.entry-content`.
   ========================================================================== */

body.tha-bericht #left-area {
	max-width: 820px;
	margin-left: auto !important;
	margin-right: auto !important;
}

body.tha-bericht .entry-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ink-900);
}

/* «by Michael | Juni 17, 2026 | Allgemein» — die Zeile darf bleiben, aber
   leise. Sie ist Herkunftsangabe, nicht Inhalt. */
body.tha-bericht .post-meta,
body.tha-bericht .post-meta a {
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gray-500);
}