/**
 * Locations Slider Styles
 *
 * Animation types: fade, slide, zoom (configurable for photos)
 * Titles, contacts: always smooth fade
 * Map: single inline SVG with interactive markers
 */

/* =========================================
   KEYFRAME ANIMATIONS
   ========================================= */

/* --- Fade (universal) --- */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@-webkit-keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes fadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* --- Slide (photos only, direction-aware) --- */
@-webkit-keyframes slideInFromRight {
    from { opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); }
    to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInFromRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@-webkit-keyframes slideOutToLeft {
    from { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
    to   { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); }
}
@keyframes slideOutToLeft {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-50px); }
}
@-webkit-keyframes slideInFromLeft {
    from { opacity: 0; -webkit-transform: translateX(-50px); transform: translateX(-50px); }
    to   { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes slideInFromLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@-webkit-keyframes slideOutToRight {
    from { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
    to   { opacity: 0; -webkit-transform: translateX(50px); transform: translateX(50px); }
}
@keyframes slideOutToRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(50px); }
}

/* --- Zoom (photos only) --- */
@-webkit-keyframes zoomFadeIn {
    from { opacity: 0; -webkit-transform: scale(1.08); transform: scale(1.08); }
    to   { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes zoomFadeIn {
    from { opacity: 0; transform: scale(1.08); }
    to   { opacity: 1; transform: scale(1); }
}
@-webkit-keyframes zoomFadeOut {
    from { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
    to   { opacity: 0; -webkit-transform: scale(0.94); transform: scale(0.94); }
}
@keyframes zoomFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.94); }
}

/* Radar sweep: .marker-highlight .bew-radar wird komplett per JS gezeichnet (paintRadar) */

/* --- Contact column stagger entrance --- */
@-webkit-keyframes contactColIn {
    from { opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }
    to   { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes contactColIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   WRAPPER
   ========================================= */

.bew-locations {
    width: 100%;
    position: relative;
}

/* =========================================
   TOP ROW: Image + Map
   ========================================= */

.bew-locations__top {
    display: flex;
    align-items: flex-end;
    width: 100%;
    position: relative;
}

/* --- Image Column --- */

/* Die Spaltenbreite kommt aus dem Control „Breite der Bildspalte" und gilt
   je Gerät. `order` holt das Bild nach links: im Markup steht es hinter der
   Karte, damit es mobil rechts neben den Kontaktdaten schwimmen kann. */
.bew-locations__image-col {
    flex: 0 0 var(--bew-image-col, 40%);
    max-width: var(--bew-image-col, 40%);
    order: 1;
    position: relative;
    z-index: 2;
}

/* --- Navigation Arrows --- */

/* Der Zug nach links holt die Pfeile aus der Bildspalte heraus in den
   Seitenrand. Als feste -135px lief der linke Pfeil unterhalb von rund
   1670px Fensterbreite aus dem Bild – dort ist der Rand schmaler als der
   Zug. Deshalb auf den Rand gedeckelt, der wirklich da ist:
   (Fenster − Rasterbreite) / 2, minus 12px Luft zur Fensterkante.
   `--container-max-width` setzt Elementor am Container und vererbt es bis
   hierher; der Ersatzwert greift nur, falls das Raster einmal fehlt. */
.bew-locations__nav {
    --bew-nav-pull: 135px;
    position: absolute;
    left: 0;
    bottom: 5%;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 80px;
    margin-left: calc(-1 * clamp(
        0px,
        (100vw - var(--container-max-width, 1400px)) / 2 - 12px,
        var(--bew-nav-pull)
    ));
}

.bew-locations__arrow {
    background: none !important;
    background-color: transparent !important;
    border: none;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.bew-locations__arrow:hover {
    background: transparent !important;
    background-color: transparent !important;
    transform: scale(1.18);
}

.bew-locations__arrow:focus,
.bew-locations__arrow:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
    box-shadow: none;
}

.bew-locations__arrow:active {
    background: transparent !important;
    background-color: transparent !important;
    transform: scale(0.92);
}

.bew-locations__arrow svg {
    width: 100px;
    height: auto;
    background: transparent !important;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bew-locations__arrow svg path {
    stroke: white;
    fill: none;
    transition: stroke 0.3s ease;
}

/* --- Image Wrap --- */

.bew-locations__image-wrap {
    position: relative;
    width: 100%;
    /* Safari < 15 fallback for aspect-ratio */
    padding-top: 133.333%; /* 3:4 */
    height: 0;
    overflow: hidden;
    background: #d0d0d0;
}

@supports (aspect-ratio: 3 / 4) {
    .bew-locations__image-wrap {
        padding-top: 0;
        height: auto;
        aspect-ratio: 3 / 4;
    }
}

/* Zwei Klassen sind Pflicht: Elementors Reset `.elementor img { height: auto }`
   hat Spezifität 0,1,1 und würde eine einklassige Regel schlagen. Ohne das
   füllt das Bild nur bei zufällig 3:4-hohen Dateien den Wrapper. */
.bew-locations__image-wrap .bew-locations__photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.bew-locations__photo.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Photo: Fade */
.bew-locations__photo.is-active.enter-fade {
    -webkit-animation: fadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: fadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bew-locations__photo.is-leaving.leave-fade {
    opacity: 1;
    -webkit-animation: fadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: fadeOut 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Photo: Slide */
.bew-locations__photo.is-active.enter-slide-next {
    -webkit-animation: slideInFromRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: slideInFromRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bew-locations__photo.is-active.enter-slide-prev {
    -webkit-animation: slideInFromLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: slideInFromLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bew-locations__photo.is-leaving.leave-slide-next {
    opacity: 1;
    -webkit-animation: slideOutToLeft 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: slideOutToLeft 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.bew-locations__photo.is-leaving.leave-slide-prev {
    opacity: 1;
    -webkit-animation: slideOutToRight 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: slideOutToRight 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Photo: Zoom */
.bew-locations__photo.is-active.enter-zoom {
    -webkit-animation: zoomFadeIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation: zoomFadeIn 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.bew-locations__photo.is-leaving.leave-zoom {
    opacity: 1;
    -webkit-animation: zoomFadeOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: zoomFadeOut 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Header on Map --- */

.bew-locations__header {
    position: absolute;
    top: 8%;
    left: 20px;
    z-index: 5;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1F3566;
    margin: 0;
    background: transparent;
    pointer-events: none;
    box-sizing: border-box;
}

/* --- Map Column --- */

.bew-locations__map-col {
    flex: 1 1 60%;
    order: 2;
    position: relative;
    z-index: 1;
    margin-top: -60px;
    padding-left: 20px;
}

/* SVG map container */
.bew-locations__map-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bew-locations__map-wrap svg {
    width: 90%;
    height: auto;
    display: block;
}

/* SVG marker interactivity */
.bew-locations__map-wrap .location-marker {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.bew-locations__map-wrap .location-marker:hover {
    opacity: 0.75;
}

.bew-locations__map-wrap .location-marker.is-active {
    opacity: 1;
}

/* Highlight: positioned via JS animation (requestAnimationFrame) */
.bew-locations__map-wrap .marker-highlight {
    /* No CSS transition needed – JS handles smooth animation */
}

/* =========================================
   BOTTOM ROW: Name + Contact
   ========================================= */

.bew-locations__bottom {
    position: relative;
    padding-top: 15px;
    max-width: 66.666%;
}

/* --- Title / Contact Wrappers (prevent overlap) --- */

.bew-locations__titles-wrap,
.bew-locations__contacts-wrap {
    position: relative;
}

/* --- Title --- */

.bew-locations__title {
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin: 0 0 20px 0;
    line-height: 1.2;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.bew-locations__title.is-active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* Title: Always pure fade */
.bew-locations__title.is-active.enter-fade {
    -webkit-animation: fadeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
    animation: fadeIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.bew-locations__title.is-leaving.leave-fade {
    opacity: 1;
    z-index: 2;
    -webkit-animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: fadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Contact Info Grid --- */

.bew-locations__contact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 30px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}

.bew-locations__contact.is-active {
    opacity: 1;
    position: relative;
    pointer-events: auto;
}

/* Contact: Fade with staggered columns */
.bew-locations__contact.is-active.enter-fade {
    -webkit-animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}
.bew-locations__contact.is-active.enter-fade .bew-locations__contact-col:nth-child(1) {
    -webkit-animation: contactColIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
    animation: contactColIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.bew-locations__contact.is-active.enter-fade .bew-locations__contact-col:nth-child(2) {
    -webkit-animation: contactColIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
    animation: contactColIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both;
}
.bew-locations__contact.is-active.enter-fade .bew-locations__contact-col:nth-child(3) {
    -webkit-animation: contactColIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
    animation: contactColIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.32s both;
}
.bew-locations__contact.is-leaving.leave-fade {
    opacity: 1;
    z-index: 2;
    -webkit-animation: fadeOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation: fadeOut 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* --- Contact Column --- */

.bew-locations__contact-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.bew-locations__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 2px;
    color: #1a2744;
}

.bew-locations__icon svg,
.bew-locations__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.bew-locations__contact-text {
    font-size: 13px;
    line-height: 1.6;
    color: white;
    word-break: break-word;
    overflow-wrap: break-word;
}

.bew-locations__contact-text strong {
    font-weight: 700;
    display: block;
}

.bew-locations__contact-text a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bew-locations__contact-text a:hover {
    color: #a6ce39;
    text-decoration: underline;
}

/* =========================================
   RESPONSIVE: ≤1200px
   ========================================= */

@media (max-width: 1200px) {
    .bew-locations__header {
        font-size: 2rem;
    }

    .bew-locations__map-col {
        margin-top: -40px;
    }

    .bew-locations__nav {
        --bew-nav-pull: 100px;
        gap: 30px;
    }

    .bew-locations__arrow svg {
        width: 60px;
    }

    .bew-locations__title {
        font-size: 30px;
    }

    .bew-locations__contact {
        gap: 0 20px;
    }

    .bew-locations__contact-text {
        font-size: 12px;
    }
}

/* =========================================
   PFEILE MITTIG: bis 1448px

   Der Zug nach links lebt vom Seitenrand neben dem Raster. Den gibt es
   erst ab 1448px Fensterbreite: darunter deckelt Elementor
   `--container-max-width` auf `100vw - 48px`, der Rand ist also immer
   24px breit und der Zug bleibt bei mageren 12px stehen. Die Pfeile
   kleben dann in der linken unteren Ecke des Bildes und der linke ragt
   nur mit einem Zipfel heraus – das sieht nach Versehen aus.

   Deshalb hier: nicht heraus, sondern mittig. Die Pfeile stehen
   waagerecht zentriert im Bild, die Höhe (`bottom: 5%`) bleibt.
   Ab 1449px wächst der Rand, der Zug greift wieder, und die Pfeile
   nehmen ihren Platz über der Bildkante ein wie im Entwurf.

   Die Untergrenze hält die Regel vom gestapelten Aufbau fern; dort
   stehen die Pfeile über und unter dem Bild (siehe unten).
   ========================================= */

@media (min-width: 1025px) and (max-width: 1448px) {
    .bew-locations__nav {
        left: 50%;
        margin-left: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

/* =========================================
   RESPONSIVE: ≤1024px
   ========================================= */

@media (max-width: 1024px) {
    .bew-locations__header {
        font-size: 1.75rem;
        top: 5%;
        left: 16px;
    }

    .bew-locations__map-col {
        margin-top: -30px;
    }

    .bew-locations__nav {
        margin-left: 0;
        left: 16px;
        bottom: 16px;
        gap: 20px;
    }

    .bew-locations__arrow svg {
        width: 40px;
    }

    .bew-locations__bottom {
        max-width: 75%;
    }
}

/* =========================================
   SLIDER GESTAPELT: ≤1024px

   Dieselbe Reihenfolge wie im Entwurf: Deutschlandkarte über die volle
   Breite, darunter links Standortname und Kontaktdaten, rechts das Bild
   mit je einem Pfeil darüber und darunter.

   `display: contents` löst die Zeile „Bild + Karte" auf, damit Karte und
   Bild zu Geschwistern der Info-Spalte werden. So bleibt das Markup für
   alle Breiten dasselbe — nur der Fluss ändert sich.

   Das Bild schwimmt rechts, statt in einer eigenen Rasterspalte zu
   stehen: Jede Kontaktzeile weicht ihm für sich aus und nutzt unterhalb
   des Bildes wieder die volle Breite. Genau deshalb steht die E-Mail im
   Entwurf über die ganze Zeile und bricht nicht mittendrin um.

   Bewusst NICHT hier: Pfeilgröße, Icon-Größe, Abstände und die Breite
   des Info-Bereichs. Die steuert Elementor über Controls mit eigenen
   Vorgaben je Gerät; dessen Selektor führt vier Klassen und wäre von hier
   aus nur mit !important zu schlagen.

   Die Grenze liegt bei 1024px, also auf Elementors Gerät „Tablet".
   Nebeneinander tragen Bild und Karte darunter nicht mehr: die Karte
   schrumpft so weit, dass die fest im SVG stehenden Ortsnamen unleserlich
   werden, und die Überschrift läuft in die Karte hinein. Weil der Aufbau
   damit schon ab Tablet greift, führen die zugehörigen Controls in
   locations-grid.php neben ihren Mobil- auch Tablet-Vorgaben.
   ========================================= */

@media (max-width: 1024px) {

    /* `flow-root` umschließt das gefloatete Bild, ohne etwas zu kappen –
       im Gegensatz zu `overflow: hidden` bleiben Schatten und Pfeile heil. */
    .bew-locations.bew-locations--slider {
        display: flow-root;
    }

    /* Hebt die Bild-/Karten-Zeile auf; ihre Kinder rutschen in den Fluss. */
    .bew-locations.bew-locations--slider .bew-locations__top {
        display: contents;
    }

    /* --- Überschrift: läuft im Textfluss über der Karte ---
       `static` macht die Positions-Controls (top/left) wirkungslos, statt
       sie mit !important zu überschreiben. */
    .bew-locations.bew-locations--slider .bew-locations__header {
        position: static;
        pointer-events: auto;
    }

    /* --- Karte: volle Breite, oben --- */
    .bew-locations.bew-locations--slider .bew-locations__map-col {
        max-width: none;
        margin-top: 0;
        padding-left: 0;
    }

    .bew-locations.bew-locations--slider .bew-locations__map-wrap {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* --- Info-Bereich: Standortname und Kontaktdaten ---
       `max-width: none` hebt die 75 % aus dem Zweispalter auf; das Control
       „Breite des Info-Bereichs" setzt hier ohnehin 100 %, aber ohne diese
       Zeile hinge das Ergebnis allein an dessen Vorgabe. */
    .bew-locations.bew-locations--slider .bew-locations__bottom {
        width: auto;
        max-width: none;
        padding: 18px 0 0;
    }

    /* Aus dem Raster wird ein Stapel: nur so kann jede Zeile einzeln
       neben dem Bild schmaler werden und darunter wieder aufmachen.
       Der Zeilenabstand kommt weiterhin aus dem Control „Spalten-Abstand". */
    .bew-locations.bew-locations--slider .bew-locations__contact {
        display: block;
    }

    /* Icon neben den Text statt darüber – neben dem Bild gewinnt das
       gut 60px Höhe je Block. `width: auto` lässt die Zeile dem Bild
       ausweichen, statt darunter zu verschwinden. */
    .bew-locations.bew-locations--slider .bew-locations__contact-col {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 10px;
        width: auto;
    }

    .bew-locations.bew-locations--slider .bew-locations__contact-col + .bew-locations__contact-col {
        margin-top: var(--bew-contact-gap, 16px);
    }

    .bew-locations.bew-locations--slider .bew-locations__icon {
        margin-top: 2px;
        margin-bottom: 0;
    }

    /* --- Bildspalte: schwimmt rechts neben den Kontaktdaten ---
       Ohne Polster: der Float soll genau so hoch sein wie das Bild, damit
       die E-Mail-Zeile darunter wieder die volle Breite bekommt. Die
       Pfeile ragen deshalb aus der Spalte heraus (siehe unten). */
    .bew-locations.bew-locations--slider .bew-locations__image-col {
        float: right;
        width: var(--bew-image-col, 40%);
        max-width: none;
        margin: 0 0 8px 16px;
        padding: 0;
        z-index: 3;
    }

    .bew-locations.bew-locations--slider .bew-locations__image-wrap {
        box-shadow: -6px 6px 24px rgba(0, 0, 0, 0.2);
    }

    /* --- Pfeile: einer über, einer unter dem Bild ---
       Sie stehen bewusst außerhalb der Spalte (negative Werte), damit der
       Float nur so hoch ist wie das Bild selbst. */
    .bew-locations.bew-locations--slider .bew-locations__nav {
        position: absolute;
        top: -34px;
        right: auto;
        bottom: -34px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        margin-left: 0;
        gap: 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: auto;
        pointer-events: none;
    }

    .bew-locations.bew-locations--slider .bew-locations__arrow {
        pointer-events: auto;
        padding: 6px;
    }

    /* Der obere Pfeil zeigt nach oben zur Karte, der untere nach unten. */
    .bew-locations.bew-locations--slider .bew-locations__arrow--prev svg,
    .bew-locations.bew-locations--slider .bew-locations__arrow--next svg {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

/* =========================================
   SLIDER MOBIL: ≤400px

   Auf den schmalsten Geräten wird die Bildspalte sonst so eng, dass die
   Adresse daneben Zeile für Zeile umbricht.
   ========================================= */

@media (max-width: 400px) {
    .bew-locations.bew-locations--slider .bew-locations__image-col {
        margin-left: 12px;
    }
}

/* =========================================
   GRID VARIANT
   ========================================= */

.bew-locations--grid {
    /* !important to prevent slider-variant media queries from overriding */
    display: block !important;
    -webkit-box-orient: unset !important;
    -webkit-box-direction: unset !important;
    -ms-flex-direction: unset !important;
    flex-direction: unset !important;
}

/* Header: override absolute positioning used by slider variant */
.bew-locations--grid .bew-locations__header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    text-align: center;
    pointer-events: auto;
    margin-bottom: 16px;
}

/* --- Map section (centered above cards) --- */

.bew-locations__map-section {
    display: block;
    width: 100%;
    margin-bottom: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Single-class selector (specificity 0,1,0) so Elementor's 3-class selector always overrides */
.bew-locations--grid .bew-locations__map-wrap {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.bew-locations--grid .bew-locations__map-wrap svg {
    width: 100% !important;
    height: auto !important;
    display: block;
    max-width: 100%;
    /* Safari SVG rendering fixes */
    overflow: visible;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* --- Cards grid --- */

.bew-locations__cards-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    clear: both;
    float: none;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* --- Individual card (link) ---
   Bild oben, Infobereich unten: als Spalte, damit sich Karten mit
   unterschiedlich langen Adressen auf gleiche Höhe ziehen. */

.bew-locations__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #E3E8F0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: -webkit-box-shadow 0.25s ease;
    transition: box-shadow 0.25s ease;
}

.bew-locations__card-image {
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #d0d0d0;
    /* Nicht schrumpfen – die Höhe steckt komplett im padding-top. */
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    /* padding-top trick works universally, including Safari < 15 */
    padding-top: 75%; /* 4:3 = 75% */
    height: 0;
}

.bew-locations__card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bew-locations__card:hover .bew-locations__card-image img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

/* Angled badge at bottom-left of the image */
.bew-locations__card-label {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: #1F3566;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 9px 34px 9px 14px;
    /* Safari-safe skewed right edge via skew on pseudo-element */
    white-space: nowrap;
    line-height: 1.2;
    /* clip-path with calc() is buggy in Safari – use a simpler polygon */
    -webkit-clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

/* --- Infobereich unter dem Bild: Icon | Adresse | Pfeil --- */

.bew-locations__card-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 18px 16px;
    /* Schiebt den Infobereich auf allen Karten auf dieselbe Grundlinie. */
    margin-top: auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.bew-locations__card-icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 18px;
    margin-top: 1px;
    line-height: 0;
}

.bew-locations__card-icon svg,
.bew-locations__card-icon img {
    display: block;
    width: 18px;
    height: auto;
    /* Elementor/Theme setzen svg gelegentlich eine feste Höhe – das würde
       den Pin stauchen und die Kontur anschneiden. */
    max-width: none;
    overflow: visible;
}

/* Farben des eingebauten Pins – überschreibbar über die Elementor-Controls. */
.bew-locations__pin-ring {
    stroke: #199BD8;
    fill: none;
}

.bew-locations__pin-drop {
    fill: #EC6607;
}

.bew-locations__card-info {
    display: block;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}

.bew-locations__card-name {
    display: block;
    margin-bottom: 6px;
    color: #1F3566;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.bew-locations__card-line {
    display: block;
    color: #5A6478;
    font-size: 14px;
    line-height: 1.55;
}

/* Pfeil: Ruhezustand waagerecht, Drehung und Vergrößerung erst beim
   Überfahren der Karte – aus der Mitte heraus, sonst wandert er zur Seite. */
.bew-locations__card-arrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-item-align: center;
    align-self: center;
    width: 22px;
    height: 22px;
    margin-left: 12px;
    color: #1F3566;
    font-size: 22px;
    line-height: 1;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}

.bew-locations__card-arrow svg {
    display: block;
    width: 22px;
    height: 22px;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
}

.bew-locations__card:hover .bew-locations__card-arrow svg {
    -webkit-transform: rotate(var(--bew-arrow-rotate, -45deg)) scale(var(--bew-arrow-scale, 1.3));
    transform: rotate(var(--bew-arrow-rotate, -45deg)) scale(var(--bew-arrow-scale, 1.3));
}

@media (prefers-reduced-motion: reduce) {
    .bew-locations__card,
    .bew-locations__card-name,
    .bew-locations__card-arrow,
    .bew-locations__card-image img {
        -webkit-transition: none;
        transition: none;
    }

    .bew-locations__card:hover .bew-locations__card-arrow svg,
    .bew-locations__card:hover .bew-locations__card-image img {
        -webkit-transform: none;
        transform: none;
    }
}

/* =========================================
   GRID VARIANT RESPONSIVE: ≤1024px
   ========================================= */

@media (max-width: 1024px) {
    .bew-locations--grid .bew-locations__map-wrap {
        width: 70%;
    }
}

/* =========================================
   GRID VARIANT RESPONSIVE: ≤768px
   ========================================= */

@media (max-width: 768px) {
    .bew-locations--grid .bew-locations__map-wrap {
        width: 85%;
    }

    .bew-locations__cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =========================================
   GRID VARIANT RESPONSIVE: ≤480px

   Ohne !important, damit die Elementor-Controls („Spalten“ je Gerät)
   die Basiswerte überschreiben können.
   ========================================= */

@media (max-width: 480px) {
    .bew-locations--grid .bew-locations__map-wrap {
        width: 100%;
    }

    .bew-locations__cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .bew-locations__card-label {
        font-size: 12px;
        padding: 8px 24px 8px 12px;
    }
}

/* =========================================
   KARTEN-SLIDER  (layout_variant = carousel)

   Dieselben Karten wie im Raster, nur in einer waagerecht scrollbaren Spur.
   Die Spurbreite rechnet die Lücken heraus, damit bei „4 sichtbare Karten"
   wirklich vier hineinpassen. Ohne JavaScript bleibt der Streifen mit Finger
   und Trackpad bedienbar – die Pfeile sind eine Zugabe.
   ========================================= */

.bew-locations--carousel {
    --carousel-visible: 4;
    --carousel-gap: 20px;
}

.bew-locations__chead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

/* Im Slider oben liegt die Überschrift absolut über der Deutschlandkarte –
   hier ist sie eine ganz normale Zeile neben den Pfeilen. */
.bew-locations--carousel .bew-locations__header {
    position: static;
    margin: 0;
    pointer-events: auto;
}

/* Auch ohne Header-Text sitzen die Pfeile rechts. */
.bew-locations__cnav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.bew-locations__cnav-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #D8DEEA;
    border-radius: 2px;
    background: transparent;
    color: #1F3566;
    cursor: pointer;
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.bew-locations__cnav-btn svg {
    width: 55%;
    height: 55%;
    display: block;
}

.bew-locations__cnav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.bew-locations__ctrack {
    display: -ms-grid;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(
        (100% - (var(--carousel-visible) - 1) * var(--carousel-gap)) / var(--carousel-visible)
    );
    gap: var(--carousel-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Der Kartenschatten würde am unteren Rand der Spur abgeschnitten. */
    padding-bottom: 6px;
    /* Die Leiste stört im Layout – gescrollt wird per Pfeil, Wisch oder Trackpad. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bew-locations__ctrack::-webkit-scrollbar {
    display: none;
}

.bew-locations__ctrack > .bew-locations__card {
    scroll-snap-align: start;
}

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