/* ==========================================================================
   Kalender Events – Ergänzungen zum Entwurfspaket
   ==========================================================================

   `lsec-events.css` bleibt bewusst unangetastet, damit eine neue Fassung aus
   dem Entwurf sie jederzeit ersetzen kann. Was hier steht, ergänzt sie und
   wird danach geladen.
   ========================================================================== */


/* 0 · Panzerung gegen Theme-CSS ===========================================

   Der Entwurf schreibt alle Regeln mit `:where()`, also mit Spezifität 0.
   Das ist als Einladung gemeint: Wer eigenes CSS schreibt, soll ohne
   `!important` überschreiben können.

   In einem echten Theme kehrt sich das um. `dd { margin: 0 1.5em 1.5em }`
   hat Spezifität 0-0-1 und schlägt damit

       :where(.lsec) :where(… dd) { margin: 0 }        ← 0-0-0

   Dasselbe gilt für `p`, `ul`, `li` und vor allem für die Größen von h1–h6.
   Genau daher kamen die zu großen Abstände und die riesigen
   Abschnittsüberschriften: Nicht der Entwurf war schuld, sondern das Theme,
   das durch den Reset hindurchschlug.

   Deshalb hier dieselben Regeln noch einmal – mit `.lsec.lsec` als Anker.
   Der doppelte Klassenname bringt Spezifität 0-2-0 und schlägt damit auch
   `.entry-content p` (0-1-1), wie es viele Themes schreiben. Für eigenes CSS
   reicht weiterhin eine Klasse plus Element.

   WARTUNG: Kommt eine neue Fassung von `lsec-events.css`, ist dieser
   Abschnitt der einzige, der mitgeprüft werden muss.                        */

/*
 * Aussenabstand: für alle. Das ist ungefährlich, der Entwurf setzt Abstände
 * ausschliesslich über Raster-Lücken.
 */
.lsec.lsec :where(p, h1, h2, h3, h4, h5, h6,
                  figure, figcaption, blockquote, pre,
                  dl, dt, dd, fieldset, legend, address,
                  table, form, hr) {
  margin: 0;
}

/*
 * Innenabstand NUR dort, wo Themes wirklich welchen setzen. `form` gehört
 * ausdrücklich NICHT dazu: `.lsec-form` bringt sein eigenes Polster mit, und
 * ein pauschales `padding: 0` hätte es erschlagen – das Formular klebte dann
 * am Rahmen.
 */
.lsec.lsec :where(blockquote, fieldset, legend, dl, dd, figure) { padding: 0; }

.lsec.lsec :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.lsec.lsec :where(li) { margin: 0; padding: 0; }
.lsec.lsec :where(img, svg) { max-width: 100%; height: auto; display: block; }

/* Überschriften erben Schrift und Größe – die Größe setzen die Klassen
   darunter. Ohne diese Zeile bestimmt das Theme, wie groß „ECKDATEN" ist. */
.lsec.lsec :where(h1, h2, h3, h4, h5, h6) {
  font: inherit;
  color: inherit;
}

/* … und jetzt die Größen aus dem Entwurf zurück, mit genug Gewicht.
   Die Werte stammen aus denselben Tokens wie dort – ändert der Entwurf ein
   Token, ändert sich beides mit. */
.lsec.lsec :where(.lsec-event__title) {
  font-size: var(--lsec-fs-lg);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.011em;
  text-wrap: balance;
}
.lsec.lsec :where(.lsec-list-item) :where(.lsec-event__title) { font-size: var(--lsec-fs-xl); }
.lsec.lsec :where(.lsec-card) :where(.lsec-event__title) { font-size: var(--lsec-fs-md); }

