/* ============================================================
   BASIS
   ============================================================ */

.ah-home-apartments,
.ah-home-apartments *,
.ah-home-apartments *::before,
.ah-home-apartments *::after {
    box-sizing: border-box;
}


/*
 * Nur der direkte Elementor-Shortcode-Wrapper wird bereinigt.
 */

body.page-id-243 .ah-apartments-widget-fixed,
body.page-id-243
.ah-apartments-widget-fixed
> .elementor-widget-container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}

body.page-id-243 .ah-apartments-host-fixed {
    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;

    overflow: visible !important;
}


/* ============================================================
   SECTION
   ============================================================ */

.ah-home-apartments {
    --ah-apartments-viewport-offset: 0px;

    position: relative;

    display: block;

    width: 100vw;
    max-width: none;

    margin:
        0
        0
        0
        var(--ah-apartments-viewport-offset);

    padding:
        0
        0
        104px;

    overflow: hidden;

    background: var(--avh-base-warm-white);
    color: var(--avh-base-gray);

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;
}


/*
 * Schatten unter dem vorherigen Bereich.
 */

.ah-home-apartments::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    width: 100%;
    height: 26px;

    background:
        linear-gradient(
            180deg,
            rgba(var(--avh-rgb-base-gray), 0.10) 0%,
            rgba(var(--avh-rgb-base-gray), 0.035) 38%,
            rgba(var(--avh-rgb-base-gray), 0) 100%
        );

    pointer-events: none;
}


/* ============================================================
   INNERER BEREICH
   ============================================================ */

.ah-home-apartments__inner {
    position: relative;
    z-index: 2;

    width:
        min(
            1440px,
            calc(100% - 72px)
        );

    margin: 0 auto;
    padding-top: 60px;
}


/* ============================================================
   ÜBERSCHRIFT
   ============================================================ */

.ah-home-apartments__header {
    margin:
        0
        0
        44px;

    text-align: center;
}

.ah-home-apartments__title {
    margin: 0;

    color: var(--avh-base-gray);

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;

    font-size: 42px !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.028em !important;

    text-align: center;
}


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

.ah-home-apartments__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    column-gap: 46px;
    row-gap: 66px;

    align-items: start;
}

.ah-home-apartments__card {
    min-width: 0;

    margin: 0 !important;
    padding: 0 !important;

    /*
     * WICHTIG:
     * WordPress-Themes / globale Styles verwenden häufig Regeln wie
     * "article + article" und setzen dadurch NUR auf das zweite <article>
     * eine gerade obere Trennlinie.
     *
     * Genau diese Linie lag im Screenshot oberhalb des rechten Bildes.
     * Sie gehört nicht zum Bild und konnte deshalb durch border-radius
     * oder overflow:hidden am Bildcontainer nicht entfernt werden.
     */
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;

    background: rgba(var(--avh-rgb-base-gray), 0) !important;

    box-shadow: none !important;
}


/*
 * Zusätzliche Absicherung gegen Theme-Regeln wie:
 * article + article,
 * article::before,
 * article::after.
 */

.ah-home-apartments__grid
> .ah-home-apartments__card
+ .ah-home-apartments__card {
    border-top: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}


.ah-home-apartments__card::before,

.ah-home-apartments__card::after {
    content: none !important;
    display: none !important;
}


/* ============================================================
   BILDKARUSSELL
   ============================================================ */

.ah-home-apartments__carousel {
    position: relative;
    width: 100%;
    border-radius: 15px;
    outline: none;
}


/* ============================================================
   BILDBEREICH
   ============================================================ */

.ah-home-apartments__media {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 10;

    overflow: hidden !important;
    contain: paint;
    isolation: isolate;

    border: 0;
    border-radius: 15px;

    background: var(--avh-base-warm-white);

    box-shadow:
        0 8px 22px
        rgba(var(--avh-rgb-base-gray), 0.07);

    clip-path:
        inset(0 round 15px);

    -webkit-clip-path:
        inset(0 round 15px);

    -webkit-mask-image:
        -webkit-radial-gradient(
            var(--avh-base-warm-white),
            var(--avh-base-gray)
        );

    mask-image:
        radial-gradient(
            var(--avh-base-warm-white),
            var(--avh-base-gray)
        );

    transform:
        translateZ(0);
}


/*
 * Saubere Rundungs- und Innenkantenabsicherung.
 */

