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

/* Aktionszeile am Ende des Drawers: "Filter" (schließt) und "Zurücksetzen". */
.x10-cal-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x10-cal-space-2xs);
  margin-top: var(--x10-cal-space-sm);
  padding-top: var(--x10-cal-space-md);
  border-top: 1px solid var(--x10-cal-color-border);
}

.x10-cal-filter-actions .x10-cal-apply {
  color: var(--x10-cal-color-white);
  background: var(--x10-cal-color-primary);
  border-color: var(--x10-cal-color-primary);
}

.x10-cal-filter-actions .x10-cal-apply:hover,
.x10-cal-filter-actions .x10-cal-apply:focus-visible {
  filter: brightness(0.92);
}

/* Filter-/Aktions-Buttons als Pills (im Drawer). */
.x10-cal-filter,
.x10-cal-clear,
.x10-cal-apply {
  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 {
  /* Nicht wachsen: Der freie Raum bleibt für den mittig sitzenden Zoom. */
  flex: 0 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);
  /* Oben klebt nur der Theme-Header; die Leiste ist beim Scrollen unten. */
  scroll-margin-top: calc(var(--x10-cal-header-height) + var(--x10-cal-space-sm));
}

.x10-cal-day-title {
  /* Kein oberer Rand: Der Kalender beginnt direkt mit dem Tagestitel, die
     Bedienleiste liegt fest unten. Tage trennt der untere Rand von .x10-cal-day. */
  margin-top: 0;
  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) + var(--x10-cal-space-sm));
}

.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.

   Stretch-Modus (Standard): Ein Slot mit nur einer Session bekommt eine
   Spalte, die Karte füllt die volle Breite. Ohne Stretch-Modus
   (.x10-cal-app--fixed-width, Adminseite) wird immer von drei Spalten
   ausgegangen und auto-fill lässt leere Spalten stehen – so bleibt jede Karte
   so breit wie in einer vollen Dreierreihe. Auf schmalen Bildschirmen passt
   ohnehin nur eine Spalte, beide Modi sehen dort gleich aus. */
.x10-cal-items {
  --x10-cal-items-gap: var(--x10-cal-space-sm);
  --x10-cal-items-fill: auto-fit;
  /* Eigene Variable statt --x10-cal-columns direkt: Der Inline-Wert aus dem
     Template hat sonst Vorrang und ließe sich per Klasse nicht überschreiben. */
  --x10-cal-items-columns: var(--x10-cal-columns, 1);
  --x10-cal-items-track: minmax(
    min(
      100%,
      max(
        var(--x10-cal-item-min),
        calc(
          (100% - (var(--x10-cal-items-columns) - 1) * var(--x10-cal-items-gap))
          / var(--x10-cal-items-columns)
        )
      )
    ),
    1fr
  );
  display: grid;
  gap: var(--x10-cal-items-gap);
  grid-template-columns: repeat(var(--x10-cal-items-fill), var(--x10-cal-items-track));
}

.x10-cal-app--fixed-width .x10-cal-items {
  --x10-cal-items-columns: 3;
  --x10-cal-items-fill: auto-fill;
}

@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) + var(--x10-cal-space-2xs));
    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);
}

/* In der Listenkarte sitzt das Herz etwas näher am rechten Rand. */
.x10-cal-item .x10-cal-star {
  right: var(--x10-cal-space-3xs);
}

.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);
}

/* Partner-Kennzeichen: kleines rundes "P" hinter dem Titel (Liste und
   Kacheln). Schwarz-weiß, damit es neben den Track-Farben neutral bleibt;
   in den Kacheln invertiert es auf die Kachelfarbe. */
.x10-cal-partner-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: 0.15em;
  width: 1.25em;
  height: 1.25em;
  margin-left: 0.3em;
  font-family: var(--x10-cal-font-heading);
  font-size: 0.55em;
  font-weight: 700;
  line-height: 1;
  color: var(--x10-cal-color-white);
  background: var(--x10-cal-color-black);
  border: 1px solid var(--x10-cal-color-black);
  border-radius: 50%;
  cursor: help;
}

.x10-cal-tl-item-title .x10-cal-partner-badge {
  font-size: 0.75em;
  color: var(--item-bg, var(--x10-cal-color-primary));
  background: var(--item-fg, var(--x10-cal-color-white));
  border-color: var(--item-fg, var(--x10-cal-color-white));
}

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

