/**
 * service-detail.css — Detailseite einer Leistung (T-08).
 *
 * Übertragung der Designvorlage „Essence Consulting". Die Vorlage arbeitet mit
 * Inline-Styles, style-hover und style-before; hier stehen Klassen, echte
 * :hover und echte ::before — die Stilprüfung verlangt ec-Klassen als
 * Selektoren, und Gestaltung gehört ins Stylesheet.
 *
 * WARUM KEINE em- UND rem-LITERALE IN top/left/padding
 * lint-tokens.mjs erlaubt in Abstandseigenschaften nur Token. Wo die Vorlage
 * einen optischen Versatz braucht (der Punkt vor einer Listenzeile sitzt auf
 * der ERSTEN Zeile, nicht in der Mitte des Absatzes), rechnet ihn deshalb ein
 * transform aus der Zeilenhöhe aus, statt einen festen Wert zu setzen.
 *
 * ABWEICHUNG VON DER VORLAGE: DER GLYPH-TON
 * Die Vorlage strichelt das Ebenen-Glyph in --ec-color-brand. Auf heller
 * Fläche erreicht das 2,44:1; lint-tokens.mjs untersagt die Farbe deshalb als
 * `color` ausserhalb invertierter Flächen, und ein Strich von 1,75 px wäre bei
 * diesem Kontrast tatsächlich kaum zu sehen. Das Marken-Orange steht deshalb
 * dort, wo es Fläche ist — im Rahmen des Quadrats —, der Strich selbst in
 * --ec-color-primary. Damit trägt die H1 denselben Ton wie das Icon derselben
 * Leistung auf der Kachel.
 */

.ec-service {
  padding-block: var(--ec-space-xl);
}

.ec-service__section {
  margin-bottom: var(--ec-space-2xl);
}

/* ------------------------------------------------------------------ Kopf */

.ec-service__header {
  margin-bottom: var(--ec-space-2xl);
}

/*
 * Zieht sich von links auf und führt in den Titel. Verlauf statt Fläche: das
 * Marken-Orange ist hier Dekoration, kein Träger von Information.
 */
.ec-service__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-service__title {
  display: flex;
  align-items: center;
  gap: var(--ec-space-sm);
  margin: 0 0 var(--ec-space-md);
  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);
}

/* Das Quadrat wächst mit der Überschrift: 1em, nicht ein fester Wert. */
.ec-service__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1em;
  height: 1em;
  border: var(--ec-border-width-thick) solid var(--ec-color-brand);
  border-radius: var(--ec-radius-sm);
}

.ec-service__glyph {
  width: 0.6em;
  height: 0.6em;
  overflow: visible;
  color: var(--ec-color-primary);
}

/*
 * Das Icon nimmt dem Titel gut 3 rem Breite. Bei 320 px reicht das, damit ein
 * langes Einzelwort — „Prozessautomatisierung" — die Zeile sprengt; mit
 * min-width: 0 darf der Text im Flexraster überhaupt erst schmaler werden als
 * sein längstes Wort; overflow-wrap bricht es dann um (TC-A11Y-06). Kein
 * hyphens: auto — Begründung in base.css bei den Überschriften.
 */
.ec-service__name {
  min-width: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

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

/* ------------------------------------------------- Überschrift und Fliesstext */

.ec-service__heading {
  margin: 0 0 var(--ec-space-md);
  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);
}

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

/* ------------------------------------------------------- Liste mit Punkten */

.ec-service__list {
  display: grid;
  gap: var(--ec-space-sm);
  max-width: var(--ec-measure);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-service__point {
  position: relative;
  padding-left: var(--ec-space-md);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-base);
  text-wrap: pretty;
}

/*
 * Der Punkt sitzt auf der ersten Zeile. Der Versatz wird aus Zeilenhöhe und
 * Punktgrösse gerechnet, damit er bei jeder Schriftgrösse stimmt — und weil
 * ein fester Wert in `top` gegen die Tokenpflicht verstiesse.
 */
.ec-service__point::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--ec-radius-pill);
  background-color: var(--ec-color-brand);
  transform: translateY(calc((var(--ec-lh-base) * 1em - 0.4rem) / 2));
  content: "";
}

/* -------------------------------------------------------------- Ihr Nutzen */

.ec-service__benefits {
  position: relative;
  max-width: var(--ec-measure);
  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-alt);
}

/* Senkrechte Ember-Kante, oben und unten auf Höhe des Innenabstands. */
.ec-service__benefits::before {
  position: absolute;
  top: var(--ec-space-lg);
  bottom: var(--ec-space-lg);
  left: 0;
  width: var(--ec-border-width-thick);
  background-image: linear-gradient(180deg, var(--ec-color-ember-300), transparent);
  content: "";
}

.ec-service__benefits-title {
  margin: 0 0 var(--ec-space-sm);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h3);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
}

.ec-service__benefits-list {
  display: grid;
  gap: var(--ec-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-service__benefit {
  position: relative;
  padding-left: var(--ec-space-md);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-base);
  text-wrap: pretty;
}

.ec-service__benefit::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--ec-radius-pill);
  background-color: var(--ec-color-ember-500);
  transform: translateY(calc((var(--ec-lh-base) * 1em - 0.4rem) / 2));
  content: "";
}

