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

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

Table of Contents:

1. SINGLE EVENT PAGE STYLES (Detail View)
2. CANCELLED BADGE & TEXT - SINGLE EVENT PAGE
3. RESPONSIVE / MOBILE STYLES (Tablet & Handy)
4. ULTRA-COMPACT (Deine Idee - für sehr schmale Screens < 400px)
-------------------------------------------------------------------*/



/* ==========================================================================
   1. SINGLE EVENT PAGE STYLES (Detail View)
   ========================================================================== */

html body .ec-event-calendar-app .ec-single-container {
  display: block;
  max-width: 1200px;
  width: 95%;
  margin: 40px auto;
  padding: 0 15px;
  box-sizing: border-box;
  font-family: inherit;
}

/* Layout, wenn kein Hero-Bild vorhanden ist */
html body .ec-event-calendar-app .ec-single-container.no-hero-image {
  margin-top: 30px;
}

html body .ec-event-calendar-app .ec-single-title-compact {
  width: 100%;
  margin: -2px 0 2px 0;
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
  color: #222;
}

html body .ec-event-calendar-app .ec-single-is-cancelled .ec-single-title-compact {
  color: #666;
}

html body .ec-event-calendar-app .ec-single-header {
  position: relative;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: #333;
  margin-bottom: -30px;
  z-index: 1;
}

html body .ec-event-calendar-app .ec-hero-image {
  height: 450px;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  background-image: var(--ec-hero-url);
}

html body .ec-event-calendar-app .ec-header-content-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 30px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-single-title {
  margin: 10px 0 20px 0;
  font-size: 2.2rem;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

html body .ec-event-calendar-app .ec-single-cat-badge {
  background: var(--ec-primary);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
}

html body .ec-event-calendar-app .ec-single-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

html body .ec-event-calendar-app .ec-single-meta-bar {
  background-color: rgba(var(--ec-s-bg-rgb), 0.15);
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  border-bottom: 1px solid rgba(var(--ec-s-bg-rgb), 0.2);
}

html body .ec-event-calendar-app .ec-meta-box.date-box {
  background: #fff;
  padding: 10px 0;
  width: 90px;
  text-align: center;
  border-radius: 6px;
  border: 2px solid var(--ec-s-accent);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.8);
}

html body .ec-event-calendar-app .ec-mb-day {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #333;
}

html body .ec-event-calendar-app .ec-mb-date {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ec-s-accent);
}

html body .ec-event-calendar-app .ec-mb-month {
  display: block;
  font-size: 0.8rem;
  color: #333;
}

html body .ec-event-calendar-app .ec-meta-details {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 30px;
  width: 100%;
}

html body .ec-event-calendar-app .ec-meta-left {
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1 1 45%;
  min-width: 240px;
}

html body .ec-event-calendar-app .ec-meta-right {
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1 1 45%;
  min-width: 240px;
  padding-left: 0;
}

html body .ec-event-calendar-app .ec-meta-right:empty,
html body .ec-event-calendar-app .ec-meta-left:empty {
  display: none;
}

html body .ec-event-calendar-app .ec-meta-fullwidth {
  width: 100%;
  flex: 1 1 100%;
  margin-top: 15px;
}

/* --------------------------------------------------------------------------
   Kopfbereich mit Aussteller-Eintrag: Raster nach verfuegbarer Breite

   Gemessen wird die Kopfleiste selbst (Container ec-meta-bar), nicht das
   Fenster: Pop-up und Einzelseite sind zwar beide hoechstens 1200px breit,
   haben bei gleicher Fensterbreite aber unterschiedlich viel Platz (Rand und
   Scrollleiste des Pop-ups, 95 % Breite der Einzelseite, Theme-Raender). Mit
   @media stuende der Aussteller in einer der beiden Ansichten in einer zu
   schmalen dritten Spalte.

   Die Umschaltung auf eine Spalte fuer Mobil bleibt beim bestehenden
   @media (max-width: 768px). Die Raster-Stufen gelten nur darueber
   (width > 768px), damit sich beide Mechanismen nie ueberschneiden und kein
   Zwischenbereich entsteht, in dem beide oder keiner greifen.

   Stufen, gemessen an der Kopfleiste inklusive Datumsbox:
     ab 1080px     drei Spalten - Aussteller oben rechts, Preis darunter
     700 - 1079px  zwei Spalten 60/40 - links Zeit/Ort und Preis, rechts
                   Rolle/Sprache und Aussteller; Preis und Aussteller teilen
                   sich damit eine Zeile. Ohne Preis rueckt der Aussteller
                   nach links unter Zeit/Ort
     darunter      bisheriges Fliesslayout, Aussteller als volle Zeile

   Nur mit Aussteller-Eintrag (:has) - ohne ihn bleibt alles wie bisher.
   grid-auto-flow: dense ist noetig, damit der Preis (links) in dieselbe Zeile
   rutscht wie der Aussteller (rechts), obwohl er im Markup danach steht.
   -------------------------------------------------------------------------- */
