/*
 * innoCal – Standarddarstellungen
 * ============================================================================
 *
 * Haltung: Flächen statt Kästen, Haarlinien statt Rahmen, Typografie statt
 * Farbe. Farbe kommt nur als kleiner Punkt pro Kalender vor. Ein einziger,
 * sehr weicher Schatten, und der nur beim Zeigen.
 *
 * Damit dein Nachstylen Updates überlebt:
 *   1. Keine festen Farben oder Masse – alles aus Variablen mit Rückfallwert.
 *      Die Vorgaben zeigen auf die Tokens aus yootheme_innotheme/custom.css.
 *   2. Kein !important, nur einfache Klassen, alles unter .innocal.
 *   3. Termin- und Kalenderfarbe kommen als Variable aus dem Markup.
 *
 * Umstylen heisst: eine Variable setzen.
 *   .innocal { --ic-accent: #1d4ed8; --ic-radius: 0; }
 */

.innocal {
  --ic-accent:      var(--color-primary, #971917);
  --ic-ink:         var(--color-text, #18181b);
  --ic-muted:       var(--color-text-muted, #71717a);
  --ic-faint:       var(--color-text-light, #a1a1aa);
  --ic-surface:     var(--color-bg, #fff);
  --ic-sunken:      var(--color-bg-alt, #fafafa);
  --ic-line:        var(--color-border-light, #ececef);
  --ic-line-strong: var(--color-border, #dcdce0);
  --ic-inverse:     var(--color-text-inverse, #fff);

  --ic-radius:      var(--border-radius-md, .5rem);
  --ic-radius-sm:   var(--border-radius-sm, .25rem);
  --ic-lift:        0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);

  --ic-gap:         var(--space-sm, 1rem);
  --ic-gap-lg:      var(--space-md, 1.5rem);
  /* --ic-cell bleibt absichtlich ungesetzt: ohne Angabe richtet sich die
     Zellenhöhe nach der Breite (siehe .innocal__cell). Setzen erzwingt sie. */
  /* --ic-hour ebenfalls ungesetzt: die Stundenhöhe folgt der Breite (siehe
     .innocal__tgaxis). Setzen - oder «Stundenhöhe» im Element - erzwingt sie. */

  --ic-fs-meta:     var(--font-xs, .75rem);
  --ic-fs-body:     var(--font-small, .875rem);
  --ic-tr:          160ms cubic-bezier(.2, 0, .2, 1);

  --ic-event-colour: var(--ic-accent);
  --ic-dot:          var(--ic-accent);

  color: var(--ic-ink);
  font-size: var(--ic-fs-body);
  font-variant-numeric: tabular-nums;

  /*
   * Der Kalender richtet sich nach der Breite, die er tatsächlich hat - nicht
   * nach dem Bildschirm. In einer schmalen YOOtheme-Spalte auf einem breiten
   * Monitor war er sonst ein Riesenraster mit zerquetschten Spalten.
   * Alle Umbrüche unten sind deshalb @container, nicht @media.
   */
  container: innocal / inline-size;
}

/*
 * Darstellung erzwingen (Einstellung «Darstellung» im Element/Menüeintrag).
 * «Voll» nimmt dem Kalender die Container-Eigenschaft: dann greift keine der
 * @container-Regeln, und er zeigt immer das volle Raster.
 */
.innocal.innocal--density-full {
  container-type: normal;
  --ic-cell: 8.5rem;
}

.innocal *,
.innocal *::before,
.innocal *::after { box-sizing: border-box; }

/*
 * :where() hat Spezifitaet null. Ohne das schlaegt dieser Reset (0,1,1) die
 * Komponentenklassen (0,1,0) und loescht deren Hintergruende - genau der
 * Fehler, durch den die Terminkacheln unsichtbar blieben.
 */
.innocal :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: start;
  cursor: pointer;
}

.innocal :focus-visible {
  outline: 2px solid var(--ic-accent);
  outline-offset: 2px;
  border-radius: var(--ic-radius-sm);
}

.innocal .is-filtered { display: none; }

/* Während des Nachladens kurz abblenden, damit der Wechsel ruhig wirkt. */
.innocal.is-loading { opacity: .55; transition: opacity var(--ic-tr); }

.innocal__empty {
  margin: 0;
  padding: var(--ic-gap-lg) 0;
  color: var(--ic-muted);
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

.innocal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ic-gap);
  /* Keine Linie unter dem Titel: Die Ansicht bringt ihre eigene Oberkante mit. */
  margin-bottom: var(--ic-gap-lg);
}

.innocal__headmain,
.innocal__headtools {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}

.innocal__period {
  margin: 0;
  font-size: clamp(1.15rem, .85rem + 2cqi, 1.75rem);
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: 1.15;
  white-space: nowrap;
}

/* Vor / Heute / Zurück */
.innocal__steps {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
}

.innocal__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.9rem;
  min-width: 1.9rem;
  padding-inline: .35rem;
  color: var(--ic-muted);
  text-decoration: none;
  border-radius: var(--ic-radius-sm);
  transition: background-color var(--ic-tr), color var(--ic-tr);
}

.innocal__step:hover { background: var(--ic-sunken); color: var(--ic-ink); }

.innocal__step--today {
  padding-inline: .7rem;
  font-size: var(--ic-fs-meta);
  font-weight: 500;
  letter-spacing: .01em;
}

/* Monat / Woche / Tag / Jahr */
.innocal__modes {
  display: inline-flex;
  padding: 2px;
  background: var(--ic-sunken);
  border-radius: var(--ic-radius);
}

.innocal__mode {
  padding: .3rem .7rem;
  font-size: var(--ic-fs-meta);
  font-weight: 500;
  color: var(--ic-muted);
  text-decoration: none;
  border-radius: calc(var(--ic-radius) - 2px);
  transition: color var(--ic-tr), background-color var(--ic-tr);
}

.innocal__mode:hover { color: var(--ic-ink); }

.innocal__mode.is-active {
  background: var(--ic-surface);
  color: var(--ic-ink);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06);
}

.innocal__ics {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--ic-fs-meta);
  color: var(--ic-muted);
  text-decoration: none;
  padding: .3rem .5rem;
  border-radius: var(--ic-radius-sm);
  transition: color var(--ic-tr), background-color var(--ic-tr);
}

.innocal__ics:hover { color: var(--ic-ink); background: var(--ic-sunken); }

/* Monat, Woche, Tag direkt unter dem Titel: ohne Linie dazwischen. */
.innocal__head + .innocal__grid,
.innocal__head + .innocal__timegrid { border-top: 0; }

/* Die Liste behält ihre Linie über dem ersten Eintrag - auch ohne Filter. */
.innocal__head + .innocal__list {
  margin-top: 0;
  padding-top: 0;
}

/* ==========================================================================
   Kalenderfilter
   ========================================================================== */

.innocal__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: var(--ic-gap);
}

/* «Alle» und die Kalender als Knöpfe - gleiche Form, damit sie als Gruppe lesen. */
.innocal__chipall,
.innocal__chipfilter span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .8rem;
  border: 1px solid var(--ic-line-strong);
  border-radius: 999px;
  background: var(--ic-surface);
  color: var(--ic-muted);
  font-size: var(--ic-fs-meta);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: color var(--ic-tr), background-color var(--ic-tr), border-color var(--ic-tr);
}

.innocal__chipall:hover,
.innocal__chipfilter:hover span { color: var(--ic-ink); border-color: var(--ic-faint); }

/* Aktiv: «Alle» dunkel gefüllt, ein Kalender in seiner Farbe getönt. */
.innocal__chipall[aria-pressed="true"] {
  background: var(--ic-ink);
  border-color: var(--ic-ink);
  color: var(--ic-inverse);
}

.innocal__chipfilter {
  display: inline-flex;
  position: relative;
}

.innocal__chipfilter input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.innocal__chipfilter input:checked + span {
  background: color-mix(in srgb, var(--ic-dot) 14%, var(--ic-surface));
  border-color: var(--ic-dot);
  color: var(--ic-ink);
}

/*
 * Fokus nur für die Tastatur, und in der Pillenform: Die allgemeine Regel
 * `.innocal :focus-visible` setzt einen kleinen Radius und machte die Knöpfe
 * eckig. Nach Maus oder Finger (data-innocal-pointer, siehe innocal.js) gar
 * kein Rahmen - der gewählte Knopf ist ohnehin gefüllt.
 */
.innocal .innocal__chipall:focus-visible,
.innocal__chipfilter input:focus-visible + span {
  outline: 2px solid var(--ic-ink);
  outline-offset: 2px;
  border-radius: 999px;
}

.innocal[data-innocal-pointer] .innocal__chipall:focus-visible,
.innocal[data-innocal-pointer] .innocal__chipfilter input:focus-visible + span {
  outline: none;
}

/* ==========================================================================
   Monatsraster
   ========================================================================== */

.innocal__grid {
  border-top: 1px solid var(--ic-line-strong);
}

.innocal__weekdays,
.innocal__weeks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.innocal__weekdays span {
  padding: .5rem .35rem;
  text-align: center;
  font-size: var(--ic-fs-meta);
  font-weight: 500;
  color: var(--ic-faint);
  letter-spacing: .02em;
}

.innocal__cell {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  /* Ohne feste Vorgabe annähernd quadratisch: ein Siebtel der Breite,
     aber nie kleiner als 3rem und nie grösser als 8.5rem. */
  min-height: var(--ic-cell, clamp(3rem, 12cqi, 8.5rem));
  padding: .35rem .3rem .5rem;
  border-top: 1px solid var(--ic-line);
  border-inline-start: 1px solid var(--ic-line);
}

.innocal__cell:nth-child(7n + 1) { border-inline-start: 0; }
.innocal__cell.is-outside { background: var(--ic-sunken); }
.innocal__cell.is-outside .innocal__daynum { color: var(--ic-faint); }

.innocal__daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-inline-start: .1rem;
  font-size: var(--ic-fs-meta);
  font-weight: 500;
  color: var(--ic-muted);
  border-radius: 50%;
}

