/* =========================================================
   LEGALS.CSS
========================================================= */

.legal-page {

    position: relative;

    overflow: hidden;
}

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

.page-hero,
.hero.section {

    position: relative;

    padding:
        120px 0
        70px;
}

.page-hero::before,
.hero.section::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(87,255,157,.04),
            transparent 28%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(0,217,255,.04),
            transparent 32%
        );

    pointer-events: none;
}

.section-header {

    position: relative;

    z-index: 2;

    text-align: center;
}

.section-header .eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 26px;

    color: #baf6d6;

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .24em;

    text-transform: uppercase;
}

.section-header .eyebrow::before,
.section-header .eyebrow::after {

    content: "";

    width: 48px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--accent-green)
        );
}

.section-header h1 {

    display: block;

    overflow: visible;

    margin-bottom: 24px;

    padding-bottom: .12em;

    line-height: 1.04;

    letter-spacing: -3px;

    font-weight: 800;

    font-size:
        clamp(
            3rem,
            5vw,
            6rem
        );

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #57ff9d,
            #00d9ff,
            #9d74ff
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.section-header .lead,
.section-header p {

    max-width: 850px;

    margin-inline: auto;

    font-size: 1.05rem;

    line-height: 2;

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

/* =========================================================
   LEGAL STACK
========================================================= */

.legal-stack {

    display: flex;

    flex-direction: column;

    gap: 28px;

    width:
        min(
            1400px,
            calc(100% - 60px)
        );

    margin-inline: auto;
}

/* =========================================================
   LEGAL CARD
========================================================= */

.legal-card {

    position: relative;

    overflow: hidden;

    padding:
        clamp(
            36px,
            5vw,
            68px
        );

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(12,16,24,.96),
            rgba(8,10,16,.995)
        );

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

    box-shadow:
        0 35px 90px rgba(0,0,0,.42);

    isolation: isolate;
}

.legal-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at top left,
            rgba(87,255,157,.03),
            transparent 45%
        );

    pointer-events: none;
}

.legal-card::after {

    content: "";

    position: absolute;

    inset: -1px;

    border-radius: inherit;

    padding: 1px;

    background:
        linear-gradient(
            135deg,
            rgba(87,255,157,.12),
            rgba(0,217,255,.10),
            rgba(157,116,255,.12)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

/* =========================================================
   TITLES
========================================================= */

.legal-card h2 {

    position: relative;

    z-index: 2;

    display: block;

    overflow: visible;

    margin:
        0 0 28px;

    padding-bottom: .12em;

    text-align: center;

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 800;

    font-size:
        clamp(
            2.3rem,
            4vw,
            4.7rem
        );

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #57ff9d,
            #00d9ff
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
}

.legal-card h3 {

    position: relative;

    z-index: 2;

    margin:
        0 0 20px;

    line-height: 1.3;

    font-size:
        clamp(
            1.35rem,
            2vw,
            1.9rem
        );

    color: #ffffff;
}

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

.legal-card p,
.legal-card li {

    position: relative;

    z-index: 2;

    font-size: 1rem;

    line-height: 2;

    color:
        rgba(255,255,255,.76);
}

.legal-card p {

    margin-bottom: 22px;
}

.legal-card p:last-child {

    margin-bottom: 0;
}

.legal-card strong {

    color: #ffffff;

    font-weight: 700;
}

/* =========================================================
   LISTS
========================================================= */

.legal-card ul,
.legal-card ol {

    display: flex;

    flex-direction: column;

    gap: 14px;

    margin:
        0 0 28px;

    padding-left: 22px;
}

.legal-card li::marker {

    color: var(--accent-cyan);
}

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

.legal-card a {

    color: #8fefff;

    text-decoration: underline;

    text-decoration-color:
        rgba(0,217,255,.24);

    transition:
        color .3s ease,
        text-decoration-color .3s ease;
}

.legal-card a:hover {

    color: #ffffff;

    text-decoration-color:
        rgba(255,255,255,.45);
}

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

.site-footer {

    position: relative;

    margin-top: 90px;

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

    background:
        linear-gradient(
            180deg,
            rgba(5,8,12,.96),
            rgba(3,5,10,1)
        );

    overflow: hidden;
}

.site-footer::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at left,
            rgba(87,255,157,.03),
            transparent 28%
        ),

        radial-gradient(
            circle at right,
            rgba(0,217,255,.03),
            transparent 30%
        );

    pointer-events: none;
}

