/* ============================================================
   TGF 2027 Theme — Oqtane
   Portiert aus dem Design-Prototyp "TGF Website Relaunch"
   (Variante "Elegant Gold"). Harness, tote Skins (poster/slant)
   und der Seiten-Umschalter wurden entfernt; jede ehemalige
   "Seite" ist ein eigenes Oqtane-Layout.

   Palette-Scope:
     .tgf-public  → öffentliche Layouts (Startseite/Standard/breit)
     .tgf-intern  → Dark-Portal (Intern)
   ============================================================ */

/* ---------- Fonts (lokal gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "abolition";
  src: url("fonts/Abolition-Regular.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "abolition";
  src: url("fonts/Abolition-Oblique.woff2") format("woff2");
  font-display: swap; font-style: italic; font-weight: 400;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/Oswald-Variable.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 300 700;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/Kalam-Light.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 300;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/Kalam-Regular.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Light.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 300;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Regular.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 400;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Medium.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 500;
}
@font-face {
  font-family: "Roboto";
  src: url("fonts/Roboto-Bold.woff2") format("woff2");
  font-display: swap; font-style: normal; font-weight: 700;
}

/* ---------- Globale Tokens ---------- */
:root {
  --font-display: "abolition", "Anton", "Arial Narrow", sans-serif;
  --font-label: "Oswald", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, sans-serif;

  --maxw: 1240px;
  --site-maxw: 1500px;
  --reading: 760px;            /* Breite der Lesespalte (.prose) = Breite der Zonen-Panes auf „Standard" */
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Schräge (Markenzeichen): EIN Winkel für Hero, Bänder, Leiste, Footer */
  --slant-h: clamp(26px, 5vw, 75px);
  --navH: calc(58px + var(--slant-h));
}

/* ============================================================
   ROOT-WRAPPER — Letterbox + zentrierte "Box"
   (ersetzt das #stage des Prototyps; die Seite scrollt normal)
   ============================================================ */
.tgf2027 { background: #3b3733; }
.tgf2027 * { box-sizing: border-box; }
/* Eigenes BFC auf dem Inhalt: verhindert, dass das margin-top des Goldkopfs
   (navH − Schräge) durch main/.site bis zum body kollabiert (sonst 58px-Versatz
   + weisse html-Fläche oben). */
.site main { display: flow-root; }

/* Sticky-Footer für Standard / Standard breit (Seiten mit .page-geschichte): Layout füllt
   die Viewport-Höhe, der Footer liegt immer zuunterst. Das cremefarbene Leseband wächst
   mit, damit die Footer-Schräge weiterhin in die Creme schneidet (sonst klaffte bei wenig
   Inhalt der dunkle Seitenhintergrund auf). Via :has gescopt → Startseite (.page-start)
   und Intern bleiben unberührt. Flex-Items sind BFCs → Goldkopf-margin-top bleibt erhalten. */
.site.tgf-public:has(.page-geschichte) { display: flex; flex-direction: column; }
.tgf-public main:has(.page-geschichte) { flex: 1 0 auto; display: flex; flex-direction: column; }
.tgf-public .page-geschichte { flex: 1 0 auto; display: flex; flex-direction: column; }
.tgf-public .page-geschichte > .reading.band { flex: 1 0 auto; }

.site {
  --on-accent: #fff;
  position: relative;
  max-width: var(--site-maxw);
  margin-inline: auto;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  box-shadow: 0 0 80px rgba(0,0,0,.45);
}

/* Fett im Fliesstext: Der Body läuft auf Roboto Light (300). Der Browser-/Bootstrap-Default
   für <strong>/<b> ist `font-weight: bolder` — das ist RELATIV und ergibt vom Light-Body aus
   nur 400 (Regular), also kaum kräftiger. Darum explizit auf 700 (Roboto Bold ist geladen),
   damit Fett klar sichtbar ist — wie unter DNN (dort Body 400 → bolder = 700). */
.tgf-public strong, .tgf-public b { font-weight: 700; }

/* ============================================================
   ÖFFENTLICHE PALETTE (.tgf-public) — warmes Bühnen-Dunkel
   ============================================================ */
.tgf-public {
  --bg: #1c1712; --bg-2: #241d16; --surface: #2a2219; --surface-2: #322619;
  --text: #F3EBDC; --muted: #c2b399; --line: rgba(201,162,75,.28);
  --red: #c90000; --red-deep: #9a0000;
  --gold: #B49355; --gold-soft: #d8bd80;
  --hero-tint: radial-gradient(72% 58% at 50% 16%, rgba(201,162,75,.16) 0%, rgba(201,162,75,0) 60%), linear-gradient(180deg, rgba(20,15,11,.12) 0%, rgba(20,15,11,.14) 50%, rgba(20,15,11,.52) 76%, rgba(24,17,12,.95) 100%);
  --nav-text: #ffffff;
  --accent: var(--gold);
  background: var(--bg);
  color: var(--text);
}
/* Glow/Vignette statt flacher Schwärze */
.tgf-public {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(201,162,75,.13), transparent 62%),
    radial-gradient(820px 540px at 86% 4%, rgba(201,0,0,.08), transparent 58%),
    var(--bg);
}
/* feine Filmkorn-Textur */
.tgf-public::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   OQTANE-INTEGRATION — Container + Verwaltungswerkzeuge
   ============================================================ */
/* Schlichter Default-Container: eckig, dezente Linie, kein Schatten. */
.tgf2027-module { position: relative; }
.tgf2027-module-head { display: flex; align-items: baseline; gap: 12px; }
.tgf2027-module-title { margin: 0; }
/* Modul-Titel etwas luftiger — die kleineren stärker als die grossen: der h3-Untertitel bekommt
   volle Laufweite, der grössere h2-Haupttitel nur einen dezenten Anteil (sonst zu breit).
   h4 läuft in Roboto (Body) und bekommt keine Laufweite. */
h2.tgf2027-module-title { letter-spacing: .04em; }
h3.tgf2027-module-title { letter-spacing: .1em; }
/* Intern läuft ausschliesslich in Roboto (kein Abolition) → KEINE Laufweite auf Modultiteln,
   sonst wirken v.a. Untertitel (h3) „gesperrt". Gilt für alle Stufen (Reini 11.07.2026). */
.tgf-intern .tgf2027-module-title { letter-spacing: normal; }
/* Titelstufen im Cockpit (Reini 16.07.2026). Ohne diese Angaben erben die Modultitel die
   Bootstrap-Vorgaben (h2 2rem / h3 1.75rem / h4 1.5rem) — dimensioniert wurden sie nie.
   Ein h2 lag damit bei 32px und war nur 1,2× kleiner als der Seitentitel (38,4px): der
   goldene Titel wirkte dadurch gedrängt statt fuehrend. Jetzt eine klare Staffel, der
   Seitentitel (.ih-title) geht gleichzeitig auf 2rem zurueck.
   h4 traegt bewusst Textgroesse und wirkt nur ueber das Gewicht — der Fliesstext laeuft
   im Cockpit in 300, der Kontrast reicht also. Bewusst NUR hier und nicht auf globalem
   h2/h3/h4: das träfe sonst jedes Markup bis in die Oqtane-Verwaltungsdialoge. */
.tgf-intern h2.tgf2027-module-title { font-size: 1.4rem; }
.tgf-intern h3.tgf2027-module-title { font-size: 1.2rem; }
.tgf-intern h4.tgf2027-module-title { font-size: 1rem; font-weight: 600; }
.tgf2027-module-body { min-width: 0; }