.lsec.lsec :where(.lsec-detail__title) {
  font-size: 2.125em;
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.028em;
  text-wrap: balance;
  max-width: 22ch;
}
.lsec.lsec :where(.lsec-detail__subtitle),
.lsec.lsec :where(.lsec-summary__title),
.lsec.lsec :where(.lsec-monthset__label),
.lsec.lsec :where(.lsec-widget__title) {
  font-size: var(--lsec-fs-xs);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lsec-muted);
}
.lsec.lsec :where(.lsec-form__title),
.lsec.lsec :where(.lsec-success__title),
.lsec.lsec :where(.lsec-series__title) {
  font-size: var(--lsec-fs-2xl);
  font-weight: 650;
  letter-spacing: -.018em;
  line-height: 1.2;
  text-wrap: balance;
}
.lsec.lsec :where(.lsec-year__title) { font-size: var(--lsec-fs-2xl); font-weight: 650; letter-spacing: -.02em; }
.lsec.lsec :where(.lsec-month__title) { font-size: var(--lsec-fs-lg); font-weight: 650; letter-spacing: -.01em; }
.lsec.lsec :where(.lsec-prose) :where(h3, h4) {
  font-size: var(--lsec-fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  margin-block-start: var(--lsec-2);
}

/*
 * Das Formular selbst. Ohne diese Zeilen bestimmt das Theme Rahmen, Rundung
 * und Polster – und das Ergebnis hat mit dem Entwurf nichts mehr zu tun.
 */
.lsec.lsec :where(.lsec-form) {
  display: grid;
  gap: var(--lsec-7);
  max-width: 44rem;
  padding: clamp(var(--lsec-6), 4cqi, var(--lsec-8));
  border: var(--lsec-hairline) solid var(--lsec-line);
  border-radius: var(--lsec-radius);
}
.lsec.lsec :where(.lsec-form--plain) { border: 0; padding: 0; }
.lsec.lsec :where(.lsec-form--wide) { max-width: none; }

.lsec.lsec :where(.lsec-fieldset) { display: grid; gap: var(--lsec-6); border: 0; min-width: 0; }
.lsec.lsec :where(.lsec-fieldset) + :where(.lsec-fieldset) {
  padding-block-start: var(--lsec-7);
  border-block-start: var(--lsec-hairline) solid var(--lsec-line);
}
.lsec.lsec :where(.lsec-form__head) { display: grid; gap: var(--lsec-3); }
.lsec.lsec :where(.lsec-form__actions) {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--lsec-4) var(--lsec-5);
}
.lsec.lsec :where(.lsec-field) { display: grid; gap: var(--lsec-2); min-width: 0; }
.lsec.lsec :where(.lsec-form__row) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lsec-4) var(--lsec-5);
}
.lsec.lsec :where(.lsec-form__row--auto) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.lsec.lsec :where(.lsec-checks) { display: grid; gap: var(--lsec-4); }
.lsec.lsec :where(.lsec-check) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lsec-3) var(--lsec-4);
  font-size: var(--lsec-fs-base);
  line-height: 1.5;
  cursor: pointer;
}
.lsec.lsec :where(.lsec-check--box) {
  padding: var(--lsec-4) var(--lsec-5);
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
}
.lsec.lsec :where(.lsec-check--box:has(input:checked)) {
  border-color: var(--lsec-accent);
  background: color-mix(in oklab, var(--lsec-accent) 7%, transparent);
}
.lsec.lsec :where(.lsec-check__title) { font-weight: 550; }
.lsec.lsec :where(.lsec-check__hint) {
  display: block;
  font-size: var(--lsec-fs-sm);
  line-height: 1.45;
  color: var(--lsec-muted);
  font-weight: 400;
}
.lsec.lsec :where(.lsec-tiers) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--lsec-3);
}
.lsec.lsec :where(.lsec-tier) {
  position: relative;
  display: grid;
  gap: .15rem;
  align-content: start;
  padding: var(--lsec-4) var(--lsec-5);
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
  cursor: pointer;
}
.lsec.lsec :where(.lsec-tier:has(input:checked)) {
  border-color: var(--lsec-accent);
  background: color-mix(in oklab, var(--lsec-accent) 7%, transparent);
}
.lsec.lsec :where(.lsec-tier) > :where(input) {
  position: absolute;
  inset-block-start: var(--lsec-4);
  inset-inline-end: var(--lsec-4);
}
.lsec.lsec :where(.lsec-tier__name) {
  font-size: var(--lsec-fs-xs); font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lsec-muted);
  padding-inline-end: 1.8em;
}
.lsec.lsec :where(.lsec-tier__amount) {
  font-size: var(--lsec-fs-2xl); font-weight: 650; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
/*
 * Betragsfeld: schmal, und zwar verbindlich.
 *
 * In lsec-events.css stehen dieselben Regeln – aber vollständig in :where()
 * gefasst und damit ohne jede Spezifität. Ein Theme mit `input { width: 100% }`
 * (0-0-1) gewinnt dagegen mühelos, und das Feld für einen Betrag lief über die
 * ganze Formularbreite. Hier mit `.lsec.lsec` davor (0-2-0) gewinnt es nicht
 * mehr.
 *
 * Breite in `ch`: Die Einheit ist die Breite einer Ziffer, und mehr als
 * Ziffern und ein Komma steht da nie. 9ch fasst „1000,00" mit Luft.
 */
/*
 * Schieberegler und Betragsfeld in einer Zeile – ebenfalls verbindlich.
 *
 * Dieselbe Falle wie bei der Eingabegruppe darunter: In lsec-events.css
 * stehen diese Regeln vollständig in :where() und damit ohne Spezifität. Ein
 * Theme, das `display` oder `width` an Formularelementen setzt, gewinnt – und
 * dann steht der Regler über dem Feld statt daneben.
 */
.lsec.lsec :where(.lsec-amount) {
  display: grid;
  gap: var(--lsec-3);
  max-inline-size: 32rem;
}
.lsec.lsec :where(.lsec-amount__row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lsec-4) var(--lsec-5);
}
.lsec.lsec :where(.lsec-range) {
  flex: 1 1 12rem;
  min-inline-size: 10rem;
  inline-size: auto;
  accent-color: var(--lsec-accent);
  cursor: pointer;
}

.lsec.lsec :where(.lsec-inputgroup) {
  display: inline-flex;
  align-items: stretch;
  inline-size: fit-content;
  max-inline-size: 100%;
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
  overflow: hidden;
}
.lsec.lsec :where(.lsec-inputgroup:focus-within) {
  border-color: var(--lsec-accent);
}
.lsec.lsec :where(.lsec-inputgroup) > :where(input) {
  inline-size: 9ch;
  min-inline-size: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  text-align: end;
  font: inherit;
  font-size: 1em;
  color: inherit;
  background: transparent;
  padding: .65em .8em;
  font-variant-numeric: tabular-nums;
}
.lsec.lsec :where(.lsec-inputgroup__suffix) {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding-inline: .8em;
  background: var(--lsec-soft);
  border-inline-start: var(--lsec-hairline) solid var(--lsec-line);
}

.lsec.lsec :where(.lsec-tier__desc) {
  font-size: var(--lsec-fs-sm); line-height: 1.45; color: var(--lsec-muted);
}
.lsec.lsec :where(.lsec-label) { font-size: var(--lsec-fs-md); font-weight: 600; line-height: 1.35; }
.lsec.lsec :where(.lsec-sublabel) { font-size: var(--lsec-fs-sm); color: var(--lsec-muted); }
.lsec.lsec :where(.lsec-hint) { font-size: var(--lsec-fs-sm); line-height: 1.5; color: var(--lsec-muted); }
.lsec.lsec :where(.lsec-notice) {
  padding: var(--lsec-4) var(--lsec-5);
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
  font-size: var(--lsec-fs-base);
  line-height: 1.55;
  background: var(--lsec-soft);
}
.lsec.lsec :where(.lsec-notice--quiet) { background: transparent; border-style: dashed; color: var(--lsec-muted); }
.lsec.lsec :where(.lsec-summary) {
  display: grid; gap: var(--lsec-2);
  padding: var(--lsec-5);
  border: var(--lsec-hairline) solid var(--lsec-line);
  border-radius: var(--lsec-radius-sm);
  background: var(--lsec-softer);
  font-size: var(--lsec-fs-base);
}
.lsec.lsec :where(.lsec-summary__row) { display: flex; justify-content: space-between; gap: var(--lsec-5); }
.lsec.lsec :where(.lsec-summary__total) {
  font-weight: 650;
  padding-block-start: var(--lsec-3);
  margin-block-start: var(--lsec-1);
  border-block-start: var(--lsec-hairline) solid var(--lsec-line);
}
.lsec.lsec :where(.lsec-summary__note) { font-size: var(--lsec-fs-sm); color: var(--lsec-muted); }


