/* =========================================================
   FOUNDATION
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background:#F4F5F2;
    color:#17202A;

    min-height:100vh;

    overflow-x:hidden;
}


/* =========================================================
   ALLEGOTV — LIVING GLASS HEADER
========================================================= */

.site-header{

    --header-height:96px;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:var(--header-height);

    padding:0 54px;

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

    z-index:100;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.045) 0%,
            rgba(224,241,248,.075) 48%,
            rgba(65,105,168,.055) 100%
        );

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

    backdrop-filter:
        blur(16px)
        saturate(118%);

    -webkit-backdrop-filter:
        blur(16px)
        saturate(118%);

    box-shadow:
        0 8px 35px rgba(23,32,42,.045);

    transition:
        height .75s cubic-bezier(.22,1,.36,1),
        background .75s ease,
        box-shadow .75s ease,
        backdrop-filter .75s ease;
}



/* =========================================================
   ALLEGOTV · HEADER TRANSITION
   START → WORK MODE
========================================================= */

.site-header .logo img{
    height:72px;
    transition:
        height .75s cubic-bezier(.22,1,.36,1),
        transform .75s cubic-bezier(.22,1,.36,1),
        opacity .6s ease;
}

.site-header.work-mode .logo img{
    height:42px;
}

.main-nav{
    transition:
        gap .75s cubic-bezier(.22,1,.36,1);
}

.main-nav a{
    transition:
        color .55s ease,
        font-size .75s cubic-bezier(.22,1,.36,1),
        opacity .45s ease;
}

.site-header.work-mode .main-nav{
    gap:26px;
}

.site-header.work-mode .main-nav a{
    font-size:11px;
}





/* =========================================================
   ALLEGOTV — LIGHT SWEEP
========================================================= */

.header-light-sweep{

    position:absolute;

    top:-20%;
    right:-30%;

    width:22%;
    height:140%;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,0.02) 25%,
            rgba(180,225,242,0.16) 50%,
            rgba(255,255,255,0.08) 65%,
            transparent 100%
        );

    filter:blur(12px);

    opacity:0;

    transform:
        skewX(-18deg);

    animation:
        allegoLightSweep
        12s
        cubic-bezier(.45,0,.55,1)
        infinite;
}


@keyframes allegoLightSweep{

    0%{
        right:-30%;
        opacity:0;
    }

    12%{
        opacity:.35;
    }

    28%{
        opacity:.45;
    }

    48%{
        right:100%;
        opacity:.12;
    }

    58%{
        right:125%;
        opacity:0;
    }

    100%{
        right:125%;
        opacity:0;
    }

}


/* =========================================================
   FEINE LICHTLINIE UNTEN
========================================================= */

.site-header::after{

    content:"";

    position:absolute;

    left:12%;
    right:12%;

    bottom:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.08) 18%,
            rgba(86,184,176,.18) 38%,
            rgba(65,105,168,.30) 50%,
            rgba(86,184,176,.14) 64%,
            rgba(255,255,255,.06) 82%,
            transparent 100%
        );

    opacity:.7;

    pointer-events:none;

    transition:
        left .75s ease,
        right .75s ease,
        opacity .75s ease;
}





/* =========================================================
   ARBEITSMODUS
========================================================= */

