/* ==================================================
   GLOBALES STYLESHEET
   Schweizer Physio
   ================================================== */


/* ==================================================
   LOKALE SCHRIFTEN
   ================================================== */

@font-face {
    font-family: "Overpass";
    src: url("/templates/cassiopeia_extended/fonts/Overpass_Regular.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Overpass";
    src: url("/templates/cassiopeia_extended/fonts/Overpass_Bold.woff2")
        format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("/templates/cassiopeia_extended/fonts/SourceSansPro-Regular.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("/templates/cassiopeia_extended/fonts/SourceSansPro-Semibold.woff2")
        format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans Pro";
    src: url("/templates/cassiopeia_extended/fonts/SourceSansPro-Bold.woff2")
        format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Stay Classy Praxis";
    src: url("/templates/cassiopeia_extended/fonts/StayClassyPraxis.woff2")
        format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==================================================
   DESIGN SYSTEM
   ================================================== */

:root {

    /* ==================================================
       TYPOGRAFIE
       ================================================== */

    --font-base: 18px;


    /* ==================================================
       ABSTÄNDE
       ================================================== */

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;


    /* ==================================================
       GRUNDFARBEN
       ================================================== */

    --color-bg: #ffffff;
    --color-text: #2a2a2a;
    --color-text-soft: #444444;
    --color-muted: #6f6f6f;


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

    --color-heading: #3f4648;


    /* ==================================================
       AKZENTFARBE
       ================================================== */

    --color-accent: #6dc11c;
    --color-accent-dark: #579d16;
    --color-accent-rgb: 109, 193, 28;


    /* ==================================================
       AKZENT – TRANSPARENTE VARIANTEN
       ================================================== */

    --color-accent-soft:
        rgba(var(--color-accent-rgb), .18);

    --color-accent-border:
        rgba(var(--color-accent-rgb), .35);

    --color-accent-glow:
        rgba(var(--color-accent-rgb), .15);


    /* ==================================================
       LINEN / RAHMEN
       ================================================== */

    --color-border:
        rgba(42, 42, 42, .14);

    --color-border-soft:
        rgba(42, 42, 42, .08);


    /* ==================================================
       KONTRASTFARBEN
       ================================================== */

    --color-white: #ffffff;
    --color-black: #000000;


    /* ==================================================
       GELBER AKZENT
       ================================================== */

    --color-claim-dot: #f2c94c;

}


/* ==================================================
   BASE
   ================================================== */

body {

    font-family:
        "Source Sans Pro",
        sans-serif;

    font-size:
        var(--font-base);

    line-height:
        1.75;

    color:
        var(--color-text);

    background:
        var(--color-bg);

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    position:
        relative;

    min-height:
        100vh;

}


/* ==================================================
   HINTERGRUND
   ================================================== */

body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    background-image:
        url("/images/Background_Kreise.webp");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        0.30;

    pointer-events:
        none;

    z-index:
        0;

}


body > * {

    position:
        relative;

    z-index:
        1;

}


/* ==================================================
   TYPOGRAFIE – GRUNDSYSTEM
   ================================================== */

h1,
h2 {

    font-family:
        "Overpass",
        sans-serif;

    color:
        var(--color-heading);

}


h1 {

    font-size:
        1.8rem;

    font-weight:
        600;

    line-height:
        1.25;

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

}


h2 {

    font-size:
        2rem;

    font-weight:
        600;

    line-height:
        1.3;

}


h3,
h4 {

    font-family:
        "Source Sans Pro",
        sans-serif;

    color:
        var(--color-text);

}


h3 {

    font-size:
        1.25rem;

    font-weight:
        600;

    line-height:
        1.4;

}


h4 {

    font-size:
        1.1rem;

    font-weight:
        600;

    line-height:
        1.45;

}


h5,
h6 {

    font-family:
        "Source Sans Pro",
        sans-serif;

    color:
        var(--color-text);

    font-weight:
        600;

    line-height:
        1.45;

}


/* ==================================================
   FLIESSTEXT
   ================================================== */

p {

    font-family:
        "Source Sans Pro",
        sans-serif;

    font-size:
        1.15rem;

    font-weight:
        400;

    line-height:
        1.6;

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

    max-width:
        68ch;

    color:
        var(--color-text-soft);

}


/* ==================================================
   LINKS
   ================================================== */

a {

    color:
        var(--color-accent);

    text-decoration:
        none;

}


a:hover {

    color:
        var(--color-accent-dark);

}


/* ==================================================
   SCHRIFTKLASSEN
   ================================================== */

.overpass {

    font-family:
        "Overpass",
        sans-serif;

}


.source-sans {

    font-family:
        "Source Sans Pro",
        sans-serif;

}


.stay-classy {

    font-family:
        "Stay Classy Praxis",
        "Overpass",
        serif;

    font-size:
        clamp(2.8rem, 5vw, 4.4rem);

    line-height:
        1;

    color:
        var(--color-black);

}


/* ==================================================
   HEADER
   ================================================== */

.container-header {

    display:
        grid;

    /*
     * Logo / Navigation / verbleibender Raum
     */
    grid-template-columns:
        260px auto 1fr;

    align-items:
        center;

    padding:
        0.2rem 5rem;

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

    backdrop-filter:
        blur(5px)
        saturate(1.3);

    position:
        sticky;

    top:
        0;

    z-index:
        100;

    min-height:
        130px;

}


/* ==================================================
   LOGO
   ================================================== */

.grid-child {

    grid-column:
        1;

    grid-row:
        1;

    display:
        flex;

    align-items:
        center;

    padding-left:
        40px;

}


.navbar-brand {

    transform:
        translateY(-5px);

}


.navbar-brand img {

    max-height:
        130px;

    width:
        auto;

    height:
        auto;

}


/* ==================================================
   MENÜ
   ================================================== */

.container-topbar {

    grid-column:
        2;

    grid-row:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    min-width:
        max-content;

    margin-left:
        2rem;

    transform:
        none;

}


/* ==================================================
   NAVIGATION – CIRCLE MENU
   ================================================== */

header.header .mod-menu.mod-list.nav {

    display:
        flex;

    flex-direction:
        row;

    align-items:
        center;

    flex-wrap:
        nowrap;

    gap:
        0.8rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

    white-space:
        nowrap;

}


/* ==================================================
   NAVIGATION – KREISE
   ================================================== */

header.header .mod-menu.mod-list.nav li {

    flex:
        0 0 auto;

}


header.header .mod-menu.mod-list.nav li a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        5.5rem;

    height:
        5.5rem;

    position:
        relative;

    z-index:
        0;

    overflow:
        hidden;

    border-radius:
        50%;

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

    font-size:
        1rem;

    font-weight:
        400;

    color:
        var(--color-text);

    transition:
        all .3s ease;

}


/* ==================================================
   NAVIGATION – HOVER
   ================================================== */

header.header .mod-menu.mod-list.nav li a:hover {

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

    color:
        var(--color-accent);

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 20px
        var(--color-accent-glow);

}


/* ==================================================
   NAVIGATION – ACTIVE
   ================================================== */

header.header .mod-menu.mod-list.nav li.active > a {

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

    color:
        var(--color-accent);

    font-weight:
        500;

}


/* ==================================================
   NAVIGATION – HOVER / ACTIVE FÜLLUNG
   ================================================== */

header.header .mod-menu.mod-list.nav li a::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    border-radius:
        50%;

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

    opacity:
        0;

    transition:
        opacity .3s ease;

    pointer-events:
        none;

}


