/* ==========================================================================
INHALTSVERZEICHNIS (Table of Contents)
==========================================================================
0. VARIABLEN & GRUNDEINSTELLUNGEN
1. TYPOGRAFIE & GLOBALE ELEMENTE
2. LAYOUT & HEADER (Logo, Menü, Container, Mobile Menu Fixes)
3. FORMULARE (Inputs, Selects, Checkboxen, Fokus/Barrierefreiheit, Filter)
4. BUTTONS (Standard & Emin-Style)
5. EVENTS MANAGER (Listen, Einzelansicht, Tabs, Sidebar, Dozenten)
6. RESPONSIVE ANPASSUNGEN & FINAL FIXES (Typo, Tabs, Layout)
7. FINAL PATCH (Text-Umbruch, H2, Tabs einzeilig)
8. FIX: LISTEN (Bullets Einrückung)
9. HEADER FIX (Linksbündige Ausrichtung)
10. FINAL FIX: CHECKBOX (Flexbox Layout)
========================================================================== */

/* ==========================================================================
0. VARIABLEN & GRUNDEINSTELLUNGEN
========================================================================== */
:root {
  /* Farben */
  --fim-ink: #1E1E1D;
  --fim-accent: #FFB83C;
  --fim-purple: #AFA1FF;
  --fim-purple-hover: #8A7DE8;
  --fim-green: #3b9e06;
  --fim-border: #8f8b7d;
  --fim-focus: #2b6aff;

  /* Beige-Variante (Konsolidiert) */
  --fim-beige: #dcdac4;

  /* Maße */
  --fim-radius: 40px;
}

/* Anti-Overflow Fix für die gesamte Seite */
* { box-sizing: border-box !important; }
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ==========================================================================
1. TYPOGRAFIE & GLOBALE ELEMENTE
========================================================================== */

/* Einheitliche Schrift für Fließtext (Source Sans Pro / Poppins Mix) */
#content .main .entry-content p:not(.elementor-heading-title),
#content .main .entry-content ul,
#content .main .entry-content ol,
#content .main .entry-content li,
#content .main .entry-content span:not(.subtitle),
#content .main .entry-content a,
#content .main .entry-content div:not(.elementor-widget-heading):not(.elementor-icon-box-icon),
#content .main .entry-content td,
#content .main .entry-content th,
#content .main .entry-content label,
#content .main .entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
#content .main .entry-content select,
#content .main .entry-content textarea,
.custom-event-list-wrapper,
.event-sidebar,
.em-event-content,
.em-booking-form label,
.em-booking-form input,
.tabs-header .tab-link {
  font-family: 'Poppins', Arial, sans-serif !important;
  font-size: clamp(var(--font-size-p-min, 18px), 2vw + 1rem, var(--font-size-p-max, 22px)) !important;
  line-height: 1.6 !important;
  color: #333 !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.event-sidebar > section,
.event-sidebar > div,
.event-sidebar .event-calendarbox,
.event-sidebar .event-lecturer {
  margin-bottom: 60px !important;
}

/* Überschriften schützen (Behalten Impact/Poppins vom Theme) */
#content .main .entry-content h1:not(.elementor-heading-title),
#content .main .entry-content h2:not(.elementor-heading-title),
#content .main .entry-content h3:not(.elementor-heading-title),
#content .main .entry-content h4:not(.elementor-heading-title),
#content .main .entry-content h5:not(.elementor-heading-title),
#content .main .entry-content h6:not(.elementor-heading-title),
.custom-event-list-wrapper .custom-event-title,
.em-item-title {
  font-family: inherit !important;
  line-height: 1.3 !important;
  color: #1e1e1d !important;
  font-weight: inherit !important;
}

/* ÜBERSCHRIFTEN IN SIDEBAR - KEIN UMBRUCH */
.event-sidebar h3,
.event-sidebar h4,
.event-sidebar h5,
.event-calendarbox h3 {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* FontAwesome Icons schützen */
#content .main .entry-content i,
#content .main .entry-content .fa,
#content .main .entry-content .fas,
#content .main .entry-content .fab,
#content .main .entry-content .far,
#content .main .entry-content [class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-size: inherit !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

small, .text-small { font-size: 0.85em !important; }


/* ==========================================================================
2. LAYOUT & HEADER (Fixes für Theme & Mobile)
========================================================================== */

/* Breadcrumbs entfernen */
#kadbreadcrumbs { display: none !important; }

/* Page Header Anpassungen */
#pageheader .entry-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 1rem 0 !important;
}
#pageheader .post_head_title { padding-left: clamp(16px, 5vw, 64px); }

/* Theme-Container überschreiben (Volle Breite ermöglichen) */
.event-details-side.col-md-4,
.entry-content-col.col-md-8 { display: none !important; }

.single-event .entry-content,
article.em-event-single,
.em-event-single-event,
.single-event .container,
.single-event .row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Maximale Breite für den Inhalt setzen */
.single-event .site-content,
.single-event main,
.single-event article,
.event-page-header {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Mobile Header Fixes (Logo & Burger Menu Klickbarkeit) */
#kad-mobile-banner .container,
.kad-mobile-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  z-index: 99999 !important;
}

#mobile-logo,
.kad-mobile-logo-left {
  position: relative !important;
  z-index: 10001 !important;
  max-width: 75% !important;
  width: auto !important;
  flex: 0 1 auto !important;
}

.kt-mobile-header-toggle,
.mobile-navigation-toggle,
.kad-mobile-menu-right {
  position: relative !important;
  z-index: 10002 !important;
  cursor: pointer !important;
  margin-left: auto !important;
  display: block !important;
  width: auto !important;
  min-width: 40px !important;
}

/* --- MOBILE MENU CONTAINER & VISIBILITY FIXES --- */

/* 1. Den Wrapper des Popups (Magnific Popup) ganz nach oben holen */
.mfp-bg, .mfp-wrap, .mfp-container { z-index: 999999 !important; }

/* 2. Das Menü nur sichtbar machen, wenn es im Popup liegt */
.mfp-content #kt-mobile-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #fff !important;
  padding: 20px !important;
}