/* Heute: getönter Kreis statt vollem Farbfeld - erkennbar, aber ruhig. */
.innocal__cell.is-today .innocal__daynum {
  background: color-mix(in srgb, var(--ic-accent) 12%, transparent);
  color: var(--ic-accent);
  font-weight: 700;
}

.innocal__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* Die Kachel ist von Anfang an sichtbar, nicht erst beim Zeigen. */
.innocal__chipbtn {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  padding: .2rem .35rem .25rem;
  border-radius: var(--ic-radius-sm);
  border-inline-start: 2px solid var(--ic-dot);
  background: color-mix(in srgb, var(--ic-dot) 11%, var(--ic-surface));
  font-size: var(--ic-fs-meta);
  line-height: 1.3;
  transition: background-color var(--ic-tr);
}

.innocal__chipbtn:hover { background: color-mix(in srgb, var(--ic-dot) 20%, var(--ic-surface)); }

/*
 * Kurzinfo über dem Tag: Zeit, Titel, Ort, Kalender. Reines CSS, damit sie
 * sofort erscheint - der title-Tooltip des Browsers kommt erst nach einer
 * Sekunde. Am linken und rechten Rand bündig, damit sie nicht aus dem Bild ragt.
 */
.innocal__cell { position: relative; }

.innocal__chipbtn[data-tip]:is(:hover, :focus-visible)::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 20;
  bottom: calc(100% - .25rem);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(16rem, 80vw);
  padding: .45rem .6rem;
  border-radius: var(--ic-radius-sm);
  background: var(--ic-ink);
  color: var(--ic-inverse);
  font-size: var(--ic-fs-meta);
  font-weight: 400;
  line-height: 1.4;
  white-space: pre-line;
  text-align: start;
  box-shadow: var(--ic-lift);
  pointer-events: none;
}

