/**
 * KSM Karten-Raster
 *
 * Versetzte Karten (Masonry) via CSS columns — kein JS.
 * Pro Karte ein Farbthema, das alle Farben über lokale Variablen steuert:
 *   --card-bg / --card-fg / --card-eyebrow / --card-text / --card-meta
 *   --card-divider / --card-btn-bg / --card-btn-fg / --card-btn-hover / --card-link
 *
 * Alle Stellschrauben zentral im .ksm-karten-raster-Block.
 */

.ksm-karten-raster {
    /* ===== zentrale Stellschrauben ===== */
    --ksm-cards-cols:   3;                                     /* Spalten (Desktop) */
    --ksm-cards-gap:    calc(var(--ksm-spacing-base) * 2);     /* 24px Abstand */
    --ksm-card-radius:  calc(var(--ksm-spacing-base) * 2.33);  /* ~28px Eckenradius */
    --ksm-card-pad:     calc(var(--ksm-spacing-base) * 2.33);  /* ~28px Innenabstand */

    column-count: var(--ksm-cards-cols);
    column-gap: var(--ksm-cards-gap);
}

/* JS-Masonry aktiv: Flex-Spalten, gefüllt in Quell-Reihenfolge (zeilenweise) */
.ksm-karten-raster.is-masonry-js {
    column-count: initial;
    display: flex;
    align-items: flex-start;
    gap: var(--ksm-cards-gap);
}

.ksm-karten-raster.is-masonry-js .ksm-karten-raster__col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ksm-cards-gap);
}

/* im JS-Modus übernimmt der Spalten-gap die Abstände */
.ksm-karten-raster.is-masonry-js .ksm-karten-card {
    margin: 0;
}

/* ===== Karte ===== */
.ksm-karten-card {
    /* Default-Theme-Variablen (für rot/coral/navy = helle Schrift auf Farbe) */
    --card-fg:          var(--ksm-color-white);
    --card-eyebrow:     rgba(var(--ksm-color-white), 0.6);
    --card-text:        rgba(var(--ksm-color-white), 0.9);
    --card-meta:        rgba(var(--ksm-color-white), 0.9);
    --card-divider:     rgba(var(--ksm-color-white), 0.22);
    --card-btn-bg:      rgba(var(--ksm-color-white), 1);
    --card-btn-fg:      rgba(var(--ksm-color-primary-dark), 1);
    --card-btn-hover:   rgba(var(--ksm-color-white), 1);   /* Border + Text bei Hover */
    --card-link:        rgba(var(--ksm-color-accent), 1);

    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--ksm-card-radius);
    margin: 0 0 var(--ksm-cards-gap);   /* vertikaler Abstand im Multicol */
    break-inside: avoid;                /* Karte nie über Spalten brechen */
    background: var(--card-bg);
    color: rgba(var(--card-fg), 1);
}

/* Farbthemen → Hintergrund */
.ksm-karten-card--red   { --card-bg: rgba(var(--ksm-color-primary), 1); }
.ksm-karten-card--coral { --card-bg: rgba(var(--ksm-color-accent), 1); }
.ksm-karten-card--navy  { --card-bg: rgba(var(--ksm-color-secondary-dark), 1); }

/* Typ „Veranstaltung" → dezenter Rahmen (Karte hebt sich vom hellen Hintergrund ab) */
.ksm-karten-card--type-event {
    border: 1px solid rgba(var(--ksm-color-text), 0.12);
}

/* Weiß-Theme → dunkle Schrift, coraler Button/Meta */
.ksm-karten-card--white {
    --card-bg:        rgba(var(--ksm-color-white), 1);
    --card-fg:        var(--ksm-color-secondary-dark);
    --card-eyebrow:   rgba(var(--ksm-color-text), 0.5);
    --card-text:      rgba(var(--ksm-color-text), 0.72);
    --card-meta:      rgba(var(--ksm-color-accent), 1);
    --card-divider:   rgba(var(--ksm-color-text), 0.12);
    --card-btn-bg:    rgba(var(--ksm-color-accent), 1);
    --card-btn-fg:    rgba(var(--ksm-color-white), 1);
    --card-btn-hover: rgba(var(--ksm-color-accent), 1);
    --card-link:      rgba(var(--ksm-color-accent), 1);
}

/* ===== Medienbereich (Bild oben) ===== */
.ksm-karten-card__media {
    overflow: hidden;
}

.ksm-karten-card__img {
    display: block;
    width: 100%;     /* volle Breite, Seitenverhältnis bleibt erhalten */
    height: auto;
}

/* ===== Body ===== */
.ksm-karten-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--ksm-spacing-md);
    padding: var(--ksm-card-pad);
    flex: 1 1 auto;
}