header.header .mod-menu.mod-list.nav li a:hover::after,
header.header .mod-menu.mod-list.nav li.active > a::after {

    opacity:
        1;

}


/* ==================================================
   MOBILER MENÜBUTTON
   Standardmäßig unsichtbar
   ================================================== */

.mobile-menu-toggle {

    display:
        none;

}


/* ==================================================
   RESPONSIVE HEADER
   ================================================= */


/* --------------------------------------------------
   TABLET
   501–1022 px
   -------------------------------------------------- */

@media (max-width: 1022px) and (min-width: 501px) {

    .container-header {

        grid-template-columns:
            190px auto 1fr;

        padding:
            0.2rem 1.5rem;

        min-height:
            105px;

    }


    .grid-child {

        padding-left:
            0;

    }


    .navbar-brand img {

        max-height:
            95px;

    }


    .container-topbar {

        transform:
            none;

    }


    header.header .mod-menu.mod-list.nav {

        display:
            flex;

        flex-direction:
            row !important;

        flex-wrap:
            nowrap !important;

        align-items:
            center;

        justify-content:
            flex-start;

        gap:
            0.35rem;

    }


    header.header .mod-menu.mod-list.nav > li {

        flex:
            0 0 auto;

    }


    header.header .mod-menu.mod-list.nav li a {

        width:
            4.3rem;

        height:
            4.3rem;

        font-size:
            0.85rem;

    }

}


