/* Reservationsverwaltung (oeffentlich).

   Hauptziel der Seite (Reini 10.08.2026): "dass der Gast schnell einen Ueberblick
   ueber seine Reservation erhaelt". Alles Relevante steht in der Uebersicht, die
   Befehle sitzen an der Zeile, die sie betreffen; darunter folgt nur noch
   Informatives (Zahlungen, Verlauf). */

/* ── Ueberschriften ────────────────────────────────────────────────────────
   Abschnittstitel wie die Modultitel der Website (Reini 10.08.2026, mit Bild):
   Display-Schrift, gross, mit Laufweite. Abolition kennt nur Versalien - die
   Grossschreibung kommt also aus der Schrift, nicht aus text-transform.

   Werte wie h2.tgf2027-module-title im Theme: 2rem, Gewicht 400 (aus
   .site h1,h2,h3), Laufweite .04em. Die Groesse steht hier ausdruecklich, damit
   sie nicht an den Bootstrap-Vorgaben haengt. */
.tgf-reservation-detail__titel {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1.1;
    color: #2a2016;
    margin: 2.75rem 0 .9rem 0;
}
/* Nur die Ueberschrift ganz zuoberst verliert ihren Abstand nach oben, und zwar nur als
   DIREKTES Kind der Detailansicht.

   Vorher stand hier ein blosses :first-child. Das traf auch die Ueberschrift "Verlauf", denn
   die sitzt in einem eigenen Kasten (der sich mitsamt Titel ausblendet, solange nichts
   festgehalten ist) und ist dort das erste Kind. Sie klebte darum am Abschnitt darueber,
   waehrend "Zahlungen" seine 2.75rem Luft behielt (Reini 17.08.2026). */
.tgf-reservation-detail > .tgf-reservation-detail__titel:first-child {
    margin-top: 0;
}

/* Einleitung: Abstand zur ersten Ueberschrift, sonst kleben sie aneinander. */
.tgf-reservation-detail__lead {
    margin-bottom: 2rem;
}

/* ── Uebersichtstabelle ────────────────────────────────────────────────────
   Transparent wie die Verlaufstabelle. Vorher hatte diese hier weisse Zeilen
   auf dem Creme-Grund - zwei Tabellen, zwei Macharten. Ohne eigene Flaeche
   duerfen die Beschriftungen buendig am Rand stehen (Hauskonvention). */
.tgf-reservation-detail .tgf-uebersicht,
.tgf-reservation-detail .tgf-zahlungen,
.tgf-reservation-verwaltung .tgf-uebersicht {
    background: transparent;
}
.tgf-reservation-detail .tgf-uebersicht > :not(caption) > * > *,
.tgf-reservation-detail .tgf-zahlungen > :not(caption) > * > *,
.tgf-reservation-verwaltung .tgf-uebersicht > :not(caption) > * > * {
    background: transparent;
}
/* Breite an der laengsten Beschriftung ("Reservationsbestaetigung") ausgerichtet,
   sonst bricht ausgerechnet die letzte Zeile um.

   Erste Spalte buendig, also ohne Einzug links (Reini 10.08.2026) - dieselbe
   Konvention wie in den TgfListen: Ohne eigene Flaeche unter der Tabelle wirkt
   ein Einzug wie ein Versatz gegenueber allem anderen auf der Seite. */
.tgf-reservation-verwaltung .tgf-uebersicht__label,
.tgf-reservation-verwaltung .tgf-uebersicht td:first-child,
.tgf-reservation-detail .tgf-uebersicht__label,
.tgf-reservation-detail .tgf-uebersicht td:first-child,
.tgf-reservation-detail .tgf-zahlungen th:first-child,
.tgf-reservation-detail .tgf-zahlungen td:first-child {
    padding-left: 0;
}
.tgf-reservation-verwaltung .tgf-uebersicht__label {
    width: 13rem;
    opacity: .7;
}

/* Trennlinien kraeftiger als die Bootstrap-Vorgabe - der Wert kommt aus dem
   oeffentlichen Theme, damit alle Tabellen der Website gleich stark liniert
   sind. */