/* 3. Den "Schließen"-Button (X) im Menü auch klickbar machen */
button.mfp-close {
  z-index: 1000001 !important;
  color: #000 !important;
  cursor: pointer !important;
  min-width: 44px;
  min-height: 44px;
  top: 0 !important;
  right: 0 !important;
  position: absolute !important;
}

/* 4. Links im mobilen Menü stylen */
#kt-mobile-menu ul li a {
  color: #1e1e1d !important;
  display: block !important;
  pointer-events: auto !important;
  font-size: 1.2rem !important;
  padding: 10px 0 !important;
}

/* Standardmäßig verstecken wir das Menü im Footer */
body > #kt-mobile-menu { display: none !important; }

/* --- FIX: MOBILE HEADER & CONTAINER BEGRENZUNG --- */

#kad-mobile-banner {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

#kad-mobile-banner .container, .kad-mobile-header {
  padding-left: 20px !important;
  padding-right: 20px !important;
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Reduziert den Padding auf kleineren Bildschirmen */
@media (max-width: 900px) {
  #kad-mobile-banner .container, .kad-mobile-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 600px) {
  #kad-mobile-banner .container, .kad-mobile-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* Stellt sicher, dass das Logo keine störenden Ränder links hat */
#mobile-logo, .kad-mobile-logo-left { margin-left: 0 !important; }

/* Stellt sicher, dass das Menü keine störenden Ränder rechts hat */
.kt-mobile-header-toggle, .mobile-navigation-toggle, .kad-mobile-menu-right { margin-right: 0 !important; }


/* ==========================================================================
3. FORMULARE (Inputs, Selects, Checkboxen)
========================================================================== */

/* --- A) BASIS INPUT STYLES (Beige & Rund) --- */
body .em-event-bookings input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
body .em-event-bookings textarea,
#em-booking-form-1 input[type="text"],
#em-booking-form-1 input[type="email"],
#em-booking-form-1 input[type="tel"],
#em-booking-form-1 input[type="password"],
#em-booking-form-1 textarea,
.em-booking-form textarea,
#respond textarea,
.comment-form textarea {
  background-color: var(--fim-beige) !important;
  border: 1px solid var(--fim-border) !important;
  border-radius: var(--fim-radius) !important;
  color: #1e1e1d !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 10px 20px !important;
  min-height: 48px !important;
  font-family: 'Source Sans Pro', Arial, sans-serif !important;
}

/* Wrapper transparent machen */
.em-event-bookings .em-booking-form .input,
.em-event-bookings .em-booking-form .input-group,
.em-event-bookings .em-booking-form p[class*="input-"] {
  background: transparent !important;
}

/* Placeholder Farbe */
::placeholder {
  color: #8f8b7d !important;
  opacity: 1 !important;
}

/* Autofill auch beige färben */
body .em-event-bookings .em-booking-form input:-webkit-autofill,
body .em-event-bookings .em-booking-form input:-webkit-autofill:hover,
body .em-event-bookings .em-booking-form input:-webkit-autofill:focus,
body .em-event-bookings .em-booking-form textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px var(--fim-beige) inset !important;
  -webkit-text-fill-color: #1e1e1d !important;
  transition: background-color 500s ease-in-out 0s !important;
}

/* --- FIX: KOMMENTARBOX & SELECTS (HEIGHT/CLIPPING) --- */

