/* Layer NUR fuer die oeffentlichen Layouts (Standard, StandardBreit, Startseite).
   Gegenstueck zu Theme.Intern.css: das Cockpit laedt diese Datei nie, darum koennen
   sich die beiden Gold-Bloecke nicht in die Quere kommen — unabhaengig davon, in
   welcher Reihenfolge Oqtane die Stylesheets einbindet. */

/* ══ Syncfusion auf der OEFFENTLICHEN Website: Blau -> Hausgold ═════════════
   Die oeffentliche Site laedt das helle SF-Theme (bootstrap5.css, siehe
   Standard.razor). Dessen Primaerfarbe ist Bootstrap-Blau und wirkt neben
   Rot/Gold/Creme fremd (Reini 06.08.2026).

   ⚠ WICHTIGER UNTERSCHIED ZUM COCKPIT: das HELLE bootstrap5.css ist NICHT
   variablenbasiert — es schreibt die Farben als feste Werte hin
   (rgb(13,110,253)). Der Variablen-Schalter unten allein bewirkt daher fast
   nichts; er bleibt nur fuer die Komponenten stehen, die die Variablen doch
   lesen. Alles Sichtbare muss als echte Regel ueberschrieben werden — siehe
   die Bloecke darunter. Im Cockpit funktioniert der Schalter, weil das dort
   geladene bootstrap5.3-dark.css variablenbasiert ist.

   Im Browser nachgesehen statt geraten: die Selektoren unten stammen aus den
   tatsaechlich geladenen Regeln von bootstrap5.css.

   :root statt .tgf-public: SF haengt Popups (Auswahllisten) direkt an den
   <body>; die sind Geschwister von .tgf-public und erben dessen Variablen
   nicht. */
:root:root {
    --color-sf-primary: #B49355;              /* Hausgold (war Bootstrap-Blau #0d6efd) */
    --color-sf-primary-text-color: #2a2016;   /* Text AUF Gold: dunkel, wie bei den Gold-Buttons */
    --color-sf-primary-shadow: 180, 147, 85;  /* rgb-Tripel fuer rgba()-Fokusschatten */

    --color-sf-primary-bg-color-hover: #9c7c43;
    --color-sf-primary-border-color-hover: #9c7c43;
    --color-sf-primary-bg-color-pressed: #8a6d3b;
    --color-sf-primary-border-color-pressed: #8a6d3b;
    --color-sf-primary-bg-color-disabled: rgba(180, 147, 85, .65);

    /* Tint-Toene fuer subtile Flaechen — im HELLEN Theme hell halten. */
    --color-sf-primary-light: #E7D3A6;
    --color-sf-primary-lighter: #F5EDDC;
    --color-sf-primary-dark: #9c7c43;
    --color-sf-primary-darker: #7d6236;

    /* Ausgewaehlter Eintrag / gedruecktes Flyout: eigene Variablen, im Stock-Theme
       fest auf #0d6efd. */
    --color-sf-content-bg-color-selected: #B49355;
    --color-sf-flyout-bg-color-pressed: #B49355;
}


/* ── Schrittanzeige (SfStepper) ────────────────────────────────────────────
   Erreichte und laufende Schritte in Hausgold mit dunklem Symbol; die
   Beschriftungen ebenfalls, statt Bootstrap-Blau. */
.tgf-public .e-stepper .e-step-completed .e-step,
.tgf-public .e-stepper .e-step-inprogress .e-step,
.tgf-public .e-stepper .e-step-completed .e-indicator,
.tgf-public .e-stepper .e-step-inprogress .e-indicator,
.tgf-public .e-stepper .e-step-selected .e-indicator {
    background: #B49355;
    color: #2a2016;
}

