/**
 * @file
 * Styles für den x10 Programm-Kalender (Zeitraster-Tagesansicht).
 * Adaptiert aus dem WordPress-Plugin "programmesync" (schedule-2-Ansicht).
 */

.x10-cal-app,
.x10-cal {
  max-width: var(--layout-width);
  margin-inline: auto;
}

.x10-cal-hidden {
  display: none !important; 
}

/* ========================================================================
   Steuerung / Filter
   ======================================================================== */
.x10-cal-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.x10-cal-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.x10-cal-filter-label {
  width: 100%;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.x10-cal-search {
  flex: 1 1 14rem;
  min-height: 2.75rem;
  padding: var(--space-2xs) var(--space-sm);
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-grey-400);
  border-radius: 999px;
}

/* Filter-/Aktions-Buttons als Pills (im Drawer). */
.x10-cal-filter,
.x10-cal-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.x10-cal-filter:hover,
.x10-cal-clear:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Aktiver Filter. */
.x10-cal-filter.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Farbpunkt im Track-Filter. */
.x10-cal-dot {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  flex: none;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/* ========================================================================
   Tages-Chips: scrollbarer Streifen innerhalb der sticky Leiste
   ======================================================================== */
.x10-cal-day-buttons {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-3xs);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.x10-cal-day-button {
  flex: 0 0 auto;
  min-width: 3.5rem;
  padding: var(--space-3xs) var(--space-2xs);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.x10-cal-day-button.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ========================================================================
   Tage & Zeitschienen
   ======================================================================== */
.x10-cal-day {
  margin-bottom: var(--space-2xl);
  scroll-margin-top: calc(var(--header-height) + 3.5rem);
}

.x10-cal-day-title {
  margin-bottom: var(--space-md);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Dauerangebote: optisch abgesetzter Block oben am Tag. */
.x10-cal-continuous {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: #f5f5f5d1;
  border-radius: var(--radius-md);
}

.x10-cal-continuous-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-size-h3);
  color: var(--color-primary);
}

.x10-cal-slots {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.x10-cal-slot {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  scroll-margin-top: calc(var(--header-height) + 4rem);
}

.x10-cal-time {
  font-family: var(--font-heading);
  font-size: var(--font-size-h3);
  font-weight: 700;
  color: var(--color-white);
}

.x10-cal-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 768px) {
  .x10-cal-slot {
    grid-template-columns: 5.5rem 1fr;
    align-items: start;
  }
  .x10-cal-time {
    position: sticky;
    top: calc(var(--header-height) + 3.5rem);
    padding-top: var(--space-2xs);
  }
}

@media (min-width: 992px) {
  /* Spaltenzahl pro Slot kommt aus --x10-cal-columns (vom Modul gesetzt). */
  .x10-cal-items {
    grid-template-columns: repeat(var(--x10-cal-columns, 1), 1fr);
  }
}

/* ========================================================================
   Session-Karte
   ======================================================================== */
.x10-cal-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-md);
  padding-inline-start: calc(var(--space-md) + 8px);
  padding-inline-end: var(--space-xl);
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

/* Akzent-Streifen links: zeigt alle Track-/Format-Farben (mehrere Tracks). */
.x10-cal-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--track-stripe, var(--color-grey-400));
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
  pointer-events: none;
}

.x10-cal-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Favoriten-Stern oben rechts. */
.x10-cal-star {
  position: absolute;
  top: var(--space-2xs);
  right: var(--space-2xs);
  width: 3rem;
  height: 3rem;
  padding: 0;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-grey-400);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--transition-base), transform var(--transition-base);
}

.x10-cal-star:hover {
  transform: scale(1.15);
}

.x10-cal-star.is-favorited {
  color: var(--color-accent);
}

/* Track-Badges. */
.x10-cal-track-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.x10-cal-track-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.25em 0.85em 0.25em 0.25em;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  /* Hintergrund + Kontrast-Textfarbe kommen inline aus dem Override-Template
     (track.color / track.fg). Weiß als Fallback, falls fg (noch) fehlt –
     inline color gewinnt, sobald der Preprocess greift. */
  color: var(--color-white);
}

