/* ═══════════════════════════════════════════════════════════════════
   AFC Events CSS – Frontend-Erweiterungen für den Amelia-Katalog
   Farben kommen aus der zentralen AFC-Palette (--afc-color-*,
   gepflegt unter Amelia → Benutzerdefinierte Anpassungen →
   Farbgebung, siehe colors.php). Die Hex-Werte in den var()-
   Fallbacks entsprechen den Standardwerten. Abstufungen werden
   per color-mix() aus den Basistönen abgeleitet.
   ═══════════════════════════════════════════════════════════════════ */


/* -------------------------------------------------------
   AMELIA-CLEARFIX NEUTRALISIEREN (::before/::after)
   Amelia hängt an viele ihrer Flex-Container leere
   ::before/::after Pseudo-Elemente (content:'') - vermutlich
   ein Clearfix-Rest aus der Zeit vor Flexbox. Sobald so ein
   Container zusätzlich `gap` gesetzt hat, zählt der Browser diese
   Pseudo-Elemente als eigene Flex-Items MIT und reserviert Gap-
   Abstand davor/danach. Ergebnis: unerklärlicher Leerraum am Ende
   der Zeile, rechtsbündige Buttons/Pills die nicht bündig abschließen.
   Pauschal für alle Container deaktivieren, die wir mit `gap`
   erweitert haben oder deren Ausrichtung wir brauchen.
------------------------------------------------------- */
.am-ec::before, .am-ec::after,
.am-ec__actions::before, .am-ec__actions::after,
.afc-alt-dates-pill::before, .afc-alt-dates-pill::after,
.afc-bookings-pill::before, .afc-bookings-pill::after,
.am-elf__footer::before, .am-elf__footer::after,
.afc-ec-badges::before, .afc-ec-badges::after {
    display: none !important;
}

