/* BHiSt EM events_list_grouped listing + single-event + booking-form styling
   (was bhist-events-list wp_head, emitted on every front-end page). */
    /* === BHiSt EM events_list_grouped — monthly-bracket listing === */
    /* Full-bleed via box-shadow extension: section stays at parent width (so content
       centers normally), bg visually extends sideways through a 100vw box-shadow.
       Requires overflow: visible on the ancestor chain so the shadow isn't clipped. */
    /* Avada has #boxed-wrapper { overflow-x: clip } and #wrapper too — those
       clip our box-shadow extension. Un-clip them on pages that host the
       grouped event list, and add overflow-x: clip on html/body so the
       extended bg doesn't produce a horizontal scrollbar. */
    /* Per CSS spec, if either axis is non-visible, the other is treated as
       auto — so setting only `overflow-x: visible` on a body that has
       `overflow-y: scroll` doesn't actually take effect. Need to override
       both axes, then move scroll-clipping responsibility to html. */
    body.bhist-events-page #boxed-wrapper,
    body.bhist-events-page #wrapper,
    body.bhist-events-page .em-view-container,
    body.bhist-events-page .em-events-list,
    body.bhist-events-page .em-events-list-grouped,
    body.bhist-events-page .em-events-list-grouped > .em,
    body.bhist-events-page .post-content,
    body.bhist-events-page main.width-100,
    body.bhist-events-page section#content.full-width,
    body.bhist-events-page .fusion-row,
    body.single-event #boxed-wrapper,
    body.single-event #wrapper,
    body.single-event main#main,
    body.single-event section#content,
    body.single-event .post-content,
    body.single-event .em-view-container,
    body.single-event .em-item,
    body.single-event .fusion-row { overflow: visible !important; }
    body.bhist-events-page, body.single-event { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; }
    html:has(body.bhist-events-page), html:has(body.single-event) { overflow-x: clip; overflow-y: auto; }

    /* Hide the Avada auto-generated "Page Title Bar" — it shows a redundant
       "Veranstaltungen" / event-name Sand banner above our own Hero section. */
    body.bhist-events-page .avada-page-titlebar-wrapper,
    body.bhist-events-page .fusion-page-title-bar,
    body.single-event .avada-page-titlebar-wrapper,
    body.single-event .fusion-page-title-bar { display: none !important; }

    /* Hide Avada's auto-injected featured image at the top of event pages.
       Structure: div.post-760 > div.fusion-flexslider > ul.slides > li > a > img.wp-post-image
       The fusion-flexslider is a SIBLING of post-content, not a descendant — hide it
       at the post-760 level. */
    body.single-event div.fusion-flexslider:has(img.wp-post-image),
    body.single-event div.post.has-post-thumbnail > div.fusion-flexslider,
    body.single-event div[class*="type-event"] > div.fusion-flexslider { display: none !important; }

    /* Single-event detail page: two Avada/EM-Pro layout hostilities to undo —
       (1) Outer page wrapper `<div class="fusion-row" style="max-width:1200px">` —
           emitted by Avada PHP regardless of page template; inline style needs CSS
           override scoped to OUTER row only (direct child of #main).
       (2) EM Pro's `.em.pixelbones section { padding: 0 }` (specificity 0,2,1) beats
           `.fusion-fullwidth` (0,1,0) which sets padding from --awb-padding-*. So even
           though the inline style `style="--awb-padding-left:6vw"` sets the property,
           the consuming `padding-left: var(--awb-padding-left)` rule never wins. Fix
           with a 3-class chain `.em.pixelbones section.fusion-fullwidth` (0,3,1). */
    body.single-event #main,
    body.bhist-events-page #main { padding: 0 !important; background: transparent !important; }
    body.single-event #main > .fusion-row { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    body.single-event .em.pixelbones section.fusion-fullwidth {
        padding-top: var(--awb-padding-top, 0) !important;
        padding-right: var(--awb-padding-right, 0) !important;
        padding-bottom: var(--awb-padding-bottom, 0) !important;
        padding-left: var(--awb-padding-left, 0) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Content inside each event-detail section fills the section's content box —
       no extra max-width constraint. Keep Fusion's default column-wrapper margins
       (~32px each side) so the container width matches the frontpage. */
    body.single-event section.fusion-fullwidth .fusion-column-wrapper {
        max-width: none !important;
    }
    /* EM Pro sets `.em.em-list { display:grid; gap:25px }` and `.em.pixelbones
       section { padding:0 }` — both win by specificity over our single-class rule.
       Override both with !important to keep the alternating bg bands seamless. */
    .em.em-list.em-events-list-grouped { gap: 0 !important; }
    section.bhist-em-month { position: relative; z-index: 0;
        width: 100%; padding: 3.5rem 1rem !important; box-sizing: border-box; margin: 0 !important; }
    section.bhist-em-month:nth-of-type(odd)  { --bhist-em-section-bg: var(--awb-color2); }
    section.bhist-em-month:nth-of-type(even) { --bhist-em-section-bg: var(--awb-color1); }
    /* Full-bleed bg via ::before pseudo-element. 100vw wide, centered on viewport,
       anchored vertically to the section. Sits behind content via z-index: -1. */
    section.bhist-em-month::before {
        content: ''; position: absolute;
        top: 0; bottom: 0;
        left: 50%; transform: translateX(-50%);
        width: 100vw;
        background: var(--bhist-em-section-bg);
        z-index: -1;
    }
    section.bhist-em-month > .bhist-em-monthhead,
    section.bhist-em-month > .bhist-em-rows { max-width: 980px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; }
    .bhist-em-monthhead { display: flex; align-items: baseline; gap: .75rem;
        padding: 0 0 .75rem 0; margin: 0 0 1.75rem 0; border-bottom: 2px solid var(--awb-color5); }
    .bhist-em-monthname { font-family: var(--h3_typography-font-family,'Oswald',sans-serif); margin: 0; color: var(--awb-color5); font-weight: 700; display: flex; align-items: baseline; gap: .6rem; }
    .bhist-em-monthname-text { font-size: 2.1rem; line-height: 1; }
    .bhist-em-year { font-size: .85rem; letter-spacing: .2em; color: var(--awb-color6); font-weight: 600; text-transform: uppercase; }

    /* Continuous timeline line per month — runs *behind* the date stamps,
       not next to them. Geometry:
       - Line at left:45px = center of the 90px node column, full row height
         (top:0 → bottom:0). Padding-bottom (not flex gap) lets row segments
         abut, so the line continues unbroken from one event to the next.
       - First / last row clamp the line to its dot so it doesn't dangle past
         the first or last event of the month.
       - Each .bhist-em-node carries the section's bg color via the
         --bhist-em-section-bg variable, with z-index above the line — that
         masks the line behind the date digits ("26 / MAI / DI."). Net effect:
         the line is visible between events, hidden behind each date stamp,
         and the dot sits on top at the stamp's vertical center. */
    .bhist-em-rows { display: flex; flex-direction: column; }
    .bhist-em-row { display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem; position: relative; align-items: center; padding-bottom: 1.25rem; }
    .bhist-em-row::before {
        content: ''; position: absolute; left: 45px; top: 0; bottom: 0;
        width: 2px; transform: translateX(-50%);
        background: rgba(128,24,16,.22); z-index: 0;
    }
    .bhist-em-row:first-child::before { top: 50%; }
    .bhist-em-row:last-child::before  { bottom: 50%; }
    .bhist-em-row:first-child:last-child::before { display: none; }

    .bhist-em-node {
        position: relative; text-align: center; align-self: center;
        padding: .6rem .25rem;
        background: var(--bhist-em-section-bg);
        z-index: 1;
    }
    .bhist-em-node::before {
        /* Dot at the very top of the date stamp, straddling node.top:
           top half on the visible line, bottom half on the node's bg block.
           Halo (= section bg) masks the line right at the dot transition. */
        content: ''; position: absolute; left: 50%; top: 0;
        transform: translate(-50%, -50%);
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--awb-color5);
        box-shadow: 0 0 0 4px var(--bhist-em-section-bg);
        z-index: 2;
    }
    .bhist-em-day { display: block; font-family: var(--h3_typography-font-family,'Oswald',sans-serif); font-weight: 700; font-size: 1.9rem; color: var(--awb-color8); line-height: 1; }
    .bhist-em-month-abbr { display: block; font-family: var(--h3_typography-font-family,'Oswald',sans-serif); font-size: .8rem; color: var(--awb-color5); font-weight: 600; margin-top: .2rem; text-transform: uppercase; letter-spacing: .12em; }
    .bhist-em-dow { display: block; font-size: .7rem; letter-spacing: .2em; color: var(--awb-color6); font-weight: 600; text-transform: uppercase; margin-top: .2rem; }

    .bhist-em-card { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: center;
        padding: 1.25rem; border-radius: 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 1px 0 rgba(0,0,0,.04); }
    section.bhist-em-month:nth-of-type(odd)  .bhist-em-card { background: var(--awb-color1); }
    section.bhist-em-month:nth-of-type(even) .bhist-em-card { background: var(--awb-color2); }
    .bhist-em-photo { display: block; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 10px; text-decoration: none; }
    .bhist-em-photo--placeholder { background: linear-gradient(135deg, var(--awb-color3) 0%, var(--awb-color6) 100%); opacity: .35; }
    .bhist-em-body { display: flex; flex-direction: column; justify-content: center; }
    /* Whole row clickable — title's <a> gets a ::before pseudo that covers the
       entire .bhist-em-row. Photo + CTA stay independently clickable via z-index. */
    .em.pixelbones .bhist-em-row { position: relative; }
    .em.pixelbones .bhist-em-row .bhist-em-title a { position: static; }
    .em.pixelbones .bhist-em-row .bhist-em-title a::before {
        content: ''; position: absolute; inset: 0; z-index: 1;
    }
    .em.pixelbones .bhist-em-row .bhist-em-photo,
    .em.pixelbones .bhist-em-row .bhist-em-cta { position: relative; z-index: 2; }
    /* Hover lift on the card */
    .em.pixelbones .bhist-em-row .bhist-em-card { transition: box-shadow .15s, transform .15s; }
    .em.pixelbones .bhist-em-row:hover .bhist-em-card {
        box-shadow: 0 14px 36px rgba(0,0,0,.12), 0 1px 0 rgba(0,0,0,.04);
        transform: translateY(-2px);
    }
    /* EM Pro ships `.em.pixelbones a { color: var(--accent-color) !important;
       background-color: transparent !important; }` — beats single-class selectors
       even with !important. Use a 3-class chain to win the specificity battle.
       Title: Faluröd like the homepage `.bhist-card__title`. */
    .bhist-em-title { font-family: var(--h3_typography-font-family,'Oswald',sans-serif); font-size: 1.35rem; margin: 0 0 .35rem; line-height: 1.2; font-weight: 700; }
    .em.pixelbones .bhist-em-title a,
    .em.pixelbones .bhist-em-title a:visited { color: var(--awb-color5) !important; text-decoration: none !important; }
    .em.pixelbones .bhist-em-title a:hover { color: var(--awb-color4) !important; }
    .bhist-em-meta { font-size: .9rem; color: var(--awb-color6); margin-bottom: .6rem; }
    .bhist-em-excerpt { font-family: var(--body_typography-font-family,'Open Sans',sans-serif); font-size: .95rem; color: var(--awb-color7); line-height: 1.5; margin: 0 0 .85rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    /* CTA — pill button matching the canonical frontpage Fusion-button-flat-medium:
       Open Sans 400 mixed-case (NOT Oswald uppercase), Faluröd bg, Mähnengold text,
       padding 11px 23px, radius 999px. */
    .em.pixelbones a.bhist-em-cta,
    .em.pixelbones a.bhist-em-cta:visited {
        display: inline-block !important; align-self: flex-start; margin-top: .35rem;
        background: var(--awb-color5) !important; background-color: var(--awb-color5) !important;
        color: var(--awb-color1) !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif) !important;
        font-weight: 400 !important; font-size: 13px !important; line-height: 16px !important;
        letter-spacing: normal !important; text-transform: none !important;
        padding: 11px 23px !important; border-radius: 999px !important;
        text-decoration: none !important; border: 0 !important;
        transition: background .2s;
    }
    .em.pixelbones a.bhist-em-cta:hover { background: var(--awb-color4) !important; background-color: var(--awb-color4) !important; color: var(--awb-color1) !important; }

    /* ============================================================
       EM Pro pagination — full-bleed brand band below the month sections
       ============================================================ */
    /* EM renders <div class="em-pagination …">…</div> after the month
       sections (only when total events > limit). The wrapper carries its
       own full-bleed Sand band via ::before-with-100vw, and the
       .page-numbers chips inside are styled brand-canon: Mähnengold fill,
       Faluröd hover, Faluröd-on-Mähnengold for the current page. */
    .em.em-list .em-pagination {
        /* 980px content column (matches .bhist-em-monthhead / .bhist-em-rows) so
           the chips sit under the cards above, not sprawled across the viewport.
           The full-bleed Sand band is on ::before (100vw + translateX). */
        position: relative;
        max-width: 980px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 2.5rem 1rem !important;
        box-sizing: border-box;
        text-align: center;
        z-index: 0;
    }
    .em.em-list .em-pagination::before {
        content: ''; position: absolute;
        top: 0; bottom: 0;
        left: 50%; transform: translateX(-50%);
        width: 100vw;
        background: var(--awb-color2);
        z-index: -1;
    }
    /* Chip styling for both <span class="page-numbers current"> (active) and
       <a class="page-numbers"> (clickable). EM Pro pixelbones ships
       `.em.pixelbones a { color:var(--accent-color)!important; }` so use a
       3-class chain to win the specificity fight, same as bhist-em-title. */
    .em.em-list .em-pagination .page-numbers,
    .em.pixelbones .em-pagination a.page-numbers,
    .em.pixelbones .em-pagination a.page-numbers:visited {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        min-width: 2.5rem; height: 2.5rem;
        padding: 0 .85rem;
        margin: 0 .25rem;
        border-radius: 999px;
        background: var(--awb-color1) !important;
        color: var(--awb-color8) !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif) !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 16px !important;
        letter-spacing: normal !important;
        text-transform: none !important;
        text-decoration: none !important;
        border: 0 !important;
        transition: background .2s, color .2s;
    }
    .em.pixelbones .em-pagination a.page-numbers:hover {
        background: var(--awb-color5) !important;
        color: var(--awb-color1) !important;
    }
    .em.em-list .em-pagination .page-numbers.current {
        background: var(--awb-color5) !important;
        color: var(--awb-color1) !important;
    }

    /* Mobile */
    @media (max-width: 760px) {
        section.bhist-em-month { padding: 2rem 1rem; }
        .bhist-em-card { grid-template-columns: 1fr; padding: 1rem; }
        .bhist-em-photo { aspect-ratio: 16/9; }
        .bhist-em-row { grid-template-columns: 70px 1fr; gap: 1rem; }
        /* Mobile: node column is 70px wide; line + dot stay at the column's
           horizontal center (35px) so the line still passes *behind* the
           date stamp on the small viewport. */
        .bhist-em-row::before { left: 35px; }
        .bhist-em-day { font-size: 1.5rem; }
        .bhist-em-monthname-text { font-size: 1.6rem; }
    }

    /* ============================================================
       EM Pro booking form — brand-canon styling
       ============================================================ */
    /* The form sits inside `.em.pixelbones`, so any link/select/input default
       styling inherits from EM Pro CSS. Match the homepage card aesthetic:
       Faluröd accent text, white-on-Sand inputs, pill submit button. */
    .em.pixelbones .em-event-booking-form { margin: 0; font-family: var(--body_typography-font-family,'Open Sans',sans-serif); }

    /* Account / login row */
    .em.pixelbones .em-login-trigger { font-size: .95rem; color: var(--awb-color8); margin: 0 0 1.5rem; }
    .em.pixelbones .em-login-trigger a,
    .em.pixelbones .em-login-trigger a:visited { color: var(--awb-color5) !important; text-decoration: underline !important; font-weight: 600; background: transparent !important; }
    .em.pixelbones .em-login-trigger a:hover { color: var(--awb-color4) !important; }
    .em.pixelbones .em-login-content { background: var(--awb-color1); border-radius: 14px; padding: 1.5rem; margin: 1rem 0; }

    /* Section headings ("Tickets", "Deine Daten", etc.) — Avada has its own H3
       typography rule that beats single-class selectors, so use a 3-class chain
       targeting h3 specifically. */
    .em.pixelbones .em-event-booking-form h3.em-booking-section-title,
    .em.pixelbones h3.em-booking-section-title {
        font-family: var(--h3_typography-font-family,'Oswald',sans-serif) !important;
        font-weight: 600 !important;
        font-size: 14px !important; line-height: 1.4 !important;
        letter-spacing: .25em !important; text-transform: uppercase !important;
        color: var(--awb-color5) !important;
        background: transparent !important; border: 0 !important;
        padding: 0 !important; margin: 2rem 0 1rem !important;
        border-bottom: 2px solid var(--awb-color5) !important; padding-bottom: .5rem !important;
    }
    .em.pixelbones .em-booking-form-section-tickets:first-child .em-booking-section-title { margin-top: 0 !important; }
    .em.pixelbones .em-booking-section { background: transparent !important; padding: 0 !important; border: 0 !important; }

    /* Tickets table */
    /* EM 7.4.5 sets `.em.em-event-booking-form .em-tickets{width:calc(100% - 20px)}`,
       which pulls the ticket/attendee column 20px narrower than every other form field. */
    .em.pixelbones.em-event-booking-form .em-tickets,
    .em.pixelbones .em-tickets { width: 100%; border-collapse: collapse; background: transparent; margin: 0; }
    .em.pixelbones .em-tickets thead { display: none; }
    .em.pixelbones .em-tickets tr { background: var(--awb-color1) !important; }
    .em.pixelbones .em-tickets tr + tr td { border-top: 1px solid rgba(128,24,16,.10) !important; }
    .em.pixelbones .em-tickets td {
        padding: 1rem 1.25rem !important; vertical-align: middle !important;
        color: var(--awb-color8) !important; font-size: 16px !important;
        background: transparent !important; border: 0 !important;
    }
    .em.pixelbones .em-tickets tr:first-child td:first-child { border-top-left-radius: 12px; }
    .em.pixelbones .em-tickets tr:first-child td:last-child { border-top-right-radius: 12px; }
    .em.pixelbones .em-tickets tr:last-child td:first-child { border-bottom-left-radius: 12px; }
    .em.pixelbones .em-tickets tr:last-child td:last-child { border-bottom-right-radius: 12px; }
    .em.pixelbones .em-tickets .em-bookings-ticket-table-type { font-family: var(--h3_typography-font-family,'Oswald',sans-serif); font-weight: 700; font-size: 17px; }
    .em.pixelbones .em-tickets .ticket-desc {
        display: block; margin-top: .35rem; font-family: var(--body_typography-font-family,'Open Sans',sans-serif);
        font-weight: 400; font-size: 13px; color: var(--awb-color6);
    }
    .em.pixelbones .em-tickets .em-bookings-ticket-table-price {
        font-family: var(--h3_typography-font-family,'Oswald',sans-serif); font-weight: 600;
        color: var(--awb-color5) !important; white-space: nowrap; text-align: right;
    }
    .em.pixelbones .em-tickets .em-bookings-ticket-table-spaces { text-align: right; width: 90px; }

    /* Form inputs + selects */
    .em.pixelbones .em-event-booking-form input[type="text"],
    .em.pixelbones .em-event-booking-form input[type="email"],
    .em.pixelbones .em-event-booking-form input[type="tel"],
    .em.pixelbones .em-event-booking-form input[type="number"],
    .em.pixelbones .em-event-booking-form input[type="password"],
    .em.pixelbones .em-event-booking-form textarea,
    .em.pixelbones .em-event-booking-form select {
        background: #fff !important; color: var(--awb-color8) !important;
        border: 1px solid rgba(128,24,16,.20) !important; border-radius: 8px !important;
        padding: .7rem 1rem !important; font-size: 15px !important; box-shadow: none !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif) !important;
        max-width: 100% !important; width: auto !important;
    }
    .em.pixelbones .em-event-booking-form input[type="text"],
    .em.pixelbones .em-event-booking-form input[type="email"],
    .em.pixelbones .em-event-booking-form input[type="tel"],
    .em.pixelbones .em-event-booking-form input[type="password"],
    .em.pixelbones .em-event-booking-form textarea { width: 100% !important; }
    /* Dropdowns — Faluröd bg with cream chevron arrow. EM Pro ships
       `.em.pixelbones.input select:not([multiple]) { background: #fff url(...) !important }`
       at specificity (0,3,1) — beat it with the same triple-class selector chain plus
       extra body prefix to push us to (0,4,1) and !important on every property. */
    body .em.pixelbones.em-event-booking-form select:not([multiple]),
    body .em.pixelbones .em-event-booking-form select:not([multiple]),
    body .em.pixelbones.input select:not([multiple]) {
        appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
        /* Cream chevron arrow (two diagonal lines) */
        background-image: linear-gradient(45deg, transparent 50%, var(--awb-color1) 50%), linear-gradient(135deg, var(--awb-color1) 50%, transparent 50%) !important;
        background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px) !important;
        background-size: 6px 6px, 6px 6px !important; background-repeat: no-repeat !important;
        background-color: var(--awb-color5) !important; color: var(--awb-color1) !important;
        border: 1px solid var(--awb-color5) !important; border-radius: 8px !important;
        padding-right: 2.5rem !important; cursor: pointer !important;
    }
    body .em.pixelbones.em-event-booking-form select:not([multiple]):hover,
    body .em.pixelbones.input select:not([multiple]):hover { background-color: var(--awb-color4) !important; border-color: var(--awb-color4) !important; }
    body .em.pixelbones.em-event-booking-form select option,
    body .em.pixelbones.input select option {
        background: var(--awb-color1) !important; color: var(--awb-color8) !important;
        padding: .5rem .75rem !important;
    }
    /* Plätze/short selects shouldn't span full content width — let them size to content
       with a sensible min so 1-2-digit values aren't visually lost. EM Pro forces
       width:100% with !important; override here. */
    body .em.pixelbones.em-event-booking-form select:not([multiple]),
    body .em.pixelbones.input select:not([multiple]) {
        width: auto !important; min-width: 120px !important; max-width: 240px !important;
    }
    /* The `.input` variants outspecify EM 7.4.5s
       `.em.pixelbones .input input[type=text]:focus{border:1px solid var(--accent-color)!important}`,
       which would otherwise paint the focus ring in EMs blue accent. */
    .em.pixelbones.input.em-event-booking-form input:focus,
    .em.pixelbones.input.em-event-booking-form textarea:focus,
    .em.pixelbones.input.em-event-booking-form select:focus,
    .em.pixelbones .em-event-booking-form input:focus,
    .em.pixelbones .em-event-booking-form textarea:focus,
    .em.pixelbones .em-event-booking-form select:focus {
        outline: 0 !important; border-color: var(--awb-color5) !important;
        box-shadow: 0 0 0 3px rgba(128,24,16,.15) !important;
    }
    /* Form labels — Avada sets `label { font-size: 16px }` which beats single-class.
       Bump to 3-class chain + !important everywhere. */
    .em.pixelbones .em-event-booking-form .input-group label,
    .em.pixelbones .em-event-booking-form label {
        display: block !important;
        font-family: var(--h3_typography-font-family,'Oswald',sans-serif) !important;
        font-weight: 600 !important; font-size: 12px !important; line-height: 1.4 !important;
        letter-spacing: .15em !important; text-transform: uppercase !important;
        color: var(--awb-color5) !important; margin-bottom: .35rem !important;
    }

    /* Submit button — matches canonical Fusion-button-flat-medium. EM Pro injects
       `.em-button.em-booking-submit { width: 100% !important; padding: 15px; ... }`
       which beats single-class chains; need 4-class chain + width override. */
    body.single-event .em.pixelbones .em-event-booking-form input.em-booking-submit,
    body.single-event .em.pixelbones .em-event-booking-form button.em-booking-submit,
    body.single-event .em.pixelbones .em-event-booking-form input.em-button,
    body.single-event .em.pixelbones .em-event-booking-form button.em-button,
    body.single-event .em.pixelbones .em-event-booking-form button[type="submit"],
    body.single-event .em.pixelbones .em-event-booking-form input[type="submit"],
    .em.pixelbones .em-event-booking-form button[type="submit"],
    .em.pixelbones .em-event-booking-form input[type="submit"],
    .em.pixelbones .em-event-booking-form .em-booking-submit,
    .em.pixelbones .em-event-booking-form .button-primary {
        display: inline-block !important; align-self: flex-start;
        width: auto !important; min-width: 0 !important; max-width: none !important;
        margin: 1rem 0 0 0 !important; float: none !important;
        background: var(--awb-color5) !important; background-color: var(--awb-color5) !important;
        color: var(--awb-color1) !important; border: 0 !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif) !important;
        font-weight: 400 !important; font-size: 13px !important; line-height: 16px !important;
        letter-spacing: normal !important; text-transform: none !important;
        padding: 11px 23px !important; border-radius: 999px !important;
        cursor: pointer; box-shadow: none !important;
        transition: background-color .2s !important;
    }
    .em.pixelbones .em-event-booking-form button[type="submit"]:hover,
    .em.pixelbones .em-event-booking-form input[type="submit"]:hover,
    .em.pixelbones .em-event-booking-form .em-booking-submit:hover,
    .em.pixelbones .em-event-booking-form .button-primary:hover { background: var(--awb-color4) !important; }

    /* Cancel / secondary button — same shape, transparent bg + Faluröd outline. */
    .em.pixelbones .em-event-booking-form .em-login-cancel {
        background: transparent !important; color: var(--awb-color5) !important;
        border: 1px solid var(--awb-color5) !important;
        border-radius: 999px !important; padding: 10px 22px !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif) !important;
        font-weight: 400 !important; font-size: 13px !important; line-height: 16px !important;
        letter-spacing: normal !important; text-transform: none !important;
        cursor: pointer;
    }
    .em.pixelbones .em-event-booking-form .em-login-cancel:hover { background: rgba(128,24,16,.05) !important; }

    /* Spacing between form sections */
    .em.pixelbones .em-event-booking-form > section,
    .em.pixelbones .em-event-booking-form .em-booking-form-section { margin-bottom: 2rem; }
    .em.pixelbones .em-event-booking-form p { margin: 0 0 1rem; }

    /* Per-attendee booking sub-form (em-ticket-bookings → multiple em-ticket-booking blocks).
       Each block gets a numbered "Teilnehmer N" header + card-style backdrop. */
    .em.pixelbones .em-ticket-bookings { counter-reset: bhist-attendee; display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 2rem; padding: 0; }
    /* One class deeper than EM 7.4.5 own `.em.em-event-booking-form .em-tickets
       .em-ticket-bookings{padding:0 15px 20px!important}`, so the attendee cards line up
       with the form fields instead of sitting 15px inset. */
    .em.em-event-booking-form .em-tickets .em-ticket .em-ticket-bookings { padding: 0 !important; }
    /* EM 7.4.5 adds `... .em-ticket-bookings .em-ticket-booking{margin:0 0 25px}` — that
       stacks on top of the flex `gap`, so kill it and let the gap do the spacing. */
    .em.pixelbones .em-ticket-bookings .em-ticket-booking {
        background: var(--awb-color1) !important; border-radius: 12px !important;
        padding: 1.5rem !important; border: 1px solid rgba(128,24,16,.10) !important;
        margin: 0 !important; position: relative;
    }
    .em.pixelbones .em-ticket-booking:before {
        counter-increment: bhist-attendee;
        content: "Teilnehmer*in " counter(bhist-attendee);
        display: block;
        font-family: var(--h3_typography-font-family,'Oswald',sans-serif);
        font-weight: 600; font-size: 12px;
        letter-spacing: .2em; text-transform: uppercase;
        color: var(--awb-color5);
        margin-bottom: 1rem; padding-bottom: .65rem;
        border-bottom: 1px solid rgba(128,24,16,.12);
    }
    /* If there's only one attendee-block, hide the redundant numbered header */
    .em.pixelbones .em-ticket-bookings:has(.em-ticket-booking:only-child) .em-ticket-booking:before { display: none; }

    /* Reset the `<p class="input-group">` wrapper EM Pro generates around each field */
    .em.pixelbones .em-event-booking-form .input-group,
    .em.pixelbones .em-event-booking-form .input-group.em-input-text,
    .em.pixelbones .em-event-booking-form .input-group.em-input-date {
        background: transparent !important; padding: 0 !important; border: 0 !important;
        margin: 0 0 1rem !important; display: block !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif);
    }
    .em.pixelbones .em-event-booking-form .input-group:last-child { margin-bottom: 0 !important; }

    /* Flatpickr datepicker — `em-date-input.form-control` is the visible input */
    .em.pixelbones .em-event-booking-form .em-datepicker { display: block; }
    .em.pixelbones .em-event-booking-form .em-datepicker .em-date-input.form-control,
    .em.pixelbones .em-event-booking-form .em-datepicker .em-date-input.flatpickr-input {
        /* white like the text inputs next to it, not cream */
        background: #fff !important; color: var(--awb-color8) !important;
        border: 1px solid rgba(128,24,16,.20) !important; border-radius: 8px !important;
        padding: .7rem 1rem !important; font-size: 15px !important;
        font-family: var(--body_typography-font-family,'Open Sans',sans-serif) !important;
        width: 100% !important; box-shadow: none !important;
    }
    .em.pixelbones .em-event-booking-form .em-datepicker .em-date-input.form-control:focus {
        outline: 0 !important; border-color: var(--awb-color5) !important;
        box-shadow: 0 0 0 3px rgba(128,24,16,.15) !important;
    }
    /* Flatpickr calendar popup — brand-tint */
    .flatpickr-calendar { border-radius: 12px !important; border: 1px solid rgba(128,24,16,.15) !important; box-shadow: 0 16px 40px rgba(0,0,0,.10) !important; }
    .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--awb-color5) !important; border-color: var(--awb-color5) !important; }
    .flatpickr-day:hover { background: rgba(128,24,16,.10) !important; }

    /* Required-field asterisk */
    .em.pixelbones .em-form-required { color: var(--awb-color5); font-weight: 700; margin-left: .25rem; }

    /* Inline links anywhere in EM markup — kill the plugin's blue accent, which EM
       applies site-wide via `.em.pixelbones a{color:var(--accent-color)!important}`.
       Scoping this to the booking form was too narrow: the same blue showed up in the
       events-list empty state ("Unser Newsletter informiert dich über neue Termine.").
       `body` prefix outspecifies EM's own rule; buttons and pill CTAs are excluded
       below because they carry their own colour. */
    body .em.pixelbones a,
    body .em.pixelbones a:visited,
    .em.pixelbones .em-event-booking-form a,
    .em.pixelbones .em-event-booking-form a:visited,
    body.single-event .post-content a,
    body.single-event .post-content a:visited {
        color: var(--awb-color5) !important;
    }
    body .em.pixelbones a:hover,
    .em.pixelbones .em-event-booking-form a:hover,
    body.single-event .post-content a:hover { color: var(--awb-color4) !important; }
    /* Buttons / pill CTAs already set their own color, exclude them */
    body .em.pixelbones a.bhist-em-cta,
    body .em.pixelbones a.fusion-button,
    .em.pixelbones .em-event-booking-form a.bhist-em-cta,
    .em.pixelbones .em-event-booking-form a.fusion-button,
    body.single-event .post-content a.bhist-em-cta,
    body.single-event .post-content a.fusion-button { color: var(--awb-color1) !important; }

/* Full-width Avada containers compensate for the normal main gutter. Our event
   pages deliberately have no main gutter, so no negative compensation is needed. */
body.bhist-events-page #main .post-content > .fusion-fullwidth {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.bhist-em-card:not(:has(.bhist-em-photo)) { grid-template-columns: minmax(0, 1fr); }