/* Speaker unterhalb der Track-Badges: rundes Thumbnail plus Name.
   Abschaltbar auf der Adminseite (Einstellung show_speaker_images). */
.x10-cal-item-speakers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x10-cal-space-2xs) var(--x10-cal-space-xs);
  margin-top: 1rem;
}

.x10-cal-speaker {
  display: inline-flex;
  align-items: center;
  gap: var(--x10-cal-space-3xs);
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 600;
  color: var(--x10-cal-color-text-muted);
  text-decoration: none;
}

.x10-cal-speaker:hover .x10-cal-speaker-name,
.x10-cal-speaker:focus-visible .x10-cal-speaker-name {
  text-decoration: underline;
}

.x10-cal-speaker-img {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--x10-cal-color-white);
}

/* 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
   ======================================================================== */
/* Die Leiste liegt immer fest am unteren Bildschirmrand, wie die Tab-Leiste
   einer App. Oben klebt in Timeline/Raster nur der Tabellenkopf. Die App
   bekommt unten Luft in Leistenhöhe (misst das JS: --x10-cal-bar-height),
   damit nichts hinter der Leiste verschwindet. */
.x10-cal-bar {
  position: fixed;
  /* top/height explizit zurücksetzen: Mit einem geerbten oder fremden top
     würde die Leiste sonst zwischen oben und unten aufgespannt. */
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  max-height: 50vh;
  overflow: visible;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x10-cal-space-2xs);
  padding: var(--x10-cal-space-2xs);
  padding-bottom: calc(var(--x10-cal-space-2xs) + env(safe-area-inset-bottom, 0px));
  background: var(--x10-cal-color-bg-muted);
  border-radius: var(--x10-cal-radius-md) var(--x10-cal-radius-md) 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.14);
}

.x10-cal-app {
  padding-bottom: calc(var(--x10-cal-bar-height, 3.5rem) + var(--x10-cal-space-sm));
}

/* Ab Tablet: schwebende Box, mittig und auf Layout-Breite. */
@media (min-width: 768px) {
  .x10-cal-bar {
    left: 50%;
    right: auto;
    bottom: var(--x10-cal-space-sm);
    transform: translateX(-50%);
    box-sizing: border-box;
    width: min(calc(100% - 2 * var(--x10-cal-space-sm)), var(--x10-cal-layout-width));
    padding-bottom: var(--x10-cal-space-2xs);
    border-radius: var(--x10-cal-radius-md);
  }
}

/* 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 {
  position: relative;
  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;
}

/* Gleitende Markierung: Die grüne Pille ist ein Pseudo-Element hinter den
   Buttons, das JS setzt Position/Breite des aktiven Buttons als Variablen
   (has-indicator). Ohne JS bleibt die statische Hintergrundfarbe am Button. */
.x10-cal-viewswitch::before {
  content: "";
  position: absolute;
  top: var(--x10-cal-space-3xs);
  bottom: var(--x10-cal-space-3xs);
  left: 0;
  width: var(--x10-cal-switch-w, 0px);
  transform: translateX(var(--x10-cal-switch-x, 0px));
  background: var(--x10-cal-color-accent);
  border-radius: 999px;
  opacity: 0;
}

/* Federnd: Die Pille schießt leicht über das Ziel hinaus und schwingt aus.
   cubic-bezier als Fallback, linear() (echte Federkurve) wo verfügbar. */
.x10-cal-viewswitch.has-indicator::before {
  opacity: 1;
  /* Überschwingen bewusst klein (ca. 2 % des Wegs), damit die Pille nie aus
     dem weißen Innenbereich rutscht; dafür ein kurzes, schnelles Ausschwingen. */
  transition: transform 0.3s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.22s ease;
}

@supports (transition-timing-function: linear(0, 1)) {
  .x10-cal-viewswitch.has-indicator::before {
    transition-timing-function: linear(0, 0.2 12%, 0.7 32%, 0.98 50%, 1.02 62%, 0.995 76%, 1.003 88%, 1), ease;
  }
}