/* ---------------------------------------------------------------- Vorgehen */

/* min(14rem, 100%): unterhalb der Umbruchbreite gibt die Spur nach, statt
   waagerecht aus dem Bild zu laufen — dieselbe Vorsichtsmassnahme wie im
   Fragenraster. */
.ec-service__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--ec-space-lg) var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-service__step {
  position: relative;
  padding-top: var(--ec-space-lg);
}

.ec-service__step::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--ec-border-width-thick);
  transform-origin: left;
  content: "";
}

/*
 * Die Ember-Töne laufen reihum. Vier Schritte sind der Regelfall; ein
 * fünfter beginnt den Zyklus von vorn, statt ohne Linie dazustehen.
 */
.ec-service__step:nth-child(4n + 1)::before {
  background-image: linear-gradient(90deg, var(--ec-color-ember-300), var(--ec-color-ember-500));
}

.ec-service__step:nth-child(4n + 2)::before {
  background-image: linear-gradient(90deg, var(--ec-color-ember-500), var(--ec-color-ember-700));
}

.ec-service__step:nth-child(4n + 3)::before {
  background-image: linear-gradient(90deg, var(--ec-color-ember-700), var(--ec-color-ember-900));
}

.ec-service__step:nth-child(4n)::before {
  background-image: linear-gradient(90deg, var(--ec-color-ember-900), var(--ec-color-ember-300));
}

.ec-service__step-number {
  display: block;
  margin-bottom: var(--ec-space-3xs);
  color: var(--ec-color-primary);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-small);
  font-weight: var(--ec-fw-bold);
  letter-spacing: var(--ec-tracking-wide);
}

.ec-service__step-title {
  margin: 0 0 var(--ec-space-3xs);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-h3);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
}

.ec-service__step-text {
  max-width: none;
  margin: 0;
  color: var(--ec-color-ink-muted);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: var(--ec-lh-base);
  text-wrap: pretty;
}

/* ------------------------------------------------------------------- Chips */

.ec-service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-tag {
  display: inline-flex;
  align-items: center;
  max-width: none;
  padding: var(--ec-space-2xs) var(--ec-space-md);
  border: var(--ec-border-width) solid var(--ec-color-border);
  border-radius: var(--ec-radius-pill);
  background-color: var(--ec-color-surface-alt);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-small);
}

/* --------------------------------------------------------------------- FAQ */

/*
 * Native <details>/<summary>. Aufklappen, Tastaturbedienung und der Zustand
 * offen/geschlossen stecken im Element — ohne JavaScript funktioniert es
 * unverändert (R5). Vorher baute accordion.js Schaltflächen aus einer
 * Definitionsliste; das Skript ist mit diesem Umbau entfallen.
 */
.ec-faq {
  max-width: var(--ec-measure);
  overflow: hidden;
  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);
}

.ec-faq__item {
  border-bottom: var(--ec-border-width) solid var(--ec-color-border);
}

/* Die letzte Zeile endet an der Kartenkante — eine Trennlinie davor trennte
   nichts mehr. */
.ec-faq__item:last-child {
  border-bottom: 0;
}

.ec-faq__summary {
  display: flex;
  align-items: center;
  gap: var(--ec-space-md);
  min-height: var(--ec-touch-target);
  padding: var(--ec-space-md) var(--ec-space-lg);
  color: var(--ec-color-ink);
  font-family: var(--ec-font-heading);
  font-size: var(--ec-fs-body);
  font-weight: var(--ec-fw-bold);
  line-height: var(--ec-lh-tight);
  list-style: none;
  cursor: pointer;
  transition: color var(--ec-duration-base) var(--ec-ease);
}

/* list-style allein genügt nicht: WebKit zeichnet den Marker über ein eigenes
   Pseudo-Element. */
.ec-faq__summary::-webkit-details-marker {
  display: none;
}

.ec-faq__summary:hover,
.ec-faq__item[open] .ec-faq__summary {
  color: var(--ec-color-primary);
}

.ec-faq__question {
  flex: 1;
  text-wrap: pretty;
}

.ec-faq__sign {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: var(--ec-border-width) solid var(--ec-color-border);
  border-radius: var(--ec-radius-pill);
  color: var(--ec-color-primary);
  font-family: var(--ec-font-body);
  font-size: var(--ec-fs-body);
  line-height: 1;
  transition:
    transform var(--ec-duration-slow) var(--ec-ease),
    border-color var(--ec-duration-base) var(--ec-ease);
}

/* Aus dem Plus wird ein Kreuz — dieselbe Form, gedreht. */
.ec-faq__item[open] .ec-faq__sign {
  border-color: var(--ec-color-primary);
  transform: rotate(45deg);
}

.ec-faq__answer {
  padding: 0 var(--ec-space-lg) var(--ec-space-lg);
  animation: ec-service-open var(--ec-duration-slow) var(--ec-ease) both;
}

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

/* ---------------------------------------------------- Verwandte Leistungen */

.ec-service__related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-service__related-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ec-space-3xs);
  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);
}

