/* Grimm Kurse – Frontend (nutzt die --grimm-* Tokens des Child-Themes) */
.grimm-kurse {
    --gk-primary: var(--grimm-primary, #4a9e2a);
    --gk-radius: var(--grimm-radius-2xl, 24px);
    --gk-fg: var(--grimm-foreground, #0e2a18);
}

.grimm-kurse__empty {
    grid-column: 1 / -1; /* Nachricht über volle Breite, nicht im ersten Karten-Slot */
    max-width: 60ch;     /* lesbare Zeilenlänge statt schmaler Spalte / Übermaß */
    margin: 0;
    color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.6));
    font-style: italic;
}

/* Karten-Layout */
.grimm-kurse--karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--grimm-gap-xl, 2rem);
}

.grimm-kurse__card {
    background: var(--grimm-white, #fff);
    border: 1px solid rgba(74, 158, 42, 0.12);
    border-radius: var(--gk-radius);
    padding: 1.75rem;
    box-shadow: var(--grimm-shadow-md, 0 4px 16px rgba(74, 158, 42, 0.1));
    display: flex;
    flex-direction: column;
    transition: transform var(--grimm-duration, 200ms) var(--grimm-ease, ease),
                box-shadow var(--grimm-duration, 200ms) var(--grimm-ease, ease);
}
.grimm-kurse--karten .grimm-kurse__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--grimm-shadow-lg, 0 10px 40px -10px rgba(74, 158, 42, 0.15));
}

.grimm-kurse__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.grimm-kurse__cat {
    font-size: var(--grimm-font-size-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gk-primary);
}
.grimm-kurse__status {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--grimm-radius-full, 9999px);
    white-space: nowrap;
}
.grimm-kurse__status--geplant      { background: rgba(74, 158, 42, 0.12); color: var(--grimm-primary-dark, #3a7d20); }
.grimm-kurse__status--laeuft       { background: rgba(242, 183, 5, 0.18); color: #8a6d00; }
.grimm-kurse__status--ausgebucht   { background: rgba(176, 0, 32, 0.10); color: #b00020; }
.grimm-kurse__status--abgeschlossen{ background: rgba(14, 42, 24, 0.08); color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.6)); }

.grimm-kurse__title {
    font-size: var(--grimm-font-size-xl, 1.25rem);
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--gk-fg);
}
.grimm-kurse__desc {
    color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.7));
    margin: 0 0 1rem;
    font-size: var(--grimm-font-size-sm, 0.9rem);
}

.grimm-kurse__meta {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: var(--grimm-font-size-sm, 0.9rem);
}
.grimm-kurse__meta-label {
    color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.6));
}
.grimm-kurse__meta-value {
    font-weight: 600;
    color: var(--gk-fg);
}

.grimm-kurse__termine {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(74, 158, 42, 0.12);
}
.grimm-kurse__termine-label {
    display: block;
    font-size: var(--grimm-font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gk-primary);
    margin-bottom: 0.5rem;
}
.grimm-kurse__termine-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.grimm-kurse__termine-list li {
    font-size: var(--grimm-font-size-sm, 0.9rem);
    color: var(--gk-fg);
}
.grimm-kurse__termine-more {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: var(--grimm-font-size-xs, 0.75rem);
    color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.6));
}

.grimm-kurse__anmeldung {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.grimm-kurse__btn {
    display: inline-block;
    text-align: center;
    background: var(--gk-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 0.6rem 1.2rem;
    border-radius: var(--grimm-radius-full, 9999px);
    transition: background var(--grimm-duration, 200ms) var(--grimm-ease, ease);
}
.grimm-kurse__btn:hover {
    background: var(--grimm-primary-dark, #3a7d20);
}
.grimm-kurse__anmeldung-hint {
    font-size: var(--grimm-font-size-sm, 0.85rem);
    color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.6));
}

/* Listen-Layout */
.grimm-kurse--liste {
    display: flex;
    flex-direction: column;
    gap: var(--grimm-gap-lg, 1.5rem);
}
.grimm-kurse--liste .grimm-kurse__card {
    padding: 1.5rem 1.75rem;
}
.grimm-kurse--liste .grimm-kurse__termine {
    margin-top: 1rem;
}

/* Ausgebucht-Zustand (statt Anmelde-Button) */
.grimm-kurse__btn--disabled {
  display: inline-block;
  text-align: center;
  background: rgba(14, 42, 24, 0.10);
  color: var(--grimm-text-secondary, rgba(14, 42, 24, 0.55));
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: var(--grimm-radius-full, 9999px);
  cursor: not-allowed;
}

/* Ausrichtung: Widget-Inhalt (Leer-Text + Karten) bündig zum übrigen
   Seiteninhalt. Ohne eigenen Container saß der Inhalt am Viewport-Rand (0),
   während die Content-Sections eingerückt sind. Zentrierter Container + Einzug
   wie bei den Content-Sections, responsiv. */
.grimm-kurse {
  /* Einzug exakt wie die Content-Sections: Section-Padding (1rem mobil / 2rem
     ab 768px) + Container-Padding (var(--grimm-container-padding)). Über
     dieselben Tokens statt fester px-Werte -> deckungsgleich bei jeder Auflösung
     und Root-Schriftgröße. max-width inkl. Padding, damit das Inhalts-Maximum
     wie bei den Content-Sections bei --grimm-container-width liegt und der
     Zentrier-Punkt erst oberhalb der wichtigen Auflösungen greift. */
  --gk-section-pad: 1rem; /* = .grimm-content-section Section-Padding (mobil) */
  --gk-inset: calc(var(--gk-section-pad) + var(--grimm-container-padding, 2rem));
  /* max-width = Inhaltsbreite + 2·Section-Padding, weil die Content-Section ihr
     Section-Padding AUSSERHALB des zentrierten Containers hat. So liegt der
     Zentrier-Punkt identisch -> auch auf Ultrawide (>1458px) deckungsgleich. */
  max-width: calc(var(--grimm-container-width, 1400px) + var(--gk-section-pad) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gk-inset);
  padding-right: var(--gk-inset);
}
@media (min-width: 768px) {
  .grimm-kurse {
    --gk-section-pad: 2rem; /* = .grimm-content-section Section-Padding (ab 768px) */
  }
}