/* ==================================================
   SCHMALES TABLET
   501–636 px
   ================================================== */

@media (max-width: 636px) and (min-width: 501px) {

    .container-header {

        grid-template-columns:
            160px auto 1fr;

        padding:
            0.2rem 1rem;

        min-height:
            95px;

    }


    .grid-child {

        padding-left:
            0;

    }


    .navbar-brand img {

        max-height:
            82px;

    }


    .container-topbar {

        margin-left:
            1.2rem;

    }


    header.header .mod-menu.mod-list.nav {

        gap:
            0.2rem;

    }


    header.header .mod-menu.mod-list.nav li a {

        width:
            3.8rem;

        height:
            3.8rem;

        font-size:
            0.78rem;

    }

}


/* ==================================================
   SMARTPHONE – KREISMENÜ
   bis 500 px
   ================================================== */

@media (max-width: 500px) {


    /* ----------------------------------------------
       HEADER
       ---------------------------------------------- */

    .container-header {

        min-height:
            90px;

        padding:
            0.5rem 1rem;

    }


    .grid-child {

        padding-left:
            0;

    }


    .navbar-brand img {

        max-height:
            80px;

    }


    /* ----------------------------------------------
       MOBILER MENÜBUTTON
       ---------------------------------------------- */

    .mobile-menu-toggle {

        display:
            flex !important;

        position:
            absolute;

        top:
            50%;

        right:
            4rem;

        width:
            3.6rem;

        height:
            3.6rem;

        transform:
            translateY(-50%);

        align-items:
            center;

        justify-content:
            center;

        flex-direction:
            column;

        gap:
            0.28rem;

        margin:
            0;

        padding:
            0;

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

        border-radius:
            50%;

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

        color:
            var(--color-text);

        cursor:
            pointer;

        z-index:
            120;

    }


    /* ----------------------------------------------
       HAMBURGER-LINIEN
       ---------------------------------------------- */

    .mobile-menu-toggle span {

        display:
            block;

        width:
            1.25rem;

        height:
            1px;

        background:
            var(--color-text);

    }


    /* ----------------------------------------------
       BUTTON → X
       ---------------------------------------------- */

    .mobile-menu-toggle.is-open span:nth-child(1) {

        transform:
            translateY(0.39rem)
            rotate(45deg);

    }


    .mobile-menu-toggle.is-open span:nth-child(2) {

        opacity:
            0;

    }


    .mobile-menu-toggle.is-open span:nth-child(3) {

        transform:
            translateY(-0.39rem)
            rotate(-45deg);

    }


    /* ----------------------------------------------
       KREISMENÜ – ÄUSSERER BEREICH
       ---------------------------------------------- */

    .container-topbar {

        position:
            absolute;

        top:
            0;

        right:
            0;

        left:
            auto;

        width:
            19rem;

        height:
            20rem;

        margin:
            0;

        padding:
            0;

        transform:
            none;

        pointer-events:
            none;

        z-index:
            110;

    }


    /* ----------------------------------------------
       KREISMENÜ – GESCHLOSSEN
       ---------------------------------------------- */

    .container-topbar .mod-menu[hidden] {

        display:
            none !important;

    }


    /* ----------------------------------------------
       KREISMENÜ – GEÖFFNET
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open {

        display:
            block !important;

        position:
            absolute;

        top:
            0;

        right:
            0;

        width:
            100%;

        height:
            100%;

        margin:
            0;

        padding:
            0;

        background:
            transparent !important;

        border:
            none !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        pointer-events:
            auto;

    }


    /* ----------------------------------------------
       MENÜPUNKTE
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li {

        position:
            absolute;

        top:
            0;

        right:
            -2.5rem;

        width:
            4.8rem;

        height:
            4.8rem;

        margin:
            0;

        padding:
            0;

        list-style:
            none;

        opacity:
            0;

        transform:
            translate(0, 0)
            scale(.55);

        transition:
            transform .5s cubic-bezier(.22, 1, .36, 1),
            opacity .3s ease;

    }


    /* ----------------------------------------------
       KREIS-LINK
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li
    > a {

        display:
            flex !important;

        align-items:
            center;

        justify-content:
            center;

        width:
            4.8rem !important;

        height:
            4.8rem !important;

        min-width:
            4.8rem !important;

        min-height:
            4.8rem !important;

        margin:
            0 !important;

        padding:
            0 !important;

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

        border-radius:
            50% !important;

        background:
            rgba(255, 255, 255, .96) !important;

        box-shadow:
            0 8px 18px
            rgba(0, 0, 0, .08);

        color:
            var(--color-text);

        font-family:
            "Source Sans Pro",
            sans-serif;

        font-size:
            .78rem;

        font-weight:
            400;

        line-height:
            1.1;

        text-align:
            center;

        white-space:
            normal;

        position:
            relative;

    }


    /* ----------------------------------------------
       DESKTOP-PSEUDOELEMENT ENTFERNEN
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li
    > a::after {

        display:
            none !important;

        content:
            none !important;

    }


    /* ----------------------------------------------
       HOVER
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li
    > a:hover {

        color:
            var(--color-accent);

        border-color:
            var(--color-accent) !important;

        background:
            rgba(255, 255, 255, .94) !important;

        transform:
            translateY(-2px);

    }


    /* ----------------------------------------------
       AKTIVER MENÜPUNKT
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li.active
    > a {

        color:
            var(--color-accent);

        border-color:
            var(--color-accent) !important;

        background:
            rgba(255, 255, 255, .92) !important;

    }


    /* ==================================================
       BOGEN – GLEICHMÄSSIGER VERLAUF
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(1) {

        --x:
            -21.2rem;

        --y:
            6.2rem;

    }


    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(2) {

        --x:
            -18.2rem;

        --y:
            10.2rem;

    }


    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(3) {

        --x:
            -13.8rem;

        --y:
            12.8rem;

    }


    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(4) {

        --x:
            -8.9rem;

        --y:
            13.8rem;

    }


    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(5) {

        --x:
            -3.9rem;

        --y:
            13.3rem;

    }


    /* ==================================================
       KREISE – GESCHWUNGENE EINBLENDUNG
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li {

        opacity:
            1;

        animation-duration:
            .75s;

        animation-timing-function:
            cubic-bezier(.22, 1, .36, 1);

        animation-fill-mode:
            both;

    }


    /* ==================================================
       KREIS 1
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(1) {

        animation-name:
            mobileMenuArc1;

        animation-delay:
            .03s;

    }


    @keyframes mobileMenuArc1 {

        from {

            opacity:
                0;

            transform:
                translate(0, 0)
                scale(.25);

        }

        45% {

            opacity:
                1;

            transform:
                translate(-10rem, 1rem)
                scale(.85);

        }

        to {

            opacity:
                1;

            transform:
                translate(
                    var(--x),
                    var(--y)
                )
                scale(1);

        }

    }


    /* ==================================================
       KREIS 2
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(2) {

        animation-name:
            mobileMenuArc2;

        animation-delay:
            .08s;

    }


    @keyframes mobileMenuArc2 {

        from {

            opacity:
                0;

            transform:
                translate(0, 0)
                scale(.25);

        }

        45% {

            opacity:
                1;

            transform:
                translate(-9rem, 3rem)
                scale(.85);

        }

        to {

            opacity:
                1;

            transform:
                translate(
                    var(--x),
                    var(--y)
                )
                scale(1);

        }

    }


    /* ==================================================
       KREIS 3
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(3) {

        animation-name:
            mobileMenuArc3;

        animation-delay:
            .13s;

    }


    @keyframes mobileMenuArc3 {

        from {

            opacity:
                0;

            transform:
                translate(0, 0)
                scale(.25);

        }

        45% {

            opacity:
                1;

            transform:
                translate(-7rem, 5rem)
                scale(.85);

        }

        to {

            opacity:
                1;

            transform:
                translate(
                    var(--x),
                    var(--y)
                )
                scale(1);

        }

    }


    /* ==================================================
       KREIS 4
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(4) {

        animation-name:
            mobileMenuArc4;

        animation-delay:
            .18s;

    }


    @keyframes mobileMenuArc4 {

        from {

            opacity:
                0;

            transform:
                translate(0, 0)
                scale(.25);

        }

        45% {

            opacity:
                1;

            transform:
                translate(-5rem, 7rem)
                scale(.85);

        }

        to {

            opacity:
                1;

            transform:
                translate(
                    var(--x),
                    var(--y)
                )
                scale(1);

        }

    }


    /* ==================================================
       KREIS 5
       ================================================== */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(5) {

        animation-name:
            mobileMenuArc5;

        animation-delay:
            .23s;

    }


    @keyframes mobileMenuArc5 {

        from {

            opacity:
                0;

            transform:
                translate(0, 0)
                scale(.25);

        }

        45% {

            opacity:
                1;

            transform:
                translate(-3rem, 8rem)
                scale(.85);

        }

        to {

            opacity:
                1;

            transform:
                translate(
                    var(--x),
                    var(--y)
                )
                scale(1);

        }

    }


    /* ----------------------------------------------
       EINBLENDUNG
       ---------------------------------------------- */

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(1) {

        transition-delay:
            .04s;

    }

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(2) {

        transition-delay:
            .08s;

    }

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(3) {

        transition-delay:
            .12s;

    }

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(4) {

        transition-delay:
            .16s;

    }

    .container-topbar
    .mod-menu.mobile-menu-open
    > li:nth-child(5) {

        transition-delay:
            .20s;

    }

}


