/* ==================================================
   LEISTUNGEN
   ================================================== */


/* ==================================================
   HERO
   ================================================== */

.leistungen {

    position:
        relative;

    width:
        100vw;

    margin-left:
        calc(50% - 50vw);

    min-height:
        85vh;

    overflow:
        visible;

}


/* ==================================================
   FOTO-EBENE
   ================================================== */

.leistungen-fotos {

    position:
        absolute;

    top:
        -200px;

    left:
        -20px;

    width:
        calc(100% + 1px);

    height:
        calc(100% + 170px);

    overflow:
        hidden;

    pointer-events:
        none;

    z-index:
        1;

    will-change:
        transform;

}


/* ==================================================
   GRUNDEINSTELLUNG FOTOS
   ================================================== */

.leistungen-bild {

    position:
        absolute;

    top:
        0;

    width:
        72vw;

    max-width:
        none;

    pointer-events:
        none;

    opacity:
        0;

    animation:
        leistungenBildFadeIn
        2.2s
        ease-out
        .35s
        forwards;

    will-change:
        opacity;

}


/* ==================================================
   SANFTES EINBLENDEN
   ================================================== */

@keyframes leistungenBildFadeIn {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}


/* ==================================================
   LINKES FOTO
   ================================================== */

.leistungen-bild-links {

    left:
        -8vw;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 80%,
            rgba(0,0,0,.60) 92%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            black 0%,
            black 42%,
            rgba(0,0,0,.75) 52%,
            rgba(0,0,0,.35) 66%,
            rgba(0,0,0,.08) 82%,
            transparent 96%
        );

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 80%,
            rgba(0,0,0,.60) 92%,
            transparent 100%
        ),
        linear-gradient(
            to right,
            black 0%,
            black 42%,
            rgba(0,0,0,.75) 52%,
            rgba(0,0,0,.35) 66%,
            rgba(0,0,0,.08) 82%,
            transparent 96%
        );

    -webkit-mask-composite:
        source-in;

    mask-composite:
        intersect;

}


/* ==================================================
   RECHTES FOTO
   ================================================== */

.leistungen-bild-rechts {

    right:
        -8vw;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 80%,
            rgba(0,0,0,.60) 92%,
            transparent 100%
        ),
        linear-gradient(
            to left,
            black 0%,
            black 42%,
            rgba(0,0,0,.75) 52%,
            rgba(0,0,0,.35) 66%,
            rgba(0,0,0,.08) 82%,
            transparent 96%
        );

    mask-image:
        linear-gradient(
            to bottom,
            black 0%,
            black 80%,
            rgba(0,0,0,.60) 92%,
            transparent 100%
        ),
        linear-gradient(
            to left,
            black 0%,
            black 42%,
            rgba(0,0,0,.75) 52%,
            rgba(0,0,0,.35) 66%,
            rgba(0,0,0,.08) 82%,
            transparent 96%
        );

    -webkit-mask-composite:
        source-in;

    mask-composite:
        intersect;

}


/* ==================================================
   BILDER
   ================================================== */

.leistungen-bild img {

    display:
        block;

    width:
        100%;

    height:
        auto;

    border-radius:
        0;

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.14);

}


/* ==================================================
   RECHTES BILD SPIEGELN
   ================================================== */

.leistungen-bild-rechts img {

    transform:
        scaleX(-1);

}


/* ==================================================
   INHALT
   ================================================== */

.leistungen-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        0
        var(--space-md)
        var(--space-xl);

    text-align:
        left;

}


/* ==================================================
   WILLKOMMEN
   ================================================== */

.leistungen-welcome {

    display:
        block;

    margin-bottom:
        var(--space-md);

    transform:
        translateX(-4rem);

}


/* ==================================================
   TEXTBEREICH
   ================================================== */

.leistungen-text {

    max-width:
        720px;

}


.leistungen-text p {

    max-width:
        68ch;

}


.leistungen-text p:last-child {

    margin-bottom:
        0;

}


/* ==================================================
   ÜBERSCHRIFTEN
   ================================================== */

