/**
 * topics.css — Schwerpunktkarten („Drei Themen im Detail").
 *
 * Vorher standen die drei Themen als Textspalten mit linker Linie da. Diese
 * Linie ist dieselbe Auszeichnung, die .ec-process__steps für die Schrittfolge
 * verwendet; der Abschnitt sah dadurch aus wie eine weitere Aufzählung und
 * verschwand zwischen Leistungsübersicht und Vorgehen. Er trägt aber die drei
 * Themen, auf die das Haus zeigen will.
 *
 * Karten geben ihnen eine eigene Fläche, die Ordnungszahl eine Reihenfolge,
 * die Ember-Kante die Zugehörigkeit zur Marke — bei 14 % Deckkraft bleibt das
 * Marken-Orange Fläche und wird nicht zu Text (siehe tokens.css, Kopfregel).
 *
 * ORDNUNGSZAHL IM RASTER STATT ABSOLUT
 * Die Ziffer sitzt oben rechts, ist aber eine echte Rasterzelle und nicht
 * absolut positioniert. Absolut liegt sie ÜBER dem Titel, sobald der Titel
 * lang wird — „Individualentwicklung" bei 360 px ist genau dieser Fall. Als
 * Zelle reserviert sie ihre Breite selbst, bei jeder Kartenbreite, ohne dass
 * irgendwo ein Zahlenwert nachgeführt werden müsste.
 *
 * Sie steht über ZWEI Zeilen (Titel und Text). Nur über der Titelzeile würde
 * ihre Höhe die Zeile aufspannen und unter dem Titel eine leere Bank
 * hinterlassen, die niemand gesetzt hat; über beide Zeilen wird sie von
 * vorhandenem Text getragen.
 */

.ec-topics__eyebrow {
  margin-bottom: var(--ec-space-xs);
  color: var(--ec-color-primary);
  font-size: var(--ec-fs-small);
  font-weight: var(--ec-fw-medium);
  letter-spacing: var(--ec-tracking-wide);
  text-transform: uppercase;
}

.ec-topics__title {
  max-width: var(--ec-measure);
  margin: 0;
  color: var(--ec-color-ink);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h2);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
}

/* Ziertrenner. Trägt keine Information und ist deshalb aria-hidden; er
   ersetzt den Abstand zwischen Überschrift und Raster nicht, sondern setzt
   ihn sichtbar. */
.ec-topics__rule {
  display: block;
  width: 5rem;
  height: var(--ec-border-width-thick);
  margin: var(--ec-space-md) 0 var(--ec-space-xl);
  border-radius: var(--ec-radius-pill);
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-300),
    var(--ec-color-ember-700)
  );
}

/*
 * auto-fit statt fester Spaltenzahl: die Karten brechen dort um, wo sie zu
 * schmal würden, nicht an einem Breakpoint. 17rem ist die Breite, unter der
 * „Individualentwicklung" neben der Ordnungszahl nicht mehr sinnvoll umbricht.
 */
.ec-topics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--ec-space-md);
}

/*
 * minmax(0, 1fr) statt 1fr: eine 1fr-Spalte wird nie schmaler als ihr
 * min-content. „Individualentwicklung" ist ein Wort und damit unteilbar —
 * die Spalte hätte die Karte gesprengt und den Fliesstext an der Kante
 * abgeschnitten. Umbrechen darf der Titel (hyphens weiter unten), sprengen
 * nicht.
 */
.ec-topics__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  gap: var(--ec-space-2xs) var(--ec-space-sm);
  overflow: hidden;
  padding: var(--ec-space-lg);
  border: var(--ec-border-width) solid var(--ec-color-border);
  border-radius: var(--ec-radius-lg);
  background-color: var(--ec-color-surface);
  box-shadow: var(--ec-shadow-sm);
  transition:
    transform var(--ec-duration-base) var(--ec-ease),
    border-color var(--ec-duration-base) var(--ec-ease),
    box-shadow var(--ec-duration-base) var(--ec-ease);
}

/*
 * Ember-Kante. Die Abfolge der drei Verläufe ist die Abfolge der Karten: die
 * Reihe wandert von hell nach dunkel und bindet die drei Karten zu einer
 * Gruppe zusammen, statt sie dreimal gleich zu markieren.
 */
.ec-topics__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-300),
    var(--ec-color-brand)
  );
}

.ec-topics__card:nth-child(2)::before {
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-500),
    var(--ec-color-ember-300)
  );
}

.ec-topics__card:nth-child(3)::before {
  background-image: linear-gradient(
    90deg,
    var(--ec-color-ember-700),
    var(--ec-color-ember-500)
  );
}

