/* KEIN eigenes Padding (Reini 09.08.2026): der Seitenrahmen bringt seine Ränder
   schon mit, die zusaetzliche Zeile rundherum ruecke das Modul gegenueber jedem
   anderen Inhalt der Seite ein. Nachgemessen: Inhalt begann 16 Punkte weiter
   innen als die uebrige Textspalte. */
.tgf-reservation-buchung-extern {
    /* Zeilenabstand wie im Fliesstext der Website (Reini 07.08.2026: "der
       Zeilenabstand hier noch groesser als im Fliesstext auf der Startseite").
       Nachgemessen: das Modul erbte die 1.7 der Regel `.site`, waehrend der
       eigentliche Fliesstext ueber `.play-body p` auf 1.62 laeuft. Die
       Schriftgroesse bleibt bei 17px — die hatten wir am 06.08. bewusst so
       gesetzt. */
    line-height: 1.62;

    /* Farben fuer die geteilte Reservationscode-Eingabe (MvkCodeInput liegt in
       TGF.Reservation.Core und steht im dunklen Cockpit ebenso wie hier). Ohne diese
       beiden Angaben gaelten dort die Cockpit-Toene: helles Gold auf Weiss, das auf der
       hellen Website zu schwach traegt. Werte wie im Sitz-Zaehler nebenan. */
    --tgf-mvk-akzent: #8a6d3b;
    --tgf-mvk-gedaempft: #6f6047;

    /* Anleitung UND Summenzeile der Code-Eingabe laufen im Fliesstext der Website mit. Die
       Vorgabe der Komponente (.875rem) ist die Fliesstextgroesse des COCKPITS; hier waren das
       14 statt 17 Punkte und damit sichtbar kleiner als alles ringsum (Reini 09.08.2026). */
    --tgf-mvk-textgroesse: 1em;

    /* Plaettchen der Code-Eingabe (TgfTagInput): der zarte Bootstrap-Rahmen verschwand im
       weissen Eingabefeld (Reini 09.08.2026). Beige Flaeche mit goldenem Rahmen - dieselben
       Toene wie die Auffuehrungs-Auswahlliste. Ungueltige tragen ein kraeftiges Rot statt
       Bootstraps blassem Rosa, damit der Unterschied auf einen Blick sitzt. */
    --tgf-tag-flaeche: #F5EDDC;
    --tgf-tag-rahmen: #B49355;
    --tgf-tag-rahmen-ungueltig: #c90000;
}

/* Abstand der Vorverkaufs-Mitteilung zum Stepper. Farbe und Icon kommen von der
   Komponente TgfMeldung (Syncfusion SfMessage) — kein eigenes Farbschema mehr. */

/* ── Vorverkaufs-Mitteilung (TgfMeldung, Variante Filled) ─────────────────────
   Abstand zum Stepper, gedaempfte Flaeche und ein groesseres Icon.

   Farbe je Stufe (Reini 03.08.2026): auf der roten Flaeche weiss, auf der gelben
   schwarz. Syncfusion setzt die Farbe mit hoeherer Spezifitaet, darum !important.

   Das Icon bleibt vorerst die Syncfusion-Glyphe, nur groesser. Ein Ersetzen durch
   die feine Font-Awesome-Variante scheiterte an der Schriftfamilie (das Zeichen
   blieb leer) — dafuer muss zuerst der tatsaechlich geladene FA-Familienname
   ermittelt werden, statt ihn zu raten. */
/* Der Rahmen wird transparent gesetzt: die Daempfung wirkt nur auf die Flaeche, der
   Rahmen behielt sonst seine kraeftige Originalfarbe und traete als Ring hervor. Ohne
   Rahmen sieht es aus wie die gruene Erfolgsmeldung (Reini 03.08.2026).

   !important ist noetig: Syncfusion setzt die Rahmenfarbe ueber drei Klassen
   (.e-message.e-warning.e-filled) und schlaegt damit die zwei Klassen hier. */
.e-message.tgf-buchung-meldung {
    margin-bottom: 2.5rem;
    background-image: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28));
    border-color: transparent !important;
    box-shadow: none;
    display: flex;
    align-items: center;
}

/* Syncfusion gibt dem Icon-Span eine feste Hoehe von 16px und laesst ihn als
   Flex-Container ohne Ausrichtung. Bei vergroessertem Icon ragt die Glyphe darum
   unten aus ihrem Kasten heraus und wirkt zu tief. Hoehe freigeben und den Span
   selbst zentrieren lassen. */
.e-message.tgf-buchung-meldung .e-msg-icon {
    font-size: 2em;
    line-height: 1;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: center;
    margin: 0 .7rem 0 .25rem;
    align-self: center;
}

/* Fehler: weisse Schrift auf Rot. */
.e-message.tgf-buchung-meldung.e-error,
.e-message.tgf-buchung-meldung.e-error .e-msg-content,
.e-message.tgf-buchung-meldung.e-error .e-msg-icon,
.e-message.tgf-buchung-meldung.e-danger,
.e-message.tgf-buchung-meldung.e-danger .e-msg-content,
.e-message.tgf-buchung-meldung.e-danger .e-msg-icon {
    color: #fff !important;
}