.innocal__cell:nth-child(7n + 1) .innocal__chipbtn[data-tip]::after { left: 0; transform: none; }
.innocal__cell:nth-child(7n) .innocal__chipbtn[data-tip]::after { left: auto; right: 0; transform: none; }

.innocal__chiptime {
  color: color-mix(in srgb, var(--ic-dot) 65%, var(--ic-ink));
  font-size: .6875rem;
}

.innocal__chiptitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ic-ink);
  font-weight: 500;
}

/* In engen Zellen bleibt nur die Startzeit stehen. */
@container innocal (max-width: 56rem) {
  .innocal__chipto { display: none; }
}

.innocal__more {
  padding-inline-start: .95rem;
  font-size: var(--ic-fs-meta);
  color: var(--ic-faint);
}

/* ==========================================================================
   Zeitachse: Woche und Tag
   ========================================================================== */

.innocal__timegrid {
  --ic-axis: 3.5rem;
  border-top: 1px solid var(--ic-line-strong);
}

.innocal__tghead,
.innocal__tgallday,
.innocal__tgbody {
  display: grid;
  grid-template-columns: var(--ic-axis) repeat(7, minmax(0, 1fr));
}

.innocal__timegrid--day .innocal__tgallday,
.innocal__timegrid--day .innocal__tgbody {
  grid-template-columns: var(--ic-axis) minmax(0, 1fr);
}

.innocal__tgday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .5rem .25rem .6rem;
  border-inline-start: 1px solid var(--ic-line);
}

