/*
 * STYRZ Seminare – Termin-Kacheln [styrz_termine]
 * Farben lassen sich im Child-Theme überschreiben, z. B.:
 *   .styrz-termine { --styrz-rahmen: #a9bd97; --styrz-akzent: #2bb38c; }
 */
.styrz-termine {
  --styrz-rahmen: #a9bd97;
  --styrz-akzent: var(--global-palette-btn-bg, #2bb38c);
  --styrz-akzent-text: var(--global-palette-btn, #ffffff);
  --styrz-text: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1.5rem 0 0;
  padding: 0;
}

.styrz-termine > [role="listitem"] {
  display: flex;
  flex: 0 1 17.5rem;
  margin: 0;
  padding: 0;
}

.styrz-termin {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 4px solid var(--styrz-rahmen);
  border-radius: 1.5rem;
  color: var(--styrz-text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.styrz-termine > .styrz-termin {
  flex: 0 1 17.5rem;
}

a.styrz-termin,
a.styrz-termin:hover,
a.styrz-termin:focus {
  color: var(--styrz-text);
  text-decoration: none;
}

.styrz-termin__titel {
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.styrz-termin__datum {
  margin-top: 1.75rem;
  font-size: 1.1rem;
}

/* Kachel „Auf Anfrage“: Fließtext statt Datum */
.styrz-termin__datum--text {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5;
}

.styrz-termine--anfrage > [role="listitem"] {
  flex-basis: 21rem;
}

/* Button im Stil von „Jetzt buchen“, immer unten bündig */
.styrz-termin__button {
  margin-top: auto;
  padding: 0.8em 1em;
  border-radius: 0.75rem;
  background: var(--styrz-akzent);
  color: var(--styrz-akzent-text);
  font-family: var(--global-heading-font-family, inherit);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: box-shadow 0.15s;
}

/* Mindestabstand zwischen Datum und Button */
.styrz-termin--link .styrz-termin__datum {
  margin-bottom: 1.5rem;
}

a.styrz-termin--link:hover,
a.styrz-termin--link:focus-visible {
  border-color: var(--styrz-akzent);
}

a.styrz-termin--link:hover .styrz-termin__button,
a.styrz-termin--link:focus-visible .styrz-termin__button {
  box-shadow: 0 0 1.25rem color-mix(in srgb, var(--styrz-akzent) 55%, transparent);
}

a.styrz-termin--link:focus-visible {
  outline: 2px solid var(--styrz-text);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .styrz-termine > [role="listitem"],
  .styrz-termine > .styrz-termin {
    flex-basis: 100%;
  }
}