@charset "UTF-8";
/*------------------------------------------------------------------
[Convention Schedule & Program Planner – WordPress Event Management Plugin Main Frontend Module Stylesheet]

Project:        Convention Schedule & Program Planner – WordPress Event Management
Version:        1.7.0
Author:         LitteraNovix
Primary use:    Event Management & Display

Table of Contents:

1. CONTROLS & NAVIGATION (Filters, Search, Tabs)
2. CALENDAR VIEWS
   2.1 Table View (List)
   2.2 Grid View (Cards)
3. COMPACT CARD VIEW (Shortcode Support)
4. TICKET SYSTEM INTEGRATION (Main Layouts)
5. SIDEBAR WIDGET
6. CONTAINER QUERIES (Page Builder Column Fixes)
-------------------------------------------------------------------*/


/* =======================================================
   1. CONTROLS & NAVIGATION (Filters, Search, Tabs)
   ======================================================= */
   
/*  damit die Sidebar-Breite erkannt wird */
/* Container für beide Shortcodes (Kalender & Zeitplan) definieren */
html body .ec-event-calendar-app,
html body .ec-timetable-wrapper {
    container-type: inline-size;
    container-name: ec-card-container;
    width: 100%; 
    box-sizing: border-box;
}







html body .ec-event-calendar-app .ec-app-container .ec-controls {
  background: transparent;
  margin-bottom: 20px;
}

/* =========================================================================
   START-ZUSTAND DES BEDIENBEREICHS

   Datums-Reiter und -Kacheln stehen nicht im HTML - der Server liefert mit
   #ec-main-select-wrapper und #ec-tabs-container nur leere Behaelter, gefuellt
   werden sie von renderControls() im Skript. Ohne diese Regel sah man deshalb
   beim Laden erst die klassische Optik bzw. eine leere Flaeche, in die der
   Inhalt dann sichtbar hineinsprang.

   visibility statt display: Der Platz bleibt reserviert, die Seite darunter
   rutscht also nicht. min-height entspricht ungefaehr einer Kachelreihe.

   Die Klasse setzt shortcodes.php, entfernt wird sie am Ende von
   renderControls(). Die Zeitregel darunter ist die Absicherung, falls das
   Skript gar nicht dazu kommt - ohne sie bliebe die Bedienung unsichtbar.
   ========================================================================= */
html body .ec-event-calendar-app.ec-booting .ec-app-container .ec-controls {
  visibility: hidden;
  min-height: 92px;
  animation: ecBootFallback 0s linear 2s forwards;
}

@keyframes ecBootFallback {
  to {
    visibility: visible;
  }
}

/* Bewusst KEINE Ausnahme fuer prefers-reduced-motion: Die Regel oben bewegt
   nichts, sie schaltet nach Ablauf der Zeit nur die Sichtbarkeit um. Eine
   Ausnahme haette das Aufblitzen ausgerechnet denen zurueckgebracht, die
   ruhige Oberflaechen eingestellt haben. */
html body .ec-event-calendar-app .ec-app-container #ec-main-select-wrapper {
  margin-bottom: 15px;
  display: flex; /* Element nebeneinander ausrichten */
  align-items: center; /* Vertikale Zentrierung */
  gap: 15px; /* Abstand zwischen Label und Dropdown */
}
html body .ec-event-calendar-app .ec-app-container #ec-tabs-container {
  margin-bottom: 20px;
}

html body .ec-event-calendar-app .ec-app-container .ec-tabs-wrapper {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* Erlaubt dem Label, den notwendigen Platz einzunehmen und normal umzubrechen */
html body .ec-event-calendar-app .ec-app-container #ec-main-select-wrapper strong {
  white-space: normal;
  flex-shrink: 0;
  min-width: 100px; 
}

/* Tabs */
html body .ec-event-calendar-app .ec-app-container .ec-tab-btn {
  background: var(--ec-tab-bg, #fff);
  border: 1px solid #ccc; /* wenn Tab-Button keinen Rand haben soll dann anstatt #ccc auf transparent setzen */
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  border-bottom: 3px solid transparent;
  transition: all 0.15s ease-in-out;
  border-radius: 4px 4px 0 0;
}
html body .ec-event-calendar-app .ec-app-container .ec-tab-btn.active {
  background: var(--ec-tab-bg, #fff);
  color: #000;
  border-bottom: 3px solid var(--ec-primary);
}
html body .ec-event-calendar-app .ec-app-container .ec-tab-btn:hover {
  background: var(--ec-primary);
  color: #fff;
  border-color: var(--ec-primary);
}

/* Toolbar Container */
html body .ec-event-calendar-app .ec-app-container .ec-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  background-color: var(--ec-bg-light, #fff8f0);
  padding: 10px 15px;
  border-radius: 8px;
  border: 1px solid #eee;
  gap: 10px;
  width: 100%;
}
html body .ec-event-calendar-app .ec-app-container .ec-toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  width: auto;
}
html body .ec-event-calendar-app .ec-app-container .ec-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto; 
}
html body .ec-event-calendar-app .ec-app-container .ec-fav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Placeholder für Dropdowns */
html body .ec-event-calendar-app .ec-app-container #ec-venue-filter-placeholder {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
  flex: 0 1 auto;
  justify-content: flex-end; /* Schiebt die Dropdowns nach rechts */
}

/* Auf Desktop den neuen Mobile-Button verstecken */
html body .ec-event-calendar-app .ec-app-container .ec-mobile-filter-toggle {
  display: none;
}

/* --- 1. SUCHE --- */
html body .ec-event-calendar-app .ec-search-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 2 1 200px;
  margin: 0;
}



html body .ec-event-calendar-app .ec-app-container #ec-search-input {
  width: 100%;
  height: 42px;
  padding-left: 42px;  
  padding-right: 48px;
  border-radius: 4px;
  border: 1px solid #ccc;
  margin: 0;
  line-height: normal;
  box-shadow: none;
}
html body .ec-event-calendar-app .ec-app-container #ec-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
html body .ec-event-calendar-app .ec-search-icon {
  position: absolute;
  left: 12px; 
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px; 
  background-color: #999;
  z-index: 5;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center/contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center/contain;
  pointer-events: none;
}
html body .ec-event-calendar-app .ec-search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -1px;
  cursor: pointer;
  font-size: 28px;
  font-weight: normal;
  color: #ccc;
  line-height: 1;
  z-index: 10;
  padding: 8px 10px;
}
html body .ec-event-calendar-app .ec-search-clear:hover {
  color: var(--ec-primary);
}

/* --- 2. DROPDOWNS (Fairness-Logik) --- */
html body .ec-event-calendar-app .ec-app-container #ec-main-select-wrapper select {
  width: auto; 
  max-width: 300px;
  flex-grow: 0;
  height: 42px;
  min-height: 42px;
  padding: 0 30px 0 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  margin: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
  flex: 0 1 auto;
}

/* Best-effort Styling der Dropdown-Einträge (Kontrast). Wirkt zuverlässig nur auf
   Desktop-Browsern - auf den meisten mobilen Browsern rendert das Betriebssystem die
   aufgeklappte Liste nativ und ignoriert Options-Styling weitgehend, ist aber
   harmlos zu setzen und verbessert die Lesbarkeit dort, wo es greift. */
html body .ec-event-calendar-app .ec-app-container select option {
  background-color: #ffffff;
  color: #333333;
}
html body .ec-event-calendar-app .ec-app-container select option:checked,
html body .ec-event-calendar-app .ec-app-container select option:hover {
  background-color: var(--ec-primary, #f76b15);
  color: #ffffff;
}

html body .ec-event-calendar-app .ec-app-container #ec-main-select-wrapper select {
  font-weight: bold;
}

/* --- 2.1 FILTER-DROPDOWNS MIT MEHRFACHAUSWAHL (Ort / Kategorie) ---
   Aufgeklappt wie im Ausstellerplugin (.eem-custom-select in eem-core.css):
   Suchfeld, "Filter zuruecksetzen", Checkboxen und Farbfelder mit denselben
   Massen und Farben. Geschlossen passt sich das Feld der Kalender-Leiste an
   (42px, Pfeil wie die uebrigen Auswahlfelder). Frueher stand hier ein Hybrid
   aus eigener Liste (Desktop) und nativem <select> (Mobil); ein natives Feld
   kann keine Mehrfachauswahl mit Suche, deshalb gibt es auf allen Geraeten
   nur noch die eigene Liste. Aenderungen am Aussehen in beiden Plugins
   nachziehen. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select {
  position: relative;
  display: inline-block;
  min-width: 150px;
  max-width: 300px;
  width: auto;
  flex: 0 1 auto;
  flex-grow: 0;
  height: 42px;
  margin: 0;
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-app-container #ec-venue-filter-placeholder .ec-multi-select {
  width: auto;
  max-width: 300px;
  display: inline-block;
  flex: 0 1 auto;
}

html body .ec-event-calendar-app .ec-app-container .ec-toolbar.ec-filters-expanded #ec-venue-filter-placeholder .ec-multi-select {
  width: 100%;
  max-width: 100%;
  display: block;
  flex: 1 1 100%;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-trigger {
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 30px 0 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  color: #333;
  font-size: 14px;
  box-sizing: border-box;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .ec-event-calendar-app .ec-app-container .ec-venue-color-square {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.1);
}

/* In der Liste regelt der Flex-Abstand den Platz neben dem Farbfeld - wie
   .eem-select-color-square im Ausstellerplugin. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-option .ec-venue-color-square {
  margin-right: 0;
}

/* text-overflow greift nur am <span> mit dem Text, nicht am Flex-Container. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-trigger > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  min-width: 200px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 1000;
  max-height: 350px;
  overflow-y: auto;
  padding: 0 0 10px 0;
  box-sizing: border-box;
  text-align: left;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select.ec-open .ec-multi-select-options {
  display: block;
  animation: ecMultiSelectFadeIn 0.2s ease forwards;
}

@keyframes ecMultiSelectFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Die aufklappbare Toolbar im Modern-Layout braucht overflow:hidden - das ist
   die Klappmechanik (max-height 0 -> 800px). Genau dieses overflow schneidet
   aber die absolut positionierte Liste am Toolbar-Rand ab. Solange ein
   Dropdown offen ist, laeuft keine Klapp-Animation, deshalb darf die Toolbar
   in diesem Moment gefahrlos ueberstehen; das z-index hebt die Liste ueber die
   nachfolgenden Event-Karten.
   Ausgenommen ist das schwebende Filter-Sheet: Es ist position:fixed mit
   eigenem z-index, beides wuerde diese Regel ueberschreiben. Dort klappt die
   Liste ohnehin im Fluss auf (siehe FLOATING-Block).
   Gleiches gilt fuer die Sprechblase beim Ueberfahren (.ec-has-tip:hover). */