.ksm-karten-card__eyebrow {
    color: var(--card-eyebrow);
    font-family: var(--ksm-font-bold);
    font-size: var(--ksm-font-size-xs);
    font-weight: var(--ksm-font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ksm-karten-card .ksm-karten-card__title {
    margin: 0;
    color: rgba(var(--card-fg), 1);   /* immer Theme-Farbe, unabhängig vom Uncode-Kontext */
    font-family: var(--ksm-font-bold);
    font-weight: var(--ksm-font-weight-bold);
    font-size: var(--ksm-font-size-xl);
    line-height: 1.1;
    text-transform: uppercase;
}

.ksm-karten-card__text {
    margin: 0;
    color: var(--card-text);
    line-height: var(--ksm-line-height-normal);
}

/* ===== Meta-Zeilen (Ort / Datum / Uhrzeit) ===== */
.ksm-karten-card .ksm-karten-card__meta {
    list-style: none;
    margin: var(--ksm-spacing-md) 0 0;     /* Abstand Text → Linie */
    padding: var(--ksm-spacing-md) 0 0 0 !important;   /* Abstand Linie → Items; überschreibt .uncont ul */
    border-top: 1px solid var(--card-divider);
    display: flex;
    flex-direction: column;
    gap: var(--ksm-spacing-sm);
}

.ksm-karten-card .ksm-karten-card__meta-item {
    display: flex;
    align-items: center;
    gap: var(--ksm-spacing-sm);
    color: var(--card-meta);
    font-family: var(--ksm-font-bold);
    font-size: var(--ksm-font-size-xs) !important;   /* kleiner als Fließtext (base) — schlägt .uncont li */
    font-weight: var(--ksm-font-weight-semibold);
    line-height: var(--ksm-line-height-tight);
}

.ksm-karten-card__meta-icon {
    flex: none;
    width: 1.15em;                          /* skaliert mit der Meta-Schriftgröße */
    height: 1.15em;
}

/* ===== Actions ===== */
.ksm-karten-card__actions {
    margin-top: auto;                    /* CTA immer als letztes Element */
    padding-top: var(--ksm-spacing-lg);
}

/* ===== CTA — Button (Pill) ===== */
.ksm-karten-card__cta--button {
    display: inline-flex;
    align-items: center;
    gap: var(--ksm-spacing-sm);
    padding: var(--ksm-spacing-md) calc(var(--ksm-spacing-base) * 1.8);
    background: var(--card-btn-bg);
    border: 1px solid transparent;       /* Platzhalter → kein Layout-Shift */
    border-radius: var(--ksm-border-radius-pill);
    font-family: var(--ksm-font-bold-italic);
    font-style: italic;
    font-weight: var(--ksm-font-weight-bold);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--ksm-transition-fast), border-color var(--ksm-transition-fast), color var(--ksm-transition-fast);
}

.ksm-karten-card .ksm-karten-card__cta--button,
.ksm-karten-card .ksm-karten-card__cta--button:link,
.ksm-karten-card .ksm-karten-card__cta--button:visited,
.ksm-karten-card .ksm-karten-card__cta--button .ksm-karten-card__cta-label,
.ksm-karten-card .ksm-karten-card__cta--button .ksm-karten-card__cta-arrow {
    color: var(--card-btn-fg);
}

.ksm-karten-card__cta--button:hover,
.ksm-karten-card__cta--button:focus-visible {
    background: transparent;
    border-color: var(--card-btn-hover);
}

.ksm-karten-card .ksm-karten-card__cta--button:hover .ksm-karten-card__cta-label,
.ksm-karten-card .ksm-karten-card__cta--button:focus-visible .ksm-karten-card__cta-label,
.ksm-karten-card .ksm-karten-card__cta--button:hover .ksm-karten-card__cta-arrow,
.ksm-karten-card .ksm-karten-card__cta--button:focus-visible .ksm-karten-card__cta-arrow {
    color: var(--card-btn-hover);
}

/* ===== CTA — Text-Link (kursiv, ohne Button) ===== */
.ksm-karten-card__cta--link {
    display: inline-flex;
    align-items: center;
    gap: var(--ksm-spacing-sm);
    font-family: var(--ksm-font-bold-italic);
    font-style: italic;
    font-weight: var(--ksm-font-weight-bold);
    text-decoration: none;
}

.ksm-karten-card .ksm-karten-card__cta--link,
.ksm-karten-card .ksm-karten-card__cta--link:link,
.ksm-karten-card .ksm-karten-card__cta--link:visited,
.ksm-karten-card .ksm-karten-card__cta--link .ksm-karten-card__cta-label,
.ksm-karten-card .ksm-karten-card__cta--link .ksm-karten-card__cta-arrow {
    color: var(--card-link);
}

/* ===== CTA — Pfeil-Animation (beide Stile) ===== */
.ksm-karten-card__cta-arrow {
    transition: transform var(--ksm-transition-fast);
}

.ksm-karten-card__cta:hover .ksm-karten-card__cta-arrow,
.ksm-karten-card__cta:focus-visible .ksm-karten-card__cta-arrow {
    transform: translateX(3px);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 959px) {
    .ksm-karten-raster { --ksm-cards-cols: 2; }
}

@media (max-width: 599px) {
    .ksm-karten-raster { --ksm-cards-cols: 1; }
}