.ah-home-apartments__media::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 8;

    pointer-events: none;

    border-radius: inherit;

    clip-path:
        inset(0 round 15px);

    -webkit-clip-path:
        inset(0 round 15px);

    box-shadow:
        inset 0 0 0 1px
        rgba(var(--avh-rgb-base-gray), 0.09);

    background:
        linear-gradient(
            rgba(var(--avh-rgb-base-gray), 0),
            rgba(var(--avh-rgb-base-gray), 0)
        );
}


/* ============================================================
   TRACK UND SLIDES
   ============================================================ */

.ah-home-apartments__track {
    position: absolute;
    inset: 0;
    z-index: 1;

    display: flex;

    width: 100%;
    height: 100%;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform
        520ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    will-change: transform;
}


.ah-home-apartments__slide {
    position: relative;

    flex:
        0
        0
        100%;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: inherit;

    color: inherit;
    text-decoration: none;

    outline: none;
}


.ah-home-apartments__slide[aria-hidden="true"] {
    pointer-events: none;
}


.ah-home-apartments__image {
    position: absolute;
    inset: 0 !important;
    z-index: 1;

    display: block;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    overflow: hidden !important;

    filter: none !important;

    image-rendering: auto;

    border-radius: inherit;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition:
        transform
        650ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}




/* ============================================================
   EINGEBETTETER BILDEFFEKT
   ============================================================ */

.ah-home-apartments__image-shade {
    position: absolute;
    inset: 0;
    z-index: 3;

    border-radius: inherit;

    clip-path:
        inset(0 round 15px);

    background:

        linear-gradient(
            180deg,
            rgba(var(--avh-rgb-base-warm-white), 0.15) 0%,
            rgba(var(--avh-rgb-base-warm-white), 0) 17%,
            rgba(var(--avh-rgb-base-gray), 0) 67%,
            rgba(var(--avh-rgb-base-gray), 0.18) 100%
        ),

        linear-gradient(
            90deg,
            rgba(var(--avh-rgb-base-gray), 0.08) 0%,
            rgba(var(--avh-rgb-base-gray), 0) 7%,
            rgba(var(--avh-rgb-base-gray), 0) 93%,
            rgba(var(--avh-rgb-base-gray), 0.08) 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(var(--avh-rgb-base-warm-white), 0.08);

    pointer-events: none;
}


/*
 * Dezente Lichtkante beim Hover.
 */

.ah-home-apartments__media::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 4;

    border-radius: inherit;

    clip-path:
        inset(0 round 15px);

    background:
        linear-gradient(
            135deg,
            rgba(var(--avh-rgb-base-warm-white), 0.13) 0%,
            rgba(var(--avh-rgb-base-warm-white), 0) 35%
        );

    opacity: 0;

    transition:
        opacity
        350ms
        ease;

    pointer-events: none;
}


/* ============================================================
   KARUSSELLPFEILE
   ============================================================ */

.ah-home-apartments__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin: 0;
    padding: 0;

    border:
        1px solid
        rgba(var(--avh-rgb-base-gray), 0.22);

    border-radius: 999px;

    background:
        rgba(var(--avh-rgb-base-warm-white), 0.88);

    box-shadow:
        0 8px 22px
        rgba(var(--avh-rgb-base-gray), 0.13);

    color:
        var(--avh-base-gray);

    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transform:
        translate3d(0, -50%, 0)
        scale(0.94);

    transition:
        opacity
        220ms
        ease,
        transform
        220ms
        ease,
        background
        220ms
        ease;

    -webkit-tap-highlight-color: transparent;
}


.ah-home-apartments__arrow--previous {
    left: 16px;
}


.ah-home-apartments__arrow--next {
    right: 16px;
}


