/***********************************************************
CSS Document
© 27.08.2025 BrennerMedien GmbH
www.brenner-medien.de
************************************************************
 
/*
======================================================================
Variablen & Grundeinstellungen
======================================================================
*/
:root {
    --main-dark: #0A253F;

    --main-cta: #D51D2B;
    --fliesstext: #777c81;
    --bg-beige: #F6F6F6;
    --bg-blau: #F7FAFC;
    --bg-burgunder: #9C0154;


    --akzent-schrift: hsl(180, 100%, 25%, 100%);
    --akzent100: hsl(185, 30%, 60%, 100%);
    --akzent90: hsl(185, 30%, 60%, 90%);

    --akzent80: hsl(185, 30%, 60%, 80%);

    --akzent75: hsl(185, 30%, 60%, 75%);

    --akzent70: hsl(185, 30%, 60%, 70%);
    --akzent60: hsl(185, 30%, 60%, 60%);
    --akzent50: hsl(185, 30%, 60%, 50%);
    --akzent40: hsl(185, 30%, 60%, 40%);
    --akzent30: hsl(185, 30%, 60%, 30%);
    --akzent20: hsl(185, 30%, 60%, 20%);
    --akzent10: hsl(185, 30%, 60%, 10%);
    --akzent05: hsl(185, 30%, 60%, 5%);
}

:root {
    --font-headlines: "Soehne";
    --font-fliesstext: "Soehne";
    --font-size: 1rem;
    --site-width: 1400px;
    --responsive-width: 1450px;
}

/* Responsive */
@media (max-width: 768px) {
    :root {
        --site-width: 90vw;
    }
}

section {
    width: 100%;
    height: auto;
    position: relative;
}

/* Responsive */
@media (max-width: 768px) {
    section {
        scroll-margin-top: 10rem;
    }
}

#main_page_wrapper {
    width: 100%;
}

.bg-blau {
    background-color: var(--bg-blau) !important;
}

.bg-beige {
    background-color: var(--bg-beige) !important;
}

.bg-weiss {
    background-color: #FFF !important;
}

.bg-akzent-10 {
    background-color: var(--akzent10) !important;
}

.bg-akzent-80 {
    background-color: var(--akzent80) !important;
}

.bg-akzent-100 {
    background-color: var(--akzent100) !important;
}


/*
  ======================================================================
  Custom Definitions
  ======================================================================
  */
body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #FFF;
    font-family: var(--font-fliesstext) !important;

    flex-direction: column;
}


body.no-scroll {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: lrem;
}

html,
body {
    scroll-behavior: smooth;
}

a {
    color: inherit;
    transition: all 0.2s;
}

a:hover {
    color: var(--main-cta)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headlines) !important;
    font-feature-settings: "liga", "kern", "ss01";
}

.section {
    width: 100%;
    height: auto;
    padding-left: calc((100% - var(--site-width)) / 2);
    padding-right: calc((100% - var(--site-width)) / 2);
    flex-direction: column;
    display: flex;
    font-family: var(--font-fliesstext);
    color: var(--main-dark);
}

ul,
li {

    padding: 0;
    margin: 0;
}

/*
  ======================================================================
  Markierungsfarben
  ======================================================================
  */

::selection {
    color: #FFF;
    background-color: var(--akzent80);
    text-shadow: none;
}

::-moz-selection {
    color: #FFF;
    background-color: var(--akzent80);
    text-shadow: none;
}

::-webkit-selection {
    color: #FFF;
    background-color: var(--akzent80);
    text-shadow: none;
}

::-webkit-scrollbar-thumb:vertical {
    width: 8px;
    background-color: var(--akzent100);
}

::-webkit-scrollbar-thumb:horizontal {
    height: 8px;
    background-color: var(--akzent100);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--akzent50);
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
    background-color: var(--akzent20);
}





/*
  ======================================================================
  Main CSS ab hier
  ======================================================================
  */




/*
  ======================================================================
Alert
  ======================================================================
  */


.section[role=alert] {
    background-color: var(--akzent70);
    color: #FFF;
    display: flex;

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

    font-size: 0.9rem;
    font-weight: 400;



    min-height: 4px;
    flex-direction: row;
    position: relative;




    span.attention {

        background-color: #FFF;
        width: 0.5rem;
        aspect-ratio: 1;
        display: inline-block;
        margin-right: 0.35rem;
        border-radius: 100%;
        animation: pulseOpacity 1.4s ease-in-out infinite;
    }

    p {

        padding: 0.3rem 0;
    }



}

