/**
 * Pattern Banner CSS - Muster-Banner
 *
 * Banner mit Fröbel-Muster-Fläche, Text, Button und optionalem
 * Bild-Überstand nach oben (Überstand-Bereich bleibt transparent,
 * die Sektion dahinter scheint durch).
 *
 * Das Element füllt IMMER nur seinen Container (kein eigener
 * Breakout!). Volle Breite steuert die Redaktion über die nativen
 * WPBakery-Einstellungen an Sektion/Row: „Stretch row and content
 * (no paddings)" = randlos, Standard = im Seitenraster.
 *
 * Konsumiert Theme-Tokens (--aktd-*) mit Fallbacks.
 */

/* Wrapper: füllt den Container */
.akt-pattern-banner {
    --akt-banner-offset: 150px;

    width: 100%;
    margin-bottom: 32px;
}

.akt-pattern-banner--spacing-small {
    margin-bottom: 16px;
}

.akt-pattern-banner--spacing-none {
    margin-bottom: 0;
}

/* Platz für den Bild-Überstand (transparent, Sektion dahinter scheint durch) */
.akt-pattern-banner--image-offset {
    padding-top: var(--akt-banner-offset);
}

/* Muster-Fläche */
.akt-pattern-banner__surface {
    background-color: var(--aktd-color-petrol, #008f7d);
    background-size: cover;
    background-position: center;
    padding: 48px 20px 56px;
}

.akt-pattern-banner--bg-gruen-dreiecke .akt-pattern-banner__surface {
    background-image: url("../img/patterns/gruen-dreiecke-gross.jpg");
}

.akt-pattern-banner--bg-blau-blaetter .akt-pattern-banner__surface {
    background-image: url("../img/patterns/blau-blaetter-gross.jpg");
}

.akt-pattern-banner--bg-blau-raster .akt-pattern-banner__surface {
    background-image: url("../img/patterns/blau-raster-gross.jpg");
}

.akt-pattern-banner--bg-blau-figuren .akt-pattern-banner__surface {
    background-image: url("../img/patterns/blau-figuren-gross.jpg");
}

.akt-pattern-banner--bg-rot-kreise .akt-pattern-banner__surface {
    background-image: url("../img/patterns/rot-kreise-gross.jpg");
}

.akt-pattern-banner--bg-rot-herzen .akt-pattern-banner__surface {
    background-image: url("../img/patterns/rot-herzen-gross.jpg");
}

/* Innencontainer */
.akt-pattern-banner__inner {
    max-width: var(--aktd-max-width, 1200px);
    margin: 0 auto;
    text-align: center;
}

/* Bild */
.akt-pattern-banner__media {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.akt-pattern-banner--image-offset .akt-pattern-banner__media {
    margin-top: calc(-1 * var(--akt-banner-offset) - 48px); /* Überstand + Flächen-Padding */
}

.akt-pattern-banner__image {
    display: block;
    width: min(480px, 70vw);
    height: auto;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.18));
}

/* Text */
.akt-pattern-banner__text {
    margin: 0 auto 26px;
    max-width: 640px;
    font-family: var(--aktd-font-base, sans-serif);
    font-weight: 600;
    font-size: 18px; /* Design */
    line-height: 1.33; /* Design 18/24 */
    color: var(--aktd-color-white, #ffffff);
}

/* Button (weißer Pill, Textfarbe je Farbfamilie) */
.akt-pattern-banner__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 26px;
    border-radius: 999px;
    background: var(--aktd-color-white, #ffffff);
    font-family: var(--aktd-font-base, sans-serif);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important; /* Astra unterstreicht Content-Links */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.akt-pattern-banner__button:hover,
.akt-pattern-banner__button:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    color: var(--aktd-color-font, #1b1b1b);
}

/* Button-Textfarbe folgt der Hintergrund-Farbfamilie */
.akt-pattern-banner--bg-gruen-dreiecke .akt-pattern-banner__button {
    color: var(--aktd-color-script-heading, #2b957e);
}

.akt-pattern-banner--bg-blau-blaetter .akt-pattern-banner__button,
.akt-pattern-banner--bg-blau-raster .akt-pattern-banner__button,
.akt-pattern-banner--bg-blau-figuren .akt-pattern-banner__button {
    color: var(--aktd-color-blue-dark, #3062a6);
}

.akt-pattern-banner--bg-rot-kreise .akt-pattern-banner__button,
.akt-pattern-banner--bg-rot-herzen .akt-pattern-banner__button {
    color: #d83c45;
}

/* Leerzustand (nur für Redakteure sichtbar) */
.akt-pattern-banner__no-content {
    padding: 16px;
    border: 2px dashed #c3c4c7;
    border-radius: 3px;
    color: #646970;
    font-size: 14px;
    text-align: center;
}

/* Responsive */
@media (max-width: 921px) {

    .akt-pattern-banner {
        --akt-banner-offset: 100px;
    }

    .akt-pattern-banner__surface {
        padding: 40px 20px 48px;
    }
}

@media (max-width: 544px) {

    .akt-pattern-banner {
        --akt-banner-offset: 64px;
    }

    .akt-pattern-banner--spacing-default {
        margin-bottom: 24px;
    }

    .akt-pattern-banner--spacing-small {
        margin-bottom: 12px;
    }

    .akt-pattern-banner--image-offset .akt-pattern-banner__media {
        margin-top: calc(-1 * var(--akt-banner-offset) - 40px);
    }

    .akt-pattern-banner__text {
        font-size: 15px;
    }
}

/* Barrierefreiheit / Print */
@media (prefers-reduced-motion: reduce) {

    .akt-pattern-banner__button {
        transition: none;
    }

    .akt-pattern-banner__button:hover,
    .akt-pattern-banner__button:focus {
        transform: none;
    }
}

@media print {

    .akt-pattern-banner__surface {
        background: none;
        border: 1px solid #000;
    }

    .akt-pattern-banner__text {
        color: #000;
    }
}