/* =========================================================
   JOBNINJA CHRONIK / TIMELINE
   ========================================================= */


/* ---------------------------------------------------------
   GRUNDLAYOUT
   --------------------------------------------------------- */

.timeline {
    position: relative;
}

.timeline h2 {
    padding: 0 20px;
    margin: 10px 0 0 0;
}

.timeline p {
    padding: 10px 20px 20px 20px;
    margin: 0;
    font-size: 1rem;
}


/* ---------------------------------------------------------
   MITTLERE TIMELINE-LINIE
   --------------------------------------------------------- */

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 25px;
    height: 100%;
    background: #c10633;
    transform: translateX(-50%);
    z-index: 2;
}


/* ---------------------------------------------------------
   EINZELNER TIMELINE-EINTRAG
   --------------------------------------------------------- */

.timeline-item {
    width: 100%;
    margin-bottom: 0;
}

.timeline-item::after {
    content: "";
    display: block;
    clear: both;
}


/* ---------------------------------------------------------
   INHALTSKARTE
   --------------------------------------------------------- */

.timeline-content {
    position: relative;
    width: 50%;
    box-sizing: border-box;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}


/* ---------------------------------------------------------
   DATUMSBALKEN
   --------------------------------------------------------- */

.timeline-img {
    position: relative;
    height: 43px;
    margin: 0 0 -10px 0;
    background: #c10633;
    border-radius: 10px;
    z-index: 1;
    box-sizing: border-box;
}

.timeline .timeline-img p {
    padding: 10px 20px 20px 20px;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f1f1;
    text-shadow: 0 0 2px #000;
}


/* ---------------------------------------------------------
   DATUMSBALKEN LINKS
   --------------------------------------------------------- */

.timeline-img-left {
    position: relative;
    width: 50%;
    left: 0;
    margin-bottom: -10px;
}


/* ---------------------------------------------------------
   RECHTE KARTEN
   --------------------------------------------------------- */

.timeline-card {
    padding: 0 !important;
}

.timeline-card p {
    padding: 0 20px 20px 40px;
}

.timeline-card a {
    margin-left: 20px;
}


/* ---------------------------------------------------------
   OPTIONALER BILD-HEADER
   --------------------------------------------------------- */

.timeline-img-header {
    position: relative;
    height: 200px;
    margin-bottom: 20px;
}

.timeline-img-header h2 {
    position: absolute;
    bottom: 5px;
    left: 20px;
    color: #ffffff;
}


/* ---------------------------------------------------------
   BLOCKQUOTE
   --------------------------------------------------------- */

blockquote {
    margin-top: 30px;
    padding: 0 20px;
    color: #757575;
    border-left-color: #3F51B5;
}


/* ---------------------------------------------------------
   OPTIONALER DATE-BADGE
   --------------------------------------------------------- */

.date {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    padding: 10px;
    color: #ffffff;
    background: #FF4081;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 769px) {

    /*
     * Alle Datumsbalken nehmen exakt eine Hälfte
     * der Timeline ein.
     */
    .timeline .timeline-img {
        width: 50%;
    }


    /*
     * LINKER Datumsbalken
     */
    .timeline .timeline-img.timeline-img-left {
        left: 0;
    }


    /*
     * RECHTER Datumsbalken
     *
     * Wichtig:
     * Nur .timeline-img wird verschoben.
     * Nicht der komplette .timeline-item.
     */
    .timeline .timeline-img.timeline-img-right {
        left: 50%;
    }


    /*
     * LINKE Inhaltskarte
     */
    .timeline .timeline-content.js--fadeInLeft {
        float: left;
    }


    /*
     * RECHTE Inhaltskarte
     */
    .timeline .timeline-content.js--fadeInRight {
        float: right;
    }

}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media screen and (max-width: 768px) {

    /*
     * Mehr Abstand zwischen den einzelnen Einträgen.
     */
    .timeline-item {
        margin-bottom: 4em;
    }


    /*
     * Timeline-Linie an den linken Rand.
     */
    .timeline::before {
        left: 0;
        transform: none;
    }


    /*
     * Alle Datumsbalken über die volle Breite.
     * Links-/Rechts-Positionierung wird auf Mobile aufgehoben.
     */
    .timeline .timeline-img,
    .timeline .timeline-img.timeline-img-left,
    .timeline .timeline-img.timeline-img-right {
        left: 0;
        width: 100%;
    }


    /*
     * Alle Karten untereinander.
     */
    .timeline .timeline-content,
    .timeline .timeline-content.js--fadeInLeft,
    .timeline .timeline-content.js--fadeInRight {
        float: none;
        width: 100%;
        max-width: 100%;
    }


    /*
     * Rechte Karten erhalten auf Mobile dieselben
     * Innenabstände wie linke Karten.
     */
    .timeline-card p {
        padding: 10px 20px 20px 20px;
    }

    .timeline-card a {
        margin-left: 20px;
    }

}