.innocal__tgdayname {
  font-size: var(--ic-fs-meta);
  color: var(--ic-faint);
}

.innocal__tgdaynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-size: .9375rem;
  font-weight: 600;
  border-radius: 50%;
}

.innocal__tgday.is-today .innocal__tgdaynum {
  background: color-mix(in srgb, var(--ic-accent) 12%, transparent);
  color: var(--ic-accent);
}

.innocal__tgallday {
  border-top: 1px solid var(--ic-line);
  border-bottom: 1px solid var(--ic-line-strong);
  min-height: 2rem;
}

.innocal__tglabel {
  align-self: center;
  padding-inline-end: .5rem;
  text-align: end;
  font-size: var(--ic-fs-meta);
  color: var(--ic-faint);
}

.innocal__tgalldaycell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: .25rem;
  border-inline-start: 1px solid var(--ic-line);
}

.innocal__allday {
  padding: .15rem .4rem;
  border-radius: var(--ic-radius-sm);
  font-size: var(--ic-fs-meta);
  line-height: 1.4;
  background: color-mix(in srgb, var(--ic-event-colour) 12%, transparent);
  color: var(--ic-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--ic-tr);
}

.innocal__allday:hover { background: color-mix(in srgb, var(--ic-event-colour) 20%, transparent); }

.innocal__tgaxis {
  display: grid;
  /* Schmaler = kürzere Stunden: zwischen 2.25rem und 3.25rem. */
  grid-template-rows: repeat(var(--ic-hours), var(--ic-hour, clamp(2.25rem, 4.5cqi, 3.25rem)));
}

.innocal__tghour {
  position: relative;
  top: -.45rem;
  padding-inline-end: .5rem;
  text-align: end;
  font-size: var(--ic-fs-meta);
  color: var(--ic-faint);
}

.innocal__tgcol {
  position: relative;
  display: grid;
  grid-template-rows: repeat(var(--ic-hours), var(--ic-hour, clamp(2.25rem, 4.5cqi, 3.25rem)));
  border-inline-start: 1px solid var(--ic-line);
}

.innocal__tgcol.is-today { background: color-mix(in srgb, var(--ic-accent) 2%, transparent); }

.innocal__tgslot { border-top: 1px solid var(--ic-line); }

.innocal__slotevent {
  position: absolute;
  top: var(--ic-top);
  height: var(--ic-height);
  inset-inline-start: calc(var(--ic-lane) / var(--ic-lanes) * 100% + 2px);
  width: calc(100% / var(--ic-lanes) - 4px);
  display: flex;
  flex-direction: column;
  gap: .05rem;
  overflow: hidden;
  padding: .2rem .4rem;
  border-radius: var(--ic-radius-sm);
  border-inline-start: 3px solid var(--ic-event-colour);
  background: color-mix(in srgb, var(--ic-event-colour) 13%, var(--ic-surface));
  font-size: var(--ic-fs-meta);
  line-height: 1.3;
  transition: box-shadow var(--ic-tr);
}

.innocal__slotevent:hover {
  box-shadow: var(--ic-lift);
  background: color-mix(in srgb, var(--ic-event-colour) 19%, var(--ic-surface));
}

.innocal__slottime { color: color-mix(in srgb, var(--ic-event-colour) 70%, var(--ic-ink)); }

.innocal__slottitle {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.innocal__slotmeta { color: var(--ic-muted); }

/* ==========================================================================
   Jahresübersicht
   ========================================================================== */

.innocal__year {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--ic-gap-lg) var(--ic-gap);
}

.innocal__minititle {
  margin: 0 0 .5rem;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

.innocal__minidays,
.innocal__minigrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}

.innocal__minidays span {
  text-align: center;
  font-size: .6875rem;
  color: var(--ic-faint);
  padding-bottom: .2rem;
}

.innocal__minicell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: .6875rem;
  color: var(--ic-muted);
  text-decoration: none;
  border-radius: 50%;
}

.innocal__minicell.is-outside { visibility: hidden; }

.innocal__minicell.has-events {
  background: color-mix(in srgb, var(--ic-accent) 12%, transparent);
  color: var(--ic-ink);
  font-weight: 600;
}

.innocal__minicell.has-events:hover { background: color-mix(in srgb, var(--ic-accent) 22%, transparent); }

.innocal__minicell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--ic-accent);
  color: var(--ic-accent);
  font-weight: 700;
}

/* ==========================================================================
   Tagesliste
   ========================================================================== */