.tgf-reservation-detail .tgf-uebersicht > :not(caption) > * > *,
.tgf-reservation-detail .tgf-zahlungen > :not(caption) > * > * {
    border-bottom-color: var(--tgf-tabellenlinie, rgba(36, 27, 18, .22));
}
/* Zusaetze: Aufführungszeit, Frist, Hinweise. Leiser als der Wert daneben, aber
   nicht so blass, dass die Frist untergeht. */
.tgf-reservation-detail .tgf-uebersicht__zusatz {
    display: inline-block;
    margin-left: .6rem;
    font-size: .875rem;
    opacity: .7;
}

/* Fehlender Wert: "nicht erfasst" steht wie jeder andere Wert da - kein Einzug,
   keine kleinere Schrift (Reini 10.08.2026, zweimal gemeldet). Es IST der Wert
   dieser Zeile, nur eben keiner; eine Sonderbehandlung liess ihn wie eine
   Fussnote aussehen. Nur leiser bleibt er (opacity aus der Regel darueber),
   damit er nicht mit einer echten Angabe verwechselt wird.

   ⚠ Diese Regel MUSS nach .tgf-uebersicht__zusatz stehen. Beide Selektoren sind
   gleich spezifisch (zwei Klassen) - bei Gleichstand gewinnt die spaetere. Sie
   stand vorher weiter oben in der Datei und blieb damit wirkungslos: Der Wert
   war weiterhin klein und eingerueckt, obwohl die Regel dastand. */
.tgf-reservation-detail .tgf-uebersicht__zusatz--leer {
    display: inline;
    margin-left: 0;
    font-size: inherit;
}
/* ── Erneuter Versand ──────────────────────────────────────────────────────
   Eine Zeile bei der Bestaetigung, die Kanaele nebeneinander. */
.tgf-reservation-detail .tgf-versand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem 1rem;
}
.tgf-reservation-detail .tgf-versand__titel {
    margin-left: 0;
}
/* Die drei Kanaele als EIN Flex-Element: Reicht der Platz nicht, wechseln sie
   gemeinsam auf die naechste Zeile, statt dass WhatsApp allein unten steht
   (Reini 10.08.2026). */
.tgf-reservation-detail .tgf-versand__gruppe {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}
/* Kanal, der gerade nicht geht: sichtbar, aber erkennbar stumm. Der Grund steht
   im title UND als eigene Zeile darunter - auf dem Handy gibt es kein
   Drueberfahren. */
/* Der stumme Kanal ist ein Knopf, kein Text: Ein Tipp zeigt den Grund. Bootstrap
   bringt hier nichts mit, also den Knopf zurueckgesetzt. */
.tgf-reservation-detail .tgf-versand__aus {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: .875rem;
    color: inherit;
    opacity: .45;
    cursor: help;
    text-decoration: underline dotted;
    text-underline-offset: .25em;
}
/* Hinweis auf die Test-Umleitung: erkennbar anders als die uebrigen Zusaetze,
   aber keine Warnung - es ist ja alles in Ordnung, nur eben Testbetrieb. */
.tgf-reservation-detail .tgf-testhinweis {
    color: #7A5A16;
    opacity: 1;
}
.tgf-reservation-detail .tgf-testhinweis i {
    margin-right: .4rem;
}

/* Befehl unter dem Wert statt daneben (Reini 10.08.2026): Bei mehreren
   Sitzplaetzen ging die Aufzaehlung neben dem Link unter. */
.tgf-reservation-detail .tgf-uebersicht__befehl {
    margin-top: .2rem;
}
/* In der eigenen Zeile faellt der Einzug weg - sonst steht die Zeile gegenueber
   dem Wert darueber eingerueckt. Gilt fuer Befehl UND Hinweis. */
.tgf-reservation-detail .tgf-uebersicht__befehl .tgf-uebersicht__zusatz {
    margin-left: 0;
}

/* ── Befehle in der Tabelle ────────────────────────────────────────────────
   Kleine Knoepfe statt Links (Reini 10.08.2026): "Sitzplaetze aendern", "Aendern"
   und die Versandkanaele loesen etwas AUS, sie fuehren nicht irgendwohin - und
   als lauter rote Unterstreichungen sah die Seite aus wie ein Linkverzeichnis.

   Aufgesetzt auf Bootstraps .btn (Hausregel: Bordmittel vor Eigenbau), nur Farbe
   und Groesse in den Hausfarben - Bootstraps Rot ist nicht unser Rot. */