.leistungen h1 {

    font-size:
        1.8rem;

    font-weight:
        600;

    color:
        var(--color-muted);

    margin-top:
        0;

    margin-bottom:
        var(--space-md);

}


.leistungen h2 {

    font-size:
        1.8rem;

    font-weight:
        600;

    color:
        var(--color-text);

    margin-top:
        0;

    margin-bottom:
        var(--space-md);

}


.leistungen h3 {

    font-size:
        1.4rem;

    font-weight:
        500;

    color:
        var(--color-text);

    margin-top:
        0;

    margin-bottom:
        var(--space-sm);

}


/* ==================================================
   ABSTÄNDE ZWISCHEN DEN TEXTBLÖCKEN
   ================================================== */

.leistungen-nicht {

    margin-bottom:
        3rem;

}


.leistungen-philosophie {

    margin-bottom:
        3rem;

}


.leistungen-ueberleitung {

    max-width:
        720px;

    margin-top:
        3rem;

    margin-bottom:
        2rem;

}


/* ==================================================
   HERVORHEBUNGEN
   ================================================== */

.leistungen strong {

    font-weight:
        700;

    color:
        var(--color-text);

}


/* ==================================================
   LEISTUNGSBEREICHE
   ================================================== */

.leistungen-bereiche {

    display:
        grid;

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

    gap:
        var(--space-lg);

    max-width:
        1000px;

    margin-top:
        var(--space-lg);

    margin-bottom:
        2rem;

}


/* ==================================================
   LEISTUNGSBLOCK
   ================================================== */

.leistungen-bereich {

    display:
        block;

    width:
        100%;

    padding:
        var(--space-md);

    border:
        none;

    border-top:
        1px solid
        var(--color-accent-border);

    background:
        rgba(255,255,255,.45);

    color:
        var(--color-text);

    font-family:
        inherit;

    text-align:
        left;

    cursor:
        pointer;

    transition:
        transform .3s ease,
        background-color .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/* ==================================================
   HOVER
   ================================================== */

.leistungen-bereich:hover {

    transform:
        translateY(-4px);

    background:
        rgba(255,255,255,.78);

    border-top-color:
        var(--color-accent);

    box-shadow:
        0 14px 35px
        rgba(0,0,0,.08);

}


/* ==================================================
   INHALT LEISTUNGSBLOCK
   ================================================== */

.leistungen-bereich-inhalt {

    display:
        block;

}


/* ==================================================
   TEXT IN DEN LEISTUNGSKACHELN
   Deutsche Silbentrennung
   ================================================== */

.leistungen-bereich p {

    hyphens:
        auto;

    -webkit-hyphens:
        auto;

    overflow-wrap:
        break-word;

    margin-bottom:
        var(--space-sm);

}


/* ==================================================
   ÜBERSCHRIFT LEISTUNGSBLOCK
   Keine Silbentrennung
   ================================================== */

.leistungen-bereich h3 {

    margin-top:
        0;

    margin-bottom:
        var(--space-sm);

    hyphens:
        none;

    -webkit-hyphens:
        none;

}


/* ==================================================
   MEHR-ERFAHREN-HINWEIS
   ================================================== */

.leistungen-bereich-link {

    display:
        inline-block;

    margin-top:
        .25rem;

    color:
        var(--color-accent);

    font-size:
        .95rem;

    transition:
        transform .3s ease;

}


.leistungen-bereich:hover
.leistungen-bereich-link {

    transform:
        translateX(4px);

}


/* ==================================================
   ABSCHLUSS
   ================================================== */

.leistungen-abschluss {

    max-width:
        720px;

    margin-top:
        2rem;

}


/* ==================================================
   GUTSCHEIN
   ================================================== */

.leistungen-gutschein {

    max-width:
        720px;

    margin-top:
        0;

    padding-top:
        var(--space-md);

    border-top:
        1px solid
        rgba(var(--color-accent-rgb), .25);

}


/* ==================================================
   LEISTUNGSMODAL – SCROLL VERHALTEN
   ================================================== */

/*
 * Solange ein Leistungsmodal geöffnet ist,
 * bleibt die darunterliegende Seite stehen.
 */

html.leistungen-modal-offen,
body.leistungen-modal-offen {

    overflow:
        hidden;

}


/* ==================================================
   MODALS
   ================================================== */

.leistungen-modal {

    position:
        fixed;

    top:
        160px;

    right:
        0;

    bottom:
        0;

    left:
        0;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        2rem
        var(--space-md)
        3rem;

    box-sizing:
        border-box;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.12);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    z-index:
        2147483647;

    /*
     * Verhindert, dass Scrollbewegungen außerhalb
     * des eigentlichen Inhalts weitergereicht werden.
     */

    overscroll-behavior:
        none;

}