/* Beim Wechsel (JS setzt is-moving kurz neu) wird die Pille minimal in
   Laufrichtung gestreckt und zittert beim Ankommen kurz aus. Die Stauchung
   bleibt innerhalb des Innenrands des Umschalters. */
.x10-cal-viewswitch.is-moving::before {
  animation: x10-cal-switch-jelly 0.3s ease-out;
}

@keyframes x10-cal-switch-jelly {
  0% { scale: 1 1; }
  35% { scale: 1.04 0.96; }
  65% { scale: 0.985 1.015; }
  100% { scale: 1 1; }
}

.x10-cal-viewswitch.has-indicator .x10-cal-viewbtn.is-active {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .x10-cal-viewswitch.has-indicator::before {
    transition: none;
  }
  .x10-cal-viewswitch.is-moving::before {
    animation: none;
  }
}

.x10-cal-viewbtn {
  position: relative;
  z-index: 1;
  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-accent);
}

/* 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,
.x10-cal-filter-toggle.is-active {
  color: var(--x10-cal-color-black);
  background: var(--x10-cal-color-accent);
  border-color: var(--x10-cal-color-accent);
}

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

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

/* Unterhalb Tablet: alle Bedienelemente gleich hoch (kompakte Icon-Variante). */
@media (max-width: 767px) {
  .x10-cal-bar {
    --x10-cal-ctrl-height: 2.5rem;
    align-items: center;
  }

  .x10-cal-viewbtn {
    min-height: calc(var(--x10-cal-ctrl-height) - 2 * var(--x10-cal-space-3xs));
    padding-block: 0;
  }

  .x10-cal-day-button,
  .x10-cal-filter-toggle,
  .x10-cal-toggle-liked,
  .x10-cal-viewswitch {
    box-sizing: border-box;
    min-height: var(--x10-cal-ctrl-height);
  }

  .x10-cal-day-button,
  .x10-cal-filter-toggle,
  .x10-cal-toggle-liked {
    padding-block: 0;
  }

  .x10-cal-day-buttons {
    /* Chips im Streifen vertikal mittig, gleiche Höhe wie die Nachbarn.
       Ohne Zoom (unterhalb Tablet ausgeblendet) füllt der Streifen den Platz,
       damit die rechte Gruppe rechts bleibt. */
    flex: 1 1 auto;
    align-items: center;
    min-height: var(--x10-cal-ctrl-height);
  }
}

/* Schmal (Handy hochkant): zwei feste Zeilen statt Umbruch-Flex, damit kein
   Leerraum bleibt. Zeile 1: Tages-Chips (scrollbar) + Favoriten. Zeile 2:
   Filter + Ansichts-Umschalter, der die restliche Breite füllt. Im Querformat
   (ab 600px) reicht die einzeilige Flex-Anordnung. */
@media (max-width: 599px) {
  .x10-cal-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "days days liked"
      "filter views views";
  }

  .x10-cal-day-buttons {
    grid-area: days;
  }

  .x10-cal-toggle-liked {
    grid-area: liked;
  }

  .x10-cal-filter-toggle {
    grid-area: filter;
  }

  .x10-cal-viewswitch {
    grid-area: views;
    display: flex;
  }

  .x10-cal-zoom {
    grid-column: 1 / -1;
  }

  .x10-cal-viewbtn {
    flex: 1 1 0;
    justify-content: center;
  }
}

/* ========================================================================
   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; die Listenansicht bleibt auf Layout-Breite. Die
   Bedienleiste hat in allen Ansichten dieselbe Breite (Layout-Breite), damit
   ihre Elemente beim Ansichtswechsel nicht springen. */
@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);
  }
}

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

/* Der Zoom sitzt mittig im freien Raum zwischen Tages-Chips und rechter
   Gruppe. Ist er ausgeblendet (Liste) oder gar nicht vorhanden, nimmt der
   Favoriten-Button den Raum als linken Auto-Rand – die rechte Gruppe bleibt
   so in jeder Ansicht an derselben Stelle. */
.x10-cal-zoom[hidden] ~ .x10-cal-toggle-liked,
.x10-cal-day-buttons + .x10-cal-toggle-liked {
  margin-left: auto;
}

.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;
    /* Mittig im freien Raum zwischen Tages-Chips und rechter Gruppe. */
    margin-inline: auto;
  }
  .x10-cal-zoom-slider {
    flex: none;
    width: 9rem;
  }
}

