/* ==========================================================================
   Events – «Nächste Veranstaltungen» Block & Seite
   Figma "BaBeL DEF – Events": gelb-grüner Hintergrund, rote Einträge als Zeilen
   ========================================================================== */

/* Block-Wrapper & Listing-Seite
   -------------------------------------------------------------------------- */
.view-events {
    background-color: var(--babel-yellow);
    padding-block: 2.5rem 3rem;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}

.view-events--page {
    padding-bottom: 10rem;
}

/* Block «Nächste Veranstaltungen» (upcoming): Gradient + Footer-Link
   -------------------------------------------------------------------------- */
.view-events--upcoming {
    position: relative;
    padding-bottom: 0;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
}


.view-events--upcoming .events-list {
    padding-bottom: 3rem;
}

/* Gradient-Abschluss */
.view-events--upcoming::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 250px;
    background: linear-gradient(180deg, rgba(230, 224, 121, 0) 0%, var(--babel-yellow) 55%);
    pointer-events: none;
    z-index: 1;
}


.path-frontpage .view-events--upcoming::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 350px;
    background: linear-gradient(180deg, rgba(230, 224, 121, 0) 0%, var(--babel-yellow) 35%);
    pointer-events: none;
    z-index: 1;
}

/* Footer mit «Mehr Veranstaltungen» Button */
.view-events--upcoming .events-upcoming__footer {
    display: flex;
    justify-content: center;
    margin-top: -100px;
    position: relative;
    z-index: 2;
    padding-bottom: 2.5rem;
}

.view-events--upcoming .events-upcoming__more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: #D52600;
    text-decoration: none;
    border: 1.3px solid #D52600;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.view-events--upcoming .events-upcoming__more-btn:hover {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.view-events--upcoming .events-upcoming__more-btn::after {
    content: '';
    display: inline-block;
    width: 34px;
    height: 16px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,<svg width='34' height='16' viewBox='0 0 34 16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0.402588 0.322083C2.73592 3.48875 9.00259 9.82208 15.4026 9.82208C23.4026 9.82208 28.7359 3.48875 31.4026 0.322083' stroke='%23D52600'/><path d='M4.90259 5.32208L0.402588 9.82208' stroke='%23D52600'/><path d='M28.4026 4.32208L32.9026 8.82208' stroke='%23D52600'/><path d='M22.2406 7.7205L25.0645 13.4236' stroke='%23D52600'/><path d='M9.8452 7.81639L6.66322 13.3277' stroke='%23D52600'/><path d='M15.5846 9.32211V15.6861' stroke='%23D52600'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    transition: width 0.15s, height 0.15s;
}

.view-events--upcoming .events-upcoming__more-btn:hover::after {
    width: 32px;
    height: 23px;
    background-image: url("data:image/svg+xml,<svg width='32' height='23' viewBox='0 0 32 23' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.936 0.650024C7.0459 0.650024 2.34072 7.97355 0.958548 10.5545C0.745091 10.9531 0.638362 11.1524 0.650966 11.4275C0.663571 11.7026 0.790552 11.8951 1.04452 12.28C2.71775 14.816 8.26723 22.2334 15.936 22.2334C23.6047 22.2334 29.1542 14.816 30.8274 12.28C31.0814 11.8951 31.2083 11.7026 31.2209 11.4275C31.2335 11.1524 31.1268 10.9531 30.9134 10.5545C29.5312 7.97354 24.826 0.650024 15.936 0.650024Z' stroke='%23E6E079' stroke-width='1.3'/><circle cx='15.936' cy='11.4417' r='4.5' stroke='%23E6E079' stroke-width='1.3'/></svg>");
}

/* Listing-Seite: .layout-content ohne Padding (Linien randlos)
   -------------------------------------------------------------------------- */
.layout-content:has(.view-events--page) {
    padding: 0;
}

/* Listing-Seite: Titel wie andere Seitentitel positionieren
   (kompensiert das entfernte layout-content padding-block/inline)
   -------------------------------------------------------------------------- */
.view-events--page .view-events__title {
    padding: 3rem var(--babel-gutter, 2rem) 1.5rem var(--babel-gutter, 2rem);
    margin: 0;
}


/* Titel
   -------------------------------------------------------------------------- */
