/*
 * Die Buehne der Startseite.
 *
 * PLAIN CSS, KEIN SCSS UND KEIN BUILD — dieselbe Begruendung wie in
 * events.css: das Projekt hat bewusst keinen Node-Schritt.
 *
 * HIER STEHT DAS GERUEST, NICHT DAS DESIGN. Zweispaltigkeit, die Suchleiste
 * als eine Zeile, die Karte samt Abzeichen. Farben und Rundungen haengen an
 * Custom Properties mit hartem Rueckfallwert; wer das Aussehen aendern will,
 * setzt sie in yavi_lucerne (_variables.scss / _custom.scss) neu und fasst
 * diese Datei nicht an.
 *
 * NICHT in yavi_lucerne ablegen — das wird beim naechsten yavi-Update
 * ueberschrieben.
 */

.lea-hero {
    --lea-hero-ink: var(--bs-primary, #0d1b3e);
    --lea-hero-accent: var(--bs-secondary, #e0512f);
    --lea-hero-on-dark: #ffffff;
    --lea-hero-muted: rgba(255, 255, 255, .72);
    --lea-hero-radius: 14px;

    /* Die Werte der Image-Box aus dem Entwurf, Stueck fuer Stueck. */
    --lea-hero-card-radius: 20px;
    --lea-hero-card-height: 445px;

    /*
     * DIE KARTE WAECHST MIT DER SPALTE, im Verhaeltnis des Entwurfs (670x445).
     * Fest gesetzt war nur die Hoehe, die Breite bei 670px gedeckelt — auf
     * einem breiten Schirm ist die halbe Spalte ueber 1000px, und die Karte
     * stand als kleines Rechteck in viel Luft. Das VERHAELTNIS muss dabei
     * bleiben: die Facetten sind ein SVG mit `preserveAspectRatio: none` und
     * verzerrten sonst auf jedem Bildschirm anders.
     */
    --lea-hero-card-ratio: 670 / 445;

    /*
     * DIE DECKE, UND SIE HAENGT AN DER FENSTERHOEHE — nicht aus Geschmack.
     *
     * Der Hero-Frame bekommt seine Hoehe im Backend (hier 75vh), und das
     * naechste Element klettert per negativem Rand noch in ihn hinein. Eine
     * Karte, die nur der Spaltenbreite folgt, waechst auf einem breiten, aber
     * flachen Schirm (2560x1080) aus diesem Kasten heraus und legt sich ueber
     * die Wochenleiste. Ab hier wird sie deshalb nur noch breiter, nicht
     * hoeher — dann trifft das Verhaeltnis nicht mehr genau, aber die Facetten
     * vertragen das eher als die Seite eine Ueberdeckung.
     */
    --lea-hero-card-max-height: min(720px, 52vh);
    --lea-hero-card-fade: .5s;
    --lea-hero-card-plate: #101f4a;

    /*
     * DER SEITLICHE EINZUG DER KARTE — und der Platte darunter, sie MUESSEN
     * denselben Wert haben. Absolut gesetzte Kaesten beziehen sich auf die
     * Padding-Box ihrer Spalte; mit `inset: 0` lagen sie 20px weiter aussen
     * als der Text daneben. Steht der Wert an zwei Stellen, schaut eines von
     * beiden eines Tages unter dem anderen hervor.
     */
    --lea-hero-card-inset: calc(var(--bs-gutter-x, 40px) * .5);
    --lea-hero-card-shadow: 0 24px 60px rgba(0, 0, 0, .4);
    --lea-hero-badge-star: #b63032;
    --lea-hero-price-from: #e22225;
    --lea-hero-price-to: #ff7a5c;

    /* Und die der Suchbox, ebenso aus dem Entwurf. */

    position: relative;
    color: var(--lea-hero-on-dark);
}

.lea-hero__row {
    align-items: center;
    row-gap: 40px;
}

/* --------------------------------------------------------------- Textseite */

/*
 * Die Kopffelder kommen aus Header/All und tragen dessen Klassen. Angefasst
 * wird hier nur, was die Buehne anders braucht als ein gewoehnliches Element:
 * der Header sitzt in einer halben Spalte und darf nicht zentriert stehen.
 */
.lea-hero__intro .frame-header {
    margin-bottom: 22px;
}

/*
 * Der Eyebrow. Das eingefaerbte Wort kommt aus YaviCore:FormatText und traegt
 * dieselbe Klasse wie in der Ueberschrift — die Farbe steht also an einer
 * Stelle, nicht an zweien.
 */
.lea-hero__eyebrow {
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--lea-hero-on-dark);
}

/*
 * DER WORD-SWIPER: zwei wechselnde Woerter um ein festes.
 *
 * `align-items: baseline` statt center — die Slots sind ueberlaufverdeckte
 * Kaesten, ihre Unterkante ist nicht die Schriftlinie. Auf der Mitte
 * ausgerichtet saessen die Wechselwoerter einen Hauch tiefer als das feste.
 *
 * `white-space: nowrap`: die Zeile darf nicht zwischen Wort und Trennpunkt
 * umbrechen, waehrend das naechste Wort einschiebt.
 */
.lea-hero__eyebrow-swiper {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

/*
 * Der Slot ist das Fenster, nicht das Wort. Er verdeckt, was oben hinaus- und
 * unten hereinschiebt, und federt seine Breite von einem Wort zum naechsten —
 * ohne das spraenge die halbe Zeile bei jedem Wechsel.
 *
 * Die Breite setzt das Skript in Pixeln; bis dahin (und ohne JavaScript) steht
 * hier `auto`, und das erste Wort bestimmt sie selbst.
 */
.lea-hero__eyebrow-slot {
    position: relative;
    display: inline-block;
    height: 1em;
    line-height: 1em;
    overflow: hidden;
    vertical-align: baseline;
    transition: width .9s cubic-bezier(.22, 1, .36, 1);
}

.lea-hero__eyebrow-word {
    display: inline-block;
    line-height: 1em;
    white-space: nowrap;
}

/*
 * Der Trennpunkt bringt seinen Abstand selbst mit, statt ihn aus Leerzeichen
 * im Template zu beziehen — die sind in Fluid nicht verlaesslich und im
 * Entwurf ohnehin kein Wert, den jemand einstellen koennte.
 *
 * Links weniger als rechts: die Laufweite von 5px haengt bereits hinter dem
 * letzten Buchstaben des Wortes, hinter dem Punkt ist sie abgeschaltet.
 */
.lea-hero__eyebrow-sep {
    padding: 0 14px 0 9px;
    letter-spacing: 0;
}

/*
 * Das abtretende Wort verlaesst den Fluss, sonst stuenden beide nebeneinander
 * und der Slot waere fuer einen Moment doppelt so breit.
 */
.lea-hero__eyebrow-word.is-leaving {
    position: absolute;
    top: 0;
    left: 0;
}

.lea-hero__eyebrow-word.is-entering {
    animation: lea-hero-eyebrow-in .9s cubic-bezier(.22, 1, .36, 1) both;
}

.lea-hero__eyebrow-word.is-leaving {
    animation: lea-hero-eyebrow-out .9s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes lea-hero-eyebrow-in {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes lea-hero-eyebrow-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}

/*
 * DAS FESTE WORT WIRD EINGEFAERBT, WENN DIE REDAKTION ES KLAMMERT.
 *
 * `[EVENTS]` im Eyebrow-Feld wird von YaviCore:FormatText zu
 * `.headline-word-color`. yavi faerbt diese Klasse aber nur INNERHALB von
 * h1..h6 — im Eyebrow bliebe das Wort weiss. Die Farbe steht deshalb hier,
 * und sie ist dieselbe Variable, aus der yavi seinen Verlauf mischt: eine
 * eigene waere die zweite Wortfarbe des Projekts.
 */
.lea-hero__eyebrow-fixed .headline-word-color {
    color: var(--headline-word-color-3, var(--lea-hero-accent));
}

.lea-hero__intro .lea-intro {
    max-width: 32em;
    margin-bottom: 26px;
    color: var(--lea-hero-muted);
}

/*
 * Die Laenderzeile: ein kurzer Strich, dann der Text. Der Strich ist ein
 * eigenes Element und kein ::before, damit er im Markup als aria-hidden
 * markiert werden kann — ein Screenreader soll ihn nicht vorlesen.
 */
.lea-hero__regions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--lea-hero-muted);
}

.lea-hero__rule {
    flex: 0 0 34px;
    height: 2px;
    background: var(--lea-hero-accent);
}

/* -------------------------------------------------------------- Suchleiste */

/*
 * DIE LEISTE AUF DER BUEHNE — nur das, worin sie von der Vorgabe abweicht.
 *
 * Das Aussehen steht in search.css; dieselbe Leiste steht auch im Such-Overlay
 * der Navigation und ueber der Trefferliste. Hier liegt sie auf einem Bild:
 * sie braucht den schweren Schatten, und sie darf die Spalte nicht ausfuellen.
 */
.lea-hero .lea-search {
    --lea-search-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    max-width: 720px;
}

/*
 * DIE FESTE HOEHE DER BUEHNE GILT NUR AUF BREITEN SCHIRMEN.
 *
 * Der Rahmen traegt `height: 75vh` als Inline-Stil aus dem Backend-Feld. Auf
 * dem Handy stehen Text, Suchkarte und Highlight-Karte untereinander und sind
 * zusammen hoeher als das Fenster — der Rahmen schnitt nicht ab, sondern die
 * folgende Sektion begann mitten in der Karte. `!important` ist hier Pflicht
 * und keine Zierde: gegen einen Inline-Stil kommt keine normale Regel an.
 */
@media (max-width: 991.98px) {
    .frame-type-leaevents_hero {
        height: auto !important;
        min-height: 0 !important;
    }
}


/* ------------------------------------------------------------------ Karten */

/*
 * DIE KARTEN LIEGEN UEBEREINANDER, sichtbar ist die aktive. Gestapelt statt
 * nebeneinander, weil die Buehne EINE Karte zeigt und der Wechsel spaeter nur
 * die Klasse `is-active` verschiebt — ohne Sprung im Seitenfluss.
 *
 * DIE BUEHNE GIBT DIE GROESSE VOR, NICHT DIE ERSTE KARTE. Vorher stand die
 * erste Karte im Fluss und bestimmte die Hoehe, alle weiteren lagen absolut
 * darueber; kaeme die erste einmal nicht, waere der Kasten null hoch und die
 * uebrigen Karten unsichtbar. Jetzt traegt der Kasten die Hoehe aus dem
 * Entwurf (420px), und ALLE Karten fuellen ihn mit inset:0 — beim Wechsel
 * rueckt nichts, und ein hochkantes Bild macht die Karte nicht hoeher als ein
 * querformatiges.
 */
.lea-hero__stage {
    position: relative;
    height: var(--lea-hero-card-height);

    /* Der Massstab der Karteninhalte haengt an der KARTE, nicht am Fenster:
       neben dem Text ist sie halb so breit wie die Seite, allein waere sie es
       nicht, und dieselbe Karte soll in beiden Faellen gleich aussehen. */
    container-type: inline-size;
}

/*
 * DIE KARTE FUELLT IHRE SPALTE AUS und nimmt die Hoehe aus dem Verhaeltnis.
 *
 * `min-height` haelt den Entwurfswert als Boden: knapp ueber `lg` ist die
 * halbe Spalte schmaler als 670px, und aus dem Verhaeltnis allein wuerde die
 * Karte dort flacher als heute. `max-height` ist die Decke fuer sehr breite
 * Schirme — darueber wird sie breiter, aber nicht hoeher.
 *
 * Erst ab `lg`, denn darunter stehen Text und Karte untereinander; dort gilt
 * weiter die feste Hoehe, sonst waere die Karte auf dem Handy ein Streifen.
 */
@media (min-width: 992px) {
    .lea-hero__stage {
        height: auto;
        aspect-ratio: var(--lea-hero-card-ratio);
        min-height: var(--lea-hero-card-height);
        max-height: var(--lea-hero-card-max-height);
    }
}

/*
 * EINE PLATTE UNTER DEN KARTEN, in Form und Schatten der Karte.
 *
 * Beim Wechsel blendet die alte Karte aus, bevor die neue einblendet — ohne
 * die Platte loeste sich fuer einen Augenblick die ganze Karte auf, samt
 * Rundung und Schatten, und die Buehne bekaeme ein Loch. Jetzt bleibt die
 * Form stehen und nur ihr Inhalt wechselt.
 */
.lea-hero__stage::before {
    content: "";
    position: absolute;
    inset: 0 var(--lea-hero-card-inset);
    border-radius: var(--lea-hero-card-radius);
    background: var(--lea-hero-card-plate);

    /* Der Schatten haengt hier und nicht an der Karte: zwei deckungsgleiche
       Schatten uebereinander waeren dunkler als der eine aus dem Entwurf. */
    box-shadow: var(--lea-hero-card-shadow);
}

/*
 * DIE KARTE IST EIN BILDKASTEN: Foto ueber die ganze Flaeche, darueber eine
 * Verlaufsabdunklung, darauf Abzeichen, Text und Preis.
 *
 * Der Untergrund bleibt gefuellt, weil eine FAL-Referenz das Loeschen der
 * Datei ueberlebt — ohne Foto stuende der Text sonst auf Weiss.
 */
.lea-hero__card {
    position: absolute;
    inset: 0 var(--lea-hero-card-inset);
    overflow: hidden;
    border-radius: var(--lea-hero-card-radius);
    background: var(--lea-hero-facet-base);
    opacity: 0;
    visibility: hidden;

    /*
     * UEBERBLENDEN, NICHT UMSCHALTEN — und der Kniff steckt in `visibility`.
     * Sie kennt keine Zwischenwerte und sprang deshalb sofort auf `hidden`,
     * waehrend die Deckkraft noch lief: die abtretende Karte war weg, die
     * neue noch durchsichtig, und dazwischen stand die Buehne leer. Die
     * Nullsekunden-Angabe verschiebt den Sprung ans ENDE des Ausblendens.
     *
     * Warum `visibility` ueberhaupt: eine Karte mit `opacity: 0` bliebe sonst
     * anklickbar und fuer den Screenreader vorhanden — drei Termine
     * uebereinander, von denen zwei niemand sieht.
     */
    transition: opacity var(--lea-hero-card-fade) ease,
                visibility 0s linear var(--lea-hero-card-fade);
}

.lea-hero__card.is-active {
    opacity: 1;
    visibility: visible;

    /* Beim Einblenden ist sie sofort da, sonst begaenne die Blende unsichtbar. */
    transition: opacity var(--lea-hero-card-fade) ease, visibility 0s;
}

/*
 * DIE TEXTE BLENDEN NICHT MIT, SIE WECHSELN SICH AB.
 *
 * Zwei Karten gleichzeitig halbdurchsichtig heisst: zwei Fotos uebereinander,
 * und das liest sich als Blende. Zwei TEXTE uebereinander liest sich als
 * Fehler — Datum ueber Datum, Titel ueber Titel. Der abtretende Text geht
 * deshalb schnell weg, der neue kommt erst, wenn der alte fort ist.
 */
.lea-hero__card-badge,
.lea-hero__card-bottom {
    transition: opacity .18s ease;
}

.lea-hero__card:not(.is-active) .lea-hero__card-badge,
.lea-hero__card:not(.is-active) .lea-hero__card-bottom {
    opacity: 0;
}

.lea-hero__card.is-active .lea-hero__card-badge,
.lea-hero__card.is-active .lea-hero__card-bottom {
    opacity: 1;

    /* Er kommt, sobald der alte fort ist (.18s) — nicht erst, wenn das Bild
       fertig ist, sonst stuende die neue Karte einen Moment ohne Beschriftung. */
    transition: opacity .3s ease .25s;
}

/*
 * DER MASSSTAB DER KARTENINHALTE — EINE ZAHL, an der alles haengt.
 *
 * 16px ist der Entwurf bei 670px Kartenbreite (2.4cqi ergeben dort genau
 * das). Kleiner wird es nicht, sonst schrumpfte die Karte auf dem Handy in
 * sich zusammen; bei 22px ist Schluss, sonst wuechse die Fusszeile auf einem
 * sehr breiten Schirm ueber das Bild. Jeder Wert darunter zieht seine Groesse
 * hieraus per calc statt aus eigenen px — sonst stuende auf der doppelt so
 * grossen Karte dieselbe 24px-Ueberschrift wie auf dem Handy.
 */
.lea-hero__card {
    --lea-hero-u: clamp(16px, 2.4cqi, 22px);
}

/*
 * DER FLAECHENLINK DER KARTE.
 *
 * Er liegt ueber allem und traegt keinen sichtbaren Text — deshalb ist er von
 * der Linkfarbe des Themes unabhaengig. Die Karte ist positioniert, `inset: 0`
 * genuegt also.
 *
 * z-index ueber dem Facetten-SVG und dem Verlauf, aber die Karte hat
 * `overflow: hidden`: er reicht nie ueber ihren Rand hinaus.
 */
.lea-hero__card-link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.lea-hero__card-link:focus-visible {
    outline: 2px solid var(--lea-hero-on-dark);
    outline-offset: -4px;
}

/*
 * JEDE KARTE EINE EIGENE PALETTE, reihum. Die Buehne zeigt nacheinander
 * dieselbe Form in anderen Farben — waeren alle gleich, saehe der Wechsel wie
 * ein Bildfehler aus statt wie ein Wechsel.
 *
 * Die Zuordnung haengt an nth-child und nicht an einer Klasse aus dem Backend:
 * welche Karte an welcher Stelle steht, entscheidet der Termin, und eine im
 * Datensatz gepflegte Farbe waere beim naechsten Event verschoben.
 *
 * PALETTE 1 KOMMT AUS DER ENTWURFSDATEI (Resources/Private/Design/
 * hero-facets.svg), Wert fuer Wert; dort stehen auch die beiden anderen.
 * `base` ist der Kartengrund und keine Facette: er wird sichtbar, wenn das
 * Foto fehlt — eine FAL-Referenz ueberlebt das Loeschen der Datei.
 */
.lea-hero__card {
    --lea-hero-facet-base: #17257e;
    --lea-hero-facet-a: #10288b;
    --lea-hero-facet-a2: #0d237f;
    --lea-hero-facet-b: #f2490d;
    --lea-hero-facet-c: #bd37a7;
}

.lea-hero__card:nth-child(3n + 2) {
    --lea-hero-facet-base: #6c1a5e;
    --lea-hero-facet-a: #7a2270;
    --lea-hero-facet-a2: #5e1552;
    --lea-hero-facet-b: #ff7a29;
    --lea-hero-facet-c: #2231b8;
}

.lea-hero__card:nth-child(3n + 3) {
    --lea-hero-facet-base: #0d3560;
    --lea-hero-facet-a: #114272;
    --lea-hero-facet-a2: #0a2b50;
    --lea-hero-facet-b: #e0479b;
    --lea-hero-facet-c: #e8730f;
}

/*
 * DAS FOTO SITZT RECHTS OBEN BUENDIG UND FUELLT DIE KARTE NICHT.
 *
 * 82% x 90% ist der Bereich, den die Entwurfsdatei fuer das Bild freilaesst
 * (x 288..1600, y 0..900 im Koordinatensystem 1600x1000). Unten und links
 * schneiden die Facetten es zu — deshalb steht hier ein Rechteck und keine
 * Form.
 *
 * `object-fit: cover` ist Pflicht: der Ausschnitt hat ein anderes
 * Seitenverhaeltnis als die 900x560 aus dem ViewHelper, und ohne cover
 * verzerrte das Bild statt zu beschneiden.
 */
.lea-hero__card-media {
    position: absolute;
    top: 0;
    right: 0;
    width: 82%;
    height: 90%;
    margin: 0;
    z-index: 1;
}

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

/*
 * DIE ABDUNKLUNG BRINGT DIE LESBARKEIT MIT. Sie liegt als eigene Flaeche ueber
 * dem Foto und nicht als Hintergrund am Textkasten: der Verlauf beginnt weit
 * oberhalb des Textes, ein Kastenhintergrund haette dort eine Kante.
 *
 * `pointer-events: none`, damit ein spaeterer Link auf der Karte klickbar
 * bleibt.
 */
.lea-hero__card-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(10, 27, 62, 0) 35%,
        rgba(10, 27, 62, .55) 65%,
        rgba(6, 17, 43, .92) 100%);
}

