/**
 * Quote Banner CSS - Zitat-Banner
 *
 * Vollflächiger Banner mit Fröbel-Muster, großem Anführungszeichen
 * und Zitat in Schreibschrift (weiß), zentriert.
 *
 * Volle Breite über die native Row-Einstellung "Stretch row and
 * content (no paddings)" — das Element füllt nur seinen Container.
 *
 * Konsumiert Theme-Tokens (--aktd-*) mit Fallbacks.
 */

.akt-quote-banner {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: clamp(230px, 24vw, 320px);
    margin: 0 0 32px;
    padding: 48px 20px;
    border: 0;
    background-color: var(--aktd-color-petrol, #008f7d);
    background-size: cover;
    background-position: center;
    quotes: none;
}

.akt-quote-banner--height-small {
    min-height: clamp(180px, 18vw, 240px);
    padding: 36px 20px;
}

.akt-quote-banner--height-large {
    min-height: clamp(300px, 32vw, 420px);
    padding: 64px 20px;
}

/* Muster-Hintergründe — große Fassung (2400 px, aus dem Muster-PDF), weil der
   Banner vollbreit läuft; die 900er-Fassung wirkte ab ~1200 px unscharf */
.akt-quote-banner--bg-gruen-dreiecke {
    background-image: url("../img/patterns/gruen-dreiecke-gross.jpg");
}

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

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

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

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

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

/* Innencontainer: Anführungszeichen + Zitat nebeneinander, mittig */
.akt-quote-banner__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(12px, 2vw, 28px);
    width: 100%;
    max-width: var(--aktd-max-width, 1200px);
    margin: 0 auto;
}

/* Großes Anführungszeichen — Form aus dem Webdesign (SVG, Design 62×51 @1200),
   sitzt links neben dem Zitat etwas unter der Mitte */
.akt-quote-banner__mark {
    flex: 0 0 auto;
    align-self: center;
    width: clamp(36px, 5.2vw, 62px); /* Design 62px @1200 */
    margin-top: clamp(16px, 2.5vw, 34px);
    line-height: 0;
    color: var(--aktd-color-white, #ffffff);
    user-select: none;
}

.akt-quote-banner__mark-icon {
    display: block;
    width: 100%;
    height: auto;
}

/* Zitat in Schreibschrift */
.akt-quote-banner .akt-quote-banner__text {
    margin: 0;
    max-width: 900px;
    font-family: var(--aktd-font-script, cursive);
    font-weight: 400;
    font-size: clamp(28px, 4.2vw, 54px); /* Design 50px @1200 */
    line-height: 1.45;
    text-align: center;
    color: var(--aktd-color-white, #ffffff);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Leerzustand (nur für Redakteure sichtbar) */
.akt-quote-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-quote-banner {
        padding: 40px 20px;
    }
}

@media (max-width: 544px) {

    .akt-quote-banner {
        min-height: 0;
        margin-bottom: 24px;
        padding: 32px 16px;
    }

    .akt-quote-banner--height-large,
    .akt-quote-banner--height-small {
        min-height: 0;
        padding: 32px 16px;
    }

    .akt-quote-banner__inner {
        gap: 10px;
    }
}

/* Barrierefreiheit / Print */
@media (prefers-contrast: high) {

    .akt-quote-banner .akt-quote-banner__text {
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    }
}

@media print {

    .akt-quote-banner {
        background: none;
        border: 1px solid #000;
        min-height: 0;
    }

    .akt-quote-banner .akt-quote-banner__text,
    .akt-quote-banner__mark {
        color: #000;
        text-shadow: none;
    }
}