/*!
 * WAB Bild & Text / Text & Text – zwei Spalten.
 * Bild & Text: Bild links oder rechts, mobil Text zuerst. Im HTML steht der Text vor dem Bild;
 * die Position auf breiten Bildschirmen regelt das Raster.
 * Text & Text: zwei Textspalten (.wab-tt), mobil untereinander.
 * Farben aus der globalen root.css (--wab-color-*).
 */

.wab-it {
    --wab-it-image: 1fr;
    --wab-it-text: 1fr;
    --wab-it-gap: clamp(1.5rem, 5vw, 4.5rem);
    --wab-it-accent: var(--wab-color-primary, #1d6b3a);
    display: grid;
    grid-template-columns: var(--wab-it-image) var(--wab-it-text);
    grid-template-areas: "media content";
    align-items: center;
    gap: var(--wab-it-gap);
}

/* Abstand oben/unten: standardmäßig keiner, Stufen aus dem Seitenlayout (Layout-Plugin, je Gerät angepasst) */
.wab-it--mt-s { margin-top: var(--wab-space-s, 16px); }
.wab-it--mt-m { margin-top: var(--wab-space-m, 32px); }
.wab-it--mt-l { margin-top: var(--wab-space-l, 48px); }
.wab-it--mt-xl { margin-top: var(--wab-space-xl, 72px); }
.wab-it--mb-s { margin-bottom: var(--wab-space-s, 16px); }
.wab-it--mb-m { margin-bottom: var(--wab-space-m, 32px); }
.wab-it--mb-l { margin-bottom: var(--wab-space-l, 48px); }
.wab-it--mb-xl { margin-bottom: var(--wab-space-xl, 72px); }

/* Bild rechts */
.wab-it--image-right {
    grid-template-columns: var(--wab-it-text) var(--wab-it-image);
    grid-template-areas: "content media";
}

/* Bildbreite (Anteil der Bildspalte) */
.wab-it--width-40 { --wab-it-image: 2fr; --wab-it-text: 3fr; }
.wab-it--width-33 { --wab-it-image: 1fr; --wab-it-text: 2fr; }
.wab-it--width-60 { --wab-it-image: 3fr; --wab-it-text: 2fr; }

.wab-it--valign-top { align-items: start; }
.wab-it--valign-bottom { align-items: end; }

/* Textausrichtung (Überschriften, Text, Link) */
.wab-it--align-left .wab-it__content { text-align: left; }
.wab-it--align-right .wab-it__content { text-align: right; }
.wab-it--align-center .wab-it__content { text-align: center; }

/* Blocksatz nur für den Fließtext – Überschriften und Link bleiben linksbündig */
.wab-it--align-justify .wab-it__text {
    text-align: justify;
    hyphens: auto;
}

/* Ohne Bild nimmt der Text die ganze Breite ein */
.wab-it--no-image {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content";
}

.wab-it__content {
    grid-area: content;
    min-width: 0;
}

.wab-it__media {
    grid-area: media;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Bild                                                                */
/* ------------------------------------------------------------------ */

.wab-it__media figure {
    margin: 0;
}

.wab-it__media img {
    display: block;
    width: 100%;
    height: auto;
}

.wab-it--style-rounded .wab-it__media img,
.wab-it--style-shadow .wab-it__media img {
    border-radius: var(--wab-radius-image, 16px);
}

.wab-it--style-shadow .wab-it__media img {
    box-shadow: 0 24px 48px -24px rgb(0 0 0 / .35);
}

.wab-it__media figcaption {
    margin-top: .5rem;
    font-size: .875rem;
    opacity: .75;
}

/* ------------------------------------------------------------------ */
/* Text                                                                */
/* ------------------------------------------------------------------ */

.wab-it__content > :first-child { margin-top: 0; }
.wab-it__content > :last-child { margin-bottom: 0; }

.wab-it__headline {
    margin: 0 0 1rem;
    line-height: 1.2;
}

/* Zweite Überschrift: oberhalb als Dachzeile (klein, Akzentfarbe), unterhalb als Unterzeile (größer, ruhiger) */
.wab-it__subline {
    margin: 0;
    line-height: 1.35;
}

.wab-it__subline--above {
    margin-bottom: .5rem;
    color: var(--wab-it-accent);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wab-it__subline--below {
    margin: -.25rem 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 500;
    opacity: .8;
}

.wab-it__text > :first-child { margin-top: 0; }
.wab-it__text > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Link                                                                */
/* ------------------------------------------------------------------ */

.wab-it__actions {
    margin: 1.75rem 0 0;
}

.wab-it__link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, gap .2s ease;
}

/* Pfeil, der beim Überfahren etwas nach rechts rückt */
.wab-it__link::after {
    content: "";
    width: .45em;
    height: .45em;
    border: solid currentColor;
    border-width: 2px 2px 0 0;
    transform: rotate(45deg);
}

.wab-it__link:hover,
.wab-it__link:focus-visible {
    gap: .75rem;
}

.wab-it__link:focus-visible {
    outline: 2px solid var(--wab-it-accent);
    outline-offset: 3px;
}

.wab-it__link--button,
.wab-it__link--outline {
    padding: .8rem 1.5rem;
    border: 2px solid var(--wab-it-accent);
    border-radius: var(--wab-radius-button, 999px);
}

.wab-it__link--button {
    background: var(--wab-it-accent);
    color: var(--wab-color-primary-text, #fff);
}

.wab-it__link--button:hover,
.wab-it__link--button:focus-visible {
    background: color-mix(in srgb, var(--wab-it-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--wab-it-accent) 85%, #000);
    color: var(--wab-color-primary-text, #fff);
}

.wab-it__link--outline {
    background: transparent;
    color: var(--wab-it-accent);
}

.wab-it__link--outline:hover,
.wab-it__link--outline:focus-visible {
    background: var(--wab-it-accent);
    color: var(--wab-color-primary-text, #fff);
}

.wab-it__link--link {
    color: var(--wab-it-accent);
}

/*
 * Auf farbigen Abschnitten (Layout-Plugin) Textfarbe übernehmen statt Akzentfarbe.
 * Nicht über currentColor: Beim gefüllten Button wäre currentColor die eigene Schriftfarbe
 * (= Abschnittshintergrund) – Hintergrund und Schrift wären dann gleich und der Button unsichtbar.
 */
.wab-section--text .wab-it {
    --wab-it-accent: var(--wab-section-text, currentColor);
}

.wab-section--text .wab-it__link--button,
.wab-section--text .wab-it__link--outline:hover,
.wab-section--text .wab-it__link--outline:focus-visible {
    color: var(--wab-bg-color, var(--wab-color-primary, #1d6b3a));
}

/* ------------------------------------------------------------------ */
/* Text & Text                                                         */
/* ------------------------------------------------------------------ */

.wab-tt {
    --wab-tt-1: 1fr;
    --wab-tt-2: 1fr;
    grid-template-columns: minmax(0, var(--wab-tt-1)) minmax(0, var(--wab-tt-2));
    grid-template-areas: none;
}

/* Breite der ersten Spalte */
.wab-tt--width-40 { --wab-tt-1: 2fr; --wab-tt-2: 3fr; }
.wab-tt--width-33 { --wab-tt-1: 1fr; --wab-tt-2: 2fr; }
.wab-tt--width-60 { --wab-tt-1: 3fr; --wab-tt-2: 2fr; }
.wab-tt--width-67 { --wab-tt-1: 2fr; --wab-tt-2: 1fr; }

/* Beide Spalten fließen der Reihe nach ins Raster (nicht in die Fläche „content“ von Bild & Text) */
.wab-tt .wab-tt__col {
    grid-area: auto;
}

/* Trennlinie genau in der Mitte des Spaltenabstands */
.wab-tt--divider .wab-tt__col--2 {
    position: relative;
}

.wab-tt--divider .wab-tt__col--2::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--wab-it-gap) / -2);
    width: 1px;
    background: color-mix(in srgb, currentColor 18%, transparent);
}

/* ------------------------------------------------------------------ */
/* Smartphone: einspaltig, Text immer zuerst                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767.98px) {
    .wab-it,
    .wab-it--image-right {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "content"
            "media";
        --wab-it-gap: 1.5rem;
    }

    /* Text & Text: Spalte 1 über Spalte 2, Trennlinie waagerecht */
    .wab-tt {
        --wab-it-gap: 2rem;
    }

    .wab-tt--divider .wab-tt__col--2::before {
        top: calc(var(--wab-it-gap) / -2);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }
}