/* TGF.Produktion — Katalog (Poster-Kacheln) / Liste (Tabelle) / Detail.
   Liegt i.d.R. im Creme-Leseband (.reading.band): feste Leseband-Farben statt var(--text)/var(--muted). */

.tgf-prod { color: inherit; }
.tgf-prod { --pr-line: var(--line, #e4dccb); --pr-red: var(--red, #c90000); }

/* ---------- Katalog: Poster-Kacheln ---------- */
.tgf-prod-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}
@media (min-width: 576px) { .tgf-prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tgf-prod-grid { grid-template-columns: repeat(3, 1fr); } }

.tgf-prod-card {
    border: 1px solid rgba(36, 27, 18, .12);
    border-radius: .5rem;
    overflow: hidden;
    background: #FFFEFB;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s, transform .2s;
    display: block;
}
.tgf-prod-card--link:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    transform: translateY(-3px);
    color: inherit;
}
.tgf-prod-poster img { width: 100%; height: auto; display: block; }
.tgf-prod-caption { padding: .7rem .9rem 1rem; }
.tgf-prod-titel { font-weight: 600; line-height: 1.25; margin-bottom: .55rem; }
.tgf-prod-card--link .tgf-prod-titel { color: var(--pr-red); }
.tgf-prod-jahr { font-weight: 400; color: #6f5e4a; }
.tgf-prod-version { font-weight: 600; color: #2a2016; font-size: .95rem; margin-bottom: .35rem; }
.tgf-prod-kurz { margin: 0; font-size: .92rem; line-height: 1.5; color: #3d3125; }
/* Ganze Kachel ist Link → Text beim Hover NICHT unterstreichen/umfärben (schlägt .reading .prose a:hover). */
.tgf-prod-card--link,
.tgf-prod-card--link:hover,
.tgf-prod-card--link:focus { text-decoration: none !important; }

/* ---------- Liste: Tabelle ---------- */
.tgf-prod-tabelle table { width: 100%; border-collapse: collapse; }
.tgf-prod-tabelle thead th {
    font-weight: 600; color: #2a2016; font-size: .92rem; text-align: left; white-space: nowrap;
    padding: 0 .7em .55em; border-bottom: 2px solid var(--pr-line);
}
.tgf-prod-tabelle tbody td {
    padding: .5em .7em; border-top: 1px solid var(--pr-line); vertical-align: baseline;
    font-size: .94rem; color: #3d3125;
}
/* Erste Spalte bündig zum linken Leserand (kein Einzug). */
.tgf-prod-tabelle thead th:first-child,
.tgf-prod-tabelle tbody td:first-child { padding-left: 0; }
.tgf-prod-tabelle .tgf-prod-c, .tgf-prod-tabelle .tgf-prod-c { text-align: center; }
.tgf-prod-tabelle .tgf-prod-c-jahr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tgf-prod-tabelle thead th .fa-light { color: #6f5e4a; }
.tgf-prod-version-mobile { color: #6f5e4a; }

/* ======================= Detail (vollbreite Zonen) =======================
   Modul liegt im Full-Width-Pane → jede .tgf-prod-zone füllt die Box-Breite (Hintergrund-Band),
   .wrap (Theme) zentriert den Inhalt auf --maxw. .prose tgf-prod-flow = Theme-Typografie, aber
   volle Breite statt der schmalen 760er-Lesespalte. */
.tgf-prod-detail .tgf-prod-flow.prose { max-width: none; margin: 0; }

/* Reine Alternierung der VORHANDENEN Abschnitte (fehlende sind nicht im DOM → kein Zusammenfallen
   zweier gleicher Flächen). Keine feste Farbe pro Element-Typ. */
.tgf-prod-zone { padding: clamp(30px, 4vw, 60px) 0; }
.tgf-prod-zone--b { background: #EBE0CA; }   /* --a = Leseband-Creme #F7F0E3 (ohne eigenen Grund) */
.tgf-prod-zone--kopf { padding-top: 0; }

/* Abstand der Leadzone zur Sprungliste. WICHTIG: muss das obige `.tgf-prod-flow.prose { margin:0 }`
   schlagen (Leadzone trägt selbst prose+tgf-prod-flow) → daher diese hohe Spezifität. */
.tgf-prod .tgf-prod-detail .tgf-prod-flow.tgf-prod-leadzone { margin-bottom: 2.6rem; }
/* Lead dicht an das darunterliegende „Uraufführung"-Badge (hohe Spezifität schlägt die .prose-Marginregel). */
.tgf-prod .tgf-prod-detail .tgf-prod-leadzone .tgf-prod-lead { max-width: 62ch; margin-bottom: .15rem; }

/* Sprungliste (Anker zu den vorhandenen Abschnitten), direkt nach dem Lead. */
.tgf-prod-jump { margin: 0 0 1.6rem; font-size: .98rem; line-height: 1.9; }
.tgf-prod-jump a { color: var(--pr-red); text-decoration: none; }
.tgf-prod-jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Trenner als inline-block → die Hover-Unterstreichung des Links läuft NICHT durch ihn. */
.tgf-prod-jump a + a::before { content: "·"; display: inline-block; margin: 0 .5em; color: #5e503b; font-weight: 700; transform: scale(1.5); }
/* Anker-Ziel nicht unter den fixen Seitenkopf scrollen. */
.tgf-prod-zone[id], .tgf-prod-inhalt-block[id] { scroll-margin-top: calc(var(--navH, 90px) + 12px); }

.tgf-prod-kopf { display: flow-root; }   /* enthält die gefloatete Fakten-Box */

/* ---- Fakten-Box (rechts gefloatet, Box-Pane-Optik wie Presse) ---- */
.tgf-prod-info {
    float: right; width: 300px; max-width: 42%; margin: .2em 0 1.4em 30px;
    background: rgba(180, 147, 85, .14); border-left: 4px solid var(--pr-red);
    border-radius: var(--radius, 2px); padding: 20px 22px;
}
@media (max-width: 560px) { .tgf-prod-info { float: none; width: auto; max-width: none; margin: 0 0 1.6em; } }
.tgf-prod-info-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.tgf-prod-info .tgf-prod-info-jahr { font-size: 1.4rem; font-weight: 600; color: #2a2016; text-decoration: none; }
.tgf-prod-info .tgf-prod-info-jahr:hover { text-decoration: none; color: var(--pr-red); }
.tgf-prod-info-nav { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.tgf-prod-info .tgf-prod-info-nav a,
.tgf-prod-info .tgf-prod-info-nav span {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    background: var(--gold-soft, #d8bd80); border: 1px solid rgba(70, 52, 20, .20); border-radius: var(--radius, 2px);
    color: #4a3a22; font-size: 1.05rem; line-height: 1; text-decoration: none;
    transition: background .15s, color .15s;
}
.tgf-prod-info .tgf-prod-info-nav a:hover { background: var(--gold, #B49355); color: #2a2016; }
.tgf-prod-info .tgf-prod-info-nav .is-disabled { background: rgba(216, 189, 128, .45); color: rgba(74, 58, 34, .4); }
.tgf-prod-info-dl { margin: 0 0 .2em; }
.tgf-prod-info-dl:last-of-type { margin-bottom: 1.3em; }
.tgf-prod-fakt { margin: 0 0 .8em; }
.tgf-prod-fakt-l {
    display: block; font-family: var(--font-label, sans-serif); text-transform: uppercase; letter-spacing: .12em;
    font-size: .72rem; font-weight: 600; color: var(--pr-red); margin-bottom: .1em;
}
.tgf-prod-fakt-v { color: #3d3125; font-size: .94rem; line-height: 1.4; }

/* ---- Hauptinhalt ---- */
/* Hohe Spezifität, sonst überschreibt die Theme-Regel .reading .prose p die Textfarbe (dunkel auf Rot). */
.tgf-prod .tgf-prod-detail .tgf-prod-version-label {
    display: inline-block; font-family: var(--font-label, sans-serif); text-transform: uppercase;
    letter-spacing: .08em; font-size: .72rem; font-weight: 600; color: #fff; background: var(--pr-red);
    padding: .32em .8em .5em; border-radius: var(--radius, 2px); margin: 0; line-height: 1.2;
}
.tgf-prod-titelbild { width: 100%; height: auto; border-radius: var(--radius, 2px); display: block; }

/* responsive Video-Embeds (aspect-ratio statt padding-top, damit die Höhe auch bei schmalerem
   Video — z.B. neben der Fakten-Box — stimmt). */
.tgf-prod-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1.2em; border-radius: var(--radius, 2px); overflow: hidden; background: #000; }
.tgf-prod-video.is-4to3 { aspect-ratio: 4 / 3; }
.tgf-prod-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tgf-prod-medium .tgf-prod-video { margin-bottom: 0; }   /* in der Medien-Grid kein Abstand unter dem Video */
/* Kopf: Trailer/Titelbild folgen direkt dem Text, sitzen schmal NEBEN der Fakten-Box (eigener BFC
   → weicht der gefloateten Box aus); danach läuft weiterer Text voll breit. */
.tgf-prod-kopf .tgf-prod-video { display: flow-root; width: auto; max-width: 600px; }
.tgf-prod-kopf p:has(> .tgf-prod-titelbild) { display: flow-root; width: auto; max-width: 600px; }

/* ---- Zwischentitel: roter Display-Titel (lesbar, wie die Theme-Abschnittstitel) — schlägt .site/.prose h3. */
.tgf-prod .tgf-prod-section-titel {
    display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap;
    font-family: var(--font-display, inherit); text-transform: uppercase; letter-spacing: .04em;
    color: var(--pr-red); font-weight: 400; font-size: 1.85rem; line-height: 1.1; margin: 0 0 1.1em;
}
/* Diskretes „nach oben"-Symbol hinter dem Titel (hohe Spezifität, schlägt die Fullpane-Linkregel). */
.tgf-prod .tgf-prod-detail .tgf-prod-section-titel a.tgf-prod-top,
.tgf-prod .tgf-prod-detail .tgf-prod-inhalt-titel a.tgf-prod-top {
    color: #8a7a5e; font-size: .85rem; line-height: 1; text-decoration: none; transition: color .15s;
}
.tgf-prod .tgf-prod-detail .tgf-prod-section-titel a.tgf-prod-top:hover,
.tgf-prod .tgf-prod-detail .tgf-prod-inhalt-titel a.tgf-prod-top:hover { color: var(--pr-red); text-decoration: none; }
/* Kacheltitel (Infos zu den Aufführungen) sind eigene Sprungziele → Pfeil dahinter, etwas kleiner. */
.tgf-prod .tgf-prod-inhalt-titel { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; margin-bottom: 1rem; }
/* Startet eine Kachel mit einer Tabelle, sitzt die erste Zeile gleich weit unter dem Titel wie
   ein Absatz (sonst addieren sich Tabellenrand und Zellen-Innenabstand). */
.tgf-prod-inhalt-block .prose > table:first-child { margin-top: 0; }
.tgf-prod-inhalt-block .prose > table:first-child tr:first-child > * { padding-top: 0; }
.tgf-prod .tgf-prod-detail .tgf-prod-inhalt-titel a.tgf-prod-top { font-size: .7em; }

/* ---- Personen-Karten ---- */
.tgf-prod-personen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
@media (min-width: 576px) { .tgf-prod-personen { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .tgf-prod-personen { grid-template-columns: repeat(4, 1fr); } }
.tgf-prod-person {
    border: 1px solid rgba(36, 27, 18, .12); border-radius: .5rem; overflow: hidden; background: #FFFEFB;
    color: inherit; text-decoration: none; display: block; transition: box-shadow .2s, transform .2s;
}
.tgf-prod-person--link:hover { box-shadow: 0 10px 24px rgba(0,0,0,.12); transform: translateY(-3px); color: inherit; text-decoration: none !important; }
.tgf-prod-person img { width: 100%; height: auto; display: block; object-fit: cover; object-position: top center; }
.tgf-prod-person-cap { padding: .6rem .7rem .8rem; }
.tgf-prod-person-name { font-weight: 600; line-height: 1.2; }
.tgf-prod-person--link .tgf-prod-person-name { color: var(--pr-red); }
.tgf-prod-person-funktion { font-size: .85rem; color: #6f5e4a; margin-top: .15rem; }

/* ---- Aufführungstermine ---- */
.tgf-prod-auff { width: 100%; border-collapse: collapse; margin: .2em 0; }
.tgf-prod-auff td { padding: .35em .8em .35em 0; border-top: 1px solid var(--pr-line); color: #3d3125; font-size: .94rem; vertical-align: baseline; }
.tgf-prod-auff tr:first-child td { border-top: 0; }
.tgf-prod-auff .is-abgesagt td { color: #a99; text-decoration: line-through; }
/* Datum und Zeit brechen nicht um → mit Bemerkung braucht die Tabelle rund 340px. In schmalen
   Kacheln (Handy, zweispaltig auf dem Tablet) wandert die Bemerkung in eine eigene Zeile unter
   das Datum, statt die Kachel über den Rand zu drücken. */
.tgf-prod-flow { container-type: inline-size; }
.tgf-prod-auff-zusatz { display: none; }
.tgf-prod-auff .tgf-prod-auff-zusatz td { border-top: 0; padding-top: 0; }
@container (max-width: 380px) {
    .tgf-prod-auff .tgf-prod-auff-besch { display: none; }
    .tgf-prod-auff .tgf-prod-auff-zusatz { display: table-row; }
}

/* ---- Feedback ---- (handschriftliche .voice2-Zettel werden vom Theme gestylt) */
/* Zwei Spalten, die sich UNABHÄNGIG auffüllen (CSS-Mehrspalten statt Grid): kein Zeilen-Stretch,
   jeder Zettel behält seine Inhaltshöhe. Überschreibt das flex-column der Theme-.voices-stack. */
.tgf-prod-feedback.voices-stack { display: block; column-count: 2; column-gap: 28px; max-width: none; }
@media (max-width: 700px) { .tgf-prod-feedback.voices-stack { column-count: 1; } }
/* SVG-Filter-Defs (0×0) und „Mehr …"-Button über beide Spalten, damit sie keinen Spaltenplatz belegen. */
.tgf-prod-feedback .paper-defs { column-span: all; }
.tgf-prod-feedback .tgf-prod-mehr { column-span: all; }
/* Dezenter Lift, damit die hellen Zettel auf JEDEM Band-Ton lesbar bleiben (Abschnitt kann
   je nach vorhandenen Elementen auf der hellen ODER dunkleren Fläche landen).
   break-inside: avoid → ein Zettel wird nie über zwei Spalten zerrissen. */
.tgf-prod-feedback .voice2 { break-inside: avoid; margin: 0 0 16px; filter: drop-shadow(0 2px 6px rgba(36, 27, 18, .12)); }
/* „Mehr …"-Links als gerahmter Button (wie tgf-btn; hier ausserhalb .prose → eigene Regel). */
.tgf-prod-mehr { margin: 1.4rem 0 0; }
.tgf-prod-mehr a {
    display: inline-block; padding: .42rem 1.15rem; border: 1px solid var(--pr-red); border-radius: var(--radius, 2px);
    color: var(--pr-red); font-size: .92rem; line-height: 1.2; text-decoration: none; transition: background .15s, color .15s;
}
.tgf-prod-mehr a:hover { background: var(--pr-red); color: #fff; text-decoration: none; }

/* ---- Presse (aufgeräumt: Meta-Zeile + Titel) ---- */
.tgf-prod-presse { max-width: 820px; }
.tgf-prod-presse-item { padding: .7em 0; border-top: 1px solid var(--pr-line); }
.tgf-prod-presse-item:first-child { border-top: 0; padding-top: 0; }
.tgf-prod-presse-meta { font-size: .82rem; color: #6f5e4a; margin-bottom: .1em; }
.tgf-prod-presse-titel { font-size: 1rem; }

/* ---- Fotos und Videos (Grösse begrenzt, mehr pro Zeile) ---- */
.tgf-prod-medien { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.tgf-prod-medium { display: block; color: inherit; text-decoration: none; }
.tgf-prod-medium--foto:hover { text-decoration: none !important; color: inherit; }
/* Foto auf dasselbe 16:9-Format wie die Video-Embeds → Beschriftungen liegen auf gleicher Höhe. */
.tgf-prod-medium--foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--radius, 2px); }
.tgf-prod-medium-cap { display: block; margin-top: .4rem; font-weight: 600; color: #2a2016; }

/* ---- ProduktionInhalt-Abschnitte (Spalten-Layout) ---- */
/* Jeder Inhalt-Block in einer schlichten weissen Karte (wie die Personen-Karten). */
.tgf-prod-inhalt-block {
    background: #FFFEFB; border: 1px solid rgba(36, 27, 18, .12); border-radius: .5rem;
    padding: 18px 22px; margin: 0 0 1.2rem;
}
.tgf-prod-inhalt-block > :first-child { margin-top: 0; }
.tgf-prod-inhalt-block > :last-child { margin-bottom: 0; }
.tgf-prod-inhalt-cols { display: grid; gap: 1.2rem; align-items: start; }
.tgf-prod-inhalt-col { display: flex; flex-direction: column; gap: 1.2rem; }
.tgf-prod-inhalt-col .tgf-prod-inhalt-block { margin: 0; }
/* Ab 2027: Kacheln in SortNr-Reihenfolge, Verteilung auf zwei Spalten durch produktion-kacheln.js
   (.is-verteilt, absolut positioniert). Ohne JS: zweispaltiges Raster zeilenweise. */
.tgf-prod-inhalt-auto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.tgf-prod-inhalt-auto > .tgf-prod-inhalt-block { margin: 0; }
.tgf-prod-inhalt-auto.is-verteilt { display: block; position: relative; }
@media (max-width: 700px) { .tgf-prod-inhalt-auto { grid-template-columns: minmax(0, 1fr); } }
/* Redaktionelle Tabellen in den Kacheln (Öffnungszeiten, Eintrittspreise …): gleiche Optik wie die
   Aufführungsliste (Trennlinien, kompakt, erste Spalte bündig) — schlägt Bootstraps .table.
   Volle Breite, Spaltenbreiten verteilt der Browser (kein Umbruch, solange Platz da ist). */
.tgf-prod-inhalt-block table:not(.tgf-prod-auff) { width: 100%; margin: .2em 0 1em; border-collapse: collapse; }
.tgf-prod-inhalt-block table:not(.tgf-prod-auff) td,
.tgf-prod-inhalt-block table:not(.tgf-prod-auff) th {
    padding: .35em .8em .35em 0; border: 0; border-top: 1px solid var(--pr-line); background: none; box-shadow: none;
    color: #3d3125; font-size: .94rem; vertical-align: baseline;
}
.tgf-prod-inhalt-block table:not(.tgf-prod-auff) tr:first-child > * { border-top: 0; }
.tgf-prod-inhalt-block table:not(.tgf-prod-auff) td:last-child,
.tgf-prod-inhalt-block table:not(.tgf-prod-auff) th:last-child { padding-right: 0; }
/* minmax(0,1fr) statt 1fr: blosses 1fr wächst bis zur Mindestbreite des Inhalts und schiebt
   die Kachel über den rechten Rand (seitliches Scrollen auf dem Handy). */
@media (max-width: 700px) { .tgf-prod-inhalt-cols { grid-template-columns: minmax(0, 1fr) !important; } }