/* =========================================================
   ALLEGOTV · DATENSCHUTZ · LEGAL PAGE
   GRUNDLAYOUT
========================================================= */


/* =========================================================
   SEITEN-GRUNDLAGE
========================================================= */





.legal-page{
    position:relative;
    width:100%;
    background:#F4F5F2;
    color:#17202A;
    overflow:hidden;
}


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

.legal-hero{
    position:relative;
    width:100%;
    min-height:460px;
    padding:180px 40px 100px;
    display:flex;
    align-items:flex-end;

    background:
        linear-gradient(
            180deg,
            #E9EDF0 0%,
            #F4F5F2 100%
        );
}

.legal-hero-inner{
    width:min(1180px,100%);
    margin:0 auto;
}

.legal-kicker{
    display:block;
    margin-bottom:24px;

    font-size:10px;
    line-height:1;
    font-weight:600;
    letter-spacing:.22em;

    color:#4169A8;
}

.legal-hero h1{
    max-width:900px;
    margin:0;

    font-size:clamp(52px,7vw,92px);
    line-height:.98;
    letter-spacing:-.06em;
    font-weight:500;

    color:#17202A;
}

.legal-hero h1 em{
    font-style:normal;
    color:#4169A8;
}

.legal-hero p{
    max-width:680px;
    margin:30px 0 0;

    font-size:18px;
    line-height:1.7;
    font-weight:400;

    color:#69747B;
}


/* =========================================================
   INHALTSBEREICH
========================================================= */

.legal-content{
    position:relative;
    width:100%;
    padding:100px 40px 150px;
}

.legal-layout{
    width:min(1480px,100%);
    margin:0 auto;

    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:50px;
    align-items:start;
}



/* =========================================================
   INHALTSNAVIGATION
========================================================= */

.legal-navigation{
    position:sticky;
    top:100px;
}

.legal-navigation > span{
    display:block;
    margin-bottom:22px;

    font-size:9px;
    line-height:1;
    font-weight:600;
    letter-spacing:.20em;

    color:#8A949A;
}

