/**
 * Speakers - Frontend
 *
 * Ergaenzt ec-single-event.css, ersetzt sie nicht: Die Sprecher-Detailansicht
 * nutzt bewusst dieselben Klassen wie die Programmpunkt-Detailansicht
 * (ec-single-wrapper, ec-single-card, ec-btn-more-info …), damit Aenderungen am
 * Kartenlayout automatisch mitwirken. Neu ist hier nur, was es dort nicht gibt:
 * das Kopfteil fuer Portraits und die Sprecherliste am Programmpunkt.
 *
 * Praefix html body .ec-event-calendar-app wie im uebrigen Frontend-CSS - das
 * Modal-Geruest liegt ebenfalls in diesem Wrapper, dadurch sehen Einzelseite
 * und Pop-up identisch aus.
 *
 * @package    event-calendar
 * @subpackage event-calendar/assets/css
 * @since      1.7.4
 */

/* =========================================================================
   SPRECHERLISTE AM PROGRAMMPUNKT
   ========================================================================= */

/* .ec-single-card hat selbst KEIN Padding - jeder Abschnitt darin bringt sein
   eigenes mit (vgl. .ec-single-description-content und
   .ec-single-more-info-wrap in ec-single-event.css, beide 0 30px). Ohne diese
   Angabe klebte der Abschnitt am linken Rand, waehrend alles darueber und
   darunter eingerueckt ist. */
