// ══════════════════════════════════════════════════════════
//  Kennzahlen — Horizontal Scroll Section
//  Structure:
//    .kenn-scroll-wrapper
//      .ar-kennzahlen
//        .kenn-ghost          decorative background number
//        .kenn-header
//          .kenn-title
//          .kenn-subtitle
//        .kenn-track-outer
//          .kenn-row
//            .kenn-card  ×n
//              .kenn-big
//                .kenn-big-number
//                .kenn-big-unit
//              .kenn-label
//              .kenn-text
//              .kenn-delta
//                .kenn-delta-note
//        .kenn-controls
//          .kenn-arrow-btn  ×2
//        .kenn-cta-wrapper
//          .kenn-cta
// ══════════════════════════════════════════════════════════


// ── Layout override ───────────────────────────────────────
// Removes max-width constraint on the card wrapper
.annualReport .section-inner.card-wrapper,
.section-inner.card-wrapper {
    max-width: 100%;
    background: var(--noventi-gradient);
}


// ── Component root ────────────────────────────────────────
.kenn-scroll-wrapper {

    // ── Section ────────────────────────────────────────────
    .ar-kennzahlen {
        height:          100vh;
        min-height:      100vh;
        overflow:        hidden;
        color:           #fff;
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        padding-top:     60px;
        gap:             0;
        .section-inner {
            max-width: 1380px;
            padding-inline: 20px;
        }
    }

    // ── Constrained inner width ─────────────────────────────
    .section-inner {
        max-width: 85vw;
    }



    // ── Header ─────────────────────────────────────────────
    .kenn-header {
        text-align:    center;
        margin-bottom: 28px;
        position:      relative;
        z-index:       2;
        width:         100%;
        flex-shrink:   0;

        .kenn-title {
            font-size:     #{"clamp(2.35rem, 3.6vw + 0.875rem, 3.75rem)"};
            font-weight:   700;
            color:         #fff;
            margin-bottom: 10px;
            font-family: Frutiger, sans-serif;
        }

        .kenn-subtitle {
            font-size:   20px;
            font-weight: 300;
            line-height: 1.7;
            color:       rgba(255, 255, 255, 0.75);
            max-width:   850px;
            margin:      0 auto;
            font-family: Noto-Serif,serif;
        }
    }


    // ── Track ──────────────────────────────────────────────
    // Clips overflowing cards; z-index keeps it above .kenn-ghost.
    .kenn-track-outer {
        width:      100%;
        overflow:   hidden;
        position:   relative;
        z-index:    2;
        flex-shrink: 0;

        // ── Row ──────────────────────────────────────────────
        // JS translates this element to scroll between cards.
        .kenn-row {
            display:    flex;
            gap:        24px;
            width:      max-content;
            transition: transform 0.45s cubic-bezier(.22, 1, .36, 1);

            // ── Card ─────────────────────────────────────────
            .kenn-card {
                flex-shrink:    0;
                /* border:         1px solid rgba(255, 255, 255, 0.25);*/
                padding:        32px 32px 28px;
                position:       relative;
                display:        flex;
                flex-direction: column;
                gap:            0;
                transition:     background .3s;
                box-sizing:     border-box;
                overflow: hidden;
                &:hover {
                    background: rgba(255, 255, 255, 0.06);
                }

                // ── Large number + unit ─────────────────────────
                .kenn-big {
                    font-size:    clamp(36px, 4vw, 60px);
                    font-weight:  300;
                    line-height:  1;
                    color:        #fff;
                    margin-bottom: 6px;
                    display:      flex;
                    align-items:  baseline;
                    gap:          10px;

                    .kenn-big-number {
                        font-weight: 700;
                        font-size:    clamp(36px, 4vw, 60px);
                    }

                    .kenn-big-unit {
                        font-size:    clamp(36px, 4vw, 60px);
                        font-weight: 700;
                    }
                }

                // ── Label ────────────────────────────────────────
                .kenn-label {
                    font-size:    clamp(22px, 4vw, 30px);
                    font-weight:   700;
                    color:         #fff;
                    margin-bottom: 12px;
                    line-height:   1.2;
                    hyphens: auto;
                    font-family: 'Frutiger', sans-serif;
                }

                // ── Body copy ────────────────────────────────────
                // flex: 1 pushes .kenn-delta to the card bottom.
                .kenn-text {
                    font-size:     20px;
                    font-family: Frutiger, sans-serif;
                    font-weight:   300;
                    line-height:   1.6;
                    color:         #fff;
                    margin-bottom: 16px;
                    flex:          1;
                }

                // ── Delta line ───────────────────────────────────
                .kenn-delta {
                    font-size:   clamp(16px, 1.8vw, 32px);
                    font-weight: 700;
                    color:       #fff;
                    display:     flex;
                    align-items: baseline;
                    gap:         6px;

                    // Small note suffix (e.g. "ggü. Vorjahr")
                    .kenn-delta-note {
                        font-size:   20px;
                        font-weight: 300;
                        opacity:     .8;
                    }
                }
            }
        }
    }


    // ── Navigation controls ────────────────────────────────
    .kenn-controls {
        display:     flex;
        align-items: center;
        gap:         20px;
        margin-top:  28px;
        position:    relative;
        z-index:     2;
        flex-shrink: 0;

        // Circular arrow button
        .kenn-arrow-btn {
            width:         45px;
            height:        45px;
            border-radius: 50%;
            border:        1.5px solid rgba(255, 255, 255, 0.5);
            background:    transparent;
            color:         #fff;
            font-size:     22px;
            display:       flex;
            align-items:   center;
            justify-content: center;
            cursor:        pointer;
            line-height:   1.3;
            transition:    background .25s, border-color .25s, opacity .25s;

            &:hover {
                background:   rgba(255, 255, 255, 0.15);
                border-color: #fff;
            }

            &:disabled {
                opacity: 0.25;
                cursor:  default;
            }
        }
    }


    // ── CTA ────────────────────────────────────────────────
    .kenn-cta-wrapper {
        width:           100%;
        display:         flex;
        justify-content: center;
        margin-top:      24px;
        position:        relative;
        z-index:         2;
        flex-shrink:     0;

        .kenn-cta,
        a {
            font-size: 1.1rem;
            border-radius: 2rem;
            padding: 0.65rem 1.75rem;
            letter-spacing:  .08em;
            color:           #fff;
            background:      transparent;
            border:          1.5px solid #fff;
            border-radius:   100px;
            cursor:          pointer;
            text-decoration: none;
            transition:      background .25s, border-color .25s;

            &:hover {
                background:   rgba(255, 255, 255, 0.15);
                border-color: #fff;
            }
            &:before {
                display: none;
            }
        }
    }


    // ── Mobile ─────────────────────────────────────────────
    // Stack cards vertically; hide arrow controls.
    @media (max-width: 600px) {
        height: auto !important;

        .ar-kennzahlen {
            position:        relative !important;
            height:          auto !important;
            min-height:      unset !important;
            overflow:        visible !important;
            padding:         60px 20px 48px;
            justify-content: flex-start;
        }

        .kenn-track-outer {
            overflow: visible !important;
            width:    100%;
        }

        .kenn-row {
            flex-direction: column !important;
            width:          100% !important;
            gap:            16px !important;
            transform:      none !important;
        }

        .kenn-card {
            width:      100% !important;
            flex-shrink: unset !important;
        }

        .kenn-controls {
            display: none !important;
        }
    }
}