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

/* ========================================================================
   Design-Tokens
   ------------------------------------------------------------------------
   Der Kalender ist self-contained: Jedes Token greift auf die gleichnamige
   Theme-Variable zu, WENN das aktive Theme sie definiert (z. B. --color-primary),
   und fällt sonst auf den eingebauten Default zurück. Zum Anpassen an eine
   Seite entweder die Theme-Variablen definieren oder gezielt einzelne
   --x10-cal-*-Tokens im Theme überschreiben (Theme-CSS lädt nach Modul-CSS
   und gewinnt damit die Kaskade).

   ------------------------------------------------------------------------
   Track-/Format-/Ort-Farben pro Taxonomie-ID
   ------------------------------------------------------------------------
   Jede Session-Karte (.x10-cal-item), jede Timeline-Kachel (.x10-cal-tl-item),
   jedes Track-Badge und jeder Filterpunkt trägt die ID-Klassen ihrer Terme:

     .x10-cal-track-11     Track mit Term-ID 11
     .x10-cal-format-65    Format mit Term-ID 65
     .x10-cal-location-7   Ort mit Node-ID 7

   Die Farben selbst stehen NICHT in style-Attributen, sondern kommen aus einem
   generierten Stylesheet (ScheduleBuilder::paletteCss()) im Cascade-Layer
   "x10-calendar.palette":

     :root { --x10-cal-track-11-color: #7a9a3d; --x10-cal-track-11-fg: #fff; }

   Zum Anpassen im Theme gibt es damit zwei Wege – beide ohne !important, weil
   ungeschichtetes CSS jeden Layer schlägt:

     1. Farbe global ändern (wirkt auf Badge, Kartenstreifen, Timeline-Kachel
        und Filterpunkt zugleich):
          :root { --x10-cal-track-11-color: #123456; --x10-cal-track-11-fg: #fff; }

     2. Einzelnes Element frei gestalten:
          .x10-cal-track-badge.x10-cal-track-11 { background: none; border: 2px solid; }
          .x10-cal-item.x10-cal-track-11 { ... }
   ======================================================================== */
