/* ==========================================================================
   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,
body.tha-anmeldung {
	/* 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;
}

/* Der Reset trifft auch die <svg> — und damit die Darstellungsattribute, die
   im Markup stehen: `fill="none"`, `stroke="currentColor"`, `stroke-width="2"`.
   Sie sind Autorenstile der Spezifität (0,0,0) und verlieren gegen (0,2,0).
   Ein Linien-Icon käme deshalb als schwarze Fläche an — und ein Pfad, der nur
   aus Strichen besteht (das Menü-Symbol), als gar nichts.

   Was ein Icon ausmacht, steht deshalb hier und nicht nur im Markup. Beide
   sagen dasselbe; diese Regel gewinnt. */
.tha.tha svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.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-h4,
.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);
}

/* Eine Ebene unter h3 — die Spaltentitel des Premieren-Menüs. Deutlich
   ruhiger als die Überschrift darüber und kleiner als die Zwischenzeilen der
   Gänge in Rot, damit «Fleisch» und «Vegi» nicht wie ein weiterer Gang
   aussehen. */
.tha.tha .tha-h4 {
	font-size: var(--text-body-size);
	margin-bottom: var(--sp-2);
	color: var(--text-muted);
}

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

/* Der zweite Selektor ist für den Kicker IN einer Karte. `.tha-card p` hat ein
   Element mehr als `.tha-kicker` und gewinnt sonst — der Kicker würde grau und
   so gross wie der Kartentext, und damit verschwände genau das, was er sagt. */
.tha.tha .tha-kicker,
.tha.tha .tha-card .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__doors {
	margin-left: var(--sp-2);
}

.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);
}

/* Eine markierte Karte: der rote Balken an der Seite sagt «das hier ist
   etwas anderes als die Karten daneben» — deutlicher als eine weitere Karte
   im Raster, ohne dass sie schreit. */
.tha.tha .tha-card--mark {
	border-left: 4px solid var(--red-600);
	margin-top: var(--sp-6);
}

/* Der Hinweis unter dem Menü. `.tha-card p` setzt jeden Absatz auf 15px ohne
   Luft nach oben — unter den Haarlinien des Menüs klebte er sonst. */
.tha.tha .tha-card--mark .tha-note {
	margin-top: var(--sp-4);
}

.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;
}

/* --------------------------------------------------------------------------
   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);
}

/* --- Logos gross ansehen --------------------------------------------------

   In der Wand ist ein Logo eine Reihe, keine Information. Ein Klick öffnet es
   über der Seite — gross, solange das Bild gross genug ist. Hochskaliert wird
   nichts: ein 400px-Logo auf 1100px gezogen ist nicht gross, nur unscharf.
   Deshalb `max-width` statt `width`.

   Der Dialog ist ein `<dialog>`. Escape, die Fokussperre und das Zurückgeben
   des Fokus bringt der Browser mit; eigenes JavaScript füllt nur Bild und
   Beschriftung. Ohne JavaScript bleibt der Klick ein gewöhnlicher Link auf
   das Bild — er funktioniert weiterhin, nur ohne Rahmen drumherum.
   -------------------------------------------------------------------------- */

.tha.tha .tha-zoom {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: zoom-in;
}

/* Der Rahmen blendet über, statt zu springen. Nur Rahmen und Schatten — die
   Karte selbst wächst nicht. */
.tha.tha .tha-people--logos .tha-media,
.tha.tha .tha-people--logos .tha-placeholder {
	transition: border-color var(--dur-fast) var(--ease-out),
		box-shadow var(--dur-fast) var(--ease-out);
}

/* Nur der Rahmen der Karte reagiert auf das Zeigen. Die Karte selbst wächst
   nicht — ein Raster, das unter dem Zeiger zappelt, ist unruhig.
   Das `:is(#left-area, body)` davor ist Pflicht: ohne es verliert der
   Schatten gegen die Regel des Gruppenbildes weiter unten, die dieselbe
   Kachel meint und schwerer wiegt. */
