/*
 * CTA-Bausteine Magazin.
 *
 * Grundgestaltung folgt bewusst dem Magazin-Look aus "Einzelbeitrag Design"
 * (Container 15px, Button 8px, Überschrift 700) und nicht den konsolidierten
 * Design-Guidelines (10px, 5px, 600), damit der CTA nicht aus der Seite fällt.
 * Farben folgen den Guidelines.
 *
 * Die wählbaren Varianten sind unten in Abschnitte gegliedert. Alle Werte sind
 * hier fest hinterlegt, im Backend wird nur zwischen ihnen gewählt. Insbesondere
 * gehört die Textfarbe immer zur Fläche und ist nicht getrennt wählbar.
 *
 * !important steht nur dort, wo das Theme sonst überschreibt. So macht es das
 * bestehende Magazin-CSS auch.
 */

/* ---------------- Grundgerüst ---------------- */

.gmv-cta {
    box-sizing: border-box;
    max-width: 1100px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 50px 30px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    border-radius: 15px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    line-height: 1.65;
}

.gmv-cta__text {
    flex: 1 1 55%;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.gmv-cta__headline {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
    color: inherit;
}

.gmv-cta__body {
    margin: 0 0 28px;
}

.gmv-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease;
}

.gmv-cta__button:focus-visible {
    outline: 3px solid #1c5ff1;
    outline-offset: 2px;
}

.gmv-cta__arrow {
    display: inline-block;
}