/* ==================================================
   KREISMENÜ – RÜCKWÄRTSANIMATION
   ================================================== */


/* --------------------------------------------------
   KREIS 1
   -------------------------------------------------- */

.container-topbar
.mod-menu.mobile-menu-closing
> li:nth-child(1) {

    animation-name:
        mobileMenuArc1Reverse;

    animation-duration:
        .75s;

    animation-delay:
        .03s;

    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);

    animation-fill-mode:
        both;

}


@keyframes mobileMenuArc1Reverse {

    from {

        opacity:
            1;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(1);

    }

    55% {

        opacity:
            1;

        transform:
            translate(-10rem, 1rem)
            scale(.85);

    }

    to {

        opacity:
            0;

        transform:
            translate(0, 0)
            scale(.25);

    }

}


/* --------------------------------------------------
   KREIS 2
   -------------------------------------------------- */

.container-topbar
.mod-menu.mobile-menu-closing
> li:nth-child(2) {

    animation-name:
        mobileMenuArc2Reverse;

    animation-duration:
        .75s;

    animation-delay:
        .08s;

    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);

    animation-fill-mode:
        both;

}


@keyframes mobileMenuArc2Reverse {

    from {

        opacity:
            1;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(1);

    }

    55% {

        opacity:
            1;

        transform:
            translate(-9rem, 3rem)
            scale(.85);

    }

    to {

        opacity:
            0;

        transform:
            translate(0, 0)
            scale(.25);

    }

}