/* -------------------------------------------------------
   KATALOG ANPASSUNGEN
   Container, Karten
------------------------------------------------------- */
.amelia-v2-booking #amelia-container.am-elf {
    max-width: unset !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec {
    padding: 30px !important;
    margin-top: 25px !important;
    margin-bottom: 0 !important;
    background: var(--afc-color-bg, #FFFFFF) !important;
    border: 1px solid var(--afc-color-primary, #1D4F91);
    transition: 200ms;
}

/* Nur auf Geräten mit echtem Hover – auf Touch bleibt der Scale
   sonst nach dem Antippen "hängen" */
@media (hover: hover) {
    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec:hover {
        transform: scale3d(1.01,1.01,1.01);
    }
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period {
    margin-right: 0 !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-text {
    text-align: left;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date__day {
    width: auto !important;
    font-size: 30px !important;
    text-align: left;
    order: 2;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date__day::after {
    content: ".";
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date__month {
    font-size: 26px !important;
    width: auto;
    order: 3;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date__year {
    font-size: 14px !important;
    width: 100%;
    text-align: left;
    order: 1;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-time {
    font-size: 18px !important;
    text-align: left;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-time::after {
    content: " Uhr";
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__image {
    width: 100px !important;
    height: 100px !important;
    margin: 0 25px 0 0 !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__info-name {
    font-size: 22px !important;
    line-height: 1.5 !important;
    color: var(--afc-color-accent, #1246D6) !important;
    text-align: left;
    gap: 10px;
    display: grid;
    justify-items: flex-start;
    padding-right: 25px !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__info-name .am-ec__info-title {
    hyphens: auto;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions {
    justify-content: end !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions-price {
    display: grid !important;
    margin: 10px 0;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions-price p:first-child {
    font-size: 20px !important;
    line-height: 1 !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions-price p.am-tax {
    margin: 0 !important;
    font-size: 12px;
    font-style: italic;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-button--primary {
  text-transform: uppercase !important;
  border: none !important;
  padding: 20px !important;
}

.amelia-v2-booking #amelia-container .am-els__wrapper .am-button--primary:hover {
  background: var(--afc-color-primary-hover, #3782E4) !important;
}

/* -------------------------------------------------------
   POPUP: BREITE & POSITION
   Auf Amelia-Popups eingegrenzt (vorher global auf .el-dialog).
   !important nötig, weil Amelia --el-dialog-width inline setzt.

   Desktop: mindestens 66 % wie bisher (ab ~1290 px Viewport
   identisch), auf Tablets/kleinen Laptops aber bis 850 px bzw.
   94 vw statt schmaler 66 %.
   Mobile: randlos über die volle Breite, siehe RESPONSIVE unten.

   Hinweis: Eigene Dialoge anderer Plugins, die dieselbe Overlay-
   Struktur nutzen, überschreiben das mit höherer Spezifität.
------------------------------------------------------- */
@media (min-width: 769px) {
    .am-dialog-popup .el-dialog {
        --el-dialog-width: max(66%, min(850px, 94vw)) !important;
        --el-dialog-margin-top: 40px !important;
    }
}

/* -------------------------------------------------------
   EVENT-CODE / KÜRZEL-PILL
   Im Katalog und im Popup-Header
------------------------------------------------------- */
.am-ec__info-code {
    margin-right: 8px !important;
    background: color-mix(in srgb, var(--afc-color-accent, #1246D6) 10%, transparent) !important;
    color: var(--afc-color-accent, #1246D6) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: .78em !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    white-space: nowrap !important;
}


/* -------------------------------------------------------
   KATALOG-FILTER: EINZELNE FILTER AUSBLENDEN
   Nutzt :has() um den ganzen Filter-Container (Label + Select)
   zu treffen, ausgehend von einem eindeutigen Kind-Element -
   robuster als Nth-Child, da unabhängig von der Reihenfolge.
   Über aria-label identifiziert statt über die Select-ID, da
   IDs bei Amelia nicht zuverlässig stabil sind - aria-label
   hängt an der deutschen Sprachdatei und ist robuster.
------------------------------------------------------- */

/* Listenansicht: Veranstaltungsort-Filter komplett raus */
.am-els__filters-menu__items:has( input[aria-label="Veranstaltungsort"] ) {
    display: none !important;
}

.am-els__filters-menu .am-els__filters-menu__items.am-mw33 {
  max-width: 50% !important;
}

/* Kalenderansicht: Veranstaltungsort-Filter komplett raus */
.am-ecs__filters-menu__items:has( input[aria-label="Veranstaltungsort"] ) {
    display: none !important;
}

/* Kalenderansicht: Veranstaltungsstatus-Filter komplett raus */
.am-ecs__filters-menu__items:has( input[aria-label="Veranstaltungsstatus"] ) {
    display: none !important;
}


/* -------------------------------------------------------
   KATALOGKARTE: PARENT-EVENT BADGE
------------------------------------------------------- */
.afc-parent-badge {
    text-align: left;
    font-size: 12px;
    color: color-mix(in srgb, var(--afc-color-text, #1A2C37) 60%, transparent);
    margin: 3px 0 0;
    font-style: italic;
    line-height: 1.4;
}


/* -------------------------------------------------------
   KATALOGKARTE: WRAPPER FÜR BUCHUNGS- & ALT-TERMIN-PILL
   Beide Pills werden von afcProcessCatalog() hier reingehängt,
   damit sie gemeinsam als eine Zeile ausgerichtet/gestylt werden können.
------------------------------------------------------- */
.afc-ec-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 5px !important;
}

/* Im Popup ausblenden (dort gibt's stattdessen den Context-Block) */
.el-dialog .afc-ec-badges {
    display: none;
}


/* -------------------------------------------------------
   KATALOGKARTE: BUCHUNGS-PILL (grün, Anzahl Buchungen)
------------------------------------------------------- */
.afc-bookings-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--afc-color-success, #019719);
    color: var(--afc-color-on-color, #FFFFFF);
    font-size: 14px !important;
    font-weight: 600;
    padding: 3px 10px !important;
    border-radius: 999px;
    line-height: 1;
}

/* Im Popup ausblenden */
.el-dialog .afc-bookings-pill {
    display: none;
}

.afc-bookings-pill__icon svg {
    width: 13px;
    height: 13px;
    display: block;
    flex-shrink: 0;
}

.afc-bookings-pill__icon svg .fill-path {
    fill: var(--afc-color-on-color, #FFFFFF);
}

.afc-bookings-pill__count {
    font-weight: 700;
}


/* -------------------------------------------------------
   KATALOGKARTE: ALTERNATIVTERMIN-PILL (blau)
------------------------------------------------------- */
.afc-alt-dates-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--afc-color-accent, #1246D6);
    color: var(--afc-color-on-color, #FFFFFF);
    font-size: 14px !important;
    font-weight: 600;
    padding: 3px 10px !important;
    border-radius: 999px;
    cursor: default;
    line-height: 1;
}

.el-dialog .afc-alt-dates-pill {
    display: none;
}

.afc-alt-dates-pill__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.afc-alt-dates-pill__icon svg {
    width: 12px;
    height: 12px;
    display: block;
    stroke: var(--afc-color-on-color, #FFFFFF);
}

.afc-alt-dates-pill__count {
    font-weight: 700;
}


/* -------------------------------------------------------
   POPUP: KONTEXT-BEREICH (Rahmen-Event + Bereits gebucht)
------------------------------------------------------- */
.am-eli__context {
    padding: 10px 12px !important;
    background: color-mix(in srgb, var(--afc-color-border-light, #E8E9EB) 20%, transparent) !important;
    border-top: 1px solid var(--afc-color-border, #D1D5D7) !important;
    border-bottom: 1px solid var(--afc-color-border, #D1D5D7) !important;
    display: flex;
    flex-direction: column;
    gap: 6px !important;
}

.am-eli__context::before,
.am-eli__context::after {
  display: none !important;
}

.am-eli__context div:not(:last-child) {
    margin-bottom: 0 !important;
}


/* -------------------------------------------------------
   POPUP: RAHMEN-EVENT (Parent-Event Badge)
------------------------------------------------------- */
.am-eli__parent {
    padding: 10px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.am-eli__parent__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--afc-color-text, #1A2C37);
    min-width: 130px;
}

.am-eli__parent__name {
    display: inline-block;
    padding: 2px 10px !important;
    border-radius: 999px;
    background: var(--afc-color-accent, #1246D6);
    color: var(--afc-color-on-color, #FFFFFF);
    font-size: 13px;
    font-weight: 600;
}


/* -------------------------------------------------------
   POPUP: BEREITS GEBUCHT FÜR (Teilnehmer-Badges)
------------------------------------------------------- */
.am-eli__bookings {
    padding: 10px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.am-eli__bookings__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--afc-color-text, #1A2C37);
    min-width: 130px;
}

.am-eli__bookings__participant {
    display: inline-block;
    padding: 2px 10px !important;
    border-radius: 999px;
    background: var(--afc-color-success, #019719);
    color: var(--afc-color-on-color, #FFFFFF);
    font-size: 13px;
    font-weight: 600;
}


/* -------------------------------------------------------
   POPUP: ALTERNATIVTERMIN-TOGGLE
------------------------------------------------------- */
.am-eli__alt-dates {
    padding: 10px 24px;
}

.am-eli__alt-dates__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--afc-color-accent, #1246D6);
    transition: opacity .15s;
}

.am-eli__alt-dates__toggle:hover {
    text-decoration: underline;
    opacity: .85;
}

.am-eli__alt-dates__toggle-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid var(--afc-color-accent, #1246D6);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.am-eli__alt-dates--open .am-eli__alt-dates__toggle-icon {
    transform: rotate(90deg);
}

/* Auf-/Zuklappen per Grid-Zeile (0fr → 1fr) statt max-height:
   animiert trotzdem, schneidet aber lange Listen nicht mehr bei
   einer festen Höhe ab. Braucht den inneren Wrapper __inner
   (events.js). */
.am-eli__alt-dates__list {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease;
}

.am-eli__alt-dates__inner {
    overflow: hidden;
    min-height: 0;
}

.am-eli__alt-dates--open .am-eli__alt-dates__list {
    grid-template-rows: 1fr;
}

.am-eli__alt-dates__note {
    font-size: 12px;
    color: var(--afc-color-muted, #808A90);
    font-style: italic;
    margin: 8px 0 6px;
    line-height: 1.4;
}

.am-eli__alt-dates__row {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--afc-color-border-light, #E8E9EB) 70%, transparent);
    font-size: 13px;
    flex-wrap: wrap;
}

.am-eli__alt-dates__row:last-child {
    border-bottom: none;
}

.am-eli__alt-dates__row-date {
    font-weight: 600;
    min-width: 80px;
    color: var(--afc-color-text, #1A2C37);
}

.am-eli__alt-dates__row-time {
    color: color-mix(in srgb, var(--afc-color-text, #1A2C37) 60%, transparent);
    min-width: 60px;
}

.am-eli__alt-dates__row-name {
    color: var(--afc-color-muted, #808A90);
    font-style: italic;
}


/* -------------------------------------------------------
   KATALOG: PLATZANZEIGE AUSBLENDEN
   am-ec__info-capacity gibt es in der aktuellen Amelia-Markup nicht
   mehr - "Voll"/"Offen" und "X Person(en) wartet" sitzen jetzt
   gemeinsam im Wrapper am-ec__info-other.

   Primär über data-afc-hide-seats (Karte bzw. Popup-Dialog): Vue
   setzt die class-Liste beim Wechsel ins mobile Layout neu, data-
   Attribute bleiben stehen. Die Klassen-Variante bleibt als Fallback.
------------------------------------------------------- */
.am-ec[data-afc-hide-seats] .am-ec__info-other,
.el-dialog[data-afc-hide-seats] .am-ec__info-other,
.am-ec.afc-hide-seats .am-ec__info-other,
.afc-hide-seats .am-ec__info-other {
    display: none !important;
}

/* -------------------------------------------------------
   KALENDERANSICHT: PLATZANZEIGE AUSBLENDEN
   (gleiche show_seats-Logik wie im Katalog, per afcProcessCalendar())
------------------------------------------------------- */
.fc-event.afc-hide-seats .am-evt-spots {
    display: none !important;
}


/* -------------------------------------------------------
   KATALOG: OFFEN/GESCHLOSSEN-ANZEIGE AUSBLENDEN
------------------------------------------------------- */
.am-ec__info-availability {
    display: none !important;
}

/* -------------------------------------------------------
   KATALOG: VERANSTALTUNGS-BESCHREIBUNG
------------------------------------------------------- */
/* Leerzeilen wiederherstellen */
.amelia-v2-booking #amelia-container .am-eli__description .am-eli__description-text p:empty {
    display: block;
}

/* Zwischenüberschriften formatieren */
.amelia-v2-booking #amelia-container .am-eli .am-eli__timetable .am-eli__timetable-title,
.amelia-v2-booking #amelia-container .am-eli .am-eli__description .am-eli__description-title,
.amelia-v2-booking #amelia-container .am-eli .am-eli__description .am-eli__description-text h3,
.amelia-v2-booking #amelia-container .am-eli .am-eli__description .am-eli__description-text h3 * {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--afc-color-primary, #1D4F91) !important;
    margin: 18px 0 15px;
}

.amelia-v2-booking #amelia-container .am-eli .am-eli__timetable .am-eli__timetable-title {
    margin: 0 0 15px !important;
}

.amelia-v2-booking #amelia-container .am-eli .am-eli__description .am-eli__description-title {
    margin: 18px 0 15px;
}


/* -------------------------------------------------------
   KATALOG + POPUP: DEAKTIVIERTER BUCHUNGSBUTTON
------------------------------------------------------- */
.am-button.afc-btn-disabled {
    opacity: .38 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}


/* -------------------------------------------------------
   POPUP: "ZUM KUNDENLOGIN"-BUTTON FÜR AUSGELOGGTE BESUCHER
   Fallback-Farben analog zu ASCFL (cart.css): Amelia setzt die
   --am-c-btn-*-Variablen teils nur direkt am eigenen Button inline,
   unser injizierter Button erbt das dann u.U. nicht zuverlässig.
------------------------------------------------------- */
.afc-login-btn {
    --am-c-btn-first: var(--afc-color-primary, #1D4F91);
    --am-c-btn-second: var(--afc-color-on-color, #FFFFFF);
    --am-c-btn-first-op80: color-mix(in srgb, var(--afc-color-primary, #1D4F91) 80%, transparent);
    --am-c-btn-first-op30: color-mix(in srgb, var(--afc-color-primary, #1D4F91) 30%, transparent);
    --am-c-btn-first-op20: color-mix(in srgb, var(--afc-color-primary, #1D4F91) 10%, transparent);
}


/* -------------------------------------------------------
   BUCHUNGSFORMULAR: CUSTOM FIELD "GEBUCHT FÜR" AUSBLENDEN
------------------------------------------------------- */
#am-cf-8 {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Frontend Katalog & Popup
   Zwei Stufen: 768px (Amelia bricht hier einspaltig um, Tablets
   hochkant / große Phones quer) und 480px (Phones hochkant).
   Die Kartenmaße liegen bei 600px, weil Amelias einspaltiges
   Layout zwischen 601 und 768px noch genug Platz hat.
   ═══════════════════════════════════════════════════════════════════ */

/* -------------------------------------------------------
   ≤ 768px
------------------------------------------------------- */
@media (max-width: 768px) {

    /* ── Popup ──────────────────────────────────────── */
    /* Größe/Position: Amelias eigenes Mobile-Layout (Vollbild-Sheet)
       bleibt unangetastet – unsere Breitenregel greift erst ab 769px. */
    .am-dialog-popup .el-overlay-dialog {
        overscroll-behavior: contain;
    }

    /* Amelia zentriert im Mobile-Popup den Text – unsere Kontext-
       bereiche (Label + Pills, Alternativtermine) linksbündig lassen */
    .am-eli__context {
        text-align: left;
    }

    /* ── iOS: kein Auto-Zoom beim Antippen von Feldern ── */
    /* Safari zoomt bei Eingabefeldern unter 16px hinein
       (Amelia rendert 15px). */
    .amelia-v2-booking .el-input__inner,
    .amelia-v2-booking .el-textarea__inner {
        font-size: 16px !important;
    }

    /* ── Katalog-Filter: volle Breite statt 50 % ─────── */
    .am-els__filters-menu .am-els__filters-menu__items.am-mw33 {
        max-width: 100% !important;
    }

    /* ── Pills auf den Karten ───────────────────────── */
    .am-ec__info-code {
        font-size: .72em !important;
        padding: 2px 8px !important;
    }

    /* Veranstaltungsbild auf den Katalogkarten mobil ausblenden */
    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__image {
        display: none !important;
    }

    /* Info-Pills (bereits gebucht / Alternativtermine / Warenkorb) auf den
       Katalogkarten mobil komplett ausblenden. Die Infos stehen
       weiterhin im Popup (Kontextbereich). */
    .afc-ec-badges {
        display: none !important;
    }

    .afc-parent-badge {
        font-size: 11px;
    }

    /* ── Popup: Kontextbereiche ─────────────────────── */
    .am-eli__parent,
    .am-eli__bookings,
    .am-eli__alt-dates {
        padding: 8px 16px;
    }

    /* Label über die Pills statt daneben */
    .am-eli__parent__label,
    .am-eli__bookings__label {
        min-width: 100%;
        margin-bottom: 2px;
    }

    /* Alternativtermin-Umschalter: größere Tippfläche */
    .am-eli__alt-dates__toggle {
        min-height: 40px;
        padding: 8px 0;
        font-size: 14px;
    }

    .am-eli__alt-dates__row {
        gap: 6px;
    }

    .am-eli__alt-dates__row-date {
        min-width: 70px;
    }

    .am-eli__alt-dates__row-time {
        min-width: auto;
    }
}

/* -------------------------------------------------------
   ≤ 600px: Katalogkarten kompakter
------------------------------------------------------- */
@media (max-width: 600px) {
    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec {
        padding: 18px !important;
        margin-top: 16px !important;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date__day {
        font-size: 24px !important;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-date__month {
        font-size: 20px !important;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-time {
        font-size: 16px !important;
    }

    /* "Beginnt" wurde neben dem Datum auf "Begin-nt" zusammengedrückt */
    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__period-text {
        white-space: nowrap;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__info-name {
        font-size: 18px !important;
        padding-right: 0 !important;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-button--primary {
        padding: 14px 16px !important;
    }

    /* Aktionszeile: Pills | Preis | Button lagen nebeneinander, der
       Preis wurde dabei bis auf ein Zeichen Breite zusammengedrückt.
       Jetzt: Pills eigene Zeile, Preis nie umbrechen, Button nimmt
       den Rest bzw. rutscht bei Platzmangel darunter (volle Breite). */
    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions {
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px 16px;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .afc-ec-badges {
        flex: 1 1 100%;
        margin-bottom: 0 !important;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions-price {
        flex: 0 0 auto;
        white-space: nowrap;
        margin: 0;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions-btn {
        flex: 1 1 160px;
    }

    .amelia-v2-booking #amelia-container .am-els__wrapper .am-ec__actions-btn .am-button {
        width: 100%;
    }
}

/* -------------------------------------------------------
   ≤ 480px: Phones hochkant
------------------------------------------------------- */
@media (max-width: 480px) {
    .am-ec__info-code {
        font-size: .70em !important;
        padding: 2px 6px !important;
        margin-right: 4px !important;
    }

    .afc-bookings-pill,
    .afc-alt-dates-pill {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }

    /* Popup: Label und Pills untereinander */
    .am-eli__context {
        padding: 8px !important;
    }

    .am-eli__parent,
    .am-eli__bookings {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 12px;
    }

    .am-eli__parent__label,
    .am-eli__bookings__label {
        font-size: 12px;
        font-weight: 400;
        color: var(--afc-color-muted, #808A90);
    }

    .am-eli__alt-dates {
        padding: 6px 12px;
    }

    /* Alternativtermine: Datum/Zeit/Name untereinander */
    .am-eli__alt-dates__row {
        flex-direction: column;
        gap: 2px;
        padding: 6px 0;
    }

    .am-eli__alt-dates__row-date {
        min-width: auto;
        font-size: 13px;
    }

    .am-eli__alt-dates__row-time,
    .am-eli__alt-dates__row-name {
        font-size: 12px;
    }
}