/**
 * 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,
html body .ec-event-calendar-app .ec-speakers-directory-empty {
  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;
}

/* 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-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;
}

/* 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;
}

/* 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);
}

html body .ec-event-calendar-app .ec-speakers-directory-empty {
  margin-top: 0;
  color: #64748b;
  font-style: italic;
}

/* =========================================================================
   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);
}

/* 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;
  }
}

/* =========================================================================
   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;
  }
}