/* ============================================================
   BEREICHSTYP "TEXTBLOCK"
   ============================================================

   Ein Text, der nicht die ganze Fläche einnimmt. Breite und
   Position kommen als Klassen vom <section>-Element.

   Der Gedanke dahinter: ein langer Text wird auf mehrere Blöcke
   verteilt, deren Breite und Position wechseln. Der Weißraum
   wandert dadurch mit und gliedert die Seite, statt als Loch
   neben einer einzelnen Spalte stehenzubleiben.

   Zur Spezifität: section.css setzt .content-container .content
   (0,2,0) auf max-width 800px. Die Regeln hier hängen an zwei
   Klassen am <section> plus Kindselektor (0,3,0) und gewinnen
   unabhängig von der Ladereihenfolge.
   ============================================================ */


/* === BREITE === */

/* Lesebreite: ab etwa 75 Zeichen pro Zeile findet das Auge den
   Zeilenanfang schlechter wieder – bei langen Texten der häufigste
   Grund, warum eine Seite anstrengend wirkt. */
.extra-section.section--width-schmal .textblock .textblock__inner {
    max-width: 65ch;
}

.extra-section.section--width-mittel .textblock .textblock__inner {
    max-width: 50rem;
}

.extra-section.section--width-breit .textblock .textblock__inner {
    max-width: 70rem;
}


/* === POSITION ===

   Verschoben wird der Block, nicht der Satz: text-align bleibt
   unangetastet, damit der Text auch im rechten Block linksbündig
   läuft. Rechtsbündiger Fließtext hat keinen festen Zeilenanfang
   und ist deutlich schwerer zu lesen.

   .content ist ein Flex-Item in .content-container – auto-Ränder
   schieben es innerhalb der Fläche. */

.extra-section.section--align-links .textblock .textblock__inner {
    margin-inline: 0 auto;
}

.extra-section.section--align-mitte .textblock .textblock__inner {
    margin-inline: auto;
}

.extra-section.section--align-rechts .textblock .textblock__inner {
    margin-inline: auto 0;
}


/* === KOPF === */

.textblock__head {
    margin-bottom: 1.75rem;
    width: 100%;
}


/* === TEXT ===

   Die Auszeichnungen des Editors tragen hier die ganze Gliederung,
   deshalb bekommen sie mehr Gewicht als im normalen Fließtext. */

.textblock__text {
    width: 100%;
    /* Etwas mehr als die Theme-Vorgabe von 1.5: auf langen Strecken
       findet das Auge die nächste Zeile sonst schwerer. */
    line-height: 1.7;
}

.textblock__text > *:first-child {
    margin-top: 0;
}

.textblock__text > *:last-child {
    margin-bottom: 0;
}

.textblock__text p {
    margin: 0 0 1.15em;
}

/* Zwischenüberschriften: viel Luft davor, wenig danach. So gehört
   die Überschrift sichtbar zum folgenden Absatz und trennt ihn vom
   vorigen. */
.textblock__text :is(h2, h3) {
    margin: 2.75rem 0 0.75rem;
    font-size: var(--headline-s);
    line-height: 1.25;
    text-wrap: balance;
}

.textblock__text :is(h4, h5, h6) {
    margin: 2rem 0 0.5rem;
}

.textblock__text > :is(h2, h3, h4):first-child {
    margin-top: 0;
}


/* === LEITSATZ ===
   Der Zitat-Knopf im Editor erzeugt ein blockquote – daraus wird hier
   der hervorgehobene Satz, ohne dass jemand ein Feld dafür pflegt. */

.textblock__text blockquote {
    margin: 2.25rem 0;
    padding: 0.3rem 0 0.3rem 1.75rem;
    border-left: 2px solid var(--accent-01);
    font-style: normal;
}

.textblock__text blockquote p {
    margin: 0 0 0.5em;
    font-size: var(--headline-s);
    line-height: 1.35;
    text-wrap: balance;
    color: var(--headline-color, var(--foreground-01));
}

.textblock__text blockquote p:last-child {
    margin-bottom: 0;
}

.textblock__text blockquote cite {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.9rem;
    font-style: normal;
    color: var(--foreground-04);
}


/* === LISTEN === */

.textblock__text :is(ul, ol) {
    margin: 0 0 1.15em;
    padding-left: 1.4rem;
}

.textblock__text li {
    margin-bottom: 0.45em;
    padding-left: 0.3rem;
}

.textblock__text li::marker {
    color: var(--accent-01);
}


/* === WEITERE AUSZEICHNUNGEN === */

.textblock__text hr {
    margin: 2.5rem 0;
}

.textblock__text img {
    border-radius: var(--border-radius-l);
    margin: 2rem 0;
}

.textblock__text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--accent-01);
    text-underline-offset: 0.2em;
}


/* === AKZENTFLÄCHEN ===
   Die Schriftfarbe kommt auf eingefärbten Flächen aus backgrounds.css.
   Hier ziehen nur die Elemente nach, die sonst an einer festen
   Vordergrundfarbe hingen. */

.extra-section--bg-akzent .textblock__text blockquote,
.mta-bg--dark .textblock__text blockquote {
    border-left-color: currentColor;
}

.extra-section--bg-akzent .textblock__text li::marker,
.mta-bg--dark .textblock__text li::marker {
    color: currentColor;
}


/* === KLEINE BILDSCHIRME ===
   Unterhalb dieser Breite bleibt für ein Versetzen kein Platz: der
   Block füllt die Fläche, egal welche Position gewählt ist. */

@media (max-width: 767px) {
    .extra-section[class*="section--align-"] .textblock .textblock__inner {
        margin-inline: 0;
        max-width: 100%;
    }

    .textblock__text :is(h2, h3) {
        margin-top: 2.25rem;
    }

    .textblock__text blockquote {
        margin: 1.75rem 0;
        padding-left: 1.1rem;
    }
}