.view-events__title {
    scroll-margin-top: 20px;
    font-family: 'League Spartan', sans-serif;
    font-size: 2.5rem;
    /* 40px */
    font-weight: 400;
    line-height: 1;
    color: #D52600;
    margin: 0 0 1.5rem;
    padding-inline: 2rem;
}

/* Filter-Leiste
   -------------------------------------------------------------------------- */
.events-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1.75rem;
    margin-bottom: 3rem;
    padding-inline: 2rem;
}

/* Form: kein eigenes Layout nötig (Kalender wird per JS in .views-exposed-form verschoben) */
.events-filters form.bef-exposed-form {
    padding: 0;
    margin: 0;
}

/* div.grid.views-exposed-form (.grid von pico überschreiben): Zeile 1 = Kalender + Tags, Zeile 2 = Suche */
.events-filters form .grid.views-exposed-form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1.75rem;
}

/* Submit-Button verstecken (Suche via Enter) */
.events-filters .form-actions {
    display: none;
}

/* Drupal exposed filter: Tag-Checkboxen (BEF)
   -------------------------------------------------------------------------- */

/* Fieldset-Wrapper + innere Divs: inline-flex, kein Block-Expand */
.events-filters fieldset#edit-field-tags-target-id--wrapper {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
    width: auto;
}

.events-filters fieldset#edit-field-tags-target-id--wrapper .fieldset-wrapper,
.events-filters #edit-field-tags-target-id.form-checkboxes {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Fieldset-Legend (Feld-Label «Tags») ausblenden */
.events-filters fieldset#edit-field-tags-target-id--wrapper legend {
    display: none;
}

/* BEF-Checkboxes-Wrapper: horizontale Reihe */
.events-filters .bef-checkboxes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 1.75rem;
}

/* Jede einzelne Checkbox-Gruppe: kein Margin */
.events-filters .form-type-checkbox {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Nativen Checkbox verstecken */
.events-filters .form-type-checkbox input.form-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Label = Box + Text nebeneinander */
.events-filters .form-type-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1.36;
    color: var(--babel-red);
    user-select: none;
}

/* Benutzerdefinierte Checkbox-Box (38×38, roter Rand) */
.events-filters .form-type-checkbox label::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1.3px solid var(--babel-red);
    border-radius: 7px;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

/* Checked: Box füllen */
.events-filters .form-type-checkbox input.form-checkbox:checked+label::before {
    background-color: var(--babel-red);
}

/* Hover */
.events-filters .form-type-checkbox label:hover::before {
    background-color: rgba(213, 38, 0, 0.15);
}

.events-filters .form-type-checkbox input.form-checkbox:checked+label:hover::before {
    background-color: var(--babel-red);
}

/* Feld-Labels «Suche» etc. ausblenden */
.events-filters .form-type-textfield>label,
.events-filters .form-type-search>label {
    display: none;
}

/* Suche: volle Breite → neue Zeile
   -------------------------------------------------------------------------- */
.events-filters [class*="form-item-suche"] {
    flex: 0 0 100%;
    min-width: 0;
}

/* Suchfeld: Pill-Form (Figma: 43px hoch, 50px radius, 1.3px roter Rand)  */
.events-filters [class*="form-item-suche"] input[type="text"],
.events-filters [class*="form-item-suche"] input[type="search"] {
    display: block;
    width: 100%;
    height: 43px;
    padding: 0 1.5rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
    background: transparent !important;
    border: 1.3px solid var(--babel-red) !important;
    border-radius: 50px;
    outline: none;
    box-shadow: none !important;
    transition: border-color 0.15s ease;
    --pico-border-color: var(--babel-red);
    --pico-background-color: transparent;
    --pico-color: var(--babel-red);
    --pico-box-shadow: none;
}

.events-filters [class*="form-item-suche"] input::placeholder {
    color: var(--babel-red);
    opacity: 0.6;
}