.ec-topics__card:hover {
  transform: translateY(calc(var(--ec-space-3xs) * -1));
  border-color: var(--ec-color-border-strong);
  box-shadow: var(--ec-shadow-lg);
}

/*
 * Die Ziffer ist Dekoration: aria-hidden im Markup, hier zusätzlich aus jeder
 * Bedienung genommen. Bei dieser Deckkraft ist das Marken-Orange Fläche und
 * kein Text — der Token-Linter kennt genau diese Ausnahme (brand-orange-scope).
 */
.ec-topics__num {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  pointer-events: none;
  color: var(--ec-color-brand);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-display);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
  opacity: 0.14;
}

.ec-topics__name {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  overflow-wrap: break-word;
  color: var(--ec-color-ink);
  font-size: var(--ec-fs-h3);
  font-weight: var(--ec-fw-bold);
  text-wrap: balance;

  /* Deutsche Komposita sind länger als die Spalte. Getrennt bricht der Titel
     lesbar um; ohne Trennung bliebe nur der harte Bruch mitten im Wort. */
  hyphens: auto;
}

.ec-topics__text {
  grid-column: 1;
  grid-row: 2;

  /* Ohne das erbt der Absatz 68ch aus der Grundtypografie und bestimmt damit
     die Kartenbreite mit — vgl. den gleichen Fall in landing.css. */
  max-width: none;
  margin: 0;
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-base);
  text-wrap: pretty;
}

/* Letzte Zeile, und sie bekommt den Rest der Kartenhöhe (1fr). Dadurch stehen
   die Verweise aller drei Karten auf einer Linie, auch wenn der Text
   unterschiedlich viele Zeilen braucht. */
.ec-topics__link {
  grid-column: 1 / -1;
  grid-row: 3;
  display: inline-flex;
  align-items: center;
  place-self: end start;
  gap: var(--ec-space-3xs);
  min-height: var(--ec-touch-target);
  color: var(--ec-color-primary);
  font-size: var(--ec-fs-small);
  font-weight: var(--ec-fw-medium);
  text-decoration: none;
}

/* Der Pfeil gehört zur Gestalt des Verweises, nicht zu seinem Namen: im
   Textknoten würde er mit vorgelesen („Mehr erfahren Pfeil nach rechts"). */
.ec-topics__link::after {
  content: "→";
  transition: transform var(--ec-duration-fast) var(--ec-ease);
}

.ec-topics__link:hover,
.ec-topics__link:focus-visible {
  color: var(--ec-color-primary-hover);
  text-decoration: underline;
}

.ec-topics__link:hover::after {
  transform: translateX(var(--ec-space-3xs));
}

/* ------------------------------------------------------ Einblenden (R5) */

/*
 * Der Startzustand hängt an .ec-js — ohne JavaScript gibt es niemanden, der
 * ihn je wieder aufhebt, und die Karten blieben unsichtbar. Sichtbar ist der
 * Grundzustand, das Einblenden die Zugabe.
 *
 * `paused` statt einer zweiten Regel für den Startzustand: die Animation
 * steht mit fill-mode `both` auf ihrem ersten Bild, bis reveal.js die Gruppe
 * freigibt. So steht der Startzustand genau einmal im Stylesheet.
 */
.ec-js [data-reveal] .ec-topics__card {
  animation: ec-topics-reveal var(--ec-duration-slow) var(--ec-ease) both paused;
}

/* Die Staffelung folgt der Stellung im Raster, nicht einer im Markup
   mitgegebenen Nummer: die Karten sollen von links nach rechts erscheinen,
   auch wenn die Redaktion sie im Modul umsortiert. */
.ec-js [data-reveal] .ec-topics__card:nth-child(2) {
  animation-delay: var(--ec-reveal-step);
}

.ec-js [data-reveal] .ec-topics__card:nth-child(3) {
  animation-delay: calc(var(--ec-reveal-step) * 2);
}

.ec-js [data-reveal][data-revealed] .ec-topics__card {
  animation-play-state: running;
}

@keyframes ec-topics-reveal {
  from {
    transform: translateY(var(--ec-reveal-offset));
    opacity: 0;
  }
}

/*
 * Bei reduzierter Bewegung wird die Animation nicht auf 0 s verkürzt, sondern
 * ganz entfernt. Eine pausierte Animation der Dauer 0 s steht weiterhin auf
 * ihrem ersten Bild — die Karten wären dauerhaft unsichtbar, falls
 * reveal.js nicht läuft.
 */
@media (prefers-reduced-motion: reduce) {
  .ec-js [data-reveal] .ec-topics__card {
    animation: none;
  }
}