html body .em-booking-form textarea#booking_comment,
html body .em-booking-form textarea[name="booking_comment"] {
  background-color: var(--fim-beige) !important;
  border: 1px solid var(--fim-border) !important;
  border-radius: var(--fim-radius) !important;
  color: var(--fim-ink) !important;
  padding: 10px 20px !important;
  min-height: 200px !important; /* Startgröße erhöht */
  field-sizing: content !important; /* Wächst mit */
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Fix abgeschnittener Text in Selects */
.em-event-bookings .em-booking-form select:not(.em-error),
.em-event-bookings .em-booking-form select.dbem_land:not(.em-error),
.em-event-bookings .em-booking-form select {
  min-height: 56px !important;
  height: auto !important;
  line-height: normal !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  padding-left: 20px !important;
  padding-right: 40px !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
}

/* --- B) SELECTS STYLING --- */

/* Appearance entfernen */
.em-booking-form select,
.em-event-bookings select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* EINE ZENTRALE REGEL - Alle Selektoren zusammen */
.em-event-bookings .em-booking-form select:not(.em-error),
.em-event-bookings .em-booking-form select.dbem_anrede:not(.em-error),
.em-event-bookings .em-booking-form select.dbem_land:not(.em-error),
.em-event-bookings .em-booking-form select.em-ticket-select:not(.em-error),
.em-event-bookings .em-booking-form .em-ticket-booking select:not(.em-error),
.em-event-bookings .em-tickets-spaces select:not(.em-error) {
  background-color: var(--fim-beige) !important;
  border-radius: var(--fim-radius) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%231e1e1d' d='M4 6 L8 10 L12 6 Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 16px 16px !important;
  border: 1px solid var(--fim-border) !important;
  border-radius: var(--fim-radius) !important;
  color: #1e1e1d !important;
  /* Padding ist oben im "Fix Selects" Block definiert */
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Error-State */
.em-event-bookings .em-booking-form select.em-error {
  background-color: var(--fim-beige) !important;
  border: 2px solid #dc3545 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%231e1e1d' d='M4 6 L8 10 L12 6 Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 16px 16px !important;
}

/* Option-Elemente */
.em-event-bookings select option,
.em-booking-form select option {
  background: var(--fim-beige) !important;
  color: #1e1e1d !important;
}

/* --- C) CHECKBOXEN (Rundes Custom Design) --- */
.round-checkbox,
.input-field-data_privacy_consent label,
.input-field-data_comms_consent label {
  position: relative !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e1e1e !important;
  cursor: pointer !important;
  padding-left: 34px !important;
  line-height: 1.5 !important;
  min-height: 24px !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
  margin-bottom: 16px !important;
}

/* Original Input verstecken */
.round-checkbox input[type="checkbox"],
.input-field-data_privacy_consent input[type="checkbox"],
.input-field-data_comms_consent input[type="checkbox"],
body .em-event-bookings input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  accent-color: var(--fim-green) !important;
}

/* Der Kreis (Unchecked) */
.round-checkbox::before,
.input-field-data_privacy_consent label::before,
.input-field-data_comms_consent label::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 2px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 2px solid var(--fim-border) !important;
  background: var(--fim-beige) !important;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  flex-shrink: 0 !important;
}

/* Der Haken */
.round-checkbox::after,
.input-field-data_privacy_consent label::after,
.input-field-data_comms_consent label::after {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 10px !important;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(-1) !important;
  width: 10px !important;
  height: 6px !important;
  border-right: 2.5px solid transparent !important;
  border-bottom: 2.5px solid transparent !important;
  z-index: 1 !important;
  transition: border-color .2s ease !important;
}

/* Checked State Logik via :has Selector (modern) */
@supports selector(:has(input:checked)) {
  .round-checkbox:has(input[type="checkbox"]:checked)::after,
  .input-field-data_privacy_consent label:has(input[type="checkbox"]:checked)::after,
  .input-field-data_comms_consent label:has(input[type="checkbox"]:checked)::after {
    border-right-color: #fff !important;
    border-bottom-color: #fff !important;
  }

  .round-checkbox:has(input[type="checkbox"]:checked)::before,
  .input-field-data_privacy_consent label:has(input[type="checkbox"]:checked)::before,
  .input-field-data_comms_consent label:has(input[type="checkbox"]:checked)::before {
    background: var(--fim-green) !important;
    border-color: color-mix(in srgb, var(--fim-green) 70%, black 10%) !important;
  }

  .round-checkbox:has(input[type="checkbox"]:focus-visible)::before,
  .input-field-data_privacy_consent label:has(input[type="checkbox"]:focus-visible)::before,
  .input-field-data_comms_consent label:has(input[type="checkbox"]:focus-visible)::before {
    outline: 2px solid var(--fim-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fim-focus) 40%, transparent) !important;
  }
}