.events-filters [class*="form-item-suche"] input:focus {
    border-color: var(--babel-red) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Label-Ebene: Datum-Kalender */
.events-filter-item-label {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1.36;
    color: var(--babel-red);
}

/* Monats-Überschrift
   -------------------------------------------------------------------------- */
.events-month-heading {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
    margin: 1.5rem 0 0;
    padding: 0 2rem;
}

/* Eintragszeile – Linien bis zum äusseren Rand
   -------------------------------------------------------------------------- */
.events-row {
    display: grid;
    grid-template-columns: 82px 220px 1fr 50px;
    align-items: start;
    gap: 0 1.25rem;
    min-height: 50px;
    border-bottom: 1.3px solid var(--babel-red);
    padding: 0rem 2rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin-bottom: 0;
    position: relative;
    padding-top: 4px;
}

.events-row:first-of-type,
.events-month-heading+.events-row {
    border-top: 1.3px solid var(--babel-red);
}

/* Datum
   -------------------------------------------------------------------------- */
.events-row__date {
    font-family: 'League Spartan', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--babel-red);
    display: flex;
    flex-direction: column;
}

.events-row__time {
    display: block;
}

/* Titel
   -------------------------------------------------------------------------- */
.events-row__title {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
}

.events-row__title a {
    color: inherit;
    text-decoration: none;
}

/* Cover-Link: macht den ganzen Eintrag klickbar */
.events-row__title a::after {
    content: '';
    position: absolute;
    inset: 0;
}


/* Hover: Eintrag invertieren (gelb → rot, rot → gelb)
   -------------------------------------------------------------------------- */
.events-row:hover {
    background-color: var(--babel-red);
    cursor: pointer;
}

.events-row:hover .events-row__date,
.events-row:hover .events-row__time,
.events-row:hover .events-row__location,
.events-row:hover .events-row__title,
.events-row:hover .events-row__title a {
    color: var(--babel-yellow);
}

.events-row:hover .events-arrow-svg line,
.events-row:hover .events-arrow-svg polyline {
    stroke: var(--babel-yellow);
}

/* Ort – linksbündig in der auto-Spalte (vor Titel)
   -------------------------------------------------------------------------- */
.events-row__location {
    font-family: 'League Spartan', sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--babel-red);
    text-align: left;
    align-self: start;
}

/* Pfeil – SVG-Wrapper
   -------------------------------------------------------------------------- */
.events-row__arrow {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: right;
    flex-shrink: 0;
    color: var(--babel-red);
    align-self: center;
}

.events-row__arrow svg {
    display: block;
}

/* Liste-Wrapper
   -------------------------------------------------------------------------- */
.events-list-wrap {
    position: relative;
}

/* «mehr laden» Button (Figma: 195×49, 12px radius, roter Rand + Pfeil)
   -------------------------------------------------------------------------- */
.events-load-more {
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
    padding-inline: 2rem;
}