@keyframes pulseOpacity {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/*
  ======================================================================
  Head & Nav
  ======================================================================
*/

.section[role=pre-head] {
    width: 100%;
    height: 1.5rem;
}

.section[role=head] {
    position: sticky;
    top: 0;
    z-index: 3;

    background-color: rgba(255, 255, 255, 1);
    display: grid;
    grid-template-areas: "a b";
    grid-template-columns: auto 1fr;
    font-size: 0.75rem;
    padding-bottom: 0.5rem;

    .logo {
        grid-area: a;
        max-width: 55%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 1rem;

        img {
            width: 30rem;
            height: auto;
            transition: all 0.3s ease-in-out;
        }
    }

    .nav-main {
        grid-area: b;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;

        ul {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;

            li {
                position: relative;
                margin: 0.25rem 0.75rem;
                padding: 0.55rem 0 0.2rem 0;
                font-size: 1rem;
                font-weight: 400;
                color: var(--main-dark);
                cursor: pointer;
                transition: color 0.2s;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 0.15rem;
                    background-color: var(--akzent-chrift);
                    transform: scaleY(0);
                    transform-origin: bottom;
                    transition: transform 0.3s ease;
                }

                a {
                    border-radius: 1rem;
                    padding: 0.15rem 0.7rem;
                    margin: -0.15rem -0.7rem;
                    border: 1px solid transparent;
                }

                &:hover,
                &.active {
                    a {
                        color: var(--akzent-schrift) !important;
                        background-color: #FFF;
                        border: 1px solid var(--akzent-schrift);

                    }



                    &::after {
                        transform: scaleY(1);
                    }
                }
            }
        }
    }

    i.burger {
        grid-area: b;
        display: none;
    }

    &.head_sticky {
        box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.15);
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);

        .logo {
            display: flex;
            align-self: center;
            padding-top: 0.4rem;
            margin-bottom: 0 !important;
            height: auto;

            img {
                width: 20rem;
                height: auto;
                margin: 0 !important;
                padding: 0 !important;
                transition: all 0.3s ease-in-out;
            }
        }
    }
}

/*
  ======================================================================
  Mobile
  ======================================================================
*/

@media (max-width: 768px) {
    .section[role=pre-head] {
        display: none;
    }

    .section[role=head] {
        height: 4.5rem;
        padding-bottom: 0;
        box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.15);
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);

        .logo {
            grid-area: a;
            width: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            margin: 0;
            transition: all 0.3s ease-in-out;

            img {
                width: 30rem;
                height: auto;
                margin-top: 0.25rem;
            }
        }

        .nav-main {
            position: absolute;
            top: 4.5rem;
            right: -5vw;
            width: 100vw;
            height: 100vh;
            z-index: 5;
            background-color: rgba(255, 255, 255, 0.9);


            display: none;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-end;


            &.active {
                display: flex;
            }

            ul {
                display: flex;
                flex-direction: column;
                list-style: none;
                padding: 0;
                margin: 0;

                li {
                    position: relative;
                    margin: 0.25rem 0.75rem;
                    padding: 0.55rem 0 0.2rem 0;
                    font-size: 1rem;
                    font-weight: 400;
                    color: var(--main-dark);
                    cursor: pointer;
                    transition: color 0.2s;
                    text-align: right;

                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 0.15rem;
                        background-color: var(--akzent80);
                        transform: scaleX(0);
                        transform-origin: left;
                        transition: transform 0.3s ease;
                    }

                    &:hover,
                    &.active {
                        color: var(--akzent100);

                        &::after {
                            transform: scaleX(1);
                        }
                    }
                }
            }
        }

        i.burger {
            grid-area: b;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            font-size: 2rem;

            &:before {
                font-weight: 200;
            }
        }
    }
}






/*
  ======================================================================
Hero
  ======================================================================
  */