.gmv-cta__media {
    flex: 1 1 35%;
    min-width: 200px;
    height: 220px;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ---------------- Position ---------------- */

.gmv-cta--seitenende {
    margin: 0 auto 75px !important;
}

.gmv-cta--ende {
    margin: 35px auto 0 !important;
}

/* ---------------- Aufteilung ---------------- */

.gmv-cta--layout-bild-rechts {
    flex-direction: row;
}

.gmv-cta--layout-bild-links {
    flex-direction: row-reverse;
}

.gmv-cta--layout-bild-oben {
    flex-direction: column-reverse;
    align-items: stretch;
}

.gmv-cta--layout-bild-oben .gmv-cta__text,
.gmv-cta--layout-ohne-bild .gmv-cta__text {
    flex: 1 1 100%;
}

.gmv-cta--layout-bild-oben .gmv-cta__media {
    flex: 1 1 auto;
    width: 100%;
}

.gmv-cta--layout-ohne-bild .gmv-cta__media {
    display: none;
}

/* ---------------- Bildanteil (nur neben dem Text) ---------------- */

.gmv-cta--layout-bild-rechts.gmv-cta--bild-klein .gmv-cta__media,
.gmv-cta--layout-bild-links.gmv-cta--bild-klein .gmv-cta__media {
    flex: 1 1 28%;
}

.gmv-cta--layout-bild-rechts.gmv-cta--bild-klein .gmv-cta__text,
.gmv-cta--layout-bild-links.gmv-cta--bild-klein .gmv-cta__text {
    flex: 1 1 64%;
}

.gmv-cta--layout-bild-rechts.gmv-cta--bild-mittel .gmv-cta__media,
.gmv-cta--layout-bild-links.gmv-cta--bild-mittel .gmv-cta__media {
    flex: 1 1 38%;
}

.gmv-cta--layout-bild-rechts.gmv-cta--bild-mittel .gmv-cta__text,
.gmv-cta--layout-bild-links.gmv-cta--bild-mittel .gmv-cta__text {
    flex: 1 1 54%;
}

.gmv-cta--layout-bild-rechts.gmv-cta--bild-gross .gmv-cta__media,
.gmv-cta--layout-bild-links.gmv-cta--bild-gross .gmv-cta__media {
    flex: 1 1 47%;
}

.gmv-cta--layout-bild-rechts.gmv-cta--bild-gross .gmv-cta__text,
.gmv-cta--layout-bild-links.gmv-cta--bild-gross .gmv-cta__text {
    flex: 1 1 45%;
}

/* ---------------- Fläche, jeweils mit fester Textfarbe ---------------- */

.gmv-cta--flaeche-blau {
    background: #e7eefa;
    color: #1f304b;
}

.gmv-cta--flaeche-grau {
    background: #f2f5f7;
    color: #1f304b;
}

.gmv-cta--flaeche-weiss {
    background: #ffffff;
    color: #1f304b;
    border: 1px solid #cdd5df;
}

/* Auf Navy: Überschrift Weiß (13,3:1), Fließtext #b9c6dd (7,7:1), wie in den
   Guidelines für helle Schrift auf farbiger Fläche festgelegt. */
.gmv-cta--flaeche-navy {
    background: #1f304b;
    color: #b9c6dd;
}

.gmv-cta--flaeche-navy .gmv-cta__headline {
    color: #ffffff;
}

.gmv-cta--flaeche-gelb {
    background: #fff7e3;
    color: #1f304b;
}

/* ---------------- Textausrichtung ---------------- */

.gmv-cta--text-zentriert .gmv-cta__text {
    align-items: center;
    text-align: center;
}

/* ---------------- Dichte ---------------- */

.gmv-cta--dichte-kompakt {
    padding: 26px 24px;
    gap: 20px;
}

.gmv-cta--dichte-kompakt .gmv-cta__headline {
    font-size: 21px;
}

.gmv-cta--dichte-kompakt .gmv-cta__body {
    margin-bottom: 18px;
}

.gmv-cta--dichte-kompakt .gmv-cta__media {
    height: 160px;
}

/* ---------------- Button ---------------- */

.gmv-cta--btn-primaer .gmv-cta__button {
    background: #1c5ff1;
    color: #ffffff !important;
}

.gmv-cta--btn-primaer .gmv-cta__button:hover,
.gmv-cta--btn-primaer .gmv-cta__button:focus {
    background: #6497fe;
    color: #ffffff !important;
}

/* Auf Navy wäre Akzentblau gegen den Grund nur etwa 2:1 und damit als
   Bedienelement zu schwach abgegrenzt. Dort deshalb Weiß auf Navy. */
.gmv-cta--flaeche-navy.gmv-cta--btn-primaer .gmv-cta__button {
    background: #ffffff;
    color: #1f304b !important;
}

.gmv-cta--flaeche-navy.gmv-cta--btn-primaer .gmv-cta__button:hover,
.gmv-cta--flaeche-navy.gmv-cta--btn-primaer .gmv-cta__button:focus {
    background: #e7eefa;
    color: #1f304b !important;
}

/* Der helle Button der Guidelines ist gegen Weiß definiert. Auf getönten
   Flächen verschwindet seine Füllung (#f2f5f7 auf #f2f5f7 wäre unsichtbar),
   deshalb hier durchgehend weiße Füllung mit kräftiger Kontur: die Kontur
   trägt die Abgrenzung und erreicht auf jeder der fünf Flächen über 3:1. */
.gmv-cta--btn-hell .gmv-cta__button {
    background: #ffffff;
    color: #1f304b !important;
    border: 1px solid #4a5e7a;
}

.gmv-cta--btn-hell .gmv-cta__button:hover,
.gmv-cta--btn-hell .gmv-cta__button:focus {
    background: #1c5ff1;
    color: #ffffff !important;
    border-color: #1c5ff1;
}

/* ---------------- Bildzuschnitt ---------------- */

.gmv-cta--fit-einpassen .gmv-cta__media {
    background-size: contain;
}

.gmv-cta--fit-fuellen .gmv-cta__media {
    background-size: cover;
}

/* ---------------- Bewegung ---------------- */

@media (prefers-reduced-motion: reduce) {
    .gmv-cta__button {
        transition: none;
    }
}

/* ---------------- Schmale Ansichten ---------------- */

@media (max-width: 1024px) {
    .gmv-cta__media {
        height: 180px;
    }

    .gmv-cta--dichte-kompakt .gmv-cta__media {
        height: 140px;
    }
}

@media (max-width: 782px) {
    /* Alle Aufteilungen stapeln. Bild oben bleibt oben, sonst Bild unter Text. */
    .gmv-cta--layout-bild-rechts,
    .gmv-cta--layout-bild-links,
    .gmv-cta--layout-ohne-bild {
        flex-direction: column;
    }

    .gmv-cta {
        padding: 30px 20px;
        font-size: 17px;
    }

    .gmv-cta--dichte-kompakt {
        padding: 22px 18px;
    }

    .gmv-cta__text,
    .gmv-cta__media {
        flex: 1 1 100% !important;
        width: 100%;
    }

    .gmv-cta__headline {
        font-size: 21px;
    }

    .gmv-cta__media {
        height: auto;
        max-height: 220px;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 480px) {
    .gmv-cta {
        padding: 20px 15px;
    }

    .gmv-cta--seitenende {
        margin: 0 auto 40px !important;
    }

    .gmv-cta__button {
        width: 100%;
        justify-content: center;
    }
}