.events-load-more__btn {
    display: inline-flex;
    font-family: 'League Spartan', sans-serif;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 195px;
    height: 49px;
    padding: 0 1rem 0 1.25rem;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
    background: transparent;
    border: 1.3px solid var(--babel-red);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.events-load-more__btn:hover {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.events-load-more__btn:hover {
    background-color: #D52600;
    color: #E6E079;
}

.events-load-more__btn:hover .events-arrow-svg line,
.events-load-more__btn:hover .events-arrow-svg polyline {
    stroke: var(--babel-yellow);
}

/* Seiten-Pager: zentriert mit Negativ-Margin + Gradient als ::before (wie Aktuell)
   -------------------------------------------------------------------------- */
.view-events--page .events-load-more {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    padding-inline: 0;
    position: relative;
    z-index: 2;
}

.view-events--page .events-load-more::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(180deg, rgba(230, 224, 121, 0) 0%, var(--babel-yellow) 95%);
    pointer-events: none;
}

/* Gradient nur zeigen wenn Pager-Button vorhanden */
.view-events--page .events-load-more:not(:has(.pager__item--next))::before {
    display: none;
}

/* Archiv-Link: gleicher Stil wie «mehr laden», absolut links ausgerichtet */
.view-events--page .events-archiv-link {
    position: absolute;
    left: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
    text-decoration: none;
    border: 1.3px solid var(--babel-red);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.view-events--page .events-archiv-link:hover {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.view-events--page .events-load-more nav {
    display: flex;
    justify-content: center;
}

.view-events--page .events-load-more .pager__item--next a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
    text-decoration: none;
    border: 1.3px solid var(--babel-red);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.view-events--page .events-load-more .pager__item--next a:hover {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.view-events--page .events-load-more .pager__item--next a::after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 27px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,<svg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0249 14.8407L7.5249 20.517L13.0249 26.1933' stroke='%23D52600' stroke-width='1.3'/><path d='M1.93941 15.5503C0.848939 13.601 0.432252 11.3273 0.757609 9.10162C1.08297 6.87597 2.13108 4.83034 3.73023 3.29984C5.32939 1.76935 7.38479 0.84474 9.5597 0.677487C11.7346 0.510233 13.9001 1.11025 15.7014 2.37925C17.5026 3.64824 18.8329 5.51097 19.4743 7.66228C20.1157 9.81359 20.0301 12.1259 19.2316 14.2205C18.4331 16.315 16.969 18.0676 15.0792 19.1911C13.1893 20.3146 10.9858 20.7424 8.82961 20.4044' stroke='%23D52600' stroke-width='1.3' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

.view-events--page .events-load-more .pager__item--next a:hover::after {
    transform: rotate(60deg);
    background-image: url("data:image/svg+xml,<svg width='21' height='27' viewBox='0 0 21 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M13.0249 14.8407L7.5249 20.517L13.0249 26.1933' stroke='%23E6E079' stroke-width='1.3'/><path d='M1.93941 15.5503C0.848939 13.601 0.432252 11.3273 0.757609 9.10162C1.08297 6.87597 2.13108 4.83034 3.73023 3.29984C5.32939 1.76935 7.38479 0.84474 9.5597 0.677487C11.7346 0.510233 13.9001 1.11025 15.7014 2.37925C17.5026 3.64824 18.8329 5.51097 19.4743 7.66228C20.1157 9.81359 20.0301 12.1259 19.2316 14.2205C18.4331 16.315 16.969 18.0676 15.0792 19.1911C13.1893 20.3146 10.9858 20.7424 8.82961 20.4044' stroke='%23E6E079' stroke-width='1.3' stroke-linecap='round'/></svg>");
}

.view-events--page .events-load-more .pager__item--previous,
.view-events--page .events-load-more .pager__item--first,
.view-events--page .events-load-more .pager__item--last,
.view-events--page .events-load-more .pager__item.is-active {
    display: none;
}

.view-events--page .events-load-more .pager__item--next a.is-loading {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}

/* Kalender-Filter: datum_von als natives type="date" Input
   Das transparente Input liegt direkt über dem Icon → wird auf allen
   Plattformen (inkl. iOS) direkt berührt, ohne showPicker() oder label/for.
   -------------------------------------------------------------------------- */

/* datum_bis bleibt versteckt (Wert wird per JS auf YYYY-MM-DD 23:59:59 gesetzt) */
.events-filters .form-item:has([name="datum_bis"]) {
    display: none;
}

/* datum_von: inline, Position-Kontext für das überlagerte Input */
.events-filters .form-item:has([name="datum_von"]) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 0 0 auto;
    margin: 0 2rem 0 0;
}

/* Label: Icon + Text */
.events-filters .form-item:has([name="datum_von"]) label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Kalender-Icon-Span (JS erstellt .events-date-icon) */
.events-filters .events-date-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: 1.3px solid var(--babel-red);
    border-radius: 7px;
    pointer-events: none;
    transition: background-color 0.15s;
}

/* Datumstext neben dem Icon */
.events-filters .events-date-label {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    color: var(--babel-red);
    pointer-events: none;
}

/* Hover + Aktiv: Hintergrund rot */
.events-filters .form-item-datum-von:hover .events-date-icon,
.events-filters .events-date-icon.is-active {
    background-color: var(--babel-red);
}

/* Hover (nicht aktiv): SVG-Strokes auf Gelb wechseln */
.events-filters .form-item-datum-von:hover .events-date-icon:not(.is-active) svg * {
    stroke: var(--babel-yellow);
}

/* Input verstecken – Flatpickr öffnet via fp.open() im Click-Handler */
.events-filters .form-item:has([name="datum_von"]) input {
    display: none;
}

/* Reset-Button (× erscheint wenn Datum gesetzt) */
.events-filters .events-date-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    background: none;
    border: none;
    color: var(--babel-red);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    margin: 0px;
}

.events-filters .events-date-reset:hover {
    opacity: 1;
}

/* Kein Event
   -------------------------------------------------------------------------- */
.events-empty {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5625rem;
    font-weight: 300;
    color: var(--babel-red);
    margin: 1.5rem 0;
    padding-inline: 2rem;
}

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

    /* Figma Phone: Datum links, Ort oben rechts, Titel + Pfeil unten rechts */
    .events-row {
        grid-template-columns: 82px 1fr 30px;
        grid-template-areas:
            "date location location"
            "date title arrow";
        padding-inline: 1.25rem;
        align-items: start;
    }

    .events-row__date {
        grid-area: date;
        align-self: start;
    }

    .events-row__location {
        grid-area: location;
        align-self: center;
    }

    .events-row__title {
        grid-area: title;
        align-self: center;
    }

    .events-row__arrow {
        grid-area: arrow;
        display: flex;
        align-self: center;
        justify-content: flex-end;
        padding-right: 1rem;
    }

    .view-events {
        padding-top: 2rem;
        padding-bottom: 2.5rem;
    }

    .view-events__title,
    .events-filters,
    .events-month-heading,
    .events-empty,
    .events-load-more {
        padding-inline: 1.25rem;
    }

    .view-events--upcoming .events-upcoming__more-btn {
        width: 100%;
        justify-content: center;

    }

    /* Filter: Form nimmt volle Breite, verhindert Overflow */
    .events-filters form.bef-exposed-form {
        flex: 0 0 100%;
        min-width: 0;
    }

    .events-filters form .grid.views-exposed-form {
        gap: 0.5rem 1rem;
        width: 100%;
    }

    /* Kalender + Tags je volle Breite → eigene Zeile */
    .events-filters .form-item:has([name="datum_von"]),
    .events-filters fieldset#edit-field-tags-target-id--wrapper {
        flex: 0 0 100%;
        min-width: 0;
        padding-bottom: 0.5rem;
    }

    .view-events--page .events-load-more,
    .view-events--page .events-load-more nav,
    .view-events--page .events-load-more .pager__items,
    .view-events--page .events-load-more .pager__item--next {
        width: 100%;
    }

    .view-events--page .events-load-more .pager__item--next a {
        width: 100%;
        justify-content: center;
    }

    .view-events--page .events-load-more {
        flex-direction: column;
        align-items: stretch;
    }

    .view-events--page .events-archiv-link {
        position: static;
        justify-content: center;
        margin-top: 1rem;
        margin-right: 1rem;
        order: 1;
    }
}

