/* MindfulDates Auslastungsanzeige: Eck-Bänder über dem Kachelbild + Warteliste */
.mec-event-grid-classic .mec-event-article { position: relative; }

/* Schlichte Banner, die links um die Bildkante geklappt sind: 10 px Überhang,
   darunter der dunklere Falz (::before). Rechts rund, sonst plain — keine Verläufe, kein Einschnitt.
   Farbe trennt die Geschlechter: Frauen orange, Männer violett, beides zusammen neutral dunkel.
   Alle Texte in Versalien und Weiß. */
.md-occ { position: absolute; top: 22px; left: -10px; right: 14px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.md-occ--empty { display: none; }
.md-occ--linked { pointer-events: auto; cursor: pointer; text-decoration: none; }
.md-occ--linked:hover .md-occ-band { filter: brightness(1.06); }
.md-occ-band {
  --band: #3E1470; --band-light: #5a2a9a; --band-fold: #24093f;
  position: relative; display: inline-block; max-width: 100%; padding: 6px 16px 6px 18px;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase; text-wrap: balance;
  color: #fff;
  /* background-color als Basis: Elementors Lazyload setzt background-image in ungescrollten Containern auf none */
  background-color: var(--band);
  background-image: linear-gradient(170deg, var(--band-light) 0%, var(--band) 62%, var(--band-fold) 100%);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .45);
}
/* Falz unter dem Überhang: Dreieck, dessen senkrechte Kante an der Bildkante liegt */
.md-occ-band::before { content: ""; position: absolute; left: 0; bottom: -8px; width: 0; height: 0; border-style: solid; border-width: 0 10px 8px 0; border-color: transparent var(--band-fold) transparent transparent; }
/* Geschlechtstrennung: Frauen orange, Männer violett, gemeinsame Aussage neutral */
.md-occ-band--female { --band: #F88E19; --band-light: #ffa845; --band-fold: #c96d0b; }
.md-occ-band--male { --band: #58219C; --band-light: #7b41c4; --band-fold: #3E1470; }
.md-occ-band--all { --band: #2EB8A6; --band-light: #4fd1bf; --band-fold: #1c8577; }
/* Kleine Displays: Die Baender waren hier kleiner als am Rechner (10px) und damit
   auf dem Handy schwer zu lesen. Sie sind jetzt etwas groesser als dort — knapp
   genug, dass auch „Nur noch 2 Maennerplaetze“ auf einer Zeile bleibt. */
@media (max-width: 782px) {
  .md-occ { top: 18px; right: 8px; gap: 7px; }
  .md-occ-band { font-size: 13px; padding: 6px 17px 6px 19px; letter-spacing: .04em; }
  .md-occ-band::before { bottom: -9px; border-width: 0 11px 9px 0; }
}

/* Detailseite / Popup: Bänder als Stoffband über dem Beitragsbild (wie auf den Kacheln) */
.md-occ-hero-wrap { position: relative; }
.md-occ-hero-wrap > .md-occ--hero { position: absolute; top: 24px; left: -10px; right: 16px; z-index: 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.md-occ--hero .md-occ-band { font-size: 13px; padding: 7px 20px 7px 22px; }
@media (max-width: 600px) { .md-occ--hero .md-occ-band { font-size: 14px; padding: 7px 19px 7px 21px; } }

/* Mit Warteliste: Bild schmal halten, damit das Formular ohne Scrollen sichtbar ist */
.md-occ-hero-wrap--compact img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; object-position: center 40%; border-radius: 12px; }
@media (max-width: 782px) { .md-occ-hero-wrap--compact img { max-height: 170px; } }
.md-occ-hero-wrap--compact > .md-occ--hero { top: 14px; }

/* Einstieg unter dem Bild: Text links, Button rechts */
.md-occ-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 14px 0 22px; padding: 16px 20px; background: #f7f2fd; border: 1px solid #e3d8f2; border-radius: 12px; font-family: inherit; }
.md-occ-cta .md-occ-band { position: relative; border-radius: 999px; padding: 6px 16px; }
.md-occ-cta .md-occ-band::before { display: none; }
.md-occ-cta--below .md-occ-band { display: none; }
.md-occ-cta--below .md-occ-cta-note { flex: 1 1 320px; font-size: 15px; line-height: 1.5; color: #313131; }
.md-occ-cta--below .md-occ-cta-note strong { color: #3E1470; }
.md-occ-cta .md-occ-cta-button { display: inline-block; background: #F88E19 !important; color: #2a1440 !important; border: 0 !important; border-radius: 999px !important; padding: 10px 22px !important; font: inherit !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; text-transform: none !important; box-shadow: 0 6px 16px -8px rgba(248, 142, 25, .8); }
.md-occ-cta .md-occ-cta-button:hover { color: #fff !important; }
.md-occ-cta .md-occ-cta-note { flex-basis: 100%; font-size: 13px; line-height: 1.45; color: #4d4753; }
.md-waitlist-inline { display: inline-block; margin-left: 6px; font-weight: 700; color: #b8630a !important; text-decoration: underline !important; }
.md-waitlist-inline:hover { color: #58219C !important; }

/* Detailseite: Bänder vor dem Formular, statisch, ohne Überhang, Falz und Einschnitt */
.md-occ--detail { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; pointer-events: auto; }
.md-occ--detail .md-occ-band { position: relative; border-radius: 999px; padding: 6px 16px; }
.md-occ--detail .md-occ-band::before { display: none; }
.md-occ-detail.has-hero .md-occ--detail { display: none; }
.md-occ-detail { margin: 0 0 18px; }

/* Anti-Flackern: Auf Kacheln mit Engpass bleibt MECs Button unsichtbar, bis das Script ihn umgestellt hat.
   Sicherheitsnetz: Ohne Script erscheint er nach 2 s trotzdem (Animation setzt visibility zurück). */
.mec-event-article:has(.md-occ[data-button]:not([data-button="book"])):not(.md-occ-applied) .mec-booking-button { visibility: hidden; animation: mdOccReveal 0s linear 2s forwards; }
@keyframes mdOccReveal { to { visibility: visible; } }

/* Kachel-Buttons: Warteliste orange; bei nur einer ausgebuchten Gruppe nebeneinander (links Anmeldung, rechts Warteliste) */
/* Buttons in Markenfarben mit Farbverlauf, bewusst flach (keine Lichtkanten, kein Relief).
   Gilt für alle Kachel-Buttons (auch MECs „Anmelden“), damit die Reihe einheitlich wirkt. */
.mec-event-grid-classic .mec-event-footer .mec-booking-button,
.md-wl-modal .md-wl-modal-book-button,
.md-waitlist .md-waitlist-submit,
.md-occ-cta .md-occ-cta-button {
  --btn-top: #7a44c4; --btn-mid: #5B2D8E; --btn-bottom: #4a2478; --btn-ink: #fff;
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 60%, var(--btn-bottom) 100%) !important;
  border: 0 !important;
  color: var(--btn-ink) !important;
  text-shadow: none;
  box-shadow: none;
  transition: filter .16s ease;
}
.mec-event-grid-classic .mec-event-footer .mec-booking-button:hover,
.mec-event-grid-classic .mec-event-footer .mec-booking-button:focus-visible,
.md-wl-modal .md-wl-modal-book-button:hover,
.md-waitlist .md-waitlist-submit:hover,
.md-occ-cta .md-occ-cta-button:hover {
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 60%, var(--btn-bottom) 100%) !important;
  color: var(--btn-ink) !important;
  filter: brightness(1.08);
}
/* Kachel-Buttons mit Farbverlauf in allen MEC-Skins (auch Listenansicht /events/) */
.mec-event-article .mec-booking-button.md-occ-wait,
.mec-event-article .mec-booking-button.md-occ-btn--book,
.mec-event-article .mec-booking-button.md-occ-btn--male,
.mec-event-article .mec-booking-button.md-occ-btn--female,
.mec-event-article .mec-booking-button.md-occ-btn--all {
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 60%, var(--btn-bottom) 100%) !important;
  border: 0 !important; color: var(--btn-ink) !important; text-shadow: none; box-shadow: none;
}

/* Die Farbe hängt am Geschlecht, nicht an der Funktion: violett gehört zu den
   Männern, orange zu den Frauen. Stehen zwei Buttons nebeneinander, ist der linke
   deshalb immer violett und der rechte immer orange — gleich ob Anmeldung oder
   Warteliste. Die Reihenfolge im DOM stellt occupancy.js her. */
.mec-event-article .mec-booking-button.md-occ-btn--male {
  --btn-top: #7a44c4; --btn-mid: #5B2D8E; --btn-bottom: #4a2478; --btn-ink: #fff;
}
.mec-event-article .mec-booking-button.md-occ-btn--female {
  --btn-top: #ffa63f; --btn-mid: #F88E19; --btn-bottom: #e37c0e; --btn-ink: #fff;
}
/* Einzelne Buttons ohne Gegenstück („Anmelden“ allein, „Auf die Warteliste“ bei
   komplett ausgebuchtem Event): immer violett. Die Geschlechterfarbe greift nur,
   wenn zwei Buttons nebeneinander stehen und unterschieden werden müssen. */
.mec-event-article .mec-booking-button.md-occ-btn--book,
.mec-event-article .mec-booking-button.md-occ-btn--all {
  --btn-top: #7a44c4; --btn-mid: #5B2D8E; --btn-bottom: #4a2478; --btn-ink: #fff;
}
/* Absende-Feld des Wartelisten-Formulars: bleibt orange, es gehört zum Formular
   selbst und steht nie neben einem zweiten Button. */
.md-waitlist .md-waitlist-submit {
  --btn-top: #ffa63f; --btn-mid: #F88E19; --btn-bottom: #e37c0e; --btn-ink: #fff;
}
/* Einzelansicht: der Wartelisten-Aufruf und der Buchungshinweis im Popup stehen
   jeweils allein — nach derselben Regel wie auf der Kachel also violett. */
.md-occ-cta .md-occ-cta-button,
.md-wl-modal .md-wl-modal-book-button {
  --btn-top: #7a44c4; --btn-mid: #5B2D8E; --btn-bottom: #4a2478; --btn-ink: #fff;
}
.mec-event-article .mec-booking-button.md-occ-wait:hover { color: #fff !important; }
.mec-event-article .md-occ-btnrow { display: flex; gap: 8px; align-items: stretch; }
.mec-event-article .md-occ-btnrow .mec-booking-button { flex: 1 1 0; min-width: 0; margin: 0; position: static !important; }
/* Listen-Skin (z. B. /events/): MEC setzt den Button absolut rechts in den Footer – dann übernimmt die Zeile diese Position. */
.mec-event-list-standard .mec-event-footer .md-occ-btnrow { position: absolute; right: 15px; top: 20px; width: auto; }
.mec-event-list-standard .mec-event-footer .md-occ-btnrow .mec-booking-button { flex: 0 0 auto; }
.mec-event-article .md-occ-btnrow.is-split .mec-booking-button { padding: 7px 8px 6px !important; font-size: 13px !important; line-height: 1.25 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mec-event-article .md-occ-btnrow .md-occ-btn-sub { display: block; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: .01em; opacity: .9; margin-top: 1px; }

/* Warteliste: erbt Schrift der Website, setzt sich gegen Theme-/Elementor-Buttonstile durch */
.md-waitlist { box-sizing: border-box; background: #f7f2fd; border: 1px dashed #c9b6e6; border-radius: 12px; padding: 22px 24px; margin: 0 0 22px; font-family: inherit; color: #313131; text-align: left; }
.md-waitlist * { box-sizing: border-box; font-family: inherit; }
.md-waitlist .md-waitlist-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #3E1470; line-height: 1.3; }
.md-waitlist .md-waitlist-intro,
.md-waitlist .md-waitlist-age,
.md-waitlist .md-waitlist-optin { margin: 0 0 14px; font-size: 15px; line-height: 1.55; color: #4d4753; }
.md-waitlist .md-waitlist-groups { display: flex; gap: 18px; margin: 0 0 12px; font-size: 15px; }
.md-waitlist .md-waitlist-groups label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.md-waitlist .md-waitlist-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.md-waitlist .md-waitlist-row input { flex: 1 1 180px; min-width: 0; margin: 0; border: 1px solid #d8d0e5 !important; border-radius: 8px !important; padding: 11px 13px !important; font: inherit !important; font-size: 15px !important; line-height: 1.3 !important; color: #313131 !important; background: #fff !important; box-shadow: none !important; }
.md-waitlist .md-waitlist-row input:focus { outline: none; border-color: #58219C !important; box-shadow: 0 0 0 3px rgba(88, 33, 156, .15) !important; }
.md-waitlist .md-waitlist-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.md-waitlist .md-waitlist-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 6px 0 14px; color: #4d4753; cursor: pointer; }
.md-waitlist .md-waitlist-consent input { margin: 3px 0 0; flex: none; width: 16px; height: 16px; accent-color: #58219C; }
.md-waitlist .md-waitlist-submit { display: inline-block; background: #F88E19 !important; color: #2a1440 !important; border: 0 !important; border-radius: 999px !important; padding: 12px 26px !important; font: inherit !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .02em; text-transform: none !important; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(248, 142, 25, .8); transition: background .15s ease, transform .15s ease; }
.md-waitlist .md-waitlist-submit[disabled] { opacity: .6; cursor: default; transform: none; }
.md-waitlist .md-waitlist-shield { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12px; line-height: 1.4; color: #7a7282; }
.md-waitlist .md-waitlist-shield-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c9c3d1; }
.md-waitlist .md-waitlist-shield[data-state="working"] .md-waitlist-shield-dot { background: #F88E19; animation: md-shield-pulse 1.1s ease-in-out infinite; }
.md-waitlist .md-waitlist-shield[data-state="ready"] .md-waitlist-shield-dot { background: #1f7a4d; }
.md-waitlist .md-waitlist-shield[data-state="error"] .md-waitlist-shield-dot { background: #b3261e; }
.md-waitlist .md-waitlist-shield[data-state="error"] { color: #b3261e; }
@keyframes md-shield-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .md-waitlist .md-waitlist-shield[data-state="working"] .md-waitlist-shield-dot { animation: none; } }
.md-waitlist .md-waitlist-message { margin-top: 12px; font-size: 15px; font-weight: 600; min-height: 1em; }
.md-waitlist .md-waitlist-message.is-ok { color: #1f7a4d; }
.md-waitlist .md-waitlist-message.is-error { color: #b3261e; }
.md-waitlist.is-done form, .md-waitlist.is-done .md-waitlist-form { display: none !important; }
.md-waitlist.is-done .md-waitlist-message { margin-top: 4px; font-size: 16px; }
@media (max-width: 600px) { .md-waitlist { padding: 18px 16px; } .md-waitlist .md-waitlist-submit { width: 100%; text-align: center; } }

/* Im MEC-Popup (featherlight) */
.featherlight .md-occ-cta { margin: 6px 0 16px; }
.featherlight .md-waitlist { margin: 0 0 18px; }

/* Formular direkt unter dem Bild: kompakt, drei Felder in einer Reihe (steht nach den Basisregeln, damit es gewinnt) */
.md-occ-detail--top { margin: 12px 0 24px; }
.md-occ-detail--top .md-waitlist { margin: 0; padding: 16px 20px 18px; }
.md-occ-detail--top .md-waitlist .md-waitlist-title { font-size: 19px; margin-bottom: 4px; }
.md-occ-detail--top .md-waitlist .md-waitlist-intro,
.md-occ-detail--top .md-waitlist .md-waitlist-age,
.md-occ-detail--top .md-waitlist .md-waitlist-optin { font-size: 14px; margin-bottom: 8px; }
.md-occ-detail--top .md-waitlist .md-waitlist-groups { margin-bottom: 6px; }
.md-occ-detail--top .md-waitlist .md-waitlist-row { margin: 0 0 8px; }
.md-occ-detail--top .md-waitlist .md-waitlist-row input { padding: 9px 12px !important; font-size: 14px !important; }
.md-occ-detail--top .md-waitlist .md-waitlist-consent { font-size: 12px; margin: 2px 0 8px; }
.md-occ-detail--top .md-waitlist .md-waitlist-submit { padding: 10px 24px !important; font-size: 14px !important; }
@media (min-width: 783px) {
  .md-occ-detail--top .md-waitlist .md-waitlist-form { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px 10px; align-items: center; }
  .md-occ-detail--top .md-waitlist .md-waitlist-row { display: contents; }
  .md-occ-detail--top .md-waitlist .md-waitlist-row input { width: 100%; margin: 0; }
  .md-occ-detail--top .md-waitlist .md-waitlist-groups, .md-occ-detail--top .md-waitlist .md-waitlist-consent, .md-occ-detail--top .md-waitlist .md-waitlist-message { grid-column: 1 / -1; }
  .md-occ-detail--top .md-waitlist .md-waitlist-submit { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Wartelisten-Popup (Optik wie MECs Buchungs-Popup) ---- */
.md-wl-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; opacity: 0; transition: opacity .2s ease; font-family: inherit; }
.md-wl-modal.is-open { opacity: 1; }
.md-wl-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .8); }
.md-wl-modal-panel { position: relative; width: 100%; max-width: 980px; background: #fff; border-radius: 10px; padding: 48px 56px 40px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); color: #313131; transform: translateY(12px); transition: transform .2s ease; outline: none; }
.md-wl-modal.is-open .md-wl-modal-panel { transform: none; }
/* Gleiche Optik wie MECs Schliessen-Knopf im Buchungsfenster (featherlight-close-icon,
   so wie das Theme ihn setzt): 25x25, schwarzer Rahmen, transparent, ohne Rundung. */
/* Maße wie der Close-Button von MEC (25x25, 1px Rahmen). width/height brauchen !important:
   die reset.css des Themes setzt [type="button"] auf width:auto — gleiche Spezifität wie
   unsere Klasse, aber später geladen, sonst schrumpft der Button auf die Breite des Zeichens. */
.md-wl-modal-close { position: absolute; top: 20px; right: 20px; box-sizing: border-box !important; width: 25px !important; height: 25px !important; min-width: 0 !important; border: 1px solid #000 !important; border-radius: 0 !important; background: transparent !important; color: #000 !important; font: 16px/23px Arial, sans-serif !important; padding: 0 !important; text-align: center; cursor: pointer; }
.md-wl-modal-close:hover, .md-wl-modal-close:focus { background: #000 !important; color: #fff !important; }
.md-wl-modal-title { margin: 0 0 14px; font-size: 32px; font-weight: 500; line-height: 1.2; color: #313131; }
.md-wl-modal-hero { margin: 0 0 16px; }
.md-wl-modal-hero img { max-height: 260px; }
.md-wl-modal-meta { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 0 0 18px; font-size: 14px; color: #313131; }
.md-wl-modal-meta b { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #58219C; margin-bottom: 2px; }
.md-wl-modal .md-occ-detail--top { margin: 0; }

/* Buchung im selben Popup: zweite Ansicht statt Seitenwechsel. Der Rahmen laedt
   nur MECs Buchungsmodul und meldet seine Hoehe, damit es keine zwei Scrollbalken gibt. */
.md-wl-modal-view--book { display: block; }
/* Gegen die Buttonstile von Theme und Elementor: sonst kommt ein violetter Block ohne Text. */
.md-wl-modal .md-wl-modal-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 14px; padding: 7px 14px;
  border: 1px solid #d9c8f0 !important; border-radius: 999px !important;
  background: #f4eefc !important; background-image: none !important;
  color: #58219C !important; font-family: inherit; font-size: 13px !important; font-weight: 700 !important;
  line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important;
  box-shadow: none !important; text-shadow: none; width: auto !important; min-width: 0 !important; cursor: pointer;
}
.md-wl-modal .md-wl-modal-back:hover { background: #ece0fa !important; border-color: #c4abe6 !important; color: #58219C !important; }
/* Solange der vorausgeladene Rahmen noch nicht steht, ein ruhiger Platzhalter
   statt eines leeren Kastens. */
.md-wl-modal-frame { min-height: 320px; position: relative; }
.md-wl-modal-frame:not(.is-ready)::after {
  content: "Buchung wird geladen …";
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #7a6f8c; font-size: 14px;
}
.md-wl-modal-frame:not(.is-ready) .md-wl-modal-iframe { visibility: hidden; }
.md-wl-modal-iframe { display: block; width: 100%; height: 520px; border: 0; background: transparent; transition: height .18s ease; }

html.md-wl-modal-open { overflow: hidden; }
@media (max-width: 782px) {
  .md-wl-modal { padding: 12px 8px; }
  .md-wl-modal-panel { padding: 44px 18px 26px; border-radius: 8px; }
  .md-wl-modal-title { font-size: 24px; }
  .md-wl-modal-hero img { max-height: 170px; }
}

/* Popup: Hinweis, dass die andere Gruppe weiterhin buchen kann */
.md-wl-modal-book { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 14px; padding: 12px 16px; background: #f4eefc; border: 1px solid #d9c8f0; border-radius: 10px; font-size: 14px; color: #313131; }
.md-wl-modal-book strong { color: #58219C; }
.md-wl-modal-book-button { display: inline-block; background: #58219C !important; color: #fff !important; border-radius: 999px !important; padding: 9px 20px !important; font-size: 14px !important; font-weight: 700 !important; text-decoration: none !important; white-space: nowrap; }
.md-wl-modal-book-button:hover { color: #fff !important; }
.md-occ-cta-note em { display: block; margin-top: 4px; font-style: normal; color: #58219C; font-weight: 600; }

/* Detailseite: Hinweis, dass die andere Gruppe weiterhin buchen kann */
.md-occ-bookhint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 12px 0 0; padding: 10px 16px; background: #f4eefc; border: 1px solid #d9c8f0; border-radius: 10px; font-size: 14px; color: #313131; font-family: inherit; }
.md-occ-bookhint strong { color: #58219C; }
.md-occ-bookhint-link { color: #58219C !important; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.md-occ-bookhint-link:hover { text-decoration: underline !important; }

/* „Buchung zuerst“: Karte mit MECs Buchungsformular direkt unter dem Bild */
.md-occ-bookpanel { margin: 0 0 14px; background: #fff; border: 1px solid #e3d8f3; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px -26px rgba(62, 20, 112, .6); font-family: inherit; text-align: left; }
.md-occ-bookpanel * { font-family: inherit; }
.md-occ-bookpanel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 13px 20px; background: linear-gradient(135deg, #5B2D8E 0%, #7a44c4 100%); color: #fff; }
.md-occ-bookpanel-title { margin: 0 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #fff !important; }
.md-occ-bookpanel-sub { font-size: 13.5px; font-weight: 600; opacity: .92; }
.md-occ-bookpanel-body { padding: 4px 18px 14px; }
.md-occ-bookpanel-body .elementor-widget-event_booking, .md-occ-bookpanel-body .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
.md-occ-bookpanel-body .mec-events-meta-group-booking { margin: 0 !important; padding: 6px 0 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
.md-occ-bookpanel-body .mec-booking-progress-bar { margin: 6px 0 14px !important; padding: 0 !important; }
/* MEC bemisst die Fortschrittsleiste je nachdem unterschiedlich, ob sie aus dem
   Elementor-Widget (Eventseite) oder aus dem Shortcode (Buchungsrahmen im Popup)
   kommt — im Rahmen landete die Beschriftung sonst bei 8px. Hier legen wir beide
   Wege auf dieselben Werte fest, damit die Buchung ueber die Warteliste genauso
   aussieht wie der direkte Weg. */
.md-occ-bookpanel-body .mec-booking-progress-bar li { font-size: 15px !important; font-weight: 700 !important; }
.md-occ-bookpanel-body .mec-booking-progress-bar li .progress-index {
  width: 24px !important; height: 24px !important; line-height: 24px !important;
  font-size: 14px !important; border-radius: 50% !important;
}
/* Farben der Fortschrittsleiste — bewusst ohne .md-occ-bookpanel-body davor.
   Unsere Buchungskarte gibt es nur, wenn eine Gruppe ausgebucht ist; auf allen
   anderen Eventseiten steht MECs Formular an seinem angestammten Platz. Waren
   die Farben an die Karte gebunden, sah derselbe Buchungsvorgang je nach
   Belegung anders aus: hier violett und gruen, dort durchgehend grau.

   Das Grau kommt aus einer Regel mit .mec-wrap im Vorfahren, die MECs eigenes
   Gruen ueberschreibt — deshalb hier mit !important dagegen. */
.mec-booking-progress-bar li.mec-active .progress-index { background: #58219C !important; border-color: #58219C !important; color: #fff !important; }
.mec-booking-progress-bar li.mec-active { color: #3E1470 !important; }
.mec-booking-progress-bar li.mec-active::before,
.mec-booking-progress-bar li.mec-active::after { background: #54D274 !important; }
/* Auf schmalen Displays passen vier Schritte bei 15px nicht nebeneinander:
   „Typ auswählen“ allein misst dort 107px, für vier gleich breite Spalten sind
   aber nur je 75px da — „Bestätigung“ rutschte in eine zweite Zeile. MEC selbst
   verkleinert die Schrift auf kleinen Displays, unsere Zeile darüber hat das mit
   !important überschrieben. Also hier nachziehen: kleinere Schrift, Breite nach
   Textlänge statt vier gleiche Viertel, und kein Umbruch. */
@media (max-width: 560px) {
  .md-occ-bookpanel-body .mec-booking-progress-bar { flex-wrap: nowrap !important; justify-content: space-between !important; }
  .md-occ-bookpanel-body .mec-booking-progress-bar li { font-size: 12px !important; flex: 1 1 auto !important; min-width: 0 !important; white-space: nowrap !important; }
}
@media (max-width: 400px) {
  .md-occ-bookpanel-body .mec-booking-progress-bar li { font-size: 11px !important; }
}
.md-occ-bookpanel-body .mec-event-ticket { border-radius: 10px; }
.md-occ-bookpanel-body .mec-event-ticket.md-occ-ticket-soldout { display: none !important; }
.md-occ-bookpanel-body .mec-event-ticket-name { color: #3E1470 !important; font-weight: 700 !important; }
.md-occ-bookpanel-body .mec-book-form-btn-wrap { margin-top: 6px; }
/* Die Buttons des Buchungsformulars („Weiter“, „Zurück“) bleiben bewusst im
   Design von MEC — so sehen sie im Formular einheitlich aus. */
.md-occ-bookpanel-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 10px 20px; background: #fff6ea; border-top: 1px solid #ffe0bd; font-size: 13.5px; line-height: 1.45; color: #4d4753; }
.md-occ-bookpanel-note strong { color: #a85a07; }
.md-occ-bookpanel-note a.md-occ-bookpanel-wl { color: #c2670a !important; font-weight: 700; text-decoration: none !important; white-space: nowrap; }
.md-occ-bookpanel-note a.md-occ-bookpanel-wl:hover { text-decoration: underline !important; }
/* Warteliste eingeklappt unter der Buchung */
.md-occ-wl-toggle { display: inline-block; width: auto !important; text-transform: none !important; margin: 0 0 16px; padding: 8px 16px; background: transparent !important; border: 1px dashed #c9b6e6 !important; border-radius: 999px !important; color: #58219C !important; font-size: 13.5px !important; font-weight: 600 !important; font-family: inherit; cursor: pointer; box-shadow: none !important; }
.md-occ-wl-toggle:hover { background: #f7f2fd !important; }
.md-occ-wl-toggle[hidden] { display: none !important; }
.md-occ-detail.md-occ-detail--collapsed { display: none !important; }