.innocal__list {
  margin-top: var(--ic-gap-lg);
  padding-top: var(--ic-gap);
  border-top: 1px solid var(--ic-line-strong);
}

/*
 * Eigenständige Liste (Ansicht «Liste», Menüeintrag «Terminliste»): Die
 * erste Tageszeile schliesst direkt an die Linie an. Ihr eigener Abstand
 * genügt - sonst stünde beim Hover ein weisser Streifen über der Fläche.
 */
.innocal__list--standalone { padding-top: 0; }
.innocal--agenda .innocal__head { margin-bottom: var(--ic-gap); }
.innocal--agenda .innocal__day:first-of-type { border-top: 1px solid var(--ic-line-strong); }

.innocal__listhead {
  margin: 0 0 var(--ic-gap);
  font-size: var(--ic-fs-meta);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ic-faint);
}

.innocal__day {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--ic-gap);
  padding: .85rem 0;
  border-top: 1px solid var(--ic-line);
  /* Bezugsrahmen für die Hover-Fläche des Termins (siehe .innocal__eventbtn::before). */
  position: relative;
  isolation: isolate;
}

/* Oben kein Abstand wegnehmen: die Hover-Fläche soll bis zur Linie darüber reichen. */
.innocal__day:first-of-type { border-top: 0; }

.innocal__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding-top: .15rem;
}

.innocal__weekday {
  font-size: var(--ic-fs-meta);
  color: var(--ic-faint);
}

.innocal__railnum {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.innocal__day.is-today .innocal__railnum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: .1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ic-accent) 12%, transparent);
  color: var(--ic-accent);
  font-size: 1rem;
}

.innocal__events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.innocal__event + .innocal__event { border-top: 1px solid var(--ic-line); }

.innocal__eventbtn {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--ic-gap);
  width: 100%;
  padding: .5rem .5rem .5rem 0;
  border-radius: var(--ic-radius-sm);
  transition: background-color var(--ic-tr);
}

/*
 * Hover: die ganze Tageszeile in der Farbe des Termins - von Linie zu Linie
 * und über die volle Breite samt Datum. Die Fläche hängt am Knopf (seine
 * Farbe), liegt aber absolut über .innocal__day und hinter dem Inhalt.
 */
.innocal__eventbtn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ic-event-colour) 10%, var(--ic-surface));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ic-tr);
}

.innocal__eventbtn:is(:hover, :focus-visible)::before { opacity: 1; }
.innocal__eventbtn:hover { background: none; }

.innocal__time {
  padding-top: .1rem;
  font-size: var(--ic-fs-meta);
  color: var(--ic-muted);
}

.innocal__body { min-width: 0; display: block; }

.innocal__title {
  display: block;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.011em;
  line-height: 1.35;
}

.innocal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem .7rem;
  margin-top: .1rem;
  font-size: var(--ic-fs-meta);
  color: var(--ic-muted);
}

.innocal__calname {
  display: block;
  margin-bottom: .1rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
}

/* ==========================================================================
   Dialog
   ========================================================================== */

.innocal__dialog {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-lg, .75rem);
  background: var(--ic-surface);
  color: var(--ic-ink);
  box-shadow: 0 1px 3px rgb(0 0 0 / .08), 0 24px 60px rgb(0 0 0 / .18);
}

.innocal__dialog::backdrop {
  background: rgb(0 0 0 / .35);
  backdrop-filter: blur(2px);
}

.innocal__dialogclose {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  color: var(--ic-muted);
  transition: background-color var(--ic-tr), color var(--ic-tr);
}

.innocal__dialogclose:hover { background: var(--ic-sunken); color: var(--ic-ink); }

.innocal__dialogbody { padding: 1.6rem 1.6rem 1.4rem; }

.innocal__dialoghead { min-height: 1rem; }

.innocal__dialogcal {
  font-size: var(--ic-fs-meta);
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
}

.innocal__dialogtitle {
  margin: .35rem 0 .2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: 1.25;
  padding-inline-end: 1.5rem;
}

.innocal__dialogwhen {
  margin: 0;
  font-size: var(--ic-fs-body);
  color: var(--ic-muted);
}

.innocal__dialogfacts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem .9rem;
  margin: 1rem 0 0;
  font-size: var(--ic-fs-body);
}

.innocal__dialogfacts dt { color: var(--ic-faint); }
.innocal__dialogfacts dd { margin: 0; }

.innocal__dialogtext {
  margin: 1rem 0 0;
  color: var(--ic-muted);
  line-height: 1.6;
}

.innocal__dialogactions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
}