/* Schnell-Umschalter „Titel" (nur im Bearbeiten-Modus sichtbar): kleine Pille im Modulkopf. */
.tgf2027-title-toggle {
    display: inline-flex; align-items: center; gap: 5px; align-self: center;
    font-family: var(--font-label, inherit); font-size: .72rem;
    text-transform: uppercase; letter-spacing: .04em; line-height: 1.5;
    color: #6f5e4a; background: rgba(180, 147, 85, .16);
    border: 1px solid rgba(180, 147, 85, .45); border-radius: 999px;
    padding: 1px 9px 1px 7px; cursor: pointer; user-select: none;
}
.tgf2027-title-toggle:hover { border-color: var(--red, #c90000); color: var(--red, #c90000); }
.tgf2027-title-toggle input { margin: 0; cursor: pointer; }
/* Konfigurierbarer Nachabstand (Container-Einstellung „Abstand unten") — überschreibt die Automatik.
   „Standard" setzt keine dieser Klassen → Automatik (z.B. Box-Pane-Grundabstand) greift. */
.tgf2027-module.tgf2027-mb-none { margin-bottom: 0; }
.tgf2027-module.tgf2027-mb-sm { margin-bottom: .75rem; }
.tgf2027-module.tgf2027-mb-md { margin-bottom: 1.5rem; }
.tgf2027-module.tgf2027-mb-lg { margin-bottom: 2.5rem; }
/* Nachabstand des Titel-Blocks gestaffelt nach Titelstufe (Haupttitel/Untertitel/Abschnitt).
   :not(.tgf2027-akzentbox), damit die Akzent-Box bei ihren 14px bleibt (sie traegt beide Klassen). */
.tgf2027-module:not(.tgf2027-akzentbox) > .tgf2027-module-head:has(> h2.tgf2027-module-title) { margin-bottom: 1rem; }
.tgf2027-module:not(.tgf2027-akzentbox) > .tgf2027-module-head:has(> h3.tgf2027-module-title) { margin-bottom: 0.75rem; }
.tgf2027-module:not(.tgf2027-akzentbox) > .tgf2027-module-head:has(> h4.tgf2027-module-title) { margin-bottom: 0.5rem; }
/* Container "TGF 2027 Akzent-Box": weisser Kasten mit rotem Strich links (Optik wie die
   früheren .vorverkauf / .info-box). Box = Chrome; Modul liefert nur den Inhalt. */
.tgf2027-akzentbox { background: #FFFEFB; border-left: 4px solid var(--red, #c90000); padding: 26px 26px 28px; }
.tgf2027-akzentbox > .tgf2027-module-head { margin-bottom: 14px; }
.tgf2027-akzentbox .tgf2027-module-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .055em; color: var(--red, #c90000); font-size: 1.3rem; line-height: 1; margin: 0; }

/* Verwaltungswerkzeuge (Benachrichtigungen / Login / ControlPanel) — rechts in der Leiste. */
.nav-tools {
  align-self: flex-start; margin-top: calc(var(--navH) * 0.16);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
/* Login/Logout im laufenden Oqtane zwei verschiedene Strukturen:
   - AUSGELOGGT: <a class="btn ... app-login"> (Klasse am Element selbst, direkter Kind)
   - EINGELOGGT: <span class="app-login"><form class="app-form-inline"><button class="btn">Abmelden</button></form></span>
   Wrapper (span.app-login, dessen form, sowie direkte pencil-form) layout-neutral machen. */
.nav-tools > .app-login,
.nav-tools > .app-login > form.app-form-inline,
.nav-tools > form.app-form-inline {
  display: inline-flex; align-items: center; margin: 0 !important; padding: 0 !important;
}
/* Alle Leisten-Buttons wie die Glocke (.tgf-meldung-bell): nur Icon, KEIN Rahmen,
   transparent; rötlicher Hintergrund nur beim Hover. 36px-Quadrat.
   Trifft: Gear-Toggle (direktes .btn), Login-<a> (a.app-login), Logout-Button (im span>form),
   Stift (in direkter pencil-form) — NICHT das tiefer verschachtelte ControlPanel-Offcanvas. */
.nav-tools > .btn,
.nav-tools > a.app-login,
.nav-tools > .app-login .btn,
.nav-tools > form.app-form-inline > .btn {
  width: 36px; height: 36px; padding: 0; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; line-height: 1; font-size: 18px;
  background: transparent !important; border: 0 !important; color: #fff !important;
}
.nav-tools > .btn:hover,
.nav-tools > a.app-login:hover,
.nav-tools > .app-login .btn:hover,
.nav-tools > form.app-form-inline > .btn:hover { background: rgba(255,255,255,.15) !important; color: #fff !important; }
/* Einheitliche FA-Icons für alle Leisten-Buttons. Unterscheidung NICHT über Wrapper-Klassen
   (die variieren je Login-Zustand), sondern über das Open-Iconic-Icon im Button:
     - Edit-Toggle  → enthält <span class="oi oi-pencil">      → FA Stift
     - Systemsteuerung (Offcanvas-Toggle) → data-bs-toggle="offcanvas" (oi-cog) → FA Zahnrad
     - Login (ausgeloggt) → <a class="app-login"> (kein .oi, Text) → FA Login
     - Logout (eingeloggt) → Text-Button OHNE .oi, in einer <form>      → FA Logout
   oi-Glyphen ausblenden, FA via ::before. */
.nav-tools .oi { /* nur in Leisten-Buttons, nicht im Offcanvas */ }
.nav-tools > form.app-form-inline > .btn .oi,
.nav-tools > .app-login form > .btn .oi,
.nav-tools > .btn[data-bs-toggle="offcanvas"] .oi { display: none; }

.nav-tools > a.app-login::before,
.nav-tools > form.app-form-inline > .btn::before,
.nav-tools > .app-login form > .btn::before,
.nav-tools > .btn[data-bs-toggle="offcanvas"]::before {
  font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; font-weight: 900; font-size: 18px;
}
/* Text-Buttons (Login/Logout) ohne Icon → Text ausblenden */
.nav-tools > a.app-login,
.nav-tools > form.app-form-inline > .btn:not(:has(.oi)),
.nav-tools > .app-login form > .btn:not(:has(.oi)) { font-size: 0 !important; }

.nav-tools > a.app-login::before { content: "\f2f6"; }                         /* Anmelden */
.nav-tools > form.app-form-inline > .btn:not(:has(.oi))::before,
.nav-tools > .app-login form > .btn:not(:has(.oi))::before { content: "\f2f5"; } /* Abmelden */
.nav-tools > form.app-form-inline > .btn:has(.oi-pencil)::before,
.nav-tools > .app-login form > .btn:has(.oi-pencil)::before { content: "\f303"; } /* Stift */
.nav-tools > .btn[data-bs-toggle="offcanvas"]::before { content: "\f013"; }      /* Zahnrad */

/* Benachrichtigungs-Modul ("Mitteilungen", .tgf-meldung-bell) als gleichwertiger
   Leisten-Button: Wrapper layout-neutral, damit alle vier denselben Abstand (gap:8) haben. */
.nav-tools > .nav-notify { display: contents; }
.nav-tools .tgf2027-module,
.nav-tools .tgf2027-module-body { display: contents; }

/* ============================================================
   TYPO BASICS
   ============================================================ */
.site h1, .site h2, .site h3 { font-family: var(--font-display); font-weight: 400; }
.eyebrow {
  font-family: var(--font-label); text-transform: uppercase;
  letter-spacing: .26em; font-size: .78rem; font-weight: 500;
  color: var(--red); display: inline-flex; align-items: center; gap: 12px;
}
.tgf-public .eyebrow { color: var(--gold-soft); }
.eyebrow::before {
  content: ""; width: 30px; height: 2px; background: currentColor; display: inline-block;
}
.eyebrow.center { justify-content: center; }
.lead { font-size: 1.28rem; line-height: 1.6; color: var(--text); }
.muted { color: var(--muted); }
/* Links erben die Textfarbe — Knopf-Links aber nicht: Sonst schlaegt diese Regel
   (zwei Stufen) die Bootstrap-Farbe von .btn-outline-secondary (eine Stufe), und ein
   <a class="btn"> sieht neben einem <button class="btn"> anders aus. Genau das fiel im
   Gutschein-Modul auf: "Bearbeiten" und "Drucken" in verschiedener Schriftfarbe
   (Reini 18.08.2026). */
.site a:not(.btn) { color: inherit; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

.sec-title {
  font-family: var(--font-display); text-transform: uppercase;
  line-height: .96; letter-spacing: .005em;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  margin: 0;
}

section.block { padding: clamp(64px, 9vw, 130px) 0; position: relative; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-cta, .btn-ghost, .btn-ticket {
  font-family: var(--font-body); text-transform: uppercase;
  letter-spacing: .08em; font-size: .78rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 17px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn-cta { background: var(--red); color: #fff; border-color: var(--red); }
.btn-cta:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-2px); color: #fff; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.tgf-public .btn-ghost { border-color: rgba(201,162,75,.5); }
.btn-cta .arr, .btn-ghost .arr { transition: transform .2s var(--ease); }
.btn-cta:hover .arr, .btn-ghost:hover .arr { transform: translateX(4px); }
.btn-mini { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .62rem; padding: 4px 11px; border: 1.5px solid var(--red); color: var(--red); border-radius: var(--radius); text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; }
.btn-mini:hover { background: var(--red); color: #fff; }

/* --- Oqtane-Standardmodule (Seitenverwaltung, Bearbeiten-Dialog etc.): Bootstrap-Buttons an die
   Theme-Palette anpassen statt Bootstrap-Blau/Grün. Gescopt aufs Theme (NICHT global, s. Gotcha
   „keine nackten Bootstrap-Klassen"). Affirmative Aktionen (primary = Bearbeiten/Hinzufügen/Suchen,
   success = Speichern) → GOLD mit dunkler Schrift; danger=rot, secondary=grau → weisse Schrift.
   Schrift via !important + a-Qualifizierung, weil eine !important-Link-Regel (Oqtane/Bootstrap)
   den <a class="btn">-Text sonst rot einfärbt. --- */
.tgf-public .btn-primary, .tgf-public .btn-success,
.tgf-intern .btn-primary, .tgf-intern .btn-success {
  --bs-btn-bg: var(--gold, #B49355);
  --bs-btn-border-color: var(--gold, #B49355);
  --bs-btn-hover-bg: #9c7c43;
  --bs-btn-hover-border-color: #9c7c43;
  --bs-btn-active-bg: #9c7c43;
  --bs-btn-active-border-color: #9c7c43;
  --bs-btn-color: #2a2016;
  --bs-btn-hover-color: #2a2016;
  --bs-btn-active-color: #2a2016;
  --bs-btn-disabled-bg: var(--gold, #B49355);
  --bs-btn-disabled-border-color: var(--gold, #B49355);
}
/* Gold-Buttons: dunkle Schrift erzwingen (Gold ist hell → Kontrast). */
.tgf-public a.btn-primary, .tgf-public button.btn-primary, .tgf-public .btn-primary,
.tgf-public a.btn-success, .tgf-public button.btn-success, .tgf-public .btn-success,
.tgf-intern a.btn-primary, .tgf-intern button.btn-primary, .tgf-intern .btn-primary,
.tgf-intern a.btn-success, .tgf-intern button.btn-success, .tgf-intern .btn-success {
  color: #2a2016 !important;
}
/* Outline-Primary (z.B. „Reservieren" je Zeile) → GOLD-Umriss statt Bootstrap-Blau, passend zur
   Palette. Ruhezustand: goldener Rand + goldene Schrift; Hover/aktiv: gefüllt Gold mit dunkler
   Schrift (wie die soliden Gold-Buttons). Theme-gescopt (nicht global — s. Gotcha oben). */
.tgf-public .btn-outline-primary,
.tgf-intern .btn-outline-primary {
  --bs-btn-color: var(--gold, #B49355);
  --bs-btn-border-color: var(--gold, #B49355);
  --bs-btn-hover-bg: var(--gold, #B49355);
  --bs-btn-hover-border-color: var(--gold, #B49355);
  --bs-btn-hover-color: #2a2016;
  --bs-btn-active-bg: #9c7c43;
  --bs-btn-active-border-color: #9c7c43;
  --bs-btn-active-color: #2a2016;
  --bs-btn-disabled-color: var(--gold, #B49355);
  --bs-btn-disabled-border-color: var(--gold, #B49355);
}
/* Ruhe-Schrift goldig auch für <a class="btn-outline-primary"> (gegen die rote !important-Link-Regel);
   im Hover NICHT übersteuern, dort ist die Schrift dunkel auf Gold. */
.tgf-public a.btn-outline-primary:not(:hover):not(:active),
.tgf-intern a.btn-outline-primary:not(:hover):not(:active) {
  color: var(--gold, #B49355) !important;
}
/* Solide Buttons mit dunklem Grund (grau/rot) → weisse Schrift erzwingen
   (sonst rot, z.B. „Abbrechen" im Bearbeiten-Dialog). */
.tgf-public a.btn-secondary, .tgf-public button.btn-secondary, .tgf-public .btn-secondary,
.tgf-public a.btn-danger,    .tgf-public button.btn-danger,    .tgf-public .btn-danger,
.tgf-intern a.btn-secondary, .tgf-intern button.btn-secondary, .tgf-intern .btn-secondary,
.tgf-intern a.btn-danger,    .tgf-intern button.btn-danger,    .tgf-intern .btn-danger {
  color: #fff !important;
}

/* Admin-Sortierköpfe (Oqtane .app-sort-th.link-primary) sehen sonst wie Bootstrap-Links
   aus (blau + Unterstrich). Auf dem hellen Public-Theme stattdessen wie eine normale
   Tabellen-Überschrift (schlicht, #2a2016, 600); Sortier-Affordanz nur per Hover-
   Unterstreichung. (Intern analog in Theme.Intern.css.) */
.tgf-public .app-sort-th {
  color: #2a2016 !important;
  text-decoration: none !important;
  font-weight: 600;
  cursor: pointer;
}

/* Pagination: aktive Seite + Link-Farbe in Markenrot statt Blau. */
.tgf-public .pagination,
.tgf-intern .pagination {
  --bs-pagination-color: var(--red, #c90000);
  --bs-pagination-hover-color: var(--red-deep, #9a0000);
  --bs-pagination-focus-color: var(--red-deep, #9a0000);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(201,0,0,.2);
  --bs-pagination-active-bg: var(--red, #c90000);
  --bs-pagination-active-border-color: var(--red, #c90000);
  --bs-pagination-active-color: #fff;
}

/* ============================================================
   NAV (obere Leiste, fixed, Boxbreite, rote Schräge via ::before)
   ============================================================ */
/* header.nav statt .nav: Bootstrap nutzt .nav auch für Tab-Strips (ul.nav.nav-tabs) im
   Modul-Inhalt — die dürfen NICHT diese fixe Header-Positionierung erben. */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  width: auto; max-width: var(--site-maxw); margin-inline: auto;
  color: var(--nav-text);
}
header.nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #a00000;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
  filter: drop-shadow(0 12px 18px rgba(120,0,0,.22));
}
.nav-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--navH); display: flex; align-items: flex-start; gap: 28px;
}
/* Die schräge Topbar (Marken-Schräge via ::before-clip-path) lässt unten rechts ein
   TRANSPARENTES Dreieck stehen. Die Element-Box von header.nav/.nav-inner bleibt aber ein
   volles Rechteck (fixed, z-index 50) und fing dort bisher Klicks ab, obwohl man den Inhalt
   darunter sieht. Fix: Container klick-durchlässig; nur die echten Bedienelemente (Logo/Menü/
   Werkzeuge) bleiben klickbar. (Das Element selbst zu clippen scheidet aus — das schnitte das
   Glocken-Dropdown und die Toasts mit ab.)
   Zusätzlich fängt das ::before (die SICHTBARE Bandfläche) Klicks wieder ab: clip-path begrenzt
   auch die Klickfläche, also captured es NUR innerhalb der Schräge — das transparente Dreieck
   bleibt durchlässig. So löst ein Verklicken neben „Verwaltung" auf dem Band nicht mehr die
   dahinter gescrollte Seite aus. */
header.nav, header.nav .nav-inner { pointer-events: none; }
header.nav::before { pointer-events: auto; }
header.nav .nav-logo,
header.nav .nav-menu,
header.nav .nav-tools { pointer-events: auto; }
.nav-logo { display: flex; align-items: center; align-self: flex-start; margin-top: calc(var(--navH) * 0.16); }
.nav-logo, .nav-logo img { height: calc(var(--navH) * 0.56); }
.nav-logo img { width: auto; display: block; }
/* Echtes Oqtane-Menü (MenuHorizontal: .app-menu > ul.navbar-nav > li.nav-item > a.nav-link)
   im Design-Stil: Oswald uppercase, weiss, Unterstrich-Hover. */
.nav-menu {
  align-self: flex-start; margin-top: calc(var(--navH) * 0.16); margin-left: auto;
  font-family: var(--font-label);
}
.nav-menu .app-menu { display: flex; }
.nav-menu .navbar-nav,
.nav-menu ul {
  display: flex; flex-direction: row; align-items: center; gap: 26px;
  list-style: none; margin: 0; padding: 0;
}
.nav-menu .nav-item { margin: 0; }
.nav-menu .nav-link,
.nav-menu a {
  display: inline-block; position: relative;
  text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 500;
  color: #fff !important; opacity: .82; padding: 6px 0 !important;
  background: transparent !important; text-decoration: none !important;
  transition: opacity .18s; white-space: nowrap;
}
.nav-menu .nav-link:hover,
.nav-menu a:hover { opacity: 1; }
/* Oqtane verpackt den Linktext in einen span.w-100 → würde den Chevron umbrechen. */
.nav-menu .w-100 { width: auto !important; }
/* Oqtane rendert pro Menüeintrag einen Icon-Platzhalter (<span aria-hidden>) — bei
   gesetztem Seiten-Icon schiebt der den Text ein (Einträge nicht mehr bündig).
   Das TGF-Design hat ein reines Text-Menü → Icon-Span ausblenden. */
.nav-menu .nav-link .w-100 > span[aria-hidden="true"] { display: none; }
/* Unterstrich-Hover NUR für normale Einträge (nicht Dropdown-Eltern). */
.nav-menu .nav-link:not(.dropdown-toggle)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: #fff; transition: right .25s var(--ease);
}
.nav-menu .nav-link:not(.dropdown-toggle):hover::after,
.nav-menu .nav-link:not(.dropdown-toggle).active::after { right: 0; }

/* Untermenü (Dropdown): Chevron rechts vom Begriff (inline, kein Unterstrich-Erbe).
   Toggle bleibt inline-block wie die übrigen Einträge → gleiche vertikale Lage. */
.nav-menu .dropdown-toggle::after {
  content: "\f078"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free"; font-weight: 900;
  display: inline-block; position: static; background: none; height: auto; width: auto; inset: auto;
  border: 0; margin-left: 8px; font-size: .62em; line-height: 1; vertical-align: middle; opacity: .85;
  transition: transform .15s ease;
}
.nav-menu .dropdown-toggle.show::after,
.nav-menu .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-menu .dropdown-menu {
  background: #7a0000 !important; border: 0 !important; border-radius: var(--radius);
  padding: 4px !important; margin-top: 6px !important; min-width: 210px;
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
}
.nav-menu .dropdown-menu .nav-link,
.nav-menu .dropdown-menu a {
  display: block !important; opacity: 1; padding: 5px 14px !important;
  font-family: var(--font-body); /* normale Breite (Roboto), nicht die condensed Oswald */
  text-transform: none; letter-spacing: .01em; font-size: .9rem; font-weight: 400;
}
.nav-menu .dropdown-menu .nav-link::after,
.nav-menu .dropdown-menu a::after { display: none; }
.nav-menu .dropdown-menu .nav-link:hover,
.nav-menu .dropdown-menu a:hover { background: var(--red) !important; }
/* Desktop: Untermenü bei HOVER öffnen → der Klick auf den L1-Eintrag bleibt frei zum
   Navigieren (klickbare Elternseiten). Theme.js entfernt dazu auf Desktop data-bs-toggle,
   damit Bootstrap den Klick nicht abfängt. Mobile (Burger) bleibt Klick-Toggle. */
@media (min-width: 768px) {
  .nav-menu .dropdown { position: relative; }
  .nav-menu .dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: 0 !important; display: none; }
  .nav-menu .dropdown:hover > .dropdown-menu,
  .nav-menu .dropdown:focus-within > .dropdown-menu { display: block; }
  .nav-menu .dropdown:hover > .dropdown-toggle::after { transform: rotate(180deg); }
}

/* Sprachauswahl in den neuen Themes generell ausblenden. */
.tgf2027 .app-languages { display: none !important; }

/* Oqtanes #Menu trägt navbar-nav-scroll (overflow-y:auto + max-height) → erzeugt beim
   Aufklappen kurz einen Scrollbalken. Wir wollen kein internes Scrollen. */
.nav-menu .navbar-nav-scroll { overflow: visible !important; max-height: none !important; }

/* Mobile: Oqtane-Toggler als Burger; aufgeklapptes Menü als Panel unter der Leiste.
   Breakpoint = Bootstraps navbar-expand-md (768px), damit Bootstraps Collapse-Logik
   und unser Layout exakt zusammenfallen (sonst zeigt Bootstrap zwischen 768–900px das
   Menü zwangsweise → "konstant eingeblendet"). */
.nav-menu .app-menu-toggler,
.nav-menu .navbar-toggler {
  display: none; margin-top: 0;
  width: 44px; height: 36px; padding: 0; background: none; border: 0; cursor: pointer;
}
.nav-menu .navbar-toggler:focus { box-shadow: none; outline: 0; }
/* Weisses Burger-Icon (Bootstrap-Default ist dunkel → auf Rot unsichtbar) */
.nav-menu .navbar-toggler-icon {
  width: 26px; height: 26px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 767.98px) {
  /* Burger oben ausrichten (bündig mit Logo/Buttons), nicht mittig.
     Vertikalversatz nur hier (einmal), nicht zusätzlich am Toggler. */
  .nav-menu { margin-top: calc(var(--navH) * 0.16); align-self: flex-start; }
  .nav-menu .app-menu-toggler,
  .nav-menu .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; }
  .nav-menu .app-menu { position: absolute; top: calc(100% + 8px); right: var(--gutter); left: var(--gutter); z-index: 1000; }
  .nav-menu .navbar-collapse {
    background: #8a0b0b; padding: 6px; border-radius: 6px; margin-top: 0;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 16px 40px rgba(0,0,0,.4);
  }
  /* knappere Schliess-/Öffnungsanimation (weniger "stehenbleibender" Text) */
  .nav-menu .collapsing { transition: height .2s ease !important; }
  .nav-menu .navbar-nav, .nav-menu ul { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
  .nav-menu .nav-item { width: 100%; }
  /* Alles linksbündig (auch Dropdown-Eltern): Text + Pfeil zusammen links, nicht zentriert/space-between. */
  .nav-menu .nav-link, .nav-menu a { width: 100%; padding: 11px 14px !important; border-radius: 4px; text-align: left; justify-content: flex-start; }
  .nav-menu .w-100 { width: auto !important; flex: 0 0 auto; }
  .nav-menu .nav-link:hover, .nav-menu a:hover { background: rgba(255,255,255,.12); opacity: 1; }
  .nav-menu .nav-link.active { background: rgba(255,255,255,.10); }
  /* Unterstrich weg; Dropdown-Chevron (rechts) bleibt als Untermenü-Hinweis. */
  .nav-menu .nav-link:not(.dropdown-toggle)::after { display: none; }
  .nav-menu .dropdown-toggle { display: flex !important; justify-content: flex-start; align-items: center; gap: 6px; }
  .nav-menu .dropdown-toggle::after { margin-left: 2px; }
  .nav-menu .dropdown-menu {
    position: static !important; transform: none !important; inset: auto !important;
    width: 100% !important; box-shadow: none !important; background: rgba(0,0,0,.16) !important;
    border-radius: 4px; margin: 2px 0 2px 0 !important; padding: 2px 0 2px 12px !important;
  }
  .nav-menu .dropdown-menu .nav-link { font-size: .85rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
  transform: scale(1.15);
  /* Zoom von der OBERKANTE aus (nicht Mitte): Bild wächst nach unten, Oberkante bleibt
     stabil unter der roten Schräge → Gesichter laufen nicht unters Banner. */
  transform-origin: 50% 0;
}
.hero-slide.is-active { opacity: 1; animation: kenburns var(--hero-dur, 12s) linear forwards; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.15); } }
/* Horizontal gespiegelte Variante (JSON-Feld "Spiegeln": true) — scaleX(-1) ist in den
   Basis-Transform UND die Ken-Burns-Keyframes gefaltet, damit der Zoom erhalten bleibt. */
.hero-slide.is-mirrored { transform: scaleX(-1) scale(1.15); }
.hero-slide.is-mirrored.is-active { animation: kenburns-mirror var(--hero-dur, 12s) linear forwards; }
@keyframes kenburns-mirror { from { transform: scaleX(-1) scale(1.05); } to { transform: scaleX(-1) scale(1.15); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hero-tint); }
.hero-inner {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(90px,16vh,200px) var(--gutter) clamp(60px,9vh,110px);
  min-height: clamp(560px, 82vh, 880px); display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}
/* Eyebrow (Jahreszahl): normale Label-Schrift (Oswald/--font-label, geerbt), halbe Titelhöhe, dezente Laufweite. */
.hero .eyebrow { color: var(--gold-soft); font-size: clamp(1.45rem, 3.2vw, 3rem); letter-spacing: 0; }
.hero .eyebrow::before { display: none; }
/* Startseite: Hero — gerade Unterkante, Goldlinie unten; Bild beginnt an der roten Schräge */
.tgf-public .page-start .hero { -webkit-clip-path: none; clip-path: none; border-bottom: 8px solid #C8A95B; margin-top: 0; }
.tgf-public .page-start .hero-media {
  top: calc(var(--navH) - var(--slant-h));
  -webkit-clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  background: #15100c;
}
/* Goldlinie exakt entlang der roten Schräge (Oberkante des Bildes) */
.tgf-public .page-start .hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--gold);
  -webkit-clip-path: polygon(0 var(--navH), 100% calc(var(--navH) - var(--slant-h)), 100% calc(var(--navH) - var(--slant-h) + 6px), 0 calc(var(--navH) + 6px));
  clip-path: polygon(0 var(--navH), 100% calc(var(--navH) - var(--slant-h)), 100% calc(var(--navH) - var(--slant-h) + 6px), 0 calc(var(--navH) + 6px));
}
.tgf-public .page-start .hero-inner {
  padding-top: calc(var(--navH) + clamp(36px, 7vw, 120px));
  padding-bottom: clamp(40px, 5vw, 96px);
  min-height: clamp(400px, 60vw, 780px);
}
.hero-title {
  font-family: var(--font-display); text-transform: uppercase;
  /* Jahreszahl ~½ ihrer Höhe näher an den Titel: Abstand = 14px minus halbe Eyebrow-Grösse
     (clamp = Hälfte des Eyebrow-clamp) → skaliert mit, ohne auf dem Handy zu überlappen. */
  line-height: .96; letter-spacing: .03em; margin: calc(14px - clamp(0.72rem, 1.6vw, 1.5rem)) 0 0;
  color: #fff; max-width: 22ch;
  font-size: clamp(2.9rem, 6.4vw, 6rem);
  text-shadow: 0 4px 40px rgba(0,0,0,.45);
}
.tgf-public .hero-title {
  -webkit-text-fill-color: #F7EFDD; color: #F7EFDD;
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.55));
}
.hero-title em, .tgf-public .hero-title em { font-style: normal; -webkit-text-fill-color: var(--gold-soft); color: var(--gold-soft); }
.hero-sub { margin: 22px 0 0; max-width: 56ch; font-size: 1.24rem; line-height: 1.35; color: rgba(255,255,255,.9); }
/* Handy im Hochformat: Beschreibung ausblenden, damit ein 4-zeiliger Titel nicht nach oben
   gedrückt wird. Im Querformat (breiter → orientation:landscape) bleibt sie sichtbar. */
@media (max-width: 767.98px) and (orientation: portrait) {
  .hero-sub { display: none; }
}
.hero-caption { transition: opacity .45s ease, transform .45s ease; }
.hero-caption.is-fading { opacity: 0; transform: translateY(8px); }
/* Ganzer Hero klickbar aufs Theaterstück — transparenter Overlay-Link (href pro Slide via Theme.js).
   Liegt über Bild + Caption (z-index 2), aber UNTER den Blätter-Punkten (z-index 3). Kein Hover-Unterstrich. */
.hero-link { position: absolute; inset: 0; z-index: 2; display: block; }
.hero-link:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: -6px; }
.hero-link.is-nolink { pointer-events: none; }
/* Slideshow-Punkte — bewusst dezent (schwacher Kontrast), damit sie nicht dominieren */
.hero-dots { position: absolute; right: 18px; bottom: 16px; display: flex; gap: 9px; z-index: 3; }
.hero-dots button { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.3); background: transparent; cursor: pointer; padding: 0; transition: background .2s, border-color .2s; }
.hero-dots button[aria-pressed="true"] { background: rgba(255,255,255,.42) !important; border-color: rgba(255,255,255,.42); }
@media (max-width: 900px) { .hero-dots { display: none; } }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-slide { animation: none; }
}

/* ============================================================
   SCHRÄGE BÄNDER + FOOTER (Markenzeichen)
   ============================================================ */
.band {
  position: relative; z-index: 1;
  -webkit-clip-path: polygon(0 var(--slant-h), 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% calc(100% - var(--slant-h)), 0 100%);
  margin-top: calc(var(--slant-h) * -1);
  padding-top: calc(clamp(64px, 9vw, 130px) + var(--slant-h)) !important;
  padding-bottom: calc(clamp(64px, 9vw, 130px) + var(--slant-h)) !important;
  border-top: 0 !important;
}
/* Startseite: innere Bänder begradigen (Schräge nur Hero/Header & Footer) */
.tgf-public .page-start .band {
  -webkit-clip-path: none !important; clip-path: none !important;
  margin-top: 0 !important;
  padding-top: clamp(64px, 9vw, 130px) !important;
  padding-bottom: clamp(64px, 9vw, 130px) !important;
  position: static !important;
}

/* ============================================================
   MARQUEE — laufende Galerie (Filmstreifen)
   ============================================================ */
.marquee { overflow: hidden; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: scrollx 48s linear infinite; padding: 22px 0; }
.marquee-item { width: 280px; aspect-ratio: 2/1; flex: 0 0 auto; border-radius: var(--radius); overflow: hidden; position: relative; }
.marquee-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.25) contrast(1.02); transition: filter .4s; }
.marquee-item:hover img { filter: none; }
.marquee-item span {
  position: absolute; left: 12px; right: 12px; bottom: 10px; font-family: var(--font-label);
  text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: #fff; z-index: 2;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
  /* Beschriftung nie umbrechen; bei Platzmangel hinten mit … abschneiden. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@keyframes scrollx { to { transform: translateX(calc(-50% - 8px)); } }
/* Start: Filmstreifen als schräge GOLD-Bande oberhalb der Footer-Schräge */
.tgf-public .page-start .marquee {
  background: linear-gradient(180deg, #C2A063 0%, #A6863F 100%); border: none;
  -webkit-clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--slant-h));
  padding: calc(var(--slant-h) + 16px) 0 16px; overflow: hidden;
  transform: translateZ(0); will-change: clip-path;
}
.tgf-public .page-start .marquee-rot { transform: rotate(-2.862deg); transform-origin: left center; }
.tgf-public .page-start .marquee-item { box-shadow: inset 0 0 0 1px rgba(20,14,8,.35); }
.tgf-public .page-start .marquee-track { padding: 0; }
@media (max-width: 900px) { .tgf-public .page-start .marquee { display: none; } }

/* ============================================================
   80 JAHRE / SPLIT FEATURE
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
.split .split-media { position: relative; min-height: 360px; overflow: hidden; }
.split .split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split .split-text { padding: clamp(40px,6vw,80px); display: flex; flex-direction: column; justify-content: center; background: var(--surface); }
.tgf-public .page-start .split .split-text { background: #FBF5E8; }
.tgf-public .page-start .split { padding-bottom: 0; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } .split .split-media { min-height: 260px; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: transparent; color: #d8cdb8; border-top: none; position: relative; z-index: 2; margin-top: calc(var(--slant-h) * -1); }
.foot::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Neutrales Near-Black, kein Warmstich (vorher #191209 = sichtbar braun). */
  background: #111111;
  -webkit-clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
}
.foot .wrap { padding-top: var(--slant-h); }
.foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px 40px; padding: 22px 0 26px; }
.foot-col { min-width: 0; }
.foot h5 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; color: #fff; margin: 0 0 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 0 0 1px; }
.foot li a { display: inline-block; line-height: 1.3; }
.foot a { color: #b7ab93; text-decoration: none; font-size: .94rem; transition: color .2s; }
.foot a:hover { color: var(--gold-soft); }
.foot .f-logo img { height: 56px; margin-bottom: 18px; }
.foot .f-logo p { color: #9a8f7c; max-width: 34ch; font-size: .95rem; }
.foot .socials { display: flex; gap: 14px; margin-top: 14px; }
.foot .socials a {
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%;
  display: grid; place-items: center; color: #d8cdb8; transition: all .2s;
}
.foot .socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.foot .socials svg { width: 17px; height: 17px; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 16px 0; font-size: .8rem; color: #8a8073; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.foot-bottom a { color: #8a8073; font-size: inherit; }
@media (max-width: 820px){ .foot-top { grid-template-columns: 1fr 1fr; } }
/* Handy (ab derselben Grenze wie das Burger-Menü, navbar-expand-md): die Linkblöcke B–D
   doppeln das Hauptmenü und füllten rund drei Viertel des Bildschirms → nur Spruch (A)
   und die rechtliche Zeile bleiben. */
@media (max-width: 767.98px){
    .foot-top { grid-template-columns: 1fr; }
    .foot-col:not(:first-child) { display: none; }
}

/* ============================================================
   STARTSEITE — heller Inhalt (Hero bleibt dunkel)
   ============================================================ */
.tgf-public .page-start {
  --bg: #F7F0E3; --bg-2: #EFE6D2; --surface: #FBF5E8; --surface-2: #FFFFFF;
  --text: #2a2016; --muted: #5a4f40; --line: rgba(36,27,18,.14);
  background: var(--bg); color: var(--text);
}
.tgf-public .page-start .block .eyebrow { color: var(--red); }
/* Rote CTA-Buttons auf hellem Grund: immer weisser Text, keine Pfeile */
.tgf-public .page-start .btn-cta { background: var(--red); color: #fff; border-color: var(--red); }
.tgf-public .page-start .btn-cta:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.tgf-public .page-start .btn-cta .arr { display: none; }

/* ---------- Feature-Zone: Stück-Inhalt + Vorverkauf ---------- */
.feature-zone { padding-top: clamp(48px,6vw,90px) !important; padding-bottom: clamp(38px,4.8vw,72px) !important; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px,4vw,64px); align-items: start; }
.play-feature .feature-title {
  font-family: var(--font-display); text-transform: uppercase; line-height: .96; letter-spacing: .045em;
  color: var(--red); font-size: clamp(2.1rem,3.6vw,3.4rem); margin: 14px 0 0;
}
.play-feature .feature-title em { font-style: normal; display: block; font-size: .62em; color: #2a2016; margin-top: .12em; }
/* Eyebrow über dem Stück-Titel (Inhaltsangabe) ohne den waagerechten Strich. */
.tgf-public .page-start .feature-zone .eyebrow::before { display: none; }
.play-body { margin-top: 22px; }
.play-body p { margin: 0 0 1.05em; color: #3d3125; font-size: 1.04rem; line-height: 1.62; }
.play-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Vorverkauf-Karte */
.vorverkauf { background: #FFFEFB; border-left: 4px solid var(--red); padding: 28px 28px 30px; }
.vv-kicker { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: #6a5f50; display: block; }
.vv-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--red); font-size: 2rem; line-height: 1; margin: 6px 0 18px; }
.vv-table { display: flex; flex-direction: column; }
.vv-row { display: grid; grid-template-columns: 78px 44px 34px 1fr; gap: 12px; align-items: center; padding: 9px 4px; border-bottom: 1px solid rgba(36,27,18,.12); color: #2a2016; }   /* feste Breiten: jede Zeile ist ein eigenes Raster, sonst verrutscht die Kopfzeile */
.vv-row.vv-head { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: #8a7d6a; border-bottom: 2px solid rgba(36,27,18,.2); padding-bottom: 8px; }
.vv-date { font-weight: 600; font-variant-numeric: tabular-nums; }
.vv-time { font-variant-numeric: tabular-nums; color: #5a4f40; }
.vv-free { font-variant-numeric: tabular-nums; text-align: right; color: #2a2016; }
.vv-row.vv-head span:nth-child(3) { text-align: right; }
.vv-bar { height: 9px; border-radius: 999px; background: rgba(36,27,18,.1); overflow: hidden; }
.vv-bar i { display: block; height: 100%; background: #2f9e5e; border-radius: 999px; }
.vv-bar i.low { background: #e0a32a; }
.vv-foot { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.vv-stat { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: 600; color: #3d3125; font-size: .95rem; white-space: nowrap; }   /* nowrap: „65.1 %" bricht auf dem Handy sonst um */
.vv-stat svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vv-btn { margin-left: auto; padding: 7px 17px; }
/* Vorverkaufsbox (Modul TGF.Reservation.Vorverkaufsbox, 12.10.2026): Zustände, die die Dummy-Box nicht kannte */
.vv-wt { display: inline-block; width: 1.9em; }                 /* feste Breite: alle Daten stehen untereinander */
.vv-row.vv-gespielt, .vv-row.vv-gespielt .vv-time, .vv-row.vv-gespielt .vv-free { color: #9a8f7e; }   /* gedimmt über Farbe, nicht opacity */
.vv-bar i.voll { background: #c90000; }
.vv-bar i.gespielt { background: #c4baa8; }
.vv-abgesagt { grid-column: 3 / 5; color: #c90000; font-weight: 600; }   /* Ampelrot wie der volle Balken; Hausrot wirkt braun */
.vv-ohne-belegung .vv-row { grid-template-columns: 78px 44px 1fr; }   /* vor dem Vorverkaufsstart: nur Datum und Zeit */
.vv-ohne-belegung .vv-abgesagt { grid-column: 3; }
.vv-start { margin: 20px 0 0; }
.vv-vorschau { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; background: #f0b100; color: #2a2016; padding: 6px 10px; margin-bottom: 16px; font-size: .85rem; }
.vv-vorschau strong { text-transform: uppercase; }
@media (max-width: 880px) { .feature-grid { grid-template-columns: 1fr; } .vorverkauf { position: static; } }

/* ---------- Aufzone: Feedback + Infoboxen ---------- */
.aufzone { background: #EBE0CA; padding-top: clamp(38px,4.8vw,72px) !important; padding-bottom: clamp(48px,6vw,90px) !important; }
.auf-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px,4vw,64px); align-items: start; }
.auf-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--red); font-size: clamp(1.9rem,3vw,2.6rem); line-height: 1; margin: 12px 0 0; }
.auf-intro { color: var(--muted); margin: 12px 0 22px; }
.voices-stack { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.voice2 { margin: 0; padding: 26px 26px; position: relative; z-index: 0; background: transparent; border: 0; overflow: visible; }
.voice2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FBF5E8; filter: url(#paper-torn); }
.paper-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.voice2 p { margin: 0; font-family: "Kalam", "Segoe Script", cursive; font-weight: 300; font-size: 1.18rem; line-height: 30px; color: #3a3024; background-image: linear-gradient(to bottom, rgba(60,45,25,.13) 1px, transparent 1px); background-size: 100% 30px; background-position: 0 28px; transform: rotate(-1.4deg); transform-origin: center; }
.voice2 p::first-line { color: var(--red); }
.auf-main .btn-ghost { margin-top: 8px; }
.auf-side { display: flex; flex-direction: column; gap: 22px; }
.info-box { background: #FFFEFB; border-left: 4px solid var(--red); padding: 24px 24px 26px; }
.pf-media, .auf-media { margin: 0 0 22px; aspect-ratio: 16 / 8; overflow: hidden; }
.pf-media img, .auf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ib-media { margin: -24px -24px 18px -24px; aspect-ratio: 16 / 7; overflow: hidden; }
.ib-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-box .ib-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .055em; color: var(--red); font-size: 1.3rem; line-height: 1; margin: 0 0 14px; }
.info-box p { margin: 0 0 12px; font-size: .96rem; line-height: 1.55; color: #3d3125; }
.info-box .ib-note { font-size: .86rem; color: var(--muted); }
.info-box .btn-ghost { margin-top: 6px; padding: 7px 17px; font-size: .78rem; }
.tb-list { list-style: none; margin: 0 0 16px; padding: 0; }
.tb-list li { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tb-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tb-date { font-family: var(--font-body); font-weight: 600; color: #2a2016; font-size: .98rem; }
.tb-name { font-size: .92rem; color: var(--muted); }
@media (max-width: 860px) { .auf-grid { grid-template-columns: 1fr; } .auf-side { position: static; } }

/* ---------- Info-Kacheln (Verein/Entdecken) ---------- */
.info-cards-zone { background: #EBE0CA; padding-top: clamp(28px,3.5vw,52px) !important; padding-bottom: calc(var(--slant-h) + clamp(20px,2.5vw,40px)) !important; }
.info-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.5vw,30px); }
.icard { background: #fff; border: 1px solid rgba(60,45,25,.14); border-radius: 0; overflow: hidden; display: flex; flex-direction: column; }
.icard-media { aspect-ratio: 16/9; overflow: hidden; }
.icard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icard-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.icard-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .045em; color: var(--red); font-size: 1.35rem; line-height: 1.06; margin: 0 0 12px; }
.icard p { margin: 0 0 18px; font-size: .95rem; line-height: 1.55; color: #3d3125; }
.icard .btn-ghost { align-self: flex-start; margin-top: auto; }
@media (max-width: 820px){ .info-cards { grid-template-columns: 1fr; } }

/* ---------- Startseite-Backbone: Inhaltszonen als Pane-Slots ----------
   Theme liefert Band + Raster; der Inhalt kommt aus Modulen/HtmlText-Templates in den
   Panes (.tgf-slot). Greift kein Modul, sollen weder leere Bänder noch Raster-Lücken
   erscheinen — :has blendet leere Slots/Zonen aus. Im Bearbeiten-Modus rendert Oqtane
   in leeren Panes eine Drop-Zone → Slot hat Inhalt → Zone sichtbar (zum Platzieren). */
.tgf-public .page-start .tgf-slot:not(:has(> *)) { display: none; }
.tgf-public .page-start section.block:not(:has(.tgf-slot > *)) { display: none; }
.tgf-public .page-start .auf-side:not(:has(.tgf-slot > *)) { display: none; }
/* Zweispalter → volle Breite, wenn nur eine Spalte Inhalt trägt. */
.tgf-public .page-start .feature-grid:not(:has(.fz-aktuell > *)),
.tgf-public .page-start .feature-grid:not(:has(.fz-ticker > *)) { grid-template-columns: minmax(0, 1fr); }
.tgf-public .page-start .auf-grid:not(:has(.auf-fokus > *)),
.tgf-public .page-start .auf-grid:not(:has(.auf-side .tgf-slot > *)) { grid-template-columns: minmax(0, 1fr); }

/* ============================================================
   STANDARD (Geschichte) — Goldkopf + Lesespalte
   ============================================================ */
.page-head { position: relative; overflow: hidden; }
.page-head .wrap { padding-top: clamp(54px,9vh,104px); padding-bottom: clamp(34px,6vh,60px); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(16px,3vw,40px); }
.page-head .eyebrow { color: var(--gold-soft); }
.page-head h1 { font-family: var(--font-display); text-transform: uppercase; line-height: .96; color: #fff;
  font-size: clamp(1.84rem,4vw,3.44rem); margin: 14px 0 0; max-width: 62%; text-wrap: balance; letter-spacing: .03em; }
/* PageTitleRight-Slot: rechts neben dem Titel; leer → komplett aus (kein Gap-Rest) */
.page-head-right { flex: 0 1 auto; max-width: 40%; text-align: right; color: inherit; }
.page-head-right:empty { display: none; }
@media (max-width: 640px) {
  .page-head-right { max-width: 100%; text-align: left; }
}
/* Goldener Kopf */
.tgf-public .page-head {
  background: linear-gradient(180deg, #C2A063 0%, #B49355 55%, #A6863F 100%);
  -webkit-clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(var(--navH) - var(--slant-h));
}
.tgf-public .page-head .wrap { color: #261c10; padding-top: calc(clamp(14px,3.5vh,40px) + var(--slant-h)); padding-bottom: clamp(18px,3.5vh,38px); }
.tgf-public .page-head h1 { color: #1f1710; }
.tgf-public .page-head h1::first-line { color: #F7EFDD; }
.tgf-public .page-head .eyebrow { color: #8a1010; }

.prose { max-width: var(--reading); margin: 0 auto; }
/* Initial: „abolition" trägt viel Leerraum über dem Versal → ohne oberes Padding und mit
   leichtem negativem margin-top fluchtet die Oberkante mit der ersten Textzeile.
   (margin-top ist der Feintuning-Wert, falls es minimal zu hoch/tief steht.) */
/* Initial über 3 Zeilen (Float-Höhe = font-size × line-height ≈ 3 Textzeilen, damit auch die
   3. Zeile einrückt). „abolition" trägt Leerraum überm Versal → margin-top als Feintuning. */
.prose .dropcap::first-letter { font-family: var(--font-display); float: left; font-size: 5.4rem; line-height: 1.05; padding: 0 16px 0 0; margin-top: -0.95rem; color: var(--accent); }
.prose p { margin: 0 0 1.4em; }

/* Aufzählungen bündig am linken Textrand (statt Browser-Standardeinzug ~40px): eigener Bullet
   exakt auf der Fluchtlinie, Folgezeilen mit Hänge-Einzug.
   Nur klassenlose Fliesstext-Listen: `:not([class])` nimmt Framework-/Navigationslisten aus
   (Bootstrap .nav/.nav-tabs, .list-group, Team-Reiter …), die keine Bullets tragen dürfen. */
.prose ul:not([class]) { list-style: none; margin: 0 0 1.4em; padding-left: 0; }
.prose ul:not([class]) > li { position: relative; padding-left: 1.25em; margin: 0 0 .35em; }
.prose ul:not([class]) > li:last-child { margin-bottom: 0; }
.prose ul:not([class]) > li::before { content: "•"; position: absolute; left: 0; top: 0.18em; font-size: 1.3em; line-height: 1; }
/* Link-Boxen (.topic-box) nutzen ebenfalls ein klassenloses <ul>, sind aber Navigation, keine
   Aufzählung → kein Bullet/Hänge-Einzug (höhere Spezifität sticht die Bullet-Regel oben). */
.prose .topic-box ul:not([class]) > li { padding-left: 0; }
.prose .topic-box ul:not([class]) > li::before { content: none; }
.prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose ol > li { margin: 0 0 .35em; }
/* Verschachtelte Listen wieder leicht einrücken. */
.prose li ul, .prose li ol { margin: .35em 0 0; padding-left: 1.25em; }

/* Nummerierte Abschnittsliste mit rotem Kreis-Badge (z.B. Statuten) — ersetzt das alte
   DNN-„ServeBox/Serve_Icon"-Markup. Nummern via CSS-Counter (renummerieren automatisch). */
.prose ol.tgf-statuten { list-style: none; counter-reset: statut; padding-left: 0; margin: 1.6em 0; }
.prose ol.tgf-statuten > li {
    counter-increment: statut;
    position: relative;
    padding-left: 3.5rem;
    margin: 0 0 1.9rem;
    min-height: 2.5rem;
}
.prose ol.tgf-statuten > li:last-child { margin-bottom: 0; }
.prose ol.tgf-statuten > li::before {
    content: counter(statut);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--red, #c90000);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prose ol.tgf-statuten > li > h3,
.prose ol.tgf-statuten > li > h4,
.prose ol.tgf-statuten > li > h5 {
    font-family: inherit;            /* nicht die Display-Schrift */
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--red, #c90000);
    margin: .35rem 0 .5rem;
    line-height: 1.3;
}
.prose ol.tgf-statuten > li > p:last-child { margin-bottom: 0; }

/* „Vereinszahlen" — Statistik-Liste: grosse rote Zahl links, Beschreibung rechts, dünne
   Trennlinie pro Eintrag (ersetzt das alte DNN „dl-horizontal-small"). Die Zahl zählt beim
   Sichtbarwerden von 0 hoch (Theme.js ensureCounters, gegen [data-number]). */
.prose dl.tgf-zahlen { display: grid; grid-template-columns: minmax(92px, max-content) 1fr; margin: 1.8em 0; }
.prose dl.tgf-zahlen > dt,
.prose dl.tgf-zahlen > dd { border-top: 1px solid var(--line); padding: 1.05rem 0; margin: 0; align-self: start; }
.prose dl.tgf-zahlen > dt { padding-right: 1.6rem; }
.prose dl.tgf-zahlen > dt:first-of-type,
.prose dl.tgf-zahlen > dd:first-of-type { border-top: 0; padding-top: .1rem; }
.prose dl.tgf-zahlen > dt > [data-number] {
    font-weight: 400; font-size: 2rem; line-height: 1.1;       /* normale Schrift (nicht Display), nicht fett */
    color: var(--red); font-variant-numeric: tabular-nums;
    display: inline-block; white-space: nowrap;
}
.prose dl.tgf-zahlen > dd { color: #3d3125; line-height: 1.55; }
/* Schmale Schirme: Zahl über den Text stapeln. */
@media (max-width: 560px) {
    .prose dl.tgf-zahlen { grid-template-columns: 1fr; }
    .prose dl.tgf-zahlen > dt { border-top: 1px solid var(--line); padding: 1.05rem 0 .15rem 0; }
    .prose dl.tgf-zahlen > dd { border-top: 0; padding-top: 0; }
    .prose dl.tgf-zahlen > dt:first-of-type { border-top: 0; }
    .prose dl.tgf-zahlen > dt > [data-number] { font-size: 1.7rem; }
}

/* „Theaterausflüge" — Jahres-Liste: Bild links, Jahr/Ziel/Credits/Buttons rechts, dünne
   Trennlinie pro Eintrag (ersetzt das alte DNN isotope_grid). */
.prose .tgf-ausfluege { margin: 1.8em 0; }
.prose .tgf-ausflug {
    display: grid; grid-template-columns: minmax(0, 0.92fr) 1fr; gap: 0 2rem;
    align-items: start; padding: 1.9rem 0; border-top: 1px solid var(--line);
}
.prose .tgf-ausfluege > .tgf-ausflug:first-child { border-top: 0; padding-top: .2rem; }
.prose .tgf-ausflug-bild { margin: 0; }
.prose .tgf-ausflug-bild a { display: block; }
.prose .tgf-ausflug-bild img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.prose .tgf-ausflug-jahr { font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--red); margin: 0 0 .45rem; }
.prose .tgf-ausflug-ziel { color: #2a2016; margin: 0 0 .9rem; }
.prose .tgf-ausflug-credits {
    color: #6f5e4a; font-size: .92rem; line-height: 1.7;
    border-top: 1px solid var(--line); padding-top: .8rem; margin: 0 0 1.1rem;
}
.prose .tgf-ausflug-buttons { margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
/* Generischer Button im Fliesstext (Lesespalte): roter Rahmen, füllt sich beim Überfahren.
   `tgf-btn` (= Markup des [*Button*]-Tokens) sowie die migrierten DNN-CTA-Links (`a.btn[role="button"]`,
   `a.Button_default`) werden automatisch als gerahmter Button dargestellt — ohne DB-Anpassung.
   `role="button"` allein reicht NICHT: in DNN kam es auch an gewöhnlichen Fliesstext-Links vor
   (z.B. Personenname), die dort als normaler Link erschienen; erst `btn` machte einen Button daraus.
   Eigene Klasse/Selektoren, damit die rote Lesespalten-Linkfarbe (.reading .prose a) sie nicht als
   gewöhnlichen Link trifft. */
.prose a.tgf-btn,
.prose a.Button_default,
.prose a.btn[role="button"] {
    display: inline-block; padding: .42rem 1.15rem; border: 1px solid var(--red); border-radius: var(--radius);
    color: var(--red); font-size: .92rem; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s;
}
.prose a.tgf-btn:hover,
.prose a.Button_default:hover,
.prose a.btn[role="button"]:hover { background: var(--red); color: #fff; text-decoration: none; }
/* Schmale Schirme: Bild über den Text stapeln. */
@media (max-width: 620px) {
    .prose .tgf-ausflug { grid-template-columns: 1fr; gap: 0; }
    .prose .tgf-ausflug-bild { margin: 0 0 1rem; }
}

.prose p.lead { font-size: 1.34rem; line-height: 1.55; margin-bottom: 1.5em; }
.prose a { color: var(--accent); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration: underline; }
.prose h2.sub { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 1.7rem; margin: 2.8em 0 1.2em; color: var(--red); }
/* Zwischentitel in migriertem Fliesstext (h3–h5): dezent, im Lesefluss — nicht die grossen
   Bootstrap-Defaults (h4 = 1.5rem). Body-Schrift, semibold (nicht fett). Mindestens Fliesstext-
   grösse (Body = 17px ≈ 1.0625rem): h4/h5 dürfen NIE kleiner als der Fliesstext sein. Etwas mehr
   Luft nach unten, damit der Titel sichtbar zum folgenden Absatz gehört. */
.prose h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; color: #2a2016; margin: 2.4em 0 .9em; }
.prose h4 { font-weight: 600; font-size: 1.12rem; line-height: 1.4; color: #2a2016; margin: 2.2em 0 .8em; }
.prose h5 { font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: #2a2016; margin: 2em 0 .75em; }
/* Laufweite (letter-spacing) NUR auf der Abolition-Display-Schrift (kräftig, eng laufend):
   im Lesefluss sind das h2.sub und h3. h4/h5 laufen in Roboto (Body) und bekommen KEINE Laufweite.
   :not([class]) lässt zudem strukturierte Steckbrief-Titel (Theaterausflüge/Anlässe) aus. */
.prose h3:not([class]) { letter-spacing: .12em; }
/* Tabelle im Fliesstext NEBEN einer rechts gefloateten Box: BFC-Wrapper (flow-root) füllt den
   Platz links der Box, statt als vollbreiter Block UNTER die Box geschoben zu werden (sonst
   beginnt der ganze Text erst unterhalb des Box-Panes). */
.prose .tgf-table-flow { display: flow-root; margin: 1.2em 0; }
.prose .tgf-table-flow > table { width: 100%; margin: 0; border-collapse: collapse; font-size: .95rem; }
.prose .tgf-table-flow td { padding: 8px 14px; vertical-align: top; line-height: 1.5; border-top: 1px solid var(--line); color: #3d3125; }
.prose .tgf-table-flow tr:first-child td { border-top: 0; }
.prose figure { margin: 2.4em 0; }
.prose figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.prose figcaption { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--muted); margin-top: 12px; }

/* Horizontale Definitionsliste (Jahr links, Eintrag rechts) — ersetzt das in Bootstrap 5
   entfallene BS3-/DNN-„dl-horizontal" (auch „…-small"). Jahr-Spalte so breit wie nötig,
   der Rest füllt die Zeile; jede dt/dd-Paarung kommt auf eine eigene Zeile. */
.prose .dl-horizontal,
.prose .dl-horizontal-small {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    row-gap: .55rem;
    align-items: baseline;
    margin: 1.4em 0;
}
.prose .dl-horizontal > dt,
.prose .dl-horizontal-small > dt {
    font-weight: 400;          /* Jahr nicht fett — der Titel im dd ist der Blickfang */
    color: #6f5e4a;            /* gedämpft, passt zum Leseband */
    white-space: nowrap;
}
.prose .dl-horizontal > dd,
.prose .dl-horizontal-small > dd {
    margin: 0;                 /* Browser-Default-Einzug (40px) entfernen */
}
.prose .dl-horizontal-small { font-size: .95rem; }   /* „small" = etwas kompakter */

/* Bildreihe (aus altem DNN-Karussell migriert): responsive Reihe gleich breiter Bilder mit
   Bildunterschriften; Klick öffnet die Bildbox-Lightbox (a.tgf-bildbox-zoom, Theme.js).
   Höhere Spezifität als ".prose figure*", damit die Galerie-/Figure-Defaults überstimmt werden. */
.prose .tgf-bildreihe {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.4rem 1rem;
    margin: 1.8em 0;
    clear: both;   /* nicht unter eine rechts gefloatete Box laufen */
}
.prose .tgf-bildreihe .tgf-bildbox-item { margin: 0; }
.prose .tgf-bildreihe .tgf-bildbox-zoom { display: block; cursor: zoom-in; }
.prose .tgf-bildreihe .tgf-bildbox-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}
.prose .tgf-bildreihe .tgf-bildbox-item figcaption {
    font-family: var(--font-label);
    text-transform: none;
    letter-spacing: normal;
    font-size: .82rem;
    line-height: 1.3;
    color: #6f5e4a;
    margin-top: .5rem;
}

/* Video-Reihe: responsives Raster eingebetteter Vimeo-Videos mit Untertiteln (analog
   .tgf-bildreihe). auto-fit → die Kacheln füllen die Zeilenbreite gleichmässig (2 Videos =
   je 50 %, viele Clips = mehrspaltig). Die Vimeo-Token bringen ihren eigenen Rand mit
   (margin:1.5em 0, display:flow-root) → in der Reihe auf 0 zwingen, Abstände macht das Grid. */
.prose .tgf-videoreihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.4rem 1rem;
    margin: 1.8em 0;
    clear: both;
}
.prose .tgf-videoreihe figure { margin: 0; }
.prose .tgf-videoreihe .tgf-vimeo { margin: 0 !important; }
.prose .tgf-videoreihe figcaption {
    font-family: var(--font-label);
    text-transform: none;
    letter-spacing: normal;
    font-size: .82rem;
    line-height: 1.3;
    color: #6f5e4a;
    margin-top: .5rem;
}

/* Status-Lämpchen (z.B. /status): kleiner „Leuchtpunkt" mit sanftem Puls-Ring vor dem Statustext.
   Als <span class="tgf-status-lamp"> im Fliesstext (Überschrift) verwenden. Farbe via Modifier:
   Default = grün (OK), --warn = gelb (Warnung), --alert = rot (Ausnahme). Farben stecken in
   CSS-Variablen, damit auch der Puls-Ring in den @keyframes die jeweilige Farbe mitnimmt. */
.tgf-status-lamp {
    --lamp-hi: #b6f5b6;      /* Glanzpunkt */
    --lamp-mid: #3ac24f;
    --lamp-deep: #1e9b3c;
    --lamp-glow: 46, 190, 74; /* RGB für Glow/Puls */
    display: inline-block;
    width: .72em;
    height: .72em;
    margin-right: .5em;
    border-radius: 50%;
    vertical-align: middle;
    background: radial-gradient(circle at 35% 30%, var(--lamp-hi) 0%, var(--lamp-mid) 45%, var(--lamp-deep) 100%);
    box-shadow: 0 0 .35em rgba(var(--lamp-glow), .7), 0 0 0 0 rgba(var(--lamp-glow), .55);
    animation: tgf-status-pulse 1.8s ease-out infinite;
}
.tgf-status-lamp--warn  { --lamp-hi: #ffe9a6; --lamp-mid: #f5c020; --lamp-deep: #d69a00; --lamp-glow: 240, 180, 20; }
.tgf-status-lamp--alert { --lamp-hi: #ffb3ac; --lamp-mid: #e23b2e; --lamp-deep: #b71c13; --lamp-glow: 220, 50, 40; }
@keyframes tgf-status-pulse {
    0%   { box-shadow: 0 0 .35em rgba(var(--lamp-glow),.7), 0 0 0 0     rgba(var(--lamp-glow),.55); }
    70%  { box-shadow: 0 0 .35em rgba(var(--lamp-glow),.7), 0 0 0 .55em rgba(var(--lamp-glow),0); }
    100% { box-shadow: 0 0 .35em rgba(var(--lamp-glow),.7), 0 0 0 0     rgba(var(--lamp-glow),0); }
}
@media (prefers-reduced-motion: reduce) {
    .tgf-status-lamp { animation: none; }
}

/* DNN-Zitatblock (.quotes_4): Pull-Quote mit grossem dekorativem Anführungszeichen oben links.
   Bootstrap hat kein direktes Pendant → hier theme-konform gestylt, Markup bleibt unverändert. */
.prose .quotes_4 {
    position: relative;
    margin: 1.8em 0;
    padding: 1.3rem 1.6rem 1.3rem 3.6rem;
    background: rgba(36, 27, 18, .05);
    border-radius: var(--radius);
}
.prose .quotes_4 blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
}
.prose .quotes_4 blockquote p { margin: 0; color: #3d3125; line-height: 1.55; }
/* Bootstrap-.mark (gelbe Markierung) neutralisieren → grosses graues Anführungszeichen. */
.prose .quotes_4 .mark {
    position: absolute;
    left: .8rem;
    top: .35rem;
    background: none;
    padding: 0;
    color: rgba(36, 27, 18, .2);
    font-family: var(--font-display);
    font-size: 3.6rem;
    line-height: 1;
    pointer-events: none;
}

/* Bildbox-Token ([*Bildbox(...)*]): Bild + Untertitel. Default = volle Spaltenbreite im Fliesstext;
   per Style-Argument überschreibbar (z.B. float:right;width:320px für ein umflossenes kleineres Bild). */
/* display:flow-root = eigener Block-Formatting-Context → das Bild läuft nicht unter eine
   gefloatete Box (z.B. Box-Pane), sondern bleibt auf der daneben verfügbaren Spaltenbreite. */
.tgf-bildbox { margin: 1.8em 0; display: flow-root; }
/* Bildbox am Spaltenanfang (erstes Element ODER direkt nach einem leeren Editor-<p>): kein oberer
   Abstand → das Bild startet bündig mit einer oben rechts gefloateten Box statt tiefer. */
.tgf-bildbox:first-child,
.tgf2027-module-body > p:empty:first-child + .tgf-bildbox { margin-top: 0; }
.tgf-bildbox-zoom { display: block; cursor: zoom-in; }
.tgf-bildbox img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
/* Seitenübersicht ([*Sitemap*]-Token): kompakte Tabelle, Titel nach Ebene eingerückt. */
.prose .tgf-sitemap { width: 100%; border-collapse: collapse; font-size: .95rem; margin: 1.4em 0; }
.prose .tgf-sitemap th { text-align: left; font-weight: 600; font-size: .92rem; color: #2a2016;
    border-bottom: 2px solid rgba(36,27,18,.28); padding: .45em .6em; }
/* "Titel"-Kopf bündig zu den Titeln der obersten Ebene (deren td hat padding-left:0). */
.prose .tgf-sitemap th:nth-child(2) { padding-left: 0; }
.prose .tgf-sitemap td { padding: .35em .6em; border-top: 1px solid rgba(36,27,18,.12); vertical-align: top; }
.prose .tgf-sitemap .tgf-sm-nr { text-align: left; width: 3.6em; padding-right: 1.1em; white-space: nowrap; color: #9a8f7c; }
.prose .tgf-sitemap .tgf-sm-date { white-space: nowrap; color: #6f5e4a; font-variant-numeric: tabular-nums; }
.prose .tgf-sitemap tbody tr:hover td { background: rgba(36,27,18,.035); }

/* Flipbook-Einbettung ([*Flipbook*]-Token): responsives iframe. Desktop = Doppelseiten-Querformat,
   schmale Schirme = Einzelseite-Hochformat (StPageFlip schaltet dann auf Einzelseite). */
.tgf-flipbook { clear: both; width: 100%; aspect-ratio: 1.3 / 1; max-height: 88vh; margin: 1.8em 0; }
.tgf-flipbook iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 700px) { .tgf-flipbook { aspect-ratio: 0.64 / 1; } }
/* Im „Wide Pane" sitzt der Flipbook allein in der Zone → oberen/unteren Eigenabstand weglassen
   (die Zone bringt via :has ihren eigenen Abstand mit). */
.tgf-zone-wide .tgf-flipbook { margin: 0; }
/* Gefloatete Bildbox: Abstand zum umfliessenden Text auf der Textseite (sonst klebt der Text am Bild). */
.tgf-bildbox[style*="float:right"], .tgf-bildbox[style*="float: right"] { margin-left: 1.6em; }
.tgf-bildbox[style*="float:left"],  .tgf-bildbox[style*="float: left"]  { margin-right: 1.6em; }
/* Bildunterschrift als normaler, ruhiger Fliesstext — NICHT die uppercase/letterspaced Label-Optik
   der generischen `.prose figcaption` (die sonst durchschlägt); analog zu Bild-/Videoreihe. */
.tgf-bildbox figcaption {
    margin-top: 10px;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: normal;
    font-size: .9rem;
    line-height: 1.4;
    color: #6f5e4a;
}
/* Auf schmalen Schirmen eine per Style-Argument gefloatete Bildbox NICHT floaten (sonst wird der
   Text neben einem z.B. 300px-Bild zerquetscht): volle Breite, eigene Zeile. */
@media (max-width: 575.98px) {
    .tgf-bildbox { float: none !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Lightbox (Klick aufs Bildbox-Bild → Vollbild-Vergrösserung; Markup baut Theme.js). */
.tgf-lightbox {
  position: fixed; inset: 0; z-index: 2000; cursor: zoom-out;
  background: rgba(20, 15, 11, .92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 32px;
}
.tgf-lightbox__img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); cursor: default; }
.tgf-lightbox__caption { color: #f3ebdc; font-size: .95rem; max-width: 80vw; text-align: center; }
.tgf-lightbox__close { position: absolute; top: 16px; right: 24px; background: none; border: 0; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; opacity: .85; }
.tgf-lightbox__close:hover { opacity: 1; }
body.tgf-lightbox-open { overflow: hidden; }

/* Lesebereich: warmer heller Grund, gerade Oberkante */
.reading { background: #F7F0E3; color: #2a2016; }
.reading.band {
  /* KEINE clip-path: würde vollbreiten Inhalt (Admin-Dashboard, Formulare) unten
     rechts diagonal abschneiden UND als Clipping-Container Popups/Dropdowns kappen.
     Die Diagonale zum Footer liefert der Footer selbst (.foot::before).
     z-index:auto (statt der 1 von .band): KEIN Stacking-Context → modale Dialoge
     (z.B. Admin-Dashboard, z-index 1055) liegen korrekt ÜBER Header/Footer inkl. Backdrop. */
  -webkit-clip-path: none !important;
  clip-path: none !important;
  z-index: auto !important;
  /* -1px (statt 0): das Leseband ueberlappt die Goldkopf-Unterkante um 1px, sonst schimmert
     bei gebrochener Pixelhoehe (clamp/vh) der dunkle Seiten-BG (--bg #1c1712) als haarfeine
     Naht durch. Creme deckt die Naht; der Versatz ist optisch unsichtbar. */
  margin-top: -1px !important;
  padding-top: clamp(34px, 4.5vw, 70px) !important;
}
.reading .prose .lead { color: #2a2016; }
.reading .prose p { color: #3d3125; }
.reading .prose h2.sub { color: var(--red); }
.reading .prose a { color: var(--red); }
/* Textlinks in den Zonen-Panes (Top/Left/Right/Bottom 50%/33% …) wie im Fliesstext:
   rot, Unterstrich nur bei Hover. Diese Panes liegen ausserhalb von .prose, sonst bekämen
   ihre Links nur den Browser-Default (dunkel, immer unterstrichen). Buttons ausgenommen. */
.reading .tgf-panes a:not([class*="btn"]),
.reading .tgf-fullpane a:not([class*="btn"]) {
  color: var(--red); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.reading .tgf-panes a:not([class*="btn"]):hover,
.reading .tgf-fullpane a:not([class*="btn"]):hover { text-decoration: underline; }
.reading .dropcap::first-letter { color: var(--red); }
.reading .facts, .reading .fact { border-color: rgba(36,27,18,.16); }
.reading .fact b { color: var(--red); }
.reading .fact span { color: #6f5e4a; }
.reading .prose figcaption { color: #7a6a55; }
/* Automatische Silbentrennung im Fliesstext (greift, weil <html lang="de…"> gesetzt ist).
   Bewusst nur auf Absätze des Lesebands — nicht auf Titel/Labels/Karten. */
.reading .tgf2027-module-body p,
.reading .prose p,
.reading .prose-lead {
  hyphens: auto;
  -webkit-hyphens: auto;
}
/* Lesebereich: kein Einblende-Effekt beim Fliesstext */
.reading .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* „Auch zum Thema"-Box. Der Pane ist NUR der (rechts gefloatete) Slot — die Box-Optik liegt
   PRO MODUL (s.u.), damit mehrere Module im Box-Pane mehrere Boxen ergeben statt einer durchgehenden. */
.topic-box {
  float: right; width: 300px; max-width: 42%; shape-margin: 1rem;
  margin: 0 0 18px 30px;
}
.topic-box h3 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: .84rem; color: var(--red); margin: 0 0 20px; }
/* `.prose ` davor, damit die margin:0 die Prose-Listenregel (`.prose ul:not([class]) { margin:0 0 1.4em }`)
   schlägt — sonst hängt unten in der Box ein 1.4em-Leerraum unter der letzten Zeile. */
.prose .topic-box ul { list-style: none; margin: 0; padding: 0; }
/* Listeneinträge/-links mit `.prose … ul:not([class]) > li` bzw. `.prose … li > a` qualifiziert:
   sonst schlagen die Fliesstext-Regeln `.prose ul:not([class]) > li` (Abstand .35em statt 14px)
   und `.reading .prose a` (Rot statt Dunkelbraun) die Box-Optik → Box wirkte gedrängt und „kräftig". */
.topic-box li,
.prose .topic-box ul:not([class]) > li { margin: 0 0 14px; }
.topic-box li:last-child,
.prose .topic-box ul:not([class]) > li:last-child { margin-bottom: 0; }
.topic-box a,
.prose .topic-box li > a { display: block; color: #2a2016; text-decoration: none; font-weight: 600; font-size: .92rem; line-height: 1.25; transition: color .2s var(--ease); }
.topic-box a:hover,
.prose .topic-box li > a:hover { color: var(--red); }
/* Titel rot (Linkfarbe der Website): dunkle Titel verrieten ohne Hover (Handy) nicht, dass sie
   Links sind; ein roter Pfeil davor überzeugte Reini nicht. Hover unterstreicht. */
.prose .topic-box li > a { color: var(--red); font-weight: 400; }
.prose .topic-box li > a:hover { text-decoration: underline; }
.topic-box .tb-desc { display: block; margin-top: 3px; color: #6a5f50; font-size: .82rem; line-height: 1.4; }
/* Migrierte Inhalte im Box-Pane (boxes_style_6-Steckbriefe, thumbnail/caption-Karten,
   normale Absätze mit Personen-/Textlinks): das sind Fliesstext-Links → NICHT das
   Block-Menü-Styling von „.topic-box a" erzwingen, sonst landet jeder Name auf eigener
   Zeile und das Komma verwaist. Das Block-/Fett-Styling bleibt den echten Menü-Links der
   „Auch zum Thema"-Box (in <li>) vorbehalten — Absatz-/Caption-Links sind inline. */
.topic-box .boxes a,
.topic-box p a,
.topic-box .caption a { display: inline; font-weight: inherit; font-size: inherit; line-height: inherit; }
.topic-box .boxes > p:last-child { margin-bottom: 0; }
/* Migrationsbedingtes leeres <p>&nbsp;</p> direkt nach der Box → kein Leerraum unten. */
.topic-box .boxes_style_6 + p { display: none; }
/* Box-Pane: leer → keine leere Goldfläche zeigen. */
.topic-box--pane:empty { display: none; }
/* Gefloatete Box über den nachfolgenden Fliesstext heben: der (voll breite) Default-Pane-Block
   liegt sonst – als späteres DOM-Geschwister – über der Float-Fläche und fängt Klicks/Text-
   markierung sowie im Bearbeiten-Modus das Modul-Aktionsmenü ab (Box „im Hintergrund"). */
.topic-box--pane { position: relative; z-index: 1; }
/* Box-Optik PRO MODUL: jedes Modul im Box-Pane wird eine eigene Box (Goldfläche + roter Strich),
   mit Abstand dazwischen. So ergeben 3 HTML-Module 3 Boxen statt einer durchgehenden. */
.topic-box--pane .tgf2027-module {
  background: rgba(180,147,85,.14);
  border-left: 4px solid var(--red, #c90000);
  border-radius: var(--radius);
  padding: 20px 22px;
}
/* Grundabstand zwischen den Boxen — pro Box (nicht `+`, da Module im Pane keine direkten Nachbarn
   sind; auch kein :last-child-Reset, da Oqtane im Edit-Modus jedes Modul einzeln einwickelt).
   Greift NUR, wenn kein expliziter „Abstand unten" gesetzt ist → sonst gewinnt der (tgf2027-mb-*). */
.topic-box--pane .tgf2027-module:not([class*="tgf2027-mb-"]) { margin-bottom: 18px; }
/* Auf kleinen Schirmen NICHT gefloatet, sondern gestapelt VOR dem Fliesstext (DOM-Reihenfolge).
   Breakpoint bei „lg" (≤991.98px), damit die Box auch auf iPad-Hochformat (bis 834px) bereits
   nach oben rutscht statt rechts zu floaten — sonst bleibt für Karten-/Tabellen-Module zu wenig
   Breite. Ab ≥992px (u.a. Tablet-Querformat) floatet sie wieder rechts. */
@media (max-width: 991.98px){ .topic-box { float: none; width: auto; max-width: none; margin: 0 0 1.8em; } }

/* Bildschirmfotos (Seite „Internetseite": alte Website-Stände). Helle Screenshots liefen auf dem
   Creme-Grund ohne sichtbare Kante aus → weisses Passepartout, dunklere Linie, leichter Schatten.
   Im Inhalt: <img class="tgf-screenshot" …> in der Bildbox. */
img.tgf-screenshot {
  background: #fff;
  padding: 6px;
  border: 1px solid rgba(36,27,18,.25);
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(36,27,18,.16);
}

/* Ausnahme: „Mehr zum Thema" in voller Breite UNTER dem Inhalt (z.B. Ticket-Reservation, wo eine
   gefloatete Box den Buchungsablauf stören würde). Markup im HtmlText-Modul (Container-Titel aus):
   <div class="topic-box topic-box--voll"><h3>Mehr zum Thema</h3><ul><li><a …>…</a>
   <span class="tb-desc">…</span></li></ul></div>. Liegt ausserhalb von .prose → eigene Regeln,
   mit .site qualifiziert gegen `.site a:not(.btn)` / `.site h3`. */
.topic-box.topic-box--voll {
  float: none; width: auto; max-width: none; margin: 0;
  background: rgba(180,147,85,.14);
  border-left: 4px solid var(--red, #c90000);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.site .topic-box--voll h3 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .16em; font-weight: 600; font-size: .84rem; line-height: 1.3; color: var(--red); margin: 0 0 16px; }
.topic-box--voll ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 32px; }
.topic-box--voll li { margin: 0; padding: 0; }
.topic-box--voll li::before { content: none; }
.site .topic-box--voll li > a { display: block; color: var(--red); font-weight: 400; font-size: .92rem; line-height: 1.25; text-decoration: none; }
.site .topic-box--voll li > a:hover { text-decoration: underline; }

/* Lead-Pane (oben, voll breit) — Standardtext erbt die Lead-Schrift (wie .prose p.lead)
   schon vom Container, ohne dass ein Modul die Klasse "lead" setzen muss. */
.prose-lead { font-size: 1.34rem; line-height: 1.55; margin-bottom: 1.2em; }
.prose-lead :last-child { margin-bottom: 0; }

/* Pane-Zonen um den Mittelteil (.tgf-zone-mid: Standard = Fliesstext, Intern = Default-Pane).
   Top-Zone oben (Top Full Width + Top 100%), Rest-Zone unten (Spaltenraster + Bottom 100% +
   Bottom Full Width). Abstände greifen via :has NUR bei echtem Inhalt — leere Panes/Reihen
   bleiben kollabiert (kein Leerraum). Das jeweils erste sichtbare Element bekommt KEINEN
   Top-Abstand (Standard: Creme-Band liefert die obere Polsterung; Intern: intern-body-Padding). */

/* Top-Zone: nur Abstand ZWISCHEN befüllten Top-Blöcken, nicht davor */
.tgf-fullpane--top:has(> *) ~ .tgf-panes--top:has([class^="col-"] > *) { margin-top: clamp(20px, 3vw, 40px); }
/* Mittelteil: Abstand nur, wenn oben (Top Full Width oder Top 100%) etwas befüllt ist */
.tgf-fullpane--top:has(> *) ~ .tgf-zone-mid,
.tgf-panes--top:has([class^="col-"] > *) ~ .tgf-zone-mid { margin-top: clamp(28px, 4vw, 56px); }

/* „Wide Pane" (--maxw, zwischen Lesespalte und Rest-Zone): Abstand sobald befüllt.
   Bleibt auf „Standard" bewusst auf voller --maxw-Breite (nicht wie .tgf-panes gedeckelt). */
.tgf-zone-wide:has(> *) { margin-top: clamp(28px, 4vw, 56px); }

/* Rest-Zone: steht immer hinter dem Fliesstext → Abstand sobald befüllt */
.tgf-panes--bottom:has([class^="col-"] > *) { margin-top: clamp(28px, 4vw, 56px); }
.tgf-fullpane--bottom:has(> *) { margin-top: clamp(28px, 4vw, 56px); }
.tgf-panes--bottom .row:has(> [class^="col-"] > *) ~ .row:has(> [class^="col-"] > *) { margin-top: clamp(20px, 3vw, 40px); }

/* „Standard" (schmal): die Zonen-Panes oben/unten (Top 100%, Left/Right 50%, 33er,
   Bottom 100% …) teilen die Lesespalten-Breite wie Lead/Default — damit z.B. ein
   zweispaltiges Left/Right-50%-Layout bündig unter dem Lead sitzt und nicht breiter wirkt.
   Die echten „Full Width"-Panes (.tgf-fullpane) bleiben unberührt voll breit. Auf
   „Standard breit" (.is-wide) bleibt alles auf voller --maxw-Breite. Box-Pane liegt
   ohnehin schon innerhalb von .prose. Das +2*gutter gleicht das .wrap-Innenpadding aus,
   sodass der Inhalt exakt auf der .prose-Breite (--reading) sitzt. */
.page-geschichte:not(.is-wide) .tgf-panes--top,
.page-geschichte:not(.is-wide) .tgf-panes--bottom {
  max-width: calc(var(--reading) + 2 * var(--gutter));
}

/* Fakten-Leiste */
.facts { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 2.6em 0; }
.fact { padding: 30px 22px; border-right: 1px solid var(--line); }
.fact:last-child { border-right: 0; }
.fact b { display: block; font-family: var(--font-display); font-size: 2.8rem; line-height: 1; color: var(--accent); }
.fact span { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); margin-top: 8px; display: block; }
@media (max-width: 760px){ .facts { grid-template-columns: repeat(2,1fr); } .fact:nth-child(2){border-right:0;} .fact:nth-child(1),.fact:nth-child(2){border-bottom:1px solid var(--line);} }

.history-gallery { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 24px; }
.history-gallery a { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius); }
.history-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); filter: sepia(.15); }
.history-gallery a:hover img { transform: scale(1.06); filter: none; }
@media (max-width: 620px){ .history-gallery { grid-template-columns: repeat(2,1fr); } }

/* „Mehr zum Thema" (optionaler Abschnitt) */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.sec-head .sec-link { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--accent); text-decoration: none; white-space: nowrap; }
.sec-head .sec-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.related { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 16px; }
.related a { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--surface); border-left: 4px solid var(--red); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 8px 20px rgba(0,0,0,.06); transition: box-shadow .25s var(--ease); }
.related a:hover { box-shadow: 0 14px 28px rgba(0,0,0,.12); }
.related h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.16rem; line-height: 1.22; margin: 0 0 10px; }
.related p { margin: 0 0 18px; color: var(--muted); font-size: .94rem; line-height: 1.5; }
.related .arr { align-self: flex-start; margin-top: auto; font-family: var(--font-label); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; background: var(--red); color: #fff; border: none; border-radius: var(--radius); transition: background .2s, gap .2s var(--ease); }
.related a:hover .arr { background: var(--red-deep); gap: 11px; }
.related-band { background: var(--surface); }
.tgf-public .related-band { background: linear-gradient(180deg, #BC9B5C 0%, #AA8845 100%); }
.tgf-public .related-band .eyebrow { color: #7a0c0c; }
.related-band .sec-head { margin-bottom: 26px; }
.related-band.band { padding-top: calc(clamp(32px,4.5vw,60px) + var(--slant-h)) !important; padding-bottom: calc(clamp(44px,5.6vw,82px) + var(--slant-h)) !important; }
.tgf-public .related-band .sec-title { color: #241b12; }
.tgf-public .related-band .related a { background: #F7F1E4; color: #2a2016; box-shadow: 0 8px 20px rgba(40,25,10,.12); }
.tgf-public .related-band .related a:hover { box-shadow: 0 14px 28px rgba(40,25,10,.16); }
.tgf-public .related-band .related h4 { color: #1f1812; }
.tgf-public .related-band .related p { color: #5a4f40; }

/* ============================================================
   STANDARD BREIT — Fliesstext volle Breite
   ============================================================ */
.page-geschichte.is-wide .prose { max-width: none; }
.page-geschichte.is-wide .prose figure img { max-height: 520px; object-fit: cover; }

/* ============================================================
   INTERN (Vereinsverwaltung) — Dark-Portal
   ============================================================ */
.tgf-intern {
  --i-bg:#1E2125; --i-surface:#262A2F; --i-surface-2:#313640; --i-sidebar:#282d31;
  --i-line:rgba(255,255,255,.10); --i-text:#BDC0C5; --i-bright:#DCE0E5; --i-muted:#9AA0A8;
  --i-red:#D11227; --i-gold:#D8B260;
  /* Intern: ausschliesslich Roboto (kein Abolition/Oswald) */
  --font-display: var(--font-body); --font-label: var(--font-body);
  --slant-h: clamp(26px, 5vw, 75px); --navH: calc(58px + var(--slant-h));
  --accent: var(--i-gold);
  background: var(--i-bg); color: var(--i-text);
  font-family: var(--font-body); font-weight: 300;
}
/* Intern: graues Banner statt rot */
.tgf-intern header.nav::before { background: #343a40; filter: drop-shadow(0 12px 18px rgba(0,0,0,.32)); }
/* Logo links bündig über der Sidebar */
.tgf-intern .nav-inner { max-width: none; padding-left: 24px; }
/* Sticky-Footer + Vollhöhen-Sidebar: Intern-Layout füllt die Viewport-Höhe, der Footer
   liegt immer zuunterst, die Sidebar-Spalte zieht über die ganze Höhe (scoped — Public
   behält sein flow-root-Layout). header.nav ist fixed → nur main + footer im Flex-Fluss. */
.site.tgf-intern { display: flex; flex-direction: column; }
.tgf-intern main { flex: 1 0 auto; display: flex; flex-direction: column; }
.page-intern {
  padding-top: 0; flex: 1 0 auto; display: flex; flex-direction: column; min-height: 0;
}
/* Intern: schlanker Footer (nur unterste Zeile) */
.tgf-intern .foot .f-logo { display: none; }
.tgf-intern .foot-top { display: none; }
.tgf-intern .foot-bottom { border-top: 0; }
/* Footer-Copyright bündig mit dem SIDEBAR-Text (linke Spalte), also unterhalb der Sidebar –
   nicht eingerückt zum Hauptinhalt. Der Sidebar-Text (isb-brand/isb-label/isb-item) beginnt
   bei ~24px vom Sidebar-Rand; darauf richten wir den Text aus. Der Footer selbst spannt weiter
   über die volle Breite (Legal-Links bleiben rechts). Mobile: normaler Gutter. */
.tgf-intern .foot .wrap {
  max-width: none;
  padding-left: 24px;
  padding-right: clamp(20px, 3vw, 40px);
}
@media (max-width: 900px) {
  .tgf-intern .foot .wrap { padding-left: clamp(20px, 3vw, 40px); }
}

.intern-head .wrap { padding: 16px var(--gutter) clamp(22px,3vw,34px); }
.ih-kicker { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; color: var(--i-gold); }
/* Optionaler Untertitel: kleiner, gedämpft ÜBER dem Titel (z.B. Stückname über „Bewertung
   hinzufügen"). Setzbar via ITgfPageTitleProvider.GetPageSubtitleAsync. */
/* Untertitel über dem Seitentitel: auf Fliesstextgrösse (1rem), nachdem der Seitentitel
   auf 2rem verkleinert wurde (Reini 16.07.2026) — vorher stand er mit 1,1rem fast so gross
   wie der halbe Titel da. clamp entfällt: bei 1rem gibt es nichts mehr zu skalieren. */
.intern-head .ih-subtitle { font-family: var(--font-body); font-weight: 400; font-size: 1rem; color: var(--i-muted); margin: 0 0 .15rem; line-height: 1.2; }
/* Seitentitel im Intern-Kopf in Markengold (Roboto bleibt) — Reini-Wahl 11.07.2026. */
/* Seitentitel: 2rem statt 2.4rem (Reini 16.07.2026) — zusammen mit den kleineren
   Modultitel-Stufen oben, sonst wäre der Abstand nach unten noch enger geworden.
   Untergrenze/vw mitgezogen, sonst schrumpfte nur der Desktop und Tablet/Handy blieben. */
.intern-head .ih-title { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(1.5rem,2.5vw,2rem); color: var(--i-gold); margin: 0; line-height: 1.05; }
.intern-body .wrap { padding-bottom: clamp(48px,7vw,96px); }

/* Intern: Sidebar-Layout */
.intern-shell { display: grid; grid-template-columns: 226px 1fr; grid-template-rows: 1fr; flex: 1 0 auto; transition: grid-template-columns .26s cubic-bezier(.4,0,.2,1); }
.intern-sidebar { background: var(--i-sidebar); border-right: 1px solid var(--i-line); padding: calc(var(--navH) + 16px) 0 40px; overflow: hidden; }
/* Root-/L1-Seiten (Home/Start, Login …): InternSidebar rendert leer (.intern-sidebar--empty).
   Das Sidebar-PANEL bleibt sichtbar (wie sonst), zeigt aber NICHTS (kein „Home"/„Login").
   Erst innerhalb eines Bereichs (L2+, z.B. nach Wahl von „Verein" im Topmenü) füllt es sich.
   Nur auf Mobile den Menü-Button ausblenden, damit kein leeres Drawer geöffnet werden kann. */
.site:has(.intern-sidebar--empty) .intern-menubtn { display: none !important; }
.isb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 16px 24px; }
.isb-brand { font-family: var(--font-body); letter-spacing: .04em; font-size: 1.2rem; color: var(--i-muted); white-space: nowrap; }
.isb-brand b { color: var(--i-bright); }
.isb-collapse { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: 1px solid var(--i-line); border-radius: 7px; color: var(--i-muted); cursor: pointer; }
.isb-collapse:hover { color: var(--i-text); border-color: rgba(255,255,255,.22); background: var(--i-surface-2); }
.isb-close { display: none; flex: 0 0 auto; width: 32px; height: 32px; place-items: center; background: transparent; border: 1px solid var(--i-line); border-radius: 7px; color: var(--i-muted); cursor: pointer; }
.isb-close svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.isb-close:hover { color: var(--i-text); border-color: rgba(255,255,255,.22); background: var(--i-surface-2); }
.intern-menubtn { display: none; }
.intern-scrim { display: none; }
.isb-chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .26s ease; }
.isb-group { padding: 0 14px; margin-top: 18px; }
.isb-group:first-of-type { margin-top: 0; }
/* Linker Rand exakt wie bei den Einträgen: deren Text beginnt bei 12px Innenabstand plus 2px
   Rahmen (Reini 17.08.2026 — vorher standen die Einträge 4px eingerückt zum Gruppentitel). */
.isb-label { font-size: .62rem; text-transform: uppercase; letter-spacing: .13em; color: var(--i-muted); margin: 0 0 6px 14px; white-space: nowrap; }
a.isb-label-link { display: block; text-decoration: none; cursor: pointer; transition: color .15s; }
a.isb-label-link:hover { color: var(--i-bright); }

/* Intern-Topleiste L1-Menü: auf Mobile horizontal scrollen statt vertikal stapeln
   Auf ≤768px klappt das L1-Menü — wie das öffentliche — zum Hamburger (Struktur in
   TopMenuL1.razor mit navbar-toggler/collapse); die gemeinsame .nav-menu-Mobile-CSS
   (Spalten-Panel) greift dann. Kein horizontaler Scroll mehr (sonst waren nicht alle
   L1-Einträge erreichbar). */
.isb-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 6px; color: #b3b8bf; text-decoration: none; font-size: .9rem; border-left: 2px solid transparent; white-space: nowrap; }
.isb-ico { flex: 0 0 auto; width: 19px; text-align: center; font-size: 1rem; color: currentColor; opacity: .85; }
.isb-item:hover { background: var(--i-surface-2); color: var(--i-bright); }
.isb-item:hover .isb-ico { opacity: 1; }
.isb-item.is-active { background: rgba(209,18,39,.16); color: var(--i-bright); border-left-color: var(--i-red); }
.isb-item.is-active .isb-ico { opacity: 1; color: var(--i-gold); }
.intern-main { min-width: 0; padding-top: var(--navH); }
.intern-main .wrap { max-width: none; padding-inline: clamp(20px,3vw,40px); }

/* Eingeklappt: schmale Icon-Leiste */
.intern-shell.is-collapsed { grid-template-columns: 54px 1fr; }
.intern-shell.is-collapsed .isb-txt,
.intern-shell.is-collapsed .isb-brand,
.intern-shell.is-collapsed .isb-label { display: none; }
.intern-shell.is-collapsed .isb-top { justify-content: center; padding: 0 0 14px; }
.intern-shell.is-collapsed .isb-chev { transform: rotate(180deg); }
.intern-shell.is-collapsed .isb-group { padding: 8px 7px 0; margin-top: 8px; border-top: 1px solid var(--i-line); }
.intern-shell.is-collapsed .isb-group:first-of-type { border-top: 0; padding-top: 0; }
.intern-shell.is-collapsed .isb-item { justify-content: center; gap: 0; padding: 10px 0; border-left: 0; }
.intern-shell.is-collapsed .isb-item.is-active { box-shadow: inset 2px 0 0 var(--i-red); }

/* Mobile: Sidebar als einschiebbares Drawer */
@media (max-width: 900px){
  .intern-shell, .intern-shell.is-collapsed { grid-template-columns: 1fr; }
  .intern-sidebar {
    display: block; position: fixed; top: 0; left: 0; bottom: 0;
    width: min(82vw, 296px); z-index: 80;
    padding-top: 18px; overflow-y: auto;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 50px rgba(0,0,0,.5);
  }
  .site.intern-nav-open .intern-sidebar { transform: translateX(0); }
  .intern-shell.is-collapsed .isb-txt,
  .intern-shell.is-collapsed .isb-brand,
  .intern-shell.is-collapsed .isb-label { display: revert; }
  .intern-shell.is-collapsed .isb-item { justify-content: flex-start; gap: 11px; padding: 9px 12px; border-left: 2px solid transparent; }
  .intern-shell.is-collapsed .isb-item.is-active { box-shadow: none; border-left-color: var(--i-red); }
  .intern-shell.is-collapsed .isb-group { padding: 0 14px; margin-top: 18px; border-top: 0; }
  .isb-collapse { display: none; }
  .isb-close { display: grid; }
  .intern-scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(8,9,11,.55); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
  .site.intern-nav-open .intern-scrim { opacity: 1; pointer-events: auto; }
  .intern-menubtn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--i-surface); border: 1px solid var(--i-line); border-radius: 7px;
    color: var(--i-text); font-family: var(--font-label); text-transform: uppercase;
    letter-spacing: .08em; font-size: .76rem; padding: 8px 14px 8px 11px; cursor: pointer;
    margin-bottom: 22px;
  }
  .intern-menubtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
}

/* === Admin: Oqtane-RichText-Editor (Radzen HtmlEditor) ==============================
   Radzen themed den Editor im dunklen Theme 2027 dunkel (Hintergrund/Texte kommen aus
   Radzen-CSS-Variablen wie --rz-editor-content-background-color = --rz-base-background-color).
   Fix in zwei Stufen: (1) die Editor-Variablen auf helle Werte ueberschreiben — deckt Toolbar,
   Buttons und Dropdown-Beschriftungen ab, OHNE die genauen Klassennamen zu kennen; (2) die
   Content-Flaeche zusaetzlich mit !important erzwingen, da Radzens Regel NACH der Theme.css
   laedt (gleiche Spezifitaet → sonst gewinnt Radzen). Greift nur in der Admin-Bearbeitung. */
.rz-html-editor {
  --rz-editor-content-background-color: #fff;
  --rz-editor-toolbar-background-color: #f1f3f5;
  --rz-editor-button-background-color: #f1f3f5;
  --rz-editor-button-color: #444;
  --rz-editor-separator-background-color: #ced4da;
  border: 1px solid #ced4da !important;
  border-radius: 6px;
  overflow: hidden;
}
.rz-html-editor-content {
  background: #fff !important;
  color: #1a1a1a !important;
  min-height: 18rem;
}

/* === Admin: Modul-Bearbeitungs-Dialog (Oqtane AdminContainer = Bootstrap-Modal) =====
   Beim Bearbeiten rendert Oqtane das Modul im AdminContainer: .app-admin-modal mit
   .modal-content. Nur die ÖFFENTLICHEN (hellen) Layouts bekommen den Dialog erzwungen
   hell — dort gibt es kein data-bs-theme, und ohne diese Regel schlug früher der dunkle
   Body durch. Im Intern-Layout liefert Bootstraps data-bs-theme="dark" ohnehin einen
   sauberen dunklen Modal (siehe Theme.Intern.css) → dort NICHT erzwingen. */
.tgf-public .app-admin-modal .modal-content {
  --bs-modal-bg: #fff;
  --bs-modal-color: #212529;
  background-color: #fff !important;
  color: #212529 !important;
}

/* ============================================================
   Blazor-Server Reconnect-Overlay (deutsch).
   Eigenes #components-reconnect-modal (Shared/TgfReconnect.razor, in allen Layouts) →
   Blazor nutzt UserSpecifiedDisplay und toggelt nur die Zustands-Klassen; Sichtbarkeit,
   Text und Styling steuern wir hier. Ohne aktive Zustands-Klasse: versteckt.
   ============================================================ */
/* Standardmässig unsichtbar (per opacity/visibility, NICHT display:none — sonst keine
   Übergänge). pointer-events:none, damit das unsichtbare Overlay nichts blockiert. */
#components-reconnect-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
/* Sichtbar beim Wiederverbinden und in Endzuständen — NICHT bei bloßem Pausieren.
   Einblenden mit ~1 s Verzögerung: kurze Reconnects lassen das Popup gar nicht erst
   aufblitzen (wie das Standard-Blazor-Overlay). */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease 1s, visibility 0s;
}
.tgf-reconnect__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}
.tgf-reconnect__dialog {
  position: relative;
  max-width: 24rem;
  margin: 15vh auto 0;
  background: #fff;
  color: #1f1f1f;
  border-radius: .6rem;
  padding: 1.75rem 1.5rem;
  text-align: center;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
}
.tgf-reconnect__spinner {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  border: 3px solid #d6d6dd;
  border-top-color: var(--red, #c90000);
  border-radius: 50%;
  animation: tgf-reconnect-spin 1s linear infinite;
}
@keyframes tgf-reconnect-spin { to { transform: rotate(360deg); } }
/* Selektor bewusst mit der Modal-ID (Spezifität 1,1,0), damit er globale
   p-Silbentrennung schlägt — sonst „wieder-hergestellt". */
#components-reconnect-modal .tgf-reconnect__msg {
  margin: 0;
  font-size: 1.05rem;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
}

/* ============================================================
   Oqtane-Ladeindikator (.app-progress-indicator) zeigt standardmässig
   wwwroot/loading.gif mit englischem „LOADING"-Text. Da es ein Bild ist,
   erreicht es kein Sprachpaket. Wir ersetzen es durch einen textfreien
   CSS-Spinner (gleiche Optik wie das Reconnect-Overlay).
   ============================================================ */
.app-progress-indicator {
  background-image: none !important;
}
.app-progress-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  border: 4px solid rgba(255, 255, 255, .55);
  border-top-color: var(--red, #c90000);
  border-radius: 50%;
  animation: tgf-reconnect-spin 1s linear infinite;
}

/* ====================================================================
   Modul „Theaterstueckbewertung“ (Liste/Kacheln, Detail, Formulare, Sterne,
   Status-Badges) + generische Liste (.tgf-liste, TgfListe) + Skeleton + Sterne.
   Aus dem ausgemusterten alten TGF.Theme (Commit a1b9e36^) nach Theme2027 zurueck-
   portiert — beim Theme-Wechsel war diese CSS verloren gegangen (Module rendern
   sonst ungestylt). Weitgehend theme-agnostisch via --bs-*-Variablen; im Intern liefert
   data-bs-theme="dark" + Theme.Intern.css die dunklen Werte. Eigene Vars unten generisch.
   ==================================================================== */
.tgf-theaterstueckbewertung {
    --tsb-border: var(--bs-border-color, #d0d0d7);
    --tsb-muted: var(--bs-secondary-color, #6c757d);
    --tsb-accent: var(--bs-primary, #b5121b); /* TGF-Rot als Fallback */
    --tsb-fav: #e23744;                       /* Favorit-Rot — bewusst NICHT das (oft blaue) Theme-Primary, damit es nicht wie ein Link wirkt */
}

/* ---------- Toolbar ---------- */
.tgf-theaterstueckbewertung__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

/* Filterleiste im Werkzeuge-Slot einer TgfListe. Die tgf-*-Namen sind die allgemeinen; die
   tgf-theaterstueckbewertung__*-Namen bleiben, solange dieses Modul sie trägt. Neue Module
   nehmen die allgemeinen (Reini 17.08.2026: „der Abstand entspricht nicht wie im Inventar" —
   ohne diesen Kasten stehen die Bedienelemente ohne Zwischenraum nebeneinander). */
.tgf-theaterstueckbewertung__filter,
.tgf-filterleiste {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.tgf-theaterstueckbewertung__search,
.tgf-suchfeld {
    position: relative;
}

.tgf-theaterstueckbewertung__search > i,
.tgf-suchfeld > i {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tsb-muted);
    pointer-events: none;
}

.tgf-theaterstueckbewertung__search > input,
.tgf-suchfeld > input {
    padding-left: 1.9rem;
    padding-right: 1.9rem;   /* Platz für den Lösch-Button */
    min-width: 16rem;
}

/* Lösch-Button (X) rechts im Suchfeld — nur sichtbar, wenn etwas eingegeben ist. */
.tgf-theaterstueckbewertung__search-clear,
.tgf-suchfeld__loeschen {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tsb-muted);
    cursor: pointer;
    line-height: 1;
}
.tgf-theaterstueckbewertung__search-clear:hover,
.tgf-suchfeld__loeschen:hover {
    color: var(--bs-body-color, inherit);
    background: rgba(127, 127, 127, .15);
}

.tgf-theaterstueckbewertung__status,
.tgf-filterleiste .form-select {
    width: auto;
}

.tgf-theaterstueckbewertung__count {
    color: var(--tsb-muted);
    font-size: .85rem;
    white-space: nowrap;
}

/* ===================== Wiederverwendbare Liste (TgfListe) =====================
   Tabelle ⇄ Kacheln mit Umschalter. Generische .tgf-liste__*-Klassen — wandern beim
   Promoten in die geteilte TGF.Oqtane-Lib; modul-spezifische Inhalte bleiben .tgf-theaterstueckbewertung__*. */

/* Grundschrift der Liste auf 300 (Light) wie der Website-Body — Tabellenzellen erben
   sonst 400 (Theme setzt 300 nur auf p/ul/dl). Titel (600), Kopfzeilen (500) und
   Badges (600) bleiben als direkte Regeln davon unberührt. */
.tgf-liste {
    font-weight: 300;
    /* Selbsttragend: --tsb-* generisch hier (nicht nur auf .tgf-theaterstueckbewertung),
       damit JEDES Modul mit TgfListe (z.B. Reservation) korrekt gestylt ist. Theme-agnostisch
       via --bs-* → hell=Bootstrap-Default, intern-dunkel=--i-* (Theme.Intern.css). --tgf-surface
       folgt der Bootstrap-Flaeche; Skeleton als halbtransparentes Grau (hell UND dunkel). */
    --tsb-border: var(--bs-border-color, #d0d0d7);
    --tsb-muted: var(--bs-secondary-color, #6c757d);
    --tsb-accent: var(--bs-primary, #b5121b);
    --tsb-fav: #e23744;
    --tgf-surface: var(--bs-body-bg, #fff);
    --tgf-skel-base: rgba(127, 127, 127, .15);
    --tgf-skel-shine: rgba(127, 127, 127, .32);
}

/* ---- Kopfleiste mit Ansichts-Umschalter ---- */
.tgf-liste__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    /* Etwas Luft zwischen der Werkzeug-/Button-Zeile und den Spaltenüberschriften. */
    margin-bottom: 1rem;
}

/* Kleiner, runder Schliess-X für Alerts — im Stil der Foto-Kachel im Inventar
   (.tgf-inventar-d__foto-del), statt des wuchtigen Bootstrap-btn-close (Reini 16.07.2026).
   Generisch: jede Alert-Meldung kann `<button class="tgf-alert-x"><i class="fa-solid
   fa-xmark"/></button>` einsetzen. `.alert` ist per Bootstrap position:relative; :has() gibt
   dem Text rechts etwas Platz. */
.alert:has(.tgf-alert-x) {
    padding-right: 2.4rem;
}
.tgf-alert-x {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    color: inherit;
    opacity: .7;
    line-height: 1;
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s ease, opacity .12s ease;
}
.tgf-alert-x:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .45);
}

/* TgfMeldung (Syncfusion SfMessage): SfMessage sizt von Haus aus auf Inhaltsbreite und ohne
   Abstand nach unten — als Seitenmeldung wollen wir volle Breite und Luft zur folgenden
   Werkzeugleiste (Produktionsauswahl). Gilt Theme-weit (auch öffentliche Formulare). */
.tgf-meldung.e-message {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1rem;
}
/* Erfolgsmeldung im dunklen Cockpit: das Syncfusion-Standardgrün (#21b26f) ist zu grell.
   Dezenter, gedämpfter Ton mit hellem Text (Reini 16.07.2026). Nur im Intern-Theme
   (.tgf-intern) — die höhere Spezifität schlägt zugleich die Syncfusion-Regel. */
.tgf-intern .tgf-meldung.e-message.e-success {
    background: #2f855f;
    border-color: #2f855f;
    color: #eaf5ee;
}
.tgf-intern .tgf-meldung.e-message.e-success .e-msg-icon,
.tgf-intern .tgf-meldung.e-message.e-success .e-msg-close-icon {
    color: #eaf5ee;
}

/* Produktions-Auswahl (Syncfusion SfDropDownList): feste Breite kommt über den Width-Parameter
   der Komponente (24rem). Hier nur der Schrumpf-Schutz im Flex-Slot der Werkzeugleiste —
   flex-shrink:0, sonst zieht die auf Inhaltsbreite sizende Leiste die Dropdown zusammen.
   (CssClass „tgf-produktion-auswahl" liegt auf dem .e-ddl-Wrapper.) */
.tgf-produktion-auswahl.e-ddl {
    flex-shrink: 0;
    max-width: 100%;
}

/* Syncfusion-Dropdown-Popups: schmale, DUNKLE Scrollleiste (Reini 16.07.2026 — Standard war
   zu breit und hell auf dem dunklen Popup). Popups rendern body-seitig (ausserhalb
   .tgf-intern), daher global.
   `color-scheme: dark` lässt den Browser die native Scrollleiste dunkel rendern; Scrollelement
   ist .e-content (overflow-y:auto).

   ⚠ „global" hiess ursprünglich „nur Cockpit", weil die öffentliche Site keine Syncfusion-
   Dropdowns hatte. Seit dem 10.08.2026 hat sie welche — und bekam prompt eine schwarze
   Scrollleiste im hellen Aufklappfeld (Reini). Weder .tgf-intern noch .tgf-public sind hier
   erreichbar (sie sitzen an div.site, das Popup hängt am body), darum muss jedes HELLE Popup
   die Regel selbst zurücknehmen — siehe AuffuehrungWechsel.razor. Wer das nächste öffentliche
   Dropdown baut: dieselbe Rücknahme mitnehmen. */
.e-ddl.e-popup .e-content {
    scrollbar-width: thin;                 /* Firefox */
    color-scheme: dark;                    /* native dunkle Scrollleiste */
}
.e-ddl.e-popup .e-content::-webkit-scrollbar {
    width: 8px;
}
.e-ddl.e-popup .e-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);  /* dezent auf dunklem Grund */
    border-radius: 4px;
}
.e-ddl.e-popup .e-content::-webkit-scrollbar-track {
    background: transparent;
}

/* Cockpit-Feinschliff für Syncfusion-Eingaben (Reini 16.07.2026): */
/* (a) KEIN Fokusrahmen (Reini: ganz weg). Border bleibt neutral wie unfokussiert, kein Glow.
       Das Öffnen des Popups ist die Fokus-Rückmeldung genug. */
.tgf-intern .e-input-group.e-control-wrapper.e-input-focus {
    border-color: rgb(108, 117, 125) !important;
    box-shadow: none !important;
}
/* (b) Speichern-Button der Sitzplanzuordnung: goldig wie die Bootstrap-Buttons im Cockpit,
       QUADRATISCH und exakt so hoch wie das Dropdown daneben. Syncfusions Default-Inputhöhe ist
       31.6px (nicht glatt 32) → dieselbe Zahl, sonst steht der Button minimal höher. */
.tgf-intern .tgf-speichern-btn.e-btn {
    width: 31.6px;
    height: 31.6px;
    padding: 0;
    background: var(--gold, #B49355);
    border-color: var(--gold, #B49355);
    color: #2a2016;
}
.tgf-intern .tgf-speichern-btn.e-btn:hover:not(:disabled),
.tgf-intern .tgf-speichern-btn.e-btn:focus:not(:disabled),
.tgf-intern .tgf-speichern-btn.e-btn:active:not(:disabled) {
    background: #9c7c43;
    border-color: #9c7c43;
    color: #2a2016;
}
/* Deaktiviert (nichts zu speichern): deutlich gedimmt, damit „aktiv/inaktiv" sichtbar ist.
   Meine Gold-Grundregel oben färbt sonst auch den deaktivierten Button voll gold → er wirkt
   immer aktiv, und beim Umschalten ändert sich optisch nichts (Reini). */
.tgf-intern .tgf-speichern-btn.e-btn:disabled,
.tgf-intern .tgf-speichern-btn.e-btn.e-disabled {
    opacity: .38;
}

/* (Ausgewählter Eintrag im Syncfusion-Dropdown-Popup: entfällt — das globale SF-Gold-Theme
   [Theme.Intern.css, --color-sf-content-bg-color-selected] färbt .e-list-item.e-active jetzt
   selbst golden. Hover bleibt Theme-Standard-Grau → klar von der goldenen Selektion getrennt.) */

/* Leer-Zustand (kein Treffer): Bar/Filter bleiben sichtbar, nur ein dezenter Hinweis darunter. */
.tgf-liste__leer {
    margin: .5rem 0 0;
}

/* Haupt-Aktion (z.B. „Neu"-Button), mit etwas Abstand zu den Umschalt-Buttons. */
.tgf-liste__aktion {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: .5rem;
}
/* Button-Text nie umbrechen (Bootstrap 5 setzt kein white-space auf .btn). */
.tgf-liste__aktion .btn {
    white-space: nowrap;
}

/* Linke Bar-Gruppe (Werkzeuge/Filter + Zähler); darf intern umbrechen. */
.tgf-liste__bar-left {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Rechte Bar-Gruppe (Export · Umschalter · Aktion): rechtsbündig via margin-left:auto. Bei zu
   wenig Platz bricht sie als GANZE Gruppe in eine zweite Zeile um (bleibt dort rechtsbündig),
   statt dass der Filter in sich zerfällt. */
.tgf-liste__bar-right {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-left: auto;
}

.tgf-liste__count {
    color: var(--tsb-muted);
    font-size: .85rem;
    white-space: nowrap;
}

.tgf-liste__toggle {
    display: inline-flex;
}

.tgf-liste__toggle-btn {
    border: 1px solid var(--tsb-border);
    background: var(--bs-body-bg, #fff);
    color: var(--tsb-muted);
    /* Gleiche Höhe wie die .btn-sm-„Neu"-Buttons (Padding/Schrift/Zeilenhöhe von .btn-sm). */
    padding: .25rem .55rem;
    font-size: .875rem;
    line-height: 1.5;
    cursor: pointer;
}

.tgf-liste__toggle-btn--tabelle { border-radius: .35rem 0 0 .35rem; }
.tgf-liste__toggle-btn--kacheln { border-radius: 0 .35rem .35rem 0; border-left: 0; }

.tgf-liste__toggle-btn:hover { color: var(--bs-body-color, inherit); }

.tgf-liste__toggle-btn.is-active {
    background: rgba(127, 127, 127, .14);
    color: var(--bs-body-color, inherit);
}

/* Umschalter jetzt als Syncfusion SfButton (Reini 16.07.2026): SfButtons Grund-Look (.e-btn)
   neutralisieren, damit der Segmented-Look erhalten bleibt. Gilt intern UND public (TgfListe wird
   seit BuchungExtern auch öffentlich genutzt); die 3-Klassen-Spezifität schlägt Syncfusions .e-btn. */
/* Gewählt = die HELLERE, erhabene Fläche; nicht gewählt = zurückgenommen und gedämpft.
   Reini 07.08.2026: "Die hellere Fläche ist m.E. gewählt, aber es ist grad umgekehrt."
   Stimmte — die Flächen waren vertauscht. Das Verhältnis trägt in beiden Welten: --bs-body-bg
   ist öffentlich das Weiss und im Cockpit die erhabene Oberfläche, der Grauschleier legt sich
   in beiden Fällen darüber und lässt die Schaltfläche zurücktreten. */
.tgf-intern .tgf-liste__toggle-btn.e-btn,
.tgf-public .tgf-liste__toggle-btn.e-btn {
    border: 1px solid var(--tsb-border);
    background: rgba(127, 127, 127, .14);
    color: var(--tsb-muted);
    padding: .25rem .55rem;
    min-width: 0;
    height: auto;
    line-height: 1.5;
    border-radius: 0;
    box-shadow: none;
    text-transform: none;
}
.tgf-intern .tgf-liste__toggle-btn--tabelle.e-btn,
.tgf-public .tgf-liste__toggle-btn--tabelle.e-btn { border-radius: .35rem 0 0 .35rem; }
.tgf-intern .tgf-liste__toggle-btn--kacheln.e-btn,
.tgf-public .tgf-liste__toggle-btn--kacheln.e-btn { border-radius: 0 .35rem .35rem 0; border-left: 0; }
/* Hover/Fokus/Active NICHT zusätzlich von Syncfusion einfärben — sonst doppelt gefärbte Buttons
   (v.a. der Fokus, der nach dem Klick auf dem hellen Public-Grund kräftig hängen blieb). Auf die
   Ruhe- bzw. Aktiv-Fläche halten, kein box-shadow/outline. */
.tgf-intern .tgf-liste__toggle-btn.e-btn:hover,
.tgf-intern .tgf-liste__toggle-btn.e-btn:focus,
.tgf-intern .tgf-liste__toggle-btn.e-btn:active,
.tgf-public .tgf-liste__toggle-btn.e-btn:hover,
.tgf-public .tgf-liste__toggle-btn.e-btn:focus,
.tgf-public .tgf-liste__toggle-btn.e-btn:active {
    background: rgba(127, 127, 127, .07);
    color: var(--bs-body-color, inherit);
    box-shadow: none;
    outline: none;
}
.tgf-intern .tgf-liste__toggle-btn.e-btn.is-active,
.tgf-intern .tgf-liste__toggle-btn.e-btn.is-active:hover,
.tgf-intern .tgf-liste__toggle-btn.e-btn.is-active:focus,
.tgf-public .tgf-liste__toggle-btn.e-btn.is-active,
.tgf-public .tgf-liste__toggle-btn.e-btn.is-active:hover,
.tgf-public .tgf-liste__toggle-btn.e-btn.is-active:focus {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, inherit);
}
.tgf-intern .tgf-liste__toggle-btn.e-btn .e-btn-icon,
.tgf-public .tgf-liste__toggle-btn.e-btn .e-btn-icon {
    font-size: .875rem;
    margin: 0;
}


/* --- Sitzplan-Übersicht: SfTextBox-Filter + SfButton-Aktion (Reini 16.07.2026) --- */
/* Feste, sinnvolle Filterbreite. Wrapper relativ, damit das Suchicon absolut sitzen kann. */
.tgf-intern .tgf-sitzplan__filter { position: relative; display: inline-block; }
.tgf-intern .tgf-sitzplan__filter .e-input-group { width: 18rem; max-width: 100%; }
/* Suchicon (Light-Magnifier) als eigenes Element über der Box (kein ::before — das gehört
   Syncfusions Fokuslinie). Der Löschknopf kommt via ShowClearButton der SfTextBox. */
.tgf-intern .tgf-sitzplan__such-icon {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tsb-muted);
    pointer-events: none;
    font-size: .85rem;
    z-index: 2;
}
.tgf-intern .tgf-sitzplan__suche.e-input-group .e-input { padding-left: 1.9rem; }

/* „Neuer …"-Aktionsbutton (SfButton) golden wie die Haupt-Aktion im Cockpit. */
.tgf-intern .tgf-aktion-btn.e-btn {
    background: var(--gold, #B49355);
    border-color: var(--gold, #B49355);
    color: #2a2016;
    box-shadow: none;
}
.tgf-intern .tgf-aktion-btn.e-btn:hover { background: #9c7c43; border-color: #9c7c43; color: #2a2016; }

/* Formular-Fussleiste (z.B. Sitzplan-Detail): SfButton, aber optisch identisch zu den
   früheren Bootstrap-Buttons btn-secondary (grau) / btn-primary (gold). Bootstrap-Metrik
   und -Farben nachgebildet, damit sich beim Umstieg auf Syncfusion nichts sichtbar ändert. */
.tgf-intern .tgf-form-btn.e-btn {
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .375rem;
    box-shadow: none;
    text-transform: none;
}
/* Primär = Gold, dunkle Schrift (wie .btn-primary im Cockpit). */
/* Gold mit WEISSER Schrift (Reini 10.08.2026: dunkle Schrift auf Gold "sieht irgendwie wie
   deaktiviert aus"). Dafür eine Stufe dunkleres Gold: Weiss auf #B49355 trägt nur 2.9:1,
   auf #8a6d3b 4.9:1 — erst damit ist die Beschriftung besser lesbar als vorher und nicht
   schlechter. Gleicher Ton wie öffentlich, siehe Theme.Public.css.
   Der gesperrte Knopf (flaches Dunkelgrau) hebt sich davon unverändert deutlich ab. */
/* DUNKLE Schrift auf dem Gold (Reini 17.08.2026): Im Cockpit standen zwei Gold-Knoepfe
   nebeneinander — der Bootstrap-Knopf (.btn-primary, etwa im Bestaetigungsfenster) mit dunkler
   Schrift, der Syncfusion-Knopf hier mit weisser. Reini hat den dunklen als den richtigen
   bezeichnet. Nebenbei traegt #2a2016 auf #B49355 rund 5.5:1 statt der 2.9:1 von Weiss.
   Oeffentlich bleibt es bei Weiss, dort ist der Knopf nicht neben einem Bootstrap-Gold. */
.tgf-intern .tgf-form-btn--primaer.e-btn {
    background: #B49355;
    border-color: #B49355;
    color: #2a2016;
    /* Gewicht 400: Eine Schrift auf farbigem Grund wirkt duenn, wenn sie die
       Leichtschrift der Umgebung erbt (Reini 10.08.2026). */
    font-weight: 400;
}
.tgf-intern .tgf-form-btn--primaer.e-btn:hover:not(:disabled),
.tgf-intern .tgf-form-btn--primaer.e-btn:focus:not(:disabled),
.tgf-intern .tgf-form-btn--primaer.e-btn:active:not(:disabled) {
    background: #9c7c43;
    border-color: #9c7c43;
    color: #2a2016;
}

/* Syncfusion-Schalter rund ein Drittel schmaler als ab Werk (Reini 17.08.2026): 50px wirkten
   neben einer einzeiligen Beschriftung zu breit. Nur die Breite anfassen genuegt — der Griff
   sitzt mit left:100% relativ zum Rahmen und wandert von selbst mit; die 2px Luft an beiden
   Enden bleiben erhalten (Griff 16px + 2 + 2 = 20px Mindestbreite). */
.tgf-intern .e-switch-wrapper,
.tgf-public .e-switch-wrapper {
    width: 40px;
}

/* Farbwaehler auf Feldhoehe. Ab Werk richtet sich der Knopf nach seinem 20px-Farbquadrat plus
   Innenabstand und steht damit hoeher als ein Textfeld daneben (Reini 17.08.2026). Die Hoehe
   kommt aus derselben Rechnung wie bei den uebrigen Eingabefeldern, damit die Zeile fluchtet. */
.tgf-intern .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn,
.tgf-intern .e-colorpicker-wrapper .e-split-btn-wrapper .e-split-colorpicker.e-split-btn + .e-btn,
.tgf-intern .e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-icon-btn {
    height: 32px;
}
/* Deaktiviert: MUSS deutlich als "geht nicht" lesbar sein. Syncfusion dämpft von sich aus nur
   leicht, und auf dem Gold der Primär-Variante war der Unterschied kaum zu sehen (Reini
   05.08.2026). Darum eine eigene, flache Fläche mit gedämpfter Schrift — und !important,
   weil Syncfusions eigene Regeln auf Spezifität gewinnen. */
.tgf-intern .tgf-form-btn.e-btn:disabled,
.tgf-intern .tgf-form-btn.e-btn.e-disabled {
    background: #343a40 !important;
    border-color: #495057 !important;
    color: #7d8590 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Sekundär = Bootstrap-Grau, weisse Schrift (wie .btn-secondary). */
.tgf-intern .tgf-form-btn--sekundaer.e-btn {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}
.tgf-intern .tgf-form-btn--sekundaer.e-btn:hover:not(:disabled),
.tgf-intern .tgf-form-btn--sekundaer.e-btn:focus:not(:disabled),
.tgf-intern .tgf-form-btn--sekundaer.e-btn:active:not(:disabled) {
    background: #5c636a;
    border-color: #565e64;
    color: #fff;
}

/* „Reservieren" je Zeile (SfButton, klein, Gold-Umriss statt btn-outline-primary). Hover/Fokus
   füllt Gold mit dunkler Schrift — wie die frühere Bootstrap-Variante. */
.tgf-intern .tgf-reservieren-btn.e-btn {
    padding: .25rem .65rem;
    font-size: .8rem;
    line-height: 1.5;
    border-radius: .35rem;
    box-shadow: none;
    text-transform: none;
    background: transparent;
    border-color: var(--gold, #B49355);
    color: var(--gold, #B49355);
}
.tgf-intern .tgf-reservieren-btn.e-btn:hover:not(:disabled),
.tgf-intern .tgf-reservieren-btn.e-btn:focus:not(:disabled),
.tgf-intern .tgf-reservieren-btn.e-btn:active:not(:disabled) {
    background: var(--gold, #B49355);
    border-color: var(--gold, #B49355);
    color: #2a2016;
}
/* Ausverkauft/Abgesagt: grauer Umriss, gedämpft. */
.tgf-intern .tgf-reservieren-btn--gedimmt.e-btn {
    background: transparent;
    border-color: #6c757d;
    color: #6c757d;
}

/* Kontextmenü (TgfZeilenMenu → SfContextMenu): Gefahr-Icon (Löschen) rot. Popup rendert
   body-seitig → global, nicht unter .tgf-intern. */
.tgf-zeilen-menu .tgf-zeilen-menu__gefahr-icon { color: #dc3545; }
/* Menü nach LINKS öffnen: der Drei-Punkte-Knopf sitzt in der rechten Spalte — nach rechts liefe
   das Menü über den Fensterrand (Syncfusion flippt hier nicht). Rechte Kante an der Klickposition,
   kleiner vertikaler Versatz nach unten. */
.tgf-zeilen-menu .e-contextmenu { transform: translate(-100%, .25rem); }

/* Zentrale Export-Buttons (PDF/Excel) der TgfListe — direkt beim Ansichts-Umschalter. */
.tgf-liste__export { display: inline-flex; gap: .3rem; }
.tgf-liste__export-btn {
    border: 1px solid var(--tsb-border);
    background: var(--tgf-surface, #fff);
    color: var(--tsb-muted);
    /* Gleiche Höhe wie die .btn-sm-„Neu"-Buttons. */
    padding: .25rem .55rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .35rem;
    cursor: pointer;
}
.tgf-liste__export-btn:hover { color: var(--bs-body-color, inherit); }
.tgf-liste__export-btn:disabled { opacity: .5; cursor: default; }

/* ---- Tabelle ---- */
/* Bei Überlauf (z.B. iPad im erzwungenen Tabellen-Modus) horizontal scrollbar. */
.tgf-liste__table-wrap {
    overflow-x: auto;
}

.tgf-liste__table {
    width: 100%;
    border-collapse: collapse;
}

.tgf-liste__table th,
.tgf-liste__table td {
    padding: .38rem .6rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--tsb-border);
}

/* Oeffentlich kraeftigere Trennlinien (Reini 10.08.2026: "Generell sollten die
   horizontalen Linien der Tabelle hier im Public-Web etwas staerker sein").
   var(--tsb-border) ist fuers dunkle Cockpit gewaehlt; auf dem hellen Creme-Grund
   verschwindet dieselbe Linie fast. Gilt fuer alle Tabellen der oeffentlichen
   Seite, nicht nur die Listen. */
.tgf-public {
    --tgf-tabellenlinie: rgba(36, 27, 18, .22);
}
.tgf-public .tgf-liste__table th,
.tgf-public .tgf-liste__table td,
.tgf-public table.table > :not(caption) > * > * {
    border-bottom-color: var(--tgf-tabellenlinie);
}

/* Intern-Theme: Tabellenzellen auf Body-/Kachelgrösse (.875rem) — sonst wirkt die Liste
   grösser als der Fliesstext (z.B. „Bühnenbild") und die Kacheln. Gilt für ALLE TgfListen
   im Cockpit (Theaterstück-Übersicht, „Letzte Bewertungen", Bewertungen-Tab). Öffentliche
   Listen bleiben unberührt (Scope .tgf-intern). */
.tgf-intern .tgf-liste__table td {
    font-size: .875rem;
}

/* 1. und letzte Spalte bündig (kein unnötiger Einzug). */
.tgf-liste__table th:first-child,
.tgf-liste__table td:first-child { padding-left: 0; }
.tgf-liste__table th:last-child,
.tgf-liste__table td:last-child { padding-right: 0; }

.tgf-liste__table thead th {
    font-size: .82rem;
    font-weight: 500;
    color: var(--tsb-muted);
    border-bottom-width: 2px;
    white-space: nowrap;
    user-select: none;
}

/* Sortierbare Kopfzellen: Modul markiert sie mit .tgf-liste__sort (Blazor rendert bei
   @onclick KEIN onclick-Attribut, ein th[onclick]-Selektor griffe also nie). */
.tgf-liste__table thead th.tgf-liste__sort { cursor: pointer; }
.tgf-liste__table thead th.tgf-liste__sort:hover { color: var(--bs-body-color, inherit); }

/* Die Hand nur, wenn der Klick auch etwas tut — TgfListe setzt --klickbar bei gesetztem
   OnRowClick oder Detailbereich (Reini 17.08.2026). */
.tgf-liste__row--klickbar,
.tgf-liste__card--klickbar { cursor: pointer; }
.tgf-liste__table tbody tr:hover { background: rgba(127, 127, 127, .07); }
/* Public (heller Creme-Grund): der neutrale .07-Grau-Hover ist dort zu schwach (Wert war fürs
   dunkle Cockpit getunt) → etwas kräftigeres Abdunkeln. Detailzeile ausgenommen, sonst käme das
   Aufsummieren mit ihrer .05-Zelle zurück. */
.tgf-public .tgf-liste__table tbody tr:not(.tgf-liste__detail-row):hover { background: rgba(0, 0, 0, .05); }

/* Public: die Tabelle sitzt auf derselben weissen Fläche wie die Kacheln (var(--tgf-surface)) und
   bekommt Rahmen + Rundung → wirkt als ein Panel statt transparent auf dem Creme-Grund. Innenabstand
   am Wrap (nicht an den Zellen), damit die bündige erste/letzte Spalte nicht am Panel-Rand klebt. */
.tgf-public .tgf-liste__table-wrap {
    background: var(--tgf-surface, #fff);
    border: 1px solid var(--tsb-border);
    border-radius: .55rem;
    padding: 0 1.1rem;
}
.tgf-public .tgf-liste__table tbody tr:last-child > td { border-bottom: 0; }

/* Inaktive Einträge (z.B. stornierte/terminierte Reservationen) gedimmt — allgemein für
   Zeile UND Kachel, via TgfListe-Parameter ZeileCss="… tgf-inaktiv". */
.tgf-liste__row.tgf-inaktiv,
.tgf-liste__card.tgf-inaktiv { opacity: .5; }

/* Aufklappbarer Detailbereich (TgfListe-Parameter ZeileDetail/IstAufgeklappt) — z.B. eine
   Sitzplan-Vorschau. Tabelle: eine volle-Breite-Zeile unter der Item-Zeile; Karten: ein
   Panel über die ganze Grid-Breite unter der Kachel. Beide leicht abgesetzt. */
.tgf-liste__detail-row > td {
    background: rgba(127, 127, 127, .05);
    padding-top: .25rem;
    padding-bottom: .5rem;
}
/* Kein Hover-Highlight auf der Detailzeile: die generische `tbody tr:hover`-Regel (.07) läge HINTER
   der halbtransparenten Detail-Zelle (.05), schiene durch und summierte sich zu einer intensiveren
   Fläche auf. Daher die Detail-`<tr>` beim Hover transparent halten → nur die .05-Zelle bleibt. */
.tgf-liste__table tbody tr.tgf-liste__detail-row:hover { background: transparent; }
.tgf-liste__card-detail {
    grid-column: 1 / -1;
    padding: .25rem .2rem .5rem;
}

/* Wiederverwendbare Blätter-Navigation (TgfBlaettern): ‹ N / M › mit klickbarer Positionszahl.
   Etwas Luft links/rechts der Zahl, damit die Pfeile nicht an ihr kleben. */
.tgf-blaettern { display: inline-flex; align-items: center; }
.tgf-blaettern__pos {
    display: inline-flex; align-items: baseline; gap: .3rem;
    margin: 0 .85rem; white-space: nowrap; font-size: .9rem;
}
.tgf-blaettern__total { color: var(--bs-secondary-color); }
/* Positionszahl als dezent klickbares Element (gestrichelte Unterlinie, Gold-Hover). */
.tgf-blaettern__zahl {
    background: none; border: 0; padding: 0 .1rem; color: inherit; cursor: pointer;
    line-height: 1.2; border-bottom: 1px dashed currentColor;
}
.tgf-blaettern__zahl:hover { color: var(--bs-primary, #b49355); }
.tgf-blaettern__input { width: 4.5rem; text-align: center; display: inline-block; padding: .05rem .3rem; }

/* Klick-Affordanz: Primärspalte (Titel) beim Hover unterstreichen. */
/* Kein Hover-Unterstreichen (Reini 11.07.2026): die Zeile bleibt klickbar (cursor:pointer)
   + Hintergrund-Hover genügt als Affordanz; Titel UND Datum-Spalte NICHT unterstreichen. */

.tgf-liste__primaer { font-weight: 400; }
/* Primärspalten-Links (Titel) in normaler Textfarbe statt Theme-Rot — die ganze Zeile
   ist klickbar, die Unterstreichung beim Hover genügt als Link-Affordanz. */
.tgf-liste__primaer a,
.tgf-liste__primaer a:hover {
    color: inherit !important;
    text-decoration: none;
}
.tgf-liste__num { text-align: right; white-space: nowrap; }
.tgf-liste__schnitt { width: 1%; white-space: nowrap; }

/* ---- Kacheln ---- */
.tgf-liste__cards {
    display: none;   /* Sichtbarkeit steuert die Ansichts-Logik unten (data-view) */
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .75rem;
}

.tgf-liste__card {
    /* Eigene Fläche, damit die Kachel sich vom Seitenhintergrund abhebt — egal ob
       das Modul in einem Container oder direkt auf der Seite liegt. Theme-bewusst:
       hell = weiss, dunkel = dunkle Fläche. */
    background: var(--tgf-surface, #fff);
    border: 1px solid var(--tsb-border);
    border-radius: .55rem;
    padding: .7rem .85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: border-color .12s ease, box-shadow .12s ease;
    /* Anker für ein optionales Zeilenmenü oben rechts (.tgf-liste__karte-menu). */
    position: relative;
}

/* Zeilenmenü (Drei-Punkte) oben rechts auf der Kachel — damit Kopieren/Löschen auch in
   der Kachelansicht erreichbar sind, nicht nur in der Tabelle. Generisch: jede TgfListe
   kann ihr TgfZeilenMenu in einen .tgf-liste__karte-menu-Wrapper setzen. Der Knopf bringt
   sein eigenes stopPropagation mit, öffnet also die Karte nicht mit. */
.tgf-liste__karte-menu {
    position: absolute;
    top: .3rem;
    right: .3rem;
}
/* Nur wenn ein Menü da ist: dem Titel rechts Platz geben, sonst liefe ein langer Titel
   unter den Knopf. */
.tgf-liste__card:has(.tgf-liste__karte-menu) .tgf-liste__karte-titel {
    padding-right: 1.5rem;
}

.tgf-liste__card:hover {
    border-color: var(--tsb-muted);
    box-shadow: 0 .15rem .6rem rgba(0, 0, 0, .07);
}

/* ---- Paging („Nächste N" / „Alle X") ---- */
.tgf-liste__more {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}


/* ---- Ansichts-Umschaltung (data-view: auto | tabelle | kacheln) ---- */
.tgf-liste[data-view="kacheln"] .tgf-liste__table-wrap { display: none; }
.tgf-liste[data-view="kacheln"] .tgf-liste__cards { display: grid; }

@media (max-width: 768px) {
    /* Automatik + schmal (Tablet hochkant / Handy) → Kacheln. Die Button-Hervorhebung im
       Auto-Modus kommt NICHT mehr aus @media, sondern aus is-active (JS setzt sie gemäss
       effektiv gezeigter Ansicht) — so ist immer genau ein Button aktiv. */
    .tgf-liste[data-view="auto"] .tgf-liste__table-wrap { display: none; }
    .tgf-liste[data-view="auto"] .tgf-liste__cards { display: grid; }
}

/* ---- Skeleton-Ladeplatzhalter (Shimmer) ---- */
/* Wird von TgfListe während des Datenladens statt der echten Zeilen/Kacheln gezeigt.
   Reines CSS (keine Syncfusion-Abhängigkeit), respektiert Tabelle/Kachel-Ansicht. */
.tgf-skeleton {
    display: block;
    height: .8em;
    width: 75%;
    border-radius: 4px;
    background: linear-gradient(90deg,
                var(--tgf-skel-base) 25%, var(--tgf-skel-shine) 37%, var(--tgf-skel-base) 63%);
    background-size: 400% 100%;
    animation: tgf-skeleton-shimmer 1.4s ease infinite;
}

.tgf-skeleton--titel { height: 1em; width: 55%; margin-bottom: .6rem; }
.tgf-skeleton--kurz  { width: 40%; }

/* Etwas Variation der Spaltenbreiten, damit die Skelett-Tabelle natürlicher wirkt. */
.tgf-liste__skelett td:nth-child(3n+1) .tgf-skeleton { width: 60%; }
.tgf-liste__skelett td:nth-child(3n+2) .tgf-skeleton { width: 85%; }

.tgf-liste__card .tgf-skeleton + .tgf-skeleton { margin-top: .5rem; }

/* ---------- Kachel-Inhalt: EIN Standard fuer alle TgfListe-Kacheln ----------
   Gehoert bewusst hierher zur Komponente, nicht in die Module. Vorher brachte jedes Modul
   eigene Klassen mit (tgf-inventar-karte__*, tgf-theaterstueckbewertung-karte__*,
   tgf-sitzplan-karte__*); die Titel waren zufaellig identisch, die Meta-Zeile lief mit
   .8 / .85 / .9rem auseinander. Module nutzen diese Klassen und definieren nur noch, was
   wirklich modul-eigen ist (Sterne, Kennzahlen, Badges ...).
   Die Tabellenansicht ist ueber .tgf-liste__table / __row / __num / __primaer bereits
   standardisiert - das hier ist das Gegenstueck fuer die Kacheln. */

/* Optionales Vorschaubild zuoberst in der Kachel. */
.tgf-liste__karte-bild {
    margin: 0 0 .65rem;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: rgba(255, 255, 255, .04);
}
.tgf-liste__karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Kopfzeile, wenn neben/unter dem Titel noch etwas steht (Badge, Sterne ...). */
.tgf-liste__karte-kopf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
}

.tgf-liste__karte-titel {
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
    margin-bottom: .12rem;
}

/* Hervorgehobene Einordnungszeile (Kategorie/Genre) - Gold, damit sie den Titel stuetzt
   statt mit ihm zu konkurrieren. */
.tgf-liste__karte-akzent {
    color: var(--i-gold, #d8b260);
    font-weight: 600;
    font-size: .82rem;
    margin-bottom: .28rem;
}

/* Sekundaere Angaben unter dem Titel. margin-top gibt der Zeile Luft nach oben - wichtig,
   wenn darueber ein Badge oder die Sterne stehen. Der Wert ist bewusst gleich dem
   margin-bottom von -akzent: die Kachel ist ein Block, benachbarte Margins kollabieren
   also (max gewinnt) -> hinter -akzent aendert sich der Abstand dadurch NICHT. */
.tgf-liste__karte-meta {
    color: var(--tsb-muted, var(--bs-secondary-color, #6c757d));
    font-size: .85rem;
    line-height: 1.35;
    margin-top: .28rem;
}
/* Folgt eine zweite Meta-Zeile (z.B. eine Badge-Zeile), etwas absetzen. */
.tgf-liste__karte-meta + .tgf-liste__karte-meta {
    margin-top: .3rem;
}

/* ---------- Aufführungs-Kachel (Reservationssystem-Verwaltung) ----------
   Inhalt EINER Aufführung in der TgfListe-Kachelansicht. Nur im Cockpit (Modul-Wrapper). */
/* Karte als Flex-Spalte, damit sich die Kachel über die VOLLE Kartenhöhe streckt
   (Skelett-Platzhalter stapeln in der Spalte weiterhin normal). */
.tgf-reservation-verwaltung .tgf-liste__card {
    display: flex;
    flex-direction: column;
}
/* Bei einer Aufführungs-Kachel entfällt das Karten-Padding — es wandert in die Kachel.
   So füllt die Kachel exakt die Karten-Innenfläche und der Farbstreifen kann bündig an
   allen Kanten sitzen (statt via negativer Offsets in die Rasterlücke auszubrechen). */
.tgf-reservation-verwaltung .tgf-liste__card:has(.tgf-auffuehrung-kachel) {
    padding: 0;
}
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel {
    flex: 1 1 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: .7rem .85rem;
    padding-left: calc(.85rem + 6px); /* Platz für den Streifen */
}
/* Farbiger Belegungsstreifen links, bündig an der Kartenkante über die VOLLE Höhe.
   Anker ist die position:relative-Kachel (= Karten-Innenfläche). Farbe per CSS-Variable
   --kachel-farbe vom Kachel-Element. */
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--kachel-farbe, transparent);
    border-radius: .55rem 0 0 .55rem;
}
/* Titel + Inhalt + Sitzplan. */
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel__body {
    display: flex;
    flex: 1 1 auto;
    gap: .5rem;
    margin-top: .35rem;
}
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel__bez {
    min-height: 1.2em;
}
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel__zahl {
    margin-top: auto;
    padding-top: .5rem;
}
.tgf-reservation-verwaltung .tgf-auffuehrung-kachel__frei {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: .4rem;
}
/* Mini-Sitzplan rechts in der Kachel. */
.tgf-reservation-verwaltung .tgf-kachel-sitzplan {
    width: 28%;
    flex-shrink: 0;
    overflow: hidden;
    opacity: .7;
}
.tgf-reservation-verwaltung .tgf-kachel-sitzplan svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
.tgf-reservation-verwaltung .tgf-kachel-sitzplan .sitz.occupied rect {
    fill: #6c757d !important;
    stroke: #495057 !important;
}
.tgf-reservation-verwaltung .tgf-kachel-sitzplan .sitz.occupied text {
    fill: #adb5bd !important;
    opacity: .6;
}
/* Produktions-Auswahl in der TgfListe-Werkzeugleiste. */
.tgf-reservation-verwaltung .tgf-verwaltung__filter {
    display: flex;
    align-items: center;
}
/* Datum in der Tabelle: Wochentag fester Breite (Datumsteile fluchten), Uhrzeit gedimmt. */
.tgf-reservation-verwaltung .tgf-verwaltung__wtag {
    display: inline-block;
    width: 1.8rem;
}
.tgf-reservation-verwaltung .tgf-verwaltung__zeit {
    color: var(--tsb-muted, var(--bs-secondary-color));
    margin-left: .35rem;
}
/* Belegungsspalte: Prozentwert LINKS in fester Breite (rechtsbündig, damit die % fluchten),
   daneben der Balken (Farbe = Belegungsampel). */
.tgf-reservation-verwaltung .tgf-verwaltung__belegung {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 11rem;
    max-width: 100%;
}
.tgf-reservation-verwaltung .tgf-verwaltung__belegung-wert {
    flex: 0 0 3.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.tgf-reservation-verwaltung .tgf-verwaltung__belegung-bar {
    position: relative;
    flex: 1 1 auto;
    height: 1.1rem;
    border-radius: .25rem;
    background-color: rgba(255, 255, 255, .12);
    overflow: hidden;
}
.tgf-reservation-verwaltung .tgf-verwaltung__belegung-fuellung {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}
/* Totalisierungs-Fusszeile: oben abgesetzt, fett; nicht klickbar (kein Zeilen-Hover). */
.tgf-reservation-verwaltung .tgf-verwaltung__total td {
    border-top: 2px solid var(--bs-border-color, rgba(255, 255, 255, .25));
    font-weight: 600;
}

/* ---------- Zeilenmenue (TgfZeilenMenu) ----------
   Drei-Punkte-Knopf am Zeilenende + Kontextmenue. Das Menue liegt bewusst auf
   position:fixed und wird an der Klickposition aufgespannt: .tgf-liste__table-wrap hat
   overflow-x:auto, ein normal positioniertes Menue wuerde dort abgeschnitten. */
.tgf-liste__menu-zelle {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.tgf-liste__menu-btn {
    background: none;
    border: 0;
    color: inherit;
    padding: .15rem .4rem;
    border-radius: .3rem;
    cursor: pointer;
    opacity: .65;
    line-height: 1;
}
.tgf-liste__menu-btn:hover,
.tgf-liste__menu-btn:focus-visible {
    opacity: 1;
    background: rgba(128, 128, 128, .22);
}
/* Faengt den naechsten Klick irgendwo auf der Seite und schliesst das Menue. */
.tgf-liste__menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
}
.tgf-liste__menu {
    position: fixed;
    z-index: 1081;
    min-width: 11rem;
    padding: .3rem;
    display: flex;
    flex-direction: column;
    background: var(--tgf-surface, #fff);
    border: 1px solid var(--tsb-border, rgba(128, 128, 128, .35));
    border-radius: .45rem;
    box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .35);
}
.tgf-liste__menu-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: none;
    border: 0;
    color: inherit;
    text-align: left;
    padding: .42rem .6rem;
    border-radius: .3rem;
    cursor: pointer;
    font-size: .9rem;
    white-space: nowrap;
}
.tgf-liste__menu-item:hover:not(:disabled),
.tgf-liste__menu-item:focus-visible:not(:disabled) {
    background: rgba(128, 128, 128, .22);
}
.tgf-liste__menu-item:disabled {
    opacity: .4;
    cursor: default;
}
.tgf-liste__menu-item--gefahr:not(:disabled) {
    color: var(--bs-danger, #dc3545);
}

@keyframes tgf-skeleton-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .tgf-skeleton { animation: none; }
}

/* ---- Modul-spezifische Inhalte ---- */
.tgf-theaterstueckbewertung__sort,
.tgf-sortpfeil {
    margin-left: .25rem;
    font-size: .72rem;
    opacity: .85;
}

.tgf-theaterstueckbewertung__rollen-hd {
    color: var(--tsb-muted);
    font-size: .8rem;
    margin-left: .25rem;
}

.tgf-theaterstueckbewertung__fav {
    color: var(--tsb-fav);
    white-space: nowrap;
}

/* Titel in DIESEM Modul fett — generisches .tgf-liste__primaer bleibt neutral,
   damit andere Module bei Wiederverwendung selbst entscheiden. */
.tgf-theaterstueckbewertung .tgf-liste__primaer {
    font-weight: 600;
}

/* Kachel-Inhalt — Kopf/Titel/Genre kommen aus dem Standard (.tgf-liste__karte-*).
   Hier stehen nur noch die modul-eigenen Teile. */

/* Sterne + Favorit-Herz in EINER Zeile (unter dem Titel) in der Kachelansicht. */
.tgf-theaterstueckbewertung-karte__sterne {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Person und Datum/Zeit jeweils auf eigener Zeile. */
.tgf-theaterstueckbewertung-karte__person,
.tgf-theaterstueckbewertung-karte__zeit {
    display: block;
}

.tgf-theaterstueckbewertung-karte__kennzahlen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem 1rem;
    margin-top: .55rem;
    color: var(--tsb-muted);
    font-size: .9rem;
}

.tgf-theaterstueckbewertung-karte__kz { white-space: nowrap; }

/* ---------- Sterne ---------- */
.tgf-sterne {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    white-space: nowrap;
}

.tgf-sterne__voll {
    color: #f4b400;
}

.tgf-sterne__leer {
    color: #c9c9d1;
}

.tgf-sterne__wert {
    margin-left: .4rem;
    font-variant-numeric: tabular-nums;
    color: var(--tsb-muted);
    font-size: .85rem;
    /* Feste, rechtsbündige Wert-Spalte: „–" (fehlende Bewertung) ist sonst schmaler als „4.0",
       wodurch die davorstehenden Sterne nach rechts wandern und zeilenübergreifend nicht fluchten. */
    display: inline-block;
    min-width: 1.9rem;
    text-align: right;
}

/* ---------- Status-Badge ---------- */
.tgf-theaterstueckbewertung__badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 1rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* Kräftigere Füllung, damit die Badges auch ohne weissen Container-Hintergrund
   (z.B. direkt auf dem beigen Seitenhintergrund) gut sichtbar sind. */
.tgf-theaterstueckbewertung__badge--auswahl   { background: #d4d8df; color: #394049; }  /* grau */
.tgf-theaterstueckbewertung__badge--spielbar  { background: #bce6c8; color: #11663a; }  /* grün */
.tgf-theaterstueckbewertung__badge--gespielt  { background: #cbd5e3; color: #3e4d62; }  /* blaugrau */
.tgf-theaterstueckbewertung__badge--abgelehnt { background: #f4c7c7; color: #9e2121; }  /* rot */

/* ---------- Responsiv: Toolbar ---------- */
@media (max-width: 640px) {
    .tgf-theaterstueckbewertung__toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tgf-theaterstueckbewertung__search > input {
        min-width: 0;
        width: 100%;
    }
}

/* ===================== Detailansicht ===================== */
/* Kopfzeile: „Zurück zur Liste" links, Aktionen rechts — auf gleicher Höhe, mit Abstand zu den Kacheln. */
/* Kopfleiste einer Detailansicht: Zurueck-Verweis links, Aktionen rechts. .tgf-topbar ist der
   allgemeine Name fuer neue Module; die Klasse der Theaterstueckbewertung bleibt daneben stehen,
   damit ihr Markup unangetastet bleibt. */
.tgf-theaterstueckbewertung-d__topbar,
.tgf-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tgf-topbar__aktionen {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

/* Zurueck-Verweis ueber einer Detail- oder Formularansicht. Ohne padding-left stuende er
   eingerueckt, weil ein Bootstrap-Knopf seitlichen Innenabstand mitbringt — er fluchtet dann
   nicht mit den Beschriftungen darunter (Reini 17.08.2026).

   .tgf-zurueck ist der allgemeine Name fuer neue Module; die Klasse der Theaterstueckbewertung
   bleibt daneben stehen, damit ihr Markup unangetastet bleibt. */
.tgf-theaterstueckbewertung-d__back,
.tgf-zurueck {
    padding-left: 0;
    text-decoration: none;
    margin-bottom: 0;
}

/* Detail-Tabs: Theaterstück / Bewertungen */
.tgf-tsb-tabs {
    display: flex;
    gap: .25rem;
    border-bottom: 1px solid var(--tsb-border);
    margin-bottom: 1.5rem;
}

.tgf-tsb-tab {
    border: none;
    background: none;
    padding: .55rem 1rem;
    /* <button> erbt Schriftart NICHT automatisch → explizit Roboto, sonst Browser-Standardschrift. */
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--tsb-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tgf-tsb-tab:hover {
    color: var(--bs-emphasis-color, inherit);
}

.tgf-tsb-tab--aktiv {
    color: var(--bs-emphasis-color, inherit);
    border-bottom-color: var(--bs-primary);
}

.tgf-tsb-tab__count {
    display: inline-block;
    background: var(--tsb-border);
    color: var(--tsb-muted);
    border-radius: 1rem;
    padding: 0 .5rem;
    font-size: .8rem;
    margin-left: .15rem;
    vertical-align: middle;
}



.tgf-theaterstueckbewertung-d__head {
    margin-bottom: .5rem;
}

.tgf-theaterstueckbewertung-d__titel {
    margin: 0 0 .4rem;
    font-size: 1.6rem;
}

.tgf-theaterstueckbewertung-d__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.tgf-theaterstueckbewertung-d__genre {
    color: var(--tsb-muted);
    font-style: italic;
}

/* Stammdaten als zweispaltige Definitionsliste, auf Mobile gestapelt */
.tgf-theaterstueckbewertung-d__daten {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .2rem 1.5rem;
    margin: 0 0 2rem;
}

.tgf-theaterstueckbewertung-d__daten dt {
    color: var(--tsb-muted);
    font-weight: 600;
}

.tgf-theaterstueckbewertung-d__daten dd {
    margin: 0;
}

.tgf-theaterstueckbewertung-d__pre {
    white-space: pre-line;
}

/* ── Inventar-Detail: zwei Kacheln (Artikel-Daten + Fotos) nebeneinander (flex, umbrechend) ── */
/* Inventar-Katalogkachel: Bild, Titel, Kategorie und Material · Farbe kommen komplett aus
   dem Kachel-Standard (.tgf-liste__karte-bild/-titel/-akzent/-meta) — kein modul-eigenes
   Kachel-CSS mehr noetig. */

/* Stammdaten-Verwaltung: drei Sektionen (Kategorien/Lagerorte/Materialien) nebeneinander. */
.tgf-inventar-stamm {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.tgf-inventar-stamm__sektion {
    flex: 1 1 20rem;
    min-width: 0;
    margin: 0;
}
.tgf-inventar-stamm__liste {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .4rem;
}
.tgf-inventar-stamm__zeile {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.tgf-inventar-stamm__zeile--neu {
    margin-top: .5rem;
}
.tgf-inventar-stamm__name {
    flex: 1 1 auto;
    min-width: 0;
}
.tgf-inventar-stamm__anz {
    flex: 0 0 auto;
    min-width: 1.6rem;
    text-align: center;
    font-size: .8rem;
    color: var(--tsb-muted, var(--bs-secondary-color, #6c757d));
}
/* Platzhalter in der „Neu"-Zeile anstelle des Löschen-Buttons, damit die Eingaben fluchten. */
.tgf-inventar-stamm__spacer {
    flex: 0 0 auto;
    width: 2rem;
}
.tgf-inventar-stamm__fehler {
    margin-bottom: 1rem;
}

/* Vor-/Zurück-Blättern in der Detail-Topbar (neben Bearbeiten). */
.tgf-inventar-d__blaettern {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-right: .35rem;
}
.tgf-inventar-d__blaettern-pos {
    font-size: .8rem;
    color: var(--tsb-muted, var(--bs-secondary-color, #6c757d));
    min-width: 2.6rem;
    text-align: center;
}

/* Farb-Bullet aus der Farbbeschreibung (Detail + Übersicht). */
.tgf-farbbullet {
    display: inline-block;
    width: .78rem;
    height: .78rem;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, .5);
    vertical-align: -1px;
    margin-right: .18rem;
    flex: 0 0 auto;
}
/* Ohne erkannte Farbe: Slot bleibt (gleiche Breite/Abstand), aber unsichtbar → Begriffe fluchten. */
.tgf-farbbullet--leer {
    border-color: transparent;
    background: transparent;
}

.tgf-inventar-d__kacheln {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}
.tgf-inventar-d__kacheln > .tgf-tsb-kachel {
    width: auto;          /* die Masonry-Breite (100%) im Flex-Kontext aufheben */
    margin: 0;
    flex: 1 1 22rem;      /* Artikel-Kachel und rechte Spalte teilen sich den Platz gleichmässig */
}
/* Rechte Spalte: Fotos- und Dokumente-Kachel untereinander gestapelt, teilt sich den Platz
   mit der Artikel-Kachel (gleiche Flex-Basis). */
.tgf-inventar-d__kacheln > .tgf-inventar-d__spalte {
    flex: 1 1 22rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tgf-inventar-d__spalte > .tgf-tsb-kachel {
    width: auto;
    margin: 0;
}
.tgf-inventar-d__kacheln .tgf-theaterstueckbewertung-d__daten {
    margin-bottom: 0;
}

/* Kompakte Erfasst/Geändert-Zeilen (Portal-Stil): Icon + Wochentag/Datum | Zeit | Benutzer.
   Als eigene Rasterzeile, aber linksbündig unter den Labeln (Wert spannt beide Spalten) und mit
   etwas Luft nach oben zur Trennlinie. Beide Klassen kombiniert → höhere Spezifität als die
   spätere Kurz-Regel `.tgf-tsb-kachel__zeile { padding: .4rem 0 }`, sonst wird padding-top
   wieder auf .4rem zurückgesetzt. */
.tgf-tsb-kachel__zeile.tgf-inventar-d__audit-zeile {
    padding-top: .9rem;
}
/* Audit-Text etwas abdunkeln, damit er optisch stärker in den Hintergrund tritt. */
.tgf-inventar-d__audit-zeile .tgf-audit {
    opacity: .8;
}
.tgf-inventar-d__audit-zeile dt {
    display: none;
}
.tgf-inventar-d__audit-zeile dd {
    grid-column: 1 / -1;
}
/* ── Wiederverwendbare Audit-Darstellung (TgfAudit): kompakte Erfasst/Geändert-Zeilen ── */
.tgf-audit {
    color: var(--tsb-muted, var(--bs-secondary-color, #6c757d));
    font-size: .8rem;
    display: flex;
    flex-direction: column;
    gap: .12rem;
}
/* Eine Zeile: Icon + Elemente (Datum, Zeit, Name) mit feinen Trennern.
   flex-wrap → beim Umbruch brechen ganze Elemente (nowrap), nie mitten im Namen/der Zeit. */
.tgf-audit__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: .1rem;
    line-height: 1.3;
}
.tgf-audit__line > i {
    margin-right: .5rem;
    opacity: .75;
}
.tgf-audit__teil {
    white-space: nowrap;
}
/* Feiner, etwas höherer Trennstrich mit Luft links/rechts. */
.tgf-audit__sep {
    flex: 0 0 auto;
    display: inline-block;
    width: 1px;
    height: 1.15em;
    background: currentColor;
    opacity: .3;
    margin: 0 .675rem;
}
/* Wochentag-Kürzel feste Breite, damit Datum/Zeit fluchten. */
.tgf-audit__wtag {
    display: inline-block;
    width: 1.7rem;
}
.tgf-inventar-d__fotos {
    flex: 1 1 300px;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-content: flex-start;
}
.tgf-inventar-d__foto {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: .5rem;
    overflow: hidden;
    border: 1px solid var(--tsb-border);
    background: rgba(127, 127, 127, .06);
}
.tgf-inventar-d__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tgf-inventar-d__pdf {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .75rem;
    border: 1px solid var(--tsb-border);
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    font-size: .85rem;
    height: fit-content;
}
.tgf-inventar-d__pdf .fa-file-pdf {
    color: #c0392b;
}

/* ── Wiederverwendbare Bild-Lightbox (TgfLightbox) — Vollbild-Popup mit Blättern ── */
.tgf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, .85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    outline: none;
}
.tgf-lightbox__inhalt {
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}
.tgf-lightbox__inhalt img {
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    object-fit: contain;
    border-radius: .3rem;
    box-shadow: 0 6px 40px rgba(0, 0, 0, .5);
}
.tgf-lightbox__cap {
    color: #eee;
    font-size: .9rem;
    text-align: center;
    max-width: 60ch;
}
.tgf-lightbox__pos {
    color: rgba(255, 255, 255, .65);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
.tgf-lightbox__close {
    position: absolute;
    top: .5rem;
    right: 1rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
}
.tgf-lightbox__close:hover {
    opacity: 1;
}
.tgf-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .12);
    border: 0;
    color: #fff;
    font-size: 2.6rem;
    line-height: 1;
    width: 3rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: .4rem;
    cursor: pointer;
    opacity: .85;
}
.tgf-lightbox__nav:hover {
    background: rgba(255, 255, 255, .22);
    opacity: 1;
}
.tgf-lightbox__prev { left: 1rem; }
.tgf-lightbox__next { right: 1rem; }

/* Klickbare Foto-Thumbnails (öffnen die Lightbox) — Button ohne Button-Optik. */
.tgf-inventar-d__foto {
    padding: 0;
    background: rgba(127, 127, 127, .06);
    cursor: pointer;
}
.tgf-inventar-d__pdfs {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin-top: .75rem;
}
.tgf-inventar-d__pdf-zeile {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Foto-Thumbnail mit Löschen-Overlay (nur bei Schreibrecht). */
.tgf-inventar-d__foto-wrap {
    position: relative;
    line-height: 0;
}
/* Ziehbar zum Umsortieren (nur bei Schreibrecht). */
.tgf-inventar-d__foto-wrap--drag {
    cursor: grab;
}
.tgf-inventar-d__foto-wrap--drag:active {
    cursor: grabbing;
}
.tgf-inventar-d__hinweis {
    color: var(--tsb-muted);
    font-size: .8rem;
    margin-top: .55rem;
}
.tgf-inventar-d__foto-del {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    opacity: .85;
    line-height: 1;
    transition: background .12s ease, opacity .12s ease;
}
.tgf-inventar-d__foto-del:hover {
    background: #c0392b;
    opacity: 1;
}
.tgf-inventar-d__foto-del--inline {
    position: static;
    width: 1.4rem;
    height: 1.4rem;
    background: transparent;
    color: var(--tsb-muted);
    opacity: .8;
}
.tgf-inventar-d__foto-del--inline:hover {
    background: transparent;
    color: #c0392b;
    opacity: 1;
}

/* Upload-Bereich unter den Fotos. */
.tgf-inventar-d__upload {
    margin-top: .9rem;
}
.tgf-inventar-d__upload-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: flex-start;
}
.tgf-inventar-d__upload label {
    cursor: pointer;
    margin: 0;
}

/* Handy-Upload (wiederverwendbare Komponente): Button + QR-Popover. */
.tgf-mobilupload {
    position: relative;
    display: inline-block;
}
.tgf-mobilupload__panel {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: .45rem;
    z-index: 30;
    width: min(19rem, 82vw);
    background: #fff;
    color: #2a2016;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    padding: 1rem 1rem 1.1rem;
    text-align: center;
}
.tgf-mobilupload__close {
    position: absolute;
    top: .35rem;
    right: .5rem;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.tgf-mobilupload__close:hover {
    color: #c0392b;
}
.tgf-mobilupload__hint {
    font-size: .82rem;
    color: #5a5348;
    margin: .1rem 0 .7rem;
}
.tgf-mobilupload__qr {
    width: 12.5rem;
    height: 12.5rem;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
}
.tgf-mobilupload__count {
    color: #2e7d32;
    font-weight: 600;
    font-size: .9rem;
    margin: .6rem 0 0;
}
.tgf-mobilupload__ablauf {
    font-size: .74rem;
    color: #8a8275;
    margin: .4rem 0 0;
}
.tgf-inventar-d__upload-fehler {
    color: var(--bs-danger, #dc3545);
    font-size: .85rem;
    margin-top: .35rem;
}

.tgf-theaterstueckbewertung-d__rollenanz {
    color: var(--tsb-muted);
    font-size: .9rem;
}

/* Abstand zwischen den Feldgruppen der Stammdatenliste (spannt beide Spalten). */
.tgf-theaterstueckbewertung-d__trenner {
    grid-column: 1 / -1;
    height: .55rem;
}

/* ---------- Detail als Kacheln (Portal-Look) ---------- */
.tgf-theaterstueckbewertung-d {
    --tsb-border: var(--bs-border-color, #d0d0d7);
    --tsb-muted: var(--bs-secondary-color, #6c757d);
    --tsb-fav: #e23744;   /* Favorit-Rot wie auf der Übersicht (.tgf-theaterstueckbewertung) */
}

/* Masonry via Mehrspalten: 2 Spalten sobald Platz ist, sonst 1. */
.tgf-tsb-kacheln {
    column-gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 780px) {
    .tgf-tsb-kacheln {
        column-count: 2;
    }
}

.tgf-tsb-kachel {
    break-inside: avoid;
    /* inline-block + width:100% → Mehrspalten-Masonry rendert in Safari/Firefox wie in Chrome
       (sonst fügt Safari an Spaltenumbrüchen oben zusätzlichen Abstand ein). */
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 1rem;
    background: rgba(127, 127, 127, .06);
    border: 1px solid var(--tsb-border);
    border-radius: .75rem;
    padding: 1.1rem 1.35rem 1.2rem;
    /* Kachelinhalt (Fliesstext + Tabellen) kleiner → klare Abstufung zum Titel/Banner. */
    font-size: .875rem;
    /* Regular statt des dünnen Intern-Light (300) — für den ganzen Kachelinhalt einheitlich. */
    font-weight: 400;
}

.tgf-tsb-kachel__titel {
    margin: 0 0 .85rem;
    font-size: 1.2rem;
    font-weight: 500;
    /* heller als der Fliesstext, damit es klar als Titel gelesen wird (im Dark near-white). */
    color: var(--bs-emphasis-color, inherit);
}

.tgf-tsb-kachel__daten {
    display: grid;
    /* feste Label-Spaltenbreite → Werte fluchten über ALLE Kacheln hinweg */
    grid-template-columns: 9.5rem 1fr;
    margin: 0;
}

/* Eine Feldzeile spannt beide Spalten (durchgezogene Trennlinie), richtet ihre Zellen aber
   per Subgrid an der gemeinsamen Label/Wert-Spalte aus. */
.tgf-tsb-kachel__zeile {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 0 1.5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--tsb-border);
}

.tgf-tsb-kachel__zeile:last-child {
    border-bottom: none;
}

.tgf-tsb-kachel__zeile dt {
    margin: 0;
    color: var(--tsb-muted);
    font-weight: 600;
}

.tgf-tsb-kachel__zeile dd {
    margin: 0;
}

/* Fliesstext: engere Zeilen + kleiner Absatzabstand */
.tgf-tsb-kachel__absatz {
    white-space: pre-line;
    line-height: 1.5;
    margin: 0 0 .45rem;
}

.tgf-tsb-kachel__absatz:last-child {
    margin-bottom: 0;
}

/* ── TgfKachel: wiederverwendbare Detail-Karte (Titel + dt/dd-Zeilen und/oder freier Inhalt).
   Nachfolger des früher überall von Hand aufgebauten tgf-tsb-kachel-DIV-Gerüsts; erzeugt von
   TgfKachel/TgfKachelZeile (TGF.Components). Selbsttragend — definiert die --tsb-*-Töne selbst,
   kein Wrapper (tgf-theaterstueckbewertung-d) mehr nötig. Label-Spalte inhaltsbasiert (nicht die
   alten festen 9.5rem) → auf schmalen Karten (iPad) bleibt der Wert lesbar. ── */
.tgf-kachel {
    --tsb-border: var(--bs-border-color, #d0d0d7);
    --tsb-muted: var(--bs-secondary-color, #6c757d);
    background: rgba(127, 127, 127, .06);
    border: 1px solid var(--tsb-border);
    border-radius: .75rem;
    padding: 1.1rem 1.35rem 1.2rem;
    font-size: .875rem;
    font-weight: 400;
}
.tgf-kachel__titel {
    margin: 0 0 .85rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--bs-emphasis-color, inherit);
}
.tgf-kachel__daten {
    display: grid;
    /* FESTE Label-Breite auf grossen Schirmen → alle Karten fluchten untereinander
       (einheitlich/stabil). 8rem trägt das längste Label („Organisation") mit Reserve.
       Werte, die nicht passen, brechen um (dd: min-width:0 + overflow-wrap) statt überzulaufen. */
    grid-template-columns: 8rem 1fr;
    margin: 0;
}
/* iPad/Tablet & schmaler: Label inhaltsbasiert + kompakt (min 4.5rem), damit es in den
   schmaleren Karten nicht zu breit wird und der Wert mehr Platz bekommt. Die zeilenweise
   Flucht tritt hier zugunsten der Kompaktheit zurück (Reini-Vorgabe). */
@media (max-width: 991.98px) {
    .tgf-kachel__daten {
        grid-template-columns: minmax(4.5rem, max-content) 1fr;
    }
}
.tgf-kachel__zeile {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    gap: 0 1.5rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--tsb-border);
}
.tgf-kachel__zeile:last-child {
    border-bottom: none;
}
.tgf-kachel__zeile dt {
    margin: 0;
    color: var(--tsb-muted);
    font-weight: 600;
}
.tgf-kachel__zeile dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
}
.tgf-kachel__absatz {
    white-space: pre-line;
    line-height: 1.5;
    margin: 0 0 .45rem;
}
.tgf-kachel__absatz:last-child {
    margin-bottom: 0;
}
/* Audit-Zeile: linksbündig über die volle Breite, kein Label (z.B. für TgfAudit). */
.tgf-kachel__zeile--audit {
    display: block;
    padding-top: .9rem;
}
.tgf-kachel__zeile--audit dd {
    margin: 0;
}

/* Rollen-Kennzahlen mit Symbolen (Gesamt/Herren/Damen), gleiche Schriftgrösse wie der Text */
.tgf-tsb-kachel__rollenzahl {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: .55rem;
    color: var(--tsb-muted);
}

.tgf-tsb-kachel__rollenzahl i {
    margin-right: .3rem;
}

.tgf-theaterstueckbewertung-d__rollen {
    margin-top: .35rem;
}

/* Bewertungen */
.tgf-theaterstueckbewertung-d__bw-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1rem;
}

/* „Bewertung hinzufügen" immer rechtsbündig (wie „Neues Stück" in der Übersicht). */
.tgf-theaterstueckbewertung-d__bw-neu {
    margin-left: auto;
}

.tgf-theaterstueckbewertung-d__bw-count {
    display: inline-block;
    background: var(--tsb-border);
    color: var(--tsb-muted);
    border-radius: 1rem;
    padding: 0 .55rem;
    font-size: .85rem;
    margin-left: .25rem;
}

.tgf-theaterstueckbewertung-d__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--tsb-muted);
    font-size: .9rem;
}

.tgf-theaterstueckbewertung-d__footer strong {
    color: inherit;
    font-variant-numeric: tabular-nums;
}

/* Gesamt fuehrt auch in der Total-Zeile: hervorgehoben und mit etwas Abstand zu den Teilwerten. */
.tgf-theaterstueckbewertung-d__footer-gesamt {
    color: var(--bs-emphasis-color, inherit);
    font-weight: 500;
    margin-right: .5rem;
}

.tgf-theaterstueckbewertung-d__bw-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Bewertungen als TgfListe (Tabelle ⇄ Kacheln). In der Kachelansicht behalten die Karten
   ihr eigenes Aussehen (.tgf-theaterstueckbewertung-bw) → die TgfListe-Kachelhülle liefert
   hier KEINE eigene Fläche/Padding/Rahmen (sonst doppelter Rahmen). */
.tgf-theaterstueckbewertung-d__bwliste .tgf-liste__card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.tgf-theaterstueckbewertung-d__bwliste .tgf-liste__card:hover {
    box-shadow: none;
}
/* Hover-Affordanz an der inneren Karte (wie früher --klick). */
.tgf-theaterstueckbewertung-d__bwliste .tgf-liste__card:hover .tgf-theaterstueckbewertung-bw {
    border-color: var(--bs-primary);
}

/* Etwas Luft nach den Sternen/Zahlen, damit die vier Bewertungs-Spalten (Gesamt/Inhalt/
   Rollen/Umsetzung) nicht zu wuchtig nebeneinander wirken. */
.tgf-theaterstueckbewertung-d__bwliste .tgf-liste__schnitt {
    padding-right: 1.75rem;
}

/* Favorit-Spalte: schmal, zentriert, nur das Herz. */
.tgf-theaterstueckbewertung-d__favspalte {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

/* Datumszelle nie umbrechen: Wochentag, Datum und Zeit bleiben in einer Zeile. */
.tgf-theaterstueckbewertung-d__datumzelle {
    white-space: nowrap;
}

/* Wochentag-Kürzel feste Breite, damit „Mi"/„Fr" gleich breit stehen (proportionale Schrift). */
.tgf-theaterstueckbewertung-d__wtag {
    display: inline-block;
    width: 1.8rem;
}

/* Bewertungs-Karten sehen aus wie die Stück-Kacheln (gleiche Fläche/Radius/Padding/Schrift). */
.tgf-theaterstueckbewertung-bw {
    background: rgba(127, 127, 127, .06);
    border: 1px solid var(--tsb-border);
    border-radius: .75rem;
    padding: 1.1rem 1.35rem 1.2rem;
    font-size: .875rem;
    font-weight: 400;
}

.tgf-theaterstueckbewertung-bw__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.tgf-theaterstueckbewertung-bw__name {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--bs-emphasis-color, inherit);
}

.tgf-theaterstueckbewertung-bw__titelbox {
    display: flex;
    flex-direction: column;
}

.tgf-theaterstueckbewertung-bw__zeit {
    color: var(--tsb-muted);
    font-size: .8rem;
    margin-top: .1rem;
}

/* Klickbare Bewertungs-Kachel (öffnet die Detailansicht der Bewertung) */
.tgf-theaterstueckbewertung-bw--klick {
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.tgf-theaterstueckbewertung-bw--klick:hover {
    border-color: var(--bs-primary);
}

/* Kopfzeile der Bewertungs-Detailansicht: Zurück links, Vor/Zurück-Navigation rechts */
.tgf-tsb-bwdetail__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tgf-tsb-bwdetail__nav {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.tgf-tsb-bwdetail__pos {
    color: var(--tsb-muted);
    font-size: .9rem;
    min-width: 3rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.tgf-tsb-bwdetail__karte {
    max-width: 620px;
}

.tgf-theaterstueckbewertung-bw__fav {
    color: var(--tsb-fav);
}

/* In der Kachel-Liste das Favorit-Herz auf Höhe der Zeitstempel-Zeile (Unterkante der
   zweizeiligen Titelbox) statt mittig dazwischen. Nur direktes Kind von __head → die
   Detailansicht (Herz in __head-right neben den Buttons) bleibt unberührt. */
.tgf-theaterstueckbewertung-bw__head > .tgf-theaterstueckbewertung-bw__fav {
    align-self: flex-end;
}

.tgf-theaterstueckbewertung-bw__dims {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.tgf-theaterstueckbewertung-bw__dim-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tgf-theaterstueckbewertung-bw__dim-label {
    color: var(--tsb-muted);
    font-size: .85rem;
}

/* Bewertungs-Detail: eine Dimension = eine „Tabellenzeile". Label + Sterne oben (Spalte 1/2),
   der Kommentar darunter in DERSELBEN linken Spalte → läuft nicht unter die Sterne. */
.tgf-theaterstueckbewertung-bw__dim {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    row-gap: .3rem;
    align-items: center;
}
.tgf-theaterstueckbewertung-bw__dim > .tgf-theaterstueckbewertung-bw__dim-label { grid-column: 1; grid-row: 1; }
.tgf-theaterstueckbewertung-bw__dim > .tgf-sterne { grid-column: 2; grid-row: 1; justify-self: end; }
.tgf-theaterstueckbewertung-bw__dim > .tgf-theaterstueckbewertung-bw__komm { grid-column: 1; grid-row: 2; }

.tgf-theaterstueckbewertung-bw__komm {
    /* gleich gross wie die Labels (nicht grösser) */
    font-size: .85rem;
    line-height: 1.45;
}

/* Bewertungs-Detail: Dimensionen als Zeilen mit durchgezogener Trennlinie (wie im Theaterstück-
   Detail); gleichmässiger Zeilenabstand. */
.tgf-tsb-bwdetail__karte .tgf-theaterstueckbewertung-bw__dims {
    gap: .85rem;
}
.tgf-tsb-bwdetail__karte .tgf-theaterstueckbewertung-bw__dim {
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--tsb-border);
}
/* Dimensions-Labels in der Betonungsfarbe (wie „Gesamt“ in der Total-Zeile oben), nicht gedämpft. */
.tgf-tsb-bwdetail__karte .tgf-theaterstueckbewertung-bw__dim-label {
    color: var(--bs-emphasis-color, inherit);
}
/* letzte Dimension: keine abschliessende Linie */
.tgf-tsb-bwdetail__karte .tgf-theaterstueckbewertung-bw__sub .tgf-theaterstueckbewertung-bw__dim:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Gesamt steht zuoberst als Kopfwert; die drei Teil-Dimensionen (Inhalt/Rollen/Umsetzung)
   folgen als Gruppe mit etwas Abstand darunter und leicht abgeschwaechten Sternen,
   damit die Gesamtbewertung optisch fuehrt. */
.tgf-theaterstueckbewertung-bw__sub {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-top: .5rem;
}

.tgf-tsb-bwdetail__karte .tgf-theaterstueckbewertung-bw__sub {
    gap: .85rem;
    /* kein zusätzlicher Oberabstand — der __dims-gap (.85rem) trägt den Abstand zu „Gesamt“,
       damit alle Zeilenabstände gleich sind. */
    margin-top: 0;
}

.tgf-theaterstueckbewertung-bw__sub .tgf-sterne {
    opacity: .55;
}

@media (max-width: 640px) {
    .tgf-theaterstueckbewertung-d__daten {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .tgf-theaterstueckbewertung-d__daten dd {
        margin-bottom: .75rem;
    }
}

/* ===================== Toolbar rechts / Aktionen ===================== */
.tgf-theaterstueckbewertung__toolbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tgf-theaterstueckbewertung-d__head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 1rem;
}

.tgf-theaterstueckbewertung-d__actions {
    display: flex;
    gap: .5rem;
    flex-shrink: 0;
}

.tgf-theaterstueckbewertung-d__pdf {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
}

/* Datei-Aktionen als schlichte Text-Links (Symbol + Text), keine Buttons. */
.tgf-tsb-dateilink {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--bs-link-color, #6ea8fe);
    text-decoration: none;
    cursor: pointer;
}

.tgf-tsb-dateilink:hover {
    text-decoration: underline;
}

.tgf-tsb-dateilink--danger {
    color: var(--bs-danger, #dc3545);
}

.tgf-tsb-dateilink.disabled {
    opacity: .6;
    pointer-events: none;
}

.tgf-theaterstueckbewertung-d__upload {
    margin: 0;
    cursor: pointer;
}

.tgf-theaterstueckbewertung-d__bw-headright {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.tgf-theaterstueckbewertung-bw__head-right {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.tgf-theaterstueckbewertung-bw__btn {
    border: none;
    background: none;
    padding: .15rem .3rem;
    color: var(--tsb-muted);
    cursor: pointer;
    border-radius: .25rem;
}

.tgf-theaterstueckbewertung-bw__btn:hover {
    background: rgba(127, 127, 127, .15);
}

/* ===================== Sterne-Eingabe ===================== */
.tgf-sterne-input {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.tgf-sterne-input__btn,
.tgf-sterne-input__clear {
    border: none;
    background: none;
    padding: .1rem;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}

.tgf-sterne-input__btn .fa-star {
    color: #f4b400;
}

.tgf-sterne-input__btn .fa-regular {
    color: #c9c9d1;
}

.tgf-sterne-input__clear {
    color: var(--tsb-muted);
    font-size: .9rem;
    margin-left: .35rem;
}

.tgf-sterne-input__clear--leer {
    visibility: hidden;
}

/* ===================== Modal / Formulare ===================== */
.tgf-theaterstueckbewertung-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 1080;
}

.tgf-theaterstueckbewertung-modal__dialog {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, inherit);
    border-radius: .6rem;
    width: 100%;
    max-width: 32rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 4rem);
}

.tgf-theaterstueckbewertung-modal__dialog--wide {
    max-width: 48rem;
}

.tgf-theaterstueckbewertung-modal__head,
.tgf-theaterstueckbewertung-modal__foot {
    display: flex;
    align-items: center;
    padding: .85rem 1.25rem;
}

.tgf-theaterstueckbewertung-modal__head {
    justify-content: space-between;
    border-bottom: 1px solid var(--tsb-border);
}

.tgf-theaterstueckbewertung-modal__head h3 {
    margin: 0;
    font-size: 1.2rem;
}

.tgf-theaterstueckbewertung-modal__close {
    border: none;
    background: none;
    font-size: 1.1rem;
    color: var(--tsb-muted);
    cursor: pointer;
}

.tgf-theaterstueckbewertung-modal__body {
    padding: 1.25rem;
    overflow-y: auto;
}

.tgf-theaterstueckbewertung-modal__foot {
    justify-content: flex-end;
    gap: .5rem;
    border-top: 1px solid var(--tsb-border);
}

.tgf-theaterstueckbewertung-form__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .85rem 1rem;
}

.tgf-theaterstueckbewertung-form__feld {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.tgf-theaterstueckbewertung-form__feld > span {
    font-size: .85rem;
    font-weight: 600;
    color: var(--tsb-muted);
}

.tgf-theaterstueckbewertung-form__feld--full {
    grid-column: 1 / -1;
}

.tgf-theaterstueckbewertung-form__feld--klein {
    grid-column: span 1;
}

.tgf-theaterstueckbewertung-form__fehler {
    background: #fde8e8;
    color: #b02a2a;
    border-radius: .4rem;
    padding: .5rem .75rem;
    margin-bottom: .85rem;
    font-size: .9rem;
}

.tgf-theaterstueckbewertung-bwform__dim {
    margin-bottom: 1.5rem;
}

.tgf-theaterstueckbewertung-bwform__dim-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}

.tgf-theaterstueckbewertung-bwform__dim-head > span {
    font-weight: 600;
}

.tgf-theaterstueckbewertung-bwform__fav {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

/* Bootstrap gibt .form-check-input ein margin-top:.25em → in der zentrierten Flex-Zeile
   sässe die Checkbox sonst zu tief. Zurücksetzen, damit sie mit Herz/Text fluchtet. */
.tgf-theaterstueckbewertung-bwform__fav .form-check-input {
    margin-top: 0;
}

.tgf-theaterstueckbewertung-bwform__fav .fa-heart {
    color: var(--tsb-fav);
}

/* Formulare als eigene Seite (ersetzen die früheren Modals): Breite begrenzen,
   Aktionsleiste unten rechts. */
.tgf-theaterstueckbewertung-formseite {
    max-width: 900px;
}

.tgf-theaterstueckbewertung-formseite--schmal {
    max-width: 640px;
}

/* Abstand zwischen „Zurück" und dem ersten Feld (die früher trennende Stück-Zeile ist
   in den Kopf-Untertitel gewandert). */
.tgf-theaterstueckbewertung-formseite .tgf-theaterstueckbewertung-d__back {
    margin-bottom: .9rem;
}

.tgf-theaterstueckbewertung-formseite__foot {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.75rem;
    /* keine Trennlinie mehr über den Buttons (Reini) */
}

@media (max-width: 640px) {
    .tgf-theaterstueckbewertung-form__grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== Letzte Bewertungen ===================== */
/* Eigenes Oqtane-Modul: kein eigener Titel/Abstand mehr (Container liefert den Titel),
   die Liste selbst ist die wiederverwendbare TgfListe. */
.tgf-theaterstueckbewertung-letzte__zeit {
    color: var(--tsb-muted);
    font-size: .85rem;
    margin-left: .35rem;
}

.tgf-theaterstueckbewertung__export {
    display: inline-flex;
    gap: .25rem;
}


/* Formular-Beschriftungen naeher an ihr Feld (Reini 06.08.2026): Bootstraps
   Vorgabe von .5rem liess Label und Eingabefeld auseinanderfallen, gerade in
   mehrspaltigen Zeilen. Gilt generell fuer beide Sites — darum beide Scopes
   und nicht die nackte Bootstrap-Klasse (s. Gotcha "keine nackten
   Bootstrap-Klassen"). */
.tgf-public .form-label,
.tgf-intern .form-label {
    margin-bottom: .25rem;
}

/* ── Mehrspaltiges Auswahlfeld auf kleinen Schirmen ────────────────────────
   Gilt seit dem 08.08.2026 nur noch fürs Cockpit (interne Buchung): die
   öffentliche Aufführungs-Auswahl ist auf eine Auswahlliste mit dreizeiliger
   Vorlage umgestellt und braucht keine Spaltenbreiten mehr.

   Das mehrspaltige Auswahlfeld (SfMultiColumnComboBox in der Sitzauswahl) hat
   eine feste Breite von 40rem. Auf dem Telefon ragt es über den Rand hinaus,
   und ausgerechnet die letzte Spalte „Frei" liegt draussen — die wichtigste
   (Reini 08.08.2026).

   Zwei Stufen:
     · Bis 1000px das Aufklappfeld auf die Fensterbreite begrenzen. Die Spalten
       teilen sich den Platz danach von selbst neu auf. Auf dem Tablet reicht
       das schon — dort haben alle fünf bequem Platz.
     · Bis 700px zusätzlich die vierte Spalte (Bezeichnung, z.B. „Premiere")
       ausblenden — sie ist die einzige entbehrliche. Danach bleiben Tag,
       Datum, Zeit und Frei, und die passen nebeneinander. Zusammen mit dem
       <col> ausblenden, sonst bleibt ihre Breite als Lücke stehen.

   Aufklappfelder hängen am <body>, darum OHNE .tgf-public/.tgf-intern davor —
   die Regel gilt für Cockpit und Website gleichermassen. Die Spaltenfolge ist
   in beiden Modulen dieselbe (geprüft), sonst wäre nth-child gefährlich. */
/* ── Kopfzeile und Daten deckungsgleich ────────────────────────────────────
   Kopf und Inhalt sind zwei getrennte Tabellen. Beide stehen auf
   `table-layout: fixed` mit denselben Spaltenbreiten — sind sie aber BREITER
   als die Summe dieser Breiten, verteilen sie den Ueberschuss anteilig auf die
   Spalten. Und weil die Inhaltsflaeche einen klassischen Rollbalken hat
   (Windows/Edge) und die Kopfzeile nicht, sind sie verschieden breit und
   verteilen verschieden: die Spalten laufen nach rechts hin immer weiter
   auseinander (Reini 08.08.2026; in den Entwicklerwerkzeugen mit schmalen
   Balken war es weg — der entscheidende Hinweis).

   Gemessen: Kopf-Tabelle 510px, Inhalts-Tabelle 480px, Versatz bis 26px.

   Loesung an der Wurzel: `width: max-content` nimmt beiden Tabellen das
   Strecken. Sie sind dann exakt so breit wie die Summe ihrer Spalten — gleich
   breit, unabhaengig von jedem Rollbalken. Das haelt auch, wenn eine Spalte
   dazukommt oder auf schmalen Schirmen eine wegfaellt. Nebenbei erledigt es
   Reinis zweiten Punkt: die Spalten sind nicht mehr unnoetig breit gezogen. */
.e-popup.e-multicolumn-list .e-table {
    width: max-content !important;
}


/* Auf schmalen Schirmen darf die Tabelle die volle Breite nutzen: dort sind die
   Rollbalken ueberlagernd (Telefon, Tablet) und nehmen keinen Platz weg — Kopf
   und Inhalt sind also ohnehin gleich breit, und ein leerer Streifen rechts
   waere nur unschoen. */
@media (max-width: 1000px) {
    .e-popup.e-multicolumn-list .e-table {
        min-width: 100%;
    }

    .e-popup.e-multicolumn-list {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        left: .5rem !important;
    }
}

@media (max-width: 700px) {
    .e-popup.e-multicolumn-list col:nth-child(4),
    .e-popup.e-multicolumn-list .e-headercell:nth-child(4),
    .e-popup.e-multicolumn-list .e-rowcell:nth-child(4) {
        display: none !important;
    }
}

/* Werte, die nicht über zwei Zeilen gerissen werden sollen — Telefonnummern und
   Datumsangaben aus den Token (Reini 08.08.2026). Bewusst im Theme und nicht im
   Modul: die Token stehen in beliebigen Inhalten, nicht nur in der Buchung. */
.tgf-nobr {
    white-space: nowrap;
}