/* Checkbox Container Layout */
.custom-checkboxes {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.custom-checkboxes.stacked {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.custom-checkboxes.stacked .fim-self-only-help {
  margin-left: 34px !important;
  font-size: 0.95rem !important;
  color: #666 !important;
}

/* Alte Checkmarks ausblenden */
.round-checkbox .checkmark, .em-consent-checkbox .checkmark { display: none !important; }

/* Links in Labels (Datenschutz) - SCHWARZ & CLEAN */
.input-field-data_privacy_consent label a,
.input-field-data_comms_consent label a {
  color: #1e1e1d !important;
  text-decoration: none !important;
  border-bottom: 3px solid #1e1e1d !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
  transition: color 0.2s ease, border-color 0.2s ease !important;
}

.input-field-data_privacy_consent label a:hover,
.input-field-data_comms_consent label a:hover {
  color: var(--fim-accent) !important;
  border-bottom-color: var(--fim-accent) !important;
  text-decoration: none !important;
  text-decoration-thickness: 0 !important;
}

/* --- D) HOVER & FOKUS STATES --- */

/* 1. Hover-Effekt (Grün & Dicker) */
body .em-event-bookings .em-booking-form input:not([type="checkbox"]):not([type="submit"]):hover,
body .em-event-bookings .em-booking-form textarea:hover,
body .em-event-bookings .em-booking-form select:not(.em-error):hover,
body .em-event-bookings .em-booking-form select.dbem_land:not(.em-error):hover,
body .em-event-bookings .em-booking-form select.attendee_anrede:not(.em-error):hover {
  border-color: var(--fim-green) !important;
  box-shadow: 0 0 0 1px var(--fim-green) !important;
  cursor: pointer !important;
}

/* 2. BARRIEREFREIHEIT FOKUS (NUR UMRANDUNG, KEIN WEISSER HINTERGRUND) */
html body .em-event-bookings .em-booking-form select:focus,
html body .em-event-bookings .em-booking-form select:focus-visible,
html body .em-event-bookings .em-booking-form textarea:focus,
html body .em-event-bookings .em-booking-form textarea:focus-visible,
html body .em-event-bookings .em-booking-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
html body .em-event-bookings .em-booking-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus-visible,
html body textarea#booking_comment:focus,
html body select.dbem_land:focus {
  background-color: var(--fim-beige) !important;
  border-color: var(--fim-green) !important;
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: 0 0 0 3px rgba(59, 158, 6, 0.4) !important;
  outline: none !important;
  position: relative !important;
  z-index: 100 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Select-Pfeil Korrektur bei Fokus (Dunkler Pfeil auf beige) */
html body .em-event-bookings .em-booking-form select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%231e1e1d' d='M4 6 L8 10 L12 6 Z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 16px 16px !important;
}


/* --- E) ERROR STATES (Validierung) --- */
body .em-booking-form p.em-error input,
body .em-booking-form p.em-error select,
body .em-booking-form p.em-error textarea,
body .em-event-bookings .em-booking-form input.em-error:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
body .em-event-bookings .em-booking-form textarea.em-error,
body .em-event-bookings .em-booking-form select.em-error,
body .em-event-bookings .em-booking-form input[style*="border: 2px solid rgb(220, 53, 69)"],
body .em-event-bookings .em-booking-form textarea[style*="border: 2px solid rgb(220, 53, 69)"],
body .em-event-bookings .em-booking-form select[style*="border: 2px solid rgb(220, 53, 69)"] {
  background-color: var(--fim-beige) !important;
  border-radius: var(--fim-radius) !important;
  border: 2px solid #dc3545 !important;
  outline: none !important;
}

/* Checkbox-TEXTE rot bei Fehler */
.em-booking-form p.input-checkbox.em-error label,
.em-booking-form p.em-consent-checkbox.em-error label {
  color: #dc3545 !important;
}

/* Checkbox-Kreis rot umranden bei Fehler */
.em-booking-form p.input-checkbox.em-error label::before,
.em-booking-form p.em-consent-checkbox.em-error label::before {
  border-color: #dc3545 !important;
}

/* --- F) TICKET TRENNER & VERTIKALE AUSRICHTUNG FILTER --- */

/* Filter Vertikale Ausrichtung */
.fim-search-row { align-items: center !important; }
.fim-search-row .custom-checkboxes { display: flex !important; align-items: center !important; }

/* Zentrierte Checkbox-Labels */
.custom-checkboxes .round-checkbox {
  display: flex !important;
  align-items: center !important;
  padding-left: 34px !important;
  margin-bottom: 0 !important;
  min-height: 24px !important;
  line-height: 1.5 !important;
}

/* Perfekte Mitte für Kreis und Haken */
.custom-checkboxes .round-checkbox::before {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.custom-checkboxes .round-checkbox::after {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(-45deg) scaleX(-1) !important;
}

/* Entfernt unnötige Margins vom Label */
.fim-search-row .angebot-label { margin: 0 12px 0 0 !important; }

/* Ticket Booking Trenner */
.em-ticket-booking {
  border-bottom: 3px solid var(--fim-green) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
}
.em-ticket-booking:last-child {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Borders und HRs entfernen */
.em-ticket-booking hr, .em-booking-form hr, .em-booking-form .em-ticket-booking hr,
.em-event-bookings hr, .em-tickets-bookings hr, body .em-event-bookings .em-booking-form hr,
section.em-event-bookings hr { display: none !important; }

.em-booking-form, .em-event-bookings .em-booking-form, section.em-event-bookings, .em-tickets-bookings {
  border: none !important;
}

.em-booking-form p, .em-booking-form p.input-field, .em-booking-form p[class*="input-"] {
  border: none !important;
}

.em-ticket-booking::after, .em-ticket-booking::before, .em-booking-form::after, .em-booking-form::before {
  content: none !important; display: none !important;
}

.em-ticket-booking + .em-ticket-booking { margin-top: 24px !important; }


/* ==========================================================================
4. BUTTONS
========================================================================== */

/* --- A) Standard Buttons & "Mehr Lesen" --- */
:root body .em-item-actions:is(.input, :where(:not(.input))) :is(a.button, .button, a.em-item-read-more.button, a.em-event-book-now.button),
:root body .em-item-actions:is(.input, :where(:not(.input))) :is(a.button, .button, a.em-item-read-more.button, a.em-event-book-now.button):is(:link, :visited, :hover, :focus, :active) {
  position: relative !important;
  overflow: hidden !important;
  background-color: var(--fim-purple) !important;
  color: var(--fim-ink) !important;
  border: 1px solid var(--fim-ink) !important;
  border-radius: 50px !important;
  box-shadow: 10px 12px var(--fim-ink) !important;
  text-decoration: none !important;
  padding: 0.65em 1.25em !important;
  font: 700 1rem/1.2 inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform .6s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out !important;
  height: 42px !important;
  min-width: 160px !important;
}

:root body .em-item-actions :is(a.button, .button, a.em-item-read-more.button, a.em-event-book-now.button)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to bottom right, var(--fim-accent) 50%, transparent 50%) !important;
  background-position: 100% 100% !important;
  background-size: 200% 200% !important;
  transition: background-position 600ms ease-in-out !important;
  z-index: -1 !important;
}

:root body .em-item-actions :is(a.button, .button, a.em-item-read-more.button, a.em-event-book-now.button):hover {
  background-color: var(--fim-purple-hover) !important;
  transform: rotate(4deg) !important;
}

:root body .em-item-actions :is(a.button, .button, a.em-item-read-more.button, a.em-event-book-now.button):hover::before {
  background-position: 0 0 !important;
}

:root body .em-item-actions :is(a.button, .button, a.em-item-read-more.button, a.em-event-book-now.button):active {
  transform: translateY(3px) rotate(0deg) !important;
  box-shadow: 0 5px 0 var(--fim-ink) !important;
}

/* --- B) Buchungs-Submit Button --- */
:root body .em-booking-section.em-booking-form-buttons.em-booking-buttons > input[type="submit"].em-form-submit.em-booking-submit.em-button.em-button-1 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 160px !important;
  height: 42px !important;
  position: relative !important;
  overflow: hidden !important;
  color: var(--fim-ink) !important;
  border: 1px solid var(--fim-ink) !important;
  border-radius: 50px !important;
  box-shadow: 10px 12px var(--fim-ink) !important;
  text-decoration: none !important;
  padding: 0.65em 1.25em !important;
  font: 700 1rem/1.2 inherit !important;
  cursor: pointer !important;
  background-color: var(--fim-purple) !important;
  background-image: linear-gradient(to bottom right, var(--fim-accent) 50%, transparent 50%) !important;
  background-size: 200% 200% !important;
  background-position: 100% 100% !important;
  background-repeat: no-repeat !important;
  transition: background-position 600ms ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out, transform .6s ease-in-out !important;
  transform: none !important;
}

:root body .em-booking-section.em-booking-form-buttons.em-booking-buttons > input[type="submit"].em-form-submit.em-booking-submit.em-button.em-button-1:hover {
  background-position: 0 0 !important;
  background-color: var(--fim-purple-hover) !important;
  transform: rotate(4deg) !important;
}

:root body .em-booking-section.em-booking-form-buttons.em-booking-buttons > input[type="submit"].em-form-submit.em-booking-submit.em-button.em-button-1:active {
  transform: translateY(3px) rotate(0deg) !important;
  box-shadow: 0 5px 0 var(--fim-ink) !important;
}

body .em-event-bookings input[type="submit"].em-form-submit.em-booking-submit:is(:focus,:focus-visible) {
  outline: 3px solid var(--fim-green) !important;
  outline-offset: 2px !important;
  background: var(--fim-green) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.em-item-actions, .em-item-actions.input {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

body.page-id-1752 .em-search-submit .button-primary {
  background-color: #afa1ff !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: bold !important;
  padding: 10px 25px !important;
  box-shadow: 0 5px 0 #000000;
  transition: all 0.2s ease-in-out;
}

body.page-id-1752 .em-search-submit .button-primary:hover {
  background-color: #8a7de8 !important;
  box-shadow: 0 2px 0 #000000;
  transform: translateY(3px);
}

/* ==========================================================================
5. EVENTS MANAGER SPECIFICS
========================================================================== */

/* --- A) Layout Grid Single Event --- */
.em-event-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr);
  grid-template-areas:
    "content sidebar"
    "booking booking";
  gap: 130px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 20px;
  box-sizing: border-box;
  width: 100%;
}

.em-event-content {
  grid-area: content;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  font-size: clamp(1rem, 1vw + 0.9rem, 1.15rem);
  line-height: 1.6;
  max-width: 100%;
}

.event-sidebar {
  grid-area: sidebar;
  min-width: 0;
  max-width: 380px;
  width: 100%;
  justify-self: end;
  overflow: visible !important;
}

.em-event-bookings {
  grid-area: booking;
  min-width: 0;
  margin-top: 40px;
  width: 100%;
  max-width: 100%;
}

.event-page-header {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: 120px 20px !important;
  margin-bottom: 80px !important;
  width: 100% !important;
}

.event-page-header h1 {
  color: #ffffff !important;
  font-size: 3.5rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

.single-event article .entry-title,
.single-event article > header {
  display: none !important;
}

/* --- B) Listenansicht & Filter --- */
.fim-filter-controls, .custom-checkboxes {
  margin: 0 !important;
  padding: 0 !important;
}

.fim-search-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  margin-bottom: 30px !important;
}

.custom-event-list-wrapper .custom-event-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #efefef;
}

