/* Container für den Zeitstrahl */
.timeline-container {
    flex: 1;
    width: 20%; /* Ein Drittel der Breite */
    border-left: 2px solid #ddd;
    margin-top: 50px;
    overflow-y: auto; /* Ermöglicht Scrollen bei Bedarf */
    max-height: calc(100vh - 100px); /* Passt sich an die Bildschirmhöhe an */
}

/* Zeitstrahl-Knoten (Initialzustand: Nur Titel und Datum sichtbar) */
.timeline-item {
    margin-bottom: 30px;
    cursor: pointer;
    padding: 10px 15px;
    background: #f8f9fa; /* Leichter Hintergrund */
    border-radius: 5px;
    transition: background 0.3s;
}

.timeline-item:hover {
    background: #e9ecef; /* Hover-Effekt */
}

/* Titel */
.timeline-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

/* Datum */
.timeline-date {
    font-size: 0.9rem;
    color: #777;
    margin: 5px 0;
}

.timeline-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    max-height: 0; /* Initial unsichtbar */
    overflow: hidden; /* Verhindert, dass Inhalte sichtbar sind */
    transition: max-height 0.3s ease, opacity 0.3s ease; /* Flüssige Animation */
    opacity: 0; /* Unsichtbar */
}

/* Sichtbare Beschreibung */
.timeline-description.visible {
    max-height: 300px; /* Genug Platz für die Inhalte */
    margin-top: 10px;
    opacity: 1; /* Sichtbar */
    display: block; /* Sicherstellen, dass es sichtbar bleibt */
}

@media (max-width: 768px) {
    .timeline-container {
        border-left: none; /* Entfernt die vertikale Linie */
        border-top: 2px solid #ddd; /* Horizontale Linie als Trennung */
        padding-top: 20px;
        padding-left: 0;
        width: 100%;
    }

    .timeline-item::before {
        left: -6px;
        width: 12px;
        height: 12px;
    }
}