/* --------------------------------------------------
   KREIS 3
   -------------------------------------------------- */

.container-topbar
.mod-menu.mobile-menu-closing
> li:nth-child(3) {

    animation-name:
        mobileMenuArc3Reverse;

    animation-duration:
        .75s;

    animation-delay:
        .13s;

    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);

    animation-fill-mode:
        both;

}


@keyframes mobileMenuArc3Reverse {

    from {

        opacity:
            1;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(1);

    }

    55% {

        opacity:
            1;

        transform:
            translate(-7rem, 5rem)
            scale(.85);

    }

    to {

        opacity:
            0;

        transform:
            translate(0, 0)
            scale(.25);

    }

}


/* --------------------------------------------------
   KREIS 4
   -------------------------------------------------- */

.container-topbar
.mod-menu.mobile-menu-closing
> li:nth-child(4) {

    animation-name:
        mobileMenuArc4Reverse;

    animation-duration:
        .75s;

    animation-delay:
        .18s;

    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);

    animation-fill-mode:
        both;

}


@keyframes mobileMenuArc4Reverse {

    from {

        opacity:
            1;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(1);

    }

    55% {

        opacity:
            1;

        transform:
            translate(-5rem, 7rem)
            scale(.85);

    }

    to {

        opacity:
            0;

        transform:
            translate(0, 0)
            scale(.25);

    }

}


