/* kalender.css — self-contained Modul-CSS fuer den Agenda-Renderer (kalender.js).
 *
 * EINE Quelle fuer ALLE Flaechen (Landing, Micropage, kuenftige Mandanten).
 * Kanonisch ist die Landing-Agenda-Optik (Stand 24.07.2026): Textreiter mit
 * Unterstrich statt Boxen, Haarlinien-Monatsband statt Farbbalken, Playfair-
 * Zahlen. Flaechen-Unterschiede werden AUSSCHLIESSLICH ueber Kalender.init()
 * konfiguriert (subRegionFilter, showFeature, contentTypeFilter) — nie durch
 * abweichendes CSS. Siehe CLAUDE.md, "MODUL-PARITAET".
 *
 * Master: ~/Entwicklung/Homepage/kalender.css
 * Spiegel: apps/backend/public/kalender.css (nur per cp, nie direkt editiert)
 *
 * Vom Host geerbte Design-Tokens: --mono, --serif-display, --serif-body,
 * --stone, --ink, --gold. Agenda-exklusive Tokens, die manche Hosts (z.B. die
 * Micropage) nicht definieren, sind hier gebuendelt:
 */
:root {
  --agenda-month-inset: 22px; /* dezenter Links-Inset des Monatslabels (nicht so weit wie rail-gutter, nicht 0) */
  /* Groesse der Tageszahl in der Datumsspalte — EINE Quelle fuer Einzeltag (.agenda-day) und
     Spanne (.agenda-day--range). Vorher trugen beide eigene, auseinanderlaufende clamp-Werte
     (40px gegen 26px im Maximum). Die Spaltenbreite (120px / mobil 88px) wird davon nicht
     abgeleitet, sie steht in .agenda-row und ist gegen die gemessene Spannenbreite gesetzt. */
  --agenda-day-size: clamp(26px, 2.6vw, 32px);
  --lago:       #4A6660;
  --notte:      #1C1C1A;
  --oro:        #B8975A;
  --sasso:      #DCD5C4;
  --carta:      #F6F2E9;
  --carta-deep: #EFE9DB;
}
@media (max-width: 640px) { :root { --agenda-month-inset: 15px; } }

/* ── Leerzustand-Box ──
   Redaktionelle Leerzustand-Box der Agenda (eigene Klasse; .filter-empty-msg bleibt fuer Properties). */
.agenda-empty {
  display: none;
  border: 1px solid rgba(28,28,26,0.14); border-radius: 2px;
  padding: 40px 28px; margin-top: 8px; text-align: center;
  font-family: var(--serif-body); font-style: italic; font-size: 17px;
  color: var(--stone);
}
.agenda-empty.visible { display: block; }

/* ─── AGENDA: Aufmacher + Monats-Liste (Riva Slice 3, HELL / Carta-Deep) ────── */
.agenda { display: block; }

/* Aufmacher — das Ereignis der Saison (featured, sonst erstes Event der Saison).
   Auf Flaechen mit showFeature:false (Micropage) rendert kalender.js ihn nicht;
   die Regeln bleiben trotzdem im Modul — eine Quelle, keine zwei Darstellungen. */
.agenda-feature {
  display: grid; grid-template-columns: minmax(0,6fr) minmax(0,6fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
  /* Saison-unabhaengiger Abstand Tab-Reihe -> Aufmacher; beide Spalten ruecken gemeinsam,
     Buendigkeit Bildoberkante = Eyebrow-Oberkante (align-items:start) bleibt erhalten */
  margin-top: 24px; /* Filterleiste -> Featured-Oberkante = 68px (mit .agenda-nav margin-bottom 44) */
  padding-bottom: 52px; margin-bottom: 0; /* Featured -> erster .agenda-month (first-of-type margin-top 0); an den Monatsrhythmus angebunden statt abgetrennt */
  text-decoration: none; color: inherit;
}
.agenda-feature-media { aspect-ratio: 3 / 2; overflow: hidden; position: relative; background: var(--sasso); }
.agenda-feature-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s cubic-bezier(.19,1,.22,1); }
.agenda-feature:hover .agenda-feature-img { transform: scale(1.04); }
/* Bild-Schutz: kein Bild → Sasso-Flaeche (auf Carta-Deep abgesetzt) mit dezentem Motiv, nie Broken-Image / 0-Hoehe */
.agenda-feature-media--noimg { background: var(--sasso); display: flex; align-items: center; justify-content: center; }
.agenda-feature-ph { font-family: var(--serif-display); font-style: italic; font-size: clamp(28px, 4vw, 52px); color: rgba(28,28,26,0.22); letter-spacing: 0.04em; }
/* „Arvela empfiehlt"-Siegel: Optik zentral in /badge.css (.aurelis-empfiehlt).
   Stern-Varianten (Feature-Badge + Listen-Marker) entfallen. */