/* Der aktive Schritt traegt einen Ring aus drei Schatten (weiss / blau / weiss).
   Der mittlere war das letzte Bootstrap-Blau auf der Seite; er faellt bei einer
   Flaeche in Creme ohnehin auf, darum weiss/gold/creme statt weiss/blau/weiss.
   Selektor 1:1 von Syncfusion uebernommen (inkl. :not(.e-steps-focus)), sonst
   gewinnt deren Regel ueber die Spezifitaet. */
.tgf-public .e-stepper:not(.e-steps-focus) .e-step-selected .e-step {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #B49355, 0 0 0 8px rgba(180, 147, 85, .25);
}

.tgf-public .e-stepper .e-step-selected:not(.e-step-error) .e-text,
.tgf-public .e-stepper .e-step-selected:not(.e-step-error) .e-label,
.tgf-public .e-stepper .e-step-completed:not(.e-step-error) .e-text,
.tgf-public .e-stepper .e-step-completed:not(.e-step-error) .e-label {
    color: #2a2016;
}

/* ── Schalter (SfSwitch) ───────────────────────────────────────────────────
   Eingeschaltet golden statt blau. */
.tgf-public .e-switch-wrapper .e-switch-on,
.tgf-public .e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #B49355;
    border-color: #B49355;
}

/* Auch im Hover — Syncfusion hat dafuer EIGENE Regeln mit gleicher
   Spezifitaet wie die obigen; da bootstrap5.css spaeter geladen wird, blieb
   der Schalter unter dem Mauszeiger blau (Reini 06.08.2026, nachgemessen). */
.tgf-public .e-switch-wrapper:hover .e-switch-inner.e-switch-active,
.tgf-public .e-switch-wrapper:hover .e-switch-inner.e-switch-active .e-switch-on {
    background-color: #9c7c43;
    border-color: #9c7c43;
}

/* ── Kaestchen und Auswahlknoepfe (SfCheckBox, SfRadioButton) ──────────────
   Angehakt/gewaehlt golden statt Bootstrap-Blau (Reini 07.08.2026).

   Haken und Punkt dunkel (#2a2016) statt weiss: Weiss auf dem Hausgold kommt
   auf rund 2,4:1 und ist als feine Linie schlecht zu sehen — dieselbe
   Ueberlegung wie bei den goldenen Knoepfen, die ebenfalls dunkle Schrift
   tragen.

   Die Selektoren sind 1:1 von Syncfusion uebernommen und nur um .tgf-public
   erweitert. Das ist noetig, nicht kosmetisch: bootstrap5.css wird NACH dieser
   Datei geladen, bei gleicher Spezifitaet gewaenne also das Blau. SF hat fuer
   Hover, Fokus und Aktiv je eigene Regeln — fehlt eine davon, blitzt das Blau
   genau in dem Zustand wieder auf. (Regeln aus der laufenden Seite ausgelesen,
   nicht geraten.) */
.tgf-public .e-checkbox-wrapper .e-frame.e-check,
.tgf-public .e-checkbox-wrapper:hover .e-frame.e-check,
.tgf-public .e-checkbox-wrapper .e-frame.e-stop,
.tgf-public .e-checkbox-wrapper:hover .e-frame.e-stop {
    background-color: #B49355;
    border-color: #B49355;
    color: #2a2016;
}

.tgf-public .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check,
.tgf-public .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-check,
.tgf-public .e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-stop,
.tgf-public .e-checkbox-wrapper .e-checkbox:active + .e-frame.e-stop {
    background-color: #B49355;
    border-color: #9c7c43;
    box-shadow: 0 0 0 .25rem rgba(180, 147, 85, .25);
}

/* Der Schein um ein noch leeres Kaestchen im Fokus. */
.tgf-public .e-checkbox-wrapper .e-checkbox:focus + .e-frame,
.tgf-public .e-checkbox-wrapper .e-checkbox:active + .e-frame,
.tgf-public .e-checkbox-wrapper:focus .e-frame,
.tgf-public .e-checkbox-wrapper.e-focus .e-frame {
    border-color: #9c7c43;
    box-shadow: 0 0 0 .25rem rgba(180, 147, 85, .25);
}

