/* ==========================================================================
   KI CREW – Startseite.
   Nur seitenspezifisches Layout. Tokens, Typografie, Karten, Buttons, Badges,
   Grids, Sections, Terminlisten und der Grundstil der Bauchbinde (.kc-marquee)
   kommen aus base.css.

   Gliederung
     1. Gemeinsame Bausteine
     2. Hero
     3. Vertrauensbereich mit Tool-Bauchbinde
     4. Highlight-Blöcke (Workshops, Schulungen)
     5. Terminübersicht im Schulungs-Block
     6. Produkt-Karten
     7. Kundenstimmen
     8. CREW Insights
     9. Breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gemeinsame Bausteine der Startseiten-Sektionen
   -------------------------------------------------------------------------- */

/*
 * Der Sektionskopf trägt nur Kicker, Überschrift und Balken – der Lead steht
 * daneben mit eigener Breite. Eine Begrenzung hier bräche allein die Überschrift
 * um; sie läuft deshalb über die Containerbreite und steht auf großen Schirmen
 * in einer Zeile. Auf schmalen Fenstern bricht sie weiterhin von selbst.
 */
.kc-home-head {
  max-width: none;
}

.kc-home-head .kc-rule {
  margin-top: var(--kc-space-3);
}

/* Abschluss-Button einer Sektion – Produkte und Kundenstimmen teilen ihn sich. */
.kc-home-action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  margin-top: var(--kc-space-5);
}

/* --------------------------------------------------------------------------
   2. Hero – zweispaltig, Text links, Foto rechts
   -------------------------------------------------------------------------- */

.kc-home-hero {
  padding-top: var(--kc-space-6);
  /* Das Foto läuft rechts aus dem Raster heraus – hier abschneiden, damit keine
     horizontale Scrollbar entsteht (wie beim Angebots-Hero). */
  overflow-x: hidden;
}

@supports (overflow: clip) {
  .kc-home-hero {
    overflow-x: clip;
  }
}

/*
 * Zwei gleich breite Spalten ohne Abstand: die Kante zwischen ihnen liegt damit
 * exakt in der Fenstermitte – darauf stützen sich die 50vw des Bildes. Unter
 * 980px legt base.css .kc-split auf eine Spalte um, dann greifen die Regeln im
 * Breakpoint-Abschnitt.
 */
.kc-home-hero__grid {
  column-gap: 0;
  align-items: center;
}

.kc-home-hero__intro {
  padding-right: var(--kc-space-6);
}

/* Der Container ist zentriert, seine Mitte ist die Fenstermitte: 50vw ab der
   Spaltenkante enden genau am rechten Fensterrand (Konzept §5.7, Briefing
   „Bild über die volle Breite"). */
.kc-home-hero__media {
  width: 50vw;
}

/*
 * Das Bild behält seine 16:9 (Konzept §8.1) und wird nicht auf die Höhe der
 * Textspalte gezogen – das gelieferte Foto ist 808 px breit und würde dabei
 * sichtbar weich. Randabfallend heißt ohne Radius: eine Kachel mit runder Ecke,
 * die rechts abgeschnitten ist, wirkt wie ein Fehler.
 */
.kc-home-hero__img {
  border-radius: 0;
}

.kc-home-hero__square {
  align-self: flex-start;
  margin-bottom: var(--kc-space-1);
}

/*
 * Auftaktzeile „building the next _" unter der H1 (Konzept §8.1). Sie ist ein
 * Kundenwunsch, aber nicht die Hauptaussage: eine Stufe kleiner als die
 * Überschrift, damit nicht zwei Headlines gleichen Rangs übereinander stehen.
 * Der Stapel setzt den Abstand, deshalb keine eigenen Außenabstände.
 */
.kc-home-hero__typing {
  margin: 0;
}

.kc-typing {
  font-family: var(--kc-font-head);
  font-size: var(--kc-size-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--kc-fg);
}

