/* ==========================================================================
   Final Escape – Belbo Booking Widget Styles
   --------------------------------------------------------------------------
   Datei:     wp-content/themes/Final Escape_child_hello/belbo_style.css
   Geladen:   functions.php → fe_belbo_enqueue_styles()
              (nur auf Seiten mit Belbo-Widget, im Footer, damit diese Datei
              NACH den von Belbo per JS injizierten Styles greift)
   Gilt für:  alle Standorte (Multisite), Preise-&-Buchung- und Spiel-Seiten

   Regeln für die Pflege:
   - Keine Vue-Hash-Selektoren wie [data-v-620b7ff3] verwenden! Belbo erzeugt
     die Hashes bei jedem Release neu, dann greift die Regel stillschweigend
     nicht mehr. Immer über Klassen (.widget, .day, .bookingButton …) gehen.
   - Alles Widget-bezogene steht hinter "B" = :where(.belboBookingElement,
     .belboSingleBookingElement). :where() erhöht die Spezifität NICHT, d. h.
     die Regeln verhalten sich wie vorher, wirken aber nur noch im Widget.
   - Standort-spezifisches (Badges) läuft über die Body-Klasse .site-id-X
     (siehe Abschnitt 9).
   - Farben nur über die Variablen in Abschnitt 1 ändern.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Variablen
   Auf body (nicht :root), weil Elementor die globalen Farben
   --e-global-color-* auf body.elementor-kit-X definiert.
   -------------------------------------------------------------------------- */
body {
    --fe-belbo-primary:      var(--e-global-color-primary);    /* Petrol   */
    --fe-belbo-secondary:    var(--e-global-color-secondary);  /* Pink/Rot */
    --fe-belbo-text:         var(--e-global-color-text);
    --fe-belbo-light:        var(--e-global-color-584af85);    /* helles Grau */
    --fe-belbo-weekend:      #E6F4F1;   /* Wochenende (Sa/So) */
    --fe-belbo-border:       #eee;
    --fe-belbo-border-hover: #B9B9B9;
    --fe-belbo-slot-border:  #f2f2f2;
    --fe-belbo-disabled:     #A0B5B8;
    --fe-belbo-past-text:    #17122e;
    --fe-belbo-transition:   0.4s ease;
}


/* --------------------------------------------------------------------------
   2. Basis: Schrift
   "Montserat FE" kommt aus den Elementor Custom Fonts – hier kein @font-face.
   -------------------------------------------------------------------------- */
.belboBookingElement *,
.belboSingleBookingElement * {
    font-family: 'Montserat FE', sans-serif !important;
}


/* --------------------------------------------------------------------------
   3. Modal (Personenauswahl / Preis)
   -------------------------------------------------------------------------- */
