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

* {
    box-sizing: border-box;
}


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

    width: 100%;
    min-height: 100%;

    background: #000;
}


body {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

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

    color: #fff;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;


    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;
    min-height: 100svh;

    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.
========================================================= */

.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;
}



/* =========================================================
   TABLETS / iPAD

   Lesbarkeit verbessert, ohne den Look unnötig
   kräftig zu machen.
========================================================= */

@media
    (min-width: 701px)
    and
    (max-width: 1400px) {


    .brand-profession {

        font-size:
            14px;

        font-weight:
            400;

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


    .legal-navigation a {

        font-size:
            14px;

        font-weight:
            400;

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



    .legal-content {

        width:
            min(700px, 58vw);

        margin-right:
            5vw;
    }



    .legal-section h1 {

        font-size:
            26px;
    }


    .legal-section h2 {

        font-size:
            15px;

        font-weight:
            400;
    }


    .legal-section p {

        font-size:
            15px;

        font-weight:
            400;

        line-height:
            1.6;

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


    .legal-section .legal-date {

        font-size:
            12px;

        font-weight:
            400;

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



    .legal-footer {

        width:
            min(700px, 58vw);

        margin-right:
            5vw;
    }


    .legal-footer a {

        font-size:
            12px;

        font-weight:
            400;
    }

}



/* =========================================================
   SCHMALERE TABLETS
========================================================= */

@media
    (min-width: 701px)
    and
    (max-width: 950px) {


    .legal-content {

        width:
            66vw;

        margin-right:
            4vw;
    }


    .legal-footer {

        width:
            66vw;

        margin-right:
            4vw;
    }

}



/* =========================================================
   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:
            10px;

        font-weight:
            400;
    }



    .legal-navigation a {

        font-size:
            11px;

        font-weight:
            400;
    }



    .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;

        font-weight:
            400;
    }



    .legal-section p {

        font-size:
            14px;

        font-weight:
            400;

        line-height:
            1.58;

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



    .legal-section .legal-date {

        font-size:
            11px;

        font-weight:
            400;
    }



    .legal-footer {

        width:
            auto;

        margin:
            20px
            5vw
            0;
    }


    .legal-footer a {

        font-size:
            11px;

        font-weight:
            400;
    }

}



/* =========================================================
   HANDYS QUER
========================================================= */

@media
    (max-height: 600px)
    and
    (max-width: 1000px) {


    body {

        background-attachment:
            scroll;
    }


    .legal-header {

        height:
            70px;

        min-height:
            70px;

        padding:
            0
            4vw;
    }


    .header-brand {

        display:
            block;
    }


    .brand-name {

        font-size:
            18px;
    }


    .brand-profession {

        display:
            block;

        margin-top:
            3px;

        font-size:
            10px;

        font-weight:
            400;
    }


    .legal-navigation a {

        font-size:
            11px;

        font-weight:
            400;
    }



    .legal-content {

        width:
            auto;

        margin:
            20px
            4vw
            0;

        padding:

            25px
            28px
            40px;

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


    .legal-section p {

        font-size:
            14px;

        font-weight:
            400;

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


    .legal-footer {

        width:
            auto;

        margin:
            20px
            4vw
            0;
    }

}