/* =========================================================
   Events Manager Kalender – Farben, Event-Pills & Legende
   Scoped auf: .tb-kalender
   Datei: em-calendar-allgemein.css (bereinigt + repariert)
   ========================================================= */

/* -------------------------
   Grundstil Event-Pill
   ------------------------- */
.tb-kalender .em-cal-event{
  border-radius: 8px;
  overflow: hidden;
}

.tb-kalender .em-cal-event > div{
  padding: 6px 10px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.25;
}

.tb-kalender .em-cal-event a{
  color: inherit !important;
  text-decoration: none !important;
}

.tb-kalender .em-cal-lock{
  margin-right: 6px;
  font-size: 0.9em;
}

/* =========================================================
   Farben – Pixelbones nutzt oft das INNERE div
   => daher stylen wir .em-cal-event UND .em-cal-event > div
   ========================================================= */

/* Viele Plätze frei (grün) */
.tb-kalender .em-cal-event.low-occupancy,
.tb-kalender .em-cal-event.low-occupancy > div{
  --event-background-color: rgba(76, 175, 80, 0.18) !important;
  --event-border-color: rgba(76, 175, 80, 0.55) !important;
  --event-color: #2f6b35 !important;

  background: rgba(76, 175, 80, 0.18) !important;
  border: 1px solid rgba(76, 175, 80, 0.55) !important;
  color: #2f6b35 !important;
}

/* Mittlere Auslastung (gelb) */
.tb-kalender .em-cal-event.medium-occupancy,
.tb-kalender .em-cal-event.medium-occupancy > div{
  --event-background-color: rgba(255, 193, 7, 0.22) !important;
  --event-border-color: rgba(255, 193, 7, 0.65) !important;
  --event-color: #7a5a00 !important;

  background: rgba(255, 193, 7, 0.22) !important;
  border: 1px solid rgba(255, 193, 7, 0.65) !important;
  color: #7a5a00 !important;
}

/* Ausgebucht (rot) */
.tb-kalender .em-cal-event.full-occupancy,
.tb-kalender .em-cal-event.full-occupancy > div{
  --event-background-color: rgba(244, 67, 54, 0.20) !important;
  --event-border-color: rgba(244, 67, 54, 0.65) !important;
  --event-color: #8a1f18 !important;

  background: rgba(244, 67, 54, 0.20) !important;
  border: 1px solid rgba(244, 67, 54, 0.65) !important;
  color: #8a1f18 !important;
}

/* Neutral (grau) */
.tb-kalender .em-cal-event.neutral,
.tb-kalender .em-cal-event.neutral > div{
  --event-background-color: rgba(140, 140, 140, 0.15) !important;
  --event-border-color: rgba(140, 140, 140, 0.45) !important;
  --event-color: #555 !important;

  background: rgba(140, 140, 140, 0.15) !important;
  border: 1px solid rgba(140, 140, 140, 0.45) !important;
  color: #555 !important;
}

/* =========================================================
   Legende (Divi Code Modul: <div class="legend">...</div>)
   ========================================================= */

.tb-kalender .legend{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
  padding: 0;

  font-size: 15px;
  line-height: 1.4;
  color: #6a625a;
  opacity: .9;
}

.tb-kalender .legend .legend-item{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px 0 0;
  position: relative;
  top: -1px;
}