/* Auswahlfelder: eigene Gestaltung statt der des Browsers ==================

   Themes setzen `input` fast immer eigene Rahmen und Polster – daraus werden
   verzerrte Kreise und Kästchen. Mit `appearance: none` gehört die Darstellung
   wieder uns; Marke und Fläche kommen aus der Akzentfarbe.

   Die Größe steht in `em`, damit sie der Schrift folgt: In einem Theme mit
   großer Grundschrift wächst die Box mit.                                  */

.lsec.lsec :where(input[type="radio"], input[type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  /*
   * Ohne diese Zeile behält das Feld die Standardgröße des Browsers, und
   * `1.15em` rechnet gegen eine andere Basis als die Textzeile daneben. Das
   * Feld saß dadurch knapp zwei Pixel zu tief – sichtbar als „leicht
   * erhöht". Mit `inherit` beziehen sich beide auf dieselbe Größe, und der
   * Ausgleich in Abschnitt 14.6 geht genau auf.
   */
  font-size: inherit;
  display: inline-grid;
  place-content: center;
  inline-size: 1.15em;
  block-size: 1.15em;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--lsec-line-heavy);
  background: Canvas;
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--lsec-fast) var(--lsec-ease),
              border-color var(--lsec-fast) var(--lsec-ease);
}
.lsec.lsec :where(input[type="radio"]) { border-radius: 50%; }
.lsec.lsec :where(input[type="checkbox"]) { border-radius: .28em; }