.section[role=hero] {
    background-color: var(--bg-beige);

    height: 40rem;



    .content {

        background-image: url(/images/hero-keyvisual.webp);
        background-position: center right;
        background-size: contain;
        background-repeat: no-repeat;

        height: 100%;
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        padding-right: 45rem;



        &.alt {

            background-image: url(../images/hero-keyvisual1.webp);
            height: 70%;
        }


        h1 {
            font-size: 2.1rem;
            font-weight: 300;

            line-height: 1.3;
            color: var(--main-dark);
            margin-top: 6rem;

            strong {
                font-weight: 600;
                display: block;
                margin-top: 0.5rem;
            }
        }



        p {
            margin-top: 1.5rem;
            color: var(--fliesstext);
            font-size: 1.2rem;
            font-weight: 300;
            line-height: 1.4;
            padding-right: 3rem;
        }

        .wrapper-cta {
            margin-top: 1.5rem;



        }

        .wrapper-player-hero {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 1rem;

            margin-top: 6rem;




            .player-hero {
                transition: all 0.2s;
                background-color: rgba(255, 255, 255, 0.8);
                display: grid;
                grid-template-areas: "a b" "c c";

                grid-template-columns: auto 1fr;
                min-width: 12rem;
                grid-column-gap: 0.25rem;


                border-radius: 0.5rem;

                box-shadow:
                    0 4px 6px rgba(0, 0, 0, 0.05),

                    0 10px 20px rgba(0, 0, 0, 0.08);

                cursor: pointer;

                i {
                    height: 3rem;
                    aspect-ratio: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                    background-color: #F6F6F6;
                    border-radius: 5px;
                    margin: 0.5rem;
                    font-weight: 900;
                }

                &:hover i {
                    color: #FFF !important;
                    background-color: var(--bg-burgunder);

                }

                .logo {
                    height: 100%;

                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    img {
                        max-height: 1.5rem;
                        filter: grayscale(100%);
                        transition: all 0.2s;
                    }
                }


                .wrapper-playtime {
                    background-color: #F6F6F6;
                    display: none;

                    .playtime {
                        background-color: var(--main-cta);
                        height: 0.5rem;

                    }



                }


            }



            .player-hero:hover {


                transform: translateY(-2px);
                box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .15);
                transition: all 0.2s;




                i {
                    color: var(--akzent100);
                }

                .logo {

                    img {

                        filter: grayscale(0%);
                        transition: all 0.2s;
                    }
                }



            }


            .player-hero.active {
                i.play:before {
                    content: "\f04c";
                }
            }


        }

        .hero-success-nudge {
            height: 0px;
            overflow: hidden;
            transform: translateY(-10px);
            pointer-events: none;
            transition: all 0.4s ease;

        }

        .hero-success-nudge.visible {
            margin-top: 0.5rem;
            height: 1.5rem;
            transform: translateY(0);
            pointer-events: auto;
            margin-bottom: -2rem;


        }


    }

}

@media (max-width: 768px) {

    .section[role=hero] {


        height: auto;



        .content {

            background-image: none;
            background-position: center right;
            background-size: contain;
            background-repeat: no-repeat;

            height: 100%;
            width: 100%;

            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            padding-right: 0;

            h1 {
                font-size: 1.5rem;
                font-weight: 300;

                line-height: 1.3;
                color: var(--main-dark);
                margin-top: 6rem;

                strong {
                    font-weight: 600;
                    display: block;
                    margin-top: 0.5rem;
                }
            }



            p {
                margin-top: 1.5rem;
                color: var(--fliesstext);
                font-size: 1.1rem;
                font-weight: 300;
                line-height: 1.4;
                padding-right: 3rem;
            }

            .wrapper-cta {
                margin-top: 1.5rem;

                a.cta:first-of-type {
                    margin-right: 0.5rem;
                }


            }

            .wrapper-player-hero {
                width: 100%;
                display: grid;
                grid-template-columns: 1fr;
                grid-gap: 1rem;

                margin-top: 3rem;




                .player-hero {
                    transition: all 0.2s;
                    background-color: rgba(255, 255, 255, 0.8);
                    display: grid;
                    grid-template-areas: "a b" "c c";

                    grid-template-columns: auto 1fr;
                    min-width: 12rem;
                    grid-column-gap: 0.25rem;


                    border-radius: 0.5rem;
                    /* schön abgerundet */
                    box-shadow:
                        0 4px 6px rgba(0, 0, 0, 0.05),
                        /* leichter naher Schatten */
                        0 10px 20px rgba(0, 0, 0, 0.08);
                    /* weicher größerer Schatten */

                    i {
                        height: 3rem;
                        aspect-ratio: 1;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                        background-color: #F6F6F6;
                        border-radius: 5px;
                        margin: 0.5rem;
                        font-weight: 900;
                    }

                    i:hover {
                        color: var(--akzent100);
                    }

                    .logo {
                        height: 100%;

                        display: flex;
                        align-items: center;
                        justify-content: flex-start;

                        img {
                            max-height: 1.5rem;
                            filter: grayscale(0%);
                            transition: all 0.2s;
                        }
                    }


                    .wrapper-playtime {
                        background-color: #F6F6F6;
                        display: none;

                        .playtime {
                            background-color: var(--main-cta);
                            height: 0.5rem;

                        }



                    }



                }



                .player-hero:hover,
                .player-hero.active {


                    transform: translateY(-2px);
                    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .15);
                    transition: all 0.2s;

                    .logo {

                        img {

                            filter: grayscale(0%);
                            transition: all 0.2s;
                        }
                    }


                    .wrapper-playtime {

                        display: none;

                    }

                }

            }



        }

    }


}

/*
  ======================================================================
Content
  ======================================================================
  */