/*
 * DAS MUSTER LIEGT UEBER DEM FOTO UND UEBER DER ABDUNKLUNG.
 *
 * Ueber dem Foto, weil die Farbflaechen es beschneiden: die Entwurfsdatei
 * laesst genau den Bereich frei, in dem das Bild stehen soll — das Muster
 * macht die Bildform, nicht das Bild selbst.
 *
 * Ueber der Abdunklung, weil die Farben sonst vergraut waeren. Die Abdunklung
 * ist fuer das Foto da; die Lesbarkeit ueber dem Farbband bringt die Fusszeile
 * selbst mit.
 */
.lea-hero__facets {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.lea-hero__facet--a {
    fill: var(--lea-hero-facet-a);
}

.lea-hero__facet--a2 {
    fill: var(--lea-hero-facet-a2);
}

.lea-hero__facet--b {
    fill: var(--lea-hero-facet-b);
}

.lea-hero__facet--c {
    fill: var(--lea-hero-facet-c);
}

/* Abzeichen, Text und Preis ueber Foto UND Abdunklung heben. */
.lea-hero__card-badge,
.lea-hero__card-bottom {
    position: absolute;
    z-index: 4;
}

.lea-hero__card-badge {
    top: calc(var(--lea-hero-u) * 1.125);
    left: calc(var(--lea-hero-u) * 1.125);
    padding: calc(var(--lea-hero-u) * .5) var(--lea-hero-u);
    font-size: calc(var(--lea-hero-u) * .625);
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--lea-hero-ink);
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
}

