/**
 * Jan Albicker | Core – Schwerpunkte (Focus) Widget
 * Version: 1.3.9
 */

.jac-focus,
.jac-focus * {
        box-sizing: border-box !important;
}

.jac-focus {
        position: relative !important;
        width: 100% !important;
        max-width: 1237px !important;
        margin: 0 auto !important;
        padding: 0 60px !important;
        font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.jac-focus__viewport {
        overflow: hidden !important;
        width: 100% !important;
}

.jac-focus__track {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 24px !important;
        align-items: stretch !important;
        transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
        will-change: transform !important;
}

/* Karte */
.jac-focus__card {
        flex: 0 0 auto !important;
        background: #ffffff !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
        min-width: 0 !important;
        align-self: flex-start !important;
}

/* Karten-Header (grün) – jetzt als Button (klickbar) */
.jac-focus__card-header {
        background: #10b981 !important;
        padding: 20px 16px !important;
        width: 100% !important;
        min-height: 80px !important;
        height: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        flex-shrink: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        text-align: left !important;
        font-family: inherit !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        color: #ffffff !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        transition: background-color 0.2s ease !important;
}

.jac-focus__card-header:hover {
        background: #0ea271 !important;
}

.jac-focus__card-header:focus-visible {
        outline: 2px solid #ffffff !important;
        outline-offset: -4px !important;
}

.jac-focus__card-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        color: #ffffff !important;
        display: block !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        hyphens: auto !important;
}

/* Chevron rechts (aufklappbar) */
.jac-focus__chevron {
        flex: 0 0 auto !important;
        display: inline-block !important;
        width: 10px !important;
        height: 10px !important;
        border-right: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
        transform: rotate(45deg) !important;
        transform-origin: 60% 60% !important;
        transition: transform 0.25s ease !important;
        margin-right: 4px !important;
}

.jac-focus__card.is-open .jac-focus__chevron {
        transform: rotate(225deg) !important;
}

/* Klappbares Panel */
.jac-focus__panel {
        overflow: hidden !important;
        max-height: 0 !important;
        transition: max-height 0.35s ease !important;
}

.jac-focus__card.is-open .jac-focus__panel {
        max-height: 2000px !important;
}

/* Bullet-Liste */
.jac-focus__bullets {
        list-style: none !important;
        margin: 0 !important;
        padding: 24px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
}

.jac-focus__bullet {
        display: flex !important;
        gap: 0 !important;
        align-items: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
}

.jac-focus__bullet-text {
        flex: 1 1 auto !important;
        font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-weight: 300 !important;
        font-size: 14px !important;
        line-height: 22.75px !important;
        color: #374151 !important;
        min-width: 0 !important;
}

/* Pfeil-Navigation – im Stil der Timeline (weißer Kreis, kleines dunkles Icon) */
.jac-focus__nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: 1.231px solid rgba(15, 23, 42, 0.08) !important;
        border-radius: 9999px !important;
        cursor: pointer !important;
        box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.14), 0 2px 4px 0 rgba(0, 0, 0, 0.08) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        z-index: 2 !important;
}

.jac-focus__nav:hover:not(:disabled) {
        transform: translateY(calc(-50% - 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-focus__nav:active:not(:disabled) {
        transform: translateY(-50%) !important;
}

.jac-focus__nav:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
}

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

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

.jac-focus__nav--prev {
        left: 0 !important;
}

.jac-focus__nav--next {
        right: 0 !important;
}

/* === Desktop & Tablet: Grid-Layout (3 pro Reihe, danach Umbruch) === */
@media (min-width: 768px) {
        .jac-focus {
                padding: 0 !important;
        }
        .jac-focus__viewport {
                overflow: visible !important;
        }
        .jac-focus__track {
                flex-wrap: wrap !important;
                transform: none !important;
                gap: 24px !important;
                row-gap: 24px !important;
                align-items: flex-start !important;
        }
        .jac-focus__card {
                flex: 0 0 calc((100% - 48px) / 3) !important;
                width: calc((100% - 48px) / 3) !important;
                max-width: calc((100% - 48px) / 3) !important;
        }
        .jac-focus__nav {
                display: none !important;
        }
}

/* Tablet (768–1023px): 2 Karten pro Reihe */
@media (min-width: 768px) and (max-width: 1023px) {
        .jac-focus__card {
                flex: 0 0 calc((100% - 24px) / 2) !important;
                width: calc((100% - 24px) / 2) !important;
                max-width: calc((100% - 24px) / 2) !important;
        }
}

/* === Mobile (<768px): Slider mit 1 Karte und Pfeilen === */
@media (max-width: 767px) {
        .jac-focus {
                padding: 0 44px !important;
        }
        .jac-focus__track {
                gap: 16px !important;
        }
}