.innocal__btn {
  display: inline-flex;
  align-items: center;
  padding: .45rem .9rem;
  border-radius: var(--ic-radius);
  font-size: var(--ic-fs-body);
  font-weight: 500;
  text-decoration: none;
  color: var(--ic-ink);
  background: var(--ic-sunken);
  transition: background-color var(--ic-tr), opacity var(--ic-tr);
}

.innocal__btn:hover { background: var(--ic-line); }

/*
 * Die Linkfarbe des Themes (a:hover) schlägt eine einfache Klasse - dann
 * wurde der Knopftext beim Darüberfahren blau. Doppelte Klasse genügt.
 */
.innocal .innocal__btn:hover,
.innocal .innocal__btn:focus-visible {
  color: var(--ic-ink);
  text-decoration: none;
}

.innocal .innocal__btn--primary:hover,
.innocal .innocal__btn--primary:focus-visible { color: var(--ic-inverse); }

.innocal__btn--primary {
  background: var(--ic-accent);
  color: var(--ic-inverse);
}

.innocal__btn--primary:hover { background: var(--ic-accent); opacity: .88; }

/* ==========================================================================
   Einzelner Termin
   ========================================================================== */

.innocal-event { color: var(--ic-ink); }

.innocal-event__back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .35rem;
  margin-bottom: var(--ic-gap);
  font-size: var(--ic-fs-meta);
  color: var(--ic-muted);
  text-decoration: none;
}

.innocal-event__back:hover { color: var(--ic-ink); }

.innocal-event__cal {
  display: block;
  font-size: var(--ic-fs-meta);
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
}

.innocal-event__title {
  margin: .4rem 0 .3rem;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.innocal-event__when {
  margin: 0 0 var(--ic-gap-lg);
  font-size: 1.0625rem;
  color: var(--ic-muted);
}

.innocal-event__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-lg, .75rem);
  margin-bottom: var(--ic-gap-lg);
}

.innocal-event__facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1.25rem;
  margin: 0 0 var(--ic-gap-lg);
  padding: var(--ic-gap) 0;
  border-block: 1px solid var(--ic-line);
  font-size: var(--ic-fs-body);
}

.innocal-event__facts dt { color: var(--ic-faint); }
.innocal-event__facts dd { margin: 0; }

.innocal-event__text { line-height: 1.7; }
.innocal-event__text > :last-child { margin-bottom: 0; }

.innocal-event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--ic-gap-lg);
}

/* ==========================================================================
   Element «Termin» (YOOtheme, InnoApps)
   Umstylen über Variablen, z. B.:
     .innocal-detail { --ic-detail-label: 10rem; --ic-fs-detail: 1.0625rem; }
   ========================================================================== */

.innocal-detail {
  --ic-detail-label: 8rem;
  font-size: var(--ic-fs-detail, 1rem);
  color: var(--ic-ink);
}

.innocal-detail--card,
.innocal-detail--tinted {
  padding: var(--ic-gap-lg);
  border-radius: var(--border-radius-lg, .75rem);
}

.innocal-detail--card {
  border: 1px solid var(--ic-line);
  background: var(--ic-surface);
}

.innocal-detail--tinted {
  border-inline-start: 3px solid var(--ic-event-colour);
  background: color-mix(in srgb, var(--ic-event-colour) 6%, var(--ic-surface));
}

.innocal-detail__empty {
  margin: 0;
  padding: var(--ic-gap);
  border: 1px dashed var(--ic-line-strong);
  border-radius: var(--ic-radius);
  color: var(--ic-muted);
  font-size: var(--ic-fs-body);
}

/* Kopf: Datumskachel links, daneben Kalender, Titel, Zeit */
.innocal-detail__head {
  display: flex;
  align-items: center;
  gap: var(--ic-gap);
  margin-bottom: var(--ic-gap-lg);
}

.innocal-detail__badge {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  width: 4rem;
  padding: .45rem 0 .5rem;
  /* Rahmen in der Kalenderfarbe - wie ein Kalendersymbol. */
  border: 1px solid var(--ic-event-colour);
  border-radius: var(--ic-radius);
  line-height: 1;
}

.innocal-detail__badgeday,
.innocal-detail__badgemonth {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
}

.innocal-detail__badgenum {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -.03em;
}

.innocal-detail__headtext { min-width: 0; }

.innocal-detail__cal {
  display: block;
  margin-bottom: .2rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
}