.lsec.lsec :where(input[type="radio"], input[type="checkbox"])::before {
  content: "";
  transform: scale(0);
  transition: transform var(--lsec-fast) var(--lsec-ease);
  background: var(--lsec-accent-text);
}
.lsec.lsec :where(input[type="radio"])::before {
  inline-size: .5em; block-size: .5em; border-radius: 50%;
}
.lsec.lsec :where(input[type="checkbox"])::before {
  inline-size: .7em; block-size: .7em;
  /* Häkchen als Form, nicht als Zeichen – so bleibt es in jeder Schrift gleich. */
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.lsec.lsec :where(input[type="radio"]:checked, input[type="checkbox"]:checked) {
  background: var(--lsec-accent);
  border-color: var(--lsec-accent);
}
.lsec.lsec :where(input[type="radio"]:checked, input[type="checkbox"]:checked)::before {
  transform: scale(1);
}
.lsec.lsec :where(input[type="radio"]:hover, input[type="checkbox"]:hover) {
  border-color: var(--lsec-accent);
}
.lsec.lsec :where(input[type="radio"]:disabled, input[type="checkbox"]:disabled) {
  opacity: .45;
  cursor: default;
}

/* Formularelemente: Themes setzen fast immer eigene Rahmen und Innenabstände. */
.lsec.lsec :where(.lsec-input, .lsec-textarea, .lsec-select) {
  inline-size: 100%;
  min-block-size: var(--lsec-tap);
  font: inherit;
  font-size: 1em;
  line-height: 1.4;
  color: inherit;
  background: transparent;
  padding: .65em .8em;
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
  box-shadow: none;
}
.lsec.lsec :where(.lsec-textarea) { min-block-size: 7.5em; }

/* Knöpfe und knopfartige Links. */
.lsec.lsec :where(.lsec-btn) {
  min-block-size: var(--lsec-tap);
  padding: var(--_py, .68em) var(--_px, 1.05em);
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
  font: inherit;
  font-size: var(--lsec-fs-md);
  font-weight: 550;
  line-height: 1.2;
  color: inherit;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}
.lsec.lsec :where(.lsec-btn--primary) {
  background: var(--lsec-accent);
  border-color: transparent;
  color: var(--lsec-accent-text);
}
.lsec.lsec :where(.lsec-btn--quiet) { border-color: transparent; background: transparent; }

/* Die Eckdaten sind eine Definitionsliste – der Fall aus der Rückmeldung. */
.lsec.lsec :where(.lsec-kv__key) { color: var(--lsec-muted); }
.lsec.lsec :where(.lsec-kv__val) { font-variant-numeric: tabular-nums; }


/* 1 · Statusfarben =========================================================

   Der Entwurf kommt bewusst ohne Farbe aus und zeigt den Zustand über die
   Form. Auf Wunsch kommt Farbe dazu – aber als Ergänzung, nicht als Ersatz:
   Die Punkte und die durchgestrichene Fläche bleiben, damit der Zustand auch
   bei Farbenblindheit und im Ausdruck lesbar ist.

   Dieselben vier Farbtöne gelten im Backend (siehe admin.css).             */

.lsec {
  /* hell */
  --lsce-open-ink:       #1c6b3f;
  --lsce-open-bg:        #e3f3e9;
  --lsce-almost-ink:     #7a5200;
  --lsce-almost-bg:      #fbf0d3;
  --lsce-soldout-ink:    #a33b3b;
  --lsce-soldout-bg:     #fae7e7;
  --lsce-cancelled-ink:  #7d1d1d;
  --lsce-cancelled-bg:   #f3d9d9;
}

/* Dunkler Untergrund: hellere Schrift, Fläche aus derselben Farbe gemischt. */
@media (prefers-color-scheme: dark) {
  .lsec:not(.lsec--on-light) {
    --lsce-open-ink:      #8fd8ac;
    --lsce-almost-ink:    #edc978;
    --lsce-soldout-ink:   #f0a8a8;
    --lsce-cancelled-ink: #e88f8f;

    --lsce-open-bg:       color-mix(in oklab, var(--lsce-open-ink) 20%, transparent);
    --lsce-almost-bg:     color-mix(in oklab, var(--lsce-almost-ink) 20%, transparent);
    --lsce-soldout-bg:    color-mix(in oklab, var(--lsce-soldout-ink) 20%, transparent);
    --lsce-cancelled-bg:  color-mix(in oklab, var(--lsce-cancelled-ink) 22%, transparent);
  }
}

.lsec.lsec--on-dark {
  --lsce-open-ink:      #8fd8ac;
  --lsce-almost-ink:    #edc978;
  --lsce-soldout-ink:   #f0a8a8;
  --lsce-cancelled-ink: #e88f8f;

  --lsce-open-bg:       color-mix(in oklab, var(--lsce-open-ink) 20%, transparent);
  --lsce-almost-bg:     color-mix(in oklab, var(--lsce-almost-ink) 20%, transparent);
  --lsce-soldout-bg:    color-mix(in oklab, var(--lsce-soldout-ink) 20%, transparent);
  --lsce-cancelled-bg:  color-mix(in oklab, var(--lsce-cancelled-ink) 22%, transparent);
}

.lsec.lsec :where(.lsec-badge--almost) {
  color: var(--lsce-almost-ink);
  background: var(--lsce-almost-bg);
  border-color: transparent;
}
.lsec.lsec :where(.lsec-badge--soldout) {
  color: var(--lsce-soldout-ink);
  background: var(--lsce-soldout-bg);
  border-color: transparent;
  /* Der Entwurf blendet „ausgebucht" ab – mit Farbe wäre das doppelt gemoppelt. */
  opacity: 1;
}
.lsec.lsec :where(.lsec-badge--cancelled) {
  color: var(--lsce-cancelled-ink);
  background: var(--lsce-cancelled-bg);
  border-color: transparent;
  opacity: 1;
}

/* Der Punkt vor „Fast ausgebucht" nimmt die Textfarbe ohnehin – hier bleibt
   nur die Fläche des Balkens, damit die knappen Plätze auffallen. */
.lsec.lsec :where(.lsec-capacity--low) :where(.lsec-capacity__fill) {
  background: var(--lsce-almost-ink);
  opacity: 1;
}


/* 2 · Raster: alle Karten teilen sich dieselben Zeilenhöhen ================

   Ohne diese Regeln richtet sich jede Karte nach ihrem eigenen Inhalt: Ein
   zweizeiliger Titel schiebt den Auszug nach unten, ein langes Datum die
   Angaben. Nebeneinander sieht das unruhig aus.

   `subgrid` löst das sauber: Die Karte übernimmt die Zeilen des umgebenden
   Rasters, statt eigene aufzumachen.                                        */

@supports (grid-template-rows: subgrid) {

  :where(.lsec-grid) { grid-auto-rows: auto; }

  :where(.lsec-grid) > :where(.lsec-card) {
    display: grid;
    /* Bild · Datum/Uhrzeit · Anzahl Termine · Titel · Auszug · Fuß */
    grid-row: span 6;
    grid-template-rows: subgrid;
    /* Der Zeilenabstand des Rasters trennt die KARTEN – innerhalb einer Karte
       wäre er viel zu groß. */
    row-gap: var(--lsec-3);
  }

  /* Fehlt ein Bild, bleibt die Zeile trotzdem stehen – sonst rutschte diese
     eine Karte gegenüber allen anderen nach oben. */
  :where(.lsec-grid) > :where(.lsec-card) > :where(.lsec-thumb) { grid-row: 1; }

  :where(.lsec-card) > :where(.lsec-card__body) {
    grid-row: 2 / 6;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: var(--lsec-2);
  }

  :where(.lsec-card) > :where(.lsec-card__foot) { grid-row: 6; }
}


/* 3 · Angaben über dem Titel: zwei Zeilen ==================================

   Zeile 1 Datum und Uhrzeit, Zeile 2 die Anzahl der Termine. Beides in einer
   Zeile bricht bei einem Zeitraum mit Uhrzeit unvorhersehbar um.

   Beide sind eigenständige `ul.lsec-meta` und damit direkte Kinder von
   `.lsec-card__body` – so sieht es der Markup-Vertrag vor. Die leere zweite
   Liste bleibt stehen, damit die Zeilen über alle Karten hinweg halten.     */

:where(.lsec-card__body) > :where(.lsec-meta:empty) { min-block-size: 0; }


/* 4 · Kartentitel auf drei Zeilen begrenzen ================================

   Ein vierzeiliger Titel würde die Zeilenhöhe für ALLE Karten bestimmen und
   überall Leerraum erzeugen.                                                */

.lsec.lsec :where(.lsec-card) :where(.lsec-event__title) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* Bei begrenzten Zeilen stört der ausgewogene Umbruch mehr als er hilft. */
  text-wrap: pretty;
}


/* 5 · Kartenfuß: Beitrag und Knopf ========================================

   Bei „250 € – 450 €, Betrag frei wählbar" reicht eine Zeile nicht. Statt den
   Knopf über den Rand zu schieben, darf er umbrechen.                        */

:where(.lsec-card__foot) {
  flex-wrap: wrap;
  row-gap: var(--lsec-3);
}
:where(.lsec-card__foot) > :where(.lsec-pricing, .lsec-price) { min-width: 0; flex: 1 1 auto; }
:where(.lsec-card__foot) > :where(.lsec-btn) { flex: 0 0 auto; max-width: 100%; }


/* 6 · Detailansicht im Inhaltsbereich des Themes ===========================

   Dort steht der Titel schon über uns – der Abstand zum ersten Abschnitt darf
   deshalb kleiner ausfallen als auf der eigenen Seite.                       */

:where(.lsec-detail__head:not(:has(.lsec-detail__title))) { gap: var(--lsec-3); }

