/* mod_ldnstimmen - Kundenstimmen als Karten */

.ldn-stimmen {
    --ldn-gold:       #d0b17a;
    --ldn-gold-dark:  #b8965c;
    --ldn-gold-light: #e5d1ab;
    --ldn-grey:       #58585a;

    margin: 0 0 40px;
}

.ldn-stimmen__intro {
    margin: 0 0 24px;
    color: var(--ldn-grey);
    font-size: 17px;
}

.ldn-stimmen__grid {
    display: grid;
    gap: 22px;
}

.ldn-stimmen--cols2 .ldn-stimmen__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ldn-stimmen--cols3 .ldn-stimmen__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ldn-stimmen--cols4 .ldn-stimmen__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Gemeinsame Grundlage ------------------------------------------------- */

.ldn-stimme {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
}

.ldn-stimme__box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.ldn-stimme__mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 44px;
    line-height: .7;
    color: var(--ldn-gold);
    margin-bottom: 14px;
}

.ldn-stimme__text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 15px;
    font-style: normal;
    line-height: 1.65;
    quotes: none;
}

.ldn-stimme__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ldn-stimme__author {
    font-size: 13px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ldn-stimme__context {
    font-size: 13px;
    opacity: .85;
}

/* --- Variante "hell": weisse Karte, goldener Rahmen ----------------------- */

.ldn-stimmen--hell .ldn-stimme {
    padding: 24px 22px 22px;
    border: 1px solid var(--ldn-gold);
    background: #fff;
}

.ldn-stimmen--hell .ldn-stimme__text   { color: var(--ldn-grey); }
.ldn-stimmen--hell .ldn-stimme__meta   { margin-top: 18px; }
.ldn-stimmen--hell .ldn-stimme__author { color: var(--ldn-gold-dark); }
.ldn-stimmen--hell .ldn-stimme__context{ color: var(--ldn-grey); }

/* --- Variante "dunkel": grauer Kasten, Name innen ------------------------- */

.ldn-stimmen--dunkel .ldn-stimme {
    padding: 24px 22px 22px;
    background: var(--ldn-grey);
}

.ldn-stimmen--dunkel .ldn-stimme__text   { color: #fff; }
.ldn-stimmen--dunkel .ldn-stimme__meta   { margin-top: 18px; }
.ldn-stimmen--dunkel .ldn-stimme__context{ color: #fff; }

/*
 * Gold auf Grau erreicht nur rund 3,4:1 und ist fuer kleine Schrift zu schwach.
 * Der hellere Goldton kommt auf etwa 6:1.
 */
.ldn-stimmen--dunkel .ldn-stimme__author { color: var(--ldn-gold-light); }

/* --- Variante "kasten": grauer Kasten, Name darunter ---------------------- */

.ldn-stimmen--kasten .ldn-stimme__box {
    padding: 24px 22px 26px;
    background: var(--ldn-grey);
}

.ldn-stimmen--kasten .ldn-stimme__text { color: #fff; }

.ldn-stimmen--kasten .ldn-stimme__meta {
    margin-top: 14px;
    padding-left: 2px;
}

/* Auf Weiss ist Grau deutlich ruhiger zu lesen als Gold */
.ldn-stimmen--kasten .ldn-stimme__author  { color: var(--ldn-grey); }
.ldn-stimmen--kasten .ldn-stimme__context { color: var(--ldn-grey); }

/* --- Responsiv ------------------------------------------------------------ */

@media (max-width: 966px) {
    .ldn-stimmen--cols3 .ldn-stimmen__grid,
    .ldn-stimmen--cols4 .ldn-stimmen__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .ldn-stimmen__grid,
    .ldn-stimmen--cols2 .ldn-stimmen__grid,
    .ldn-stimmen--cols3 .ldn-stimmen__grid,
    .ldn-stimmen--cols4 .ldn-stimmen__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ldn-stimmen--hell .ldn-stimme,
    .ldn-stimmen--dunkel .ldn-stimme,
    .ldn-stimmen--kasten .ldn-stimme__box {
        padding: 20px 18px 20px;
    }
}