/* ============================================================
   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.
   ============================================================ */


/* === BILD NEBEN TEXT === */

.textblock__media {
    display: grid;
    gap: 2rem 3rem;
    grid-template-columns: 1fr;
    align-items: start;
    width: 100%;
}

.textblock__image img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-l);
}

@media (min-width: 768px) {
    .textblock__media--gleich { grid-template-columns: 1fr 1fr; }
    .textblock__media--text_breiter { grid-template-columns: 5fr 7fr; }
    .textblock__media--bild_breiter { grid-template-columns: 7fr 5fr; }

    /* Bild rechts: die Spaltenanteile folgen dem Bild, nicht der
       Reihenfolge im Markup – sonst bekäme bei "Text breiter" das
       Bild den größeren Anteil. */
    .textblock__media--rechts .textblock__image { order: 2; }
    .textblock__media--rechts.textblock__media--text_breiter { grid-template-columns: 7fr 5fr; }
    .textblock__media--rechts.textblock__media--bild_breiter { grid-template-columns: 5fr 7fr; }
}


/* === 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) {
    .textblock__text :is(h2, h3) {
        margin-top: 2.25rem;
    }

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