html body .ec-event-calendar-app:not(.ec-floating-search-active) .ec-app-container .ec-toolbar:has(.ec-multi-select.ec-open, .ec-multi-select.ec-has-tip:hover),
html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded):has(.ec-multi-select.ec-open, .ec-multi-select.ec-has-tip:hover) {
  overflow: visible;
  position: relative;
  z-index: 60;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search {
  padding: 10px 15px 5px 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search-inner {
  position: relative;
  width: 100%;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search input[type="search"] {
  width: 100%;
  margin: 0;
  padding: 6px 30px 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search input[type="search"]:focus {
  outline: none;
  border-color: var(--ec-primary);
}

/* Kein zweites, natives Loeschsymbol neben dem eigenen X. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search input[type="search"]::-webkit-search-decoration,
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search input[type="search"]::-webkit-search-cancel-button,
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search input[type="search"]::-webkit-search-results-button,
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  cursor: pointer;
  font-size: 16px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-search-clear:hover {
  color: var(--ec-primary);
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-reset {
  margin-top: 6px;
  text-align: left;
}

/* Ohne Auswahl gibt es nichts zurueckzusetzen: sichtbar, aber gedimmt. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-reset.ec-is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-reset-link {
  font-size: 12px;
  color: var(--ec-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-reset-link .dashicons {
  font-size: 14px;
  width: 14px;
  height: 14px;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-reset-link:hover {
  text-decoration: underline;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-option {
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 14px;
  color: #444;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-option:hover {
  background: #f9f9f9;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-option input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--ec-primary);
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-option-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sprechblase am geschlossenen Feld: Ab zwei gewaehlten Eintraegen steht im
   Feld nur die Anzahl ("3 ausgewaehlt"), beim Ueberfahren zeigt die Blase,
   welche es sind. Stil wie die Sprechblase am Rollennamen (.ec-role-bubble in
   ec-speakers.css) - die Datei laedt nicht auf jeder Kalenderseite, daher
   eigene Regeln. Nur mit Maus: Beim Antippen oeffnet sich ohnehin die Liste
   mit den Haekchen. Bei offener Liste bleibt die Blase aus.
   Gegenstueck im Ausstellerplugin: .eem-select-tip in eem-core.css. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-tip {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 1001;
  width: max-content;
  min-width: 160px;
  max-width: min(300px, 80vw);
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--ec-primary, #f76b15);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  font-size: 13px;
  line-height: 1.4;
  color: #444;
  text-align: left;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  pointer-events: none;
}

/* Die Spitze zeigt auf das Feld; sichtbar bleibt nur die obere Haelfte mit
   dem Rahmen. */
html body .ec-event-calendar-app .ec-app-container .ec-multi-select-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--ec-primary, #f76b15);
  border-left: 1px solid var(--ec-primary, #f76b15);
  transform: rotate(45deg);
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-tip-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

html body .ec-event-calendar-app .ec-app-container .ec-multi-select-tip-item .ec-venue-color-square {
  margin-right: 0;
}

@media (hover: hover) {
  html body .ec-event-calendar-app .ec-app-container .ec-multi-select.ec-has-tip:not(.ec-open):hover .ec-multi-select-tip {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .ec-event-calendar-app .ec-app-container .ec-multi-select-tip {
    transform: none;
    transition: none;
  }
}

/* --- 3. BUTTONS (Rechts) --- */
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle,
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter.ec-reset-filter:not(.ec-hidden) {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 0 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  color: #555;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  margin: 0;
  white-space: nowrap;
}

/* --- SHARE-BUTTON (Immer Quadrat) --- */
html body .ec-event-calendar-app .ec-app-container .ec-btn-share {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0;
  font-size: 0;
}

/* Stellt sicher, dass das SVG-Icon im Share-Button sichtbar bleibt */
html body .ec-event-calendar-app .ec-app-container .ec-btn-share .ec-icon-svg {
  width: 20px;
  height: 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: none;
  color: #555;
}

/* --- TICKET-BUTTON DESKTOP (Verschwindet bei ec-hidden) --- */
html body .ec-event-calendar-app .ec-app-container #ec-ticket-btn-toolbar:not(.ec-hidden) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
  order: 3;
  transition: none;
  transform: none;
}
/* REAKTIVIERUNG HOVER-EFFEKT */
html body .ec-event-calendar-app .ec-app-container #ec-ticket-btn-toolbar:hover {
  background-color: var(--ec-primary);
  border-color: var(--ec-primary);
  color: #fff;
}

/* JS-gesteuerte Sichtbarkeit */
html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-inline-hidden {
    display: none !important;
}

/* 2. SPEZIAL-KLASSE: Wenn der Button via JS umgebrochen wird (Mobil-Ansicht) */
html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-is-wrapped {
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
  padding: 0 15px;
  font-size: 1rem;
  display: inline-flex;
}

html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-is-wrapped .ec-ticket-text-logic {
  display: inline;
  margin-left: 8px;
}
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle .ec-svg path, 
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle .ec-svg polygon, 
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle .ec-svg line,
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter .ec-icon-svg path,
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter .ec-icon-svg polygon,
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter .ec-icon-svg line {
  stroke: currentColor; 
  fill: none;
}
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter.ec-reset-filter .ec-icon-svg,
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter.ec-reset-filter svg {
  background: transparent !important;
}
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle:hover, 
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle.active, 
html body .ec-event-calendar-app .ec-app-container .ec-btn-share:hover,
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter:hover {
  background: var(--ec-primary);
  color: #fff;
  border-color: var(--ec-primary);
}
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle .ec-icon-svg,
html body .ec-event-calendar-app .ec-app-container .ec-view-toggle .ec-svg {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter .ec-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background: transparent;
}
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter .ec-btn-text {
  line-height: 1;
  display: inline-block;
}
html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter .ec-icon-svg svg {
  width: 100%;
  height: 100%;
  background: transparent;
}

/* Favorite Filter Button & Upcoming Filter Button */
html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter,
html body .ec-event-calendar-app .ec-app-container .ec-btn-upcoming-filter {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  padding: 0 15px;
  margin: 0;
  cursor: pointer;
  font-weight: 700;
  border-radius: 4px;
  background-color: #fff;
  border: 2px solid var(--ec-primary);
  color: var(--ec-primary);
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

/* Gezielte Ausrichtung nur für das Icon im Toolbar-Button */
html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter .ec-icon-heart,
html body .ec-event-calendar-app .ec-app-container .ec-btn-upcoming-filter .ec-icon-calendar-svg {
  width: 24px; /* Etwas kompakter für den Button */
  height: 24px;
  position: relative;
  margin-right: 8px;
}

html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter .ec-icon-heart {
  background-color: var(--ec-primary);
}

/* Klassischer Filter-Button: Maske und Farbe kommen aus ec-core.css
   (.ec-icon-svg.ec-icon-fav-alert). Größe hier trotzdem explizit, weil
   ec-timetable.css .ec-btn-fav-filter .ec-icon-svg global auf 18px setzt und
   auf Seiten mit Kalender UND Timetable sonst die Ladereihenfolge entscheidet. */
html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter .ec-icon-svg.ec-icon-fav-alert {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

/* Hover-Zustand korrigieren - !important nötig um inline JS zu schlagen falls vorhanden */
html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter:hover,
html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter.active,
html body .ec-event-calendar-app .ec-app-container .ec-btn-upcoming-filter:hover,
html body .ec-event-calendar-app .ec-app-container .ec-btn-upcoming-filter.active {
  background-color: var(--ec-primary); 
  color: #fff;
}

html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter:hover .ec-icon-heart,
html body .ec-event-calendar-app .ec-app-container .ec-btn-fav-filter.active .ec-icon-heart {
  background-color: #fff;
}


/* SHARE BUTTON – Inline-SVG Absicherung */
html body .ec-event-calendar-app .ec-app-container .ec-btn-share svg {
  display: block;
}

html body .ec-event-calendar-app .ec-app-container .ec-btn-share svg path {
  fill: #555;
}

/* SHARE BUTTON – Hover */
html body .ec-event-calendar-app .ec-app-container .ec-btn-share:hover svg path {
  fill: #fff;
}

/* Pfad kommt aus ec-core.css, hier nur die Darstellung */
html body .ec-event-calendar-app .ec-icon-heart {
  /* FIX: 96% verhindert das Subpixel-Clipping (Abschneiden) im Firefox beim Skalieren */
  -webkit-mask-size: 96%;
  mask-size: 96%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
}

html body .ec-event-calendar-app .ec-icon-grid-view {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
}

html body .ec-event-calendar-app .ec-icon-list-round-bullet {
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  display: inline-block;
}

/* Farbe für Inline-SVGs (wie den Share-Button) */
html body .ec-event-calendar-app .ec-icon-svg svg path {
  fill: currentColor;
}

html body .ec-event-calendar-app .ec-app-container .ec-card-actions .ec-icon-svg,
html body .ec-event-calendar-app .ec-app-container .ec-table-actions .ec-icon-svg {
  width: 36px;
  height: 36px;
}

html body .ec-event-calendar-app .ec-app-container .ec-ical-btn,
html body .ec-event-calendar-app .ec-app-container .ec-fav-btn,
html body .ec-event-calendar-app .ec-app-container .ec-ticket-btn {
  background: transparent !important;
  background-color: transparent !important;
  border: none;
  padding: 0 !important;
  margin: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}

html body .ec-event-calendar-app .ec-app-container .ec-ical-btn {
  margin-right: 8px;
  font-size: 1.4rem;
  opacity: 0.7;
  color: #555;
}

html body .ec-event-calendar-app .ec-app-container .ec-fav-btn {
  font-size: 2.2rem;
  color: #555;
}

html body .ec-event-calendar-app .ec-app-container .ec-ticket-btn {
  margin-right: 8px;
  color: #555;
  opacity: 0.8;
}


html body .ec-event-calendar-app .ec-app-container .ec-ical-btn:hover,
html body .ec-event-calendar-app .ec-app-container .ec-ticket-btn:hover {
  background: transparent;
  background-color: transparent;
  opacity: 1;
  transform: scale(1.2);
}

html body .ec-event-calendar-app .ec-app-container .ec-fav-btn:hover {
  background: transparent;
  background-color: transparent;
  color: #555;
  transform: scale(1.2);
}

html body .ec-event-calendar-app .ec-app-container .ec-fav-btn.active {
  color: var(--ec-primary);
  opacity: 1.2;
}

/* ZUSATZ: TABS AUSGRAUEN BEI SUCHE / FAVORITEN */

/* Wenn der Container die Klasse 'ec-is-loading' hat (durch JS gesetzt) */
html body .ec-event-calendar-app #ec-tabs-container.ec-is-loading .ec-tabs-wrapper,
html body .ec-event-calendar-app #ec-tabs-container.ec-is-loading .ec-mobile-date-select {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(80%);
  transition: all 0.3s ease;
  cursor: not-allowed;
}

/* Positionierung & Zentrierung des Hilfe-Containers für Event Bilder */
html body .ec-event-calendar-app .ec-app-container .ec-help-wrap {
  display: inline-flex;
  align-items: center;      
  justify-content: center; 
  vertical-align: middle;  
  margin-left: 10px;
}

/* Toolbar Logic */
html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-hidden {
    display: none;
}

/* Hilfsklasse für Icons in Buttons */
html body .ec-event-calendar-app .ec-icon-margin-right {
    margin-right: 8px;
}

html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-inline-hidden {
    display: none;
}

/* Mobiles Datums-Dropdown auf dem Desktop verstecken */
html body .ec-event-calendar-app .ec-mobile-date-select,
html body .ec-timetable-wrapper .ec-mobile-date-select {
  display: none;
}


/* =========================================
	2. CALENDAR VIEWS
   ========================================= */

/* Pagination Basis-Layout & Abstand nach oben (Wichtig!) */
html body .ec-event-calendar-app .ec-app-container #ec-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px; /* Abstand zu den Kacheln wiederhergestellt */
    padding-top: 20px;
    border-top: 1px solid #eee;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

html body .ec-event-calendar-app .ec-pager-center {
    justify-content: center;
}

/* Paginierung Helper  */
html body .ec-event-calendar-app .ec-pager-center {
    justify-content: center;
}
html body .ec-event-calendar-app .ec-pager-between {
    justify-content: space-between;
}
html body .ec-event-calendar-app .ec-pager-start {
    justify-content: flex-start;
}

/* --- Fix: Zentrierung des "Mehr laden..." Buttons --- */
html body .ec-event-calendar-app .ec-app-container #ec-pagination.ec-pager-center .ec-pagination-right {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------------
   PAGINATION ZAHLEN & LOAD MORE (Natives Design wiederherstellen)
   --------------------------------------------------------- */
/* Seitenzahlen (1, 2, 3...) */
html body .ec-event-calendar-app .ec-app-container .ec-page-num,
html body .ec-event-calendar-app .ec-app-container .ec-page-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    margin: 0 2px;
    background-color: #fff !important;
    color: #555 !important;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: none;
    text-decoration: none;
}

/* Hover & Active States für Seitenzahlen */
/* Dropdown links und Seitenbuttons rechts auf derselben Unterkante: gleiche Hoehe
   (42px) und keine Theme-Aussenabstaende (select/button bekommen dort oft margin-bottom). */
html body .ec-event-calendar-app .ec-app-container #ec-pagination {
    align-items: flex-end;
}

html body .ec-event-calendar-app .ec-app-container .ec-pagination-left,
html body .ec-event-calendar-app .ec-app-container .ec-pagination-right {
    align-items: center;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Optik bewusst komplett festgelegt (!important), damit Theme-Select-Stile
   nicht hineinfunken. Identisch mit .eem-pagination-select im Aussteller-Plugin -
   Aenderungen bitte in beiden Plugins gleich nachziehen. */
html body .ec-event-calendar-app .ec-app-container select.ec-pagination-select {
    box-sizing: border-box !important;
    width: 230px;
    min-width: 140px;
    max-width: 100%;
    height: 42px !important;
    margin: 0 !important;
    padding: 0 36px 0 12px !important;
    border: 1px solid var(--ec-primary, #f76b15) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23555%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    color: #555 !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    box-shadow: none !important;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

html body .ec-event-calendar-app .ec-app-container select.ec-pagination-select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ec-primary, #f76b15) 25%, transparent) !important;
}

/* Zahlen und Pfeile mittig statt an der Grundlinie ausrichten: sonst sitzt der
   Icon-Button (Grundlinie = Dashicon-Glyphe) hoeher als die Zahlen-Buttons. */

html body .ec-event-calendar-app .ec-app-container .ec-page-num,
html body .ec-event-calendar-app .ec-app-container .ec-page-nav {
    box-sizing: border-box;
    height: 42px !important;
    vertical-align: middle;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1;
}

/* Vor/Zurueck als quadratische Icon-Buttons (Dashicons-Chevron wie im Aussteller-Plugin) */
html body .ec-event-calendar-app .ec-app-container .ec-page-nav.ec-page-nav-icon {
    width: 42px;
    min-width: 42px;
    padding: 0;
}

html body .ec-event-calendar-app .ec-app-container .ec-page-nav.ec-page-nav-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

/* Wie im Aussteller-Plugin: Hover = heller Grund, Rahmen + Schrift in Primaerfarbe;
   Aktiv = gefuellt in Primaerfarbe mit weisser Zahl. !important noetig, weil die
   Basisregel oben Hintergrund und Schriftfarbe per !important festlegt. */
html body .ec-event-calendar-app .ec-app-container .ec-page-num:not(.active):hover,
html body .ec-event-calendar-app .ec-app-container .ec-page-num:not(.active):focus-visible,
html body .ec-event-calendar-app .ec-app-container .ec-page-nav:hover:not(:disabled),
html body .ec-event-calendar-app .ec-app-container .ec-page-nav:focus-visible:not(:disabled) {
    background-color: color-mix(in srgb, var(--ec-primary) 6%, #fff) !important;
    color: var(--ec-primary) !important;
    border-color: var(--ec-primary) !important;
    box-shadow: none !important;
}

html body .ec-event-calendar-app .ec-app-container .ec-page-num.active,
html body .ec-event-calendar-app .ec-app-container .ec-page-num.active:hover {
    background-color: var(--ec-primary) !important;
    color: #fff !important;
    border-color: var(--ec-primary) !important;
    box-shadow: none !important;
}

/* Load More Button natives Design */
html body .ec-event-calendar-app .ec-app-container .ec-load-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 25px;
    margin: 20px 0;
    background-color: #fff !important;
    color: var(--ec-primary) !important;
    border: 2px solid var(--ec-primary);
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* !important nötig, da der Grundzustand oben ebenfalls !important setzt */
html body .ec-event-calendar-app .ec-app-container .ec-load-more-btn:hover,
html body .ec-event-calendar-app .ec-app-container .ec-load-more-btn:focus-visible {
    background-color: var(--ec-primary) !important;
    color: #fff !important;
    border-color: var(--ec-primary);
}

/* Fallback für das Lade-Icon */
html body .ec-event-calendar-app .ec-app-container .ec-load-more-btn .ec-svg {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    flex-shrink: 0;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22512%22 height=%22512%22 viewBox=%220 0 512 512%22%3E%3Cpath fill=%22%23000000%22 d=%22M204 240H68a36 36 0 0 1-36-36V68a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36Zm240 0H308a36 36 0 0 1-36-36V68a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36ZM204 480H68a36 36 0 0 1-36-36V308a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36Zm240 0H308a36 36 0 0 1-36-36V308a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36Z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22512%22 height=%22512%22 viewBox=%220 0 512 512%22%3E%3Cpath fill=%22%23000000%22 d=%22M204 240H68a36 36 0 0 1-36-36V68a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36Zm240 0H308a36 36 0 0 1-36-36V68a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36ZM204 480H68a36 36 0 0 1-36-36V308a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36Zm240 0H308a36 36 0 0 1-36-36V308a36 36 0 0 1 36-36h136a36 36 0 0 1 36 36v136a36 36 0 0 1-36 36Z%22/%3E%3C/svg%3E");
}

html body .ec-event-calendar-app .ec-app-container .ec-next-day-btn .ec-svg-next-day {
    transition: transform 0.2s ease;
}

html body .ec-event-calendar-app .ec-app-container .ec-next-day-btn:hover .ec-svg-next-day {
    transform: translateX(4px);
}

/* =========================================
   2.1 Table View (List) - MODERN CARD LAYOUT
   ========================================= */
   
/* 1. Den äußeren Kasten der Tabelle unsichtbar machen */
html body .ec-event-calendar-app .ec-app-container .ec-table-wrapper {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible; /* Wichtig für den Schatten */
  width: 100%;
  margin-bottom: 0;
}

/* 2. Die Tabelle aufbrechen (Abstand zwischen den "Karten") */
html body .ec-event-calendar-app .ec-app-container .ec-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 15px; /* 15px Abstand zwischen den Events */
  margin: 0;
  border: none;
}

/* 3. Tabellen-Kopf (Header) modernisieren und Theme-Striche zwingend entfernen */
html body .ec-event-calendar-app .ec-app-container table.ec-table,
html body .ec-event-calendar-app .ec-app-container .ec-table thead,
html body .ec-event-calendar-app .ec-app-container .ec-table thead tr,
html body .ec-event-calendar-app .ec-app-container .ec-table th {
    border: none;
    border-top: none;
    border-bottom: none;
    background: transparent;
    background-color: transparent !important;
    box-shadow: none !important;
}

html body .ec-event-calendar-app .ec-app-container .ec-table th {
    color: #888888; /* Kräftiges, aber nicht dominantes Grau */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    padding: 0 15px 10px 15px; /* Zwingt dem Theme unser Padding auf */
    text-align: left;
    vertical-align: bottom; /* Richtet Text bündig nach unten aus */
    white-space: nowrap;
}

/* Visuelle Korrektur: Den Titel "Zeit" exakt über die echten Uhrzeiten schieben 
   (gleicht den 5px Farbrand der Kacheln aus) */
html body .ec-event-calendar-app .ec-app-container .ec-table th:first-child {
    padding-left: 20px;
}

/* 4. Die Reihen-Container für Hover und Schatten vorbereiten */
html body .ec-event-calendar-app .ec-app-container .ec-table tbody tr {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: transparent; 
}
html body .ec-event-calendar-app .ec-app-container .ec-table tbody tr:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* 5. Die einzelnen Zellen formen den oberen und unteren Rand der Karte */
html body .ec-event-calendar-app .ec-app-container .ec-table td {
  padding: 15px;
  border-top: 1px solid var(--ec-border, #eee);
  border-bottom: 1px solid var(--ec-border, #eee);
  border-right: none;
  border-left: none;
  vertical-align: middle;
  color: #444;
  text-align: left;
  background-color: #fff;
}

/* 6. Die erste Zelle (Uhrzeit) erhält die linke Rundung und den dynamischen Farbstreifen */
html body .ec-event-calendar-app .ec-app-container .ec-table td:first-child {
  border-left: 5px solid var(--ec-table-row-border, var(--ec-border, #ccc));
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

/* 7. Die letzte Zelle (Buttons) erhält die rechte Rundung */
html body .ec-event-calendar-app .ec-app-container .ec-table td:last-child {
  border-right: 1px solid var(--ec-border, #eee);
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* 8. JS-Farb-Injektion reparieren (Vererbung auf die Zellen) */
html body .ec-event-calendar-app .ec-table-row-custom { 
    border-left: none !important; 
    background-color: transparent !important; 
}
html body .ec-event-calendar-app .ec-table-row-custom td {
    background-color: var(--ec-table-row-bg, #ffffff) !important; 
}
html body .ec-event-calendar-app .ec-table-row-custom td:first-child {
    border-left: 5px solid var(--ec-table-row-border, var(--ec-primary)) !important;
}

/* 9. Layout der Inhalte innerhalb der Karte */
html body .ec-event-calendar-app .ec-app-container .ec-col-image {
  width: 125px;
  padding-right: 15px;
}
html body .ec-event-calendar-app .ec-app-container .ec-table-thumb {
  width: 125px;
  height: 90px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  display: block;
  position: relative;
}
html body .ec-event-calendar-app .ec-app-container .ec-col-fav {
  width: 55px; 
  vertical-align: middle;
  padding: 10px 0; 
  text-align: center;
}
html body .ec-event-calendar-app .ec-app-container .ec-table-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
html body .ec-event-calendar-app .ec-app-container .ec-table-actions .ec-ical-btn,
html body .ec-event-calendar-app .ec-app-container .ec-table-actions .ec-fav-btn,
html body .ec-event-calendar-app .ec-app-container .ec-table-actions .ec-ticket-btn {
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
html body .ec-event-calendar-app .ec-app-container .ec-col-time {
  width: 1%;
  white-space: nowrap;
  font-weight: 700;
  color: #333;
  font-size: 1rem;
}
html body .ec-event-calendar-app .ec-app-container .ec-col-content h3 {
  margin: 0 0 4px 0;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
}
html body .ec-event-calendar-app .ec-app-container .ec-col-content h3 a {
  text-decoration: none;
  color: #222;
}
html body .ec-event-calendar-app .ec-app-container .ec-col-content h3 a:hover {
  color: var(--ec-primary);
}
html body .ec-event-calendar-app .ec-app-container .ec-table-excerpt {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
}
html body .ec-event-calendar-app .ec-app-container .ec-col-venue {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
html body .ec-event-calendar-app .ec-table-date-info,
html body .ec-event-calendar-app .ec-table-date-meta {
    font-size: 0.8rem;
    color: var(--ec-primary);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 4px;
}
html body .ec-event-calendar-app .ec-img-link-wrap,
html body .ec-event-calendar-app .ec-excerpt-link-wrap {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ==========================================================================
   List View: Hour Dividers (Table Mode)
   Envato Compliant: 100% !important free. Uses high specificity to override themes.
   ========================================================================== */

/* 1. Die komplette Reihe (<tr>) unsichtbar machen, damit Hover/Schatten nicht greifen */
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row {
    box-shadow: none;
    background-color: transparent;
    border: none;
    margin: 0;
    outline: none;
}

/* Hover-Effekte für diese spezifische Zeile komplett deaktivieren */
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row:hover {
    transform: none;
    box-shadow: none;
    background-color: transparent;
}

/* 2. Zelle (<td>) zurücksetzen und Geisterlinien vernichten */
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row td {
    padding: 0;
    border: none;
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    background: transparent;
    box-shadow: none;
    outline: none;
}

/* 3. Blockiert Linien, die Page-Builder heimlich als Pseudo-Elemente injizieren */
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row::before,
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row::after,
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row td::before,
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row td::after {
    display: none;
    content: none;
    border: none;
}

/* 4. Kappe auch den unteren Rand des Tabellen-Kopfs */
html body .ec-event-calendar-app .ec-app-container table.ec-table thead,
html body .ec-event-calendar-app .ec-app-container table.ec-table thead tr,
html body .ec-event-calendar-app .ec-app-container table.ec-table th {
    /* border-bottom: 0px solid transparent; */
	display: none;
}

/* 5. Der eigentliche Container für Text und Linie */
html body .ec-event-calendar-app .ec-app-container .ec-list-hour-divider {
    display: flex;
    align-items: center;
    margin: 25px 0 10px 0;
    padding: 0;
}

/* Verhindert den doppelten Abstand ganz oben in der Liste */
html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row:first-child .ec-list-hour-divider {
    margin-top: 5px;
}

/* 6. Text-Styling (Uhrzeit) */
html body .ec-event-calendar-app .ec-app-container .ec-list-hour-divider span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ec-primary, #111827); 
    padding-right: 15px;
    opacity: 0.9;
}

/* 7. Die dezente Trennlinie neben der Uhrzeit */
html body .ec-event-calendar-app .ec-app-container .ec-list-hour-divider::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background-color: var(--ec-border, #e5e7eb); 
    display: block;
}


/* =========================================
   2.2 Grid View (Cards)
   ========================================= */

/* --- Boxed-Modus (Option "Grid Layout Mode" / ec_grid_width_mode) ---
   Standard ist "full": Das Grid nutzt die volle Breite, die das Theme ihm
   gibt - auf sehr breiten Bildschirmen entstehen dadurch beliebig viele
   Spalten. "boxed" deckelt die App auf 1200px und zentriert sie.

   Bewusst am Wrapper statt nur am Grid: Toolbar, Tabs, Liste und Pagination
   muessen mitziehen, sonst haengen schmale Kacheln unter einer
   bildschirmbreiten Filterleiste.

   Der Wert 1200px ist fest verdrahtet und darf niemals unter 1025px sinken:
   .ec-event-calendar-app ist selbst der Query-Container (ec-card-container,
   siehe Zeile 29-35), und die komplette mobile Umschaltung haengt an
   @container ec-card-container (max-width: 1024px). Ein kleinerer Deckel
   wuerde das Plugin dauerhaft in den Mobil-Modus zwingen - ebenso das JS
   (isMobileOrPwa() in ec-main-script.js misst die Container-Breite gegen
   dieselbe 1024px-Grenze).

   Eine eigene grid-template-columns-Regel braucht es nicht: Bei 1200px
   ergeben sich aus minmax(240px, 1fr) + 20px Gap automatisch 4 Spalten.

   Die Regel haengt am data-Attribut, das ausschliesslich der Kalender-
   Shortcode setzt. Monitor, Timetable, Live-View und Hub teilen sich
   denselben Wrapper und duerfen nicht mit gedeckelt werden. */
html body .ec-event-calendar-app[data-grid-mode="boxed"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

html body .ec-event-calendar-app .ec-app-container .ec-container.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 20px;
  width: 100%;
  overflow-anchor: none;
}
html body .ec-event-calendar-app .ec-app-container .ec-card {
  background-color: #ffffff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}

/* rlaubt der Herz-Animation, über den Kachelrand zu ragen */
html body .ec-event-calendar-app .ec-app-container .ec-card {
    overflow: visible; /* Wichtig: Öffnet den Container */
    z-index: 1; /* Damit das Herz über der nächsten Kachel liegt */
}

/* Runde Ecken reparieren (weil overflow: hidden weg ist) */
/* Wir runden das Bild oben und den Footer unten separat ab */
html body .ec-event-calendar-app .ec-app-container .ec-card-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 8px;
}
html body .ec-event-calendar-app .ec-app-container .ec-card:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

html body .ec-event-calendar-app .ec-app-container .ec-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--ec-primary);
}
html body .ec-event-calendar-app .ec-app-container .ec-card-image {
  height: 160px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: #eee;
  border-bottom: 1px solid #eee;
  position: relative;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
html body .ec-event-calendar-app .ec-app-container .ec-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--ec-primary);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-title {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  line-height: 1.3;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-wrap: break-word;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-title a {
  text-decoration: none;
  color: #333;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-excerpt {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 15px;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-wrap: break-word;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* Richtet alle drei Icons an ihrer vertikalen Mitte aus */
  margin-top: auto;
  gap: 14px;
  padding-top: 10px;
}

/* Sicherstellen, dass die Icons im Grid die richtige Größe haben */
html body .ec-event-calendar-app .ec-app-container .ec-card-actions .ec-ical-btn {
  font-size: 1.5rem; /* Kalender etwas größer */
  opacity: 0.7;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-actions .ec-fav-btn {
  font-size: 2.5rem; /* Herz passend dazu */
}
html body .ec-event-calendar-app .ec-app-container .ec-card-actions .ec-ical-btn:hover {
  opacity: 1;
}
html body .ec-event-calendar-app .ec-app-container .ec-card-content .date-badge {
  display: inline-block;
  font-size: 0.95rem;
  background: var(--ec-secondary);
  color: #333;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
}
/* Erlaubt das Hinauswachsen aus den Kacheln (Grid Mode) */
html body .ec-event-calendar-app .ec-card {
    overflow: visible;
    z-index: 1;
}
/* Grid Card Venue Styles & Dynamic Images important needed for dynamic JS-Steuerung */
html body .ec-event-calendar-app .ec-venue-custom-style {
    background-color: var(--ec-venue-bg, #ffffff) !important;
    border-left: 5px solid var(--ec-venue-border, var(--ec-primary)) !important;
}

html body .ec-event-calendar-app .ec-card-image { 
    background-image: var(--ec-card-bg); 
    background-size: cover; 
    background-position: center;
    height: 160px;
    width: 100%;
}

html body .ec-event-calendar-app .ec-table-thumb,
html body .ec-event-calendar-app .ec-mobile-image { 
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
}


html body .ec-event-calendar-app .ec-card-image-placeholder { 
    background-color: rgba(0,0,0,0.05); 
}

html body .ec-event-calendar-app .ec-card-placeholder {
    background-color: rgba(0,0,0,0.05);
}

/* =========================================
   PAST EVENTS (Favorites View)
   ========================================= */
html body .ec-event-calendar-app .ec-past-event .ec-card-image,
html body .ec-event-calendar-app .ec-past-event .ec-table-thumb-wrapper,
html body .ec-event-calendar-app .ec-past-event .ec-mobile-image-wrapper,
html body .ec-event-calendar-app .ec-past-event .ec-time-wrapper,
html body .ec-event-calendar-app .ec-past-event .ec-table-date-info,
html body .ec-event-calendar-app .ec-past-event .ec-mobile-venue,
html body .ec-event-calendar-app .ec-past-event .ec-meta-row {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Erlaubt das Hinauswachsen aus den Tabellen-Zeilen */
html body .ec-event-calendar-app .ec-table-wrapper,
html body .ec-event-calendar-app .ec-table,
html body .ec-event-calendar-app .ec-table tr,
html body .ec-event-calendar-app .ec-table td {
    overflow: visible;
}

/* Table Row Venue Styles & Thumbnails important needed for dynamic JS-Steuerung*/
html body .ec-event-calendar-app .ec-table-row-custom {
    border-left: 4px solid var(--ec-table-row-border, var(--ec-primary)) !important;
    background-color: var(--ec-table-row-bg, #ffffff) !important;
}
html body .ec-event-calendar-app .ec-table-thumb { 
    background-image: var(--ec-table-thumb-bg); 
    background-size: cover; 
    background-position: center;
}
html body .ec-event-calendar-app .ec-mobile-image { 
    background-image: var(--ec-mobile-img-bg); 
    background-size: cover; 
    background-position: center;
}

/* Speziell für die Card Actions (der untere Bereich der Karte) */
html body .ec-event-calendar-app .ec-card-actions,
html body .ec-event-calendar-app .ec-table-actions {
    overflow: visible;
    z-index: 50;
}
html body .ec-event-calendar-app .ec-card-venue-name {
    color: var(--ec-venue-color);
    filter: brightness(0.8);
}



/* =========================================
   3. COMPACT CARD VIEW (SHORTCODE SUPPORT)
   ========================================= */

/* 1. Die Box (Rahmen & Schatten) */
html body .ec-compact-card-wrapper {
    width: 100%;
	max-width: 1200px;
	margin: 0 auto 20px auto;
    font-family: inherit;
    container-type: inline-size; 
    container-name: ec-card-container;
}

html body .ec-compact-card {
    background: linear-gradient(rgba(var(--ec-local-bg-rgb), 0.15), rgba(var(--ec-local-bg-rgb), 0.15)), #ffffff;
    border: 2px solid #ddd;  
    border-radius: 8px;      
    padding: 0;   
    display: flex;           
    flex-wrap: wrap;
    gap: 0; /* Gap auf 0, wir regeln Abstände via Margin/Padding */
    position: relative;
    overflow: hidden; /* Zwingend für saubere Ecken */
}

/* 2. Datum (Links oder Oben) */
html body .ec-compact-date {
    flex: 0 0 55px;
    border: 2px solid var(--ec-local-accent, #f76b15);
    border-radius: 6px;
    padding: 10px 5px;
    text-align: center;
    align-self: flex-start;
    color: #333;
    white-space: nowrap;
    background-color: rgba(255,255,255,0.8);
    margin: 20px 0 0 20px; 
}

html body .ec-cd-day { display: block; font-size: 0.75rem; text-transform: uppercase; color: #333; line-height: 1; margin-bottom: 5px; white-space: nowrap; }
html body .ec-cd-num { 
    display: block; 
    font-size: 2rem; 
    font-weight: 800; 
    line-height: 1; 
    color: var(--ec-local-accent, #f76b15); 
    white-space: nowrap; 
}
html body .ec-cd-month { display: block; font-size: 0.85rem; line-height: 1; margin-top: 5px; color: #333; }

/* 3. Inhalt (Rechts) */
html body .ec-compact-content { 
    flex: 1; 
    min-width: 250px;
    padding: 20px 20px 10px 20px;
}

/* Wenn keine Buttons da sind, ist der Content das letzte Element.
   Dann setzen wir den unteren Abstand auf 20px (statt 10px), 
   damit es oben und unten symmetrisch aussieht. */
html body .ec-compact-content:last-child {
    padding-bottom: 20px;
}

html body .ec-compact-title { 
    margin: 0 0 15px 0; 
    font-size: 1.5rem; 
    font-weight: bold; 
    line-height: 1.3; 
    color: #222; 
}

/* Das Raster für Zeit, Ort */
html body .ec-compact-meta-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 5px 10px; 
}
html body .ec-cm-item { 
    display: flex; 
    align-items: flex-start; 
    gap: 10px; 
    font-size: 0.95rem; 
    line-height: 1.4; 
}

html body .ec-compact-card .ec-cm-text a {
    /* Nutzt die lokale Akzentfarbe der Karte (Orts- oder Primärfarbe) */
    color: var(--ec-local-accent);
    text-decoration: none;
    transition: filter 0.2s ease-in-out;
    border-bottom: none;
}

html body .ec-compact-card .ec-cm-text a:hover {
    /* Dezenter Hover-Effekt wie auf der Single Page */
    filter: brightness(0.8);
    text-decoration: none;
}

html body .ec-cm-item .ec-svg {
    /* 1. Größe & Position erzwingen */
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 3px;
    
    /* 2. Farbe erzwingen (Das ist die Farbe des Vierecks/Icons) */
    background-color: var(--ec-local-accent, #ccc);
    
    /* 3. MASKEN: Damit aus dem Viereck ein Icon wird */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Sicherstellen, dass kein Hintergrundbild stört */
    background-image: none;
}

/* Uhr, Pin, Person und Sprache (Meta-Zeilen) holen ihren Pfad aus ec-core.css.
   Dort gibt es dafür auch einen Selektor ohne .ec-event-calendar-app, weil
   .ec-compact-card als Shortcode ohne diesen Wrapper gerendert wird. */

/* --- Definition für den Haken --- */
html body .ec-btn-compact .ec-icon-check,
html body .ec-icon-check {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
    width: 24px;
    height: 24px;
    display: inline-block;
    background-image: none;
}

/* 4. FOOTER (Buttons) */
html body .ec-compact-white-bg, .ec-compact-actions {
	background-color: var(--ec-card-footer-bg, #ffffff);
    width: 100%;
    margin: 15px 0 0 0;
    padding: 15px 20px; 
    border-top: 1px solid rgba(0,0,0,0.1); 
    
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    box-sizing: border-box;
}

/* Buttons Styling */
html body .ec-btn-compact {
    flex: 1 0 auto !important;
    min-width: 140px;
    height: 42px;
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    overflow: visible; 
    white-space: nowrap;
    
    padding: 0 15px;
    gap: 6px;
    font-size: 1rem;
    font-weight: 700;
    
    background-color: #fff;
    color: var(--ec-primary, #0056b3);
    border: 2px solid var(--ec-primary, #0056b3);
    border-radius: 4px;
    text-decoration: none;
    line-height: 1; 
}

/* Hover & Active States */
html body .ec-btn-compact:hover { 
    background-color: var(--ec-primary, #0056b3); 
    color: #ffffff; 
    text-decoration: none; 
}

/* A) Basis für alle Button-Icons */
html body .ec-btn-compact .ec-icon-svg { 
    width: 25px; 
    height: 25px; 
    flex-shrink: 0;
    display: inline-block;
}

/* B) TICKET & KALENDER: Masken VERBIETEN, Bild erzwingen (damit sie bunt sind) */
html body .ec-btn-compact .ec-icon-ticket-svg,
html body .ec-btn-compact .ec-icon-calendar-svg {
    background-color: transparent;
    -webkit-mask-image: none;
    mask-image: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Die Bild-Pfade selbst stehen in ec-core.css */

/* C) HERZ ICON: Muss eine Maske bleiben (damit es sich färben kann) */
html body .ec-btn-compact .ec-icon-heart {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    background-image: none;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* D) SHARE ICON */
html body .ec-btn-compact .ec-icon-share-square {
    width: 22px;
    height: 22px;
    background-color: currentColor;
    background-image: none;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

html body .ec-compact-actions .ec-compact-share-btn.ec-copied {
    background-color: #10b981;
    border-color: #10b981;
    color: #ffffff;
}

html body .ec-compact-actions .ec-compact-share-btn.ec-copied .ec-icon-share-square {
    background-color: #ffffff;
}

/* COMPACT BUTTONS LOGIC (SMART ICONS) */
/* 1. Hilfsklasse für Screenreader */
html body .ec-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Identische Regeln für Modus "true" (Immer aktiv) */
html body .ec-cb-always .ec-compact-actions {
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
}
html body .ec-cb-always .ec-btn-compact {
    flex: 1 1 0px; 
    width: auto;
    min-width: 0; 
    padding: 0; 
    justify-content: center;
    font-size: 0;
    line-height: 0;
}

/* bei 'true' wird der Text immer versteckt */
html body .ec-cb-always .ec-btn-text {
    display: none;
}

/* Icon Resets */
html body .ec-cb-always .ec-btn-compact .ec-icon-svg,
html body .ec-cb-always .ec-btn-compact .ec-icon-ticket-svg,
html body .ec-cb-always .ec-btn-compact .ec-icon-calendar-svg,
html body .ec-cb-always .ec-btn-compact .ec-icon-heart {
    margin: 0;
}

/* Hilfsklasse für Meta-Trenner im Shortcode */
html body .ec-event-calendar-app .ec-meta-sep-line {
    opacity: 0.5;
    margin: 0 5px;
}

/* Ergänzung für Sektion 1 / Hilfsklassen */
html body .ec-event-calendar-app .ec-btn-margin-right {
    margin-right: 8px;
}

/* ================================
   B) ICON-LOGIK (Größe & Art) 
   ================================ */

/* 1. Basis-Definition der Icons (Mask-Pfad aus ec-core.css) */
html body .ec-icon-check {
    background-color: currentColor;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

/* 2. Text verstecken bei 'always' (Shortcode) */
html body .ec-cb-always .ec-btn-compact .ec-btn-text {
    display: none;
}

/* 3. Icon-Styling im Compact Mode */
html body .ec-cb-mobile .ec-btn-compact .ec-icon-heart,
html body .ec-cb-always .ec-btn-compact .ec-icon-heart,
html body .ec-cb-mobile .ec-btn-compact .ec-icon-check,
html body .ec-cb-always .ec-btn-compact .ec-icon-check {
    width: 24px; 
    height: 24px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 4. AKTIV-ZUSTAND (Einheitlich für alle) */
html body .ec-btn-compact.active {
    background-color: var(--ec-primary, #f76b15);
    color: #fff;
    border-color: var(--ec-primary, #f76b15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


html body .ec-btn-compact.active::before {
    content: none;
    display: none;
}

/* 5. Hover-Effekte */
html body .ec-btn-compact:hover,
html body .ec-btn-compact.active:hover {
    background-color: var(--ec-primary, #f76b15);
    color: #fff;
}

/* Icons werden weiß bei Hover oder Active */
html body .ec-btn-compact:hover .ec-icon-heart,
html body .ec-btn-compact.active .ec-icon-heart,
html body .ec-btn-compact.active .ec-icon-check,
html body .ec-btn-compact:hover .ec-icon-check {
    background-color: #ffffff; /* !important entfernt, da html body spezifisch genug ist */
}

/* =========================================
   4. TICKET SYSTEM INTEGRATION (MAIN LAYOUTS)
   ========================================= */

html body .ec-event-calendar-app #ec-ticket-btn-toolbar {
  /* 1. Zentrierung */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* 2. Maße */
  height: 42px;
  padding: 0 15px;
  margin: 0; /* Überschreibt Inline-Margin durch Spezifität */
  border-radius: 4px;
  /* 3. Design */
  background-color: #fff;
  border: 1px solid #ccc;
  color: #555;
  /* 4. Schrift */
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* 5. Verhalten */
  flex-shrink: 0;
  transition: all 0.2s;
  order: 3;
}
/* Hover-Effekt */
html body .ec-event-calendar-app #ec-ticket-btn-toolbar:hover {
  background-color: var(--ec-primary);
  color: #fff;
  border-color: var(--ec-primary);
}
/* Gezielte Vergrößerung des Icons im Toolbar-Ticket-Button */
html body .ec-event-calendar-app .ec-app-container #ec-ticket-btn-toolbar .ec-icon-ticket-svg {
  width: 34px; 
  height: 34px;
  margin-right: 0px;
  display: inline-block;
}

/* Optionale vertikale Feinjustierung, falls das Icon nach der Vergrößerung zu tief sitzt */
html body .ec-event-calendar-app .ec-app-container #ec-ticket-btn-toolbar .ec-icon-ticket-svg {
  position: relative;
  top: 0px;
}


/* =========================================
  5. SIDEBAR WIDGET
   ========================================= */


/* Compact Card Titel nur im Widget kleiner machen */
html body .ec-widget-compact-card .ec-compact-title {
    font-size: 1.1rem; /* Deutlich kleiner (ca. 17-18px) */
    line-height: 1.3 ;
    margin-bottom: 5px; /* Etwas kompakterer Abstand nach unten */
    font-weight: 700;   
}

/* Optional: Auch die Meta-Daten (Zeit/Ort) etwas kompakter, falls nötig */
html body .ec-widget-compact-card .ec-compact-meta-grid {
    gap: 5px;
}

/* =========================================
   6. MAIN MOBILE RESPONSIVE LOGIC with CONTAINER QUERIES (Page Builder & Sidebar Fix)
   ========================================= */

@container ec-card-container (max-width: 1024px) {

		.ec-event-calendar-app .ec-app-container .ec-controls {
	}

	html body .ec-event-calendar-app .ec-app-container .ec-controls {
    margin: 0 0 20px 0;
    padding: 0;
    width: 100%;
  }

	/* 1. Container: Bekommt Rand und erlaubt vertikale Anordnung */
  html body .ec-event-calendar-app .ec-app-container #ec-tabs-container {
    padding: 0 0px; /* Fügt den Rand hinzu, um bündig zu sein */
    margin-bottom: 20px;
    width: 100%;
  }
	
	
	
/* --- A. TABS: AUF MOBILE DURCH DROPDOWN ERSETZEN (NUR IM CLASSIC LAYOUT OHNE MODERN) --- */
  
	/* 1. Originale Buttons (Tabs) verstecken (Kalender & Timetable) */
  html body .ec-event-calendar-app.ec-filter-classic:not(.ec-filter-modern) .ec-tabs-wrapper,
  html body .ec-timetable-wrapper .ec-tabs-wrapper {
    display: none !important;
  }

/* 2. Neues Datums-Dropdown anzeigen (Kalender & Timetable) */
  html body .ec-event-calendar-app.ec-filter-classic:not(.ec-filter-modern) .ec-mobile-date-select,
  html body .ec-timetable-wrapper .ec-mobile-date-select {
    display: block;
    width: 100%;
    padding: 10px 15px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--ec-primary);
    border: 1px solid var(--ec-primary);
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    /* Weißes Pfeil-Icon für das Dropdown */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px auto;
    cursor: pointer;
    margin: 0;
  }

  html body .ec-event-calendar-app.ec-filter-modern .ec-mobile-date-select {
    display: none !important;
  }
  
/* ZUSATZ: Abstand unter dem Zeitplan-Dropdown.
   Frueher standen hier 25px. Das Dropdown sitzt im Timetable aber in
   .ec-timetable-mobile-nav - einem Flex-Container mit gap: 10px (ec-timetable.css).
   In Flexbox addiert sich das Margin des Kindes zum gap, die Luecke zum Button
   "Meine Favoriten" war dadurch 35px statt der gedachten 10px.
   Sichtbarer Abstand = dieser Wert + 10px gap, aktuell also 15px. */
   html body #ec-timetable-app .ec-mobile-date-select {
      margin-bottom: 5px;
   }
	
	
/* 1. Haupt-Dropdown-Wrapper: Schaltet von "nebeneinander" auf "untereinander" */
  html body .ec-event-calendar-app .ec-app-container #ec-main-select-wrapper {
	display: flex;
    padding: 0 0px;
    flex-direction: column; 
    align-items: stretch; /* FIX: Erlaubt NUR diesem Dropdown das Wachsen */
    gap: 5px; 
    width: 100%;
  }
	
/* 3. Dropdown-Feld muss volle Breite bekommen */

  /* FIX: .ec-app-container hinzugefügt, um die 300px vom Desktop zu überschreiben */
  html body .ec-event-calendar-app .ec-app-container #ec-main-select-wrapper select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Timetable im absoluten Originalzustand (unangetastet!) */
  html body .ec-timetable-wrapper #ec-timetable-select-wrapper select {
    width: 100%;
    max-width: none;
  }
  
	/* 5. Korrektur für den ausgewählten Eintrag im aufgeklappten Zustand */

  html body .ec-event-calendar-app .ec-mobile-date-select:focus,
  html body .ec-timetable-wrapper .ec-mobile-date-select:focus {
    color: var(--ec-primary);
    background-color: #fff;
	font-weight: 700;
    outline: none;
    /* Tauscht den weißen Pfeil gegen einen farbigen Pfeil aus, wenn aufgeklappt */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23f76b15%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
	
/* --- A. TOOLBAR & LAYOUT (GRID-BASIERT FÃœR CLASSIC MOBILE OHNE SCHWEBENDE SUCHE) --- */
@container ec-card-container (max-width: 1024px) {
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar {
      display: grid;
      grid-template-columns: 1fr 42px;
      gap: 10px;
      padding: 10px;
      width: 100%;
      box-sizing: border-box;
  }

  /* Hebt die Left/Right Container auf, damit das Grid direkt auf die Kinder greift */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar-left,
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar-right {
      display: contents;
  }

  /* --- REIHE 1: Suche + Filter Toggle --- */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-search-wrapper {
      grid-column: 1 / 2;
      grid-row: 1;
      width: 100%;
      margin: 0;
  }
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-mobile-filter-toggle {
      grid-column: 2 / 3;
      grid-row: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 42px;
      width: 42px;
      background-color: #fff;
      color: #555;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 0;
      margin: 0;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-mobile-filter-toggle {
      background-color: var(--ec-primary);
      color: #fff;
      border-color: var(--ec-primary);
  }
  /* Hover & Tastaturfokus: derselbe Farbwechsel wie im Aktiv-Zustand.
     Das Icon ist ein Inline-SVG mit stroke="currentColor" und folgt der color. */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-mobile-filter-toggle:hover,
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-mobile-filter-toggle:focus-visible {
      background-color: var(--ec-primary);
      color: #fff;
      border-color: var(--ec-primary);
  }

  /* --- REIHE 2: Favoriten + Teilen --- */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-fav-actions {
      grid-column: 1 / -1;
      grid-row: 2;
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      width: 100%;
      margin: 0;
  }
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-btn-fav-filter {
      flex: 1 1 auto;
      min-width: 0;
  }
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-btn-share {
      flex: 0 0 42px;
      width: 42px;
      padding: 0;
      justify-content: center;
  }

  /* --- VERSTECKTER BEREICH (Zugeklappt) --- */
  /* Envato-konform: Wir nutzen Spezifität statt !important */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar:not(.ec-filters-expanded) .ec-fav-actions,
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-venue-filter-placeholder,
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar:not(.ec-filters-expanded) .ec-toggles,
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-ticket-btn-toolbar,
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-toggle-upcoming {
      display: none;
  }

  /* --- EINGEBLENDETER BEREICH (Aufgeklappt) --- */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-search-wrapper {
      flex-wrap: wrap;
  }
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar button#ec-reset-filter.ec-reset-filter:not(.ec-hidden) {
      display: inline-flex;
      margin-top: 5px;
      width: 100%;
      flex: 1 1 100%;
      box-sizing: border-box;
      grid-column: 1 / -1;
  }
  
  html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter::before,
  html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter::after,
  html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter span::before,
  html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter span::after,
  html body .ec-event-calendar-app .ec-app-container button#ec-reset-filter#ec-reset-filter i {
      display: none;
  }

  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions {
      padding-top: 15px;
      margin-top: 10px;
      border-top: 1px solid #ddd;
      grid-row: 3;
  }
  
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded #ec-venue-filter-placeholder {
      display: flex;
      flex-direction: column;
      grid-column: 1 / -1;
      grid-row: 4;
      width: 100%;
      gap: 10px;
  }

  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column: 1 / -1;
      grid-row: 5;
      gap: 10px;
      width: 100%;
      margin: 0;
  }
  html body .ec-event-calendar-app .ec-app-container .ec-view-toggle {
      width: 100%;
      margin: 0;
  }

  /* Ticket Button in voller Breite mit Text (Row 7) */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar:not(.ec-hidden) {
      display: inline-flex;
      grid-column: 1 / -1;
      grid-row: 7;
      width: 100%;
      max-width: none;
      flex: 1 1 100%;
      justify-content: center;
      padding: 0 15px;
      margin: 25px 0 0 0;
      position: relative;
      height: 42px;
      font-size: 1.1rem;
  }
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar:not(.ec-hidden)::before {
      content: "";
      position: absolute;
      top: -15px;
      left: 0;
      right: 0;
      border-top: 1px solid #ddd;
  }
  
  /* Upcoming Button in voller Breite mit Text (Row 6) */
  html body .ec-event-calendar-app:not(.ec-floating-search-active):not(.ec-filter-modern) .ec-app-container .ec-toolbar.ec-filters-expanded #ec-toggle-upcoming {
      display: inline-flex;
      grid-column: 1 / -1;
      grid-row: 6;
      width: 100%;
      max-width: none;
      flex: 1 1 100%;
      justify-content: center;
      padding: 0 15px;
      margin: 0;
      height: 42px;
      font-size: 1.1rem;
  }
  html body .ec-event-calendar-app .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar .ec-ticket-text-logic {
      display: inline;
  }
}
}
/* ^ Schließt sowohl das @media (max-width:1024px) von Zeile 1770 (jetzt ebenfalls @container, siehe oben) als auch das
   @container ec-card-container (max-width:1024px) von Zeile 1671, dessen
   schließende Klammer zuvor fehlte — dadurch war der gesamte restliche
   Datei-Inhalt (Desktop-Override, Floating-Search, Ticket-Button, Toast usw.)
   versehentlich in diese Container-Query verschachtelt. */

/* =========================================
   GLOBALE HELFERKLASSEN
   Diese Regel stellt sicher, dass .ec-hidden IMMER gewinnt, egal was oben steht.
   Gilt bewusst breitenunabhängig (kein @media-Wrapper).
   ========================================= */
	html body .ec-event-calendar-app .ec-hidden,
	html body .ec-hidden,
	html body #ec-reset-filter.ec-hidden,
	html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-hidden,
	html body .ec-event-calendar-app #ec-ticket-btn-toolbar.ec-inline-hidden {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		flex: 0 0 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden;
	}
  html body .ec-event-calendar-app #ec-ticket-btn-toolbar .ec-mobile-hidden-text {
    display: inline;
    transition: none;
  }


  
/* =========================================
   MOBILE & TABLET ANPASSUNGEN (<= 1024px)
   Schriftgrößen, Compact-Card-Design und mobile Tabellen-Darstellung.
   ========================================= */
@media (max-width: 1024px) {

  /* --- SCHRIFTGRÖSSEN ANPASSUNG (Mobile) --- */

  /* 1. Uhrzeit */
  html body .ec-event-calendar-app .ec-app-container .ec-t-start {
    font-weight: 700;
    font-size: 1.05rem; /* War 0.85rem */
  }
  html body .ec-event-calendar-app .ec-app-container .ec-t-end {
    font-weight: 400;
    font-size: 0.95rem; /* War 0.75rem */
    color: #444;
  }

  /* 2. Titel */
  html body .ec-event-calendar-app .ec-app-container .ec-col-content h3 {
    font-size: 0.9rem; /* War 1.0rem (Desktop) */
    line-height: 1.2;
    margin-bottom: 2px; /* Etwas kompakterer Abstand nach unten */
  }

  /* 3. Kurzbeschreibung */
  html body .ec-event-calendar-app .ec-app-container .ec-table-excerpt {
    font-size: 0.8rem; /* War 0.9rem (Desktop) */
    line-height: 1.4;
  }
    
    /* Zeitspalte */
  html body .ec-event-calendar-app .ec-app-container .ec-col-time {
    width: 25%; /* Gibt der Zeitspalte 25% Breite im mobilen Tabellenmodus */
    white-space: normal;
    padding-right: 5px;
    display: table-cell; /* Behält das Tabellen-Verhalten (wichtig für die Zellenanordnung!) */
    vertical-align: middle;
  }
  html body .ec-event-calendar-app .ec-app-container .ec-time-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 4px;
    line-height: 1.3;
  }


	
/* Mobile: SHORTCODE CARD DESIGN - Horizontaler Riegel (Single Page Look) */
    
/* 1. Haupt-Container */
    html body .ec-compact-card { 
        flex-direction: column; 
        padding: 0;
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
    }
    
/* 2. Datums-Box */
    html body .ec-compact-date { 
        align-self: stretch; 
        width: 100%;
        margin: 0;
        display: flex;
        flex-direction: row; 
        justify-content: center;
        align-items: center;    
        gap: 10px;
        padding: 15px; 
        border-radius: 0; 
        border-width: 0 0 1px 0;
        background-color: rgba(255,255,255,0.8);
    }
    /* Datum-Inhalte */
	
	html body .ec-cd-day, 
    html body .ec-cd-num, 
    html body .ec-cd-month { 
        display: inline-block; 
        width: auto;        
        margin: 0; 
        line-height: 1;    
    }
        
	/* 3. FOOTER (Buttons) */
    html body .ec-compact-white-bg, 
    html body .ec-compact-actions {
        width: 100%;
        margin: 0;
        padding: 15px;
        background-color: var(--ec-card-footer-bg, #ffffff);
        border-top: 1px solid #eee;
        box-sizing: border-box;
        
        display: flex;
        flex-direction: row; 
        flex-wrap: wrap;     
        gap: 10px;           
        justify-content: space-between;
    }
    
	/* 4. BUTTONS: STANDARD (Text sichtbar) */
    html body .ec-cb-mobile .ec-btn-text {
        display: none;
    }
	html body .ec-btn-compact {
        flex: 1 1 auto; 
        width: auto;
        min-width: 140px;    
        max-width: none;
        box-sizing: border-box;
        margin: 0;
        
        height: 42px;
        min-height: 42px;
        
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        
        font-size: 1rem; 
        line-height: 1;
    }

	/* Standard-Icons */
    html body .ec-btn-compact .ec-icon-svg, 
    html body .ec-btn-compact .ec-icon-ticket-svg, 
    html body .ec-btn-compact .ec-icon-heart, 
    html body .ec-btn-compact .ec-icon-calendar-svg {
        margin: 0 3px 0 0;
        display: inline-block;
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

	/* Inhalt Text */
    html body .ec-compact-content {
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Restliche Mobile Anpassungen */
    html body .ec-compact-meta-grid { 
        display: flex;
        flex-direction: column; 
        gap: 6px;
    }
    html body .ec-compact-meta-grid .ec-cm-text br {
        display: none;
    }
    html body .ec-compact-meta-grid .ec-cm-text strong {
        margin-right: 4px;
    }
    
    /* Schriftgrößen */
    html body .ec-cd-day { font-size: 0.9rem; text-transform: uppercase; color: #333; }
    html body .ec-cd-num { font-size: 1.8rem; font-weight: 800; color: var(--ec-local-accent, #f76b15); }
    html body .ec-cd-month { font-size: 0.9rem; color: #333; }
    

    /* --- 5. SPEZIAL-MODUS: "MOBILE" oder "ALWAYS" (Kompakte Buttons) --- */
    
	/* Container: Zwingend EINE Zeile */
    html body .ec-cb-mobile .ec-compact-actions,
    html body .ec-cb-always .ec-compact-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
    }
	/* Buttons: Exakte 1/3 Aufteilung */
    html body .ec-cb-mobile .ec-btn-compact,
    html body .ec-cb-always .ec-btn-compact {
        flex: 1 1 0px;
        min-width: 0;  
        width: auto;
        padding: 0;
        font-size: 0;
    }

	html body .ec-cb-mobile .ec-btn-text,
    html body .ec-cb-always .ec-btn-text { 
        display: none; 
    }
    
	/* Große Icons */
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-svg, 
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-ticket-svg, 
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-heart, 
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-calendar-svg,
    html body .ec-cb-always .ec-btn-compact .ec-icon-svg, 
    html body .ec-cb-always .ec-btn-compact .ec-icon-ticket-svg, 
    html body .ec-cb-always .ec-btn-compact .ec-icon-heart, 
    html body .ec-cb-always .ec-btn-compact .ec-icon-calendar-svg {
        margin: 0;
        display: inline-block;
        width: 28px;
        height: 28px;
        flex-shrink: 0;
    }
    
    /* shortcode compact ende */

    /* Pagination Mobil */
	html body .ec-event-calendar-app .ec-app-container #ec-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
	html body .ec-event-calendar-app .ec-app-container .ec-pagination-left {
        width: 100%;
        display: flex;
    }
	html body .ec-event-calendar-app .ec-app-container .ec-pagination-left select.ec-pagination-select {
        width: 100%;
        max-width: none;
        flex-grow: 1;
    }
	html body .ec-event-calendar-app .ec-app-container .ec-pagination-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }
	html body .ec-event-calendar-app .ec-app-container .ec-load-more-btn {
        width: 100%;
        margin: 10px 0;
    }

	/* Row Fixes */
    html body .ec-event-calendar-app .ec-compact-row {
        align-items: flex-start;
        contain: content; 
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
	html body .ec-event-calendar-app .ec-row-side {
        margin-top: 5px;
    }
	html body .ec-event-calendar-app .ec-row-title {
        white-space: normal;
    }
	
/* ========================================================
       MOBILE TABLE ROW FIX (Modern Card Layout)
       ======================================================== */
    /* 1. Tabelle in ein Block-Layout zwingen und Header komplett verstecken */
    html body .ec-event-calendar-app .ec-app-container .ec-table,
    html body .ec-event-calendar-app .ec-app-container .ec-table tbody {
        display: block;
        width: 100%;
    }
    html body .ec-event-calendar-app .ec-app-container .ec-table thead {
        display: none; 
    }

/* 2. NUR echte Event-Reihen (ec-table-row-custom) werden zur Kachel */
    html body .ec-event-calendar-app .ec-app-container .ec-table tbody tr.ec-table-row-custom {
        display: flex;
        flex-wrap: nowrap; /* Zwingt Zeit, Inhalt und Icons nebeneinander */
        align-items: stretch;
        min-height: 120px; /* Garantiert ausreichende Höhe für 3 Buttons */
        border-left: 5px solid var(--ec-table-row-border, var(--ec-primary));
        border-top: 1px solid var(--ec-border, #eee);
        border-right: 1px solid var(--ec-border, #eee);
        border-bottom: 1px solid var(--ec-border, #eee);
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        overflow: visible; /* Erlaubt das Rauswachsen der Herz-Animation */
        position: relative;
        z-index: 1; /* Verhindert Ãœberlappungen */
    }
    
    /* Aktivierte Karten auf dem Handy in den Vordergrund holen */
    html body .ec-event-calendar-app .ec-app-container .ec-table tbody tr.ec-table-row-custom:active,
    html body .ec-event-calendar-app .ec-app-container .ec-table tbody tr.ec-table-row-custom:focus-within {
        z-index: 10;
    }

    /* 3. Desktop-Zellen-Design zurücksetzen */
    html body .ec-event-calendar-app .ec-app-container .ec-table td {
        border: none;
        border-radius: 0;
        padding: 6px 5px;
    }
    
    /* 4. Desktop-Spalten strikt VERSTECKEN */
    html body .ec-event-calendar-app .ec-app-container .ec-col-image, 
    html body .ec-event-calendar-app .ec-app-container .ec-col-venue, 
    html body .ec-event-calendar-app .ec-app-container .ec-t-sep {
        display: none;
    }

    /* Desktop JS-Injektion für Mobile überschreiben */
    html body .ec-event-calendar-app .ec-table-row-custom td,
    html body .ec-event-calendar-app .ec-table-row-custom td:first-child {
        border: none; 
        background-color: transparent; 
    }

    /* 5. Aufteilung der Spalten */
    html body .ec-event-calendar-app .ec-app-container .ec-col-time {
        display: block;
        flex: 0 0 25%;
        max-width: 85px;
        border-right: 1px solid rgba(0,0,0,0.03); /* Zarter Trenner nach rechts */
    }

    html body .ec-event-calendar-app .ec-app-container .ec-col-time .ec-table-live-desktop {
        display: none;
    }

    html body .ec-event-calendar-app .ec-app-container .ec-col-content {
        display: block;
        flex: 1 1 auto;
        min-width: 0; /* Verhindert, dass Bilder oder lange Titel die Karte sprengen */
    }

    /* 6. Buttons (Herz, Kalender, Ticket) rechts schwebend - VOLLE BILDHÖHE NUTZEN (85px) */
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom td.ec-col-fav {
        position: absolute;
        top: 6px;
        right: 5px; /* Exakt bündig am rechten Rand */
        height: 85px; /* Exakt auf Höhe des Mobilbildes */
        width: 40px;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: stretch;
        background: rgba(220, 221, 225, 0.70);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        border-top-right-radius: 8px; /* Bündige Radien mit dem Bild */
        border-bottom-right-radius: 8px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        padding: 0; /* Kein verschenkter Platz oben und unten */
        z-index: 5;
        pointer-events: none; /* Container lässt Klicks durch */
        box-shadow: -2px 0 8px rgba(0, 0, 0, 0.12);
        overflow: visible; /* Verhindert jegliches Abschneiden */
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom td.ec-col-fav * {
        pointer-events: auto; /* Icons/Buttons bleiben gewohnt klickbar */
    }

    /* Kontrast fürs Herz-Icon, solange es NICHT favorisiert ist - das Icon liegt hier
       direkt auf dem Eventbild und ist bei dunklen Bildbereichen sonst kaum zu
       erkennen (dunkelgraue Füllung #555 auf dunklem Foto, siehe ec-core.css).
       Bewusst einfach gehalten: keine Overlays/Pseudo-Elemente mehr (frühere
       Versuche mit drop-shadow bzw. einer zweiten Herzform dahinter wirkten
       unsauber) - nur die Füllfarbe selbst auf ein helles Grau umgestellt. */
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom td.ec-col-fav .ec-fav-btn:not(.active) .ec-icon-heart {
        background-color: #e0e0e0;
    }

	/* Hour Dividers (Volle Breite erzwingen) */
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row,
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom .ec-table-actions {
        display: flex;
        flex-direction: column; /* Icons untereinander */
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        flex: 1 1 100%;
        gap: 0;
        padding: 0;
        margin: 0;
        opacity: 1; /* 100% deckend */
    }

    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom .ec-table-actions button,
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom .ec-table-actions a {
        flex: 1 1 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom .ec-table-actions .ec-icon-svg,
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom .ec-table-actions .ec-icon-heart {
        width: 24px;
        height: 24px;
        margin: 0 auto;
        display: inline-block;
    }

    /* Ticket-Button in der mobilen Listenansicht ausblenden (maximal 2 Icons: Kalender & Herz für optimale Touch-Bedienung) */
    html body .ec-event-calendar-app .ec-app-container table.ec-table tbody tr.ec-table-row-custom .ec-table-actions .ec-ticket-btn {
        display: none;
    }

    /* Mobile Ort-Anzeige */
    html body .ec-event-calendar-app .ec-app-container .ec-mobile-venue {
        display: block;
        font-size: 0.85rem;
        color: var(--ec-primary);
        margin-top: 5px;
        line-height: 1.2;
        hyphens: auto;
        word-wrap: break-word;
    }

    /* Mobile Bild-Anzeige */
    html body .ec-event-calendar-app .ec-app-container .ec-mobile-image {
        display: block;
        width: 100%;
        height: 85px;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        border-radius: 8px;
        margin: 0 auto 8px auto;
        position: relative;
    }

    /* Platzhalter verstecken, falls kein Bild vorhanden ist 
    html body .ec-event-calendar-app .ec-mobile-image.ec-is-placeholder {
        display: none;
    }
	*/
	
}

/* == ULTRA-COMPACT FIXES Verhindert das Zerbrechen bei extrem schmalen Spalten. =========== */


@container ec-card-container (max-width: 500px) {
	
	
	/* --- Kurzbeschreibung auf Smartphones ausblenden --- */
    html body .ec-event-calendar-app .ec-app-container .ec-table-excerpt {
        display: none;
    }
    
	/* Layout: Vertikal */

    html body .ec-compact-card { 
        flex-direction: column; 
    }
    
/* Datum: Horizontaler Riegel */
    html body .ec-compact-date { 
        width: 100%; 
        border-width: 0 0 1px 0; 
        border-radius: 0; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        gap: 10px; 
        padding: 10px; 
        margin: 0; 
    }
    
	html body .ec-cd-day, 
    html body .ec-cd-num, 
    html body .ec-cd-month { 
        display: inline-block; 
        width: auto; 
        margin: 0; 
    }
	
    html body .ec-cd-num { 
        font-size: 1.5rem; 
    }
    
	html body .ec-compact-content { 
        width: 100%; 
        padding: 20px; 
    }

	/* Footer: WRAP ERLAUBEN */
    html body .ec-compact-white-bg, 
    html body .ec-compact-actions {
        display: flex;
        flex-wrap: wrap; 
        gap: 8px;
    }

	/* 1. Basis-Button: Text behalten */
    html body .ec-btn-compact {
        flex: 1 1 auto; 
        width: auto; 
        min-width: 0; 
        padding: 0 10px; 
        justify-content: center; 
    }

	/* 2. Text-Killer: Nur bei mobile/always */
    html body .ec-cb-mobile .ec-btn-compact,
    html body .ec-cb-always .ec-btn-compact {
        flex: 1 1 0px; 
        width: auto; 
        padding: 0; 
        font-size: 0;
    }

	/* Text-Span ausblenden */
    html body .ec-cb-mobile .ec-btn-text,
    html body .ec-cb-always .ec-btn-text {
        display: none;
    }

	/* Icons vergrößern */
    html body .ec-btn-compact .ec-icon-svg, 
    html body .ec-btn-compact .ec-icon-ticket-svg, 
    html body .ec-btn-compact .ec-icon-heart, 
    html body .ec-btn-compact .ec-icon-calendar-svg,
    html body .ec-btn-compact .ec-icon-check {
        margin: 0;
        margin-right: 5px; /* Kleinerer Abstand für Mobile */
        display: inline-block;
        width: 24px;
        height: 24px;
    }

	/* Icons bei reinem Icon-Modus ohne Margin rechts */
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-svg,
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-ticket-svg,
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-heart,
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-calendar-svg,
    html body .ec-cb-mobile .ec-btn-compact .ec-icon-check,
    html body .ec-cb-always .ec-btn-compact .ec-icon-svg,
    html body .ec-cb-always .ec-btn-compact .ec-icon-ticket-svg,
    html body .ec-cb-always .ec-btn-compact .ec-icon-heart,
    html body .ec-cb-always .ec-btn-compact .ec-icon-calendar-svg,
    html body .ec-cb-always .ec-btn-compact .ec-icon-check {
        margin-right: 0;
    }
}
/* =============================================================================
   MODERN FILTER LAYOUT (Tiles / Kacheln)
   ============================================================================= */

/* 1. Force container & wrapper display on all screen sizes */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-controls {
    margin-bottom: 8px;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container #ec-tabs-container {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 0;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-tabs-wrapper {
    display: flex !important; /* !important hier bewusst beibehalten: überschreibt die mobile Tab->Dropdown-Regel "display:none !important" (Zeile ~1666), die außerhalb dieses Abschnitts liegt und höhere Spezifität allein nicht schlagen kann */
    justify-content: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 6px 4px 6px 4px;
    align-items: center;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}

/* Passen mehr Kacheln rein als Platz ist (per JS in updateArrows() erkannt), links-bündig
   statt zentriert beginnen - sonst startet der Scrollbereich bereits "in der Mitte" des
   zentrierten Inhalts und die erste Kachel ist beim Laden angeschnitten. */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-tabs-wrapper.ec-tabs-overflowing {
    justify-content: flex-start;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container table.ec-table tbody tr.ec-list-hour-divider-row:first-child .ec-list-hour-divider {
    margin-top: 0;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide mobile dropdown completely in modern layout */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-mobile-date-select {
    display: none;
}

/* Override ec-is-loading: Keep modern wrapper and action tiles clickable without grayscale */
html body .ec-event-calendar-app.ec-filter-modern #ec-tabs-container.ec-is-loading .ec-tabs-wrapper {
    opacity: 1;
    pointer-events: auto;
    filter: none;
    cursor: default;
}

html body .ec-event-calendar-app.ec-filter-modern #ec-tabs-container.ec-is-loading .ec-modern-search-toggle,
html body .ec-event-calendar-app.ec-filter-modern #ec-tabs-container.ec-is-loading .ec-modern-fav-toggle {
    opacity: 1;
    pointer-events: auto;
    filter: none;
    cursor: pointer;
}

/* Ausgegraute Datums-Kacheln sind - wie die Tabs/das Dropdown im Classic-Layout
   (siehe "TABS AUSGRAUEN BEI SUCHE / FAVORITEN" weiter oben) - auch gegen Klicks
   gesperrt. Der ausgegraute Zustand gilt bei aktivem Favoriten-Filter oder aktiver
   Suche; dort bezieht sich das Ergebnis auf alle Tage, die Tagesauswahl waere also
   wirkungslos. Zurueck geht es ueber die Herz/ALL- bzw. die Such-Kachel, die
   bewusst farbig und klickbar bleiben (Regel direkt darueber). */
html body .ec-event-calendar-app.ec-filter-modern #ec-tabs-container.ec-is-loading .ec-modern-date-tile {
    opacity: 0.45;
    filter: grayscale(80%);
    cursor: default;
    pointer-events: none;
}

/* 2. Modern Tiles Styling - EXACT MATCH TO DETAIL PAGE DATE-BOX (Desktop) */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    height: 78px;
    min-height: 78px;
    max-height: 78px;
    padding: 6px 3px;
    border: 2px solid var(--ec-primary, #f76b15);
    border-radius: 6px;
    background: #ffffff;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    text-decoration: none;
    margin: 0;
    gap: 2px;
    overflow: hidden;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile:hover {
    background-color: rgba(247, 107, 21, 0.08);
    border-color: var(--ec-primary, #f76b15);
}

/* Typography inside Date Tile - EXACT SAME AS SINGLE EVENT DETAIL PAGE & PRIMARY COLOR */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile .ec-mb-day {
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    color: var(--ec-primary, #f76b15);
    margin: 0;
    padding: 0;
    letter-spacing: 0.2px;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile .ec-mb-date {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
    padding: 0;
    color: var(--ec-primary, #f76b15);
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile .ec-mb-month {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ec-primary, #f76b15);
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

/* Active Date Tile */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.active {
    background-color: var(--ec-primary, #f76b15);
    border-color: var(--ec-primary, #f76b15);
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.active .ec-mb-day,
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.active .ec-mb-date,
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.active .ec-mb-month {
    color: #ffffff;
}

/* 3. Action Tiles (Lupe, Reset & Herz) */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.ec-modern-search-toggle,
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.ec-modern-fav-toggle,
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.ec-modern-reset-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    height: 78px;
    min-height: 78px;
    max-height: 78px;
    padding: 0;
    gap: 0;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile.ec-modern-reset-toggle {
    padding: 5px 2px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    overflow: hidden;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-tile svg {
    width: 26px;
    height: 26px;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

/* Search tile icon */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-search-toggle svg {
    stroke: var(--ec-primary, #f76b15);
    fill: none;
}

/* Active Search tile */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-search-toggle.active {
    background-color: var(--ec-primary, #f76b15);
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-search-toggle.active svg {
    stroke: #ffffff;
}

/* Reset filter tile */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-reset-toggle .ec-modern-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-reset-toggle .ec-modern-tile-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--ec-primary, #f76b15);
    fill: none;
    display: block;
    margin: 0 auto;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-reset-toggle .ec-modern-reset-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1.05;
    max-height: 2.1em;
    color: var(--ec-primary, #f76b15);
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    letter-spacing: 0.2px;
    margin: 0;
    padding: 0;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-reset-toggle:hover {
    background-color: rgba(247, 107, 21, 0.08);
    border-color: var(--ec-primary, #f76b15);
}

/* Favorites tile icon */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-fav-toggle svg {
    fill: var(--ec-primary, #f76b15);
    stroke: none;
}

/* Active Favorites tile (Primary color, with icon-fav-error + ALL text) */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-fav-toggle.active {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 68px;
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    height: 78px;
    min-height: 78px;
    max-height: 78px;
    padding: 6px 3px;
    border: 2px solid var(--ec-primary, #f76b15);
    border-radius: 6px;
    background-color: var(--ec-primary, #f76b15);
    border-color: var(--ec-primary, #f76b15);
    gap: 3px;
    box-sizing: border-box;
    overflow: hidden;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-fav-toggle.active .ec-modern-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* Aktive Kachel: Icon fest weiß (früher svg { fill: #ffffff }) */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-fav-toggle.active .ec-icon-svg.ec-icon-fav-alert {
    margin: 0 auto;
    width: 24px;
    height: 24px;
    display: block;
    background-color: #ffffff;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-modern-fav-toggle.active .ec-modern-all-text {
    display: block;
    font-size: 0.62rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 4. Toolbar & Search Reveal Logic - SMOOTH SLIDE DOWN & UP */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0 15px;
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid transparent;
    transform: translateY(-8px);
    /* max-height bewusst NICHT langsam animiert: Da max-height 0 -> 800px als
       Aufklapp-Grenze dient und per overflow:hidden alles darunter abschneidet,
       das noch nicht "erreicht" wurde, führte eine langsame max-height-Animation
       dazu, dass weiter unten liegender Inhalt (die Orte/Kategorien-Dropdowns,
       die zweite Zeile) sichtbar VERSPÄTET "hereinwuchs", während der Suchbereich
       oben sofort da war - das wirkte wie ein eigenständiges Reingleiten der
       Dropdowns. Jetzt springt max-height nahezu sofort auf die volle Höhe, und
       der eigentliche weiche Übergang kommt allein von opacity/transform, die
       die GESAMTE Box gleichmäßig ein-/ausblenden (positionsunabhängig - alle
       Elemente erscheinen gemeinsam, kein Nacheinander mehr). */
    transition: max-height 0.05s linear,
                opacity 0.25s ease,
                transform 0.25s ease,
                padding 0.25s ease,
                margin-bottom 0.25s ease,
                border-color 0.2s ease,
                visibility 0.25s ease;
    background-color: var(--ec-bg-light, #fff8f0);
    border-radius: 8px;
    box-sizing: border-box;
    width: 100%;
}

/* When expanded, show the toolbar smoothly */
html body .ec-event-calendar-app.ec-filter-modern.ec-modern-search-expanded .ec-app-container .ec-toolbar,
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container.ec-modern-search-expanded .ec-toolbar,
html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded {
    max-height: 800px;
    opacity: 1;
    visibility: visible;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #eee;
    transform: translateY(0);
}

@keyframes ecSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Force .ec-toolbar-left to contain the Search Row and Filter Dropdowns */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
}

/* SEARCH TOP ROW: Search Input + Filter Toggle Button in ONE FIXED ROW */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-search-wrapper {
    display: block;
    flex: 1 1 0%;
    min-width: 0;
    width: auto;
    margin: 0;
    position: relative;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container #ec-search-input {
    width: 100%;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    line-height: 42px;
    padding: 0 38px 0 38px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    background-color: #fff;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-mobile-filter-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    background-color: var(--ec-primary, #f76b15);
    border: 1px solid var(--ec-primary, #f76b15);
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-mobile-filter-toggle svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
    fill: none;
}

/* Hide duplicate favorites in modern layout */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-fav-actions {
    display: none;
}

/* Collapsible filter elements (Orte/Kategorien-Dropdowns + zweite Zeile mit
   Kacheln/Liste/Nur anstehende/Favoriten/Ticket) - Mobile/Tablet only. Auf Desktop
   fließt die Toolbar natürlich wie im Classic-Layout, siehe DESKTOP ONLY Block unten.
   Bewusst schlichtes display:none/flex ohne eigene Animation - ein Fade-Versuch
   hier hat an anderer Stelle (Ticket-Button Icon/Text-Abstand) einen neuen Sprung
   verursacht und war ohnehin kaum wahrnehmbar. */
@container ec-card-container (max-width: 1024px) {
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-venue-filter-placeholder,
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-reset-filter,
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar:not(.ec-filters-expanded) .ec-toolbar-right {
        display: none;
    }
}

/* In Modern Layout: Hide inline reset filter button inside toolbar since top tilebar has the reset tile */
html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar #ec-reset-filter,
html body .ec-event-calendar-app.ec-filter-modern .ec-toolbar #ec-reset-filter {
    display: none !important;
}

/* Show collapsible filter elements when expanded (Mobile/Tablet only - siehe Hinweis oben) */
@container ec-card-container (max-width: 1024px) {
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar.ec-filters-expanded #ec-venue-filter-placeholder {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        margin-top: 10px;
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    /* FIX: Strict normal height for native dropdown selects in the toolbar.
       Orte und Kategorien sind keine nativen Felder mehr (.ec-multi-select). */
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar select {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        line-height: 40px;
        padding: 0 32px 0 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
        margin: 0;
        box-sizing: border-box;
        flex: none;
    }

    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toolbar-right {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        width: 100%;
        margin-top: 5px;
    }

    /* Match Modern Expanded Filter Sheet 100% to Classic Expanded Filter Sheet (Non-Floating) */
    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions {
        display: flex !important;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
        padding-top: 15px;
        margin-top: 10px;
        border-top: 1px solid #ddd;
    }

    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions .ec-btn-fav-filter {
        flex: 1 1 auto;
        min-width: 0;
    }

    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions .ec-btn-share {
        flex: 0 0 42px;
        width: 42px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        margin-top: 5px;
    }

    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles .ec-view-toggle {
        width: 100%;
        margin: 0;
    }

    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded #ec-toggle-upcoming,
    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded button#ec-toggle-upcoming {
        display: inline-flex;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        box-sizing: border-box;
        margin: 5px 0 0 0;
        justify-content: center;
        text-align: center;
    }

    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar {
        display: inline-flex !important;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        flex: 1 1 100%;
        box-sizing: border-box;
        margin: 5px 0 0 0;
        justify-content: center;
        text-align: center;
    }
}

/* ==========================================================================
   DESKTOP ONLY (min-width: 1025px): Modern Layout matches Classic Desktop 100%
   Nutzt @container statt @media, damit dieselbe Container-Breite gemessen wird
   wie in isMobileOrPwa() (JS) und wie beim .ec-filter-modern-Umschalten —
   sonst können Tab/Kachel-Wechsel und Floating-Search-Aktivierung bei
   unterschiedlichen Fensterbreiten stattfinden (Sidebar/Theme-Layout-Fall).
   ========================================================================== */
@container ec-card-container (min-width: 1025px) {
    /* FRUEHER stand hier eine Regel, die die schwebende Leiste ab 1025px wieder
       flach gelegt hat ("Prevent Floating Search from Floating on Desktop").

       Sie ist entfallen, weil .ec-floating-search-active seine Bedeutung geaendert
       hat: Die Klasse haengt jetzt nicht mehr an der Backend-Option allein, sondern
       wird vom Skript genau dann gesetzt, wenn die Leiste auch wirklich schweben
       soll (Option an UND App-Modus oder schmaler Kalender - siehe isMobileOrPwa()
       in ec-main-script.js). Auf Desktop ist die Klasse damit gar nicht mehr da,
       die Regel lief also ins Leere.

       Schaedlich war sie im App-Modus: Ein Tablet im Querformat liefert als PWA
       ueber 1024px Containerbreite (Galaxy Tab S7+ quer: 1294px). Das Skript hielt
       die Leiste dort fuer schwebend und blendete deshalb die Lupen-Kachel aus,
       waehrend diese Regel gleichzeitig die Pille flach legte - die Suche war
       danach weder sichtbar noch erreichbar. */

    /* Hide Mobile Filter Toggle Button on Desktop. Zweiter Selektor mit .ec-filter-modern
       nötig, um dieselbe Spezifität wie die Anzeige-Regel weiter oben zu erreichen
       (html body .ec-event-calendar-app.ec-filter-modern .ec-app-container
       .ec-mobile-filter-toggle { display: inline-flex; ... }) - sonst gewinnt trotz
       späterer Position im CSS die spezifischere Regel und der Button bleibt sichtbar.

       :not(.ec-floating-search-active), weil die schwebende Pille ihren Filter-Knopf
       braucht - in einem breiten PWA-Fenster greift dieser Block sonst mit. */
    html body .ec-event-calendar-app:not(.ec-floating-search-active) .ec-app-container .ec-mobile-filter-toggle,
    html body .ec-event-calendar-app.ec-filter-modern:not(.ec-floating-search-active) .ec-app-container .ec-mobile-filter-toggle {
        display: none;
    }

    /* Toolbar auf Desktop IMMER in zwei feste Zeilen aufteilen: Zeile 1 = Suche +
       Dropdowns (.ec-toolbar-left), Zeile 2 = Kacheln/Liste/Nur anstehende/Favoriten/
       Ticket (.ec-toolbar-right). Mit fester flex-basis:100% ist das Ergebnis von der
       exakten verfügbaren Breite unabhängig - kein "mal passt's in eine Zeile, mal
       nicht"-Umbrechen mehr während des Ladens/Reflows, da beide von Anfang an
       garantiert eigene Zeilen sind statt sich das per natürlichem flex-wrap erst
       zu erarbeiten (was zu sichtbarem, mehrstufigem Nachrutschen beim Laden führte). */
    html body .ec-event-calendar-app .ec-app-container .ec-toolbar-left {
        flex: 1 1 100%;
    }
    html body .ec-event-calendar-app .ec-app-container .ec-toolbar-right {
        flex: 1 1 100%;
        margin-left: 0;
        justify-content: flex-end;
    }

    /* "Meine Favoriten" + Share-Button trotz der mobilen "Hide duplicate favorites"-
       Regel im aufgeklappten Desktop-Sheet zeigen (folgt der DOM-Reihenfolge direkt
       zwischen "Nur anstehende" und "Ticket") - nur hier lässt sich der Share-Button
       überhaupt erreichen, die Favoriten-Kachel oben kann nur togglen, nicht teilen. */
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-fav-actions {
        display: flex;
    }
}

/* 5. Scroll Arrows (Dezent) */
html body .ec-event-calendar-app .ec-scroll-arrow,
html body .ec-event-calendar-app .ec-app-container .ec-scroll-arrow {
    position: absolute;
    top: 0;
    bottom: 10px;
    width: 28px;
    max-width: 28px;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    color: var(--ec-primary, #f76b15);
    border: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

html body .ec-event-calendar-app .ec-scroll-arrow.visible,
html body .ec-event-calendar-app .ec-app-container .ec-scroll-arrow.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

html body .ec-event-calendar-app .ec-scroll-arrow.left,
html body .ec-event-calendar-app .ec-app-container .ec-scroll-arrow.left {
    left: 0;
    right: auto;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.92) 40%, transparent);
    border-radius: 6px 0 0 6px;
}

html body .ec-event-calendar-app .ec-scroll-arrow.right,
html body .ec-event-calendar-app .ec-app-container .ec-scroll-arrow.right {
    right: 0;
    left: auto;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.92) 40%, transparent);
    border-radius: 0 6px 6px 0;
}

html body .ec-event-calendar-app .ec-scroll-arrow svg,
html body .ec-event-calendar-app .ec-app-container .ec-scroll-arrow svg {
    width: 18px;
    height: 18px;
    max-width: 18px;
    max-height: 18px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    display: block;
}

html body .ec-event-calendar-app .ec-scroll-arrow::before,
html body .ec-event-calendar-app .ec-scroll-arrow::after {
    display: none;
}

/* Hinweis: Die Kacheln nutzen jetzt einheitlich die kompaktere Größe (68x78px)
   als Standard für alle Bildschirmbreiten - kein separater Mobile-Breakpoint
   für die Größe mehr nötig (siehe Abschnitt "2. Modern Tiles Styling" oben). */

/* 7. Desktop: Ticket-Button darf restliche Breite der Zeile ausfüllen, statt
   Leerraum daneben zu lassen (nur Desktop - auf Mobile/Tablet erzwingt die separate
   Regel in der @container max-width:1024px-Sektion weiterhin volle Breite/eigene Zeile) */
@container ec-card-container (min-width: 1025px) {
    html body .ec-event-calendar-app.ec-filter-modern .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar:not(.ec-hidden) {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   FLOATING BOTTOM SEARCH BAR (Samsung One UI / Google Style - Mobile & Tablet)
   ========================================================================== */


/* Hinweis: Hier standen frueher z-index- und display:none-Regeln fuer fremde
   Bottom-Navigationen (Theme- bzw. App-Leisten), adressiert ueber hart
   eingetragene Klassennamen. Das ist bewusst entfernt: Das Plugin fasst fremdes
   Markup nicht an - es MISST die Leiste nur, um die schwebende Suchleiste
   darueber zu positionieren (siehe getBottomNavOffset() in ec-main-script.js).

   Wer seine eigene Bottom-Leiste bei geoeffneter Tastatur ausblenden will,
   macht das im eigenen CSS - das Plugin setzt dafuer die Klasse
   "ec-keyboard-open" auf <body>:

       body.ec-keyboard-open #meine-bottom-nav { display: none !important; }   */

/* Active Filter Banner (Directly under Date Controls: Strictly hidden on Desktop) */
html body .ec-event-calendar-app .ec-active-filter-banner {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 12px 0 16px 0;
    box-sizing: border-box;
    animation: ecSlideUpFade 0.25s ease-out;
}

html body .ec-event-calendar-app .ec-active-filter-banner .ec-btn-active-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #fff0f0;
    color: #d93025;
    border: 1.5px solid #f5c2c2;
    border-radius: 24px;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(217, 48, 37, 0.15);
    transition: all 0.2s ease;
}

html body .ec-event-calendar-app .ec-active-filter-banner .ec-btn-active-filter-reset:hover {
    background: #d93025;
    color: #ffffff;
    border-color: #d93025;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(217, 48, 37, 0.28);
}

html body .ec-event-calendar-app .ec-active-filter-banner .ec-btn-active-filter-reset .ec-reset-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
}

html body .ec-event-calendar-app .ec-active-filter-banner .ec-btn-active-filter-reset .ec-reset-icon-svg svg {
    stroke: currentColor;
}

html body .ec-event-calendar-app .ec-active-filter-banner .ec-btn-active-filter-reset .ec-reset-x {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-left: 2px;
}

/* Mobile & Tablet Styles for Floating Search */
.ec-section-elevated {
    z-index: 1000;
    position: relative;
    transform: none;
    filter: none;
    backdrop-filter: none;
    perspective: none;
}

html.ec-filter-sheet-open,
body.ec-filter-sheet-open {
    overflow: hidden;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}

body.ec-filter-sheet-open #Content,
body.ec-filter-sheet-open .sections_group,
body.ec-filter-sheet-open .ec-section-elevated {
    z-index: 999990;
    position: relative;
}

/* ==========================================================================
   FLOATING SEARCH BAR STYLES (MOBILE, TABLET UND PWA)

   ACHTUNG, der naechste Absatz beschreibt den alten Stand und gilt nicht mehr:
   Der Block haengt seit dem Tablet-Fund nicht mehr an einer Breite, sondern
   allein an der Klasse .ec-floating-search-active. Ueber die entscheidet das
   Skript (ec-main-script.js, handleResize) mit derselben Abfrage, die auch den
   modernen Filterstil umschaltet - App-Modus ODER Kalenderbreite <= 1024px.
   Vorher entschied das Skript ueber den App-Modus und das CSS ueber die
   Containerbreite; im Querformat einer PWA (Galaxy Tab S7+: 1294px) gingen die
   beiden auseinander und die Suche verschwand ersatzlos. Alle Regeln in diesem
   Block tragen die Klasse, deshalb reicht sie als Schalter.
   Die Einrueckung stammt noch aus der Zeit als @container-Block.
   Nutzt @container statt @media (siehe Begründung bei "DESKTOP ONLY" oben) —
   so wird garantiert dieselbe Breite gemessen wie beim .ec-filter-modern-
   Umschalten, damit beide Effekte an derselben Stelle einsetzen.
   ========================================================================== */
    html body .ec-event-calendar-app.ec-floating-search-active {
        position: relative;
    }

    /* 1. Reserve bottom space so cards & pagination are never obscured.
       Die Pille ist 56px hoch (42px Inhalt + 2x6px Padding + 2x1px Rand) und
       sitzt 18px ueber dem unteren Rand, belegt also 74px. Die 70px sind
       bewusst etwas knapper gewaehlt; die 20px Aussenabstand des "Mehr
       laden"-Buttons fangen die Differenz auf. Wer ganz sicher gehen will,
       setzt 80px - dann liegt garantiert nichts hinter der Leiste.
       ACHTUNG: Derselbe Wert steht in ec-main-script.js in
       updateFloatingBottomOffset() - beide zusammen aendern. */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container {
        padding-bottom: 70px;
    }

    /* 2. Floating Search Bar Pill (Closed & Unfocused State: 3/4 Width & Translucent) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar {
        position: fixed;
        bottom: var(--ec-floating-bottom-offset, 18px);
        left: 50%;
        transform: translateX(-50%);
        width: 70%;
        max-width: 290px;
        min-width: 220px;
        z-index: 2147483647;
        margin: 0;
        padding: 6px 8px 6px 14px;
        background: rgba(255, 255, 255, 0.80);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border-radius: 30px;
        border: 1px solid rgba(0, 0, 0, 0.16);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 3px 10px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        height: 54px;
        min-height: 54px;
        max-height: 54px;
        opacity: 1;
        visibility: visible;
        overflow: hidden;
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    border-radius 0.3s ease,
                    padding 0.35s ease,
                    box-shadow 0.3s ease,
                    background-color 0.3s ease,
                    border-color 0.3s ease,
                    bottom 0.15s ease-out;
    }

    /* Expand to full width on Search Focus or Active Search Input

       Bewusst NUR ueber die Klasse, NICHT ueber :focus-within - die Fassung mit
       :focus-within kostete am Rechner jeden ersten Klick auf den Filter-Knopf:
       Die Maus setzt den Fokus schon beim Druecken, die Pille wuchs dadurch von
       290px auf 480px, und weil sie mittig sitzt, wanderte der Knopf an ihrem
       rechten Ende um 96px nach rechts (gemessen: 757-795 -> 852-890). Beim
       Loslassen lag der Zeiger nicht mehr auf dem Knopf, also entstand gar kein
       Klick - erst der zweite sass. Mit dem Finger gibt es vor dem Antippen
       keinen Fokus, deshalb trat es nur am Rechner auf.

       Die Klasse .ec-search-active setzt das Skript im focus-Handler des
       Suchfeldes (ec-main-script.js) und nimmt sie beim Verlassen wieder weg.
       Das Suchfeld verbreitert sich dadurch unveraendert; nur der Filter-Knopf
       loest das Wachsen nicht mehr aus. Das Ausstellerverzeichnis (EEM) macht es
       an derselben Stelle genauso und kennt den Fehler deshalb nicht. */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-search-active {
        width: calc(100% - 32px);
        max-width: 480px;
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(0, 0, 0, 0.14);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Floating Bar Hidden (when calendar plugin is scrolled out of viewport) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-floating-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-50%, 48px);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease,
                    visibility 0.35s ease;
    }

    /* In closed state, toolbar-left takes 100% of row */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded) .ec-toolbar-left {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 42px;
        margin: 0;
        padding: 0;
        gap: 8px;
    }

    /* Search input wrapper */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar .ec-search-wrapper {
        display: flex;
        flex: 1 1 0%;
        min-width: 0;
        align-items: center;
        position: relative;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        height: 42px;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-search-input {
        width: 100%;
        height: 100%;
        min-height: 42px;
        max-height: 42px;
        line-height: 42px;
        border: none;
        outline: none;
        background: transparent;
        box-shadow: none;
        font-size: 0.95rem;
        color: #222222;
        /* rechts Platz fuer den 26px-Kreis des Loeschen-X (26 + 4 Rand + Luft) */
        padding: 0 36px 0 34px;
        border-radius: 0;
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar .ec-search-icon {
        left: 8px;
        top: 50%;
        transform: translateY(-50%);
        opacity: 0.55;
        position: absolute;
        pointer-events: none;
    }

    /* Loeschen-X als weicher Kreis-Button (identisch mit .eem-search-clear im
       Aussteller-Plugin). Vorher ein nacktes Glyph ohne Flaeche - als Tap-Ziel
       auf dem Handy zu klein und optisch unscheinbar. */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-search-reset {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        min-width: 26px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.07);
        color: #3a3a3a;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-search-reset:hover {
        background: rgba(0, 0, 0, 0.14);
        color: #111111;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-search-reset:active {
        transform: translateY(-50%) scale(0.9);
        background: rgba(0, 0, 0, 0.18);
    }

    /* Filter Toggle Button (Right end of pill) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-mobile-filter-toggle {
        flex: 0 0 38px;
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        border-radius: 50%;
        background: var(--ec-primary, #f76b15);
        border: none;
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(247, 107, 21, 0.35);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 0;
        padding: 0;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-mobile-filter-toggle svg {
        width: 18px;
        height: 18px;
        stroke: #ffffff;
        fill: none;
        stroke-width: 2.2;
        display: block;
        margin: 0 auto;
        transition: transform 0.25s ease;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-mobile-filter-toggle.active {
        background: #2b2b2b;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    /* Active filter dot indicator on mobile filter toggle */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-mobile-filter-toggle.has-active-filters {
        position: relative;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-mobile-filter-toggle.has-active-filters::after {
        content: "";
        position: absolute;
        top: -1px;
        right: -1px;
        width: 11px;
        height: 11px;
        background: #d93025;
        border: 2px solid #ffffff;
        border-radius: 50%;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        animation: ecPulseBadge 1.8s infinite;
    }

    @keyframes ecPulseBadge {
        0% { transform: scale(0.9); }
        50% { transform: scale(1.15); }
        100% { transform: scale(0.9); }
    }

    /* On Mobile & Tablets: Show the active filter banner ONLY if floating search is active */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-active-filter-banner {
        display: flex;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar #ec-mobile-filter-toggle.active svg {
        transform: rotate(90deg);
    }

    /* Hide non-search items in closed state */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-venue-filter-placeholder,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-reset-filter,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded) .ec-toolbar-right {
        display: none;
    }


    /* 3. Filters Sheet OPEN (Smooth Upward Expansion & Clean Card Layout) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded {
        top: auto;
        height: auto;
        min-height: auto;
        max-height: calc(100dvh - var(--ec-floating-bottom-offset, 18px) - 20px);
        border-radius: 24px;
        padding: 16px 14px 12px 14px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        overscroll-behavior-y: contain;
        gap: 0;
        z-index: 2147483647;
    }

/* App-level Blurred Backdrop Overlay when Floating Filter Sheet is Open (Envato Compliant).
   Nur auf Mobile/Tablet (max-width:1024px): Auf Desktop verhält sich die Leiste inzwischen
   wie ein normales inline-Expandieren ohne Overlay, selbst wenn Floating Search (die Option
   ist geräteunabhängig gesetzt) aktiviert ist. */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container.ec-filter-sheet-active::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.15);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 2147483646;
        pointer-events: auto;
        animation: ecBackdropFadeIn 0.25s ease forwards;
    }

@keyframes ecBackdropFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

    /* Soft Keyboard Active Mode: Maximize available space between top screen edge & soft keyboard */
    html body .ec-toolbar.ec-floating-toolbar.ec-filters-expanded.ec-keyboard-active {
        bottom: calc(var(--ec-keyboard-offset, 0px) + 8px);
        max-height: calc(var(--ec-viewport-height, 100vh) - 16px);
        border-radius: 18px;
        padding: 12px 12px 10px 12px;
    }

    /* Use display: contents on children when expanded for flawless flex ordering */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toolbar-left,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toolbar-right {
        display: contents;
    }

    /* Item 1: Dropdowns (Alle Orte & Alle Kategorien) - NUR Floating Search, siehe Fund
       weiter unten: der zweite, ungescopte Selektor hier hat vorher auch ohne Floating
       Search gegriffen und die ecSlideUpFade-Rein-nach-oben-Animation ausgelöst. */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-venue-filter-placeholder {
        order: 1;
        flex: 1 1 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0 0 10px 0;
        padding: 0;
        animation: ecSlideUpFade 0.25s ease-out;
        box-sizing: border-box;
    }

    /* Filter-Dropdowns im Filter-Sheet: Feld im Stil der uebrigen Sheet-
       Elemente, die Liste klappt im Fluss auf statt zu schweben - wie im
       Ausstellerplugin (.eem-filters-expanded .eem-select-options). Absolut
       positioniert wuerde sie am Rand des scrollbaren Sheets abgeschnitten. */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-venue-filter-placeholder .ec-multi-select {
        height: auto;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-multi-select-trigger {
        height: 42px;
        border-radius: 10px;
        border: 1px solid #d8d8d8;
        background-color: #f9f9f9;
        padding: 0 30px 0 12px;
        font-size: 0.9rem;
        font-weight: 500;
        color: #333333;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-multi-select-options {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-height: 200px;
        box-shadow: none;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        margin-top: 6px;
        background: #ffffff;
    }

    /* Item 2: View Toggles (Kacheln | Liste) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles {
        order: 2;
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin: 0 0 8px 0;
        grid-row: auto;
        grid-column: auto;
        animation: ecSlideUpFade 0.25s ease-out;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles .ec-view-toggle {
        flex: 1 1 50%;
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 600;
        box-sizing: border-box;
        margin: 0;
        background: #f1f3f5;
        color: #495057;
        border: 1px solid #dee2e6;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles .ec-view-toggle:hover,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-toggles .ec-view-toggle.active {
        background: var(--ec-primary, #f76b15);
        color: #ffffff;
        border-color: var(--ec-primary, #f76b15);
    }

    /* Item 3: Upcoming Filter Button (Nur anstehende) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-toggle-upcoming {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        box-sizing: border-box;
        margin: 0 0 8px 0;
        background: #ffffff;
        color: var(--ec-primary, #f76b15);
        border: 1.5px solid var(--ec-primary, #f76b15);
        grid-row: auto;
        grid-column: auto;
        animation: ecSlideUpFade 0.25s ease-out;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-toggle-upcoming:hover,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-toggle-upcoming.active {
        background: var(--ec-primary, #f76b15);
        color: #ffffff;
        border-color: var(--ec-primary, #f76b15);
    }

    /* Item 4: Ticket Button */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar:not(.ec-hidden) {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
        font-size: 0.85rem;
        font-weight: 600;
        box-sizing: border-box;
        margin: 0 0 8px 0;
        background: #ffffff;
        color: #333333;
        border: 1px solid #dee2e6;
        text-decoration: none;
        grid-row: auto;
        grid-column: auto;
        animation: ecSlideUpFade 0.25s ease-out;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar:hover {
        background: var(--ec-primary, #f76b15);
        color: #ffffff;
        border-color: var(--ec-primary, #f76b15);
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-ticket-btn-toolbar::before {
        display: none;
    }

    /* Hide non-search items in closed state */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded) .ec-fav-actions,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar:not(.ec-filters-expanded) #ec-reset-filter,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-reset-filter.ec-hidden {
        display: none;
        margin: 0;
        padding: 0;
        height: 0;
        min-height: 0;
        max-height: 0;
        border: none;
    }

    /* Item 4.5: Favorite Actions in Expanded Sheet (Meine Favoriten + Favoriten teilen) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions {
        order: 4;
        flex: 1 1 100%;
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 8px;
        margin: 0 0 8px 0;
        padding: 0;
        box-sizing: border-box;
        height: auto;
        min-height: 40px;
        max-height: none;
        border: none;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions #ec-toggle-favs {
        flex: 1 1 auto;
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: 600;
        box-sizing: border-box;
        background: #ffffff;
        color: var(--ec-primary, #f76b15);
        border: 1.5px solid var(--ec-primary, #f76b15);
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions #ec-toggle-favs:hover,
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions #ec-toggle-favs.active {
        background: var(--ec-primary, #f76b15);
        color: #ffffff;
        border-color: var(--ec-primary, #f76b15);
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions #ec-share-favs {
        flex: 0 0 44px;
        width: 44px;
        height: 40px;
        min-height: 40px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        background: #ffffff;
        color: #495057;
        border: 1px solid #dee2e6;
        cursor: pointer;
        transition: all 0.2s ease;
        margin: 0;
        padding: 0;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-fav-actions #ec-share-favs:hover {
        background: var(--ec-primary, #f76b15);
        color: #ffffff;
        border-color: var(--ec-primary, #f76b15);
    }

    /* Item 5: Reset Filter Button (ONLY when active / NOT ec-hidden) */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-reset-filter:not(.ec-hidden) {
        order: 5;
        flex: 1 1 100%;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        min-height: 38px;
        border-radius: 10px;
        font-size: 0.85rem;
        box-sizing: border-box;
        margin: 0 0 8px 0;
        background: #fff0f0;
        color: #d93025;
        border: 1px solid #f5c2c2;
        animation: ecSlideUpFade 0.25s ease-out;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-reset-filter:hover {
        background: #d93025;
        color: #ffffff;
        border-color: #d93025;
    }

    /* Item 9: Divider between filter controls and bottom search bar */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded::after {
        content: "";
        order: 9;
        flex: 1 1 100%;
        width: 100%;
        height: 1px;
        background: #e8e8e8;
        margin: 4px 0 6px 0;
    }

    /* Search Row (Bottom Row): Search Input & Filter Button side by side */
    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-search-wrapper {
        order: 10;
        display: flex;
        flex: 1 1 auto;
        width: calc(100% - 46px);
        max-width: calc(100% - 46px);
        min-width: 140px;
        height: 42px;
        min-height: 42px;
        max-height: 42px;
        margin: 4px 0 0 0;
        padding: 0;
        border: 1px solid #e0e0e0;
        background: #f7f7f7;
        border-radius: 21px;
        position: relative;
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-search-wrapper #ec-search-input {
        width: 100%;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        line-height: 40px;
        /* rechts Platz fuer den 26px-Kreis des Loeschen-X */
        padding: 0 36px 0 34px;
        font-size: 14px;
        border: none;
        outline: none;
        background: transparent;
        color: #222222;
        box-sizing: border-box;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded .ec-search-wrapper .ec-search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        opacity: 0.55;
        z-index: 2;
    }

    html body .ec-event-calendar-app.ec-floating-search-active .ec-app-container .ec-toolbar.ec-filters-expanded #ec-mobile-filter-toggle {
        order: 11;
        flex: 0 0 38px;
        width: 38px;
        min-width: 38px;
        max-width: 38px;
        height: 38px;
        min-height: 38px;
        max-height: 38px;
        margin: 4px 0 0 8px;
        align-self: center;
    }

@keyframes ecSlideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Toast Notification */
.ec-toast-alert {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #222222;
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 2147483647;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 90%;
    text-align: center;
}

.ec-toast-alert.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}