/* 7 · Akzentfarbe für Pillen und Titel ====================================

   Der Entwurf hält die Übersicht bewusst farblos. Auf Wunsch bekommen die
   beiden Elemente Farbe, die zum Handeln einladen: der Kategorienfilter und
   die Veranstaltungstitel.

   `--lsec-accent` ist der Wert aus den Einstellungen; ohne eigene Farbe erbt
   er die Textfarbe des Themes, dann ändert sich hier nichts.                */

/*
 * Die Pillen sind `<button>`. Ohne diese Regeln gewinnt die Knopf-Gestaltung
 * des Themes – blaue Fläche, weiße Schrift, großzügiges Polster – und aus
 * einem Filter wird eine Reihe von Bedienknöpfen. Deshalb hier vollständig
 * und mit `.lsec.lsec` als Anker.
 *
 * Ruhig im Grundzustand, Farbe erst bei Berührung und Auswahl: Ein Filter
 * ist Beiwerk, kein Aufruf zum Handeln.
 */
.lsec.lsec :where(.lsec-chip) {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  min-block-size: 0;
  padding: .3em .75em;
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: 999px;
  font: inherit;
  font-size: var(--lsec-fs-sm);
  font-weight: 500;
  line-height: 1.35;
  color: inherit;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}
.lsec.lsec :where(.lsec-chip) :where(.lsec-chip__count) {
  font-size: var(--lsec-fs-micro);
  font-weight: 600;
  color: var(--lsec-muted);
}

.lsec.lsec :where(.lsec-chip:hover) {
  color: var(--lsec-accent);
  border-color: color-mix(in oklab, var(--lsec-accent) 45%, var(--lsec-line-strong));
  background: transparent;
}
.lsec.lsec :where(.lsec-chip:hover) :where(.lsec-chip__count) { color: inherit; }

/* Gewählt: die Akzentfarbe leicht hinterlegt, Schrift in derselben Farbe. */
.lsec.lsec :where(.lsec-chip[aria-pressed="true"]) {
  color: var(--lsec-accent);
  background: color-mix(in oklab, var(--lsec-accent) 10%, transparent);
  border-color: color-mix(in oklab, var(--lsec-accent) 30%, transparent);
  box-shadow: none;
  font-weight: 600;
}
.lsec.lsec :where(.lsec-chip[aria-pressed="true"]) :where(.lsec-chip__count) {
  color: inherit;
  opacity: .7;
}

/* Die Leiste selbst darf enger stehen als eine Knopfreihe. */
.lsec.lsec :where(.lsec-chipbar) { gap: var(--lsec-2); }

/* Titel in den Übersichten – auf der Detailseite bleibt die Überschrift
   schwarz, dort ist sie kein Link.

   ACHTUNG `:visited`: Der Entwurf setzt in Block 2.6 ausdrücklich

       .lsec-event__title a:visited { color: inherit }

   Ein `:visited` zählt als Pseudoklasse, der Selektor kommt damit auf 0-2-1
   und schlägt eine Regel ohne den Zustand. Ohne die Aufzählung hier wären
   genau die Titel schwarz, die jemand schon einmal angeklickt hat – ein
   Fehlerbild, das sich beim Entwickeln kaum zeigt und beim Nutzer sofort. */
.lsec.lsec :where(.lsec-list-item, .lsec-card, .lsec-cal-item) :where(.lsec-event__title) a,
.lsec.lsec :where(.lsec-list-item, .lsec-card, .lsec-cal-item) :where(.lsec-event__title) a:visited,
.lsec.lsec :where(.lsec-list-item, .lsec-card, .lsec-cal-item) :where(.lsec-event__title) a:hover,
.lsec.lsec :where(.lsec-list-item, .lsec-card, .lsec-cal-item) :where(.lsec-event__title) a:focus {
  color: var(--lsec-accent);
}


/* 8 · Freie Plätze in den Statusfarben ====================================

   Auf der Detailseite steht rechts, wie viele Plätze frei sind. Die Farbe
   sagt dasselbe wie die Kennzeichnung – grün, solange Luft ist, bernstein
   wenn es eng wird, rot wenn nichts mehr geht.                              */

.lsec.lsec :where(.lsec-capacity) { color: var(--lsce-open-ink); }
.lsec.lsec :where(.lsec-capacity) :where(.lsec-capacity__fill) {
  background: var(--lsce-open-ink);
  opacity: 1;
}
.lsec.lsec :where(.lsec-capacity--low) { color: var(--lsce-almost-ink); }
.lsec.lsec :where(.lsec-capacity--low) :where(.lsec-capacity__fill) {
  background: var(--lsce-almost-ink);
}
.lsec.lsec :where(.lsec-capacity--full) { color: var(--lsce-soldout-ink); }
.lsec.lsec :where(.lsec-capacity--full) :where(.lsec-capacity__fill) {
  background: var(--lsce-soldout-ink);
}


/* 9 · Beitrag in der Buchungsbox ==========================================

   Ein fester Preis („45 €") verträgt die große Zahl. Drei Solidarstufen
   nebeneinander tun das nicht: In der schmalen Spalte werden daraus drei
   Zeilen in Schriftgröße 3XL, und die Buchungsbox besteht plötzlich nur noch
   aus Preisen.

   Deshalb bei mehrteiligen Angaben eine Stufe kleiner und untereinander –
   eine Zeile je Stufe, Betrag betont, Bezeichnung ruhig.                    */