.site-header.work-mode{

    --header-height:68px;

    background:
        linear-gradient(
            180deg,
            rgba(238,248,252,.16) 0%,
            rgba(190,222,236,.11) 52%,
            rgba(65,105,168,.10) 100%
        );

    border-bottom-color:
        rgba(255,255,255,.22);

    box-shadow:
        0 10px 38px rgba(23,32,42,.075),
        0 1px 18px rgba(65,105,168,.08);

    backdrop-filter:
        blur(20px)
        saturate(130%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(130%);

    padding-left:44px;
    padding-right:44px;

}


/* =========================================================
   LICHTREAKTION IM ARBEITSMODUS
========================================================= */


.site-header.work-mode::after{

    left:18%;
    right:18%;

    opacity:1;
}


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

.main-nav{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    display:flex;
    align-items:center;

    gap:30px;

    transition:
        gap .75s cubic-bezier(.22,1,.36,1);
}


.main-nav a{

    color:#A8D5F5 !important;

    font-family:inherit;

    font-size:12px;

    font-weight:400;

    letter-spacing:.025em;

    text-decoration:none;

    white-space:nowrap;

    transition:
        color .35s ease,
        opacity .35s ease,
        transform .35s ease;

}

.main-nav a:hover{

    color:#F5FBFF !important;
    transform:translateY(-1px);
}



/* =========================================================
   NAVIGATION IM ARBEITSMODUS
========================================================= */

.site-header.work-mode .main-nav{

    gap:26px;
}


.site-header.work-mode .main-nav a{

    color:#4169A8;

    font-size:11px;
}





/* LOGO */

.logo{

    display:flex;
    align-items:center;

    text-decoration:none;

    height:54px;
}


.logo img{

    display:block;

    width:auto;
    height:62px;

    object-fit:contain;
}


/* NAVIGATION */

.main-nav{
    position:absolute;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:30px;
}

.main-nav a{
    color:rgba(23,32,42,.82);
    font-family:inherit;
    font-size:12px;
    font-weight:400;
    letter-spacing:.025em;
    text-decoration:none;
    white-space:nowrap;
    transition:
        color .3s ease,
        transform .3s ease;
}

.main-nav a:hover{
    color:#4169A8;
    transform:translateY(-1px);
}



/* CONTACT */

.header-contact{

    display:flex;
    align-items:center;
    gap:9px;

    margin-left:10px;

    padding:11px 17px;

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

    border-radius:100px;

    color:#4169A8 !important;

    font-size:13px !important;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.header-contact::after{
    display:none;
}

.header-contact:hover{

    background:rgba(65,105,168,0.07);

    border-color:rgba(65,105,168,0.5);

    transform:translateY(-1px);
}



/* =========================================================
   ALLEGOTV FOOTER
   VIDEO · PREMIUM · SYSTEMAGENTUR
========================================================= */

.allegotv-footer{

    position:relative;

    width:100%;

    min-height:430px;

    padding:76px 6vw 24px;

    overflow:hidden;

    color:#ffffff;

    background:#4169A8;

}


/* =========================================================
   VIDEO
========================================================= */

.allegotv-footer-video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:0;

    pointer-events:none;

    opacity:.86;

    filter:
        saturate(.82)
        brightness(.88)
        contrast(.94);

}


/* =========================================================
   TRANSPARENTER BLAUER FARBRAUM
========================================================= */

.allegotv-footer-overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            110deg,
            rgba(42,92,150,.52) 0%,
            rgba(65,105,168,.36) 48%,
            rgba(48,127,151,.44) 100%
        );

}


/* =========================================================
   DEZENTER GLOW
========================================================= */

.allegotv-footer-glow{

    position:absolute;

    z-index:2;

    width:560px;
    height:560px;

    right:-140px;
    top:-280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(180,232,244,.30) 0%,
            rgba(180,232,244,.12) 38%,
            transparent 72%
        );

    filter:blur(10px);

    pointer-events:none;

}


/* =========================================================
   INNER
========================================================= */

.allegotv-footer-inner{

    position:relative;

    z-index:3;

    width:min(1480px,100%);

    margin:0 auto;

}


.footer-main{
    display:grid;
    grid-template-columns:
        1.35fr
        1fr
        1fr
        .9fr;
    gap:5vw;
    padding-bottom:52px;
}


.footer-main .footer-brand-block{
    display:block;
    padding:0;
    grid-template-columns:none;
    column-gap:0;
}




/* =========================================================
   BRAND + COLUMNS
========================================================= */

.footer-brand-block{

    display:grid;

    grid-template-columns:
        minmax(300px,1.15fr)
        minmax(0,2.85fr);

    align-items:start;

    column-gap:7vw;

    padding-bottom:54px;

}


/* =========================================================
   LOGO
========================================================= */

.footer-logo{

    display:block;

    width:auto;

    max-width:250px;

    max-height:86px;

    height:auto;

    object-fit:contain;

}