.ah-home-apartments__arrow svg {
    display: block;

    width: 18px;
    height: 18px;

    overflow: visible;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.ah-home-apartments__carousel:hover
.ah-home-apartments__arrow,

.ah-home-apartments__carousel:focus-within
.ah-home-apartments__arrow {
    opacity: 1;
    pointer-events: auto;

    transform:
        translate3d(0, -50%, 0)
        scale(1);
}


.ah-home-apartments__arrow:hover {
    background:
        var(--avh-base-warm-white);
}


.ah-home-apartments__arrow:focus-visible {
    opacity: 1;
    pointer-events: auto;

    outline:
        3px solid
        rgba(var(--avh-rgb-base-gray), 0.68);

    outline-offset: 3px;
}


/* ============================================================
   BILD-HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {

    .ah-home-apartments__carousel:hover
    .ah-home-apartments__slide.is-active
    .ah-home-apartments__image {
        transform:
            translate3d(0, 0, 0)
            scale(1.055);
    }

    .ah-home-apartments__carousel:hover
    .ah-home-apartments__media::after {
        opacity: 1;
    }

}


.ah-home-apartments__slide:focus-visible {
    outline:
        3px solid
        rgba(var(--avh-rgb-base-gray), 0.68);

    outline-offset:
        -6px;
}


/* ============================================================
   TEXT
   ============================================================ */

.ah-home-apartments__content {
    padding-top: 22px;
}


/*
 * Standort
 */

.ah-home-apartments__location {
    margin:
        0
        0
        8px;

    color: var(--avh-base-gray);

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.10em !important;

    text-transform: uppercase;
}


/*
 * Apartmentname
 */

.ah-home-apartments__name {
    margin:
        0
        0
        10px;

    color: var(--avh-base-gray);

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;

    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 1.26 !important;
    letter-spacing: -0.016em !important;
}


/*
 * Beschreibung
 */

.ah-home-apartments__description {
    max-width: 590px;

    margin:
        0
        0
        22px;

    color:
        rgba(var(--avh-rgb-base-gray), 0.72);

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
}


/* ============================================================
   BUTTON
   ============================================================ */

.ah-home-apartments__button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        0
        23px;

    overflow: hidden;

    border:
        1px solid
        rgba(var(--avh-rgb-base-gray), 0.48);

    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            var(--avh-base-gray) 0%,
            var(--avh-base-gray) 100%
        );

    box-shadow:
        0 8px 20px
        rgba(var(--avh-rgb-base-gray), 0.15);

    color: var(--avh-base-warm-white);
    text-decoration: none;

    cursor: pointer;

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;

    transform:
        translate3d(0, 0, 0);

    transition:
        transform
        280ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );
}


/*
 * Button-Lichtreflex.
 */

.ah-home-apartments__button::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(
            100deg,
            rgba(var(--avh-rgb-base-gray), 0) 0%,
            rgba(var(--avh-rgb-base-warm-white), 0.14) 48%,
            rgba(var(--avh-rgb-base-gray), 0) 100%
        );

    transform:
        translate3d(-185%, 0, 0)
        skewX(-20deg);

    transition:
        transform
        600ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    pointer-events: none;
}


.ah-home-apartments__button-text {
    position: relative;
    z-index: 2;

    font-family:
        Verdana,
        Geneva,
        sans-serif !important;

    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}


/*
 * Button-Hover
 */

@media (hover: hover) and (pointer: fine) {

    .ah-home-apartments__button:hover {
        transform:
            translate3d(0, -2px, 0);
    }

    .ah-home-apartments__button:hover::before {
        transform:
            translate3d(265%, 0, 0)
            skewX(-20deg);
    }

}