/* Warnung: schwarze Schrift auf Gelb. */
.e-message.tgf-buchung-meldung.e-warning,
.e-message.tgf-buchung-meldung.e-warning .e-msg-content,
.e-message.tgf-buchung-meldung.e-warning .e-msg-icon {
    color: #000 !important;
}


/* Hinweis auf die Test-Umleitung, eine Zeile ueber den Bestaetigungsoptionen.
   Wortgleich und gleich gross wie im Cockpit; rem statt Bootstraps .small, das
   ist em-relativ und weicht je nach Elternschrift ab (Reini 06.08.2026). */
.tgf-testumleitung {
    font-size: .875rem;
    margin-bottom: .5rem;
}


/* ══ Schrittanzeige auf dem hellen Creme-Grund sichtbar machen ══════════════
   Reini 06.08.2026: "Der Stepper sieht man zu schlecht, auch die Linie nicht."
   Das SF-Stock-Theme setzt die Fortschrittslinie und die noch nicht erreichten
   Kreise in sehr hellem Grau (#dee2e6) — auf Weiss passt das, auf dem Creme-
   Grund der Website verschwindet es. Die Farbe selbst (Gold statt Blau) kommt
   aus den --color-sf-*-Variablen im Theme, hier geht es nur um Kontrast.

   Klassen aus dem tatsaechlich gerenderten DOM: nav.e-stepper > div.e-stepper-
   progressbar (Spur) > div.e-progressbar-value (gefuellter Teil);
   li.e-step-item mit e-step-selected / e-step-notstarted, darin
   span.e-step.e-indicator (Kreis) und span.e-label (Beschriftung). */

/* Spur der Fortschrittslinie: warmes Beige-Braun statt hellgrau. */
.tgf-reservation-buchung-extern .e-stepper .e-stepper-progressbar {
    background-color: #d9c9a8;
}

/* Zurueckgelegter Teil in Hausgold. */
.tgf-reservation-buchung-extern .e-stepper .e-progressbar-value {
    background-color: #B49355;
}

/* Noch nicht erreichte Schritte: weisser Kreis mit goldenem Rand statt
   hellgrauem Rand — so hebt er sich vom Creme-Grund ab. */
.tgf-reservation-buchung-extern .e-stepper .e-step-notstarted .e-indicator {
    background-color: #fff;
    border: 2px solid #c9b48a;
    color: #8a6d3b;
}

/* Beschriftungen: der erreichte Schritt kraeftig, die uebrigen gedaempft, aber
   nicht so blass wie im Stock-Theme (dort kaum lesbar auf Creme). */
.tgf-reservation-buchung-extern .e-stepper .e-step-notstarted .e-label {
    color: #6b5a3e;
}

/* Der aktive Schritt deutlich fetter als die uebrigen (Reini 06.08.2026) — 600
   hob sich neben der 400er-Grundschrift zu wenig ab. */
.tgf-reservation-buchung-extern .e-stepper .e-step-selected .e-label {
    color: #2a2016;
    font-weight: 700;
}

/* ══ Aufführungsliste ohne eigene Flaeche ══════════════════════════════════
   Reini 06.08.2026: "die weisse Tabelle zu hell. Ich denke, es braucht hier
   eigentlich gar keinen Hintergrund." Das weisse Panel kommt aus der
   allgemeinen Regel .tgf-public .tgf-liste__table-wrap im Theme — die bleibt
   fuer die uebrigen oeffentlichen Listen (Presse, Termine, ...) bestehen und
   wird nur fuer die Buchung zurueckgenommen. */
.tgf-reservation-buchung-extern .tgf-liste__table-wrap {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}


/* Hinweis auf dem Ueberpruefungs-Schritt: ruhige Erklaerung, keine Warnung.
   Gestaltung wie die "Mehr zum Thema"-Box der Website (helle Flaeche, roter
   Strich links) — mit Warnsymbol und Signalfarbe sah es aus wie ein Fehler
   (Reini 06.08.2026). */
.tgf-pruef-hinweis {
    background: rgba(180, 147, 85, .14);
    border-left: 4px solid #c90000;
    border-radius: .375rem;
    padding: .9rem 1.2rem;
    margin-bottom: 1.5rem;
}

/* Ueberschrift IN der Box statt darueber — sonst standen zwei Titel
   uebereinander (Schrittname und Ueberschrift). */
.tgf-pruef-hinweis h4 {
    margin: 0 0 .4rem;
}

.tgf-pruef-hinweis p {
    margin: 0;
}

/* Test-Umleitung: Bootstraps text-warning (#ffc107) war auf Creme kaum lesbar.
   Selektor bewusst so lang: die Theme-Regel `.reading .prose p` (0,2,1) faerbt
   jeden Absatz im Inhaltsbereich und schlaegt eine blosse Klasse. Gemessen,
   nicht geraten. */
.tgf-public .tgf-reservation-buchung-extern p.tgf-testumleitung {
    color: #8a6d3b;
}

/* SMS/WhatsApp stehen seit 07.08.2026 auf derselben Zeile wie die Option, also
   nur noch etwas Abstand nach dem Doppelpunkt. (Die frueheren Regeln zur
   Einrueckung sind damit hinfaellig.) */