.footer-wrap {

    position: relative;

    z-index: 5;

    width:
        min(
            1400px,
            calc(100% - 60px)
        );

    min-height: 78px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 28px;

    padding:
        24px 0;
}

.footer-info {

    color: #97a7b8;

    font-size: .92rem;

    line-height: 1.7;
}

.footer-nav {

    display: flex;

    align-items: center;

    gap: 24px;
}

.footer-nav a {

    position: relative;

    color: #c8d2de;

    font-size: .92rem;

    transition:
        color .3s ease;
}

.footer-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--accent-green),
            var(--accent-cyan)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .3s ease;
}

.footer-nav a:hover {

    color: #ffffff;
}

.footer-nav a:hover::after {

    transform: scaleX(1);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:980px){

    .legal-stack,
    .footer-wrap {

        width:
            min(
                100%,
                calc(100% - 40px)
            );
    }

    .legal-card {

        padding:
            42px 34px;
    }

    .legal-card h2 {

        font-size:
            clamp(
                2rem,
                8vw,
                3.6rem
            );
    }
}

@media(max-width:720px){

    .page-hero,
    .hero.section {

        padding:
            90px 0
            50px;
    }

    .legal-stack,
    .footer-wrap {

        width:
            min(
                100%,
                calc(100% - 24px)
            );
    }

    .legal-card {

        padding:
            34px 22px;

        border-radius: 28px;
    }

    .legal-card h2 {

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );

        line-height: 1.12;
    }

    .footer-wrap {

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 16px;
    }

    .footer-nav {

        gap: 18px;
    }
}

@media(max-width:520px){

    .legal-card p,
    .legal-card li {

        font-size: .96rem;
    }

    .legal-card {

        padding: 24px;
    }

    .section-header h1 {

        letter-spacing: -1px;
    }
}/* =========================================================
   PREMIUM FOOTER
========================================================= */

.site-footer {

    position: relative;

    overflow: hidden;

    margin-top: 110px;

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

    background:
        linear-gradient(
            180deg,
            rgba(6,10,16,.96),
            rgba(3,5,10,1)
        );
}

.site-footer::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at left,
            rgba(87,255,157,.03),
            transparent 28%
        ),

        radial-gradient(
            circle at right,
            rgba(0,217,255,.03),
            transparent 30%
        );

    pointer-events: none;
}

.footer-wrap {

    position: relative;

    z-index: 5;

    width:
        min(
            1400px,
            calc(100% - 60px)
        );

    min-height: 92px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 34px;

    padding:
        28px 0;
}

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

.footer-info {

    color: #9ba9b8;

    font-size: .94rem;

    line-height: 1.8;

    letter-spacing: .01em;
}

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

.footer-nav {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 26px;
}

.footer-nav a {

    position: relative;

    color: #d5dee8;

    font-size: .94rem;

    font-weight: 500;

    transition:
        color .3s ease,
        opacity .3s ease;
}

.footer-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--accent-green),
            var(--accent-cyan)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .3s ease;
}

.footer-nav a:hover {

    color: #ffffff;
}

.footer-nav a:hover::after {

    transform: scaleX(1);
}

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