.tgf-reservation-verwaltung .tgf-knopf {
    padding: .1rem .6rem;
    border: 1px solid rgba(180, 147, 85, .75);
    border-radius: .35rem;
    background: transparent;
    color: #7a6231;
    font-size: .875rem;
    /* ⚠ Bootstraps .btn setzt font-weight: 400, der Fliesstext der Website laeuft
       aber in 300 (Roboto Light). Die Beschriftung wirkte dadurch kraeftiger als
       alles um sie herum (Reini 10.08.2026). inherit statt einer festen Zahl,
       damit sie der Umgebung folgt, wo immer der Knopf steht. */
    font-weight: inherit;
    line-height: 1.5;
    white-space: nowrap;
}

/* Luft zum Wert davor und zum Zusatz danach - der Knopf klebte an der
   E-Mail-Adresse bzw. die Frist am Knopf (Reini 10.08.2026). */
.tgf-reservation-detail td > .tgf-knopf {
    margin-left: .6rem;
}
.tgf-reservation-detail .tgf-knopf + .tgf-uebersicht__zusatz {
    margin-left: .6rem;
}
.tgf-reservation-verwaltung .tgf-knopf:hover:not(:disabled),
.tgf-reservation-verwaltung .tgf-knopf:focus-visible:not(:disabled) {
    background: #B49355;
    border-color: #B49355;
    color: #2a2016;
}
.tgf-reservation-verwaltung .tgf-knopf:disabled {
    opacity: .45;
}

/* Bearbeiten von E-Mail und Telefon: schmal halten, das Feld soll nicht die
   ganze Zeile sprengen. */
.tgf-reservation-detail .tgf-uebersicht__edit {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    max-width: 32rem;
}

/* ── Zahlungs-Kennzeichen ──────────────────────────────────────────────────
   Gedaempfte Ampelfarben: Auf dem Creme-Grund waeren Signalrot und Giftgruen
   laut, und Rot ist ohnehin unsere Hausfarbe - das Kennzeichen soll sich davon
   noch unterscheiden (Reini 10.08.2026). */
/* Betrag und Kennzeichen als Flex-Zeile - so sitzt das Kaestchen wirklich mittig
   zum Text (Reini 10.08.2026). vertical-align: middle reichte NICHT: Es richtet
   sich an der Schriftmetrik aus (Grundlinie + halbe x-Hoehe), und das Kaestchen
   ragte weiterhin sichtbar unter die Grundlinie. align-items: center rechnet
   dagegen mit den tatsaechlichen Kastenhoehen. */
.tgf-reservation-detail .tgf-uebersicht__betrag {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}

.tgf-reservation-detail .tgf-badge {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 1rem;
    border: 1px solid;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}
/* AMPELFARBEN (Reini 17.08.2026): rot, gelb/orange, gruen, sofort als solche erkennbar.
   „Schon nicht zu knallig, aber gut sichtbar."

   Der Weg dahin in drei Schritten, damit niemand versehentlich zurueckdreht:
     1. Helle Pastelltoene mit dunkler Schrift — gingen auf dem hellen, beigen Grund unter,
        und „Unvollstaendig" sah harmlos aus, obwohl noch Geld offen ist.
     2. Durchgefaerbt, aber mit dem Hausrot #A52A2A und einem dunklen Orange #C2410C — die
        beiden lagen im Farbton nur 28 Grad auseinander und waren kaum zu trennen. Farbton
        allein traegt eine Unterscheidung nicht.
     3. Jetzt: ein klares Rot statt des braunstichigen Hausrots, ein helles Bernstein und ein
        sattes Gruen.

   DIE SIGNALE FOLGEN BEWUSST NICHT DER HAUSPALETTE. Das Hausrot ist eine Markenfarbe und
   liest sich neben Gruen und Gelb als Braun. Eine Ampel muss man nicht deuten.

   „Unvollstaendig" ist als einziges hell mit dunkler Schrift. Das ist Absicht: Neben dem
   Sprung im Farbton trennt es auch die Helligkeit vom Rot, und das hilft allen, die Rottoene
   schlecht auseinanderhalten.

   Der mittlere Ton ist GELB und nicht Orange (Reini 17.08.2026, zweite Runde): #F0A11B lag mit
   38 Grad Farbton noch zu nahe am Rot, #F2B705 sitzt bei 45 Grad und liest sich als Ampelgelb.

   Kontrast der Schrift auf dem Grund: Rot 5.0:1, Gelb 7.0:1, Gruen 5.1:1 — alle ueber den
   geforderten 4.5:1. Anders als beim Goldknopf, wo Reini die Hausfarbe bewusst mit 2.9:1
   stehen liess, ist die Lesbarkeit hier ohne Zugestaendnis zu haben. */