.tgf-mobil-kanal {
    align-items: center;
    margin-left: .5rem;
}

/* Syncfusion setzt der Radio-Beschriftung line-height 1 (17px), waehrend der
   Text daneben auf 1.62 laeuft. Die kuerzere Zeilenbox zentrierte sich 2.2px
   hoeher — "SMS und WhatsApp sind hoeher als 'aufs Mobiltelefon senden'"
   (Reini 07.08.2026, nachgemessen). Gleiche Zeilenhoehe, gleiche Mitte. */
.tgf-mobil-kanal .e-radio-wrapper,
.tgf-mobil-kanal .e-radio-wrapper label,
.tgf-mobil-kanal .e-radio-wrapper label .e-label {
    line-height: 1.62;
}

/* Der innere Beschriftungs-Span haengt bei Syncfusion an `text-top` und sass
   damit weitere 1.6px zu hoch. Auf `middle` liegen die Mitten exakt
   uebereinander (gemessen: 1041.9 zu 1041.9).

   font-family: der Span traegt Bootstraps eigenen Schriftstapel (system-ui
   zuerst), waehrend alles daneben auf Roboto laeuft — "die Schrift von SMS und
   WhatsApp ist nicht Roboto" (Reini 07.08.2026, nachgemessen). Das umgebende
   label hat Roboto bereits, also genuegt inherit.

   font-weight: damit war es noch nicht getan. Der Browser meldete zwar beide
   Male "Roboto", gerendert wurde aber Roboto Regular gegen Roboto Light — die
   Website laeuft auf 300, Syncfusion setzt 400. Erst ueber die tatsaechlich
   verwendete Schriftdatei sichtbar (CSS.getPlatformFontsForNode), nicht ueber
   font-family. */
.tgf-mobil-kanal .e-radio-wrapper label,
.tgf-mobil-kanal .e-radio-wrapper label .e-label {
    font-family: inherit;
    font-weight: inherit;
}

.tgf-mobil-kanal .e-radio-wrapper label .e-label {
    vertical-align: middle;
}

/* Ring und Punkt sitzen bei Syncfusion mit `top: 0` bzw. `top: 4px` fest am
   oberen Rand der Beschriftung. Das passt zu deren Zeilenhoehe 1; auf unserer
   1.62 ist die Beschriftung 28px hoch und die Knoepfe klebten oben.

   Zentriert wird ueber `top` und die halbe Eigenhoehe, NICHT ueber
   translateY: Syncfusion blendet den Punkt mit `transform: scale(0)` aus und
   zeigt ihn bei :checked mit scale(1). Ein eigenes transform loescht das —
   dann trugen beide Auswahlknoepfe einen Punkt (ausprobiert). */
.tgf-mobil-kanal .e-radio-wrapper label::before {
    top: calc(50% - 7px);   /* halbe Ringhoehe (14px) */
}

.tgf-mobil-kanal .e-radio-wrapper label::after {
    top: calc(50% - 3px);   /* halbe Punkthoehe (6px) */
}


/* ══ Testhilfe im Kontaktformular ══════════════════════════════════════════
   Der Knopf, der das Formular zufaellig fuellt. Bewusst unauffaellig und in
   derselben gedaempften Farbe wie der Testumleitungs-Hinweis — er gehoert
   nicht zum Formular, sondern ist Werkzeug fuer den Testbetrieb. */
.tgf-reservation-buchung-extern .tgf-testhilfe {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px dashed #d9c9a8;
}

.tgf-reservation-buchung-extern .tgf-testhilfe span {
    font-size: .875rem;
    color: #8a6d3b;
}


/* ══ Einleitungstext ueber der Schrittanzeige ══════════════════════════════
   Aus den Modul-Einstellungen (Reini 08.08.2026). Ein festes Text-Modul auf
   der Seite ginge nicht: dieselbe Seite traegt auch die Reservationsverwaltung,
   und der Text stuende dort ebenfalls.

   Bewusst schlicht — der Text soll wie normaler Seiteninhalt lesen, nicht wie
   ein Kasten. Abstand nach unten, damit die Schrittanzeige Luft hat. */
.tgf-reservation-buchung-extern .tgf-buchung-lead {
    /* 3rem statt 2: der Text braucht Luft zur Schrittanzeige, sonst lesen sich die
       beiden wie ein Block (Reini 08.08.2026). */
    margin-bottom: 3rem;
}

.tgf-reservation-buchung-extern .tgf-buchung-lead > :last-child {
    margin-bottom: 0;
}


/* ══ Text, solange kein Vorverkauf laeuft ══════════════════════════════════
   Aus den Modul-Einstellungen (Reini 09.08.2026). Bewusst OHNE Meldebox und
   ohne eigene Schriftvorgaben: der Text soll sich voellig frei gestalten
   lassen, und ein Kasten drumherum wuerde jede Gestaltung wieder einfangen.
   Ausserhalb der Vorverkaufszeit ist er ueber Monate der ganze Seiteninhalt.
   Geregelt wird hier nur der Abstand nach unten - wie beim Einleitungstext. */
.tgf-reservation-buchung-extern .tgf-buchung-geschlossen > :last-child {
    margin-bottom: 0;
}


