/**
 * questions.css — Häufige Fragen als Karte mit nativen <details>-Zeilen.
 *
 * Übertragung der Designvorlage aus dem Designsystem: dort Inline-Styles und
 * data-ec-*-Haken, hier Klassen — die Stilprüfung des Projekts verlangt
 * ec-Klassen als Selektoren, und die Gestaltung gehört ins Stylesheet.
 * style-hover der Vorlage ist ein echtes :hover geworden.
 *
 * WARUM NICHT .ec-faq
 * Diesen Namen belegt service-detail.css für die elf Detailseiten. Gleiche
 * Klassennamen würden dort hineinregieren — die Abschnitte sehen ähnlich aus,
 * stehen aber in unterschiedlichen Rastern.
 *
 * WARUM <details> UND KEIN SKRIPT
 * Aufklappen, Tastaturbedienung und der Zustand offen/geschlossen sind im
 * Element bereits enthalten. Ohne JavaScript funktioniert es unverändert —
 * das ist mehr als Progressive Enhancement leisten muss, es braucht die
 * Anreicherung gar nicht erst (R5).
 */

/* min(18rem, 100%) statt 18rem: siehe about.css — unterhalb der Umbruchbreite
   gibt die Spur nach, statt waagerecht aus dem Bild zu laufen (TC-A11Y-06). */
.ec-questions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--ec-space-xl);
}

.ec-questions__head {
  align-self: start;
}

/*
 * Mitlaufen nur, solange die Karte tatsächlich neben der Überschrift steht.
 * Darunter liegt sie unter ihr — eine klebende Überschrift über einer Karte,
 * die sie nicht begleitet, wäre Bewegung ohne Bezug.
 */
@media (min-width: 64rem) {
  .ec-questions__head {
    position: sticky;
    top: var(--ec-scroll-margin);
  }
}

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

.ec-questions__title {
  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);
}

.ec-questions__rule {
  display: block;
  width: 6rem;
  height: var(--ec-border-width-thick);
  border-radius: var(--ec-radius-pill);
  background-image: linear-gradient(90deg, var(--ec-color-ember-300), transparent);
}

/*
 * Grundsätzlich über die volle Zeile, erst ab drei Spalten über zwei davon.
 *
 * `span 2` allein reicht nicht: steht nur EINE Spalte zur Verfügung, legt der
 * Browser für die zweite eine implizite Spur an, und die Karte wird breiter
 * als der Rahmen — bei 320 px waren das 28 px waagerechter Überlauf
 * (TC-A11Y-06). `1 / -1` deckt jede Spaltenzahl ab, ohne eine zu erfinden.
 *
 * min-width: 0 ist nicht kosmetisch: ohne die Angabe wird eine Rasterspalte
 * nie schmaler als ihr min-content, und eine lange Frage sprengte die Karte.
 */
.ec-questions__card {
  grid-column: 1 / -1;
  min-width: 0;
  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-md);
}

/* Erst ab drei Spalten steht die Karte tatsächlich neben der Überschrift.
   Die Regel muss NACH der Grundregel stehen: beide sind gleich spezifisch,
   entschieden wird über die Reihenfolge. */
@media (min-width: 64rem) {
  .ec-questions__card {
    grid-column: span 2;
  }
}

.ec-questions__item {
  position: relative;
  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-questions__item:last-child {
  border-bottom: 0;
}

.ec-questions__summary {
  position: relative;
  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-h3);
  font-weight: var(--ec-fw-medium);
  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-questions__summary::-webkit-details-marker {
  display: none;
}

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

/*
 * Die Leiste wächst von oben in die Zeile hinein und zeigt damit dieselbe
 * Richtung an wie die aufklappende Antwort. Marken-Orange als Verlauf, nicht
 * als Text — auf heller Fläche erreicht es nur 2,44:1 und ist deshalb nur
 * Fläche.
 */
.ec-questions__mark {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background-image: linear-gradient(180deg, var(--ec-color-brand), var(--ec-color-ember-500));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--ec-duration-slow) var(--ec-ease);
}

.ec-questions__item[open] .ec-questions__mark {
  transform: scaleY(1);
}

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

.ec-questions__sign {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  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-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),
    background-color var(--ec-duration-base) var(--ec-ease);
}

/* Aus dem Plus wird ein Kreuz — dieselbe Form, gedreht. Ein Zeichenwechsel
   von + auf − wäre ein Sprung; die Drehung ist der Vorgang selbst. */
.ec-questions__item[open] .ec-questions__sign {
  border-color: var(--ec-color-primary);
  background-color: var(--ec-color-surface);
  transform: rotate(45deg);
}

.ec-questions__answer {
  padding: 0 var(--ec-space-3xl) var(--ec-space-lg) var(--ec-space-lg);
  animation: ec-questions-open var(--ec-duration-slow) var(--ec-ease) both;
}

.ec-questions__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;
}

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

.ec-js [data-reveal] .ec-questions__head,
.ec-js [data-reveal] .ec-questions__card {
  animation: ec-questions-rise var(--ec-duration-slow) var(--ec-ease) both paused;
}

/* Die Karte folgt der Überschrift, statt mit ihr gleichzeitig zu erscheinen. */
.ec-js [data-reveal] .ec-questions__card {
  animation-delay: var(--ec-reveal-step);
}

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

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

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

/*
 * Endzustand sofort. Die Vorlage erzwingt ihn mit !important; die Stilprüfung
 * des Projekts verbietet das, und nötig ist es nicht — die Animationen werden
 * hier ganz entfernt statt auf 0 s verkürzt. Angehalten stünden sie sonst auf
 * ihrem ersten Bild.
 */
@media (prefers-reduced-motion: reduce) {
  .ec-js [data-reveal] .ec-questions__head,
  .ec-js [data-reveal] .ec-questions__card,
  .ec-questions__answer {
    animation: none;
  }
}