/*helper css for full height slider */
html, body {
    max-width: 100vw;
    overflow-x: clip;
    margin:0;
    padding:0;
}
#pageWrapper,
#maincontent,
#maincontent > .annualReport {
    overflow: visible !important;
}

#maincontent {
    margin-top:0;
}
// ══════════════════════════════════════════════════════════
//  Annual Report — Main Stylesheet
//  Structure:
//    :root / .annualReport   design tokens
//    .side-nav               fixed navigation
//    .page-section           full-height sections
//    .ar-jahresbericht       01 cover section
//    .ar-int-wrapper         interstitial scroll container
//    .ar-interstitial        sticky interstitial slide
// ══════════════════════════════════════════════════════════




// ── Design tokens ─────────────────────────────────────────
// Scoped to .annualReport so they don't bleed globally.
.annualReport {

    // Brand palette
    --mg-coral:   #f05a28;
    --mg-pink:    #e8317a;
    --mg-magenta: #c4006a;
    --mg-purple:  #7b2fa0;
    --mg-deep:    #4a0080;

    // Gradients
    --mg-grad:   linear-gradient(135deg, #f05a28 0%, #c4006a 45%, #7b2fa0 80%, #4a0080 100%);
    --mg-grad-h: linear-gradient(90deg,  #f05a28 0%, #c4006a 45%, #7b2fa0 100%);

    // Surface & background
    --light:  #f7f4f1;
    --light2: #efeae6;
    --light3: #fdf9f7;
    --surf:   #ffffff;

    // Borders
    --bord:   rgba(0, 0, 0, 0.08);
    --bord-l: rgba(196, 0, 106, 0.12);

    // Ink / text (dark theme)
    --ink:     #1a1520;
    --ink2:    #3a3040;
    --muted-l: rgba(26, 21, 32, 0.45);

    // Ink / text (light theme)
    --white: #f0ece4;
    --muted: rgba(240, 236, 228, 0.50);

    // Accent
    --gold: #b8965a;

    --ar-header-gradient: linear-gradient(
            to right,
            #f38549   0%,
            #d3405e  22%,
            #c02f80  45%,
            #9a2575  68%,
            #762589 100%
    );

    position: relative;
    &::after {
        content: '';
        position: absolute;
        z-index: 123;
        /* left: 20px; */
        right: 0;
        top: 0px;
        border-bottom: 1px dotted #000;
        width: 50px;
        height: 100%;
        background: #000;
        opacity: 0.4;
    }
}

.header--gradient {
    background: var(--ar-header-gradient);
    -webkit-background-clip: text;
    background-clip:         text;
    -webkit-text-fill-color: transparent;
    color:                   transparent; // fallback
}



// ── Global reset scoped to component ──────────────────────
.annualReport * {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}


// ── CMS overflow fixes ────────────────────────────────────
// Prevent TYPO3 content wrappers from clipping animated elements.
#maincontent .frame.frame-type-html {
    overflow: visible !important;
}



// Contain horizontal overflow at component level only
.annualReport {
    overflow-x: clip;
}


// ══ Side Navigation ═══════════════════════════════════════
// Fixed right-side number nav; switches to light variant
// when over a dark section via .nav-on-dark.
.side-nav {
    position:  fixed;
    right:     16px; /* fallback; overridden by JS on large screens */
    top:       calc(50% + 40px);
    transform: translateY(-50%);
    z-index:   9999;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap: 0;

    // Idle/active/hover tokens — overridden in .nav-on-dark
    --nav-idle:   rgba(26, 21, 32, 0.45);
    --nav-active: #602965;;
    --nav-hover:  #602965;;
    --nav-label:  rgba(26, 21, 32, 0.70);



    // ── Nav item ───────────────────────────────────────────
    .nav-item {
        display:         flex;
        align-items:     center;
        gap:             10px;
        text-decoration: none;
        padding:         7px 0;
        cursor:          pointer;

        // Active: bold number
        &.active .nav-number {
            color:  var(--nav-active)
        }

        // Hover: highlight number + reveal label
        &:hover {
            color:  var(--nav-active);
            &:after {
                display: none;
            }
            .nav-number { color: var(--nav-hover); }
            .nav-label  { opacity: 1; transform: translateX(0); }
        }
    }

    // Slide-in label (hidden by default, revealed on hover)
    .nav-label {
        font-size:      16px;
        font-weight:    700;
        letter-spacing: .18em;
        text-transform: uppercase;
        color:          var(--nav-label);
        white-space:    nowrap;
        opacity:        0;
        transform:      translateX(5px);
        transition:     opacity .18s ease, transform .18s ease;
        pointer-events: none;
    }

    // Section number
    .nav-number {
        font-size:      16px;
        font-weight:    700;
        letter-spacing: .04em;
        color:          #fff;
        line-height:    1;
        transition:     color .22s, font-weight .22s;
        min-width:      26px;
        text-align:     right;

    }



    // ── Home link ──────────────────────────────────────────
    .nav-home {
        display:         flex;
        align-items:     center;
        gap:             10px;
        text-decoration: none;
        padding:         7px 0;
        cursor:          pointer;
        margin-bottom:   6px;

        .nav-label      { pointer-events: none; }

        .nav-home-icon {
            font-size:  34px;
            line-height: 1;
            color:       #fff;
            transition:  color .22s;
            min-width:   26px;
            text-align:  right;
        }

        &:hover {
            .nav-home-icon { color: var(--nav-hover); }
            .nav-label     { opacity: 1; transform: translateX(0); }
        }
    }
}


// ══ Sections ══════════════════════════════════════════════
.annualReport {

    // ── Base section ─────────────────────────────────────────
    // Every full-height page section shares this foundation.
    .page-section {
        height:          100vh;
        min-height:      100vh;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        position:        relative;
        padding:         60px 0;
        box-sizing:      border-box;
        overflow:        hidden;
    }

    // ── Constrained inner content ─────────────────────────────
    .section-inner {
        width:          100%;
        max-width:      1280px;
        margin:         0 auto;
        padding:        0 60px;
        box-sizing:     border-box;
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            40px;

        @media (max-width: 960px) {
            padding: 0 24px;
            gap:     28px;
        }
    }


    // ══ 01 Jahresbericht (Cover) ════════════════════════════
    #ar-jahresbericht {
        background: #ffffff;
        color:      #1a1a1a;
        gap:        0;
        overflow:   hidden;

        // Centred heading block
        .cover-header {
            text-align:    center;
            line-height:   1;
            margin-bottom: 16px;
        }

        // Gradient label above the year (e.g. "Jahresbericht")
        .cover-label {
            display:     block;
            font-size:   clamp(18px, 2.4vw, 30px);
            font-weight: 700;
            background:  var(--mg-grad-h);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip:         text;
            letter-spacing:          .04em;
            margin-bottom:           2px;
        }

        // Large gradient year number
        .cover-year {
            display:     block;
            font-size:   clamp(72px, 13vw, 150px);
            font-weight: 700;
            line-height: .88;
            background:  linear-gradient(160deg, var(--mg-magenta) 0%, #9c27b0 55%, #6a1b9a 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip:         text;
        }

        // Hero mesh / illustration — fades in via JS .is-visible
        .cover-mesh {
            width:      100%;
            max-width:  860px;
            margin:     8px auto 28px;
            opacity:    0;
            transform:  translateY(18px);
            transition: opacity   1.2s cubic-bezier(.22, 1, .36, 1),
            transform 1.2s cubic-bezier(.22, 1, .36, 1);

            &.is-visible {
                opacity:   1;
                transform: translateY(0);
            }
        }

        // Sub-headline below the mesh
        .cover-headline {
            font-size:     clamp(22px, 2.8vw, 38px);
            font-weight:   400;
            color:         #1a1a1a;
            text-align:    center;
            margin-bottom: 16px;
        }

        // Intro body copy
        .cover-body {
            font-size:   13.5px;
            font-weight: 300;
            line-height: 1.85;
            color:       #666;
            max-width:   660px;
            text-align:  center;
        }
    }


    // ── Animation engine ────────────────────────────────────
    // Elements with data-animate get GPU-composited properties
    // pre-allocated so transitions don't cause layout shifts.
    [data-animate] {
        will-change: transform, opacity;
    }


    // ── Mobile overrides ────────────────────────────────────
    @media (max-width: 960px) {
        .page-section {
            padding:    80px 0 60px;
            min-height: unset;
            height:     auto;
        }

        *, *::before, *::after {
            animation:   none !important;
            transition:  none !important;
            will-change: auto !important;
        }

        // Ensure JS-gated elements are immediately visible without transition
        .cover-mesh {
            opacity:   1;
            transform: none;
        }
    }
}

// Hide side-nav entirely on mobile
@media (max-width: 960px) {
    .side-nav,
    .annualReport::after { display: none; }
    .ar-int-wrapper {display: none}
}


/*custom Styles for differernt cTypes */
.annualReport {
    .hl-scroll-wrapper {
        --hl-card-gap: 60px;
    }
}

.page-section.container-twocol {
    h2, h3, h4 {
        font-size: #{"clamp(2.35rem, 3.6vw + 0.875rem, 3.75rem)"};
        margin-bottom:40px;
        font-weight: 700;
    }
    .personpanel__header {
        margin-top:50px;
        margin-bottom:25px;
    }
}
.annualReport .twocol__grid, .twocol__grid {
    gap: 6rem;
    align-items: start;
}
/* card section */
.page-section.article-cards {
    .inner {
        max-width: 100%;
    }
    background-color:#fff;
    .article-cards {
        &__card {
            aspect-ratio: unset;
            height: 100vh;
            justify-content: center;
            display: flex;
            flex-direction: column;
            padding-inline: 40px;
            gap:30px;
        }
        &__card-title {
            font-size: 3.5rem;
        }
        &__heading {
            display: none;
        }
        &__card-text {
            font-size: 1.25rem;
        }
    }

}


/*the footer must have other colors */

.page-subpages {
    background: #f2f2f2 !important;

    header {
        color: #000 !important;
    }

    .inner {
        border: 1px dotted #000 !important;
        border-right: none !important;
        border-left: none !important;
    }

    a {
        color: #243d51 !important;
        &:after {
            background: #243d51 !important;
        }
    }
}


.page-section .button-hollow {
    color:#fff;
    font-size: 1.1rem;
    border-radius: 2rem;
    padding: 0.65rem 1.75rem;
    &:hover {
        background-color: #8f0047;
        color: #fff;
        text-decoration: none;
    }
}