.lsec.lsec :where(.lsec-booking__amount--tiers) {
  display: grid;
  gap: .15rem;
  font-size: var(--lsec-fs-md);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
}
.lsec.lsec :where(.lsec-booking__amount--tiers) :where(.lsec-tierline) {
  display: flex;
  justify-content: space-between;
  gap: var(--lsec-4);
}
.lsec.lsec :where(.lsec-booking__amount--tiers) :where(.lsec-tierline > span:first-child) {
  color: var(--lsec-muted);
}
.lsec.lsec :where(.lsec-booking__amount--tiers) :where(.lsec-tierline > span:last-child) {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Auch die Spanne („250 – 450 €") wird sonst zu breit für die Spalte. */
.lsec.lsec :where(.lsec-booking__amount--compact) {
  font-size: var(--lsec-fs-xl);
  letter-spacing: -.02em;
}


/* 10 · Terminfolge: Nummern und Markierung ================================

   Der Entwurf setzt „1." vor jede Zeile und einen Punkt vor den nächsten
   Termin. In der Praxis liest sich beides wie eine Aufzählung, die es nicht
   braucht – die Reihenfolge steht ohnehin im Datum.

   Die Nummer bleibt als ruhiger Kreis: Sie hilft beim Verabreden („am
   dritten Abend"), drängt sich aber nicht mehr auf.                        */

.lsec.lsec :where(.lsec-session__no) {
  display: grid;
  place-items: center;
  inline-size: 1.5em;
  block-size: 1.5em;
  border: var(--lsec-hairline) solid var(--lsec-line);
  border-radius: 50%;
  font-size: var(--lsec-fs-xs);
  font-weight: 600;
  color: var(--lsec-muted);
  align-self: center;
}
.lsec.lsec :where(.lsec-session__no)::before { content: counter(lsec-session); }

/* Kein Punkt vor dem nächsten Termin – die Zeile ist ohnehin schon
   hervorgehoben. */
.lsec.lsec :where(.lsec-session--next) :where(.lsec-session__date)::before {
  content: none;
}

/* Zähler ans rechte Ende der Aufklappzeile: „Alle Termine ⋯ 4 Termine ▾" */
.lsec.lsec :where(.lsec-disclosure__toggle) { inline-size: 100%; }
.lsec.lsec :where(.lsec-disclosure__hint) { margin-inline-start: auto; }


/* 11 · Schriftgrößen ausgleichen ==========================================

   `.lsec-prose` setzt keine eigene Größe und erbt damit 100 % der
   Theme-Schrift, während die Eckdaten bei .875em liegen. Der
   Beschreibungstext war dadurch spürbar größer als alles andere auf der
   Seite – kein Gestaltungswille, sondern eine Lücke.                        */

.lsec.lsec :where(.lsec-prose) { font-size: var(--lsec-fs-base); }


/* 12 · Kapazitätsbalken: immer gleich lang ================================

   `.lsec-capacity` ist ein Raster ohne Spaltenangabe. Eine Spur ohne Angabe
   richtet sich nach dem breitesten Kind – also nach der Textlänge. „Noch 1
   von 12 Plätzen frei" ergab dadurch einen anderen Balken als „Ausgebucht".

   Dieselbe Lücke hatte der Entwurf bei `.lsec-success`, dort ist sie in der
   neueren Fassung bereits geschlossen.                                      */

.lsec.lsec :where(.lsec-capacity) { grid-template-columns: minmax(0, 1fr); }
.lsec.lsec :where(.lsec-capacity__bar) { inline-size: 100%; }

/* 13 · Übersicht: Luft, Ruhe, gleiche Breite =============================== */

/* -- 13.1 Die Breite ------------------------------------------------------
   Isotope nimmt die Einträge beim Filtern aus dem Fluss (`position:absolute`)
   und setzt nur `left`/`top`. Ein absolut gesetzter Block ohne Breitenangabe
   schrumpft auf seinen Inhalt – deshalb war jede Zeile so breit wie das, was
   zufällig darin stand, und die Trennlinien endeten an unterschiedlichen
   Stellen. Eine Zeile Breite stellt das ab; im normalen Fluss ändert sie
   nichts, dort ist der Block ohnehin schon so breit.                       */

.lsec.lsec :where(.lsec-list),
.lsec.lsec :where(.lsec-list-item) { inline-size: 100%; }

/* -- 13.2 Weißraum --------------------------------------------------------
   Die Vorgabe stand auf 24 px Zeilenabstand. Bei fünf Angaben pro Eintrag
   liest sich das als Block, nicht als Liste. Der Abstand wächst jetzt mit der
   Spaltenbreite mit: eng in der Seitenleiste, großzügig über die volle
   Seite.                                                                   */

.lsec.lsec :where(.lsec-list-item) {
  padding-block: clamp(var(--lsec-7), 3.5cqi, var(--lsec-9));
  column-gap: clamp(var(--lsec-6), 3cqi, var(--lsec-8));
}
.lsec.lsec :where(.lsec-list-item__body) { gap: var(--lsec-5); }
.lsec.lsec :where(.lsec-list-item__head) { gap: var(--lsec-3); }
.lsec.lsec :where(.lsec-list-item__foot) { margin-block-start: var(--lsec-2); }

/* Die Leiste darüber bekommt Abstand nach unten: Sie ist die Bedienung, die
   Liste der Inhalt – dazwischen gehört eine Pause. */
.lsec.lsec :where(.lsec-toolbar) {
  padding-block-end: var(--lsec-5);
  margin-block-end: var(--lsec-5);
}

/* -- 13.3 Schriftgrößen ---------------------------------------------------
   Titel und Fließtext lagen nur einen Schritt auseinander (xl gegen base),
   beide krafteten gegeneinander. Der Titel geht einen Schritt zurück, der
   Auszug bekommt eine Zeilenlänge, ab der Lesen wieder angenehm wird. Der
   Größenunterschied trägt die Rangfolge damit nicht mehr allein – das tut
   jetzt der Abstand.                                                       */

.lsec.lsec :where(.lsec-list-item) :where(.lsec-event__title) {
  font-size: var(--lsec-fs-lg);
  line-height: 1.3;
  letter-spacing: -.011em;
}
.lsec.lsec :where(.lsec-list-item) :where(.lsec-event__excerpt) {
  max-inline-size: 62ch;
}
.lsec.lsec :where(.lsec-list-item) :where(.lsec-meta) {
  font-size: var(--lsec-fs-sm);
  color: var(--lsec-muted);
}

/* -- 13.4 Die eine Aussage zur Verfügbarkeit ------------------------------
   Sie steht auf Höhe des Titels am rechten Rand – dort sucht der Blick beim
   Überfliegen, und sie hängt nicht mehr am Preis.

   Zweispaltig wird dafür der KOPF, nicht der ganze Eintrag: Läge die zweite
   Spur über die volle Höhe, verengte sie auch Auszug und Fuß, und die Knöpfe
   der Zeilen mit Hinweis stünden weiter links als die ohne.                */

.lsec.lsec :where(.lsec-list-item__head) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--lsec-5);
}
.lsec.lsec :where(.lsec-list-item__head) > * { grid-column: 1; }