/*
 * Der Platz für die Zeile steht fest, bevor das erste Wort getippt ist: die
 * animierte Zeile und der Maßhalter (hero.php) liegen als Stapel in derselben
 * Rasterzelle, und eine Zelle ist so hoch wie ihr höchstes Kind. Der Maßhalter
 * enthält jedes Wort der Liste einmal, ist also immer so hoch wie der längste
 * Satz – die Animation zeigt immer nur eines der Wörter und kann die Höhe damit
 * nicht mehr bestimmen. Deshalb keine Zeilenzahl im CSS: die Reserve kommt aus
 * demselben Inhalt, der auch animiert wird, und stimmt darum auf jeder Breite,
 * bei jeder Schriftgröße und für jede künftige Wortliste.
 *
 * minmax(0, 1fr) statt auto: die Spalte darf nicht auf die Mindestbreite der
 * nicht umbrechenden Wörter wachsen, sonst läuft die Zeile aus dem Container.
 * align-items: start hält die sichtbare Zeile oben, der Vorspann steht damit
 * ruhig und nur das Wort bewegt sich.
 */
.kc-typing__stage,
.kc-typing__sizer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.kc-typing__stage > *,
.kc-typing__sizer > * {
  grid-area: 1 / 1;
}

/*
 * visibility: hidden, nicht display: none – der Maßhalter soll unsichtbar sein
 * und trotzdem Platz belegen. Für Screenreader ist er per aria-hidden weg.
 */
.kc-typing__sizer {
  visibility: hidden;
}

/*
 * Wort und Unterstrich bleiben zusammen: fällt ein Umbruch, dann vor dem Wort
 * und nie zwischen Wort und Unterstrich.
 */
.kc-typing__tail {
  white-space: nowrap;
}

.kc-typing__word {
  color: var(--kc-accent);
}

/*
 * Der Unterstrich steht dauerhaft – er blinkt nur in der Pause zwischen zwei
 * Wörtern, dann trägt die Zeile .kc-typing--blink (main.js, Modul 8). Ohne
 * feste Breite, damit die Zeile beim Umschalten nicht springt.
 */
.kc-typing__caret {
  display: inline-block;
  margin-left: .06em;
  color: var(--kc-accent);
}

.kc-typing--blink [data-kc-typing] .kc-typing__caret {
  animation: kc-caret-blink 1s step-end infinite;
}

@keyframes kc-caret-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

/*
 * Bewegungsreduktion: main.js startet die Animation dann gar nicht, der
 * Unterstrich muss aber sichtbar bleiben. Die globale Regel in base.css kürzt
 * jede Animation auf 0,01 ms – das würde ihn auf dem letzten Keyframe
 * (opacity: 0) einfrieren.
 */
@media (prefers-reduced-motion: reduce) {
  .kc-typing--blink [data-kc-typing] .kc-typing__caret {
    animation: none;
    opacity: 1;
  }
}

.kc-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  margin-top: var(--kc-space-2);
}

/*
 * Key-Facts stehen in einer Zeile mit drei gleich breiten Spalten. Der Stapel
 * (.kc-stack) stellt seine Kinder nicht auf volle Breite, deshalb align-self.
 */
.kc-home-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kc-space-3);
  align-self: stretch;
  margin-top: var(--kc-space-4);
  padding-top: var(--kc-space-4);
  border-top: 1px solid var(--kc-fg-line);
}

/* --------------------------------------------------------------------------
   3. Vertrauensbereich – Claim und Tool-Bauchbinde
   -------------------------------------------------------------------------- */

.kc-home-trust__claim {
  max-width: 48ch;
  margin: 0 auto;
}

/* Nur die Einbettung; Animation, Maskenkanten und Logo-Maße stehen in base.css. */
.kc-home-trust__marquee {
  margin-top: var(--kc-space-5);
}

/* --------------------------------------------------------------------------
   4. Highlight-Blöcke – je Bereich EIN Block, kein Kachelraster (SPEC 12.2)
   -------------------------------------------------------------------------- */

/*
 * Beide Blöcke sind gleich gebaut und stehen im .kc-container – ihr Inhalt hält
 * damit dieselbe linke Kante wie Hero, Produkte und Insights. Die Tonalität
 * liefert die Sektion: der Workshop-Block steht auf Weiß, der Schulungs-Block
 * auf einem Card-Grau-Band über die volle Fensterbreite (.kc-section--card, wie
 * der Vertrauensbereich). Hier steht nur der Rhythmus innerhalb des Blocks.
 */
.kc-home-highlight__head {
  max-width: none;
}

.kc-home-highlight__lead {
  max-width: 84ch;
  margin: 0;
}

/*
 * Die vier W-Fragen stehen als .kc-colset im Block – Spalten und Trennlinien
 * inklusive Umbruchverhalten liefert base.css. Hier nur der Abstand zum Lead.
 */