@media(max-width:720px){

    .footer-wrap {

        width:
            min(
                100%,
                calc(100% - 24px)
            );

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 18px;

        padding:
            26px 0;
    }

    .footer-nav {

        gap: 18px;
    }

    .footer-info {

        font-size: .88rem;
    }
}/* =========================================================
   PREMIUM MINIMAL FOOTER
========================================================= */

.site-footer {

    position: relative;

    overflow: hidden;

    margin-top: 90px;

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

    background:
        linear-gradient(
            180deg,
            rgba(6,10,16,.96),
            rgba(3,5,10,1)
        );
}

.site-footer::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at left,
            rgba(87,255,157,.03),
            transparent 28%
        ),

        radial-gradient(
            circle at right,
            rgba(0,217,255,.03),
            transparent 30%
        );

    pointer-events: none;
}

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

.footer-minimal {

    position: relative;

    z-index: 5;

    width:
        min(
            1400px,
            calc(100% - 60px)
        );

    min-height: 88px;

    margin-inline: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding:
        28px 0;
}

/* =========================================================
   LEFT SIDE
========================================================= */

.footer-left {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    color: #95a4b5;

    font-size: .92rem;

    line-height: 1.7;
}

.footer-left span {

    white-space: nowrap;
}

.footer-separator {

    opacity: .45;

    color: rgba(255,255,255,.35);
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.footer-right {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 26px;
}

.footer-right a {

    position: relative;

    color: #d6dfea;

    font-size: .92rem;

    font-weight: 500;

    transition:
        color .3s ease;
}

.footer-right a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--accent-green),
            var(--accent-cyan)
        );

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform .3s ease;
}

.footer-right a:hover {

    color: #ffffff;
}

.footer-right a:hover::after {

    transform: scaleX(1);
}

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

@media(max-width:900px){

    .footer-minimal {

        width:
            min(
                100%,
                calc(100% - 30px)
            );

        flex-direction: column;

        align-items: flex-start;

        justify-content: center;

        gap: 18px;

        padding:
            24px 0;
    }

    .footer-left {

        gap: 8px;

        font-size: .86rem;

        line-height: 1.8;
    }

    .footer-left span {

        white-space: normal;
    }

    .footer-right {

        justify-content: flex-start;

        gap: 18px;
    }

    .footer-right a {

        font-size: .88rem;
    }
}/* =========================================================
   LEGALS HEADINGS FIX
========================================================= */

.legal-card h1,
.legal-card h2,
.legal-stack h1,
.legal-stack h2,
.page-hero h1 {

    font-size:
        clamp(
            1.8rem,
            2vw,
            2.6rem
        ) !important;

    line-height: 1.2 !important;

    letter-spacing: -.02em !important;

    font-weight: 700 !important;

    color: #ffffff !important;

    background: none !important;

    -webkit-text-fill-color: unset !important;

    -webkit-background-clip: unset !important;

    background-clip: unset !important;

    text-shadow: none !important;

    padding-bottom: 0 !important;

    margin-bottom: 24px !important;
}

/* HERO ÜBERSCHRIFT */

.page-hero h1 {

    text-align: center;

    margin-bottom: 0 !important;
}

/* MOBILE */

@media(max-width:720px){

    .legal-card h1,
    .legal-card h2,
    .legal-stack h1,
    .legal-stack h2,
    .page-hero h1 {

        font-size:
            clamp(
                1.5rem,
                6vw,
                2rem
            ) !important;
    }
}/* =========================================================
   LEGALS SCROLL FIX
========================================================= */

html {

    overflow-y: auto !important;

    overflow-x: hidden;
}

body {

    overflow-y: auto !important;

    overflow-x: hidden;

    min-height: 100vh;

    height: auto !important;
}

body.legal-page {

    overflow-y: auto !important;
}

main {

    overflow: visible !important;
}

.legal-page {

    overflow: visible !important;
}

.site-header {

    position: sticky;
}

/* verhindert blockierte scroll-events */

body.loading,
body.menu-open,
body.nav-open {

    overflow-y: auto !important;
}