.section[role=content] {


    h2 {
        font-size: 2rem;
        color: var(--main-dark);
        font-weight: 300;
        line-height: 1.3;
        margin-bottom: 1rem;
        padding-top: 3rem;

        strong:before {
            content: '\A';
            white-space: pre;




        }

        strong {
            font-weight: 600;
        }






    }



    h3 {
        font-size: 1.5rem;
        color: var(--main-dark);
        font-weight: 300;
        line-height: 1.3;
        margin-bottom: 1rem;
        padding-top: 1rem;

        strong:after {
            content: '\A';
            white-space: pre;




        }

        strong {
            font-weight: 600;
        }






    }




    p {
        font-weight: 300;
        font-size: 1.2rem;
        line-height: 1.4;
        color: var(--fliesstext);
    }

    p.small {
        font-size: 1rem;
    }

    p+p {
        margin-top: 1.5rem;
    }


}

.section[role=faq] {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--bg-beige);
    display: grid;
    grid-template-areas: "a b";
    grid-template-columns: 1fr 3fr;
    grid-gap: 2.5rem;

    /* ---------- Info Wrapper (Tabs / Kategorien) ---------- */
    .info-wrapper {
        grid-area: a;

        ul {
            color: var(--fliesstext);
            font-weight: 400;
            font-size: 1rem;
            padding: 0 0 1.2rem 0;
            font-size: 1.1rem;
            line-height: 1.3;

            li {
                padding: 0.75rem 1rem;
                margin-bottom: 0.5rem;
                transition: all 0.2s;
                cursor: pointer;
                position: relative;
                border-radius: 2rem;
                background-color: transparent;

                &.active,
                &:hover {
                    color: var(--main-dark);
                    background-color: rgba(255, 255, 255, 0.7);
                }
            }
        }
    }

    /* ---------- FAQ Wrapper (Inhalt) ---------- */
    .faq-wrapper {
        display: none;
        /* neu: wird nur bei aktiver Kategorie sichtbar */

        &.active {
            display: block;
        }

        .faq-wrapper__frage {
            cursor: pointer;

            i.faq:before {
                content: "\2b";
            }

            p.faq-frage {
                color: var(--main-dark);
                font-weight: 400;
                border-bottom: 1px dotted var(--akzent50);
                padding: 1.2rem 1rem 1.2rem 0;
                font-size: 1.1rem;
                line-height: 1.3;

                i {
                    float: right;
                    opacity: 0.8;
                    color: var(--akzent-schrift);
                }
            }

            &:first-child p.faq-frage {
                margin-top: -0.4rem;
            }

            &:last-child p.faq-frage {
                border-bottom: none;
                padding-bottom: 0;
            }
        }

        .faq-wrapper__antwort {
            padding: 0 10rem 0 0rem;
            height: 0;
            overflow: hidden;
            transition: all 0.25s ease;
            opacity: 0;

            p.faq-antwort {
                color: var(--fliesstext);
                font-weight: 300;
                line-height: 1.4;
                font-size: 0.95rem;
            }
        }

        /* aktive Frage */
        .faq-wrapper__frage.active {
            i.faq:before {
                content: "\f068";
            }

            p.faq-frage {
                border-bottom: none;
            }

            .faq-wrapper__antwort {
                height: auto;
                opacity: 1;
                margin-bottom: 1rem;
            }
        }
    }
}





/* ---------- Responsive ---------- */
@media only screen and (max-device-width: 480px) {
    .section[role=faq] {
        grid-template-areas: "a" "b";
        grid-template-columns: 1fr;

        i {
            display: none;
        }

        .faq-wrapper .faq-wrapper__antwort {
            height: 0;
            overflow: hidden;
        }

        .faq-wrapper__frage.active .faq-wrapper__antwort {
            padding: 0 2rem 0 0rem !important;
        }
    }
}


/*
  ======================================================================
Branding
  ======================================================================
  */
.section[role=branding] {

    background-color: var(--akzent75);

    h3 {
        font-size: 1.8rem;
        color: #FFF;
        font-weight: 300;
        line-height: 1.4;
        text-align: center;
        padding: 3rem 0 2rem 0;

        strong {
            font-weight: 500;
        }

        strong:after {
            content: '\A';
            white-space: pre;




        }

    }

    p {
        text-align: center;
        margin-bottom: 2.5rem;
    }


}

.section[role=branding].burgunder {

    background-color: var(--bg-burgunder) !important;
    margin-top: 2rem;
}


/*
  ======================================================================
Footer
  ======================================================================
*/
.section[role=pre-footer] {
    background-color: var(--akzent70);
    margin-top: 4rem;
    overflow: hidden;
    display: none;

    .laufband {
        display: flex;
        width: max-content;
        animation: laufband-scroll 35s linear infinite;
        padding: 0.5rem;

        &:hover {
            animation-play-state: paused;
        }
    }

    ul {
        display: flex;
        justify-content: space-between;
        color: #FFF;
        font-weight: 300;
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            padding: 0 2rem;
            white-space: nowrap;

            a {
                color: inherit;
                text-decoration: none;
            }
        }
    }


}