:is(#left-area, body) .tha.tha .tha-zoom:hover .tha-media,
:is(#left-area, body) .tha.tha .tha-zoom:hover .tha-placeholder {
	border-color: var(--border-strong);
	box-shadow: var(--shadow-card);
}

.tha.tha .tha-lightbox {
	/* `fit-content` rahmt genau das Bild. Die Grösse kommt aus dem Bild
	   selbst (siehe unten), nicht aus einer festen Kastenbreite — sonst
	   stünde ein 300px-Logo in einem 1100px-Kasten. */
	width: fit-content;
	max-width: calc(100vw - 24px);
	max-height: 92vh;
	padding: var(--sp-4);
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--paper-0);
	box-shadow: var(--shadow-stage);
	color: var(--text-body);
	/* Der Rand bleibt sichtbar: der Schliessen-Knopf sitzt in der Ecke und
	   würde von einem eigenen Rollbalken angeschnitten. */
	overflow: visible;
}

/* Der Vorhang über der Seite. Das Theme hat hier keine Meinung, aber die
   Standard-Abdunklung des Browsers ist schwächer als das Bühnenbild. */
.tha.tha .tha-lightbox::backdrop {
	background: rgba(21, 17, 18, .72);
}

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

/* Das Bild gibt die Grösse vor, gedeckelt von drei Seiten:
   — die Breite der Datei (`--tha-zoom-px`), damit nichts hochskaliert wird,
   — die Höhe des Fensters (`72vh`, über das Seitenverhältnis umgerechnet),
   — die Breite des Fensters für schmale Geräte.
   Die beiden Werte setzt das JavaScript beim Öffnen aus dem Link; ohne sie
   gilt ein Kasten, in dem jeder Sponsor Platz hat. */
.tha.tha .tha-lightbox__img {
	display: block;
	width: min(
		var(--tha-zoom-px, 720px),
		calc(72vh * var(--tha-zoom-ratio, 4 / 3)),
		1080px,
		calc(100vw - 64px)
	);
	height: auto;
	margin: 0 auto;
	border-radius: var(--radius-sm);
}

.tha.tha .tha-lightbox__caption {
	margin: var(--sp-3) 0 0;
	text-align: center;
	font-size: var(--text-small);
	line-height: var(--leading-tight);
}

.tha.tha .tha-lightbox__name {
	display: block;
	font-weight: 600;
	color: var(--text-body);
}

.tha.tha .tha-lightbox__role {
	color: var(--text-muted);
}

.tha.tha .tha-lightbox__close {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--ink-950);
	color: var(--paper-0);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}

.tha.tha .tha-lightbox__close:hover {
	background: var(--red-600);
}

/* Am Handy zählt jeder Pixel: weniger Rand, das Bild nimmt den Rest. */
@media (max-width: 560px) {

	.tha.tha .tha-lightbox {
		padding: var(--sp-2);
	}
}

/* ==========================================================================
   22. Sponsoring-Anmeldung

   Der Seitenkopf der Anmeldeseite («Anmeldung Sponsoring») wird in einer
   `.tha`-Wurzel gerendert — dieselbe wie auf den übrigen Seiten, damit er
   Seitenkopf-Stile, Tokens und Schrift erbt. Der Seiteninhalt daneben
   (das echte Divi-Formular) liegt ausserhalb der Wurzel und behält seine
   Theme-Stile. Nur das Ausblenden nach der Frist greift von aussen, als
   Regel gegen das Theme — gebunden an die Körperklasse `tha-anmeldung-zu`.
   ========================================================================== */

/* Der kleine Hinweis im Seitenkopf: «Anmeldung bis …» */

.tha.tha .tha-pagehead__badge {
	display: inline-block;
	margin: var(--sp-6) 0 0;
	padding: var(--sp-2) var(--sp-4);
	background: rgba(248, 246, 242, .08);
	border: 1px solid var(--border-onstage);
	border-radius: var(--radius-pill);
	color: var(--text-onstage);
	font-size: var(--text-small);
	font-weight: 600;
}