.tb-kalender .legend .legend-item.green{ background: #4CAF50; }
.tb-kalender .legend .legend-item.yellow{ background: #FFC107; }
.tb-kalender .legend .legend-item.red{ background: #F44336; }
.tb-kalender .legend .legend-item.neutral{ background: #BDBDBD; }

@media (max-width: 980px){
  .tb-kalender .legend{
    gap: 16px;
    font-size: 16px;
  }
  .tb-kalender .legend .legend-item{
    width: 16px;
    height: 16px;
    margin-right: 8px;
    top: -1px;
  }
}

/* =========================================================
   FORCE Colors (Pixelbones / neuer Kalender)
   ========================================================= */

/* Ausgebucht (rot) */
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.full-occupancy,
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.full-occupancy > div{
  background-color: rgba(244, 67, 54, 0.20) !important;
  border: 1px solid rgba(244, 67, 54, 0.65) !important;
  color: #8a1f18 !important;
}

/* Viele Plätze frei (grün) */
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.low-occupancy,
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.low-occupancy > div{
  background-color: rgba(76, 175, 80, 0.18) !important;
  border: 1px solid rgba(76, 175, 80, 0.55) !important;
  color: #2f6b35 !important;
}

/* Mittlere Auslastung (gelb) */
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.medium-occupancy,
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.medium-occupancy > div{
  background-color: rgba(255, 193, 7, 0.22) !important;
  border: 1px solid rgba(255, 193, 7, 0.65) !important;
  color: #7a5a00 !important;
}

/* Neutral (grau) */
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.neutral,
.tb-kalender .em.pixelbones.em-calendar .em-cal-event.neutral > div{
  background-color: rgba(140, 140, 140, 0.15) !important;
  border: 1px solid rgba(140, 140, 140, 0.45) !important;
  color: #555 !important;
}

/* =========================
   Responsive Umschaltung
   ========================= */

.tb-desktop-only { display: block; }
.tb-mobile-only  { display: none; }

@media (max-width: 980px){
  .tb-desktop-only { display: none !important; }
  .tb-mobile-only  { display: block !important; }
}

/* =========================
   Mobile Headline – 50er Stil
   ========================= */

.tb-mobile-only{
  background: #f3efe9;
  padding-bottom: 30px;
}

.tb-mobile-headline{
  max-width: 520px;
  margin: 0 auto 18px;
  text-align: center;

  padding: 18px 14px 14px;
  border-top: 1px solid #e2dbd1;
  border-bottom: 1px solid #e2dbd1;
}

.tb-mobile-top{
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6a625a;
  margin: 0 0 10px;
}

.tb-mobile-title{
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: #2c2c2c;
  margin: 0 0 10px;
}

.tb-mobile-sub{
  font-size: 14px;
  line-height: 1.45;
  color: #6a625a;
  margin: 0;
}

/* Divi/Theme-Margins neutralisieren */
.tb-mobile-headline div{
  margin-top: 0 !important;
}

/* =========================
   Mobile Toggle – Freie / Alle
   ========================= */

.tb-mobile-toggle{
  max-width: 520px;
  margin: 10px auto 14px;
  padding: 0 14px;

  display: flex;
  justify-content: center;
  gap: 10px;
}

.tb-mobile-toggle-btn{
  flex: 1 1 0;
  text-align: center;
  text-decoration: none !important;

  background: #faf7f2;
  border: 1px solid #e2dbd1;
  border-radius: 12px;

  padding: 10px 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;

  color: #6a625a !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.04);
  transition: all .2s ease;
}

.tb-mobile-toggle-btn:hover{
  background: #f3efe9;
  transform: translateY(-1px);
}

.tb-mobile-toggle-btn.is-active{
  background: #2c2c2c;
  border-color: #2c2c2c;
  color: #ffffff !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.10);
}

/* =========================
   Mobile Liste Styling
   ========================= */

.tb-mobile-list ul{
  list-style:none;
  margin:0;
  padding:0;
}

.tb-mobile-item{
  margin-bottom:12px;
}

.tb-mobile-link{
  display:block;
  background:#faf7f2;
  border:1px solid #e2dbd1;
  border-radius:16px;
  padding:16px;
  text-decoration:none;
  color:inherit;
  box-shadow:0 10px 32px rgba(0,0,0,0.05);
  transition:all .25s ease;
}

.tb-mobile-link:hover{
  background:#f3efe9;
  transform:translateY(-2px);
}

.tb-mobile-datetime{
  font-size:13px;
  color:#6a625a;
  margin-bottom:4px;
}

.tb-mobile-badge{
  display:inline-block;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
}

/* Farbklassen */
.tb-mobile-badge.low-occupancy{
  background:rgba(76,175,80,.18);
  border:1px solid rgba(76,175,80,.55);
  color:#2f6b35;
}

.tb-mobile-badge.medium-occupancy{
  background:rgba(255,193,7,.22);
  border:1px solid rgba(255,193,7,.65);
  color:#7a5a00;
}

.tb-mobile-badge.full-occupancy{
  display:none;
}

.tb-mobile-list-empty{
  background:#ffffff;
  border:1px solid #e6e2dc;
  border-radius:14px;
  padding:18px;
  text-align:center;
}

/* Mobile-Kacheln: nicht volle Breite, mehr "Card"-Look */
@media (max-width: 980px){
  .tb-mobile-only .tb-mobile-list{
    padding: 0 14px;
  }
  .tb-mobile-only .tb-mobile-link{
    max-width: 520px;
    margin: 0 auto;
  }
}

/* =========================
   "Mehr anzeigen" Button
   ========================= */

.tb-mobile-more{
  text-align:center;
  padding: 14px 0 0;
}

.tb-mobile-more-form{
  display:flex;
  justify-content:center;
}

.tb-mobile-more-btn{
  appearance:none;
  border:1px solid #e2dbd1;
  background:#f8f4ee;
  color:#2c2c2c;
  padding:12px 18px;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.05);
  cursor:pointer;
  transition:all .2s ease;
}

.tb-mobile-more-btn:active{
  transform:scale(0.98);
}

.tb-mobile-more-btn.is-loading{
  opacity:.75;
  cursor:wait;
}

.tb-mobile-more-btn.is-loading::after{
  content:" · lädt …";
  font-weight:500;
}

/* kleine Statuszeile */
.tb-mobile-pagehint{
  text-align:center;
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8c8378;
  margin: 0 0 10px;
}

/* =========================
   Hinweise: FULL-WIDTH Hintergrund via ::before
   ========================= */

.tb-hinweise{
  position: relative;
  padding:70px 20px 80px;
  margin:0 0 60px;
  box-sizing:border-box;
}

.tb-hinweise::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:0;
  bottom:0;
  width:100vw;
  background:#f3efe9;
  border-top:1px solid #e5ded4;
  border-bottom:1px solid #e5ded4;
  z-index:-1;
}

.tb-hinweise .tb-hinweis-box{
  max-width: 820px;
  margin: 0 auto 24px;
}

/* Hinweis-Kacheln */
.tb-hinweise .tb-hinweis-box{
  background:#a84f3d;
  border-radius:18px;
  padding:28px 26px;
  text-align:center;
  color:#fff;
  box-sizing:border-box;
}

.tb-hinweise .tb-hinweis-title{
  font-size:28px;
  font-weight:500;
  margin:0 0 14px;
  letter-spacing:0.5px;
  color:#fff;
}

.tb-hinweise .tb-hinweis-text{
  font-size:16px;
  line-height:1.6;
  margin:0;
  color:#fff;
}

/* =========================================================
   MUSEUM – Basis-Layout (wie bisher)
   ========================================================= */

.kalender-museum {
  background: #f3efe9;
  padding-top: 30px;
  padding-bottom: 0;
}

.kalender-museum .em-calendar{
  max-width: 1600px;
  margin: 30px auto 50px auto;
}

.kalender-museum .em-cal-head {
  height: 45px !important;
  min-height: 45px !important;
}

.kalender-museum .em-cal-head div {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 !important;
  font-size: 14px !important;
}

.kalender-museum .em-cal-day{
  height: auto !important;
  min-height: 90px !important;
  padding: 8px !important;
}

/* 2-zeilig Museum */
.kalender-museum .em-cal-event,
.kalender-museum .em-cal-event a,
.kalender-museum .em-cal-event > div{
  white-space: normal !important;
  text-overflow: unset !important;
  word-break: break-word;
  hyphens: auto;
}

.kalender-museum .em-cal-event,
.kalender-museum .em-cal-event > div {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.kalender-museum .em-cal-event a{
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.kalender-museum .em-cal-event a span{
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  line-height: 1.25;
  max-height: calc(1.25em * 2);
}

/* =========================================================
   CAFÉ – Museum-Styles 1:1 kopiert (nur Scope angepasst)
   ========================================================= */

.tb-cafe-seite .kalender-cafe{
  background: #f3efe9;
  padding-top: 30px;
  padding-bottom: 0;
}

.tb-cafe-seite .kalender-cafe .em-calendar{
  max-width: 1600px;
  margin: 30px auto 50px auto;
}

.tb-cafe-seite .kalender-cafe .em-cal-head{
  height: 45px !important;
  min-height: 45px !important;
}

.tb-cafe-seite .kalender-cafe .em-cal-head div{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 !important;
  font-size: 14px !important;
}

.tb-cafe-seite .kalender-cafe .em-cal-day{
  height: auto !important;
  min-height: 90px !important;
  padding: 8px !important;
}

/* 2-zeilig Café (wie Museum) */
.tb-cafe-seite .kalender-cafe .em-cal-event,
.tb-cafe-seite .kalender-cafe .em-cal-event a,
.tb-cafe-seite .kalender-cafe .em-cal-event > div{
  white-space: normal !important;
  text-overflow: unset !important;
  word-break: break-word;
  hyphens: auto;
}

.tb-cafe-seite .kalender-cafe .em-cal-event,
.tb-cafe-seite .kalender-cafe .em-cal-event > div{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.tb-cafe-seite .kalender-cafe .em-cal-event a{
  display: block !important;
  height: auto !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

.tb-cafe-seite .kalender-cafe .em-cal-event a span{
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  line-height: 1.25;
  max-height: calc(1.25em * 2);
}

/* =========================================================
   Responsive: Desktop-Kalender auf Mobil ausblenden
   ========================================================= */

@media (max-width: 980px){
  .tb-museum-seite .tb-kalenderbereich,
  .tb-cafe-seite .tb-kalenderbereich{
    display: none !important;
  }
}

/* =========================================================
   MOBILE – Toggle (Freie / Alle) + Legende Fix
   Datei: em-calendar-allgemein.css
   ========================================================= */

/* Legende sauber zentrieren */
.tb-mobile-legend{
  max-width: 520px;
  margin: 0 auto 10px;
  padding: 0 14px;
  font-size: 13px;
  color: #6a625a;
  text-align: center;
  opacity: .9;
}

/* Toggle-Buttons */
.tb-mobile-toggle{
  max-width: 520px;
  margin: 10px auto 14px;
  padding: 0 14px;
  display: flex;
  gap: 14px;
}

.tb-mobile-toggle-btn{
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 48px;
  border-radius: 12px;
  border: 1px solid #e2dbd1;
  background: #faf7f2;
  color: #2c2c2c;
  text-decoration: none;

  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;

  box-shadow: 0 10px 32px rgba(0,0,0,0.05);
  transition: all .2s ease;
}

.tb-mobile-toggle-btn:hover{
  background: #f3efe9;
  transform: translateY(-1px);
}

.tb-mobile-toggle-btn.is-active{
  background: #2c2c2c;
  color: #fff;
  border-color: #2c2c2c;
}

/* Badge: ausgebucht NUR in "Alle Termine" zeigen */
.tb-mobile-badge.full-occupancy{
  display: none;
}

.tb-mobile-list.tb-mobile-mode-all .tb-mobile-badge.full-occupancy{
  display: inline-block;
  background: rgba(244, 67, 54, 0.20);
  border: 1px solid rgba(244, 67, 54, 0.65);
  color: #8a1f18;
}