/* Badge ohne Icon: etwas mehr Innenabstand links. */
.x10-cal-track-badge:not(.x10-cal-track-badge--has-icon) {
  padding-left: 0.85em;
}

/* Icon-Kreis: Hintergrund = currentColor (= Kontrastfarbe), damit das
   Original-Icon (= Track-Farbe) sichtbar bleibt – wie in der Session-Ansicht. */
.x10-cal-track-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: currentColor;
}

.x10-cal-track-badge-icon img {
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.x10-cal-item-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  line-height: 1.15;
}

.x10-cal-item-title a {
  color: inherit;
  text-decoration: none;
}

.x10-cal-item-title a:hover,
.x10-cal-item-title a:focus-visible {
  color: var(--color-primary);
}

/* Mehrere Formate = mehrere einzelne Badges (umbrechend). */
.x10-cal-item-formats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}

.x10-cal-item-format {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-sm);
}

.x10-cal-item-format::before {
  content: "";
  flex: none;
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200l-7.2-7.2A2%202%200%200%201%203%2012V4.5A1.5%201.5%200%200%201%204.5%203H12a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20.6%2013.4l-7.2%207.2a2%202%200%200%201-2.8%200l-7.2-7.2A2%202%200%200%201%203%2012V4.5A1.5%201.5%200%200%201%204.5%203H12a2%202%200%200%201%201.4.6l7.2%207.2a2%202%200%200%201%200%202.6z%27%2F%3E%3Ccircle%20cx%3D%277.5%27%20cy%3D%277.5%27%20r%3D%271.4%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

.x10-cal-item-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text);
}

/* Meta-Zeile mit Icons (zeitlich/örtlich/Plätze). */
.x10-cal-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.x10-cal-item-meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--radius-sm);
}

.x10-cal-item-meta > span::before {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.x10-cal-item-time::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%207.5V12l3%202%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-item-location::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.5s7-6.2%207-11.5a7%207%200%201%200-14%200c0%205.3%207%2011.5%207%2011.5z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2021.5s7-6.2%207-11.5a7%207%200%201%200-14%200c0%205.3%207%2011.5%207%2011.5z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.5%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-item-max::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a6.5%206.5%200%200%201%2013%200%27%2F%3E%3Cpath%20d%3D%27M16%205a3.5%203.5%200%200%201%200%206.5%27%2F%3E%3Cpath%20d%3D%27M18%2014.2A6.5%206.5%200%200%201%2021.5%2020%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273.5%27%2F%3E%3Cpath%20d%3D%27M2.5%2020a6.5%206.5%200%200%201%2013%200%27%2F%3E%3Cpath%20d%3D%27M16%205a3.5%203.5%200%200%201%200%206.5%27%2F%3E%3Cpath%20d%3D%27M18%2014.2A6.5%206.5%200%200%201%2021.5%2020%27%2F%3E%3C%2Fsvg%3E");
}

/* ICS-Link als dezenter Button. */
.x10-cal-item-ics {
  align-self: flex-start;
  margin-top: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  transition: background var(--transition-base), color var(--transition-base);
}

.x10-cal-item-ics:hover,
.x10-cal-item-ics:focus-visible {
  color: var(--color-white);
  background: var(--color-primary);
}
/*temporary*/
.x10-cal-item-ics {
  display:none;
}

/* ========================================================================
   Sticky Bedienleiste: Ansicht + Filter + Favoriten + Tage in einer Zeile
   ======================================================================== */
.x10-cal-bar {
  position: sticky;
  top: var(--header-height);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-2xs);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Label-Texte sind auf dem Handy ausgeblendet (Icons reichen). */
.x10-cal-btn-label {
  display: none;
}

/* Ansichts-Umschalter als Segment-Gruppe (weiß auf getönter Leiste). */
.x10-cal-viewswitch {
  flex: none;
  display: inline-flex;
  gap: var(--space-3xs);
  padding: var(--space-3xs);
  background: var(--color-bg);
  border-radius: 999px;
}