/* Unterhalb Desktop passt der Zoom nicht mehr neben Chips, Labels und
   Umschalter – dann fällt er weg (Spielerei, kein Muss). */
@media (max-width: 991px) {
  .x10-cal-zoom {
    display: none;
  }
  /* Ohne Zoom rückt die rechte Gruppe wieder an den Rand (s. Auto-Rand oben). */
  .x10-cal-zoom ~ .x10-cal-toggle-liked {
    margin-left: auto;
  }
}

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

/* Breite der Beschriftungsspalte (mobil schmaler, s. u.). Die Zeilenbreite
   wird daraus explizit berechnet statt über width: max-content – iOS Safari
   löst max-content hier nur zur Containerbreite auf, sodass Zeilenhintergrund
   und Trennlinie beim Seitwärtsscrollen vor dem Ende der Spur abbrechen. */
.x10-cal-tl--horizontal {
  --x10-cal-tl-label-width: 9rem;
}

.x10-cal-tl--horizontal .x10-cal-tl-row {
  display: flex;
  align-items: stretch;
  width: calc(var(--x10-cal-tl-label-width) + var(--timeline-hours, 1) * var(--timeline-hour-width));
  min-width: 100%;
  background: var(--x10-cal-color-bg);
  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 var(--x10-cal-tl-label-width);
  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-label-width: 4rem;
  }
  .x10-cal-tl--horizontal .x10-cal-tl-room-label {
    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: var(--tl-lane, 8.625rem);
}

.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 – hoch genug für
     vierzeilige Titel plus Fußzeile. */
  --tl-lane: 8.625rem;
}

.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;
  font-weight: bold;
}

.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;
}

/* Titel in Timeline UND Raster: so viele Zeilen wie neben Speakern und
   Fußzeile Platz haben – die Zeilenzahl (--title-lines) misst das JS je
   Kachel (fitTitles). Speaker und Fußzeile schrumpfen nie; als Sicherheit
   darf der Titel im Flex-Layout schrumpfen, damit sie nie herausrutschen.
   Beim Aufklappen (Hover/Fokus/Klick) erscheint der volle Titel. */
.x10-cal-tl-item-title {
  flex: 0 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: var(--title-lines, 4);
  line-clamp: var(--title-lines, 4);
  -webkit-box-orient: vertical;
  white-space: normal;
  text-overflow: clip;
}

.x10-cal-tl-item-speakers,
.x10-cal-tl-item-footer {
  flex: none;
}

