/* Zweispaltige Reihen: Desktop-Maße in vw nach Vorlage (1920px breit).
   Textkacheln links halten den Seiteneinzug der Inhaltsbreite. */
:where(.split-rows) {
    --split-rows-inset: 7.2vw;
    --split-rows-inner: 5.5vw;
    --split-rows-padding-top: 3.5vw;
    --split-rows-padding-bottom: 4.2vw;
    /* Vorlage: Kachel mit Seitenüberschrift beginnt tiefer */
    --split-rows-headline-offset: 1.2vw;
}

.split-rows__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: var(--split-rows-min-height, 0);
}

.split-rows__cell {
    position: relative;
    min-width: 0;
}

.split-rows__cell--bg-white     { background: var(--color-white); }
.split-rows__cell--bg-secondary { background: var(--color-secondary); }
.split-rows__cell--bg-tertiary  { background: var(--color-tertiary); }
.split-rows__cell--bg-mint      { background: var(--color-mint); }
.split-rows__cell--bg-sand      { background: var(--color-sand); }

/* --- Text ---------------------------------------------------------------- */
.split-rows__cell--text {
    padding: var(--split-rows-padding-top) var(--split-rows-inner) var(--split-rows-padding-bottom);
}

.split-rows__cell--left.split-rows__cell--text {
    padding-left: var(--split-rows-inset);
    padding-right: 6.25vw;
}

.split-rows__cell--right.split-rows__cell--text {
    padding-right: var(--split-rows-inset);
}

/* Rechter Text ohne Überschrift neben linker Überschrift: auf Höhe des
   linken Textes beginnen (Überschrifthöhe + Abstand, siehe h1-Werte) */
@media (min-width: 901px) {
    .split-rows__cell--text:has(> .split-rows__headline) {
        padding-top: calc(var(--split-rows-padding-top) + var(--split-rows-headline-offset));
    }

    .split-rows__row:has(> .split-rows__cell--left .split-rows__headline) > .split-rows__cell--right.split-rows__cell--text:not(:has(.split-rows__headline)) {
        padding-top: calc(var(--split-rows-padding-top) + var(--split-rows-headline-offset) + var(--font-size-1) * 1.46);
    }
}

/* Zweispaltensatz (Reihenoption "Text über beide Spalten fließen lassen"):
   eine Kachel über die ganze Breite, Überschrift links darüber, Text läuft
   ausgeglichen über zwei Spalten (Vorlage Impressum: x 138–849 / 1021–1800) */
.split-rows__cell--columns {
    grid-column: 1 / -1;
}

@media (min-width: 901px) {
    .split-rows__cell--columns .split-rows__headline {
        max-width: calc(50% - 3.5vw);
    }

    .split-rows__cell--columns .split-rows__text {
        column-count: 2;
        column-gap: 7vw;
    }

    /* Zwischenüberschrift nicht allein am Spaltenende */
    .split-rows__cell--columns .split-rows__text :is(h2, h3, h4) {
        break-after: avoid;
    }
}

/* Reihenpaar mit durchlaufender Textspalte (Template gibt es spaltenweise
   aus): jede Spalte stapelt ihre Kacheln unabhängig von der anderen. Der
   Text der zweiten Kachel schließt an wie ein weiterer Abschnitt. */
@media (min-width: 901px) {
    .split-rows__col {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .split-rows__col > .split-rows__cell:last-child {
        flex: 1 1 auto;
    }

    /* Fotos und Deko behalten ihre Reihenhöhe; Fotos ohne Angabe 33vw */
    .split-rows__row--flow .split-rows__cell--deco {
        min-height: var(--split-rows-min-height, 0);
    }

    .split-rows__row--flow .split-rows__cell--image {
        min-height: var(--split-rows-min-height, 33vw);
    }

    .split-rows__cell--text.split-rows__cell--flow-start {
        padding-bottom: 0 !important;
    }

    .split-rows__cell--text.split-rows__cell--flow-cont {
        padding-top: 0 !important;
    }

    .split-rows__cell--flow-cont .split-rows__text > :first-child {
        margin-top: 1.54em;
    }

    /* Vorlage: vor der ersten Zwischenüberschrift drei Leerzeilen */
    .split-rows__cell--flow-cont .split-rows__text > :is(h2, h3, h4):first-child {
        margin-top: 4.62em !important;
    }
}

.split-rows__cell--primary { color: var(--color-primary); }
.split-rows__cell--black   { color: var(--color-black); }

.split-rows__headline {
    margin: 0 0 0.5em !important;
}

.split-rows__text :is(p, li, h2, h3, h4, strong) {
    color: inherit;
}

/* Zwischenüberschriften (Vorlage): Semibold in Fließtextgröße, eine
   Leerzeile darunter, zwei darüber */
.split-rows__text :is(h2, h3, h4) {
    margin: 0 0 1.54em !important;
    font-size: var(--font-size-txt);
    font-weight: var(--font-weight-txt-bold);
    line-height: var(--line-heigth-default);
    letter-spacing: 0.02em;
    text-transform: none;
}

.split-rows__text * + :is(h2, h3, h4) {
    margin-top: 3.08em !important;
}

.split-rows__text :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 1.54em;
}

.split-rows__text strong {
    font-weight: var(--font-weight-txt-bold);
}

.split-rows__text ul {
    margin: 0;
    padding-left: 1.2em;
}

.split-rows__text a {
    color: inherit;
    text-decoration: underline;
}

/* --- Bild füllt die Kachel ----------------------------------------------- */
.split-rows__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Deko-Grafik ----------------------------------------------------------
   Fertige transparente Grafik im Maßstab der 1920er-Vorlage (--_w =
   Pixelbreite / 19,2 per Template), unten bündig. Ragt bei Bedarf nach
   oben in die Reihe darüber (spätere Reihen liegen im DOM darüber). */
.split-rows__deco-image {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: var(--split-rows-deco-left, 0.7vw);
    width: calc(var(--_w) * 1vw);
    max-width: none;
    height: auto;
    pointer-events: none;
}

/* ==========================================================================
   Tablet + Mobil: Kacheln untereinander
   ========================================================================== */
@media (max-width: 900px) {
    .split-rows__row {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /* Spaltenweise ausgegebene Reihenpaare wieder Reihe für Reihe */
    .split-rows__col {
        display: contents;
    }

    .split-rows__row--flow > .split-rows__col > .split-rows__cell {
        order: var(--_order);
    }

    .split-rows__cell--text,
    .split-rows__cell--left.split-rows__cell--text,
    .split-rows__cell--right.split-rows__cell--text {
        padding: 10vw 8vw;
    }

    /* Manuelle Umbrüche in Zwischenüberschriften sind für Desktop gesetzt */
    .split-rows__text :is(h2, h3, h4) br {
        display: none;
    }

    .split-rows__cell--image {
        aspect-ratio: 3 / 2;
    }

    /* Grafik im Fluss, mittig, größer als auf Desktop */
    .split-rows__cell--deco {
        padding: 6vw 0 0;
    }

    .split-rows__deco-image {
        position: relative;
        left: auto;
        display: block;
        width: min(calc(var(--_w) * 1.6vw), 92vw);
        margin: 0 auto;
    }
}