/* --------------------------------------------------
   KREIS 5
   -------------------------------------------------- */

.container-topbar
.mod-menu.mobile-menu-closing
> li:nth-child(5) {

    animation-name:
        mobileMenuArc5Reverse;

    animation-duration:
        .75s;

    animation-delay:
        .23s;

    animation-timing-function:
        cubic-bezier(.22, 1, .36, 1);

    animation-fill-mode:
        both;

}


@keyframes mobileMenuArc5Reverse {

    from {

        opacity:
            1;

        transform:
            translate(
                var(--x),
                var(--y)
            )
            scale(1);

    }

    55% {

        opacity:
            1;

        transform:
            translate(-3rem, 8rem)
            scale(.85);

    }

    to {

        opacity:
            0;

        transform:
            translate(0, 0)
            scale(.25);

    }

}


/* ==================================================
   KONTAKTFORMULAR
   ================================================== */

.kontakt-formular-joomla {

    font-family:
        "Source Sans Pro",
        sans-serif;

}


.kontakt-formular-joomla label {

    font-family:
        "Overpass",
        sans-serif;

    font-weight:
        600;

    color:
        var(--color-heading);

}


.kontakt-formular-joomla input,
.kontakt-formular-joomla textarea,
.kontakt-formular-joomla select {

    font-family:
        "Source Sans Pro",
        sans-serif;

}


.kontakt-formular-joomla button {

    font-family:
        "Overpass",
        sans-serif;

}


/* ==================================================
   KONTAKTFORMULAR – SENDEN-BUTTON
   ================================================== */

.kontakt-formular-joomla .control-group .controls button,
.kontakt-formular-joomla .control-group .controls button.btn,
.kontakt-formular-joomla .control-group .controls button.btn-primary {

    display:
        inline-block;

    min-width:
        145px;

    padding:
        .68rem 1.45rem;

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

    border-radius:
        6px;

    background-color:
        var(--color-accent) !important;

    color:
        var(--color-white) !important;

    font-family:
        "Overpass",
        sans-serif;

    font-size:
        1rem;

    font-weight:
        600;

    line-height:
        1.4;

    letter-spacing:
        .01em;

    cursor:
        pointer;

    box-shadow:
        0 2px 8px
        var(--color-accent-glow);

    opacity:
        1 !important;

}


.kontakt-formular-joomla .control-group .controls button:hover,
.kontakt-formular-joomla .control-group .controls button.btn:hover,
.kontakt-formular-joomla .control-group .controls button.btn-primary:hover {

    background-color:
        var(--color-accent-dark) !important;

    color:
        var(--color-white) !important;

    border-color:
        var(--color-accent-dark) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 14px
        var(--color-accent-glow);

}


/* ==================================================
   LAYOUT
   ================================================== */

section {

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

}


.container-main {

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

}


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

.hero {

    position:
        relative;

    min-height:
        85vh;

    overflow:
        hidden;

}


.hero-content {

    max-width:
        900px;

    margin:
        0 auto;

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

    text-align:
        left;

}


.hero-welcome {

    display:
        block;

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

    transform:
        translateX(-4rem);

}