.lea-hero__card-badge-star {
    color: var(--lea-hero-badge-star);
}

/*
 * Die Fusszeile: Text links, Preis rechts, beide auf derselben Grundlinie.
 * `align-items: flex-end` statt center, weil der Titel zweizeilig werden darf
 * und der Preis dann nicht in die Mitte des Kastens rutschen soll.
 */
.lea-hero__card-bottom {
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--lea-hero-u);
    padding: calc(var(--lea-hero-u) * 1.5) calc(var(--lea-hero-u) * 1.625);
    background: linear-gradient(180deg, rgba(6, 17, 43, 0) 0%, rgba(6, 17, 43, .55) 55%, rgba(6, 17, 43, .85) 100%);
}

.lea-hero__card-meta {
    margin: 0 0 calc(var(--lea-hero-u) * .5);
    font-size: calc(var(--lea-hero-u) * .8125);
    font-weight: 600;
    letter-spacing: .077em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.lea-hero__card-title {
    margin: 0;
    font-size: calc(var(--lea-hero-u) * 1.5);
    font-weight: 700;
    line-height: 1.2;
    color: var(--lea-hero-on-dark);
}

/* `flex-shrink: 0`: der Preis behaelt seine Breite, der Titel bricht um. */
.lea-hero__card-price {
    flex: 0 0 auto;
    margin: 0;
    padding: calc(var(--lea-hero-u) * .75) calc(var(--lea-hero-u) * 1.25);
    text-align: center;
    color: var(--lea-hero-on-dark);
    background: linear-gradient(135deg, var(--lea-hero-price-from), var(--lea-hero-price-to));
    border-radius: calc(var(--lea-hero-u) * .875);
}

.lea-hero__card-price:empty {
    display: none;
}

.lea-hero__card-price-label {
    display: block;
    font-size: calc(var(--lea-hero-u) * .625);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
}

.lea-hero__card-price-value {
    display: block;
    font-size: calc(var(--lea-hero-u) * 1.375);
    font-weight: 700;
    line-height: 1.1;
}

.lea-hero__card-price--free {
    font-size: calc(var(--lea-hero-u) * .75);
    font-weight: 700;
    letter-spacing: .117em;
    text-transform: uppercase;
}

/*
 * Auf schmalen Schirmen stapelt die Fusszeile: nebeneinander bliebe fuer den
 * Titel eine Spalte von wenigen Zeichen.
 */
@media (max-width: 575.98px) {
    .lea-hero__card-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }

    .lea-hero__card-title {
        font-size: 20px;
    }
}

/* -------------------------------------------------------------- Die Punkte */

/*
 * Sie entstehen erst im Browser (hero.js) und sind zugleich die
 * Stoppmoeglichkeit: ein Klick haelt den selbsttaetigen Wechsel an. Ohne
 * JavaScript gibt es sie nicht — dann steht ohnehin nur eine Karte da.
 */
.lea-hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -26px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 9px;
}

.lea-hero__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: rgba(255, 255, 255, .34);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
}

.lea-hero__dot[aria-pressed="true"] {
    width: 26px;
    background: var(--lea-hero-accent);
    border-radius: 999px;
}

/*
 * Der Fokusring muss sichtbar bleiben: die Punkte sind Knoepfe, und wer mit
 * der Tastatur navigiert, sieht sonst nicht, wo er steht.
 */
.lea-hero__dot:focus-visible {
    outline: 2px solid var(--lea-hero-on-dark);
    outline-offset: 3px;
}

/*
 * Die Punkte haengen unter der Buehne und brauchen dort Platz — sonst sitzen
 * sie auf dem naechsten Element.
 */
.lea-hero__stage:has(.lea-hero__dots) {
    margin-bottom: 0;
}