/*
 * Die Event-Detailseite.
 *
 * PLAIN CSS, KEIN SCSS UND KEIN BUILD — dieselbe Begruendung wie in
 * events.css und categories.css: das Projekt hat bewusst keinen Node-Schritt,
 * und lea_events haengt sich nicht in die SCSS-Kette des Themes.
 *
 * DIE FARBEN KOMMEN AUS DEM KATEGORIE-DATENSATZ. Der Prozessor schreibt genau
 * drei Custom Properties auf den Wrapper — Akzent, Zweitfarbe, Grundton —, und
 * alles Weitere wird hier daraus abgeleitet. Deshalb fragt das Backend die
 * Redaktion nach drei Farben und nicht nach zehn: die abgeleiteten Toene
 * koennen nicht falsch zueinander stehen.
 *
 * Abgeleitet wird gegen `transparent`, nicht gegen den Grundton. Ein
 * halbdurchsichtiges Schriftgrau funktioniert auf hellem wie auf dunklem
 * Grund; eine gegen Weiss gemischte Farbe nur auf hellem. Deshalb braucht
 * --lea-dark nur zwei Zeilen und nicht die ganze Palette.
 *
 * Jede Regel liest ihre Variable MIT hartem Rueckfallwert: laeuft das Element
 * ohne Theme, sieht es trotzdem aus wie gedacht.
 *
 * NICHT in yavi_lucerne ablegen — das wird beim naechsten yavi-Update
 * ueberschrieben.
 */

/* ------------------------------------------------------------- Schriften */

/*
 * Zwei Familien, selbst gehostet — kein Google-CDN.
 *
 * Beide sind VARIABEL (Achse wght 300–700): eine Datei je Schnitt und Subset
 * deckt alle Gewichte ab. Deshalb steht hier ein Bereich statt drei Bloecke
 * mit derselben Adresse.
 *
 * Die Grundschrift der Website kommt nicht von hier — der Entwurf nennt sie
 * "Montserrat", meint damit aber "wie der Fliesstext", und den liefert das
 * Theme (Inter). Hier stehen nur die beiden ANZEIGESCHRIFTEN, die es sonst
 * nirgends gibt.
 *
 * Beide Familien stehen unter der SIL Open Font License 1.1.
 */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/cormorant-garamond-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../Fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- Wurzel */

