/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 02 2026 | 10:43:53 */
/* ============================================================
   Beckmann-Kenko Timeline – Custom CSS
   Klassen: bk-timeline, bk-tl-row, bk-tl-year, bk-tl-dot, bk-tl-card
   Einfügen in: Avada > Optionen > Benutzerdefiniertes CSS
   ============================================================ */

/* ---------- Wrapper ---------- */
.bk-timeline {
    position: relative;
    max-width: 1100px;
    margin: 40px auto;
    padding: 10px 0;
    box-sizing: border-box;
}

/* ---------- Vertikale Mittellinie ---------- */
.bk-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        #275EA7 3%,
        #275EA7 97%,
        transparent 100%
    );
    z-index: 0;
    pointer-events: none;
}

/* ---------- Einzelne Zeile (3-Spalten-Grid) ---------- */
.bk-tl-row {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: center;
    padding: 14px 0;
    position: relative;
    box-sizing: border-box;
}

/* ---------- Jahres-Zahl ---------- */
.bk-tl-year {
    font-size: 22px;
    font-weight: 700;
    color: #275EA7;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* ---------- Punkt in der Mitte ---------- */
.bk-tl-dot {
    width: 16px;
    height: 16px;
    background: #275EA7;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #275EA7;
    border-radius: 50%;
    justify-self: center;
    align-self: center;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

/* ---------- Inhalts-Karte ---------- */
.bk-tl-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(39, 94, 167, 0.12);
    padding: 18px 22px;
    position: relative;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bk-tl-card:hover {
    box-shadow: 0 8px 32px rgba(39, 94, 167, 0.22);
    transform: translateY(-2px);
}

/* ---------- Titel ---------- */
.bk-tl-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a3a6b !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

/* ---------- Beschreibungstext ---------- */
.bk-tl-desc {
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ============================================================
   UNGERADE Zeilen (1, 3, 5 …): Jahr links – Karte rechts
   ============================================================ */
.bk-tl-row:nth-child(odd) .bk-tl-year {
    grid-column: 1;
    grid-row: 1;
    text-align: right;
    padding-right: 28px;
}

.bk-tl-row:nth-child(odd) .bk-tl-dot {
    grid-column: 2;
    grid-row: 1;
}

.bk-tl-row:nth-child(odd) .bk-tl-card {
    grid-column: 3;
    grid-row: 1;
    margin-left: 28px;
    border-left: 4px solid #275EA7;
}

/* Pfeil von Karte zur Linie (links, gefüllt, außen) */
.bk-tl-row:nth-child(odd) .bk-tl-card::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    border: 12px solid transparent;
    border-right: 12px solid #275EA7;
}

.bk-tl-row:nth-child(odd) .bk-tl-card::after {
    display: none;
}

/* ============================================================
   GERADE Zeilen (2, 4, 6 …): Karte links – Jahr rechts
   ============================================================ */
.bk-tl-row:nth-child(even) .bk-tl-year {
    grid-column: 3;
    grid-row: 1;
    text-align: left;
    padding-left: 28px;
}

.bk-tl-row:nth-child(even) .bk-tl-dot {
    grid-column: 2;
    grid-row: 1;
}

.bk-tl-row:nth-child(even) .bk-tl-card {
    grid-column: 1;
    grid-row: 1;
    margin-right: 28px;
    border-right: 4px solid #275EA7;
}

/* Pfeil von Karte zur Linie (rechts, gefüllt, außen) */
.bk-tl-row:nth-child(even) .bk-tl-card::before {
    content: "";
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    border: 12px solid transparent;
    border-left: 12px solid #275EA7;
}

.bk-tl-row:nth-child(even) .bk-tl-card::after {
    display: none;
}

/* ============================================================
   RESPONSIVE – Mobile (unter 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* Linie links */
    .bk-timeline::before {
        left: 18px;
        transform: none;
    }

    /* Jede Zeile: einspaltig, Platz links für Linie */
    .bk-tl-row,
    .bk-tl-row:nth-child(odd),
    .bk-tl-row:nth-child(even) {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0 10px 48px;
        position: relative;
    }

    /* Dot an die linke Linie */
    .bk-tl-dot {
        position: absolute;
        left: 18px;
        top: 18px;
        transform: translateX(-50%);
    }

    /* Jahr immer oben */
    .bk-tl-year,
    .bk-tl-row:nth-child(odd) .bk-tl-year,
    .bk-tl-row:nth-child(even) .bk-tl-year {
        order: 1;
        text-align: left !important;
        padding: 0 0 4px 0 !important;
        font-size: 16px;
    }

    /* Karte immer darunter */
    .bk-tl-card,
    .bk-tl-row:nth-child(odd) .bk-tl-card,
    .bk-tl-row:nth-child(even) .bk-tl-card {
        order: 2;
        width: 100%;
        margin: 0 !important;
        border-left: 4px solid #275EA7 !important;
        border-right: none !important;
        box-sizing: border-box;
    }

    /* Pfeile ausblenden auf Mobile */
    .bk-tl-card::before,
    .bk-tl-card::after {
        display: none !important;
    }
}