@keyframes laufband-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


.section[role=footer] {
    width: 100%;

    min-height: 20rem;
    background-color: var(--bg-beige);

    padding-top: 5rem;
    padding-bottom: 1rem;
    /*

    background-color: #fff;
    background-image: radial-gradient(circle, #CECECE 0%, transparent 30%), radial-gradient(circle, #CECECE 0%, transparent 30%);
    background-size: 5px 5px;
    background-position: 0 0, 0 0;

*/


    h4 {
        font-weight: 500;
        margin-bottom: 0.75rem;
    }

    p {

        font-weight: 300;
        font-size: 0.95rem;
        line-height: 1.4;
        color: var(--fliesstext);
    }



    .footer-grid-subnav {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 3rem;

        p.icons {
            margin-top: 1rem;
            margin-bottom: 0.25rem;
        }

        a.email:before {
            content: "\f0e0";
            font-family: FontAwesome;

            display: block;
            width: 1.45rem;
            float: left;


        }

        a.telefon:before {
            content: "\f095";
            font-family: FontAwesome;
            display: block;
            width: 1.45rem;
            float: left;

        }


        a.reseller:before {
            content: "\f234";
            font-family: FontAwesome;
            display: block;
            width: 1.75rem;
            float: left;

        }



        .hilfe {
            display: flex;
            justify-content: center;

            ul {
                text-align: left;
                padding: 0;
                margin: 0;

                li {
                    color: var(--fliesstext);
                    font-weight: 300;

                    a {
                        color: inherit;
                    }
                }


            }
        }


    }




    .footer-grid-copyright {

        display: grid;
        grid-template-columns: 1fr 1fr;
        border-top: 1px dotted rgba(119, 124, 129, 0.5);
        padding-top: 0.5rem;
        margin-top: 2rem;


        p.copyright {

            font-size: 0.85rem;


            svg {
                height: 0.7rem;
                display: inline-block;
                margin: 0 0.15rem;
                fill: var(--fliesstext);
                transition: all 0.2s;


            }

            &:hover svg {
                fill: var(--main-cta);

            }
        }

        .navigation-legal {
            display: flex;
            justify-content: flex-end;

            ul {
                display: flex;
                text-align: right;
                align-self: flex-end;
                font-weight: 300;
                font-size: 0.85rem;

                li {
                    margin-left: 0.5rem;
                    color: var(--fliesstext);

                    a {
                        color: inherit;
                    }
                }
            }
        }

    }

}


@media (max-width: 768px) {
    .section[role=footer] {
        .footer-grid-subnav {


            grid-template-columns: 1fr;


            .hilfe {

                justify-content: flex-start;

            }
        }


        .footer-grid-copyright {
            grid-template-columns: 1fr;
            padding-bottom: 5rem;


            p.copyright {
                line-height: 2;
                margin-bottom: 0.5rem;
                margin-top: 0.5rem;
                text-align: center;
            }

            .navigation-legal {
                justify-content: center;
            }
        }
    }
}



/*
  ======================================================================
Tools
  ======================================================================
  */


/*************** Player 4er für Contentbereich ***************/

.wrapper-player-4er {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;

    margin: 3rem 0;





    .player-4er {
        transition: all 0.2s;
        background-color: rgba(255, 255, 255, 1);
        display: grid;
        grid-template-areas: "a a" "b b";

        grid-template-columns: auto 1fr;
        min-width: 12rem;



        border-radius: 0.5rem;
        border: 1px solid #F0F3F6;
        padding: 1rem;



        .head {
            grid-area: a;
            margin-bottom: 0.75rem;

            h3 {

                font-weight: 500;
                margin: 0;
                margin-bottom: .3rem;
                padding: 0;
                font-size: 1.3rem;
            }

            p {
                font-size: 0.95rem;
                line-height: 1.5;


            }




        }






        .player {
            grid-area: b;

            display: flex;
            justify-content: space-between;
            align-items: center;

            padding-right: 2rem;


            i {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                cursor: pointer;


                font-weight: 400;

                color: var(--main-dark);
                transition: all 0.2s;


                &:before {

                    font-weight: 900;
                    margin-right: 0.5rem;
                    background-color: #F6F6F6;
                    aspect-ratio: 1;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    width: 2.5rem;


                    border-radius: 5px;
                }

                &:hover {
                    color: var(--bg-burgunder);

                }


                &:hover::before {
                    background-color: var(--bg-burgunder);
                    color: #FFF;
                    border-radius: 5px;
                }

            }
        }




    }




    .player-4er.active {


        transition: all 0.2s;



        .wrapper-playtime {

            display: block;

        }

    }

}



