/* =========================================================================
   Seiteneigener Regelsatz /produkt/

   Uebernommen aus dem <style>-Block im Kopf der freigegebenen statischen
   Fassung (design-v6/70-full-site-v1/produkt/index.html). Diese Regeln
   stehen dort NICHT in assets/site.css, sondern gelten nur auf dieser einen
   Seite - deshalb liegen sie hier als eigene Datei und werden ausschliesslich
   auf ihrer Seite geladen (inc/assets.php, scriptomat_page_styles()).

   Sie haengen an 'scriptomat-site' und werden danach ausgeliefert: einige
   Regeln ueberschreiben den gemeinsamen Regelsatz. Genau diese Reihenfolge
   hatte der Master, dort als <link> gefolgt von <style>.
   ========================================================================= */

/* =========================================================================
   Lokaler Feinschliff dieser Seite. Kein neuer Bausatz, keine neue Farbwelt,
   keine neue Schriftgroessenskala - beide Ergaenzungen bestehen aus Teilen,
   die das Seitensystem schon traegt, und gelten ausschliesslich hier.

   1. .layers  Die vier Produktbereiche als liegende Schichten. Dieselbe
               Randmarkierung, dieselbe Haarlinie und dieselbe Zweiteilung
               wie .matrix - nur laufen die Faehigkeiten rechts als Zeilen
               weiter und nicht als achtfache Minispalte.
   2. .flow--lead  Der bestehende Ablauf, rund ein Sechstel groesser. Nur
               Breite und Schriftgrad wachsen; die Innenabstaende bleiben,
               damit keine leere Hoehe entsteht.
   ========================================================================= */

/* --- 1. Die vier Bereiche ------------------------------------------------ */
.layers { margin: 56px 0 0; border-top: 1px solid var(--line-cool); }
.layers__row {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 0 64px;
  padding: 34px 0;
}
.layers__row + .layers__row { border-top: 1px solid var(--line-cool); }
/* Die Randmarkierung steht am Bereich, nicht an jeder einzelnen Faehigkeit -
   sonst zerfaellt die Schicht wieder in acht gleichwertige Punkte. */
.layers__area { position: relative; padding-left: 20px; }
.layers__area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 24px;
  background: var(--brand);
}
.layers__area h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.layers__area p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-quiet);
}
.layers__caps { display: grid; gap: 18px; margin: 0; padding: 2px 0 0; list-style: none; }
.layers__caps li { font-size: 19px; line-height: 1.5; color: var(--ink-body); }
.layers__caps b { font-weight: 700; color: var(--ink); }

/* --- 2. Der Ablauf, groesser gesetzt ------------------------------------- */
.flow--lead { max-width: 896px; }
.flow--lead .flow__steps { padding: 22px 36px 22px 66px; }
.flow--lead .flow__steps::before { left: 35px; top: 22px; bottom: 22px; }
.flow--lead .flow__step { grid-template-columns: 130px minmax(0, 1fr); gap: 0 22px; }
.flow--lead .flow__step::before { left: -38px; margin-top: -9px; width: 18px; height: 18px; }
.flow--lead .flow__actor { font-size: 17px; }
.flow--lead .flow__event { font-size: 22px; }
.flow--lead .flow__done {
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0 22px;
  padding: 18px 36px 18px 66px;
}
.flow--lead .flow__done .flow__event { font-size: 22px; }

@media (max-width: 1180px) {
  .layers__row { grid-template-columns: 260px minmax(0, 1fr); gap: 0 44px; }
}
@media (max-width: 860px) {
  .layers { margin-top: 44px; }
  .layers__row { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 28px 0; }
  /* Die schmale Fassung des Ablaufs bleibt die des Seitensystems. */
  .flow--lead .flow__steps { padding: 16px 22px 16px 48px; }
  .flow--lead .flow__steps::before { left: 24px; top: 16px; bottom: 16px; }
  .flow--lead .flow__step,
  .flow--lead .flow__done { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .flow--lead .flow__step::before { left: -28px; top: 10px; margin-top: 0; }
  .flow--lead .flow__done { padding: 15px 22px 15px 48px; }
  .flow--lead .flow__event,
  .flow--lead .flow__done .flow__event { font-size: 20px; }
}