.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 {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.x10-cal-tl-item-footer {
  display: flex;
  gap: var(--x10-cal-space-2xs);
  margin-top: auto;
  /* Platz für das Herz unten rechts. */
  padding-right: 1.5rem;
  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. */
/* Herz in der Kachel: unten rechts in der Fußzeile, die dafür rechts Platz
   lässt (padding-right) – so verdeckt es keinen Inhalt. Nicht favorisiert:
   Kontur in Kachelfarbe; favorisiert: gefüllt in Akzentfarbe. */
.x10-cal-tl-item .x10-cal-star {
  top: auto;
  bottom: 1px;
  right: 1px;
  width: 1.5rem;
  height: 1.5rem;
  z-index: 2;
  color: inherit;
  background: none;
  border-radius: 50%;
}

.x10-cal-tl-item .x10-cal-star::before {
  -webkit-mask-image: var(--x10-cal-icon-heart-outline);
          mask-image: var(--x10-cal-icon-heart-outline);
}

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

.x10-cal-tl-item .x10-cal-star.is-favorited::before {
  -webkit-mask-image: var(--x10-cal-icon-heart);
          mask-image: var(--x10-cal-icon-heart);
}

/* ========================================================================
   Timeline – vertikale Achse (Räume oben, Zeit links)
   ======================================================================== */
/* Das Raster ist immer so breit wie sein Container. Die Raumspalten haben
   eine Grundbreite (--x10-cal-tl-col-width) und WACHSEN, wenn Platz übrig
   ist – so bleibt bei wenigen Räumen kein Weißraum rechts. Bei vielen Räumen
   schrumpfen sie nicht, sondern das Raster scrollt. */
.x10-cal-tl--vertical .x10-cal-tl-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

.x10-cal-tl--vertical {
  /* Breite einer Raumspalte (mobil kompakter, s. Mobil-Block). */
  --x10-cal-tl-col-width: 13.75rem;
}

.x10-cal-tl--vertical .x10-cal-tl-row {
  display: flex;
  flex-direction: column;
  flex: 1 0 var(--x10-cal-tl-col-width);
  width: var(--x10-cal-tl-col-width);
  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-footer {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Speaker in der Kachel: nur im Raster (dort ist Platz), in der Timeline
   ausgeblendet. Die Links liegen über dem Session-Link-Overlay, damit sie
   klickbar sind; die Kachel selbst hat pointer-events: none. */
.x10-cal-tl-item-speakers {
  display: none;
}

.x10-cal-tl--vertical .x10-cal-tl-item-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x10-cal-space-3xs) var(--x10-cal-space-2xs);
  margin-top: var(--x10-cal-space-3xs);
}

.x10-cal-tl-speaker {
  position: relative;
  z-index: 2;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--x10-cal-space-3xs);
  max-width: 100%;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
  text-decoration: none;
}

.x10-cal-tl-speaker .x10-cal-speaker-img {
  width: 24px;
  height: 24px;
}

.x10-cal-tl-speaker-name {
  overflow-wrap: anywhere;
}

.x10-cal-tl-speaker:hover .x10-cal-tl-speaker-name,
.x10-cal-tl-speaker:focus-visible .x10-cal-tl-speaker-name {
  text-decoration: underline;
}

/* ========================================================================
   Druck: nur die gefilterte Listenansicht, ohne Website-Chrome.
   ======================================================================== */
/* ========================================================================
   Timeline – klebender Tabellenkopf mit Scroll-Pfeilen
   Der Kopf (Stundenmarken in der Timeline, Raumnamen im Raster) liegt als
   eigenes Element über dem Raster, außerhalb des Scroll-Containers. So klebt
   er oben, wenn die Seite nach unten gescrollt wird – am selben Offset wie
   die Bedienleiste, die dann unten angedockt ist. Das JS verschiebt seinen
   Inhalt synchron zum waagerechten Scrollstand des Rasters (Klasse
   is-at-start / is-at-end steuert die Pfeile). Im Raster selbst sind die
   dann doppelten Köpfe ausgeblendet.
   ======================================================================== */
.x10-cal-tl-scroller {
  position: relative;
  /* Standard-Stundenbreite: kommt von der Adminseite (--x10-cal-hour-width
     am App-Container); Zoom-JS überschreibt sie hier inline, Kopf und Raster
     erben sie. (Nicht am Raster setzen – das bräche die Vererbung.) */
  --timeline-hour-width: var(--x10-cal-hour-width, 220px);
}

.x10-cal-tl-head {
  position: sticky;
  top: var(--x10-cal-header-height);
  z-index: 8;
  display: flex;
  align-items: stretch;
  background: var(--x10-cal-color-bg-muted);
  border: 1px solid var(--x10-cal-color-border);
  border-bottom: 0;
  border-radius: var(--x10-cal-radius-md) var(--x10-cal-radius-md) 0 0;
}

.x10-cal-tl-scroller .x10-cal-tl-grid {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Deckfeld über der Ecke: Der Kopfinhalt wird per transform verschoben, die
   Eckzelle darin wandert mit. Damit gescrollte Stundenmarken/Raumnamen nicht
   unter den Pfeilen durchlaufen, deckt dieses Feld die Beschriftungsspalte
   ab (Breite wie im Raster; im Raster-Modus die Stundenspalte 4rem). */
.x10-cal-tl-head::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: var(--x10-cal-tl-label-width, 4rem);
  background: var(--x10-cal-color-bg-muted);
  border-right: 1px solid var(--x10-cal-color-border);
  border-top-left-radius: var(--x10-cal-radius-md);
  pointer-events: none;
}

.x10-cal-tl-head-viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.x10-cal-tl-head-inner {
  width: max-content;
  min-width: 100%;
  will-change: transform;
}

/* Kopfzeile im Kopf-Element: gleiche Klassen wie im Raster, nur ohne Trennlinie. */
.x10-cal-tl-head-hours {
  border-bottom: 0;
}

/* Doppelte Köpfe im Raster ausblenden. */
.x10-cal-tl--horizontal .x10-cal-tl-grid > .x10-cal-tl-hour-header,
.x10-cal-tl--horizontal .x10-cal-tl-head-rooms,
.x10-cal-tl--vertical .x10-cal-tl-head-hours,
.x10-cal-tl--vertical .x10-cal-tl-grid .x10-cal-tl-room-label {
  display: none;
}

/* Raster: Raumnamen-Zeile. Breiten spiegeln exakt die Spalten des Rasters
   (Stundenspalte 4rem, Raumspalte 13.75rem, je 1px Trennlinie) – daher ohne
   eigenes Padding, das sitzt am Namen. */
.x10-cal-tl--vertical .x10-cal-tl-head-rooms {
  display: flex;
  align-items: stretch;
  width: max-content;
  min-width: 100%;
}

.x10-cal-tl-head-corner {
  flex: 0 0 4rem;
  width: 4rem;
  border-right: 1px solid var(--x10-cal-color-border);
}

.x10-cal-tl-head-room {
  /* Gleiche Grundbreite und gleiches Wachstum wie die Raumspalten im Raster. */
  flex: 1 0 var(--x10-cal-tl-col-width, 13.75rem);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--x10-cal-tl-col-width, 13.75rem);
  height: 3.5rem;
  overflow: hidden;
  text-align: center;
  font-size: var(--x10-cal-font-size-sm);
  font-weight: 700;
  color: var(--x10-cal-color-black);
  border-right: 1px solid var(--x10-cal-color-border);
}