@media (max-width: 768px) {

    .wrapper-player-4er {
        .player-4er {

            min-width: 0rem;
            .player {
                display: block;
        padding-right: 0;

                i {
                    display: block;
                    margin-bottom: 0.5rem;
                }
            }


        }
    }
}


/*************** Contentbox  ***************/

.contentbox {

    width: 100%;
    height: auto;
    border-radius: 1rem;



    padding: 1rem;

    img {
        border-radius: 10px;
        max-width: 100%;
        margin-bottom: 1rem;
    }

    i.contentbox_head {
        color: var(--akzent100);
        font-size: 2rem;
        font-weight: 300;
        margin: 1rem 0 0.5rem 0;
        display: block;
    }




    p {
        font-size: 1.1rem !important;
    }



    ul.audiodemos {
        background-color: #FFF;

        padding: 1rem;
        border-radius: 10px;

        height: 17rem;
        overflow: hidden;

        li {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            margin-top: 0.5rem;
            padding-bottom: 0.5rem;

            border-bottom: 1px solid #F6F6F6;
            cursor: pointer;

            i {
                height: 3rem;
                aspect-ratio: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                background-color: #F6F6F6;
                border-radius: 5px;
                font-weight: 900;
                grid-area: b;
                margin-right: 1rem;
                transition: all 0.2s;
            }

            &:hover i {
                background-color: var(--bg-burgunder);
                color: #FFF;

            }

            &:hover {
                color: var(--bg-burgunder);
            }



            span em {
                font-style: normal;
                font-weight: 300;
                font-size: 0.9rem;
                display: flex;
                margin-top: -1.5rem;
                transition: all 0.2s;
                opacity: 0;

            }

            &:hover span:has(em) {


                margin-top: -0.1rem;
            }

            &:hover span em {


                margin-top: -0.25rem;
                margin-bottom: -0.4rem;
                opacity: 0.8;
                color: var(--fliesstext) !important;
            }


        }





        li:first-of-type {
            margin-top: 0;
        }

        li:last-of-type {
            padding-bottom: 0;
            border-bottom: 0;
        }


    }


    ul.audiodemos.no-padding {
        padding: 0;
        margin-top: 1rem;
        margin-bottom: 0;
        height: auto;
    }


    .mustertexte {
        background-color: #FFF;

        padding: 1rem;
        border-radius: 10px;

        height: 17rem;
        overflow: auto;
    }


    .scrollbox {
        margin-top: 1rem;
        height: auto;
        overflow: hidden;
        border-radius: 10px;
    }


    a.cta {
        display: inline-block;
        margin-top: 2rem;
    }

}



.contentbox.small {

    i.contentbox_head {
        color: var(--bg-burgunder);
        font-size: 1.5rem;
        font-weight: 300;
        margin: 1rem 0 0 0;
        display: block;
    }



    p {
        font-size: 0.95rem !important;
    }


    ul.audiodemos {

        height: auto;

        li {

            margin-top: 0.5rem;
            padding-bottom: 0.5rem;

            border-bottom: 1px solid #F6F6F6;


            i {
                height: 2.5rem;

            }
        }

        li:first-of-type {
            margin-top: 0;
        }

        li:last-of-type {
            padding-bottom: 0;
            border-bottom: 0;
        }



    }

}


/*
  ======================================================================
Swiper
  ======================================================================
*/


.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    width: 98.5%;
}

.section-header h2 {
    font-size: 2rem;
    margin: 0;
}

.nav-buttons {
    display: flex;
    gap: 0.5rem;
}

.nav-buttons button {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 16px;
    color: var(--akzent100);
    transition: background 0.2s;
}

.nav-buttons button:hover {
    background: #f0f0ff;
}

.slider-container {
    overflow: hidden;
    position: relative;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.4s ease;
    gap: 20px;
}

.slide {
    flex: 0 0 calc(25% - 20px);
    background: #fff;
    border-radius: 12px;
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.05); */
}

.slide ul {
    padding: 1rem 0 0 0 !important;
}



.slide h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.slide p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.4;
}

/* Pagination */
.pagination {
    text-align: center;
    margin-top: 1rem;
}

.dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.dot.active {
    background: var(--akzent100);
}

/* Mobile: nur 1 Karte */
@media (max-width: 768px) {
    .slide {
        flex: 0 0 100%;
    }
}







/*
  ======================================================================
Accordions
  ======================================================================
*/