.agenda-eyebrow {
  font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--lago); display: flex; align-items: center; gap: 14px; margin-bottom: 14px; line-height: 1;
}
.agenda-eyebrow::after { content: ""; flex: 0 0 48px; height: 1px; background: var(--lago); opacity: 0.5; }
/* Label in der Eyebrow (Kopf des Saison-Aufmachers, immer sichtbar); Text lago (AA). */
.agenda-eyebrow .eb-inner { display: inline-flex; align-items: center; gap: 8px; }
/* Termin exakt in Agenda-Listen-Datums-Typografie (identisch zur .agenda-month-Monatszeile) */
.agenda-feature-termin { font-family: var(--serif-body); font-size: 13px; letter-spacing: 0.02em; text-transform: none; color: var(--lago); line-height: 1; margin-bottom: 20px; }
.agenda-feature-body h3 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 3vw, 42px); line-height: 1.15; max-width: 18ch; color: var(--notte); }
.agenda-feature-lede { font-family: var(--serif-body); font-style: italic; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: #5B564C; margin-top: 26px; max-width: 46ch; }
.agenda-feature-meta { margin-top: 30px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: #5B564C; }
.agenda-dot { color: var(--oro); margin: 0 0.4em; } /* Oro-Trenner Ort · Kategorie im Aufmacher (Paritaet zum Listen-Punkt) */
@media (max-width: 860px) { .agenda-feature { grid-template-columns: 1fr; } }

/* Monats-Liste ohne Thumbnails */
/* Monatswechsel = Haarlinie + Playfair-Zeile, KEIN farbiger Balken. Mehr Luft vor jedem
   Band als zwischen den Eintraegen -> klare Gruppierung ohne Fuellflaeche. */
.agenda-month {
  font-family: var(--serif-display); font-size: 22px; letter-spacing: 0.01em; text-transform: none;
  color: var(--ink);
  text-align: left;
  border-top: 1px solid rgba(28,28,26,0.12);
  padding: 28px 0 0 0; /* Einrueckung 0 — buendig zur Zeilenflucht */
  margin: 40px 0 16px; /* Monatsuebergang: Asymmetrie gemildert, Hierarchie bleibt */
}
.agenda-month:first-of-type { margin-top: 0; } /* Featured->erster Monat = 72px kommt aus .agenda-feature padding-bottom */
@media (max-width: 640px) {
  .agenda-month { margin: 30px 0 12px; font-size: 20px; letter-spacing: 0.01em; padding: 24px 0 0 0; border-top: 1px solid rgba(28,28,26,0.12); } /* mobil: je ~4px kleiner, gleiche Trennlinie */
}
.agenda-row {
  position: relative; /* Anker fuer absolut positionierte Kinder; die Status-Marker sitzen
                         seit 08/2026 IM Datumsblock und brauchen ihn nicht mehr */
  display: grid; grid-template-columns: 120px minmax(0,1fr); /* EIN Register: Datum | Inhalt (Titel + Meta darunter) */
  column-gap: clamp(18px, 3vw, 40px); align-items: flex-start;
  padding: 18px 0; /* entdichtet: Zeilenhoehe ~94px (Desktop + Mobile) */
  text-decoration: none; color: inherit;
  transition: padding-left 0.3s;
}
/* Hover dezent: nur leichter Einzug, KEIN konkurrierendes graues Feld */
.agenda-row:hover { padding-left: 8px; }
/* Datum spannt beide Zeilen -> Titel-Meta-Abstand ist unabhaengig von der grossen Tageszahl
   (ein margin-top-Wert traegt alle Breakpoints; kein negativer Hack, kein Baseline-Slack mehr). */
/* justify-content: flex-start ist die LINKE KANTE der Zelle und steht hier explizit: jede
   Datumszelle beginnt an derselben Flucht, unabhaengig von der Textlaenge. align-items:
   baseline richtet nur vertikal aus (Zahl und Wochentag auf einer Grundlinie), es zentriert
   nichts. Kein text-align: center, nirgends. */
/* flex-direction, align-items und gap stehen GENAU HIER und nirgends sonst. Die Modifier
   --range und --stacked setzen nur die drei Tokens um und sind dadurch beliebig
   kombinierbar; ohne Modifier gelten die Defaults, also exakt das bisherige Verhalten
   (Zahl neben Wochentag, auf einer Grundlinie). */
.agenda-date {
  display: flex;
  flex-direction: var(--agenda-date-dir, row);
  align-items: var(--agenda-date-align, baseline);
  gap: var(--agenda-date-gap, 8px);
  justify-content: flex-start;
  grid-column: 1; grid-row: 1 / span 2; align-self: start; /* Zahl oben-buendig zur Titel-Oberkante — deterministisch, unabhaengig von Titel-Umbruch/Blockhoehe (start statt center) */
  /* AUSGLEICH ZUR VERSALOBERKANTE DES TITELS, global, kein Breakpoint.
     align-self:start legt die KASTENoberkanten bündig, nicht die Glyphen. Wo im
     Kasten die Versaloberkante sitzt, folgt aus Schriftgroesse und Durchschuss:
         capTop = Groesse * [ (line-height - 1.338) / 2 + 0.382 ]
     (Playfair Display: Inhaltsflaeche 1.338em, Ascender 1.082em, Versalhoehe 0.700em)
     Titel  (line-height 1.15): capTop = Groesse * 0.288
     Zahl   (line-height 0.82): capTop = Groesse * 0.123
     Bei 390px (Zahl 26, Titel 17) stand die Zahl damit 1,70px zu hoch, bei 1400px
     (32/22) 2,40px. Der fehlende Betrag ist nicht konstant, sondern waechst mit der
     Zahl: 1,70/26 = 0,065 und 2,40/32 = 0,075. 0.07 trifft beide Enden auf 0,2px
     genau und traegt jede Zwischenbreite des clamp mit.
     Als padding und nicht als negativer Margin (Zeile 126 schliesst den aus) und
     nicht ueber ein groesseres line-height: 0.96 wuerde dasselbe leisten, aber den
     Zahlenkasten um 3,6 bis 4,5px wachsen lassen statt um 1,8 bis 2,2px. Am BLOCK
     statt an der Zahl, damit Wochentag, Monatszeile und Status-Marker denselben
     Versatz erben und die Spalte als Einheit sitzt. */
  padding-top: calc(var(--agenda-day-size) * 0.07);
}
.agenda-day { font-family: var(--serif-display); font-weight: 400; font-size: var(--agenda-day-size); line-height: 0.82; color: var(--notte); } /* Leading gestrafft: Ziffer-Cap optisch buendig zur Titel-Oberkante (kein negativer Margin); Ziffern ohne Unterlaenge -> kein Clipping */
.agenda-dow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #5B564C; }
.agenda-dow--tba { color: #8A8478; letter-spacing: 0; } /* undatiert: ruhiger Platzhalter statt Wochentag */
/* Mehrtaegig: kompakte Tagesspanne ("4.–6.") statt einzelner Zahl. Die Spanne braucht die
   ganze Spaltenbreite, deshalb steht sie allein in der ersten Zeile und der Wochentag
   entfaellt; einzeltaegige Zeilen bleiben unveraendert Zahl neben Wochentag. Kein Umbruch
   INNERHALB der Spanne — sie ist eine Einheit, keine zwei Zahlen. */
/* --range: mehrtaegige Spanne. --stacked: es liegt ein Status-Marker an (kalender.js setzt
   die Klasse nur dann). Beide brauchen dieselbe Spaltenform, deshalb EIN Token-Block fuer
   beide statt zweier konkurrierender Regelsaetze. Treffen sie zusammen, setzen sie
   dieselben Werte — kein Konflikt, keine Reihenfolgenabhaengigkeit. */
.agenda-date--range,
.agenda-date--stacked {
  --agenda-date-dir: column;
  --agenda-date-align: flex-start;
  --agenda-date-gap: 3px;
}
/* KEIN eigenes line-height mehr. Es stand hier auf 1 gegen die 0.82 der Einzeltag-Zahl,
   und weil beide Klassen auf DEMSELBEN span sitzen (kalender.js buildAgendaRow), sass die
   Spannen-Zahl dadurch rund 0,7px zu tief, waehrend die Einzeltag-Zahl 1,7px zu hoch stand.
   Nicht die Abweichung war das Problem, sondern ihr Richtungswechsel von Zeile zu Zeile.
   Vereinheitlicht auf die 0.82 aus .agenda-day: der gemeinsame Ausgleich steht jetzt als
   padding-top an .agenda-date und gilt damit fuer beide Formen zugleich. 1 statt 0.82 haette
   den Zahlenkasten um rund 4,7px wachsen lassen und jede Zeile mit Marker hoeher gemacht. */
.agenda-day--range { font-size: var(--agenda-day-size); white-space: nowrap; }
/* Zweite Zeile NUR bei monatsuebergreifenden Spannen: die Tage allein waeren unter EINEM
   Monatsband mehrdeutig, die Monatskuerzel ("DEZ · JAN") loesen das ohne die Ziffernzeile zu
   verbreitern. Eigenes Element, damit das nowrap auf .agenda-day--range unangetastet bleibt.
   Typografie bewusst identisch zu .agenda-dow — sie besetzt denselben Rang unter der Zahl. */
.agenda-range-months {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #5B564C; white-space: nowrap;
}
.agenda-body { display: flex; align-items: baseline; gap: 10px; min-width: 0; grid-column: 2; }
.agenda-body h3 { font-family: var(--serif-display); font-weight: 400; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.15; color: var(--notte); } /* gestraffte lh statt negativem Margin -> dichter Titel-Meta-Abstand auf beiden Breakpoints */
/* Meta einzeilig unter dem Titel, ~4-5px optischer Abstand -> gilt auf ALLEN Breakpoints (ein Register)
   Der Vorsatz stand hier seit jeher, eingehalten wurde er nicht: gemessen waren rund 15px,
   auf BEIDEN Breakpoints. Die 7px margin-top waren dabei der kleinere Teil. Der Abstand
   zwischen Titel-Grundlinie und Versaloberkante des Ortes besteht aus drei Stuecken:
     a) Unterlaengen-Reserve des Titels   Groesse * (1.15/2 + 0.256 - 1.338/2)  = 0,162 * Groesse
        (17px -> 2,76px · 22px -> 3,57px), nicht entfernbar ohne negativen Margin
     b) margin-top an .agenda-meta
     c) Durchschuss ueber dem Ort         10.5 * [ (lh - 1.28)/2 + 0.99 - 0.72 ]
        (DM Mono: Inhaltsflaeche 1.28em, Ascender 0.99em, Versalhoehe 0.72em)
   c) trug bisher 5,31px, weil .agenda-meta gar kein line-height hat und die 1.75 des
   body erbt: eine 10,5px-Versalzeile sass damit in einem 18,4px-Kasten. Mit 1.2 sinkt
   der Wert auf 2,42px. Damit bleiben fuer b) rechnerisch 0px uebrig, und selbst dann
   liegt das Ergebnis bei 5,2px mobil und 6,0px auf dem Desktop, also knapp ueber dem
   Vorsatz: a) allein verbraucht das Budget fast. Weniger ginge nur ueber einen
   negativen Margin, und den schliesst dieses Modul aus.
   1.2 statt enger, weil Ort und Kategorie auf schmalen Geraeten umbrechen koennen und
   zwei Zeilen sonst aneinanderstossen. */
.agenda-meta { grid-column: 2; text-align: left; margin-top: 0; line-height: 1.2; }
/* Ort + Kategorie = eine Einheit: identische Schrift/Groesse/Farbe, inline auf einer Zeile.
   Oro-Punkt-Trenner nur wenn Ort UND Kategorie da sind (Adjazenz) -> global, nicht mehr nur mobil. */
.agenda-place, .agenda-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: #5B564C; display: inline; }
.agenda-place + .agenda-tag::before { content: '·'; color: var(--oro); margin: 0 0.5em; }
/* Abgelaufene Termine: ruhig gedaempft (keine Durchstreichung).
   Der Marker ist von der Daempfung ausgenommen — er sitzt jetzt IM Datumsblock, und
   opacity auf dem Elternknoten waere fuer ein Kind nicht mehr aufzuhellen (eigener
   Stapelkontext). Deshalb daempft die Regel die Geschwister einzeln statt den Block.
   Damit bleibt die alte Zusage erhalten: volle Deckkraft, der Marker bleibt lesbar. */
.agenda-row--past .agenda-date > :not(.agenda-expired),
.agenda-row--past .agenda-body,
.agenda-row--past .agenda-meta { opacity: 0.5; }
/* Die beiden Status-Marker teilen sich EINE Regel: sie besetzen denselben Rang an
   derselben Stelle und duerfen nie typografisch auseinanderlaufen. Getrennte Klassen
   bleiben trotzdem, weil sie Gegenteiliges bedeuten und nie zusammen auftreten
   (kalender.js setzt den Laeuft-Marker nur, wenn der Eintrag NICHT vergangen ist).
   Keine Positionierung mehr: die Stellung im Datumsblock macht sie ueberfluessig.
   9px mit 0.08em Laufweite haelt "LAEUFT BEREITS" auch in der 88px-Spalte einzeilig. */
.agenda-expired,
.agenda-running {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone); white-space: nowrap;
}
@media (max-width: 640px) {
  /* Einziges mobil-spezifisches Mass: die schmalere Datumsspalte. Der Status-Marker
     teilt sie sich mit der Tageszahl und passt bei 9px/0.08em einzeilig hinein — die
     frueheren padding-right-Reservierungen im Titel sind damit entfallen. */
  .agenda-row { grid-template-columns: 88px minmax(0,1fr); }
}

/* Klebende Filterleiste (Jahrgang + Saison): bleibt beim Scrollen unter dem fixen #nav
   stehen. Hintergrund identisch zur Sektion (carta-deep), damit beim Scrollen keine Kante
   sichtbar wird. padding-inline kommt von .rail (nicht ueberschreiben).
   Flaechen ohne Sticky-Leiste (Micropage) binden die Strips direkt ein — dann greifen diese
   Regeln schlicht nicht.

   top haengt an --anchor-offset, der EINZIGEN Quelle fuer die Header-Hoehe (index.html
   :root, 88px / 60px ab 960px). Vorher standen hier eigene 88px + eine 76px-Mobilregel —
   beide Werte waren veraltet: #nav ist mobil real 60px hoch, die Leiste klebte 16px zu
   tief und liess den Hero durchblitzen. Wer die Header-Hoehe aendert, fasst jetzt nur noch
   --anchor-offset an.

   Der Fallback 88px ist kein Schmuck: kalender.css wird auch von der Micropage geladen
   (aurelis-micropage-template.html), die --anchor-offset NICHT definiert. Dort gibt es
   heute keine .agenda-nav — kaeme sie hinzu, wuerde ein blankes var() zu top:auto
   aufloesen und Sticky waere still tot. */
.agenda-nav {
  position: sticky;
  top: var(--anchor-offset, 88px);
  /* liegt bewusst unter #nav (100) und .nav-overlay (200). */
  z-index: 90;
  background: var(--carta-deep);
  padding-top: 16px;
  padding-bottom: 14px;
  margin-bottom: 30px;
}
.agenda-nav.is-stuck { border-bottom: 1px solid rgba(28,28,26,0.12); }
.agenda-nav-sentinel { height: 1px; }

/* Jahrgangs-Schalter (Kalenderjahr) ueber den Saison-Tabs. Riva-Register, dezent, quieter als die
   Saison-Tabs (kein Fill, nur Notte-Rahmen aktiv) — Gold nie als Flaeche. */
.events-vintage-strip {
  display: flex; gap: 0; align-items: center;
  margin-top: 0; flex-wrap: wrap;
}
.vintage-tab {
  font-family: var(--serif-body); font-size: 15px; letter-spacing: 0.02em;
  color: var(--stone); background: transparent; border: 0;
  padding: 4px 0; margin-right: 24px; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.vintage-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.vintage-tab:hover:not(.active):not(:disabled) { color: var(--ink); }
.vintage-tab:disabled { cursor: default; opacity: 0.55; }
.vintage-tab:focus-visible, .season-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.events-season-strip {
  display: flex; gap: 0;
  margin-top: 14px; flex-wrap: wrap;
}
/* Ohne Sticky-Leiste (Micropage: Strips haengen direkt im .kalender-mount) fehlt der
   Abstand zur ersten Monatszeile, den auf der Landing .agenda-nav margin-bottom traegt.
   Deshalb hier am Strip selbst — greift NUR ausserhalb von .agenda-nav, die Landing
   bleibt unveraendert. Aus der alten Micropage-kalender.css uebernommen. */
:not(.agenda-nav) > .events-season-strip { margin-bottom: 28px; }
.season-tab {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--stone); background: transparent; border: 0;
  padding: 5px 0; margin-right: 28px; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap; flex-shrink: 0;
}
/* Aktiv = Textreiter mit Ink-Unterstrich, KEIN gefuellter Hintergrund (weder ink noch gold). */
.season-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.season-tab:hover:not(.active) { color: var(--ink); }
@media (max-width: 640px) {
  /* Mobile: die vier Saisons scrollen horizontal statt umzubrechen (Scrollbar versteckt). */
  .events-season-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .events-season-strip::-webkit-scrollbar { display: none; }
}