.hero-claim {

    margin-top:
        2rem;

    font-family:
        "Overpass",
        sans-serif;

    font-size:
        3.3rem;

    font-weight:
        600;

    color:
        var(--color-muted);

}


.hero-claim::before {

    content:
        "";

    display:
        inline-block;

    width:
        0.4em;

    height:
        0.4em;

    margin-right:
        0.1em;

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

    border-radius:
        50%;

    transform:
        translateY(-0.55em);

}



/* ==================================================
   HERO – CLAIM RESPONSIVE
   ================================================== */

@media (max-width: 573px) {

    .hero-claim {

        font-size:
            clamp(1.8rem, 8vw, 3rem);

        white-space:
            nowrap;

    }

}


/* ==================================================
   BUTTONS
   ================================================== */

.button,
a.button {

    display:
        inline-block;

    padding:
        12px 24px;

    border-radius:
        6px;

    font-weight:
        500;

    background:
        var(--color-accent);

    color:
        var(--color-white);

}


.button:hover,
a.button:hover {

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

    color:
        var(--color-white);

}


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

img {

    max-width:
        100%;

    height:
        auto;

    border-radius:
        2px;

}


/* ==================================================
   RESET
   ================================================== */

.site-grid,
.container-main,
main {

    margin-top:
        0 !important;

    padding-top:
        0 !important;

}





/* ==================================================
   SEITENÜBERGANG
   ================================================== */

.com-content-article__body {

    animation:
        pageFadeIn
        .65s
        cubic-bezier(.22, 1, .36, 1)
        both;

}


@keyframes pageFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


/* ==================================================
   SCROLLEN
   ================================================== */

html {

    scroll-behavior:
        smooth;

}


/* ==================================================
   GLOBALE TRANSITIONS
   ================================================== */

a,
button,
input,
textarea,
select {

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

}


/* ==================================================
   BILDER – TRANSITION
   ================================================== */

img {

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        opacity .6s ease;

}


/* ==================================================
   HORIZONTALES ÜBERLAUFEN VERHINDERN
   ================================================== */

html {

    overflow-x:
        clip;

    overflow-y:
        scroll;

}


body {

    overflow-x:
        clip;

}


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

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

    html {

        scroll-behavior:
            auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* ==================================================
   FOOTER-MENÜ
   ================================================== */

.container-footer .mod-menu {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        1.5rem;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.container-footer .mod-menu a {

    color:
        var(--color-accent);

    text-decoration:
        none;

    font-family:
        "Source Sans Pro",
        sans-serif;

    font-size:
        .95rem;

    font-weight:
        400;

    transition:
        color .25s ease,
        opacity .25s ease;

}


.container-footer .mod-menu a:hover {

    color:
        var(--color-accent-dark);

}


.container-footer ul.mod-menu {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap;

    justify-content:
        center;

    align-items:
        center;

    gap:
        0;

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.container-footer ul.mod-menu > li {

    display:
        flex;

    align-items:
        center;

    margin:
        0;

    padding:
        0;

}


.container-footer ul.mod-menu > li + li::before {

    content:
        "|";

    margin:
        0 .9rem;

    color:
        rgba(42, 42, 42, .35);

    font-size:
        .85rem;

}


.container-footer ul.mod-menu > li > a {

    color:
        var(--color-accent);

    text-decoration:
        none;

    font-family:
        "Source Sans Pro",
        sans-serif;

    font-size:
        .95rem;

    font-weight:
        400;

    white-space:
        nowrap;

    transition:
        color .25s ease,
        opacity .25s ease;

}


.container-footer ul.mod-menu > li > a:hover {

    color:
        var(--color-accent-dark);

}


/* ==================================================
   FOOTER – ZENTRIERUNG
   ================================================== */

.container-footer .grid-child {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

}


/* ==================================================
   FOOTER – COPYRIGHT
   ================================================== */

.container-footer .footer1 {

    display:
        flex;

    margin-top:
        0.8rem;

    text-align:
        center;

    font-family:
        "Source Sans Pro",
        sans-serif;

    font-size:
        0.85rem;

    line-height:
        1.4;

    color:
        #666;

}