/* Kriterienblöcke */
.boxen-accordion {
    padding: 0 0 3rem 0;

    .intro {
        text-align: center;

        h2 {
            padding-top: 1rem;
            margin-bottom: 3rem;
        }
    }

    .ansage-kriterien {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;

        h3 {
            font-size: 1.25rem;
            /* 20px */
            font-weight: 600;
            margin: 0;
            padding: 0 0 0.35rem 0;
            display: flex;
            align-items: center;
            color: var(--main-dark);

            span {
                display: inline-block;
                font-size: 1.5rem;
                /* 24px */
                font-weight: 700;
                color: var(--akzent-schrift);
                width: 1.75rem;
                /* schon rem */
                margin-right: 0.75rem;
                /* schon rem */
                border-right: 0.0625rem solid var(--fliesstext);
                /* 1px */
            }
        }

        p {
            font-size: 1rem;
            /* 16px */
            line-height: 1.5;
            color: var(--fliesstext);
        }
    }
}

/*///// Responsive /////*/
@media (max-width: 768px) {
    .boxen-accordion {

        .ansage-kriterien {
            grid-template-columns: 1fr;
            gap: 0;

            div {
                border-top: 1px dashed #ddd;
                margin-top: 0.5rem;
                padding-top: 0.5rem;
            }

            div:first-child {
                border-top: 0px;
            }

            h3 {
                cursor: pointer;
                padding: 0;
                position: relative;


                &.open+p {
                    display: block;
                    max-height: 50rem;
                    padding: 0.5rem 2rem 1rem 2.5rem;
                }

                &:after {
                    font-family: "FontAwesome";
                    font-weight: 400;
                    content: "\f078";
                    position: absolute;
                    right: 0;
                    color: var(--akzent100);
                    font-size: 1rem;
                    transition: all 0.2s;
                }

                &.open:after {
                    transform: rotate(180deg);
                    transition: all 0.2s;
                }
            }

            p {
                display: none;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
            }
        }
    }
}


/*
  ======================================================================
Tool Kontakt Seitenleiste
  ======================================================================
*/


.tool-kontakt-wrapper {
    z-index: 100;
    grid-column-gap: .25rem;
    grid-row-gap: .25rem;
    background-color: #fff;
    border-top-left-radius: .5rem;
    border-bottom-left-radius: .5rem;
    flex-direction: column;
    align-items: center;
    width: 3.5rem;
    padding: .25rem;
    display: flex;

    position: fixed;
    top: 40svh;
    right: 0%;
    bottom: auto;
    left: auto;
    box-shadow: 0 0 4px #73737333;
    justify-content: center;


    .tool-kontakt-wrapper_iconbox {
        aspect-ratio: 1;
        color: var(--biss-green);
        border-radius: .25rem;
        justify-content: center;
        align-items: center;
        padding: .75rem;
        display: flex;
        position: relative;

        i {
            font-weight: 400;
            color: var(--akzent100);
        }




    }

    .tool-kontakt-wrapper_iconbox::after {
        content: attr(aria-label);
        position: absolute;
        right: calc(100% + 12px);
        /* Tooltip links vom Icon */
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;

        background: #f5f8f9;
        /* sehr helles Grau statt kräftiger Farbe */
        color: var(--main-dark);
        /* dunkles Blau für Text */
        padding: 0.5rem 0.8rem;
        /* mehr Luft */
        border-radius: 0.25rem;
        /* etwas eckiger, leichter Look */
        font-size: 0.9rem;
        font-weight: 400;
        font-family: var(--fliesstext);

        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        /* leichter Schatten, subtil */
        font-family: var(--fliesstext);
    }


    .tool-kontakt-wrapper_iconbox:hover {
        background-color: #f5f8f9;

    }

    .tool-kontakt-wrapper_iconbox:hover:after {
        opacity: 1;
        transform: translateY(-50%) translateX(-0.25rem);
    }



    .tool-kontakt-wrapper_trenner {
        height: 0;
        border-bottom: 1px dotted #b6b8ba;
        width: 70%;

    }
}




@media (max-width: 768px) {

    .tool-kontakt-wrapper {
        flex-direction: row;
        width: auto;
        padding: .25rem .5rem;

        bottom: 1rem;
        left: 50%;
        top: auto;
        right: auto;
        transform: translateX(-50%);
        border-radius: .5rem;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.95);
        ;
    }

    .tool-kontakt-wrapper_trenner {
        height: 2rem !important;
        width: 0;
        border-left: 1px dotted #b6b8ba;
        border-bottom: none;
    }
}

/*
  ======================================================================
  CTA
  ======================================================================
*/
a.cta,
button.cta {
    border: 1px solid var(--main-cta);
    color: #FFF;
    padding: 0.35rem 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    font-size: 0.9rem;
    display: inline-block;

    transition: all 0.2s;
    font-family: var(--font-fliesstext);
    background-color: var(--main-cta);
    cursor: pointer;
    font-weight: 300;
    border-radius: 2rem;
    line-height: normal !important;
}