html body .ec-event-calendar-app .ec-single-meta-bar {
  container: ec-meta-bar / inline-size;
}

@media (width > 768px) {
  @container ec-meta-bar (min-width: 700px) {
    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      grid-auto-flow: row dense;
      align-items: start;
      gap: 18px 30px;
    }

    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) > .ec-single-title-compact {
      grid-column: 1 / -1;
    }

    /* min-width: 0 hebt die 240px aus dem Fliesslayout auf - sonst sprengte
       eine Spalte das Raster, statt umzubrechen. */
    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) > .ec-meta-left {
      grid-column: 1;
      min-width: 0;
    }

    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) > .ec-meta-right {
      grid-column: 2;
      min-width: 0;
    }

    html body .ec-event-calendar-app .ec-meta-details > .ec-meta-exhibitor {
      grid-column: 2;
      margin-top: 0;
    }

    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) > .ec-meta-fullwidth:not(.ec-meta-exhibitor) {
      grid-column: 1;
      margin-top: 0;
    }
  }

  /* Ohne Preis rueckt der Aussteller nach links auf dessen Platz unter
     Zeit/Ort - allein in der rechten Spalte wirkte er daneben verloren. Nur
     in der mittleren Stufe: In der breiten steht er ohnehin oben rechts. */
  @container ec-meta-bar (min-width: 700px) and (max-width: 1079.98px) {
    html body .ec-event-calendar-app .ec-meta-details:not(:has(> .ec-meta-fullwidth:not(.ec-meta-exhibitor))) > .ec-meta-exhibitor {
      grid-column: 1;
    }
  }

  @container ec-meta-bar (min-width: 1080px) {
    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(260px, 320px);
    }

    html body .ec-event-calendar-app .ec-meta-details > .ec-meta-exhibitor {
      grid-column: 3;
    }

    html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) > .ec-meta-fullwidth:not(.ec-meta-exhibitor) {
      grid-column: 1 / -1;
    }
  }
}

html body .ec-event-calendar-app .ec-price-content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 auto;
}

html body .ec-event-calendar-app .ec-price-label {
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0;
}

html body .ec-event-calendar-app .ec-price-value {
  flex: 1 1 auto;
  min-width: 0;
}

html body .ec-event-calendar-app .ec-detail-row-price br {
  display: none;
}

html body .ec-event-calendar-app .ec-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

html body .ec-event-calendar-app .ec-detail-row .ec-svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  background-color: var(--ec-s-accent);
  -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-detail-row>div {
  flex: 1 1 auto;
  min-width: 0;
}

/* Dashicon statt Maske (Aussteller-Zeile): dasselbe Symbol wie die
   Ueberschrift "Ausstellerstaende" der Sprecherseite, in der Farbe der
   Masken-Icons der uebrigen Zeilen.

   Das Feld bleibt 20px breit wie bei den anderen Icons - so steht die
   Beschriftung daneben buendig. Das Zeichen selbst ist kleiner: Ein Dashicon
   fuellt sein Feld randlos aus, die Masken-Icons haben Luft im Zeichenrahmen
   und wirken dadurch kleiner. Bei gleicher Groesse wirkte es zu wuchtig. */
html body .ec-event-calendar-app .ec-detail-row .ec-detail-row-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  color: var(--ec-s-accent);
}

html body .ec-event-calendar-app .ec-role-link {
  color: var(--ec-s-accent);
  text-decoration: none;
  border-bottom: none;
  transition: filter 0.2s ease-in-out;
}

html body .ec-event-calendar-app .ec-role-link:hover {
  color: var(--ec-s-accent);
  filter: brightness(0.8);
  text-decoration: none;
}

html body .ec-event-calendar-app .ec-single-actions-bar {
  padding: 15px 25px;
  background-color: var(--ec-bg-light);
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 12px;
}

html body .ec-event-calendar-app .ec-single-actions-bar button,
html body .ec-event-calendar-app .ec-single-actions-bar a.ec-ticket-btn-single {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border: 2px solid var(--ec-primary);
  color: var(--ec-primary);
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  justify-content: center;
  text-decoration: none;
  font-size: 0.95rem;
}