.custom-event-list-wrapper .custom-event-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.custom-event-list-wrapper .custom-event-title {
  font-size: 28px;
  font-weight: normal;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 8px;
}

.custom-event-list-wrapper .custom-event-title a {
  color: #ff0000;
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important;
}

.custom-event-list-wrapper .custom-event-title a:hover {
  color: #555;
}

.custom-event-list-wrapper .custom-event-date {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 19px;
  color: #555;
}

.custom-event-list-wrapper .custom-event-date .fa-calendar-days {
  font-size: 22px;
  color: #3b9e06;
}

.custom-event-list-wrapper .custom-event-links {
  display: flex;
  gap: 25px;
}

.custom-event-list-wrapper .custom-event-links a {
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: #333 !important;
  color: #ff0000 !important;
  font-size: 16px;
  transition: all 0.2s ease !important;
}

.custom-event-list-wrapper .custom-event-links a:hover {
  color: #ffb83c !important;
  text-decoration-color: #ffb83c !important;
}

/* --- C) Detail Rows (Icons + Text in Sidebar) --- */
.detail-row, .em-event-cancelled.em-notice {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start;
  gap: 2rem;
  margin-bottom: 30px !important;
  text-align: left;
}

.detail-row i, .detail-row .fa, .detail-row .fa-solid, .em-event-cancelled i {
  font-size: 32px;
  min-width: 32px;
  max-width: 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3b9e06;
}

