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

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;

    min-height: 100%;

    background:
        #000;
}


body {

    position:
        relative;


    min-height:
        100vh;


    font-family:
        "Avenir Next",
        Avenir,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;


    color:
        #fff;


    -webkit-font-smoothing:
        antialiased;



    /*
       Gleiches Hintergrundbild wie ABOUT.

       Links fixiert.
    */

    background-image:

        linear-gradient(
            rgba(0, 0, 0, 0.34),
            rgba(0, 0, 0, 0.34)
        ),

        url("../assets/about/Background_about.jpg");


    background-size:
        cover;


    background-position:
        left center;


    background-repeat:
        no-repeat;


    background-attachment:
        fixed;
}



/* =========================================================
   VARIABLEN
========================================================= */

:root {

    --font-size-1:
        clamp(20px, 1.7vw, 26px);


    --font-size-2:
        clamp(12px, 1vw, 15px);

}



/* =========================================================
   SEITE
========================================================= */

.legal-page {

    position:
        relative;


    width:
        100%;


    min-height:
        100vh;


    padding-bottom:
        55px;
}



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

.legal-header {

    display:
        flex;


    justify-content:
        space-between;


    align-items:
        center;


    width:
        100%;


    height:
        9vh;


    min-height:
        66px;


    padding:
        0
        3vw;
}



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

.header-brand {

    display:
        flex;


    align-items:
        baseline;


    gap:
        clamp(9px, 0.9vw, 15px);


    color:
        #fff;


    text-decoration:
        none;


    white-space:
        nowrap;
}


.brand-name {

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


    font-weight:
        300;


    line-height:
        1;


    letter-spacing:
        0.005em;
}


.brand-profession {

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


    font-weight:
        300;


    line-height:
        1;


    letter-spacing:
        0.09em;


    color:
        rgba(255, 255, 255, 0.82);
}



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

.legal-navigation a {

    color:
        rgba(255, 255, 255, 0.65);


    text-decoration:
        none;


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


    font-weight:
        300;


    transition:
        color 0.25s ease;
}


.legal-navigation a:hover {

    color:
        #fff;
}



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

   Bewusst auf der rechten Seite.
   Links bleibt das Hintergrundmotiv sichtbar.
========================================================= */

.legal-content {

    width:
        min(680px, 49vw);


    margin-left:
        auto;


    margin-right:
        7vw;


    padding:

        clamp(22px, 3vh, 38px)

        clamp(25px, 3vw, 45px)

        clamp(32px, 5vh, 60px);


    background:
        rgba(0, 0, 0, 0.60);


    backdrop-filter:
        blur(2px);


    -webkit-backdrop-filter:
        blur(2px);
}



/* =========================================================
   ABSCHNITTE
========================================================= */

.legal-section {

    margin:
        0;


    padding:
        0;
}


.privacy-section {

    margin-top:
        clamp(52px, 7vh, 82px);


    padding-top:
        clamp(38px, 5vh, 58px);


    border-top:
        1px solid
        rgba(255, 255, 255, 0.17);
}



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

.legal-section h1 {

    margin:
        0
        0
        28px;


    padding:
        0;


    font-size:
        clamp(22px, 1.8vw, 28px);


    font-weight:
        300;


    line-height:
        1.2;


    letter-spacing:
        0.04em;
}


.legal-section h2 {

    margin:
        32px
        0
        9px;


    padding:
        0;


    font-size:
        clamp(13px, 0.95vw, 15px);


    font-weight:
        400;


    line-height:
        1.4;


    letter-spacing:
        0.03em;


    color:
        rgba(255, 255, 255, 0.90);
}



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

.legal-section p {

    margin:
        0
        0
        15px;


    font-size:
        clamp(12px, 0.83vw, 14px);


    font-weight:
        300;


    line-height:
        1.58;


    color:
        rgba(255, 255, 255, 0.74);
}



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

.legal-section a {

    color:
        rgba(255, 255, 255, 0.86);


    text-decoration:
        none;


    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.27);


    transition:

        color 0.25s ease,

        border-color 0.25s ease;
}


.legal-section a:hover {

    color:
        #fff;


    border-color:
        rgba(255, 255, 255, 0.8);
}



/* =========================================================
   STAND
========================================================= */

.legal-section .legal-date {

    margin-top:
        40px;


    font-size:
        11px;


    color:
        rgba(255, 255, 255, 0.38);
}



/* =========================================================
   FOOTER
========================================================= */

.legal-footer {

    width:
        min(680px, 49vw);


    margin:

        20px
        7vw
        0
        auto;


    text-align:
        right;
}


.legal-footer a {

    color:
        rgba(255, 255, 255, 0.46);


    text-decoration:
        none;


    font-size:
        11px;


    font-weight:
        300;


    transition:
        color 0.25s ease;
}


.legal-footer a:hover {

    color:
        #fff;
}



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

@media (max-width: 1000px) {

    .legal-content {

        width:
            58vw;


        margin-right:
            5vw;
    }


    .legal-footer {

        width:
            58vw;


        margin-right:
            5vw;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {


    body {

        background-position:
            left top;


        background-attachment:
            scroll;
    }



    .legal-header {

        height:
            11vh;


        min-height:
            72px;


        padding:
            0
            5vw;
    }



    .header-brand {

        display:
            block;
    }



    .brand-name {

        font-size:
            17px;
    }



    .brand-profession {

        display:
            block;


        margin-top:
            3px;


        font-size:
            9px;
    }



    .legal-navigation a {

        font-size:
            10px;
    }



    .legal-content {

        width:
            auto;


        margin:
            3vh
            5vw
            0;


        padding:

            26px
            22px
            40px;


        background:
            rgba(0, 0, 0, 0.74);
    }



    .legal-section h1 {

        font-size:
            22px;
    }



    .legal-section h2 {

        font-size:
            14px;
    }



    .legal-section p {

        font-size:
            13px;
    }



    .legal-footer {

        width:
            auto;


        margin:
            20px
            5vw
            0;
    }

}