/* Rechtstexte.
 *
 * Baut auf landing.css auf und ergänzt nur die Lesespalte. Ein Rechtstext ist
 * kein Verkaufstext: keine Animation, keine Skizze, nichts, was beim Lesen
 * stört. Was er braucht, ist eine Zeilenlänge, die man am Stück liest, und
 * Überschriften, an denen man sich beim Suchen entlanghangelt.
 */

/* Der Text liegt auf einem Blatt, nicht direkt auf dem Grund.
 *
 * Die Seite trägt als Grund eine Zeilenlineatur wie liniertes Papier. Unter
 * Karten und Skizzen ist das Atmosphäre, unter einem langen Fließtext läuft
 * eine Linie mitten durch jede zweite Zeile und sieht aus wie Durchstreichen.
 * Ein Blatt darüber ist die Antwort, die zur Richtung der Seite passt. */
.rechtstext {
    max-width: 48rem;
    margin: var(--mittel) auto var(--sehr-weit);
    padding: var(--weit) 3rem;
    background: var(--karte);
    border: 1px solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
}

/* 65 bis 75 Zeichen je Zeile. Darüber verliert das Auge beim Rücksprung die
 * Zeile, und genau bei einem Text, den ohnehin niemand gern liest, ist das
 * der Punkt, an dem aufgehört wird. */
.rechtstext p, .rechtstext li {
    font-family: var(--schrift-text);
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--tinte-weich);
    max-width: 38rem;
}

.rechtstext section { padding-block: var(--weit); }
.rechtstext section:first-child { padding-top: 0; }
.rechtstext section:last-child { padding-bottom: 0; }
.rechtstext section + section { border-top: 1px solid var(--linie); }

.rechtstext h1 {
    font-family: var(--schrift-titel);
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--tinte);
    margin: .6rem 0 1.2rem;
}

.rechtstext h2 {
    font-family: var(--schrift-titel);
    font-size: 1.22rem;
    letter-spacing: -.01em;
    color: var(--tinte);
    margin: var(--mittel) 0 .5rem;
    padding-top: var(--mittel);
    border-top: 1px solid var(--linie-fein);
}

/* Die dritte Ebene trägt die einzelnen Verarbeitungen. Sie steht in der
 * Etikettenschrift, damit man beim Überfliegen sofort sieht, wo eine neue
 * Verarbeitung anfängt und wo nur weitergeschrieben wird. */
.rechtstext h3 {
    font-family: var(--schrift-mess);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--akzent);
    margin: var(--mittel) 0 .4rem;
}

.rechtstext p { margin: 0 0 .9rem; }
.rechtstext ul { margin: 0 0 .9rem; padding-left: 1.1rem; }
.rechtstext li { margin-bottom: .35rem; }

.rechtstext a {
    color: var(--akzent);
    border-bottom: 1px solid var(--akzent-lasur);
}
.rechtstext a:hover { border-bottom-color: var(--akzent); }

/* Der Vorspann sagt in einem Satz, was danach über Absätze verteilt steht.
 * Wer nur ihn liest, weiß das Wesentliche. */
.rechtstext .vorspann {
    font-size: 1.14rem;
    color: var(--tinte);
    background: var(--karte);
    border: 1px solid var(--linie);
    border-left: 3px solid var(--akzent);
    border-radius: var(--radius);
    padding: var(--mittel);
    margin-bottom: var(--mittel);
}

.rechtstext .anschrift {
    font-family: var(--schrift-titel);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--tinte);
}

/* Am Telefon nimmt das Blatt die ganze Breite: ein Rand links und rechts
 * würde die Lesespalte weiter verschmälern, ohne etwas zu zeigen. */
@media (max-width: 720px) {
    .rechtstext {
        margin: 0; padding: var(--mittel) 1.2rem var(--weit);
        border-inline: none; border-radius: 0; box-shadow: none;
    }
    .rechtstext section { padding-block: var(--mittel); }
    .rechtstext .vorspann { padding: 1rem; }
}