.ec-service__related-link:hover {
  color: var(--ec-color-primary-hover);
}

/* --------------------------------------------------------- Abschluss und Weg */

.ec-cta {
  padding: var(--ec-space-xl);
  border-radius: var(--ec-radius-lg);
  background-color: var(--ec-color-surface-invert);
  color: var(--ec-color-ink-invert);
}

.ec-cta__actions {
  max-width: none;
  margin: 0;
}

.ec-breadcrumb {
  padding-block: var(--ec-space-sm);
  color: var(--ec-color-ink-muted);
  font-size: var(--ec-fs-small);
}

.ec-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ec-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-breadcrumb a {
  color: var(--ec-color-ink-muted);
}

/* Wo man IST, steht in der Textfarbe; der Weg dorthin tritt zurück. */
.ec-breadcrumb li:last-child {
  color: var(--ec-color-ink);
}

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

/*
 * Startzustand nur mit JavaScript: ohne .ec-js existiert keine dieser Regeln,
 * und alles steht sofort da. Angehalten (`paused`) hält `both` das erste Bild,
 * bis reveal.js die Gruppe freigibt.
 *
 * Die Staffelung läuft in Leserichtung über --ec-service-index; die Schrittweite
 * ist --ec-reveal-step und steht in tokens.css, nicht hier.
 */
.ec-js [data-reveal] .ec-service__rule {
  animation: ec-service-draw var(--ec-duration-draw) var(--ec-ease) both paused;
}

.ec-js [data-reveal] .ec-service__title,
.ec-js [data-reveal] .ec-service__teaser,
.ec-js [data-reveal] .ec-service__heading,
.ec-js [data-reveal] .ec-service__prose,
.ec-js [data-reveal] .ec-service__point,
.ec-js [data-reveal] .ec-service__benefits,
.ec-js [data-reveal] .ec-service__step,
.ec-js [data-reveal] .ec-service__tags,
.ec-js [data-reveal] .ec-faq,
.ec-js [data-reveal] .ec-service__related {
  animation: ec-service-rise var(--ec-duration-slow) var(--ec-ease) both paused;
}

/* Was auf eine Überschrift folgt, folgt ihr auch zeitlich. */
.ec-js [data-reveal] .ec-service__teaser,
.ec-js [data-reveal] .ec-service__prose,
.ec-js [data-reveal] .ec-service__benefits,
.ec-js [data-reveal] .ec-service__tags,
.ec-js [data-reveal] .ec-faq,
.ec-js [data-reveal] .ec-service__related {
  animation-delay: var(--ec-reveal-step);
}

/* Listenpunkte und Schritte zählen ihre eigene Stellung weiter. */
.ec-js [data-reveal] .ec-service__point,
.ec-js [data-reveal] .ec-service__step {
  animation-delay: calc((var(--ec-service-index, 0) + 1) * var(--ec-reveal-step));
}

.ec-js [data-reveal] .ec-service__step::before {
  animation: ec-service-draw var(--ec-duration-draw) var(--ec-ease) both paused;
  animation-delay: calc((var(--ec-service-index, 0) + 2) * var(--ec-reveal-step));
}

.ec-js [data-reveal][data-revealed] .ec-service__rule,
.ec-js [data-reveal][data-revealed] .ec-service__title,
.ec-js [data-reveal][data-revealed] .ec-service__teaser,
.ec-js [data-reveal][data-revealed] .ec-service__heading,
.ec-js [data-reveal][data-revealed] .ec-service__prose,
.ec-js [data-reveal][data-revealed] .ec-service__point,
.ec-js [data-reveal][data-revealed] .ec-service__benefits,
.ec-js [data-reveal][data-revealed] .ec-service__step,
.ec-js [data-reveal][data-revealed] .ec-service__step::before,
.ec-js [data-reveal][data-revealed] .ec-service__tags,
.ec-js [data-reveal][data-revealed] .ec-faq,
.ec-js [data-reveal][data-revealed] .ec-service__related {
  animation-play-state: running;
}

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

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

@keyframes ec-service-open {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
}

/*
 * Endzustand sofort. Die Animationen werden ganz entfernt statt auf 0 s
 * verkürzt: angehalten stünden sie sonst auf ihrem ersten Bild — und das ist
 * bei ec-service-rise die Unsichtbarkeit.
 */
@media (prefers-reduced-motion: reduce) {
  .ec-js [data-reveal] .ec-service__rule,
  .ec-js [data-reveal] .ec-service__title,
  .ec-js [data-reveal] .ec-service__teaser,
  .ec-js [data-reveal] .ec-service__heading,
  .ec-js [data-reveal] .ec-service__prose,
  .ec-js [data-reveal] .ec-service__point,
  .ec-js [data-reveal] .ec-service__benefits,
  .ec-js [data-reveal] .ec-service__step,
  .ec-js [data-reveal] .ec-service__step::before,
  .ec-js [data-reveal] .ec-service__tags,
  .ec-js [data-reveal] .ec-faq,
  .ec-js [data-reveal] .ec-service__related,
  .ec-faq__answer {
    animation: none;
  }
}