/* --- xeno-system.css (System-Klassen) --- */
/**
 * xeno-system.css – System-CSS für alle Xeno-Websites.
 *
 * SINGLE SOURCE OF TRUTH für ALLE System-Klassen (Komponenten + Layout).
 * Diese Datei wird an ZWEI Stellen verwendet (null Duplikation):
 *
 * 1. Im XenoEditor (Admin): Importiert via Vite in XenoEditor.tsx.
 *    Die Klassen wirken global auf den Editor-Content.
 *
 * 2. Im Deploy / Editor-CSS-API: PHP liest diese Datei von Disk
 *    (class_website_parser.php → getSystemCss()) und fuegt sie
 *    zum kombinierten CSS hinzu.
 *
 * WICHTIG:
 *   - Alle Klassennamen mit Prefix `xeno-` (Konfliktvermeidung mit Tailwind/Bootstrap/etc.)
 *   - Alle Werte ueber CSS-Variablen aus globals.css (--primary, --radius, --size-md-h ...)
 *   - KEIN @apply - die Datei wird vom PHP roh ausgeliefert, Tailwind-Compiler ist nicht im Spiel
 *   - Hier NUR Klassen die AUCH auf der deployed Website gelten.
 *   - Editor-spezifische Styles gehoeren in xeno-editor.css, NICHT hierher.
 *
 * BRAND-OVERRIDES (Customer):
 *   Customer ueberschreibt einzelne Token in <customer>-tokens.css
 *   (z.B. --primary, --radius, --size-md-h). Wirkt automatisch auf
 *   ALLE xeno-Klassen UND alle shadcn-React-Komponenten in Plugins.
 *
 * COMPONENT-OVERRIDES (Customer):
 *   Customer ueberschreibt einzelne xeno-Klassen in <customer>-style.css
 *   (z.B. ".xeno-card { border-radius: 0 }"). Cascade-Reihenfolge in
 *   actions.php / class_website_deploy.php: getSystemCss() VOR getCombinedCss().
 *
 * Zusammenhaenge:
 *   - components/XenoEditor/XenoEditor.tsx     → importiert diese Datei
 *   - components/XenoEditor/xeno-editor.css    → Editor-spezifische Styles
 *   - class_website_parser.php getSystemCss()  → liest diese Datei fuer Deploy
 *   - class_website_deploy.php writeCombinedCss() → haengt System-CSS an
 *   - templates/sectionTemplates.ts            → nutzt diese Klassen in HTML-Vorlagen
 */

/* =========================================================================
   SPALTEN-SYSTEM
   Flexbox-basiert. Spalten sind standardmaessig gleich breit (flex: 1).
   ========================================================================= */