.kc-home-highlight__wfragen {
  margin-top: var(--kc-space-5);
  padding-top: var(--kc-space-4);
  border-top: 1px solid var(--kc-fg-line);
}

/* Das Icon sitzt direkt auf dem .kc-icon-Container aus base.css. */
.kc-home-wfrage__icon {
  margin-bottom: var(--kc-space-2);
  color: var(--kc-accent);
}

.kc-home-wfrage__q {
  margin: 0 0 var(--kc-space-1);
}

.kc-home-wfrage__a {
  margin: 0;
}

/*
 * Impressionsstreifen: drei gleich breite Kacheln auf der Textbreite des Blocks.
 * Radius und Seitenverhältnis kommen von .kc-media (CD 5.3: Bild-Kacheln im
 * Raster 12–16 px), der Abstand ist der Rasterabstand aus CD 5.7.
 */
.kc-home-highlight__impressions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--kc-space-3);
  margin-top: var(--kc-space-5);
}

.kc-home-highlight__termine {
  margin-top: var(--kc-space-5);
}

.kc-home-highlight__action {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  margin-top: var(--kc-space-5);
}

/* --------------------------------------------------------------------------
   5. Terminübersicht im Schulungs-Block
   -------------------------------------------------------------------------- */

/*
 * Spalten, Zeilenaufbau und Umbrüche liefert .kc-termin-list aus base.css –
 * dieselbe Tabelle steht auf den Übersichtsseiten. Hier bleibt nur ihre
 * Überschrift im Highlight-Block.
 */
.kc-home-termine__title {
  margin: 0 0 var(--kc-space-3);
}

/*
 * Die Spurbreiten trägt die Liste, jede Zeile teilt sie sich per `subgrid` –
 * so stehen die Spalten aller Zeilen bündig, statt dass jede Zeile für sich
 * rechnet und Status- und Aktionsspalte ausfransen.
 *
 * Die sechs Spalten sind inhaltsbreit (`auto`); `justify-content: space-between`
 * verteilt den Rest der Zeilenbreite zu gleichen Teilen zwischen sie. So sitzt
 * Datum bündig links, der Button bündig rechts und die Spalten dazwischen in
 * gleichmäßigen Abständen – ohne den leeren Block, den eine einzelne fr-Spur
 * hinterlässt.
 */
.kc-home-termine__list {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  justify-content: space-between;
}

.kc-home-termine__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas: "date time angebot ort status action";
  align-items: center;
}

/*
 * Die Datumsspalte bleibt inhaltsbreit; die base.css-Mindestbreite würde die
 * gleichmäßige Verteilung verzerren.
 */
.kc-home-termine__list .kc-termine__date {
  min-width: 0;
}

.kc-home-termine__row:last-child {
  border-bottom: 0;
}

.kc-home-termine__row .kc-termine__date {
  grid-area: date;
}

.kc-home-termine__row .kc-termine__time {
  grid-area: time;
}

.kc-home-termine__angebot {
  grid-area: angebot;
  font-family: var(--kc-font-head);
  font-weight: 700;
}

.kc-home-termine__ort {
  grid-area: ort;
  font-size: var(--kc-size-small);
  color: var(--kc-fg-muted);
}

.kc-home-termine__status {
  grid-area: status;
  justify-self: end;
}

.kc-home-termine__row .kc-termine__action {
  grid-area: action;
  justify-content: flex-end;
  min-width: 150px;
}

.kc-home-termine__btn {
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Produkt-Karten
   -------------------------------------------------------------------------- */

.kc-home-cards {
  margin-top: var(--kc-space-6);
}

.kc-home-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Bildfläche sitzt randlos oben in der Karte – die Kartenrundung schneidet sie zu. */
.kc-home-card__media {
  margin: 0;
  border-radius: 0;
}

.kc-home-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--kc-space-2);
}

.kc-home-card__footer {
  margin-top: auto;
  padding-top: var(--kc-space-2);
}

/* --------------------------------------------------------------------------
   7. Kundenstimmen
   -------------------------------------------------------------------------- */