/* ══ Sitzplan: belegte Plaetze ohne Nummer ═════════════════════════════════
   Oeffentlich ist die Nummer eines belegten Platzes ohne Nutzen — man kann ihn
   ja nicht waehlen (Reini 08.08.2026). Ohne Beschriftung liest sich der Plan
   ruhiger, und die freien Plaetze treten hervor.

   Im Cockpit bleiben die Nummern: dort sucht das Personal einen vom Gast
   gewuenschten Platz und sieht dann sofort, dass er vergeben ist. Darum die
   Regel hier im Modul und nicht im geteilten Renderer. */
.tgf-reservation-buchung-extern .sitz.occupied .tgf-sitz-text {
    display: none;
}


/* ══ Uebersichtstabelle im Schritt "Ueberpruefung" ═════════════════════════
   Reini 07.08.2026: Hintergrund transparent, Beschriftungsspalte kompakter.

   Das Weiss kommt nicht von einer Regel, die man ueberschreiben koennte,
   sondern aus Bootstraps Variable --bs-table-bg (jede Zelle setzt sie als
   background-color). Darum an der Variable ansetzen, nicht am background. */
.tgf-reservation-buchung-extern .tgf-uebersicht {
    --bs-table-bg: transparent;
}

/* Beschriftungsspalte auf ihren Inhalt schrumpfen: `width: 1%` zusammen mit
   nowrap ist der uebliche Weg — der Browser gibt der Spalte dann genau so
   viel, wie der laengste Eintrag braucht. Vorher standen feste 30 %, was viel
   Luft zwischen Beschriftung und Wert liess. */
.tgf-reservation-buchung-extern .tgf-uebersicht > tbody > tr > th {
    width: 1%;
    white-space: nowrap;
    /* 2.5rem statt 1.5rem: ganz auf den Inhalt geschrumpft klebten Beschriftung
       und Wert aneinander — "ein klein wenig breiter wieder" (Reini
       07.08.2026). */
    padding-right: 2.5rem;

    /* Erste Spalte buendig zum uebrigen Inhalt — so halten wir es bei
       transparenten und beigen Tabellen (Bootstrap setzt .5rem). */
    padding-left: 0;
}

/* Auf schmalen Schirmen wuerde die nowrap-Spalte die Werte erdruecken. */
@media (max-width: 575.98px) {
    .tgf-reservation-buchung-extern .tgf-uebersicht > tbody > tr > th {
        width: auto;
        white-space: normal;
        padding-right: .75rem;
    }
}

/* Die Bestaetigungszeile enthaelt Bedienelemente statt Text — etwas mehr Luft,
   damit die Kaestchen nicht am Zeilenstrich kleben. */
.tgf-reservation-buchung-extern .tgf-uebersicht .tgf-kanal-option:first-child {
    margin-top: -.15rem;
}

/* Der Hinweis steht seit 07.08.2026 UNTER den Optionen — also Abstand oben
   statt unten. */
.tgf-reservation-buchung-extern .tgf-uebersicht .tgf-testumleitung {
    margin-top: .5rem;
    margin-bottom: 0;
}


/* ── Schrittanzeige: Schriftgroesse und Handy-Variante ─────────────────────
   Reini 06.08.2026: die Beschriftungen standen auf 14px, sollen aber so gross
   sein wie der Fliesstext (17px, gesetzt auf .site).

   `font-size: inherit` half NICHT: die Schrittzeile selbst traegt schon 14px,
   geerbt wurde also wieder 14px (nachgemessen). Darum der Wert direkt —
   1.0625rem sind die 17px der Grundschrift. */
.tgf-reservation-buchung-extern .e-stepper .e-step-item .e-label {
    font-size: 1.0625rem;
}

/* Der Schrittname unter der Anzeige gehoert dem Handy — auf grossen Schirmen
   stehen die Beschriftungen ja an den Punkten selbst. */
.tgf-reservation-buchung-extern .tgf-stepper-titel {
    display: none;
}

/* ── Warum die Abstaende zwischen den Symbolen ungleich sind ────────────────
   Sie haengen an der Laenge der Beschriftung: Syncfusion misst jeden Schritt am
   Inhalt, "Reservationscode" zieht seine Spalte darum breiter als "Sitze".

   Am 09.08.2026 standen hier gleich breite Spalten (flex: 1 1 0). Die Abstaende
   waren damit exakt gleich - aber der Stepper nahm nicht mehr die volle Breite
   ein: Syncfusion deckelt jeden Schritt inline auf max-width: 16% und zentriert
   den Inhalt darin, also ruecken der erste und der letzte Kreis um eine halbe
   Spalte nach innen (gemessen 112/1288 statt 70/1363 bei 1400 Punkten Breite).
   Beides zugleich ginge nur, indem die Beschriftungen aus dem Fluss genommen und
   absolut unter die Kreise gehaengt werden - zu viel Gebastel an einer
   Fremdkomponente fuer den Gewinn. Reini hat die volle Breite vorgezogen, darum
   bleibt es beim Syncfusion-Standard. */