.detail-row span, .detail-row div, .em-event-cancelled span {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  color: #222;
  flex: 1;
  word-break: break-word !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  font-size: clamp(0.95rem, 2vw, 2rem) !important;
}

.calendar-add-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  margin-top: 12px !important;
  flex-wrap: wrap !important;
}

.calendar-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  background: #f8f9fa !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  color: #0d6efd !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 6px 12px !important;
  gap: 5px !important;
  cursor: pointer !important;
}

.calendar-btn:hover {
  background: #e9ecef !important;
  border-color: #0d6efd !important;
}

/* --- D) Tabs (NEBENEINANDER OHNE SCROLL) --- */
.custom-tabs { margin: 32px 0; }

.tabs-header {
  display: flex !important;
  gap: 50px;
  justify-content: flex-start;
  margin-bottom: 16px;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

.tab-link {
  background: none;
  border: none;
  color: #222;
  padding: 0 24px 8px 24px;
  border-bottom: 6px solid transparent;
  transition: border-color 0.2s;
  cursor: pointer;
  outline: none;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-size: clamp(1rem, 2.5vw, 2.5rem) !important;
}

.tab-link.active {
  border-bottom-color: #ffc44d;
  color: #222;
}

.tab-panel {
  display: none;
  font-size: 1.4rem;
  margin-top: 12px;
}

.tab-panel.active { display: block; }

/* --- E) Dozenten & Social Icons --- */
.event-lecturer-name {
  margin: 22px 0 15px;
  font-size: 2.2rem;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
}

.event-lecturer-name a {
  color: #222 !important;
  text-decoration: none !important;
  border-bottom: 3px solid #222 !important;
  padding-bottom: 2px;
  transition: border-bottom-color 0.3s ease, color 0.3s ease !important;
}

.event-lecturer-name a:hover {
  color: #000 !important;
  border-bottom-color: var(--fim-accent) !important;
}

.lecturer-img-mask img, .event-lecturer img {
  width: 170px !important;
  height: 170px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  box-shadow: 0 6px 32px rgba(80, 80, 80, 0.1);
  background: #fff;
}

.elementor-social-icons-wrapper.elementor-grid {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: wrap !important;
}

.elementor-social-icons-wrapper.elementor-grid a.elementor-social-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
}

.elementor-social-icons-wrapper.elementor-grid .elementor-social-icon-linkedin { background-color: #0077B5 !important; }
.elementor-social-icons-wrapper.elementor-grid .elementor-social-icon-xing { background-color: #026466 !important; }

.elementor-social-icons-wrapper.elementor-grid a.elementor-social-icon i,
.elementor-social-icons-wrapper.elementor-grid a.elementor-social-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.elementor-social-icons-wrapper.elementor-grid a.elementor-social-icon:focus-visible {
  box-shadow: 0 0 0 3px var(--fim-green) !important;
  outline: none !important;
}

/* ==========================================================================
POPCORN MASKE FÜR DOZENTEN (Override)
========================================================================== */
.event-lecturer img.lecturer-image {
  -webkit-mask-image: url('https://fim-schulung.de/files/2025/12/popcorn_schablone.png') !important;
  mask-image: url('https://fim-schulung.de/files/2025/12/popcorn_schablone.png') !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  object-position: 35% center !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.15)) !important;
  width: 280px !important;
  height: 280px !important;
  object-fit: cover !important;
  image-rendering: -webkit-optimize-contrast !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

.event-lecturer img.lecturer-image:hover {
  transform: scale(1.02) rotate(2deg) !important;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.2)) !important;
}

@media (max-width: 600px) {
  .event-lecturer img.lecturer-image {
    width: 200px !important;
    height: 200px !important;
  }
}

/* --- F) KURSKALENDER - BLAUE ÜBERSCHRIFTEN & LINKS --- */
html body #content h3.em-item-title[style],
html body h3.em-item-title[style],
html body h3.em-item-title,
html body .em-item-title,
h3.em-item-title[style],
h3.em-item-title,
.em-item-title {
  color: #2b6aff !important;
}

