/*
 * Jan Albicker | Core – Timeline Widget Styles
 * 1:1 Umsetzung des Figma-Designs.
 * Alle Eigenschaften mit !important, damit Elementor / Themes sie nicht überschreiben.
 * Version: 1.1.2
 */

.jac-timeline {
        --jac-tl-gradient: linear-gradient(95.11deg, rgba(96, 153, 166, 0.92) 14.628%, rgba(28, 140, 67, 0.92) 64.556%, rgba(8, 140, 41, 0.902) 95.894%) !important;
        --jac-tl-gradient-card: linear-gradient(103.52deg, rgba(96, 153, 166, 0.92) 14.628%, rgba(28, 140, 67, 0.92) 64.556%, rgba(8, 140, 41, 0.902) 95.894%) !important;
        --jac-tl-grey: #9d9d9d !important;
        --jac-tl-track: #f2f2f2 !important;
        --jac-tl-card-bg: #f3f3f3 !important;
        --jac-tl-text: #374151 !important;
        --jac-tl-dot: #0d5c3b !important;
        --jac-tl-border: rgba(0, 0, 0, 0.08) !important;
        --jac-tl-border-strong: rgba(0, 0, 0, 0.14) !important;
        --jac-tl-shadow-sm: 0 4px 6px 0 rgba(0, 0, 0, 0.06) !important;
        --jac-tl-shadow-md: 0 4px 16px 0 rgba(0, 0, 0, 0.12), 0 4px 6px 0 rgba(0, 0, 0, 0.06) !important;
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: #fff !important;
        box-sizing: border-box !important;
        padding: 0 0 24px !important;
        position: relative !important;
}

.jac-timeline *,
.jac-timeline *::before,
.jac-timeline *::after {
        box-sizing: border-box !important;
}

.jac-timeline button {
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        font-family: inherit !important;
        color: inherit !important;
        box-shadow: none !important;
        text-align: center !important;
        line-height: normal !important;
        -webkit-appearance: none !important;
        appearance: none !important;
}

.jac-timeline ul,
.jac-timeline ol {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
}

.jac-timeline li {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
}

.jac-timeline p {
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
}

.jac-timeline-data {
        display: none !important;
}

/* === Strip mit Pfeilen und Jahresmarkern === */
.jac-timeline__strip-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 0 0 20px !important;
        position: relative !important;
        width: 100% !important;
}

.jac-timeline__viewport {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        position: relative !important;
        height: 80px !important;
        overflow: hidden !important;
}

.jac-timeline__track-line {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 52px !important;
        height: 6px !important;
        background: var(--jac-tl-track) !important;
        border: 1px solid var(--jac-tl-border) !important;
        border-radius: 0 !important;
        pointer-events: none !important;
        z-index: 1 !important;
}

.jac-timeline__years {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
        will-change: transform !important;
        z-index: 2 !important;
}

.jac-timeline__marker {
        display: block !important;
        padding: 0 !important;
        width: 48px !important;
        flex: 0 0 48px !important;
        color: var(--jac-tl-grey) !important;
        transition: color 0.2s ease !important;
        position: relative !important;
        background: transparent !important;
        border: 0 !important;
        height: 80px !important;
        cursor: pointer !important;
}

.jac-timeline__marker:focus-visible {
        outline: 2px solid #0d5c3b !important;
        outline-offset: 4px !important;
        border-radius: 4px !important;
}

.jac-timeline__year-label {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        line-height: 20px !important;
        color: var(--jac-tl-grey) !important;
        white-space: nowrap !important;
        margin: 0 !important;
        padding: 0 !important;
}

.jac-timeline__year-dot {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        top: 47px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        border-radius: 9999px !important;
        background: var(--jac-tl-grey) !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        z-index: 3 !important;
        transform: translateX(-50%) !important;
}

.jac-timeline__marker.is-active .jac-timeline__year-dot {
        background: var(--jac-tl-gradient) !important;
        background-image: var(--jac-tl-gradient) !important;
        box-shadow: var(--jac-tl-shadow-md) !important;
}

