/* Event Landingpage - all styles for template-event-landingpage.php
   Aligned with the site's general styling patterns observed on
   /fachstelle/, /fachstelle/arbeitsgruppen/ etc.: Catamaran throughout,
   pill buttons (40px radius, 2px border, uppercase, transparent fill),
   .with-separator H1 decoration (theme-provided), light-weight large
   headings in blue, generous whitespace, the existing hollow-symbol
   background watermark.
*/

:root {
    --evt-card-bg: #f6f5f1;
    --evt-card-border: rgba(26, 26, 26, 0.10);
    --evt-overlay: rgba(20, 30, 50, 0.55);
    --evt-section-padding-block: var(--spacing-regular, 6em);
}

.evt-landingpage { overflow-x: clip; }

/* Section primitives */
.evt-section {
    padding-block: var(--evt-section-padding-block);
    scroll-margin-top: var(--menu-height, 110px);
    position: relative;
}

.evt-section-intro {
    max-width: 720px;
    margin: 0 auto 4rem;
    text-align: center;
    font-size: 2rem;
    line-height: 1.5;
    color: var(--color-main, #4B4B4B);
}

.evt-section-intro p:last-child { margin-bottom: 0; }

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
    .evt-landingpage * {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================================
   Buttons - matching the site's .csc-button.button convention
   (pill 40px radius, 2px border, uppercase, transparent fill,
    orange for primary, blue for secondary/ghost)
   ============================================================ */

.evt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1.2rem 4rem;
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 40px;
    background: transparent;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.evt-btn--primary {
    border-color: var(--color-orange, #F39200);
    color: var(--color-orange, #F39200);
    background: transparent;
}

.evt-btn--primary:hover,
.evt-btn--primary:focus-visible {
    background: var(--color-orange, #F39200);
    color: #fff;
}

.evt-btn--ghost {
    border-color: var(--color-blue, #0053A1);
    color: var(--color-blue, #0053A1);
    background: transparent;
}

.evt-btn--ghost:hover,
.evt-btn--ghost:focus-visible {
    background: var(--color-blue, #0053A1);
    color: #fff;
}

.evt-btn-arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.evt-btn:hover .evt-btn-arrow,
.evt-btn:focus-visible .evt-btn-arrow {
    transform: translateY(2px);
}

/* Higher-specificity overrides to defeat the parent theme's link rule
   :is(#page-content, .mce-content-body) :is(a, .link-style):not(.button, .link-with-arrow)
   which forces blue + underline on every <a>. */
#page-content .evt-btn,
#page-content a.evt-btn {
    text-decoration: none !important;
}

#page-content .evt-btn--primary,
#page-content a.evt-btn--primary {
    color: var(--color-orange, #F39200) !important;
}

#page-content .evt-btn--primary:hover,
#page-content .evt-btn--primary:focus-visible,
#page-content a.evt-btn--primary:hover,
#page-content a.evt-btn--primary:focus-visible {
    color: #fff !important;
}

#page-content .evt-btn--ghost,
#page-content a.evt-btn--ghost {
    color: var(--color-blue, #0053A1) !important;
}

#page-content .evt-btn--ghost:hover,
#page-content .evt-btn--ghost:focus-visible,
#page-content a.evt-btn--ghost:hover,
#page-content a.evt-btn--ghost:focus-visible {
    color: #fff !important;
}

/* ============================================================
   Hero
   Site-style: text first, centred, .with-separator H1, then a
   prominent full-width hero image below.
   ============================================================ */

.evt-hero {
    position: relative;
    padding-block: 4rem 0;
    scroll-margin-top: var(--menu-height, 110px);
}

/* Native smooth scroll for hash anchors. JS keeps fine-grained
   control for [data-evt-cta] but anchor-jumps inside the page
   should glide. */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

@media (max-width: 768px) {
    .evt-hero {
        padding-block: 0 0;
    }
}

.evt-hero-inner {
    display: block;
    text-align: center;
}

.evt-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-orange, #F39200);
    margin: 0 0 2rem;
}

/* Hero titel: site provides .with-separator (line+symbol+line). When the
   SEO h1 is set, the title renders as <p> not <h1>, so we declare the
   large light blue heading style explicitly. */
.evt-hero-titel {
    font-size: 6.2rem;
    line-height: 1.05;
    font-weight: 300;
    color: var(--color-blue, #0053A1);
    margin-block: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .evt-hero-titel { font-size: 4rem; }
}

.evt-hero-lead {
    max-width: 720px;
    margin: 2rem auto 0;
    font-size: 2.1rem;
    line-height: 1.55;
    color: var(--color-main, #4B4B4B);
}

.evt-hero-meta {
    margin: 3rem 0 0;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-main, #4B4B4B);
    opacity: 0.85;
}

.evt-hero-meta-sep {
    color: var(--color-orange, #F39200);
    margin-inline: 1rem;
    opacity: 0.7;
}

.evt-hero-tags {
    list-style: none;
    padding: 0;
    margin: 2.5rem auto 0;
    max-width: 880px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    font-size: 1.5rem;
    color: var(--color-main, #4B4B4B);
    opacity: 0.75;
}

.evt-hero-tags li {
    position: relative;
    padding: 0;
}

#page-content .evt-hero-tags li {
    padding-left: 0;
}

#page-content .evt-hero-tags li::before {
    display: none;
}

.evt-hero-tags li:not(:last-child)::after {
    content: "·";
    color: var(--color-orange, #F39200);
    margin-inline-start: 1.5rem;
    opacity: 0.8;
}

.evt-hero-tags a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.evt-hero-tags a:hover,
.evt-hero-tags a:focus-visible {
    color: var(--color-blue, #0053A1);
}

#page-content .evt-hero-tags a {
    color: inherit;
    text-decoration: none !important;
}

#page-content .evt-hero-tags a:hover,
#page-content .evt-hero-tags a:focus-visible {
    color: var(--color-blue, #0053A1);
}

.evt-hero-cta-row {
    margin: 4rem 0 0;
    text-align: center;
}

.evt-hero-image-figure {
    margin: 6rem 0 0;
    padding: 0;
}

@media (max-width: 768px) {
    .evt-hero-image-figure {
        margin-top: 4rem;
    }
}

.evt-hero-image-figure img {
    width: 100%;
    height: 70vh;
    display: block;
    object-fit: cover;
}

/* Inhaltsbreite-Variante: Bild auf Hero-Text-Breite (880px,
   matches .evt-hero-tags) mit border-radius, statt full-bleed
   unter dem Text. */
.evt-hero-image-figure--inset {
    max-width: 880px;
    width: calc(100% - 4rem);
    margin-inline: auto;
}

.evt-hero-image-figure--inset img {
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}

@media (max-width: 768px) {
    .evt-hero-image-figure--inset {
        width: calc(100% - 2rem);
    }
    .evt-hero-image-figure--inset img {
        border-radius: 6px;
    }
}

/* Full-bleed background variant: image fills the hero section, the
   inner container becomes a configurable tinted "text box" so the
   text stays readable on busy photos. Color + opacity come from
   ACF (evt_hero_textbox_color, evt_hero_textbox_opacity). */
.evt-hero--layout-background {
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    color: #fff;
    display: grid;
    align-items: center;
    padding-block: 8rem;
}

.evt-hero--layout-background .evt-hero-inner {
    max-width: 78rem;
    width: calc(100% - 4rem);
    margin-inline: auto;
    padding: 5rem 5rem 4rem;
    border-radius: 6px;
    backdrop-filter: blur(2px);
}

.evt-hero--layout-background .evt-hero-titel,
.evt-hero--layout-background .evt-hero-lead,
.evt-hero--layout-background .evt-hero-meta,
.evt-hero--layout-background .evt-hero-eyebrow,
.evt-hero--layout-background .evt-hero-tags {
    color: #fff;
}

.evt-hero--layout-background .evt-hero-meta-sep {
    color: var(--color-orange, #F39200);
    opacity: 0.9;
}

@media (max-width: 600px) {
    .evt-hero--layout-background .evt-hero-inner {
        padding: 3rem 2.4rem 2.6rem;
    }
}

/* ============================================================
   Über
   ============================================================ */

.evt-ueber-grid {
    display: grid;
    gap: 5rem 4rem;
    max-width: 960px;
    margin-inline: auto;
}

.evt-ueber-grid--1 { grid-template-columns: 1fr; max-width: 720px; }
.evt-ueber-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evt-ueber-grid--3plus { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1199px) {
    .evt-ueber-grid--2,
    .evt-ueber-grid--3plus {
        grid-template-columns: 1fr;
        max-width: 720px;
    }
}

.evt-ueber-block {
    text-align: left;
}

@media (max-width: 768px) {
    .evt-ueber-block {
        text-align: center;
    }
    .evt-ueber-grid {
        gap: 4rem;
    }
}

.evt-ueber-block-headline {
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-blue, #0053A1);
    margin-block-end: 1.2rem;
}

.evt-ueber-block-body {
    font-size: 1.7rem;
    line-height: 1.65;
    color: var(--color-main, #4B4B4B);
}

.evt-ueber-block-body p { margin: 0 0 1em; }
.evt-ueber-block-body p:last-child { margin-bottom: 0; }

.evt-ueber-lead {
    text-align: center;
    font-size: 2.1rem;
    line-height: 1.55;
    color: var(--color-main, #4B4B4B);
    max-width: 720px;
    margin: 0 auto 4rem;
}

/* ============================================================
   Ghost CTA / In-section CTA wrapper
   ============================================================ */

.evt-in-section-cta-wrapper {
    margin-block-start: 6rem;
    text-align: center;
}

/* ============================================================
   Programm - editorial list
   Large light-weight time anchor on the left, location/title/description
   on the right, thin rules between rows.
   ============================================================ */

.evt-programm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 980px;
    margin-inline: auto;
}

.evt-programm-item {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 4rem;
    padding: 4rem 0;
    align-items: start;
    position: relative;
}

#page-content .evt-programm-item { padding-left: 0; }
#page-content .evt-programm-item::before { display: none; }

.evt-programm-time {
    margin: 0;
    font-size: 4.6rem;
    font-weight: 300;
    line-height: 1;
    color: var(--color-blue, #0053A1);
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
    white-space: nowrap;
}

.evt-programm-content {
    text-align: left;
}

.evt-programm-location {
    margin: 0 0 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange, #F39200);
}

.evt-programm-titel {
    margin: 0 0 1rem;
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-main, #1a1a1a);
}

.evt-programm-beschreibung {
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--color-main, #4B4B4B);
}

.evt-programm-beschreibung p { margin: 0 0 0.8em; }
.evt-programm-beschreibung p:last-child { margin-bottom: 0; }

@media (max-width: 768px) {
    .evt-programm-list {
        max-width: none;
    }
    .evt-programm-item {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        padding: 2.8rem 0;
        text-align: center;
    }
    .evt-programm-time {
        font-size: 3.2rem;
        margin-block-end: 0.4rem;
    }
    .evt-programm-content {
        text-align: center;
    }
}

/* ============================================================
   Künstler*innen
   ============================================================ */

.evt-kuenstler-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5rem 4rem;
    max-width: 1100px;
}

.evt-kuenstler-card {
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 0 1 320px;
    text-align: center;
}

@media (max-width: 768px) {
    .evt-kuenstler-grid {
        max-width: 420px;
        gap: 4rem;
    }
    .evt-kuenstler-card {
        flex: 1 1 100%;
    }
}

#page-content .evt-kuenstler-card { padding-left: 0; }
#page-content .evt-kuenstler-card::before { display: none; }

.evt-kuenstler-bild {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    margin-block-end: 2rem;
    background: var(--evt-card-bg);
    max-width: 320px;
    width: 100%;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .evt-kuenstler-bild {
        max-width: 280px;
    }
}

.evt-kuenstler-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.evt-kuenstler-card:hover .evt-kuenstler-bild img {
    transform: scale(1.04);
}

.evt-kuenstler-name {
    margin: 0 0 0.4rem;
    font-size: 2.6rem;
    font-weight: 300;
    line-height: 1.15;
    color: var(--color-blue, #0053A1);
}

.evt-kuenstler-rolle {
    margin: 0 0 1.2rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-orange, #F39200);
}

.evt-kuenstler-bio {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--color-main, #4B4B4B);
}

.evt-kuenstler-bio p { margin: 0 0 0.8em; }
.evt-kuenstler-bio p:last-child { margin-bottom: 0; }

/* ============================================================
   Stadtkarte
   ============================================================ */

.evt-section--karte > .evt-karte-wrapper {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 4rem;
}

.evt-karte {
    width: 100%;
    aspect-ratio: 21 / 9;
    max-height: 640px;
    position: relative;
    background: var(--evt-card-bg);
}

@media (max-width: 992px) {
    .evt-karte { aspect-ratio: 16 / 9; }
}

@media (max-width: 600px) {
    .evt-karte { aspect-ratio: 4 / 3; }
}

/* The activate button auto-hides on desktop now (we auto-activate via JS).
   It's only visible if the JS hasn't run or the user didn't press it. */
.evt-karte-activate {
    position: absolute;
    inset: 0;
    z-index: 500;
    background: rgba(246, 245, 241, 0.55);
    backdrop-filter: blur(2px);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-blue, #0053A1);
    transition: background 0.25s;
}

.evt-karte-activate:hover,
.evt-karte-activate:focus-visible {
    background: rgba(246, 245, 241, 0.75);
}

.evt-karte.is-activated .evt-karte-activate { display: none; }

@media (max-width: 768px) {
    .evt-karte-activate { display: none; }
}

/* Custom marker pin */
.evt-map-pin {
    background: transparent !important;
    border: none !important;
    transition: transform 0.2s;
}

.evt-map-pin:hover {
    transform: translateY(-2px);
}

.evt-map-pin svg {
    width: 32px;
    height: 40px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* Leaflet popup styling overrides */
.evt-popup .leaflet-popup-content-wrapper {
    border-radius: 6px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    padding: 0.6rem 0.4rem;
}

.evt-popup .leaflet-popup-content {
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.45;
    margin: 1.8rem 2.2rem;
    color: var(--color-main, #4B4B4B);
}

.evt-popup .leaflet-popup-content .evt-popup-title {
    display: block;
    color: var(--color-blue, #0053A1);
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1.25;
    padding-block-end: 1rem;
    margin-block-end: 1.2rem;
    padding-inline-end: 2.4rem;
    border-block-end: 1px solid rgba(0, 83, 161, 0.18);
}

.evt-popup .leaflet-popup-content .evt-popup-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.evt-popup .leaflet-popup-content .evt-popup-list li {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: baseline;
    gap: 1.2rem;
}

.evt-popup .leaflet-popup-content .evt-popup-list li + li {
    margin-block-start: 0.6rem;
}

.evt-popup .leaflet-popup-content .evt-popup-list li::before { display: none; }

.evt-popup .leaflet-popup-content .evt-popup-time {
    flex: 0 0 auto;
    min-width: 8rem;
    color: var(--color-blue, #0053A1);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.evt-popup .leaflet-popup-content .evt-popup-list:not(.evt-popup-list--timed) li {
    padding-inline-start: 1.6rem;
}
.evt-popup .leaflet-popup-content .evt-popup-list:not(.evt-popup-list--timed) li::before {
    display: block;
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.8em;
    width: 0.8rem;
    height: 1px;
    background: var(--color-blue, #0053A1);
    opacity: 0.6;
}

.evt-popup .leaflet-popup-content .evt-popup-event {
    flex: 1 1 auto;
}

#page-content .evt-popup .leaflet-popup-content .evt-popup-list li {
    padding-left: 0;
}
#page-content .evt-popup .leaflet-popup-content .evt-popup-list:not(.evt-popup-list--timed) li {
    padding-left: 1.6rem;
}

/* Custom close button - circular, with hover. Selector includes
   .leaflet-container so we beat Leaflet's own
   `.leaflet-container a.leaflet-popup-close-button` (specificity 0,2,1).
   Use a flex centred layout so the glyph stays visually centred
   regardless of font metrics and no transform is needed on hover
   (avoids the "jump" effect of scale when the element is anchored
   to top/right). */
.leaflet-container .evt-popup a.leaflet-popup-close-button {
    width: 2.6rem;
    height: 2.6rem;
    top: 0.8rem;
    right: 0.8rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #0053A1;
    background: rgba(0, 83, 161, 0.08);
    font: 600 1.8rem/1 var(--main-font, 'Catamaran'), sans-serif;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.leaflet-container .evt-popup a.leaflet-popup-close-button:hover,
.leaflet-container .evt-popup a.leaflet-popup-close-button:focus-visible {
    background: #0053A1;
    color: #fff;
    outline: none;
    text-decoration: none;
}

#page-content .leaflet-container .evt-popup a.leaflet-popup-close-button {
    color: #0053A1;
    text-decoration: none !important;
}
#page-content .leaflet-container .evt-popup a.leaflet-popup-close-button:hover,
#page-content .leaflet-container .evt-popup a.leaflet-popup-close-button:focus-visible {
    color: #fff;
    text-decoration: none !important;
}

#page-content .leaflet-control a,
#page-content .leaflet-control a:hover,
#page-content .leaflet-control a:focus {
    text-decoration: none !important;
}

.evt-karte-hinweis {
    list-style: none;
    margin: 0 auto;
    padding: 1.8rem 2.4rem;
    max-width: 880px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.4rem 3.2rem;
    font-size: 1.5rem;
    line-height: 1.4;
    color: var(--color-main, #4B4B4B);
    border-block: 1px solid rgba(0, 83, 161, 0.12);
}

.evt-karte-hinweis li {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
}

.evt-karte-hinweis li::before { display: none; }

#page-content .evt-karte-hinweis li {
    padding-left: 0;
}

#page-content .evt-karte-hinweis li::before {
    display: none;
}

.evt-karte-hinweis .evt-hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-blue, #0053A1);
}

.evt-karte-hinweis svg {
    width: 20px;
    height: 20px;
    color: inherit;
}

/* Default: pointer (mouse / trackpad) - hide touch variants */
.evt-karte-hinweis .evt-hint-svg--touch,
.evt-karte-hinweis .evt-hint-text--touch {
    display: none;
}

/* Touch devices: swap to touch variants */
@media (pointer: coarse) {
    .evt-karte-hinweis .evt-hint-svg--mouse,
    .evt-karte-hinweis .evt-hint-text--mouse {
        display: none;
    }
    .evt-karte-hinweis .evt-hint-svg--touch {
        display: inline-block;
    }
    .evt-karte-hinweis .evt-hint-text--touch {
        display: inline;
    }
}

/* Pinch animation - two fingers spread apart and back */
.evt-pinch-l {
    transform-origin: center;
    transform-box: fill-box;
    animation: evt-pinch-l 1.8s ease-in-out infinite;
}
.evt-pinch-r {
    transform-origin: center;
    transform-box: fill-box;
    animation: evt-pinch-r 1.8s ease-in-out infinite;
}

@keyframes evt-pinch-l {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-2px); }
}
@keyframes evt-pinch-r {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .evt-pinch-l, .evt-pinch-r { animation: none; }
}

@media (max-width: 600px) {
    .evt-karte-hinweis {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        align-items: center;
        column-gap: 1.2rem;
        row-gap: 1.6rem;
        max-width: none;
        padding: 2.2rem 2rem;
        font-size: 1.5rem;
    }
    .evt-karte-hinweis li {
        display: contents;
    }
    .evt-karte-hinweis svg {
        width: 22px;
        height: 22px;
    }
    .evt-karte-hinweis .evt-hint-icon {
        justify-self: center;
    }
}

/* Venue text list below the map */
#page-content .evt-karte-orte-list {
    padding-left: 0;
}

.evt-karte-orte-list {
    list-style: none;
    margin: 2.4rem auto 0;
    padding: 0;
    max-width: 880px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
    gap: 0.6rem 3rem;
}

.evt-karte-ort-item {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    font-size: 1.6rem;
    color: var(--color-main, #4B4B4B);
    padding: 0.4rem 0;
    margin: 0;
}

#page-content .evt-karte-ort-item {
    padding-left: 0;
}

#page-content .evt-karte-ort-item::before {
    display: none;
}

.evt-karte-ort-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--color-blue, #0053A1);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
}

.evt-karte-ort-label {
    flex: 1 1 auto;
}

/* ============================================================
   Sponsoren - card grid: logo (grayscale, color on hover) + caption
   ============================================================ */

.evt-section--sponsoren {
    padding-block: calc(var(--evt-section-padding-block) * 0.7);
    text-align: center;
}

.evt-sponsoren-eyebrow {
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin: 0 0 3.5rem;
}

.evt-sponsoren-grid {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

#page-content .evt-sponsoren-grid li,
#page-content .evt-sponsoren-grid .evt-sponsoren-card {
    padding-left: 0;
}
#page-content .evt-sponsoren-grid li::before,
#page-content .evt-sponsoren-grid .evt-sponsoren-card::before {
    display: none;
}

.evt-sponsoren-card {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.evt-sponsoren-card-link {
    position: relative;
    overflow: hidden;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1.8rem;
    padding: 3rem 2rem 2.4rem;
    background: #fff;
    border: 1px solid rgba(0, 83, 161, 0.15);
    border-radius: 4px;
    color: var(--color-main, #4B4B4B);
    text-align: center;
    text-decoration: none;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    width: 100%;
}

/* Decorative site watermark (matches #page-content background) in
   the top-right corner of every sponsor card. The hollow-symbol SVG
   already ships in a very light grey (#f7f7f7) so no extra tinting
   is needed. */
.evt-sponsoren-card-link::before {
    content: "";
    position: absolute;
    top: -8%;
    right: -12%;
    width: 70%;
    aspect-ratio: 285 / 161;
    background-image: url('../images/symbol-bg-hollow.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

/* Keep card content above the watermark */
.evt-sponsoren-logo,
.evt-sponsoren-caption,
.evt-sponsoren-name-only {
    position: relative;
    z-index: 1;
}

a.evt-sponsoren-card-link:hover,
a.evt-sponsoren-card-link:focus-visible {
    border-color: var(--color-blue, #0053A1);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 83, 161, 0.10);
    outline: none;
}

.evt-sponsoren-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 1rem;
}

.evt-sponsoren-logo img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.7);
    transition: filter 0.3s ease;
}

a.evt-sponsoren-card-link:hover .evt-sponsoren-logo img,
a.evt-sponsoren-card-link:focus-visible .evt-sponsoren-logo img {
    filter: grayscale(0) opacity(1);
}

/* No-logo card: small orange eyebrow, sponsor name, and a compact
   version of the site's with-separator pattern (two short rules with
   the brand symbol between them). Stays within the Catamaran face;
   the rhythm comes from scale + colour. 3-row grid pins eyebrow to
   the top and the separator to the bottom of the card so they stay
   aligned across sibling cards even when the name wraps to 2-3 lines. */
.evt-sponsoren-name-only {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    text-align: center;
    width: 100%;
    flex: 1;
    gap: 1.2rem;
}

.evt-sponsoren-no-logo-eyebrow {
    font-family: var(--main-font, 'Catamaran'), sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-orange, #F39200);
}

.evt-sponsoren-no-logo-name {
    font-family: var(--main-font, 'Catamaran'), sans-serif;
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 400;
    color: var(--color-main, #4B4B4B);
    word-break: break-word;
}

.evt-sponsoren-no-logo-mark {
    position: relative;
    width: 100%;
    height: 22px;
    background-image: url('../images/symbol-separator.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 18px;
}

.evt-sponsoren-no-logo-mark::before,
.evt-sponsoren-no-logo-mark::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 1px;
    background-color: rgba(0, 83, 161, 0.28);
    transform: translateY(-50%);
}

.evt-sponsoren-no-logo-mark::before {
    right: calc(50% + 22px);
}

.evt-sponsoren-no-logo-mark::after {
    left: calc(50% + 22px);
}

.evt-sponsoren-caption {
    font-family: var(--main-font, 'Catamaran'), sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-main, #4B4B4B);
    transition: color 0.25s ease;
}

a.evt-sponsoren-card-link:hover .evt-sponsoren-caption,
a.evt-sponsoren-card-link:focus-visible .evt-sponsoren-caption {
    color: var(--color-blue, #0053A1);
    opacity: 1;
}

#page-content .evt-sponsoren-card a.evt-sponsoren-card-link {
    color: var(--color-main, #4B4B4B);
    text-decoration: none !important;
    background-image: none;
}
#page-content .evt-sponsoren-card a.evt-sponsoren-card-link:hover,
#page-content .evt-sponsoren-card a.evt-sponsoren-card-link:focus-visible {
    color: var(--color-main, #4B4B4B);
    text-decoration: none !important;
}

/* Captions globally hidden: tile-style cards with a generous fixed
   height. Linked tiles stay slightly taller than non-linked so the
   clickable cards keep more visual weight. */
.evt-sponsoren-card-link--no-caption {
    gap: 0;
    padding: 2rem 1.6rem;
    min-height: 200px;
}
.evt-sponsoren-card-link--no-caption .evt-sponsoren-logo {
    aspect-ratio: auto;
    height: 100%;
    width: 100%;
    max-height: 14rem;
    padding: 0;
}
a.evt-sponsoren-card-link--no-caption {
    min-height: 220px;
    padding: 2.4rem 1.6rem;
}
a.evt-sponsoren-card-link--no-caption .evt-sponsoren-logo {
    max-height: 15rem;
}

/* Slider wrapper hosts the scroll-snap grid and the prev/next arrows
   (arrows hidden on >=768px where the grid is a static 3-col layout). */
.evt-sponsoren-slider-wrapper {
    position: relative;
}

.evt-sponsoren-slider-arrow {
    display: none;
}

/* Under 768px the grid becomes a horizontal scroll-snap slider.
   500-768px: two cards visible per page.
   under 500px: one card per page.
   Prev/next arrows scroll one card at a time in brand-orange.
   Gutter lives on the WRAPPER (outside the scroll container) so it
   never scrolls along with the cards - no neighbouring slide peeks
   in on either edge. The track itself has zero padding and zero
   scroll-padding, so snap targets sit exactly on card.offsetLeft. */
@media (max-width: 768px) {
    .evt-sponsoren-slider-wrapper {
        padding-inline: 4rem;
    }
    .evt-sponsoren-slider-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 3.2rem;
        height: 3.2rem;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        color: var(--color-orange, #F39200);
        cursor: pointer;
        z-index: 2;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .evt-sponsoren-slider-arrow svg {
        width: 2.6rem;
        height: 2.6rem;
        display: block;
    }
    .evt-sponsoren-slider-arrow:hover:not(:disabled),
    .evt-sponsoren-slider-arrow:focus-visible:not(:disabled) {
        outline: none;
        transform: translateY(-50%) scale(1.15);
    }
    .evt-sponsoren-slider-arrow:disabled {
        opacity: 0.25;
        cursor: default;
    }
    .evt-sponsoren-slider-arrow--prev { left: 0.4rem; }
    .evt-sponsoren-slider-arrow--next { right: 0.4rem; }

    .evt-sponsoren-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-inline: 0;
        scroll-padding-inline: 0;
        gap: 1.4rem;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 83, 161, 0.35) transparent;
    }
    .evt-sponsoren-grid::-webkit-scrollbar {
        height: 4px;
    }
    .evt-sponsoren-grid::-webkit-scrollbar-thumb {
        background: rgba(0, 83, 161, 0.35);
        border-radius: 2px;
    }
    .evt-sponsoren-grid::-webkit-scrollbar-track {
        background: transparent;
    }
    .evt-sponsoren-card {
        flex: 0 0 calc(50% - 0.7rem);
        min-width: 0;
        scroll-snap-align: start;
    }
    .evt-sponsoren-card-link {
        padding: 2.4rem 1.4rem 1.8rem;
        gap: 1.4rem;
    }
    .evt-sponsoren-logo {
        height: 6rem;
    }
    .evt-sponsoren-no-logo-mark::before,
    .evt-sponsoren-no-logo-mark::after {
        width: 26px;
    }
}

@media (max-width: 500px) {
    .evt-sponsoren-card {
        flex: 0 0 100%;
    }
}

/* ============================================================
   Anmelde-Block
   ============================================================ */

.evt-section--anmelden { background: transparent; }

.evt-anmelde-container { max-width: 720px; }

.evt-anmelde-intro {
    text-align: center;
    font-size: 1.9rem;
    line-height: 1.55;
    color: var(--color-main, #4B4B4B);
    margin: 0 auto 4rem;
    max-width: 620px;
}

.evt-anmelde-intro p { margin: 0 0 1em; }
.evt-anmelde-intro p:last-child { margin-bottom: 0; }

.evt-anmelde-recap {
    list-style: none;
    padding: 0 0 4rem;
    margin: 0 0 4rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

#page-content .evt-anmelde-recap li { padding-left: 0; }
#page-content .evt-anmelde-recap li::before { display: none; }

.evt-anmelde-recap-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0 3rem;
    position: relative;
    flex: 1 1 0;
    min-width: 14rem;
}

.evt-anmelde-recap-icon {
    width: 2.6rem;
    height: 2.6rem;
    display: block;
    margin-inline: auto;
    color: var(--color-orange, #F39200);
}

.evt-anmelde-recap-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.evt-anmelde-recap-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-main, #4B4B4B);
    opacity: 0.65;
}

.evt-anmelde-recap-value {
    font-size: 1.7rem;
    font-weight: 400;
    color: var(--color-blue, #0053A1);
}

.evt-anmelde-form {
    background: var(--evt-card-bg);
    border-radius: 4px;
    padding: 4rem;
    border: 1px solid var(--evt-card-border);
}

@media (max-width: 600px) {
    .evt-anmelde-recap {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding-bottom: 3rem;
        margin-bottom: 3rem;
    }
    .evt-anmelde-recap-item {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        gap: 1.6rem;
        padding: 1.4rem 0;
    }
    .evt-anmelde-recap-icon {
        flex: 0 0 auto;
        width: 2.2rem;
        height: 2.2rem;
        margin: 0;
    }
    .evt-anmelde-recap-label {
        flex: 0 0 5.5rem;
    }
    .evt-anmelde-recap-value {
        flex: 1 1 auto;
        text-align: left;
    }
    .evt-anmelde-form { padding: 2.4rem; }
}

/* ============================================================
   Form fields (inside Anmelde-Block)
   ============================================================ */

.evt-form {
    display: grid;
    gap: 1.6rem;
}

.evt-form-row {
    display: grid;
    gap: 1.6rem;
}

.evt-form-row-2 { grid-template-columns: 1fr 1fr; }

@media (max-width: 600px) {
    .evt-form-row-2 { grid-template-columns: 1fr; }
}

.evt-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

.evt-form-label {
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-main, #4B4B4B);
}

.evt-form-required {
    color: var(--color-orange, #F39200);
    margin-inline-start: 0.2em;
}

.evt-form-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
    margin-inline-start: 0.4em;
}

.evt-form-field input,
.evt-form-field select,
.evt-form-field textarea {
    font-family: inherit;
    font-size: 1.7rem;
    line-height: 1.4;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--evt-card-border);
    border-radius: 2px;
    background: #fff;
    color: var(--color-main, #4B4B4B);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
}

/* Native select: site-style polish so the dropdown arrow stays visible
   and the height matches the input siblings. Native dropdown UI keeps
   working on mobile (iOS/Android system picker) - no jQuery dependency. */
.evt-form-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%230053A1' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.4rem center;
    background-size: 12px 8px;
    padding-right: 4rem;
    cursor: pointer;
}

.evt-form-field input:focus,
.evt-form-field select:focus,
.evt-form-field textarea:focus {
    outline: none;
    border-color: var(--color-blue, #0053A1);
    box-shadow: 0 0 0 3px rgba(0, 83, 161, 0.15);
}

.evt-form-field--with-counter {
    margin-block-end: 1.6rem;
}

.evt-form-counter {
    position: absolute;
    right: 0.4rem;
    bottom: -2.2rem;
    font-size: 1.2rem;
    color: var(--color-main, #4B4B4B);
    opacity: 0.6;
}

.evt-form-counter.is-near-limit {
    color: var(--color-orange, #F39200);
    opacity: 1;
}

.evt-form-submit {
    justify-self: start;
    margin-block-start: 1.6rem;
}

@media (max-width: 600px) {
    .evt-form-submit {
        justify-self: stretch;
    }
}

/* ============================================================
   Impressum
   ============================================================ */

.evt-section--impressum {
    padding-block: calc(var(--evt-section-padding-block) * 0.5);
}

.evt-impressum-list {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.5rem;
    color: var(--color-main, #4B4B4B);
    opacity: 0.8;
    display: grid;
    gap: 0.6rem;
    text-align: center;
}

.evt-impressum-item {
    display: inline;
}

.evt-impressum-item dt {
    display: inline;
    font-weight: 600;
    margin-inline-end: 0.4rem;
}

.evt-impressum-item dt::after { content: ":"; }

.evt-impressum-item dd {
    display: inline;
    margin: 0;
}

/* ============================================================
   Sticky CTA - dezent, site-style pill
   ============================================================ */

.evt-sticky-cta {
    position: fixed;
    bottom: 1.8rem;
    right: 1.8rem;
    z-index: 90;
    padding: 1rem 2.6rem;
    background: var(--color-orange, #F39200);
    color: #fff;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-decoration: none;
    border: 2px solid var(--color-orange, #F39200);
    border-radius: 40px;
    box-shadow: 0 8px 24px rgba(243, 146, 0, 0.28);
    transform: translateY(140%);
    transition: transform 0.35s ease, background 0.25s, box-shadow 0.25s;
    pointer-events: none;
}

.evt-sticky-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.evt-sticky-cta:hover,
.evt-sticky-cta:focus-visible {
    background: #d97f00;
    border-color: #d97f00;
    box-shadow: 0 10px 28px rgba(217, 127, 0, 0.35);
}

#page-content .evt-sticky-cta,
#page-content a.evt-sticky-cta,
#page-content .evt-sticky-cta:hover,
#page-content .evt-sticky-cta:focus-visible,
#page-content a.evt-sticky-cta:hover,
#page-content a.evt-sticky-cta:focus-visible {
    color: #fff !important;
    text-decoration: none !important;
}

@media (max-width: 768px) {
    .evt-sticky-cta {
        bottom: 1.2rem;
        right: 1.2rem;
        padding: 0.9rem 2.2rem;
        font-size: 1.2rem;
    }
}

/* Add bottom-padding to in-section-cta wrappers on mobile so the Ghost
   CTA never collides with the floating Sticky CTA at section ends. */
@media (max-width: 768px) {
    .evt-in-section-cta-wrapper {
        margin-block-end: 5rem;
    }
}

/* ============================================================
   Restore focus indicators (parent rte.css strips them sitewide
   with '*, :focus { outline: none !important }')
   ============================================================ */

#page-content .evt-btn:focus-visible,
#page-content .evt-sticky-cta:focus-visible,
#page-content .evt-form-field input:focus-visible,
#page-content .evt-form-field select:focus-visible,
#page-content .evt-form-field textarea:focus-visible,
#page-content .evt-form-submit:focus-visible,
#page-content [data-evt-cta]:focus-visible,
#page-content [data-evt-map-activate]:focus-visible {
    outline: 3px solid var(--color-orange, #F39200) !important;
    outline-offset: 2px !important;
}

/* (scroll-reveal removed - was unreliable across page-cache / IO timing
   edge cases. Re-introduce later as a polish step once layout is stable.) */

/* ============================================================
   .screen-reader-text utility (the parent theme strips this from
   front-end stylesheets - we re-declare it here so the SEO h1
   remains visually hidden but accessible).
   ============================================================ */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    word-wrap: normal;
}