:root {
  /* Farben */
  --x10-cal-color-white: var(--color-white, #ffffff);
  --x10-cal-color-black: var(--color-black, #1a1a1a);
  --x10-cal-color-grey-400: var(--color-grey-400, #b3b3b3);
  --x10-cal-color-primary: var(--color-primary, #01aaa0);
  --x10-cal-color-accent: var(--color-accent, #d12d68);
  --x10-cal-color-text: var(--color-text, var(--x10-cal-color-black));
  --x10-cal-color-text-muted: var(--color-text-muted, #6b6b6b);
  --x10-cal-color-bg: var(--color-bg, var(--x10-cal-color-white));
  --x10-cal-color-bg-muted: var(--color-bg-muted, #f5f5f5);
  --x10-cal-color-border: var(--color-border, #e6e6e6);

  /* Abstände */
  --x10-cal-space-3xs: var(--space-3xs, 0.25rem);
  --x10-cal-space-2xs: var(--space-2xs, 0.5rem);
  --x10-cal-space-xs: var(--space-xs, 0.75rem);
  --x10-cal-space-sm: var(--space-sm, 1rem);
  --x10-cal-space-md: var(--space-md, 1.5rem);
  --x10-cal-space-lg: var(--space-lg, 2rem);
  --x10-cal-space-xl: var(--space-xl, 3rem);
  --x10-cal-space-2xl: var(--space-2xl, 4.5rem);

  /* Typografie */
  --x10-cal-font-heading: var(--font-heading, inherit);
  --x10-cal-font-size-sm: var(--font-size-sm, 0.875rem);
  --x10-cal-font-size-h3: var(--font-size-h3, clamp(1.25rem, 1rem + 1.2vw, 1.5rem));

  /* Rundungen, Schatten, Übergänge */
  --x10-cal-radius-sm: var(--radius-sm, 4px);
  --x10-cal-radius-md: var(--radius-md, 8px);
  --x10-cal-shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
  --x10-cal-shadow-md: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.15));
  --x10-cal-transition-base: var(--transition-base, 0.2s ease);

  /* Icons: als Token, damit ein Theme eine eigene Form einsetzen kann, ohne
     die Regeln zu kennen (Wert muss eine url(...) mit Bilddaten sein). */
  --x10-cal-icon-heart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23000%27%20d%3D%27M12%2020.6C8.5%2017.6%203.2%2013.6%203.2%209.1C3.2%206.3%205.4%204.2%208.2%204.2C10%204.2%2011.4%205.2%2012%206.4C12.6%205.2%2014%204.2%2015.8%204.2C18.6%204.2%2020.8%206.3%2020.8%209.1C20.8%2013.6%2015.5%2017.6%2012%2020.6Z%27%2F%3E%3C%2Fsvg%3E");
  --x10-cal-icon-heart-outline: 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%2020.6C8.5%2017.6%203.2%2013.6%203.2%209.1C3.2%206.3%205.4%204.2%208.2%204.2C10%204.2%2011.4%205.2%2012%206.4C12.6%205.2%2014%204.2%2015.8%204.2C18.6%204.2%2020.8%206.3%2020.8%209.1C20.8%2013.6%2015.5%2017.6%2012%2020.6Z%27%2F%3E%3C%2Fsvg%3E");

  /* Layout */
  --x10-cal-layout-width: var(--layout-width, 1200px);
  --x10-cal-header-height: var(--header-height, 0px);
  /* Mindestbreite einer Session-Karte in der Listenansicht. Unterschreitet die
     rechnerische Spaltenbreite diesen Wert, bricht das Raster automatisch auf
     weniger Spalten um (statt aus dem Layout zu laufen). Themes können den Wert
     überschreiben, um früher/später umzubrechen. */
  --x10-cal-item-min: 18rem;
}

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

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

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

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

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

.x10-cal-search {
  flex: 1 1 14rem;
  min-height: 2.75rem;
  padding: var(--x10-cal-space-2xs) var(--x10-cal-space-sm);
  font: inherit;
  color: var(--x10-cal-color-text);
  background: var(--x10-cal-color-bg);
  border: 1px solid var(--x10-cal-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(--x10-cal-space-3xs);
  padding: var(--x10-cal-space-3xs) var(--x10-cal-space-sm);
  font: inherit;
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--x10-cal-color-text);
  background: var(--x10-cal-color-bg);
  border: 2px solid var(--x10-cal-color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--x10-cal-transition-base), border-color var(--x10-cal-transition-base), color var(--x10-cal-transition-base);
}

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

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

/* Farbpunkt im Track-Filter (Farbe über die ID-Klasse aus der Palette). */
.x10-cal-dot {
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  flex: none;
  background-color: var(--x10-cal-track-color, var(--x10-cal-color-primary));
  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(--x10-cal-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(--x10-cal-space-3xs) var(--x10-cal-space-2xs);
  font: inherit;
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: var(--x10-cal-color-text);
  background: var(--x10-cal-color-bg);
  border: 1px solid var(--x10-cal-color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--x10-cal-transition-base), color var(--x10-cal-transition-base), border-color var(--x10-cal-transition-base);
}

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

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

.x10-cal-day-title {
  margin-bottom: var(--x10-cal-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(--x10-cal-space-lg);
  padding: var(--x10-cal-space-md);
  background: #f5f5f5d1;
  border-radius: var(--x10-cal-radius-md);
}

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

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

.x10-cal-slot {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: verhindert, dass breite Inhalte (lange Wörter,
     Badges) die Spalte über die verfügbare Breite hinaus aufblasen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--x10-cal-space-2xs);
  scroll-margin-top: calc(var(--x10-cal-header-height) + 4rem);
}

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

/* Karten-Raster eines Zeitslots.
   --x10-cal-columns (inline vom Template, = Anzahl Sessions, max. 3) ist die
   ANGESTREBTE Spaltenzahl, keine erzwungene: Die Spaltenbreite ist der größere
   Wert aus "Container / Spaltenzahl" und --x10-cal-item-min. Passen dann nicht
   mehr alle Spalten nebeneinander, reduziert auto-fit die Spaltenzahl selbst.
   Dadurch kann das Raster nie breiter werden als sein Container – unabhängig
   davon, wie schmal das umgebende Theme-Layout ist. */
.x10-cal-items {
  --x10-cal-items-gap: var(--x10-cal-space-sm);
  display: grid;
  gap: var(--x10-cal-items-gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          var(--x10-cal-item-min),
          calc(
            (100% - (var(--x10-cal-columns, 1) - 1) * var(--x10-cal-items-gap))
            / var(--x10-cal-columns, 1)
          )
        )
      ),
      1fr
    )
  );
}

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

/* ========================================================================
   Session-Karte
   ======================================================================== */
.x10-cal-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--x10-cal-space-2xs);
  /* Als Grid-/Flex-Kind sonst mindestens min-content breit -> sprengt die Spalte. */
  min-width: 0;
  /* Lange Komposita (z. B. "Organisationsentwicklung") umbrechen statt überlaufen:
     bevorzugt mit Silbentrennung (nutzt das lang-Attribut der Seite), notfalls
     hart im Wort. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  padding: var(--x10-cal-space-md);
  padding-inline-start: calc(var(--x10-cal-space-md) + 8px);
  padding-inline-end: var(--x10-cal-space-xl);
  background: var(--x10-cal-color-bg);
  color: var(--x10-cal-color-text);
  border: 1px solid var(--x10-cal-color-border);
  border-left: 0;
  border-radius: var(--x10-cal-radius-md);
  box-shadow: var(--x10-cal-shadow-sm);
  transition: transform var(--x10-cal-transition-base), box-shadow var(--x10-cal-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(--x10-cal-color-grey-400));
  border-start-start-radius: var(--x10-cal-radius-md);
  border-end-start-radius: var(--x10-cal-radius-md);
  pointer-events: none;
}

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

/* Favoriten-Herz oben rechts. Die Form kommt als SVG-Maske aus
   --x10-cal-icon-heart und ist damit in jeder Schriftart identisch – das
   Zeichen U+2665 sieht je nach Systemschrift unterschiedlich spitz aus. */
.x10-cal-star {
  position: absolute;
  top: var(--x10-cal-space-2xs);
  right: var(--x10-cal-space-2xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  line-height: 1;
  color: var(--x10-cal-color-grey-400);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--x10-cal-transition-base), transform var(--x10-cal-transition-base);
}

.x10-cal-star::before {
  content: "";
  /* 75 % der Schaltfläche: gleiche optische Größe in Liste und Timeline. */
  width: 75%;
  height: 75%;
  background-color: currentColor;
  -webkit-mask: var(--x10-cal-icon-heart) center / contain no-repeat;
          mask: var(--x10-cal-icon-heart) center / contain no-repeat;
}

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

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

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

/* Pillen sind inline-flex und wären sonst mindestens so breit wie ihr längstes
   Wort – in schmalen Spalten läuft das aus der Karte. "anywhere" senkt die
   intrinsische Mindestbreite, sodass innerhalb der Pille umbrochen wird. */
.x10-cal-track-badge,
.x10-cal-item-format,
.x10-cal-item-meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.x10-cal-track-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.85em;
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  /* --x10-cal-track-color / --x10-cal-track-fg setzt das Paletten-Stylesheet
     anhand der ID-Klasse (.x10-cal-track-11) – siehe Kopf dieser Datei. */
  background-color: var(--x10-cal-track-color, var(--x10-cal-color-primary));
  color: var(--x10-cal-track-fg, var(--x10-cal-color-white));
}

.x10-cal-item-title {
  margin: 0;
  font-family: var(--x10-cal-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(--x10-cal-color-primary);
}

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

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

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

.x10-cal-item-meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--x10-cal-space-3xs);
  padding: var(--x10-cal-space-3xs) var(--x10-cal-space-xs);
  background: color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--x10-cal-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(--x10-cal-space-2xs);
  padding: var(--x10-cal-space-3xs) var(--x10-cal-space-sm);
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--x10-cal-color-primary);
  border: 1px solid var(--x10-cal-color-primary);
  border-radius: 999px;
  transition: background var(--x10-cal-transition-base), color var(--x10-cal-transition-base);
}