:where(.belboBookingElement, .belboSingleBookingElement) .overlay {
    position: relative;
    width: 100vw !important;
    backdrop-filter: brightness(0.5) blur(4px) !important;
    -webkit-backdrop-filter: brightness(0.5) blur(4px) !important;
    transition: backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal-container {
    position: relative;
    max-width: 98% !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal {
    border-radius: 0 !important;
    user-select: none;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal ul {
    gap: 0.8em !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal ul li {
    padding: 0.6em 1em !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal > div > p {
    margin-bottom: 20px;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal ul > li > span {
    display: flex;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal > .full-flex {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end !important;
    justify-content: end !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .modal > .full-flex > div {
    display: none !important;
    height: 20px;
    margin: 0 20px 40px 0;
    width: 100%;
    text-align: right;
}

/* Preiszeile + "inkl. MwSt." */
:where(.belboBookingElement, .belboSingleBookingElement) div.full-flex > div > span {
    color: var(--fe-belbo-text) !important;
    font-size: 18px !important;
    font-weight: 600;
    transition: color var(--fe-belbo-transition);
}

:where(.belboBookingElement, .belboSingleBookingElement) div.full-flex > div > span::after {
    content: "\A inkl. MwSt.";
    font-weight: normal;
    font-size: 14px;
    display: flex;
    justify-content: end;
    line-height: 1;
}

/* Personen-Optionen im Modal */
:where(.belboBookingElement, .belboSingleBookingElement) ul li.full-flex {
    border-radius: 0 !important;
    transition: background var(--fe-belbo-transition), border var(--fe-belbo-transition), color var(--fe-belbo-transition);
}

:where(.belboBookingElement, .belboSingleBookingElement) ul li.full-flex:hover {
    border: 1px solid transparent !important;
    background-color: var(--fe-belbo-secondary) !important;
    color: white !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) ul li.full-flex p {
    color: var(--fe-belbo-text) !important;
    transition: color var(--fe-belbo-transition);
    margin-block-end: 0 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) ul li.full-flex:hover p,
:where(.belboBookingElement, .belboSingleBookingElement) ul li.active p {
    color: white !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) ul li.active {
    border: 1px solid transparent !important;
    background-color: var(--fe-belbo-primary) !important;
    color: white !important;
}


/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
:where(.belboBookingElement, .belboSingleBookingElement) .bookingButton {
    background-color: var(--fe-belbo-primary) !important;
    border-radius: 0 !important;
    padding: 0.6em 1em !important;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition);
}

:where(.belboBookingElement, .belboSingleBookingElement) .bookingButton:hover {
    background-color: var(--fe-belbo-secondary) !important;
    color: #fff !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .disabled.bookingButton,
:where(.belboBookingElement, .belboSingleBookingElement) .disabled.bookingButton:hover {
    background: var(--fe-belbo-disabled) !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .disabled.bookingButton {
    cursor: default !important;
    pointer-events: none;
}

/* "Zurück"-Button */
:where(.belboBookingElement, .belboSingleBookingElement) .closeButton {
    position: absolute;
    bottom: 64px;
    left: 64px;
    z-index: 999;
    background-color: var(--fe-belbo-primary) !important;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition);
    border-radius: 0 !important;
    padding: 0.8em 1em !important;
    line-height: 1 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .closeButton:hover {
    background-color: var(--fe-belbo-secondary) !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .closeButton .icon {
    display: none !important;
    height: 20px !important;
    width: 20px !important;
}


/* --------------------------------------------------------------------------
   5. Kalender-Box (linke Spalte)
   -------------------------------------------------------------------------- */
:where(.belboBookingElement, .belboSingleBookingElement) .widget {
    height: max-content !important;
    border-radius: 0 !important;
    border: 1px solid var(--fe-belbo-border);
    user-select: none;
    transition: background-color 0.6s ease, border 0.6s ease;
    position: sticky;
    top: 200px;
    margin: 0 !important;
    padding: 16px !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget:hover {
    border: 1px solid var(--fe-belbo-border-hover);
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget > h1 {
    font-size: 1rem !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .month-toggle {
    padding: 1em 0 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) table {
    table-layout: fixed;
}

:where(.belboBookingElement, .belboSingleBookingElement) td,
:where(.belboBookingElement, .belboSingleBookingElement) th {
    padding: 0 !important;
    border: 4px solid white !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) table .day {
    height: 31px !important;
    font-size: 0.9375rem !important;
}

/* Tage im aktuellen Monat */
:where(.belboBookingElement, .belboSingleBookingElement) .day.dayIsCurrentMonth {
    background: var(--fe-belbo-light) !important;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition);
    pointer-events: auto;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day.dayIsCurrentMonth:hover {
    background: var(--fe-belbo-secondary) !important;
    color: #fff !important;
    border-radius: 0 !important;
    pointer-events: auto;
}

/* Wochenende (Sa/So = die letzten beiden Spalten) */
:where(.belboBookingElement, .belboSingleBookingElement) tr td:nth-last-child(-n+2) .day.dayIsCurrentMonth:not(.currentSelection) {
    background-color: var(--fe-belbo-weekend) !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) tr td:nth-last-child(-n+2):hover .day.dayIsCurrentMonth:not(.currentSelection):not(.past) {
    background-color: var(--fe-belbo-secondary) !important;
}

/* Vergangene Tage */
:where(.belboBookingElement, .belboSingleBookingElement) .past.day.dayIsCurrentMonth {
    opacity: 0.3 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .past.day.dayIsCurrentMonth:hover {
    background: var(--fe-belbo-light) !important;
    color: var(--fe-belbo-past-text);
    pointer-events: none;
}

/* Ausgewählter Tag */
:where(.belboBookingElement, .belboSingleBookingElement) .day.currentSelection {
    background: var(--fe-belbo-primary) !important;
    color: white !important;
    border-radius: 0 !important;
    pointer-events: none;
}


/* 5b. Spiel-Seiten: Dort sitzt der Kalender INNERHALB der Spiel-Kachel
       (.widget-content), die bereits Rahmen + 16px Innenabstand hat.
       Daher hier ohne eigenen Rahmen/Padding, damit er genauso aussieht
       wie der Kalender auf der Seite Preise & Buchung. */
:where(.belboBookingElement, .belboSingleBookingElement) .widget-content .widget,
:where(.belboBookingElement, .belboSingleBookingElement) .widget-content .widget:hover {
    border: none !important;
    padding: 0 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-content .widget > h3 {
    margin: 0;
}


/* --------------------------------------------------------------------------
   6. Spiele-Grid (Kacheln)
   -------------------------------------------------------------------------- */
:where(.belboBookingElement, .belboSingleBookingElement) .game-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
}

/* Hover: alle Kacheln dimmen, aktive bleibt voll sichtbar */
:where(.belboBookingElement, .belboSingleBookingElement) .game-grid:hover .widget-container {
    opacity: 0.5;
}

:where(.belboBookingElement, .belboSingleBookingElement) .game-grid:hover .widget-container:hover {
    opacity: 1;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-container {
    border: 1px solid var(--fe-belbo-border);
    border-radius: 0 !important;
    user-select: none;
    transition: opacity 1.2s ease, background-color 0.6s ease, border 0.6s ease;
    opacity: 1;
    overflow-x: auto !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-container:hover {
    border: 1px solid var(--fe-belbo-border-hover);
}

/* Kachel-Header mit Bild */
:where(.belboBookingElement, .belboSingleBookingElement) .widget-header {
    position: relative;
    overflow: hidden; /* verhindert, dass der Zoom übersteht */
    height: 240px !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-header::before {
    content: "" !important;
    position: absolute;
    background-image: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    transition: transform 1.2s ease;
    z-index: 0 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    transition: background-color 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-container:hover .widget-header::before {
    transform: scale(1.06);
    background-color: rgba(0, 0, 0, 0.4);
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-header > * {
    position: relative;
    z-index: 1; /* Text und Inhalte nach vorne holen */
}

/* Spieltitel */
:where(.belboBookingElement, .belboSingleBookingElement) .widget-header h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    color: white;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-container h2 {
    transition: transform 1.2s ease;
    backdrop-filter: blur(10px);
    font-size: 18px !important;
    line-height: 16px !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-container:hover h2 {
    transform: scale(1.05);
}

/* Info-Pills (Personen / Dauer) */
:where(.belboBookingElement, .belboSingleBookingElement) .ufo-game-overview {
    font-size: 11px !important;
    border-radius: 8px !important;
    user-select: none;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition);
    padding: 4px 8px !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .ufo-game-overview span:nth-child(1):hover > span {
    transform: rotateY(360deg);
    transition: transform 1.4s linear;
}

:where(.belboBookingElement, .belboSingleBookingElement) .ufo-game-overview span:nth-child(2):hover > span {
    transform: rotate(360deg);
    transition: transform 1.4s linear;
}

/* Leere Tag-Zeile (Belbo liefert nur ein  ) ausblenden.
   Die Labels oben rechts (z. B. "HORROR") sind .categories und bleiben sichtbar. */
:where(.belboBookingElement, .belboSingleBookingElement) .tags {
    display: none !important;
}
:where(.belboBookingElement, .belboSingleBookingElement) .widget-header > h3 {
margin-bottom: 8px;
}

/* Kachel-Inhalt (Uhrzeiten) */
:where(.belboBookingElement, .belboSingleBookingElement) .widget-content,
:where(.belboBookingElement, .belboSingleBookingElement) .widget-container .widget-content {
    background-color: #fff;
    min-height: 6px;
}


/* --------------------------------------------------------------------------
   7. Uhrzeit-Slots
   -------------------------------------------------------------------------- */
/* 7a. Slots in den Kacheln (Preise & Buchung) */
:where(.belboBookingElement, .belboSingleBookingElement) .widget-content > div > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)) !important;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-content > div > ul li {
    padding: 0.6em 1em !important;
    text-align: center;
    box-sizing: border-box;
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-content > div > ul li.available {
    background-color: var(--fe-belbo-light) !important;
    line-height: 1.5 !important;
    color: var(--fe-belbo-text) !important;
    border-radius: 0 !important;
    border: 1px solid var(--fe-belbo-slot-border) !important;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition), border var(--fe-belbo-transition);
}

:where(.belboBookingElement, .belboSingleBookingElement) .widget-content > div > ul li.available:hover {
    border: 1px solid var(--fe-belbo-secondary) !important;
    background: var(--fe-belbo-secondary) !important;
    color: #fff !important;
    cursor: pointer;
}

/* Ausgebuchte Slots */
:where(.belboBookingElement, .belboSingleBookingElement) li.grey {
    line-height: 1.5 !important;
    border-radius: 0 !important;
    border: 1px solid #e4e4e4 !important;
    color: var(--fe-belbo-text) !important;
    background-color: var(--fe-belbo-light) !important;
    text-decoration: line-through;
    user-select: none;
    pointer-events: none;
    opacity: 0.3 !important;
}

/* 7b. Tagesliste (Spiel-Seiten: Wochenansicht mit Uhrzeiten je Tag) */
:where(.belboBookingElement, .belboSingleBookingElement) .day {
    flex: 1 1 0;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day-header {
    font-size: 0.9375rem !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day .day-header {
    border: none !important;
    padding-bottom: 0 !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day .day-button {
    color: var(--fe-belbo-text) !important;
    background-color: white;
    border-radius: 0 !important;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition);
    padding: 0.5em !important;
    margin: 8px 4px;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day:hover .day-button,
:where(.belboBookingElement, .belboSingleBookingElement) .belbo-weekend:hover > .day-header > .day-button {
    color: white !important;
    background-color: var(--fe-belbo-secondary) !important;
    border-radius: 0 !important;
    margin: 8px 4px;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day-header:hover ~ .day-datelist div.available {
    color: white !important;
    background-color: var(--fe-belbo-secondary) !important;
    border-radius: 0 !important;
    border: 1px solid var(--fe-belbo-secondary) !important;
    transition: background-color 0.3s, color 0.3s;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day .day-datelist div.available {
    color: var(--fe-belbo-text) !important;
    background-color: var(--fe-belbo-light) !important;
    border-radius: 0 !important;
    border: 1px solid var(--fe-belbo-slot-border) !important;
    margin: 8px 4px;
    transition: background var(--fe-belbo-transition), color var(--fe-belbo-transition);
}

:where(.belboBookingElement, .belboSingleBookingElement) .day .day-datelist div.available:hover {
    color: white !important;
    background-color: var(--fe-belbo-secondary) !important;
    border-radius: 0 !important;
    border: 1px solid var(--fe-belbo-secondary) !important;
    margin: 8px 4px;
}

:where(.belboBookingElement, .belboSingleBookingElement) .day-datelist div:not(.available) {
    color: var(--fe-belbo-text) !important;
    text-decoration: line-through;
    user-select: none;
    pointer-events: none;
    background-color: var(--fe-belbo-light) !important;
    border-radius: 0 !important;
    border: 1px solid var(--fe-belbo-slot-border) !important;
    margin: 8px 4px;
    opacity: 0.3 !important;
}

/* Wochenende in der Tagesliste – Klasse .belbo-weekend setzt belbo-weekend.js */
:where(.belboBookingElement, .belboSingleBookingElement) .belbo-weekend > .day-header > .day-button,
:where(.belboBookingElement, .belboSingleBookingElement) .belbo-weekend > .day-datelist > div.available,
:where(.belboBookingElement, .belboSingleBookingElement) .belbo-weekend > .day-datelist > div.unknown {
    background-color: var(--fe-belbo-weekend) !important;
}


/* --------------------------------------------------------------------------
   8. Warenkorb (Seitenleiste rechts)
   -------------------------------------------------------------------------- */

/* Belbo färbt Warenkorb, ausgewählte Slots usw. mit --belbo-primary
   (Standard: Belbo-Lila #827AE5) → hier zentral auf Final-Escape-Petrol. */
:where(.belboBookingElement, .belboSingleBookingElement) {
    --belbo-primary: var(--fe-belbo-primary);
}

/* Überall eckig – außer Schließen-Pfeil (›) und Entfernen-Kreis (×) */
.cart-panel *:not(.cart-collapse):not(.cart-item-remove),
.cart-tab {
    border-radius: 0 !important;
}

.cart-tab,
.cart-items li {
    transition: padding 0.6s ease !important, background-color 0.6s ease !important;
}

/* Buttons */
.cart-checkout {
    box-shadow: none !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    font-size: 18px !important;
    transition: background-color 0.6s ease;
}

.cart-continue {
    transition: background-color 0.6s ease;
}

/* Hover nur, wenn der Button auch klickbar ist
   ("Jetzt buchen" ist deaktiviert, solange keine Gruppengröße gewählt ist) */
.cart-checkout:not(:disabled):hover,
.cart-continue:hover,
.cart-tab:hover {
    color: white !important;
    background-color: var(--fe-belbo-secondary) !important;
}

.cart-continue:hover {
    border: 1px solid var(--fe-belbo-secondary) !important;
}

.cart-checkout:disabled {
    cursor: default !important;
    transform: none !important;
}

/* Gruppengröße im Warenkorb (v. a. mobil): Liste ohne Radio-Kreise,
   Hover rot, Auswahl petrol – wie die Personenauswahl im Desktop-Modal */
.cart-item-dependencies .cart-radio {
    display: none !important;
}

.cart-items .cart-item-dependencies li {
    cursor: pointer;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease !important;
}

.cart-items .cart-item-dependencies li:hover,
.cart-items .cart-item-dependencies li:focus-visible {
    background-color: var(--fe-belbo-secondary) !important;
    border-color: var(--fe-belbo-secondary) !important;
    outline: none;
}

.cart-items .cart-item-dependencies li[aria-checked="true"] {
    background-color: var(--fe-belbo-primary) !important;
    border-color: var(--fe-belbo-primary) !important;
}

.cart-items .cart-item-dependencies li:hover,
.cart-items .cart-item-dependencies li:hover *,
.cart-items .cart-item-dependencies li:focus-visible *,
.cart-items .cart-item-dependencies li[aria-checked="true"],
.cart-items .cart-item-dependencies li[aria-checked="true"] * {
    color: white !important;
    transition: color 0.4s ease;
}

li.selected,
.primary-gradient {
    border-radius: 0 !important;
}

/* Hinweis-Modal "Tag wechseln" (erscheint, wenn mit gefülltem Warenkorb
   ein anderer Tag gewählt wird) */
:where(.belboBookingElement, .belboSingleBookingElement) .warning-modal {
    border-radius: 0 !important;
    padding: 32px !important;
    gap: 24px !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .warning-modal p {
    color: var(--fe-belbo-text) !important;
    font-size: 15px !important;
    line-height: 1.5;
}

:where(.belboBookingElement, .belboSingleBookingElement) .warning-actions button {
    border-radius: 0 !important;
    font-size: 16px !important;
    padding: 0.6em 1em !important;
    border: 1px solid var(--fe-belbo-primary) !important;
    transition: background-color var(--fe-belbo-transition), border-color var(--fe-belbo-transition), color var(--fe-belbo-transition);
}

/* Abbrechen: Rahmen-Button (wie "+ Weiteres Spiel hinzufügen") */
:where(.belboBookingElement, .belboSingleBookingElement) .warning-cancel {
    background: transparent !important;
    color: var(--fe-belbo-primary) !important;
}

/* Tag wechseln: gefüllter Button (wie "Jetzt buchen") */
:where(.belboBookingElement, .belboSingleBookingElement) .warning-confirm {
    background: var(--fe-belbo-primary) !important;
    color: #fff !important;
}

:where(.belboBookingElement, .belboSingleBookingElement) .warning-actions button:hover {
    background: var(--fe-belbo-secondary) !important;
    border-color: var(--fe-belbo-secondary) !important;
    color: #fff !important;
}


/* --------------------------------------------------------------------------
   9. Badges auf den Spiel-Kacheln (pro Standort)
   --------------------------------------------------------------------------
   Das Aussehen ist einmal zentral definiert (9a). Pro Standort wird nur noch
   festgelegt, WELCHE Kachel (Position 1, 2, 3 … im Grid) WELCHEN Text bekommt.

   Site-IDs:  2 = Berlin   3 = Kiel     4 = Lübeck   5 = Flensburg
              6 = Bremen   9 = Erfurt   10 = Rostock

   Beispiel neues Badge "Neu" auf der 3. Kachel in Rostock:
     .site-id-10 .game-grid .widget-container:nth-of-type(3)::after { content: "Neu"; }
   Englische Variante zusätzlich mit html[lang^="en"] davor.
   Längerer Text → zusätzlich "width: 140px;" setzen.
   -------------------------------------------------------------------------- */

/* 9a. Badge-Design (Eckband oben links). Ohne "content" wird nichts angezeigt. */
:where(.belboBookingElement) .game-grid .widget-container::after {
    --f: 0.4em;
    position: absolute;
    z-index: 10;
    width: 114px;
    padding-inline: 1.8em;
    padding-bottom: var(--f);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--fe-belbo-secondary) !important;
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(
        100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)),
        var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)),
        999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    pointer-events: none;
}

/* 9b. Berlin (site-id-2) */
html[lang^="de"] .site-id-2 .game-grid .widget-container:nth-of-type(1)::after { content: "Klassiker"; }
html[lang^="en"] .site-id-2 .game-grid .widget-container:nth-of-type(1)::after { content: "Classic"; }
.site-id-2 .game-grid .widget-container:nth-of-type(2)::after                  { content: "Actor"; }

/* 9c. Weitere Standorte – VORBEREITET, ABER DEAKTIVIERT.
   Diese Badges waren in den alten Style-Blöcken der Standorte hinterlegt,
   wurden dort aber wegen eines veralteten Vue-Hashes schon länger NICHT mehr
   angezeigt. Zum Aktivieren den jeweiligen Block auskommentieren und prüfen,
   ob die Position (nth-of-type) noch zum aktuellen Spiel passt.

Kiel (site-id-3)
html[lang^="de"] .site-id-3 .game-grid .widget-container:nth-of-type(1)::after { content: "Neu"; }
html[lang^="en"] .site-id-3 .game-grid .widget-container:nth-of-type(1)::after { content: "New"; }
html[lang^="de"] .site-id-3 .game-grid .widget-container:nth-of-type(2)::after { content: "Neu"; }
html[lang^="en"] .site-id-3 .game-grid .widget-container:nth-of-type(2)::after { content: "New"; }
html[lang^="de"] .site-id-3 .game-grid .widget-container:nth-of-type(4)::after { content: "Große Gruppe"; width: 140px; }
html[lang^="en"] .site-id-3 .game-grid .widget-container:nth-of-type(4)::after { content: "Big group"; width: 140px; }
.site-id-3 .game-grid .widget-container:nth-of-type(5)::after                  { content: "Actor"; }

Lübeck (site-id-4)
html[lang^="de"] .site-id-4 .game-grid .widget-container:nth-of-type(1)::after { content: "Klassiker"; }
html[lang^="en"] .site-id-4 .game-grid .widget-container:nth-of-type(1)::after { content: "Classic"; }
.site-id-4 .game-grid .widget-container:nth-of-type(2)::after                  { content: "Actor"; }

Flensburg (site-id-5)
html[lang^="de"] .site-id-5 .game-grid .widget-container:nth-of-type(4)::after { content: "Neu"; }
html[lang^="en"] .site-id-5 .game-grid .widget-container:nth-of-type(4)::after { content: "New"; }

Bremen (site-id-6)
.site-id-6 .game-grid .widget-container:nth-of-type(1)::after                  { content: "90 Min"; }

Erfurt (site-id-9)
html[lang^="de"] .site-id-9 .game-grid .widget-container:nth-of-type(1)::after,
html[lang^="de"] .site-id-9 .game-grid .widget-container:nth-of-type(2)::after { content: "Neu"; }
html[lang^="en"] .site-id-9 .game-grid .widget-container:nth-of-type(1)::after,
html[lang^="en"] .site-id-9 .game-grid .widget-container:nth-of-type(2)::after { content: "New"; }
.site-id-9 .game-grid .widget-container:nth-of-type(5)::after                  { content: "Actor"; }

Rostock (site-id-10): keine Badges
*/


/* --------------------------------------------------------------------------
   10. Mobile (bis 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    :where(.belboBookingElement, .belboSingleBookingElement) .closeButton {
        bottom: 36px !important;
        left: 36px !important;
    }

    :where(.belboBookingElement, .belboSingleBookingElement) .modal-container {
        flex: 1 !important;
        padding: 20px !important;
    }

    :where(.belboBookingElement, .belboSingleBookingElement) .modal {
        padding: 1em !important;
    }

    :where(.belboBookingElement, .belboSingleBookingElement) .widget {
        border: none !important;
    }

    :where(.belboBookingElement, .belboSingleBookingElement) .day-list {
        display: grid !important;
        grid-template-columns: repeat(7, 113px);
    }

    :where(.belboBookingElement, .belboSingleBookingElement) .game-grid {
        min-height: 600px !important;
    }

    /* Hinweis: Im alten Code standen hier zusätzlich
       .modal-container { max-width: 100% }, .widget { padding: 24px 12px } und
       .game-grid { 1 Spalte }. Diese Werte wurden aber von den Desktop-Regeln
       überschrieben und waren nie aktiv – deshalb entfernt, damit der Look
       identisch bleibt. Bei Bedarf hier wieder ergänzen. */
}