/**
 * about.css — Kurzvorstellung („Essence Consulting").
 *
 * Übertragung der Designvorlage aus dem Designsystem. Dort stehen die Werte
 * als Inline-Styles am Element; hier stehen sie als Klassen, weil das
 * Stylesheet die Quelle der Gestaltung ist und die Seite nur Inhalt trägt.
 * Der Zustand style-hover der Vorlage ist ein echtes :hover geworden —
 * ergänzt um :focus-visible, weil die Tastatur den Zustand sonst nie sieht.
 *
 * Vorher war der Abschnitt ein Fliesssatz ohne Aufbau: die Aussage und die
 * Geschäftsführung standen in derselben Zeile. Die Zweiteilung gibt ihm eine
 * Komposition — links der Name des Hauses, rechts, was es tut.
 */

/*
 * min(20rem, 100%) statt der blossen 20rem aus der Vorlage: eine Spur mit
 * fester Untergrenze wird nie schmaler als diese Grenze. Bei 320 px stehen
 * aber nur 280 px zur Verfügung, und die Seite scrollte waagerecht
 * (TC-A11Y-06). Die Umbruchbreite bleibt unverändert — nur unterhalb davon
 * gibt die Spur nach, statt den Rahmen zu sprengen.
 */
.ec-about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--ec-space-xl);
  align-items: start;
}

/* Die Linie trägt keine Information und zieht sich beim Einblenden von links
   auf. Sie hört vor dem Spaltenende auf: der Verlauf läuft nach transparent
   aus, statt an einer Kante abzubrechen. */
.ec-about__rule {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: var(--ec-border-width-thick);
  margin-bottom: var(--ec-space-md);
  background-image: linear-gradient(90deg, var(--ec-color-ember-300), transparent);
  transform-origin: left;
}

.ec-about__title {
  margin: 0;
  color: var(--ec-color-ink);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h1);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
}

.ec-about__body {
  display: grid;
  gap: var(--ec-space-md);
  padding-left: var(--ec-space-md);
  border-left: var(--ec-border-width) solid var(--ec-color-border);
}

.ec-about__lead {
  max-width: var(--ec-measure);
  margin: 0;
  color: var(--ec-color-ink);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-h3);
  font-weight: var(--ec-fw-regular);
  line-height: var(--ec-lh-base);
  text-wrap: pretty;
}

.ec-about__meta {
  margin: 0;
  color: var(--ec-color-ink-muted);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-small);
  letter-spacing: var(--ec-tracking-wide);
  line-height: var(--ec-lh-base);
  text-transform: uppercase;
}

.ec-about__name {
  color: var(--ec-color-ink);
  font-weight: var(--ec-fw-bold);
}

/*
 * Die Unterkante trägt das Marken-Orange. Als Linie ist das zulässig — die
 * Schrift darüber steht in --ec-color-primary, das auf heller Fläche 5,22:1
 * erreicht (siehe Kopfregel in tokens.css).
 */
.ec-about__link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--ec-space-2xs);
  min-height: var(--ec-touch-target);
  border-bottom: var(--ec-border-width-thick) solid var(--ec-color-brand);
  color: var(--ec-color-primary);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  font-weight: var(--ec-fw-medium);
  text-decoration: none;
  transition:
    color var(--ec-duration-base) var(--ec-ease),
    border-color var(--ec-duration-base) var(--ec-ease);
}

/* Der Pfeil gehört zur Gestalt, nicht zum Namen: im Textknoten läse ihn ein
   Vorlesewerkzeug mit. */
.ec-about__link::after {
  content: "→";
}

.ec-about__link:hover,
.ec-about__link:focus-visible {
  border-color: var(--ec-color-primary);
  color: var(--ec-color-primary-hover);
}

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

/*
 * Die Vorlage startet die Bewegung beim Laden. Hier hängt sie am vorhandenen
 * [data-reveal] und läuft, sobald der Abschnitt ins Sichtfeld kommt — es gibt
 * genau einen Reveal-Mechanismus im Projekt, und das bleibt so.
 *
 * Der Startzustand hängt an .ec-js: ohne JavaScript hebt ihn niemand wieder
 * auf, und der Abschnitt bliebe unsichtbar.
 */
.ec-js [data-reveal].ec-about__grid {
  animation: ec-about-rise var(--ec-duration-slow) var(--ec-ease) both paused;
}

.ec-js [data-reveal].ec-about__grid .ec-about__rule {
  animation: ec-about-draw var(--ec-duration-draw) var(--ec-ease) both paused;
  animation-delay: calc(var(--ec-reveal-step) * 2);
}

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

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

@keyframes ec-about-draw {
  from {
    transform: scaleX(0);
  }
}

/*
 * Bei reduzierter Bewegung wird die Animation entfernt und nicht auf 0 s
 * verkürzt: angehalten stünde sie auf ihrem ersten Bild — der Abschnitt
 * unsichtbar, die Linie eingezogen. Die Vorlage erzwingt denselben
 * Endzustand mit !important; das verbietet die Stilprüfung des Projekts,
 * und nötig ist es hier auch nicht.
 */
@media (prefers-reduced-motion: reduce) {
  .ec-js [data-reveal].ec-about__grid,
  .ec-js [data-reveal].ec-about__grid .ec-about__rule {
    animation: none;
  }
}