.lea-detail {
    --lea-akzent: var(--bs-secondary, #b63032);
    --lea-akzent2: var(--lea-akzent);
    --lea-bg: transparent;
    --lea-fg: var(--bs-primary, #0a1b3e);
    --lea-card: #ffffff;
    --lea-radius: 18px;

    /*
     * Gemischt gegen transparent, nicht gegen den Grundton: so traegt
     * derselbe Wert auf hellem wie auf dunklem Grund.
     */
    --lea-fg2: color-mix(in srgb, var(--lea-fg) 65%, transparent);
    --lea-line: color-mix(in srgb, var(--lea-fg) 16%, transparent);

    /*
     * DIE UEBERSICHTSKARTE IST MARKENFARBE, DAS KOPFBAND KATEGORIEFARBE.
     *
     * Das sind zwei verschiedene Dinge, und sie einmal zusammengelegt zu
     * haben war ein Fehler: der Entwurf gibt der Karte in JEDER hellen
     * Kategorie dasselbe Navy (#0A1B3E) und in jeder dunklen dasselbe
     * Fast-Schwarz. Aus dem Akzent gemischt traf das nur Business zufaellig —
     * Kultur bekam ein Weinrot (#3B141A), Dating ein Aubergine, Saison ein
     * Petrol. Das Kopfband dagegen IST kategoriefarben; seine Ableitung steht
     * deshalb weiterhin an der Bandregel und nicht hier.
     */
    --lea-dunkel: #0a1b3e;

    /*
     * DIE SCHWACHE FLAECHE IST NEUTRAL, NICHT KATEGORIEFARBEN.
     *
     * Sie war der Akzent zu 7 %. Gemessen am 2026-09-17 gegen die Entwuerfe
     * (Pixel aus dem Faktenband, fuenf helle Kategorien): der Akzent gibt
     * roten Kategorien einen sichtbaren Stich. Bei Kultur lag Rot 12 Punkte
     * ueber Gruen, im Entwurf nur 3 — auf einer grossen ruhigen Flaeche sieht
     * man genau das, auch wenn der Abstand je Kanal klein bleibt.
     *
     * Der Grund, um 4 % abgedunkelt, trifft alle fuenf besser (mittlerer
     * Abstand 2,3 statt 3,3 je Kanal) und ist dieselbe Rechnung, die das
     * dunkle Theme unten schon mit Weiss macht.
     */
    --lea-tint: color-mix(in srgb, #000000 4%, transparent);
    --lea-display: inherit;

    color: var(--lea-fg);
    background: var(--lea-bg);
    padding-bottom: 48px;

    /*
     * Der Abstand zum Seitenrand. Er steht hier und nicht am Container, weil
     * das Element auf `container-full` festgenagelt ist — die Breite bestimmt
     * diese Datei, nicht die Redaktion.
     */
    --lea-detail-gutter: 10vw;
    --lea-detail-breite: 1240px;

    /*
     * Die Farbe, in die der Verlauf ueber einem Kopffoto ausläuft.
     *
     * Der Entwurf laesst ihn unten GENAU in den Seitengrund uebergehen, damit
     * Foto und Seite nahtlos aneinanderstossen. `--lea-bg` direkt zu nehmen
     * ginge nicht: es ist bei einer ungepflegten Kategorie `transparent`, und
     * dann stuende weisse Schrift ungeschuetzt auf einem beliebigen
     * Veranstalterfoto. Der Rueckfall bleibt deshalb ein neutrales Dunkel; nur
     * das dunkle Theme, das eine Grundfarbe fuehrt, setzt seine eigene ein.
     */
    --lea-scrim: #06080f;
}

/*
 * VOLLE BREITE AUSSEN, BEGRENZT INNEN.
 *
 * Bis zum 2026-09-06 steckte das Element in `container-80` und der Grundton
 * musste sich mit einem Schlagschatten ueber die Containerkante hinausmogeln.
 * Jetzt steht es auf `container-full` (im TCA festgenagelt), das Band geht von
 * selbst ueber die Seite — und diese beiden Bloecke holen den Inhalt zurueck.
 * Ohne sie liefe Fliesstext bis 2560 px breit.
 */
.lea-detail-hero__inner,
.lea-detail__body {
    /*
     * DIE POLSTERUNG STECKT IN DER MAXIMALBREITE MIT DRIN.
     *
     * Der Entwurf setzt zwei Dinge an zwei Elemente: die Sektion bekommt
     * `padding: 0 10vw`, der Block darin `max-width: 1240px`. Beides an EIN
     * Element zu haengen ginge schief — bei border-box frisst die Polsterung
     * von der Maximalbreite ab, und der Inhalt waere 1240 minus zweimal 10vw
     * schmal.
     *
     * Die Rechnung hier ergibt dasselbe wie der Entwurf mit zwei Elementen:
     * auf 1440 px sind es 144 px Rand und 1152 px Inhalt, ab etwa 1830 px
     * bleibt der Inhalt bei 1240 px stehen und der Rand waechst weiter.
     */
    max-width: calc(var(--lea-detail-breite, 1240px) + 2 * var(--lea-detail-gutter, 20px));
    margin: 0 auto;
    padding-inline: var(--lea-detail-gutter, 20px);
}

/*
 * AUF DUNKLEM GRUND WIRD NEUTRAL GEMISCHT, NICHT AUS DEM AKZENT.
 *
 * Die abgeleiteten Toene der Wurzel gehen von der Schriftfarbe bzw. vom Akzent
 * aus. Auf hellem Grund traegt das; auf dunklem waere `--lea-tint` ein
 * roetliches Band (Akzent zu 7 %), wo der Entwurf ein kaum sichtbares Weiss
 * bei 4 % zeigt. Die vier Werte hier sind die Dunkel-Palette des Entwurfs,
 * geteilt von Musik und Nachtleben.
 */
.lea-detail--dark {
    --lea-fg: #ffffff;
    --lea-fg2: color-mix(in srgb, #ffffff 62%, transparent);
    --lea-card: color-mix(in srgb, #ffffff 5%, transparent);
    --lea-line: color-mix(in srgb, #ffffff 14%, transparent);
    --lea-tint: color-mix(in srgb, #ffffff 4%, transparent);
    --lea-scrim: var(--lea-bg, #06080f);

    /*
     * Die Uebersichtskarte bleibt auch hier neutral.
     *
     * Zwei feste Werte, kein Rechenweg — der Entwurf setzt sie so: jede helle
     * Kategorie bekommt dasselbe Navy, jede dunkle dasselbe Fast-Schwarz, das
     * sich vom Seitengrund nur eine Spur abhebt. Aus dem Akzent gemischt
     * ergaebe Musik (#B63032) ein dunkles Rotbraun und Kultur ein Weinrot.
     */
    --lea-dunkel: #12121c;
}

/*
 * Die Anzeigeschrift gilt nur fuer Ueberschriften — der Fliesstext bleibt die
 * Schrift der Website. Zwei Schriften, die sich einen Absatz teilen, sind
 * keine Gestaltung, sondern ein Versehen.
 */
.lea-detail--font-serif {
    --lea-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
}

.lea-detail--font-grotesk {
    --lea-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
}

.lea-detail h1,
.lea-detail h2,
.lea-detail h3 {
    font-family: var(--lea-display, inherit);
    color: var(--lea-fg, #0a1b3e);
}

/*
 * DIE REGEL DARUEBER DARF NICHT IN FREMDES MARKUP GREIFEN.
 *
 * Sie faerbt jede Ueberschrift der Seite — auch die der Eventkarten unter
 * "Aehnliche Events", denn deren Titel ist ein <h3>. `.lea-detail h3` wiegt
 * (0,1,1) und schlaegt `.lea-event-card` (0,1,0), also gewinnt sie
 * unabhaengig von der Reihenfolge. Auf einem dunklen Theme ist `--lea-fg`
 * weiss: weisse Schrift auf weisser Karte, unsichtbar, keine Meldung.
 *
 * Gebraucht wird die Regel trotzdem — `event.description` traegt Richtext und
 * kann eigene Ueberschriften mitbringen. Also wird der eingebettete Teil
 * zurueckgenommen statt der Regel: die Karte bestimmt ihre Farben selbst,
 * so wie sie es auf der Startseite auch tut.
 *
 * Drei Klassen und ein Element (0,3,1) gegen (0,1,1) — mit Absicht so
 * geschrieben, dass die Reihenfolge keine Rolle spielt.
 */
.lea-detail .lea-events .lea-event-card,
.lea-detail .lea-events .lea-event-card h1,
.lea-detail .lea-events .lea-event-card h2,
.lea-detail .lea-events .lea-event-card h3 {
    color: var(--lea-ev-ink, #0a1b3e);
}

.lea-detail a {
    color: var(--lea-akzent, #b63032);
}

/*
 * DAS ABSAGE-BAND ueber dem Kopf, ueber die volle Breite, der Inhalt auf die Spalte der
 * Seite eingerueckt wie Kopf und Koerper. Zwei Klassen, weil `.lea-detail p` und Co. sonst
 * gleich wiegen; die Fuellfarbe ausdruecklich, weil der Kopf eine vererbt.
 */
.lea-detail .lea-detail__cancelled {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0;
    padding: 14px max(28px, calc((100% - 1240px) / 2));
    background: #b63032;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    font-size: 15px;
}

.lea-detail .lea-detail__cancelled strong {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- Hero-Muster */

/*
 * Fuenf Muster, eine Grundlage. Was sie teilen — Eyebrow, Titel, Termin,
 * Teaser — steht im Partial Detail/Hero/Meta und hier in .lea-detail-hero__*; was sie
 * unterscheidet, steht in den fuenf Bloecken darunter.
 *
 * KEINES BRICHT AUS DEM CONTAINER AUS. Der Entwurf laesst Plakat und
 * zentriertes Muster ueber die volle Fensterbreite laufen; dort gab es keinen
 * Container. Hier steckt das Element in .container-80 des Themes, und die
 * ueblichen Auswege (width: 100vw, negative Raender) erzeugen auf Fenstern MIT
 * Bildlaufleiste waagerechtes Scrollen — 100vw zaehlt sie mit, der Container
 * nicht. Der Grundton bleicht ueber die Breite (Schlagschatten am Wrapper),
 * das Foto bleibt im Raster. Soll es wirklich ueber die Breite, ist das ein
 * Rahmen-Layout des Themes und keine Zeile hier.
 */

/*
 * DIE FARBE STEHT HIER AUSDRUECKLICH, obwohl sie eine Zeile hoeher schon gilt.
 *
 * Das Muster ist ein <header>, und im Theme ist ein <header> die Kopfzeile der
 * Seite: irgendwo in seiner Kette landet daran Weiss. Gemessen war der
 * Zustand eindeutig — .lea-detail__event darueber stand auf der Tintenfarbe,
 * das <header> darin auf #fff, und damit war jede Beschriftung im Datumsband
 * und im Faktenkasten weiss auf weiss. Sichtbar blieb nur, was eine eigene
 * Farbe trug: der erste Tag (weiss auf Akzent) und die dt-Zeilen.
 *
 * Ein Element, dessen Farbe man erbt, ist eine Wette auf fremdes CSS. Also
 * wird sie gesetzt.
 */
/*
 * DAS BAND TRAEGT SEINE EIGENE FARBE, wenn die Kategorie eine gepflegt hat.
 *
 * Im Entwurf haben sieben von acht Kategorien dieselbe Kopf- wie Seitenfarbe —
 * dort bleibt das Feld leer und `transparent` laesst den Grundton durch. Nur
 * Business hat ein eigenes Band. Abgeleitet wird hier nichts mehr: die Farbe
 * steht im Datensatz, und zwar genau die aus dem Entwurf.
 */
.lea-detail-hero {
    background: var(--lea-hero-bg, transparent);
    padding-block: 40px;
    margin-bottom: 40px;
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lea-akzent2, #b63032);
}

/*
 * Der Haarstrich fuellt, was zwischen Kategoriename und Termin uebrig bleibt.
 * `flex: 1` statt einer festen Breite — die Zeile ist verschieden lang, je
 * nach Kategoriename und Sprache.
 */
.lea-detail-hero__eyebrow-rule {
    flex: 1;
    height: 1px;
    min-width: 20px;
    background: color-mix(in srgb, var(--lea-fg, #0a1b3e) 20%, transparent);
}

.lea-detail-hero--poster .lea-detail-hero__eyebrow {
    margin-bottom: 44px;
}

.lea-detail-hero__eyebrow-date {
    flex-shrink: 0;
    color: var(--lea-fg2, #5b6570);
}

/*
 * Unter 600px bricht die Zeile: Kategoriename und Termin nebeneinander waeren
 * bei 4px Laufweite beide abgeschnitten. Der Strich verschwindet dabei — er
 * trennt dann nichts mehr.
 */
@media (max-width: 599.98px) {
    .lea-detail-hero__eyebrow {
        flex-wrap: wrap;
    }

    .lea-detail-hero__eyebrow-rule {
        display: none;
    }
}

/* Das Icon nimmt die Farbe der Zeile an — currentColor im inline-SVG. */
.lea-detail-hero__eyebrow-icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.lea-detail-hero__eyebrow-icon svg,
.lea-detail-hero__eyebrow-icon img {
    display: block;
    width: 18px;
    height: 18px;
}

/*
 * DIE FARBE KOMMT AUS DER ZEILE, nicht aus der Datei.
 *
 * Die hochgeladenen Icons tragen ein hartes `fill="#FFFFFF"` im SVG-Element.
 * Das ist ein Praesentations-ATTRIBUT und wiegt weniger als jede CSS-Regel —
 * `fill: currentColor` gewinnt also, ohne dass jemand die Dateien anfassen
 * muss. Ohne diese Zeile stuende ein weisses Icon neben einer akzentblauen
 * Beschriftung, und auf hellen Kategorien waere es gar nicht zu sehen.
 */
.lea-detail-hero__eyebrow-icon svg,
.lea-detail-hero__eyebrow-icon svg path {
    fill: currentColor;
}

.lea-detail-hero__title {
    margin: 0 0 16px;
    font-size: clamp(2.125rem, 1.4rem + 3.2vw, 4.5rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    /* German compounds like "Möbelhauskonzert" are wider than a phone; unbroken they get clipped. */
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

/* No drafted title is hyphenated, but hyphens: auto packs lines greedily and split
   "Speicher-stadt" at 1440px. Balancing wraps at the space where the word fits and
   leaves the hyphen for words that fit on no line at all ("Möbel-hauskonzert"). */
@media (min-width: 992px) {
    .lea-detail-hero__title {
        text-wrap: balance;
    }
}

.lea-detail-hero__title em {
    font-style: italic;
}

.lea-detail-hero__date {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--lea-akzent, #b63032);
}

.lea-detail-hero__place {
    color: var(--lea-fg2, #5b6570);
}

.lea-detail-hero__teaser {
    margin: 0;
    max-width: 46rem;
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
    line-height: 1.6;
    color: var(--lea-fg2, #5b6570);
}

/*
 * DIE BESETZUNGSZEILE DES PLAKATS — vier Stufen der Betonung in einer Zeile.
 *
 * Der Entwurf staffelt Groesse, Gewicht und Deckkraft: 26/700/voll, 20/600/80%,
 * 16/500/60%, danach 14/500/45%. Das ist die Reihenfolge des Line-ups, also
 * die Sortierung der Kindsaetze — keine Bewertung, die hier entstuende.
 *
 * `align-items: baseline` haelt die verschieden grossen Namen auf einer
 * Schriftlinie; ohne das haengen sie an ihren Oberkanten und die Zeile wirkt
 * gekippt.
 */
.lea-detail-hero__billing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
    margin: 0 0 40px;
}

.lea-detail-hero__billing-act {
    font-size: 14px;
    font-weight: 500;
    color: color-mix(in srgb, var(--lea-fg, #0a1b3e) 45%, transparent);
}

.lea-detail-hero__billing-act:first-child {
    font-size: 26px;
    font-weight: 700;
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail-hero__billing-act:nth-child(2) {
    font-size: 20px;
    font-weight: 600;
    color: color-mix(in srgb, var(--lea-fg, #0a1b3e) 80%, transparent);
}

.lea-detail-hero__billing-act:nth-child(3) {
    font-size: 16px;
    color: color-mix(in srgb, var(--lea-fg, #0a1b3e) 60%, transparent);
}

/* Auf dem Foto gilt Weiss, wie bei Titel und Teaser daneben. */
.lea-detail-hero--poster .lea-detail-hero__billing-act:first-child {
    color: #ffffff;
}

.lea-detail-hero--split .lea-detail-hero__figure img {
    height: 520px;
    object-fit: cover;
}

.lea-detail-hero--split .lea-detail-hero__figure {
    border-radius: 4px;
}

.lea-detail-hero__figure {
    margin: 0;
    border-radius: var(--lea-radius, 18px);
    overflow: hidden;
}

.lea-detail-hero__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.lea-detail-hero__figure--after {
    margin: 0 0 40px;
}

/* ------------------------------------------------------------------ Merken */

.lea-detail-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.lea-detail-hero__save {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1.5px solid var(--lea-akzent, #b63032);
    border-radius: 999px;
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
}

/*
 * GEMERKT DREHT DIE FLAECHE UM, statt nur den Text zu tauschen. Zwei Zustaende,
 * die sich nur im Wort unterscheiden, liest niemand im Vorbeigehen — und beim
 * Umschalten soll sichtbar etwas passieren.
 */
.lea-detail-hero__save.is-saved {
    background: transparent;
    color: var(--lea-akzent, #b63032);
}

/*
 * Der wartende Knopf ist gedaempft, aber NICHT unsichtbar: er zeigt an, dass
 * es ihn gibt und dass er gleich kann. Der Zeiger bleibt der normale, damit
 * niemand ins Leere klickt.
 */
/* Remind me: the outline pill of the design beside the filled Merken button. */
.lea-detail a.lea-detail-hero__remind {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border: 1.5px solid var(--lea-line, #e7ecf5);
    border-radius: 999px;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail a.lea-detail-hero__remind:hover,
.lea-detail a.lea-detail-hero__remind:focus-visible {
    border-color: var(--lea-akzent, #b63032);
    color: var(--lea-akzent, #b63032);
}

/* On a photo, a dark band or a dark theme the outline turns white, as in the design. */
.lea-detail .lea-detail-hero--poster a.lea-detail-hero__remind,
.lea-detail .lea-detail-hero--centered a.lea-detail-hero__remind,
.lea-detail .lea-detail-hero--club a.lea-detail-hero__remind,
.lea-detail .lea-detail-hero--facts a.lea-detail-hero__remind,
.lea-detail.lea-detail--dark a.lea-detail-hero__remind {
    border-color: rgba(255, 255, 255, 0.42);
    color: #ffffff;
}

.lea-detail .lea-detail-hero--poster a.lea-detail-hero__remind:hover,
.lea-detail .lea-detail-hero--centered a.lea-detail-hero__remind:hover,
.lea-detail .lea-detail-hero--club a.lea-detail-hero__remind:hover,
.lea-detail .lea-detail-hero--facts a.lea-detail-hero__remind:hover,
.lea-detail.lea-detail--dark a.lea-detail-hero__remind:hover {
    border-color: #ffffff;
    color: #ffffff;
}

.lea-detail-hero__remind-icon {
    flex-shrink: 0;
}

.lea-detail-hero__save[disabled] {
    opacity: 0.55;
    cursor: default;
}

.lea-detail-hero__save.is-failed {
    border-color: var(--lea-fg2, #5b6570);
    background: transparent;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail-hero__save-icon {
    font-size: 15px;
    line-height: 1;
}

/*
 * Auf dem Foto ist der Rahmen hell — der Akzent verschwindet dort je nach
 * Bildausschnitt. Dieselbe Ueberlegung wie bei der Datumszeile.
 */
.lea-detail-hero--poster .lea-detail-hero__save.is-saved,
.lea-detail-hero--centered .lea-detail-hero__save.is-saved {
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

/* Auf dem dunklen Faktenband ebenso. */
.lea-detail-hero--facts .lea-detail-hero__save.is-saved {
    border-color: rgba(255, 255, 255, 0.42);
    color: #ffffff;
}

/* Plakat und zentriert: Schrift auf dem Foto */

.lea-detail-hero--poster,
.lea-detail-hero--centered,
.lea-detail-hero--club {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 26rem;
    padding-block: 48px;
    overflow: hidden;
    isolation: isolate;
    background: color-mix(in srgb, var(--lea-fg) 12%, transparent);
}

/* The photo heads sit flush on the facts band, as in the design. */
.lea-detail-hero--poster,
.lea-detail-hero--centered,
.lea-detail-hero--club {
    margin-bottom: 0;
}

/* Without a facts band the text would touch the photo. */
.lea-detail-hero--poster + .lea-detail__body,
.lea-detail-hero--centered + .lea-detail__body,
.lea-detail-hero--club + .lea-detail__body {
    padding-top: 88px;
}

.lea-detail-hero--poster .lea-detail-hero__inner,
.lea-detail-hero--centered .lea-detail-hero__inner,
.lea-detail-hero--club .lea-detail-hero__inner {
    width: 100%;
}

.lea-detail-hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * DER VERLAUF IST DIE LESBARKEIT, nicht die Stimmung. Welches Foto ein
 * Veranstalter hochlaedt, weiss niemand vorher; weisse Schrift darauf ist ohne
 * ihn Glueckssache. Er sitzt als eigene Schicht ueber dem Bild und unter dem
 * Text, damit er kein Element umschliessen muss.
 */
.lea-detail-hero--poster::before,
.lea-detail-hero--club::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 8, 16, 0.15) 0%, rgba(6, 8, 16, 0.58) 45%, rgba(6, 8, 16, 0.88) 100%);
}

/*
 * BEIM PLAKAT LAEUFT DER VERLAUF IN DIE SEITENFARBE AUS, damit Foto und Seite
 * nahtlos aneinanderstossen — die drei Halte des Entwurfs: 55 % oben, 75 % bei
 * 55 %, unten voll deckend.
 *
 * NUR beim Plakat. Das Muster `centered` daneben tragen im Entwurf HELLE
 * Kategorien (Dating, Essen); dort laeuft der Verlauf in deren hellen Grund
 * aus, und die Schrift darauf ist dunkel. Unser `centered` faerbt Titel und
 * Teaser bislang weiss — ein heller Verlauf machte sie unsichtbar. Das ist
 * eine eigene Aufgabe, kein Nebeneffekt dieser hier.
 */
.lea-detail-hero--poster::before {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--lea-scrim, #06080f) 55%, transparent) 0%,
        color-mix(in srgb, var(--lea-scrim, #06080f) 75%, transparent) 55%,
        var(--lea-scrim, #06080f) 100%
    );
}

/*
 * Auf dem Verlauf ist die Schrift immer hell — auch bei einem hellen Theme.
 * Die Akzentfarbe bleibt, sie steht auf dem abgedunkelten Foto noch.
 */
.lea-detail-hero--poster .lea-detail-hero__title,
.lea-detail-hero--club .lea-detail-hero__title,
.lea-detail-hero--club .lea-detail-hero__teaser,
.lea-detail-hero--poster .lea-detail-hero__teaser,
.lea-detail-hero--poster .lea-detail-hero__place {
    color: #ffffff;
}

.lea-detail-hero--poster .lea-detail-hero__teaser {
    color: rgba(255, 255, 255, 0.82);
}

/*
 * DER TERMIN STEHT AUF DEM FOTO IN WEISS, NICHT IN DER AKZENTFARBE.
 *
 * Auf hellem Grund traegt der Akzent die Zeile. Ueber einem Foto nicht: der
 * Verlauf dunkelt ab, aber welche Stelle darunter hell ist, weiss niemand
 * vorher — ein rotes 13px-Versalienband auf einem hellen Bildausschnitt ist
 * schlicht nicht lesbar. Der Eyebrow behaelt die Akzentfarbe, er steht oben
 * und ist kurz.
 */
.lea-detail-hero--poster .lea-detail-hero__date {
    color: rgba(255, 255, 255, 0.9);
}

.lea-detail-hero--poster .lea-detail-hero__place {
    color: rgba(255, 255, 255, 0.66);
}

/*
 * OHNE BILD KEIN VERLAUF — sonst stuende ein dunkler Kasten ohne Grund auf
 * der Seite, und bei einem hellen Theme weisse Schrift auf hellem Grund.
 */
.lea-detail-hero--flat {
    min-height: 0;
    padding: 0;
    background: none;
}

.lea-detail-hero--flat::before {
    display: none;
}

.lea-detail-hero--flat .lea-detail-hero__title,
.lea-detail-hero--flat .lea-detail-hero__teaser,
.lea-detail-hero--flat .lea-detail-hero__place {
    color: inherit;
}

.lea-detail-hero--flat .lea-detail-hero__date {
    color: var(--lea-akzent, #b63032);
}

.lea-detail-hero--flat .lea-detail-hero__place {
    color: var(--lea-fg2, #5b6570);
}

.lea-detail-hero--flat .lea-detail-hero__teaser {
    color: var(--lea-fg2, #5b6570);
}

/*
 * DER PLAKAT-TITEL IST DAS PLAKAT.
 *
 * Der Entwurf: 112px, Gewicht 800, Laufweite -3px, Zeilenhoehe 0.88,
 * Versalien. Der obere Halt der clamp() trifft die 112px ab etwa 1500px
 * Fensterbreite, darunter waechst er mit — eine feste Groesse haette auf einem
 * Telefon die Haelfte der Buchstaben ueber den Rand geschoben.
 */
.lea-detail-hero--poster .lea-detail-hero__title {
    margin-bottom: 28px;
    font-size: clamp(2.75rem, 1.2rem + 6.2vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.027em;
    text-transform: uppercase;
    /* Not the design's 0.88: capital umlaut dots rise above the cap height and hit the line above. */
    line-height: 1;
}

/* Dating head: the photo at full strength under a dark overlay, a narrow centred column, white type. */
.lea-detail-hero--centered {
    align-items: center;
    justify-content: center;
    min-height: 28rem;
    padding-block: 76px 84px;
    text-align: center;
    background: color-mix(in srgb, var(--lea-akzent, #c2456b) 30%, #06080f);
}

/* Dark like the other photo heads, a little denser behind the centred text. */
.lea-detail-hero--centered::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6, 8, 16, 0.45) 0%, rgba(6, 8, 16, 0.6) 55%, rgba(6, 8, 16, 0.8) 100%);
}

.lea-detail-hero--centered .lea-detail-hero__text {
    max-width: 720px;
    margin-inline: auto;
}

/* The eyebrow stays the white pill of the design; on the dark photo it reads best. */
.lea-detail-hero--centered .lea-detail-hero__eyebrow {
    display: inline-flex;
    gap: 9px;
    margin-bottom: 30px;
    padding: 9px 18px;
    border: 1px solid color-mix(in srgb, var(--lea-akzent, #c2456b) 25%, transparent);
    border-radius: 999px;
    background: var(--lea-card, #ffffff);
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--lea-akzent, #c2456b);
}

.lea-detail-hero--centered .lea-detail-hero__title {
    margin-bottom: 22px;
    font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
    font-weight: 300;
    line-height: 1.12;
    color: #ffffff;
}

/* The highlighted word is bold here, as in the design; the theme gradient has to go. */
.lea-detail-hero--centered .lea-detail-hero__title .headline-word-color {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-weight: 700;
}

.lea-detail-hero--centered .lea-detail-hero__teaser {
    margin-bottom: 34px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

/* Date, place and duration sit in one centred row; the icons take the lighter pink. */
.lea-detail-hero--centered .lea-detail-hero__meta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
    margin-bottom: 38px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.lea-detail-hero--centered .lea-detail-hero__meta-icon {
    color: var(--lea-akzent2, #e8829b);
}

.lea-detail-hero--centered .lea-detail-hero__actions {
    justify-content: center;
}

/*
 * ZENTRIERT AUF EINER HELLEN KATEGORIE: HELLER SCHLEIER, DUNKLE SCHRIFT.
 *
 * Der Entwurf laesst das Foto unter dem Grundton der Seite ausblenden, statt
 * es abzudunkeln — dieselbe Dreistufen-Form wie beim Plakat, nur hell. Unten
 * ist er voll deckend, damit Kopf und Faktenband nahtlos aneinanderstossen.
 *
 * NUR mit `--light`, also nur wenn die Kategorie wirklich einen hellen Grund
 * fuehrt. Ohne ihn bliebe der dunkle Kopf von oben stehen — bei einer
 * ungepflegten Kategorie waere ein heller Schleier aus `transparent` gemischt
 * und die dunkle Schrift stuende blank auf dem Veranstalterfoto.
 */
.lea-detail--light .lea-detail-hero--centered {
    background: var(--lea-bg, #ffffff);
}

.lea-detail--light .lea-detail-hero--centered::before {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--lea-bg, #ffffff) 75%, transparent) 0%,
        color-mix(in srgb, var(--lea-bg, #ffffff) 92%, transparent) 60%,
        var(--lea-bg, #ffffff) 100%
    );
}

.lea-detail--light .lea-detail-hero--centered .lea-detail-hero__title {
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail--light .lea-detail-hero--centered .lea-detail-hero__teaser,
.lea-detail--light .lea-detail-hero--centered .lea-detail-hero__meta {
    color: var(--lea-fg2, #5b6570);
}

/* The design takes the full accent here; the lighter second tone was for the dark head. */
.lea-detail--light .lea-detail-hero--centered .lea-detail-hero__meta-icon {
    color: var(--lea-akzent, #c2456b);
}

/*
 * Die weisse Kontur gilt „auf dem Foto" — hier liegt kein dunkles mehr darunter.
 * Dieselbe Spezifitaet (0,3,1) wie die Regel, die sie setzt, und spaeter in der
 * Datei: damit gewinnt sie ohne `!important`.
 */
.lea-detail--light .lea-detail-hero--centered a.lea-detail-hero__remind,
.lea-detail--light .lea-detail-hero--centered .lea-detail-hero__save.is-saved {
    border-color: color-mix(in srgb, var(--lea-akzent, #c2456b) 45%, transparent);
    color: var(--lea-akzent, #c2456b);
}

.lea-detail--light .lea-detail-hero--centered a.lea-detail-hero__remind:hover {
    border-color: var(--lea-akzent, #c2456b);
    color: var(--lea-akzent, #c2456b);
}

/* ------------------------------------------------------------- Clubnacht */

/*
 * DAS FOTO IST HIER STIMMUNG, NICHT MOTIV.
 *
 * Der Entwurf dimmt es auf 55 % und legt eine Farbwaesche darueber — aus dem
 * Akzent ins Dunkel der Seite. Anders als beim Plakat blendet nichts aus: die
 * Waesche liegt gleichmaessig ueber dem ganzen Kopf, das Foto gibt nur noch
 * Struktur.
 */
.lea-detail-hero--club .lea-detail-hero__backdrop {
    opacity: 0.55;
}

.lea-detail-hero--club::before {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, color-mix(in srgb, var(--lea-akzent, #7b2ff7) 32%, #000000) 82%, transparent) 0%,
        var(--lea-scrim, #06080f) 100%
    );
}

.lea-detail-hero--club {
    padding-block: 52px 68px;
}

/*
 * DAS ABZEICHEN. Umrandet, nicht flaechig — im Entwurf ein Rahmen in der
 * Zweitfarbe mit einem Punkt davor, der die Nacht ankuendigt.
 */
.lea-detail-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 36px;
    padding: 9px 16px;
    border: 1px solid var(--lea-akzent2, #ff3d8a);
    border-radius: 4px;
    font-family: var(--lea-display, inherit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--lea-akzent2, #ff3d8a);
}

.lea-detail-hero__badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--lea-akzent2, #ff3d8a);
}

.lea-detail-hero--club .lea-detail-hero__title {
    margin-bottom: 24px;
    font-size: clamp(2.5rem, 1rem + 5.4vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.031em;
    /* Capital umlauts need the room, see the poster title. */
    line-height: 1;
    text-transform: uppercase;
}

.lea-detail-hero--club .lea-detail-hero__teaser {
    max-width: 620px;
    margin-bottom: 36px;
    font-family: var(--lea-display, inherit);
    font-size: 17px;
    line-height: 1.6;
    color: color-mix(in srgb, #ffffff 70%, transparent);
}

/*
 * DIE SCHLAGWOERTER. Flaechig und hell, damit sie sich vom umrandeten
 * Abzeichen darueber unterscheiden — im Entwurf sind das zwei verschiedene
 * Dinge: oben die Ankuendigung, hier die Merkmale.
 */
.lea-detail-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 38px;
}

.lea-detail-hero__tag {
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-family: var(--lea-display, inherit);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
}

/* ------------------------------------------------------------- Menu card */

/* Food head: the photo over the upper part of the band, a light card resting on it. */
.lea-detail-hero--menu {
    position: relative;
    padding-block: 260px 64px;
    margin-bottom: 0;
    overflow: hidden;
    background: var(--lea-bg, transparent);
}

.lea-detail-hero--menu-plain {
    padding-top: 64px;
}

.lea-detail-hero--menu + .lea-detail__body {
    padding-top: 88px;
}

.lea-detail-hero__photo {
    position: absolute;
    inset: 0 0 38% 0;
}

.lea-detail-hero__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The design's veil: a little dark at the top, gone where the photo meets the page. */
.lea-detail-hero__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 10, 8, 0.35) 0%, rgba(20, 10, 8, 0.1) 70%, transparent 100%);
}

.lea-detail-hero--menu .lea-detail-hero__inner {
    position: relative;
}

/* The card takes the page ground; white underneath keeps it opaque for a category without one. */
.lea-detail-hero__card {
    max-width: 760px;
    padding: 52px 56px;
    border: 1px solid color-mix(in srgb, var(--lea-akzent, #8c2f3d) 20%, transparent);
    border-radius: 6px;
    background: linear-gradient(var(--lea-bg, transparent), var(--lea-bg, transparent)), #ffffff;
    box-shadow: 0 30px 70px rgba(20, 10, 8, 0.18);
    text-align: center;
}

.lea-detail-hero--menu .lea-detail-hero__eyebrow {
    justify-content: center;
    margin-bottom: 22px;
    font-weight: 600;
    letter-spacing: 5px;
    color: var(--lea-akzent, #8c2f3d);
}

.lea-detail-hero--menu .lea-detail-hero__title {
    margin-bottom: 22px;
    font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
    font-weight: 400;
    line-height: 1.06;
}

/* The short accent rule under the title, drawn instead of written into the markup. */
.lea-detail-hero--menu .lea-detail-hero__title::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    margin: 18px auto 0;
    background: var(--lea-akzent, #8c2f3d);
}

/* The highlighted word is italic here, as in the design; the theme gradient has to go. */
.lea-detail-hero--menu .lea-detail-hero__title .headline-word-color {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-style: italic;
}

.lea-detail-hero--menu .lea-detail-hero__teaser {
    margin-bottom: 30px;
    font-family: var(--lea-display, inherit);
    font-size: 1.3125rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--lea-fg2, #5a4448);
}

.lea-detail-hero--menu .lea-detail-hero__meta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-bottom: 32px;
    font-size: 13px;
}

.lea-detail-hero--menu .lea-detail-hero__actions {
    justify-content: center;
}

@media (max-width: 767.98px) {
    .lea-detail-hero--menu {
        padding-top: 180px;
    }

    .lea-detail-hero__card {
        padding: 32px 24px;
    }
}

/* ------------------------------------------------------------- Workshop */

/* Workshop head: text with feature chips on the left, a rounded photo on the right. */
.lea-detail-hero--workshop {
    padding-block: 56px 64px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--lea-line, #e7ecf5);
}

.lea-detail-hero--workshop + .lea-detail__body {
    padding-top: 72px;
}

.lea-detail-hero--workshop .lea-detail-hero__eyebrow {
    gap: 12px;
    margin-bottom: 24px;
    font-weight: 600;
    color: var(--lea-akzent, #1f6f5c);
}

.lea-detail-hero--workshop .lea-detail-hero__title {
    margin-bottom: 22px;
    font-size: clamp(2.125rem, 1.3rem + 3vw, 3.125rem);
    font-weight: 300;
    line-height: 1.1;
}

/* The highlighted word is bold here, as in the design; the theme gradient has to go. */
.lea-detail-hero--workshop .lea-detail-hero__title .headline-word-color {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-weight: 700;
}

.lea-detail-hero--workshop .lea-detail-hero__teaser {
    max-width: 560px;
    margin-bottom: 30px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--lea-fg2, #5b6570);
}

/* Date, place and duration become the white feature chips of the design. */
.lea-detail-hero--workshop .lea-detail-hero__meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lea-fg, #16241f);
}

.lea-detail-hero--workshop .lea-detail-hero__meta li {
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--lea-akzent, #1f6f5c) 20%, transparent);
    border-radius: 8px;
    background: var(--lea-card, #ffffff);
}

.lea-detail-hero--workshop .lea-detail-hero__meta-icon {
    width: 17px;
    height: 17px;
}

.lea-detail-hero--workshop .lea-detail-hero__figure {
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
}

.lea-detail-hero--workshop .lea-detail-hero__figure img {
    display: block;
    width: 100%;
    height: 400px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .lea-detail-hero--workshop .lea-detail-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        gap: 48px;
        align-items: center;
    }
}

/* ------------------------------------------------------------ Datumsband */

/* Season head: tiles beside the title, a photo strip below, all on the page ground. */
.lea-detail-hero--banded {
    padding-block: 52px 0;
    margin-bottom: 0;
}

/* Without a facts band the text would touch the strip. */
.lea-detail-hero--banded + .lea-detail__body {
    padding-top: 88px;
}

.lea-detail-hero--banded .lea-detail-hero__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 40px;
}

.lea-detail-hero--banded .lea-detail-hero__text > * {
    grid-column: 1 / -1;
}

/* On the light ground the richer accent carries, not the second colour. */
.lea-detail-hero--banded .lea-detail-hero__eyebrow {
    order: 0;
    margin-bottom: 30px;
    font-weight: 600;
    color: var(--lea-akzent, #1e5b4f);
}

.lea-detail-hero--banded .lea-detail-hero__title {
    order: 1;
    margin-bottom: 0;
    font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.875rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.013em;
}

.lea-detail-hero--banded .lea-detail-hero__days {
    order: 2;
}

.lea-detail-hero--banded .lea-detail-hero__teaser,
.lea-detail-hero--banded .lea-detail-hero__date {
    order: 3;
    max-width: 660px;
    margin: 34px 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail-hero--banded .lea-detail-hero__actions {
    order: 4;
    margin: 0 0 44px;
}

/* The strip of the design: the title picture wide, two gallery pictures beside it. */
.lea-detail-hero__strip {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    height: 300px;
}

.lea-detail-hero__strip-item {
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
}

/* Without gallery pictures the title picture takes the whole row. */
.lea-detail-hero__strip-item:only-child {
    grid-column: 1 / -1;
}

.lea-detail-hero__strip-item a,
.lea-detail-hero__strip-item img {
    display: block;
    width: 100%;
    height: 100%;
}

.lea-detail-hero__strip-item img {
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .lea-detail-hero__strip {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }

    .lea-detail-hero__strip-item {
        height: 180px;
    }

    .lea-detail-hero__strip-item:first-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .lea-detail-hero--banded .lea-detail-hero__text {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lea-detail-hero--banded .lea-detail-hero__title {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
    }

    .lea-detail-hero--banded .lea-detail-hero__days {
        grid-column: 2;
        grid-row: 2;
        align-self: end;
        margin: 0;
    }
}


.lea-detail-hero__days {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.lea-detail-hero__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 78px;
    padding: 16px 20px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 10px;
    background: var(--lea-card, #ffffff);
    line-height: 1.15;
}

/* The closing day is highlighted, as in the design; "today" would not be cacheable. */
.lea-detail-hero__day--highlight {
    border-color: var(--lea-akzent, #b63032);
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
}

.lea-detail-hero__day-weekday {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-akzent, #b63032);
}

.lea-detail-hero__day--highlight .lea-detail-hero__day-weekday {
    color: var(--lea-akzent2, #c9a227);
}

.lea-detail-hero__day-number {
    font-family: var(--lea-display, inherit);
    font-size: 34px;
    font-weight: 600;
}

.lea-detail-hero__day-month {
    font-size: 11px;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail-hero__day--highlight .lea-detail-hero__day-month {
    color: rgba(255, 255, 255, 0.8);
}

/*
 * DAS FAKTEN-MUSTER IST EIN DUNKLES BAND, auch auf hellem Grund.
 *
 * Im Entwurf hat Business als einzige Kategorie einen Kopf, dessen Farbe NICHT
 * der Seitengrund ist: #0A1B3E auf #F2F5FA. Das ist der ganze Punkt des
 * Musters — ein sachlicher, abgesetzter Block, unter dem die Seite hell
 * weitergeht.
 *
 * Der Ton wird ABGELEITET, nicht je Kategorie gepflegt: der Akzent, tief
 * abgedunkelt. Fuer Business (#1E4FA3) ergibt das #0D1D3B und trifft den
 * Entwurf auf wenige Prozent genau; jede andere Kategorie, die das Muster
 * waehlt, bekommt ihr eigenes dunkles Band statt eines fremden Navy.
 */
.lea-detail-hero--facts {
    /* 56px 10vw 60px — die Werte des Entwurfs. */
    padding-block: 56px 60px;
    margin-bottom: 0;

    /*
     * Der Rueckfall ist eine ABLEITUNG, kein zweites Navy: waehlt eine
     * Kategorie dieses Muster, ohne eine Bandfarbe zu pflegen, bekommt sie
     * ihren eigenen Akzent tief abgedunkelt — nicht das Blau von Business.
     * Gepflegt gewinnt der Datensatz.
     */
    background: var(--lea-hero-bg, color-mix(in srgb, var(--lea-akzent, #1e4fa3) 30%, #06080f));
    color: #ffffff;
}

/*
 * Das Band schliesst buendig ab (margin-bottom: 0), weil im Entwurf das
 * Faktenband direkt darunter anschliesst. FEHLT DAS FAKTENBAND, muss der
 * Abstand trotzdem da sein — sonst stiesse der Fliesstext an die dunkle
 * Kante. Der Nachbarschaftsselektor greift genau dann, wenn kein Band
 * dazwischen steht.
 */
.lea-detail-hero--facts + .lea-detail__body {
    padding-top: 88px;
}

.lea-detail-hero--facts .lea-detail-hero__title,
.lea-detail-hero--facts .lea-detail-hero__date {
    color: #ffffff;
}

/*
 * Der Titel im Entwurf: 52px, Gewicht 300, und ein <strong> darin traegt 700.
 * Die Redaktion setzt den fetten Teil selbst, indem sie ihn im Titel
 * auszeichnet — hier steht nur, wie beides aussieht.
 */
.lea-detail-hero--facts .lea-detail-hero__title {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
    font-weight: 300;
    line-height: 1.1;
}

/*
 * Das hervorgehobene Wort ist hier FETT, nicht farbig.
 *
 * `headline-word-color` ist die Klasse, die YaviCore:FormatText aus den
 * eckigen Klammern der Redaktion macht — projektweit dieselbe Schreibweise.
 * Was sie bedeutet, entscheidet das Muster: der Entwurf setzt den zweiten
 * Teil des Business-Titels in Weiss und 700. Auf dem dunklen Band waere der
 * Verlauf des Themes ausserdem kaum zu lesen.
 *
 * DREI ZEILEN ZUM ZURUECKNEHMEN, NICHT EINE. Das Theme malt hervorgehobene
 * Woerter mit einem VERLAUF, der auf die Glyphen beschnitten ist:
 * `background-clip: text` plus `-webkit-text-fill-color: transparent`. Gegen
 * ein durchsichtiges text-fill kommt `color` nicht an — die Schrift blieb
 * unsichtbar bzw. behielt den Verlauf, egal wie schwer der Selektor wiegt.
 * Also muessen Verlauf UND Fuellfarbe zurueckgenommen werden.
 */
.lea-detail-hero--facts .lea-detail-hero__title .headline-word-color {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
    font-weight: 700;
}

.lea-detail-hero--facts .lea-detail-hero__teaser {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.72);
}

.lea-detail-hero--facts .lea-detail-hero__place {
    color: rgba(255, 255, 255, 0.6);
}

/* Faktenkasten */

/*
 * UNTEREINANDER BRAUCHT DER KASTEN LUFT NACH OBEN.
 *
 * Nebeneinander trennt das Raster Text und Faktenkasten (gap: 56px, ab 768 px).
 * Darunter gibt es kein Raster mehr, und der Kasten stiess direkt an den
 * „Erinnere mich"-Knopf — die Knopfzeile endete genau dort, wo er begann.
 */
@media (max-width: 767.98px) {
    .lea-detail-hero--facts .lea-detail-hero__facts {
        margin-top: 32px;
    }
}

.lea-detail-hero__facts {
    /* 26px Polsterung, Radius 14 — die Werte des Entwurfs. */
    padding: 26px 26px 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.lea-detail-hero__facts-title {
    margin: 0 0 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lea-akzent2, #4c8de0);
}

/*
 * Beschriftung links, Wert rechts, darunter eine Linie ueber die ganze Breite.
 *
 * DIE LINIE HAENGT AN BEIDEN ZELLEN, nicht an einer Zeile: ein <dl> hat keine
 * Zeilen, die man umranden koennte. Zwei Rasterzellen mit derselben Unterkante
 * ergeben optisch einen durchgehenden Strich — und anders als ein negativer
 * Aussenabstand haelt das auch, wenn ein Wert zweizeilig wird.
 */
.lea-detail-hero__facts dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    margin: 0;
    font-size: 13px;
}

.lea-detail-hero__facts dt,
.lea-detail-hero__facts dd {
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lea-detail-hero__facts dt {
    color: rgba(255, 255, 255, 0.6);
}

.lea-detail-hero__facts dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: #ffffff;
}

.lea-detail-hero__facts dt:last-of-type,
.lea-detail-hero__facts dd:last-of-type {
    border-bottom: 0;
}

/* ------------------------------------------- Inhalt beim zweispaltigen Kopf */

/*
 * DAS PROGRAMM IST HIER EINE WERKLISTE, kein Kasten.
 *
 * Der Entwurf setzt es redaktionell: Titel in der Serifenschrift, darunter
 * klein die Einordnung, rechts die Zeit in der Akzentfarbe, dazwischen nur
 * eine Haarlinie. Kein Rahmen, keine Kopfzeile — dieselben Daten wie bei
 * Business und Musik, nur ruhiger gesetzt.
 */
.lea-detail--split .lea-detail__agenda-head {
    display: none;
}

.lea-detail--split .lea-detail__agenda {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.lea-detail--split .lea-detail__agenda-item {
    gap: 4px 24px;
    padding: 16px 0;
    border-top: 0;
    border-bottom: 1px solid var(--lea-line, #e7ecf5);
    align-items: baseline;
}

.lea-detail--split .lea-detail__agenda-title {
    font-family: var(--lea-display, inherit);
    font-size: 1.375rem;
    font-weight: 400;
}

.lea-detail--split .lea-detail__agenda-text {
    margin-top: 4px;
    font-size: 13px;
}

.lea-detail--split .lea-detail__agenda-time {
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--lea-akzent, #b63032);
}

/*
 * DIE BESETZUNG ALS ZWEISPALTIGE LISTE, gepunktete Linie darunter.
 *
 * Der Entwurf zeigt nur Rolle und Name. Bild und Beschreibungstext bleiben
 * trotzdem stehen, wo die Redaktion sie gepflegt hat — was jemand eingegeben
 * hat, verschweigt eine Gestaltung nicht. Sind sie leer, sieht die Liste
 * genauso aus wie im Entwurf.
 */
.lea-detail--split .lea-detail__performer {
    border: 0;
    border-bottom: 1px dotted color-mix(in srgb, var(--lea-fg, #0a1b3e) 24%, transparent);
    border-radius: 0;
    background: none;
    overflow: visible;
}

.lea-detail--split .lea-detail__performer-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 0;
}

.lea-detail--split .lea-detail__performer-name {
    order: 2;
    font-family: var(--lea-display, inherit);
    font-size: 1.0625rem;
    font-weight: 400;
}

.lea-detail--split .lea-detail__performer-role {
    order: 1;
    margin: 0;
    font-size: 13px;
}

.lea-detail--split .lea-detail__performer-text {
    order: 3;
    flex-basis: 100%;
    margin: 0 0 4px;
    font-size: 13px;
}

/* Ein gepflegtes Portraet bleibt — klein und rund, damit die Zeile ruhig bleibt. */
.lea-detail--split .lea-detail__performer-media img {
    width: 44px;
    height: 44px;
    border-radius: 999px;
}

/* ------------------------------------------------------------ Zweispaltig */

/*
 * DER REDAKTIONELLE KOPF — Kultur und Hobbys im Entwurf.
 *
 * Text links, Bild rechts, unten eine Haarlinie zum Inhalt. Anders als die
 * dunklen Muster steht hier alles auf dem hellen Seitengrund; die Farbe kommt
 * aus dem Datensatz, nicht aus einem Verlauf.
 */
.lea-detail-hero--split {
    padding-block: 64px 72px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--lea-line, #e7ecf5);
}

.lea-detail-hero--split + .lea-detail__body,
.lea-detail-hero--split + .lea-detail__facts-band {
    margin-top: 0;
}

.lea-detail-hero--split + .lea-detail__body {
    padding-top: 72px;
}

/*
 * AUF HELLEM GRUND TRAEGT DIE AKZENTFARBE, nicht die Zweitfarbe.
 *
 * Die uebrigen Muster setzen ihre Eyebrow auf ein dunkles Band oder ein Foto —
 * dort ist die hellere Zweitfarbe richtig. Hier steht sie auf einem hellen
 * Papierton, und der Entwurf nimmt deshalb den satteren Akzent.
 */
.lea-detail-hero--split .lea-detail-hero__eyebrow {
    margin-bottom: 26px;
    font-weight: 600;
    color: var(--lea-akzent, #b63032);
}

/*
 * Der Titel im Entwurf: 74px, Gewicht 300, leicht negative Laufweite. Die
 * Schrift kommt aus dem Datensatz (`--lea-display`), nicht von hier.
 */
.lea-detail-hero--split .lea-detail-hero__title {
    margin-bottom: 26px;
    font-size: clamp(2.25rem, 1.1rem + 4.4vw, 4.625rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.014em;
}

/*
 * DAS HERVORGEHOBENE WORT IST HIER KURSIV, nicht farbig.
 *
 * Der Entwurf setzt es als <em> in derselben Farbe. `[Wort]` der Redaktion
 * wird projektweit zu `.headline-word-color`, und was die Klasse bedeutet,
 * entscheidet das Muster — beim Faktenkasten fett und weiss, hier kursiv.
 * Dieselben drei Zeilen zum Zuruecknehmen wie dort: gegen ein durchsichtiges
 * text-fill kommt `color` sonst nicht an.
 */
.lea-detail-hero--split .lea-detail-hero__title .headline-word-color {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-style: italic;
}

.lea-detail-hero--split .lea-detail-hero__teaser {
    max-width: 520px;
    margin-bottom: 34px;
    font-family: var(--lea-display, inherit);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--lea-fg2, #5b6570);
}

/* Termin, Ort, Dauer — je eine Zeile mit einem Zeichen davor. */
.lea-detail-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail-hero__meta li {
    display: flex;
    align-items: center;
    gap: 12px;
}

/*
 * Das Zeichen darf nicht schrumpfen und nicht mitwachsen: `flex-shrink: 0`,
 * damit eine lange Ortsangabe es nicht zusammendrueckt.
 */
.lea-detail-hero__meta-icon {
    flex-shrink: 0;
    color: var(--lea-akzent, #b63032);
}

/* ---------------------------------------------------------------- Vergroessern */

/*
 * DIE LIGHTBOX IST SCHON DA — GLightbox aus yavi_core, auf jeder Seite
 * initialisiert (`var lightbox = GLightbox();` in dessen main.js, Standard-
 * selektor `.glightbox`). Es braucht deshalb keine Bibliothek und keine Zeile
 * JavaScript in lea_events, nur den Link um das Bild.
 *
 * Fancybox waere eine ZWEITE Lightbox auf derselben Seite gewesen — mit
 * eigenem CSS, eigener Bedienung und, ab Version 4, einer kostenpflichtigen
 * Lizenz fuer kommerzielle Nutzung. GLightbox steht unter MIT.
 *
 * Der Link traegt keinen sichtbaren Text; die Beschreibung steckt im alt des
 * Bildes darin, und `.lea-detail a` faerbt nichts, wo keine Schrift ist.
 */
.lea-detail__zoom {
    display: block;
    cursor: zoom-in;
}

/* Das Titelbild unter dem Band — nur bei Mustern, die es nicht selbst zeigen. */
.lea-detail__lead-media {
    margin: 0 0 40px;
    border-radius: var(--lea-radius, 18px);
    overflow: hidden;
}

.lea-detail__lead-media img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- Faktenband */

/*
 * Ein getoentes Band ueber die volle Breite, direkt unter dem Kopf.
 *
 * DIE TRENNLINIEN SIND LUECKEN, keine Raender. Das Raster hat 1px Abstand und
 * traegt die Linienfarbe als Hintergrund; die Kacheln legen den getoenten Grund
 * darueber, und was zwischen ihnen durchscheint, ist der Strich. Mit
 * `border-right` an jeder Kachel haette die letzte eine zu viel — und mit
 * `:not(:last-child)` bricht es, sobald eine Kachel in die naechste Zeile
 * umbricht.
 */
/*
 * DIE POLSTERUNG SITZT AM BAND, DIE LINIENFARBE AM RASTER.
 *
 * Beides an einem Element haette die Linienfarbe auch in die Seitenpolsterung
 * gemalt — links und rechts vom Inhalt stuenden dann graue Bloecke in
 * Bandhoehe. Der Entwurf trennt es genauso: die Sektion traegt `padding: 0
 * 10vw` und den getoenten Grund, der Block darin `max-width: 1240px` und die
 * Linienfarbe.
 */
.lea-detail__facts-band {
    margin-bottom: 88px;
    padding-inline: var(--lea-detail-gutter, 20px);
    background: var(--lea-tint, transparent);
    border-bottom: 1px solid var(--lea-line, #e7ecf5);
}

.lea-detail__facts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    max-width: var(--lea-detail-breite, 1240px);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    background: var(--lea-line, #e7ecf5);
}

.lea-detail__fact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 26px;
    background: var(--lea-tint, #ffffff);
}

/*
 * Der getoente Grund ist halbdurchsichtig (color-mix gegen transparent), damit
 * er auf hellem wie auf dunklem Theme traegt. Auf dem Band darunter liegt
 * derselbe Ton — die Kacheln muessen ihn also decken, sonst summierte er sich
 * an den Kacheln zu einem dunkleren Feld. Deshalb der Grundton darunter.
 */
.lea-detail__fact {
    background:
        linear-gradient(var(--lea-tint, transparent), var(--lea-tint, transparent)),
        var(--lea-bg, #ffffff);
}

.lea-detail__fact-label {
    margin: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lea-akzent, #b63032);
}

.lea-detail__fact-value {
    margin: 0;
    font-family: var(--lea-display, inherit);
    font-size: 22px;
    font-weight: 600;
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail__fact-note {
    margin: 0;
    font-size: 12px;
    color: var(--lea-fg2, #5b6570);
}

/* ------------------------------------------------------------------ Raster */

.lea-detail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.lea-detail__main {
    min-width: 0;
}

/*
 * DER LEAD-KOPF UEBER DEN ABSAETZEN.
 *
 * Zeile und Ueberschrift nehmen die zwei Stufen, die die Seite schon fuehrt:
 * die Zeile den Beschriftungsstil der Bloecke (`__block > h2`), die
 * Ueberschrift die echte Ueberschrift von "Aehnliche Events". Zwei neue
 * Groessen waeren eine dritte Typo-Stufe fuer dieselbe Sache.
 */
.lea-detail__lead {
    margin-bottom: 22px;
}

.lea-detail__lead-eyebrow {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--lea-akzent, #b63032);
}

.lea-detail__lead-heading {
    margin: 0;
    font-family: var(--lea-display, inherit);
    font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--lea-fg, #0a1b3e);
}

/*
 * Das hervorgehobene Wort ist hier FETT, nicht farbig — so die Entwuerfe
 * ("Leichte Muse, **ernst genommen**"). Zurueckzunehmen sind Verlauf UND
 * Fuellfarbe: gegen ein durchsichtiges text-fill kommt `color` nicht an.
 */
.lea-detail__lead-heading .headline-word-color {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-weight: 700;
}

.lea-detail__text {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--lea-fg2, #5b6570);
}

/* ------------------------------------------------------------------ Bloecke */

/*
 * DIE BLOECKE STEHEN AUF ABSTAND, NICHT AUF LINIEN.
 *
 * Der Entwurf reiht die Hauptspalte als `flex-direction: column; gap: 64px`
 * ohne einen einzigen Trennstrich — die Bloecke tragen ihre Kanten selbst
 * (Rahmen um Agenda, FAQ und Anfahrt). Zusaetzliche Linien dazwischen
 * verdoppelten sie.
 */
.lea-detail__block {
    margin-top: 64px;
}

/*
 * DIE ABSCHNITTSBESCHRIFTUNG IST EIN EYEBROW, keine grosse Ueberschrift.
 *
 * Im Entwurf stehen AGENDA, SPEAKER, IMPRESSIONEN, GUT ZU WISSEN und ANFAHRT
 * als 11px in der Akzentfarbe mit 5px Laufweite — die grossen Ueberschriften
 * bleiben dem Titel und "Aehnliche Events" vorbehalten. Als <h2> bleibt es
 * trotzdem: der Entwurf benutzt dafuer <div>, aber eine Seite braucht ihre
 * Gliederung fuer Vorleseprogramme und Suchmaschinen. Wie eine Ueberschrift
 * AUSSIEHT, entscheidet die Gestaltung; WAS sie ist, das Markup.
 */
.lea-detail__block > h2 {
    margin: 0 0 26px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--lea-akzent, #b63032);
}

/*
 * "Aehnliche Events" ist im Entwurf eine echte Ueberschrift (38px, Gewicht
 * 300) und nimmt deshalb den Eyebrow-Stil wieder zurueck.
 */
.lea-detail__similar h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.375rem);
    font-weight: 300;
    letter-spacing: normal;
    text-transform: none;
    color: var(--lea-fg, #0a1b3e);
}

/* Programm */

/*
 * DIE AGENDA IST EIN UMRANDETER KASTEN MIT KOPFZEILE, keine lose Liste.
 *
 * Der Entwurf rahmt sie (1px, Radius 12) und setzt die Beschriftungszeile auf
 * den getoenten Ton; die Trennlinien liegen dadurch INNEN und laufen nicht
 * ueber die ganze Textbreite. `overflow: hidden` haelt die erste Zeile im
 * Radius — ohne das steht die getoente Flaeche ueber der abgerundeten Ecke.
 *
 * Die dritte Spalte des Entwurfs ("TRACK") fehlt: es gibt kein Feld dafuer.
 * Eine leere Spalte waere schlechter als zwei volle.
 */
.lea-detail__agenda-head,
.lea-detail__agenda {
    border: 1px solid var(--lea-line, #e7ecf5);
}

.lea-detail__agenda-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 14px 22px;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--lea-tint, transparent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__agenda {
    margin: 0;
    padding: 0;
    border-radius: 0 0 12px 12px;
    list-style: none;
    overflow: hidden;
}

.lea-detail__agenda-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px 20px;
    padding: 18px 22px;
    border-top: 1px solid var(--lea-line, #e7ecf5);
    align-items: baseline;
}

.lea-detail__agenda-item:first-child {
    border-top: 0;
}

.lea-detail__agenda-time {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--lea-akzent, #b63032);
}

.lea-detail__agenda-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.lea-detail__agenda-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lea-fg2, #5b6570);
}

/*
 * BEIM PLAKAT UND IN DER CLUBNACHT IST DAS PROGRAMM EIN KARTENSTAPEL.
 *
 * Derselbe Datensatz, zwei Erscheinungsformen: der Entwurf zeigt die Agenda
 * bei Business als umrandete Tabelle mit Kopfzeile, bei Musik als einzelne
 * Karten mit 14px Abstand — Zeit in der Zweitfarbe, der Act gross daneben.
 * Gesteuert vom MUSTER, nicht von der Kategorie: eine neue Kategorie, die das
 * Plakat waehlt, bekommt es mit, ohne dass jemand Code anfasst.
 *
 * Die dritte Spalte des Entwurfs ("Buehne") fehlt wie bei Business der Track:
 * es gibt kein Feld dafuer.
 */
.lea-detail--poster .lea-detail__agenda-head,
.lea-detail--club .lea-detail__agenda-head {
    display: none;
}

.lea-detail--poster .lea-detail__agenda,
.lea-detail--club .lea-detail__agenda {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.lea-detail--poster .lea-detail__agenda-item,
.lea-detail--club .lea-detail__agenda-item {
    gap: 4px 22px;
    padding: 20px 24px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 12px;
    background: var(--lea-card, #ffffff);
    align-items: center;
}

.lea-detail--poster .lea-detail__agenda-time,
.lea-detail--club .lea-detail__agenda-time {
    font-size: 15px;
    color: var(--lea-akzent2, #ff7a5c);
}

.lea-detail--poster .lea-detail__agenda-title,
.lea-detail--club .lea-detail__agenda-title {
    font-size: 1.3125rem;
    font-weight: 700;
}

.lea-detail--poster .lea-detail__agenda-text,
.lea-detail--club .lea-detail__agenda-text {
    margin-top: 5px;
}

/* Dating programme: numbered step cards; a given time stays as a small line above the title. */
.lea-detail--centered .lea-detail__agenda-head {
    display: none;
}

.lea-detail--centered .lea-detail__agenda {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    counter-reset: lea-step;
}

.lea-detail--centered .lea-detail__agenda-item {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 20px;
    align-items: start;
    padding: 22px 24px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 16px;
    background: var(--lea-card, #ffffff);
    counter-increment: lea-step;
}

.lea-detail--centered .lea-detail__agenda-item::before {
    content: counter(lea-step);
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: var(--lea-akzent, #c2456b);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

.lea-detail--centered .lea-detail__agenda-item > * {
    grid-column: 2;
}

.lea-detail--centered .lea-detail__agenda-time {
    grid-row: auto;
    margin-bottom: 4px;
    padding-top: 0;
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--lea-akzent, #c2456b);
}

.lea-detail--centered .lea-detail__agenda-title {
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
}

.lea-detail--centered .lea-detail__agenda-text {
    margin-top: 0;
    font-size: 14px;
    line-height: 1.65;
}

/* The free link of an event: an accent outline pill below the description. */
.lea-detail__link {
    margin: 28px 0 0;
}

.lea-detail a.lea-detail__link-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1.5px solid var(--lea-akzent, #b63032);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lea-akzent, #b63032);
}

.lea-detail a.lea-detail__link-button:hover,
.lea-detail a.lea-detail__link-button:focus-visible {
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
}

/* On a dark theme the lighter second colour carries the outline. */
.lea-detail.lea-detail--dark a.lea-detail__link-button {
    border-color: var(--lea-akzent2, #ff7a5c);
    color: var(--lea-akzent2, #ff7a5c);
}

.lea-detail.lea-detail--dark a.lea-detail__link-button:hover,
.lea-detail.lea-detail--dark a.lea-detail__link-button:focus-visible {
    background: var(--lea-akzent2, #ff7a5c);
    color: var(--lea-bg, #0a0f1f);
}

/* Workshop programme: plain rows with a narrow time column, as in the design's schedule. */
.lea-detail--workshop .lea-detail__agenda-head {
    display: none;
}

.lea-detail--workshop .lea-detail__agenda {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.lea-detail--workshop .lea-detail__agenda-item {
    gap: 4px 22px;
    padding: 18px 0;
    border-top: 0;
    border-bottom: 1px solid var(--lea-line, #e7ecf5);
}

.lea-detail--workshop .lea-detail__agenda-time {
    font-size: 14px;
    color: var(--lea-akzent, #1f6f5c);
}

.lea-detail--workshop .lea-detail__agenda-title {
    font-size: 16px;
    font-weight: 600;
}

.lea-detail--workshop .lea-detail__agenda-text {
    margin-top: 4px;
    font-size: 14px;
}

@media (min-width: 768px) {
    .lea-detail--workshop .lea-detail__agenda-item {
        grid-template-columns: 80px 1fr;
    }
}

/* ------------------------------------------------------ Programme by day */

/* The radios stay reachable by keyboard but are never seen; the labels are the tabs. */
.lea-detail__daytab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lea-detail__daytab-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.lea-detail__daytab {
    padding: 13px 22px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--lea-fg2, #5b6570);
    cursor: pointer;
}

/* Hiding waits for :has(); an older browser simply shows every day. Seven rules match AgendaDays' limit. */
@supports selector(:has(*)) {
    .lea-detail__daytabs > .lea-detail__daypanel {
        display: none;
    }

    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(1):checked) > .lea-detail__daypanel:nth-of-type(1),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(2):checked) > .lea-detail__daypanel:nth-of-type(2),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(3):checked) > .lea-detail__daypanel:nth-of-type(3),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(4):checked) > .lea-detail__daypanel:nth-of-type(4),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(5):checked) > .lea-detail__daypanel:nth-of-type(5),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(6):checked) > .lea-detail__daypanel:nth-of-type(6),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(7):checked) > .lea-detail__daypanel:nth-of-type(7) {
        display: flex;
        flex-direction: column;
    }

    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(1):checked) .lea-detail__daytab:nth-of-type(1),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(2):checked) .lea-detail__daytab:nth-of-type(2),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(3):checked) .lea-detail__daytab:nth-of-type(3),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(4):checked) .lea-detail__daytab:nth-of-type(4),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(5):checked) .lea-detail__daytab:nth-of-type(5),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(6):checked) .lea-detail__daytab:nth-of-type(6),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(7):checked) .lea-detail__daytab:nth-of-type(7) {
        border-color: var(--lea-akzent, #1e5b4f);
        background: var(--lea-akzent, #1e5b4f);
        color: #ffffff;
    }

    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(1):focus-visible) .lea-detail__daytab:nth-of-type(1),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(2):focus-visible) .lea-detail__daytab:nth-of-type(2),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(3):focus-visible) .lea-detail__daytab:nth-of-type(3),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(4):focus-visible) .lea-detail__daytab:nth-of-type(4),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(5):focus-visible) .lea-detail__daytab:nth-of-type(5),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(6):focus-visible) .lea-detail__daytab:nth-of-type(6),
    .lea-detail__daytabs:has(> .lea-detail__daytab-input:nth-of-type(7):focus-visible) .lea-detail__daytab:nth-of-type(7) {
        outline: 2px solid var(--lea-akzent, #1e5b4f);
        outline-offset: 2px;
    }
}

/* In the facts pattern the header row sits outside the tabs, so each panel gets the full radius. */
.lea-detail--facts .lea-detail__daypanel {
    border-radius: 12px;
}

/* Season programme: plain rows with the time in front, as in the design. */
.lea-detail--banded .lea-detail__agenda-head {
    display: none;
}

.lea-detail--banded .lea-detail__agenda {
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.lea-detail--banded .lea-detail__agenda-item {
    gap: 5px 24px;
    padding: 20px 0;
    border-top: 0;
    border-bottom: 1px solid var(--lea-line, #e7ecf5);
}

.lea-detail--banded .lea-detail__agenda-time {
    font-size: 15px;
    color: var(--lea-akzent, #1e5b4f);
}

.lea-detail--banded .lea-detail__agenda-title {
    font-family: var(--lea-display, inherit);
    font-size: 1.375rem;
    font-weight: 400;
}

.lea-detail--banded .lea-detail__agenda-text {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.6;
}

/* Mitwirkende */

.lea-detail__performer-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * EINE KARTE MIT BILD OBEN, nicht eine Zeile mit Avatar daneben.
 *
 * Der Entwurf stellt die Speaker als Kartenraster: das Bild liegt randlos im
 * Kopf der Karte (150px hoch, rechteckig), Name und Rolle darunter. Der runde
 * Avatar davor stammte aus keinem der acht Entwuerfe.
 *
 * Der GRUND fuer `overflow: hidden`: das Bild soll bis an die Kante laufen und
 * trotzdem im Radius bleiben. Es traegt deshalb selbst keinen Radius — sonst
 * blieben an den oberen Ecken helle Zwickel stehen.
 */
.lea-detail__performer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 12px;
    background: var(--lea-card, #ffffff);
    overflow: hidden;
}

.lea-detail__performer-media {
    margin: 0;
}

.lea-detail__performer-media img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.lea-detail__performer-body {
    padding: 18px 20px;
}

.lea-detail__performer-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.lea-detail__performer-role {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__performer-text {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lea-fg2, #5b6570);
}

/* Bilder */

.lea-detail__gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lea-detail__gallery-grid figure {
    margin: 0;
}

.lea-detail__gallery-grid img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.lea-detail__gallery-grid figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lea-fg2, #5b6570);
}

/* Fragen */

/*
 * JEDE FRAGE IST EINE EIGENE KARTE, nicht eine Zeile mit Trennstrich darunter.
 *
 * Der Entwurf setzt sie als umrandete Bloecke mit 12px Abstand dazwischen
 * (Rahmen, Radius 12, Kartengrund). Der Abstand kommt vom Rahmen selbst — ein
 * `gap` am Elternelement griffe nicht, weil die <details> direkt im
 * <section> stehen und kein Raster darum liegt.
 */
.lea-detail__faq-item {
    margin-bottom: 12px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 12px;
    background: var(--lea-card, #ffffff);
    overflow: hidden;
}

.lea-detail__faq-item:last-child {
    margin-bottom: 0;
}

.lea-detail__faq-question {
    padding: 22px 48px 22px 24px;
    position: relative;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

/* Das eigene Zeichen statt des Dreiecks — in beiden Browserfamilien. */
.lea-detail__faq-question::-webkit-details-marker {
    display: none;
}

.lea-detail__faq-question::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 24px;
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-right: 2px solid var(--lea-akzent, #b63032);
    border-bottom: 2px solid var(--lea-akzent, #b63032);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.lea-detail__faq-item[open] .lea-detail__faq-question {
    color: var(--lea-akzent, #b63032);
}

.lea-detail__faq-item[open] .lea-detail__faq-question::after {
    margin-top: -2px;
    transform: rotate(-135deg);
}

.lea-detail__faq-answer {
    padding: 0 24px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--lea-fg2, #5b6570);
}

/* Anfahrt */

/*
 * DIE ANFAHRT IST EIN GETOENTER KASTEN, kein Absatz unter einer Beschriftung.
 *
 * Im Entwurf ist sie der einzige Block der Textspalte mit eigener Flaeche
 * (`tint`, Rahmen, Radius 18, 34px Polsterung) — sie beendet die Spalte, und
 * das sieht man ihr an. Die zweite Spalte des Entwurfs ist ein
 * Kartenausschnitt; ein Feld dafuer gibt es nicht, also bleibt es einspaltig
 * statt mit einem leeren Bildplatz daneben.
 */
.lea-detail__directions {
    /* Dasselbe Polster wie `__card` nebenan — 34px liess den Kasten aus der Reihe fallen. */
    padding: 26px 26px 28px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: var(--lea-radius, 18px);
    background: var(--lea-tint, transparent);
}

.lea-detail__directions > h2 {
    margin-bottom: 14px;
}

.lea-detail__place-name {
    margin: 0 0 14px;
    font-family: var(--lea-display, inherit);
    font-size: 24px;
    font-weight: 600;
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail__address {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--lea-fg2, #5b6570);
}

/*
 * TEXT OBEN, KARTE DARUNTER — UEBER DIE GANZE BREITE DES KASTENS.
 *
 * Sie standen bis zum 2026-09-18 nebeneinander. Der Kasten sitzt aber in der
 * Hauptspalte neben der Ueberblickkarte, ist also nur rund 676 px breit: nach
 * Innenabstand und Spalte blieben der Karte 286 px, und die Textspalte daneben
 * brauchte die Haelfte ihrer 286 nicht. Untereinander bekommt die Karte die
 * volle Breite — rund das Doppelte an Flaeche, ohne dass der Text etwas verliert.
 *
 * Auf dem Handy aendert sich nichts, dort stand es ohnehin untereinander.
 */
.lea-detail__directions--map {
    display: grid;
    gap: 28px;
}

/* `a.` is needed: `.lea-detail a` (0,1,1) would otherwise repaint the outline button. */
.lea-detail a.lea-detail__route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 10px 20px;
    border: 1.5px solid var(--lea-akzent, #b63032);
    border-radius: 999px;
    color: var(--lea-akzent, #b63032);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.lea-detail a.lea-detail__route:hover,
.lea-detail a.lea-detail__route:focus {
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
}

.lea-detail__map {
    position: relative;
    height: 250px;
    overflow: hidden;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 12px;
    background: var(--lea-card, #ffffff);
}

/* Ueber die volle Breite darf sie auch hoeher sein; 250px war fuer die halbe Spalte gedacht. */
@media (min-width: 768px) {
    .lea-detail__map {
        height: 340px;
    }
}

/* Without JavaScript, or when the map file is unreachable, the box goes instead of standing empty. */
.lea-detail__map:empty {
    display: none;
}

/* Size, not position: MapLibre's own `.maplibregl-map { position: relative }` loads later and wins over `inset`. */
.lea-detail__map-canvas {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------------------------------- Aside */

.lea-detail__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.lea-detail__card {
    padding: 26px 26px 28px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: var(--lea-radius, 18px);
    background: var(--lea-card, #ffffff);
}

/*
 * DIE UEBERSICHTSKARTE IST DUNKEL, die Veranstalterkarte darunter nicht.
 *
 * Im Entwurf ist sie der einzige farbige Block der rechten Spalte und traegt
 * den Schlagschatten, der sie von der Seite abhebt. Auf einem bereits dunklen
 * Theme braucht sie dagegen eine Kante, sonst verschwimmt sie mit dem Grund —
 * genau wie im Entwurf (`t.dunkel ? rgba(255,255,255,0.12) : transparent`).
 */
.lea-detail__card--overview {
    padding: 30px;
    border-color: transparent;
    background: var(--lea-dunkel);
    color: #ffffff;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.22);
}

.lea-detail--dark .lea-detail__card--overview {
    border-color: rgba(255, 255, 255, 0.12);
}

.lea-detail__card--overview .lea-detail__card-title {
    margin-bottom: 20px;
    color: var(--lea-akzent2, #4c8de0);
}

/*
 * Innerhalb der dunklen Karte gelten eigene Toene: die abgeleiteten
 * `--lea-fg2` und `--lea-line` sind gegen den HELLEN Seitengrund gemischt und
 * waeren hier fast unsichtbar.
 */
/*
 * DIE ZEILEN STOSSEN ANEINANDER, ihre Linien bilden eine durchgehende Leiter.
 *
 * Das Raster darunter fuehrt `gap: 10px 18px`; die 10px senkrecht schoben
 * zwischen je zwei Linien einen leeren Streifen — im Entwurf liegt dort
 * nichts, die Polsterung der Zellen macht den ganzen Abstand.
 */
.lea-detail__card--overview .lea-detail__facts {
    margin-bottom: 0;
    column-gap: 16px;
    row-gap: 0;
    font-size: 13px;
}

.lea-detail__card--overview .lea-detail__facts dt,
.lea-detail__card--overview .lea-detail__facts dd {
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.lea-detail__card--overview .lea-detail__facts dt {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
}

.lea-detail__card--overview .lea-detail__facts dd {
    font-size: 14px;
    color: #ffffff;
}

/*
 * Der Hinweis ist im Entwurf ein abgesetzter Kasten, kein Kleingedrucktes:
 * "Lea Events verkauft keine Tickets" ist die Erklaerung dafuer, dass der
 * Knopf darunter wegfuehrt.
 */
.lea-detail__card--overview .lea-detail__note {
    margin: 22px 0;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

/*
 * `.lea-detail a.` und nicht nur die zwei Klassen: `.lea-detail a.lea-detail__cta`
 * weiter unten wiegt (0,2,1) und schluege eine blosse Klassenpaarung (0,2,0)
 * auch dann, wenn sie hier oben steht. Dieselbe Falle wie beim Knopftext.
 */
.lea-detail .lea-detail__card--overview a.lea-detail__cta {
    padding: 16px 20px;
}

/* Die Veranstalterkarte behaelt ihren Akzent auf der Beschriftung. */
.lea-detail__organizer .lea-detail__card-title {
    color: var(--lea-akzent, #b63032);
}

.lea-detail__card-title {
    margin: 0 0 18px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 18px;
    margin: 0 0 22px;
    font-size: 15px;
}

.lea-detail__facts dt {
    font-weight: 600;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__facts dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--lea-fg, #0a1b3e);
}

/*
 * `a.` IST HIER PFLICHT, kein Schmuck. `.lea-detail a` weiter oben wiegt eine
 * Klasse plus ein Element (0,1,1) und schlaegt eine blosse Klasse (0,1,0) —
 * unabhaengig von der Reihenfolge. Ohne dieses `a.` stand der Knopftext in der
 * Akzentfarbe auf der Akzentfarbe: rot auf rot, also gar nicht.
 */
.lea-detail a.lea-detail__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 22px;
    border-radius: 999px;
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
}

.lea-detail a.lea-detail__cta:hover,
.lea-detail a.lea-detail__cta:focus {
    color: #ffffff;
    filter: brightness(1.12);
}

.lea-detail__note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__organizer-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.lea-detail__organizer-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

/* Logos are rarely square, so they get a white tile of fixed height instead of the circle. */
.lea-detail__organizer-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 52px;
    max-width: 140px;
    padding: 6px 10px;
    border: 1px solid var(--lea-line, #e7ecf5);
    border-radius: 12px;
    background: #ffffff;
}

.lea-detail__organizer-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.lea-detail__organizer-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--lea-fg, #0a1b3e);
}

.lea-detail__organizer-meta {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__organizer-about {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--lea-fg2, #5b6570);
}

.lea-detail__organizer-link {
    display: block;
    margin: 0 0 20px;
    font-size: 14px;
    word-break: break-word;
}

/* `a.` is needed: `.lea-detail a` (0,1,1) would otherwise repaint the outline button. */
.lea-detail a.lea-detail__organizer-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--lea-akzent, #b63032);
    border-radius: 999px;
    color: var(--lea-akzent, #b63032);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}

.lea-detail a.lea-detail__organizer-all:hover,
.lea-detail a.lea-detail__organizer-all:focus {
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
}

/* -------------------------------------------------------- Aehnliche Events */

/*
 * Das zweite getoente Band der Seite. Zusammen mit dem Faktenband oben fasst
 * es den hellen Inhalt ein — im Entwurf `padding: 84px 10vw` auf `t.tint`.
 */
.lea-detail__similar {
    margin-top: 88px;
    padding-block: 84px;
    background: var(--lea-tint, transparent);
}

/*
 * Das Band traegt seine Polsterung selbst; die der Seite kaeme darunter als
 * Streifen im Grundton heraus. Ohne das Band bleibt sie stehen.
 */
.lea-detail:has(.lea-detail__similar) {
    padding-bottom: 0;
}

/*
 * DERSELBE KOPF WIE AUF DER STARTSEITE — Ueberschrift links, Link rechts, an
 * der Grundlinie ausgerichtet. Die Werte stehen hier noch einmal statt
 * `.lea-upcoming__head` mitzubenutzen: StylesheetScopeTest haelt fest, dass
 * jede Regel dieser Datei mit `.lea-detail` beginnt, und eine gemeinsame
 * Klasse in zwei Dateien war genau der Fehler vom 2026-09-05.
 */
.lea-detail__similar-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 28px;
    margin-bottom: 30px;
}

.lea-detail__similar-head h2 {
    margin: 0;
}

/*
 * `.lea-detail a.` und nicht die blosse Klasse: `.lea-detail a` wiegt (0,1,1)
 * und faerbte den Link sonst in der Themefarbe um. Dieselbe Falle wie beim
 * Ticket-Knopf.
 */
.lea-detail a.lea-detail__similar-all {
    flex-shrink: 0;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    /*
     * DIE KATEGORIEFARBE, NICHT DIE MARKENFARBE.
     *
     * Der Block traegt `lea-events`, weil die Karten darin die Werte aus
     * events.css brauchen — und `--lea-ev-accent` ist dort das Markenrot. Auf
     * einer Business-Seite sass damit ein roter Fleck mitten im Blau. Der Link
     * gehoert aber zur Detailseite, nicht zu den Karten; er nimmt deshalb
     * `--lea-akzent`, den Ton der Kategorie, und faellt nur ohne Kategorie auf
     * das Markenrot zurueck.
     */
    color: var(--lea-akzent, #b63032);
    border-bottom: 2px solid var(--lea-akzent, #b63032);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.lea-detail a.lea-detail__similar-all:hover,
.lea-detail a.lea-detail__similar-all:focus-visible {
    color: var(--lea-fg, #0a1b3e);
    border-color: var(--lea-fg, #0a1b3e);
}

/* Unter 600px stapeln sich Ueberschrift und Link wie auf der Startseite. */
@media (max-width: 599.98px) {
    .lea-detail a.lea-detail__similar-all {
        align-self: flex-start;
    }
}

.lea-detail__similar .lea-event-list {
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------ Ab Tablet auf */

/*
 * Unter 760px setzt der Entwurf seine Sektionspolsterung auf 20px zurueck
 * (`.lea-pad`). 10vw waeren auf einem Telefon zwar nur 39px, aber zusammen mit
 * dem Innenabstand der Karten wird die Textspalte sonst schmal.
 */
@media (max-width: 47.9375em) {
    .lea-detail {
        --lea-detail-gutter: 20px;
    }
}

/*
 * Unter 768px stehen Zeit und Programm untereinander — eine Kopfzeile, die
 * zwei Spalten beschriftet, die es dort nicht gibt, waere irrefuehrend. Dann
 * traegt die Liste den Radius allein.
 */
@media (max-width: 47.9375em) {
    .lea-detail__agenda-head {
        display: none;
    }

    .lea-detail__agenda {
        border-radius: 12px;
    }
}

@media (min-width: 768px) {
    .lea-detail__agenda-head,
    .lea-detail__agenda-item {
        grid-template-columns: 96px 1fr;
    }

    .lea-detail--poster .lea-detail__agenda-item,
    .lea-detail--club .lea-detail__agenda-item {
        grid-template-columns: 88px 1fr;
    }

    .lea-detail__agenda-time {
        grid-row: span 2;
        padding-top: 3px;
    }

    .lea-detail__performer-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .lea-detail--split .lea-detail__performer-list {
        gap: 14px 40px;
    }

    .lea-detail__gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .lea-detail__facts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /*
     * NUR SENKRECHT POLSTERN. Das Seitenmass steckt im inneren Block
     * (`padding-inline: var(--lea-detail-gutter)`); hier noch einmal 44px
     * dazuzugeben ergaebe einen doppelten Rand, den der Entwurf nicht hat —
     * dort traegt die Sektion `padding: 0 10vw` und der Block darin nur
     * `56px 0 72px`.
     */
    .lea-detail-hero--poster {
        min-height: 32rem;
        padding-block: 56px 72px;
    }

    .lea-detail-hero--club {
        min-height: 32rem;
    }

    .lea-detail-hero--split .lea-detail-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 64px;
        align-items: center;
    }

    /*
     * Der Entwurf: 1.4fr / 1fr, 56px Abstand. Das Raster sitzt am INNEREN
     * Block, nicht am Band — das Band ist voll breit, das Raster nicht.
     */
    .lea-detail-hero--facts .lea-detail-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
        gap: 56px;
        align-items: start;
    }
}

@media (min-width: 992px) {
    .lea-detail {
        padding-bottom: 72px;
    }

    .lea-detail__facts-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lea-detail__performer-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .lea-detail--split .lea-detail__performer-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .lea-detail__grid {
        grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
        gap: 76px;
        align-items: start;
    }

    /*
     * Klebrig erst ab dieser Breite: darunter steht die Karte ohnehin unter
     * dem Text, und ein klebendes Element in einer einspaltigen Ansicht
     * verdeckt beim Scrollen den Inhalt, statt ihn zu begleiten.
     */
    .lea-detail__aside {
        position: sticky;
        top: 24px;
    }
}

/* Picture credit: small and quiet, under the picture it names. */
.lea-detail__credit {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: color-mix(in srgb, var(--lea-fg) 60%, transparent);
}

.lea-detail__credit--lead {
    margin: 8px 0 0;
    text-align: right;
}

/*
 * EIN INNENABSTAND FUER ALLE KAESTEN AUF DEM HANDY.
 *
 * Am Desktop traegt jeder Kasten die Polsterung seines Entwurfs: Anfahrt 34px,
 * Uebersicht 30px, Fakten 26px, Programm 22px. Auf einem 390px breiten Geraet
 * frass das bis zu einem Fuenftel der Zeile, und untereinander gelesen hatte
 * jeder Kasten einen anderen Einzug. Hier gilt der Gutter der Seite, 20px.
 * Die Musterregeln (.lea-detail--poster …) wiegen gleich viel; diese stehen
 * deshalb am Ende der Datei, das Programm schliesst die Muster ohne Kasten aus.
 */
@media (max-width: 767.98px) {
    .lea-detail .lea-detail__directions,
    .lea-detail .lea-detail__card,
    .lea-detail .lea-detail__card--overview,
    .lea-detail .lea-detail__fact {
        padding: 20px;
    }

    /* Die letzte Zeile der Liste bringt 11px eigenen Abstand mit. */
    .lea-detail .lea-detail-hero__facts {
        padding: 20px 20px 8px;
    }

    .lea-detail:not(.lea-detail--split):not(.lea-detail--workshop):not(.lea-detail--banded) .lea-detail__agenda-item {
        padding: 16px 20px;
    }

    /* Rechts bleibt Platz fuer das Pfeilzeichen der Frage. */
    .lea-detail .lea-detail__faq-question {
        padding: 18px 44px 18px 20px;
    }

    .lea-detail .lea-detail__faq-answer {
        padding: 0 20px 18px;
    }
}

/*
 * DIE FAKTEN FLUCHTEN MIT DEM FLIESSTEXT.
 *
 * Das Band laeuft ueber die ganze Breite, sein Raster ist auf die Inhaltsbreite
 * zentriert — aber jede Zelle rueckte noch einmal 26px ein. Gemessen am
 * 2026-09-18: "EINLASS" stand bei x=171, der Absatz darunter bei x=145. Zwei
 * Anfaenge, 26px auseinander, und das sieht man.
 *
 * Genommen wird das Polster nur an den AUSSENKANTEN einer Zeile; zwischen den
 * Zellen bleibt es, sonst klebte der Text an der Trennlinie. Weil die Zahl der
 * Fakten nicht gedeckelt ist, kann das Band umbrechen — deshalb `nth-child` je
 * Spaltenzahl und nicht `:first-child`, das nur die allererste Zelle traefe.
 */
.lea-detail__fact {
    padding-inline: 0;
}

@media (min-width: 768px) {
    .lea-detail__fact {
        padding-inline: 26px;
    }

    .lea-detail__fact:nth-child(odd) {
        padding-left: 0;
    }

    .lea-detail__fact:nth-child(even) {
        padding-right: 0;
    }
}

@media (min-width: 992px) {
    .lea-detail__fact:nth-child(odd),
    .lea-detail__fact:nth-child(even) {
        padding-inline: 26px;
    }

    .lea-detail__fact:nth-child(4n + 1) {
        padding-left: 0;
    }

    .lea-detail__fact:nth-child(4n) {
        padding-right: 0;
    }
}

/*
 * AUF DEM HANDY FLUCHTET DER STREIFEN MIT DEM UEBRIGEN TEXT.
 *
 * Das Band haelt den Gutter der Seite (20px), und die Regel weiter oben gibt
 * jeder Zelle noch einmal 20px — gemessen am 2026-09-18 stand "EINLASS" damit
 * bei x=41, Bühnentext und Absaetze bei x=21. Zwanzig Pixel Versatz auf einem
 * schmalen Schirm sieht man sofort.
 *
 * ZWEI KLASSEN, weil jene Regel ebenfalls zwei traegt — mit einer verliert man
 * unabhaengig von der Reihenfolge, und die Zeile stuende wirkungslos da.
 * Senkrecht bleibt ihr Polster: dort stimmt es.
 */
@media (max-width: 767.98px) {
    .lea-detail .lea-detail__fact {
        padding-inline: 0;
    }
}

/*
 * DER RUECKWEG, oben im Textkoerper und auf derselben Fluchtlinie.
 *
 * `a.` im Selektor ist Pflicht: `.lea-detail a` (0,1,1) wiegt schwerer als
 * `.lea-detail__back` (0,1,0) und faerbte ihn sonst in die Linkfarbe des
 * Themes — dieselbe Falle wie beim Knopf "Route planen" weiter oben.
 */
.lea-detail a.lea-detail__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--lea-fg2, #5b6570);
    transition: color 0.15s ease, gap 0.15s ease;
}

.lea-detail a.lea-detail__back:hover,
.lea-detail a.lea-detail__back:focus-visible {
    gap: 12px;
    color: var(--lea-akzent, #b63032);
}

/*
 * AM FUSS DER SEITE IST ER EIN UMRISS-KNOPF, wie "Route planen".
 *
 * Oben genuegt eine leise Zeile — dort liest man gerade erst an. Unten ist der
 * Rueckweg die naechste Handlung, und die soll man sehen. `background: none`
 * steht ausgeschrieben da: der Knopf traegt keine Fuellung, auch nicht die des
 * Kastens, in dem er zufaellig steht.
 */
.lea-detail a.lea-detail__back--bottom {
    margin-top: 8px;
    margin-bottom: 0;
    padding: 10px 20px;
    border: 1.5px solid var(--lea-akzent, #b63032);
    border-radius: 999px;
    background: none;
    color: var(--lea-akzent, #b63032);

    /*
     * DIE FUELLFARBE MUSS MIT, sonst ist `color` wirkungslos.
     *
     * Auf einem dunklen Theme erbt der Fuss ein `-webkit-text-fill-color`; wo
     * das gesetzt ist, malt es den Text, und `color` hat nichts zu sagen —
     * auch `!important` nicht (gemessen am 2026-09-18: die Schrift im
     * gefuellten Knopf blieb in der Fuellfarbe und war unsichtbar).
     * `currentColor` gibt die Hoheit an `color` zurueck.
     */
    -webkit-text-fill-color: currentColor;
}

/*
 * WEISS AUSGESCHRIEBEN, NICHT `--lea-card`.
 *
 * Auf hellem Theme ist `--lea-card` weiss, auf dunklem aber Weiss zu 5 % gegen
 * transparent — die Schrift war dort auf der gefuellten Flaeche praktisch
 * unsichtbar. `--lea-akzent` traegt auf beiden Themes eine dunkle Fuellung,
 * also gehoert dort schlicht Weiss hin, wie beim Knopf "Route planen".
 */
.lea-detail a.lea-detail__back--bottom:hover,
.lea-detail a.lea-detail__back--bottom:focus-visible {
    gap: 8px;
    border-color: var(--lea-akzent, #b63032);
    background: var(--lea-akzent, #b63032);
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
}

/*
 * DER FUSS TRAEGT SEINEN RAUM SELBST.
 *
 * `.lea-detail:has(.lea-detail__similar)` nimmt der Seite ihr unteres Polster,
 * weil das Band "Aehnliche Events" eigenes mitbringt. Der Rueckweg steht
 * darunter und hatte deshalb keins: er sass halb im getoenten Band und halb
 * auf dem Grundton, gedraengt gegen den Footer.
 *
 * Also hier, am Fuss selbst — dann stimmt es mit Band und ohne.
 */
.lea-detail__back-foot {
    padding-block: 44px 64px;
    background: none;
}