.kurs-archive-container {
  display: flex;
  gap: 3em;
}

/* ==== FILTER-GROUPS MIT LABELS ==== */
.kurs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-bottom: 1em;
  align-items: flex-end; /* Labels und Selects unten bündig */
}

.filter-group {
  display: flex;
  flex-direction: column;
  width: 200px; /* feste Breite für gleiche Größe */
}

.filter-group label {
  font-size: 0.9rem;
  margin-bottom: 0.3em;
  color: #333;
}

.filter-group select {
  width: 100%;
  padding: 0.4em 2.2em 0.4em 0.5em;
  font-size: 0.85rem;
  background-color: #f2f5f7;
  border: 1px solid #ccc;
  border-radius: 6px;
  appearance: none;
  background-image:
    url("data:image/svg+xml,%3Csvg%20width%3D'14'%20height%3D'10'%20xmlns%3D'http://www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M1%203l6%206%206-6'%20stroke%3D'%23666'%20stroke-width%3D'2'%20fill%3D'none'%20fill-rule%3D'evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8em center;
  background-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filter-group select:focus {
  border-color: #0077cc;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,119,204,0.15);
}

/* ==== RESET-GROUP & CHIPS ALS EIGENE ZEILE ==== */
.filter-group--reset {
  /* volle Breite und in neuer Zeile */
  width: 100%;
  display: flex;
  align-items: left;
  gap: 0.5em;
  margin-top: 0.5em;   /* Abstand nach oben */
  flex-wrap: wrap;     /* falls viele Chips */
}

/* Die Buttons (die du ja jetzt eh weglassen willst) können so versteckt bleiben */
.filter-group--reset button#filter-reset {
  display: none;
}

/* Die aktive-Filter-Box */
.aktive-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: flex-start;  /* ganz links */
}

/* Einzelne Chips */
.aktive-filter .filter-chip {
  display: inline-flex;
  align-items: center;
  background: #e0f2ff;
  color: #0077cc;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;              /* ganze Box klickbar */
}

/* Entferne das X, wenn nicht gebraucht, oder style es hier: */
.aktive-filter .filter-chip .remove-chip {
  margin-left: 0.3em;
}


/* ==== GRID & TILES ==== */
.kurs-archive-grid { flex: 1; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5em;
}

.kurs-tile {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

.kurs-tile:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.kurs-tile img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.kurs-tile h3 {
  font-size: 1.3em;
  margin: 1em 0.5em 0 0.5em;
  font-weight: 700;
}

.kurs-kategorie {
  font-size: 17px;
  font-weight: 700;
  color: #666;
  margin: 0.5em 0.5em 0.4em 0.7em;
}

.kurs-excerpt {
  margin: 0 0.5em 0 0.7em;
  line-height: 1.3;
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.preis {
  font-size: 23px;
  font-weight: 700;
  line-height: 0.9em;
  color: #000;
  margin: 0.8em 0.5em 0 0.5em;
}

.preis-hinweis {
  font-size: 12px;
  font-weight: 400;
  color: #555;
  display: inline-block;
  margin-top: 0;
}

.naechster-termin {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0.5em 0.7em 0 0.7em;
}

.naechster-termin strong.has-termin {
  color: #009323; /* Grün für echte Termine */
}

.naechster-termin strong.is-anfrage {
  color: #777;    /* Grau für „Auf Anfrage“ */
}

.kurs-tile .button {
  display: block;
  text-align: center;
  margin: 1em 0.5em;
  padding: 0.8em;
  background: #0077cc;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
}

.kurs-tile .button:hover {
  background: #005fa3;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
  .kurs-filter {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group,
  .filter-group--reset {
    width: 100%;
  }
  .filter-group--reset {
    flex-direction: row;
    align-items: center;
  }
  .filter-group--reset button#filter-reset {
    width: auto;
    margin-left: 1em;
  }
  .aktive-filter {
    justify-content: flex-start;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}
.kurs-tile {
  position: relative;
  overflow: hidden;
}

.promo-ribbon {
  position: absolute;
  top: 12px;
  left: -40px;
  width: 160px;
  background: #d32f2f;
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-size: 0.75rem;
  font-weight: bold;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 10;
  pointer-events: none;
}

/* Band mit Text */
.promo-ribbon::before {
content: "AKTION";
/* position: absolute; */
/* top: 0.3em; */
/* left: -2.2em; */
transform: rotate(-45deg);
/* background: #e3342f; */
color: white;
font-size: 0.8rem;
font-weight: bold;
padding-left: 0.2em 1.4em;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
pointer-events: none;
letter-spacing: 0.05em;
}