/*
 * events.css — COD-Embed Stufe B
 *
 * Vollstaendige Event-Karten-CSS fuer das Events-Widget.
 * Quelle: cod-plugin-frontend-bundle.css (Abschnitt "Karten" + "Load More")
 * aus community-of-dreams/assets/css/cod-plugin-frontend-bundle.css.
 *
 * Die --cod-* Tokens kommen aus embed-design.css (wird vorher geladen)
 * bzw. aus dem Live-Tokens-Endpunkt. Keine hartcodierten Hex-Farben
 * ausserhalb der Fallback-Werte in var().
 *
 * Umscopung: #Freizeitaktivitaeten -> .cod-events-embed-wrap
 * (im generierten HTML enthalten; Karten-Selektoren .cod-card brauchen
 *  kein zusaetzliches Scoping, da die Klassen eindeutig genug sind.)
 *
 * Bilder: loading="lazy" bleibt; bei wenigen Items feuert Owl-Lazy nicht
 * zuverlaessig -> das Widget-JS (widget-events.php) konvertiert data-src
 * zu src nach der HTML-Injektion (eager loading).
 */

/* ── Outer-Container: transparent, volle Breite (Events direkt auf Sektions-Hintergrund) */

.cod-embed-events-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
}

/* Kein grüner Stage-Hintergrund im Embed-Kontext */
.cod-embed-events-wrap .cod-events-embed-wrap {
    background: transparent !important;
    isolation: auto;
}
.cod-embed-events-wrap .cod-events-embed-wrap::before {
    display: none !important;
}

/* ── Weißer Karten-Rahmen für Filter + Events (ohne Creator-Sektion) */