html body .ec-event-calendar-app .ec-single-actions-bar button:hover,
html body .ec-event-calendar-app .ec-single-actions-bar a:hover,
html body .ec-event-calendar-app .ec-single-actions-bar .ec-fav-btn-single:hover,
html body .ec-event-calendar-app .ec-single-actions-bar .ec-ical-btn-single:hover,
html body .ec-event-calendar-app .ec-single-actions-bar .ec-share-btn-single:hover {
  background-color: var(--ec-primary);
  border-color: var(--ec-primary);
  color: #fff;
  opacity: 1;
  transform: translateY(-2px);
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-icon-share-square {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--ec-primary);
  flex-shrink: 0;
  /* Mask-Pfad kommt aus ec-core.css */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease-in-out;
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-share-btn-single:hover .ec-icon-share-square {
  background-color: #fff;
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-share-btn-single.ec-copied {
  background-color: #10b981;
  border-color: #10b981;
  color: #fff;
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-share-btn-single.ec-copied .ec-icon-share-square {
  background-color: #fff;
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-fav-btn-single.active .ec-mask-icon {
  background-color: var(--ec-primary);
}

html body .ec-event-calendar-app .ec-single-actions-bar .ec-fav-btn-single.active:hover .ec-mask-icon {
  background-color: #fff;
}

/* Falls auf mittleren Desktop-Breiten nicht alle 4 Texte nebeneinander passen:
   NUR wenn tatsächlich 4 Buttons vorhanden sind, wird der Share-Button als reines Icon dargestellt.
   Wenn nur 3 oder weniger Buttons vorhanden sind, bleibt der volle Text sichtbar! */
@media (max-width: 992px) and (min-width: 601px) {
  html body .ec-event-calendar-app .ec-single-actions-bar.ec-actions-count-4 .ec-share-btn-single,
  html body .ec-event-calendar-app .ec-single-actions-bar:has(> :nth-child(4)) .ec-share-btn-single {
    flex: 0 0 52px;
    padding: 8px 0;
  }
  html body .ec-event-calendar-app .ec-single-actions-bar.ec-actions-count-4 .ec-share-btn-single .ec-share-btn-text,
  html body .ec-event-calendar-app .ec-single-actions-bar:has(> :nth-child(4)) .ec-share-btn-single .ec-share-btn-text {
    display: none;
  }
}

html body .ec-event-calendar-app .ec-single-description-content {
  padding: 35px 30px 20px 30px;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #333;
}

/* Kategorien-Leiste (wenn >1 Kategorie vorhanden) */
html body .ec-event-calendar-app .ec-single-categories-section {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 30px 20px 30px;
  box-sizing: border-box;
}

html body .ec-event-calendar-app .ec-single-categories-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: #444;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

html body .ec-event-calendar-app .ec-single-categories-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

html body .ec-event-calendar-app .ec-single-categories-list .ec-single-cat-badge {
  background: var(--ec-primary, #f76b15);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.3px;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* "Weitere Informationen" & Kontakt-Buttons unter dem Beschreibungsblock */
html body .ec-event-calendar-app .ec-single-more-info-wrap {
  padding: 0 30px 30px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
}

html body .ec-event-calendar-app .ec-btn-more-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ec-s-accent, var(--ec-primary, #f76b15));
  background-color: var(--ec-s-accent, var(--ec-primary, #f76b15));
  color: var(--ec-s-fg, #ffffff);
  border: 2px solid var(--ec-s-accent, var(--ec-primary, #f76b15));
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

@media (hover: hover) {
  html body .ec-event-calendar-app .ec-btn-more-info:hover {
    background: #fff;
    background-color: #fff;
    color: var(--ec-s-accent, var(--ec-primary, #f76b15));
    border-color: var(--ec-s-accent, var(--ec-primary, #f76b15));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }
  
  html body .ec-event-calendar-app .ec-btn-more-info:hover .ec-btn-svg {
    transform: translateY(-1px) scale(1.08);
  }

  html body .ec-event-calendar-app .ec-btn-more-info:hover .dashicons,
  html body .ec-event-calendar-app .ec-btn-more-info:hover .ec-mask-icon {
    transform: translateY(-1px) scale(1.08);
  }
}

html body .ec-event-calendar-app .ec-btn-more-info .ec-btn-svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.2s ease-in-out;
}

/* Masken-Icons in den Link-Buttons (TikTok): gleiche Groesse wie die SVG-
   Icons, Farbe = Textfarbe des Buttons - so geht der Farbwechsel beim
   Ueberfahren mit wie bei den Dashicons. */
html body .ec-event-calendar-app .ec-btn-more-info .ec-mask-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  vertical-align: middle;
  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;
  transition: transform 0.2s ease-in-out;
}

html body .ec-event-calendar-app .ec-btn-more-info .dashicons {
  font-family: dashicons;
  display: inline-block;
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  color: inherit;
  transition: transform 0.2s ease-in-out;
}

html body .ec-event-calendar-app .ec-single-footer {
  margin-top: 30px;
  text-align: center;
  padding-bottom: 50px;
}

html body .ec-event-calendar-app .ec-back-btn {
  background-color: #fff;
  border: 2px solid var(--ec-primary);
  color: var(--ec-primary);
  padding: 8px 25px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  display: inline-block;
  /* Sicherstellen, dass Padding greift */
}

html body .ec-event-calendar-app .ec-back-btn:hover,
.ec-event-calendar-app .ec-back-btn:focus,
.ec-event-calendar-app .ec-back-btn:active {
  background-color: var(--ec-primary);
  color: #fff;
  border-color: var(--ec-primary);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

html body .ec-event-calendar-app .ec-single-actions-bar {
  display: flex;
  gap: 15px;
  padding: 15px 25px;
}

/* Versteckt die mobilen Status-Elemente in der Desktop-Ansicht */
html body .ec-event-calendar-app .ec-mobile-status-inline,
html body .ec-event-calendar-app .ec-meta-time-live {
  display: none;
}


/* ============================================================
   2. CANCELLED BADGE & TEXT - SINGLE EVENT PAGE
   ============================================================ */

/* 1. Badge Position auf dem Hero-Bild (Oben Rechts) */
html body .ec-event-calendar-app .ec-single-header>.ec-cancelled-badge,
html body .ec-event-calendar-app .ec-single-header>.ec-single-live-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  left: auto;
  font-size: 0.8rem;
  /* Etwas größer passend zum großen Hero-Bild */
  padding: 6px 14px;
  z-index: 20;
  pointer-events: none;
}

/* Live-Badge (setzt initSingleEvent): gleicher Platz wie das Storno-Badge -
   stornierte Termine sind nie live. Farbe und Blinken aus ec-core.css. */
html body .ec-event-calendar-app .ec-single-live-badge {
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Ohne Hero-Bild steht das Badge vorn in .ec-meta-details, damit es mobil
   zwischen Datumsfeld und Titel rutschen kann (siehe Block max-width: 768px).
   Darüber sitzt es absolut oben rechts in der Kopfleiste - klein genug für
   deren Padding. */
html body .ec-event-calendar-app .ec-single-meta-bar:has(.ec-single-live-badge) {
  position: relative;
}

html body .ec-event-calendar-app .ec-meta-details>.ec-single-live-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 20;
  font-size: 0.7rem;
  padding: 3px 8px;
  pointer-events: none;
}

/* Im Pop-up sitzt oben rechts der runde Schließen-Button (ec-core.css: am Desktop
   halb über der Ecke, bis 1024 px innen bei 10 px, 36 px groß) - das Badge rückt
   links daneben. Der Breakpoint muss zu ec-core.css passen. */
html body .ec-event-calendar-app .ec-detail-modal-dialog .ec-meta-details>.ec-single-live-badge {
  right: 36px;
}

@media (max-width: 1024px) {
  html body .ec-event-calendar-app .ec-detail-modal-dialog .ec-single-header>.ec-single-live-badge,
  html body .ec-event-calendar-app .ec-detail-modal-dialog .ec-meta-details>.ec-single-live-badge {
    right: 56px;
  }
}

/* 2. Graufilter & Overlay für die Single-Page aktivieren */

/* Dunkelt das Hero-Bild ab */
html body .ec-event-calendar-app .ec-single-is-cancelled .ec-hero-image {
  filter: grayscale(100%) opacity(0.7);
}

/* Titel abdunkeln (Das Prefix bleibt rot durch die Klasse .ec-cancelled-text) */
html body .ec-event-calendar-app .ec-single-is-cancelled .ec-single-title {
  color: #666;
}

/* Graues Overlay über den kompletten Inhalts-Bereich (Card) */
html body .ec-event-calendar-app .ec-single-is-cancelled .ec-single-card {
  position: relative;
}

/* Entfärbt alle Boxen, Texte und Buttons unter dem Schleier (außer der Sektion für weitere Termine) */
html body .ec-event-calendar-app .ec-single-is-cancelled .ec-single-card>*:not(.ec-related-events-section) {
  filter: grayscale(100%) opacity(0.7);
}

/* ==========================================================================
   3. RESPONSIVE / MOBILE STYLES (Tablet & Handy)
   ========================================================================== */

@media screen and (max-width: 768px) {


  html body .ec-event-calendar-app .ec-single-title {
    font-size: 1.4rem;
    /* Kleiner als Desktop (meist 2.5rem) */
    line-height: 1.2;
    word-wrap: break-word;
    /* Erzwingt Umbruch bei langen Wörtern */
    hyphens: auto;
    /* Automatische Silbentrennung */
  }

  /* Hilfsklasse für Shortcode-Abstände */
  html body .ec-event-calendar-app .ec-single-title-margin {
    margin: 0 0 10px 0;
  }

  html body .ec-event-calendar-app .ec-header-content-wrap {
    padding: 20px;
    bottom: 20px;
  }

  html body .ec-event-calendar-app .ec-single-cat-badge {
    font-size: 0.7rem;
    margin-bottom: 10px;
  }

  html body .ec-event-calendar-app .ec-hero-image {
    height: 230px;
  }

  html body .ec-event-calendar-app .ec-single-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  html body .ec-event-calendar-app .ec-meta-box.date-box {
    display: flex;
    width: 100%;
    padding: 15px;
    gap: 10px;
    margin: 0 0 20px 0;
    justify-content: center;
    align-items: baseline;
    background-color: rgba(255, 255, 255, 0.8);
  }

  html body .ec-event-calendar-app .ec-mb-day,
  .ec-event-calendar-app .ec-mb-date,
  .ec-event-calendar-app .ec-mb-month {
    width: auto;
    margin: 0;
    display: inline-block;
  }

  html body .ec-event-calendar-app .ec-mb-date {
    font-size: 1.5rem;
  }

  html body .ec-event-calendar-app .ec-single-actions-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 8px;
  }

  html body .ec-event-calendar-app .ec-single-actions-bar button,
  html body .ec-event-calendar-app .ec-single-actions-bar a.ec-ticket-btn-single {
    flex: 1 1 0px;
    min-width: 0;
    width: auto;
    padding: 0;
    font-size: 0;
  }

  html body .ec-event-calendar-app .ec-single-actions-bar .ec-btn-text {
    display: none;
  }

  html body .ec-event-calendar-app .ec-single-actions-bar .ec-icon-svg {
    margin: 0;
    display: inline-block;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
  }

  html body .ec-event-calendar-app .ec-meta-details {
    flex-direction: column;
    gap: 8px;
    /* Originalwert 14px */
  }

  /* Aussteller mobil direkt unter der Rolle, vor Sprache und Preis. Oberhalb
     von 768px ordnet ihn das Raster ein (Abschnitt "Kopfbereich mit
     Aussteller-Eintrag" weiter oben). Hier wird die rechte Spalte aufgeloest,
     damit sich der Eintrag zwischen Rolle und Sprache schieben kann, ohne das
     Markup doppelt auszugeben. Nur mit Aussteller, sonst bleibt alles wie es
     war. Ohne :has()-Unterstuetzung steht er schlicht nach der Sprache. */
  html body .ec-event-calendar-app .ec-meta-details:has(> .ec-meta-exhibitor) > .ec-meta-right {
    display: contents;
  }

  html body .ec-event-calendar-app .ec-meta-details > .ec-meta-exhibitor {
    order: 1;
    margin-top: 0;
  }

  html body .ec-event-calendar-app .ec-meta-details .ec-detail-row-language {
    order: 2;
  }

  html body .ec-event-calendar-app .ec-meta-details > .ec-meta-fullwidth:not(.ec-meta-exhibitor) {
    order: 3;
  }

  /* Mobil ohne Ueberschrift "Aussteller:" - die Karte mit Bild, Name und Typ
     spricht fuer sich, und die Zeile wird deutlich kompakter. Das Icon bleibt
     und steht mittig neben der Karte. */
  html body .ec-event-calendar-app .ec-detail-row-exhibitor {
    align-items: center;
  }

  html body .ec-event-calendar-app .ec-detail-row-exhibitor > div > strong {
    display: none;
  }

  html body .ec-event-calendar-app .ec-meta-exhibitor .ec-exhibitor-card {
    margin-top: 0;
  }

  html body .ec-event-calendar-app .ec-detail-row br {
    display: none;
  }

  html body .ec-event-calendar-app .ec-detail-row strong {
    margin-right: 4px;
  }

  html body .ec-event-calendar-app .ec-price-content,
  html body .ec-event-calendar-app .ec-price-label,
  html body .ec-event-calendar-app .ec-price-value {
    display: inline;
  }

  html body .ec-event-calendar-app .ec-price-label {
    margin-right: 4px;
  }

  html body .ec-event-calendar-app .ec-back-btn {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    text-align: center;
  }

  html body .ec-event-calendar-app .ec-single-footer {
    width: 100%;
    padding: 0;
  }


  html body .ec-event-calendar-app .ec-single-categories-section {
    padding: 0 16px 16px 16px;
    gap: 8px;
  }

  html body .ec-event-calendar-app .ec-single-more-info-wrap {
    padding: 0 20px 25px 20px;
    gap: 8px;
  }

  /* Primäre Hauptaktionen (Weitere Infos, Interne Infoseite) als prominente Buttons */
  html body .ec-event-calendar-app .ec-btn-more-info.ec-btn-primary-action {
    width: 100%;
    flex: 1 1 100%;
    justify-content: center;
    padding: 11px 16px;
    font-size: 0.95rem;
    box-sizing: border-box;
  }

  /* Social- & Kontakt-Buttons im aufgeräumten 2-Spalten-Raster auf mobilen Geräten */
  html body .ec-event-calendar-app .ec-btn-more-info.ec-btn-social-item {
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 0;
    justify-content: center;
    padding: 9px 8px;
    font-size: 0.86rem;
    gap: 6px;
    box-sizing: border-box;
  }

  /* Wenn nur 1 einzelner Button vorhanden ist, volle Breite */
  html body .ec-event-calendar-app .ec-single-more-info-wrap:not(.ec-has-many-buttons) .ec-btn-more-info.ec-btn-social-item:only-child {
    flex: 1 1 100%;
    max-width: 100%;
  }

  html body .ec-event-calendar-app .ec-btn-more-info .ec-btn-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body .ec-event-calendar-app .ec-btn-more-info .ec-btn-svg,
  html body .ec-event-calendar-app .ec-btn-more-info .dashicons,
  html body .ec-event-calendar-app .ec-btn-more-info .ec-mask-icon {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 15px;
  }

  @media (max-width: 320px) {
    html body .ec-event-calendar-app .ec-btn-more-info.ec-btn-social-item {
      flex: 1 1 100%;
      max-width: 100%;
    }
  }

  /* CANCELLED Badge: Auf mobilen Geräten das Badge im Bild etwas kleiner machen */
  html body .ec-event-calendar-app .ec-single-header>.ec-cancelled-badge,
  html body .ec-event-calendar-app .ec-single-header>.ec-single-live-badge {
    top: 10px;
    right: 10px;
    font-size: 0.7rem;
    padding: 4px 10px;
  }

  /* Ohne Hero-Bild mobil nicht in der Ecke, sondern zentriert zwischen
     Datumsfeld und Titel - im Fluss der Spalte statt absolut. Der negative
     Rand gleicht den großen Abstand unter dem Datumsfeld (Gap + Margin) aus. */
  html body .ec-event-calendar-app .ec-meta-details>.ec-single-live-badge {
    position: static;
    align-self: center;
    margin: -16px 0 8px;
    font-size: 0.75rem;
    padding: 4px 12px;
  }

}

/* ==========================================================================
   4. ULTRA-COMPACT (Deine Idee - für sehr schmale Screens < 400px)
   ========================================================================== */

@media screen and (max-width: 400px) {

  /* Input darf schrumpfen (verhindert Überlauf) */
  html body .ec-event-calendar-app #ec-app #ec-search-input {
    min-width: 0;
  }

  /* Titel auf Single Page kleiner */
  html body .ec-event-calendar-app .ec-single-title {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   5. WIEDERHOLENDE & ZUGEHÖRIGE VERANSTALTUNGEN SECTION
   ========================================================================== */
html body .ec-event-calendar-app .ec-related-events-section {
  margin-top: 0;
  padding: 25px 30px 35px 30px;
  border-top: 1px solid #eaeaea;
}

html body .ec-event-calendar-app .ec-related-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1d2327;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

html body .ec-event-calendar-app .ec-related-heading .dashicons {
  color: var(--ec-s-accent);
  font-size: 1.3rem;
  width: auto;
  height: auto;
}

html body .ec-event-calendar-app .ec-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

html body .ec-event-calendar-app .ec-related-card {
  display: flex;
  flex-direction: column;
  /* Koerper in dezenter Akzenttoenung - analog zu den Kacheln der Hauptansicht */
  background: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.12);
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--ec-s-accent);
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

html body .ec-event-calendar-app .ec-related-card:hover {
  background: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.2);
  border-color: var(--ec-s-accent);
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

html body .ec-event-calendar-app .ec-related-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

html body .ec-event-calendar-app .ec-related-badge {
  /* Folgt bewusst der Akzentfarbe der Kachel (Ort oder Kategorie, je nach Einstellung):
     Koerper, Rand und Datums-Pille sind hier durchgehend eingefaerbt - ein Badge in der
     Primaerfarbe waere das einzige Fremdelement und wirkt bei mehreren Kacheln unruhig.
     In der Hauptansicht sitzen die Badges dagegen auf Fotos, dort bleibt die Primaerfarbe. */
  background: var(--ec-s-accent, var(--ec-primary, #f76b15));
  color: var(--ec-s-fg, #ffffff);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

html body .ec-event-calendar-app .ec-related-date-pill {
  /* Kraeftiger als der Kachelkoerper, damit die Pille darauf sichtbar bleibt */
  background: rgba(var(--ec-s-bg-rgb, 247, 107, 21), 0.4);
  color: #1e293b;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  margin-left: auto;
}

html body .ec-event-calendar-app .ec-related-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 10px 0;
  transition: color 0.2s ease;
}

html body .ec-event-calendar-app .ec-related-card:hover .ec-related-card-title {
  color: var(--ec-s-accent);
}

html body .ec-event-calendar-app .ec-related-card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: auto;
  font-size: 0.82rem;
  color: #64748b;
}

html body .ec-event-calendar-app .ec-related-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.35;
}

html body .ec-event-calendar-app .ec-related-meta-item .ec-svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  background-color: var(--ec-s-accent);
  -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-related-venue-text-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Der Raumname (z. B. "Workshopraum UG") bleibt immer vollständig und unbeschnitten */
html body .ec-event-calendar-app .ec-related-venue-text-wrap>span:first-child {
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- ABGESAGTE VERANSTALTUNGEN IN DEN WEITEREN TERMINEN --- */
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled {
  border-left-color: #d63638;
  background: #f8f9fa;
}

/* Kategorie-Badge bei abgesagten Kacheln ausblenden */
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-related-badge:not(.ec-related-badge-cancelled) {
  display: none;
}

/* Entfärben/Ausgrauen nur für normale Inhaltselemente der Kachel */
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-related-badge:not(.ec-related-badge-cancelled),
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-related-date-pill,
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-related-card-title,
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-related-card-meta {
  filter: grayscale(100%) opacity(0.7);
}

html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled:hover .ec-related-badge:not(.ec-related-badge-cancelled),
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled:hover .ec-related-date-pill,
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled:hover .ec-related-card-title,
html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled:hover .ec-related-card-meta {
  filter: grayscale(100%) opacity(0.85);
}

/* Rotes ABGESAGT-Badge & roter Präfix-Text bleiben kräftig rot! */
html body .ec-event-calendar-app .ec-related-card .ec-related-badge.ec-related-badge-cancelled {
  background-color: #d63638;
  color: #ffffff;
  filter: none;
  opacity: 1;
}

html body .ec-event-calendar-app .ec-related-card.ec-is-cancelled .ec-cancelled-text {
  color: #d63638;
  font-weight: 700;
  filter: none;
  opacity: 1;
}

/* ==========================================================================
   6. INTERAKTIVER SVG HALLENPLAN MODAL / LIGHTBOX
   ========================================================================== */

/* Venue Wrapper & Button: Bleibt nebeneinander wenn Platz ist, bricht nur bei Platzmangel sauber um */
html body .ec-event-calendar-app .ec-venue-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
  /* 8px horizontal nebeneinander, 5px vertikal wenn umgebrochen */
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}

html body .ec-event-calendar-app .ec-venue-wrap strong {
  margin-right: 2px;
}

html body .ec-event-calendar-app .ec-venue-name {
  display: inline-block;
  line-height: 1.4;
}

/* Button zum Öffnen des Hallenplans */
html body .ec-event-calendar-app .ec-btn-floorplan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  color: var(--ec-s-accent, #f76b15);
  border: 1.5px solid var(--ec-s-accent, #f76b15);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin: 0;
  /* 100% bündig am linken Rand! */
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

html body .ec-event-calendar-app .ec-btn-floorplan:hover {
  background: var(--ec-s-accent, #f76b15);
  color: var(--ec-s-fg, #ffffff);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

html body .ec-event-calendar-app .ec-btn-floorplan .ec-btn-svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Kompakter Button auf Kacheln: Passt sich dem verbleibenden Platz an und kürzt seinen Text */
html body .ec-event-calendar-app .ec-btn-floorplan-compact {
  padding: 2px 6px;
  font-size: 0.72rem;
  margin-left: 0;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  flex: 0 1 auto;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

html body .ec-event-calendar-app .ec-btn-floorplan-compact .ec-btn-svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

html body .ec-event-calendar-app .ec-btn-floorplan-compact .ec-btn-floorplan-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

/* Mobilgerät: Maps-Button mit Icon & Text */
@media (max-width: 600px) {
  html body .ec-event-calendar-app .ec-btn-floorplan {
    padding: 3px 8px;
    margin-left: 0;
    font-size: 0.76rem;
  }
}

/* Wenn Kacheln auf schmalen Displays eng werden: Text bei Kacheln ausblenden */
@media (max-width: 300px) {
  html body .ec-event-calendar-app .ec-related-card .ec-btn-floorplan-compact .ec-btn-floorplan-text {
    display: none;
  }

  html body .ec-event-calendar-app .ec-related-card .ec-btn-floorplan-compact {
    padding: 2px 5px;
  }
}

/* Modal Backdrop */
html body .ec-floorplan-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

html body .ec-floorplan-modal.active {
  display: flex;
}

html body .ec-floorplan-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Modal Container Box */
html body .ec-floorplan-modal-container {
  position: relative;
  z-index: 2;
  width: 95vw;
  max-width: 1000px;
  height: 88vh;
  max-height: 820px;
  display: flex;
  flex-direction: column;
  animation: ecFpPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ecFpPopIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Modal Content Box */
html body .ec-floorplan-modal-content {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Modal Header */
html body .ec-floorplan-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

html body .ec-floorplan-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 10px;
}

html body .ec-floorplan-title-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

html body .ec-floorplan-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

html body .ec-floorplan-title-row .ec-modal-title-svg {
  color: var(--ec-s-accent, #f76b15);
  font-size: 22px;
  width: 22px;
  height: 22px;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

html body .ec-floorplan-modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
}

html body .ec-floorplan-room-tag {
  background: var(--ec-s-accent, #f76b15);
  color: var(--ec-s-fg, #ffffff);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 16px;
  letter-spacing: 0.3px;
  display: none;
}

html body .ec-floorplan-room-tag.active {
  display: inline-block;
}

/* Veranstaltungstitel im Modal-Header (Desktop & Mobil mit max 2 Zeilen Ellipsis) */
html body .ec-floorplan-event-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #475569;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Meta-Zeile (Datum & Uhrzeit) im Modal-Header */
html body .ec-floorplan-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 4px;
}

html body .ec-floorplan-event-date,
html body .ec-floorplan-event-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: #64748b;
  line-height: 1.3;
}

html body .ec-floorplan-event-date .ec-svg {
  width: 13.5px;
  height: 13.5px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--ec-s-accent, #f76b15);
  -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-floorplan-event-time .ec-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--ec-s-accent, #f76b15);
  -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-floorplan-event-time .ec-fp-time-svg {
  width: 15px;
  height: 15px;
  color: var(--ec-s-accent, #f76b15);
  fill: currentColor;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

html body .ec-floorplan-event-date strong,
html body .ec-floorplan-event-time strong {
  color: #334155;
  font-weight: 700;
}

html body .ec-floorplan-event-date .ec-floorplan-date-val,
html body .ec-floorplan-event-time .ec-floorplan-time-val {
  color: #475569;
  font-weight: 600;
}

/* Floating Close Button - Consistent with Detail Modal */
html body .ec-floorplan-modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 99;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  color: #1e293b;
  border: 2px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html body .ec-floorplan-modal-close:hover {
  background: var(--ec-primary, var(--ec-s-accent, #f76b15));
  color: #ffffff;
  border-color: var(--ec-primary, var(--ec-s-accent, #f76b15));
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45);
}

/* Mobil-Layout für Modal */
@media (max-width: 600px) {
  html body .ec-floorplan-modal {
    padding: 12px;
    box-sizing: border-box;
  }

  html body .ec-floorplan-modal-container {
    width: 100%;
    max-width: calc(100vw - 24px);
    height: 85vh;
    max-height: calc(100dvh - 24px);
  }

  html body .ec-floorplan-modal-content {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    box-sizing: border-box;
  }

  html body .ec-floorplan-modal-header {
    align-items: flex-start;
    padding: 10px 48px 10px 14px;
  }

  html body .ec-floorplan-modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.65);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
  }

  html body .ec-floorplan-modal-close:hover {
    background: #ffffff;
    color: #111;
    border-color: #ffffff;
  }

  html body .ec-floorplan-title-wrap {
    gap: 3px;
    padding-right: 6px;
  }

  html body .ec-floorplan-modal-title {
    font-size: 1rem;
  }

  html body .ec-floorplan-room-tag {
    margin-left: 0;
    margin-top: 2px;
    align-self: flex-start;
    font-size: 0.72rem;
    padding: 2px 8px;
  }

  html body .ec-floorplan-event-title {
    font-size: 0.8rem;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body .ec-floorplan-event-meta {
    gap: 4px 12px;
    margin-top: 3px;
  }

  html body .ec-floorplan-event-date,
  html body .ec-floorplan-event-time {
    font-size: 0.76rem;
    margin-top: 1px;
  }
}

/* Viewport / SVG Canvas (Kristallklar wie im Original-Plugin) */
html body .ec-floorplan-viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #f1f5f9;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
}

html body .ec-floorplan-viewport.grabbing {
  cursor: grabbing;
}

html body .ec-floorplan-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  image-rendering: -webkit-optimize-contrast;
}

html body .ec-floorplan-layer svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  pointer-events: all;
}

/* Spinner */
html body .ec-floorplan-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-weight: 600;
  font-size: 0.9rem;
}

html body .ec-floorplan-spinner {
  width: 36px;
  height: 36px;
  border: 3.5px solid #cbd5e1;
  border-top-color: var(--ec-s-accent, #f76b15);
  border-radius: 50%;
  animation: ecFpSpin 0.8s linear infinite;
}

@keyframes ecFpSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Floating Zoom Controls */
html body .ec-floorplan-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #ffffff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
}

html body .ec-fp-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  color: #334155;
  transition: all 0.15s ease;
  padding: 0;
}

html body .ec-fp-btn:hover {
  background: var(--ec-s-accent, #f76b15);
  color: var(--ec-s-fg, #ffffff);
  border-color: var(--ec-s-accent, #f76b15);
}

html body .ec-fp-btn svg {
  display: block;
  stroke: currentColor;
  flex-shrink: 0;
}

/* Glowing Pulsing Room Highlight on SVG */
@keyframes ecPulseRoom {
  0% {
    filter: drop-shadow(0 0 2px var(--ec-s-accent, #f76b15));
    opacity: 0.9;
  }

  50% {
    filter: drop-shadow(0 0 14px var(--ec-s-accent, #f76b15));
    opacity: 1;
  }

  100% {
    filter: drop-shadow(0 0 2px var(--ec-s-accent, #f76b15));
    opacity: 0.9;
  }
}

html body .ec-floorplan-layer text.ec-room-highlight,
html body .ec-floorplan-layer tspan.ec-room-highlight {
  fill: var(--ec-s-accent, #f76b15);
  font-weight: 800;
  filter: drop-shadow(0 0 8px var(--ec-s-accent, #f76b15));
}

/* Dynamischer SVG Location Pin Marker */
@keyframes ecPinBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes ecPinRipple {
  0% {
    r: 4;
    opacity: 0.95;
    stroke-width: 2.5;
  }

  100% {
    r: 26;
    opacity: 0;
    stroke-width: 0.5;
  }
}

html body .ec-svg-pin-marker {
  pointer-events: none;
  cursor: default;
}

html body .ec-svg-pin-marker .ec-pin-animated {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  animation: ecPinBounce 1.6s ease-in-out infinite;
  transform-origin: 0 0;
}

html body .ec-svg-pin-marker .ec-pin-ripple {
  fill: var(--ec-s-accent, #f76b15);
  fill-opacity: 0.25;
  stroke: var(--ec-s-accent, #f76b15);
  animation: ecPinRipple 1.6s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}