/*
 * Logo und Zitat stehen nebeneinander, die Namenszeile darunter am Kartenfuß.
 * Die zweite Rasterzeile ist 1fr hoch: dadurch sitzen die Namenszeilen aller
 * Karten einer Reihe auf einer Linie, gleich wie lang das Zitat darüber ist.
 *
 * Breite und Höhe der Logofläche sind hier lokal gesetzt, weil sie zu keinem
 * globalen Token gehören – sie beschreiben nur diese Karte.
 */
.kc-home-stimmen {
  --kc-stimme-logo-width: 104px;
  --kc-stimme-logo-height: 48px;
}

.kc-home-stimmen__grid {
  margin-top: var(--kc-space-6);
}

.kc-stimme__body {
  display: grid;
  grid-template-columns: var(--kc-stimme-logo-width) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--kc-space-3);
  row-gap: var(--kc-space-3);
}

.kc-stimme__logo {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

/* Logos sind unterschiedlich proportioniert – begrenzt wird die Höhe, nie verzerrt. */
.kc-stimme__logo-img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: var(--kc-stimme-logo-height);
  object-fit: contain;
  object-position: left top;
}

/* Ohne Logodatei steht der Unternehmensname als Wortmarke an derselben Stelle. */
.kc-stimme__logo-text {
  font-family: var(--kc-font-head);
  font-weight: 700;
  font-size: var(--kc-size-small);
  line-height: 1.25;
  color: var(--kc-fg);
}

/* Zitat eine Stufe kleiner als der Grundstil der Komponente – es steht in einer Karte. */
.kc-stimme__quote {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--kc-size-h4);
}

.kc-stimme__quote p {
  margin: 0;
}

.kc-stimme__person {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-self: end;
  margin: 0;
}

.kc-stimme__name {
  font-weight: 700;
}

.kc-stimme__role {
  font-size: var(--kc-size-small);
  color: var(--kc-fg-muted);
}

/* --------------------------------------------------------------------------
   8. CREW Insights – Bento-Raster
   -------------------------------------------------------------------------- */

/*
 * Vier Spuren tragen drei Rollen: die große Karte nimmt links zwei Spalten und
 * beide Reihen, die zwei Stapelkarten je zwei Spalten rechts daneben, die vier
 * Kacheln je eine Spur in der unteren Reihe. Die Reihenhöhe gibt die große
 * Karte über ihre Mindesthöhe vor.
 *
 * Maße und Verlauf stehen lokal: sie beschreiben nur dieses Raster und gehören
 * zu keinem globalen Token.
 */
.kc-bento {
  --kc-bento-hero-min: 420px;
  --kc-bento-thumb: 152px;
  --kc-bento-scrim: linear-gradient(
    to top,
    rgba(10, 10, 10, .94) 0%,
    rgba(10, 10, 10, .78) 32%,
    rgba(10, 10, 10, .34) 64%,
    rgba(10, 10, 10, .12) 100%
  );

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kc-space-3);
  margin-top: var(--kc-space-6);
}

.kc-bento .kc-card__meta {
  margin: 0;
}

/* Der Lesen-Link sitzt am Fuß der Karte, gleich wie hoch der Text darüber ist. */
.kc-bento__action {
  margin-top: auto;
  padding-top: var(--kc-space-2);
}

/* Große Karte links */
.kc-bento__hero {
  grid-column: span 2;
  grid-row: span 2;
  position: relative;
  min-height: var(--kc-bento-hero-min);
}

.kc-bento__hero-media {
  position: absolute;
  inset: 0;
}

/*
 * Die Fläche füllt die Karte, statt ihr Seitenverhältnis zu halten. Die Rundung
 * schneidet die Karte per overflow zu, deshalb hier keine eigene.
 */
.kc-bento__hero-media .kc-media-link {
  display: block;
}

.kc-bento__hero-media .kc-media-link,
.kc-bento__hero-media .kc-media {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

/*
 * Ohne Beitragsbild steht hier die Platzhalterfläche. Ihr Quadrat-Motiv rückt
 * nach oben, sonst liegt es mitten in der Überschrift der Karte.
 */
.kc-bento__hero-media .kc-placeholder {
  justify-content: flex-start;
}

/*
 * Der Verlauf trägt die weiße Schrift auch über hellen Motiven. Er lässt Klicks
 * durch, damit die verlinkte Bildfläche darunter bedienbar bleibt.
 */
.kc-bento__hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--kc-bento-scrim);
  pointer-events: none;
}

.kc-bento__hero-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kc-space-2);
  position: relative;
  margin-top: auto;
  padding: var(--kc-space-4);
}