.cod-embed-events-card {
    /* Feste Breite (container-unabhaengig), damit Elementor-Widget und roher
       Shortcode IMMER gleich breit + zentriert sind. Vorher 60% -> je nach
       Container-Breite unterschiedlich (Widget im Voll-Breite-Abschnitt wurde
       viel breiter als der Shortcode). */
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    background: var(--cod-color-bg-soft, #f3f6fb);
    border-radius: 20px;
    padding: 12px 12px 4px 12px;
    /* Einheitlicher Karten-Schatten - siehe cod-plugin-frontend-bundle.css. */
    box-shadow: var(--cod-shadow-card);
    overflow: visible;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .cod-embed-events-card { width: 94%; max-width: 94%; }
}

@media (max-width: 767px) {
    .cod-embed-events-card { width: 96%; max-width: 96%; }
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.cod-events-embed-wrap {
    margin-top: 24px;

    /* Lokale --cod-*-Variablen des zentralen Events-Wrappers (#Freizeitaktivitaeten
       in cod-plugin-frontend-bundle.css). Diese stehen zentral NICHT auf :root,
       sondern auf dem Wrapper -> wurden beim Buendeln der Karten-CSS uebersehen.
       Ohne sie ist u.a. --cod-badge-desktop undefiniert -> der Creator-Avatar
       (.cod-badge img) bekommt keine Breite und ueberzieht die ganze Karte als
       Hintergrund. Farb-/Schatten-Werte referenzieren die Live-Tokens
       (--cod-color-*); die Layout-Werte (Badge-Groessen, Radien) sind zentrale
       Konstanten. */
    --cod-text: var(--cod-color-text, #4d4d4d);
    --cod-meta: var(--cod-color-muted, #5a7a99);
    --cod-title-color: var(--cod-color-secondary, var(--e-global-color-secondary, #1f4166));
    --cod-cta: var(--cod-info, #2b86c5);
    --cod-cta2: var(--cod-color-accent-blue, #0ea5e9);
    --cod-soft: #eef6ff;
    --cod-blue: var(--cod-color-accent-blue, #1e90ff);
    --cod-border: color-mix(in srgb, var(--cod-color-secondary, #1f4166) 12%, transparent);
    --cod-card-bg: #fff;
    --cod-accent: var(--cod-color-accent-blue, #0a84ff);
    --cod-price-date-color: var(--cod-info, #2b86c5);
    /* --cod-color-pink/-star/-bg-soft und --cod-danger/-success/-warning hier NICHT
       lokal re-deklarieren: gleichnamige Live-Tokens erben von :root; eine
       Deklaration --x: var(--x, ...) ist ein CSS-Zyklus und macht die Variable
       ungueltig (Presets/Buttons wurden unsichtbar — gleicher Fehler wie der
       Revert 19ecf39). Fallbacks stehen an den Nutzungsstellen. */
    --cod-card-radius: 18px;
    --cod-button-radius: 12px;
    --cod-pill-radius: 999px;
    --cod-badge-radius: 16px;
    --cod-shadow-input: 0 12px 28px rgba(21,58,99,.12);
    --cod-shadow-action: 0 12px 28px rgba(21,58,99,.18);
    --cod-shadow-action-hover: 0 18px 34px rgba(21,58,99,.22);
    --cod-badge-desktop: 96px;
    --cod-badge-tablet: 80px;
    --cod-badge-mobile: 55px;
    --cod-field-h: 48px;
    --cod-card-pad-x: 14px;
    --cod-surface-soft: #f7fbff;
    --cod-text-lh: 35px;
    --cod-events-stage-bg: var(--cod-color-gruen-logo, var(--e-global-color-d7d34cf, #2CCB71));
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.cod-events-embed-grid {
    display: block;
}

/* ── Karten (aus cod-plugin-frontend-bundle.css, Abschnitt Karten) ──────── */

.cod-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(247,250,255,.96) 100%);
    border: 1px solid var(--cod-border);
    border-radius: var(--cod-card-radius);
    padding: 12px var(--cod-card-pad-x) 14px 14px;
    box-shadow: var(--cod-shadow-card);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Karte beim Zeigen: nur der Schatten wächst, sonst nichts. Die Karte selbst
   bleibt stehen. Wert kommt aus derselben plattformweiten Festlegung wie der
   Ruhezustand - nie eine eigene Formel.

   Der Zustand fehlte bis zum 02.08.2026 vollständig: Ruhe und Zeigen lieferten
   beide 0 6px 20px bei 18 Prozent, die Karte gab also keinerlei Rückmeldung.
   Partner- und Angebote-Karte hatten den Hover-Schatten längst. */
.cod-events-embed-wrap .cod-card:hover,
.cod-events-embed-wrap .cod-card:focus-within {
    box-shadow: var(--cod-shadow-card-hover);
}

.cod-leftbar {
    position: relative;
    left: 0;
    top: 0;
    bottom: auto;
    width: 8px;
    background: var(--cod-blue);
    border-radius: 12px;
}

.cod-bottombar {
    display: none;
    height: 8px;
    background: var(--cod-blue);
    border-radius: 8px;
    margin-top: 10px;
}

.cod-date {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 84px 10px 22px;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--cod-accent);
}

.cod-date .row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.cod-date .t .end::before {
    content: " - ";
}

.cod-date .cod-badge {    cursor: pointer;
}

.cod-date .cod-price-chip {
    position: absolute;
    top: -5px;
    right: calc(var(--cod-badge-mobile) + 5px);
}

/* Info-Chip auf heller Karte. Die --cod-chip-surface-*-Tokens kommen aus dem
   Betreiber-Dashboard (Design → Info-Chips) und sind bewusst NICHT dieselben
   wie --cod-chip-bg: Das ist der Chip über einem BILD (Kategorie, Anbieter bei
   den Angeboten), der dunkel und durchscheinend sein muss. Gemessen am
   05.08.2026: dort rgba(0,0,0,.55), hier #eef6ff - eine gemeinsame Farbe macht
   zwangsläufig einen von beiden unlesbar.
   Jeder Rückfallwert ist der bisherige Wert, damit ein leeres Feld im Dashboard
   genau das bedeutet, was dort steht: "wie im Design". */
/* Seit 06.08.2026 auf dem gemeinsamen Info-Chip (Etappe 7): Das Markup traegt
   zusaetzlich .cod-info-chip. Form, Farbe, Rundung, Rahmen und Innenabstand
   kommen von dort - alle aus denselben Dashboard-Tokens wie bisher, die Regel
   hier war eine wortgleiche Dublette.

   ZWEI DINGE BLEIBEN, und beide mit Grund:

   font-size  Der Betreiber hat hier einen Elementor-Regler gesetzt, der mit
              !important gewinnt (gemessen 06.08.2026: 20px bei 1440 px, 18px
              bei 820). Der Baustein erbt seine Groesse dagegen aus der
              Umgebung. In einer Community OHNE gesetzten Regler wuerde der
              Chip damit springen - deshalb bleibt der bisherige Wert stehen.

   text-decoration  Der Chip ist seit 05.08.2026 ein Verweis auf die Buchung
              und braechte sonst die Unterstreichung des Themes mit.

   Die Klasse .cod-price-chip bleibt ebenfalls: An ihr haengen SECHZEHN
   Elementor-Regler mit !important. Wer sie entfernt, nimmt dem Betreiber alle
   gespeicherten Einstellungen auf einen Schlag weg. */
.cod-price-chip {
    font-size: 0.875rem;
    text-decoration: none;
}

/* Zeigen und Antippen nach dem Standard vom 29.07.2026 (Flächenbutton:
   vergrössern + Farbwechsel; Antippen 0,97). Die Farben kommen aus dem
   Betreiber-Dashboard (Branding & Design -> Info-Chips 1), Rückfallwert ist
   jeweils der Ruhezustand — ohne Einstellung ändert sich also nur die Grösse.

   Bewusst KEIN transform auf dem Chip selbst bei :active innerhalb der Karte,
   sondern beides über transform mit transform-origin: center — der Chip sitzt
   in der Kopfzeile neben dem Abzeichen, ein Wachsen nach rechts würde ihn
   dagegenschieben. */
a.cod-price-chip,
.cod-price-chip[data-event-popup] {
    cursor: pointer;
    position: relative;
    transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
    transform-origin: center;
}

a.cod-price-chip:hover,
a.cod-price-chip:focus-visible,
.cod-price-chip[data-event-popup]:hover,
.cod-price-chip[data-event-popup]:focus-visible {
    background: var(--cod-chip-surface-hover-bg, var(--cod-chip-surface-bg, var(--cod-soft)));
    border-color: var(--cod-chip-surface-hover-border,
                      var(--cod-chip-surface-border, var(--cod-mix-info-12, rgba(43, 134, 197, .12))));
    color: var(--cod-chip-surface-hover-color, var(--cod-chip-surface-color, var(--cod-cta)));
    transform: scale(1.05);
}

a.cod-price-chip:active,
.cod-price-chip[data-event-popup]:active {
    transform: scale(.97);
}

/* Trefferfläche auf 44 px, ohne den Chip zu vergrössern.
   Seit er die Buchung öffnet, ist er ein Bedienelement - und damit gilt
   Kriterium 4 der Prüfliste. Gemessen am 05.08.2026 direkt nach der
   Umstellung: 68 x 26 px, also 18 px zu flach. Sichtbar soll er aber eine
   schlanke Pille bleiben.

   Nur SENKRECHT aufgerechnet, dasselbe Vorgehen wie bei den beiden Knöpfen
   dieser Karte: Waagerecht säße die Fläche sonst unter dem Abzeichen daneben
   und würde dessen Treffer schlucken. */
a.cod-price-chip::after,
.cod-price-chip[data-event-popup]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    min-height: 44px;
    height: 100%;
}

@media (prefers-reduced-motion: reduce) {
    a.cod-price-chip,
    .cod-price-chip[data-event-popup] { transition: none; }
    a.cod-price-chip:hover,
    a.cod-price-chip:focus-visible,
    a.cod-price-chip:active,
    .cod-price-chip[data-event-popup]:hover,
    .cod-price-chip[data-event-popup]:focus-visible,
    .cod-price-chip[data-event-popup]:active { transform: none; }
}

.cod-badge {
    width: var(--cod-badge-desktop);
    height: var(--cod-badge-desktop);
    border: 2px solid var(--cod-color-star, #FFCD02);
    border-radius: var(--cod-badge-radius);
    overflow: hidden;
    background: var(--cod-card-bg, #fff);
    box-shadow: var(--cod-shadow-input);
}

.cod-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cod-media {
    /* position:relative ist Pflicht: .cod-media img (position:absolute; inset:0)
       nimmt .cod-media als Bezug, NICHT .cod-card. Ohne das Eltern-relative
       greift das Bild auf .cod-card (position:relative, overflow:hidden) und
       liegt riesig ueber der ganzen Karte. !important verhindert Theme/Elementor-
       Ueberschreibungen (z.B. globales img { position:static } o. aeh.). */
    position: relative !important;
    border-radius: 10px;
    overflow: hidden;
    margin-left: 22px;
    width: calc(100% - 22px);
}

.cod-media::before {
    content: "";
    display: block;
    padding-top: 70%;
}

.cod-media img {
    /* position:absolute + inset:0 beziehen sich auf .cod-media (s.o.).
       display:block + !important verhindern, dass Theme/Elementor 'height:auto'
       oder 'position:static' das Layout bricht. */
    display: block !important;
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
}

.cod-card .cod-title {
    font-size: 0.875rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin: 10px 0 6px 22px;
    color: var(--cod-title-color);
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.25em * 3);
    text-transform: none !important;
}

.cod-place,
.cod-dist {
    /* Mit der Kartenbreite skaliert - --cod-card-ui-scale wird von
       cod-partner-card-scale.js an der Karte gesetzt und ist 1, wenn keine
       Nachführung läuft. Ohne den Faktor blieben Ort und Entfernung bei 16 px,
       während die Karte von 930 auf 296 px schrumpfte (gemessen 02.08.2026). */
    font-size: max(var(--cod-card-min-font, 13px), calc(1rem * var(--cod-card-ui-scale, 1))) !important;
    line-height: 1.35 !important;
}

.cod-info-line {
    display: block;
}

.cod-place {
    display: block;
    margin: 3px 0 2px 0;
}

.cod-dist {
    display: block;
    margin: 0 0 10px 0;
}

.cod-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    z-index: 3;
    margin-left: 22px;
    justify-content: flex-end;
    padding-right: var(--cod-card-pad-x);
}

.cod-cta,
.cod-cta.secondary {
    appearance: none;
    border: 0;
    border-radius: var(--cod-button-radius);
    padding: 12px 16px;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.875rem;
    white-space: nowrap;
    box-shadow: var(--cod-shadow-action);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.cod-cta {
    background: linear-gradient(135deg, var(--cod-cta) 0%, var(--cod-info) 100%);
}

.cod-cta.secondary {
    background: linear-gradient(135deg, var(--cod-cta2, var(--cod-color-accent-blue, #0ea5e9)) 0%, var(--cod-cta, var(--cod-info, #2b86c5)) 100%);
}

.cod-cta span {
    display: inline-block;
    line-height: 1;
}

.cod-cta:hover,
.cod-cta:focus,
.cod-cta.secondary:hover,
.cod-cta.secondary:focus {
    transform: translateY(-1px);
    box-shadow: var(--cod-shadow-action-hover);
    filter: brightness(1.02);
}

/* Info-Button-Override (analog zu #Freizeitaktivitaeten -> .cod-events-embed-wrap) */
.cod-events-embed-wrap .cod-actions .cod-cta.cod-info,
.cod-events-embed-wrap .cod-actions .cod-cta.cod-info:visited {
    background: var(--cod-info, #2b86c5) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none;
}

.cod-events-embed-wrap .cod-actions .cod-cta.cod-info:hover,
.cod-events-embed-wrap .cod-actions .cod-cta.cod-info:focus {
    background: var(--cod-info, #2b86c5) !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: brightness(1.04);
}

/* Datum/Zeit-Farbe (analog #Freizeitaktivitaeten) */
.cod-events-embed-wrap .cod-date .only-date,
.cod-events-embed-wrap .cod-date .only-time,
.cod-events-embed-wrap .cod-date .start.multi,
.cod-events-embed-wrap .cod-date .end {
    color: var(--cod-price-date-color);
}

.cod-events-embed-wrap .cod-date .end::before {
    color: var(--cod-price-date-color);
    background: none !important;
}

.cod-events-embed-wrap .cod-date .t::after {
    background: var(--cod-price-date-color);
}

/* Load-More Button (analog .cod-load-more-wrap / .cod-load-more) */
.cod-events-embed-load-more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0 22px;
}

.cod-events-embed-load-more {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    background: var(--e-global-color-d7d34cf, var(--cod-cta)) !important;
    color: #fff !important;
    box-shadow: var(--cod-shadow-btn);
    transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cod-events-embed-load-more:hover {
    filter: brightness(1.05);
}

.cod-events-embed-load-more:active {
    transform: translateY(1px);
    box-shadow: var(--cod-shadow-btn-press);
}

/* ── Reduced Motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .cod-cta {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Mobile (max 767px) ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .cod-leftbar {
        display: none;
    }

    .cod-bottombar {
        display: block;
    }

    .cod-card {
        position: relative;
    }

    /* Beide Selektoren gemeinsam: Das Abzeichen liegt im Datumsbereich, dort
       greift sonst die Grundregel mit right:-23px und schiebt es aus der Karte. */
    /* Rechts bündig mit dem Titelbild (gleicher Wert wie das Karten-Padding),
       oben knapp am Kartenrand. Die Höhe des Abzeichens darf die Zeilenhöhe
       von Datum und Preis NICHT beeinflussen - deshalb absolut und ohne
       Mindesthöhe an der Zeile. */
    .cod-card .cod-badge,
    .cod-date .cod-badge {        /* Rechte Kante auf der Flucht des Titelbilds. Das Bild endet am
           Karten-Padding; der 2px-Rahmen des Abzeichens wird abgezogen, damit
           die sichtbaren Kanten bündig stehen und nicht der Rahmen vorsteht. */
        width: var(--cod-badge-mobile);
        height: var(--cod-badge-mobile);
}


    /* Abstand passend zum Abzeichen: 10px Rand + Breite + 10px Luft. */
    .cod-date .cod-price-chip {
        right: calc(var(--cod-badge-mobile) + 22px) !important;
    }

    .cod-media {
        margin: 5px 0 0 0;
        width: 100%;
    }

    .cod-date {
        margin: 0 0 8px 0;
        --cod-date-lh: 20px;
        --cod-date-gap: 6px;
    }

    .cod-date,
    .cod-date .row,
    .cod-date .t,
    .cod-date .only-date,
    .cod-date .only-time,
    .cod-date .start,
    .cod-date .end {
        line-height: var(--cod-date-lh) !important;
    }

    .cod-date .row {
        display: flex;
        flex-direction: column;
        gap: var(--cod-date-gap);
    }

    .cod-date .only-date {
        display: block;
        margin: 0;
    }

    .cod-date .only-time {
        display: block;
        margin: 0;
    }

    .cod-date .t {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--cod-date-gap);
    }

    .cod-date .t .start,
    .cod-date .t .end {
        display: block;
        margin: 0;
    }

    .cod-date .t .end::before {
        content: "";
    }

    .cod-date .t::after {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(var(--cod-date-lh) + (var(--cod-date-gap) / 2));
        transform: translate(-50%, -50%);
        width: 15%;
        height: 2px;
        background: var(--cod-accent);
        border-radius: 2px;
        pointer-events: none;
    }

    .cod-card .cod-title,
    .cod-place,
    .cod-dist,
    .cod-actions {
        margin-left: 0;
    }

    .cod-actions {
        display: flex;
        gap: 10px;
        padding: 0;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }

    .cod-cta,
    .cod-cta.secondary {
        min-height: 44px;
        padding: 12px 14px;
    }

    .cod-price-chip {
        font-size: 0.875rem;
    }

    .cod-events-embed-wrap .cod-actions .cod-cta,
    .cod-events-embed-wrap .cod-actions .cod-cta.secondary {
        font-size: 0.875rem;
        padding: 14px 10px;
        /* min-width: 0, NIE auto. Bei einem Flex-Element bedeutet auto "niemals
           schmaler als der eigene Inhalt" - die beiden Knöpfe behielten dann ihre
           Textbreite, statt sich den Platz zu teilen. Gemessen am 02.08.2026 bei
           360 px: Knöpfe 160 und 158 px in einer 265 px breiten Zeile, der zweite
           endete 47 px hinter dem Kartenrand und overflow:hidden schnitt ihn ab.
           Nach der Umstellung 128 und 127 px, kein Überlauf mehr. */
        min-width: 0;
        min-height: auto;
        line-height: 1.2;
    }

    /* Auch die Zeile selbst darf schmaler werden als ihr Inhalt - sonst schiebt
       sie die Knöpfe wieder hinaus, obwohl diese für sich genommen passen. */
    .cod-events-embed-wrap .cod-actions {
        min-width: 0;
    }

    /* Trefferfläche auf 44 px aufrechnen, ohne den Knopf zu vergrössern.
       min-height: auto oben ist nötig, damit die Knöpfe nebeneinander passen -
       damit fiel aber auch die 44er-Mindesthöhe weg: gemessen am 02.08.2026
       41,2 px, weil die Beschriftung jetzt mit der Karte skaliert.

       Nur SENKRECHT aufweiten. Die beiden Knöpfe stehen nebeneinander und sind
       mit 128 px ohnehin breit genug; eine allseitige Aufweitung liesse ihre
       Flächen überlappen und der falsche Knopf reagierte. Der Zuwachs betraegt
       1,4 px je Seite - die Zeile darüber liegt 10 px entfernt, wird also nicht
       angeschnitten. */
    .cod-events-embed-wrap .cod-actions .cod-cta {
        position: relative;
    }

    .cod-events-embed-wrap .cod-actions .cod-cta::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 100%;
        min-height: 44px;
    }

    .cod-events-embed-wrap .cod-card .cod-title {
        /* Diese Regel gewinnt auf dem Handy gegen alle vier .cod-card .cod-title
           weiter oben - gemessen mit getMatchedStylesForNode. Sie ist damit die
           Stelle, an der die Skalierung stehen MUSS; die anderen zu ändern
           bewirkt hier nichts.

           1.25rem statt 1rem: Auf dem Handy trugen Titel, Datum, Ort, Preis und
           Knopfbeschriftung alle exakt dieselbe Grösse (gemessen 02.08.2026:
           durchgehend 13,2 px bei 360 px). Damit gab es keine Hierarchie - der
           Titel war nicht mehr als eine Zeile unter vielen. 1.25rem ist KEINE
           neue Zahl, sondern der Wert, den der Titel am Desktop ohnehin trägt:
           dieselbe Staffelung über alle Breiten, nur mitskaliert. */
        font-size: max(var(--cod-card-min-font, 13px), calc(1.25rem * var(--cod-card-ui-scale, 1))) !important;
        line-height: 1.28 !important;
        max-height: calc(1.28em * 3);
    }
}

/* ── Tablet (768px – 1024px) ────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
    .cod-card {
        position: relative;
        padding-bottom: 20px;
    }

    .cod-row {
        display: grid;
        /* minmax(0, 1fr) statt 1fr: Eine 1fr-Spalte hat als Untergrenze ihre
           min-content-Breite. Passt der Inhalt nicht, wächst das Raster über die
           Karte hinaus, statt zu schrumpfen. Gemessen am 02.08.2026 bei 820 px:
           Die Spalten lösten sich zu 18/180/433/240 px auf - zusammen mit den
           Lücken 931 px in einer 679 px breiten Karte. Datums-, Titel- und
           Knopfzeile ragten rund 230 px hinaus und wurden abgeschnitten. */
        grid-template-columns: 18px 180px minmax(0, 1fr) 240px;
        grid-template-rows: auto 1fr auto auto;
        grid-column-gap: 20px;
        align-items: start;
    }

    /* Dasselbe für die Rasterfelder: Wer über mehrere Spalten spannt (Datum,
       Titel, Knopfzeile), zieht sie mit min-width:auto sonst wieder auf. */
    .cod-row > * {
        min-width: 0;
    }

    .cod-media {
        grid-column: 2/3;
        grid-row: 2/4;
        margin: 0;
        width: 100%;
        transform: translateX(-23px);
        align-self: stretch;
    }

    .cod-date {
        grid-column: 2/5;
        grid-row: 1/2;
        margin: 0 0 8px 0;
        gap: 14px;
        font-size: 1.125rem;
        color: var(--cod-color-text);
        transform: translateX(-23px);
        position: static !important;
    }

    /* Preis LINKS neben dem Creator-Abzeichen. Vorher stand er auf derselben
       Position (right:12px) und lag mit höherer Ebene darüber. Der Abstand
       richtet sich nach der Tablet-Größe des Abzeichens - mit dem Handy-Wert
       wäre er zu knapp und überlappte erneut. */
    .cod-card .cod-price-chip {
        position: absolute !important;
        /* Auf Höhe der Datumszeile, nicht darunter. */
        top: 12px !important;
        right: calc(var(--cod-badge-tablet) + 26px) !important;
        z-index: 5;
        font-size: 1.125rem !important;
    }


    .cod-card .cod-title {
        grid-column: 3/5;
        grid-row: 2/3;
        margin: 0 0 10px 0;
        margin-left: -20px !important;
        font-size: 1.125rem !important;
        max-width: none !important;
        padding-right: 140px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .cod-info-line {
        grid-column: 3/4;
        grid-row: 3/4;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-self: end;
        margin-left: -20px !important;
        transform: translateY(14px);
    }

    .cod-place,
    .cod-dist {
        margin-left: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cod-actions {
        grid-column: 2/5;
        grid-row: 4/5;
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: flex-start;
        align-self: end;
        margin: 16px 0 -3px 0 !important;
        padding-right: calc(var(--cod-badge-tablet) + 16px);
        transform: translateX(-23px);
    }

    /* Creator-Abzeichen: oben rechts in der Karte.
       Vorher stand hier bottom (also unten) UND eine zweite Regel setzte es bei
       .cod-date wieder auf static. Da das Abzeichen im Datumsbereich liegt,
       gewann die zweite Regel - es landete mitten im Textfluss zwischen Datum
       und Preis. */
    /* Gleicher Abstand oben wie rechts, rechts bündig mit dem Titelbild.
       Absolut, damit die Höhe des Abzeichens die Zeilenhöhe von Datum und
       Preis nicht aufzieht. */
    .cod-card .cod-badge,
    .cod-date .cod-badge {        /* Obere Kante bündig mit der Datums-Schrift.
           Die Karte hat oben 12px Innenrand, dort beginnt die Datumszeile. Sie
           ist ein Flex-Container mit zentriertem Text, die Schrift sitzt also
           um den halben Zeilendurchschuss tiefer: bei 1.125rem sind das rund
           2px. Genau dieser Versatz steht hier. */
        width: var(--cod-badge-tablet);
        height: var(--cod-badge-tablet);
}
}

/* ── Desktop (>= 1025px) ────────────────────────────────────────────────── */

@media (min-width: 1025px) {
    .cod-card {
        padding: 12px var(--cod-card-pad-x) 14px 14px;
    }

    .cod-row {
        display: grid;
        /* minmax(0, 1fr) - Begründung im Tablet-Block darüber. Am Desktop reicht
           der Platz heute, aber eine schmale Spalte oder ein langer Titel bringt
           denselben Überlauf, ohne dass etwas meldet. */
        grid-template-columns: 18px 190px minmax(0, 1fr) 260px;
        grid-template-rows: auto 1fr auto;
        grid-column-gap: 20px;
        align-items: start;
    }

    .cod-row > * {
        min-width: 0;
    }

    .cod-media {
        grid-column: 2/3;
        grid-row: 2/4;
        margin: 0;
        width: 100%;
        transform: translateX(-23px);
        align-self: stretch;
    }

    .cod-date {
        grid-column: 2/5;
        grid-row: 1/2;
        margin: 0 0 8px 0;
        gap: 16px;
        font-size: 1.25rem;
        color: var(--cod-color-text);
        transform: translateX(-23px);
    }

    .cod-date .row .only-date {
        display: inline !important;
        margin-right: 8px;
    }

    .cod-date .row .only-time {
        display: inline !important;
    }

    .cod-card .cod-title {
        grid-column: 3/5;
        grid-row: 2/3;
        margin: 0 0 12px 0;
        max-width: calc(100% - 260px);
        align-self: start;
        margin-left: -20px !important;
        font-size: 1.25rem !important;
    }

    .cod-price-chip {
        font-size: 1.25rem !important;
    }

    .cod-date .cod-price-chip {
        right: calc(var(--cod-badge-mobile) + 35px) !important;
    }

    .cod-info-line {
        grid-column: 3/4;
        grid-row: 3/4;
        margin-left: 0 !important;
        transform: translateX(-20px);
    }

    .cod-actions {
        grid-column: 4/5;
        grid-row: 3/4;
        justify-content: flex-end;
        align-items: center;
        align-self: end;
        padding-right: 0;
    }
}

@media (min-width: 1025px) and (max-width: 1240px) {
    /* Wie in den schmaleren Breiten: oben rechts statt unten, und nicht per
       static in den Textfluss geholt. Diese Breite betrifft schmale Laptops
       und Browserfenster mit geöffneten Entwicklerwerkzeugen. */
    .cod-card .cod-badge,
    .cod-date .cod-badge {        width: var(--cod-badge-tablet);
        height: var(--cod-badge-tablet);
}

    .cod-actions {
        padding-right: calc(var(--cod-badge-tablet) + 16px);
    }

    .cod-card .cod-title {
        padding-right: calc(var(--cod-badge-tablet) + 28px);
    }
}

/* ── Sentinel (unsichtbares Scroll-Trigger-Element) ─────────────────────── */

.cod-events-embed-sentinel {
    display: block;
    height: 1px;
    visibility: hidden;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Community-Creator-Sektion
   Quelle: cod-plugin-frontend-bundle.css Abschnitt "Creators Karussell"
   Umscopung: #Freizeitaktivitaeten / #cod-creators-results
           -> .cod-embed-events-inner .cod-creators-wrap /
              .cod-embed-events-inner #cod-creators-results
   Keine Farb-Hardcodes — alle Werte ueber --cod-* oder bestehende
   Fallback-Literale (Grau-Randfarbe als letzte Notloesung).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-creators-wrap {
    max-width: 1200px;
    margin: 0 auto 10px auto;

    /* --cod-border ist auf .cod-events-embed-wrap definiert (Geschwister-Element),
       hier also nicht geerbt. Identische Berechnung nachziehen, damit die
       Creator-Item-Umrandung dieselbe Farbe hat wie im zentralen Shortcode.
       Zentrale Quelle: #Freizeitaktivitaeten -> --cod-border. */
    --cod-border: color-mix(in srgb, var(--cod-color-secondary, #1f4166) 12%, transparent);
    /* Weitere Token die Creator-Styles benoetigen (title-color, muted). */
    --cod-title-color: var(--cod-color-secondary, var(--e-global-color-secondary, #1f4166));
    --cod-meta: var(--cod-color-muted, #5a7a99);
    --cod-card-bg: #fff;
}

/* ── Heading (cod-design-heading) ────────────────────────────────────────── */

.cod-embed-events-inner .cod-design-heading {
    text-align: center;
    margin-bottom: 12px;
}

.cod-embed-events-inner .cod-design-heading__eyebrow {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cod-color-muted, var(--cod-meta, #5a7a99));
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cod-embed-events-inner .cod-design-heading__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
    line-height: 1.2;
    margin: 0;
}

/* ── Karussell-Container ─────────────────────────────────────────────────── */

.cod-embed-events-inner #cod-creators-results {
    position: relative;
    overflow: visible;
    padding: 0 22px !important;
    --navY: 100px;
    --navInset: 0px;
    min-height: 120px;
}

.cod-embed-events-inner #cod-creators-results .owl-stage-outer {
    overflow: hidden !important;
}

/* ── Owl-Navigationspfeile ───────────────────────────────────────────────── */

.cod-embed-events-inner #cod-creators-results .owl-nav {
    display: block !important;
    z-index: 20;
    pointer-events: auto;
}

/* Bulletproof gegen doppelte Pfeile: Owl kann (z.B. bei internem Refresh) ein
   ZWEITES .owl-nav an das Karussell anhaengen, das das einmalige JS-Aufraeumen
   (cleanOwlNav) zeitlich verpasst. Diese Regel blendet jedes weitere .owl-nav
   nach dem ersten dauerhaft aus -> es bleibt genau EIN Pfeil-Paar sichtbar. */
.cod-embed-events-inner #cod-creators-results .owl-nav ~ .owl-nav {
    display: none !important;
}

.cod-embed-events-inner #cod-creators-results .owl-nav button {
    position: absolute;
    top: var(--navY) !important;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    line-height: 48px;
    cursor: pointer;
    font-size: 3rem;
    color: var(--cod-color-text, #4d4d4d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cod-embed-events-inner #cod-creators-results .owl-nav .owl-prev {
    left: var(--navInset) !important;
    right: auto !important;
}

.cod-embed-events-inner #cod-creators-results .owl-nav .owl-next {
    right: var(--navInset) !important;
    left: auto !important;
}

.cod-embed-events-inner #cod-creators-results .owl-nav button:hover {
    background: color-mix(in srgb, var(--cod-color-text, #4d4d4d) 8%, transparent) !important;
}

/* Touch-Handling (analog #cod-creators-results im Bundle) */
.cod-embed-events-inner #cod-creators-results .owl-nav button,
.cod-embed-events-inner #cod-creators-results .owl-prev,
.cod-embed-events-inner #cod-creators-results .owl-next,
.cod-embed-events-inner #cod-creators-results .owl-dot {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ── Creator-Item (Avatar + Name + Entfernung) ────────────────────────────── */

.cod-embed-events-inner .cod-creator-item {
    text-align: center;
    transition: transform 0.2s ease;
    margin: 0 auto;
    /* Phase 2: Klick-Filter aktiv -> pointer wie im zentralen Shortcode. */
    cursor: pointer;
}

.cod-embed-events-inner .cod-creator-item img {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto 5px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    /* Rahmenbreite folgt dem Maßstab des Creator-Abzeichens (1 Teil auf 48
       Teile Kante) - die Werte je Breakpoint stehen weiter unten. */
    border: 4px solid var(--cod-border, rgb(213, 216, 218));
    border-radius: 30px;
}

/* Feste Eintraege (Alle Events, Online Events) mit weissem Hintergrund.
   Community-Logos ebenso: sie sind meist freigestellt und liefen sonst
   randlos gegen den Sektions-Hintergrund. */
.cod-embed-events-inner .cod-creator-item.cod-all img,
.cod-embed-events-inner .cod-creator-item.cod-online img,
.cod-embed-events-inner .cod-creator-item.cod-become img,
.cod-embed-events-inner .cod-creator-item.cod-community-item img {
    padding: 0.5rem;
    background: var(--cod-card-bg, #fff);
    object-position: center center;
}

/* ── Drill-down: Kachel "Alle Communities" (Ebene 2 zurück auf Ebene 1) ───────
   Hat kein Bild, braucht aber dieselbe Fläche und Form wie die Bild-Kacheln -
   sonst springt die Zeile. Werte 1:1 aus .cod-creator-item img. */
.cod-embed-events-inner .cod-creator-item.cod-community-back .cod-community-back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 200px;
    margin: 0 auto 5px;
    aspect-ratio: 1 / 1;
    border: 4px solid var(--cod-border, rgb(213, 216, 218));
    border-radius: 30px;
    background: var(--cod-card-bg, #fff);
    font-size: 3rem;
    line-height: 1;
    color: var(--cod-text, #2b2b2b);
}

.cod-embed-events-inner .cod-creator-item.cod-community-back:hover .cod-community-back-icon {
    border-color: #FFCD02;
}

/* Aktiver Creator: Hervorhebungs-Rand */
.cod-embed-events-inner #cod-creators-results .cod-creator-item.active img,
.cod-embed-creators-wrap #cod-creators-results .cod-creator-item.active img {
    border-color: #FFCD02 !important;
}

/* ── Creator-Texte ────────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-creator-item .creator-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.5rem 0 0.25rem;
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.cod-embed-events-inner .cod-creator-item .creator-distance {
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 0.3rem 0 0.4rem;
    color: var(--cod-color-muted, var(--cod-meta, #5a7a99));
}

/* Platzhalter "Entfernung anzeigen" (kein Standort gesetzt): klickbar,
   oeffnet das globale Standort-Popup (JS in widget-creators.php). */
.cod-embed-events-inner .cod-creator-item .creator-distance.creator-distance-cta,
.cod-embed-creators-wrap .cod-creator-item .creator-distance.creator-distance-cta {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Klapp-Pfeil unter der Creator-Rolle (Partner-Profil-Popup) — Markup kommt
   zentral aus cod_events_render_creator_cards_html(), Styles analog
   cod-plugin-frontend-bundle.css (.creator-profile-toggle). */
.cod-embed-events-inner .cod-creator-item .creator-profile-toggle,
.cod-embed-creators-wrap .cod-creator-item .creator-profile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: 0 0 0.3rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--cod-mehr-anzeigen-bg, rgba(53, 152, 219, 0.12));
    color: var(--cod-mehr-anzeigen-color, var(--cod-color-accent-blue, #3598DB));
    cursor: pointer;
}

.cod-embed-events-inner .cod-creator-item .creator-profile-toggle svg,
.cod-embed-creators-wrap .cod-creator-item .creator-profile-toggle svg {
    display: block;
    width: 14px;
    height: 14px;
}

/* ── Anzahl-Zeile (cod-creators-intro) ───────────────────────────────────── */

.cod-embed-events-inner .cod-creators-intro {
    width: 70%;
    margin: 12px auto 14px;
    padding: 0 16px;
    text-align: center;
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
}

/* ── Breakpoints ──────────────────────────────────────────────────────────── */

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .cod-embed-events-inner #cod-creators-results {
        --navInset: -46px;
        padding: 0 24px !important;
    }

    .cod-embed-events-inner .cod-creators-intro {
        width: 85%;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .cod-embed-events-inner #cod-creators-results {
        --navInset: -46px;
        padding: 0 28px !important;
    }
}

/* Mobil */
@media (max-width: 767px) {
    .cod-embed-events-inner #cod-creators-results {
        padding: 0 !important;
    }

    .cod-embed-events-inner #cod-creators-results .owl-nav .owl-prev {
        left: calc(-5vw - 20px) !important;
        transform: translateY(-50%) !important;
    }

    .cod-embed-events-inner #cod-creators-results .owl-nav .owl-next {
        right: calc(-5vw - 20px) !important;
        transform: translateY(-50%) !important;
    }

    .cod-embed-events-inner #cod-creators-results .owl-nav button {
        width: 38px;
        height: 38px;
    }

    .cod-embed-events-inner .cod-creator-item img {
        border-radius: 22px;
    }

    .cod-embed-events-inner .cod-creators-intro {
        width: 90%;
    }
}

/* Border-Breite je Breakpoint.
   MASSSTAB seit dem 02.08.2026: das Creator-Abzeichen der Event-Karte
   (.cod-badge) mit 2 px Rahmen auf 96 px Kante - ein Achtundvierzigstel. Alle
   runden und eckigen Bildmarken der Seite folgen diesem Verhältnis, damit sie
   nebeneinander aus einem Guss wirken. Vorher hatte jede ihre eigene Historie
   (2 px hier, 6 px dort, 0 px beim Login-Abzeichen).

   Umgerechnet auf die Kachelbreite je Breakpoint:
     bis 767 px   ~120 px Kante -> 3 px
     768–1024 px  ~160 px Kante -> 3 px
     ab 1025 px    200 px Kante -> 4 px
   Der aktive Zustand bleibt bewusst kräftiger (das Anderthalbfache): Er ist
   kein Zierrat, sondern die einzige Anzeige, welche Community gerade gilt. */
@media (max-width: 767px) {
    .cod-embed-events-inner #cod-creators-results .cod-creator-item img {
        border-width: 3px;
    }
    .cod-embed-events-inner #cod-creators-results .cod-creator-item.active img {
        border-width: 4px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .cod-embed-events-inner #cod-creators-results .cod-creator-item img {
        border-width: 3px;
    }
    .cod-embed-events-inner #cod-creators-results .cod-creator-item.active img {
        border-width: 5px;
    }
}
@media (min-width: 1025px) {
    .cod-embed-events-inner #cod-creators-results .cod-creator-item img {
        border-width: 4px;
    }
    .cod-embed-events-inner #cod-creators-results .cod-creator-item.active img {
        border-width: 6px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Filterleiste (Phase 3)
   Quelle: cod-plugin-frontend-bundle.css Abschnitt "Suche + Datum-Picker"
   Umscopung: #Freizeitaktivitaeten -> .cod-embed-events-inner
   KEINE Farb-Hardcodes — alle Werte ueber --cod-* (definiert auf
   .cod-events-embed-wrap) oder --cod-color-* (Live-Token-Endpunkt).
   ══════════════════════════════════════════════════════════════════════════ */

/* Token-Weitergabe: .cod-embed-filter-wrap erbt --cod-* nicht automatisch
   vom Geschwister .cod-events-embed-wrap -> nochmal die gleichen Werte
   setzen (identisch zum Wrapper-Block oben). */
.cod-embed-events-inner .cod-embed-filter-wrap {
    --cod-text: var(--cod-color-text, #4d4d4d);
    --cod-meta: var(--cod-color-muted, #5a7a99);
    --cod-title-color: var(--cod-color-secondary, var(--e-global-color-secondary, #1f4166));
    --cod-cta: var(--cod-info, #2b86c5);
    --cod-soft: #eef6ff;
    --cod-border: color-mix(in srgb, var(--cod-color-secondary, #1f4166) 12%, transparent);
    --cod-card-bg: #fff;
    --cod-field-h: 48px;
    --cod-button-radius: 12px;
    --cod-shadow-input: 0 12px 28px rgba(21,58,99,.12);
    /* --cod-danger/-success NICHT lokal re-deklarieren (erben von :root,
       Selbstreferenz = Zyklus = ungueltig; siehe Wrapper-Block oben). */
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap {
    position: relative;
    margin-bottom: 14px;
    /* FIX 1: z-index:auto statt z-index:1, damit kein eigener Stacking-Context
       entsteht. Mit z-index:1 wuerde der Filter-Wrap einen neuen Stacking-Context
       aufspannen und das Popover koennte trotz hohem z-index-Wert UNTER dem
       Creator-Slider (owl-nav, z-index:20) oder dem .cod-cta (z-index:3) liegen,
       da der Vergleich dann auf Wrapper-Ebene stattfindet, nicht auf Element-Ebene.
       Identisch zu #Freizeitaktivitaeten .cod-search-wrap { z-index:auto !important }
       in cod-plugin-frontend-bundle.css Zeile 2596. */
    z-index: auto;
}

/* ── Zaehler-Zeile ───────────────────────────────────────────────────────── */

/* Ergebniszeile. Sie sitzt seit dem 02.08.2026 IM Event-Block (erstes Element
   von .cod-events-embed-wrap) und nicht mehr in der Filterleiste - sie beschreibt
   das Ergebnis, nicht die Auswahl. Der Selektor greift bewusst ohne den
   Filter-Vorfahren, damit er an der neuen Stelle gilt. Die feine Linie oben
   trennt Auswahl und Ergebnis, ohne einen weiteren Kasten zu bauen. */
.cod-embed-events-inner .cod-field-caption {
    margin: 18px 0 10px 0;
    padding-top: 14px;
    border-top: 1px solid var(--cod-color-border, rgba(31, 65, 102, .12));
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
}

/* Ohne den Filter-Vorfahren: Die Zeile ist mit der Zahl in den Event-Block
   gewandert, der Selektor muss dort ebenso greifen. */
.cod-embed-events-inner .cod-embed-caption-count {
    font-weight: 900;
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

/* ── Suchfeld-Grid ───────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap .cod-search-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

/* ── Suchfeld-Box ────────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap .cod-search-box {
    position: relative;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-search-box .ico {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0.65;
    pointer-events: none;
    z-index: 1;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-search {
    width: 100%;
    min-height: var(--cod-field-h);
    padding: 12px 14px 12px 1rem;
    border: 1px solid var(--cod-border);
    border-radius: 10px;
    font-size: 1.125rem;
    background: var(--cod-card-bg, #fff);
    box-shadow: var(--cod-shadow-input);
    box-sizing: border-box;
    outline: none;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-search:focus {
    border-color: var(--cod-cta, #2b86c5);
}

/* ── Aktions-Buttons ─────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap .cod-search-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-calendar-btn,
.cod-embed-events-inner .cod-embed-filter-wrap .cod-clear-btn {
    height: var(--cod-field-h);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--cod-border);
    border-radius: 10px;
    box-shadow: var(--cod-shadow-input);
    padding: 0 14px;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    background: var(--cod-cta);
    white-space: nowrap;
}

/* Kalender-SVG-Icon */
.cod-embed-events-inner .cod-embed-filter-wrap .ico-cal {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

/* Label des Kalender-Buttons */
.cod-embed-events-inner .cod-embed-filter-wrap .cod-calendar-btn .lbl {
    white-space: nowrap;
    font-size: 0.9375rem;
}

/* Loeschen-Button: kompakt (Papierkorb), nur sichtbar wenn Datum gesetzt */
.cod-embed-events-inner .cod-embed-filter-wrap .cod-clear-btn {
    background: var(--cod-danger, #C13A2B) !important;
    padding: 0 !important;
    width: var(--cod-field-h);
    min-width: var(--cod-field-h);
    justify-content: center;
}

/* 22 statt 18 px (12.08.2026): Der Papierkorb stand direkt neben dem
   Kalender-Knopf, dessen .ico-cal 22 px misst - vier Pixel kleiner, in derselben
   Reihe, unmittelbar nebeneinander. Genau das war der Eindruck "das Icon ist zu
   klein": nicht die absolute Grösse, sondern der Vergleich mit dem Nachbarn.

   DIESER KNOPF BLEIBT GEFÜLLT ROT MIT WEISSEM SYMBOL und geht bewusst NICHT den
   Weg des Formular-Papierkorbs (weiss, roter Rand, rotes Symbol - siehe
   community-admin, includes/general/cod-papierkorb-button.php). Die beiden tun
   verschiedene Dinge: Dieser hier LEERT eine Auswahl und ist jederzeit rückgängig
   zu machen, der andere WIRFT ETWAS WEG. Dazu kommt, dass dieser in einer
   Knopfreihe neben dem Kalender steht und sich nach der zu richten hat.

   Die Grösse deshalb auch nicht auf die 30 px des Formular-Knopfs: Damit würde
   er den Kalender daneben überragen.

   UND ES BLEIBT AUCH BEIM MÜLLEIMER-SYMBOL (Entscheidung 16.08.2026): Ein
   Zurücksetzen-Pfeil wäre sachlich richtiger, weil dieser Knopf nichts löscht -
   er stand zur Wahl und wurde ausdrücklich verworfen. Steht hier, damit die
   Frage nicht bei jedem Aufräumen neu aufgemacht wird. */
.cod-embed-events-inner .cod-embed-filter-wrap .ico-trash {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-clear-btn:hover,
.cod-embed-events-inner .cod-embed-filter-wrap .cod-clear-btn:focus {
    background: var(--cod-danger, #C13A2B) !important;
    filter: brightness(1.08);
}

/* ── Datum-Popover ───────────────────────────────────────────────────────── */

/* FIX 1 (global, ohne Stacking-Context-Einschraenkung): Das Popover braucht
   einen z-index, der UNABHAENGIG von eventuellen Wrapper-Stacking-Contexts
   sicher ueber Owl-Nav (z-index:20), .cod-cta/cod-actions (z-index:3) und
   dem Overlay (z-index:1000) liegt. Identisch zu .cod-date-popover { z-index:1001 }
   im zentralen Bundle (cod-plugin-frontend-bundle.css Zeile 2598-2600). */
.cod-embed-events-inner .cod-date-popover {
    z-index: 1001 !important;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1001;
    width: 340px;
    padding: 16px;
    background: var(--cod-card-bg, #fff);
    border: 1px solid var(--cod-border);
    border-radius: 10px;
    box-shadow: var(--cod-shadow-input);
    display: none;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-popover.open {
    display: block;
}

/* ── Preset-Buttons ──────────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap .cod-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 15px 0;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-preset {
    appearance: none;
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--cod-success, #1f9d67);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    cursor: pointer;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-preset:hover {
    filter: brightness(1.08);
}

/* ── Datum-Eingabe-Grid ──────────────────────────────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-grid label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--cod-title-color, #1f4166);
}

.cod-embed-events-inner .cod-embed-filter-wrap .date-field {
    position: relative;
}

.cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"] {
    width: 100%;
    min-height: 48px;
    padding: 10px 44px 10px 12px;
    border: 1px solid var(--cod-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--cod-card-bg, #fff);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    text-align: left;
}

.cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"]:focus {
    border-color: var(--cod-cta, #2b86c5);
}

/* Kalender-Icon im Datum-Feld (via mask, analog Bundle) */
.cod-embed-events-inner .cod-embed-filter-wrap .date-field::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--cod-meta, #5a7a99);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z'/%3E%3C/svg%3E") no-repeat center/contain;
    pointer-events: none;
}

/* Natives Kalender-Icon transparent aber klickbar halten (Chrome/Edge/Safari).
   display:none würde es entfernen => kein Klick möglich; opacity:0 hält es als
   unsichtbares Overlay über dem custom ::after-Icon. */
.cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    width: 40px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

/* iOS: Picker aktiv lassen, linksbündig, Icon unsichtbar */
@supports (-webkit-touch-callout: none) {
    .cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"] {
        -webkit-appearance: menulist;
        appearance: auto;
        background: none;
        text-align: left;
        text-align-last: left;
        padding-left: 12px;
    }
    .cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0 !important;
        display: block !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}

/* ── Datum-Aktionen (Zuruecksetzen / Uebernehmen) ────────────────────────── */

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-apply,
.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-clear {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--cod-shadow-input);
    font-size: 0.9375rem;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-apply {
    background: var(--cod-cta);
    color: #fff;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-apply:hover {
    filter: brightness(1.06);
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-date-clear {
    background: var(--cod-soft);
    color: var(--cod-title-color, #1f4166);
}

/* ── Breakpoints ──────────────────────────────────────────────────────────── */

/* Tablet */
@media (min-width: 768px) {
    .cod-embed-events-inner .cod-embed-filter-wrap .cod-search {
        padding-left: 45px !important;
    }

    .cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"] {
        min-height: 50px;
        font-size: 1.0625rem;
        padding: 10px 46px 10px 14px;
    }
}

/* Mobil */
@media (max-width: 767px) {
    /* Lupe ausblenden (zu wenig Platz, analog Bundle) */
    .cod-embed-events-inner .cod-embed-filter-wrap .cod-search-box .ico {
        display: none;
    }

    /* Cal-Button: Label nur zeigen wenn Datum gesetzt */
    .cod-embed-events-inner .cod-embed-filter-wrap .cod-calendar-btn .lbl {
        display: none;
    }
    .cod-embed-events-inner .cod-embed-filter-wrap.has-date .cod-calendar-btn .lbl {
        display: inline;
    }

    /* has-date: Grid umschalten (1 Spalte), Actions darunter */
    .cod-embed-events-inner .cod-embed-filter-wrap.has-date .cod-search-grid {
        grid-template-columns: 1fr;
    }
    .cod-embed-events-inner .cod-embed-filter-wrap.has-date .cod-search-actions {
        margin-top: 8px;
    }

    /* Popover: zentriert, fast Vollbreite */
    .cod-embed-events-inner .cod-embed-filter-wrap .cod-date-popover {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: calc(100vw - 32px);
        max-width: 480px;
    }

    .cod-embed-events-inner .cod-embed-filter-wrap .date-field input[type="date"] {
        min-height: 46px;
        font-size: 1rem;
        padding: 9px 48px 9px 14px;
    }

    .cod-embed-events-inner .cod-embed-filter-wrap .date-field::after {
        width: 22px;
        height: 22px;
    }
}

/* ── Event-Buchungs-Popup-Modal (Stufe 1: Anzeige) ──────────────────────── */
/*
 * Analog zum Gewinnspiele-Modal in gewinnspiele.css.
 * Das Modal nimmt das zentral gerenderte CEC-Booking-Flow-HTML auf.
 * Tokens: ausschliesslich --cod-* Variablen; kein Hardcode.
 * In Stufe 2/3 wird das Buchungs-Formular verdrahtet.
 */

/* Scrollsperre waehrend das Modal offen ist */
body.cod-event-popup-open {
    overflow: hidden;
}

/* Backdrop + Positionierung */
.cod-event-popup-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99900;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 12px 40px;
}

.cod-event-popup-modal.is-open {
    display: flex;
}

.cod-event-popup-backdrop {
    position: fixed;
    inset: 0;
    background: var(--cod-modal-backdrop, rgba(15, 23, 42, .58));
    -webkit-backdrop-filter: blur(var(--cod-modal-backdrop-blur, 6px));
            backdrop-filter: blur(var(--cod-modal-backdrop-blur, 6px));
    cursor: pointer;
    z-index: 0;
}

/* Panel — einheitliches cod-modal Design */
.cod-event-popup-panel {
    position: relative;
    z-index: 1;
    /* DECKENDE BASIS ZUERST (15.08.2026, vom Betreiber gemeldet: "das
       Buchungsformular ist gerade auch wieder durchsichtig"): Darunter stand
       NUR die Zeile mit var(--cod-modal-bg, <gradient>). Zwei Dinge machen das
       fragil, und beide zusammen ergeben ein voellig durchsichtiges Popup.

       Erstens ist der Gradient selbst nur zu 98 Prozent deckend - was
       dahinterliegt, scheint immer ein wenig durch. Zweitens, und das ist der
       eigentliche Ausfall: Faellt die Deklaration aus irgendeinem Grund weg -
       ein Token, der zur Laufzeit ungueltig wird, eine Regel, die spaeter
       gewinnt -, bleibt GAR KEIN Hintergrund uebrig. Gemessen war
       backgroundImage genau "none", waehrend der Token einen gueltigen
       Gradienten enthielt.

       Eine Farbe als eigene Deklaration DAVOR kann das nicht passieren: Sie
       steht fuer sich, haengt an keiner Variablen und bleibt stehen, wenn die
       Zeile darunter ausfaellt. Der Gradient legt sich darueber, wenn er
       traegt. Dieselbe Bauform wie bei den --cod-mix-Tokens: erst der sichere
       Wert, dann die schoenere Fassung. */
    background: var(--cod-modal-bg, linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.98) 100%));
    /* DIE BASIS STEHT NACH DER KURZFORM, NICHT DAVOR (15.08.2026, mein eigener
       Fehler beim ersten Anlauf): `background` ist eine Kurzform und setzt ALLE
       ihre Teilwerte zurueck - auch eine background-color, die eine Zeile
       darueber steht. Gemessen war die Basis danach spurlos weg, und das Popup
       blieb genauso durchsichtig wie vorher. Andersherum bleibt beides: Die
       Kurzform legt den Verlauf als background-image ab, die Farbe darunter
       fuellt, was der Verlauf nicht deckt - und was uebrig bleibt, wenn er
       ausfaellt. */
    background-color: var(--cod-surface, #FFFFFF);
    border: 1px solid rgba(181, 194, 216, .4);
    border-radius: var(--cod-modal-radius, 22px);
    width: 100%;
    max-width: 640px;
    box-shadow: var(--cod-modal-shadow, 0 28px 64px rgba(14, 36, 74, .28));
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px); /* Fallback Safari < 15.4 / Firefox < 101 */
    max-height: calc(100lvh - 48px);
    /* FESTE Höhe statt nur einer Obergrenze (30.08.2026, Nutzermeldung "Footer
       springt in der Höhe, sobald ich die Reiter wechsle"): Mit reinem
       max-height schrumpft die Box auf den Inhalt - bei kurzem Reiter-Inhalt
       (Ansprechpartner/Veranstalter) sass die Fussleiste dadurch direkt unter
       dem kurzen Text, bei langem (Community Creation) weiter unten. .cod-
       event-popup-body ist bereits flex:1;overflow-y:auto (siehe unten) - mit
       einer FESTEN Höhe hier bekommt der Scrollbereich seine feste Grösse,
       und die sticky Fussleiste darin sitzt dadurch bei JEDEM Reiter an
       derselben Stelle. 900px als Obergrenze wie beim Zwilling
       .cec-public-modal-box in frontend.css, damit das Popup auf sehr hohen
       Bildschirmen nicht unnötig in die Höhe gezogen wird. */
    height: min(calc(100vh - 48px), 900px);
    height: min(calc(100lvh - 48px), 900px);
    overflow: hidden;
}

/* Header */
.cod-event-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--cod-color-secondary, #1f4166) 12%, transparent);
    flex-shrink: 0;
}

.cod-event-popup-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cod-color-secondary, #1f4166);
    flex: 1;
    min-width: 0;
    /* ZWEI ZEILEN STATT EINER (19.08.2026, vom Betreiber gemeldet: "oben der
       Titel darf gerne 2-Zeiler werden, ist ja in der Hoehe genuegend Platz.
       1-Zeiler aber trotzdem mittig stehen bleiben"). Vorher kappte
       white-space:nowrap schon "Free Dance Festival: Offenes Tanzf..." - auf
       dem Handy blieb vom Eventnamen fast nichts uebrig.

       -webkit-line-clamp braucht display:-webkit-box; das versteht jeder
       Browser unserer Baseline (Safari 15.4). Bei EINER Zeile bleibt der Titel
       mittig, weil der Kopf seine Kinder ueber align-items zentriert und ein
       einzeiliger Box-Text genau eine Zeile hoch ist - die Zentrierung
       entfaellt also erst, wenn wirklich zwei Zeilen entstehen, und dann ist
       sie auch nicht mehr gemeint. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.3;
}

.cod-event-popup-close {
    flex-shrink: 0;
    width: var(--cod-modal-close-size, 42px);
    height: var(--cod-modal-close-size, 42px);
    border: 0;
    background: var(--cod-modal-close-bg, rgba(47, 141, 228, .12));
    border-radius: 999px;
    font-size: 24px;
    line-height: 0;
    padding: 0;
    cursor: pointer;
    color: var(--cod-color-heading, #1f4d86);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.cod-event-popup-close:hover {
    background: var(--cod-modal-close-bg, rgba(47, 141, 228, .12));
    filter: brightness(0.97);
}

/* Body (scrollbar) */
.cod-event-popup-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Lade-Indikator */
.cod-event-popup-loading {
    padding: 40px 24px;
    text-align: center;
    color: var(--cod-color-muted, #5a7a99);
    font-size: 0.9375rem;
}

/* ── Livestream im Event-Popup ─────────────────────────────────────────────
   Erscheint NUR, wenn das Event gerade live übertragen wird. Abgespielt wird im
   iframe der eigenen Engine; hier steht nur die Hülle. Siehe
   includes/cod-embed-event-live.php und assets/js/cod-embed-event-live.js.

   Der Block ist ein Flex-Kind des Panels und sitzt ZWISCHEN Kopf und Körper -
   der Körper wird beim Nachladen komplett ersetzt, ein Stream darin bräche
   jedes Mal ab. Nebeneffekt: Er bleibt stehen, während der Besucher die
   Event-Angaben darunter scrollt. */
.cod-event-live {
    flex-shrink: 0;
    padding: 12px 20px 14px;
    border-bottom: 1px solid var(--cod-color-border, rgba(181, 194, 216, .4));

    /* DIE BREITE STEHT AN GENAU EINER STELLE. Kopfzeile und Bühne müssen
       gleich breit sein, sonst ragt der Verweis rechts über das Videobild
       hinaus - im Bild sofort zu sehen, in keiner Zahl. Zweimal dieselbe
       Rechnung hinzuschreiben wäre eine Kopplung, die beim nächsten Ändern
       auseinanderläuft. */
    --cod-event-live-breite: min(100%, calc(34vh * 16 / 9));
}

/* PFLICHTZEILE, nicht Kosmetik: Eine display-Angabe schlägt das
   hidden-Attribut. Ohne sie stünde der leere Block auf jeder Event-Seite. */
.cod-event-live[hidden] {
    display: none;
}

.cod-event-live__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    max-width: var(--cod-event-live-breite);
    margin: 0 auto 10px;
}

.cod-event-live__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cod-danger, #C13A2B);
    color: #fff;
    /* Untergrenze der Plattform - keine Schrift in einer Karte oder Pille
       darunter. Eigene 10 oder 12 px wären ein Ausreisser nach unten. */
    font-size: var(--cod-card-min-font, 13px);
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1;
}

.cod-event-live__badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

/* 0.9375rem = 15 px, dieselbe Grösse wie die übrigen Nebentexte des Popups
   (.cod-event-popup-loading). Innerhalb des Popups zählt dessen Skala, nicht
   die der Karten. */
.cod-event-live__text {
    min-width: 0;
    font-size: 0.9375rem;
    color: var(--cod-color-muted, #5a7a99);
}

.cod-event-live__link {
    display: inline-flex;
    align-items: center;
    font-size: 0.9375rem;
    color: var(--cod-link-color, #2F8DE4);
    text-decoration: underline;
}

/* Rechts an den Rand nur, solange die Zeile nicht umbricht. Auf dem Handy
   bricht sie um, und ein rechtsbündiger Link auf einer eigenen Zeile steht
   dann verloren neben nichts - gesehen im Bild, nicht in einer Zahl. */
@media (min-width: 601px) {
    .cod-event-live__link {
        margin-left: auto;
    }
}

.cod-event-live__link[hidden] {
    display: none;
}

/* 16:9 - alles andere ergäbe schwarze Balken im Bild.
   GEDECKELT WIRD ÜBER DIE BREITE, nicht über max-height: max-height gewinnt
   gegen aspect-ratio und drückt die Bühne flach (Lehre aus dem
   Ausschnitt-Fenster, 13.08.2026). Über die Breite bleibt das Verhältnis heil
   und der Stream nimmt dem Buchungsteil darunter nicht die halbe Höhe weg.
   34vh gemessen: Auf 900 px Fensterhöhe bleiben damit rund 215 px für die
   Event-Angaben unter dem Bild, auf dem Handy entscheidet ohnehin die
   Panelbreite. Die Rechnung steht oben in --cod-event-live-breite. */
.cod-event-live__stage {
    position: relative;
    width: 100%;
    max-width: var(--cod-event-live-breite);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    /* Schwarz ist hier keine Markenfarbe, sondern die Fläche neben einem
       Videobild - genau wie im Player der Zentrale. Als Token, damit ein
       Betreiber es trotzdem umstellen kann. */
    background: var(--cod-video-stage-bg, #000);
    border-radius: var(--cod-card-radius, 10px);
    overflow: hidden;
}

.cod-event-live__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (pointer: coarse) {
    /* 44 px Trefferfläche auf Berührgeräten - Standard der Plattform. */
    .cod-event-live__link {
        min-height: 44px;
    }
}

@media (max-width: 600px) {
    .cod-event-live {
        padding: 10px 14px 12px;
    }
}

/* Stufe-1-Hinweis (Buchung folgt) */
.cod-event-popup-stufe1-hint {
    position: sticky;
    bottom: 0;
    background: linear-gradient(90deg,
        var(--cod-color-accent-blue, #0ea5e9),
        var(--cod-color-secondary, #1f4166)
    );
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0 0 18px 18px;
    flex-shrink: 0;
}

.cod-event-popup-stufe1-hint[hidden] {
    display: none;
}

/* CEC-Booking-Flow-Styles im Embed-Modal (frontend.css wird hier nicht geladen).
 * Alle Regeln aus dem CEC frontend.css Booking-Flow-Block, gescoped auf
 * .cod-event-popup-body. Zusaetzlich: position:relative + overflow:hidden
 * auf .cec-flow-image (fehlt im Original — noetig fuer position:absolute img). */

/* COD-Variablen-Fallbacks fuer CEC-Farben */
.cod-event-popup-body .cec-booking-flow {
    --cec-blue: var(--cod-color-accent-blue, #1079F3);
    --cec-purple: #5143e8;
    --cec-muted: var(--cod-color-muted, #5c7090);
    --cec-soft: var(--cod-color-bg-soft, #f6f8ff);
    font-family: var(--cod-font-main, inherit);
}

/* CEC Booking-Flow (1:1 aus frontend.css, hier scope-beschraenkt) */
.cod-event-popup-body .cec-booking-flow{font-size:15px;color:#4a5568}
.cod-event-popup-body .cec-flow-page{display:none}
.cod-event-popup-body .cec-flow-page.is-active{display:block}
.cod-event-popup-body .cec-flow-event-head{padding:20px 20px 0}
.cod-event-popup-body .cec-flow-image{width:min(100%,680px);max-width:100%;margin:0 auto 18px;aspect-ratio:10/7;position:relative;overflow:hidden}
.cod-event-popup-body .cec-flow-image::before{display:none}
.cod-event-popup-body .cec-flow-image-link{display:block;width:100%;height:100%}
.cod-event-popup-body .cec-flow-image>a>img,.cod-event-popup-body .cec-flow-image>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.cod-event-popup-body .cec-flow-summary-row{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:start}
.cod-event-popup-body .cec-flow-date span{display:block;font-size:12px;color:#8492a6}
.cod-event-popup-body .cec-flow-date strong{display:block;font-size:22px;color:#2d3748;line-height:1}
.cod-event-popup-body .cec-flow-date small{font-size:12px}
.cod-event-popup-body .cec-flow-main-title h2{font-size:22px;margin:0 0 6px;color:#1f2937}
.cod-event-popup-body .cec-flow-main-title p{margin:0 0 6px}
.cod-event-popup-body .cec-status-open{color:#19b56b;font-weight:500}
.cod-event-popup-body .cec-flow-price{font-size:17px;color:#229fe7;font-weight:600;white-space:nowrap}
.cod-event-popup-body .cec-flow-tabs{display:flex;gap:20px;border-bottom:1px solid #dce7f3;margin:20px}
.cod-event-popup-body .cec-flow-tabs button{border:0;background:transparent;padding:0 0 10px;color:#4a5568;cursor:pointer}
.cod-event-popup-body .cec-flow-tabs button.is-active{color:#229fe7;border-bottom:2px solid #229fe7}
.cod-event-popup-body .cec-flow-tab-content{padding:0 20px 20px}
.cod-event-popup-body .cec-popup-section h3{font-size:21px;text-decoration:underline;color:#555;margin:22px 0 8px}
.cod-event-popup-body .cec-popup-text p,.cod-event-popup-body .cec-popup-section p{line-height:1.55}
.cod-event-popup-body .cec-creator-chip{display:inline-block;background:#35c2dd;color:white;border-radius:3px;padding:1px 5px;font-size:12px}
.cod-event-popup-body .cec-flow-footer{position:sticky;bottom:0;background:#fff;border-top:1px solid #e5edf6;display:flex;justify-content:flex-end;gap:14px;padding:16px 20px;margin-top:20px}
.cod-event-popup-body .cec-flow-title{display:flex;align-items:center;gap:12px;border-bottom:1px solid #e5edf6;padding:16px 20px}
.cod-event-popup-body .cec-flow-title h2{font-size:21px;margin:0;color:#2d3748}
.cod-event-popup-body .cec-booking-extra-groups{padding:4px 0 8px}
.cod-event-popup-body .cec-booking-extra-group > h3{margin:16px 20px 4px;color:#2d3748;font-family:inherit;font-size:21px;font-weight:700;line-height:1.2}
.cod-event-popup-body .cec-booking-extra-group .cec-ticket-choice-list{padding-bottom:4px}
.cod-event-popup-body .cec-back{width:30px;height:30px;border:1px solid #c9d8e8;background:#fff;border-radius:7px;font-size:22px;line-height:1;cursor:pointer}
.cod-event-popup-body .cec-ticket-choice-list{padding:0 20px 20px}
.cod-event-popup-body .cec-ticket-choice{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border:1px solid #cbd8e6;border-radius:9px;padding:14px;margin:12px 0}
.cod-event-popup-body .cec-ticket-choice p{margin:3px 0 0;font-size:13px}
.cod-event-popup-body .cec-ticket-price{font-weight:700;color:#229fe7}
.cod-event-popup-body .cec-qty{display:flex;border:1px solid #229fe7;border-radius:7px;overflow:hidden}
.cod-event-popup-body .cec-qty button{border:0;background:#fff;width:34px;font-size:18px;color:#335;cursor:pointer}
.cod-event-popup-body .cec-qty input{border:0;width:48px;text-align:center;background:#f7fafc}
.cod-event-popup-body .cec-coupon-inline{display:grid;grid-template-columns:1fr auto;gap:8px;padding:0 20px 10px;align-items:end}
.cod-event-popup-body .cec-coupon-inline label{display:grid;gap:5px}
.cod-event-popup-body .cec-coupon-inline input{border:1px solid #229fe7;border-radius:7px;padding:9px}
.cod-event-popup-body .cec-coupon-inline span{grid-column:1/-1;color:#16885a}
.cod-event-popup-body .cec-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px}
.cod-event-popup-body .cec-info-grid .cec-field:nth-child(3){grid-column:1}
.cod-event-popup-body .cec-member-info{grid-column:2;grid-row:1 / span 2;border:1px solid #229fe7;border-radius:8px;padding:12px;line-height:1.45}
.cod-event-popup-body .cec-terms-box,.cod-event-popup-body .cec-custom-field-box{margin:0 20px 20px}
.cod-event-popup-body .cec-terms-box{border:1px solid #229fe7;border-radius:8px;padding:12px;max-width:320px}
.cod-event-popup-body .cec-summary-box{border:1px solid #229fe7;border-radius:8px;margin:0 20px 20px;padding:12px}
.cod-event-popup-body .cec-summary-box div,.cod-event-popup-body .cec-total-line{display:flex;justify-content:space-between;gap:12px}
.cod-event-popup-body .cec-total-line{padding:0 20px 20px;font-size:18px}
.cod-event-popup-body .cec-payment-methods{padding:0 20px}
.cod-event-popup-body .cec-payment-note{text-align:center;color:#6b7280;padding:0 20px}
.cod-event-popup-body .cec-congrats{text-align:center;padding:40px 24px}
.cod-event-popup-body .cec-congrats input{width:100%;max-width:460px;border:1px solid #cbd8e6;border-radius:8px;padding:10px;margin:12px auto;display:block}
/* CEC-Buttons (COD-Farben statt CEC-Blau) */
.cod-event-popup-body .cec-button{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border:none;border-radius:8px;background:var(--cod-cta,#2b86c5);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:background 0.18s}
.cod-event-popup-body .cec-button:hover{background:var(--cod-cta2,#0ea5e9)}
.cod-event-popup-body .cec-outline-button{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border:1px solid var(--cod-color-border,#d1d5db);border-radius:8px;background:transparent;color:var(--cod-color-text,#4a5568);font-weight:600;font-size:15px;cursor:pointer}
/* CEC mobil */
@media (max-width: 640px) {
    .cod-event-popup-body .cec-flow-summary-row{grid-template-columns:60px 1fr}
    .cod-event-popup-body .cec-flow-price{grid-column:2}
    .cod-event-popup-body .cec-ticket-choice{grid-template-columns:1fr}
    .cod-event-popup-body .cec-info-grid{grid-template-columns:1fr}
    .cod-event-popup-body .cec-member-info,.cod-event-popup-body .cec-info-grid .cec-field:nth-child(3){grid-column:auto;grid-row:auto}
    .cod-event-popup-body .cec-coupon-inline{grid-template-columns:1fr}
    .cod-event-popup-body .cec-flow-footer{justify-content:stretch}
    .cod-event-popup-body .cec-flow-footer button{flex:1}
}

/* "Info & Anmeldung"-Button: per JS eingefuegt, gleicher Stil wie .cod-cta */
.cod-card .cod-popup-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--cod-button-radius, 12px);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
    text-decoration: none;
    border: none;
    background: var(--cod-cta, #2b86c5);
    color: #fff;
    box-shadow: var(--cod-shadow-action, 0 12px 28px rgba(21,58,99,.18));
}

.cod-card .cod-popup-info-btn:hover {
    background: var(--cod-cta2, #0ea5e9);
    box-shadow: var(--cod-shadow-action-hover, 0 18px 34px rgba(21,58,99,.22));
    transform: translateY(-1px);
}

/* Mobil */
@media (max-width: 600px) {
    .cod-event-popup-panel {
        border-radius: 14px;
        max-width: 100%;
    }

    .cod-event-popup-modal {
        padding: 8px 0 0;
        align-items: flex-end;
    }

    .cod-event-popup-panel {
        max-height: 96vh;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .cod-event-popup-stufe1-hint {
        border-radius: 0;
    }
}

/* ════════ Einheitliches cod-modal Design fuer den Event-Buchungs-Flow (Embed) ════════
   Die Flow-CSS ist hier gebuendelt (.cod-event-popup-body .cec-*). Dieser Block hebt
   sie aufs cod-modal-Design (Tokens + Fallbacks). Steht am Ende -> gewinnt im Cascade. */
.cod-event-popup-body .cec-booking-flow .cec-flow-image{
    border-radius:14px;
    overflow:hidden;
}
/* Datums-Badge entfernt -> Raster ohne die 72px-Datumsspalte */
.cod-event-popup-body .cec-flow-summary-row--no-date{
    grid-template-columns:1fr auto !important;
}
.cod-event-popup-body .cec-flow-price,
.cod-event-popup-body .cec-ticket-price{
    color:var(--cod-color-accent-blue, #2f8de4) !important;
}
.cod-event-popup-body .cec-flow-tabs button.is-active{
    color:var(--cod-color-accent-blue, #2f8de4) !important;
    border-bottom-color:var(--cod-color-accent-blue, #2f8de4) !important;
}
.cod-event-popup-body .cec-member-info,
.cod-event-popup-body .cec-terms-box,
.cod-event-popup-body .cec-summary-box,
.cod-event-popup-body .cec-ticket-choice{
    border-color:rgba(181,194,216,.7) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
}
.cod-event-popup-body .cec-coupon-inline input,
.cod-event-popup-body .cec-congrats input{
    border:1px solid rgba(181,194,216,.75) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
}
/* Rollen-Chip hinter dem Veranstalter-Namen. Stand auf einem harten #35c2dd
   (Türkis), das in keinem Betreiber-Regler vorkommt - die einzige türkise
   Fläche im ganzen Popup. Jetzt aus der Knopfrolle abgeleitet. Er ist nicht
   anklickbar und braucht deshalb keine 44 px.
   Zwilling in der frontend.css der Zentrale. */
.cod-event-popup-body .cec-creator-chip{
    background:var(--cod-btn-angebot-bg, #3598DB) !important;
    color:var(--cod-btn-angebot-color, #fff) !important;
    border-radius:var(--cod-button-radius, 8px) !important;
    padding:2px 8px !important;
    font-size:12px !important;
    white-space:nowrap !important;
}
/* Name und Chip sind EINE Angabe und brauchen einen gemeinsamen Kasten. Ohne
   ihn brach der Chip bei einem langen Anbieternamen in die nächste Zeile -
   ohne Abstand, direkt über den Satz darunter, sodass er zu diesem zu gehören
   schien. Keine Zahl meldet das; nur der Blick auf das fertige Bild.
   flex-wrap statt Media-Query: Es entscheidet der Platz, den die Zeile
   wirklich hat. Bewusst nur im Popup - dieselbe Zeile steht auch unter
   Angebotskarten, und dort gibt es keinen Chip. */
.cod-event-popup-body .cod-anbieter-zeile__wer{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    /* Zeilenlücke NICHT 0: Beim Umbruch stand der Chip sonst mit gemessenen
       0 px Luft direkt auf dem Satz darunter. */
    gap:4px 8px !important;
}
/* Und der Block braucht Abstand nach unten. Die Regel
   ".cod-anbieter-zeile p:last-child{margin-bottom:0}" greift hier, weil es bei
   einem kostenlosen Event nur EINEN Absatz gibt - der Vertragssatz entfällt
   dann, und damit auch der Abstand, den er sonst mitbringt. */
.cod-event-popup-body .cod-anbieter-zeile{
    margin-bottom:12px !important;
}
/* Der Rahmen folgt der KNOPFROLLE, nicht der allgemeinen Akzentfarbe
   (15.08.2026): Gemessen war --cod-color-accent-blue auf dieser Community
   #fb4c95, während jeder Knopf daneben #3598DB trug - der Mengenwähler war
   damit die einzige pinke Linie in einem sonst blauen Schritt. */
.cod-event-popup-body .cec-qty{
    border-color:var(--cod-btn-angebot-bg, var(--cod-color-accent-blue, #2f8de4)) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
    justify-self:start !important;
    width:max-content !important;
    align-items:center !important;
}
.cod-event-popup-body .cec-qty button{
    color:var(--cod-color-heading, #1f4d86) !important;
    width:38px !important;
    height:40px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:0 !important;
}
.cod-event-popup-body .cec-qty input{ height:40px !important; }
/* ZWEISTELLIGE MENGEN MUESSEN LESBAR SEIN (17.08.2026, vom Betreiber gemeldet:
   bei 11 stand im Feld "1:"). Das Feld war mit 48 px breit genug fuer zwei
   Ziffern - nur reserviert ein input[type=number] in Chrome zusaetzlich Platz
   fuer seine Spinner-Pfeile, und die schnitten die zweite Ziffer ab. Die Pfeile
   sind hier ohnehin ueberfluessig: Daneben stehen eigene Knoepfe. Erlaubt sind
   bis zu 99 Karten, also muessen zwei Ziffern bequem hineinpassen. */
.cod-event-popup-body .cec-qty input::-webkit-outer-spin-button,
.cod-event-popup-body .cec-qty input::-webkit-inner-spin-button{
    -webkit-appearance:none !important;
    appearance:none !important;
    margin:0 !important;
}
.cod-event-popup-body .cec-qty input{
    -moz-appearance:textfield !important;
    appearance:textfield !important;
    width:56px !important;
    min-width:56px !important;
    padding:0 4px !important;
    font-variant-numeric:tabular-nums !important;
}
/* Eingabefelder (Deine Informationen / Zusatzfelder) im cod-modal-Stil */
.cod-event-popup-body .cec-info-grid .cec-field input,
.cod-event-popup-body .cec-info-grid .cec-field select,
.cod-event-popup-body .cec-info-grid .cec-field textarea,
.cod-event-popup-body .cec-custom-field-box input,
.cod-event-popup-body .cec-custom-field-box select,
.cod-event-popup-body .cec-custom-field-box textarea{
    border:1px solid rgba(181,194,216,.75) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
    padding:10px 12px !important;
}
/* Gesamtsumme-Zeile hervorheben */
.cod-event-popup-body .cec-total-line{
    border-top:1px solid rgba(181,194,216,.5) !important;
    padding-top:14px !important;
    margin-top:6px !important;
}
.cod-event-popup-body .cec-total-line strong:last-child{
    color:var(--cod-color-accent-blue, #2f8de4) !important;
}
/* Community-Member-Preis-Button, unser blaues Design (30.08.2026, Wunsch des
   Betreibers: "in unserem blauen Design - such dir das beste aus"). Erst
   Pink probiert (Mitglieds-Akzentfarbe) - passte nicht zum Rest des
   Formulars, das durchgehend Blau ist (Weiter-Knopf, aktiver Reiter,
   ausgewählter Mitgliedspreis). Jetzt zwei Stufen derselben Farbe: hell und
   umrandet, solange der Mitgliedspreis nur VERFÜGBAR ist - kräftig gefüllt,
   sobald er GEWÄHLT ist (.is-member-aktiv weiter unten).

   KONTRAST NACHGESCHÄRFT (30.08.2026, Nutzerwunsch, Zwilling zu frontend.css):
   Gemessen nach WCAG kam --cod-btn-angebot-bg als Text auf hellem Grund und
   als weisser Text auf sich selbst gefüllt nur auf rund 3:1 - unter den
   4,5:1 für normal grosse Schrift. Der helle Zustand bekommt deshalb
   --cod-color-heading (dunkles Marken-Blau) als Textfarbe statt der
   Knopf-Füllfarbe - gemessen rund 7,7:1. */
.cod-event-popup-body .cec-member-price-button{
    border:1px solid var(--cod-btn-angebot-bg, #3598DB) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
    background:var(--cod-modal-close-bg, rgba(53,152,219,.12)) !important;
    color:var(--cod-color-heading, #1f4d86) !important;
    box-shadow:none !important;
}
/* Datum + Ort mit Icon (Detailansicht) */
.cod-event-popup-body .cec-flow-loc,
.cod-event-popup-body .cec-flow-when{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    margin:4px 0 !important;
}
.cod-event-popup-body .cec-flow-loc,
.cod-event-popup-body .cec-flow-when{ color:#2f3640 !important; font-weight:600 !important; }
.cod-event-popup-body .cec-flow-loc a{ color:inherit !important; text-decoration:none !important; }
.cod-event-popup-body .cec-flow-loc a:hover{ text-decoration:underline !important; }
.cod-event-popup-body .cec-flow-ic{ flex-shrink:0; color:var(--cod-color-accent-blue, #2f8de4); }
/* Datum -> "In Kalender eintragen" Dropdown (ohne JS via <details>) */
.cod-event-popup-body .cec-cal{ position:relative; }
.cod-event-popup-body .cec-cal > summary{ list-style:none; cursor:pointer; user-select:none; }
.cod-event-popup-body .cec-cal > summary::-webkit-details-marker{ display:none; }
.cod-event-popup-body .cec-cal-chevron{ color:var(--cod-color-muted, #657085); transition:transform .15s; flex-shrink:0; }
.cod-event-popup-body .cec-cal[open] .cec-cal-chevron{ transform:rotate(180deg); }
.cod-event-popup-body .cec-cal-menu{ position:absolute; left:0; top:calc(100% + 6px); z-index:30; min-width:210px; background:#fff; border:1px solid rgba(181,194,216,.6); border-radius:12px; box-shadow:0 14px 34px rgba(14,36,74,.18); padding:6px; display:flex; flex-direction:column; gap:2px; }
/* 12px, nicht 11: die Untergrenze der Lesbarkeit auf dem Handy. Versalien mit
   Sperrung lesen sich zudem schwerer als Fliesstext gleicher Grösse, also ist
   das hier die ungünstigste Stelle für eine Ausnahme. Zwilling in
   includes/events/community-events-core/assets/css/frontend.css der Zentrale -
   beide gemeinsam ändern. */
.cod-event-popup-body .cec-cal-menu-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--cod-color-muted, #8a94a6); padding:6px 10px 4px; }
.cod-event-popup-body .cec-cal-menu a{ display:block; padding:8px 10px; border-radius:8px; color:#2f3640; text-decoration:none !important; font-weight:500; }
.cod-event-popup-body .cec-cal-menu a:hover{ background:var(--cod-modal-close-bg, rgba(47,141,228,.12)); color:var(--cod-color-heading, #1f4d86) !important; }
/* Ticketzeile: Text, Anzahl, Preis in EINER Zeile + Mengenzahl klar sichtbar */
.cod-event-popup-body .cec-ticket-choice{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
}
.cod-event-popup-body .cec-ticket-choice strong{ order:1; flex:1 1 110px; min-width:0; }
/* Dasselbe für den Fall, dass Titel und Beschreibung in einem eigenen <div>
   stecken - bei jedem EXTRA und bei jedem Ticket mit Beschreibung. Die Regel
   darüber trifft nur ein direktes <strong>; das verschachtelte div behielt
   flex:0 1 auto und wuchs mit seinem Text. Damit entschied die TEXTLÄNGE über
   die Anordnung: Gemessen standen zwei Extras-Kacheln nebeneinander
   verschieden aufgebaut - beim einen der Mengenwähler rechts oben, beim
   anderen eine Zeile tiefer links (15.08.2026). */
.cod-event-popup-body .cec-ticket-choice > div:first-child{ order:1; flex:1 1 110px; min-width:0; }
.cod-event-popup-body .cec-ticket-choice .cec-qty{ order:2; }
.cod-event-popup-body .cec-ticket-choice .cec-member-price-button{ order:3; }
/* Der Mitgliedspreis-Knopf war bis zum 15.08.2026 NIE gemessen: Er erscheint
   nur an einem Ticket mit member_price, und beide bisherigen Testevents waren
   kostenlos. Gemessen 42 px hoch (Grenze 44), Radius 12 statt 8, Beschriftung
   11 px. Farben bleiben unangetastet - sie unterscheiden diesen Knopf bewusst
   vom normalen Preis. Zwilling in der frontend.css der Zentrale. */
.cod-event-popup-body .cec-member-price-button{
    min-height:44px !important;
    border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 8px)) !important;
}
.cod-event-popup-body .cec-member-price-button small{
    font-size:12px !important;
}
.cod-event-popup-body .cec-ticket-choice .cec-member-price-empty{ display:none !important; }
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price{ order:4; font-weight:700 !important; white-space:nowrap; }
.cod-event-popup-body .cec-ticket-choice p{ order:5; flex-basis:100%; margin:2px 0 0 !important; }
.cod-event-popup-body .cec-qty input{
    color:#2f3640 !important;
    font-weight:700 !important;
    font-size:15px !important;
    width:44px !important;
    background:#fff !important;
    text-align:center !important;
    -moz-appearance:textfield !important;
    appearance:textfield !important;
}
/* Native Zahlen-Pfeile entfernen (eigener - / + Stepper) */
.cod-event-popup-body .cec-qty input::-webkit-inner-spin-button,
.cod-event-popup-body .cec-qty input::-webkit-outer-spin-button{
    -webkit-appearance:none !important;
    margin:0 !important;
    display:none !important;
}
/* Info-Felder (Zusaetzliche Angaben): Icon links, Text daneben eingerueckt, Begriffe verlinkt */
.cod-event-popup-body .cec-info-field{
    display:flex !important;
    gap:14px !important;
    align-items:flex-start !important;
    margin:0 0 16px !important;
}
.cod-event-popup-body .cec-info-icon{
    flex-shrink:0 !important;
    width:36px !important;
    height:36px !important;
    border-radius:999px !important;
    background:var(--cod-modal-close-bg, rgba(47,141,228,.12)) !important;
    color:var(--cod-color-accent-blue, #2f8de4) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-top:1px !important;
    font-size:0 !important;
}
.cod-event-popup-body .cec-info-icon svg{ display:block; width:20px; height:20px; }
.cod-event-popup-body .cec-info-field > div{ flex:1 1 auto; min-width:0; color:#4a5568; line-height:1.5; }
.cod-event-popup-body .cec-info-field > div p{ margin:0; }
.cod-event-popup-body .cec-info-field a{
    color:var(--cod-color-accent-blue, #2f8de4) !important;
    text-decoration:underline !important;
    font-weight:600;
}
/* Sicherheitsgurt für die Knopf-Farben.
   ALLE Regeln unten hängen am Kontext .cod-event-popup-body. Landet ein Teil des
   Formulars ausserhalb davon - etwa weil ein Dialog nach document.body wandert oder
   ein Widget das Formular anders einbettet - fällt die Farbe komplett weg und es
   bleibt weisse Schrift auf weissem Grund. Diese Regeln gelten deshalb kontextfrei;
   .cec-flow-footer und .cec-congrats gibt es nur im Buchungsformular. */
.cec-flow-footer .cec-button,
.cec-congrats .cec-button{
    border:0;
    border-radius:999px;
    padding:12px 22px;
    font-weight:700;
    cursor:pointer;
    background:var(--cod-cta, #3598db);
    color:#fff;
}
.cec-flow-footer .cec-outline-button{
    border:1px solid var(--cod-color-accent-blue, #2f8de4);
    border-radius:999px;
    padding:12px 22px;
    font-weight:700;
    cursor:pointer;
    background:var(--cod-modal-close-bg, rgba(47,141,228,.12));
    color:var(--cod-color-heading, #1f4d86);
}
.cec-flow-footer .cec-button[disabled],
.cec-congrats .cec-button[disabled]{
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.6);
    box-shadow:none;
}

/* Footer-Buttons als runde cod-modal-Pillen */
.cod-event-popup-body .cec-flow-footer .cec-button,
.cod-event-popup-body .cec-flow-footer .cec-outline-button,
.cod-event-popup-body .cec-congrats .cec-button{
    border:0 !important;
    border-radius:999px !important;
    padding:12px 22px !important;
    font-weight:700 !important;
}
.cod-event-popup-body .cec-flow-footer .cec-button,
.cod-event-popup-body .cec-congrats .cec-button{
    background:var(--cod-cta, #3598db) !important;
    color:#fff !important;
    box-shadow:0 14px 28px rgba(23,105,199,.22) !important;
}
.cod-event-popup-body .cec-flow-footer .cec-outline-button,
.cod-event-popup-body .cec-coupon-inline .cec-button,
.cod-event-popup-body .cec-congrats .cec-outline-button{
    background:var(--cod-modal-close-bg, rgba(47,141,228,.12)) !important;
    color:var(--cod-color-heading, #1f4d86) !important;
}
.cod-event-popup-body .cec-flow-footer .cec-button[disabled]{ opacity:.5 !important; }
/* Back-Button (Mehrseiten-Flow) rund + Pfeil exakt zentriert */
.cod-event-popup-body .cec-back{
    width:36px !important;
    height:36px !important;
    border-radius:999px !important;
    border:1px solid rgba(181,194,216,.75) !important;
    background:var(--cod-modal-close-bg, rgba(47,141,228,.12)) !important;
    color:var(--cod-color-heading, #1f4d86) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    font-size:22px !important;
    line-height:0 !important;
}
/* Summen unten als sauberes Karten-Design (Label links / Wert rechts) */
.cod-event-popup-body .cec-ticket-live-total{
    margin:14px 20px 20px !important;
    border:1px solid rgba(181,194,216,.6) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
    background:#f6f9ff !important;
    padding:12px 14px !important;
    display:grid !important;
    gap:8px !important;
}
.cod-event-popup-body .cec-ticket-live-total div:not([style*="display:none"]){
    display:flex !important;
    justify-content:space-between !important;
    gap:14px !important;
    align-items:center !important;
    color:var(--cod-color-muted, #657085) !important;
}
.cod-event-popup-body .cec-ticket-live-total strong{ color:#2f3640 !important; }
/* Close-/Back-Icons als SVG exakt im Kreis zentriert */
.cod-event-popup-close svg{ display:block; width:18px; height:18px; }
.cod-event-popup-body .cec-back svg{ display:block; width:18px; height:18px; }
/* Formularfelder: Abstand zwischen Label und Eingabefeld */
.cod-event-popup-body .cec-info-grid .cec-field{ display:flex; flex-direction:column; gap:6px; }
.cod-event-popup-body .cec-ticket-live-total .is-payable{
    border-top:1px solid rgba(181,194,216,.6) !important;
    padding-top:8px !important;
    margin-top:2px !important;
    font-size:17px !important;
    color:var(--cod-color-heading, #1f4d86) !important;
}
.cod-event-popup-body .cec-ticket-live-total .is-payable strong{
    color:var(--cod-color-accent-blue, #2f8de4) !important;
}
/* AUFSCHLÜSSELUNG SCHON BEI DER AUSWAHL (17.08.2026, Wunsch des Betreibers:
   "das Bild 1 auch schon bei Bild 2 anzeigen"). Zwilling der Regeln in
   community-events-core/assets/css/frontend.css - immer gemeinsam pflegen.
   Kleiner und ruhiger als die Summenzeilen: Es ist eine Erläuterung, keine
   zweite Rechnung. Die Trennlinie sitzt UNTEN, damit die Aufstellung optisch
   zur Summe darunter gehört und nicht zur Ticketliste darüber. */
/* SPEZIFITÄT, NICHT REIHENFOLGE (17.08.2026, im ersten Anlauf danebengegangen):
   Die Regel `.cod-event-popup-body .cec-ticket-live-total div:not([style*=...])`
   darüber trifft JEDES div in der Summenbox mit (0,3,1) und `!important` - auch
   diesen Kasten. Ein schlichtes `.cec-ticket-breakdown` (0,2,0) verliert dagegen
   trotz `!important`, und die beiden Posten standen NEBENEINANDER in einer Zeile
   statt untereinander. Deshalb der volle Pfad samt `div`. */
.cod-event-popup-body .cec-ticket-live-total div.cec-ticket-breakdown{
    display:grid !important;
    /* Der Kasten ERBT justify-content:space-between von der Regel fuer alle
       divs der Summenbox. Bei einem Grid heisst das: Die Spalte wird nur so
       breit wie ihr Inhalt (gemessen 307 statt 568 px), und die Betraege
       kleben am Text statt rechts zu stehen. Beide Zeilen heben das auf. */
    grid-template-columns:1fr !important;
    justify-content:stretch !important;
    gap:4px !important;
    padding-bottom:8px !important;
    border-bottom:1px solid rgba(181,194,216,.6) !important;
}
.cod-event-popup-body .cec-ticket-live-total div.cec-ticket-breakdown:empty{
    display:none !important;
}
.cod-event-popup-body .cec-ticket-live-total div.cec-ticket-breakdown div{
    display:flex !important;
    justify-content:space-between !important;
    align-items:baseline !important;
    gap:14px !important;
    width:100% !important;
    font-size:13px !important;
    color:var(--cod-color-muted, #657085) !important;
}
.cod-event-popup-body .cec-ticket-live-total div.cec-ticket-breakdown strong{
    font-weight:600 !important;
    color:var(--cod-color-muted, #657085) !important;
}
/* Ticket-Karte sauberer: dezenter Rahmen, klare Innenabstaende */
.cod-event-popup-body .cec-ticket-choice{
    padding:14px 16px !important;
    gap:10px 14px !important;
    background:#fff !important;
}
.cod-event-popup-body .cec-ticket-choice strong{ color:#2f3640 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ZWILLING zum Durchgang vom 13.08.2026
   Gegenstück zu community-of-dreams/includes/events/community-events-core/
   assets/css/frontend.css - dort ohne das .cod-event-popup-body davor. Immer
   GEMEINSAM ändern und deployen: Laufen die beiden auseinander, sieht dasselbe
   Formular auf der Zentrale anders aus als auf der Community-Seite, und es
   fällt niemandem auf, weil kaum jemand beide nebeneinander sieht.
   ══════════════════════════════════════════════════════════════════════════ */

/* -- Kopfbereich: Bild nach der HÖHE, Eckdaten daneben --------------------
   Vorher richtete sich das Bild nach der BREITE und bekam 10/7 aufgezwungen.
   Ein hochformatiges Plakat (gemessen 0,67) wurde damit beschnitten; voll
   angezeigt wäre es bei 640 px Panel 598 × 897 px gewesen. Jetzt deckelt
   --cec-flow-bild-max die Höhe, die Breite folgt dem Format. */
.cod-event-popup-body .cec-booking-flow{
/* ZUSCHNEIDEN IST AUSDRUECKLICH VERWORFEN (18.08.2026). Der Kopf ist mit
       555 px hoch, davon 419 das Bild. Auf die Frage, ob es fuer mehr
       Hoehenersparnis auf 16:9 beschnitten werden soll (rund 83 px weniger),
       lautete die Antwort des Betreibers: "Bildformat muss gleich bleiben".
       Das Titelbild wird also weiterhin VOLLSTAENDIG gezeigt - wer hier
       object-fit:cover oder eine feste aspect-ratio einfuehrt, dreht diese
       Entscheidung zurueck und schneidet Hochformaten Kopf und Fuss ab. */
    /* 300 -> 380 px (18.08.2026), Zwilling der Zentrale: Die Breite folgt
       dem Format, also macht allein die Hoehe das Bild groesser. */
    --cec-flow-bild-max:480px;
}
.cod-event-popup-body .cec-flow-event-head{
    display:flex !important;
    flex-wrap:wrap !important;
    /* Hoehe sparen (18.08.2026): 20 -> 12 px oben, 16 -> 10 px zwischen Bild
       und Ortszeile. Das Bild bleibt unangetastet. */
    gap:10px !important;
    padding-top:12px !important;
    align-items:flex-start !important;
}
.cod-event-popup-body .cec-flow-tabs{
    margin-top:12px !important;
}
.cod-event-popup-body .cec-flow-event-head > .cec-flow-image{
    /* Zwilling der Zentrale (18.08.2026): Mit flex:0 1 auto war der Kasten nur
       so breit wie das Bild - bricht er in eine eigene Zeile um, klebte er
       links, und das justify-content:center konnte nichts ausrichten, weil im
       Kasten kein freier Platz war. */
    /* 1 1 auto, NICHT 1 1 320px: Eine feste Grundbreite laesst den Kasten
       auch schrumpfen - das Bild wurde dadurch schmaler statt breiter. */
    flex:1 1 auto !important;
    min-width:0 !important;
}
.cod-event-popup-body .cec-flow-event-head > .cec-flow-summary-row{
    flex:1 1 260px !important;
    min-width:0 !important;
}
.cod-event-popup-body .cec-flow-event-head > .cec-flow-tabs{
    flex:1 1 100% !important;
}
.cod-event-popup-body .cec-booking-flow .cec-flow-image{
    aspect-ratio:auto !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    margin:0 !important;
    display:flex !important;
    justify-content:center !important;
}
.cod-event-popup-body .cec-flow-image-link{
    display:block !important;
    width:auto !important;
    height:auto !important;
}
.cod-event-popup-body .cec-flow-image > a > img,
.cod-event-popup-body .cec-flow-image > img,
.cod-event-popup-body .cec-flow-image picture > img{
    /* Der Radius gehoert ans BILD: Der Kasten rundet zwar, ist seit dem
       18.08.2026 aber breiter als das Bild - die Rundung saesse dann an einer
       Kante, die niemand sieht, und das Bild haette scharfe Ecken. */
    border-radius:14px !important;
    position:static !important;
    inset:auto !important;
    /* Buendig mit dem Text darunter: Die Breite fuehrt, die Hoehe folgt dem
       Format. Der Deckel bleibt die Notbremse fuer Hochformate. */
    width:100% !important;
    height:auto !important;
    max-height:var(--cec-flow-bild-max, 300px) !important;
    max-width:100% !important;
    object-fit:contain !important;
    display:block !important;
}
/* <picture> gibt seine Größe nicht von selbst an das img weiter - und seit
   der WebP-Auslieferung ist <picture> unser Normalfall. */
.cod-event-popup-body .cec-flow-image picture{
    display:block !important;
    max-height:var(--cec-flow-bild-max, 300px) !important;
}

/* -- Knöpfe: Maße der Plattform ------------------------------------------
   Gemessen 46,5 px hoch, Radius 999, Gewicht 700, Farbverlauf - während jede
   Karte 40 px, Radius 8, Gewicht 400 und eine Flächenfarbe trägt. 44 px
   Mindesthöhe wegen der Trefferfläche auf Berührgeräten. */
.cod-event-popup-body .cec-flow-footer .cec-button,
.cod-event-popup-body .cec-flow-footer .cec-outline-button,
.cod-event-popup-body .cec-coupon-inline .cec-button,
.cod-event-popup-body .cec-congrats .cec-button,
.cod-event-popup-body .cec-congrats .cec-outline-button,
.cod-event-popup-body .cec-offer-item .cec-button{
    border-radius:var(--cod-button-radius, 8px) !important;
    min-height:44px !important;
    padding:0 22px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}
/* -- Die Handlung trägt die PRIMÄR-Rolle ----------------------------------
   Die beiden Rollen sind ein Paar: --cod-btn-angebot-* ist gefüllt (gemessen
   #3598DB mit weißer Schrift), --cod-btn-event-* ist umrandet. In einer
   KARTENREIHE entscheidet die Position, wer welche bekommt - dort sind beide
   Knöpfe Handlungen. In einem FORMULAR steht rechts die Anmeldung und links
   der Abbruch; nach Position vergeben wäre der Abbruch auffälliger als die
   Handlung, und genau so sah es im ersten Anlauf aus.

   Die Knopfrolle ist dabei ein SATZ aus fünf Werten, nicht nur eine
   Hintergrundfarbe - das war der Fehler davor: Mit allein --cod-btn-event-bg
   und fest #fff als Schrift entstand weiß auf weiß, und der Knopf war im Bild
   schlicht nicht mehr da. Der Schriftname war zusätzlich geraten; er heißt
   -color, nicht -fg.

   Das Gewicht bleibt bewusst bei 400 statt am Token: --cod-font-btn-angebot-weight
   trägt bei dieser Community den Wert "700" MIT Anführungszeichen, und das ist
   in einer font-weight-Deklaration ungültig - die ganze Zeile fällt weg. */
.cod-event-popup-body .cec-flow-footer .cec-button,
.cod-event-popup-body .cec-congrats .cec-button,
.cod-event-popup-body .cec-offer-item .cec-button{
    background:var(--cod-btn-angebot-bg, var(--cod-cta, #3598DB)) !important;
    color:var(--cod-btn-angebot-color, #fff) !important;
    border:var(--cod-btn-angebot-border-width, 0px) solid var(--cod-btn-angebot-border-color, transparent) !important;
    border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 8px)) !important;
    font-family:var(--cod-font-btn-angebot, inherit) !important;
    font-weight:400 !important;
    box-shadow:none !important;
}
/* Der Abbruch bleibt die ruhigere Fassung - Sekundär-Rolle, damit die beiden
   Knöpfe als Paar erkennbar sind statt als zwei Zufälle. */
.cod-event-popup-body .cec-flow-footer .cec-outline-button,
.cod-event-popup-body .cec-coupon-inline .cec-button,
.cod-event-popup-body .cec-congrats .cec-outline-button{
    border:var(--cod-btn-event-border-width, 0px) solid var(--cod-btn-event-border-color, transparent) !important;
    border-radius:var(--cod-btn-event-border-radius, var(--cod-button-radius, 8px)) !important;
    font-family:var(--cod-font-btn-event, inherit) !important;
    font-weight:400 !important;
}

/* -- Reiter ---------------------------------------------------------------
   Der AKTIVE Reiter war schlechter lesbar als der inaktive: Die Akzentfarbe
   dieser Community ist ein helles Pink, gemessen 1,51:1 gegen Weiß. Die Farbe
   bleibt - sie trägt jetzt nur den Unterstrich, der Text nimmt die
   Überschriftenfarbe und markiert sich über das Gewicht. */
.cod-event-popup-body .cec-flow-tabs button{
    min-height:44px !important;
    padding:0 2px !important;
    border-bottom:2px solid transparent !important;
}
.cod-event-popup-body .cec-flow-tabs button.is-active{
    color:var(--cod-color-heading, #1f4d86) !important;
    font-weight:700 !important;
    border-bottom-color:var(--cod-color-accent-blue, #2f8de4) !important;
}

/* -- Einwilligungs-Kästen ------------------------------------------------
   Bedingungen und Newsletter trugen ihre Gestaltung als Inline-Style und waren
   damit von keinem Regler erreichbar. */
.cod-event-popup-body .cec-consent-box{
    margin:0 20px 12px !important;
    padding:12px 14px !important;
    background:var(--cod-color-surface-2, #f8f9fa) !important;
    border:1px solid var(--cod-color-border, #dee2e6) !important;
    border-radius:var(--cod-modal-field-radius, 12px) !important;
}
.cod-event-popup-body .cec-consent-label{
    display:flex !important;
    align-items:flex-start !important;
    gap:10px !important;
    cursor:pointer !important;
    font-size:13.5px !important;
    line-height:1.55 !important;
    min-height:44px !important;
}
.cod-event-popup-body .cec-consent-label input[type="checkbox"]{
    margin-top:2px !important;
    flex-shrink:0 !important;
    width:18px !important;
    height:18px !important;
}
.cod-event-popup-body .cec-consent-note{
    margin:6px 0 0 28px !important;
    font-size:12.5px !important;
    line-height:1.55 !important;
    color:var(--cod-color-muted, #6b7280) !important;
}

/* -- Trefferflächen des Mengenwählers: gemessen 40 px, Mindestmaß 44. -----
   Radius 0, weil der Rahmen drumherum (.cec-qty) rundet und beschneidet - ein
   eigener Radius am Knopf ist unsichtbar und stand gemessen auf den 3 px des
   Theme-Reset, also auf einem Wert, den niemand gewählt hat (15.08.2026). */
.cod-event-popup-body .cec-qty button{ min-height:44px !important; min-width:44px !important; border-radius:0 !important; }
/* "Einlösen": eine Handlung IM Formular, deshalb die Maße der Plattform - aber
   bewusst nicht die Primärfarbe. Primär ist in diesem Schritt "Weiter". Das
   Gewicht stand auf 700, weil der Knopf in der Maßliste der Fussleiste fehlte;
   er steht ja nicht darin.

   Der Radius kommt aus DERSELBEN Kette wie in der Fussleiste und nicht aus
   --cod-button-radius: Gemessen liefert die allgemeine Variable auf dieser
   Community 10 px, die Knopfrolle 8 - im ersten Anlauf standen dadurch zwei
   verschiedene Radien nebeneinander im selben Formular.

   SEKUNDÄR, nicht primär (15.08.2026 entschieden): Der Knopf trug die volle
   Primärfarbe und war auf 390 px vollbreit - damit war das Einlösen eines
   Codes auffälliger als "Weiter".

   Die Optik kommt NICHT aus einer eigenen Definition, sondern über denselben
   Selektor wie "Zurück" weiter unten. Ein erster Anlauf baute sie nach und
   erzeugte prompt zwei verschiedene sekundäre Knöpfe im selben Formular:
   weiss mit 2-px-Rahmen neben hellblau, dazu 46,5 statt 44 px, weil das
   vertikale Polster von .cec-button mitkam.

   ACHTUNG, Stand 15.08.2026: Das Gutscheinfeld im Buchungs-Popup wurde am
   selben Tag von einer anderen Sitzung ENTFERNT. Diese Regeln wirken damit
   derzeit auf nichts. Sie bleiben trotzdem stehen: Kommt das Feld zurück, ist
   es sofort richtig gestaltet statt wieder als Primärknopf. */
.cod-event-popup-body .cec-coupon-inline .cec-button{
    font-weight:400 !important;
}

/* -- Der Titel stand zweimal da (13.08.2026) ------------------------------
   Einmal in der Kopfzeile des Fensters, einmal wortgleich als Überschrift
   direkt darunter. Auf 390 px brach er in beiden Fassungen um und kostete
   zusammen über 90 px, bevor der erste Inhalt kam.

   Die Kopfzeile gewinnt: Sie ist flex-shrink:0 und bleibt beim Scrollen
   stehen - man sieht also jederzeit, welches Event man gerade bucht. Die
   Überschrift im Inhalt kann das nicht und wiederholt nur.

   Versteckt wird sie VISUELL, nicht entfernt: Als <h2> trägt sie die
   Gliederung des Fensters für Screenreader, und der Titel im Kopf ist ein
   <h3> in einem eigenen Bereich. Entfernt wird sie auch nicht im PHP - auf
   der Zentrale läuft dasselbe Markup in einem Fenster OHNE Titelzeile, dort
   wäre es dann der einzige Titel und er fehlte. */
.cod-event-popup-body .cec-flow-main-title > h2{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    padding:0 !important;
    overflow:hidden !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
}

/* -- Der Chat-Knopf sitzt auf dem Anmelde-Knopf (13.08.2026) --------------
   Auf 390 px überlagert der fest positionierte Chat-Launcher unten rechts
   genau die Fussleiste des Popups - also den wichtigsten Knopf des ganzen
   Formulars. Im Bildschirmfoto war von „Hier anmelden" nur noch „Hier anm"
   zu sehen. Kein Fehler im Code, keine Meldung, und in Zahlen fällt es nicht
   auf: Der Knopf ist im DOM vollständig da und misst sich korrekt; verdeckt
   wird er erst beim Zeichnen.

   Solange das Popup offen ist, tritt der Launcher zurück. Gesteuert über die
   body-Klasse, die das Popup ohnehin setzt - nicht über :has(), das in
   Firefox erst ab 121 greift und dort die ganze Regel ungültig machen würde. */
body.cod-event-popup-open .cod-chat-launcher{
    display:none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Eigenstaendiges Creator-Karussell-Widget ([creators]-Shortcode)
   Scope: .cod-embed-creators-wrap (statt .cod-embed-events-inner)
   Spiegelt die Creator-Styles oben 1:1 — nur der Scope ist ein anderer.
   Alle Farb-Werte ueber --cod-* Tokens, kein Hartcode.
   ══════════════════════════════════════════════════════════════════════════ */

.cod-embed-creators-wrap {
    --cod-border: color-mix(in srgb, var(--cod-color-secondary, #1f4166) 12%, transparent);
    --cod-title-color: var(--cod-color-secondary, var(--e-global-color-secondary, #1f4166));
    --cod-meta: var(--cod-color-muted, #5a7a99);
    --cod-card-bg: #fff;
    width: 100%;
    max-width: 100%;
}

.cod-embed-creators-wrap .cod-creators-wrap {
    max-width: 1200px;
    margin: 0 auto 10px auto;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */

.cod-embed-creators-wrap .cod-design-heading {
    text-align: center;
    margin-bottom: 12px;
}

.cod-embed-creators-wrap .cod-design-heading__eyebrow {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cod-color-muted, var(--cod-meta, #5a7a99));
    margin-bottom: 4px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cod-embed-creators-wrap .cod-design-heading__title {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
    line-height: 1.2;
    margin: 0;
}

/* ── Karussell-Container ─────────────────────────────────────────────────── */

.cod-embed-creators-wrap #cod-creators-results {
    position: relative;
    overflow: visible;
    padding: 0 22px !important;
    --navY: 100px;
    --navInset: 0px;
    min-height: 120px;
}

.cod-embed-creators-wrap #cod-creators-results .owl-stage-outer {
    overflow: hidden !important;
}

/* ── Owl-Navigationspfeile ───────────────────────────────────────────────── */

.cod-embed-creators-wrap #cod-creators-results .owl-nav {
    display: block !important;
    z-index: 20;
    pointer-events: auto;
}

.cod-embed-creators-wrap #cod-creators-results .owl-nav ~ .owl-nav {
    display: none !important;
}

.cod-embed-creators-wrap #cod-creators-results .owl-nav button {
    position: absolute;
    top: var(--navY) !important;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    line-height: 48px;
    cursor: pointer;
    font-size: 3rem;
    color: var(--cod-color-text, #4d4d4d);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cod-embed-creators-wrap #cod-creators-results .owl-nav .owl-prev {
    left: var(--navInset) !important;
    right: auto !important;
}

.cod-embed-creators-wrap #cod-creators-results .owl-nav .owl-next {
    right: var(--navInset) !important;
    left: auto !important;
}

.cod-embed-creators-wrap #cod-creators-results .owl-nav button:hover {
    background: color-mix(in srgb, var(--cod-color-text, #4d4d4d) 8%, transparent) !important;
}

.cod-embed-creators-wrap #cod-creators-results .owl-nav button,
.cod-embed-creators-wrap #cod-creators-results .owl-prev,
.cod-embed-creators-wrap #cod-creators-results .owl-next,
.cod-embed-creators-wrap #cod-creators-results .owl-dot {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ── Creator-Item ────────────────────────────────────────────────────────── */

.cod-embed-creators-wrap .cod-creator-item {
    text-align: center;
    transition: transform 0.2s ease;
    margin: 0 auto;
    cursor: pointer;
}

.cod-embed-creators-wrap .cod-creator-item img {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto 5px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border: 4px solid var(--cod-border, rgb(213, 216, 218));
    border-radius: 30px;
}

.cod-embed-creators-wrap .cod-creator-item.cod-all img,
.cod-embed-creators-wrap .cod-creator-item.cod-online img,
.cod-embed-creators-wrap .cod-creator-item.cod-become img {
    padding: 0.5rem;
    background: var(--cod-card-bg, #fff);
    object-position: center center;
}

/* abgedeckt durch den gemeinsamen Block oben */

/* ── Creator-Texte ───────────────────────────────────────────────────────── */

.cod-embed-creators-wrap .cod-creator-item .creator-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.5rem 0 0.25rem;
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.cod-embed-creators-wrap .cod-creator-item .creator-distance {
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 0.3rem 0 0.4rem;
    color: var(--cod-color-muted, var(--cod-meta, #5a7a99));
}

/* ── Anzahl-Zeile ────────────────────────────────────────────────────────── */

.cod-embed-creators-wrap .cod-creators-intro {
    width: 70%;
    margin: 12px auto 14px;
    padding: 0 16px;
    text-align: center;
    color: var(--cod-title-color, var(--cod-color-secondary, #1f4166));
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
    .cod-embed-creators-wrap #cod-creators-results {
        --navInset: -46px;
        padding: 0 24px !important;
    }
    .cod-embed-creators-wrap .cod-creators-intro { width: 85%; }
    /* Rahmen nach dem Maßstab 1:48 (siehe den Block bei den Events-Kacheln
       weiter oben). Beide Karussells tragen dieselbe Kachel - width:100% bis
       max-width:200px, quadratisch -, also gelten dieselben Zahlen. Hier stand
       bis zum 12.08.2026 noch 5/6 px aus der Zeit vor dem Maßstab; nebeneinander
       wirkten die beiden Reihen dadurch wie zwei verschiedene Bauteile. */
    .cod-embed-creators-wrap #cod-creators-results .cod-creator-item img { border-width: 3px; }
    .cod-embed-creators-wrap #cod-creators-results .cod-creator-item.active img { border-width: 5px; }
}

@media (min-width: 1025px) {
    .cod-embed-creators-wrap #cod-creators-results {
        --navInset: -46px;
        padding: 0 28px !important;
    }
    /* Maßstab 1:48, siehe Begründung im Block darüber. Vorher 6/8 px. */
    .cod-embed-creators-wrap #cod-creators-results .cod-creator-item img { border-width: 4px; }
    .cod-embed-creators-wrap #cod-creators-results .cod-creator-item.active img { border-width: 6px; }
}

@media (max-width: 767px) {
    .cod-embed-creators-wrap #cod-creators-results {
        padding: 0 !important;
    }
    .cod-embed-creators-wrap #cod-creators-results .owl-nav .owl-prev {
        left: calc(-5vw - 20px) !important;
        transform: translateY(-50%) !important;
    }
    .cod-embed-creators-wrap #cod-creators-results .owl-nav .owl-next {
        right: calc(-5vw - 20px) !important;
        transform: translateY(-50%) !important;
    }
    .cod-embed-creators-wrap #cod-creators-results .owl-nav button {
        width: 38px;
        height: 38px;
    }
    /* Maßstab 1:48, siehe Begründung im Block bei 768-1024 px.
       WICHTIG war hier der AKTIVE Zustand: Er stand auf denselben 4 px wie der
       normale, eine markierte Kachel war auf dem Handy also überhaupt nicht von
       einer unmarkierten zu unterscheiden - und der Rand ist die einzige Anzeige,
       welcher Creator gerade gilt. Jetzt 3 px normal, 4 px aktiv. */
    .cod-embed-creators-wrap .cod-creator-item img { border-radius: 22px; border-width: 3px; }
    .cod-embed-creators-wrap #cod-creators-results .cod-creator-item.active img { border-width: 4px; }
    .cod-embed-creators-wrap .cod-creators-intro { width: 90%; }
}

/* ── Statischer Karussell-Modus (Creator-Slider) ──────────────────────────
   Passen alle Karten in die sichtbaren Slots, setzt das Owl-Init-JS
   (widget-creators / widget-events) die Klasse .cod-owl-static auf das
   Karussell: Pfeile ausblenden (uebersteuert das display:block !important
   weiter oben — gleiche Spezifitaet, spaeter in der Datei) und die Karten
   mittig zentrieren. */
#cod-creators-results.cod-owl-static .owl-nav {
    display: none !important;
}
#cod-creators-results.cod-owl-static .owl-stage {
    margin: 0 auto;
}

/* ── Interessen-Chips (Themen-Filter zwischen Suchfeld und erstem Event) ──────
   Optik 1:1 wie der Interessen-Picker im Event-Formular (.cec-interest-chip in
   community-events-core/assets/css/frontend.css). Die Datei laedt auf der
   Community-Seite nicht mit, deshalb hier dieselben Werte - bewusst kein
   zweites Design. */
.cod-embed-events-inner .cod-embed-tagbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.cod-embed-events-inner .cec-interest-chip {
    /* Blauer Rand wie bei den Creator-Pillen - dieselbe Art Bedienelement,
       also dieselbe Sprache. */
    border: 1px solid var(--cod-cta, #3598db);
    background: #fff;
    color: #374151;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.cod-embed-events-inner .cec-interest-chip:hover {
    border-color: var(--cod-cta, #3598db);
    color: var(--cod-cta, #3598db);
}

.cod-embed-events-inner .cec-interest-chip.is-active,
.cod-embed-events-inner .cec-interest-chip.is-selected {
    background: var(--cod-cta, #3598db);
    border-color: var(--cod-cta, #3598db);
    color: #fff;
}

.cod-embed-events-inner .cec-interest-chip:focus-visible {
    outline: 2px solid var(--cod-cta, #3598db);
    outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Creator-Abzeichen — eine Stelle, drei Größen
   ══════════════════════════════════════════════════════════════════════════
   Das Abzeichen ist seit dem Umbau ein direktes Kind der Karte und nicht mehr
   Teil der Datumszeile. Dadurch ist die Karte der Bezugspunkt (sie ist
   position:relative) und die Position lässt sich EINMAL festlegen, statt in
   jedem Media-Block mit Ausgleichswerten nachgebessert zu werden.

   Oben und rechts derselbe Abstand wie der Innenrand der Karte: Damit fluchtet
   das Abzeichen mit der Oberkante der Datumszeile und mit der rechten Kante
   des Titelbilds. Die Größe kommt je Bildschirm aus den bestehenden
   Design-Werten, die auch der Widget-Editor setzt. */

.cod-card .cod-badge {
    position: absolute;
    top: 12px;
    right: var(--cod-card-pad-x, 14px);
    bottom: auto;
    left: auto;
    margin: 0;
    z-index: 5;
    width: var(--cod-badge-desktop);
    height: var(--cod-badge-desktop);
    overflow: hidden;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .cod-card .cod-badge {
        width: var(--cod-badge-tablet);
        height: var(--cod-badge-tablet);
    }
}

@media (max-width: 767px) {
    /* Genau so hoch wie die zweizeilige Datumsangabe. Damit entsteht rundherum
       derselbe Abstand: oben fluchtet es mit der ersten Zeile, unten mit der
       zweiten - und zum Titelbild darunter bleibt gleich viel Luft.
       Abgeleitet aus den vorhandenen Zeilenwerten, nicht fest eingetragen. */
    .cod-card .cod-badge {
        width: calc(var(--cod-date-lh, 20px) * 2 + var(--cod-date-gap, 6px));
        height: calc(var(--cod-date-lh, 20px) * 2 + var(--cod-date-gap, 6px));
    }
}

/* Preis: gleiche Bezugskante wie das Abzeichen, deshalb dieselbe Oberkante
   (top) und derselbe rechte Abstand plus Abzeichen-Breite. Ohne Abzeichen
   rueckt er an dessen Stelle - dafuer die Klasse cod-card--has-badge, statt
   auf :has() zu setzen (in aelteren Firefox-Versionen unzuverlaessig). */
.cod-card .cod-price-chip {
    position: absolute;
    top: 12px;
    right: var(--cod-card-pad-x, 14px);
    bottom: auto;
    left: auto;
    margin: 0;
    z-index: 5;
    line-height: 1;
}

.cod-card--has-badge .cod-price-chip {
    right: calc(var(--cod-badge-desktop) + var(--cod-card-pad-x, 14px) + 12px);
}

@media (max-width: 1024px) {
    .cod-card--has-badge .cod-price-chip {
        right: calc(var(--cod-badge-tablet) + var(--cod-card-pad-x, 14px) + 12px);
    }
}

@media (max-width: 767px) {
    .cod-card--has-badge .cod-price-chip {
        right: calc(var(--cod-badge-mobile) + var(--cod-card-pad-x, 14px) + 10px);
    }
}

/* Die Datumszeile braucht rechts keinen Sonderabstand mehr - das Abzeichen
   liegt jetzt ausserhalb und der Preis haelt selbst Abstand. */
.cod-card .cod-date {
    position: relative;
    margin-right: 0;
    padding-right: 0;
}

/* ---------------------------------------------------------------------------
   Anbieterkennzeichnung im Partner-Profil-Popup.
   Das Popup-HTML kommt fertig von der Zentrale; hier steht nur, wie der
   rechtliche Abschnitt auf der Community-Seite aussieht. Er soll lesbar sein,
   aber das Profil nicht dominieren.
   --------------------------------------------------------------------------- */
.cod-partner-profile-popup__legal {
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--cod-color-border, rgba(31, 65, 102, .14));
    font-size: .85rem;
    line-height: 1.5;
    color: var(--cod-color-text, #5b6a7d);
}
.cod-partner-profile-popup__legal h3 {
    margin: 0 0 .5rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--cod-color-heading, #1f4166);
}
.cod-partner-profile-popup__legal h4 {
    margin: .7rem 0 .15rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cod-color-heading, #1f4166);
}
.cod-partner-profile-popup__legal p { margin: 0 0 .4rem; }
.cod-partner-profile-popup__legal a { color: var(--cod-color-accent-blue, #3598DB); }

/* ══════════════════════════════════════════════════════════════════════════
   Zwei Anzeige-Modi: Community-Kacheln, Creator-Textreihe, Interessen-Popup
   ══════════════════════════════════════════════════════════════════════════
   Seit dem 01.08.2026 gibt es zwei Modi statt einer Leiste mit Drill-down:

   Hauptplattform  Kachelreihe = Communities, Creator als Textreihe unter dem
                   Suchfeld (.cod-embed-creator-pills).
   Betreiberseite  EINE Kachelreihe: eigene Community mit Logo, dahinter die
                   Creator-Fotos. Keine Textreihe.

   Die Interessen liegen in beiden Fällen hinter einem Button neben der Suche.

   Die Mechanik der Textreihe (Blätter-Pfeile, weiche Kanten, Mausrad) steht
   NICHT hier, sondern in assets/css/cod-subrow.css + assets/js/cod-subrow.js -
   dieselbe Stelle, die auch die zweite Reihe im Chat bedient. */

/* ── Leerzustand: noch keine Events ───────────────────────────────────────
   Steht anstelle von Kachelreihe, Filterleiste und Raster, wenn es kein
   einziges Event gibt. Vorher blendete sich der ganze Abschnitt aus - unter der
   Elementor-Überschrift klaffte dann eine Lücke, was nach einem Fehler aussah.

   Bewusst ruhig gehalten: Es ist keine Fehlermeldung, sondern der normale
   Anfangszustand einer jungen Community. Deshalb kein Rot, kein Warnzeichen,
   kein Rahmen - nur Symbol, Satz und Nachsatz, mittig in der gewohnten Karte. */
.cod-embed-events-inner .cod-embed-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 38px 20px 42px;
    color: var(--cod-color-text, #5b6a7d);
}

.cod-embed-events-inner .cod-embed-leer-symbol {
    display: block;
    margin-bottom: 4px;
    color: var(--cod-cta, #3598db);
    opacity: .55;
    line-height: 0;
}

.cod-embed-events-inner .cod-embed-leer-titel {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--cod-title-color, #1f4166);
    /* Umbruch an einer sinnvollen Stelle statt mitten im Satz. */
    text-wrap: balance;
}

.cod-embed-events-inner .cod-embed-leer-text {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.5;
    max-width: 42ch;
}

@media (max-width: 767px) {
    .cod-embed-events-inner .cod-embed-leer {
        padding: 28px 16px 32px;
    }
}

/* ── Community-Kachel ─────────────────────────────────────────────────────
   Der AKTIVE Zustand kommt bewusst NICHT von hier: Es ist derselbe wie bei den
   Creator-Kacheln (.cod-creator-item.active img -> gelber Rand #FFCD02, weiter
   oben in dieser Datei) samt der Rahmenbreiten je Breakpoint. Ein eigener
   blauer Rahmen war der erste Versuch - er stand neben dem gelben und sagte
   dasselbe in einer zweiten Sprache.

   Hier steht nur, was die Community-Kachel von einer Creator-Kachel
   unterscheidet: Sie zeigt ein Logo, kein Porträt. */
.cod-embed-events-inner .cod-community-item {
    cursor: pointer;
}

.cod-embed-events-inner .cod-community-item img {
    /* Ganzes Logo zeigen statt einen Ausschnitt: Die Kachel ist quadratisch,
       ein Community-Logo ist oft eine querformatige Wortmarke. Mit dem sonst
       üblichen cover blieb davon die Wortmitte übrig ("omr of" statt
       "Community of Dreams"). Bevorzugt wird ohnehin das quadratische App-Icon
       (cod_tenancy_brand_tile_image) - das hier fängt die Communities ab, die
       noch keins hinterlegt haben. */
    object-fit: contain;
    object-position: center;
    background: var(--cod-card-bg, #fff);
    padding: 6px;
}

/* Die Kacheln sind mit der Tastatur erreichbar (role="button", tabindex) - dann
   muss der Fokus auch zu sehen sein. */
.cod-embed-events-inner .cod-community-item:focus-visible {
    outline: 3px solid var(--cod-cta, #3598db);
    outline-offset: 3px;
}

/* ── Creator als Textreihe (nur Hauptplattform) ───────────────────────────
   Sitzt zwischen Filterleiste und erstem Event. Der Abstand nach oben ist
   größer als nach unten: Die Reihe gehört zur Auswahl, nicht zu den
   Ergebnissen. */
/* Die Creator-Reihe steht als erstes in der Karte, noch vor dem Suchfeld -
   sie gehört zur Auswahl. Deshalb kein Abstand nach oben, nur nach unten. */
.cod-embed-events-inner .cod-embed-creator-pills-wrap {
    margin-bottom: 14px;
}

/* Beschriftung über der Reihe. Ohne sie sehen die Pillen aus wie Themen -
   zusammen mit den Profilbildern ist klar, dass hier Menschen stehen.
   Sie steht dicht über den Pillen: beide gehören zusammen, der grössere
   Abstand kommt erst darunter zur Suchzeile. */
.cod-embed-events-inner .cod-embed-creator-pills-label {
    display: block;
    margin-bottom: 7px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cod-color-muted, #657085);
    /* Eine Zeile, sonst schiebt eine lange Community den Rest nach unten. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cod-embed-events-inner .cod-embed-creator-pills {
    padding: 2px 0;
    /* Alle Pillen gleich hoch. Ohne das war "Alle anzeigen" 36 px und die Pille
       mit Profilbild 41 px - nebeneinander sofort sichtbar, weil das Bild die
       Pille um sich herum aufzieht. */
    align-items: stretch;
}

/* Profilbild in der Pille. Es macht die Reihe auf einen Blick als Menschen
   lesbar, ohne sie zur Bilderreihe zu machen.

   FORM: kein Kreis, sondern das abgerundete Quadrat des Creator-Abzeichens auf
   der Event-Karte (--cod-badge-radius: 16px bei 96 px Kante, also gut ein
   Sechstel). Auf 36 px übertragen sind das 10 px - dieselbe Anmutung, nur
   kleiner. Ein Kreis wäre eine zweite Form für dasselbe Gesicht gewesen.

   HÖHE: 36 px in einer 40 px hohen Pille. Ein bündiges 40er-Bild ginge nur mit
   Kreisform auf; mit eckiger Form ragte es über die Pillenrundung hinaus. Das
   negative Aussenmass hält die Pillenhöhe unverändert. */
/* Das Bild sitzt BÜNDIG in der linken Pillenecke - kein eigener Rahmen, keine
   Lücke. Rechnung: Die Pille ist aussen 41 px hoch (8 px Innenabstand + 19 px
   Zeile + 8 px + 2 × 1 px Rahmen), innen also 39 px. Genau so hoch ist das Bild.
   Sein Radius ist der Pillenradius minus Rahmen (8 − 1 = 7 px), damit es die
   Ecke exakt ausfüllt statt einen hellen Zwickel stehen zu lassen.
   Den gelben Rahmen trägt die Pille selbst - am bündigen Bild wäre er ein
   zweiter Strich unmittelbar daneben. */
.cod-embed-events-inner .cod-creator-pill-img {
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    border-radius: 7px 0 0 7px;
    object-fit: cover;
    object-position: center top;
    margin: -8px 0 -8px 0;
    background: var(--cod-soft, #eef4fb);
}

/* Pille mit Bild: kein Innenabstand links, das Bild bildet selbst den Abschluss.
   overflow:hidden schneidet es an der Pillenrundung ab - ohne das stünden die
   Bildecken über den Rahmen hinaus.
   Die Klasse kommt vom Server statt aus :has() - das versteht Firefox erst
   ab 121, und die Pille sähe dort ohne Grund anders aus. */
.cod-embed-events-inner .cod-creator-pill.has-img {
    padding-left: 0;
    overflow: hidden;
}

/* Die Reihe steckt in einem .cod-subrow-wrap, den das JS beim Anmelden umlegt.
   KEIN Innenabstand: Er hätte die Reihe um 22 px eingerückt, während
   Beschriftung, Suchfeld und Ergebniszeile bündig am linken Kartenrand stehen.

   STAND 17.08.2026: Der Rahmen ist der Positions-Anker der Blätter-Pfeile, die
   ÜBER der ersten und letzten Pille liegen - klein, am äusseren Rand, und der
   Text darunter läuft in einen weichen Verlauf aus (cod-subrow.css). Zwischen
   dem 12. und dem 17.08.2026 stand hier die Gegenbehauptung, weil der Rahmen in
   dieser Zeit ein Flex-Container mit drei Spalten war; das ist zurückgenommen.
   Die Zeile hier bleibt als Absicherung stehen, falls die gemeinsame Datei je
   einen Innenabstand mitbringt. */
.cod-embed-events-inner .cod-subrow-wrap {
    padding: 0;
}

.cod-embed-events-inner .cod-subrow-pill {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* Rand im Gelb der Creator-Marken (--cod-color-star): Die Reihe zeigt
       Menschen, und dieselbe Farbe umrandet auch ihr Abzeichen auf der
       Event-Karte und die aktive Kachel darüber. Gewählt kehrt sich das um -
       gelb gefüllt mit dunkler Schrift. */
    border: 1px solid var(--cod-color-star, #FFCD02);

    /* SONDERFALL Radius: Nicht die Pille gibt die Form vor, sondern das
       Profilbild darin. Es hat 6 px Radius (der Anteil des Creator-Abzeichens)
       und sitzt 2 px vom Pillenrand entfernt - also 6 + 2 = 8 px aussen. So
       läuft die Rundung des Bildes sauber in der Pille weiter, statt in einer
       999-px-Kapsel zu schwimmen. Ohne Bild bleibt es dieselbe Form, damit die
       Reihe nicht aus zwei Bauarten besteht. */
    border-radius: 8px;
    background: #fff;
    color: var(--cod-title-color, #1f4166);
    padding: 8px 15px;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    /* Mindesthöhe = Höhe der Pille mit Profilbild (39 px Bild + 2 × 1 px
       Rahmen). So stehen bebilderte und reine Text-Pillen auf einer Linie,
       auch wenn eine Reihe gar kein Bild enthält. */
    min-height: 41px;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Trefferfläche auf 44 px bringen, ohne die Pille optisch aufzublasen. */
.cod-embed-events-inner .cod-subrow-pill::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    transform: translateY(-50%);
}

.cod-embed-events-inner .cod-subrow-pill:hover {
    border-color: var(--cod-color-star, #FFCD02);
}

/* Gewählte Pille: gelb gefüllt, dazu dunkle Schrift. Weiss auf Gelb wäre kaum
   zu lesen - das Gelb ist zu hell dafür. */
.cod-embed-events-inner .cod-subrow-pill.is-active {
    background: var(--cod-color-star, #FFCD02);
    border-color: var(--cod-color-star, #FFCD02);
    color: var(--cod-text, #2b2b2b);
}

.cod-embed-events-inner .cod-subrow-pill:focus-visible {
    outline: 2px solid var(--cod-color-star, #FFCD02);
    outline-offset: 2px;
}

/* Anzahl der Events hinter dem Namen. Gedämpft, damit der Name führt. */
.cod-embed-events-inner .cod-creator-pill-count {
    font-size: .8125rem;
    font-weight: 700;
    opacity: .62;
    font-variant-numeric: tabular-nums;
}

.cod-embed-events-inner .cod-subrow-pill.is-active .cod-creator-pill-count {
    opacity: .85;
}

/* ── Interessen-Button neben der Suche ────────────────────────────────────
   Gleiche Höhe und Form wie der Datum-Button daneben, aber zurückhaltender:
   Der Datum-Button ist die Hauptaktion der Leiste. Erst mit einer Auswahl
   färbt sich der Interessen-Button ein. */
.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn {
    height: var(--cod-field-h);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--cod-cta, #3598db);
    border-radius: 10px;
    box-shadow: var(--cod-shadow-input);
    padding: 0 14px;
    background: #fff;
    color: var(--cod-cta, #3598db);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn:hover,
.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn[aria-expanded="true"] {
    background: var(--cod-soft, #eef4fb);
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn.is-active {
    background: var(--cod-cta, #3598db);
    color: #fff;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn:focus-visible {
    outline: 2px solid var(--cod-cta, #3598db);
    outline-offset: 2px;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn .ico-heart {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn .lbl {
    font-size: 0.9375rem;
}

/* Zähler: wie viele Themen gewählt sind. */
.cod-embed-events-inner .cod-interest-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--cod-cta, #3598db);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cod-embed-events-inner .cod-interest-btn.is-active .cod-interest-count {
    background: #fff;
    color: var(--cod-cta, #3598db);
}

.cod-embed-events-inner .cod-interest-count[hidden] {
    display: none;
}

/* ── Interessen-Popup ─────────────────────────────────────────────────────
   Bewusst ein echtes Popup und kein aufklappendes Feld: Bei vielen Themen
   braucht die Auswahl Platz, und auf dem Telefon wäre ein Aufklapp-Feld
   sofort am unteren Rand. */
.cod-embed-events-inner .cod-embed-interest-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(20, 34, 51, .55);
}

.cod-embed-events-inner .cod-embed-interest-modal[hidden] {
    display: none;
}

.cod-embed-events-inner .cod-embed-interest-dialog {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* vh zuerst als Rückfall, dvh nur wo es verstanden wird (Safari 15). */
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 18px;
    box-shadow: 0 24px 60px -20px rgba(20, 34, 51, .45);
}

.cod-embed-events-inner .cod-embed-interest-title {
    margin: 0 46px 4px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cod-title-color, #1f4166);
}

.cod-embed-events-inner .cod-embed-interest-hint {
    margin: 0 0 14px;
    font-size: .9375rem;
    color: var(--cod-color-text, #5b6a7d);
}

/* Die Themen im Popup umbrechen - anders als die Creator-Textreihe, die in
   einer Zeile blättert. */
.cod-embed-events-inner .cod-embed-interest-dialog .cod-embed-tagbar {
    margin-top: 0;
}

/* ── Themen nach Überkategorien ───────────────────────────────────────────
   Dieselbe Ordnung wie im Onboarding und im Profil (cod_interests_groups) -
   wer sie dort einmal gesehen hat, findet sich hier sofort zurecht. Gezeigt
   werden ALLE Themen der Plattform, nicht nur die gerade belegten; sonst wäre
   der Filter nur ein Spiegel des Bestands. */
.cod-embed-events-inner .cod-embed-interest-groups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cod-embed-events-inner .cod-embed-interest-group {
    border: 1px solid var(--cod-color-border, rgba(31, 65, 102, .16));
    border-radius: 12px;
    background: var(--cod-card-bg, #fff);
    overflow: hidden;
}

/* Kopfzeile: links der Pfeil (auf/zu), rechts daneben die Auswahl der ganzen
   Gruppe. Zwei getrennte Flächen, weil beide Klicks etwas anderes bedeuten. */
.cod-embed-events-inner .cod-embed-interest-group-row {
    display: flex;
    align-items: stretch;
}

.cod-embed-events-inner .cod-embed-interest-group-toggle {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    color: var(--cod-title-color, #1f4166);
}

.cod-embed-events-inner .cod-embed-interest-group-head {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    padding: 12px 14px 12px 0;
    min-height: 44px;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--cod-title-color, #1f4166);
    line-height: 1.2;
}

.cod-embed-events-inner .cod-embed-interest-group-head:focus-visible,
.cod-embed-events-inner .cod-embed-interest-group-toggle:focus-visible {
    outline: 2px solid var(--cod-cta, #3598db);
    outline-offset: -2px;
}

/* Kästchen der Überkategorie - leer, halb (Strich) oder voll (Haken). Dieselbe
   Aussage wie im Onboarding: Was ist von dieser Gruppe gewählt? */
.cod-embed-events-inner .cod-embed-interest-group-check {
    flex: 0 0 auto;
    position: relative;
    width: 18px;
    height: 18px;
    border: 2px solid var(--cod-cta, #3598db);
    border-radius: 5px;
    background: #fff;
}

.cod-embed-events-inner .cod-embed-interest-group-check.is-checked,
.cod-embed-events-inner .cod-embed-interest-group-check.is-mixed {
    background: var(--cod-cta, #3598db);
}

/* Haken: zwei Kanten eines gedrehten Rechtecks. */
.cod-embed-events-inner .cod-embed-interest-group-check.is-checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

/* Teilweise gewählt: ein waagerechter Strich. */
.cod-embed-events-inner .cod-embed-interest-group-check.is-mixed::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 10px;
    height: 2px;
    background: #fff;
}

/* Pfeil als reine CSS-Form: kein Zeichen, das je nach Schrift anders sitzt. */
.cod-embed-events-inner .cod-embed-interest-group-arrow {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
    opacity: .55;
}

.cod-embed-events-inner .cod-embed-interest-group.is-open .cod-embed-interest-group-arrow {
    transform: rotate(45deg);
}

.cod-embed-events-inner .cod-embed-interest-group-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Zahl im Kopf: wie viele Themen dieser Gruppe gerade wirklich ein Event haben. */
.cod-embed-events-inner .cod-embed-interest-group-count {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    color: var(--cod-color-muted, #657085);
    background: var(--cod-soft, #eef4fb);
    border-radius: 999px;
    padding: 2px 9px;
    font-variant-numeric: tabular-nums;
}

.cod-embed-events-inner .cod-embed-interest-group-body {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
}

.cod-embed-events-inner .cod-embed-interest-group.is-open .cod-embed-interest-group-body {
    display: flex;
}

/* Thema ohne Event: gedämpft, aber weiter anklickbar. Verstecken würde den
   Eindruck erwecken, es gäbe das Thema gar nicht. */
.cod-embed-events-inner .cec-interest-chip.is-empty {
    opacity: .45;
}

.cod-embed-events-inner .cec-interest-chip.is-empty:hover {
    opacity: .7;
}

/* Trefferzahl hinter dem Thema. */
.cod-embed-events-inner .cod-interest-chip-count {
    margin-left: 6px;
    font-size: .75rem;
    font-weight: 700;
    opacity: .62;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .cod-embed-events-inner .cod-embed-interest-group-arrow {
        transition: none;
    }
}

.cod-embed-events-inner .cod-embed-interest-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--cod-color-border, rgba(31, 65, 102, .14));
}

/* Schließen-X: der Plattform-Standard (cod_modal_close_button_html). Die
   Regeln stehen hier, weil das Fragment aus der Zentrale kommt und die
   Community-Seite deren Inline-Style nicht mitlädt. */
.cod-embed-events-inner .cod-modal-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: var(--cod-modal-close-bg, rgba(47, 141, 228, .12));
    color: var(--cod-color-heading, #1f4d86);
    width: var(--cod-modal-close-size, 42px);
    height: var(--cod-modal-close-size, 42px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    line-height: 0;
    box-shadow: none;
}

.cod-embed-events-inner .cod-modal-close-x:hover {
    background: var(--cod-modal-close-bg-hover, rgba(47, 141, 228, .22));
}

.cod-embed-events-inner .cod-modal-close-x svg {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .cod-embed-events-inner .cod-subrow-pill,
    .cod-embed-events-inner .cod-community-item,
    .cod-embed-events-inner .cod-community-item img,
    .cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn {
        transition: none;
    }
}

/* Mobil: Der Interessen-Button zeigt nur das Herz und den Zähler - drei
   beschriftete Knöpfe passen neben dem Suchfeld nicht in eine Zeile. */
@media (max-width: 767px) {
    /* "bei <Community>" entfällt: Die ganze Zeile brach sonst zweizeilig um und
       schob die Pillen nach unten. Welche Community gemeint ist, sagt die
       Kachel darüber. */
    .cod-embed-events-inner .cod-embed-creator-pills-label-at {
        display: none;
    }

    .cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn .lbl {
        display: none;
    }

    .cod-embed-events-inner .cod-embed-filter-wrap .cod-interest-btn {
        padding: 0 12px;
    }

    .cod-embed-events-inner .cod-embed-interest-dialog {
        padding: 18px 16px 14px;
        max-height: 86vh;
        max-height: 86dvh;
    }

    .cod-embed-events-inner .cod-embed-interest-actions {
        justify-content: stretch;
    }

    .cod-embed-events-inner .cod-embed-interest-actions > * {
        flex: 1;
    }
}

/* Kartenbreite auf dem Handy war bis 22.08.2026 an die Angebots-Karte gekoppelt
   (min(100%-12px, 100vw-88px), 302 px bei 390 px Schirm - Entscheidung
   11.08.2026, siehe die Erklärung bei der Knopfhöhe darunter). Auf Wunsch des
   Betreibers ist die Event-Karte seitdem eigens etwas breiter (100vw-64px statt
   -88px, 24 px mehr auf jeder Breite: 326 statt 302 px bei 390 px Schirm) -
   die Knopfschrift skaliert mit der Kartenbreite mit (Kartenskala = Breite/360)
   und weicht dadurch bewusst leicht von der Angebots-Karte ab. */
.cod-events-embed-grid > .cod-card,.cod-events-embed-wrap .cod-card{max-width:min(calc(100% - 12px), calc(100vw - 64px));margin-left:auto;margin-right:auto}

/* Knopfhoehe wie bei der Angebots-Karte. Gemessen auf 390 px: Event 41,4 px,
   Angebot 33,5 - bei identischer Schrift (13,42). Der Unterschied kam allein aus
   dem Aufbau: Der Event-Knopf traegt 14 px Polster oben und unten und keine
   Mindesthoehe, der Angebots-Knopf umgekehrt kein senkrechtes Polster und eine
   Mindesthoehe. Massstab ist das Angebot (Entscheidung 11.08.2026).
   ACHTUNG: 40 px skaliert liegt unter den 44 px Trefferflaeche der Regel - wer
   hier etwas aendert, prueft die Trefferflaeche mit. */
.cod-events-embed-wrap .cod-cta,.cod-events-embed-wrap .cod-popup-info-btn{padding:0 calc(12px * var(--cod-card-ui-scale, 1))!important;min-height:calc(40px * var(--cod-card-ui-scale, 1))!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}

/* Trefferflaeche 44 px auf Beruehrgeraeten. Die Knoepfe sind mit der Karte
   skaliert nur 33,5 px hoch - optisch gewollt, fuer den Finger zu wenig. Die
   Flaeche wird deshalb unsichtbar aufgeweitet, das Aussehen bleibt unveraendert.
   Uebernommen aus der Gewinnspiel-Karte, samt der dort teuer gelernten Regel:
   z-index gehoert ans ELEMENT, nicht nur ans Pseudo-Element - sonst bleibt die
   aufgeweitete Flaeche unter dem Nachbarn, der im Textfluss danach kommt. */
@media (pointer: coarse) {
  .cod-events-embed-wrap .cod-cta,
  .cod-events-embed-wrap .cod-popup-info-btn{position:relative;z-index:2}
  .cod-events-embed-wrap .cod-cta::after,
  .cod-events-embed-wrap .cod-popup-info-btn::after{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:100%;height:100%;min-height:44px;z-index:2}
}

/* ================================================================
   EVENT-KNOEPFE = ANGEBOTS-KNOEPFE (11.08.2026, ausdruecklich gewuenscht)
   "Genau gleich bis auf den Text." Gemessen waren sieben Unterschiede:
   Radius 12 gegen 8, kein Rand gegen 2 px, Hintergrund #2B86C5 gegen #3598DB,
   der zweite Knopf ein pink-blauer Verlauf statt weiss mit blauem Rand,
   Schriftgewicht 700 gegen 400, Polster 10,07 gegen 12 px, dazu ein Schatten.
   Es genuegt NICHT, die Werte abzuschreiben - sie muessen an denselben ROLLEN
   haengen, sonst laufen sie beim naechsten Dashboard-Regler wieder auseinander.
   Button 1 = --cod-btn-angebot-*, Button 2 = --cod-btn-event-*; diese Zuordnung
   gilt plattformweit, auch der zweite ANGEBOTS-Knopf nutzt die event-Rollen.
   ================================================================ */
.cod-events-embed-wrap .cod-actions .cod-cta,
.cod-events-embed-wrap .cod-actions .cod-popup-info-btn{
    gap: var(--cod-angebot-luft, 8px) !important;
    /* Rueckfall 12 px, nicht 16: Am Angebot ist --cod-angebot-rand auf 12 gesetzt,
       im Event-Rahmen gibt es die Variable nicht - mit 16 als Rueckfall waren die
       Knoepfe dort breiter gepolstert als nebenan. */
    /* 12 px FEST, nicht skaliert: Am Angebot steht --cod-angebot-rand auf 12 und
       wird dort ebenfalls nicht mit der Karte multipliziert. "Genau gleich"
       heisst hier also fest, auch wenn das dem sonstigen Skalieren widerspricht. */
    padding: 0 var(--cod-angebot-rand, 12px) !important;
    background: var(--cod-btn-angebot-bg, var(--cod-cta, #51B36F)) !important;
    background-image: none !important;
    color: var(--cod-btn-angebot-color, #fff) !important;
    border: var(--cod-btn-angebot-border-width, 0px) solid var(--cod-btn-angebot-border-color, transparent) !important;
    border-radius: var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 6px)) !important;
    font-family: var(--cod-font-btn-angebot, inherit) !important;
    font-size: max(var(--cod-card-min-font, 13px), calc(var(--cod-font-btn-angebot-size, 14px) * var(--cod-card-ui-scale, 1))) !important;
    font-weight: var(--cod-font-btn-angebot-weight, 700) !important;
    box-shadow: none !important;
}
.cod-events-embed-wrap .cod-actions .cod-cta.secondary,
.cod-events-embed-wrap .cod-actions .cod-cta.cod-share{
    background: var(--cod-btn-event-bg, var(--cod-cta2, #2b86c5)) !important;
    background-image: none !important;
    color: var(--cod-btn-event-color, #fff) !important;
    border: var(--cod-btn-event-border-width, 0px) solid var(--cod-btn-event-border-color, transparent) !important;
    border-radius: var(--cod-btn-event-border-radius, var(--cod-button-radius, 6px)) !important;
}
.cod-events-embed-wrap .cod-actions .cod-cta.secondary:hover,
.cod-events-embed-wrap .cod-actions .cod-cta.cod-share:hover{
    color: var(--cod-btn-event-hover-color, #fff) !important;
    background: var(--cod-btn-event-hover-bg, var(--cod-btn-event-bg, var(--cod-cta2, #2b86c5))) !important;
    border-color: var(--cod-btn-event-hover-border-color, var(--cod-btn-event-border-color, transparent)) !important;
}

/* Vorschaubild im Angebots-Schritt ungeschnitten (15.08.2026). Gemessen
   64x64 mit object-fit:cover - bei einem Hochformat fallen rund 49 %
   weg. Gedeckelt wird die Hoehe, die Breite folgt dem Format. */
.cod-event-popup-body .cec-offer-item img{
    width:auto !important;
    height:auto !important;
    max-height:64px !important;
    max-width:64px !important;
    object-fit:contain !important;
}

/* ── Goodie-Kachel: der Melden-Knopf stand ganz vorne ─────────────────────
   Die Kachel ist ein Flex-Container mit order-Werten (Titel 1, Menge 2,
   Preis 4). Der Melden-Knopf hat keinen - und ein Element ohne order
   bekommt 0, landet also VOR allem anderen. Gemessen am 15.08.2026 stand
   er links neben dem Titel und drueckte ihn auf drei Zeilen; im Quelltext
   sieht die Kachel dabei richtig aus, denn dort steht er zuletzt.
   Dieselbe Klasse Fehler wie bei den Extras, nur mit order statt flex.

   Trefferflaeche 22 px gemessen - er ist anklickbar und braucht deshalb
   44, auch wenn er nur eine Nebenhandlung ist. */
.cod-event-popup-body .cec-goodie-choice > img,
.cod-event-popup-body .cec-goodie-choice > picture{ order:0 !important; }
.cod-event-popup-body .cec-goodie-choice > div{ order:1 !important; }
.cod-event-popup-body .cec-goodie-choice .cec-ticket-price{ order:4 !important; }
.cod-event-popup-body .cec-goodie-choice .cec-goodie-report{
    order:6 !important;
    min-height:44px !important;
    display:inline-flex !important;
    align-items:center !important;
}

/* Mengenwahl, Mitgliederpreis und Normalpreis nutzen denselben Abstand. */
.cod-event-popup-body .cec-ticket-choice .cec-qty{
    flex:0 0 auto !important;
    margin-left:0 !important;
}
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price{
    flex:0 0 auto !important;
    min-width:0 !important;
    margin-left:0 !important;
    text-align:left !important;
}
/* Die Preisspanne ist ein Eingabefeld und keine Zahl - sie braucht die
   Mindestbreite nicht und wuerde davon nur gestaucht. */
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price-range{
    min-width:0 !important;
    text-align:left !important;
}

/* PREIS-BESCHRIFTUNG (29.08.2026, Text am selben Tag nach Prüfung durch
   rechtstexte-auditor von "Normalpreis" auf "Preis ohne Mitgliedschaft"
   geändert): Zwilling von frontend.css - die Zahl bekommt ein <small>, aber
   NUR wenn es einen Mitgliedspreis daneben gibt (siehe Markup).
   :not(.cec-ticket-price-range) grenzt bewusst die Preisspanne aus, die
   ihre eigene Beschriftung schon im <label> trägt. */
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price:not(.cec-ticket-price-range){
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    line-height:1.2 !important;
}
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price:not(.cec-ticket-price-range) small{
    font-size:11.5px !important;
    font-weight:400 !important;
    color:#8492a6 !important;
    white-space:normal !important;
    max-width:9em !important;
}

/* PREIS OHNE MITGLIEDSCHAFT ALS EIGENE KARTE (30.08.2026): Zwilling von
   frontend.css - Begründung dort. Nur die Vergleichs-Situation (Ticket MIT
   Mitgliedspreis daneben) bekommt die Karte, erkennbar an
   cec-ticket-price-mitvergleich im Markup. */
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price.cec-ticket-price-mitvergleich{
    gap:2px !important;
    padding:8px 12px !important;
    min-height:44px !important;
    justify-content:center !important;
    border:1px solid var(--cod-color-border, #dee2e6) !important;
    border-radius:var(--cod-btn-angebot-border-radius, var(--cod-button-radius, 8px)) !important;
    background:var(--cod-color-surface-2, #f8f9fa) !important;
    color:var(--cod-color-heading, #1f4d86) !important;
}
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price-betrag{
    font-weight:700 !important;
    font-size:max(15px, 1em) !important;
    line-height:1.2 !important;
}
.cod-event-popup-body .cec-ticket-choice .cec-ticket-price.cec-ticket-price-mitvergleich small{
    color:var(--cod-color-muted, #657085) !important;
}

/* ── Galerie- und Video-Knopf: Overlay auf dem Bild ───────────────────────
   Vom Betreiber gemeldet (15.08.2026): das Aussehen stoert. Gemessen war
   die Ursache dieselbe wie beim Veranstalter-Link - die Regeln
   .cec-flow-media-btn und .cec-flow-media-badges gibt es NUR in der
   Zentrale. Auf der Community-Seite fehlten damit beide Haelften:
   ohne position:absolute rutschten die Knoepfe aus dem Bild heraus und
   standen neben ihm, und ohne eigene Optik gestaltete das Theme-reset
   sie als Ghost-Button (weiss mit farbigem Rahmen).

   Gedacht waren sie immer als dunkle Pillen UNTEN RECHTS IM Bild - das
   ist der Ort, an dem eine Galerie-Angabe niemanden stoert und trotzdem
   gefunden wird.

   AM 15.08.2026 AUSDRUECKLICH SO BESTAETIGT ("32 im bild"), obwohl sie
   bei einem randvollen Plakat einen Streifen verdecken. Die Alternative
   waere der freie Bereich rechts neben einem Hochformat gewesen - der
   fehlt bei einem Querformat aber, und dann muessten sie doch wieder ins
   Bild. Ein Ort, der immer funktioniert, ist besser als zwei, zwischen
   denen das Format entscheidet. Wer hier aufraeumt, raeumt eine
   Entscheidung weg. Dafuer braucht der Bildkasten einen Bezugsrahmen; er
   hat seit dem Umbau auf "Bild nach Hoehe" keinen mehr, weil die feste
   Groesse entfallen ist.

   Die Trefferflaeche ist hingeschrieben statt aus Polster errechnet, und
   die Pille bleibt rund: Sie liegt AUF einem Bild und braucht eine Form,
   die sich davon abhebt - der Radius 8 der Formularknoepfe wuerde dort
   wie ein angeschnittener Kasten wirken. */
.cod-event-popup-body .cec-flow-image{ position:relative !important; }
.cod-event-popup-body .cec-flow-media-badges{
    position:absolute !important;
    right:10px !important;
    bottom:10px !important;
    left:auto !important;
    top:auto !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-end !important;
    gap:8px !important;
    z-index:3 !important;
    margin:0 !important;
}
.cod-event-popup-body .cec-flow-media-btn{
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    /* 44 statt 36: Sie liegen auf einem Bild und werden auf dem Handy
       angetippt - gemessen waren es 36 px (15.08.2026). */
    min-height:44px !important;
    padding:0 14px !important;
    border:0 !important;
    border-radius:999px !important;
    /* Unser Blau statt Schwarz (15.08.2026, Wunsch des Betreibers). Ueber die
       Knopfrolle, nicht als feste Farbe: Sie ist je Community einstellbar.
       Schriftfarbe aus DERSELBEN Rolle - sie heisst -color, nicht -fg. */
    background:var(--cod-btn-angebot-bg, #3598DB) !important;
    color:var(--cod-btn-angebot-color, #fff) !important;
    font-size:13px !important;
    font-weight:400 !important;
    line-height:1 !important;
    cursor:pointer !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
}
.cod-event-popup-body .cec-flow-media-btn:hover,
.cod-event-popup-body .cec-flow-media-btn:focus-visible{
    background:var(--cod-btn-angebot-hover-bg, #2C7FBA) !important;
}


/* ── Veranstalter-Zeile und Frage-Knopf (15.08.2026) ──────────────────────
   Zwilling zu frontend.css der Zentrale - immer gemeinsam aendern.

   HOVER: Der Name ist ein <button>, und das Theme der Community-Seite faerbt
   jeden Button beim Zeigen dunkelrot ein - gemeldet als "beim User ist ein
   Hover Farbe hinterlegt". Der Name soll wie ein Link wirken.

   FRAGE-KNOPF: fuehrt in den 1:1-Chat mit dem Veranstalter und nimmt einen
   Entwurfstext mit, der die Veranstaltung nennt. */
.cod-event-popup-body .cod-anbieter-link,
.cod-event-popup-body .cod-anbieter-link:hover,
.cod-event-popup-body .cod-anbieter-link:focus,
.cod-event-popup-body .cod-anbieter-link:focus-visible,
.cod-event-popup-body .cod-anbieter-link:active{
    background:none !important;
    background-color:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    padding:0 !important;
    color:var(--cod-link-color, #2C7FBA) !important;
    font:inherit !important;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px;
}
.cod-event-popup-body .cod-anbieter-link:hover,
.cod-event-popup-body .cod-anbieter-link:focus-visible{
    text-decoration:none !important;
}
.cod-event-popup-body .cec-flow-veranstalter-frage{
    margin:12px 0 0 !important;
}
.cod-event-popup-body .cec-flow-frage-btn{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    /* Die Klasse klasse_button_chat bringt eigenes Aussehen mit - gemessen
       Gewicht 600, waehrend der Nachbarknopf "Schliessen" auf 400 steht
       (15.08.2026). Sie ist noetig, damit der delegierte Klick-Handler
       greift; ihr Aussehen wird hier zurueckgenommen, damit der Knopf zu
       seinen Nachbarn passt. */
    font-weight:400 !important;
    /* line-height fest: Ohne sie ergaben Schrift plus Symbol 44,5 px - der
       Nachbarknopf steht auf exakt 44. Eine halbe Pixelhoehe sieht niemand,
       aber sie zeigt, dass die Hoehe sich aus dem Inhalt ERGIBT statt gesetzt
       zu sein; die naechste abweichende Betreiber-Schriftgroesse verschiebt
       sie dann weiter. */
    line-height:1 !important;
    /* Trefferflaeche hingeschrieben statt aus Schrift plus Polster gerechnet. */
    min-height:44px !important;
}

/* ── Community Creation (29.08.2026) ──────────────────────────────────────
   Nur sichtbar, wo der Reiter dahinter auch existiert. Diese Klasse setzt
   der Chat-Widget-Code (cod-embed/includes/widget-chat.php), wenn er den
   Reiter einbaut - läuft dieser Code nicht (z. B. Zentrale), bleibt der
   Absatz fest verborgen. Ein hidden-Attribut wäre gegen eine
   display:!important-Regel ohnehin wirkungslos. */
.cod-event-popup-body .cec-flow-cc{
    display:none !important;
    margin:12px 0 0 !important;
}
body.cod-cc-verfügbar .cod-event-popup-body .cec-flow-cc{
    display:block !important;
}
.cod-event-popup-body .cec-flow-cc-btn{
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    font-weight:400 !important;
    line-height:1 !important;
    min-height:44px !important;
}
.cod-event-popup-body .cec-flow-cc-text{
    display:block;
    margin:0 0 8px;
}
/* ── Community Creation: EINE einheitliche Kachel für jede Rolle und jede
   Aufgabe, siehe frontend.css für die volle Begründung. ── */
.cod-event-popup-body .cec-flow-cc-wer{
    margin:0 0 10px;
    color:var(--cod-color-muted, #657085);
    font-size:13px;
    line-height:1.5;
}
.cod-event-popup-body .cec-flow-cc-kachel{
    display:flex !important;
    align-items:center;
    gap:12px;
    border:1px solid var(--cod-color-border, #dce7f3);
    border-radius:10px;
    padding:10px 12px;
    margin:0 0 8px;
}
.cod-event-popup-body .cec-flow-cc-kachel-bild{
    flex:0 0 auto;
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    background:var(--cod-color-surface-muted, #f3f7fb);
}
.cod-event-popup-body .cec-flow-cc-kachel-bild--leer{
    display:block;
    border:1px solid var(--cod-color-border, #dce7f3);
}
.cod-event-popup-body .cec-flow-cc-kachel-info{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.cod-event-popup-body .cec-flow-cc-kachel-name{
    font-weight:700;
    color:var(--cod-color-heading, #1f4d86);
}
.cod-event-popup-body .cec-flow-cc-kachel-sub{
    color:var(--cod-color-muted, #657085);
    font-size:12.5px;
}
.cod-event-popup-body .cec-flow-cc-eintrag-info{
    margin:-4px 0 8px;
    padding-left:60px;
    color:var(--cod-color-muted, #657085);
    font-size:13px;
    line-height:1.45;
}
.cod-event-popup-body .cec-flow-cc-team-titel{
    margin:14px 0 8px;
    font-size:15px;
    font-weight:700;
    color:var(--cod-color-heading, #1f4d86);
}
/* Zweite Fassung (30.08.2026, Zwilling von frontend.css, Begründung dort):
   dieselben Masse wie .cec-flow-cc-kachel statt einer nackten Zeile. */
.cod-event-popup-body .cod-anbieter-zeile-mit-bild{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    border:1px solid var(--cod-color-border, #dce7f3) !important;
    border-radius:10px !important;
    padding:10px 12px !important;
    margin:0 0 8px !important;
}
.cod-event-popup-body .cod-anbieter-zeile-bild{
    flex:0 0 auto !important;
    width:48px !important;
    height:48px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    background:var(--cod-color-surface-muted, #f3f7fb) !important;
}
.cod-event-popup-body .cod-anbieter-zeile-bild--leer{
    display:block !important;
    border:1px solid var(--cod-color-border, #dce7f3) !important;
}
.cod-event-popup-body .cod-anbieter-zeile-text{
    min-width:0;
}
.cod-event-popup-body .cod-anbieter-zeile-text p{
    margin:0;
}

/* ── Reiter über dem Ansprechpartner-Bereich (30.08.2026, Nutzerwunsch) ────
   Zwilling von frontend.css - DRITTE FASSUNG: Der Nutzer wollte kein
   drittes Design aus drei freischwebenden Knöpfen, sondern EIN
   Reiter-Design - und genau das gibt es im selben Popup schon, direkt
   darüber: die Schritt-Navigation "Infos/Ticket" (.cec-flow-tabs). Diese
   Reiter übernehmen dieselbe Bauart: eine gemeinsame Grundlinie, oben
   abgerundete Kacheln, die AUF der Linie sitzen, aktiv = helle Fläche +
   farbiger Unterstrich + fette Schrift, inaktiv = gedeckte Fläche +
   gedämpfte Schrift. Eigene Klassen statt .cec-flow-tabs button, weil das
   dort auf das Tag "button" zielt - unsere Reiter sind aus rechtlichen
   Gründen <label>-Elemente (siehe unten). !important wie der Rest dieser
   Datei gegen Elementor-Betreiberregeln.

   OHNE JAVASCRIPT (Bedingung des rechtstexte-auditor): Die Umschaltung
   läuft über drei versteckte Radiobuttons (.cec-org-radio) plus
   <label for="...">.

   ZWEI FEHLER VOM ERSTEN ANLAUF HIER KORRIGIERT (Fund des debug-agent, live
   reproduziert):
   1) Die erste Fassung koppelte über :nth-of-type - das zählt aber nach
      ELEMENTTYP unter ALLEN Geschwistern, nicht nach Klasse. Die
      Anbieterzeile davor ist ebenfalls ein <div> und verschob die Zählung
      um eins, sobald sie existierte (nicht immer der Fall). Gepaart wird
      deshalb über Attribute, die es ohnehin schon gibt: die ID-Vorsilbe des
      Radios gegen data-cec-org-panel - unabhängig von Geschwisterzahl und
      Reihenfolge.
   2) .cod-event-popup-body ist der Rahmen NUR des Haupt-Event-Popups.
      Dasselbe Popup-HTML wird auch im Marketing-Kit
      (widget-marketing-kit.php, .cod-mk-modal-box) und in der
      Affiliate-Vorschau (widget-afflink.php, .cod-ag-modal-box) eingesetzt
      - dort griff keine einzige dieser Regeln. .cec-booking-flow kommt mit
      dem gelieferten HTML selbst mit, unabhängig vom Rahmen - deshalb
      zusätzlich als zweiter Anker.
   3) position:absolute an den Radios bezog sich mangels eines positionierten
      Vorfahren auf ein Element weit außerhalb - der Browser scrollte beim
      Fokussieren eines Radios den ganzen Popup-Body aus dem sichtbaren
      Bereich (gemessen: -1352px statt 110px Kopf-Position, das "weiße
      Feld" aus der Meldung). .cec-flow-organizer{position:relative} fängt
      das ab. */
.cod-event-popup-body .cec-flow-organizer,
.cec-booking-flow .cec-flow-organizer{
    /* Sicherheitsnetz aus der ersten Korrektur, siehe frontend.css - die
       Radios selbst brauchen ihn seit position:fixed nicht mehr, schadet
       aber nicht, ihn stehen zu lassen. */
    position:relative;
}
.cod-event-popup-body .cec-org-radio,
.cec-booking-flow .cec-org-radio{
    /* fixed statt absolute, siehe frontend.css für die volle Begründung:
       Auch sauber eingegrenzt verschob sich der Bildlauf beim Fokussieren
       eines Labels noch um bis zu ~20px. fixed mit top:0;left:0 sitzt immer
       an derselben Stelle des Sichtfensters - "ins Bild scrollen" ist dann
       ein Leerlauf. Geprüft: kein Vorfahre bis zum Sichtfenster trägt
       transform/filter/backdrop-filter. */
    position:fixed;
    top:0;
    left:0;
    opacity:0;
    width:1px;
    height:1px;
    overflow:hidden;
    /* Meldung 30.08.2026: "rechts ein zweiter Rahmen bei Hover", siehe
       frontend.css - explizit gegen ein natives Fokus-Rechteck dieses
       Feldes abgesichert. */
    outline:none !important;
}
.cod-event-popup-body .cec-org-tabs,
.cec-booking-flow .cec-org-tabs{
    display:flex !important;
    gap:6px;
    align-items:flex-end !important;
    /* Dieselbe Grundlinie wie unter "Infos/Ticket" - die Reiter sitzen
       sichtbar AUF ihr, statt frei zu schweben. */
    border-bottom:1px solid var(--cod-color-border, #dce7f3) !important;
    margin:14px 0 0 !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}
.cod-event-popup-body .cec-org-tab,
.cec-booking-flow .cec-org-tab{
    display:inline-flex !important;
    align-items:center !important;
    min-height:44px !important;
    padding:0 14px !important;
    background:var(--cod-color-surface-muted, #f3f7fb) !important;
    color:var(--cod-color-text-muted, #6b7c93) !important;
    border:1px solid var(--cod-color-border, #dce7f3) !important;
    border-bottom:2px solid transparent !important;
    border-radius:9px 9px 0 0 !important;
    font:inherit;
    font-size:13px;
    line-height:1.2;
    cursor:pointer;
    white-space:nowrap;
    flex:0 0 auto;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-creation-"]:checked ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-creation-"],
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-kontakt-"]:checked ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-kontakt-"],
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-veranstalter-"]:checked ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-veranstalter-"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-creation-"]:checked ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-creation-"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-kontakt-"]:checked ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-kontakt-"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-veranstalter-"]:checked ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-veranstalter-"]{
    background:var(--cod-color-surface, #fff) !important;
    /* Standard-Akzentblau statt --cec-purple (Nutzerwunsch 30.08.2026,
       dritte Runde) - dieselbe Variable wie bei "Infos/Ticket". */
    color:var(--cod-color-accent-blue, #2f8de4) !important;
    font-weight:700 !important;
    /* Rahmen auf ALLEN vier Seiten in derselben Farbe, siehe frontend.css -
       vorher stand nur der Unterstrich farbig, der Rest im blassen
       Standard-Grau ("halber Rahmen", Meldung vom 30.08.2026). */
    border-color:var(--cod-color-accent-blue, #2f8de4) !important;
}
/* KEIN eigener Hover für Touch (pointer:coarse bekommt ihn nicht) - genau
   die Begründung, mit der auch "Infos/Ticket" das ausschließt: sonst bleibt
   der zuletzt angetippte Reiter fälschlich hervorgehoben. Auf dem aktiven
   Reiter ist es ein Leerlauf (schon dieselbe Fläche), deshalb ohne :not(). */
@media (hover: hover) {
    .cod-event-popup-body .cec-org-tab:hover,
    .cec-booking-flow .cec-org-tab:hover{
        background:var(--cod-color-surface, #fff) !important;
    }
}
/* Derselbe Fokus-Fall wie beim Umschalten, siehe frontend.css - je Reiter
   einzeln über die ID-Vorsilbe gekoppelt, sonst leuchtete bei jedem Fokus
   irgendeines Radios die ganze Reihe auf. */
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-creation-"]:focus-visible ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-creation-"],
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-kontakt-"]:focus-visible ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-kontakt-"],
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-veranstalter-"]:focus-visible ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-veranstalter-"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-creation-"]:focus-visible ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-creation-"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-kontakt-"]:focus-visible ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-kontakt-"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-veranstalter-"]:focus-visible ~ .cec-org-tabs .cec-org-tab[for^="cec-org-r-veranstalter-"]{
    /* KEIN outline mehr, siehe frontend.css für die volle Begründung
       (Meldung 30.08.2026: "rechts ein zweiter Rahmen bei Hover/Fokus"). */
    background:var(--cod-color-surface, #fff) !important;
    border-color:var(--cod-color-accent-blue, #2f8de4) !important;
}
.cod-event-popup-body .cec-org-panel,
.cec-booking-flow .cec-org-panel{
    display:none !important;
    padding-top:14px;
}
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-creation-"]:checked ~ [data-cec-org-panel="creation"],
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-kontakt-"]:checked ~ [data-cec-org-panel="kontakt"],
.cod-event-popup-body .cec-org-radio[id^="cec-org-r-veranstalter-"]:checked ~ [data-cec-org-panel="veranstalter"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-creation-"]:checked ~ [data-cec-org-panel="creation"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-kontakt-"]:checked ~ [data-cec-org-panel="kontakt"],
.cec-booking-flow .cec-org-radio[id^="cec-org-r-veranstalter-"]:checked ~ [data-cec-org-panel="veranstalter"]{
    display:block !important;
}
.cod-event-popup-body .cec-flow-cc-leer{
    color:var(--cod-color-muted, #657085);
}


/* ── Hinweis auf externen Ticketverkauf (15.08.2026) ──────────────────────
   Er steht ueber der Fussleiste und muss GELESEN werden, bevor jemand auf
   "Tickets beim Veranstalter" klickt - deshalb abgesetzt statt als Kleingedrucktes.
   Farben aus den Tokens, damit er in jeder Community stimmt. */
.cod-event-popup-body .cec-flow-extern-hinweis{
    margin:0 0 12px !important;
    padding:12px 14px !important;
    border-radius:8px;
    background:var(--cod-surface-muted, #F7F9FD);
    border-left:3px solid var(--cod-btn-angebot-bg, #3598DB);
}
.cod-event-popup-body .cec-flow-extern-hinweis p{
    margin:0 !important;
    /* Untergrenze hingeschrieben: Der Satz traegt eine rechtliche Aussage und
       darf auf keiner Betreiber-Schriftgroesse unlesbar klein werden. */
    font-size:max(13px, .92em) !important;
    line-height:1.5;
    color:var(--cod-text, #1A1A1A);
}


/* ── Bedingung des Mitgliedspreises, sichtbar (29.08.2026) ────────────────
   Zwilling von frontend.css - Fund des rechtstexte-auditor: Die Bedingungen
   standen vorher nur im title-Attribut (auf Touch-Geräten nicht abrufbar).
   BEWUSST OHNE Kasten/Balken (30.08.2026, Wunsch des Betreibers: "bitte nicht
   so ein Design hier verwenden" zum farbigen Rand): schlichter Fliesstext wie
   die anderen kleinen Hinweise im selben Schritt (zB der Preisspannen-Text). */
.cod-event-popup-body .cec-ticket-mitgliedspreis-hinweis{
    margin:0 0 14px !important;
    /* Links/rechts genau wie .cec-ticket-choice-list (padding:0 20px 20px),
       damit der Text mit den Ticket-Kacheln in einer Flucht steht (30.08.2026,
       gemessen: Kachel bei x=421, Text ohne dieses Padding bei x=401 - 20px
       zu weit links, weil beide Blöcke DIRECT Geschwister im selben
       Elternelement sind und keins der beiden Padding vom Elternelement erbt). */
    padding:0 20px !important;
}
.cod-event-popup-body .cec-ticket-mitgliedspreis-hinweis p{
    margin:0 !important;
    font-size:max(13px, .92em) !important;
    line-height:1.5;
    color:var(--cod-color-muted, #657085);
}


/* ── Mitgliedspreis: Umschalter statt Preisschild (16.08.2026) ────────────
   Gemeldet als "klarer beschreiben und Design eindeutiger machen". Vorher
   klebten Preis und Label aneinander ("18 EURCommunity Member Preis"), und
   der Normalpreis daneben trug keine Beschriftung - ein Mitglied sah zwei
   Zahlen und musste raten, welche gilt.

   Drei Aenderungen, jede mit einem Grund: Der Betrag steht ALLEIN in seiner
   Zeile und traegt das Gewicht; die Erklaerung darunter sagt, wessen Preis
   das ist und dass er fuer ein Ticket gilt; und der AKTIVE Zustand ist
   deutlich abgesetzt, weil der Knopf eine Wahl trifft und nicht nur
   informiert. Ohne den letzten Punkt sieht ein gewaehlter Mitgliedspreis
   genauso aus wie ein nicht gewaehlter. */
.cod-event-popup-body .cec-member-price-button{
    display:flex !important;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    line-height:1.3 !important;
    text-align:left !important;
    padding:8px 12px !important;
    /* Trefferflaeche hingeschrieben statt aus Schrift plus Polster gerechnet. */
    min-height:44px !important;
    cursor:pointer;
}
.cod-event-popup-body .cec-member-price-betrag{
    font-weight:700 !important;
    /* Untergrenze: Der Betrag ist die wichtigste Zahl der Zeile und darf auf
       keiner Betreiber-Schriftgroesse unter die Lesbarkeit fallen. */
    font-size:max(15px, 1em) !important;
    line-height:1.2;
}
.cod-event-popup-body .cec-member-price-button small{
    font-size:max(11.5px, .72em) !important;
    line-height:1.35;
    opacity:.85;
}
.cod-event-popup-body .cec-member-price-hinweis{
    opacity:.75;
}
/* GEWÄHLT: kräftig gefüllt statt nur umrandet - der Unterschied muss aus
   einem Meter Abstand erkennbar sein, sonst weiss niemand, ob der Rabatt
   gerade zählt. KONTRAST NACHGESCHÄRFT (30.08.2026, Zwilling zu
   frontend.css): filter:brightness() dunkelt die Dashboard-Farbe nur ab,
   statt sie durch einen festen Wert zu ersetzen - gemessen rund 5,2:1
   für den weissen Text darauf, statt rund 3:1 vorher. */
.cod-event-popup-body .is-member-aktiv .cec-member-price-button{
    background:var(--cod-btn-angebot-bg, #3598DB) !important;
    color:var(--cod-btn-angebot-color, #fff) !important;
    border-color:var(--cod-btn-angebot-bg, #3598DB) !important;
    filter:brightness(.75) !important;
}
.cod-event-popup-body .is-member-aktiv .cec-member-price-button small{
    /* Volle Deckkraft statt vorher .92 - siehe Zwilling frontend.css. */
    opacity:1 !important;
}
/* Der Normalpreis daneben gilt fuer dieses Ticket dann nicht mehr - das sagt
   der Durchstrich schneller als jedes Wort. Nur wenn der Mitgliedspreis
   wirklich gewaehlt ist; sonst ist er der geltende Preis. */
.cod-event-popup-body .is-member-aktiv .cec-ticket-price{
    text-decoration:line-through !important;
    opacity:.55 !important;
}

/* ════════════ Video-Karussell im Buchungs-Popup (19.08.2026) ════════════
   VOM BETREIBER GEMELDET: "oje, das Video hat es jetzt hier ueber das Bild
   getan - Video oeffnet doch erst mit dem Klick auf den Button".

   Gemessen lag ein <video> mit 588x1045 px bei y=-662 quer ueber dem
   Titelbild, in
   div.cod-video-carousel-track > div.cod-video-popup > ... > video.
   Das Popup war dabei NICHT geoeffnet (kein .is-open) - es haette also
   unsichtbar sein muessen.

   URSACHE: Das Buchungs-Popup rendert das Video-Karussell absichtlich mit
   (der Container darf nicht display:none sein, sonst kann das darin
   verschachtelte, position:fixed gesetzte .cod-video-popup beim Oeffnen nicht
   erscheinen). Versteckt wird es allein per CSS - und dieses CSS steht in der
   frontend.css der Zentrale und im Stylesheet der Video-Engine. Beides sind
   Plugin-Teile der Zentrale; auf einer Community-Seite kommt das Markup an,
   das CSS nicht. Ohne die Regeln ist der Container in voller Groesse da und
   das Popup faellt auf die Vorgabe des Browsers zurueck: display:block,
   position:static. Genau das war zu sehen.

   Dieselbe Familie wie "was auf der Zentrale ein Plugin erledigt, fehlt auf
   Stufe B ersatzlos" - hier als Zwilling nachgezogen. Beim naechsten Mal an
   dieser Stelle also BEIDE Dateien pflegen. */
.cod-event-popup-body .cec-event-video-carousel{
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
}
.cod-event-popup-body .cec-event-video-carousel .cod-video-carousel,
.cod-event-popup-body .cec-event-video-carousel .cod-video-carousel-track{
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
}
.cod-event-popup-body .cec-event-video-carousel .cod-video-carousel-card,
.cod-event-popup-body .cec-event-video-carousel .cod-video-carousel-arrow{
    display:none !important;
}
/* Die Grundregeln des Engine-Popups. Ohne sie ist es statisch im Fluss - im
   0x0-Container waere es dann zwar weg, aber auch beim Oeffnen unsichtbar.
   Mit position:fixed bricht es aus dem Container aus, so wie vorgesehen. */
.cod-event-popup-body .cod-video-popup{
    display:none !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.78) !important;
    z-index:99999 !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px !important;
}
.cod-event-popup-body .cod-video-popup.is-open{
    display:flex !important;
}


/* ══ Navigationsleiste des Popups (19.08.2026) - Zwilling zu frontend.css ═══════════════════════════
   Aus zwei Reitern wurden bis zu fuenf: Infos, Ticket, Extras, Angebote,
   Goodies. Zwei Dinge muessen deshalb dazu.

   UMBRUCH STATT MEDIA-QUERY: Fuenf Punkte passen auf 360 px nicht in eine
   Zeile. Entschieden wird nach dem PLATZ, den die Leiste wirklich hat -
   auf einer Community-Seite kann das Popup in einer schmalen Spalte
   stehen, und dann sagt die Fensterbreite nichts. Waagerechtes Scrollen
   waere die Alternative gewesen; ein Punkt, den man erst herbeischieben
   muss, wird aber nicht gefunden.

   BESUCHT WIRD ANGEZEIGT, nicht nur der aktive Punkt: Der Weiter-Knopf
   fuehrt durch die noch offenen, und ohne Markierung ist nicht zu sehen,
   warum er wohin springt. */
.cod-event-popup-body .cec-flow-tabs{
    flex-wrap:wrap!important;
    row-gap:0!important;
}
.cod-event-popup-body .cec-flow-tabs button.is-done:not(.is-active){
    color:var(--cod-color-text-muted, #6b7c93);
}
.cod-event-popup-body .cec-flow-tabs button.is-done:not(.is-active)::after{
    content:" \2713";
    /* Der Haken sagt "gesehen", nicht "erledigt" - deshalb klein und blass. */
    font-size:.85em;
    opacity:.75;
}


/* ══ Die Reiter als Reiter erkennbar (19.08.2026) - Zwilling zu frontend.css ════════════════════════
   Gemeldet: "mach Info Ticket Angebot klarer dass es Reiter sind". Vorher
   waren es nackte Textknoepfe - nur der aktive trug einen Unterstrich, und
   die uebrigen sahen aus wie Fliesstext. Wer nicht weiss, dass man sie
   anklicken kann, klickt sie nicht an.

   GEARBEITET WIRD MIT DER VORHANDENEN FLAECHE, nicht mit einer neuen
   Komponente: Die Leiste bekommt eine Grundlinie ueber die volle Breite, die
   Reiter sitzen darauf. Der aktive traegt Flaeche UND Unterstrich, die
   uebrigen einen dezenten Rahmen - so ist auf einen Blick zu sehen, dass es
   mehrere gleichartige Schaltflaechen sind. Farben kommen ausschliesslich aus
   den Tokens des Betreibers.

   KEIN eigener Hover-Zustand fuer Touch: pointer:coarse bekommt ihn nicht,
   sonst bleibt der zuletzt angetippte Reiter faelschlich hervorgehoben. */
.cod-event-popup-body .cec-flow-tabs{
    gap:8px!important;
    align-items:flex-end!important;
}
.cod-event-popup-body .cec-flow-tabs button{
    padding:0 14px!important;
    border-radius:9px 9px 0 0!important;
    background:var(--cod-color-surface-muted, #f3f7fb);
    border:1px solid var(--cod-color-border, #dce7f3);
    border-bottom:2px solid transparent;
    line-height:1.2!important;
}
.cod-event-popup-body .cec-flow-tabs button.is-active{
    background:var(--cod-color-surface, #fff);
    border-color:var(--cod-color-border, #dce7f3);
    border-bottom-color:var(--cod-color-accent-blue, #2f8de4);
}
@media (hover:hover){
    .cod-event-popup-body .cec-flow-tabs button:not(.is-active):hover{
        background:var(--cod-color-surface, #fff);
    }
}


/* ══ Rubriken-Ueberschriften ruhiger (19.08.2026) - Zwilling zu frontend.css ════════════════════════
   Gemeldet: "die Ueberschrift zur Schrift ist mit zu heftig - bitte nicht
   unterstreichen und etwas kleiner machen". Sie standen in 21 px MIT
   Unterstreichung und wirkten damit lauter als der Titel des Popups.

   Eine Unterstreichung liest sich ausserdem wie ein Link - in einem Fenster,
   in dem daneben echte Links stehen, ist das eine falsche Faehrte. Getrennt
   wird jetzt ueber Groesse und Gewicht, wie ueberall sonst auf der Plattform. */
.cod-event-popup-body .cec-popup-section h3{
    font-size:18px!important;
    text-decoration:none!important;
    font-weight:600!important;
    margin:20px 0 6px!important;
    /* 23.08.2026, Zwilling zu frontend.css: unser Blau statt der #555 von
       weiter oben (Zeile 1933) - ohne diese Zeile gewinnt dort die Farbe,
       weil dieser Block sie bis jetzt gar nicht setzte. */
    color:var(--cod-color-heading, #1f4166)!important;
}


/* ══ Der Mitgliedspreis-Kasten auf Feldhoehe (20.08.2026) ════════════════
   Gemeldet: "der Kasten vom Community Member Preis ist mir zu hoch - der soll
   gleich gross sein wie das Eingabefeld mit der Anzahl Tickets". Gemessen: 70
   gegen 46 px. Die zweite Textzeile war der ganze Unterschied; sie ist im
   Markup entfallen (die Auskunft steht in der Aufstellung darunter).

   Betrag und Beschriftung stehen jetzt NEBENEINANDER statt untereinander.
   min-height bleibt bei 44 px - das ist die Trefferflaeche, und der Knopf ist
   anklickbar; die Hoehe des Mengenfelds (46) liegt darueber, also gewinnt sie. */
.cod-event-popup-body .cec-member-price-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    height:46px !important;
    padding:0 12px !important;
    line-height:1.2 !important;
    text-align:left !important;
}
.cod-event-popup-body .cec-member-price-button small{
    font-size:11.5px !important;
    line-height:1.15 !important;
    max-width:11em;
}
.cod-event-popup-body .cec-member-price-betrag{
    font-weight:700 !important;
    white-space:nowrap;
}
/* Der Kasten fuer Nicht-Mitglieder sieht gleich aus - er fuehrt nur woandershin. */
.cod-event-popup-body .cec-member-price-button--upsell{ cursor:pointer; }

/* ══ Extras: Kontingent je Extra (20.08.2026) ═══════════════════════════════════
   Gewuenscht: "bei Extras muss auch jeder Punkt eine Anzahl haben und dann auch
   dementsprechend ausgrauen im Buchungsformular wenn nicht mehr verfuegbar".

   Die Angabe steht NEBEN dem Preis und nicht im Namen - so bleibt sie auch dann
   lesbar, wenn der Name lang ist und umbricht. Farben kommen aus den Tokens, nie
   fest eingetippt: Der Betreiber stellt sie im Dashboard ein.

   Das Ausgrauen ist Komfort. Entschieden wird beim Absenden serverseitig
   (CEC_Frontend::extras_positionen) - ein disabled im Browser ist kein Riegel. */
.cec-booking-flow .cec-extra-rest{
    display:block;
    font-size:12px;
    line-height:1.3;
    opacity:.75;
}
.cec-booking-flow .cec-extra-rest--aus{
    font-weight:700;
    opacity:1;
    color:var(--cod-color-red, #c0392b);
}
.cec-booking-flow .cec-ticket-choice.is-ausgebucht{
    opacity:.55;
}
/* Der Mengenwaehler bleibt sichtbar, aber unbedienbar - ihn zu entfernen liesse
   die Zeile aussehen, als fehle etwas. */
.cec-booking-flow .cec-ticket-choice.is-ausgebucht .cec-qty button,
.cec-booking-flow .cec-ticket-choice.is-ausgebucht .cec-qty input{
    cursor:not-allowed;
}

/* Das Anzahl-Feld im Veranstalter-Formular. Schmaler als die Textfelder daneben -
   dort stehen zwei- bis dreistellige Zahlen, kein Fliesstext. */
.cec-extras-box .cec-extra-menge{
    flex:0 1 120px;
}

/* ══ Textformatierung in Beschreibungen (20.08.2026) ═══════════════════════════
   Die zweite Schriftgroesse, die gewuenscht war ("2 Schriftgroessen fuer
   Ueberschrift und normalen Text"). Sie steht hier und nicht im Style-Block der
   Formatierungsleiste: Der Block erscheint nur im Formular, gelesen wird der Text
   aber im Buchungs-Popup - dort waere die Ueberschrift sonst ungestylt.

   Relativ in em, damit sie der eingestellten Schriftgroesse folgt; eine feste
   Pixelangabe wuerde die Betreiber-Einstellung aushebeln. */
.cec-popup-text .cod-tf-h,
.cec-popup-section .cod-tf-h,
/* INLINE, nicht als Block (20.08.2026 geaendert): "Groesser" ist eine Auszeichnung
   wie fett - sie soll genau die Auswahl treffen und nicht den ganzen Absatz. Kein
   font-weight hier: Sonst waere jede Vergroesserung zwangslaeufig fett, und ein
   zusaetzliches Fett darin waere nicht mehr zu sehen (genau das wurde gemeldet). */
.cod-tf-h{
    display:inline;
    font-size:1.25em;
    line-height:1.25;
}
/* Gürtel und Hosenträger gegen eine übersehene Verschachtelung (24.08.2026):
   Der Editor-Bug ist behoben, aber cod-tf-h rechnet in em - eine verschachtelte
   Auszeichnung würde sich sonst weiter aufsummieren statt folgenlos zu bleiben. */
.cod-tf-h .cod-tf-h{ font-size:1em; }
/* Aufzaehlungen im Beschreibungstext: Der Browser-Standard ruecht sie sehr weit ein
   und das Popup ist schmal. */
.cec-popup-text ul,
.cec-popup-section ul{
    margin:.4em 0;
    padding-left:1.3em;
}
.cec-popup-text li,
.cec-popup-section li{
    margin:.15em 0;
}