.tha.tha .tha-pagehead__badge--zu {
	background: transparent;
	border-color: var(--red-600);
	color: var(--red-100);
}

/* Die Unterzeile unter dem Titel (Bestätigungsseite). */

.tha.tha .tha-pagehead__subtitle {
	margin: var(--sp-2) 0 0;
	color: var(--text-onstage-muted);
	font-size: var(--text-lead);
	font-weight: 600;
}

/* Der Aufruf auf der Hauptseite — Text und Knopf in einer Zeile. */

.tha.tha .tha-anmeldung-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-8);
	flex-wrap: wrap;
}

.tha.tha .tha-anmeldung-cta__copy {
	max-width: 62ch;
}

.tha.tha .tha-anmeldung-cta__meta {
	color: var(--text-onstage-muted);
	margin: var(--sp-2) 0 0;
}

@media (max-width: 640px) {

	.tha.tha .tha-anmeldung-cta {
		gap: var(--sp-4);
	}

	.tha.tha .tha-anmeldung-cta .tha-btn {
		flex: 1 1 auto;
	}
}

/* --- Nach Ablauf der Frist: das Formular verschwindet ----------------------
   Das Formular liegt ausserhalb der `.tha`-Wurzel; ausgeblendet wird es
   deshalb wie der Seitenrahmen in Abschnitt 23 über die Körperklasse,
   die `Tha_Anmeldung` nur auf dieser Seite setzt. */

body.tha-anmeldung.tha-anmeldung-zu .tha-anmeldung-content .et_pb_contact_form_container {
	display: none !important;
}

body.tha-anmeldung.tha-anmeldung-zu .tha-anmeldung-content .et_pb_contact_form_container * {
	display: none !important;
}

/* ==========================================================================
   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,
.tha.tha .tha-premiere__dish {
	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, und der Gang zwischen
   vorn und hinten misst --seat-aisle.
   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;
}

.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);
}

.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,
.tha.tha .tha-premiere__gang {
	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;
	}
}

/* Das Premieren-Menü: EIN Raster mit einem Gang pro Zeile, nicht zwei Listen
   nebeneinander.

   Nebeneinander hätte jede Spalte ihre eigene Höhe — die Haarlinie unter einem
   Gericht stünde links auf einer anderen Höhe als rechts, sobald der eine
   Text eine Zeile mehr braucht. Hier liegen Fleisch und vegi in DERSELBEN
   Zeile; sie ist so hoch wie der längere Text, und die Linien treffen sich.
   Deshalb auch `stretch`: das Karten-Raster setzt ab 820px `align-items:
   start`, das würde die Zellen auf ihren Inhalt schrumpfen lassen.

   `auto-fit` wie bei der Speisekarte ginge hier nicht: dort sind es zwei
   unabhängige Karten, hier zwei Spalten einer Sache. In einer breiten Karte
   füllte `auto-fit` die Zeile mit lauter leeren Spalten. */
.tha.tha .tha-karte--premiere {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 0 var(--sp-8);
	margin-top: var(--sp-4);
}