.xeno-row {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.xeno-row > .xeno-col {
  flex: 1;
  min-width: 0;
}

/* Spezifische Spaltenbreiten (Bruchteile der Gesamtbreite minus Gap) */
.xeno-row > .xeno-col-1-3 { flex: 0 0 calc(33.333% - 14px); }
.xeno-row > .xeno-col-2-3 { flex: 0 0 calc(66.666% - 7px); }
.xeno-row > .xeno-col-1-4 { flex: 0 0 calc(25% - 15px); }
.xeno-row > .xeno-col-3-4 { flex: 0 0 calc(75% - 5px); }

/* =========================================================================
   ABSTAENDE (Spacing)
   Einheitliches Spacing-System mit 4 Stufen.
   ========================================================================= */

.xeno-mt-0 { margin-top: 0; }
.xeno-mt-1 { margin-top: 8px; }
.xeno-mt-2 { margin-top: 16px; }
.xeno-mt-3 { margin-top: 32px; }
.xeno-mt-4 { margin-top: 64px; }

.xeno-mb-0 { margin-bottom: 0; }
.xeno-mb-1 { margin-bottom: 8px; }
.xeno-mb-2 { margin-bottom: 16px; }
.xeno-mb-3 { margin-bottom: 32px; }
.xeno-mb-4 { margin-bottom: 64px; }

.xeno-p-0 { padding: 0; }
.xeno-p-1 { padding: 8px; }
.xeno-p-2 { padding: 16px; }
.xeno-p-3 { padding: 32px; }
.xeno-p-4 { padding: 64px; }

.xeno-py-1 { padding-top: 8px; padding-bottom: 8px; }
.xeno-py-2 { padding-top: 16px; padding-bottom: 16px; }
.xeno-py-3 { padding-top: 32px; padding-bottom: 32px; }
.xeno-py-4 { padding-top: 64px; padding-bottom: 64px; }

.xeno-px-1 { padding-left: 8px; padding-right: 8px; }
.xeno-px-2 { padding-left: 16px; padding-right: 16px; }
.xeno-px-3 { padding-left: 32px; padding-right: 32px; }
.xeno-px-4 { padding-left: 64px; padding-right: 64px; }

/* =========================================================================
   CONTAINER & SECTION
   Seiten-Abschnitte mit optionalem Hintergrund und zentriertem Inhalt.
   ========================================================================= */

.xeno-section {
  padding: 40px 20px;
}

.xeno-section-muted {
  background: var(--muted, #f5f5f5);
  color: var(--muted-foreground, #6b7280);
}

.xeno-section-soft {
  background: var(--accent, #fafafa);
  color: var(--accent-foreground, #1f2330);
}

.xeno-section-dark {
  background: var(--foreground, #1e293b);
  color: var(--background, #ffffff);
}

/* Full-width Hero-Bild direkt unter dem Header. Container-los, Bild fuellt
   die volle Viewport-Breite. Aspect-Ratio wird durch das Bild bestimmt
   (typischerweise 3:1 fuer klassische Hero-Layouts). */
.xeno-hero-image {
  line-height: 0;   /* verhindert 4px Baseline-Gap unter Inline-<img> */
}
.xeno-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Zentrierter Content-Container. 1290px ist der neue Standard – deckt
   die typischen 7-Item-Navigations-Layouts mit 20px-Fonts + 15px-Padding
   ab und laesst genug Raum fuer breite Content-Grids (4-spaltige Card-
   Reihen). Fuer schmalere Layouts (z. B. reine Text-Seiten) gibt es
   `.site-container-narrow` in Kunden-Skins. */
.xeno-container {
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
}

/* Bilder aus dem Editor: nicht breiter als der Kasten. Kein globales
   height:auto — das wuerde feste Icon-Hoehen in React-Komponenten
   (h-20 etc.) ueberschreiben. Nach dem Ziehen steht height:auto am img. */
img {
  max-width: 100%;
}

/* =========================================================================
   TEXT-UTILITIES
   ========================================================================= */

.xeno-text-center { text-align: center; }
.xeno-text-left   { text-align: left; }
.xeno-text-right  { text-align: right; }

/* =========================================================================
   BUTTON
   Spiegelung der shadcn-Button-Variants als CSS-Klassen.
   Variants: default, secondary, destructive, outline, ghost, link
   Sizes:    default, sm, lg, icon
   ========================================================================= */

.xeno-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 500;
  font-size: var(--text-sm, 14px);
  line-height: 1;
  border-radius: var(--radius, 0.5rem);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  text-decoration: none;
  user-select: none;
}

.xeno-btn:disabled,
.xeno-btn[disabled] {
  pointer-events: none;
  opacity: 0.5;
}

.xeno-btn:focus-visible {
  outline: 2px solid var(--ring, var(--primary));
  outline-offset: 2px;
}

/* Variants */
.xeno-btn-default {
  background: var(--primary);
  color: var(--primary-foreground);
}
.xeno-btn-default:hover {
  background: color-mix(in srgb, var(--primary) 90%, transparent);
}

.xeno-btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
.xeno-btn-secondary:hover {
  background: color-mix(in srgb, var(--secondary) 80%, transparent);
}

.xeno-btn-destructive {
  background: var(--destructive);
  color: var(--destructive-foreground, #ffffff);
}
.xeno-btn-destructive:hover {
  background: color-mix(in srgb, var(--destructive) 90%, transparent);
}

.xeno-btn-outline {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--input, var(--border));
}
.xeno-btn-outline:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.xeno-btn-ghost {
  background: transparent;
  color: var(--foreground);
}
.xeno-btn-ghost:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}

.xeno-btn-link {
  background: transparent;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.xeno-btn-link:hover {
  text-decoration: underline;
}

/* Sizes (Defaults via --size-md-* aus globals.css) */
.xeno-btn { /* default size */
  height: var(--size-md-h, 36px);
  padding-inline: var(--size-md-btn-px, 16px);
}

.xeno-btn-sm {
  height: var(--size-sm-h, 32px);
  padding-inline: var(--size-sm-btn-px, 12px);
  font-size: var(--text-help, 13px);
}

.xeno-btn-lg {
  height: var(--size-lg-h, 40px);
  padding-inline: var(--size-lg-btn-px, 24px);
  font-size: var(--text-sm, 15px);
}

.xeno-btn-icon {
  width: var(--size-md-h, 36px);
  height: var(--size-md-h, 36px);
  padding: 0;
}

/* =========================================================================
   CARD
   Spiegelung der shadcn-Card-Komponente.
   ========================================================================= */

.xeno-card {
  background: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius, 0.75rem);
  overflow: hidden;
  /* Card selbst ist Flex-Container: Header oben, Content dehnt sich, Footer
     rutscht bündig ans untere Ende. Wenn die Card selbst ein Flex-Item ist
     (z.B. in einer .xeno-grid-Zelle mit align-items: stretch), sorgt height
     100% dafür, dass alle Cards in der Reihe gleich hoch werden. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Article-Vertical-Rhythmus (website.css: `article > * + * { margin-top: 3rem }`)
   ist fuer Detail-Templates gedacht — er zerreisst xeno-Cards, weil <article
   class="xeno-card"> dieselbe Selector-Match liefert. Explizit zuruecknehmen. */
article.xeno-card > * + * {
  margin-top: 0;
}

/* Content nimmt den restlichen Platz — Footer sitzt dadurch bündig am
   unteren Kartenrand, unabhaengig von der Textlaenge. */
.xeno-card > .xeno-card-content {
  flex: 1 1 auto;
}

.xeno-card-header {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xeno-card-title {
  font-size: var(--text-lg, 18px);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.xeno-card-description {
  font-size: var(--text-sm, 14px);
  color: var(--muted-foreground);
  margin: 0;
}

.xeno-card-content {
  padding: 0 24px 20px;
}

.xeno-card-footer {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--border);
}

/* =========================================================================
   INPUT / FORM
   ========================================================================= */

.xeno-input,
.xeno-textarea,
.xeno-select {
  display: block;
  width: 100%;
  height: var(--size-md-h, 36px);
  padding: 0 var(--size-md-input-px, 12px);
  font-size: var(--text-sm, 14px);
  font-family: inherit;
  background: var(--background);
  color: var(--foreground);
  border: 1px solid var(--input, var(--border));
  border-radius: var(--radius, 0.5rem);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.xeno-textarea {
  height: auto;
  min-height: 80px;
  padding: 8px var(--size-md-input-px, 12px);
  resize: vertical;
  line-height: 1.5;
}

.xeno-input:focus,
.xeno-textarea:focus,
.xeno-select:focus {
  outline: none;
  border-color: var(--ring, var(--primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring, var(--primary)) 30%, transparent);
}

.xeno-input::placeholder,
.xeno-textarea::placeholder {
  color: var(--muted-foreground);
}

.xeno-input:disabled,
.xeno-textarea:disabled,
.xeno-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.xeno-checkbox,
.xeno-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}

.xeno-radio {
  border-radius: 50%;
}

.xeno-switch {
  position: relative;
  width: 36px;
  height: 20px;
  appearance: none;
  background: var(--input, var(--border));
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
}

.xeno-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--background);
  border-radius: 50%;
  transition: transform 0.15s;
}

.xeno-switch:checked {
  background: var(--primary);
}

.xeno-switch:checked::before {
  transform: translateX(16px);
}

.xeno-label {
  display: inline-block;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 6px;
  cursor: pointer;
}

/* =========================================================================
   BADGE
   ========================================================================= */

.xeno-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid transparent;
}

.xeno-badge-default {
  background: var(--primary);
  color: var(--primary-foreground);
}

.xeno-badge-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.xeno-badge-destructive {
  background: var(--destructive);
  color: var(--destructive-foreground, #ffffff);
}

.xeno-badge-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--border);
}

/* =========================================================================
   AVATAR
   Rundes Profil-Bild mit optionalem Fallback-Initialen-Text.
   ========================================================================= */

.xeno-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  overflow: hidden;
  flex-shrink: 0;
}

.xeno-avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xeno-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   BLOCKQUOTE / DIVIDER / SEPARATOR / SKELETON
   ========================================================================= */

.xeno-blockquote {
  margin: 0;
  padding: 0;
  font-size: 1.25em;
  font-style: italic;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.xeno-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.xeno-separator {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--border);
  border: none;
}

.xeno-separator-vertical {
  width: 1px;
  height: 100%;
  background: var(--border);
}

.xeno-skeleton {
  display: block;
  background: var(--muted);
  border-radius: var(--radius, 0.5rem);
  animation: xeno-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes xeno-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* =========================================================================
   LIST / GRID / SLIDESHOW WRAPPER
   Layout-Container fuer Listen, Grids und Slideshows. Inhalts-Karten
   werden ueber .xeno-card oder Plugin-Templates gerendert.
   ========================================================================= */

.xeno-grid-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.xeno-box-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.xeno-slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* =========================================================================
   CONTENT-LAYOUT (Listing-Grid)
   Grid-Container aus ContentExtension.tsx im Listing-Modus. Enthaelt bis zu
   vier direkte Kinder:
     - xeno-content-toolbar                                     (wenn Pagination-Top
                                                                 oder View-Switcher
                                                                 aktiv)
       └── xeno-content-pagination xeno-content-pagination--top
       └── xeno-content-view-switcher
     - xeno-content-results
     - xeno-filter-panel                                        (wenn Sidebar)
     - xeno-content-pagination xeno-content-pagination--bottom

   Pagination-Top und View-Switcher stecken zusammen im `xeno-content-toolbar`-
   Wrapper. Beide steuern dieselbe Liste — als eine DOM-Einheit bleiben sie
   im Responsive-Modus zwingend beisammen (kein Aufsplitten durch fremde
   Elemente). Die Innen-Anordnung (Flexbox: links/rechts/space-between/
   zentriert) legt der Kunden-Skin fest.

   Beide Pagination-Instanzen tragen einen BEM-Modifier (--top / --bottom),
   damit Kunden-Skins sie ohne Positions-Selektoren (:first-of-type etc.)
   ansprechen koennen. Der System-Default ordnet alle Kinder schlicht
   untereinander. Jeder Kunden-Skin ueberschreibt `grid-template-areas`,
   `grid-template-columns`, `gap`, Farben und Trennlinien in seiner
   <customer>-style.css.

   Analog gibt es einen `xeno-content-showcase`-Wrapper fuer Slideshow/
   Carousel-Layouts — kein Grid, kein Panel-Kontext, nur ein semantischer
   Marker fuer Kunden-CSS.
   ========================================================================= */

.xeno-content-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}

.xeno-content-showcase {
  display: block;
}

.xeno-content-toolbar {
  /* System-Default: eine Flex-Zeile mit Pagination-Top links und View-
     Switcher rechts. Kunden-Skin ueberschreibt `justify-content` und
     `flex-wrap` beliebig. `flex-wrap: wrap` verhindert Overflow bei
     schmalen Viewports; Pagination + Switcher wickeln dann in zwei Zeilen
     um, bleiben aber im selben Wrapper (keine fremden Elemente dazwischen). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}

/* `.xeno-content-pagination` sitzt DIREKT am shadcn-Pagination-`<nav>`
   (siehe ListPagination in src/website-app/components/ListPagination.tsx).
   shadcn's Pagination-Komponente bringt intern `mx-auto flex w-full
   justify-center` mit — sinnvoll fuer standalone-Nutzung im Admin-UI, aber
   im Website-Content-Layout uebernimmt der Kunden-Skin die Ausrichtung
   ueber die Toolbar-Flexbox oder `justify-self` am Grid-Kind. Am System-
   Wrapper einmalig neutralisieren: Auto-Breite + kein auto-margin. Der
   verbleibende `justify-center` verpufft mangels Ueberbreite; die
   Pagination sitzt bei natuerlicher Groesse und laesst sich vom Elternteil
   frei positionieren. Selektor bindet beide Klassen am selben Element
   (Spezifitaet 0,2,0) und gewinnt zuverlaessig gegen Tailwind-Utilities. */
.xeno-content-pagination[data-slot='pagination'] {
  margin: 0;
  width: auto;
}

.xeno-content-view-switcher {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.xeno-content-view-switcher__button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 6px);
  font: inherit;
  font-size: var(--text-help, 13px);
  color: var(--muted-foreground, #64748b);
  cursor: pointer;
}

.xeno-content-view-switcher__button--active {
  background: var(--card, #ffffff);
  color: var(--foreground, #111827);
  border-color: var(--foreground, #111827);
}

.xeno-content-results {
  /* Neutraler Marker: das Ergebnis-Panel. System-Default ohne Skin — ein
     Kunden-Skin haengt hier optional Panel-Look (Hintergrund, Kappe, Padding)
     an. */
  min-width: 0;
}

.xeno-content-results__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .xeno-content-results__header {
    flex-direction: row;
    align-items: center;
  }

  .xeno-content-results__search {
    flex: 1;
  }

  .xeno-content-results__category {
    width: 16rem;
  }
}

/* =========================================================================
   FILTER-PANEL
   Sidebar-Panel aus DatesFilterPanel.tsx. Semantischer <aside class="xeno-
   filter-panel">-Container mit Titel, Feldern und Submit-Button. Neutral
   gestaltete System-Defaults: schlichter Kasten mit dezentem Rahmen —
   funktional und lesbar auch ohne Kunden-Skin. Kunden ueberschreiben
   BG-Farbe, Kappe/Rahmen, Padding, Typografie usw. in ihrer <customer>-
   style.css.
   ========================================================================= */

.xeno-filter-panel {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 6px);
  padding: 20px;
}

.xeno-filter-panel__title {
  font-size: var(--text-lg, 18px);
  font-weight: 600;
  margin: 0 0 16px;
}

.xeno-filter-panel__field {
  margin-bottom: 14px;
}

.xeno-filter-panel__label {
  display: block;
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground, #64748b);
  margin-bottom: 6px;
}

.xeno-filter-panel__input {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 6px);
  background: var(--background, #ffffff);
  font: inherit;
}

.xeno-filter-panel__input:focus {
  outline: none;
  border-color: var(--ring, var(--primary, #3b82f6));
}

.xeno-filter-panel__select {
  width: 100%;
}

.xeno-filter-panel__submit {
  display: inline-block;
  width: 100%;
  padding: 10px 16px;
  background: var(--primary, #3b82f6);
  color: var(--primary-foreground, #ffffff);
  border: 0;
  border-radius: var(--radius, 6px);
  font-weight: 600;
  cursor: pointer;
}

.xeno-filter-panel__submit:hover:not(:disabled) {
  filter: brightness(0.95);
}

.xeno-filter-panel__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================================
   MAINBOX-KLASSE (System-Default)

   Optionaler Panel-Wrapper. Wird an shadcn-Cards oder <div>s gehaengt,
   die als "Kasten" im Kunden-Auftritt wirken sollen (Cart-Items, Kontakt-
   Panel, Startseiten-Widgets, Detail-Sidebar-Boxen, …).

   Neutrale System-Defaults: heller Hintergrund + Umrahmung + Padding.
   Ein Kunde ueberschreibt das komplett in seiner <kunde>-style.css und
   waehlt seinen eigenen Panel-Look (flache Kappe oben, Karte mit Schatten,
   Rahmen mit Radius, …). Die Klasse selbst ist bewusst nicht-visuell im
   Namen, nur strukturell ("Mainbox").

   Nutzung:
     <Card className="xeno-mainbox">…</Card>
     <Card className="xeno-mainbox xeno-mainbox--accent">…</Card>

   Der --accent-Modifier ist reserviert fuer hervorgehobene Panels
   (z. B. aktive Filter, Aktions-Boxen). Ohne Kunden-Skin verhaelt er
   sich identisch zur neutralen Variante — der Skin definiert dann die
   Abweichung.
   ========================================================================= */

.xeno-mainbox {
  background:    var(--card, #ffffff);
  border:        1px solid var(--border, #e5e7eb);
  border-radius: var(--radius, 6px);
  padding:       20px 24px;
}

/* Farbige Modifier: neutrale, aber unterscheidbare Defaults ueber die
   shadcn/xeno-Tokens. Ein Kunden-Skin ueberschreibt Farben und Rahmen-
   fuehrung (Kappe oben, Rahmen rundum, Schatten, …) - hier steht nur ein
   fallback-freundliches Default, damit die Semantik "wichtig / info /
   warnung / gefahr" auch ohne Skin sichtbar wird. */
.xeno-mainbox--accent {
  border-color: var(--primary, #16803c);
}
.xeno-mainbox--info {
  border-color: var(--info, #3b82f6);
  background:   color-mix(in srgb, var(--info, #3b82f6) 6%, var(--card, #ffffff));
}
.xeno-mainbox--warn {
  border-color: var(--warning, #f59e0b);
  background:   color-mix(in srgb, var(--warning, #f59e0b) 6%, var(--card, #ffffff));
}
.xeno-mainbox--danger {
  border-color: var(--destructive, #dc2626);
  background:   color-mix(in srgb, var(--destructive, #dc2626) 6%, var(--card, #ffffff));
}

/* =========================================================================
   CART / STEPPER — System-Defaults

   Semantische Klassen aus dem Cart-Stepper (Warenkorb-Buchungsstrecke) — pro
   Klasse EIN Skin, keine Modifier-Klassen im TSX. Kunden-Themes (z.B.
   lao-style.css) ueberschreiben Border, Padding, Abstaende — TSX bleibt
   unberuehrt.

   Klassen-Semantik:
     .xeno-cart-shell         Aeusserer Wrapper des CartSteppers (Header + Content)
     .xeno-cart-step          Wrapper des Step-Inhalts (regelt Abstaende zwischen
                              direkten Kindern eines Steps, wenn dessen Root ein
                              Fragment ist — z.B. Section + Actions bei ContactStep)
     .xeno-cart-review        Wrapper von Cart-Review-Step (Items + Action-Buttons)
     .xeno-cart-items         Liste der Cart-Items im Cart-Review-Step
     .xeno-cart-item          Einzelnes Cart-Item (Termin/Belegungsanfrage) — ist eine <MainBox>
     .xeno-cart-actions       Aktions-Zeile mit "Zurueck"/"Weiter"-Buttons
     .xeno-participants-date  Termin-Wrapper im Teilnehmer-Step (Section pro Termin)
     .xeno-participants-date__title  h3-Titel innerhalb einer Termin-Section
     .xeno-signuper-card      Anmelder-Karte innerhalb einer Termin-Section — ist eine <MainBox>
     .xeno-contact-step       Kontakt-Step-Wrapper (Section: Titel + Panel + Actions)
     .xeno-contact-step__title  h3-Titel oberhalb des Kontakt-Panels
     .xeno-contact-panel      Innere Panel-Box mit den Kontakt-Feldern — ist eine <MainBox>
     .xeno-payment-step       Payment-Step-Wrapper (Section: Zahlung-Panel + Billing-Panel)
     .xeno-payment-panel      MainBox mit Zahlungsart-Auswahl + Bank/PayPal-Feldern
     .xeno-billing-panel      MainBox mit Rechnungsadresse (Toggle im Actions-Slot)
     .xeno-summary-panel      MainBox der Bestellzusammenfassung — ist selbst der
                              Outline-Wrapper, keine Section drum
   ========================================================================= */

/* Shell-Wrapper: Abstand zwischen Stepper-Header und Step-Content. */
.xeno-cart-shell > * + * {
  margin-top: 40px;
}

/* Step-Wrapper: Abstand zwischen direkten Kindern innerhalb eines Steps.
   Greift wenn ein Step als Fragment (Section + Actions) ausgegeben wird —
   dann werden Section und Actions zu direkten Kindern des Step-Wrappers.
   CartReview hat einen eigenen Root (xeno-cart-review) und ist selbst nur
   EIN Kind des Step-Wrappers — deshalb greift diese Rule dort nicht. */
.xeno-cart-step > * + * {
  margin-top: 40px;
}

/* Cart-Review-Step: Abstand zwischen Items-Liste und Action-Zeile. */
.xeno-cart-review > * + * {
  margin-top: 40px;
}

/* Items-Liste: Abstand zwischen einzelnen Cart-Items. */
.xeno-cart-items {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  list-style:     none;
  margin:         0;
  padding:        0;
}

/* Cart-Item: Ist eine <MainBox> (die den Basis-Card-Skin liefert), zusaetzlich
   der Cart-Item-spezifische Skin. Fuer Xeno-Standard identisch zum Mainbox-
   Default — Kunden-Themes koennen abweichen (eigener Rahmen, Kappe, …). */
.xeno-cart-item {
  /* keine Abweichung zum Mainbox-Default fuer Xeno-Standard */
}

/* Action-Zeile: Zurueck-Button links, Weiter-Button rechts. */
.xeno-cart-actions {
  display:         flex;
  justify-content: space-between;
  gap:             8px;
}

/* Teilnehmer-Step: Termin-Section-Wrapper. Ist eine Gruppierung, KEIN Panel —
   deshalb kein Card-Skin per Default. Kunden-Themes koennen abweichen und den
   Wrapper als Panel gestalten (Rahmen, Kappe, Hintergrund). */
.xeno-participants-date {
  /* neutraler Wrapper — kein Skin per Default */
}

.xeno-participants-date__title {
  font-size:   var(--text-lg, 18px);
  font-weight: 600;
  line-height: 1.3;
  margin:      0 0 16px 0;
  padding:     0;
}

.xeno-participants-date + .xeno-participants-date {
  margin-top: 24px;
}

/* Signuper-Card: Ist eine <MainBox> mit dem Standard-Mainbox-Skin, kein
   Zusatz per Default. Kunden-Themes koennen abweichen. */
.xeno-signuper-card {
  /* keine Abweichung zum Mainbox-Default fuer Xeno-Standard */
}

/* Kontakt-Step: Section-Wrapper. Ist eine Gruppierung, KEIN Panel — deshalb
   kein Card-Skin per Default. Kunden-Themes koennen abweichen. Vertikale
   Abstaende zwischen Titel, Panel und Actions ueber > * + *. */
.xeno-contact-step {
  /* neutraler Wrapper — kein Skin per Default */
}

.xeno-contact-step > * + * {
  margin-top: 16px;
}

.xeno-contact-step__title {
  font-size:   var(--text-lg, 18px);
  font-weight: 600;
  line-height: 1.3;
  margin:      0;
  padding:     0;
}

/* Kontakt-Panel: Ist eine <MainBox> mit dem Standard-Mainbox-Skin, kein
   Zusatz per Default. Kunden-Themes koennen abweichen. */
.xeno-contact-panel {
  /* keine Abweichung zum Mainbox-Default fuer Xeno-Standard */
}

/* Payment-Step: Section-Wrapper fuer Zahlung- und Rechnungs-MainBox. Ist eine
   Gruppierung, KEIN Panel — deshalb kein Card-Skin per Default. Kunden-Themes
   koennen abweichen. Vertikaler Abstand zwischen den beiden MainBoxen ueber
   > * + *. */
.xeno-payment-step {
  /* neutraler Wrapper — kein Skin per Default */
}

.xeno-payment-step > * + * {
  margin-top: 16px;
}

/* Payment-Panel und Billing-Panel: Sind <MainBox>en mit dem Standard-Mainbox-
   Skin, kein Zusatz per Default. Kunden-Themes koennen abweichen. */
.xeno-payment-panel {
  /* keine Abweichung zum Mainbox-Default fuer Xeno-Standard */
}

.xeno-billing-panel {
  /* keine Abweichung zum Mainbox-Default fuer Xeno-Standard */
}

/* Summary-Panel: Ist eine <MainBox> mit dem Standard-Mainbox-Skin. Kunden-
   Themes koennen abweichen. Die Zusammenfassung IST selbst die Outline-Box,
   deshalb kein Section-Wrapper drum. */
.xeno-summary-panel {
  /* keine Abweichung zum Mainbox-Default fuer Xeno-Standard */
}

/* =========================================================================
   XENO-DATE-BOX (System-Default)

   Vertikale Termin/Konzert-Box (Titel, Untertitel, Datum, Ort, INFO-Button,
   Status). Wird vom Layout in <a><article class="xeno-date-box">...</a>
   gewickelt. Die eigentliche Struktur (Grid, Bild-Slot, Fuss-Zeile) liefert
   das Template - dieses Default sorgt nur dafuer, dass die Box ohne Kunden-
   Skin lesbar bleibt: minimale Abstaende, dezente Trennung, neutrale
   Button-Optik.

   Ein Kunden-Skin (z.B. lao-style.css) ueberschreibt Padding, Trennlinie,
   Button-Farbe und Bild-Groesse fuer den spezifischen Look.
   ========================================================================= */

.xeno-date-box {
  padding:        16px 20px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.xeno-date-box__title {
  font-weight: 600;
  font-size:   var(--text-lg, 18px);
  color:       var(--foreground, #111827);
}

.xeno-date-box__subtitle,
.xeno-date-box__date,
.xeno-date-box__loc {
  font-size: var(--text-sm, 15px);
  color:     var(--muted-foreground, #6b7280);
}

.xeno-date-box__grid {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:                   16px;
  align-items:           center;
  padding-top:           8px;
}

.xeno-date-box__image { max-width: 100px; }
.xeno-date-box__image img { display: block; width: 100%; height: auto; }

.xeno-date-box__foot {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-top:  10px;
  flex-wrap:   wrap;
}

.xeno-date-box__btn {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      2px 10px;
  background:   var(--primary, #16803c);
  color:        var(--primary-foreground, #ffffff);
  font-size:    var(--text-sm, 14px);
  font-weight:  500;
}

.xeno-date-box__avail        { font-size: var(--text-sm, 14px); color: var(--muted-foreground, #6b7280); }
.xeno-date-box__avail--full  { color: var(--destructive, #dc2626); font-weight: 600; }

/* Wenn die Box in einer xeno-card steckt, das Wrapper-<a> neutralisieren
   und System-Padding der Card-Content weglassen (die Box bringt eigenes
   Padding mit). */
.xeno-card .xeno-dates-list           { margin: 0; }
.xeno-card .xeno-dates-list ol,
.xeno-card .xeno-dates-list ul        { border: 0; margin: 0; padding: 0; list-style: none; }
.xeno-card .xeno-dates-list li        { margin: 0; padding: 0; border: 0; }
.xeno-card .xeno-dates-list li > a    { display: block; color: inherit; text-decoration: none; }
.xeno-card .xeno-card-content         { padding: 0; }

/* =========================================================================
   ICON-DEFAULTS (System)

   Lucide-Icons haben `width`/`height` als HTML-Attribut (24) + Tailwind-
   Klassen `h-N w-N`. In flex-Containern schrumpfen SVGs jedoch auf
   `min-content` sobald der Container knapp wird (z. B. Cart-Icon 40x40
   mit absolut positioniertem Badge daneben). Das erzeugt asymmetrische
   Icons (10x20 statt 20x20). Fix: SVGs im gesamten System vor Shrink
   schuetzen. Gilt fuer ALLE Kunden — nicht kundenspezifisch.
   ========================================================================= */

svg.lucide { flex-shrink: 0; }

/* =========================================================================
   PAGINATION (System)

   Basis-Skin fuer die shadcn-Pagination-Komponente auf allen Xeno-
   Websites. Zielt ueber die stabilen data-slot-Attribute
   (pagination, pagination-content, pagination-link, pagination-ellipsis)
   von src/components/ui/pagination.tsx.

   Der shadcn-Default liefert eine Mischung aus outline/ghost-Buttons —
   die aktive Seite bekommt einen Rahmen, andere nur Text. Das wirkt
   auf einer oeffentlichen Website asymmetrisch. Hier definieren wir
   einen sauberen, konsistenten Standard: alle Items gleich gross,
   gleiche Form, aktive Seite gefuellt in --primary. Prev/Next brechen
   nicht mehr in zwei Zeilen.

   Kunden-CSS ueberschreibt bei Bedarf Farbe/Font/Radius pro Kontext
   (z.B. `lao-style.css` faerbt die aktive Seite pro Seite blau statt
   gruen). Wer den Standard ohne Skin nutzt, bekommt eine ordentliche
   Pagination out-of-the-box.
   ========================================================================= */

/* Container zentrieren, Abstand nach oben */
[data-slot='pagination'] {
  margin-top: 24px;
}

/* Item-Liste: kleiner, konsistenter Abstand statt shadcn-Default */
[data-slot='pagination-content'] {
  gap: 4px;
}

/* Alle Items (Zahlen, Ellipsis, Prev/Next) teilen dieselbe Grundform:
   36x36 mindestens, keine Rundung, keine Border, transparenter BG,
   Cursor-Feedback bei Klick. */
[data-slot='pagination-link'],
[data-slot='pagination-ellipsis'] {
  min-width: var(--size-md-h, 36px);
  height: var(--size-md-h, 36px);
  padding: 0 10px;
  border-radius: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

/* Hover fuer nicht-aktive Zahlen: leichter Grau-Ton, primaere Farbe. */
[data-slot='pagination-link']:not([data-active='true']):hover {
  background: var(--muted, #f4f4f4);
  color: var(--primary);
}

/* Aktive Seite: gefuellt in --primary. */
[data-slot='pagination-link'][data-active='true'] {
  background: var(--primary);
  color: var(--primary-foreground, #ffffff);
}

/* Prev/Next: kein Zwei-Zeilen-Bruch. */
[data-slot='pagination-link'][aria-label='Go to previous page'],
[data-slot='pagination-link'][aria-label='Go to next page'] {
  gap: 6px;
  padding: 0 14px;
  white-space: nowrap;
}
[data-slot='pagination-link'][aria-label='Go to previous page'] span,
[data-slot='pagination-link'][aria-label='Go to next page'] span {
  white-space: nowrap;
}

/* Ellipsis dezenter als Zahlen. */
[data-slot='pagination-ellipsis'] {
  color: var(--muted-foreground, #6b7280);
}

/* =========================================================================
   STEPPER (System) — CartStepper und andere mehrstufige Prozesse.

   Sechs semantische Klassen bilden die komplette Optik ab:
     .xeno-stepper           Wrapper (nav)
     .xeno-stepper__list     ol, gleich breite Spalten
     .xeno-stepper__step     li, Kind-Positionierung
     .xeno-stepper__line     Verbindungslinie zwischen zwei Kreisen
     .xeno-stepper__btn      button, umschliesst Kreis + Label
     .xeno-stepper__circle   Kreis mit Zahl / Check-Icon
     .xeno-stepper__label    Text unter dem Kreis
     .xeno-stepper__current  Nur auf Mobile sichtbare Ist-Zustand-Headline

   Zustaende:
     .xeno-stepper__step.is-active   aktueller Schritt
     .xeno-stepper__step.is-past     abgeschlossener Schritt
     .xeno-stepper__line.is-done     Linie zwischen abgeschlossenen Steps

   Groessen: Kreis --size-lg-h (36px), Font-Size via --text-sm (Zahl) und
   --text-xs (Label). Beides sind die shadcn-Basistokens — Kunden-Themes
   die diese Tokens skalieren (z.B. --text-sm: 16px), bekommen automatisch
   auch einen groesseren Stepper, ohne dass wir hier oder im TSX etwas
   aendern muessen.

   Farben aus --primary (Kunden-Brand), --border (neutral), --surface
   (Innenfarbe der Kreise damit die Linie im Kreis-Bereich verdeckt wird).
   ========================================================================= */

.xeno-stepper {
  user-select: none;
}

.xeno-stepper__list {
  display: grid;
  grid-template-columns: repeat(var(--xeno-stepper-count, 6), minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.xeno-stepper__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Verbindungslinie: sitzt auf Kreis-Zentrum-Hoehe (halbe --size-lg-h).
   Wenn ein Kunde die Kreis-Groesse ueber den Token skaliert, muss er
   dieselbe Zahl auch in --xeno-stepper-line-top halten (Default reicht
   fuer 90 % der Faelle). */
.xeno-stepper__line {
  position: absolute;
  top: calc(var(--size-lg-h, 36px) / 2 - 1px);
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border, #e5e7eb);
  transition: background-color 0.15s;
}

.xeno-stepper__line.is-done {
  background: var(--primary);
}

.xeno-stepper__btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: center;
  cursor: default;
  font: inherit;
}

.xeno-stepper__step.is-past .xeno-stepper__btn {
  cursor: pointer;
}

/* Kreis: --size-lg-h (36px shadcn-Standard). Font-Size = var(--text-sm) —
   dieselbe Basisgroesse die auch Buttons/Inputs nutzen. Kunden-Themes die
   --text-sm skalieren, bekommen automatisch groessere Zahlen im Kreis,
   ohne dass wir hier etwas anfassen. */
.xeno-stepper__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-lg-h, 36px);
  height: var(--size-lg-h, 36px);
  border-radius: 9999px;
  border: 2px solid var(--border, #e5e7eb);
  background: var(--surface, #ffffff);
  color: var(--muted-foreground, #6b7280);
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  line-height: 1;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.xeno-stepper__step.is-active .xeno-stepper__circle,
.xeno-stepper__step.is-past .xeno-stepper__circle {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground, #ffffff);
}

.xeno-stepper__step.is-past .xeno-stepper__btn:hover .xeno-stepper__circle {
  background: color-mix(in srgb, var(--primary) 90%, #000000);
}

.xeno-stepper__check {
  width: 1em;
  height: 1em;
}

/* Label: --text-xs (12px shadcn-Standard). Kunden-Themes skalieren via
   --text-xs mit. */
.xeno-stepper__label {
  font-size: var(--text-xs, 12px);
  font-weight: 500;
  color: var(--muted-foreground, #6b7280);
  line-height: 1.3;
}

.xeno-stepper__step.is-active .xeno-stepper__label,
.xeno-stepper__step.is-past .xeno-stepper__label {
  color: var(--foreground, #111827);
}

/* Mobile-Fallback: Labels ausblenden, Ist-Zustand als Headline zeigen. */
.xeno-stepper__current {
  display: none;
  margin: 12px 0 0;
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  color: var(--foreground, #111827);
  text-align: center;
}

@media (max-width: 640px) {
  .xeno-stepper__label { display: none; }
  .xeno-stepper__current { display: block; }
  .xeno-stepper__btn { gap: 0; }
}

/* =========================================================================
   DETAIL-AMPEL — System-Default fuer die Termin-Ampel-Zeile

   Rendert einen farbigen Punkt anhand des `data-ampel`-Attributs
   ('green'|'yellow'|'orange'|'red'). Kommt aus system_dates.ampel
   (Basisdaten, 0-5) und wird im Backend semantisch aufgeloest
   (Class_Dates::computePublicAmpel).

   Template-Aufruf: <span class="xeno-detail__ampel" data-ampel="green"></span>
   Kunden-Skins koennen Groesse/Form ueberschreiben, ohne die Farbe zu
   verlieren.
   ========================================================================= */
.xeno-detail__ampel {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  background: var(--muted-foreground, #6b7280);
  vertical-align: middle;
}
.xeno-detail__ampel[data-ampel="green"]  { background: var(--success,     #16a34a); }
.xeno-detail__ampel[data-ampel="yellow"] { background: var(--warning,     #eab308); }
.xeno-detail__ampel[data-ampel="orange"] { background: #f97316; }
.xeno-detail__ampel[data-ampel="red"]    { background: var(--destructive, #dc2626); }
/* --- assets/design.css --- */
:root {
}


/* --- assets/lao-style.css --- */
/**
 * lao-style.css – LAO-Klon: Customer-spezifische Styles.
 *
 * Enthaelt NUR was bei LAO eigen ist und sich nicht ueber System-Klassen
 * (xeno-*) oder Brand-Tokens (lao-tokens.css) abbilden laesst.
 *
 * Cascade-Reihenfolge: globals.css → xeno-system.css → lao-tokens.css → lao-style.css
 *
 * ZIEL: 1:1-Klon des Kunden-Auftritts (Drupal-Theme "lao" auf Bootstrap-3-Basis)
 * auf unserer CMS-HTML-Struktur (site-header, site-header__topbar, site-header__main, …).
 *
 * Da die NavigationExtension mit Tailwind-Utility-Klassen rendert, ueberschreiben
 * wir mit erhoehter Spezifitaet (`.site-header nav ...`). Das ist kein Hack —
 * die Datei liegt im Kunden-Assets-Ordner und wirkt ausschliesslich auf diese
 * eine Kunden-Website. Kein Bleed in andere Kunden.
 */

/* ─────────────────────────────────────────────────────────────────────────
   HTML-RESETS / BASE
   ───────────────────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* Kunden-Konvention (landesakademie-ochsenhausen.de): Fliesstext in Janson
     Text (Serif) mit 20px als Basisgroesse. Montserrat (Sans) kommt nur in
     Navigation, Buttons, Labels und Uppercase-Chips zum Einsatz. Absicht:
     die deployte Website soll optisch von der Kundenseite nicht unterscheidbar
     sein (Subdomain daneben). Shadcn-Komponenten mit Utility-Klassen (text-sm
     etc.) behalten ihre Groessen, weil rem an html haengt - Auswirkung nur
     auf "nackte" Text-Elemente. */
  font-family: var(--font-serif);   /* Janson Text */
  /* Body-Basisgroesse: --text-sm (20px) wird bewusst gewaehlt, weil der
     Kunde durchgehend 20px als Fliesstext nutzt. Damit greift die gleiche
     Token-Skala wie in shadcn-Komponenten (text-sm rendert = var(--text-sm)). */
  font-size: var(--text-sm);
  /* Live an landesakademie-ochsenhausen.de gemessen: 20px/27px (= 1.35). */
  line-height: 1.35;
  /* Live an landesakademie-ochsenhausen.de gemessen: rgb(102,102,102).
     Xeno-Default --foreground = oklch(0.145 0 0) ist fast schwarz und
     traegt nicht den LAO-typischen Grau-Look; deshalb hier explizit
     ueberschrieben. Buttons/Icons die --foreground direkt nutzen bleiben
     unangetastet. */
  color: #666666;
  background: var(--background);
}

/* Standard-Links: erben Textfarbe (Navigation, Header, Karten bleiben neutral).
   Akzentlinks setzen die Farbe explizit ueber eigene Klassen oder via xeno-btn-link. */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

/* TEMP-Fix vor Kundentermin: In @layer base gepackt, damit Tailwind-Utilities
   (h-full, w-full, object-cover) die img-Regeln ueberschreiben koennen. Ohne
   den Layer gewinnt `height: auto` gegen die Utility-Klassen und kleine
   Portrait-Bilder in den Dozenten-Kreisen werden nicht auf die Kreisgroesse
   hochskaliert. TODO: nach Kundentermin refactoren (targeted Regel statt
   globaler Layer-Anpassung). */
@layer base {
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* In @layer base gepackt, damit Tailwinds Utility-Klassen (z.B. .space-y-10,
   .mt-4, .list-disc) diesen Reset ueberschreiben koennen. Tailwinds
   @layer utilities liegt in der Cascade-Layer-Reihenfolge SPAETER als base
   und gewinnt daher — auch wenn die Utility-Selektoren via :where() eine
   Spezifitaet von 0 haben. Ohne diesen Layer gewinnt "ul { margin: 0 }"
   (unlayered, hoechste Prioritaet) gegen alle Utilities auf <ul>-Elementen. */
@layer base {
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

/* Headings — Kunden-Konvention: ALLE Headings in Montserrat (Sans), nicht
   in Janson. Der Kunde nutzt Janson nur fuer Fliesstext (body, Subtitles),
   die gesamte UI-Typografie (Titel, Labels, Buttons, Nav) ist Sans.
   Werte 1:1 live gemessen an landesakademie-ochsenhausen.de:
     H1 Page-Titel:  Montserrat 44px 500 (Detail-Seiten wie "Violin course")
     H2 Section-Titel: Montserrat 32px 500 (Startseiten-Sektionen)
     H3 Mainbox-Titel: Montserrat 28px 500 (Filter-Panel, Info-Boxen)
     H4 Kapitel-Titel: Montserrat 20px 500 UPPERCASE (Dozenten, Weitere Kurse) */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.2;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--site-nav-text);
}

/* Heading-Groessen greifen NUR, wenn kein Utility-Class (text-xs/sm/base/…)
   die Groesse bereits explizit setzt. Sonst wuerde LAO shadcn-Komponenten
   ueberstimmen — z.B. Cart-Item-Titel mit <h3 className="text-base"> waeren
   28px statt der gemeinten 18px (LAO --text-base). Die :not-Bedingung stellt
   den Vorrang der TSX-Semantik wieder her. */
/* Heading-Zuordnung 1:1 an landesakademie-ochsenhausen.de gemessen:
   H1 = 44 (Hero, EIN Titel pro Detail-Seite)
   H2 = 20 (Section-Titel „Dozenten", „Weitere Kursangebote", …)
   H3 = 20 (Card-Titel)
   H4 = 20 uppercase (selten, weiter reduziert vom H3)
   H5 = 16 uppercase (kleine Meta „Mit Unterstützung von:")
   H6 = 13 uppercase (kaum benutzt beim Kunden) */
h1:not([class*="text-"]) { font-size: var(--text-xl);   font-weight: 500; line-height: 1.1; }
h2:not([class*="text-"]) { font-size: var(--text-base); font-weight: 500; }
h3:not([class*="text-"]) { font-size: var(--text-base); font-weight: 500; }
h4:not([class*="text-"]) { font-size: var(--text-base); font-weight: 500; text-transform: uppercase; }
h5:not([class*="text-"]) { font-size: var(--text-xs);   font-weight: 600; text-transform: uppercase; }
h6:not([class*="text-"]) { font-size: var(--text-help); font-weight: 600; text-transform: uppercase; }

/* ─────────────────────────────────────────────────────────────────────────
   SITE-CONTAINER (1290px, exakt gemessen an landesakademie-ochsenhausen.de:
   dortiger .navbar.navbar-default.container hat viewport-abhaengig 1290px).
   Grund fuer die Erweiterung von 1170 → 1290: mit 7 Haupt-Nav-Items (Home,
   Aktuelles, Kurse, Konzerte, Buchung, Akademie, Über uns) braucht der Nav-
   Bereich rechts vom Logo ~1050px. Bei 1170px Container - 30px padding -
   115px Logo = 1025px – zu knapp. Bei 1290 - 30 - 115 = 1145px – passt mit
   Reserve fuer spaetere Zusatz-Items oder wieder aktivierte Chevrons.
   ───────────────────────────────────────────────────────────────────────── */

.site-container {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 15px;
}

.site-container-narrow {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ─────────────────────────────────────────────────────────────────────────
   SITE-HEADER — Kunden-Look
   Layout Desktop (>=1200px): Logo absolut positioniert, ragt oben aus dem
     Header und unten in den Content ("fliegend"). Topbar oben rechts,
     Hauptnav darunter rechts.
   Layout Mobile (<1200px): Logo inline (kompakt), Burger rechts, Topbar
     ausgeblendet (deren Items wandern automatisch ins Sheet).
   Breakpoint 1200px: bei 20px-Font + 7 Nav-Items brauchen wir ~1050px fuer
     die Nav, mit 220px-Logo + Padding = ~1290px Gesamt. Alles darunter kann
     die Nav-Zeile nicht mehr sauber tragen — deshalb Burger ab <1200.
   ───────────────────────────────────────────────────────────────────────── */

.site-header {
  background: #ffffff;
  /* Kunde hat keine Trenn-Linie zwischen Header und Content — Uebergang
     ist bewusst rand-los, das Hero-Bild klebt direkt am Header. */
  position: relative;
  z-index: 100;
}

.site-header .site-container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.site-logo {
  display: block;
  flex-shrink: 0;
}

.site-logo img {
  /* Mobile-Default: kompakter, damit Header nicht zu hoch wird. Auf Desktop
     wird das Logo per Media-Query unten wieder auf natuerliche Groesse
     angehoben und aus dem Flow rausgenommen. */
  height: 60px;
  width: auto;
  display: block;
}

.site-header__nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

/* Topbar: klein, grau, rechtsbuendig, mit |-Trennern zwischen Items.
   Mobile: ausgeblendet (Items wandern automatisch ins Sheet via
   NavigationExtension → MobileNav topbarItems-Prop). */
.site-header__topbar {
  display: none;
  justify-content: flex-end;
  font-size: var(--text-help);
  color: var(--site-nav-text-muted);
}

/* Topbar-Liste ausrichten und Utility-Klassen der Extension neutralisieren */
.site-header__topbar ul {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-header__topbar li {
  display: flex;
  align-items: center;
}
.site-header__topbar li + li::before {
  content: '|';
  color: #cfcfcf;
  padding: 0 8px;
}
.site-header__topbar a,
.site-header__topbar button {
  padding: 4px 4px;
  background: transparent;
  border-radius: 0;
  font-weight: 400;
  color: var(--site-nav-text-muted);
  transition: color 0.15s;
}
.site-header__topbar a:hover,
.site-header__topbar button:hover {
  color: var(--site-nav-text-hover);
  background: transparent;
}

/* Hauptnav: rechtsbuendig, UPPERCASE, Montserrat 600 */
.site-header__main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.site-header__main nav {
  display: block;
}

.site-header__main nav > ul {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Alle Nav-Items (Links + Dropdown-Trigger) im Kunden-Look.
   Werte 1:1 aus der Kundenseite gemessen (getComputedStyle auf
   www.landesakademie-ochsenhausen.de → nav#header-main-menu a):
   20px / 600 / uppercase / letter-spacing 1.2px / padding 11.5px 15px / #666.
   Kein border-radius (shadcn-Default), kein hover-Kasten. */
.site-header__main nav a,
.site-header__main nav button {
  padding: 11.5px 15px;
  background: transparent;
  border-radius: 0;
  font-family: var(--font-sans);
  /* Nav-Item-Groesse = LAO-UI-Body (20px). Nicht --lao-h-*, weil das
     Chrome-UI ist, kein Content-Heading. */
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #666666;
  transition: color 0.15s;
}

.site-header__main nav a:hover,
.site-header__main nav button:hover,
.site-header__main nav a[aria-current='page'],
.site-header__main nav button[aria-current='page'] {
  color: var(--site-primary);
  background: transparent;
}

/* Der Kunde zeigt bei Dropdown-Items KEIN Chevron (Aktuelles/Kurse/Akademie/
   Über uns oeffnen den Sub-Menue-Popover ohne visuellen Indikator). Das spart
   pro Dropdown ~20px Breite (16px Icon + 4px gap) — insgesamt bei 4 Dropdowns
   ~80px. Ohne den Fix bricht die Nav bei unserem Container (1001px) auf zwei
   Zeilen um. Xeno-Standard bleibt: Chevrons an, weil informativ.

   WICHTIG: Selektor muss auf `nav > ul` scopen, sonst wuerde er auch das
   Burger-Icon (<nav><button aria-label="Menü öffnen"><svg>...) verstecken!
   Der Burger sitzt DIREKT im <nav>, nicht in <nav><ul>. */
.site-header__main nav > ul a svg,
.site-header__main nav > ul button svg {
  display: none;
}
.site-header__main nav > ul a,
.site-header__main nav > ul button {
  gap: 0;
}

/* Letzter Nav-Item: kein padding-right, wie beim Kunden gemessen
   (getComputedStyle → padding: 11.5px 0px 11.5px 15px). Endet buendig
   mit der rechten Kante des Nav-Bereichs. */
.site-header__main nav > ul > li:last-child > a,
.site-header__main nav > ul > li:last-child > button {
  padding-right: 0;
}

/* Dropdown-Menues aus der NavigationExtension nutzen shadcn-DropdownMenu.
   Der Inhalt landet via Portal in body, ausserhalb von .site-header —
   daher hier ueber eine globale Klasse (kein Kunden-Bleed, weil die
   CSS-Datei nur auf dieser Kunden-Website geladen wird). */
[role='menu'] a {
  font-family: var(--font-sans);
  font-size: var(--text-help);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--site-nav-text);
}
[role='menu'] a:hover {
  color: var(--site-nav-text-hover);
}

/* Header-Icons (Login mobile + Warenkorb) rechts vom Menue */
.site-header__main > [class*='navigation-header-icons'],
.site-header__main .navigation-header-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.site-header-portal .site-container {
  justify-content: space-between;
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO – Vollbreite Slideshow am Seiten-Anfang
   ───────────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .hero { height: 400px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION-INTRO (Eyebrow + Title + Lead über Sektionen)
   ───────────────────────────────────────────────────────────────────────── */

.section-intro {
  text-align: center;
  margin-bottom: 48px;
}

.section-intro__eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-help);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--site-primary);
  margin-bottom: 8px;
}

.section-intro__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--foreground);
}

.section-intro__lead {
  max-width: 640px;
  margin: 0 auto;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
}

/* ─────────────────────────────────────────────────────────────────────────
   SECTION-PADDING-HELPER (LAO-Sektion-Abstaende)
   80px vertikal, mobile 48px. Customer kombiniert mit System-Sektion-Klassen.
   ───────────────────────────────────────────────────────────────────────── */

.section-padded {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Kompaktere Sektion — fuer Zwischen-Bloecke die dicht am naechsten stehen
   duerfen (z.B. Cluster-Icons oberhalb der Kursliste). */
.section-padded-sm {
  padding-top: 40px;
  padding-bottom: 24px;
}

@media (max-width: 768px) {
  .section-padded {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .section-padded-sm {
    padding-top: 24px;
    padding-bottom: 16px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   CATEGORY-COLORS (.cat-1 bis .cat-6 — die 6 Cluster-Farben)
   Reihenfolge folgt der Original-Website (Vokal, Multimedia, Instrumental,
   Lehrer, Erzieher, Aktiv). Wird auf Kacheln/Karten als Akzent verwendet.
   ───────────────────────────────────────────────────────────────────────── */

.cat-1 { --cat-color: var(--site-orange); }  /* Vokalkurse */
.cat-2 { --cat-color: var(--site-purple); }  /* Multimediale Kurse */
.cat-3 { --cat-color: var(--site-blue); }    /* Instrumentalkurse */
.cat-4 { --cat-color: var(--site-yellow); }  /* Fortbildung Lehrer*innen */
.cat-5 { --cat-color: var(--site-red); }     /* Fortbildung Erzieher*innen */
.cat-6 { --cat-color: var(--site-green); }   /* Aktiv Musik erleben */

.cat-1, .cat-2, .cat-3, .cat-4, .cat-5, .cat-6 {
  border-top: 4px solid var(--cat-color);
}

/* ─────────────────────────────────────────────────────────────────────────
   SITE-FOOTER
   ───────────────────────────────────────────────────────────────────────── */

/* Footer im Kunden-Look: heller Hintergrund (transparent), grauer Text,
   dicke Trennlinie oben, kleine Padding-Werte. Werte 1:1 aus der
   Kundenseite gemessen (getComputedStyle). */
.site-footer {
  background: transparent;
  color: #666666;
  padding: 35px 0 0;
  margin-top: 60px;
  border-top: var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  font-family: var(--font-serif);
  font-size: var(--text-xs);
}

.site-footer a {
  color: #444444;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--site-primary);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  padding-bottom: 32px;
}

.site-footer__nav h3 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--site-primary);
  margin-bottom: 12px;
}

.site-footer__nav ul li {
  margin-bottom: 6px;
}

.site-footer__nav ul li a {
  font-size: var(--text-xs);
  color: #666666;
}

.site-footer__menu {
  padding: 20px 0;
  border-top: 1px solid var(--lao-panel-divider-hairline);
  font-size: var(--text-xs);
}

.site-footer__bottom {
  padding: 16px 0 24px;
  font-size: var(--text-help);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: #999999;
}

/* Schlanker Footer fuer Portal-Layout (kein voller Footer-Block). */
.site-footer-minimal {
  background: var(--foreground);
  color: var(--background);
  padding: 24px 0;
  margin-top: 80px;
  font-size: var(--text-help);
  opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────────
   BOTTOM-BARS (6 farbige Bars unter dem Footer — LAO-Identitaet)
   Reihenfolge = Cluster-Reihenfolge des Kunden
   (Orange, Violett, Blau, Gelb, Rot, Gruen).
   ───────────────────────────────────────────────────────────────────────── */

.bottom-bars {
  display: flex;
  width: 100%;
}

.bottom-bar {
  flex: 1;
  height: 8px;
}

.bottom-bar-1 { background: var(--site-orange); }
.bottom-bar-2 { background: var(--site-purple); }
.bottom-bar-3 { background: var(--site-blue); }
.bottom-bar-4 { background: var(--site-yellow); }
.bottom-bar-5 { background: var(--site-red); }
.bottom-bar-6 { background: var(--site-green); }

/* ─────────────────────────────────────────────────────────────────────────
   SOCIAL-LINKS
   ───────────────────────────────────────────────────────────────────────── */

.social-links {
  display: flex;
  gap: 8px;
}

.social-links__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--foreground) 8%, transparent);
  transition: background 0.15s;
}

.social-links__item:hover {
  background: var(--site-primary);
}

.social-links__item img {
  width: 18px;
  height: 18px;
}

/* ─────────────────────────────────────────────────────────────────────────
   STAT-CARDS (Kennzahlen auf ueber-uns)
   ───────────────────────────────────────────────────────────────────────── */

.stat-figure {
  font-family: var(--font-serif);
  /* 36px (2.25rem). Bewusst hardcoded: einmaliger Sonderfall (nur Stat-Cards
     auf ueber-uns). Kein eigenes Token, weil das die Heading-Skala fuer eine
     einzige Stelle aufblaehen wuerde. Falls die Kennzahl-Optik spaeter noch
     an anderen Stellen auftaucht, hier auf ein neues Token --lao-h-stat
     umziehen. */
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--site-primary);
  margin: 0;
  line-height: 1.1;
}

.stat-label {
  margin: 8px 0 0;
  font-size: var(--text-help);
  color: var(--muted-foreground);
}

/* ─────────────────────────────────────────────────────────────────────────
   TEAM (Stub bis das Dozenten-Plugin existiert)
   ───────────────────────────────────────────────────────────────────────── */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.team-member {
  text-align: center;
}

.team-member__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 16px;
  object-fit: cover;
  background: var(--muted);
}

.team-member__name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: 4px;
}

.team-member__role {
  font-size: var(--text-help);
  color: var(--muted-foreground);
}

/* ─────────────────────────────────────────────────────────────────────────
   LAO-CATEGORIES-GRID — Cluster-Icons auf der Startseite
   Wrapper: <div class="xeno-categories-grid"><xeno-extension type="categories" ... /></div>
   Die Extension rendert ein grid mit <a><img /><span /></a>. Wir ueberschreiben
   Groessen/Typografie fuer den LAO-Look (grosse farbige Icon-Kreise, kleiner
   Uppercase-Label darunter). Die Icon-PNGs sind bereits als vollflaechig
   farbige Kreise gestaltet, deshalb kein Kreis-Hintergrund noetig.
   ───────────────────────────────────────────────────────────────────────── */

/* Grid-Container aufmachen. Tailwind rendert grid-cols-2 / sm:cols-3 / md:cols-4
   / lg:cols-6 — wir belassen das Responsive-Verhalten und passen nur Abstaende an. */
.xeno-categories-grid > div {
  gap: 32px 24px;
}

/* Kachel: kein Hover-Shift, kein Shadow. Icons sind der Star, sie sollen ruhig stehen. */
.xeno-categories-grid > div > a {
  padding: 8px 4px;
  border-radius: 0;
  transform: none;
  transition: opacity 0.15s;
}
.xeno-categories-grid > div > a:hover {
  transform: none;
  box-shadow: none;
  opacity: 0.82;
}

/* Icon-Kreis: gross. Referenz-Design zeigt ~140px, wir bleiben responsive. */
.xeno-categories-grid img {
  width: 140px;
  height: 140px;
  max-width: 100%;
  border-radius: 50%;
  object-fit: contain;   /* Icons sind quadratisch mit transparentem Rand — contain haelt sie mittig */
  background: transparent;
}

@media (max-width: 640px) {
  .xeno-categories-grid img { width: 110px; height: 110px; }
}

/* Label unter dem Icon: Kunden-Original ist Montserrat 16px weight 500
   UPPERCASE mit weichem grau (#666). Vorher zu klein (12px) und zu fett
   (600) — dadurch wirkten die Kacheln optisch kleinlich. */
.xeno-categories-grid span {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-nav-text);
  line-height: 1.35;
}

/* Compact-Variante: kleinere Icons fuer den Sekundaer-Kontext, z.B. als
   Kategorie-Chooser oberhalb der Kursliste. Label bleibt aber lesbar.
   112px live gemessen an landesakademie-ochsenhausen.de/de/kurse. */
.xeno-categories-grid--compact img { width: 112px; height: 112px; }
.xeno-categories-grid--compact > div { gap: 20px 16px; }
.xeno-categories-grid--compact span { font-size: var(--text-xs); }
@media (max-width: 640px) {
  .xeno-categories-grid--compact img { width: 84px; height: 84px; }
}

/* ─────────────────────────────────────────────────────────────────────────
   LAO-DATES-LIST — Kurs-Liste im LAO-Look
   Wrapper: <div class="xeno-dates-list"><xeno-extension type="content" config="dates-list" /></div>

   Die ContentExtension rendert mit layout="list" pro Kurs eine <li><a>
   (ListLayout.tsx) und darin unser Custom-Template
   (_plugins/dates-list.list.template.html) mit <article class="xeno-date-row">.
   Wir stylen hier die Row-Klassen selber; die generischen article-Regeln
   des System-Default-Templates greifen nicht mehr, weil wir das Template
   ersetzt haben.
   ───────────────────────────────────────────────────────────────────────── */

/* Zeilenlink: kein Link-Underline, Farbe wird von den inneren Elementen selbst gesetzt.
   `:not([data-slot])` schuetzt shadcn-Komponenten (z.B. Pagination-Links,
   die ebenfalls als li > a innerhalb dieses Wrappers liegen) davor, hier
   auf display:block gezwungen zu werden. */
.xeno-dates-list li > a:not([data-slot]) { display: block; text-decoration: none; }

/* Kein margin-top an der <ul>. Die Kurs-Liste im .xeno-content-results-Panel
   und das Filter-Panel sind Grid-Geschwister in .xeno-content-layout — sie
   starten bei derselben y-Position (border-top-Kante). Ein margin-top wuerde
   die erste Zeile nach unten schieben und die Bündigkeit zerstoeren. */
.xeno-dates-list ol,
.xeno-dates-list ul {
  margin-top: 0;
}

/* Eintrag-Optik: transparente Zeile mit 5px-Trennlinie OBEN in der halb-
   transparenten Panel-Divider-Farbe (--lao-entry-divider). Das Kunden-
   Original nutzt border-top pro Eintrag; die Linie beim ERSTEN Eintrag
   wird unterdrueckt (siehe naechste Regel), weil dort entweder die
   Panel-Kappe (.xeno-content-results border-top) oder die Section-Title-
   Linie (.xeno-detail__section-title border-bottom) darueber sitzt.
   Damit entstehen nirgends Doppel-Striche, und die Liste "klammert" sich
   sauber an ihre Container-Linie.

   BEWUSST kein Hintergrund — die Liste wirkt so leichter und ist naeher
   am Kunden-Original als eine Kette hellgrauer Kastenzeilen. Die Grid-
   Kachel (.xeno-date-tile) behaelt --lao-entry-bg als Kachel-BG, weil
   Kacheln ohne BG im Grid verloren wirken. */
.xeno-date-row {
  padding: 22px 15px;
  border-top: var(--lao-panel-divider-w) solid var(--lao-entry-divider);
  background: transparent;
  transition: background 0.15s;
}

/* Erste Zeile jeder Kurs-Liste: keine border-top. Ohne diese Regel ent-
   staende ein Doppel-Strich mit der Container-Linie darueber (Panel-Kappe
   an .xeno-content-results ODER Section-Title-Bottom-Border). Deckt sowohl
   den Fall mit umhuellendem <a> (Kursliste via ListLayout) als auch ohne <a>
   (Persons-Detail-Template, kein Link auf der Zeile) ab. */
.xeno-dates-list > li:first-child > a > .xeno-date-row,
.xeno-dates-list > li:first-child > .xeno-date-row {
  border-top: 0;
}

/* Hover: dezenter grauer Ton als Klickbarkeits-Feedback — reicht als
   Hint, ohne die Ruhe der Liste zu brechen. */
.xeno-date-row:hover { background: var(--lao-entry-bg); }
.xeno-date-row:hover .xeno-date-row__cta { background: var(--site-primary-hover); }

/* Kein Margin/Padding auf <li>-Wrappern — die Trennung uebernimmt allein
   die 5px-border-top auf .xeno-date-row. Ohne dieses Reset kaeme irgendwo
   in der Kaskade ein margin-bottom von 8px durch (Prosa-/UA-Defaults oder
   Space-Utility-Reste), der zwischen den Kurs-Zeilen als sichtbarer Gap
   auftaucht und Hover-Farbe zerreisst. :has()-Kontext greift NUR wenn der
   <li> eine Kurs-Zeile enthaelt — generische Listen (Dozenten-Uebersicht,
   andere Sources) bleiben unberuehrt. */
.xeno-dates-list > li:has(.xeno-date-row) {
  margin: 0 !important;
  padding: 0;
}

/* Datumsspalte: breit genug fuer lange Zeitraeume wie "24.07.-07.08.2026"
   (Janson 20px, 17 Zeichen). Bei 150px brach das Datum um.

   align-items: start (nicht baseline): Bei baseline richtet das Grid die
   Datumsspalte an der Baseline des Kurs-Titels aus — nicht an der Kategorie.
   Wenn eine Kategorie vor dem Titel steht, entsteht dadurch sichtbarer Leerraum
   ueber dem Kategorie-Text (gemessen: 4px), obwohl weder margin noch padding
   auf .xeno-date-row__cat gesetzt sind. start haelt Datum und Kategorie buendig
   am oberen Rand der Zeile; die Bottom-Row bleibt bei center (Buttons). */
.xeno-date-row__row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  align-items: start;
}

.xeno-date-row__row--bottom {
  margin-top: 8px;
  align-items: center;
}

@media (max-width: 640px) {
  .xeno-date-row { padding: 16px 15px; }
  .xeno-date-row__row { grid-template-columns: 1fr; gap: 4px; }
  .xeno-date-row__row--bottom { margin-top: 10px; }
}

/* Datum-/Verfuegbarkeit-Spalte: Montserrat, kompakt. */
/* Datum-Spalte: Janson (Serif), 20px, weight 500. Alle drei Werte vom
   Kunden gemessen. Bei uns musste explizit ff/fs/fw gesetzt werden, weil
   der Body-Default Weight 400 ist — Kunde nutzt hier bewusst 500. */
.xeno-date-row__col-date {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--site-nav-text);
  line-height: 1.35;
}

.xeno-date-row__col-body { min-width: 0; }

.xeno-date-row__date-text {
  display: inline-block;
  line-height: 1.35;
  font-weight: 500;
}

/* Kategorie-Text in Cluster-Farbe (kein Badge, nur Text).
   Kunden-Original: Montserrat 16px weight 600 UPPERCASE. */
.xeno-date-row__cat {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 2px;
}

/* Kurs-Titel: Montserrat (Sans), 20px weight 500 - Kunden-Original.
   HINWEIS: es gab frueher eine widerspruechliche zweite Regel weiter unten
   in der Datei (body .xeno-date-row__title mit Sans 20px 500). Die wurde
   entfernt, damit diese eine Definition die alleinige Wahrheit ist. */
.xeno-date-row__title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--site-nav-text);
}

/* Untertitel unter dem Titel: Janson (Serif), 20px weight 500 wie Kunde. */
.xeno-date-row__subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--site-nav-text);
  line-height: 1.35;
  margin-top: 2px;
}

/* Placeholder-Optik fuer den Untertitel (nur wenn ein Termin keinen echten
   subtitle hat). Kursiv + ausgegraut, damit sofort sichtbar ist "hier fehlt
   noch echter Text". */
.xeno-date-row__subtitle--placeholder {
  color: #a0a0a0;
  font-style: italic;
}

/* Verfuegbarkeit ("Freie Plaetze: N" / "AUSGEBUCHT" / "EXTERN BUCHBAR").
   Kunden-Original: Montserrat 16px weight 600 - KEIN Uppercase.
   AUSGEBUCHT/EXTERN BUCHBAR sind bereits als Text in Grossbuchstaben
   geliefert, deshalb keine text-transform-Aufblaehung noetig. */
.xeno-date-row__availability {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}

.xeno-date-row__availability--open { color: var(--site-nav-text-muted); }
.xeno-date-row__availability--full { color: var(--site-red); }

/* Wenn die Zahl bekannt ist (z. B. "Freie Plaetze: 9") heben wir die Zahl selbst
   ueber ein <strong> in dunklem Nav-Text-Ton ab - analog zum Kunden-Original,
   wo die Ziffer fett und dunkler steht als das umgebende Uppercase-Label. */
.xeno-date-row__availability--open strong {
  color: var(--site-nav-text);
  font-weight: 700;
  margin-left: 4px;
}

/* INFO-Button: kleiner gruener Rechteck-Button (Kunden-Original).
   Typografie exakt vom Kunden: Montserrat 16px weight 500 UPPERCASE. */
.xeno-date-row__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--site-primary);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
}

.xeno-date-row__cta-arrow {
  font-size: var(--text-help);
  line-height: 1;
  margin-right: 1px;
}

/* Wenn INFO + DIREKT BUCHEN nebeneinander stehen: kleiner Abstand + Wrap. */
.xeno-date-row__col-body--cta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Zweiter CTA ("Direkt buchen") - Outline-Variante: transparenter Hintergrund,
   gruene Border + gruene Schrift. Damit visuell klar vom soliden INFO-Button
   unterscheidbar, ohne eine dritte Farbe (gelb/orange) ins Spiel zu bringen.
   Beim Hover fuellt sich der Button gruen wie der INFO-Button. */
.xeno-date-row__cta--book {
  background: transparent;
  color: var(--site-primary);
  border: 1px solid var(--site-primary);
  /* Border kostet 1px Innenhoehe - Padding um 1px reduzieren, damit die
     Buttons trotz Border optisch gleich hoch bleiben. */
  padding: 3px 11px;
}
.xeno-date-row:hover .xeno-date-row__cta--book {
  background: var(--site-primary);
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTENT-LAYOUT — 2/3 Ergebnis-Panel links + 1/3 Filter-Panel rechts.
   Toolbar (Pagination + View-Switcher) belegt Zeile 1 nur in der Content-
   Spalte; die Filter-Spalte oben bleibt leer (`.`-Placeholder in
   grid-template-areas). Zweite Pagination unten ueber die volle Breite.

   Vier direkte Kinder in .xeno-content-layout:
     - .xeno-content-toolbar                              (Zeile 1, Content-Spalte)
         └ .xeno-content-pagination.xeno-content-pagination--top  (links)
         └ .xeno-content-view-switcher                            (rechts der Content-Spalte)
     - .xeno-content-results                              (Zeile 2 links, 5px grau)
     - .xeno-filter-panel                                 (Zeile 2 rechts, 5px gruen)
     - .xeno-content-pagination.xeno-content-pagination--bottom  (Zeile 3, volle Breite)

   Warum Toolbar nicht ueber die volle Breite? Wuerde die Toolbar beide
   Spalten belegen, saesse der View-Switcher via `space-between` am rechten
   Layout-Rand = direkt ueber der Filter-Box. Durch Beschraenkung auf die
   Content-Spalte wandert der Switcher an den rechten Rand der Content-
   Spalte; zwischen Switcher und Filter-Box sitzt der 32px column-gap.

   Zwei parallele 5px-Kappen auf gleicher Y-Hoehe, unterschiedliche Farben
   (Kunden-Original): weil sowohl .xeno-content-results als auch .xeno-
   filter-panel in Zeile 2 des Grids sitzen, starten ihre border-top-
   Kappen zwingend auf derselben Y-Koordinate — unabhaengig von der
   Toolbar-Hoehe darueber. Content-Bereich traegt die neutrale graue
   System-Trennlinie, das Filter-Panel den gruenen Kunden-Akzent. Durch
   den column-gap sind die Kappen visuell getrennt.

   Toolbar ist ein Flex-Wrapper (System-Default `justify-content: space-
   between`) — Pagination links, Switcher rechts. Weil beide im selben
   DOM-Element sitzen, bleiben sie im Responsive-Modus zwingend
   nebeneinander (bzw. wickeln nur miteinander um, nie durch fremde
   Elemente getrennt).
   ───────────────────────────────────────────────────────────────────────── */

.xeno-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(240px, 300px);
  grid-template-areas:
    'toolbar .'
    'results filter'
    'pagination-bottom pagination-bottom';
  column-gap: 32px;
  row-gap: 12px;
  align-items: start;
}

.xeno-content-toolbar            { grid-area: toolbar; }
.xeno-content-pagination--bottom { grid-area: pagination-bottom; justify-self: start; margin-top: 12px; }
.xeno-content-results            { grid-area: results; min-width: 0; }
.xeno-filter-panel               { grid-area: filter; min-width: 0; }

.xeno-content-results {
  border-top: var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  padding-top: 12px;
}

/* Breakpoint 900px = LAO-spezifische Umschaltung: Content-Spalte + Filter-
   Sidebar stapeln sich unter 900px in eine Spalte (Filter zuerst, dann
   Ergebnisliste). Der Wert steht als Literal in der Media-Query, weil
   Media-Queries keine CSS-Custom-Properties aufloesen koennen — Media-
   Bedingungen werden ausgewertet, bevor der Cascade die Variablen kennt. */
@media (max-width: 900px) {
  .xeno-content-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'toolbar'
      'filter'
      'results'
      'pagination-bottom';
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   LAO-FILTER-PANEL — rechte Filter-Sidebar
   Neutraler Default (grauer BG + grauer 5px-Divider). Themen-Farbwelt kommt
   ueber den .lao-page-<name>-Wrapper (siehe Bloecke weiter unten):
     .lao-page-veranstaltungen .xeno-filter-panel → Kurs-Grün
     .lao-page-konzerte       .xeno-filter-panel → Konzert-Blau
   So bleibt der Default neutral — falls eine Seite ohne Wrapper einen
   Filter zeigt, faellt sie nicht in eine "Kurs-Farbwelt" zurueck.
   ───────────────────────────────────────────────────────────────────────── */

.xeno-filter-panel {
  background: var(--lao-panel-bg);
  padding: 24px 24px 22px;
  border-top: var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
}

/* Filter-Titel = Mainbox-H3: Sans 28px 500 (Kunden-Original).
   Trenn-Linie darunter bleibt subtil, damit die 5px-Top-Border weiter
   der visuelle Hauptrahmen des Panels ist. */
/* Panel-Titel: "Angebot filtern". 20px reicht als Sidebar-Ueberschrift —
   28px war zu marketing-nahe und liess das Panel unruhig wirken. Keine
   Bottom-Border mehr: die Labels der Felder tragen die Gliederung. */
.xeno-filter-panel__title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--site-nav-text);
  margin: 0 0 16px;
  text-transform: none;
}

.xeno-filter-panel__field { margin-bottom: 14px; }

/* Filter-Labels ("DOZENTENSUCHE", "ZEITRAUM VON", ...): Kunden-Original
   ist Montserrat 16px weight 400 UPPERCASE — nicht 11px/700. */
.xeno-filter-panel__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--site-nav-text);
  margin-bottom: 4px;
}

/* Filter-Inputs: 16px wie beim Kunden. Vorher 13px war zu klein und
   passte optisch nicht zum 16px-Label darueber. */
.xeno-filter-panel__input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #cfcfcf;
  border-radius: 0;
  background: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--site-nav-text);
  line-height: 1.4;
}

.xeno-filter-panel__input:focus {
  outline: 2px solid var(--site-primary);
  outline-offset: -2px;
  border-color: var(--site-primary);
}

/* shadcn Select-Trigger im Panel: gleiche Optik wie die anderen Inputs.
   !important, weil der Trigger vorformatierte Utility-Klassen mitbringt
   (border, radius, height), die wir sonst nicht sicher ueberschreiben. */
.xeno-filter-panel__select {
  border-radius: 0 !important;
  border: 1px solid #cfcfcf !important;
  background: #ffffff !important;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  height: auto;
  padding: 8px 10px;
}

/* Submit-Button: konsistent zum INFO-Button auf der gleichen Seite —
   default gefuellt in der Kontext-Primaerfarbe (gruen bei Kursen, blau
   bei Konzerten via .lao-page-konzerte-Override weiter unten). Damit hat
   die Sidebar dieselbe Farbwelt wie die INFO-Buttons in der Liste; kein
   isolierter Outline-Button, der aus dem Rahmen faellt. */
.xeno-filter-panel__submit {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 16px;
  background:   var(--site-primary);
  border:       0;
  color:        #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}

.xeno-filter-panel__submit:hover:not(:disabled) {
  background: var(--site-primary-hover);
}

.xeno-filter-panel__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* ─────────────────────────────────────────────────────────────────────────
   LAO-BUTTON-SYSTEM — EIN Look fuer ALLE Button-Quellen
   ─────────────────────────────────────────────────────────────────────────
   Auf der Website gibt es drei Button-Quellen:
     1. .xeno-btn*           — Xenohtml (Startseite, Footer, CMS-Seiten)
     2. [data-slot='button'] — shadcn React (Cart, Detail, Portal)
     3. .xeno-filter-panel__submit / .xeno-date-row__cta / .xeno-date-tile__btn
        — eigene semantische Klassen (bereits oben/unten auf denselben Look)

   Alle drei sollen denselben Look haben: rechteckig, Montserrat 16px 500,
   uppercase, letter-spacing 0.04em, padding 10px 16px. Kein Radius, kein
   Shadow, keine Size-Varianten (sm/lg werden neutralisiert).

   Ausnahmen: Icon-Only, ghost, link — die bleiben kompakt/subtil. */

/* Shared Base — Xenohtml + shadcn (ohne Icon/Ghost/Link) */
body .xeno-btn:not(.xeno-btn-icon):not(.xeno-btn-ghost):not(.xeno-btn-link),
body [data-slot='button']:not([data-size^='icon']):not([data-variant='ghost']):not([data-variant='link']) {
  height:          auto;
  border-radius:   0;
  padding:         10px 16px;
  font-family:     var(--font-sans);
  font-size:       var(--text-xs);
  font-weight:     500;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  box-shadow:      none;
  line-height:     1.2;
  transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

/* Size-Varianten (sm/lg) neutralisieren — LAO kennt nur EINE Button-Groesse. */
body .xeno-btn-sm,
body .xeno-btn-lg {
  height:     auto;
  padding:    10px 16px;
  font-size:  var(--text-xs);
}

/* Default / Primary — gefuellt in Site-Primaerfarbe (gruen) */
body .xeno-btn-default,
body [data-slot='button'][data-variant='default'] {
  background: var(--site-primary);
  color:      #ffffff;
  border:     0;
}
body .xeno-btn-default:hover,
body [data-slot='button'][data-variant='default']:hover:not(:disabled) {
  background: var(--site-primary-hover);
  color:      #ffffff;
}

/* Outline — transparent + Primaer-Border, Hover fuellt */
body .xeno-btn-outline,
body [data-slot='button'][data-variant='outline'] {
  background: transparent;
  color:      var(--site-primary);
  border:     1px solid var(--site-primary);
}
body .xeno-btn-outline:hover,
body [data-slot='button'][data-variant='outline']:hover:not(:disabled) {
  background: var(--site-primary);
  color:      #ffffff;
  border-color: var(--site-primary);
}

/* Karten-Kontext: Outline-Buttons in farbigen Cards uebernehmen die
   Card-Farbe (Lernen=gruen, Erleben=blau, Gastieren=rot, Schloss=gelb).
   So bleibt der Button in der Farbwelt seiner Box, statt immer Site-Gruen. */
body .xeno-card--accent .xeno-btn-outline {
  color: var(--lao-topic-kurse-border);
  border-color: var(--lao-topic-kurse-border);
}
body .xeno-card--accent .xeno-btn-outline:hover {
  background: var(--lao-topic-kurse-border);
  border-color: var(--lao-topic-kurse-border);
  color: #ffffff;
}

body .xeno-card--info .xeno-btn-outline {
  color: var(--lao-topic-konzerte-border);
  border-color: var(--lao-topic-konzerte-border);
}
body .xeno-card--info .xeno-btn-outline:hover {
  background: var(--lao-topic-konzerte-border);
  border-color: var(--lao-topic-konzerte-border);
  color: #ffffff;
}

body .xeno-card--warn .xeno-btn-outline {
  color: var(--lao-status-warn-border);
  border-color: var(--lao-status-warn-border);
}
body .xeno-card--warn .xeno-btn-outline:hover {
  background: var(--lao-status-warn-border);
  border-color: var(--lao-status-warn-border);
  color: #ffffff;
}

body .xeno-card--danger .xeno-btn-outline {
  color: var(--lao-status-danger-border);
  border-color: var(--lao-status-danger-border);
}
body .xeno-card--danger .xeno-btn-outline:hover {
  background: var(--lao-status-danger-border);
  border-color: var(--lao-status-danger-border);
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────
   FILTER-PANEL & KACHEL-BUTTON KONTEXT-SKINS — pro Kunden-Seite ein
   anderer Farb-Ton. Symmetrisches Muster: jede Seite bekommt ihre
   Themenwelt ueber den `.lao-page-<name>`-Wrapper. Der Default in
   `.xeno-filter-panel` (weiter oben) bleibt neutral.

   Architektur: das Core-CMS kennt KEINE Farb-Semantik. Der Kunde
   entscheidet allein per CSS-Selektor pro Seite. Die JSON-Config einer
   Plugin-Seite gibt via `settings.wrapperClass` eine freie Kunden-Klasse
   an (z.B. `lao-page-veranstaltungen` / `lao-page-konzerte`), die auf
   den Wrapper landet. Hier unten faerbt das Kunden-CSS dann seine Filter-
   Sidebar und Kachel-Buttons in die passende Themenwelt — ohne Anfassen
   des Core-TSX.

   Themenwelten:
     Kurse     (/veranstaltungen) → gruene Farbwelt (--lao-topic-kurse-*)
     Konzerte  (/konzerte)        → blaue Farbwelt  (--lao-topic-konzerte-*)

   `.lao-ctx-<name>` sind Container-Klassen fuer Kontext-Zonen ausserhalb
   der Listen-Seite (z.B. Kurs-Karussell auf der Startseite). So bleibt
   die Farbwelt konsistent, egal wo das Widget eingebettet ist.
   ───────────────────────────────────────────────────────────────────────── */

/* Kurse — gruene Farbwelt */
.lao-page-veranstaltungen .xeno-filter-panel {
  background:       var(--lao-topic-kurse-bg);
  border-top-color: var(--lao-topic-kurse-border);
}
.lao-page-veranstaltungen .xeno-filter-panel__input:focus {
  border-color:  var(--lao-topic-kurse-border);
  outline-color: var(--lao-topic-kurse-border);
}
.lao-page-veranstaltungen .xeno-filter-panel__submit {
  background: var(--lao-topic-kurse-border);
}
.lao-page-veranstaltungen .xeno-filter-panel__submit:hover:not(:disabled) {
  background: var(--lao-topic-kurse-hover);
}
.lao-page-veranstaltungen .xeno-date-tile__btn,
.lao-ctx-kurse .xeno-date-tile__btn {
  background: var(--lao-topic-kurse-border);
}

/* Konzerte — blaue Farbwelt */
.lao-page-konzerte .xeno-filter-panel {
  background:       var(--lao-topic-konzerte-bg);
  border-top-color: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte .xeno-filter-panel__input:focus {
  border-color:  var(--lao-topic-konzerte-border);
  outline-color: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte .xeno-filter-panel__submit {
  background: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte .xeno-filter-panel__submit:hover:not(:disabled) {
  background: var(--lao-topic-konzerte-hover);
}
.lao-page-konzerte .xeno-date-tile__btn,
.lao-ctx-konzerte .xeno-date-tile__btn {
  background: var(--lao-topic-konzerte-border);
}

/* Listen-Ansicht bei Konzerten: INFO-Button + "Direkt buchen" muessen dieselbe
   blaue Farbwelt haben wie der Grid-INFO-Button und die Filter-Sidebar dieser
   Seite. Ohne diesen Skin bleibt .xeno-date-row__cta beim globalen Gruen —
   dann sieht die Listenansicht anders aus als die Grid-Ansicht der gleichen
   Seite. Kurse (/veranstaltungen) brauchen keinen Override, weil dort ohnehin
   das globale Gruen greift. */
.lao-page-konzerte .xeno-date-row__cta {
  background: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte .xeno-date-row:hover .xeno-date-row__cta {
  background: var(--lao-topic-konzerte-hover);
}
.lao-page-konzerte .xeno-date-row__cta--book {
  background:   transparent;
  color:        var(--lao-topic-konzerte-border);
  border-color: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte .xeno-date-row:hover .xeno-date-row__cta--book {
  background: var(--lao-topic-konzerte-border);
  color:      #ffffff;
}

/* Konzert-Detailseite (konzert.xenohtml → dates-konzerte-detail.template.html):
   Farbige Detail-Elemente auf die blaue Konzert-Farbwelt ummuenzen — ohne
   diese Overrides bleiben Back-Link-Hover, Beschreibungs-Links,
   Verfuegbarkeits-Label und Ticket-Button auf dem gruenen LAO-Standard,
   was zwischen Konzertliste (blau) und Konzert-Detail (gruen) einen
   optischen Bruch erzeugt. */
.lao-page-konzerte .xeno-detail__back:hover,
.lao-page-konzerte .xeno-detail__description a,
.lao-page-konzerte .xeno-detail__availability {
  color: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte [data-slot='button'][data-variant='default'] {
  background: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte [data-slot='button'][data-variant='default']:hover:not(:disabled) {
  background: var(--lao-topic-konzerte-hover);
}

/* Such-/Filter-Toolbar der ContentExtension (Fallback wenn keine Sidebar). */
.xeno-dates-list input[type='search'],
.xeno-dates-list input[type='text'] {
  border-radius: 0;
  border-color: #cfcfcf;
}

.xeno-dates-list input[type='search']:focus,
.xeno-dates-list input[type='text']:focus {
  border-color: var(--site-primary);
  outline-color: var(--site-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   LAO-DATES-DETAIL — Kurs-Detailseite im LAO-Look
   Wrapper: <div class="xeno-dates-detail"><xeno-extension type="detail" ... /></div>

   Das System-Default-Template (detail-dates.template.html) ist bereits nach
   LAO-Referenzdesign gebaut: 2/3-Content + 1/3-Sidebar, Anmelde-Button in
   bg-primary (= LAO-Gruen ueber unser Token-Mapping), Sidebar-Zeilen mit
   Uppercase-Labels. Wir schaerfen nur Typografie und ein paar Farben.
   ───────────────────────────────────────────────────────────────────────── */

/* Kursnummer-Eyebrow oben (item.meta.catalog_name): Kunden-Gruen statt grau. */
.xeno-dates-detail header p.uppercase:first-of-type {
  color: var(--site-primary);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* Grosser Titel: Janson Text, dunkel, mehr Luft. Nutzt dieselbe Hero-
   Groesse wie .xeno-detail__title (--text-xl = 44) — beide Detail-Header
   sind damit konsistent. Mobile faellt ebenfalls auf die Skala. */
.xeno-dates-detail header h1 {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--site-nav-text);
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .xeno-dates-detail header h1 { font-size: var(--text-xl); }
}

/* Subtitle unter dem Titel. */
.xeno-dates-detail header p.text-lg {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  margin-bottom: 20px;
}

/* Kategorie-Badges unter dem Titel: Kunden-Look (kein Border, farbiger Chip). */
.xeno-dates-detail header span[class*='rounded-full'] {
  background: var(--site-primary);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: var(--text-help);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
}

/* Zwischenüberschriften ("Dozentinnen & Dozenten", "Weitere Kursangebote"). */
.xeno-dates-detail h2 {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--site-nav-text);
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--site-primary);
}

/* Sidebar-Card: klarer Rand, kein Radius (Kunden-Design ist eckig). */
.xeno-dates-detail aside > div:first-child {
  border-radius: 0;
  border-color: #eaeaea;
  background: #fafafa;
}

/* Sidebar-Labels (Uppercase-Eyebrows) in gedämpftem Grau, gleiches Style-Feeling wie Topbar. */
.xeno-dates-detail aside p.uppercase {
  color: var(--site-nav-text-muted);
  font-size: var(--text-help);
  letter-spacing: 0.08em;
}

/* Meldeschluss-/Verfuegbarkeits-Text in Cluster-Gruen. */
.xeno-dates-detail aside p.text-primary {
  color: var(--site-primary);
}

/* Anmelde-Button (cart-add) unterhalb der Sidebar: volle Breite, LAO-Gruen,
   grosser Touch-Target, Kunden-Typografie. */
.xeno-dates-detail aside button,
.xeno-dates-detail aside a[role='button'] {
  border-radius: 0;
  padding: 14px 24px;
  font-family: var(--font-sans);
  font-size: var(--text-help);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--site-primary);
  color: #ffffff;
  border: 0;
  transition: background 0.15s;
}

.xeno-dates-detail aside button:hover,
.xeno-dates-detail aside a[role='button']:hover {
  background: var(--site-primary-hover);
}

/* Dozentenkarten (Portrait links, Text rechts): eckig, dezenter Rand. */
.xeno-dates-detail article > div div[class*='rounded-xl'][class*='border'] {
  border-radius: 0;
  border-color: #eaeaea;
}

/* ═════════════════════════════════════════════════════════════════════════
   DETAIL-SEITE (dates-detail.template.html)
   1:1-Klon der Kunden-Kurs-Detailseite. Eigene BEM-Klassen (.xeno-detail__*)
   damit das komplette Layout autark von Tailwind-Utilities steuerbar ist.
   Kein Rahmen um die Sidebar, alles auf color #666666 (Kunden-Standard),
   Montserrat fuer Labels/Headings, Janson Text fuer Werte + Dozentennamen.
   ═════════════════════════════════════════════════════════════════════════ */

.xeno-detail {
  color: #666666;
  font-family: var(--font-serif);
}

/* Zurueck-Balken oben: Link links, darunter horizontale 5px-Trennlinie
   (Mainbox-System - identisch dick wie die Grau-Linie ueber der Kurs-Liste
   und der Gruen-Linie ueber der Filter-Sidebar, damit die ganze Website
   ein einheitliches horizontales Raster hat). */
.xeno-detail__back-bar {
  padding-bottom: 18px;
  border-bottom: var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  margin-bottom: 40px;
}
.xeno-detail__back {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: #666666;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.xeno-detail__back:hover { color: var(--site-primary); }

/* 2-Spalten-Grid: 2/3 Hauptbereich + 1/3 Sidebar (Kunden-Proportion). */
.xeno-detail__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 900px) {
  .xeno-detail__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* Auto-Kollaps auf einspaltig, wenn keine Sidebar existiert (z. B. Dozent-
   Detail ohne Portrait). Ohne diese Regel wuerde die 33%-Sidebar-Spalte
   leer reserviert bleiben und der Content-Bereich waere schmal gequetscht.
   :has() wird von allen aktuellen Browsern unterstuetzt (Chrome/Safari/FF
   seit 2022/23). */
.xeno-detail__grid:not(:has(> .xeno-detail__sidebar)) {
  grid-template-columns: 1fr;
}

/* Header-Zeile: Cluster-Icon (rund, farbig) + Cluster-Name */
.xeno-detail__catbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.xeno-detail__cat-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--site-primary);
  flex-shrink: 0;
  overflow: hidden;
}
.xeno-detail__cat-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.xeno-detail__catname {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #666666;
  margin: 0;
  line-height: 1.2;
}

/* H1 Kurstitel auf allen Detail-Seiten (Kurs, Konzert, Dozent).
   Montserrat 500, kein Serif (Kunden-Original). Groesse kommt aus der
   Skala: --text-xl = 44 in lao-tokens.css. Mobile-Verkleinerung als
   Responsive-Override (34 sprengt die Skala nicht, sondern ist ein
   Breakpoint-spezifischer Wert). */
.xeno-detail__title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 500;
  color: #666666;
  margin: 0 0 12px;
  line-height: 1.1;
}
@media (max-width: 900px) {
  .xeno-detail__title { font-size: 34px; }
}

.xeno-detail__subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 400;
  color: #666666;
  margin: 0 0 24px;
  line-height: 1.4;
}

.xeno-detail__description {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: #666666;
  line-height: 1.55;
  margin-bottom: 40px;
}
.xeno-detail__description p { margin: 0 0 1em; }
.xeno-detail__description p:last-child { margin-bottom: 0; }
.xeno-detail__description a { color: var(--site-primary); text-decoration: none; }
.xeno-detail__description a:hover { text-decoration: underline; }

/* Section-Titel ("Dozenten", "Gebuehren", "Aktuelle Kurse mit …", …) mit
   5px-Linie DARUNTER. Auf der Kunden-Website trennt die dicke Linie das
   Kapitel vom folgenden Inhalt (Titel oben, Linie darunter, Content).
   Bewusst KEIN uppercase und moderate Groesse (16px) — der Titel soll
   klare Section-Grenze markieren, aber nicht mit dem H1-Titel oder
   Content-Titeln konkurrieren. Uppercase liess ihn wuchtiger wirken als
   noetig und stand im Widerspruch zur Kunden-Vorlage. */
/* Spezifitaets-Boost: als `h2.xeno-detail__section-title` geschrieben, damit
   die generische `h2:not([class*="text-"])`-Regel (32px, Zeile 96) nicht
   gewinnt. Ohne den Elementselektor haette sie hoehere Spezifitaet und der
   Section-Titel bliebe 32px statt der hier gewuenschten 16px. */
h2.xeno-detail__section-title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  color: #666666;
  margin: 32px 0 24px;
  padding: 0 0 16px;
  border-bottom: var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
}

/* Listen-Portrait (Dozenten-Kachel in /dozenten). Runder 1:1-Container mit
   object-cover -- wenn das Original ein Portrait (2:3) ist, wuerde die
   Standard-object-position (center) den Kopf abschneiden. object-position:top
   haelt den Kopf im sichtbaren Kreis. Eigene Klasse statt Tailwind-Utility,
   weil Templates in public/uploads/ nicht vom Tailwind-Scanner erfasst werden
   -- object-top im Template landet sonst nicht im generierten CSS. */
.xeno-dozent__list-img {
  object-position: top center;
}

.xeno-detail__dozenten { margin-top: 32px; }

.xeno-dozent {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
}
@media (max-width: 640px) {
  .xeno-dozent { grid-template-columns: 120px 1fr; gap: 16px; }
}

/* Foto-Container: Initialen als Base-Layer, Image (wenn vorhanden) legt sich
   drueber und ueberdeckt sie komplett - so muss das Template keine
   verschachtelten {{#if}} bauen. */
.xeno-dozent__foto {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: #f0f0f0;
  overflow: hidden;
}
.xeno-dozent__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #999999;
  letter-spacing: 0.05em;
}
.xeno-dozent__foto img,
.xeno-dozent__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xeno-dozent__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.xeno-dozent__name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: #666666;
  line-height: 1.2;
  margin-bottom: 4px;
}
.xeno-dozent__link {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  color: var(--site-primary);
  text-decoration: none;
  line-height: 1.4;
}
.xeno-dozent__link:hover { text-decoration: underline; }
.xeno-dozent__bio {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  color: #666666;
  line-height: 1.55;
  margin-top: 12px;
}
.xeno-dozent__bio p { margin: 0 0 0.8em; }
.xeno-dozent__bio p:last-child { margin-bottom: 0; }

/* SIDEBAR: kein Rahmen, kein Divider, nur Label + Wert stacked */
.xeno-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 4px;
}

/* Portrait in der Personen-Detail-Sidebar: natuerliches Bild-Ratio (Portrait,
   Landscape, quadratisch — alles OK), Container-Breite gedeckelt bei 240px.
   1:1 nachgebaut vom Kunden-CMS (landesakademie-ochsenhausen.de/de/kurse/dozenten/*):
   Container ~240px, Bild width:100% + height:auto, kein aspect-ratio-Zwang.
   - Kleines Original bleibt in Original-Aufloesung (kein Hochskalieren).
   - Grosses Original wird per max-width auf 240px begrenzt, Hoehe folgt Ratio.
   - Fallback ohne Bild (nur Initialen): 2/3-Rahmen bleibt via :not(:has(img)),
     damit die Initialen-Base-Layer weiter sichtbar Flaeche hat.
   Betrifft NUR die Personen-Detail-Sidebar - die Dozentenkarten im Kurs-Detail
   (via .xeno-dozent Grid mit 200px) bleiben unveraendert. */
.xeno-detail__sidebar .xeno-dozent__foto {
  width: 100%;
  max-width: 240px;
  aspect-ratio: auto;
  align-self: center;
  background: transparent;
  overflow: visible;
}
.xeno-detail__sidebar .xeno-dozent__foto:not(:has(img)) {
  width: 180px;
  aspect-ratio: 2 / 3;
}
.xeno-detail__sidebar .xeno-dozent__foto img,
.xeno-detail__sidebar .xeno-dozent__img {
  position: static;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  object-fit: initial;
  display: block;
}

.xeno-detail__row { display: flex; flex-direction: column; gap: 4px; }

.xeno-detail__label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #666666;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.xeno-detail__value {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #666666;
  line-height: 1.35;
}

.xeno-detail__prices { display: flex; flex-direction: column; gap: 10px; }
.xeno-detail__price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.xeno-detail__price:last-child { border-bottom: 0; padding-bottom: 0; }
.xeno-detail__price-title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  color: #666666;
}
.xeno-detail__price-amount {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #666666;
}

.xeno-detail__availability {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--site-primary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 12px;
}

.xeno-detail__related { margin-top: 60px; }
.xeno-detail__related-list { display: flex; flex-direction: column; }
.xeno-detail__related-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-top: 1px solid #e6e6e6;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.xeno-detail__related-item:last-child { border-bottom: 1px solid #e6e6e6; }
.xeno-detail__related-item:hover { background: #f7f7f7; }
.xeno-detail__related-date {
  font-family: var(--font-sans);
  font-size: var(--text-help);
  font-weight: 500;
  color: #999999;
}
.xeno-detail__related-title {
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: 600;
  color: #666666;
}
.xeno-detail__related-subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  color: #999999;
}

/* =========================================================================
   MAINBOX-SYSTEM
   Zentraler Panel-Skin fuer den gesamten Kunden-Auftritt. Wird als
   className an shadcn-Cards und Xenohtml-Boxen gehaengt (Cart-Items,
   Kontakt-Panel, Startseiten-Widgets, Dozenten-Box, …).

   Merkmale (aus der Kunden-Website gemessen):
   - hellgrauer Grund-Hintergrund (in der Grundvariante); farbige
     Varianten (accent/warn/danger) haben passend eingefaerbten BG
   - keine Umrandung, keine Ecken-Rundung, kein Schatten
   - 5px-Trennlinie oben in Grau (neutral), Gruen (accent), Gelb (warn)
     oder Rot (danger) — jeweils die satte Version derselben Farbe
   - grosszuegiges Innen-Padding

   Grundvariante (neutral, grau):
     <div class="xeno-mainbox">…</div>

   Accent-Variante (fuer Filter-Sidebar & Aktions-Panels):
     <div class="xeno-mainbox xeno-mainbox--accent">…</div>

   Wichtig: das Selektor-Prefix `body` erhoeht die Spezifitaet auf 0,1,1
   und schlaegt damit Tailwinds `@layer utilities` (0,1,0) — sonst
   ueberschreibt `rounded-lg`/`border` von shadcn unsere Regeln.
   ========================================================================= */

body .xeno-mainbox {
  background:    var(--lao-panel-bg);
  border:        0;
  border-top:    var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: var(--lao-panel-radius);
  box-shadow:    var(--lao-panel-shadow);
  padding:       var(--lao-panel-padding-y) var(--lao-panel-padding-x);
  overflow:      visible;
}

body .xeno-mainbox--accent {
  background:  var(--lao-topic-kurse-bg);
  border-top:  var(--lao-panel-divider-w) solid var(--lao-topic-kurse-border);
}

body .xeno-mainbox--info {
  background:  var(--lao-topic-konzerte-bg);
  border-top:  var(--lao-panel-divider-w) solid var(--lao-topic-konzerte-border);
}

body .xeno-mainbox--warn {
  background:  var(--lao-status-warn-bg);
  border-top:  var(--lao-panel-divider-w) solid var(--lao-status-warn-border);
}

body .xeno-mainbox--danger {
  background:  var(--lao-status-danger-bg);
  border-top:  var(--lao-panel-divider-w) solid var(--lao-status-danger-border);
}

/* shadcn-Card-Slots (Header/Content/Footer) innerhalb einer .xeno-mainbox
   duerfen keine eigenen Ecken/Border/Padding-Reste bringen, sonst wirkt
   die Box mehrfach umrandet. */
body .xeno-mainbox [data-slot='card-header'],
body .xeno-mainbox [data-slot='card-content'],
body .xeno-mainbox [data-slot='card-footer'] {
  background:    transparent;
  border:        0;
  border-radius: 0;
  box-shadow:    none;
  padding:       0;
}

body .xeno-mainbox [data-slot='card-header'] + [data-slot='card-content'],
body .xeno-mainbox [data-slot='card-content'] + [data-slot='card-footer'] {
  margin-top: 16px;
}

/* =========================================================================
   LAO-Overrides fuer Cart / Stepper-Klassen

   System-Defaults liegen in xeno-system.css. LAO ueberschreibt hier NUR die
   Werte, die zum Kunden-Look abweichen — TSX bleibt unberuehrt.

   Skin-Bindung pro semantischer Klasse:
     .xeno-cart-item          → weiss + 5px Rahmen rundum (statt Mainbox-Skin)
     .xeno-participants-date  → grauer BG + 5px oben (Mainbox-Look als Wrapper)
     .xeno-participants-date__title  → Kunden-Font (Montserrat 24px)
     .xeno-signuper-card      → weiss + 5px Rahmen rundum (Outline-Look innen)
     .xeno-contact-step       → grauer BG + 5px oben (Mainbox-Look als Wrapper)
     .xeno-contact-step__title  → Kunden-Font (Montserrat 24px)
     .xeno-contact-panel      → weiss + 5px Rahmen rundum (Outline-Look innen)
     .xeno-payment-step       → grauer BG + 5px oben (Mainbox-Look als Wrapper)
     .xeno-payment-panel      → weiss + 5px Rahmen rundum (Outline-Look innen)
     .xeno-billing-panel      → weiss + 5px Rahmen rundum (Outline-Look innen)
     .xeno-summary-panel      → weiss + 5px Rahmen rundum (Panel-Skin, ueber-
                                 schreibt den Mainbox-Skin direkt)
   ========================================================================= */

/* Cart-Item bekommt bei LAO den Outline-Look (weiss + 5px Rahmen), damit die
   Items in der Cart-Liste klar abgesetzt vom grauen Body-Hintergrund stehen. */
body .xeno-cart-item {
  background:    #fff;
  border:        var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: 0;
  box-shadow:    none;
}

/* Termin-Section im Teilnehmer-Step bekommt bei LAO den Mainbox-Look
   (grauer BG + 5px Linie oben), damit die weissen Anmelder-Cards innen
   klar abgesetzt sitzen. */
body .xeno-participants-date {
  background:    var(--lao-panel-bg);
  border:        0;
  border-top:    var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: var(--lao-panel-radius);
  box-shadow:    var(--lao-panel-shadow);
  padding:       var(--lao-panel-padding-y) var(--lao-panel-padding-x);
}

/* Anmelder-Card bekommt den Outline-Look (weiss + 5px Rahmen rundum) —
   invers zum Wrapper. Doppelter Klassen-Selektor (Spezifitaet 0,2,1)
   schlaegt den .xeno-mainbox-Skin (0,1,1). */
body .xeno-mainbox.xeno-signuper-card {
  background:    #fff;
  border:        var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: 0;
  box-shadow:    none;
}

body .xeno-participants-date__title {
  font-family:    var(--font-sans);
  font-size:      var(--text-lg);
  color:          var(--lao-body-color, #333);
  letter-spacing: -0.005em;
}

body .xeno-participants-date + .xeno-participants-date {
  margin-top: 32px;
}

/* Kontakt-Step (Step 2): grauer BG + 5px Linie oben (Mainbox-Look), innen
   sitzt die weisse Outline-MainBox mit den Kontakt-Feldern. */
body .xeno-contact-step {
  background:    var(--lao-panel-bg);
  border:        0;
  border-top:    var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: var(--lao-panel-radius);
  box-shadow:    var(--lao-panel-shadow);
  padding:       var(--lao-panel-padding-y) var(--lao-panel-padding-x);
}

/* Kontakt-Panel bekommt den Outline-Look (weiss + 5px Rahmen rundum) —
   invers zum Wrapper. Doppelter Klassen-Selektor (Spezifitaet 0,2,1)
   schlaegt den .xeno-mainbox-Skin (0,1,1). */
body .xeno-mainbox.xeno-contact-panel {
  background:    #fff;
  border:        var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: 0;
  box-shadow:    none;
}

body .xeno-contact-step__title {
  font-family:    var(--font-sans);
  font-size:      var(--text-lg);
  color:          var(--lao-body-color, #333);
  letter-spacing: -0.005em;
}

/* Payment-Step (Step 5): grauer BG + 5px Linie oben (Mainbox-Look), innen
   sitzen die zwei weissen Outline-MainBoxen (Zahlung + Rechnungsadresse).
   Der Abstand zwischen den MainBoxen kommt aus .xeno-payment-step > * + *
   (System-Default 16px). */
body .xeno-payment-step {
  background:    var(--lao-panel-bg);
  border:        0;
  border-top:    var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: var(--lao-panel-radius);
  box-shadow:    var(--lao-panel-shadow);
  padding:       var(--lao-panel-padding-y) var(--lao-panel-padding-x);
}

/* Zahlung- und Rechnungsadresse-Panel bekommen den Outline-Look (weiss +
   5px Rahmen rundum) — invers zum Wrapper. Doppelter Klassen-Selektor
   (Spezifitaet 0,2,1) schlaegt den .xeno-mainbox-Skin (0,1,1). */
body .xeno-mainbox.xeno-payment-panel,
body .xeno-mainbox.xeno-billing-panel {
  background:    #fff;
  border:        var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: 0;
  box-shadow:    none;
}

/* Summary-Panel (Step 6): weisser Outline-Look direkt auf der MainBox.
   Doppelter Klassen-Selektor (Spezifitaet 0,2,1) schlaegt sauber den
   .xeno-mainbox-Skin von LAO (Spezifitaet 0,1,1). */
body .xeno-mainbox.xeno-summary-panel {
  background:    #fff;
  border:        var(--lao-panel-divider-w) solid var(--lao-panel-divider-strong);
  border-radius: 0;
  box-shadow:    none;
}

/* =========================================================================
   XENO-CARD -> MAINBOX-LOOK
   Auf der Kunden-Website sollen ALLE Karten (Xenohtml-Cards auf der
   Startseite: "Lernen/Erleben/Gastieren", "Freie Termine im Schloss",
   "Die naechsten Konzerte", usw.) automatisch im Mainbox-Look erscheinen.
   Wir mappen die generische .xeno-card daher global auf denselben Skin
   wie .xeno-mainbox — keine einzelne .xeno-mainbox-Klasse mehr im HTML
   noetig.

   .xeno-card.cat-N erbt den grauen BG, bekommt aber die 5px-Linie oben
   in der Kategoriefarbe (die cat-N-Klasse in xeno-system.css setzt
   --cat-color pro Kategorie).
   ========================================================================= */

body .xeno-card {
  background:    var(--lao-panel-bg);
  color:         inherit;
  border:        0;
  border-top:    var(--lao-panel-divider-w) solid var(--cat-color, var(--lao-panel-divider-strong));
  border-radius: 0;
  box-shadow:    none;
  overflow:      hidden;
  padding:       0;
}

/* Wenn die Card einer Kategorie zugeordnet ist (cat-1 … cat-6, Attribut-
   Selektor damit auch kuenftige cat-Nummern automatisch mitspielen), wird
   der Hintergrund eine leichte, weissliche Version der Kategoriefarbe —
   analog zur gruenen Filter-Sidebar. Fuer Cards ohne cat-N (Warenkorb,
   Widgets ohne Farbcode) bleibt der neutrale hellgraue BG. */
body .xeno-card[class*="cat-"] {
  background: color-mix(in srgb, var(--cat-color) 12%, white);
}

/* Explizite Farb-Modifier fuer Xenohtml-Cards. Werte 1:1 aus der Kunden-
   Website: Konzert-Widget (info=blau), Buchungs-Widget (warn=gelb),
   Aktions-Panel (accent=gruen), Warnung/Fehler (danger=rot). Die Modifier-
   Klassen ueberschreiben sowohl den Grau-Default als auch die cat-N-Regel. */
body .xeno-card.xeno-card--accent {
  background: var(--lao-topic-kurse-bg);
  border-top-color: var(--lao-topic-kurse-border);
}
body .xeno-card.xeno-card--info {
  background: var(--lao-topic-konzerte-bg);
  border-top-color: var(--lao-topic-konzerte-border);
}
body .xeno-card.xeno-card--warn {
  background: var(--lao-status-warn-bg);
  border-top-color: var(--lao-status-warn-border);
}
body .xeno-card.xeno-card--danger {
  background: var(--lao-status-danger-bg);
  border-top-color: var(--lao-status-danger-border);
}

/* Bild als erstes Kind (Doppel-Karten unten auf der Startseite): fluessig,
   ohne Rand zum umgebenden Card-Hintergrund. */
body .xeno-card > img {
  display: block;
  width:   100%;
  height:  auto;
  margin:  0;
}

/* Card-Slots: kein Zweit-Border, angepasstes Padding auf Mainbox-Werte.
   Fuer .xeno-card-content brauchen wir die spezifischere Form
   `.xeno-card .xeno-card-content` (Selektor-Score 30 statt 20), weil Xeno-
   Core eine Regel mit genau dieser Spezifitaet hat, die padding:0 setzt
   (damit Cards mit Bildern/eigenen Inhalten ohne Doppel-Padding rendern).
   Ohne diesen Fix rutscht der Text in den drei Homepage-Karten nach ganz
   links ohne 20px Innenabstand — Titel und Fliesstext waren nicht buendig. */
body .xeno-card-header {
  padding: var(--lao-panel-padding-y) var(--lao-panel-padding-x) 8px;
  border:  0;
}
body .xeno-card .xeno-card-content {
  padding: 8px var(--lao-panel-padding-x);
  border:  0;
}
body .xeno-card-footer {
  padding: 12px var(--lao-panel-padding-x) var(--lao-panel-padding-y);
  border:  0;
}

/* =========================================================================
   XENO-DATE-BOX (Box-Ansicht pro Termin/Konzert in einer .xeno-card)
   Referenz: landesakademie-ochsenhausen.de – .bereich-buchungen-konzerte
   auf der Startseite. Struktur 1:1: Titel > Untertitel > Grid(Datum+Ort |
   Bild) > INFO + Status inline. Padding wie Kunde: 20px 30px, Trennlinie
   zwischen Boxen in Weiss (die farbigen Cards vertragen Weiss besser als
   eine dunklere Hairline).
   ========================================================================= */

body .xeno-date-box {
  padding: 20px 30px;
  color: #666666;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 0;
}

/* Trennlinie zwischen aufeinanderfolgenden Boxen: 5px weisser Streifen
   (Kunden-Look, "durchgeschnitten" durch die farbige Card). */
body .xeno-card .xeno-dates-list li + li > a > .xeno-date-box {
  border-top: 5px solid #ffffff;
}

body .xeno-date-box__title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #666666;
  line-height: 1.25;
  margin-bottom: 2px;
}

body .xeno-date-box__subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  color: #666666;
  line-height: 1.35;
}

/* Grid: 2/3 Text links, 1/3 Bild rechts (analog Kunden col-sm-8 / col-sm-4).
   Wenn kein Bild vorhanden, streckt sich die Textseite ueber die volle Breite,
   weil das rechte Grid-Item gar nicht gerendert wird - dank auto-Track. */
body .xeno-date-box__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding-top: 10px;
}

body .xeno-date-box__date {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  color: #666666;
  line-height: 1.35;
}

body .xeno-date-box__loc {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  color: #666666;
  line-height: 1.35;
}

body .xeno-date-box__image {
  max-width: 100px;
  flex-shrink: 0;
}
body .xeno-date-box__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
}

/* Fuss-Zeile: INFO-Button + Status-Text, inline nebeneinander. */
body .xeno-date-box__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  flex-wrap: wrap;
}

/* INFO-Button: farblich passend zur umgebenden Card. In .xeno-card--info
   blau, in --warn gelb, in --accent gruen. Fallback: neutralgrau. */
body .xeno-date-box__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px;
  background: var(--lao-panel-divider-strong);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 0;
}
body .xeno-card--info .xeno-date-box__btn    { background: var(--lao-topic-konzerte-border); }
body .xeno-card--warn .xeno-date-box__btn    { background: var(--lao-status-warn-border); }
body .xeno-card--accent .xeno-date-box__btn  { background: var(--lao-topic-kurse-border); }
body .xeno-card--danger .xeno-date-box__btn  { background: var(--lao-status-danger-border); }

body .xeno-date-box__btn-arrow {
  font-family: Georgia, serif;
  font-size: var(--text-xs);
  line-height: 1;
  transform: translateY(-1px);
}

body .xeno-date-box__avail {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #666666;
  font-weight: 500;
}
body .xeno-date-box__avail--full {
  color: var(--lao-status-danger-border);
}

/* Innerhalb einer Card verzichten die Xeno-Card-Content-Slots auf ihr
   Standard-Padding NUR wenn eine .xeno-dates-list direkt drin liegt –
   die Liste bringt ihr eigenes Padding mit. Ohne den :has()-Scope wuerde
   die Regel jeden Card-Content platt padding:0 setzen und die Homepage-
   Karten (Lernen/Erleben/Gastieren) verlieren ihren linken Textabstand. */
body .xeno-card .xeno-dates-list { margin: 0; }
body .xeno-card .xeno-dates-list ol,
body .xeno-card .xeno-dates-list ul { border: 0; margin: 0; padding: 0; list-style: none; }
body .xeno-card .xeno-dates-list li { margin: 0; padding: 0; border: 0; }
body .xeno-card .xeno-dates-list li > a { display: block; color: inherit; text-decoration: none; }
body .xeno-card .xeno-card-content:has(> .xeno-dates-list) { padding: 0; }

/* =========================================================================
   HEADER — Top-Nav + Main-Nav auf Kundenmasse (gemessen an
   landesakademie-ochsenhausen.de am 2026-07-19). Ueberschreibt die
   shadcn/Tailwind Utility-Klassen im Website-Layout via Spezifitaets-
   Boost (body > site-header__* a).

   Top-Nav (Kontakt/Stellenangebote/Anreise/Suche): 16px, weight 600,
     UPPERCASE, dunkelgrau #666. Aktuell setzt LayoutRenderer text-xs
     (12px) - zu klein, zu dünn.

   Main-Nav (Home/Konzerte/Buchung/…): 20px, weight 600, UPPERCASE,
     letter-spacing 1.2px, aktiver Link in LAO-Gruen. Aktuell text-sm
     (14px) ohne Uppercase - halb so gross wie der Kunde.
   ========================================================================= */

/* Topbar-Links (Kontakt/Stellenangebote/Anreise/Login):
   16px / 600 / uppercase / #666. shadcn liefert rounded-md + gap;
   der Kunden-Look ist flach ohne Kasten. */
body .site-header__topbar a {
  font-family:     var(--font-sans);
  font-size:       var(--text-xs);
  font-weight:     600;
  letter-spacing:  normal;
  text-transform:  uppercase;
  color:           #666666;
  border-radius:   0;
}

/* HINWEIS: Frueher lag hier eine zweite Definition fuer
   `body .xeno-date-row__title` (Sans/20px/500) die die primaere Regel
   weiter oben ueberschrieb. Beide sind zusammengefuehrt - siehe
   `.xeno-date-row__title` in der DATES-LIST-Sektion oben. */

/* =========================================================================
   HEADER-BREAKPOINT — Desktop ab 1290px (= Container-Breite), Burger darunter.

   Standard-Xeno nutzt Tailwind-Breakpoint `md` (768px). Fuer LAO zu niedrig:
   die Nav braucht bei 20px-Font mehr Platz.

   Warum genau 1290? Das ist die feste Container-Breite (site-container
   max-width: 1290px). Sobald der Viewport unter die Container-Breite faellt,
   wird's im Header eng: Logo reserviert 244px, Nav-Items brauchen ~931px,
   ab <1210 wrappt "Ueber uns" auf zwei Zeilen. Deshalb Umschalten exakt an
   der Container-Grenze — semantisch sauber und beim leichten Verkleinern
   sofort spuerbar.

   Der Burger ist im NavigationExtension-Code an aria-label "Menü öffnen"
   erkennbar und stabil.
   ========================================================================= */

@media (min-width: 1290px) {
  /* Logo raus aus dem Flow → "fliegt" ueber dem Content.
     Werte 1:1 aus landesakademie-ochsenhausen.de gemessen:
     .navbar-header { position: absolute; top: -18px; z-index: 999 }
     Logo natuerliche Groesse 220x165 wird beibehalten. */
  .site-header .site-container {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .site-logo {
    position: absolute;
    /* Kunden-Original: top: -18px (Logo ragt oben aus dem Header).
       Auf Wunsch 25px tiefer positioniert: -18 + 25 = 7px. Logo sitzt
       jetzt komplett IM Header + ragt nur noch unten in den Content. */
    top: 7px;
    left: 15px;
    z-index: 999;
  }
  .site-logo img {
    height: 165px;   /* 220x165 = natuerliche Kunden-Logo-Groesse */
  }
  /* Nav-Bereich braucht Padding-Left in Hoehe des absoluten Logos +
     Sicherheitsabstand. Sonst laeuft die Nav unter das Logo. */
  .site-header__nav {
    padding-left: 244px;
  }
  /* Topbar auf Desktop einblenden. Mobile bleibt (aus dem Base-Selector
     oben) auf display: none, ihre Items wandern ins Sheet. */
  .site-header__topbar {
    display: flex;
  }
}

@media (max-width: 1289px) {
  /* Desktop-Nav ausblenden (ueberschreibt Tailwind `md:flex`).
     Direkt-Kind-Selektor damit Sub-ULs in Dropdowns unberuehrt bleiben. */
  .site-header__main nav > ul {
    display: none !important;
  }
  /* Burger einblenden UND deutlich sichtbar machen. Ueberschreibt Tailwind
     `md:hidden`. Aria-Label ist stabil aus NavigationExtension.tsx.
     Visuell aufgemotzt vom Xeno-Standard (24px grau) auf 32px schwarz mit
     sichtbarem Rand, damit auf hellem Header nicht mehr uebersehbar. */
  .site-header button[aria-label="Menü öffnen"] {
    display: inline-flex !important;
    width: 48px;
    height: 48px;
    color: var(--site-nav-text, #333);
    border: 1px solid var(--site-nav-text, #333);
    border-radius: 4px;
  }
  .site-header button[aria-label="Menü öffnen"] svg {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 2.5;
  }
  /* Header-Layout: Logo links, Burger rechts. Nav-Container muss keinen
     Platz fuer Desktop-Nav mehr reservieren. */
  .site-header__main {
    justify-content: flex-end;
  }
}

/* =========================================================================
   HERO-IMAGE — analog zur Slideshow auf der Startseite (aspect 21:9 mit
   object-fit: cover). Fuellt die volle Viewport-Breite ohne weissen Rand,
   auch wenn das Original-Bild ein kleineres/anderes Seitenverhaeltnis hat
   (kleinere Bilder werden hochskaliert, breitere Bilder links/rechts
   beschnitten). Same as Startseite-Hero-Slideshow (aspect-[21/9]).
   ========================================================================= */

.xeno-hero-image {
  line-height: 0;
  /* Kunden-Original (landesakademie-ochsenhausen.de/de/kurse) rendert das
     Hero-Bild in 3:1. Alle LAO-Hero-Bilder (veranstaltungen, konzerte,
     Detail-Seiten) sind ebenfalls nativ 3:1 (z.B. 1024x341). Vorher stand
     hier 21/9, was das Bild ueberproportional gestreckt hat (bei 1400px
     Viewport: 601px statt 468px Hoehe). */
  aspect-ratio: 3 / 1;
  overflow: hidden;
}
.xeno-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================================
   XENO-SECTION-KLASSEN-OVERRIDE (LAO-Skin)
   Der Xeno-Standard rendert Section-/Card-/Detail-Titel mit Janson (Serif).
   Der LAO-Kunde nutzt aber DURCHGEHEND Montserrat (Sans) fuer alle
   Section-Titel — Serif ist nur fuer Fliesstext/Quotes reserviert.
   Wir ueberschreiben deshalb die betroffenen Xeno-Klassen hier zentral,
   damit die Skin konsistent ist ohne die Xeno-Core-CSS zu aendern.
   ========================================================================= */

.section-intro__title,
.stat-figure,
.xeno-dates-detail header h1,
.xeno-dates-detail h2 {
  font-family: var(--font-sans);
  font-weight: 500;
}

/* Subtitle unter Detail-Titeln bleibt Serif (Fliesstext-Charakter). */
.xeno-dates-detail header p.text-lg {
  font-family: var(--font-serif);
  font-weight: 400;
}

/* =========================================================================
   XENO-DATE-TILE — Grid-Kachel pro Termin/Konzert.

   Teilt die neutrale "Eintrag-Optik" mit .xeno-date-row (Listen-Ansicht):
   hellgrauer BG (--lao-entry-bg) + 5px-Trennlinie OBEN in halbtrans-
   parenter Divider-Farbe (--lao-entry-divider). Border-top pro Kachel
   ohne :first-child-Ausnahme — in einem 2-/3-spaltigen Grid ergaebe eine
   Ausnahme nur eine geoeffnete "Zahnluecke" der ersten Reihe. Die
   Container-Linie (.xeno-content-results border-top) sitzt darueber und
   bleibt sichtbar. Kein Farb-Modifier auf der Kachel selbst — der
   Seiten-Kontext (blau fuer Konzerte, gruen fuer Kurse) faerbt bewusst
   NUR den Filter-Sidebar, nicht die Eintraege. Beide Ansichten sprechen
   so dieselbe Sprache.
   ========================================================================= */

body .xeno-date-tile {
  padding: 20px 24px 22px;
  border-top: var(--lao-panel-divider-w) solid var(--lao-entry-divider);
  background: var(--lao-entry-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #666666;
}

body .xeno-date-tile__title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #333333;
  line-height: 1.25;
}

body .xeno-date-tile__subtitle {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  color: #666666;
  line-height: 1.35;
}

body .xeno-date-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}

body .xeno-date-tile__date {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  color: #666666;
  line-height: 1.35;
}

body .xeno-date-tile__loc {
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: 400;
  color: #666666;
  line-height: 1.35;
}

/* Bild in der Kachel: begrenzte Hoehe, Contain damit nichts abgeschnitten
   wird. Passt sich der verfuegbaren Kachelbreite an. */
body .xeno-date-tile__image {
  margin-top: 6px;
}
body .xeno-date-tile__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}

/* Fussleiste: INFO-Button links, Verfuegbarkeits-Status rechts. mt:auto
   schiebt sie an das untere Kachelende, damit alle Kacheln optisch
   gleich abschliessen (Card selbst ist Flex-Column via xeno-card-Regel
   in xeno-system.css). */
body .xeno-date-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  flex-wrap: wrap;
}

/* INFO-Button: neutral dunkelgrau, folgt der Kachel-Optik. */
body .xeno-date-tile__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 10px;
  background: var(--lao-panel-divider-strong);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 0;
}

body .xeno-date-tile__btn-arrow {
  font-family: Georgia, serif;
  font-size: var(--text-xs);
  line-height: 1;
  transform: translateY(-1px);
}

body .xeno-date-tile__avail {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: #666666;
}
body .xeno-date-tile__avail--full {
  color: var(--lao-status-danger-border);
  font-weight: 600;
}

/* =========================================================================
   PAGINATION — LAO-Feintuning.

   Das Grundgeruest (flach, eckig, gleiche Masse, aktive Seite gefuellt in
   --primary) kommt aus xeno-system.css. Hier nur noch die Kunden-Details:
     - Montserrat statt Body-Font
     - Konzertseite: aktive Seite blau statt gruen (analog zum blauen
       Filter dieser Seite), Hover-Farbe entsprechend blau
   ========================================================================= */

[data-slot='pagination-link'],
[data-slot='pagination-ellipsis'] {
  font-family: var(--font-sans);
}

.lao-page-konzerte [data-slot='pagination-link'][data-active='true'] {
  background: var(--lao-topic-konzerte-border);
}
.lao-page-konzerte [data-slot='pagination-link']:not([data-active='true']):hover {
  color: var(--lao-topic-konzerte-border);
}

/* =========================================================================
   STEPPER — LAO-Feintuning.

   Die komplette Optik (Kreis 40px, Body-Groesse fuer Labels, Farb-States,
   Verbindungslinien, Mobile-Fallback) kommt aus xeno-system.css. Bei LAO
   nur noch die Kunden-Font — der grune Kreis / weisse Zahl kommt bereits
   automatisch aus --primary/--primary-foreground des Kunden-Themes.
   ========================================================================= */

.xeno-stepper__circle,
.xeno-stepper__label,
.xeno-stepper__current {
  font-family: var(--font-sans);
}


/* --- assets/lao-tokens.css --- */
/**
 * lao-tokens.css – Brand-Tokens fuer die LAO-Klon-Website.
 *
 * Architektur (analog zu src/styles/zinc-light.css):
 * Diese Datei ueberschreibt NUR die shadcn-Token-Defaults aus globals.css
 * mit den Brand-Werten der Landesakademie Ochsenhausen. Alles was nicht
 * brand-spezifisch ist, bleibt im System (xeno-system.css + globals.css).
 *
 * Inhalt:
 *   1. Self-hosted Fonts (Montserrat + Janson Text, wie auf der Original-Website)
 *   2. Brand-Variablen (LAO-Farben, Cluster-Farben)
 *   3. shadcn-Token-Overrides (--primary, --ring, --accent → Brand)
 *   4. Panel-Tokens (das "Mainbox"-System der LAO-Website: flache Kaesten mit
 *      5px-Trennlinie oben, kein Radius, kein Schatten. Zwei Skins: neutral
 *      grau und accent hellgruen. Referenziert in lao-style.css von
 *      xeno-filter-panel, xeno-date-row, xeno-detail__*, xeno-card,
 *      [data-slot='card'].)
 *
 * KEINE Komponenten-Klassen hier – nur Token-Definitionen.
 * KEIN @apply, KEINE Klassen-Selektoren.
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. SELF-HOSTED FONTS
   Montserrat (Sans, Body + Navigation) + Janson Text (Serif, Headings).
   Beide liegen in ./fonts/ und werden vom Customer-Asset-Pfad serviert.

   Hinweis: Der Kunde nutzt Montserrat auch in Weight 600. Wir haben aktuell
   nur 400/500/700 als lokale Dateien – 600 mappt daher auf Bold (700).
   Sobald der Kunde die 600er-Files liefert, hier den src austauschen.
   ───────────────────────────────────────────────────────────────────────── */

/* Montserrat 400 Regular */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Montserrat-Regular.woff2') format('woff2'),
       url('./fonts/Montserrat-Regular.woff')  format('woff');
}
/* Montserrat 400 Italic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Montserrat-Italic.woff2') format('woff2'),
       url('./fonts/Montserrat-Italic.woff')  format('woff');
}
/* Montserrat 500 Medium */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/Montserrat-Medium.woff2') format('woff2'),
       url('./fonts/Montserrat-Medium.woff')  format('woff');
}
/* Montserrat 500 Medium Italic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('./fonts/Montserrat-MediumItalic.woff2') format('woff2'),
       url('./fonts/Montserrat-MediumItalic.woff')  format('woff');
}
/* Montserrat 600 SemiBold — Fallback auf Bold-Datei bis 600er verfuegbar */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/Montserrat-Bold.woff2') format('woff2'),
       url('./fonts/Montserrat-Bold.woff')  format('woff');
}
/* Montserrat 700 Bold */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Montserrat-Bold.woff2') format('woff2'),
       url('./fonts/Montserrat-Bold.woff')  format('woff');
}
/* Montserrat 700 Bold Italic */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/Montserrat-BoldItalic.woff2') format('woff2'),
       url('./fonts/Montserrat-BoldItalic.woff')  format('woff');
}

/* Janson Text 400 Regular — Serif fuer Headings, wie auf der Original-Website */
@font-face {
  font-family: 'Janson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/dc80da82-3fb2-45b9-9c17-5c7ff2141ada.woff2') format('woff2'),
       url('./fonts/1a018c91-8b9e-4a66-8972-3ae4217085f6.woff')  format('woff');
}
/* Janson Text 600 SemiBold */
@font-face {
  font-family: 'Janson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./fonts/26461657-042f-4ce5-a4f7-ebfb7e0bcc40.woff2') format('woff2');
}

/* ─────────────────────────────────────────────────────────────────────────
   2. BRAND-VARIABLEN
   Die 6 Cluster-Farben (Vokal, Multimediale, Instrumental, Fortbildung
   Lehrer, Fortbildung Erzieher, Aktiv Musik erleben). Werden in
   lao-style.css fuer Footer-Bars und Cluster-Kacheln referenziert.

   Reihenfolge entspricht der Original-Website (Kacheln + Bottom-Bars):
   Orange (Vokal), Violett (Multimedia), Blau (Instrumental),
   Gelb (Lehrer-Fortbildung), Rot (Erzieher-Fortbildung), Gruen (Aktiv).
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* 6 Cluster-Farben */
  --site-orange: #e07a1c;  /* Vokalkurse */
  --site-purple: #6c3da1;  /* Multimediale Kurse */
  --site-blue:   #1d6bb8;  /* Instrumentalkurse */
  --site-yellow: #e8b51a;  /* Fortbildung Lehrer*innen */
  --site-red:    #c8362b;  /* Fortbildung Erzieher*innen */
  --site-green:  #4aa551;  /* Aktiv Musik erleben */

  /* Primaere Brand-Farbe (Akzent in Menu, Buttons, Links). Der Kunden-
     Site-Hauptgruen (#99CC00) ist knalliger als die Cluster-Farbe
     "Aktiv Musik erleben" (--site-green) — deshalb bewusst getrennt.
     Aendere hier den Basiswert, damit --site-primary-hover und alle
     abgeleiteten hellen Toene automatisch mitziehen. */
  --site-primary:       #99CC00;
  --site-primary-hover: color-mix(in srgb, var(--site-primary) 82%, #000000);

  /* Nav-Text-Farben (aus Kundenwebsite gemessen) */
  --site-nav-text:        #232323;
  --site-nav-text-muted:  #6b6b6b;
  --site-nav-text-hover:  var(--site-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   3. SHADCN-TOKEN-OVERRIDES
   Ueberschreiben der Source-Tokens aus globals.css. Alle abgeleiteten
   Tokens (--primary-hover via color-mix, --selected, etc.) passen
   sich automatisch an.
   Wirkt auf:
     - alle xeno-* Klassen aus xeno-system.css
     - alle shadcn-React-Komponenten (Cart, Login, Newsletter, etc.)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --primary:            var(--site-primary);
  --primary-foreground: #ffffff;
  --ring:               var(--site-primary);

  /* Dezenter cremiger Accent fuer Hover/Focus-States in shadcn-Komponenten */
  --accent:             #f6f4f1;
  --accent-foreground:  #1f2330;

  /* LAO-eigene Schriften: Body = Montserrat, Headings = Janson Text */
  --font-sans:  'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Janson Text', Georgia, 'Times New Roman', serif;

  /* ─────────────────────────────────────────────────────────────────────
     LAO-Mainbox: shadcn-Card auf "flach" zwingen.

     shadcn-Cards nutzen bg-card + border-border + shadow-xs + rounded-lg.
     Der LAO-Kunde will die Cards flach: kein Radius, kein Shadow, trans-
     parenter Hintergrund. Wir loesen das ueber die shadcn-Tokens — damit
     wirken die Overrides GLOBAL fuer jede shadcn-Card in der Kunden-
     Website (Warenkorb-Items, Startseiten-Widgets, Kontaktbox, …), ohne
     dass wir irgendwo im TSX-Code eine Klasse anfassen muessen.

     Die spezifische 5px-Trennlinie oben (das Erkennungsmerkmal der
     Kunden-Website) laesst sich NICHT ueber shadcn-Tokens abbilden —
     dafuer gibt es unten die .xeno-mainbox-Klasse in lao-style.css, die
     als zusaetzliches className an relevante Cards gehaengt wird.
     ─────────────────────────────────────────────────────────────────── */
  --radius:             0;
  --card:               transparent;
  --card-foreground:    inherit;
  --shadow-2xs:         none;
  --shadow-xs:          none;
  --shadow-sm:          none;
  --shadow:             none;
  --shadow-md:          none;
  --shadow-lg:          none;
  --shadow-xl:          none;
  --shadow-2xl:         none;

  /* ─────────────────────────────────────────────────────────────────────
     TEXT-SCALE (LAO-Skalierung).

     Der Kunde nutzt in Summe groessere Schriften als der shadcn-Standard
     (Body ist 20px statt 16px). Damit shadcn-UI proportional mitwaechst,
     skalieren wir die zentralen Text-Tokens einmal an dieser Stelle —
     Tailwind rendert text-sm/text-xs/etc. als font-size: var(--text-sm),
     also greift das automatisch auf JEDE Verwendung:
       - Buttons, Inputs, Cards, Cart-Steps, Stepper-Label, Pagination …
       - alles was `text-sm` / `text-xs` verwendet
     Ohne dass wir irgendwo im TSX-Code oder in einem Component-CSS
     eine Klasse anfassen muessen.

     Werte 1:1 live gemessen an landesakademie-ochsenhausen.de:
       - /de/kurse    (UI-Chrome: Filter, Buttons, Pagination, INFO, Chips)
       - /de/news/... (Editorial-Fliesstext im .field--name-body)

     Erkenntnis: der Kunde arbeitet mit ZWEI Groessen-Welten:
       - 16px  fuer UI-Chrome (Buttons, Inputs, Listen-Metadaten, Filter,
               Pagination, Kategorie-Chips, INFO/Status-Buttons)
       - 20px  fuer Editorial-Fliesstext (Artikel-Text, News-Detail, lange
               Beschreibungen im Kurs-Detail)

     Kunden-Standard-Groesse (Editorial + UI durchgaengig, wie auf
     landesakademie-ochsenhausen.de/de/news/... gemessen): 20px.

     shadcn-Default → LAO (1:1 live gemessen an landesakademie-ochsenhausen.de):
       --text-xs   12 → 16   (H5-Meta uppercase, kleine Uppercase-Chips.
                              Nicht kleiner: Kontrast zum 20px-Body wirkt sonst hart.)
       --text-sm   14 → 20   (UI-Chrome + Fliesstext, Kunden-Standardgroesse.
                              Warenkorb/Formular-Steps nutzen `text-sm` — dadurch
                              erben sie automatisch die 20px des Kunden-Body.)
       --text-base 16 → 20   (identisch zu --text-sm — der Kunde macht auf
                              seinen Content-Seiten keinen Unterschied. Standard
                              fuer H2 Section-Titel und H3 Card-Titel.)
       --text-lg   18 → 28   (Sonder-Widget-Titel, z.B. „Konzerte"-Box.
                              Selten benutzt; einzige mittlere Groesse zwischen
                              20 und 44 im Kunden-Design.)
       --text-xl   22 → 44   (H1 Hero-Titel auf allen Detail-Seiten:
                              Kurs, Konzert, Dozent. Der Kunde hat nur EINE
                              grosse Groesse — dies ist sie.)

     Der Kunde arbeitet mit einer sehr flachen Hierarchie: praktisch alles
     ist 20px, Ausnahmen sind der Hero (44) und kleine Meta (16). Die Skala
     bildet das ab: xs=16, sm/base=20, lg=28 (selten), xl=44. */
  --text-xs:   16px;
  --text-sm:   20px;
  --text-base: 20px;
  --text-lg:   28px;
  --text-xl:   44px;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. PANEL-TOKENS (LAO-Mainbox-System)
   Alle Boxen der Kunden-Website (Kurszeilen, Filter-Sidebar, Dozenten-
   Sektion, Startseiten-Widgets, Warenkorb-Items) folgen einem einzigen
   Panel-Pattern: transparenter Hintergrund, 5px-Trennlinie oben, kein
   Radius, kein Schatten. Zwei Skins:
     - neutral: graue Linie (--lao-panel-divider-strong)
     - accent:  gruene Linie + hellgruener BG (Filter-Sidebar)
   Referenziert in lao-style.css. Nicht direkt hier verwendet.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Trennlinien-Staerken */
  --lao-panel-divider-w:          5px;
  --lao-panel-divider-w-hairline: 1px;

  /* Trennlinien-Farben (aus Kundenwebsite gemessen) */
  --lao-panel-divider-strong:     #cccccc;
  --lao-panel-divider-soft:       #f0f0f0;
  --lao-panel-divider-hairline:   #e6e6e6;

  /* Grund-Panel (neutral/grau): hellgrauer BG + dunkelgraue 5px-Linie oben.
     Der Kunden-Mainbox-Look zieht sich einheitlich durch alle Boxen — jede
     Farbvariante besteht aus (a) hellem BG und (b) 5px-Linie in der satten
     Version derselben Farbe. Kein transparent, kein Radius, kein Schatten. */
  --lao-panel-bg:                 #f5f5f5;
  --lao-panel-radius:             0;
  --lao-panel-shadow:             none;
  --lao-panel-padding-y:          22px;
  --lao-panel-padding-x:          20px;

  /* Accent-Varianten: hellgruene/blaue/gelbe/rote Boxen (Filter-Sidebar,
     Konzert-Widget, Buchungs-Widget, Warnungen, Fehler). Konvention:
       <name>-border = 5px-Linie oben, satte Basisfarbe der Welt
       <name>-bg     = heller Panel-BG, abgeleitet aus <name>-border
       <name>-hover  = dunklerer Ton fuer Hover, abgeleitet aus <name>-border
     Ein Wert (border) aendert die ganze Farbwelt automatisch mit —
     kein separates Nachpflegen von BG/Hover noetig. Mischverhaeltnisse
     (15% Farbe / 82% Farbe) sind fest, so bleibt jede Welt in sich
     konsistent. */
  --lao-topic-kurse-border:      var(--site-primary);
  --lao-topic-kurse-bg:          color-mix(in srgb, var(--lao-topic-kurse-border) 15%, #ffffff);
  --lao-topic-kurse-hover:       color-mix(in srgb, var(--lao-topic-kurse-border) 82%, #000000);

  --lao-topic-konzerte-border:   #3399CC;
  --lao-topic-konzerte-bg:       color-mix(in srgb, var(--lao-topic-konzerte-border) 15%, #ffffff);
  --lao-topic-konzerte-hover:    color-mix(in srgb, var(--lao-topic-konzerte-border) 82%, #000000);

  --lao-status-warn-bg:            #fdf5c8;
  --lao-status-warn-border:        #ffd233;

  --lao-status-danger-bg:          #fbe9e7;
  --lao-status-danger-border:      #c62828;

  /* Eintrag-Optik (Listen- und Grid-Einträge)
     Jeder Eintrag ist selbst eine kleine Mainbox — hellgrauer BG
     (--lao-panel-bg) + 5px-Trennlinie oben. Die Linie greift die
     dunkle Panel-Divider-Farbe auf, aber halb-transparent: dadurch
     wirkt der Streifen dezenter als ein voller Panel-Rand, folgt aber
     derselben Farbwelt. Beide Ansichten (List/Grid) nutzen genau
     diese beiden Tokens — so bleibt die Sprache einheitlich. */
  --lao-entry-bg:                 var(--lao-panel-bg);
  --lao-entry-divider:            color-mix(in srgb, var(--lao-panel-divider-strong) 50%, transparent);
}