/* ================================================================
 * Section variant: .history — Timeline-Look
 * ================================================================
 * CMS-Custom-Class "history" auf der Content-Section. Erwartet
 * drin ein <ol> mit <li>-Eintraegen, die jeweils <time> + <div>
 * (Titel/Text/optional <figure>) enthalten. Adaptiert von
 * immoprofessional.eu — Werte hart-kodiert.
 *
 * Markup:
 *   <section class="history">
 *     <ol>
 *       <li>
 *         <time>2024</time>
 *         <div>
 *           <h3>Titel</h3>
 *           <p>Beschreibung</p>
 *           <figure><img></figure>    (optional)
 *         </div>
 *       </li>
 *     </ol>
 *   </section>
 */

section.history{
    padding:1rem 0;
}

section.history ol{
    list-style:none;
    position:relative;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column-reverse;
}

/* Mittige vertikale Linie */
section.history ol::before{
    content:'';
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:.125rem;
    background:#ddd;
    transform:translateX(-50%);
}

section.history li{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.5rem;
    padding-block-end:2rem;
}

section.history li:last-child{
    padding-block-end:0;
}

/* Dot auf der Linie */
section.history li::before{
    content:'';
    position:absolute;
    left:50%;
    top:.25rem;
    width:.875rem;
    height:.875rem;
    border-radius:50%;
    background:#4a2a7a;
    border:.1875rem solid #fff;
    transform:translateX(-50%);
    z-index:1;
}

/* Jahr-Badge */
section.history time{
    display:block;
    font-size:1.5rem;
    font-weight:400;
    color:#4a2a7a;
    line-height:1;
    margin-block-end:.5rem;
}

/* Content-Card */
section.history li > div{
    padding:1rem 1.25rem;
    background:#fff;
    border-radius:.5rem;
    box-shadow:0 1px 2px rgba(0,0,0,.08);
}

section.history h3{
    font-size:1rem;
    font-weight:600;
    margin:0 0 .5rem 0;
}

section.history p{
    font-size:.9rem;
    color:#555;
    margin:0;
}

section.history figure{
    margin-block-start:.75rem;
    border-radius:.5rem;
    overflow:hidden;
}

section.history figure img{
    width:100%;
    height:auto;
    display:block;
}

/* Ungerade: Jahr links, Card rechts */
section.history li:nth-child(odd) time{
    text-align:right;
    padding-inline-end:1.5rem;
}

/* Gerade: Card links, Jahr rechts */
section.history li:nth-child(even) time{
    order:1;
    padding-inline-start:1.5rem;
}

section.history li:nth-child(even) > div{
    order:-1;
}

/* Mobile: einspaltig, Linie am linken Rand */
@media (max-width: 44.999rem){
    section.history ol::before{
        left:.375rem;
        transform:none;
    }

    section.history li{
        grid-template-columns:1fr;
        padding-inline-start:2rem;
    }

    section.history li::before{
        left:0;
        transform:none;
    }

    section.history li:nth-child(odd) time,
    section.history li:nth-child(even) time{
        text-align:left;
        padding-inline:0;
        order:0;
    }

    section.history li:nth-child(even) > div{
        order:0;
    }
}