/* === Navigations-Pfeile === */
.jac-timeline__nav {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        border-radius: 9999px !important;
        background: #fff !important;
        border: 1.231px solid var(--jac-tl-border) !important;
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        align-self: center !important;
        margin-top: 22px !important;
        flex-shrink: 0 !important;
}

.jac-timeline__nav:hover {
        transform: translateY(-1px) !important;
        box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.18), 0 4px 8px 0 rgba(0, 0, 0, 0.08) !important;
}

.jac-timeline__nav:active {
        transform: translateY(0) !important;
}

.jac-timeline__nav:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
        transform: none !important;
}

.jac-timeline__nav img {
        display: block !important;
        width: 8px !important;
        height: 10px !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 8px !important;
        background: transparent !important;
}

.jac-timeline__nav--next img {
        width: 8px !important;
        height: 11px !important;
        max-width: 8px !important;
        transform: rotate(180deg) !important;
}

/* === Card === */
.jac-timeline__card-wrap {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
        transition: height 0.3s ease !important;
}

.jac-timeline__card-pointer {
        position: absolute !important;
        left: 0 !important;
        top: 16px !important;
        width: 18px !important;
        height: 18px !important;
        margin-left: -9px !important;
        background: #f3f3f3 !important;
        border-top: 1px solid var(--jac-tl-border-strong) !important;
        border-left: 1px solid var(--jac-tl-border-strong) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        transform: rotate(45deg) !important;
        transform-origin: center center !important;
        z-index: 3 !important;
        box-shadow: none !important;
        border-radius: 2px 0 0 0 !important;
        transition: left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
        pointer-events: none !important;
}

.jac-timeline__card {
        position: absolute !important;
        z-index: 2 !important;
        top: 22px !important;
        left: 0 !important;
        width: 288px !important;
        margin: 0 !important;
        background: #fff !important;
        border: 1px solid var(--jac-tl-border) !important;
        border-radius: 12px !important;
        box-shadow: var(--jac-tl-shadow-sm) !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 22px !important;
        padding: 0 0 24px !important;
        transition: left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease, transform 0.25s ease !important;
}

.jac-timeline__card-header {
        width: 100% !important;
        min-height: 70px !important;
        background: var(--jac-tl-card-bg) !important;
        border-bottom: 1px solid var(--jac-tl-border) !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
        padding: 19px 24px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
        margin: 0 !important;
}

.jac-timeline__card-year {
        display: inline-block !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 800 !important;
        font-size: 38px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        background: var(--jac-tl-gradient-card) !important;
        background-image: var(--jac-tl-gradient-card) !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
}

.jac-timeline__card-icon {
        width: 100% !important;
        max-width: 100% !important;
        height: 66px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 24px !important;
        box-sizing: border-box !important;
}

.jac-timeline__card-icon img,
.jac-timeline__card-icon svg {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
        background: transparent !important;
}

.jac-timeline__card-list {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 230px !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
}

.jac-timeline__card-list li {
        display: flex !important;
        gap: 8px !important;
        align-items: flex-start !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        background: none !important;
        list-style: none !important;
}

.jac-timeline__card-list li::before,
.jac-timeline__card-list li::marker {
        display: none !important;
        content: none !important;
}

.jac-timeline__card-dot {
        display: block !important;
        width: 4px !important;
        height: 4px !important;
        min-width: 4px !important;
        border-radius: 9999px !important;
        background: var(--jac-tl-dot) !important;
        margin: 9px 2px 0 2px !important;
        flex-shrink: 0 !important;
        padding: 0 !important;
}

.jac-timeline__card-text {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        font-family: 'Poppins', sans-serif !important;
        font-weight: 300 !important;
        font-size: 14px !important;
        line-height: 22.75px !important;
        color: var(--jac-tl-text) !important;
        margin: 0 !important;
        padding: 0 !important;
}

.jac-timeline__card.is-changing {
        opacity: 0 !important;
        transform: translateY(4px) !important;
}

/* === Responsive === */
@media (max-width: 768px) {
        .jac-timeline__strip-wrap {
                gap: 8px !important;
        }
}