/* ==================================================
   MODAL AKTIV
   ================================================== */

.leistungen-modal.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


/* ==================================================
   MODAL-INHALT
   Glasoptik + eigener Scrollbereich
   ================================================== */

.leistungen-modal-inner {

    position:
        relative;

    z-index:
        1;

    width:
        min(
            720px,
            calc(100vw - 2 * var(--space-md))
        );

    max-height:
        calc(100vh - 220px);

    overflow-y:
        auto;

    overflow-x:
        hidden;

    overscroll-behavior:
        contain;

    -webkit-overflow-scrolling:
        touch;

    padding:
        2.5rem
        3rem
        3rem;

    box-sizing:
        border-box;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border:
        1px solid
        rgba(255,255,255,.7);

    border-radius:
        6px;

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.16);

    transform:
        translateY(20px);

    transition:
        transform .3s ease;

}


/* ==================================================
   MODAL ÖFFNEN
   ================================================== */

.leistungen-modal.is-open
.leistungen-modal-inner {

    transform:
        translateY(0);

}


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

.leistungen-modal h2 {

    margin-top:
        0;

    margin-right:
        3rem;

    margin-bottom:
        1.5rem;

}


/* ==================================================
   MODAL ZWISCHENÜBERSCHRIFTEN
   ================================================== */

.leistungen-modal-inner h3 {

    position:
        relative;

    margin-top:
        1.5rem;

    margin-bottom:
        .35rem;

    padding-left:
        .9rem;

    font-size:
        1.05rem;

    font-weight:
        500;

    color:
        var(--color-text);

    letter-spacing:
        .01em;

}


/* ==================================================
   MODAL ZWISCHENHINWEIS
   ================================================== */

.modal-zwischenhinweis {

    margin-top:
        2rem;

    margin-bottom:
        .75rem;

    font-size:
        2rem;

}


/* ==================================================
   ERLÄUTERNDER TEXT
   ================================================== */

.leistungen-modal-inner
.modal-erklaerung {

    margin-left:
        .9rem;

}


/* ==================================================
   GELBER AKZENTPUNKT
   ================================================== */

.leistungen-modal-inner h3::before {

    content:
        "";

    position:
        absolute;

    left:
        -.45rem;

    top:
        0em;

    width:
        1.10rem;

    height:
        1.10rem;

    background:
        var(--color-claim-dot);

    border-radius:
        60%;

}


/* ==================================================
   ABSTAND NACH ZWISCHENÜBERSCHRIFT
   ================================================== */

.leistungen-modal-inner h3 + p {

    margin-top:
        0;

}


/* ==================================================
   MODAL TEXT
   Leicht eingerückt
   ================================================== */

.leistungen-modal-inner p {

    max-width:
        68ch;

    margin-top:
        0;

    margin-left:
        1.35rem;

    margin-bottom:
        1rem;

}


/* ==================================================
   MODAL – GRÜNER AKZENT-BALKEN
   ================================================== */

.leistungen-modal::before {

    content:
        "";

    position:
        absolute;

    z-index:
        2;

    left:
        calc(50% - 360px - 8px);

    top:
        calc(2.5rem - 20px);

    width:
        20px;

    height:
        25rem;

    background:
        var(--color-accent);

    opacity:
        .85;

}


/* ==================================================
   GRÜNER BALKEN – MOBILE MODALBREITE
   ================================================== */