.tgf-public .e-radio:checked + label::before,
.tgf-public .e-radio:checked:focus + label::before,
.tgf-public .e-radio:checked + label:hover::before {
    background-color: #B49355;
    border-color: #B49355;
}

.tgf-public .e-radio:checked + label::after {
    background-color: #2a2016;
}

.tgf-public .e-radio:focus + label::before,
.tgf-public .e-radio + label:focus::before {
    box-shadow: 0 0 0 .25rem rgba(180, 147, 85, .25);
}

/* ── Eingabefelder: Fokus ──────────────────────────────────────────────────
   Bootstrap-Blau (#86b7fe + blauer Schein) -> goldener Rand mit goldenem
   Schein.

   Die :not()-Kette ist NICHT Zierde: Syncfusion schreibt den Fokus mit
   :not(.e-success):not(.e-warning):not(.e-error). Mit nur einem :not() waere
   die Spezifitaet gleich hoch — und da bootstrap5.css NACH dieser Datei
   geladen wird, gewaenne dann das Blau. Erst die volle Kette schlaegt es
   ladeunabhaengig. (Erst gemessen, dann geschrieben.) */
.tgf-public .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.tgf-public .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.tgf-public .e-input:focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: #B49355;
    box-shadow: 0 0 0 .25rem rgba(180, 147, 85, .25);
}

.tgf-public .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
.tgf-public .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    border-color: #B49355;
}

/* ── Auswahllisten-Popup ───────────────────────────────────────────────────
   Der markierte Eintrag hatte weisse Schrift auf hellem Grau — praktisch
   unlesbar. Neu goldene Flaeche mit dunkler Schrift; ueberfahrener Eintrag
   dezent beige. Popups haengen am <body>, darum OHNE .tgf-public davor. */
.e-popup.e-ddl .e-list-item.e-active,
.e-popup.e-ddl .e-list-item.e-active.e-hover {
    background-color: #B49355;
    color: #2a2016;
}

.e-popup.e-ddl .e-list-item.e-hover {
    background-color: #F5EDDC;
    color: #2a2016;
}

/* ── Knoepfe ───────────────────────────────────────────────────────────────
   Dieselben Klassen wie im Cockpit (tgf-form-btn, tgf-reservieren-btn), aber
   in hellen Toenen — die Cockpit-Regeln in Theme.css haengen an .tgf-intern
   und greifen hier nicht. Reini 06.08.2026: "Die Reservieren-Buttons duerften
   wie im Cockpit golden sein." */
.tgf-public .tgf-form-btn.e-btn {
    padding: .375rem 1rem;
    /* 17px wie die Grundschrift der Website — 1rem waeren 16px und damit eine
       Spur kleiner als alles daneben (Reini 06.08.2026). */
    font-size: 1.0625rem;
    line-height: 1.5;
    border-radius: .375rem;
    box-shadow: none;
    text-transform: none;
}

/* Gold mit WEISSER Schrift (Reini 10.08.2026: "der aktive Goldknopf mit dem dunklen
   Schriftzug sieht irgendwie wie deaktiviert aus"). Er hat recht — dunkle Schrift auf
   gedaempftem Grund ist genau das Muster, an dem man einen gesperrten Knopf erkennt.

   Dafuer musste das Gold eine Stufe dunkler: Weiss auf #B49355 traegt nur 2.9:1 und
   waere schlechter lesbar als vorher, nicht besser. #8a6d3b traegt 4.9:1 und erfuellt
   damit die uebliche Schwelle von 4.5:1 fuer Fliesstextgroesse. Der Ton ist keine
   Erfindung — er steht auf der Website schon an anderen Stellen (Zaehler, Nebenzeilen
   in der Auffuehrungsauswahl).

   Der gesperrte Knopf bleibt unveraendert (flaches Beige) und hebt sich vom dunkleren
   Gold jetzt sogar staerker ab als vorher. */
