/* KCC Chronik – originales dunkel-goldenes Timeline-Design, unverändert übernommen */
/* =========================================================
       KCC – VEREINSCHRONIK
       EIGENER DUNKLER ABSCHNITT
       ========================================================= */

    .kcc-chronik {

        --kcc-bg: #020712;
        --kcc-card: #050b16;
        --kcc-card-hover: #07101f;

        --kcc-gold: #d6a84f;
        --kcc-gold-light: #efd48d;

        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0;

        padding:
            75px
            24px
            95px;

        overflow: hidden;

        background:
            var(--kcc-bg) !important;

        color: #ffffff;

        box-sizing: border-box;

        /*
         * Dunkel bis an beide Bildschirmränder,
         * auch wenn Elementor außen boxed ist.
         */
        box-shadow:
            0 0 0 100vmax
            var(--kcc-bg);

        clip-path:
            inset(0 -100vmax);
    }


    .kcc-chronik *,
    .kcc-chronik *::before,
    .kcc-chronik *::after {
        box-sizing: border-box;
    }


    /* =========================================================
       WICHTIG
       KEIN CSS FÜR .kcc-about-page ODER .kcc-about-section
       ========================================================= */


    /* =========================================================
       HEADER
       ========================================================= */

    .kcc-chronik-head {
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 760px;

        margin:
            0
            auto
            62px;

        padding: 0;

        background:
            transparent !important;

        text-align: center;
    }


    .kcc-chronik-head::before {
        content: "";

        display: block;

        width: 52px;
        height: 2px;

        margin:
            0
            auto
            19px;

        background:
            linear-gradient(
                90deg,
                transparent,
                var(--kcc-gold),
                transparent
            );
    }


    .kcc-chronik-head h2 {
        margin: 0;

        padding: 0;

        color:
            #ffffff !important;

        background:
            transparent !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            clamp(
                38px,
                4vw,
                56px
            );

        font-weight: 600;

        line-height: 1.08;

        letter-spacing: .005em;
    }


    .kcc-chronik-head p {
        width: 100%;
        max-width: 620px;

        margin:
            18px
            auto
            0 !important;

        padding: 0 !important;

        border: 0 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

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

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 15px;

        line-height: 1.7;
    }


    /* =========================================================
       TIMELINE
       ========================================================= */

    .kcc-timeline {
        position: relative;

        z-index: 2;

        width: 100%;
        max-width: 1120px;

        margin: 0 auto;

        background:
            transparent !important;
    }


    /* zentrale Linie */

    .kcc-timeline::before {
        content: "";

        position: absolute;

        top: 12px;
        bottom: 12px;
        left: 50%;

        width: 1px;

        transform:
            translateX(-50%);

        background:
            linear-gradient(
                180deg,
                transparent 0%,
                rgba(214,168,79,.72) 6%,
                rgba(214,168,79,.30) 50%,
                rgba(214,168,79,.72) 94%,
                transparent 100%
            );
    }


    /* =========================================================
       ITEM
       ========================================================= */

    .kcc-tl-item {
        position: relative;

        width: 50%;

        padding:
            10px
            34px
            28px;
    }


    .kcc-tl-item.left {
        left: 0;
    }


    .kcc-tl-item.right {
        left: 50%;
    }


    /* =========================================================
       TIMELINE PUNKT
       ========================================================= */

    .kcc-tl-item::before {
        content: "";

        position: absolute;

        top: 38px;

        width: 12px;
        height: 12px;

        border:
            3px solid
            var(--kcc-bg);

        border-radius: 50%;

        background:
            var(--kcc-gold);

        box-shadow:
            0 0 0 3px
            rgba(214,168,79,.22),
            0 0 12px
            rgba(214,168,79,.26);
    }


    .kcc-tl-item.left::before {
        right: -6px;
    }


    .kcc-tl-item.right::before {
        left: -6px;
    }


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

    .kcc-tl-card {
        position: relative;

        width: 100%;

        overflow: hidden;

        padding:
            27px
            29px
            29px;

        border:
            1px solid
            rgba(214,168,79,.17);

        border-radius:
            20px;

        background:
            var(--kcc-card);

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.28);

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


    /* dezenter Goldschein */

    .kcc-tl-card::before {
        content: "";

        position: absolute;

        top: -145px;
        left: -145px;

        width: 320px;
        height: 320px;

        border-radius: 50%;

        background:
            radial-gradient(
                circle,
                rgba(214,168,79,.055),
                transparent 68%
            );

        pointer-events: none;
    }


    .kcc-tl-card::after {
        display: none;
    }


    .kcc-tl-card:hover {
        transform:
            translateY(-4px);

        background:
            var(--kcc-card-hover);

        border-color:
            rgba(214,168,79,.36);

        box-shadow:
            0 24px 55px
            rgba(0,0,0,.36);
    }


    /* =========================================================
       DATUM
       ========================================================= */

    .kcc-chronik-jahr {
        position: relative;
        z-index: 2;

        display: inline-flex;

        align-items: center;

        gap: 8px;

        margin-bottom:
            17px;

        padding:
            7px
            13px;

        border:
            1px solid
            rgba(214,168,79,.30);

        border-radius:
            999px;

        background:
            rgba(214,168,79,.055);

        color:
            var(--kcc-gold-light);

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 12px;

        font-weight: 800;

        letter-spacing: .07em;
    }


    .kcc-chronik-jahr span {
        display: block;

        width: 5px;
        height: 5px;

        border-radius: 50%;

        background:
            var(--kcc-gold);

        box-shadow:
            0 0 7px
            rgba(214,168,79,.75);
    }


    /* =========================================================
       TITEL
       ========================================================= */

    .kcc-tl-title {
        position: relative;

        z-index: 2;

        margin:
            0
            0
            12px;

        padding: 0;

        color:
            #ffffff !important;

        background:
            transparent !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 23px;

        font-weight: 600;

        line-height: 1.34;
    }


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

    .kcc-tl-body {
        position: relative;

        z-index: 2;

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

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 14px;

        line-height: 1.7;
    }


    .kcc-tl-body p {
        margin:
            0
            0
            12px !important;

        padding:
            0 !important;

        background:
            transparent !important;

        color:
            rgba(255,255,255,.64) !important;

        box-shadow:
            none !important;
    }


    .kcc-tl-body p:last-child {
        margin-bottom:
            0 !important;
    }


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

    @media (max-width: 820px) {

        .kcc-chronik {
            padding:
                55px
                14px
                65px;
        }


        .kcc-chronik-head {
            margin-bottom:
                44px;
        }


        .kcc-chronik-head h2 {
            font-size:
                38px;
        }


        .kcc-chronik-head p {
            font-size:
                14px;
        }


        .kcc-timeline {
            max-width:
                650px;
        }


        .kcc-timeline::before {
            left:
                13px;

            transform:
                none;
        }


        .kcc-tl-item {
            width:
                100%;

            left:
                0 !important;

            padding:
                8px
                0
                22px
                41px;
        }


        .kcc-tl-item::before {
            top:
                34px;

            left:
                7px !important;

            right:
                auto !important;
        }


        .kcc-tl-card {
            padding:
                24px
                21px;

            border-radius:
                18px;
        }


        .kcc-tl-title {
            font-size:
                20px;
        }

    }


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

    @media (max-width: 420px) {

        .kcc-chronik {
            padding:
                45px
                10px
                50px;
        }


        .kcc-chronik-head h2 {
            font-size:
                33px;
        }


        .kcc-chronik-head p {
            font-size:
                13px;
        }


        .kcc-timeline::before {
            left:
                10px;
        }


        .kcc-tl-item {
            padding-left:
                34px;
        }


        .kcc-tl-item::before {
            left:
                4px !important;
        }


        .kcc-tl-card {
            padding:
                21px
                18px;

            border-radius:
                16px;
        }


        .kcc-tl-title {
            font-size:
                19px;
        }

    }


    /* =========================================================
       REDUCED MOTION
       ========================================================= */

    @media (prefers-reduced-motion: reduce) {

        .kcc-tl-card {
            transition: none;
        }


        .kcc-tl-card:hover {
            transform: none;
        }

    }

/* Optional: Symbol beim Jahr, standardmäßig nicht angezeigt */
.kcc-chronik .kcc-chronik-symbol { display:inline-flex; align-items:center; font-size:16px; line-height:1; margin-left:2px; width:auto; height:auto; border-radius:0; background:transparent; box-shadow:none; }