.ah-home-apartments__button:focus-visible {
    outline:
        3px solid
        rgba(var(--avh-rgb-base-gray), 0.65);

    outline-offset: 4px;
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {

    .ah-home-apartments {
        padding-bottom: 88px;
    }

    .ah-home-apartments__inner {
        width:
            min(
                100%,
                calc(100% - 46px)
            );

        padding-top: 48px;
    }

    .ah-home-apartments__header {
        margin-bottom: 37px;
    }

    .ah-home-apartments__title {
        font-size: 36px !important;
        line-height: 1.16 !important;
    }

    .ah-home-apartments__grid {
        column-gap: 28px;
        row-gap: 56px;
    }

    .ah-home-apartments__name {
        font-size: 23px !important;
    }

    .ah-home-apartments__description {
        font-size: 13px !important;
        line-height: 1.70 !important;
    }

    .ah-home-apartments__button {
        min-height: 44px;

        padding:
            0
            21px;

        font-size: 11px !important;
    }

}


/* ============================================================
   SMARTPHONE
   ============================================================ */

@media (max-width: 767px) {

    .ah-home-apartments {
        padding-bottom: 34px;
    }

    .ah-home-apartments::before {
        height: 22px;
    }

    .ah-home-apartments__inner {
        width:
            calc(100% - 26px);

        padding-top: 39px;
    }

    .ah-home-apartments__header {
        margin-bottom: 28px;
    }

    .ah-home-apartments__title {
        font-size: 29px !important;
        line-height: 1.17 !important;
        letter-spacing: -0.020em !important;
    }

    /*
     * Apartments untereinander.
     */

    .ah-home-apartments__grid {
        grid-template-columns:
            minmax(0, 1fr) !important;

        column-gap: 0;
        row-gap: 48px;
    }

    .ah-home-apartments__card {
        width: 100%;
    }

    .ah-home-apartments__media {
        width: 100%;
        aspect-ratio: 16 / 10;

        border-radius: 13px;

        box-shadow:
            0 5px 14px
            rgba(var(--avh-rgb-base-gray), 0.05);
    }

    /*
     * Auf Touch-Geräten bleiben die Pfeile dauerhaft sichtbar.
     */

    .ah-home-apartments__arrow {
        width: 38px;
        height: 38px;

        opacity: 0.90;
        pointer-events: auto;

        transform:
            translate3d(0, -50%, 0)
            scale(1);
    }

    .ah-home-apartments__arrow--previous {
        left: 10px;
    }

    .ah-home-apartments__arrow--next {
        right: 10px;
    }

    .ah-home-apartments__image,
    .ah-home-apartments__media::after {
        transition: none;
    }

    .ah-home-apartments__content {
        padding-top: 17px;
    }

    .ah-home-apartments__location {
        margin-bottom: 7px;

        font-size: 10px !important;
        line-height: 1.45 !important;
        letter-spacing: 0.09em !important;
    }

    .ah-home-apartments__name {
        margin-bottom: 9px;

        font-size: 21px !important;
        line-height: 1.29 !important;
        letter-spacing: -0.010em !important;
    }

    .ah-home-apartments__description {
        margin-bottom: 20px;

        font-size: 13px !important;
        line-height: 1.68 !important;
    }

    .ah-home-apartments__button {
        min-height: 44px;

        padding:
            0
            21px;

        font-size: 11px !important;

        transition: none;
    }

    .ah-home-apartments__button::before {
        display: none;
    }

}


/* ============================================================
   KLEINE SMARTPHONES
   ============================================================ */

@media (max-width: 390px) {

    .ah-home-apartments__inner {
        width:
            calc(100% - 20px);
    }

    .ah-home-apartments__title {
        font-size: 27px !important;
    }

    .ah-home-apartments__name {
        font-size: 20px !important;
        line-height: 1.30 !important;
    }

}


/* ============================================================
   REDUZIERTE BEWEGUNG
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ah-home-apartments__track,
    .ah-home-apartments__image,
    .ah-home-apartments__media::after,
    .ah-home-apartments__arrow,
    .ah-home-apartments__button,
    .ah-home-apartments__button::before {
        transition: none !important;
    }

    .ah-home-apartments__carousel:hover
    .ah-home-apartments__slide.is-active
    .ah-home-apartments__image {
        transform: none;
    }

    .ah-home-apartments__carousel:hover
    .ah-home-apartments__media::after {
        opacity: 0;
    }

}


/* ============================================================
   ELEMENTOR-EDITOR-VORSCHAU
   ============================================================
 *
 * Im Editor bleibt der Bereich innerhalb des Vorschau-Iframes.
 * Das untere Live-Padding wird dort entfernt, weil der folgende
 * Benefits-Bereich auf der Live-Seite darübergezogen wird.
 */

body.ah243-elementor-preview .ah-home-apartments,
.ah-home-apartments.ah-home-apartments--editor {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    padding-bottom: 0 !important;
}

/*
 * In der mobilen Elementor-Vorschau bleibt unter dem
 * zweiten Apartment eine kompakte weiße Abschlussfläche.
 */

@media (max-width: 767px) {

    body.ah243-elementor-preview .ah-home-apartments,
    .ah-home-apartments.ah-home-apartments--editor {
        padding-bottom: 34px !important;
    }

}

body.ah243-elementor-preview
.elementor-widget-shortcode:has(.ah-home-apartments)
> .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


/*
 * Auch der direkte Elementor-Container wird bereits per CSS
 * neutralisiert. Dadurch entsteht im Editor kein zusätzlicher
 * Leerraum, selbst wenn das Inline-Script dort nicht erneut läuft.
 */

body.ah243-elementor-preview
.e-con:has(.ah-home-apartments),
body.ah243-elementor-preview
.elementor-element:has(> .elementor-widget-shortcode .ah-home-apartments) {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}