.kc-bento__hero-title {
  margin: 0;
  font-family: var(--kc-font-head);
  font-weight: 700;
  font-size: var(--kc-size-h3);
  line-height: 1.2;
}

.kc-bento__hero-title a {
  color: inherit;
  text-decoration: none;
}

.kc-bento__hero-title a:hover,
.kc-bento__hero-title a:focus-visible {
  text-decoration: underline;
}

.kc-bento__hero-excerpt {
  max-width: 52ch;
  margin: 0;
}

/* Stapelkarten rechts: kompaktes Vorschaubild neben dem Text */
.kc-bento__stack {
  grid-column: span 2;
  display: grid;
  grid-template-columns: var(--kc-bento-thumb) minmax(0, 1fr);
}

/* Wie bei der großen Karte füllt die Fläche die Höhe, statt ihr Format zu halten. */
.kc-bento__stack-media,
.kc-bento__stack-media .kc-media-link {
  display: block;
}

.kc-bento__stack-media,
.kc-bento__stack-media .kc-media-link,
.kc-bento__stack-media .kc-media {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.kc-bento__stack-body {
  gap: var(--kc-space-1);
}

/* Kacheln der unteren Reihe */
.kc-bento__tile {
  grid-column: span 1;
}

.kc-bento__tile-body {
  position: relative;
  gap: var(--kc-space-1);
}

/* Das Icon steht in der oberen Ecke und bleibt Schwarz-Weiß. */
.kc-bento__tile-icon {
  display: inline-flex;
  position: absolute;
  top: var(--kc-space-3);
  right: var(--kc-space-3);
  color: var(--kc-fg-muted);
}

/* Platz rechts, damit lange Titel nicht unter das Icon laufen. */
.kc-bento__tile-title {
  margin: 0;
  padding-right: var(--kc-space-5);
  font-size: var(--kc-size-h4);
}

/* --------------------------------------------------------------------------
   9. Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .kc-home-hero {
    padding-top: var(--kc-space-5);
  }

  /* Einspaltig: das Bild läuft nach beiden Seiten bis zum Fensterrand. */
  .kc-home-hero__grid {
    gap: var(--kc-space-5);
  }

  .kc-home-hero__intro {
    padding-right: 0;
  }

  .kc-home-hero__media {
    width: auto;
  }

  .kc-home-hero__img {
    margin-inline: calc(-1 * var(--kc-gutter));
  }

  .kc-home-cards,
  .kc-bento {
    margin-top: var(--kc-space-5);
  }

  /*
   * Zwei Spuren: die große Karte und die Stapelkarten nehmen die volle Breite,
   * die vier Kacheln stehen zu zweit nebeneinander.
   */
  .kc-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kc-bento__hero {
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  /* Der Streifen bleibt dreiteilig, wird aber quadratisch, damit er nicht dominiert. */
  .kc-home-highlight__impressions .kc-media {
    aspect-ratio: 1 / 1;
  }

  /*
   * Kundenstimmen früher einspaltig als die übrigen Raster: neben der Logospalte
   * bleibt einer halben Fensterbreite zu wenig Zeilenlänge für das Zitat.
   */
  .kc-home-stimmen__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .kc-bento {
    --kc-bento-hero-min: 340px;
    --kc-bento-thumb: 108px;
    grid-template-columns: minmax(0, 1fr);
  }

  .kc-bento__hero,
  .kc-bento__stack,
  .kc-bento__tile {
    grid-column: span 1;
  }

  /*
   * Neben einem Vorschaubild bleibt auf dem Telefon zu wenig Zeilenbreite –
   * „Beitrag lesen" bräche um. Die Fläche legt sich deshalb über den Text.
   */
  .kc-bento__stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .kc-bento__stack-media,
  .kc-bento__stack-media .kc-media-link,
  .kc-bento__stack-media .kc-media {
    height: 168px;
  }

  /* Auf dem Telefon steht das Logo über dem Zitat, nicht daneben. */
  .kc-stimme__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .kc-stimme__logo,
  .kc-stimme__quote,
  .kc-stimme__person {
    grid-column: 1;
  }

  .kc-stimme__quote {
    grid-row: 2;
  }

  .kc-stimme__person {
    grid-row: 3;
  }

  .kc-home-hero__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kc-space-2);
  }

  .kc-home-hero__actions .kc-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}