/* TIMELINE - AKTUELL & NEWS */
.timeline {
    max-width: 100%;
    margin: 40px auto;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.timeline h2 {
    display:block;
    padding-left:3px;
    text-align:left;
    }

/* Zwei-Spalten-Layout für Desktop */
.timeline dl {
    display: grid;
    /*grid-template-columns: 12%  88%; /* <dt> nimmt 30%, <dd> 70% */
    grid-template-columns: min-content auto;
    gap: 16px 16px;
    margin: 12px 12px 0 0;
    align-items: flex-start;
}

/* Umschließendes div für Hover-Effekte */
.ani-dt-dl {
    display: contents; /* Verhindert, dass es das Grid-Layout zerstört */
}

/* <dt> - MONTH -> min 10ch best value */
.timeline dt {
    margin-top:20px; /* depends font-size */
    padding-left: 12px;
    min-width:10ch;
    font-size: 1.4rem;
    color: var(--color-primary); /* #005495; */
    border-left: 8px solid var(--color-primary); /* #005495; /* Standard: Blau */
    transition: border-left 0.3s ease;
}

/* <dd> - Definition */
.timeline dd {
    margin: 0;
    padding: 8px 12px;
    line-height: 1.5;
    font-size: 1rem;
    background: #ffffff;
    border: 1px solid #e8e7e7; /* Dünner grauer Rahmen um <dd> */
    border-radius: 5px;
    transition: border 0.3s ease, background 0.3s ease, border 0.3s ease;
}

/* Nur h3 innerhalb von .timeline dd anpassen */
.timeline dd h3 {
    all: unset; /* Setzt alle Eigenschaften zurück */
    display: block;
    margin: 8px 4px 0 6px;
    font-size:1.4rem;
    font-weight: normal;
    color: var(--color-primary); /* #005495; */
}

/* <p>-Tags innerhalb von .timeline dd normalisieren */
.timeline dd p {
    margin: 0 0 6px; /* Abstand zwischen Absätzen */
    padding: 6px;
    font-size: 1.04rem;
    line-height: 1.4;
}

.timeline dd ul {
    font-weight:lighter !important;
    margin-top: 6px;
    padding-left: 16px;
    list-style: none;
    color: #6e6e6e;
}

.timeline dd li {
    position: relative;
    margin-bottom: 4px;
    padding-left: 16px;
    font-size: 1rem;
    hyphens: unset !important; /* Falls automatische Silbentrennung aktiv ist */
}

/* Chevron-Pfeil vor jedem Listenelement */
.timeline dd li::before {
    content: "\f054"; /* FontAwesome Chevron-Rechts-Pfeil */
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'FontAwesome';
    font-weight: 1;
    font-size: 1rem;
    color: var(--color-primary); /* #005495; */
}

/* HOVER-EFFEKT auf das umschließende div */
.ani-dt-dl:hover dt {
    border-left: 8px solid #ff0000; /* Rot bei Hover */
}

.ani-dt-dl:hover dd {
    border: 1px solid #ccc; /* Dünner grauer Rahmen um <dd> */
    background: #f0f0f0;
}

/* FIGURE */
.timeline dd figure {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 5px; /* Border-Radius beibehalten */
}

.timeline dd figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px; /* Border-Radius für das Bild beibehalten */
}

.timeline dd figure figcaption {
    position: absolute;
    bottom: 16px; /* Startpunkt höher gesetzt */
    left: 0;
    width: 100%;
    background: rgba(100, 100, 100, 0.5); /* Mittleres Grau */
    color: white;
    font-size: 0.8rem; /* Kleinere Schriftgröße */
    padding: 6px;
    text-align: center;
    border: 1px solid rgba(100, 100, 100, 0.6);
    border: 1px 0 0 0;
    border-radius: 0 0 6px 6px;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.timeline dd figure:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

/* IMG - LOGO - max 512px Bilder im Text rechts ausrichten */
.timeline dd .img-float-right {
    float: right;
    margin: -4px 0 6px 16px;
    max-width: 33%; /* Optional: Bild auf 33% der dd-Breite beschränken */
    height: auto;
    border-radius: 6px;
}
/* IMG - FULL-WIDTH */
.timeline dd .img-full-width {
    display: block;
    clear: both; /* Stellt sicher, dass es nicht neben anderen Elementen schwebt */
    width: 100%;
    max-width: 100%; /* Falls irgendwo eine Begrenzung greift */
    height: auto;
    margin: 0 0 0 0; /* Abstand über und unter dem Bild */
    border-radius: 6px;
}

.timeline dd .custom-links {
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
    position: relative; /* Erforderlich für die Pseudo-Element-Animation */
}

/* RESPONSIVE: Smartphone (1-Spalten-Layout) */
@media (max-width: 768px) {
    .timeline dl {
        grid-template-columns: 1fr; /* Eine Spalte */
        margin: 12px 2px 0 0; 
    }

    .timeline dt {
        padding-left: 10px;
    }

    .timeline dd figure figcaption {
        display: none; /* Kein Hover-Effekt und kein Text auf Smartphones */
    }
}