html body .ec-event-calendar-app .ec-event-speakers-section {
  margin: 0;
  padding: 25px 30px 30px 30px;
  border-top: 1px solid var(--ec-border, #dcebf7);
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-event-speakers-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 15px;
  font-size: 1.1rem;
  color: #1e293b;
}

/* Basis fuer die Masken-Icons in diesen Bausteinen.

   .ec-icon-* liefert in ec-core.css NUR das Maskenbild. Alles Uebrige - Anzeige,
   Groesse, Farbflaeche und Maskenverhalten - steht dort ausschliesslich unter
   .ec-detail-row .ec-svg (ec-single-event.css). Ausserhalb einer solchen Zeile
   bleibt ein <span class="ec-svg ec-icon-…"> deshalb voellig unsichtbar: ohne
   background-color gibt es keine Flaeche, die die Maske freistellen koennte.
   Diese Angaben muessen hier also wiederholt werden. */
html body .ec-event-calendar-app .ec-event-speakers-heading .ec-svg,
html body .ec-event-calendar-app .ec-speaker-hero-lang .ec-svg {
  display: inline-block;
  flex: 0 0 auto;
  -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-event-calendar-app .ec-event-speakers-heading .ec-svg {
  width: 18px;
  height: 18px;
  background-color: var(--ec-primary, #f76b15);
}

/* "Zeilenweise": je Sprecher eine Zeile aus Bild und drei Textzeilen. Auf
   breiten Bildschirmen stehen zwei bis drei dieser Zeilen nebeneinander -
   eine einzige Spalte waere dort ueber die volle Breite gezogen und schwer
   zu lesen. */
html body .ec-event-calendar-app .ec-event-speakers-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

html body .ec-event-calendar-app .ec-speaker-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  background: #fff;
  border: 1px solid var(--ec-border, #dcebf7);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html body .ec-event-calendar-app a.ec-speaker-card:hover,
html body .ec-event-calendar-app a.ec-speaker-card:focus-visible {
  border-color: var(--ec-primary, #f76b15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
}

/* Ohne Detailansicht ist die Zeile reine Information - sie soll dann auch
   nicht wie eine Schaltflaeche aussehen. */
html body .ec-event-calendar-app .ec-speaker-card-static {
  cursor: default;
}

html body .ec-event-calendar-app .ec-speaker-card-photo {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 8px;
  background-color: var(--ec-secondary, #eef4fa);
  background-image: var(--ec-speaker-photo, none);
  background-size: cover;
  background-position: center;
}

/* Kein Bild: schlichtes Personensymbol als Maske. Die Datei liegt bereits im
   Plugin und wird hier wiederverwendet, statt den Pfad im JS zu duplizieren. */
html body .ec-event-calendar-app .ec-speaker-card-photo-empty {
  background-image: none;
  background-color: var(--ec-primary, #f76b15);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / 55%;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / 55%;
  opacity: .45;
}

html body .ec-event-calendar-app .ec-speaker-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Ohne min-width:0 greift text-overflow im Flex-Kind nicht - der Text
     sprengt stattdessen die Karte, statt mit … zu kuerzen. */
  min-width: 0;
  flex: 1 1 auto;
}

html body .ec-event-calendar-app .ec-speaker-card-name,
html body .ec-event-calendar-app .ec-speaker-card-position,
html body .ec-event-calendar-app .ec-speaker-card-company {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

html body .ec-event-calendar-app .ec-speaker-card-name {
  font-weight: 700;
  font-size: .98rem;
  color: #1e293b;
  line-height: 1.3;
}

html body .ec-event-calendar-app .ec-speaker-card-position {
  font-size: .84rem;
  color: #475569;
  line-height: 1.35;
}

html body .ec-event-calendar-app .ec-speaker-card-company {
  font-size: .8rem;
  color: #64748b;
  line-height: 1.35;
}

html body .ec-event-calendar-app a.ec-speaker-card:hover .ec-speaker-card-name {
  color: var(--ec-primary, #f76b15);
}

/* =========================================================================
   UEBERSICHT [event_speakers]
   ========================================================================= */

/* Abstand nach dem letzten Eintrag: Ohne ihn klebt ein folgender Shortcode
   oder Absatz direkt an der untersten Kartenreihe. */
html body .ec-event-calendar-app .ec-speakers-directory {
  margin-bottom: 30px;
}

/* Die Listendarstellung nutzt dieselben Zeilen wie unter einem Programmpunkt -
   deshalb hier nur das Raster, kein eigenes Kartenaussehen. */
html body .ec-event-calendar-app .ec-speakers-directory-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}

/* Wenn das Verzeichnis auf Liste geschaltet ist, wandelt sich die Kachel
   in eine horizontale Zeile mit identischen Abmessungen wie die Sprecherkarte */
html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border-radius: 8px;
  padding: 6px 14px 6px 6px;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-photo {
  width: 72px;
  height: 72px;
  min-width: 72px;
  max-width: 72px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-text {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-name {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-position {
  font-size: .84rem;
  color: #475569;
  line-height: 1.35;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-company {
  font-size: .8rem;
  color: #64748b;
  line-height: 1.35;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-logo {
  margin-top: 3px;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-tile-logo img {
  max-height: 26px;
}

html body .ec-event-calendar-app .ec-speakers-directory-list a.ec-speaker-tile:hover .ec-speaker-tile-name {
  color: var(--ec-primary, #f76b15);
}

/* In der Uebersicht und unter einem Programmpunkt: Weniger Innenabstand oben,
   unten und links, dafuer ein groesseres Portrait - die Karte bleibt dabei
   etwa gleich hoch. Aussteller-Eintrag und Sprechblase nutzen dieselbe Karte,
   behalten aber bewusst das kleinere Mass. */
html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-card,
html body .ec-event-calendar-app .ec-event-speakers-list .ec-speaker-card {
  padding: 6px 14px 6px 6px;
}

html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-card-photo,
html body .ec-event-calendar-app .ec-event-speakers-list .ec-speaker-card-photo {
  width: 72px;
  height: 72px;
}

html body .ec-event-calendar-app .ec-speakers-directory-grid {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: Sonst waere die Mindestbreite einer Spalte der
     laengste unumbrechbare Name, und ein langer Firmenname sprengte das
     Raster ueber die Seitenbreite hinaus. */
  grid-template-columns: repeat(var(--ec-speakers-columns, 5), minmax(0, 1fr));
  gap: 20px;
}

html body .ec-event-calendar-app .ec-speakers-directory.ec-speakers-cols-1 { --ec-speakers-columns: 1; }
html body .ec-event-calendar-app .ec-speakers-directory.ec-speakers-cols-2 { --ec-speakers-columns: 2; }
html body .ec-event-calendar-app .ec-speakers-directory.ec-speakers-cols-3 { --ec-speakers-columns: 3; }
html body .ec-event-calendar-app .ec-speakers-directory.ec-speakers-cols-4 { --ec-speakers-columns: 4; }
html body .ec-event-calendar-app .ec-speakers-directory.ec-speakers-cols-5 { --ec-speakers-columns: 5; }
html body .ec-event-calendar-app .ec-speakers-directory.ec-speakers-cols-6 { --ec-speakers-columns: 6; }

html body .ec-event-calendar-app .ec-speaker-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ec-border, #dcebf7);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

html body .ec-event-calendar-app a.ec-speaker-tile:hover,
html body .ec-event-calendar-app a.ec-speaker-tile:focus-visible {
  border-color: var(--ec-primary, #f76b15);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
  transform: translateY(-2px);
}

html body .ec-event-calendar-app .ec-speaker-tile-static {
  cursor: default;
}

/* Quadratisch: Portraits liegen meist im 1:1-Format vor, und ein einheitliches
   Seitenverhaeltnis haelt die Kacheln auf gleicher Hoehe. */
html body .ec-event-calendar-app .ec-speaker-tile-photo {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--ec-secondary, #eef4fa);
  background-image: var(--ec-speaker-photo, none);
  background-size: cover;
  background-position: center;
}

/* =========================================================================
   SPRECHER-GRUPPIERUNG & HINWEISE
   ========================================================================= */

html body .ec-event-calendar-app .ec-speakers-group {
  margin-bottom: 36px;
}

html body .ec-event-calendar-app .ec-speakers-group-heading {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ec-border, #dcebf7);
  display: flex;
  align-items: center;
  gap: 10px;
}

html body .ec-event-calendar-app .ec-speakers-group:last-child {
  margin-bottom: 0;
}

/* =========================================================================
   STATUSMELDUNG: KEINE SPRECHER GEFUNDEN (IDENTISCH MIT SCHEDULE)
   ========================================================================= */

html body .ec-event-calendar-app .ec-speakers-container .ec-speakers-no-results.ec-status-container,
html body .ec-event-calendar-app .ec-speakers-no-results.ec-status-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-status-icon.ec-icon-speaker,
html body .ec-event-calendar-app .ec-speakers-container .ec-status-icon.ec-icon-speaker,
html body .ec-event-calendar-app .ec-status-icon.ec-icon-person,
html body .ec-event-calendar-app .ec-speakers-container .ec-status-icon.ec-icon-person {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  display: inline-block;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / contain;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: #999;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-speakers-no-results .ec-status-text,
html body .ec-event-calendar-app .ec-speakers-no-results .ec-status-text {
  color: #999;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.4;
  max-width: 400px;
}

/* =========================================================================
   TOOLBAR & FILTER (SUCHE, ROLLENFILTER, RASTER/LISTE)
   ========================================================================= */

html body .ec-event-calendar-app .ec-speakers-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%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-role-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;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-mobile-filter-toggle {
  display: none;
}

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

html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-search-input,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-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;
  background: #fff;
  font-size: 16px;
  color: #333;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-search-input:focus,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-input:focus {
  outline: none;
  border-color: var(--ec-primary, #f76b15);
}

/* Kein zweites, natives Loeschsymbol im Suchfeld */
html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-search-input::-webkit-search-cancel-button,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-input::-webkit-search-cancel-button,
html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-search-input::-webkit-search-decoration,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-input::-webkit-search-decoration,
html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-search-input::-webkit-search-results-button,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-input::-webkit-search-results-button,
html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-search-input::-webkit-search-results-decoration,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-search-icon,
html body .ec-event-calendar-app .ec-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  z-index: 5;
  pointer-events: none;
}
/* Lupe wie im Aussteller-Plugin: Dashicons-Glyph (\f179) statt Maske. */
html body .ec-event-calendar-app .ec-search-icon::before {
  content: "\f179";
  font-family: dashicons;
  font-size: 20px;
  line-height: 20px;
  color: #888;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-search-clear,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-reset {
  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-speakers-container .ec-search-clear:hover,
html body .ec-event-calendar-app .ec-speakers-container .ec-speaker-search-reset:hover {
  color: var(--ec-primary, #f76b15);
}

/* Rollen Multi-Select Dropdown */
html body .ec-event-calendar-app .ec-speakers-container .ec-multi-select {
  position: relative;
  display: inline-block;
  min-width: 160px;
  max-width: 300px;
  width: auto;
  flex: 0 1 auto;
  height: 42px;
  margin: 0;
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-multi-select-options {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  width: 100%;
  min-width: 220px;
  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-speakers-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); }
}

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-multi-select-search-inner {
  position: relative;
  width: 100%;
}

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-multi-select-search input[type="search"]:focus {
  outline: none;
  border-color: var(--ec-primary, #f76b15);
}

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

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-multi-select-search-clear.ec-hidden {
  display: none;
}

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

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-multi-select-reset.ec-is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

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

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

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

html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-multi-select-option:hover {
  background-color: var(--ec-secondary, #eef4fa);
}

html body .ec-event-calendar-app .ec-speakers-container .ec-multi-select-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* --- FILTER LINK ACTIONS & RESET BUTTON (DESKTOP) ---
   Die Hülle .ec-filter-link-actions ist überall display:contents - die Buttons
   verhalten sich wie direkte Kinder der Toolbar (exakt wie in Schedule ec-main.css). */
html body .ec-event-calendar-app .ec-speakers-container .ec-filter-link-actions {
  display: contents;
}

html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-reset-filter:not(.ec-hidden),
html body .ec-event-calendar-app .ec-speakers-container #ec-reset-filter:not(.ec-hidden),
html body .ec-event-calendar-app .ec-speakers-container .ec-reset-filter:not(.ec-hidden) {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: normal;
}

html body .ec-event-calendar-app .ec-speakers-container #ec-speaker-reset-filter:hover,
html body .ec-event-calendar-app .ec-speakers-container #ec-reset-filter:hover,
html body .ec-event-calendar-app .ec-speakers-container .ec-reset-filter:hover {
  background-color: var(--ec-primary, #f76b15);
  color: #fff;
  border-color: var(--ec-primary, #f76b15);
}

html body .ec-event-calendar-app .ec-speakers-container .ec-reset-filter .ec-icon-svg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-reset-filter .ec-icon-svg svg {
  width: 18px;
  height: 18px;
}

/* View Toggles */
html body .ec-event-calendar-app .ec-speakers-container .ec-toggles {
  display: flex;
  gap: 5px;
  align-items: center;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-view-toggle {
  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;
  font-weight: 500;
  font-size: 14px;
  color: #555;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-sizing: border-box;
  line-height: normal;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-view-toggle:hover,
html body .ec-event-calendar-app .ec-speakers-container .ec-view-toggle.active {
  background-color: var(--ec-primary, #f76b15);
  border-color: var(--ec-primary, #f76b15);
  color: #fff;
}

html body .ec-event-calendar-app .ec-speakers-container .ec-view-toggle .ec-icon-svg,
html body .ec-event-calendar-app .ec-speakers-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-speakers-container .ec-icon-grid-view {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 shape-rendering=%22geometricPrecision%22 text-rendering=%22geometricPrecision%22 image-rendering=%22optimizeQuality%22 fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 viewBox=%220 0 512 510.87%22%3E%3Cpath d=%22M10.69 0h119.84c5.88 0 10.68 4.8 10.68 10.68v119.85c0 5.88-4.8 10.68-10.68 10.68H10.69c-5.88 0-10.69-4.8-10.69-10.68V10.68C0 4.8 4.81 0 10.69 0zm370.78 369.66h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H381.47c-5.88 0-10.68-4.8-10.68-10.68V380.34c0-5.88 4.8-10.68 10.68-10.68zm-185.39 0h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H196.08c-5.88 0-10.69-4.8-10.69-10.68V380.34c0-5.88 4.81-10.68 10.69-10.68zm-185.39 0h119.84c5.88 0 10.68 4.8 10.68 10.68v119.85c0 5.88-4.8 10.68-10.68 10.68H10.69c-5.88 0-10.69-4.8-10.69-10.68V380.34c0-5.88 4.81-10.68 10.69-10.68zm370.78-184.83h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H381.47c-5.88 0-10.68-4.8-10.68-10.68V195.51c0-5.88 4.8-10.68 10.68-10.68zm-185.39 0h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H196.08c-5.88 0-10.69-4.8-10.69-10.68V195.51c0-5.88 4.81-10.68 10.69-10.68zm-185.39 0h119.84c5.88 0 10.68 4.8 10.68 10.68v119.85c0 5.88-4.8 10.68-10.68 10.68H10.69c-5.88 0-10.69-4.8-10.69-10.68V195.51c0-5.88 4.81-10.68 10.69-10.68zM381.47 0h119.84C507.2 0 512 4.8 512 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H381.47c-5.88 0-10.68-4.8-10.68-10.68V10.68c0-5.88 4.8-10.68 10.68-10.68zM196.08 0h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H196.08c-5.88 0-10.69-4.8-10.69-10.68V10.68C185.39 4.8 190.2 0 196.08 0z%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 shape-rendering=%22geometricPrecision%22 text-rendering=%22geometricPrecision%22 image-rendering=%22optimizeQuality%22 fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 viewBox=%220 0 512 510.87%22%3E%3Cpath d=%22M10.69 0h119.84c5.88 0 10.68 4.8 10.68 10.68v119.85c0 5.88-4.8 10.68-10.68 10.68H10.69c-5.88 0-10.69-4.8-10.69-10.68V10.68C0 4.8 4.81 0 10.69 0zm370.78 369.66h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H381.47c-5.88 0-10.68-4.8-10.68-10.68V380.34c0-5.88 4.8-10.68 10.68-10.68zm-185.39 0h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H196.08c-5.88 0-10.69-4.8-10.69-10.68V380.34c0-5.88 4.81-10.68 10.69-10.68zm-185.39 0h119.84c5.88 0 10.68 4.8 10.68 10.68v119.85c0 5.88-4.8 10.68-10.68 10.68H10.69c-5.88 0-10.69-4.8-10.69-10.68V380.34c0-5.88 4.81-10.68 10.69-10.68zm370.78-184.83h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H381.47c-5.88 0-10.68-4.8-10.68-10.68V195.51c0-5.88 4.8-10.68 10.68-10.68zm-185.39 0h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H196.08c-5.88 0-10.69-4.8-10.69-10.68V195.51c0-5.88 4.81-10.68 10.69-10.68zm-185.39 0h119.84c5.88 0 10.68 4.8 10.68 10.68v119.85c0 5.88-4.8 10.68-10.68 10.68H10.69c-5.88 0-10.69-4.8-10.69-10.68V195.51c0-5.88 4.81-10.68 10.69-10.68zM381.47 0h119.84C507.2 0 512 4.8 512 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H381.47c-5.88 0-10.68-4.8-10.68-10.68V10.68c0-5.88 4.8-10.68 10.68-10.68zM196.08 0h119.84c5.89 0 10.69 4.8 10.69 10.68v119.85c0 5.88-4.8 10.68-10.69 10.68H196.08c-5.88 0-10.69-4.8-10.69-10.68V10.68C185.39 4.8 190.2 0 196.08 0z%22/%3E%3C/svg%3E");
}

html body .ec-event-calendar-app .ec-speakers-container .ec-icon-list-round-bullet {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg version=%221.1%22 id=%22Layer_1%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 x=%220px%22 y=%220px%22 viewBox=%220 0 122.88 112.5%22 style=%22enable-background:new 0 0 122.88 112.5%22 xml:space=%22preserve%22%3E%3Cg%3E%3Cpath class=%22st0%22 d=%22M12.56,87.39c6.93,0,12.56,5.62,12.56,12.56c0,6.93-5.62,12.56-12.56,12.56C5.62,112.5,0,106.88,0,99.95 C0,93.01,5.62,87.39,12.56,87.39L12.56,87.39z M35.07,88.24h86.38c0.79,0,1.43,0.64,1.43,1.43v19.93c0,0.79-0.64,1.43-1.43,1.43 H35.07c-0.79,0-1.43-0.64-1.43-1.43V89.67C33.64,88.88,34.29,88.24,35.07,88.24L35.07,88.24z M35.07,44.7h86.38 c0.79,0,1.43,0.64,1.43,1.43v19.93c0,0.79-0.64,1.43-1.43,1.43H35.07c-0.79,0-1.43-0.64-1.43-1.43V46.13 C33.64,45.34,34.29,44.7,35.07,44.7L35.07,44.7z M35.07,1.16h86.38c0.79,0,1.43,0.64,1.43,1.43v19.93c0,0.79-0.64,1.43-1.43,1.43 H35.07c-0.79,0-1.43-0.64-1.43-1.43V2.59C33.64,1.8,34.29,1.16,35.07,1.16L35.07,1.16z M12.56,43.69c6.93,0,12.56,5.62,12.56,12.56 c0,6.93-5.62,12.56-12.56,12.56C5.62,68.81,0,63.19,0,56.25C0,49.32,5.62,43.69,12.56,43.69L12.56,43.69z M12.56,0 c6.93,0,12.56,5.62,12.56,12.56c0,6.93-5.62,12.56-12.56,12.56C5.62,25.11,0,19.49,0,12.56C0,5.62,5.62,0,12.56,0L12.56,0z%22 fill-rule=%22evenodd%22 clip-rule=%22evenodd%22/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg version=%221.1%22 id=%22Layer_1%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 x=%220px%22 y=%220px%22 viewBox=%220 0 122.88 112.5%22 style=%22enable-background:new 0 0 122.88 112.5%22 xml:space=%22preserve%22%3E%3Cg%3E%3Cpath class=%22st0%22 d=%22M12.56,87.39c6.93,0,12.56,5.62,12.56,12.56c0,6.93-5.62,12.56-12.56,12.56C5.62,112.5,0,106.88,0,99.95 C0,93.01,5.62,87.39,12.56,87.39L12.56,87.39z M35.07,88.24h86.38c0.79,0,1.43,0.64,1.43,1.43v19.93c0,0.79-0.64,1.43-1.43,1.43 H35.07c-0.79,0-1.43-0.64-1.43-1.43V89.67C33.64,88.88,34.29,88.24,35.07,88.24L35.07,88.24z M35.07,44.7h86.38 c0.79,0,1.43,0.64,1.43,1.43v19.93c0,0.79-0.64,1.43-1.43,1.43H35.07c-0.79,0-1.43-0.64-1.43-1.43V46.13 C33.64,45.34,34.29,44.7,35.07,44.7L35.07,44.7z M35.07,1.16h86.38c0.79,0,1.43,0.64,1.43,1.43v19.93c0,0.79-0.64,1.43-1.43,1.43 H35.07c-0.79,0-1.43-0.64-1.43-1.43V2.59C33.64,1.8,34.29,1.16,35.07,1.16L35.07,1.16z M12.56,43.69c6.93,0,12.56,5.62,12.56,12.56 c0,6.93-5.62,12.56-12.56,12.56C5.62,68.81,0,63.19,0,56.25C0,49.32,5.62,43.69,12.56,43.69L12.56,43.69z M12.56,0 c6.93,0,12.56,5.62,12.56,12.56c0,6.93-5.62,12.56-12.56,12.56C5.62,25.11,0,19.49,0,12.56C0,5.62,5.62,0,12.56,0L12.56,0z%22 fill-rule=%22evenodd%22 clip-rule=%22evenodd%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Active filter dot indicator on mobile filter toggle (Samsung One UI / Google style)
   overflow:visible ausdrücklich: Der Punkt ragt über die obere rechte Ecke
   des runden Knopfs (identisch mit ec-main.css). */
html body .ec-event-calendar-app .ec-speakers-container .ec-mobile-filter-toggle.has-active-filters,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-mobile-filter-toggle.has-active-filters {
  position: relative;
  overflow: visible;
}

/* display/opacity/visibility ausdrücklich für Theme-Kompatibilität (z.B. Betheme) */
html body .ec-event-calendar-app .ec-speakers-container .ec-mobile-filter-toggle.has-active-filters::after,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-mobile-filter-toggle.has-active-filters::after {
  content: "";
  display: block;
  opacity: 1;
  visibility: visible;
  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);
  z-index: 2;
  pointer-events: none;
  animation: ecPulseBadge 1.8s infinite;
}

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

/* =========================================================================
   FLOATING SEARCH BAR STYLES (MOBILE, TABLET UND PWA)
   Exakte 1:1-Entsprechung zu ec-main.css (Zeilen 3914–4665)
   ========================================================================= */

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container {
  padding-bottom: 50px;
}

/* 1. Floating Search Bar Pill (Closed & Unfocused State: 3/4 Width & Translucent) */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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 */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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 speaker section is scrolled out of viewport) */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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-speakers-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-speakers-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-speakers-container .ec-toolbar #ec-speaker-search-input,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-speaker-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;
  padding: 0 36px 0 34px;
  border-radius: 0;
  box-sizing: border-box;
}

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

/* Löschen-X als weicher Kreis-Button */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-speaker-search-reset,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-search-clear {
  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-speakers-container .ec-toolbar .ec-speaker-search-reset:hover,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-search-clear:hover {
  background: rgba(0, 0, 0, 0.14);
  color: #111111;
}

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-speaker-search-reset:active,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-search-clear: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-speakers-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-speakers-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-speakers-container .ec-toolbar .ec-mobile-filter-toggle.active {
  background: #2b2b2b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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-speakers-container .ec-toolbar:not(.ec-filters-expanded) .ec-speaker-role-filter-placeholder,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar:not(.ec-filters-expanded) #ec-speaker-reset-filter,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar:not(.ec-filters-expanded) #ec-reset-filter,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar:not(.ec-filters-expanded) .ec-reset-filter,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar:not(.ec-filters-expanded) .ec-filter-link-actions,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar:not(.ec-filters-expanded) .ec-toolbar-right {
  display: none;
}

/* Active filter banner on Mobile & Tablet (exakt wie ec-main.css) */
html body .ec-event-calendar-app .ec-speakers-container .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-floating-search-active .ec-speakers-container .ec-active-filter-banner:not(.ec-hidden) {
  display: flex;
}

html body .ec-event-calendar-app .ec-speakers-container .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-speakers-container .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-speakers-container .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-speakers-container .ec-active-filter-banner .ec-btn-active-filter-reset .ec-reset-icon-svg svg {
  stroke: currentColor;
}

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

/* 2. Filters Sheet OPEN (Smooth Upward Expansion & Clean Flex Order) */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded {
  top: auto;
  width: calc(100% - 32px);
  max-width: 480px;
  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;
}

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container.ec-filter-sheet-active {
  position: relative;
  z-index: 2147483640;
}

/* App-level Blurred Backdrop Overlay */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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 */
html body .ec-speakers-container .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-speakers-container .ec-toolbar.ec-filters-expanded .ec-toolbar-left,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded .ec-toolbar-right,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded .ec-filter-link-actions {
  display: contents;
}

/* Item 1: Dropdown (Alle Rollen) */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded .ec-speaker-role-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;
}

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded .ec-speaker-role-filter-placeholder .ec-multi-select {
  height: auto;
  width: 100%;
  max-width: 100%;
}

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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-speakers-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-speakers-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-speakers-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: 500;
  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-speakers-container .ec-toolbar.ec-filters-expanded .ec-toggles .ec-view-toggle:hover,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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);
}

/* In der schwebenden Suche gibt es den Toolbar-Reset-Button nicht -
   hier übernimmt ausschließlich die freistehende Pille (.ec-active-filter-banner) über dem Inhalt das Zurücksetzen */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar #ec-speaker-reset-filter,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar #ec-speaker-reset-filter:not(.ec-hidden),
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar #ec-reset-filter,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar #ec-reset-filter:not(.ec-hidden),
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-reset-filter,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-reset-filter:not(.ec-hidden),
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-filter-link-actions {
  display: none;
}

/* Item 9: Divider between filter controls and bottom search bar */
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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-speakers-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-speakers-container .ec-toolbar.ec-filters-expanded .ec-search-wrapper #ec-speaker-search-input,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded .ec-search-wrapper .ec-speaker-search-input {
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  line-height: 40px;
  padding: 0 36px 0 34px;
  font-size: 14px;
  border: none;
  outline: none;
  background: transparent;
  color: #222222;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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-speakers-container .ec-toolbar.ec-filters-expanded #ec-speaker-mobile-filter-toggle,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded #ec-mobile-filter-toggle,
html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-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);
  }
}

/* Das Portrait als <img> mit srcset (ec_render_speaker_tile_photo()) - füllt
   das Quadrat wie zuvor das Hintergrundbild.
   Absolut positioniert: Im normalen Fluss würde das Bild mit seiner eigenen
   Höhe das Quadrat aufdehnen (aspect-ratio ist nur eine Vorzugsgröße, Inhalt
   darf sie überschreiten), und height:100% greift bei einer Höhe aus
   aspect-ratio nicht. So bleibt die Kachel immer 1:1, das Bild wird
   zugeschnitten. Themes setzen oft height:auto und max-width:100% auf img -
   deshalb beides hier ausdrücklich. */
html body .ec-event-calendar-app .ec-speaker-tile-photo .ec-speaker-tile-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

html body .ec-event-calendar-app .ec-speaker-tile-photo-empty {
  background-image: none;
  background-color: var(--ec-primary, #f76b15);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / 42%;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / 42%;
  opacity: .4;
}

html body .ec-event-calendar-app .ec-speaker-tile-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px 16px;
  min-width: 0;
}

html body .ec-event-calendar-app .ec-speaker-tile-role {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ec-primary, #f76b15);
}

html body .ec-event-calendar-app .ec-speaker-tile-name {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1e293b;
}

html body .ec-event-calendar-app .ec-speaker-tile-position {
  font-size: .86rem;
  color: #475569;
}

html body .ec-event-calendar-app .ec-speaker-tile-company {
  font-size: .82rem;
  color: #64748b;
}

/* Firmenlogo statt Firmenname. Die Hoehe ist begrenzt, damit breite und
   hochkante Logos in einer Reihe aehnlich viel Platz einnehmen. */
html body .ec-event-calendar-app .ec-speaker-tile-logo {
  display: block;
  margin-top: 6px;
}

html body .ec-event-calendar-app .ec-speaker-tile-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 40px;
  object-fit: contain;
  /* Bilder in Kacheln bekommen sonst runde Ecken - das schnitte Logos an. */
  border-radius: 0;
}

/* Anders als in der Zeilendarstellung wird hier NICHT gekuerzt: Eine Kachel hat
   Platz nach unten, und ein abgeschnittener Name auf einer Sprecherseite waere
   aergerlicher als eine Kachel, die eine Zeile hoeher ist. */
html body .ec-event-calendar-app .ec-speaker-tile-name,
html body .ec-event-calendar-app .ec-speaker-tile-position,
html body .ec-event-calendar-app .ec-speaker-tile-company {
  overflow-wrap: anywhere;
}

html body .ec-event-calendar-app a.ec-speaker-tile:hover .ec-speaker-tile-name {
  color: var(--ec-primary, #f76b15);
}

/* =========================================================================
   SPRECHER-DETAILANSICHT
   ========================================================================= */

html body .ec-event-calendar-app .ec-speaker-detail {
  /* Die Programmpunkt-Detailansicht bekommt ihre Akzentfarbe vom Ort bzw. der
     Kategorie. Ein Sprecher gehoert zu keinem von beidem - hier gilt die
     Primaerfarbe des Plugins. */
  --ec-s-accent: var(--ec-primary, #f76b15);
  --ec-s-fg: #fff;
}

html body .ec-event-calendar-app .ec-speaker-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #1e293b;
}

/* Portraits sind meist quadratisch oder hochkant. Statt das Motiv auf ein
   breites Herobild zu beschneiden, fuellt eine vergroesserte, unscharfe Kopie
   den Hintergrund - dieselbe Behandlung, die Videoportale Hochkantvideos auf
   breiten Bildschirmen geben. Das Bild selbst bleibt vollstaendig sichtbar. */
html body .ec-event-calendar-app .ec-speaker-hero-bg {
  position: absolute;
  inset: 0;
  background-image: var(--ec-hero-url);
  background-size: cover;
  background-position: center;
  /* Ueber die Kanten hinaus skalieren: Sonst zeigt der Weichzeichner am Rand
     einen halbtransparenten Saum. */
  transform: scale(1.25);
  filter: blur(28px) saturate(1.25) brightness(.55);
  will-change: transform;
}

html body .ec-event-calendar-app .ec-speaker-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 40px 32px;
}

html body .ec-event-calendar-app .ec-speaker-hero-photo {
  flex: 0 0 auto;
  width: 190px;
  height: 190px;
  border-radius: 14px;
  background-image: var(--ec-hero-url);
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, .12);
  border: 3px solid rgba(255, 255, 255, .5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
}

html body .ec-event-calendar-app .ec-speaker-hero-photo-empty {
  background-image: none;
  position: relative;
}

html body .ec-event-calendar-app .ec-speaker-hero-photo-empty::after {
  content: "";
  position: absolute;
  inset: 22%;
  background-color: rgba(255, 255, 255, .6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22%3E %3Ctitle%3EGestikulierender Sprecher %28korrigiert%29%3C/title%3E %3Cg transform=%22translate%28-1.5, 0%29%22%3E %3Cpath d=%22M12,4C9.79,4,8,5.79,8,8s1.79,4,4,4s4-1.79,4-4S14.21,4,12,4z M12,14c-2.67,0-8,1.34-8,4v2h16v-2C20,15.34,14.67,14,12,14z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M4,18h16v2H4V18z M8,21h8v1H8V21z%22 fill=%22currentColor%22/%3E %3Cpath d=%22M19,7c1.1,1.1,1.1,2.9,0,4 M21.5,4.5c2.48,2.48,2.48,6.52,0,9%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E %3C/g%3E %3C/svg%3E") no-repeat center / contain;
}

html body .ec-event-calendar-app .ec-speaker-hero-text {
  min-width: 0;
  flex: 1 1 auto;
}

html body .ec-event-calendar-app .ec-speaker-hero-text .ec-single-title {
  margin: 12px 0 8px;
}

html body .ec-event-calendar-app .ec-speaker-hero-sub {
  margin: 0;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

html body .ec-event-calendar-app .ec-speaker-sub-sep {
  opacity: .6;
  margin: 0 4px;
}

html body .ec-event-calendar-app .ec-speaker-hero-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: .88rem;
  color: rgba(255, 255, 255, .82);
}

html body .ec-event-calendar-app .ec-speaker-hero-lang .ec-svg {
  width: 15px;
  height: 15px;
  /* Dieselbe Farbe wie der Text daneben - das Icon liegt auf dem abgedunkelten
     Herobild, die Akzentfarbe waere dort schwer zu lesen. */
  background-color: rgba(255, 255, 255, .82);
}

/* Firmenlogo im Kopfbereich. Die weisse Flaeche haelt dunkle und transparente
   Logos auf dem abgedunkelten Herobild lesbar. */
html body .ec-event-calendar-app .ec-speaker-hero-logo {
  flex: 0 1 auto;
  display: block;
  box-sizing: border-box;
  max-width: 200px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}

html body .ec-event-calendar-app .ec-speaker-hero-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 72px;
  margin: 0 auto;
  object-fit: contain;
}

/* Ohne Bild braucht es weder Weichzeichner noch die grosse Flaeche. */
html body .ec-event-calendar-app .ec-speaker-detail.no-hero-image .ec-speaker-hero {
  background: linear-gradient(135deg, var(--ec-primary, #f76b15), #1e293b);
}

html body .ec-event-calendar-app .ec-speaker-detail.no-hero-image .ec-speaker-hero-inner {
  padding: 32px;
}

/* =========================================================================
   AUFTRITTE: ANSTEHEND UND VERGANGEN
   ========================================================================= */

html body .ec-event-calendar-app .ec-speaker-no-dates {
  margin: 0;
  color: #64748b;
  font-style: italic;
}

html body .ec-event-calendar-app .ec-speaker-past {
  margin-top: 18px;
}

/* <details>/<summary> statt Schaltflaeche mit Skript: Das Aufklappen ist
   Browserfunktion - tastaturbedienbar, ohne JavaScript, und von Screenreadern
   korrekt als aufklappbarer Bereich angesagt. Hier bekommt es nur das Aussehen
   einer dezenten Schaltflaeche. */
html body .ec-event-calendar-app .ec-speaker-past-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ec-secondary, #eef4fa);
  border: 1px solid var(--ec-border, #dcebf7);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  list-style: none;
  transition: border-color .18s ease, color .18s ease;
}

/* Den Standardpfeil in beiden Engines abschalten - wir zeichnen einen eigenen. */
html body .ec-event-calendar-app .ec-speaker-past-toggle::-webkit-details-marker {
  display: none;
}

html body .ec-event-calendar-app .ec-speaker-past-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

html body .ec-event-calendar-app .ec-speaker-past[open] .ec-speaker-past-toggle::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

html body .ec-event-calendar-app .ec-speaker-past-toggle:hover {
  border-color: var(--ec-primary, #f76b15);
  color: var(--ec-primary, #f76b15);
}

html body .ec-event-calendar-app .ec-speaker-past-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #fff;
  border-radius: 999px;
  font-size: .75rem;
  color: #64748b;
}

/* Name der Hauptveranstaltung im Kopf der Auftrittskachel.

   Bewusst NICHT als .ec-related-badge: Dieses Badge ist versal, fett und in der
   Akzentfarbe - es gehoert der Kategorie und wuerde hier lauter auftreten als
   der Titel des Programmpunkts darunter. Der Veranstaltungsname ist Einordnung,
   nicht Botschaft.

   flex + min-width:0 statt fester Breite: Die Datums-Pille daneben hat
   margin-left:auto und darf nicht verdraengt werden - stattdessen kuerzt dieser
   Text mit … . Der vollstaendige Name steht im title-Attribut. */
html body .ec-event-calendar-app .ec-speaker-event-parent {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.2px;
}

html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-speaker-event-parent {
  filter: grayscale(100%) opacity(0.7);
}

html body .ec-event-calendar-app .ec-related-grid-past {
  margin-top: 14px;
}

/* Vergangene Termine sind Beleg, nicht Angebot - sie treten optisch zurueck. */
html body .ec-event-calendar-app .ec-related-grid-past .ec-related-card {
  opacity: .72;
}

html body .ec-event-calendar-app .ec-related-grid-past .ec-related-card:hover,
html body .ec-event-calendar-app .ec-related-grid-past .ec-related-card:focus-visible {
  opacity: 1;
}

/* =========================================================================
   AUSSTELLERSTAENDE EINES SPRECHERS
   ========================================================================= */

/* Die Standkachel baut auf der Auftrittskachel auf (.ec-related-card) - hier
   nur der Mittelteil aus Logo, Name und Land. */
html body .ec-event-calendar-app .ec-booth-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Logo 1:1, eingepasst statt beschnitten - wie im Aussteller-Eintrag der
   Programmpunkt-Detailansicht. */
html body .ec-event-calendar-app .ec-booth-card-logo {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid var(--ec-border, #dcebf7);
  background-color: #fff;
  background-image: var(--ec-booth-logo, none);
  background-origin: content-box;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

html body .ec-event-calendar-app .ec-booth-card-logo-empty {
  border: 0;
  background-image: none;
  background-color: var(--ec-s-accent, var(--ec-primary, #f76b15));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ctitle%3EAussteller %28Messestand%29%3C/title%3E %3Cpath d=%22M3 9l1.5-5h15L21 9H3z%22/%3E %3Cpath d=%22M3 9a3 3 0 0 0 6 0a3 3 0 0 0 6 0a3 3 0 0 0 6 0%22/%3E %3Cpath d=%22M5 12v8h14v-8%22/%3E %3Cpath d=%22M10 20v-5h4v5%22/%3E %3C/svg%3E") no-repeat center / 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ctitle%3EAussteller %28Messestand%29%3C/title%3E %3Cpath d=%22M3 9l1.5-5h15L21 9H3z%22/%3E %3Cpath d=%22M3 9a3 3 0 0 0 6 0a3 3 0 0 0 6 0a3 3 0 0 0 6 0%22/%3E %3Cpath d=%22M5 12v8h14v-8%22/%3E %3Cpath d=%22M10 20v-5h4v5%22/%3E %3C/svg%3E") no-repeat center / 50%;
  opacity: .45;
}

html body .ec-event-calendar-app .ec-booth-card-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

html body .ec-event-calendar-app .ec-booth-card .ec-booth-card-name {
  margin: 0;
}

html body .ec-event-calendar-app .ec-booth-card-country,
html body .ec-event-calendar-app .ec-booth-card-type {
  display: block;
  font-size: .82rem;
  color: #64748b;
  line-height: 1.35;
}

html body .ec-event-calendar-app .ec-booth-card-label {
  font-weight: 600;
  color: #475569;
}

/* =========================================================================
   LADEZUSTAND IM MODAL
   ========================================================================= */

html body .ec-event-calendar-app .ec-modal-loading {
  padding: 60px 20px;
  text-align: center;
  color: #64748b;
}

html body .ec-event-calendar-app .ec-modal-loading p {
  margin: 15px 0 0;
}

html body .ec-event-calendar-app .ec-modal-loading .ec-loader-spinner {
  margin: 0 auto;
}

/* =========================================================================
   RESPONSIV

   Bewusst @media und nicht @container: Diese Ansichten sind Seiten- bzw.
   Modalinhalte und haengen an der Fensterbreite - anders als Kalender und
   Timetable, die ueber @container ec-card-container schalten.
   ========================================================================= */

@media (max-width: 700px) {
  /* Untereinander UND zentriert: Links ausgerichtet bleibt rechts neben dem
     quadratischen Portrait eine grosse leere Flaeche stehen, die den Kopfbereich
     unfertig wirken laesst. Zentriert traegt das Bild die Mitte und der Text
     sitzt darunter symmetrisch. */
  html body .ec-event-calendar-app .ec-speaker-hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 30px 20px 26px;
  }

  html body .ec-event-calendar-app .ec-speaker-hero-photo {
    width: 150px;
    height: 150px;
  }

  html body .ec-event-calendar-app .ec-speaker-hero-text {
    width: 100%;
  }

  html body .ec-event-calendar-app .ec-speaker-hero-text .ec-single-title {
    font-size: 1.6rem;
    margin: 10px 0 6px;
  }

  /* Die Sprache steht sonst als linksbuendige Zeile unter zentriertem Text. */
  html body .ec-event-calendar-app .ec-speaker-hero-lang {
    justify-content: center;
  }

  html body .ec-event-calendar-app .ec-event-speakers-list {
    grid-template-columns: 1fr;
  }

  html body .ec-event-calendar-app .ec-speaker-card-photo {
    width: 54px;
    height: 54px;
  }

  html body .ec-event-calendar-app .ec-speakers-directory-list .ec-speaker-card-photo,
  html body .ec-event-calendar-app .ec-event-speakers-list .ec-speaker-card-photo {
    width: 64px;
    height: 64px;
  }

  /* Volle Breite fuer "Vergangene Auftritte".

     Auf dem Telefon steht die zusammengeschrumpfte Pille als einzelnes Element
     in einer sonst leeren Zeile - daneben bleibt viel ungenutzte Flaeche, und
     die Trefferflaeche zum Antippen ist unnoetig klein. Ueber die volle Breite
     wird daraus eine klare Schaltflaeche, wie sie der Zurueck-Knopf darunter
     auch schon ist. */
  html body .ec-event-calendar-app .ec-speaker-past-toggle {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    /* Die Pillenform wirkt ueber die volle Breite wie eine liegende Kapsel -
       ein moderater Radius liest sich als Schaltflaeche und passt zu den
       Kacheln darunter. */
    border-radius: 10px;
  }

  /* Anzahl und Pfeil wandern gemeinsam nach rechts, die Beschriftung bleibt
     links - das gewohnte Bild eines aufklappbaren Bereichs. */
  html body .ec-event-calendar-app .ec-speaker-past-count {
    margin-left: auto;
  }
}

/* Die Spaltenzahl aus dem Shortcode gilt fuer breite Bildschirme. Darunter wird
   sie gedeckelt, sonst quetschten sich vier Kacheln auf ein Telefondisplay.
   min() greift nur, wenn die eingestellte Zahl ohnehin kleiner ist - wer zwei
   Spalten gewaehlt hat, behaelt auf dem Tablet auch zwei. */
/* Mittlere Bildschirme: höchstens vier Spalten - fünf oder sechs ergäben hier
   Kacheln unter 200px, in denen Rolle und Name dauernd umbrechen. */
@media (max-width: 1200px) {
  html body .ec-event-calendar-app .ec-speakers-directory-grid {
    grid-template-columns: repeat(min(var(--ec-speakers-columns, 5), 4), minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  html body .ec-event-calendar-app .ec-speakers-directory-grid {
    grid-template-columns: repeat(min(var(--ec-speakers-columns, 5), 2), minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  html body .ec-event-calendar-app .ec-speakers-directory-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  html body .ec-event-calendar-app .ec-speakers-directory-list {
    grid-template-columns: 1fr;
  }
}

/* Responsive Layout: Raster auf Desktop, Liste auf Mobil (Option 3) */
@media (max-width: 1024px) {
  html body .ec-event-calendar-app .ec-speakers-container[data-responsive-layout="1"] .ec-speakers-directory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }

  html body .ec-event-calendar-app .ec-speakers-container[data-responsive-layout="1"] .ec-speakers-directory .ec-speaker-tile {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    padding: 6px 14px 6px 6px;
  }

  html body .ec-event-calendar-app .ec-speakers-container[data-responsive-layout="1"] .ec-speakers-directory .ec-speaker-tile-photo {
    width: 72px;
    height: 72px;
    min-width: 72px;
    max-width: 72px;
    border-radius: 6px;
  }

  html body .ec-event-calendar-app .ec-speakers-container[data-responsive-layout="1"] .ec-speakers-directory .ec-speaker-tile-text {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  /* Kachel / Liste Buttons im mobilen Bereich komplett verbergen bei Option 3 */
  html body .ec-event-calendar-app .ec-speakers-container[data-responsive-layout="1"] .ec-toggles,
  html body .ec-event-calendar-app .ec-speakers-container .ec-toggles.ec-toggles-hide-mobile,
  html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container[data-responsive-layout="1"] .ec-toolbar .ec-toggles,
  html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container[data-responsive-layout="1"] .ec-toolbar.ec-filters-expanded .ec-toggles,
  html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar .ec-toggles.ec-toggles-hide-mobile,
  html body .ec-event-calendar-app.ec-floating-search-active .ec-speakers-container .ec-toolbar.ec-filters-expanded .ec-toggles.ec-toggles-hide-mobile,
  html body .ec-event-calendar-app .ec-speakers-container.ec-is-mobile-view[data-responsive-layout="1"] .ec-toggles,
  html body .ec-event-calendar-app .ec-speakers-container.ec-is-mobile-view .ec-toggles.ec-toggles-hide-mobile {
    display: none;
  }
}

@media (max-width: 560px) {
  html body .ec-event-calendar-app .ec-speakers-container[data-responsive-layout="1"] .ec-speakers-directory {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   AUSSTELLER-EINTRAG IM KOPFBEREICH DER DETAILANSICHT
   ========================================================================= */

/* Nutzt die Sprecherzeile (.ec-speaker-card) - hier nur, was abweicht. Die
   Karte fuellt ihre Spalte bzw. Zeile ganz aus: Mit fester Kartenbreite blieb
   rechts daneben eine leere Flaeche stehen, die den Kopfbereich unfertig
   wirken liess. Wo sie steht, entscheidet das Raster in ec-single-event.css. */
html body .ec-event-calendar-app .ec-meta-exhibitor .ec-exhibitor-card {
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  box-sizing: border-box;
}

/* Logos werden eingepasst statt beschnitten: Ein angeschnittener Schriftzug
   ist unlesbar, ein schmaler Rand um ein Foto stoert dagegen kaum. Die Flaeche
   selbst bleibt 1:1 wie beim Sprecherportrait. */
html body .ec-event-calendar-app .ec-exhibitor-card-logo {
  padding: 4px;
  background-color: #fff;
  background-origin: content-box;
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid var(--ec-border, #dcebf7);
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-exhibitor-card-logo-empty {
  border: 0;
  background-color: var(--ec-primary, #f76b15);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ctitle%3EAussteller %28Messestand%29%3C/title%3E %3Cpath d=%22M3 9l1.5-5h15L21 9H3z%22/%3E %3Cpath d=%22M3 9a3 3 0 0 0 6 0a3 3 0 0 0 6 0a3 3 0 0 0 6 0%22/%3E %3Cpath d=%22M5 12v8h14v-8%22/%3E %3Cpath d=%22M10 20v-5h4v5%22/%3E %3C/svg%3E") no-repeat center / 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%22240%22 height=%22240%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3Ctitle%3EAussteller %28Messestand%29%3C/title%3E %3Cpath d=%22M3 9l1.5-5h15L21 9H3z%22/%3E %3Cpath d=%22M3 9a3 3 0 0 0 6 0a3 3 0 0 0 6 0a3 3 0 0 0 6 0%22/%3E %3Cpath d=%22M5 12v8h14v-8%22/%3E %3Cpath d=%22M10 20v-5h4v5%22/%3E %3C/svg%3E") no-repeat center / 50%;
  opacity: .45;
}

html body .ec-event-calendar-app .ec-exhibitor-card-flag {
  display: inline-block;
  width: 16px;
  height: 12px;
  margin: 0 6px 0 0;
  vertical-align: -1px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

/* =========================================================================
   SPRECHBLASE AM NAMEN DES ERSTEN SPRECHERS
   ========================================================================= */

/* Reines CSS: Die Blase wiederholt nur, was ueber den Namen ohnehin
   erreichbar ist, und ist fuer Screenreader ausgeblendet. Auf Touch-Geraeten
   erscheint sie nicht - dort fuehrt das Antippen direkt zum Ziel. */
html body .ec-event-calendar-app .ec-role-hover {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

html body .ec-event-calendar-app .ec-role-bubble {
  position: absolute;
  left: -10px;
  top: calc(100% + 10px);
  z-index: 40;
  width: max-content;
  max-width: min(340px, 80vw);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  pointer-events: none;
  text-align: left;
}

/* Die Spitze zeigt auf den Namen. Sie liegt hinter der Karte, sichtbar
   bleibt nur die obere Haelfte mit dem Rahmen. */
html body .ec-event-calendar-app .ec-role-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 22px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-top: 1px solid var(--ec-s-accent, var(--ec-primary, #f76b15));
  border-left: 1px solid var(--ec-s-accent, var(--ec-primary, #f76b15));
  transform: rotate(45deg);
}

html body .ec-event-calendar-app .ec-role-bubble .ec-speaker-card {
  min-width: 240px;
  border-color: var(--ec-s-accent, var(--ec-primary, #f76b15));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

@media (hover: hover) {
  html body .ec-event-calendar-app .ec-role-hover:hover .ec-role-bubble,
  html body .ec-event-calendar-app .ec-role-hover:focus-within .ec-role-bubble {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .15s ease, transform .15s ease, visibility 0s;
  }

  /* Gepunktete Unterstreichung als Hinweis, dass es hier mehr zu sehen gibt.
     Sie ueberträgt sich auch auf den Link darin, obwohl .ec-role-link selbst
     text-decoration: none traegt - Unterstreichungen vererben sich so. */
  html body .ec-event-calendar-app .ec-role-hover:hover {
    text-decoration: underline dotted;
    text-decoration-color: var(--ec-s-accent, var(--ec-primary, #f76b15));
    text-underline-offset: 3px;
  }
}

/* Weichzeichner und Skalierung sind reine Zier. Wer reduzierte Bewegung oder
   sparsame Darstellung eingestellt hat, bekommt stattdessen eine ruhige
   Flaeche - das Bild selbst bleibt unveraendert sichtbar. */
@media (prefers-reduced-motion: reduce) {
  html body .ec-event-calendar-app .ec-speaker-hero-bg {
    transform: none;
    filter: brightness(.5);
  }

  html body .ec-event-calendar-app a.ec-speaker-card:hover {
    transform: none;
  }

  html body .ec-event-calendar-app .ec-role-bubble {
    transform: none;
    transition: none;
  }
}