html body #content h3.em-item-title[style] a,
html body h3.em-item-title[style] a,
html body h3.em-item-title a,
html body .em-item-title a,
h3.em-item-title[style] a,
h3.em-item-title a,
.em-item-title a {
  color: #2b6aff !important;
  text-decoration: none !important;
  font-size: clamp(3rem, 3.5vw, 6rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body #content h3.em-item-title[style] a:hover,
html body h3.em-item-title a:hover,
h3.em-item-title a:hover,
.em-item-title a:hover {
  color: #1a4acc !important;
  text-decoration: underline !important;
}


/* ==========================================================================
6. RESPONSIVE ANPASSUNGEN & FINAL FIXES
========================================================================== */

/* --- TABLET (unter 1100px) --- */
@media (max-width: 1100px) {
  .em-event-layout {
    grid-template-columns: 1fr 280px;
    gap: 40px;
    padding: 30px 15px;
  }
  .em-event-content { font-size: clamp(0.95rem, 1vw + 0.8rem, 1.05rem); }
  .event-sidebar { max-width: 300px; }
}

/* --- MOBILE (unter 900px) --- */
@media (max-width: 900px) {
  .em-event-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "content"
      "sidebar"
      "booking" !important;
    gap: 30px !important;
    padding: 20px 10px !important;

    /* Container-Reset für sauberen Fluss */
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  .em-event-content, .event-sidebar, .em-event-bookings, .single-event .entry-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .em-event-content {
    font-size: clamp(1rem, 2vw + 0.5rem, 1.1rem);
    line-height: 1.7;
  }

  .calendar-add-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .calendar-btn {
    width: 100% !important;
    padding: 10px 12px !important;
  }
}

/* --- MOBILE SMALLER (unter 767px) --- */
@media screen and (max-width: 767px) {
  .fim-search-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .custom-checkboxes {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
    width: 100% !important;
  }
  .round-checkbox {
    width: 100% !important;
    display: flex !important;
  }
}

/* --- MOBILE HANDY (unter 640px) --- */
@media (max-width: 640px) {
  .em-item-actions, .em-item-actions.input {
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin-top: 20px !important;
  }
  .em-item-actions :is(a.button, .button) {
    flex: 1 1 auto !important;
    height: 48px !important;
  }
  .event-sidebar h3, .event-calendarbox h3 {
    font-size: clamp(1.1rem, 4vw, 1.4rem) !important;
  }

  /* DETAILS-ICONS ABSTÄNDE */
  .detail-row {
    gap: 1.2rem !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
  }
  .detail-row i {
    min-width: 24px !important;
    text-align: center !important;
    margin-top: 4px !important;
  }
}

/* --- MOBILE LISTE (unter 600px) --- */
@media screen and (max-width: 600px) {
  .em-event-layout {
    padding: 10px 8px !important;
    gap: 25px !important;
  }
  .custom-event-list-wrapper .custom-event-title { font-size: 22px !important; }
  .custom-event-list-wrapper .custom-event-links {
    flex-direction: column !important;
    gap: 15px !important;
    align-items: flex-start !important;
  }
  .custom-event-list-wrapper .custom-event-links a {
    display: inline-block;
    padding: 5px 0;
  }
  html body .em-calendar-preview.em-list .em-event.em-item {
    display: block !important;
    flex-direction: column !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
  }
  html body .em-calendar-preview.em-list .em-item-image { display: none !important; }
  .event-lecturer img { width: 100px !important; height: 100px !important; }

  .event-page-header, .em-booking-form-section-details {
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* --- MINIMALGRÖSSE (unter 380px) --- */
@media (max-width: 380px) {
  .event-sidebar h3 { font-size: 0.9rem !important; }
}

/* ==========================================================================
7. FINAL PATCH (Text-Umbruch, H2, Tabs einzeilig)
========================================================================== */

/* 1. ÜBERSCHRIFTEN IM BUCHUNGSFORMULAR */
html body .em-booking-form h3,
html body .em-booking-form h3.em-booking-section-title,
html body .em-booking-section-title,
html body h3.em-booking-form-details-title,
html body section.em-booking-form-section-details h3.em-booking-section-title.em-booking-form-details-title {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  font-size: clamp(1rem, 4vw, 1.4rem) !important;
  line-height: 1.3 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  margin-bottom: 15px !important;
  text-align: left !important;
}

/* 2. SEMINARBESCHREIBUNG & H2 ÜBERSCHRIFTEN (Gegen das Abschneiden oben) */
.single-event .entry-content h2,
.em-event-content h2,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
  margin-top: 20px !important;
  padding-top: 10px !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  text-align: left !important;
  line-height: 1.3 !important;
}

/* 3. "FIM Methodenexperte..." (Der grüne Header) */
.event-page-header h1, .entry-title {
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
  font-size: clamp(1.8rem, 6vw, 3.5rem) !important;
  line-height: 1.2 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4. GENERELLE SICHERHEIT: Alle Überschriften auf Mobile dürfen umbrechen */
@media (max-width: 900px) {
  .single-event h2, .single-event h3, .single-event h4,
  .em-event-content h2, .em-event-content h3,
  .elementor-widget-text-editor h2,
  .elementor-widget-text-editor h3 {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }

/* 5. FINAL PATCH: TABS (EINZEILIG, KLEIN, ORIGINALFARBEN) */
  .tabs-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100% !important;
    justify-content: space-between !important;
    gap: 5px !important;
    margin-bottom: 20px !important;
  }

  .tab-link {
    background: none !important;
    border: none !important;
    border-bottom: 4px solid transparent !important;
    padding: 0 5px 8px 5px !important;
    font-size: 16px !important;
    flex: 1 1 auto !important;
    text-align: center !important;
    min-width: auto !important;
  }

  .tab-link.active {
    border-bottom-color: #ffc44d !important;
    border-bottom-width: 4px !important;
  }
}

/* --- EXTREM KLEINE HANDYS (unter 480px) --- */
@media (max-width: 480px) {
  .tabs-header { gap: 4px !important; }
  .tab-link {
    font-size: 12px !important;
    padding: 0 2px 5px 2px !important;
    border-bottom-width: 3px !important;
  }
  .tab-link.active { border-bottom-width: 3px !important; }
}

/* ==========================================================================
8. FIX: LISTEN (Bullets Einrückung)
========================================================================== */

/* Entfernt die tiefe Einrückung der Listen in den Tabs und im Content */
#content .main .entry-content ul,
.tab-panel ul,
.custom-tabs ul,
.elementor-widget-text-editor ul {
  padding-left: 20px !important; /* Standard ist oft 40px, hier reduziert auf 20px */
  margin-left: 0 !important;     /* Entfernt zusätzlichen Außenabstand */
  list-style-position: outside !important; /* Bullet steht links neben dem Textblock */
}

/* Optional: Etwas mehr Platz zwischen den einzelnen Punkten für bessere Lesbarkeit */
#content .main .entry-content li,
.tab-panel li,
.custom-tabs li {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 8px !important;
}

/* ==========================================================================
9. HEADER FIX (Linksbündige Ausrichtung)
========================================================================== */

/* 1. Den Container im Header begrenzen (damit er nicht breiter ist als der Text unten) */
#pageheader .container,
.event-page-header {
  max-width: 1140px !important;   /* Standard-Breite für Desktop */
  width: 100% !important;
  margin-left: auto !important;   /* Zentriert den Container selbst */
  margin-right: auto !important;
  padding-left: 20px !important;  /* Sicherheitsabstand links */
  padding-right: 20px !important;
  text-align: left !important;    /* Inhalt linksbündig */
}

/* 2. Die Überschrift selbst links ausrichten */
#pageheader .entry-title,
#pageheader h1,
.event-page-header h1 {
  text-align: left !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Optional: Mobil etwas mehr Abstand, falls nötig */
@media (max-width: 768px) {
  #pageheader .container,
  .event-page-header {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ==========================================================================
10. FINAL FIX: CHECKBOX (Flexbox Layout)
========================================================================== */

/* 1. Selektoren für ALLE Checkbox-Labels */
.em-booking-form p.input-checkbox label,
.em-booking-form p.em-consent-checkbox label,
.input-field-data_privacy_consent label,
.input-field-data_comms_consent label,
.round-checkbox {
  display: flex !important;           /* Aktiviert Spalten-Layout */
  align-items: flex-start !important; /* Richtet Kästchen oben bündig mit 1. Zeile aus */
  position: relative !important;
  padding-left: 0 !important;         /* Reset, da wir Flexbox nutzen */
  text-indent: 0 !important;
  gap: 15px !important;               /* Abstand zwischen Kreis und Text */
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
  width: 100% !important;
  cursor: pointer !important;
}

/* 2. Das echte Input-Feld komplett aus dem Layout nehmen */
.em-booking-form p.input-checkbox label input[type="checkbox"],
.em-booking-form p.em-consent-checkbox label input[type="checkbox"],
.input-field-data_privacy_consent label input,
.input-field-data_comms_consent label input {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  z-index: -1 !important;
}

/* 3. Der Kreis (Das Custom Design) */
.em-booking-form p.input-checkbox label::before,
.em-booking-form p.em-consent-checkbox label::before,
.input-field-data_privacy_consent label::before,
.input-field-data_comms_consent label::before,
.round-checkbox::before {
  content: "" !important;
  display: inline-block !important;
  flex-shrink: 0 !important;          /* VERHINDERT, DASS DER KREIS GEQUETSCHT WIRD */
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: 2px solid var(--fim-border) !important;
  background: var(--fim-beige) !important;
  margin-top: 2px !important;         /* Feinjustierung vertikal zur ersten Textzeile */
  position: static !important;        /* Wichtig für Flexbox */
}

/* 4. Der Haken (Checkmark) */
.em-booking-form p.input-checkbox label::after,
.em-booking-form p.em-consent-checkbox label::after,
.input-field-data_privacy_consent label::after,
.input-field-data_comms_consent label::after,
.round-checkbox::after {
  left: 12px !important;              /* Da Parent nun Flex ist, müssen wir hier tricksen */
  top: 14px !important;               /* Position relativ zum Label Container */
  /* HINWEIS: Bei Flexbox ist absolute Positionierung von ::after manchmal tricky.
     Wir nutzen die Position relativ zum Label, nicht zum ::before */
}

/* 5. CHECKED STATE (Logik muss hier angepasst werden für Flex) */
/* Wir nutzen :has() wo möglich, oder den direkten Input Status wenn er im DOM davor steht */

/* Wenn Input checked ist -> Haken sichtbar machen */
.em-booking-form p.input-checkbox input:checked + label::after, /* Falls Input VOR Label */
.em-booking-form p.input-checkbox label:has(input:checked)::after,
.em-booking-form p.em-consent-checkbox label:has(input:checked)::after,
.input-field-data_privacy_consent label:has(input:checked)::after {
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
}

/* Wenn Input checked ist -> Kreis grün färben */
.em-booking-form p.input-checkbox label:has(input:checked)::before,
.em-booking-form p.em-consent-checkbox label:has(input:checked)::before,
.input-field-data_privacy_consent label:has(input:checked)::before {
  background: var(--fim-green) !important;
  border-color: var(--fim-green) !important;
}

/* Erzwingt Beige auch bei Browser-Autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    /* Hier den Hex-Code deiner Beige-Farbe eintragen! */
    -webkit-box-shadow: 0 0 0 1000px #e8e6d9 inset !important;
    
    /* Textfarbe schwarz behalten */
    -webkit-text-fill-color: #000 !important;
    
    /* Optional: Verhindert, dass der Hintergrund gewechselt wird */
    transition: background-color 5000s ease-in-out 0s;
}