a.cta.secondary,
button.cta.secondary {

    background-color: transparent;
    color: var(--main-dark);
    border: 1px solid var(--main-dark);


}

a.cta:hover,
button.cta:hover {
    background-color: #FFF;
    color: var(--main-cta);
    border: 1px solid var(--main-cta);
    transition: all 0.2s;
}

a.cta.secondary:hover,
button.secondary.cta:hover {
    background-color: #FFF;
    color: var(--main-cta);
    border: 1px solid var(--main-cta);
    transition: all 0.2s;
}

a.cta+a.cta {
    margin-left: 1rem;
}


/*
  ======================================================================
  Grids
  ======================================================================
  */
.grid-20-80 {
    display: grid;
    grid-template-columns: 20% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-30-70 {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-40-60 {
    display: grid;
    grid-template-columns: 40% 1fr;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-60-40 {
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-column-gap: 10rem;
    align-items: flex-start;

}

.grid-70-30 {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-gap: 2.5rem;
    align-items: flex-start;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 3rem;
    grid-row-gap: 2rem;
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}

.grid-6 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 2.5rem;
}


/*///// Responsive /////*/
@media (max-width: 768px) {

    .grid-20-80,
    .grid-30-70,
    .grid-70-30,
    .grid-60-40,
    .grid-40-60,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6 {
        grid-template-columns: 1fr;
    }

}



/*
  ======================================================================
  Icons
  ======================================================================
  */
i {
    font-style: normal;
}

/* FontAwesome Icon Definitions – alphabetisch sortiert */

i:before {
    font-family: "FontAwesome";
}

/* Bestehende Icons */
i.anrufbeantworter:before {
    content: "\f897";
}

i.ansage-vor-melden:before {
    content: "\e6e2";
}

i.brennermedien:before {
    content: "\f06d";
    padding: 0 0.15rem;
}

i.burger:before {
    content: "\f0c9";
}

i.burger.active:before {
    content: "\e59b";
}

i.checkbox:before {
    content: "\f0c8";
}

i.checkbox.checked:before {
    content: "\f14a";
}

i.discount:before {
    content: "\f646";
}

i.envelope:before {
    content: "\f0e0";
}

i.gear:before {
    content: "\f013";
}

i.handy:before {
    content: "\f3ce";
}

i.phone:before {
    content: "\f095";
}

i.play:before {
    content: "\f04b";
}

i.radiobutton:before {
    content: "\f111";
}

i.radiobutton.checked:before {
    content: "\f192";
}

i.warteschleife:before {
    content: "\e41b";
}

/* Neue Icons aus den Contentboxen (alphabetisch einsortiert) */

i.ansprechpartner:before {
    content: "\f2bb";
    /* user-tie */
}

i.beratung:before {
    content: "\f0eb";
    /* lightbulb */
}

i.erfahrung:before {
    content: "\f1da";
    /* graduation-cap */
}

i.express:before {
    content: "\f135";
    /* bolt */
}

i.folgekosten:before {
    content: "\f02d";
    /* bookmark / no recurring cost */
}

i.ki:before {
    content: "\f544";
    /* robot */
}

i.kunden:before {
    content: "\f0c0";
    /* users */
}

i.rechnung:before {
    content: "\f571";
    /* file-invoice */
}


/*
  ======================================================================
  Schriften
  ======================================================================
  */
@font-face {
    font-family: "FontAwesome";
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url("fonts/fontawesome/100.woff2") format("woff2");
}

@font-face {
    font-family: "FontAwesome";
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url("fonts/fontawesome/300.woff2") format("woff2");
}

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

@font-face {
    font-family: "FontAwesome";
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    src: url("fonts/fontawesome/900.woff2") format("woff2");
}

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url("fonts/soehne/100.woff2") format("woff2");
}

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 200;
    src: url("fonts/soehne/200.woff2") format("woff2");
}

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url("fonts/soehne/300.woff2") format("woff2");
}

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

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url("fonts/soehne/500.woff2") format("woff2");
}

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url("fonts/soehne/600.woff2") format("woff2");
}

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

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 800;
    src: url("fonts/soehne/800.woff2") format("woff2");
}

@font-face {
    font-family: "Soehne";
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    src: url("fonts/soehne/900.woff2") format("woff2");
}

/*
  ======================================================================
    Josh's Custom CSS Reset
    https://www.joshwcomeau.com/css/custom-css-reset/
  ======================================================================
  */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

body {
    line-height: calc(1em + 0.5rem);
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
}

#root,
#__next {
    isolation: isolate;
}

ol,
ul {
    list-style: none;
}