/*
 * Ergänzende Gestaltung für „Was ist Sarkoidose?“
 *
 * Grundlayout, Schrift, Überschriften und Absatzgestaltung
 * werden aus main.css übernommen.
 */

.sarko-leittext {
    margin: 1rem 0 2rem;
    padding: 12px 15px;

    background-color: #e9e9e9;
    border-left: 6px solid #f2b0cf;
    border-radius: 0;
}

.sarko-leittext p:last-child {
    margin-bottom: 0;
}


/* Abstand zwischen den einzelnen Begriffserklärungen */

.sarko-begriff {
    margin-bottom: 2.5rem;
}


/*
 * Die Textfragmente sind strukturell Überschriften.
 * Sichtbar bleiben sie jedoch Ausschnitte des Einleitungstextes.
 */

.sarko-begriff h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.4rem;
}

.sarko-textfragment {
    display: inline;
    padding: 0.15rem 0.35rem 0.2rem;

    background-color: #f0c0f0;
    font-weight: normal;

    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* Etwas kompakter auf schmalen Bildschirmen */

@media (max-width: 620px) {
    .sarko-leittext {
        padding: 10px 12px;
        border-left-width: 5px;
    }

    .sarko-begriff {
        margin-bottom: 2rem;
    }
}