@media (max-width: 575.98px) {
    /* Nebeneinander waren die Beschriftungen abgeschnitten ("Auffuehr...",
       "Kontakt..."). Auf dem Handy darum nur die Symbole — und der Name des
       aktuellen Schritts als eine Zeile darunter.

       ⚠ .e-stepper-steps gehoert in den Selektor: Syncfusions eigene Regel
       (.e-stepper .e-stepper-steps .e-step-label-container { display: flex })
       hat sonst DIESELBE Spezifitaet und steht spaeter im Stapel - dann gewinnt
       sie, und die Beschriftungen bleiben auf dem Handy doch stehen. Genau das
       war der Fall, bis es am 09.08.2026 nachgemessen wurde. */
    .tgf-reservation-buchung-extern .e-stepper .e-stepper-steps .e-step-label-container {
        display: none;
    }

    /* Ohne Beschriftungen sind alle Schritte gleich breit (nur noch das Symbol),
       und die Verteilung wird von selbst gleichmaessig - ueber die volle Breite.
       Es braucht dafuer keine eigene Regel. */

    /* Linksbuendig wie alles andere im Formular (Reini 06.08.2026) — zentriert
       wirkte er wie eine eigene Ueberschrift ueber der Seite. */
    .tgf-reservation-buchung-extern .tgf-stepper-titel {
        display: block;
        margin-top: .9rem;
        font-weight: 700;
        color: #2a2016;
    }
}


/* ── Bestaetigungsoptionen ─────────────────────────────────────────────────
   Beschriftungen und Radio-Texte auf Fliesstextgroesse: Syncfusion setzt sie
   auf 14px, neben 17px Text wirkte das kleiner (Reini 06.08.2026). */
.tgf-reservation-buchung-extern .e-checkbox-wrapper .e-label,
.tgf-reservation-buchung-extern .e-radio-wrapper label,
.tgf-reservation-buchung-extern .e-radio-wrapper label .e-label {
    font-size: 1.0625rem;
}

/* (Die frueheren .tgf-nur-gross-Regeln sind weg: der Vorsatz
   "Reservationsbestaetigung " steht seit 07.08.2026 als Zeilenbeschriftung in
   der Uebersichtstabelle und nicht mehr in den Beschriftungen selbst.) */


/* ══ Schriftgroessen aufgeraeumt ═══════════════════════════════════════════
   Reini 06.08.2026: "Es herrscht hier etwas Chaos bezueglich Schriftgroessen."
   Stimmte — gemessen wurde quer durch das Modul, Ergebnis:

     Grundschrift der Website .......... 17px
     Stepper, Tabellen, Optionen ....... 17px  (schon richtig)
     Reservationsbestimmungen Titel .... 16px  -> 17px
     Reservationsbestimmungen Liste .... 14.9px -> 17px  (.875em von 17)
     Knoepfe Zurueck/Reservieren ....... 16px  -> 17px

   BEWUSST kleiner bleiben: Tabellenkopf (13.1px, Hausstil der Listen),
   Status-Badge (12.8px), der kleine Reservieren-Knopf je Zeile (12.8px) und
   der Testmodus-Hinweis (14px). Diese sind Beiwerk, kein Fliesstext. */
.tgf-reservation-buchung-extern .tgf-reservationsbestimmungen h6,
.tgf-reservation-buchung-extern .tgf-reservationsbestimmungen li,
.tgf-reservation-buchung-extern .tgf-reservationsbestimmungen p {
    font-size: 1.0625rem;
}

/* Dieselbe Flaeche wie die Hinweisbox oben (Reini 07.08.2026) — das weisse
   Bootstrap-Card war das letzte Weiss im Schritt und stach heraus. Nur hier
   im Modul; die geteilte Komponente behaelt anderswo ihr Aussehen. */
.tgf-reservation-buchung-extern .tgf-reservationsbestimmungen.card {
    background: rgba(180, 147, 85, .14);
    border-color: #d9c9a8;
}


/* Beschriftung neben der Checkbox (nicht ueber deren Label-Parameter, s.
   Kommentar in Zusammenfassung.razor). Klickbar wie eine echte Beschriftung. */
.tgf-kanal-option {
    display: flex;
    align-items: center;
    /* Auf schmalen Schirmen darf die Kanalwahl hinter dem Doppelpunkt umbrechen,
       statt die Zeile zu sprengen. */
    flex-wrap: wrap;
    gap: .5rem;
}

.tgf-kanal-text {
    cursor: pointer;
}

.tgf-kanal-text.ist-gesperrt {
    cursor: default;
    opacity: .55;
}

/* Zustimmung zu den Reservationsbestimmungen: mehrzeilig auf schmalen
   Schirmen. Syncfusion setzt Kaestchen und Beschriftung nebeneinander in den
   Zeilenfluss — die zweite Textzeile rutschte dadurch unter das Kaestchen
   (Reini 07.08.2026). Als Flex-Zeile mit Ausrichtung oben bleibt der Text ein
   Block, dessen Folgezeilen unter der ersten fluchten.

   Der Flex-Aufbau gehoert an das <label> INNEN, nicht an .e-checkbox-wrapper:
   Syncfusion legt Kaestchen und Text gemeinsam in ein <label>, der Wrapper hat
   nur dieses eine Kind. Am Wrapper blieb die Regel darum wirkungslos
   (nachgemessen — das Kaestchen sass danach zwischen den beiden Textzeilen). */