.innocal-detail__title {
  margin: 0 0 .25rem;
  font-size: clamp(1.35rem, 1rem + 2cqi, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.innocal-detail__when {
  margin: 0;
  font-size: 1.0625em;
  color: var(--ic-muted);
}

.innocal-detail__series {
  display: inline-block;
  margin-inline-start: .5rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ic-event-colour) 12%, var(--ic-surface));
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: .15em;
}

.innocal-detail__image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: var(--ic-gap-lg);
  border-radius: var(--border-radius-lg, .75rem);
}

/* Angaben: Beschriftung links, Wert rechts, Haarlinien dazwischen */
.innocal-detail__facts {
  margin: 0 0 var(--ic-gap-lg);
}

.innocal-detail__fact {
  display: grid;
  grid-template-columns: var(--ic-detail-label) minmax(0, 1fr);
  gap: var(--ic-gap);
  padding: .35rem 0;
}

.innocal-detail__fact dt {
  padding-top: .2em;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ic-faint);
}

.innocal-detail__fact dd { margin: 0; }

.innocal-detail__fact a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ic-event-colour) 45%, transparent);
  text-underline-offset: .2em;
  transition: color var(--ic-tr);
}

.innocal-detail__fact a:hover { color: var(--ic-event-colour); }

.innocal-detail__text { line-height: 1.7; }
.innocal-detail__text > :first-child { margin-top: 0; }
.innocal-detail__text > :last-child { margin-bottom: 0; }

.innocal-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: var(--ic-gap-lg);
}

/* Knopf in der Kalenderfarbe (Stil «Kalenderfarbe» im Element) */
.innocal .innocal__btn--calendar {
  background: var(--ic-event-colour);
  color: var(--ic-inverse);
}

.innocal .innocal__btn--calendar:hover,
.innocal .innocal__btn--calendar:focus-visible {
  background: color-mix(in srgb, var(--ic-event-colour) 85%, #000);
  color: var(--ic-inverse);
}

.innocal .innocal__btn--small { padding: .3rem .7rem; font-size: var(--ic-fs-meta); }
.innocal .innocal__btn--large { padding: .65rem 1.25rem; font-size: 1.0625rem; }

.innocal-detail__back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: .35rem;
  margin-top: var(--ic-gap-lg);
  font-size: var(--ic-fs-body);
  color: var(--ic-muted);
  text-decoration: none;
  transition: color var(--ic-tr);
}

.innocal-detail__back:hover { color: var(--ic-ink); }

/* Schmale Spalte: Beschriftung über dem Wert */
@container innocal (max-width: 30rem) {
  .innocal-detail__fact { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .innocal-detail__badge { width: 3.25rem; }
  .innocal-detail__badgenum { font-size: 1.4rem; }
}

/* ==========================================================================
   YOOtheme-Builder-Elemente
   ========================================================================== */

.innocal--yoo .innocal__events { gap: 0; }

.innocal--yoo .innocal__eventbtn {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--ic-gap);
  align-items: start;
  width: 100%;
  padding: .75rem .5rem .75rem 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--ic-radius-sm);
  transition: background-color var(--ic-tr);
}

.innocal--yoo .innocal__eventbtn:hover { background: none; }

.innocal--yoo .innocal__event + .innocal__event { border-top: 1px solid var(--ic-line); }

.innocal__datebadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .05rem;
  padding: .3rem 0 .35rem;
  border-radius: var(--ic-radius-sm);
  background: color-mix(in srgb, var(--ic-event-colour) 10%, transparent);
  line-height: 1;
}

.innocal__badgemonth {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--ic-event-colour) 75%, var(--ic-ink));
}

.innocal__badgeday {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.innocal__time--inline {
  display: block;
  padding-top: 0;
  margin-top: .1rem;
}

.innocal--yoo .innocal__desc {
  display: block;
  margin-top: .3rem;
  font-size: var(--ic-fs-meta);
  color: var(--ic-muted);
}

/* Kachel-Variante des Elements */
.innocal--cards.innocal--yoo .innocal__events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--ic-gap);
}

.innocal--cards.innocal--yoo .innocal__event { border: 0; }
.innocal--cards.innocal--yoo .innocal__event + .innocal__event { border-top: 0; }

.innocal--cards.innocal--yoo .innocal__eventbtn {
  padding: var(--ic-gap);
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  height: 100%;
}

.innocal--cards .innocal__eventbtn::before { display: none; }

.innocal--cards.innocal--yoo .innocal__eventbtn:hover {
  background: var(--ic-surface);
  box-shadow: var(--ic-lift);
}