.x10-cal-item-ics:hover,
.x10-cal-item-ics:focus-visible {
  color: var(--x10-cal-color-white);
  background: var(--x10-cal-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(--x10-cal-header-height);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x10-cal-space-2xs);
  margin-bottom: var(--x10-cal-space-lg);
  padding: var(--x10-cal-space-2xs);
  background: var(--x10-cal-color-bg-muted);
  border-radius: var(--x10-cal-radius-md);
  box-shadow: var(--x10-cal-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(--x10-cal-space-3xs);
  padding: var(--x10-cal-space-3xs);
  background: var(--x10-cal-color-bg);
  border-radius: 999px;
}

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

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

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

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

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

/* Icons via Maske (skalieren mit der Schriftgröße). */
.x10-cal-viewbtn::before,
.x10-cal-filter-toggle::before,
.x10-cal-toggle-liked::before,
.x10-cal-print::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");
}

/* Gleiche Herzform wie an der Karte, nur als Kontur. */
.x10-cal-toggle-liked {
  --x10-cal-icon: var(--x10-cal-icon-heart-outline);
}

.x10-cal-print {
  --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%27M6%209V3h12v6%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%279%27%20width%3D%2718%27%20height%3D%278%27%20rx%3D%271%27%2F%3E%3Crect%20x%3D%277%27%20y%3D%2715%27%20width%3D%2710%27%20height%3D%276%27%20rx%3D%271%27%2F%3E%3C%2Fsvg%3E");
}

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