@media (max-width: 480px) {

    /* Layout bleibt 2-spaltig (wie Figma 393px Frame) */
    .events-row {
        grid-template-columns: 68px 1fr 30px;
        gap: 0 0.75rem;
        padding: 0.5rem 1.25rem;
    }

    .events-row__location {
        text-align: left;
        white-space: normal;
    }

    .events-filters {
        gap: 0.5rem 1.25rem;
    }

    /* Kalender + Tags: volle Breite auf eigener Zeile */
    .events-filters .form-item:has([name="datum_von"]),
    .events-filters fieldset#edit-field-tags-target-id--wrapper {
        flex: 0 0 100%;
    }

    /* Tag-Checkboxen: enger Abstand */
    .events-filters .bef-checkboxes {
        gap: 0.5rem 1rem;
    }

    .events-filter-checkbox {
        width: 30px;
        height: 30px;
    }

    .events-filter-item-label {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   Events – Detail-Ansicht (node--event--full)
   Figma "BaBeL DEF – Event: Detail"
   Gelber Hintergrund, rote Typografie
   ========================================================================== */

/* Layout-Content ohne Padding auf Event-Detailseiten
   -------------------------------------------------------------------------- */
.page-node-type-event .layout-content {
    padding: 0;
    background-color: transparent;
}

/* Gelber Hintergrund auf main (volle Viewport-Breite)
   -------------------------------------------------------------------------- */
body.page-node-type-event main[role="main"] {
    background-color: var(--babel-yellow);
}

/* Artikel-Wrapper
   -------------------------------------------------------------------------- */
.event-detail {
    background-color: transparent;
    min-height: calc(100vh - var(--babel-nav-height, 72px));
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Innerer Container: 2-Spalten-Grid (links: zurück, rechts: gesamter Inhalt)
   -------------------------------------------------------------------------- */
.event-detail__container {
    max-width: var(--babel-max-width, 1400px);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 2rem;
    margin-top: 2.5rem;
}

/* Linke Spalte: nur zurück-Button */
.event-detail__col-back {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Rechte Spalte: gesamter Inhalt */
.event-detail__col-main {
    min-width: 0;
}

/* Meta-Zeile: Datum/Zeit/Ort links, Icons rechts */
.event-detail__meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* zurück-Button
   -------------------------------------------------------------------------- */
.event-detail__back-link {
    display: inline-flex;
    font-family: 'League Spartan', sans-serif;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5625rem;
    font-weight: 300;
    line-height: 1;
    color: var(--babel-red);
    text-decoration: none;
    border: 1.3px solid var(--babel-red);
    border-radius: 12px;
    padding: 0.65rem 1.25rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.event-detail__back-link:hover {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.event-detail__back-link:hover svg path {
    fill: var(--babel-yellow);
}

.event-detail__back-link svg {
    flex-shrink: 0;
    display: block;
    will-change: transform;
    transform: translateZ(0);
}

.event-detail__back-link svg path {
    shape-rendering: geometricPrecision;
}

/* Meta-Block: Datum, Zeit, Ort – links ausgerichtet
   -------------------------------------------------------------------------- */
.event-detail__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--babel-red);
    gap: 0;
}

a.event-detail__meta-location {
    color: var(--babel-red);
    text-decoration: underline;
    text-underline-offset: 2px;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
}

a.event-detail__meta-location:hover {
    text-decoration: none;
}

.event-detail__meta-location-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

a.event-detail__meta-location:hover .event-detail__meta-location-icon {
    transform: translate(4px, -4px);
    opacity: 1;
}

/* Zugänglichkeit-Icons (oben rechts)
   -------------------------------------------------------------------------- */
.event-detail__zugaenglichkeit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.event-detail__zugaenglichkeit-icon img {
    display: block;
    width: 38px;
    height: 38px;
    object-fit: contain;
}

/* Aktions-Buttons
   -------------------------------------------------------------------------- */
.event-detail__actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1.25rem;
    margin-top: 1.75rem;
}

.event-detail__btn {
    --pico-background-color: transparent !important;
    --pico-border-color: var(--babel-red) !important;
    --pico-color: var(--babel-red) !important;
    --pico-font-weight: 300 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: 'League Spartan', sans-serif !important;
    font-size: 1.5625rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: var(--babel-red) !important;
    background-color: transparent !important;
    border: 1.3px solid var(--babel-red) !important;
    border-radius: 12px !important;
    padding: 0.65rem 1.25rem !important;
    margin: 0 !important;
    text-decoration: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.event-detail__btn:hover,
.event-detail__btn:focus {
    background-color: var(--babel-red) !important;
    color: var(--babel-yellow) !important;
    border-color: var(--babel-red) !important;
}

.event-detail__btn-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

/* Kalender-Button Wrapper: Feld-Markup transparent durchreichen
   -------------------------------------------------------------------------- */
.event-detail__calendar-action {
    display: contents;
}

/* font-size: 0 versteckt den Text-Node " - " (Separator ist kein HTML-Element).
   time.datetime wird per display:none ausgeblendet. */
.event-detail__calendar-action .field__item {
    display: flex;
    align-items: center;
    font-size: 0;
    margin: 0;
}

.event-detail__calendar-action time.datetime {
    display: none;
}

/* Trennlinie
   -------------------------------------------------------------------------- */
.event-detail__divider {
    border: none;
    border-top: 1.3px solid var(--babel-red);
    margin: 0 0 1.25rem;
}

/* H1 Titel
   -------------------------------------------------------------------------- */
.event-detail__title {
    font-family: 'League Spartan', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--babel-red);
    margin: 2.5rem 0 2.5rem;
}

/* Featured Image
   -------------------------------------------------------------------------- */
.event-detail__image {
    margin-bottom: 1.5rem;
}

.event-detail__image-img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Fliesstext / Body
   -------------------------------------------------------------------------- */
.event-detail__body {
    font-family: 'Bitter', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--babel-red);
}

.event-detail__body+.event-detail__body {
    margin-top: 1.25em;
}

.event-detail__body p,
.event-detail__body div {
    color: var(--babel-red);
    margin: 0 0 1em;
}

.event-detail__body p:last-child {
    margin-bottom: 0;
}

.event-detail__body a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.event-detail__body a:hover {
    text-decoration: none;
}

.event-detail__body ul,
.event-detail__body ol {
    color: inherit;
    padding-left: 1.5em;
    margin: 0 0 1em;
}

.event-detail__body li {
    color: inherit;
    margin-bottom: 0.25em;
}

/* Links
   -------------------------------------------------------------------------- */
.event-detail__links {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-detail__link-item {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--babel-red);
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-all;
}

.event-detail__link-item:hover {
    text-decoration: none;
}

/* Files
   -------------------------------------------------------------------------- */
.event-detail__files {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.event-detail__file-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--babel-red);
    text-decoration: none;
    border: 1.3px solid var(--babel-red);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    width: fit-content;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.event-detail__file-item:hover {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.event-detail__file-item:hover svg {
    stroke: var(--babel-yellow);
}

/* Tags
   -------------------------------------------------------------------------- */
.event-detail__tags {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.event-detail__tag {
    font-family: 'League Spartan', sans-serif;
    font-size: 1rem;
    font-weight: 300;
    color: var(--babel-red);
    border: 1.3px solid var(--babel-red);
    border-radius: 50px;
    padding: 0.25rem 0.875rem;
}

/* Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .event-detail__container {
        grid-template-columns: 1fr;
    }

    .event-detail__back-link {
        width: 100%;
    }

    .event-detail__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .event-detail__file-item {
        width: 100%;
    }

    .event-detail__btn {
        width: 100% !important;
        justify-content: center !important;
    }

    .event-detail__calendar-action .field__item {
        width: 100%;
    }

    #event-anmeldung-form .form-actions button[type="submit"],
    #event-anmeldung-form #edit-actions-submit {
        width: 100% !important;
    }

    .event-detail__col-back {
        flex-direction: row;
    }

    .event-detail__meta-row {
        flex-direction: column;
    }

    .event-detail__title {
        font-size: 1.875rem;
    }

    .events-load-more {
        padding: 0 0 0 1rem !important;
    }
}

@media (max-width: 480px) {
    .event-detail__container {
        padding: 1.5rem 1.25rem 3rem;
    }

    .event-detail__title {
        font-size: 1.625rem;
    }

    .event-detail__back-link,
    .event-detail__btn {
        font-size: 1.25rem;
    }
}

/* Anmeldeformular
   -------------------------------------------------------------------------- */
[x-cloak] {
    display: none !important;
}

.event-detail__anmeldung-form {
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    color: var(--babel-red);
}

.event-detail__anmeldung-form .form-item {
    margin-bottom: 1rem;
}

.event-detail__anmeldung-form input,
.event-detail__anmeldung-form textarea {
    --pico-background-color: transparent;
    --pico-color: var(--babel-red);
    width: 100%;
    font-family: var(--babel-font-body);
    font-size: 1.2rem;
    background: transparent !important;
    color: var(--babel-red) !important;
    outline: none !important;
}

.event-detail__anmeldung-form input {
    padding: 0.6rem 0;
    border: none !important;
    border-bottom: 1.3px solid var(--babel-red) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.event-detail__anmeldung-form textarea {
    border-color: var(--babel-red) !important;
    border-radius: 16px !important;
}

.event-detail__anmeldung-form input:focus,
.event-detail__anmeldung-form textarea:focus {
    outline: none;
    border-bottom-color: var(--babel-red);
}

.event-detail__anmeldung-form input::placeholder,
.event-detail__anmeldung-form textarea::placeholder {
    color: var(--babel-red);
    opacity: 1;
}

.event-detail__anmeldung-form .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.event-detail__anmeldung-form .form-actions button[type="submit"] .btn-icon {
    display: block;
    flex-shrink: 0;
}

.event-detail__anmeldung-form .button--primary,
.event-detail__anmeldung-form .form-actions button[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    width: auto !important;
    font-family: 'League Spartan', sans-serif !important;
    font-size: 1.5625rem !important;
    font-weight: 300 !important;
    color: var(--babel-red) !important;
    background: transparent !important;
    border: 1.3px solid var(--babel-red) !important;
    border-radius: 12px !important;
    padding: 0.6rem 1.5rem !important;
    margin: 0 !important;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.event-detail__anmeldung-form .button--primary:hover,
.event-detail__anmeldung-form .form-actions button[type="submit"]:hover {
    background-color: var(--babel-red) !important;
    color: var(--babel-yellow) !important;
    border-color: var(--babel-red) !important;
}

.events-filters .js-form-item-suche {
    margin-top: 1rem;
}

/* Archiv-Seite: gelber Hintergrund, roter Titel */
body.page--veranstaltungen-archiv .layout-content {
    background-color: var(--babel-yellow);
}

.view-events-archiv__title {
    font-family: 'League Spartan', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--babel-red);
    margin: 0 0 1.5rem;
    padding-inline: 0;
}

/* Archiv-Filter: Jahr / Monat
   -------------------------------------------------------------------------- */
.events-archiv-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.events-archiv-filter-years,
.events-archiv-filter-months {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.events-archiv-filter-btn {
    font-family: 'League Spartan', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    color: var(--babel-red);
    background: transparent;
    border: 1.3px solid var(--babel-red);
    border-radius: 12px;
    padding: 0.45rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.events-archiv-filter-btn:hover,
.events-archiv-filter-btn.is-active {
    background-color: var(--babel-red);
    color: var(--babel-yellow);
}

.events-archiv-filter-months .events-archiv-filter-btn {
    font-size: 1rem;
    padding: 0.35rem 0.85rem;
}

@media (max-width: 480px) {
    .events-archiv-filter-btn {
        font-size: 1rem;
        padding: 0.4rem 0.75rem;
    }
}

/* Flatpickr-Kalender: Babel-Design-Overrides
   -------------------------------------------------------------------------- */

.flatpickr-calendar {
    font-family: 'League Spartan', sans-serif;
    font-weight: 300;
    background: var(--babel-yellow);
    border: 1.3px solid var(--babel-red);
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Kopfzeile (Monat/Jahr-Navigation) */
.flatpickr-months {
    background-color: var(--babel-red);
    border-radius: 3px 3px 0 0;
}

.flatpickr-month,
.flatpickr-prev-month,
.flatpickr-next-month {
    color: #fff !important;
    fill: #fff !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: rgba(255, 255, 255, 0.7) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    color: #fff;
    font-family: 'League Spartan', sans-serif;
    font-weight: 300;
}

.flatpickr-current-month .numInputWrapper span.arrowUp::after {
    border-bottom-color: rgba(255, 255, 255, 0.8);
}

.flatpickr-current-month .numInputWrapper span.arrowDown::after {
    border-top-color: rgba(255, 255, 255, 0.8);
}

/* Wochentage-Header */
.flatpickr-weekdays {
    background-color: var(--babel-yellow);
}

span.flatpickr-weekday {
    background-color: var(--babel-yellow);
    color: var(--babel-red);
    font-family: 'League Spartan', sans-serif;
    font-weight: 600;
}

/* Tage */
.flatpickr-day {
    font-family: 'League Spartan', sans-serif;
    font-weight: 400;
    color: var(--babel-red);
    border-radius: 3px;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background-color: rgba(213, 38, 0, 0.1);
    border-color: var(--babel-red);
    color: var(--babel-red);
}

/* Heutiger Tag */
.flatpickr-day.today {
    border-color: rgba(213, 38, 0, 0.4);
}

.flatpickr-day.today:hover {
    background-color: rgba(213, 38, 0, 0.1);
    border-color: var(--babel-red);
    color: var(--babel-red);
}

/* Gewählter Tag */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background-color: var(--babel-red);
    border-color: var(--babel-red);
    color: #fff;
}

/* Deaktivierte Tage (kein Event an diesem Datum) */
.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.flatpickr-disabled {
    color: rgba(0, 0, 0, 0.2);
    background-color: transparent;
    border-color: transparent;
    cursor: default;
    text-decoration: none;
}

/* Tage ausserhalb des aktuellen Monats */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgba(213, 38, 0, 0.3);
}

.flatpickr-day.prevMonthDay.disabled,
.flatpickr-day.nextMonthDay.disabled {
    color: rgba(0, 0, 0, 0.1);
}