@media (max-width: 900px) {

    .leistungen-modal::before {

        left:
            calc(
                var(--space-sm) - 8px
            );

    }

}


/* ==================================================
   MODAL SCHLIESSEN
   ================================================== */

.leistungen-modal-close {

    position:
        absolute;

    top:
        1rem;

    right:
        1rem;

    z-index:
        10;

    width:
        2.5rem;

    height:
        2.5rem;

    border:
        none;

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--color-muted);

    font-size:
        2rem;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        background-color .2s ease,
        color .2s ease;

}


.leistungen-modal-close:hover {

    background:
        var(--color-accent-soft);

    color:
        var(--color-accent);

}


/* ==================================================
   MODAL GUTSCHEIN
   ================================================== */

.leistungen-modal-gutschein {

    text-align:
        left;

}


/* ==================================================
   GUTSCHEINBILD
   ================================================== */

.leistungen-gutschein-bild {

    float:
        right;

    width:
        40rem;

    max-width:
        50%;

    height:
        auto;

    margin:
        1rem
        0
        1rem
        2rem;

    transform:
        rotate(-8deg);

    transform-origin:
        center center;

    box-shadow:
        0 5px 5px
        rgba(0,0,0,.20);

    border-radius:
        2px;

    shape-outside:
        polygon(
            5% 0%,
            100% 8%,
            95% 92%,
            0% 100%
        );

    pointer-events:
        none;

}


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

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

    .leistungen-bild {

        animation:
            none;

        opacity:
            1;

    }

}



/* ==================================================
   LEISTUNGEN – MOBILE BILDER
   ================================================== */

@media (max-width: 900px) {

    .leistungen-fotos {

        position:
            absolute;

        top:
            -130px;

        left:
            -35px;

        width:
            calc(100% + 70px);

        height:
            calc(100% + 180px);

    }


    /* ----------------------------------------------
       BILDER – MOBILE
       ---------------------------------------------- */

    .leistungen-bild {

        width:
            125vw;

    }


    /* ----------------------------------------------
       LINKES FOTO
       ---------------------------------------------- */

    .leistungen-bild-links {

        left:
            -48vw;

    }


    /* ----------------------------------------------
       RECHTES FOTO
       ---------------------------------------------- */

    .leistungen-bild-rechts {

        right:
            -48vw;

    }


    /* ----------------------------------------------
       HOCHFORMAT
       Bild Deckkraft reduziert
       ---------------------------------------------- */

    @media (max-width: 700px)
    and (orientation: portrait) {

        .leistungen-fotos {

            display:
                block;

            opacity:
                .28;

        }

    }


    /* ----------------------------------------------
       QUERFORMAT
       Bild höhere Deckkraft
       ---------------------------------------------- */

    @media (max-width: 900px)
    and (orientation: landscape) {

        .leistungen-fotos {

            opacity:
                1;

        }

    }


    /* ----------------------------------------------
       LEISTUNGSBEREICHE
       ---------------------------------------------- */

    .leistungen-bereiche {

        grid-template-columns:
            1fr;

    }


    /* ----------------------------------------------
       MODAL
       ---------------------------------------------- */

    .leistungen-modal {

        top:
            100px;

        padding:
            1rem
            var(--space-sm)
            2rem;

    }


    .leistungen-modal-inner {

        width:
            calc(100vw - 2 * var(--space-sm));

        max-height:
            calc(100vh - 140px);

        padding:
            2rem;

    }


    .leistungen-modal-inner h3 {

        margin-top:
            1.2rem;

    }


    .leistungen-modal-inner p {

        margin-left:
            1rem;

    }


    /* ----------------------------------------------
       GUTSCHEIN AUF MOBILGERÄTEN
       ---------------------------------------------- */

    .leistungen-gutschein-bild {

        width:
            12rem;

        max-width:
            42%;

        margin:
            .5rem
            0
            1rem
            1.25rem;

        transform:
            rotate(-8deg);

        shape-outside:
            polygon(
                5% 0%,
                100% 8%,
                95% 92%,
                0% 100%
            );

    }

}