/* =========================================================
   CSC Zeitstrahl – Frontend-Styles
   Passt sich automatisch an die CSC-Theme-Variablen an.
   ========================================================= */

.vereinschronik-timeline {
    position: relative;
    padding: 24px 0 80px;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

/* ── Mittellinie ────────────────────────────────────────── */
.vereinschronik-timeline > .vc-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--vc-accent, var(--brand, #961a1d));
    transform: translateX(-50%);
    border-radius: 2px;
    pointer-events: none;
}

/* ── Eintrag ────────────────────────────────────────────── */
.vc-entry {
    position: relative;
    width: 100%;
    display: flex;
    margin-bottom: 36px;
}

.vc-alternating .vc-entry.vc-left  { justify-content: flex-start; }
.vc-alternating .vc-entry.vc-right { justify-content: flex-end;   }
.vc-single      .vc-entry          { justify-content: flex-end;   }


@media (min-width:769px) {
    .vc-alternating .vc-entry.vc-left  .vc-card,
    .vc-alternating .vc-entry.vc-right .vc-card,
    .vc-single .vc-entry .vc-card {
        width: calc(50% - 30px);
    }
}


/* ── Dot ────────────────────────────────────────────────── */
.vc-connector {
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    z-index: 2;
}

.vc-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--vc-accent, var(--brand, #961a1d));
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--vc-accent, var(--brand, #961a1d));
    display: block;
}

/* ── Karte ──────────────────────────────────────────────── */
.vc-card {
    background: #ffffff;
    border-radius: var(--radius, 12px);
    box-shadow: var(--shadow, 0 4px 24px rgba(0, 0, 0, 0.10));
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
    box-sizing: border-box;
}

.vc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
}

/* ── Datums-Badge ───────────────────────────────────────── */
.vc-date-badge {
    display: inline-block;
    background: var(--vc-accent, var(--brand, #961a1d));
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin: 14px 14px 0;
}

/* ── Bild ───────────────────────────────────────────────── */
.vc-image {
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    margin-top: 10px;
}

.vc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.vc-card:hover .vc-image img {
    transform: scale(1.04);
}

/* ── Inhalt ─────────────────────────────────────────────── */
.vc-body {
    padding: 12px 14px 16px;
}

.vc-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #555;
}

.vc-text p           { margin: 0 0 0.5em; }
.vc-text p:last-child { margin-bottom: 0; }

/* ── Responsive: Tablet ─────────────────────────────────── */
@media (max-width: 768px) {
    .vereinschronik-timeline > .vc-line {
        left: 20px;
        transform: none;
    }

    .vc-connector { left: 20px; }

    .vc-alternating .vc-entry.vc-left,
    .vc-alternating .vc-entry.vc-right,
    .vc-single .vc-entry {
        justify-content: flex-start;
        padding-left: 52px;
    }

    .vc-alternating .vc-entry .vc-card,
    .vc-single      .vc-entry .vc-card {
        width: 100%;
    }
}

/* ── Responsive: Mobil ──────────────────────────────────── */
@media (max-width: 480px) {
    .vc-entry { margin-bottom: 24px; }
    .vc-body  { padding: 10px 12px 14px; }
    .vc-text  { font-size: 0.88rem; }
}