.tgf-public .tgf-form-btn--primaer.e-btn {
    background: #B49355;
    border-color: #B49355;
    color: #fff;
    /* Kraeftiger als der Fliesstext der Website (Reini 10.08.2026). Der laeuft in
       Roboto Light 300; eine helle 300er-Schrift auf farbigem Grund wirkt duenn und
       verliert an den Raendern. 400 steht satt, ohne fett zu werden. Gilt NUR fuer
       den gefuellten Knopf - die uebrigen bleiben bei der Umgebungsschrift. */
    font-weight: 400;
}

.tgf-public .tgf-form-btn--primaer.e-btn:hover:not(:disabled),
.tgf-public .tgf-form-btn--primaer.e-btn:focus:not(:disabled),
.tgf-public .tgf-form-btn--primaer.e-btn:active:not(:disabled) {
    background: #9c7c43;
    border-color: #9c7c43;
    color: #fff;
}

.tgf-public .tgf-form-btn--sekundaer.e-btn {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.tgf-public .tgf-form-btn--sekundaer.e-btn:hover:not(:disabled),
.tgf-public .tgf-form-btn--sekundaer.e-btn:focus:not(:disabled),
.tgf-public .tgf-form-btn--sekundaer.e-btn:active:not(:disabled) {
    background: #5c636a;
    border-color: #565e64;
    color: #fff;
}

/* Deaktiviert: klar als "geht nicht" lesbar, in hellen Toenen (das Cockpit
   nutzt dieselbe Idee mit dunklen).

   Reini 07.08.2026: "in diesem deaktivierten Zustand noch zu unscheinbar, man
   sieht ihn nicht gross." Stimmte — das Bootstrap-Grau (#e9ecef) lag nur
   Nuancen neben dem Creme der Seite und der Knopf verschwand darin. Jetzt ein
   gedaempfter Goldton: sichtbar als Knopf, aber deutlich blasser als das
   aktive Gold (#B49355) daneben, dazu not-allowed als Zeiger. */
.tgf-public .tgf-form-btn.e-btn:disabled,
.tgf-public .tgf-form-btn.e-btn.e-disabled {
    background: #e0d3b4 !important;
    border-color: #c2ab7f !important;
    color: #6f6047 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* "Reservieren" je Zeile — seit 06.08.2026 auch oeffentlich ein SfButton mit
   denselben Klassen wie im Cockpit (Reini wollte es technisch einheitlich).

   Unterschied zum Cockpit ist NUR die Optik: dort ein goldener Umriss, hier
   gefuellt. Auf dem Creme-Grund war der blosse Umriss zu unscheinbar, und der
   Knopf ist auf der Website der Handlungsaufruf schlechthin. */
.tgf-public .tgf-reservieren-btn.e-btn {
    padding: .25rem .65rem;
    font-size: .8rem;
    line-height: 1.5;
    border-radius: .35rem;
    box-shadow: none;
    text-transform: none;
    /* Gold, weisse Schrift und Gewicht 400 wie beim Primaer-Knopf — Begruendung dort. */
    background: #B49355;
    border-color: #B49355;
    color: #fff;
    font-weight: 400;
}

.tgf-public .tgf-reservieren-btn.e-btn:hover:not(:disabled),
.tgf-public .tgf-reservieren-btn.e-btn:focus:not(:disabled),
.tgf-public .tgf-reservieren-btn.e-btn:active:not(:disabled) {
    background: #9c7c43;
    border-color: #9c7c43;
    color: #fff;
}

/* Ausverkauft/Abgesagt: grauer Umriss, gedaempft — kein Handlungsaufruf.
   !important, weil die Deaktiviert-Regel von Syncfusion sonst gewinnt. */
.tgf-public .tgf-reservieren-btn--gedimmt.e-btn,
.tgf-public .tgf-reservieren-btn--gedimmt.e-btn:disabled,
.tgf-public .tgf-reservieren-btn--gedimmt.e-btn.e-disabled {
    background: transparent !important;
    border-color: #adb5bd !important;
    color: #6c757d !important;
    opacity: 1 !important;
    cursor: not-allowed;
}


/* ── Sitzplan auf hellem Grund ─────────────────────────────────────────────
   Der Sitzplan wird von SitzplanSvgRenderer erzeugt und bringt fuers Cockpit
   einen dunklen Grund samt dunklem Rahmen als INLINE-Stil am <svg> mit
   (background:#1a1d21; border:1px solid #495057). Auf der Creme-Seite stoert
   der schwarze Kasten (Reini 06.08.2026).

   Inline-Stile lassen sich nur mit !important ueberschreiben — deshalb hier,
   und nicht etwa aus Bequemlichkeit.

   Nur der Grund faellt weg: Sitze, Tische und Buehne behalten ihre Farben.
   Deren Schrift steht jeweils auf der eigenen Flaeche, nicht auf dem Grund,
   bleibt also lesbar. Gilt fuer den Auswahlplan wie fuer die kleine Vorschau
   in der aufgeklappten Zeile. */
.tgf-public .tgf-sitzplan-picker-svg svg,
.tgf-public .tgf-aa-plan svg {
    background: transparent !important;
    border: 0 !important;
}


/* ── Sitzplan-Rahmen auf hellem Grund ──────────────────────────────────────
   TgfSitzplanRahmen (geteilte Komponente) bringt die Cockpit-Toene mit:
   dunkler Rahmen, dunkle Werkzeugknoepfe, helle Schrift. Auf der Website
   dieselbe Bauweise, aber helle Toene — die Komponente selbst bleibt
   unangetastet, damit das Cockpit unveraendert ist (Reini 06.08.2026).

   Die Regeln stehen in der Komponente als <style> im Markup, sind also
   gleich spezifisch wie diese hier; .tgf-public gibt den Ausschlag. */
.tgf-public .tgf-splan-rahmen {
    border-color: #d9c9a8;
}

.tgf-public .tgf-splan-toolbtn,
.tgf-public .tgf-splan-wippe {
    background: #fff;
    border-color: #d9c9a8;
    color: #6b5a3e;
}

.tgf-public .tgf-splan-wippe button {
    color: #6b5a3e;
}

.tgf-public .tgf-splan-wippe button:first-child {
    border-bottom-color: #e6dcc6;
}

.tgf-public .tgf-splan-toolbtn:hover:not(:disabled),
.tgf-public .tgf-splan-wippe button:hover {
    border-color: #B49355;
    color: #8a6d3b;
    background: #F5EDDC;
}

.tgf-public .tgf-splan-toolbtn.aktiv {
    background: rgba(180, 147, 85, .16);
    border-color: #B49355;
    color: #8a6d3b;
}

.tgf-public .tgf-splan-zoom-wert {
    color: #6b5a3e;
}

.tgf-public .tgf-splan-legende {
    color: #6b5a3e;
}

/* Rollstuhl-Ring: im Cockpit weiss auf dunklem Plan, hier dunkel auf hellem. */
.tgf-public .tgf-splan-rahmen.rollstuhl-hervorheben .sitz[data-rollstuhl="1"]:not(.selected):not(.conflict):not(.eigen) .tgf-sitz-rect {
    stroke: #2a2016;
}

.tgf-public .tgf-sitz-auswahl .leg-wc {
    box-shadow: 0 0 0 2px #2a2016;
}

@media (max-width: 575.98px) {
    .tgf-public .tgf-splan-wippe button:first-child {
        border-right-color: #e6dcc6;
    }
}


/* ── Sitzplan: helle Flaeche, aufgehellte Buehne und Tische ────────────────
   Reini 06.08.2026: "Buehne und Tische sind grad etwas gar dunkel hier.
   Koennten wir den Sitzplan hier ganz leicht grau hinterlegen?"

   Die Farben kommen als Attribute aus SitzplanSvgRenderer (Cockpit-Toene).
   CSS schlaegt SVG-Praesentationsattribute, darum genuegen die Klassen
   tgf-buehne / tgf-tisch — der Renderer bleibt unveraendert, Cockpit und
   Druck sehen aus wie bisher. */
/* Flaeche wie die "Mehr zum Thema"-Box auf der Website (Reini 06.08.2026):
   dieselbe Gold-Toenung, nicht ein neutrales Grau — das wirkte neben dem
   warmen Creme blaeulich und fremd. Wert bewusst identisch zu
   .topic-box--pane .tgf2027-module in Theme.css. */
.tgf-public .tgf-splan-rahmen {
    background: rgba(180, 147, 85, .14);
}

/* Buehne und Tische in warmen Toenen — ein kuehles Grau fiele auf der
   Goldtoenung genauso auf wie vorher das Blau. Die Tische bleiben deutlich
   sichtbar (als Moebel), ohne die schwersten Elemente im Plan zu sein. */
.tgf-public .tgf-buehne {
    fill: #8d8271;
}

.tgf-public .tgf-buehne-text {
    fill: #fff;
}

.tgf-public .tgf-tisch {
    fill: #bcb098;
    stroke: #9c8f76;
}

.tgf-public .tgf-tisch-text {
    fill: #5a4f40;
}

/* Werkzeuge kraeftiger: auf der hellen Flaeche gingen die zarten Raender unter. */
.tgf-public .tgf-splan-toolbtn,
.tgf-public .tgf-splan-wippe {
    border-color: #B49355;
    color: #2a2016;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.tgf-public .tgf-splan-wippe button {
    color: #2a2016;
}

.tgf-public .tgf-splan-wippe button:first-child {
    border-bottom-color: #d9c9a8;
}

.tgf-public .tgf-splan-zoom-wert {
    color: #2a2016;
}


/* ── Gewaehlter Sitz ───────────────────────────────────────────────────────
   Der Picker markiert die Auswahl mit einem gelben Ring (#ffc107) um den
   blauen Sitz. Auf dem dunklen Cockpit-Plan leuchtet das; auf der hellen
   Flaeche geht es unter (Reini 06.08.2026).

   Oeffentlich darum nicht nur ein Ring, sondern eine andere FARBE: gewaehlte
   Sitze in Hausgold mit dunklem Rand und dunkler Beschriftung. Verwechseln
   kann man das mit nichts — frei ist blau, belegt ist blau und blass. */
.tgf-public .tgf-sitzplan-picker .sitz.selected .tgf-sitz-rect {
    fill: #B49355;
    stroke: #2a2016;
    stroke-width: 2.5;
}

.tgf-public .tgf-sitzplan-picker .sitz.selected .tgf-sitz-text {
    fill: #2a2016;
}


/* ── Reservationsbestimmungen ohne Einzug ──────────────────────────────────
   Reini 06.08.2026, wie im Cockpit (Theme.Intern.css, 27.07.): die Liste soll
   buendig unter dem Titel stehen statt um die ul-Default-Einrueckung (2rem)
   versetzt. Marker per ::before an den linken Rand, Text mit haengendem
   Einzug → Folgezeilen fluchten unter der ersten. Nur fuer ul; eine
   allfaellige nummerierte Liste aus der Datenbank behaelt ihre Zaehlung. */
.tgf-public .tgf-reservationsbestimmungen ul {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.tgf-public .tgf-reservationsbestimmungen ul > li {
    position: relative;
    padding-left: 1rem;
}

.tgf-public .tgf-reservationsbestimmungen ul > li::before {
    content: "\2022";
    position: absolute;
    left: 0;
}