.gpm-faq {
    --gpm-faq-accent: #004691;
    --gpm-faq-surface: #fff;
    --gpm-faq-on-accent: #fff;
    --gpm-faq-shadow: 0 0 18px -10px #99a0af;

    --gpm-faq-space: 48px;
    --gpm-faq-intro-space: 24px;

    padding-block: var(--gpm-faq-space);
}

/* --- Einleitungstext -------------------------------------------------- */

.gpm-faq__intro {
    margin-bottom: var(--gpm-faq-intro-space);
}

/* --- Raster ----------------------------------------------------------- */

.faq-grid-basics {
    display: grid;
    gap: 24px 40px;
}

/* --- Einzelner Eintrag ------------------------------------------------ */

.gpm-faq__question {
    margin-bottom: 6px;
    color: var(--gpm-faq-accent);
    font-weight: 500;
}

/* --- Darstellungsvarianten -------------------------------------------- */

.gpm-faq--white-box,
.gpm-faq--blue-box {
    padding: 18px;
    box-shadow: var(--gpm-faq-shadow);
}

.gpm-faq--white-box {
    background-color: var(--gpm-faq-surface);
}

.gpm-faq--blue-box {
    background-color: var(--gpm-faq-accent);
}

.gpm-faq--blue-box .gpm-faq__question,
.gpm-faq--blue-box .gpm-faq__answer {
    color: var(--gpm-faq-on-accent);
}


.gpm-faq--blue-box .gpm-faq__answer a {
    color: inherit;
    text-decoration: underline;
}

/* =====================================================================
   Breakpoints (mobile-first, min-width)
   ===================================================================== */

@media (min-width: 640px) {
    .gpm-faq {
        --gpm-faq-intro-space: 28px;
    }

    .faq-grid-basics:not(.faq-grid-1) {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        gap: 28px;
    }
}

@media (min-width: 992px) {
    .gpm-faq {
        --gpm-faq-space: 64px;
        --gpm-faq-intro-space: 32px;
    }

    .faq-grid-basics.faq-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .faq-grid-basics.faq-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1238px) {
    .gpm-faq {
        --gpm-faq-space: 80px;
    }
}