.x10-cal-viewbtn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs);
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.x10-cal-viewbtn.is-active {
  color: var(--color-white);
  background: var(--color-primary);
}

/* Filter-Auslöser + Favoriten-Schalter als kompakte Icon-Buttons. */
.x10-cal-filter-toggle,
.x10-cal-toggle-liked {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-2xs);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.x10-cal-filter-toggle:hover,
.x10-cal-filter-toggle[aria-expanded="true"],
.x10-cal-toggle-liked:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.x10-cal-toggle-liked.is-active {
  color: var(--color-black);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* Icons via Maske (skalieren mit der Schriftgröße). */
.x10-cal-viewbtn::before,
.x10-cal-filter-toggle::before,
.x10-cal-toggle-liked::before {
  content: "";
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: var(--x10-cal-icon) center / contain no-repeat;
          mask: var(--x10-cal-icon) center / contain no-repeat;
}

.x10-cal-viewbtn[data-view="list"] {
  --x10-cal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%206h13M8%2012h13M8%2018h13%27%2F%3E%3Cpath%20d%3D%27M3.5%206h.01M3.5%2012h.01M3.5%2018h.01%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-viewbtn[data-view="timeline"] {
  --x10-cal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%275%27%20width%3D%2710%27%20height%3D%273%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2710.5%27%20width%3D%2713%27%20height%3D%273%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%275%27%20y%3D%2716%27%20width%3D%278%27%20height%3D%273%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-viewbtn[data-view="grid"] {
  --x10-cal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%274%27%20width%3D%274%27%20height%3D%2716%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2710%27%20y%3D%274%27%20width%3D%274%27%20height%3D%2716%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%2716%27%20y%3D%274%27%20width%3D%274%27%20height%3D%2716%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-filter-toggle {
  --x10-cal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%204h18l-7%208v6l-4%202v-8z%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-toggle-liked {
  --x10-cal-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2020s-7-4.6-7-10a4%204%200%200%201%207-2%204%204%200%200%201%207%202c0%205.4-7%2010-7%2010z%27%2F%3E%3C%2Fsvg%3E");
}

.x10-cal-liked-count {
  font-variant-numeric: tabular-nums;
}

/* Ab Tablet: Labels einblenden, etwas mehr Innenabstand. */
@media (min-width: 768px) {
  .x10-cal-btn-label {
    display: inline;
  }
  .x10-cal-filter-toggle,
  .x10-cal-toggle-liked {
    padding-inline: var(--space-sm);
  }
}

/* ========================================================================
   Ansichten: nur die aktive ist sichtbar (per Umschalter, keine Breakpoints)
   ======================================================================== */
.x10-cal-view {
  display: none;
}

.x10-cal-view.is-active {
  display: block;
}

/* Timeline-Wurzel nicht auf Layout-Breite begrenzen (überschreibt .x10-cal). */
.x10-cal-timeline {
  max-width: none;
}

/* Ab Desktop nutzen Timeline & Raster die volle Seitenbreite (Full-Bleed) mit
   space-lg Innenabstand; in der Listenansicht bleiben Leiste und Inhalt auf
   Layout-Breite. */
@media (min-width: 992px) {
  .x10-cal-view--timeline.is-active {
    box-sizing: border-box;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: var(--space-lg);
  }

  /* Die Leistenbox sitzt bündig zum Timeline-Inhalt: volle Breite minus dem
     Timeline-Padding (so um space-lg von den Fensterrändern eingerückt). */
  .x10-cal-app[data-view="timeline"] .x10-cal-bar,
  .x10-cal-app[data-view="grid"] .x10-cal-bar {
    box-sizing: border-box;
    width: calc(100vw - 2 * var(--space-lg));
    margin-inline: calc(50% - 50vw + var(--space-lg));
  }
}

/* ========================================================================
   Filter-Drawer (Overlay über dem Inhalt)
   ======================================================================== */
.x10-cal-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.x10-cal-drawer[hidden] {
  display: none;
}

.x10-cal-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  animation: x10-cal-fade var(--transition-base, 0.2s) ease;
}

.x10-cal-drawer__panel {
  position: relative;
  width: min(100%, var(--layout-width, 60rem));
  margin-inline: auto;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-lg);
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: x10-cal-slide-down var(--transition-base, 0.2s) ease;
}

.x10-cal-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.x10-cal-drawer__title {
  margin: 0;
  font-size: var(--font-size-h3);
}

.x10-cal-drawer__close {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-bg-muted);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Im Drawer steht die Filterleiste ohne eigenen Rahmen/Hintergrund. */
.x10-cal-drawer .x10-cal-controls {
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: 0;
}

@keyframes x10-cal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes x10-cal-slide-down {
  from { transform: translateY(-1rem); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ========================================================================
   Zoom in der Leiste: eigene volle Zeile, nur bei Timeline/Raster sichtbar.
   ======================================================================== */
.x10-cal-zoom {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-3xs) var(--space-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  /* Slider-Spur/-Regler in Primärfarbe statt Browser-Blau. */
  accent-color: var(--color-primary);
}

/* display:flex oben würde das hidden-Attribut überschreiben – hier sicherstellen,
   dass der Zoom in der Listenansicht (hidden) wirklich verborgen bleibt. */
.x10-cal-zoom[hidden] {
  display: none;
}

.x10-cal-zoom-out,
.x10-cal-zoom-in {
  flex: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.x10-cal-zoom-slider {
  flex: 1 1 auto;
  width: auto;
  cursor: pointer;
}

/* Ab Tablet/Desktop: Zoom kompakt inline statt als volle Zeile. */
@media (min-width: 768px) {
  .x10-cal-zoom {
    flex: 0 0 auto;
  }
  .x10-cal-zoom-slider {
    flex: none;
    width: 9rem;
  }
}

/* ========================================================================
   Timeline – Tage & Raster
   ======================================================================== */
.x10-cal-tl-day {
  display: none;
  margin-bottom: var(--space-xl);
}

.x10-cal-tl-day.is-active {
  display: block;
}

.x10-cal-tl-grid {
  --timeline-hour-width: 220px;
  display: block;
  overflow-x: auto;
  overflow-y: visible;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: grab;
  user-select: none;
}

.x10-cal-tl-grid.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.x10-cal-tl--horizontal .x10-cal-tl-row {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
  border-bottom: 1px solid var(--color-border);
}

.x10-cal-tl-row:last-child {
  border-bottom: 0;
  padding-bottom: .7rem;
}

.x10-cal-tl-hour-header {
  background: var(--color-bg-muted);
  min-height: 2rem;
}

.x10-cal-tl-room-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-black);
  background: var(--color-bg-muted);
  z-index: 2;
}

/* Raum-Name vollständig anzeigen: Silbentrennung + Umbruch auch bei langen Wörtern. */
.x10-cal-tl-room-name {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}

.x10-cal-tl--horizontal .x10-cal-tl-room-label {
  flex: 0 0 9rem;
  border-right: 1px solid var(--color-border);
  position: sticky;
  left: 0;
}

/* Mobil: Location-Spalte so schmal wie möglich. */
@media (max-width: 767px) {
  .x10-cal-tl--horizontal .x10-cal-tl-room-label {
    flex-basis: 4rem;
    padding-inline: var(--space-3xs);
  }
  .x10-cal-tl--horizontal .x10-cal-tl-room-name {
    font-size: 0.66rem;
    line-height: 1.1;
  }
}

/* Datenzeilen wachsen mit dem Inhalt (Lanes / vollständige Raumnamen). */
.x10-cal-tl--horizontal .x10-cal-tl-row:not(.x10-cal-tl-hour-header) {
  min-height: 5rem;
}

.x10-cal-tl-corner {
  z-index: 3;
}

.x10-cal-tl-track {
  position: relative;
  z-index: 0;
  /* Höhe einer Spur (Lane) in der horizontalen Ansicht. */
  --tl-lane: 5rem;
}

.x10-cal-tl--horizontal .x10-cal-tl-track {
  flex: 0 0 calc(var(--timeline-hours, 1) * var(--timeline-hour-width));
  /* Höhe = Anzahl Lanes × Lane-Höhe, damit gestapelte Sessions Platz haben. */
  height: calc(var(--lanes, 1) * var(--tl-lane));
}

.x10-cal-tl--horizontal .x10-cal-tl-hour-header .x10-cal-tl-track {
  height: 2rem;
}

.x10-cal-tl-hour-header .x10-cal-tl-track {
  min-height: 2rem;
  background: var(--color-bg-muted);
}

.x10-cal-tl-gridline {
  position: absolute;
  pointer-events: none;
}

.x10-cal-tl--horizontal .x10-cal-tl-gridline {
  top: 0;
  bottom: 0;
  left: var(--hour-pos);
  border-left: 1px dashed var(--color-border);
}

.x10-cal-tl--vertical .x10-cal-tl-gridline {
  left: 0;
  right: 0;
  top: var(--hour-pos);
  border-top: 1px dashed var(--color-border);
}

/* "Jetzt"-Linie: dünn, rot, hinter den Sessions (zeigt die aktuelle Zeit). */
.x10-cal-tl-now {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.x10-cal-tl--horizontal .x10-cal-tl-now {
  top: 0;
  bottom: 0;
  left: var(--now-pos);
  border-left: 2px solid var(--color-accent);
}

.x10-cal-tl--vertical .x10-cal-tl-now {
  left: 0;
  right: 0;
  top: var(--now-pos);
  border-top: 2px solid var(--color-accent);
}

.x10-cal-tl-hour {
  position: absolute;
  padding: 0 4px;
  font-size: var(--font-size-sm);
  color: var(--color-black);
  background: var(--color-bg-muted);
  white-space: nowrap;
}

.x10-cal-tl--horizontal .x10-cal-tl-hour {
  top: 50%;
  left: var(--hour-pos);
  transform: translate(-50%, -50%);
}

.x10-cal-tl--vertical .x10-cal-tl-hour {
  left: 50%;
  top: var(--hour-pos);
  transform: translate(-50%, -50%);
}

/* ========================================================================
   Timeline – Session-Kacheln
   Die .x10-cal-tl-item ist nur ein (lane-großer) Positionierungs-Anker und
   wächst NICHT. Die sichtbare, beim Hover wachsende Box ist .x10-cal-tl-item-content.
   So bleibt der Favoriten-Stern (am Anker) beim Aufklappen an Ort und Stelle.
   ======================================================================== */
.x10-cal-tl-item {
  position: absolute;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
}

/* Horizontal: X = Zeit (left/width), Y = Lane (top/height). */
.x10-cal-tl--horizontal .x10-cal-tl-item {
  left: var(--item-start);
  width: var(--item-size);
  top: calc(var(--lane, 0) * var(--tl-lane) + 4px);
  height: calc(var(--tl-lane) - 8px);
}

/* Vertikal: Y = Zeit (top/height), X = Lane (Spaltenbreite geteilt). */
.x10-cal-tl--vertical .x10-cal-tl-item {
  top: var(--item-start);
  height: var(--item-size);
  left: calc(var(--lane, 0) * (100% / var(--lanes, 1)));
  width: calc(100% / var(--lanes, 1));
}

/* Sichtbare Box. */
.x10-cal-tl-item-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3xs) var(--space-2xs);
  background: var(--item-bg, var(--color-primary));
  color: var(--item-fg, var(--color-white));
  border: 1px solid color-mix(in srgb, var(--color-black) 15%, transparent);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  transition: min-width var(--transition-base), box-shadow var(--transition-base);
}

/* Akzent-Streifen mit allen Track-/Format-Farben (statt einfarbiger Kante). */
.x10-cal-tl-item-content::before {
  content: "";
  position: absolute;
  background: var(--track-stripe, color-mix(in srgb, var(--color-black) 25%, transparent));
  pointer-events: none;
  z-index: 0;
}

.x10-cal-tl--horizontal .x10-cal-tl-item-content::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.x10-cal-tl--vertical .x10-cal-tl-item-content::before {
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
}

/* Im Raster verläuft der Streifen waagerecht. */
.x10-cal-tl--vertical {
  --x10-stripe-dir: to right;
}

.x10-cal-tl-item-link {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  z-index: 1;
}

.x10-cal-tl-item-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.x10-cal-tl-item-footer {
  display: flex;
  gap: var(--space-2xs);
  margin-top: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover/Fokus/expandiert: Anker nach vorne holen, Box wächst NUR in die Breite
   (Höhe wächst höchstens nach unten, schrumpft aber nie unter die Lane-Höhe). */
.x10-cal-tl-item:hover,
.x10-cal-tl-item:focus,
.x10-cal-tl-item:focus-within,
.x10-cal-tl-item.is-expanded {
  z-index: 50;
}

.x10-cal-tl-item:hover .x10-cal-tl-item-content,
.x10-cal-tl-item:focus-within .x10-cal-tl-item-content,
.x10-cal-tl-item.is-expanded .x10-cal-tl-item-content {
  right: auto;
  bottom: auto;
  /* nie schmaler als die Kachel selbst, mindestens aber 17.5rem breit. */
  min-width: max(100%, 17.5rem);
  width: auto;
  min-height: 100%;
  height: auto;
  overflow: visible;
  box-shadow: var(--shadow-md);
}

.x10-cal-tl-item:hover .x10-cal-tl-item-title,
.x10-cal-tl-item:focus-within .x10-cal-tl-item-title,
.x10-cal-tl-item.is-expanded .x10-cal-tl-item-title,
.x10-cal-tl-item:hover .x10-cal-tl-item-footer,
.x10-cal-tl-item:focus-within .x10-cal-tl-item-footer,
.x10-cal-tl-item.is-expanded .x10-cal-tl-item-footer {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Favoriten-Stern hängt am (nicht wachsenden) Anker -> bleibt beim Hover stehen. */
.x10-cal-tl-item .x10-cal-star {
  top: auto;
  bottom: 2px;
  right: 2px;
  width: 1.25rem;
  height: 1.25rem;
  font-size: 0.95rem;
  z-index: 2;
  color: inherit;
  background: color-mix(in srgb, var(--color-white) 75%, transparent);
  border-radius: 50%;
}

.x10-cal-tl-item .x10-cal-star.is-favorited {
  color: var(--color-accent);
}

/* ========================================================================
   Timeline – vertikale Achse (Räume oben, Zeit links)
   ======================================================================== */
.x10-cal-tl--vertical .x10-cal-tl-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}

.x10-cal-tl--vertical .x10-cal-tl-row {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 13.75rem;
  border-right: 1px solid var(--color-border);
}

.x10-cal-tl--vertical .x10-cal-tl-row:last-child {
  border-right: 0;
}

.x10-cal-tl--vertical .x10-cal-tl-hour-header {
  width: 4rem;
  flex: 0 0 4rem;
  position: sticky;
  left: 0;
  z-index: 4;
  border-right: 1px solid var(--color-border);
}

.x10-cal-tl--vertical .x10-cal-tl-room-label {
  flex: 0 0 3.5rem;
  height: 3.5rem;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  justify-content: center;
  text-align: center;
}

/* Im Raster bleiben die Spaltenköpfe gleich hoch (Spuren darunter bündig),
   daher hier der Raumname auf 2 Zeilen begrenzt. */
.x10-cal-tl--vertical .x10-cal-tl-room-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.x10-cal-tl--vertical .x10-cal-tl-corner {
  z-index: 5;
}

.x10-cal-tl--vertical .x10-cal-tl-track {
  flex: 1 1 auto;
  width: 100%;
  height: calc(var(--timeline-hours, 1) * var(--timeline-hour-width));
}

.x10-cal-tl--vertical .x10-cal-tl-item-title,
.x10-cal-tl--vertical .x10-cal-tl-item-footer {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}