@media (min-width: 560px) {

	.tha.tha .tha-karte--premiere {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Der Gang steht einmal über beiden Spalten — auf der Speisekarte steht er
   auch nicht zweimal da. Sein Aussehen kommt von `.tha-prices__group`. */
.tha.tha .tha-premiere__gang {
	grid-column: 1 / -1;
}

/* Das Gericht. Die Linie sitzt an der Zelle, nicht an einer Zeile darin: nur
   so liegt sie auf beiden Seiten auf gleicher Höhe. */
.tha.tha .tha-premiere__dish {
	border-bottom: 1px solid var(--border-subtle);
	padding: 10px 0;
	font-weight: 500;
}

/* Die Variante am Gericht selbst. Nur sichtbar, wo die Spalten untereinander
   stehen — dort fällt die Überschrift oben weg, und ohne diese Zeile wüsste
   niemand, welches der beiden Gerichte das vegetarische ist. */
.tha.tha .tha-premiere__variant {
	display: none;
}

@media (max-width: 559px) {

	.tha.tha .tha-karte--premiere .tha-h4 {
		display: none;
	}

	.tha.tha .tha-premiere__variant {
		display: block;
		font-family: var(--font-display);
		font-weight: 600;
		font-size: var(--text-caption);
		letter-spacing: var(--tracking-caps);
		text-transform: uppercase;
		color: var(--text-muted);
	}
}

/* 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);
}

/* ==========================================================================
   39. Sponsorenband

   Alle Logos der Gruppe «sponsoren» ziehen auf der Startseite vorbei —
   dieselbe Auswahl aus der Mediathek wie auf der Unterseite, dort eine Wand
   zum Lesen, hier eine Reihe in Bewegung.

   Das Band läuft, weil die Liste ZWEIMAL im Markup steht: die zweite Kopie
   rückt genau dort nach, wo die erste verschwindet. Die Animation schiebt den
   Streifen um 50 % seiner Breite, also um genau eine Kopie; danach stimmt das
   Bild wieder mit dem Anfang überein und der Sprung ist keiner. Damit die
   Naht zwischen den Kopien so breit ist wie der Abstand zwischen zwei Logos,
   trägt jede Kopie rechts ein Polster in dieser Breite.

   Die zweite Kopie ist für Vorlesegeräte ausgeblendet — sie zeigt nichts, was
   nicht schon dasteht. Und ohne Bewegung (siehe unten) fällt sie ganz weg.
   ========================================================================== */

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

.tha.tha .tha-band__viewport {
	overflow: hidden;
	margin-top: var(--sp-6);
}

.tha.tha .tha-band__track {
	display: flex;
	width: max-content;
	animation: tha-band-roll var(--tha-band-dur, 60s) linear infinite;
}

:is(#left-area, body) .tha.tha .tha-band__group {
	display: flex;
	align-items: stretch;
	gap: var(--sp-4);
	margin: 0;
	padding: 0 var(--sp-4) 0 0;
	list-style: none;
}

.tha.tha .tha-band__item {
	flex: 0 0 auto;
	width: 132px;
	height: 76px;
	margin: 0;
}

/* Logos stehen auf Weiss und werden nicht beschnitten: dieselbe Karte wie in
   der Wand, nur eine Nummer kleiner. Alle Karten sind gleich gross — ein Band
   aus unterschiedlich hohen Logos eiert. */
.tha.tha .tha-band__item .tha-media,
.tha.tha .tha-band__item .tha-placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	background: var(--paper-0);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}

.tha.tha .tha-band__item .tha-media {
	padding: var(--sp-3);
}

/* Der Platzhalter trägt den Firmennamen statt eines Logos. Er ist schmaler
   als das Logo je sein wird — also kleinere Schrift, sonst läuft der Name
   unten aus der Karte. */
.tha.tha .tha-band__item .tha-placeholder {
	padding: var(--sp-2);
	font-size: 11px;
	line-height: 1.25;
}

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

@keyframes tha-band-roll {

	to {
		transform: translateX(-50%);
	}
}

/* Ohne Bewegung bleibt das Band stehen — dann muss es alles zeigen können:
   umbrechend statt am Rand abgeschnitten, und ohne die zweite Kopie. */
@media (prefers-reduced-motion: reduce) {

	.tha.tha .tha-band__viewport {
		overflow: visible;
	}

	.tha.tha .tha-band__track {
		animation: none !important;
		width: auto;
	}

	:is(#left-area, body) .tha.tha .tha-band__group {
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
	}

	:is(#left-area, body) .tha.tha .tha-band__group--dup {
		display: none;
	}
}