/* Druck-Button erst ab Tablet/Desktop (auf dem Handy nicht benötigt). */
.x10-cal-print {
  display: none;
}

/* Ab Tablet: Labels einblenden, etwas mehr Innenabstand, Druck-Button zeigen. */
@media (min-width: 768px) {
  .x10-cal-btn-label {
    display: inline;
  }
  .x10-cal-print {
    display: inline-flex;
  }
  .x10-cal-filter-toggle,
  .x10-cal-toggle-liked,
  .x10-cal-print {
    padding-inline: var(--x10-cal-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(--x10-cal-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(--x10-cal-space-lg));
    margin-inline: calc(50% - 50vw + var(--x10-cal-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(--x10-cal-transition-base, 0.2s) ease;
}

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

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

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

.x10-cal-drawer__close {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--x10-cal-color-text);
  background: var(--x10-cal-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(--x10-cal-space-2xs);
  padding: var(--x10-cal-space-3xs) var(--x10-cal-space-sm);
  background: var(--x10-cal-color-bg);
  border: 1px solid var(--x10-cal-color-border);
  border-radius: var(--x10-cal-radius-sm);
  /* Slider-Spur/-Regler in Primärfarbe statt Browser-Blau. */
  accent-color: var(--x10-cal-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(--x10-cal-color-text);
  background: var(--x10-cal-color-bg-muted);
  border: 1px solid var(--x10-cal-color-border);
  border-radius: var(--x10-cal-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(--x10-cal-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(--x10-cal-color-bg);
  border: 1px solid var(--x10-cal-color-border);
  border-radius: var(--x10-cal-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(--x10-cal-color-border);
}

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

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

.x10-cal-tl-room-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--x10-cal-space-2xs) var(--x10-cal-space-sm);
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 700;
  color: var(--x10-cal-color-black);
  background: var(--x10-cal-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(--x10-cal-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(--x10-cal-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(--x10-cal-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(--x10-cal-color-border);
}

.x10-cal-tl--vertical .x10-cal-tl-gridline {
  left: 0;
  right: 0;
  top: var(--hour-pos);
  border-top: 1px dashed var(--x10-cal-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(--x10-cal-color-accent);
}

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

.x10-cal-tl-hour {
  position: absolute;
  padding: 0 4px;
  font-size: var(--x10-cal-font-size-sm);
  color: var(--x10-cal-color-black);
  background: var(--x10-cal-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(--x10-cal-space-3xs) var(--x10-cal-space-2xs);
  background: var(--item-bg, var(--x10-cal-color-primary));
  color: var(--item-fg, var(--x10-cal-color-white));
  border: 1px solid color-mix(in srgb, var(--x10-cal-color-black) 15%, transparent);
  border-radius: var(--x10-cal-radius-sm);
  box-shadow: var(--x10-cal-shadow-sm);
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  transition: min-width var(--x10-cal-transition-base), box-shadow var(--x10-cal-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(--x10-cal-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(--x10-cal-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(--x10-cal-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 und die Box hervorheben.
   In welche Richtung sie dabei aufklappt, hängt von der Achse ab (siehe unten). */
.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 {
  overflow: visible;
  box-shadow: var(--x10-cal-shadow-md);
}

/* Timeline (Zeit waagerecht): Kacheln sind schmal, aber die Zeile ist hoch
   genug – die Box wächst deshalb nach rechts (und höchstens nach unten,
   schrumpft aber nie unter die Lane-Höhe). */
.x10-cal-tl--horizontal .x10-cal-tl-item:hover .x10-cal-tl-item-content,
.x10-cal-tl--horizontal .x10-cal-tl-item:focus-within .x10-cal-tl-item-content,
.x10-cal-tl--horizontal .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;
}

/* Raster (Räume als Spalten): Die Spaltenbreite reicht bereits für den Text,
   ein seitliches Aufklappen würde nur in die Nachbarspalte ragen. Die Box
   bleibt daher genau so breit wie ihre Spalte und wächst nur nach unten,
   falls der Inhalt bei kurzen Sessions sonst abgeschnitten wäre. */
.x10-cal-tl--vertical .x10-cal-tl-item:hover .x10-cal-tl-item-content,
.x10-cal-tl--vertical .x10-cal-tl-item:focus-within .x10-cal-tl-item-content,
.x10-cal-tl--vertical .x10-cal-tl-item.is-expanded .x10-cal-tl-item-content {
  bottom: auto;
  min-height: 100%;
  height: auto;
}

.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;
  z-index: 2;
  color: inherit;
  background: color-mix(in srgb, var(--x10-cal-color-white) 75%, transparent);
  border-radius: 50%;
}

.x10-cal-tl-item .x10-cal-star.is-favorited {
  color: var(--x10-cal-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(--x10-cal-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(--x10-cal-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(--x10-cal-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;
}

/* ========================================================================
   Druck: nur die gefilterte Listenansicht, ohne Website-Chrome.
   ======================================================================== */
@media print {
  /* Kleinere Seitenränder = mehr Inhalt pro Seite. */
  @page {
    margin: 10mm;
  }

  /* Per JS gesetzt: alles außerhalb des Kalenders ausblenden (paginiert korrekt). */
  .x10-print-hide {
    display: none !important;
  }

  /* Bedienleiste, Drawer, Timeline/Raster, Sterne und ICS-Links nicht drucken. */
  .x10-cal-bar,
  .x10-cal-drawer,
  .x10-cal-view--timeline,
  .x10-cal-star,
  .x10-cal-item-ics {
    display: none !important;
  }

  /* Listenansicht erzwingen, egal welche Ansicht am Bildschirm aktiv war. */
  .x10-cal-view {
    display: block !important;
  }

  /* Kompaktes Druck-Layout: volle Breite, kleine Schrift, schwarzer Text,
     Farben (Track-Streifen/Badges) mitdrucken. */
  .x10-cal-app,
  .x10-cal {
    max-width: none !important;
    margin: 0 !important;
    color: #000 !important;
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Tage / Dauerangebote eng. */
  .x10-cal-day {
    margin-bottom: 0.45rem;
  }

  .x10-cal-day-title {
    font-size: 13pt !important;
    margin: 0 0 0.25rem !important;
    break-after: avoid;
    color: #000 !important;
  }

  .x10-cal-continuous {
    padding: 0.3rem 0.45rem !important;
    margin-bottom: 0.45rem !important;
  }

  .x10-cal-continuous-title {
    font-size: 10.5pt !important;
    margin: 0 0 0.25rem !important;
    color: #000 !important;
  }

  /* Zeitschiene: schmale Zeitspalte, kompakter Abstand. */
  .x10-cal-slots {
    display: block !important;
  }

  /* Fließtext statt Grid, damit Zeitblöcke sauber über Seiten umbrechen können.
     Zeit schwebt links, Sessions stehen rechts daneben. */
  .x10-cal-slot {
    display: block !important;
    break-inside: auto;
  }

  .x10-cal-slot::after {
    content: "";
    display: block;
    clear: both;
  }

  .x10-cal-slot .x10-cal-time {
    float: left;
    width: 2.6rem;
  }

  .x10-cal-time {
    position: static !important;
    font-size: 11pt !important;
    padding: 0 !important;
    color: #000 !important;
  }

  .x10-cal-items {
    display: block !important;
  }

  .x10-cal-slot .x10-cal-items {
    margin-left: 3rem;
  }

  /* Karte ohne Rahmen/Schatten, dünner Farbstreifen, Trennlinie nach jeder
     Session, niemals durch einen Seitenumbruch zerschnitten. */
  .x10-cal-item {
    gap: 0.1rem !important;
    padding: 0.1rem 0 0.25rem 0.45rem !important;
    margin-bottom: 0.25rem !important;
    border: 0 !important;
    border-bottom: 1px solid #ccc !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    break-inside: avoid;
  }

  .x10-cal-item::before {
    width: 3px;
    border-radius: 0;
  }

  .x10-cal-item-title {
    font-size: 10.5pt !important;
    line-height: 1.2 !important;
  }

  .x10-cal-item-title a {
    color: #000 !important;
    text-decoration: none;
  }

  /* Badges klein und ohne Icons. */
  .x10-cal-track-badges {
    gap: 0.2rem !important;
  }

  .x10-cal-track-badge,
  .x10-cal-item-format {
    font-size: 7pt !important;
    padding: 0.05em 0.45em !important;
  }

  .x10-cal-item-format::before {
    display: none !important;
  }

  /* Beschreibung vollständig, kompakt. */
  .x10-cal-item-excerpt {
    display: block !important;
    overflow: visible !important;
    -webkit-line-clamp: none !important;
    line-clamp: none !important;
    font-size: 8.5pt !important;
    color: #000 !important;
  }

  /* Meta-Zeile inline, ohne Pillen-Hintergrund. */
  .x10-cal-item-meta {
    gap: 0.6rem !important;
    font-size: 8pt !important;
    color: #000 !important;
  }

  .x10-cal-item-meta > span {
    padding: 0 !important;
    background: none !important;
  }
}