/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 30 2026 | 15:30:19 */
/* =====================================================================
   21-page-kurse  —  Kurse-Übersicht mit Altersfilter
   Gehört zu: Block "Individuelles HTML" (.kurse) + JS 21-kurse-filter
   ===================================================================== */

/* ---------- Komponenten-Variablen (Fallbacks, falls Token-Namen abweichen) */
.kurse {
  --kurse-orange: var(--orange-500, #FF9401);   /* nur Interaktives        */
  --kurse-teal:   var(--accent-teal, #3F8F7D);  /* nur Caveat-Zeile        */
  --kurse-text:   #1F1D2B;
  --kurse-text-2: #5C5A68;
  --kurse-linie:  #E4E1EB;
  --kurse-leer:   #EEEBF3;                      /* ungenutzter Skalenteil  */

  --kurse-blau:   #2090F2;   /* 1–3 Jahre  */
  --kurse-gelb:   #FFCB31;   /* 3–5 Jahre  */
  --kurse-gruen:  #6CC66F;   /* 5–7 Jahre  */
  --kurse-lila:   #845CCE;   /* 7+ Jahre   */

  /* Skala 0–13 Jahre (156 Monate): Grenzen bei 36 / 60 / 84 Monaten */
  --kurse-skala: linear-gradient(90deg,
      var(--kurse-blau)  0 23.08%,
      var(--kurse-gelb)  23.08% 38.46%,
      var(--kurse-gruen) 38.46% 53.85%,
      var(--kurse-lila)  53.85% 100%);

  --kurse-font-kopf: 'Montserrat', system-ui, sans-serif;
  --kurse-font-text: 'Manrope', system-ui, sans-serif;

  font-family: var(--kurse-font-text) !important;
  color: var(--kurse-text) !important;
}

/* Kadence/Theme dürfen [hidden] nicht überschreiben */
.kurse [hidden] { display: none !important; }


/* ---------- Filter ------------------------------------------------------ */
.kurse-filter {
  margin: 0 0 clamp(36px, 5vw, 56px);
}

.kurse .kurse-filter__frage {
  margin: 0 0 12px !important;
  font-family: 'Caveat', cursive !important;
  font-size: clamp(28px, 3.4vw, 36px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: var(--kurse-teal) !important;
}

.kurse-filter__tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Kachel-Farbe = Altersband (unterer Rand) */
.kurse-filter__tile[data-band="alle"]  { --band: #D6D2E0; }
.kurse-filter__tile[data-band="blau"]  { --band: var(--kurse-blau); }
.kurse-filter__tile[data-band="gelb"]  { --band: var(--kurse-gelb); }
.kurse-filter__tile[data-band="gruen"] { --band: var(--kurse-gruen); }
.kurse-filter__tile[data-band="lila"]  { --band: var(--kurse-lila); }

.kurse .kurse-filter__tile {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-width: 52px;
  height: 52px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--kurse-linie) !important;
  border-bottom: 5px solid var(--band) !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--kurse-text) !important;
  font-family: var(--kurse-font-kopf) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  cursor: pointer;
}

.kurse .kurse-filter__tile:hover {
  border-color: var(--kurse-orange) !important;
  border-bottom-color: var(--band) !important;
}

.kurse .kurse-filter__tile[aria-pressed="true"] {
  background: var(--kurse-orange) !important;
  border-color: var(--kurse-orange) !important;
  border-bottom-color: var(--band) !important;
}

.kurse .kurse-filter__tile:focus-visible {
  outline: 3px solid var(--kurse-orange) !important;
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .kurse-filter__tiles { gap: 5px; }
  .kurse .kurse-filter__tile {
    min-width: 44px;
    height: 46px;
    padding: 0 10px !important;
    font-size: 16px !important;
  }
}

.kurse .kurse-filter__ergebnis {
  margin: 14px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--kurse-text-2) !important;
}

/* ---------- Seitentitel (H1-Block braucht die Klasse "kurse-titel") ----- */
.kurse-titel {
  margin-top: clamp(24px, 5vw, 48px) !important;
}

/* ---------- Kategorien -------------------------------------------------- */
.kurse-kat + .kurse-kat {
  margin-top: clamp(36px, 5vw, 56px);
}

.kurse-kat__kopf {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 16px;
}

.kurse .kurse-kat__titel {
  margin: 0 !important;
  font-family: var(--kurse-font-kopf) !important;
  font-size: clamp(22px, 2.6vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--kurse-text) !important;
}

.kurse .kurse-kat__anzahl {
  font-size: 15px !important;
  color: var(--kurse-text-2) !important;
}

.kurse .kurse-kat__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}