.x10-cal-tl-head-room:last-child {
  border-right: 0;
}

.x10-cal-tl-head-room .x10-cal-tl-room-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-inline: var(--x10-cal-space-2xs);
}

/* Pfeile: rund, vertikal mittig im Kopf; links im leeren Eckfeld, rechts über
   dem Rand. Sie nehmen keinen Platz ein, damit Kopf und Raster bündig bleiben. */
.x10-cal-tl-scrollbtn {
  position: absolute;
  top: calc(50% - 0.875rem);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  cursor: pointer;
  color: var(--x10-cal-color-text);
  background: var(--x10-cal-color-bg);
  border: 1px solid var(--x10-cal-color-border);
  border-radius: 50%;
  box-shadow: var(--x10-cal-shadow-sm);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--x10-cal-transition-base), visibility var(--x10-cal-transition-base), background var(--x10-cal-transition-base);
}

.x10-cal-tl-scrollbtn--prev {
  left: var(--x10-cal-space-3xs);
}

.x10-cal-tl-scrollbtn--next {
  right: var(--x10-cal-space-3xs);
}

.x10-cal-tl-scroller.is-at-start .x10-cal-tl-scrollbtn--prev,
.x10-cal-tl-scroller.is-at-end .x10-cal-tl-scrollbtn--next {
  opacity: 0;
  visibility: hidden;
}

.x10-cal-tl-scrollbtn:hover {
  background: var(--x10-cal-color-bg-muted);
}

.x10-cal-tl-scrollbtn:focus-visible {
  outline: 2px solid var(--x10-cal-color-primary);
  outline-offset: 2px;
}

/* Chevron aus zwei Rändern, keine Icon-Schrift nötig. */
.x10-cal-tl-scrollbtn::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.x10-cal-tl-scrollbtn--prev::before {
  transform: translateX(0.12rem) rotate(135deg);
}

.x10-cal-tl-scrollbtn--next::before {
  transform: translateX(-0.12rem) rotate(-45deg);
}

/* Mobil: beide Pfeile klein nebeneinander im leeren Eckfeld (4rem), damit sie
   keine Uhrzeit oder Raumnamen verdecken. Am Ende gedimmt statt ausgeblendet,
   so bleibt das Paar optisch stabil. */
@media (max-width: 767px) {
  .x10-cal-tl-scrollbtn {
    top: calc(50% - 0.75rem);
    width: 1.5rem;
    height: 1.5rem;
    box-shadow: none;
  }

  .x10-cal-tl-scrollbtn--prev {
    left: 0.3rem;
  }

  .x10-cal-tl-scrollbtn--next {
    right: auto;
    left: 2.15rem;
  }

  .x10-cal-tl-scrollbtn::before {
    width: 0.4rem;
    height: 0.4rem;
  }

  .x10-cal-tl-scroller.is-at-start .x10-cal-tl-scrollbtn--prev,
  .x10-cal-tl-scroller.is-at-end .x10-cal-tl-scrollbtn--next {
    opacity: 0.35;
    visibility: visible;
  }
}

