/* ==========================================================================
   KI CREW – Angebotsseite (Schulung & Workshop)

   Ergänzt base.css und definiert nur eigene .kc-angebot-*-Klassen. Geteilte
   Komponenten (.kc-hero, .kc-card, .kc-facts, .kc-checklist, .kc-termine,
   .kc-badge …) kommen vollständig aus base.css und werden hier nur dort
   feinjustiert, wo die Angebotsseite von der Grundform abweicht. Die
   Kopfsektion ist vollständig .kc-hero aus base.css.

   Aufbau
     1. Seite
     2. Inhaltsbereich und Sidebar
     3. Karten der Sidebar
     4. Terminkarte
     5. Zielgruppen-Karte
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Seite */

/*
 * Der Artikel fasst alle Sektionen zusammen. flow-root schließt die
 * Außenabstände ein, erzeugt aber keinen Scroll-Container – die sticky Sidebar
 * bleibt dadurch am Viewport ausgerichtet.
 */
.kc-angebot {
  display: flow-root;
}

/* --------------------------------------------- 2. Inhaltsbereich und Sidebar */

/* Die Sektion darf nicht beschnitten werden: ein Scroll- oder Clip-Kontext
   würde der sticky Sidebar den Halt am Viewport nehmen. */
.kc-angebot-content {
  overflow: visible;
}

.kc-angebot-content__grid {
  display: grid;
  gap: var(--kc-space-5);
}

.kc-angebot-content__main,
.kc-angebot-content__aside {
  min-width: 0;
}

.kc-angebot-content__title {
  margin: 0 0 var(--kc-space-2);
}

.kc-angebot-content__intro {
  display: grid;
  gap: var(--kc-space-2);
  margin-top: var(--kc-space-3);
}

.kc-angebot-content__text {
  margin: 0;
  max-width: 62ch;
}

.kc-angebot-content__prose {
  margin-top: var(--kc-space-3);
  max-width: 62ch;
}

.kc-angebot-content__checklist {
  margin-top: var(--kc-space-5);
}

.kc-angebot-aside {
  display: grid;
  gap: var(--kc-space-3);
  align-content: start;
}

@media (min-width: 1024px) {
  .kc-angebot-content__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--kc-space-6);
  }
}

/*
 * Die Sidebar klebt erst, wenn das Fenster hoch genug für Terminliste und
 * „Jetzt Platz sichern" ist. Auf flacheren Fenstern (Laptops um 800px) blieb
 * sonst eine Scrollbox mitten in der Seite übrig, in der die letzten Termine
 * und der Absende-Button verborgen waren. Dann fließt die Spalte lieber mit.
 */
@media (min-width: 1024px) and (min-height: 1040px) {
  .kc-angebot-aside {
    position: sticky;
    top: calc(var(--kc-header-offset) + var(--kc-space-3));
    /* Reine Notbremse für außergewöhnlich lange Terminlisten. */
    max-height: calc(100vh - var(--kc-header-offset) - var(--kc-space-5));
    max-height: calc(100dvh - var(--kc-header-offset) - var(--kc-space-5));
    overflow-y: auto;
    /* Platz für den Fokusring der Terminbuttons, ohne die Spalte zu verbreitern. */
    margin: -3px;
    padding: 3px;
  }
}

/* ------------------------------------------------- 3. Karten der Sidebar */

/* Fläche, Radius und Schatten liefert .kc-card – hier nur der Innenabstand. */
.kc-angebot-card {
  padding: var(--kc-space-3);
}

@media (min-width: 760px) {
  .kc-angebot-card {
    padding: var(--kc-space-4);
  }
}

.kc-angebot-card__head {
  display: flex;
  align-items: center;
  gap: var(--kc-space-2);
  margin-bottom: var(--kc-space-3);
}

.kc-angebot-card__icon {
  display: inline-flex;
  flex: none;
  color: var(--kc-black);
}

.kc-angebot-card__title {
  margin: 0;
}

.kc-angebot-card__action {
  margin-top: var(--kc-space-3);
}

.kc-angebot-card__note {
  margin: var(--kc-space-2) 0 0;
}

/* ----------------------------------------------------------- 4. Terminkarte */

/* Die Karte ist ein Flex-Container – die Liste behält ihre Inhaltshöhe. */
.kc-angebot-termine__list {
  flex: none;
}

/* Die Trennlinie sitzt auf der Zeile, damit sie auch unter dem letzten
   Termin steht; .kc-termine__item zeichnet deshalb keine eigene. */
.kc-angebot-termine__row {
  border-bottom: 1px solid var(--kc-line);
}

.kc-angebot-termine__item {
  border-bottom: 0;
  /* In der schmalen Karte etwas dichter als in der breiten Startseitenliste. */
  column-gap: var(--kc-space-2);
}

/* Feste Breite für den Wochentag: die Datumsspalte steht damit untereinander. */
.kc-angebot-termine__day {
  min-width: 2.4em;
}

.kc-angebot-termine__value {
  font-variant-numeric: tabular-nums;
}

.kc-angebot-termine .kc-termine__time {
  font-size: 14px;
}

/* Das Status-Badge steht rechts; wird die Zeile zu schmal, rutscht es
   rechtsbündig in die nächste Zeile. */
.kc-angebot-termine__status {
  display: flex;
  margin-left: auto;
}

/* Klickbare Zeilen: Cursor und Hover-Fläche kommen aus base.css
   ([data-kc-termin]), hier bekommt die Fläche nur weiche Ecken. */
.kc-angebot-termine__item--pick {
  border-radius: var(--kc-radius-tile);
}

/* Ausgebuchte Termine bleiben lesbar, treten aber zurück (CD: Grau, nicht Rot). */
.kc-angebot-termine__item--full,
.kc-angebot-termine__item--full .kc-termine__date {
  color: var(--kc-grey);
}

.kc-angebot-termine__empty {
  margin: 0;
}

/* ----------------------------------------------------- 5. Zielgruppen-Karte */

/* In der schmalen Karte einen Schritt kleiner als im Hauptbereich. */
.kc-angebot-audience .kc-text,
.kc-angebot-audience .kc-checklist__item {
  font-size: 15px;
  line-height: 1.55;
}

.kc-angebot-audience__text {
  margin: 0;
}

.kc-angebot-audience__list {
  margin-top: var(--kc-space-3);
  gap: var(--kc-space-2);
}

/* In dieser Karte steht der Haken ohne dunklen Kreis direkt vor dem Text. */
.kc-angebot-audience__list .kc-checklist__icon {
  width: auto;
  min-width: 0;
  height: auto;
  background: none;
  border-radius: 0;
  color: var(--kc-black);
}