/* ---------- Kurskarte --------------------------------------------------- */
.kurse .kurse-karte {
  margin: 0 !important;
  padding: 0 !important;
}

.kurse .kurse-karte::before,
.kurse .kurse-karte::marker { content: none !important; }

.kurse .kurse-karte__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  box-sizing: border-box;
  padding: 18px 18px 16px;
  border: 1.5px solid var(--kurse-linie);
  border-radius: 14px;
  background: #fff;
  color: var(--kurse-text) !important;
  text-decoration: none !important;
}

.kurse .kurse-karte__link:hover {
  border-color: var(--kurse-orange);
}

.kurse .kurse-karte__link:focus-visible {
  outline: 3px solid var(--kurse-orange);
  outline-offset: 2px;
}

.kurse .kurse-karte__name {
  font-family: var(--kurse-font-kopf) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--kurse-text) !important;
}

.kurse .kurse-karte__alter {
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--kurse-text-2) !important;
}

/* Kleiner Hinweis auf der Karte, z. B. "Auch für Erwachsene" */
.kurse .kurse-karte__hinweis {
  font-family: var(--kurse-font-text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--text-faint, #8C8898) !important;
}

/* Wort-Kachel ("Erwachsene") darf breiter werden */
.kurse .kurse-filter__tile--wort {
  padding: 0 16px !important;
  font-size: 16px !important;
}

/* Altersskala: ganze Farbskala, außerhalb des Kursalters abgedeckt.
   --a / --b werden per JS aus data-alter gesetzt. */
.kurse-karte__skala {
  position: relative;
  display: block;
  height: 14px;
  margin-top: auto;           /* Skala + Link bündig am Kartenende */
  padding-top: 6px;
}

.kurse-karte__band {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--kurse-skala);
}

.kurse-karte__band::before,
.kurse-karte__band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--kurse-leer);
}
.kurse-karte__band::before { left: 0;  width: var(--a, 0%); }
.kurse-karte__band::after  { right: 0; width: calc(100% - var(--b, 100%)); }

/* Markierung des gewählten Alters unter jeder Skala */
.kurse.hat-auswahl .kurse-karte__skala::after {
  content: "";
  position: absolute;
  top: 17px;
  left: var(--sa);
  width: calc(var(--sb) - var(--sa));
  min-width: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--kurse-text);
}

/* Ohne JS bzw. ohne Altersangabe: keine Skala */
.kurse:not(.ist-bereit) .kurse-karte__skala,
.kurse .kurse-karte:not([data-alter]) .kurse-karte__skala { display: none; }

.kurse .kurse-karte:not([data-alter]) .kurse-karte__mehr { margin-top: auto; }

.kurse .kurse-karte__mehr {
  margin-top: 10px;
  align-self: flex-start;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--kurse-text) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--kurse-orange) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px;
}


/* ---------- Leer-Zustand ------------------------------------------------ */
.kurse .kurse-leer {
  margin: 0 !important;
  padding: 20px 22px;
  border: 1.5px dashed var(--kurse-linie);
  border-radius: 14px;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--kurse-text-2) !important;
}

.kurse .kurse-leer a {
  color: var(--kurse-text) !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-color: var(--kurse-orange) !important;
  text-decoration-thickness: 2px !important;
}


/* ---------- Bewegung nur, wenn erwünscht -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .kurse .kurse-filter__tile,
  .kurse .kurse-karte__link {
    transition: background-color .15s ease, border-color .15s ease;
  }
  .kurse-karte__band::before,
  .kurse-karte__band::after,
  .kurse.hat-auswahl .kurse-karte__skala::after {
    transition: left .2s ease, width .2s ease;
  }
}