.tgf-reservation-buchung-extern .tgf-agb-zeile .e-checkbox-wrapper label {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.tgf-reservation-buchung-extern .tgf-agb-zeile .e-checkbox-wrapper .e-frame {
    flex: 0 0 auto;
    /* Auf die Mitte der ersten Textzeile, nicht auf deren Oberkante. Der Wert
       ist die halbe Differenz zwischen Zeilenhoehe (1.62 x 17px = 27.5px) und
       Kaestchen (14px) — also (27.5 - 14) / 2 = 6.8px. */
    margin-top: .42rem;
}

.tgf-reservation-buchung-extern .tgf-agb-zeile .e-checkbox-wrapper .e-label {
    padding-left: 0;
    line-height: 1.62;
}


/* ── Kacheln der Auffuehrungsliste ─────────────────────────────────────────
   Reini 07.08.2026: das Weiss stoert; dieselbe Flaeche wie der Sitzplan.
   Also die Gold-Toenung der "Mehr zum Thema"-Box, warmer Rand statt kaltem
   Grau, und ohne Schatten — auf einer getoenten Flaeche wirkt eine
   angedeutete Erhebung unruhig.

   Nur in der Buchung: die uebrigen oeffentlichen Listen (Presse, Termine)
   behalten ihre weissen Kacheln aus dem Theme. */
.tgf-reservation-buchung-extern .tgf-liste__card {
    background: rgba(180, 147, 85, .14);
    border-color: #d9c9a8;
    box-shadow: none;
}

.tgf-reservation-buchung-extern .tgf-liste__card:hover {
    border-color: #B49355;
    box-shadow: none;
}


/* ══ Abschluss-Schritt ═════════════════════════════════════════════════════
   Der Dank in der normalen Schrift, nicht in der Display-Schrift Abolition
   (Reini 07.08.2026). Die gehoert auf der Website den Seitentiteln; hier steht
   sie mitten im Ablauf und wirkt wie ein zweiter Seitenanfang. Mit der
   Schriftart fallen auch deren Laufweite und Versalien weg — die gelten laut
   Hausregel nur fuer Abolition. */
.tgf-reservation-buchung-extern .tgf-danke {
    font-family: var(--font-body, Roboto, system-ui, sans-serif);
    /* Kraeftiger und groesser als der uebrige Text (Reini 07.08.2026) — ohne
       die Display-Schrift braucht der Dank sein Gewicht aus Fettung und
       Groesse. */
    font-weight: 700;
    font-size: 1.75rem;
    letter-spacing: normal;
    text-transform: none;
}

/* Die Verwaltungs-Adresse steht im Klartext und darf umbrechen, statt die
   Zeile auf schmalen Schirmen zu sprengen. */
.tgf-reservation-buchung-extern .tgf-verwaltung-link {
    overflow-wrap: anywhere;
}

/* Kopier-Knopf hinter der Adresse: nur das Symbol, keine Knopf-Flaeche — er
   soll die Zeile nicht dominieren. */
.tgf-reservation-buchung-extern .tgf-kopieren {
    border: 0;
    background: none;
    padding: 0 .35rem;
    color: #8a6d3b;
    cursor: pointer;
    /* Der Knopf darf nie allein auf der naechsten Zeile landen. */
    white-space: nowrap;
}

.tgf-reservation-buchung-extern .tgf-kopieren:hover,
.tgf-reservation-buchung-extern .tgf-kopieren:focus-visible {
    color: #2a2016;
}

.tgf-reservation-buchung-extern .tgf-kopiert-hinweis {
    font-size: .875rem;
    color: #8a6d3b;
}


/* ══ Mitlaufende Aktionsleiste ═════════════════════════════════════════════
   In allen drei langen Schritten: Sitzauswahl, Kontaktdaten, Ueberpruefung.

   Anlass war der letzte (Reini 07.08.2026): Leute standen an der Theaterkasse
   mit einer angeblichen Reservation, hatten aber nie abgeschlossen — der Knopf
   lag unterhalb des Sichtfelds und die Uebersicht sah aus wie eine
   Bestaetigung. Auf den anderen beiden Schritten hilft dasselbe, weil der
   Sitzplan hoch und das Kontaktformular lang ist.

   Das Kleben macht `position: sticky` — der Browser also, nicht wir. Eine
   feste Leiste laege auch ueber dem Seitenfuss; sticky klebt nur, solange das
   Formular im Bild ist, und setzt sich am Ende von selbst an seinen Platz.

   ⚠ Es gab am 08.08.2026 einen Zwischenstand, der die Leiste selbst
   positionierte (fixed, Breite und Hoehe von Hand). Der brachte waagrechtes
   Springen, einen Ruck beim Loslassen und auf dem iPhone eine Leiste auf halber
   Hoehe — und ist wieder entfernt. Wer hier ansetzt: sticky kann das alles von
   sich aus.

   Geklebt wird nur mit der Klasse `darf-kleben`, die aktionsleiste.js setzt.
   Sie faellt weg, wenn das Formular kaum ueber den Fensterrand hinausragt —
   auf dem iPad im Hochformat sind es 32px, und bei so wenig Weg kippt schon
   das Ein- und Ausfahren der iOS-Browserleisten den Zustand. Dort steht die
   Leiste dann einfach am Ende des Formulars.

   ⚠ Sticky stirbt lautlos, wenn ein Vorfahre overflow:hidden/auto hat. Auf der
   Buchungsseite geprueft. Wer den Aufbau der Seite aendert: nachmessen. */
.tgf-reservation-buchung-extern .tgf-aktionsleiste {
    margin-top: 1.5rem;
    /* Steht die Leiste am Ende des Formulars, kam unter ihr nochmals das
       Modul-Padding — zusaetzlicher Leerraum vor dem Seitenfuss (Reini
       08.08.2026). Der Rest darunter ist die normale Bandbreite der Seite und
       auf jeder Unterseite gleich. */
    margin-bottom: -1rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;

    /* Eigene Flaeche, sonst scheint der Inhalt beim Blaettern durch. Etwas
       kraeftiger als die Hinweis-Box, damit die Leiste als Handlungszone
       lesbar bleibt. */
    background: #f6efe1;
    border-top: 1px solid #d9c9a8;
    /* 1.25rem statt .85rem: der Leiste fehlte oben und unten Luft, die Knoepfe
       sassen zu dicht am Trennstrich (Reini 07.08.2026). */
    padding: 1.25rem 0;
    /* Innerhalb des Modul-Paddings die volle Breite nutzen. */
    margin-inline: -1rem;
    padding-inline: 1rem;
    /* iPhone: nicht unter den Home-Balken rutschen. */
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}

/* Am Fensterrand gehalten. Links und Breite setzt aktionsleiste.js aus dem
   Halter — so bleibt die Leiste ueber dem Inhalt und laeuft nicht ueber die
   ganze Fensterbreite. Der Ueberhang links/rechts steckt weiterhin im
   negativen Aussenabstand oben; das Skript rechnet ihn mit. */
.tgf-reservation-buchung-extern .tgf-aktionsleiste.darf-kleben {
    position: sticky;
    bottom: 0;
    z-index: 5;
}

/* Der Verlauf gehoert zur klebenden Leiste. Klebt sie gar nicht, legt er sich
   nur ueber den Text darueber (Reini 08.08.2026 auf dem iPad gesehen). */
.tgf-reservation-buchung-extern .tgf-aktionsleiste:not(.darf-kleben)::before {
    display: none;
}

/* Weicher Uebergang oberhalb der Leiste (Reini 07.08.2026): der Inhalt lief
   vorher hart an der Trennlinie ab und sah aus, als hoere er dort auf. Der
   Verlauf endet in derselben Farbe wie die Leiste — so liest man, dass der
   Inhalt darunter weitergeht.

   Als ::before an der Leiste selbst, `bottom: 100%` setzt ihn direkt darueber.
   pointer-events: none, damit der Streifen keine Klicks abfaengt. Am Seitenende,
   wenn die Leiste nicht mehr klebt, faellt er nicht auf: dann liegt ohnehin
   Leerraum darueber. */
.tgf-reservation-buchung-extern .tgf-aktionsleiste::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.25rem;
    background: linear-gradient(to bottom, rgba(246, 239, 225, 0), #f6efe1);
    pointer-events: none;
}


/* ── Der Abschluss-Knopf, bewusst gross ────────────────────────────────────
   Reini 07.08.2026: "ich wuerde ihn sogar bewusst etwas groesser machen, also
   z.B. 50 % hoeher." Gemessen waren es 39px; mit .95rem Innenabstand oben und
   unten kommt er auf rund 59px. Nur hier, nicht bei "Weiter" & Co. — der
   Knopf soll sich vom Rest des Formulars abheben. */
.tgf-reservation-buchung-extern .tgf-form-btn--gross.e-btn {
    padding-block: .95rem;
    padding-inline: 1.5rem;
    font-weight: 600;

    /* inline-flex statt Syncfusions Zeilenfluss: mit dem doppelt so grossen
       Symbol bestimmte dieses die Zeilenbox, und die Beschriftung sass auf
       deren Grundlinie — also leicht ueber der Mitte (Reini 07.08.2026).
       Nebeneinander zentriert stehen beide auf gleicher Hoehe. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Symbol doppelt so gross wie die Beschriftung (Reini 07.08.2026) — nur auf
   diesem einen Knopf; die "Weiter"-Knoepfe behalten ihr normales Mass. */
.tgf-reservation-buchung-extern .tgf-form-btn--gross.e-btn .e-btn-icon {
    font-size: 2em;
    margin-right: .5rem;
    /* transform wirkt nur auf nicht-inline Elemente. */
    display: inline-block;
}

/* Ruhiges Pumpen (Reini 07.08.2026): der Knopf soll auch im Augenwinkel
   sagen "hier fehlt noch ein Klick".

   Bewusst NUR im freigegebenen Zustand — ein gesperrter Knopf, der sich regt,
   fordert zu etwas auf, das gar nicht geht.

   20 % Groesse ueber 1.8s (Reini 07.08.2026: "sollte noch staerker pumpen,
   aber Tempo ist nicht schlecht"). Klein wirkt zurueckgenommen, gross wirkt
   praesent — zusammen liest sich das als Bewegung nach vorn, waehrend die
   Groesse allein nur zappelt.

   Ueber `opacity`, nicht ueber `color` (Reini 07.08.2026: "es ruckelt optisch
   jetzt und statt grau sollte es eher in die Farbe des Hintergrunds gehen").
   Beide Punkte hat dieselbe Aenderung geloest:

     · Ein Farbwechsel muss der Browser in jedem Bild neu zeichnen — bei einer
       gleichzeitig wachsenden Schriftglyphe wird die auch noch jedes Mal neu
       gerastert. Transform und Deckkraft dagegen kann er auf der Grafikkarte
       zusammensetzen, ohne neu zu zeichnen.
     · Ein grauer Zwischenton ist eine dritte Farbe im Bild. Durchscheinen
       laesst dagegen genau das Gold des Knopfes durch — der Ton bleibt der
       der Umgebung.

   will-change kuendigt beides an, damit der Browser die Ebene vorbereitet und
   nicht erst beim ersten Bild. */
@keyframes tgf-knopf-pumpen {
    0%, 100% {
        transform: scale(1);
        opacity: .45;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.tgf-reservation-buchung-extern .tgf-form-btn--gross.e-btn:not(:disabled):not(.e-disabled) .e-btn-icon {
    animation: tgf-knopf-pumpen 1.8s ease-in-out infinite;
    will-change: transform, opacity;
}

/* Gesperrt bleibt das Symbol auf dem Wert stehen, mit dem das Pumpen anfaengt
   (Reini 07.08.2026) — so sieht es wirklich inaktiv aus, statt in voller
   Deckkraft zu warten, und der Uebergang zum ersten Puls ist stufenlos. */
.tgf-reservation-buchung-extern .tgf-form-btn--gross.e-btn:disabled .e-btn-icon,
.tgf-reservation-buchung-extern .tgf-form-btn--gross.e-btn.e-disabled .e-btn-icon {
    opacity: .45;
}

/* Wer Bewegung im Betriebssystem abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .tgf-reservation-buchung-extern .tgf-form-btn--gross.e-btn .e-btn-icon {
        animation: none;
    }
}

/* Grund der Sperre neben dem Knopf — ein grauer Knopf ohne Begruendung wird
   fuer Zierde gehalten. Auf schmalen Schirmen eine eigene Zeile ueber den
   Knoepfen (order), damit die beiden Knoepfe nebeneinander bleiben. */
.tgf-reservation-buchung-extern .tgf-aktionsleiste__grund {
    font-size: .9375rem;
    color: #8a6d3b;
}

/* Ab Tablet abwaerts (unter 992px) auf eine EIGENE Zeile ueber den Knoepfen.
   Sonst passt die ganze Zeile nicht mehr nebeneinander, und es bricht
   ausgerechnet der Abschluss-Knopf um — der stand dann allein links, waehrend
   die Leiste auf drei Zeilen und 161px Hoehe wuchs (Reini 08.08.2026 auf dem
   iPad gemessen). Auf noch schmaleren Schirmen war die Regel schon vorher da;
   sie greift jetzt einfach frueher. */
@media (max-width: 991.98px) {
    .tgf-reservation-buchung-extern .tgf-aktionsleiste__grund {
        order: -1;
        flex-basis: 100%;
        font-size: .875rem;
    }
}

@media (max-width: 575.98px) {
    /* Bestaetigungszeile: das Kaestchen stand allein auf einer Zeile und die
       Beschriftung darunter (Reini 07.08.2026). Ursache war das Umbrechen der
       ganzen Flex-Zeile — die Beschriftung passte samt Kanalwahl nicht mehr
       daneben. Jetzt darf die Beschriftung selbst schrumpfen und umbrechen, so
       bleibt sie beim Kaestchen; die Kanalwahl geht auf eine eigene Zeile und
       ruecken wir unter die Beschriftung ein. */
    .tgf-reservation-buchung-extern .tgf-kanal-option {
        align-items: flex-start;
    }

    .tgf-reservation-buchung-extern .tgf-kanal-text {
        flex: 1 1 0;
        min-width: 0;
    }

    .tgf-reservation-buchung-extern .tgf-mobil-kanal {
        flex-basis: 100%;
        margin-left: 1.6rem;
    }

    .tgf-reservation-buchung-extern .tgf-aktionsleiste {
        gap: .5rem;
    }

    /* Auf 390px passten die beiden Knoepfe um wenige Pixel nicht nebeneinander
       und die Leiste wuchs auf drei Zeilen (~200px Hoehe). Der Hauptknopf darf
       darum schrumpfen; so bleibt es bei zwei Zeilen. */
    .tgf-reservation-buchung-extern .tgf-aktionsleiste .tgf-form-btn.e-btn {
        min-width: 0;
    }

    .tgf-reservation-buchung-extern .tgf-aktionsleiste .tgf-form-btn--primaer.e-btn {
        flex: 1 1 auto;
        padding-inline: .5rem;
        font-size: 1rem;
    }
}