/* Karten und Stimmen. Eigene Datei, weil komponenten.css an der
   Zeilengrenze steht. Nur vorhandene Custom Properties. */

/* ==========================================================================
   Karte — Schwerpunkt, Standort, Beitragshinweis
   ========================================================================== */

/* Ein selbstordnendes Raster: die Spaltenzahl entsteht aus der Breite,
   nicht aus einer Vorgabe. */
.karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-xl);
    margin-block: var(--space-2xl);
    align-items: stretch;
}

/* Die ganze Karte ist der Verweis: kein unterstrichener Text, sondern
   eine Flaeche, die beim Zeigen deutlicher wird. */
.karte {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    border: 1px solid var(--color-primary-light);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    text-align: left;
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base),
        transform var(--transition-base);
}

a.karte:hover,
a.karte:focus-visible {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

/* Der Hinweis am Fuss war frueher der Verweis; er bleibt als Zeichen,
   wohin die Karte fuehrt, ohne selbst einer zu sein. */
.karte-hinweis {
    display: block;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

a.karte:hover .karte-hinweis {
    text-decoration: underline;
}

.karte > :first-child {
    margin-top: 0;
}

/* Der Verweis sitzt unten, damit die Karten trotz verschieden langer
   Texte auf einer Linie enden. */
.karte > :last-child {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--space-md);
}

.karte h3 {
    font-size: var(--font-size-xl);
    line-height: 1.2;
}

/* Der kleine Vorsatz traegt die Zeile, nicht die Aussage: er steht ueber
   ihr. Der Nachsatz bleibt in der Zeile der Aussage. */
.karte h3 small {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 400;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}

.karte h3 small:first-child {
    display: block;
    margin-bottom: var(--space-xs);
}

.karte h3::after {
    content: none;
}



/* ==========================================================================
   Stimmen — mehrere Rezensionen am Stueck
   ========================================================================== */

/* Untereinander, nicht nebeneinander: eine Stimme will gelesen werden,
   und nebeneinander gestellte Kaesten laden nicht dazu ein. */
.stimmen {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: var(--container-narrow);
    margin: var(--space-2xl) auto;
}