.tgf-reservation-detail .tgf-badge--offen     { background: #D32F2F; border-color: #D32F2F; color: #fff; }
.tgf-reservation-detail .tgf-badge--teilweise { background: #F2B705; border-color: #B08800; color: #4A2C00; }
.tgf-reservation-detail .tgf-badge--bezahlt   { background: #2E7D32; border-color: #2E7D32; color: #fff; }
/* Storniert: neutral grau — weder Mahnung (rot) noch Erledigt (grün). */
.tgf-reservation-detail .tgf-badge--storniert { background: #6C757D; border-color: #6C757D; color: #fff; }

/* ── Testhilfe in der Freikarten-Kachel ────────────────────────────────────
   Der Knopf, der eine passende Freikarte ins Feld schreibt. Gedaempft und mit
   gestricheltem Rand wie im Kontaktformular: Er gehoert nicht zur Kachel,
   sondern ist Werkzeug fuer den Testbetrieb, und auf der echten Site erscheint
   er gar nicht. */
.tgf-reservation-detail .tgf-testhilfe {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed #d9c9a8;
}

.tgf-reservation-detail .tgf-testhilfe__knopf {
    border: 1px dashed #b99b62;
    background: transparent;
    border-radius: .25rem;
    padding: .1rem .5rem;
    font-size: .8125rem;
    color: #8a6d3b;
}

.tgf-reservation-detail .tgf-testhilfe span {
    font-size: .8125rem;
    color: #8a6d3b;
}

/* ── Erklaerblase am i ─────────────────────────────────────────────────────
   Ersetzt den Absatz, der bis zum 10.08.2026 unter der Tabelle stand. Bewusst
   ohne Fremdkomponente: ein Knopf, eine Blase, sichtbar beim Drueberfahren ODER
   nach einem Tipp. Auf Fingergeraeten gibt es kein Drueberfahren, darum beides. */
.tgf-reservation-detail .tgf-info {
    position: relative;
    display: inline-block;
    margin-right: .35rem;
}
/* Steht das i am ENDE der Zeile (Reini 10.08.2026), gehoert der Abstand nach
   links - und die Blase richtet sich rechts aus, damit sie nicht ueber den Rand
   hinauslaeuft. */
.tgf-reservation-detail .tgf-info--rechts {
    margin-right: 0;
    margin-left: .5rem;
}
.tgf-reservation-detail .tgf-info--rechts .tgf-info__blase {
    left: auto;
    right: -.5rem;
}
.tgf-reservation-detail .tgf-info--rechts .tgf-info__blase::after {
    left: auto;
    right: 1rem;
}
.tgf-reservation-detail .tgf-info__knopf {
    padding: 0;
    border: 0;
    background: none;
    color: #8a7d68;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.tgf-reservation-detail .tgf-info__knopf:hover,
.tgf-reservation-detail .tgf-info--offen .tgf-info__knopf {
    color: #C90000;
}
.tgf-reservation-detail .tgf-info__blase {
    display: none;
    position: absolute;
    bottom: calc(100% + .5rem);
    left: -.5rem;
    z-index: 20;
    width: 24rem;
    max-width: 78vw;
    padding: .7rem .9rem;
    background: #2a2016;
    color: #F7F0E3;
    border-radius: .4rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
    font-size: .875rem;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
}
.tgf-reservation-detail .tgf-info:hover .tgf-info__blase,
.tgf-reservation-detail .tgf-info--offen .tgf-info__blase {
    display: block;
}
/* Spitze zum Knopf hin. */
.tgf-reservation-detail .tgf-info__blase::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 1rem;
    border: .45rem solid transparent;
    border-top-color: #2a2016;
}

/* ══ Sitzplatzwahl (eigene Seite) ══════════════════════════════════════════ */
.tgf-sitzplatzwahl__anleitung {
    margin-bottom: 1.5rem;
}
.tgf-sitzplatzwahl__bisher {
    margin-bottom: 1.5rem;
}
.tgf-sitzplatzwahl__auffuehrung {
    max-width: 34rem;
    margin-bottom: 1.25rem;
}
/* Zaehler und Grund gehoeren zusammen, der Sitzplan darunter ist etwas anderes
   (Reini 10.08.2026: "Hier klebt mir der rote Text zu nah am Sitzplan").

   Die Luft zwischen den beiden Zeilen kam nicht vom margin, sondern von der
   Zeilenhoehe 1.7 der Website - richtig fuer Absaetze, zu viel fuer zwei Zeilen,
   die eine Aussage bilden. Darum eng koppeln UND nach unten Abstand geben. */
.tgf-sitzplatzwahl__stand {
    margin-top: 1rem;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}
.tgf-sitzplatzwahl__warnung {
    display: block;
    margin-top: .1rem;
    color: #8C2B1F;
}
/* Abbrechen links, Aendern rechts (Reini 10.08.2026) - auf dem Handy
   untereinander, damit die Knoepfe nicht zusammengequetscht werden. */
.tgf-sitzplatzwahl__fuss {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.75rem;
    flex-wrap: wrap;
}
/* Der Zahlungsknopf in Gold (Reini 10.08.2026: "hätte ich doch gerne im Gold").
   Dieselben Werte wie tgf-form-btn--primaer im Theme, damit der Knopf, der die
   Zahlung ausloest, ueberall gleich aussieht. Rot war hier zweimal falsch: Es
   ist die Farbe des Strichs an der Kachel, und es liest sich als Warnung. */
.tgf-reservation-verwaltung .tgf-knopf--primaer {
    background: #B49355;
    border-color: #B49355;
    color: #fff;
    /* Gewicht 400 wie bei den uebrigen Goldknoepfen - der Knopf erbt sonst die
       Leichtschrift 300 der Website und wirkt auf farbigem Grund duenn. */
    font-weight: 400;
}
.tgf-reservation-verwaltung .tgf-knopf--primaer:hover:not(:disabled),
.tgf-reservation-verwaltung .tgf-knopf--primaer:focus-visible:not(:disabled) {
    background: #9c7c43;
    border-color: #9c7c43;
    color: #fff;
}

/* Bestaetigungsfenster: eigener Kasten ueber der Auswahl. Bewusst ohne
   Fremdkomponente - es braucht kein JavaScript, nur eine Flaeche darueber. */
.tgf-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(42, 32, 22, .55);
    overflow-y: auto;
}
.tgf-modal__karte {
    background: #F7F0E3;
    border-radius: .6rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    padding: 1.5rem 1.75rem;
    max-width: 44rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
/* Titel in der FLIESSTEXTSCHRIFT, nicht in der Display-Schrift (Reini 10.08.2026):
   In Abolition - einer reinen Versalschrift - liest sich eine ganze Zeile im
   Fenster schlecht. Sie ist fuer Ueberschriften an der Wand gemacht, nicht fuer
   einen Satz, den man im Vorbeigehen erfassen soll. */
.tgf-reservation-verwaltung .tgf-modal__titel,
.tgf-modal .tgf-modal__titel {
    /* ⚠ Zwei Klassen im Selektor, sonst gewinnt ".site h3" aus dem Theme (0,1,1)
       gegen eine einzelne Klasse (0,1,0) - und die Display-Schrift bliebe stehen. */
    margin: 0 0 1rem 0;
    font-family: var(--font-body, inherit);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: normal;
    color: #2a2016;
}
.tgf-modal__hinweis {
    padding: .75rem 1rem;
    border-left: 4px solid #C90000;
    background: rgba(201, 0, 0, .06);
}

/* ── Uebersichtskacheln ────────────────────────────────────────────────────
   Drei Kacheln ueber der Tabelle (Reini 10.08.2026). Sie beantworten die drei
   Fragen, mit denen man diese Seite oeffnet: was habe ich gebucht, wo ist das
   PDF, was muss ich zahlen.

   Gleiche Hoehe ueber align-items: stretch (Grid-Vorgabe) plus je Kachel ein
   flex-Aufbau mit Kopf / Leib / Fuss - so stehen die Knoepfe unten auf einer
   Linie, egal wie lang der Produktionstitel ist.

   Umbruch ueber auto-fit statt fester Spaltenzahl: Auf dem iPad stehen sie zu
   zweit, auf dem Handy untereinander, ohne zweiten Haltepunkt. */
.tgf-uebersichtskacheln {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

/* Machart wie die Akzent-Box der Website (.tgf2027-akzentbox, Theme.css) - so
   sehen die Kacheln aus wie die Kaesten auf der Kontaktseite: weisser Grund,
   roter Strich links, sonst nichts (Reini 10.08.2026: "Wie wuerde es aussehen,
   wenn wir das Kacheldesign verwenden, wie z.B. bei den Kontakten?").

   Werte 1:1 von dort, nur das Innenmass kleiner - 26px waeren auf einem Drittel
   der Breite zu viel.

   KEINE abgerundeten Ecken: Sie wirken nur mit einem umlaufenden Rahmen; neben
   einem einseitigen Strich sieht die Rundung wie ein Fehler aus.

   Alle drei gleich (Reini): Die Zahlungskachel hatte Rand und Grund in Gold, das
   fiel aus der Reihe. Ihre Betonung traegt jetzt allein die grosse Zahl. */
.tgf-uebersichtskachel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 20px 22px 22px;
    background: #FFFEFB;
    border-left: 4px solid var(--red, #c90000);
    /* min-width: 0 - sonst sprengt eine lange Sitzplatzliste die Grid-Spalte
       (1fr hat min-width: auto und waechst mit dem Inhalt mit). */
    min-width: 0;
}

.tgf-uebersichtskachel__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.tgf-uebersichtskachel__kopftext { min-width: 0; }

/* Kachel-Ueberschrift in der NORMALEN Schrift (Reini 10.08.2026: "Die Titel
   bitte mit normaler Schrift, sonst ist das hier zu schwer lesbar"). Die
   Akzent-Box der Website setzt hier Abolition in Versalien - auf 20px und in
   einer schmalen Kachel liest sich das schlecht.

   Farbe bleibt das Hausrot der Akzent-Box: Sie macht den Titel als Titel
   erkennbar, ohne dass es die Schrift tun muss. Laufweite entsprechend WEG -
   die gehoert zu Abolition, nicht zum Fliesstext (Hausregel).

   ⚠ Der Selektor braucht die Elternklasse: Das Theme setzt `.site h1,h2,h3`
   (Schrift, Laufweite UND Abstaende). `.tgf-uebersichtskachel__titel` allein ist
   gleich spezifisch wie `h3` darin und verliert - der Titel behielt seinen
   Vorabstand und rutschte unter das PDF-Symbol daneben. */
.tgf-reservation-detail .tgf-uebersichtskachel__titel {
    font-family: inherit;
    text-transform: none;
    /* 20px (Reini 10.08.2026) — 18px lagen zu nah am Fliesstext daneben, der
       Titel trug die Kachel nicht. */
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.25;
    color: var(--red, #c90000);
    margin: 0;
}
/* __sub (Untertitel unter dem Kacheltitel) ist am 17.08.2026 entfallen: Die Freikarten-Kachel
   war die einzige mit einer solchen Zeile, und die drei Kacheln sollen gleich gebaut sein. */

/* Enger als der Fliesstext der Website (Reini 10.08.2026: "Zeilenabstand ist noch
   zu gross, gerade bei der Aufführung: Titel und Datum"). Das Theme laesst die
   Seite in 1.7 laufen - richtig fuer Absaetze, falsch fuer eine Aufzaehlung
   kurzer Angaben, die zusammengehoeren. */
.tgf-uebersichtskachel__leib {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.tgf-uebersichtskachel__stueck {
    font-weight: 500;
    color: #2a2016;
}
.tgf-uebersichtskachel__zeile { color: #2a2016; }
.tgf-uebersichtskachel__zeile--leise {
    font-size: .875rem;
    color: #6f6047;
}

.tgf-uebersichtskachel__tickets {
    margin-top: .5rem;
    color: #6f6047;
}
/* Die Anzahl so gross wie der Stuecktitel, aber weiter fett (Reini 10.08.2026).
   Mit 1.5rem war sie die einzige Ausnahme in der Kachel und zog den Blick auf
   sich, obwohl der Titel und das Datum darueber das Wichtigere sind. */
.tgf-uebersichtskachel__zahl {
    font-weight: 500;
    color: #2a2016;
    margin-right: .25rem;
}

/* Sitzplaetze: bis zu 30 Stueck kommen vor (Reini 10.08.2026). Zwei Zeilen,
   dann laeuft es mit … aus - vollstaendig stehen sie in der Tabelle darunter.
   -webkit-line-clamp ist trotz Praefix in allen aktuellen Browsern zuhause. */
.tgf-uebersichtskachel__sitze {
    font-size: .875rem;
    color: #6f6047;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Feld fuer die E-Mail, wenn beim Buchen keine angegeben wurde. Steht unter dem
   Betrag, damit der Blick zuerst auf der Zahl bleibt. */
.tgf-uebersichtskachel__mail {
    margin-top: .75rem;
}
.tgf-uebersichtskachel__mail-label {
    display: block;
    font-size: .8125rem;
    color: #6f6047;
    margin-bottom: .2rem;
}

.tgf-uebersichtskachel__betrag {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;
    color: #2a2016;
}

.tgf-uebersichtskachel__fuss {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
}
.tgf-uebersichtskachel__hinweis {
    font-size: .8125rem;
    color: #6f6047;
}
.tgf-uebersichtskachel__hinweis--gut { color: #2E5B37; }
.tgf-uebersichtskachel__hinweis--gut i { margin-right: .25rem; }

/* Der Aufklapper sitzt seit dem 17.08.2026 als blosses i hinten an der Feldbeschriftung
   (Reini). Vorher stand er mit der Zeile "Wo steht die Nummer?" unter dem Feld und kostete
   eine eigene Zeile; die Erklaerung ist dieselbe geblieben, sie haengt nur woanders. */
.tgf-uebersichtskachel__wo {
    display: inline-flex;
    align-items: center;
}

/* Beschriftung und i in einer Zeile, das i direkt hinter dem Wort. */
.tgf-uebersichtskachel__feldtitel {
    display: flex;
    align-items: center;
    gap: .3rem;
}

/* Das Bild der Freikarte in der Blase: volle Blasenbreite, eigener Abstand nach
   oben. Heller Grund, weil die Karte selbst weiss ist - auf dem dunklen Grund der
   Blase verschwaende sie sonst mit ihrem eigenen Rand. */
.tgf-reservation-detail .tgf-uebersichtskachel__wo-bild {
    display: block;
    width: 100%;
    height: auto;
    margin-top: .6rem;
    border-radius: .25rem;
    background: #fff;
}

/* ── Handy ─────────────────────────────────────────────────────────────────
   Bei 390 px bleibt neben einer 11rem-Beschriftung zu wenig fuer den Wert. Dort
   Beschriftung ueber den Wert statt daneben. */
@media (max-width: 575.98px) {
    /* Die gleiche Behandlung im BESTAETIGUNGSFENSTER der Sitzaenderung. Es liegt nicht in
       .tgf-reservation-detail, sondern als eigene Flaeche ueber der Sitzauswahl — die Regel
       griff dort also nicht, und der Wert wurde neben der langen Beschriftung „Ihre bisherigen
       Sitzplaetze" auf eine handbreite Spalte gequetscht: „Samstag, 13. / Maerz 2027, / 20:00
       Uhr" (Reini 17.08.2026). */
    .tgf-reservation-detail .tgf-uebersicht,
    .tgf-reservation-detail .tgf-uebersicht tbody,
    .tgf-reservation-detail .tgf-uebersicht tr,
    .tgf-reservation-detail .tgf-uebersicht td,
    .tgf-modal .tgf-uebersicht,
    .tgf-modal .tgf-uebersicht tbody,
    .tgf-modal .tgf-uebersicht tr,
    .tgf-modal .tgf-uebersicht td {
        display: block;
        width: auto;
    }
    .tgf-reservation-detail .tgf-uebersicht tr,
    .tgf-modal .tgf-uebersicht tr {
        padding: .5rem 0;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
    }
    .tgf-reservation-detail .tgf-uebersicht td,
    .tgf-modal .tgf-uebersicht td {
        border: 0;
        padding: 0;
    }
    .tgf-reservation-detail .tgf-uebersicht__label,
    .tgf-modal .tgf-uebersicht__label {
        width: auto;
        font-size: .875rem;
    }

    /* Das Fenster selbst darf auf dem Handy die Breite ausnutzen: Der Rand aussen und der
       Innenabstand kosteten zusammen ueber 5rem, die neben den Platznummern fehlten. */
    .tgf-modal {
        padding: .5rem;
    }
    .tgf-modal__karte {
        padding: 1.25rem 1rem;
    }

    /* Zwei Knoepfe nebeneinander werden auf 390px zu schmal fuer ihre Beschriftung. Untereinander
       und je ueber die volle Breite; der ausfuehrende zuerst, weil der Daumen unten ist. */
    .tgf-modal .tgf-sitzplatzwahl__fuss {
        flex-direction: column-reverse;
        gap: .5rem;
    }
    .tgf-modal .tgf-sitzplatzwahl__fuss .tgf-form-btn {
        width: 100%;
    }
    /* Die Knoepfe hinter einem Wert (Aendern bei E-Mail und Telefon) auf eine
       eigene Zeile - neben dem Wert gedraengt wirken sie wie ein Teil davon.
       inline-flex statt block: Der Knopf bleibt so breit wie sein Text. */
    .tgf-reservation-detail td > .tgf-knopf {
        display: inline-flex;
        margin-top: .35rem;
    }

    /* Im Befehlsblock stehen Knopf, Frist und i auf dem Handy untereinander -
       dann muessen sie auch alle links buendig beginnen. Die Einzuege sind fuer
       das Nebeneinander auf dem Desktop gedacht und sehen hier aus wie eine
       ungewollte Stufe (Reini 10.08.2026). */
    .tgf-reservation-detail .tgf-uebersicht__befehl .tgf-knopf,
    .tgf-reservation-detail .tgf-uebersicht__befehl .tgf-knopf + .tgf-uebersicht__zusatz,
    .tgf-reservation-detail .tgf-uebersicht__befehl .tgf-info--rechts {
        margin-left: 0;
    }

    /* ⚠ Blase auf dem Handy IMMER linksbuendig zum Ausloeser und in der Breite
       gedeckelt. Rechts ausgerichtet (wie auf dem Desktop, wo das i am Zeilenende
       steht) lief sie ueber den linken Bildschirmrand hinaus: Ihre rechte Kante
       klebte am Symbol, das auf dem Handy schon weit links steht - der Rest ragte
       ins Nichts (Reini 10.08.2026). */
    .tgf-reservation-detail .tgf-info__blase,
    .tgf-reservation-detail .tgf-info--rechts .tgf-info__blase {
        left: 0;
        right: auto;
        width: max-content;
        max-width: calc(100vw - 3rem);
    }
    .tgf-reservation-detail .tgf-info__blase::after,
    .tgf-reservation-detail .tgf-info--rechts .tgf-info__blase::after {
        left: 1rem;
        right: auto;
    }
    .tgf-reservation-detail .tgf-uebersicht__zusatz,
    .tgf-reservation-detail .tgf-badge {
        margin-left: 0;
    }
    .tgf-reservation-detail .tgf-uebersicht__zusatz {
        display: block;
    }
    /* ⚠ KEIN margin-top auf dem Kennzeichen. Es stand hier aus der Zeit, als der
       Badge auf dem Handy unter dem Betrag sass; seit beide in einer Flex-Zeile
       liegen, schob der Abstand ihn aus der Mitte nach unten - auf dem Desktop
       sass er richtig, auf dem Handy nicht (Reini 10.08.2026). Die Ausrichtung
       macht align-items: center, sonst nichts. */
}


/* ══ Sitzplan: belegte Plaetze ohne Nummer ═════════════════════════════════
   Dieselbe Regel wie im Buchungsmodul (Reini 10.08.2026): Die Sitzplatzwahl in
   der Verwaltung ist oeffentlich und muss aussehen wie die Reservation selbst.
   Die Nummer eines belegten Platzes hat oeffentlich keinen Nutzen - man kann
   ihn ja nicht waehlen -, und ohne sie treten die freien Plaetze hervor.

   Bewusst je Modul und nicht im geteilten Renderer: Im Cockpit BLEIBEN die
   Nummern, weil das Personal dort einen vom Gast gewuenschten Platz sucht und
   sofort sehen soll, dass er vergeben ist. */
.tgf-reservation-verwaltung .sitz.occupied .tgf-sitz-text {
    display: none;
}