.legal-navigation nav{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.legal-navigation a{
    position:relative;
    display:block;

    padding:6px 0 6px 14px;

    font-size:11px;
    line-height:1.45;
    font-weight:400;

    color:#69747B;
    text-decoration:none;

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

.legal-navigation a::before{
    content:"";

    position:absolute;
    left:0;
    top:50%;

    width:4px;
    height:4px;

    border-radius:50%;
    background:#56B8B0;

    opacity:.65;

    transform:translateY(-50%);

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

.legal-navigation a:hover{
    color:#4169A8;
    transform:translateX(3px);
}

.legal-navigation a:hover::before{
    opacity:1;
    transform:
        translateY(-50%)
        scale(1.3);
}


/* =========================================================
   DOKUMENT
========================================================= */

.legal-document{
    width:100%;
    max-width:none;
}


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

.legal-section{
    position:relative;

    padding:0 0 72px;
    margin:0 0 72px;

    border-bottom:
        1px solid
        rgba(23,32,42,.10);

    scroll-margin-top:110px;
}

.legal-section:last-child{
    margin-bottom:0;
    border-bottom:0;
}

.legal-section-number{
    display:block;
    margin-bottom:16px;

    font-size:10px;
    line-height:1;
    font-weight:600;
    letter-spacing:.18em;

    color:#56B8B0;
}

.legal-section h2{
    margin:0;

    font-size:clamp(30px,4vw,46px);
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:500;

    color:#17202A;
}

.legal-section > p{
    max-width:920px;
    margin:28px 0 0;

    font-size:16px;
    line-height:1.85;
    font-weight:400;

    color:#59656E;
}

.legal-section p + p{
    margin-top:22px;
}


/* =========================================================
   KONTAKTBLOCK
========================================================= */

.legal-contact{
    margin-top:30px;
    padding:28px 30px;

    border:
        1px solid
        rgba(23,32,42,.10);

    border-radius:14px;

    background:
        rgba(255,255,255,.58);
}

.legal-contact strong{
    display:block;

    font-size:18px;
    line-height:1.4;
    font-weight:500;

    color:#17202A;
}

.legal-contact address{
    margin:12px 0 0;

    font-size:15px;
    line-height:1.75;
    font-style:normal;

    color:#59656E;
}

.legal-contact p{
    margin:16px 0 0;

    font-size:14px;
    line-height:1.6;

    color:#69747B;
}

.legal-contact a{
    color:#4169A8;
    text-decoration:none;
}

.legal-contact a:hover{
    text-decoration:underline;
}


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

@media(max-width:1050px){

    .legal-layout{
        grid-template-columns:
            190px
            minmax(0,1fr);

        gap:55px;
    }

    .legal-navigation{
        top:90px;
    }

}


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

@media(max-width:800px){

    .legal-hero{
        min-height:390px;
        padding:150px 24px 70px;
    }

    .legal-hero h1{
        font-size:
            clamp(44px,12vw,68px);
    }

    .legal-hero p{
        margin-top:24px;
        font-size:16px;
        line-height:1.7;
    }

    .legal-content{
        padding:70px 24px 100px;
    }

    .legal-layout{
        display:block;
    }

    .legal-navigation{
        position:relative;
        top:auto;

        margin-bottom:70px;
        padding-bottom:24px;

        border-bottom:
            1px solid
            rgba(23,32,42,.10);
    }

    .legal-navigation nav{
        display:grid;

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

        column-gap:24px;
        row-gap:4px;
    }

    .legal-navigation a{
        font-size:10px;
    }

    .legal-section{
        padding-bottom:55px;
        margin-bottom:55px;
    }

    .legal-section h2{
        font-size:34px;
    }

    .legal-section > p{
        font-size:15px;
        line-height:1.8;
    }

    .legal-contact{
        padding:24px;
    }

}


/* =========================================================
   KLEINE MOBILGERÄTE
========================================================= */

@media(max-width:520px){

    .legal-navigation nav{
        grid-template-columns:1fr;
    }

    .legal-hero{
        padding-left:20px;
        padding-right:20px;
    }

    .legal-content{
        padding-left:20px;
        padding-right:20px;
    }

}


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

@media(max-width:1000px){

    .allegotv-footer{

        padding:
            68px
            38px
            22px;

    }

    .footer-brand-block{

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

        column-gap:50px;

    }

    .footer-columns{

        column-gap:42px;

    }

}


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

@media(max-width:700px){

    .allegotv-footer{

        min-height:0;

        padding:
            58px
            24px
            22px;

    }

    .footer-brand-block{

        grid-template-columns:1fr;

        row-gap:24px;

        padding-bottom:42px;

    }

    .footer-logo{

        max-width:210px;

        max-height:58px;

    }

    .footer-brand-definition{

        margin-top:0;

    }

    .footer-brand-definition strong{

        font-size:18px;

    }

    .footer-brand-definition p{

        font-size:13px;

    }


    .footer-standards{

        max-width:340px;

    }

    .footer-brand-statement{

        padding:
            40px
            0
            36px;

        gap:16px;

    }

    .footer-brand-statement > span{

        flex:none;

        width:50px;

    }

    .footer-brand-statement p{

        font-size:11px;

    }

    .footer-bottom{

        grid-template-columns:
            1fr
            auto;

        gap:16px;

    }

    .footer-legal{

        justify-content:flex-end;

        gap:14px;

    }

    .footer-top{

        grid-column:1 / -1;

        justify-self:center;

        margin-top:5px;

    }

}





/* =========================================
   FOOTER · KLEINES HANDY
========================================= */

@media (max-width: 480px){

    .allegotv-footer{
        box-sizing:border-box;
        padding:48px 20px 20px;
    }

    .allegotv-footer-inner{
        width:100%;
        min-width:0;
    }

    .footer-main{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:32px;
        width:100%;
        min-width:0;
    }

    .footer-brand-block,
    .footer-main .footer-column{
        width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .footer-main .footer-column:nth-child(3){
        transform:none;
    }

    .footer-logo{
        max-width:210px;
        max-height:58px;
    }

    .footer-brand-definition{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .footer-links a{
        overflow-wrap:anywhere;
    }

    .footer-standards{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        column-gap:16px;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .footer-standards span{
        min-width:0;
        overflow-wrap:anywhere;
    }

    .footer-brand-statement{
        width:100%;
        box-sizing:border-box;
        gap:12px;
    }

    .footer-brand-statement p{
        min-width:0;
        text-align:center;
    }

    .footer-bottom{
        grid-template-columns:1fr auto;
        gap:16px 10px;
        width:100%;
        box-sizing:border-box;
    }

    .footer-legal{
        justify-content:flex-end;
        flex-wrap:wrap;
        gap:10px;
    }

    .footer-top{
        grid-column:1 / -1;
        justify-self:center;
    }

}