/* =========================================================
   BRAND DEFINITION
========================================================= */

.footer-brand-definition{

    max-width:390px;

    margin-top:22px;

}

.footer-brand-definition strong{

    display:block;

    max-width:370px;

    font-size:20px;

    line-height:1.28;

    letter-spacing:-.025em;

    font-weight:500;

    color:#ffffff;

}

.footer-brand-definition p{

    margin:14px 0 0;

    max-width:340px;

    font-size:13px;

    line-height:1.65;

    color:rgba(255,255,255,.72);

}



/* =========================================================
   COLUMN
========================================================= */

.footer-column{

    min-width:0;

}


/* =========================================================
   KICKER
========================================================= */

.footer-kicker{

    display:block;

    margin-bottom:20px;

    font-size:9px;

    line-height:1;

    font-weight:600;

    letter-spacing:.20em;

    color:rgba(255,255,255,.62);

}


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

.footer-links{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:9px;

}

.footer-links a{

    position:relative;

    display:inline-block;

    color:rgba(255,255,255,.88);

    font-size:13px;

    line-height:1.45;

    font-weight:400;

    text-decoration:none;

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

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:1px;

    background:#8FE4E0;

    transition:
        width .3s cubic-bezier(.22,1,.36,1);

}

.footer-links a:hover{

    color:#ffffff;

    transform:translateX(3px);

}

.footer-links a:hover::after{

    width:100%;

}


/* =========================================================
   STANDARDS
========================================================= */

.footer-standards{

    display:grid;

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

    column-gap:28px;

    row-gap:12px;

    max-width:400px;

}

.footer-standards span{

    position:relative;

    padding-left:12px;

    font-size:9px;

    line-height:1.5;

    font-weight:500;

    letter-spacing:.09em;

    color:rgba(255,255,255,.68);

}

.footer-standards span::before{

    content:"";

    position:absolute;

    left:0;

    top:.58em;

    width:4px;

    height:4px;

    border-radius:50%;

    background:#8FE4E0;

    box-shadow:
        0 0 8px rgba(143,228,224,.45);

}


/* =========================================================
   BRAND STATEMENT
========================================================= */

.footer-brand-statement{

    display:flex;

    align-items:center;

    gap:24px;

    width:min(720px,100%);

    margin:0 auto;

    padding:48px 0 42px;

}

.footer-brand-statement > span{

    flex:1;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.24)
        );

}

.footer-brand-statement > span:last-child{

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.24),
            transparent
        );

}

.footer-brand-statement p{

    flex:none;

    margin:0;

    text-align:center;

    font-size:12px;

    line-height:1.5;

    letter-spacing:.08em;

    color:rgba(255,255,255,.72);

}

.footer-brand-statement strong{

    color:#ffffff;

    font-weight:500;

}

.footer-brand-statement i{

    margin:0 7px;

    font-style:normal;

    color:#8FE4E0;

}


/* =========================================================
   BOTTOM
========================================================= */

.footer-bottom{

    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:center;

    gap:24px;

    padding-top:18px;

    border-top:1px solid rgba(255,255,255,.16);

}

.footer-copy{

    font-size:9px;

    line-height:1.4;

    letter-spacing:.08em;

    color:rgba(255,255,255,.48);

}

.footer-legal{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:22px;

}

.footer-legal a{

    font-size:9px;

    line-height:1.4;

    color:rgba(255,255,255,.58);

    text-decoration:none;

    transition:
        color .3s ease;

}

.footer-legal a:hover{

    color:#ffffff;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.footer-top{

    justify-self:end;

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border:1px solid rgba(255,255,255,.25);

    border-radius:50%;

    color:#ffffff;

    font-size:13px;

    text-decoration:none;

    background:rgba(255,255,255,.04);

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

}

.footer-top:hover{

    color:#8FE4E0;

    border-color:rgba(143,228,224,.55);

    background:rgba(143,228,224,.08);

    transform:translateY(-3px);

}

.footer-main .footer-column:nth-child(3){
    transform:translateX(-1cm);
}




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

}