/* ========================================================================
   Timeline/Raster mobil: eine Fläche, die in beide Richtungen scrollt
   Unter Tablet-Breite füllt das Raster den Bildschirm zwischen Theme-Header
   und Bedienleiste und scrollt selbst in beide Richtungen. So gibt es für
   den Browser nur einen Scrollbereich (keine Achsenfrage Kalender/Seite).
   Der externe klebende Kopf entfällt; stattdessen kleben die Köpfe IM Raster
   (Stundenzeile oben bzw. Raumnamen oben, Uhrzeiten links). Der Kopf-
   Container bleibt nur als Träger der Pfeile, klein über der Ecke.
   Die Stundenhöhe kommt wie am Desktop vom Standard-Zoom der Adminseite;
   schmalere Raumspalten (9.5rem) sorgen für Übersicht, Spalten rasten beim
   Wischen ein.
   ======================================================================== */
@media (max-width: 767px) {
  .x10-cal-tl-scroller {
    --x10-cal-tl-head-height: 2rem;
    scroll-margin-top: var(--x10-cal-header-height);
  }

  .x10-cal-tl--vertical {
    --x10-cal-tl-col-width: 9.5rem;
  }

  .x10-cal-tl--vertical .x10-cal-tl-scroller {
    --x10-cal-tl-head-height: 3.5rem;
  }

  .x10-cal-tl-grid {
    overflow: auto;
    height: calc(100vh - var(--x10-cal-header-height) - var(--x10-cal-bar-height, 3.5rem) - var(--x10-cal-space-sm));
    height: calc(100dvh - var(--x10-cal-header-height) - var(--x10-cal-bar-height, 3.5rem) - var(--x10-cal-space-sm));
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top-left-radius: var(--x10-cal-radius-md);
    border-top-right-radius: var(--x10-cal-radius-md);
  }

  /* Kopf-Container nur noch als Pfeil-Träger über der Ecke des Rasters.
     Selektor bewusst spezifischer als .x10-cal-tl-head: Themes setzen für den
     klebenden Desktop-Kopf gern ein eigenes top – das darf hier nicht greifen. */
  .x10-cal-tl-scroller > .x10-cal-tl-head {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 9;
    width: var(--x10-cal-tl-label-width, 4rem);
    height: var(--x10-cal-tl-head-height);
    margin: 0;
    transform: none;
    background: transparent;
    border: 0;
    pointer-events: none;
  }

  .x10-cal-tl-head::before,
  .x10-cal-tl-head-viewport {
    display: none;
  }

  .x10-cal-tl-scrollbtn {
    pointer-events: auto;
  }

  /* Köpfe im Raster wieder zeigen und innerhalb des Rasters kleben lassen. */
  .x10-cal-tl--horizontal .x10-cal-tl-grid > .x10-cal-tl-hour-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 4;
  }

  .x10-cal-tl--vertical .x10-cal-tl-grid .x10-cal-tl-room-label {
    display: flex;
  }

  /* Die Zeitspur darf im festen Container nicht schrumpfen – sonst wäre
     nichts zu scrollen. Und die Spalten müssen mit dem Inhalt wachsen statt
     auf Container-Höhe gestreckt zu werden: Sticky-Raumnamen kleben nur
     innerhalb ihrer Spalte, und der Spaltenrand endet mit ihr. */
  .x10-cal-tl--vertical .x10-cal-tl-grid {
    align-items: flex-start;
  }

  .x10-cal-tl--vertical .x10-cal-tl-track {
    flex: 0 0 auto;
  }

  /* Raumspalten rasten ein; die Uhrzeitspalte bleibt frei. */
  .x10-cal-tl--vertical .x10-cal-tl-grid {
    scroll-snap-type: x proximity;
    scroll-padding-left: 4rem;
  }

  .x10-cal-tl--vertical .x10-cal-tl-row:not(.x10-cal-tl-hour-header) {
    scroll-snap-align: start;
  }
}

@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;
  }
}