/* =========================================================
   ALLEGOTV · IMPRESSUM · LEGAL PAGE
========================================================= */


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


/* =========================================================
   CONTENT
========================================================= */

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


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

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


/* =========================================================
   DOCUMENT
========================================================= */

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


/* =========================================================
   SECTIONS
========================================================= */

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

.legal-section p strong{
    color:#17202A;
    font-weight:500;
}

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

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


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

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

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

    border-radius:14px;

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

.legal-contact.compact{
    max-width:620px;
}

.legal-contact strong{
    display:block;

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

    color:#17202A;
}

.legal-role{
    display:block;
    margin-top:4px;

    font-size:13px;
    line-height:1.5;
    letter-spacing:.01em;

    color:#4169A8;
}

.legal-company{
    display:block;
    margin-top:18px;

    font-size:14px;
    line-height:1.5;
    font-weight:500;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:#8A949A;
}

.legal-contact address{
    margin:14px 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;
}


/* =========================================================
   UNTERNEHMEN · HIGHLIGHT
========================================================= */

.legal-highlight{
    max-width:920px;
    margin-top:34px;
    padding:34px 36px;

    border-left:
        3px solid
        #56B8B0;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.34)
        );
}

.legal-highlight > span{
    display:block;

    margin-bottom:12px;

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

    color:#4169A8;
}

.legal-highlight strong{
    display:block;

    max-width:700px;

    font-size:24px;
    line-height:1.35;
    letter-spacing:-.025em;
    font-weight:500;

    color:#17202A;
}

.legal-highlight p{
    margin:12px 0 0;

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

    color:#69747B;
}


/* =========================================================
   USt-ID
========================================================= */

.legal-id-placeholder{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;

    max-width:720px;

    margin-top:30px;
    padding:24px 28px;

    border:
        1px solid
        rgba(65,105,168,.16);

    border-radius:12px;

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

.legal-id-placeholder span{
    font-size:10px;
    line-height:1;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;

    color:#8A949A;
}

.legal-id-placeholder strong{
    font-size:16px;
    line-height:1.4;
    font-weight:500;
    letter-spacing:.03em;

    color:#4169A8;
}


/* =========================================================
   STREITBEILEGUNG
========================================================= */

#streitbeilegung .legal-contact{
    max-width:720px;
}

#streitbeilegung .legal-contact strong{
    font-size:18px;
}

#streitbeilegung .legal-role{
    color:#69747B;
}


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

.legal-version{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;

    padding-top:10px;

    color:#8A949A;
}

.legal-version span{
    font-size:9px;
    line-height:1;
    font-weight:600;
    letter-spacing:.18em;
}

.legal-version strong{
    font-size:10px;
    line-height:1;
    font-weight:500;

    color:#69747B;
}


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

@media(max-width:1050px){

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

        gap:45px;
    }

    .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{
        max-width:none;

        font-size:15px;
        line-height:1.8;
    }

    .legal-contact{
        padding:24px;
    }

    .legal-highlight{
        padding:28px 24px;
    }

    .legal-highlight strong{
        font-size:21px;
    }

    .legal-version{
        align-items:flex-start;
        flex-direction:column;
        gap:12px;
    }

}


/* =========================================================
   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;
    }

}