/* „Wann" und „wo" stehen dichter beieinander als der Rest – sie gehören
   zusammen und sollen nicht wie zwei Angaben wirken.

   Ausdrücklich nur in der Liste: Im Raster stehen die beiden Angabenzeilen in
   eigenen `subgrid`-Spuren, damit alle Karten auf gleicher Höhe liegen. Ein
   negativer Abstand verschöbe genau diese Ausrichtung. */
.lsec.lsec :where(.lsec-list-item__head) :where(.lsec-meta) + :where(.lsec-meta) {
  margin-block-start: calc(var(--lsec-3) * -0.5);
}
.lsec.lsec :where(.lsec-list-item__head) > :where(.lsec-status-note) {
  grid-column: 2;
  grid-row: 1;
  margin-block-start: .2em;   /* auf die erste Titelzeile ausgerichtet */
}

.lsec.lsec :where(.lsec-status-note) {
  margin: 0;
  font-size: var(--lsec-fs-sm);
  font-weight: 550;
  line-height: 1.4;
  text-align: end;
  text-wrap: balance;
  font-variant-numeric: tabular-nums;
}

/* Farbe sagt es zusätzlich, nie allein – der Text steht immer im Klartext. */
.lsec.lsec :where(.lsec-status-note--open)      { color: var(--lsce-open-ink); }
.lsec.lsec :where(.lsec-status-note--almost)    { color: var(--lsce-almost-ink); }
.lsec.lsec :where(.lsec-status-note--soldout)   { color: var(--lsce-soldout-ink); }
.lsec.lsec :where(.lsec-status-note--cancelled) { color: var(--lsce-cancelled-ink); }

/* Eng wird aus zwei Spalten wieder eine: rechtsbündig neben einem dreizeiligen
   Titel bliebe von der Aussage nichts Lesbares übrig. */
@container lsec (max-width: 34rem) {
  .lsec.lsec :where(.lsec-list-item__head) { grid-template-columns: minmax(0, 1fr); }
  .lsec.lsec :where(.lsec-list-item__head) > :where(.lsec-status-note) {
    grid-column: 1;
    grid-row: auto;
    order: 1;              /* unter Titel und Angaben, nicht darüber */
    text-align: start;
    margin-block-start: 0;
  }
}

/* -- 13.5 Trennpunkte in der Angabenzeile ---------------------------------
   Der Entwurf setzt den Punkt als `::before` auf jedes Element ab dem
   zweiten. Bricht die Zeile um – und mit Datum, Uhrzeit und einer vollen
   Anschrift tut sie das oft –, beginnt die neue Zeile mit einem Punkt, vor
   dem nichts steht. Der Punkt gehört ans Ende des Vorgängers.              */

.lsec.lsec :where(.lsec-meta) > * + *::before { content: none; }
.lsec.lsec :where(.lsec-meta) > *:not(:last-child)::after {
  content: "";
  inline-size: 2px; block-size: 2px;
  margin-inline-start: .35em;
  border-radius: 50%;
  background: currentColor;
  opacity: .6;
  align-self: center;
}

/* 14 · Einzelseite und Anmeldung ========================================== */

/* -- 14.1 Der Beitrag ist eine Angabe, keine Schlagzeile ------------------
   `--lsec-fs-3xl` (1.75em) war für eine Zahl gedacht. „Gegen Spende" ist
   aber ein Satz, und in dieser Größe schreit er – ausgerechnet dort, wo
   gesagt werden soll, dass nichts verlangt wird.

   Neu: eine kleine Beschriftung darüber sagt, WAS die Angabe ist; der Wert
   steht eine Stufe größer als der Fließtext. Sichtbar bleibt er durch seinen
   Platz ganz oben in der Spalte, nicht durch Größe.                        */

.lsec.lsec :where(.lsec-booking__price) { gap: var(--lsec-1); }
.lsec.lsec :where(.lsec-booking__label) {
  font-size: var(--lsec-fs-xs);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lsec-muted);
}
.lsec.lsec :where(.lsec-booking__amount) {
  font-size: var(--lsec-fs-xl);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.25;
  text-wrap: balance;
}

/* Die mehrteiligen Fassungen aus Abschnitt 9 bleiben kleiner – sie stehen
   ohnehin schon in mehreren Zeilen und würden sonst den ganzen Kasten
   beherrschen. Ohne diese Wiederholung schlüge die Regel darüber sie, weil
   sie später im Stylesheet steht. */
.lsec.lsec :where(.lsec-booking__amount--tiers) {
  font-size: var(--lsec-fs-sm);
  font-weight: 500;
}
.lsec.lsec :where(.lsec-booking__amount--tiers) :where(.lsec-tierline > span:last-child) {
  font-weight: 600;
}
.lsec.lsec :where(.lsec-booking__amount--compact) {
  font-size: var(--lsec-fs-lg);
  letter-spacing: -.015em;
}

/* -- 14.2 Der Balken darf zurück – aber leiser ---------------------------
   Auf der Einzelseite vergleicht man nichts mehr, sondern sieht die
   Auslastung dieser einen Veranstaltung. Dünner als zuvor, damit er die
   Zahl darüber begleitet und ihr nicht die Aufmerksamkeit nimmt.          */