/* ==========================================================================
   Schmale Kalender - nach eigener Breite, nicht nach Bildschirmbreite
   ========================================================================== */

/* Woche/Tag: die Ersatzliste erscheint nur in schmalen Spalten. */
.innocal__narrow { display: none; }
.innocal__narrow .innocal__list { margin-top: 0; border-top: 0; }


@container innocal (max-width: 36rem) {
  .innocal__timegrid { display: none; }
  .innocal__narrow { display: block; }

  /* Das Monatsraster wird zur Balkenübersicht, lesbar bleibt die Tagesliste. */
  .innocal__cell { min-height: var(--ic-cell, 2.9rem); }

  .innocal__head { flex-direction: column; align-items: stretch; gap: .75rem; }
  .innocal__headmain { justify-content: space-between; }
  .innocal__period { font-size: 1.25rem; }

  /* Umschalter darf scrollen, der Abo-Link bleibt daneben stehen. */
  .innocal__headtools {
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
  }

  .innocal__modes {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .innocal__modes::-webkit-scrollbar { display: none; }
  .innocal__mode { white-space: nowrap; padding-inline: .55rem; }
  .innocal__ics { flex: none; padding-inline: .35rem; }
  .innocal__ics span { display: none; }

  .innocal__cell { align-items: center; padding: .3rem .1rem; }
  .innocal__daynum { margin-inline-start: 0; }
  .innocal__chiptime,
  .innocal__chiptitle,
  .innocal__more { display: none; }

  /* In schmalen Spalten wird jeder Termin zum Balken über die Zellbreite. */
  .innocal__chips { align-self: stretch; gap: 2px; }

  .innocal__chipbtn {
    height: .375rem;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--ic-dot);
  }

  .innocal__chipbtn:hover { background: var(--ic-dot); }

  .innocal__day { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .innocal__eventbtn { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .innocal__year { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

/*
 * Dieselben Regeln, wenn «Darstellung: Kompakt» gewählt ist - unabhängig von
 * der Breite. Bei Änderungen oben bitte hier nachziehen.
 */
  /* Das Monatsraster wird zur Balkenübersicht, lesbar bleibt die Tagesliste. */
  .innocal--density-compact .innocal__cell { min-height: var(--ic-cell, 2.9rem); }

  .innocal--density-compact .innocal__head { flex-direction: column; align-items: stretch; gap: .75rem; }
  .innocal--density-compact .innocal__headmain { justify-content: space-between; }
  .innocal--density-compact .innocal__period { font-size: 1.25rem; }

  /* Umschalter darf scrollen, der Abo-Link bleibt daneben stehen. */
  .innocal--density-compact .innocal__headtools {
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
  }

  .innocal--density-compact .innocal__modes {
    flex: 0 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .innocal--density-compact .innocal__modes::-webkit-scrollbar { display: none; }
  .innocal--density-compact .innocal__mode { white-space: nowrap; padding-inline: .55rem; }
  .innocal--density-compact .innocal__ics { flex: none; padding-inline: .35rem; }
  .innocal--density-compact .innocal__ics span { display: none; }

  .innocal--density-compact .innocal__cell { align-items: center; padding: .3rem .1rem; }
  .innocal--density-compact .innocal__daynum { margin-inline-start: 0; }
  .innocal--density-compact .innocal__chiptime,
  .innocal--density-compact .innocal__chiptitle,
  .innocal--density-compact .innocal__more { display: none; }

  /* In schmalen Spalten wird jeder Termin zum Balken über die Zellbreite. */
  .innocal--density-compact .innocal__chips { align-self: stretch; gap: 2px; }

  .innocal--density-compact .innocal__chipbtn {
    height: .375rem;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--ic-dot);
  }

  .innocal--density-compact .innocal__chipbtn:hover { background: var(--ic-dot); }

  .innocal--density-compact .innocal__day { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .innocal--density-compact .innocal__eventbtn { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .innocal--density-compact .innocal__year { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

.innocal--density-compact .innocal__timegrid { display: none; }
.innocal--density-compact .innocal__narrow { display: block; }

@media (prefers-reduced-motion: reduce) {
  .innocal * { transition: none; }
}

/* Jahresansicht: Ein Tag, dessen Kalender alle abgewählt sind, verliert seine
   Hervorhebung - er verschwindet aber nicht, sonst hätte der Monat Lücken. */
.innocal .innocal__minicell.is-filtered {
    background: none;
    color: var(--ic-text-muted);
    font-weight: inherit;
    pointer-events: none;
}