.lsec.lsec :where(.lsec-capacity) { gap: var(--lsec-2); }
.lsec.lsec :where(.lsec-capacity__bar) {
  block-size: 3px;
  border-radius: 999px;
  overflow: hidden;
}
.lsec.lsec :where(.lsec-capacity__fill) { border-radius: inherit; }

/* -- 14.3 Die Terminliste als echtes Bedienelement -----------------------
   Vorher war die Aufklappzeile fetter Text mit einem Häkchen am Rand – dass
   man darauf drücken kann, sah man ihr nicht an. Jetzt eine Fläche mit
   Rahmen, Polster und Zeigefinger, die auf Überfahren und beim Tasten-
   Fokus antwortet. Der Winkel dreht sich beim Öffnen.                     */

.lsec.lsec :where(.lsec-disclosure__toggle) {
  inline-size: 100%;
  gap: var(--lsec-4);
  padding: var(--lsec-4) var(--lsec-5);
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-radius: var(--lsec-radius-sm);
  background: transparent;
  transition: background-color var(--lsec-fast) var(--lsec-ease),
              border-color var(--lsec-fast) var(--lsec-ease);
}
.lsec.lsec :where(.lsec-disclosure__toggle:hover) {
  background: var(--lsec-soft);
  border-color: var(--lsec-line-heavy);
}
.lsec.lsec :where(.lsec-disclosure__toggle:focus-visible) {
  outline: 2px solid var(--lsec-accent);
  outline-offset: 2px;
}
.lsec.lsec :where(.lsec-disclosure__toggle)::after {
  inline-size: .5em; block-size: .5em;
  border-width: 2px;
  opacity: .55;
}
.lsec.lsec :where(.lsec-disclosure__hint) { margin-inline-start: auto; }

/* Ist sie offen, gehört die Liste sichtbar zum Kopf. */
.lsec.lsec :where(.lsec-disclosure[open]) :where(.lsec-disclosure__toggle) {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-block-end-color: transparent;
}
.lsec.lsec :where(.lsec-disclosure) { gap: 0; }
.lsec.lsec :where(.lsec-disclosure[open]) :where(.lsec-sessions) {
  padding: 0 var(--lsec-5);
  border: var(--lsec-hairline) solid var(--lsec-line-strong);
  border-block-start: 0;
  border-end-start-radius: var(--lsec-radius-sm);
  border-end-end-radius: var(--lsec-radius-sm);
}

/* -- 14.4 Die Nummer im Kreis -------------------------------------------
   Der Kreis maß 1.5em bei einer Schriftgröße von .75em – also gut 18 px für
   bis zu zwei Ziffern. Zweistellige Nummern füllten ihn randvoll, und weil
   die Zeilenhöhe des Pseudo-Elements höher war als die Ziffer selbst, saßen
   sie zusätzlich zu tief.

   Jetzt eine feste Größe in rem, unabhängig von der Schriftgröße, dazu
   `line-height: 1` und Ziffern gleicher Breite.                           */

.lsec.lsec :where(.lsec-session__no) {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  font-size: var(--lsec-fs-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* -- 14.5 Die Zusammenfassung im Formular --------------------------------
   Links, was und wann – rechts, wo. Vorher standen Titel und Datum an den
   Enden derselben Zeile; bei einer langen Anschrift lief das ineinander.
   Der Titel steht jetzt als solcher da und nicht als halbe Tabellenzelle. */

.lsec.lsec :where(.lsec-summary) { gap: var(--lsec-4); }
.lsec.lsec :where(.lsec-summary__event) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--lsec-3) var(--lsec-6);
}
.lsec.lsec :where(.lsec-summary__what) { display: grid; gap: var(--lsec-1); min-width: 0; }
.lsec.lsec :where(.lsec-summary__name) {
  font-size: var(--lsec-fs-lg);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.011em;
  text-wrap: balance;
}
.lsec.lsec :where(.lsec-summary__when) {
  display: flex; flex-wrap: wrap; gap: .15em .7em;
  font-size: var(--lsec-fs-sm);
  color: var(--lsec-muted);
  font-variant-numeric: tabular-nums;
}
.lsec.lsec :where(.lsec-summary__where) {
  font-size: var(--lsec-fs-sm);
  line-height: 1.45;
  color: var(--lsec-muted);
  text-align: end;
  max-inline-size: 22ch;
}

/* Eng untereinander – rechtsbündig neben einem umbrechenden Titel wäre die
   Anschrift nicht mehr zu lesen. */
@container lsec (max-width: 34rem) {
  .lsec.lsec :where(.lsec-summary__event) { grid-template-columns: minmax(0, 1fr); }
  .lsec.lsec :where(.lsec-summary__where) { text-align: start; max-inline-size: none; }
}

/* -- 14.6 Ankreuzfelder auf Linie ----------------------------------------
   Das Feld ist 1.15em hoch, die Textzeile daneben 1.5em. Oben bündig
   gesetzt saß es also gut ein Sechstel einer Zeile zu hoch. Die Hälfte der
   Differenz bringt es auf die Mitte der ERSTEN Textzeile – und dort bleibt
   es auch, wenn der Text darunter weiterläuft.                            */

.lsec.lsec :where(.lsec-check) > :where(input[type="checkbox"], input[type="radio"]) {
  margin-block-start: calc((1.5em - 1.15em) / 2);
}

/* Beim Solidar-Feld NICHT: Das Feld sitzt dort absolut in der Ecke, sein
   Platz kommt aus `inset-block-start`. Ein Außenabstand würde es zusätzlich
   verschieben. */

/* -- 14.7 Luft auf der Einzelseite ---------------------------------------
   Dieselbe Rechnung wie in der Übersicht: Der Abstand wächst mit der
   Spaltenbreite mit.                                                      */

.lsec.lsec :where(.lsec-detail) { gap: clamp(var(--lsec-7), 3cqi, var(--lsec-9)); }
.lsec.lsec :where(.lsec-detail__section) { gap: var(--lsec-5); }
.lsec.lsec :where(.lsec-booking) { gap: var(--lsec-5); }