/* ==========================================================================
   FIGUREN — Signaturgrafiken der Leistungsseiten
   --------------------------------------------------------------------------
   Bisher stand auf jeder Detailseite links eine Überschrift und rechts nichts.
   Die halbe Bildschirmbreite blieb leer, und was die Leistung eigentlich tut,
   musste man lesen. Diese Datei gibt jeder Seite eine eigene Zeichnung, die
   neben der Überschrift steht und die Sache zeigt, statt sie zu behaupten.

   Die Zeichnungen sind SVG im Markup, keine Bilddateien. Damit bleiben sie
   bei jeder Auflösung scharf, kosten keinen zusätzlichen Ladevorgang und
   lassen sich in den Markenfarben führen.

   Bewegung: nur transform, opacity und stroke-dashoffset. Keine Eigenschaft,
   die den Seitenaufbau neu rechnet. Wer im Betriebssystem weniger Bewegung
   eingestellt hat, sieht die Zeichnung im Ruhezustand.

   Farben: Navy für Kanten und Schrift, Royal für das Aktive, Cyan nur als
   Akzent auf kleiner Fläche. Kein dunkles Kästchen auf heller Seite; die
   Zeichnung liegt auf Weiß und wird von einer Haarlinie gehalten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Der Kopfbereich wird zweispaltig, sobald eine Figur da ist
   --------------------------------------------------------------------------
   Ohne den Zusatz "--figur" bleibt alles wie bisher. Die Regel greift also
   nur auf den Seiten, die ich umgestellt habe.
   -------------------------------------------------------------------------- */
.ldx-hero--figur .ldx-hero__inner {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(34px, 4.6vw, 78px);
  align-items: center;
}

/* Die Brotkrümel laufen über beide Spalten, sonst stünden sie eingerückt. */
.ldx-hero--figur .crumbs { grid-column: 1 / -1; margin-bottom: 0; }

.ldx-hero--figur .ldx-hero__text { min-width: 0; }
.ldx-hero--figur .ldx-hero__text .lead { max-width: 46ch; }

/* Etwas weniger Luft nach oben: die Figur füllt die Höhe ohnehin. */
.ldx-hero--figur { padding-top: clamp(118px, 14vh, 172px); }

/* Die Merkmalzeile war für die volle Breite gemacht. In der halben Spalte
   bricht sie um, und die Haarlinie der ersten Angabe der zweiten Zeile stand
   dann sinnlos im Raum. Zwei Spalten mit waagerechter Trennung lösen das. */
.ldx-hero--figur .lx-merkmale {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 0;
}
.ldx-hero--figur .lx-merkmale li {
  padding: 11px 0;
  border-left: 0;
  border-top: 1px solid rgba(40, 15, 145, .1);
}
.ldx-hero--figur .lx-merkmale li:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.ldx-hero--figur .lx-merkmale li:nth-child(odd)  { padding-right: 18px; }

@media (max-width: 420px) {
  .ldx-hero--figur .lx-merkmale { grid-template-columns: 1fr; }
  .ldx-hero--figur .lx-merkmale li:nth-child(2) {
    border-top: 1px solid rgba(40, 15, 145, .1);
    padding-top: 11px;
  }
  .ldx-hero--figur .lx-merkmale li:nth-child(odd) { padding-right: 0; }
}

@media (max-width: 1040px) {
  .ldx-hero--figur .ldx-hero__inner { grid-template-columns: 1fr; }
  .ldx-hero--figur .ldx-hero__text .lead { max-width: 62ch; }
}

/* --------------------------------------------------------------------------
   1b · Foto und Zeichnung nebeneinander
   --------------------------------------------------------------------------
   Auf den Seiten, deren Kopf mittig gesetzt ist, wäre die zweispaltige
   Variante von oben ein Bruch. Dort stellt sich die Zeichnung stattdessen
   neben das Foto der Bühne. Das Foto zeigt die Wirklichkeit, die Zeichnung
   den Gedanken dahinter.
   -------------------------------------------------------------------------- */
.fig-paar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}
.fig-paar > * { min-width: 0; }
.fig-paar .lmedia-photo { height: 100%; }
.fig-paar .lmedia-photo img { height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .fig-paar { grid-template-columns: 1fr; }
  .fig-paar .lmedia-photo,
  .fig-paar .lmedia-photo img { height: auto; }
}

/* --------------------------------------------------------------------------
   2 · Der Rahmen — eine Platte in einer Schale
   --------------------------------------------------------------------------
   Zwei Gehäuse ineinander. Außen eine helle Schale mit großer Rundung, innen
   die eigentliche Zeichenfläche mit kleinerer Rundung. Der Abstand zwischen
   beiden Rundungen ist gerechnet, damit die Kurven konzentrisch laufen und
   die Kante nicht "kippt".
   -------------------------------------------------------------------------- */
.fig {
  position: relative;
  padding: 9px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 0 0 1px rgba(40, 15, 145, .07),
    0 2px 4px -2px rgba(40, 15, 145, .07),
    0 44px 92px -60px rgba(40, 15, 145, .46);
}

.fig__kern {
  position: relative;
  overflow: hidden;
  border-radius: 18px;              /* 28 minus 9 Polsterung */
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F8FF 100%);
  box-shadow: inset 0 0 0 1px rgba(40, 15, 145, .09);
}

/* Millimeterpapier, sehr blass. Gibt der Zeichnung Grund unter den Füßen. */
.fig__kern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(40, 15, 145, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 15, 145, .045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(78% 72% at 50% 42%, #000, transparent 78%);
  mask-image: radial-gradient(78% 72% at 50% 42%, #000, transparent 78%);
}

/* Kopfzeile der Zeichnung: sagt in zwei Worten, was man sieht. */
.fig__kopf {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted, #59627F);
}
.fig__punkt {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--royal, #5271FF);
  flex: none;
}
.fig__kopf b { color: var(--navy, #280F91); font-weight: 700; letter-spacing: .13em; }

/* Ein zweiter, nachgestellter Hinweis rutscht an den rechten Rand. */
.fig__kopf > span:not(.fig__punkt) {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: .09em;
  opacity: .7;
}

/* Auf dem Telefon wird die Kopfzeile enger gesetzt, damit laengere Titel
   wie "Ein Drehtermin - drei Orte" nicht zweizeilig umbrechen. */
@media (max-width: 430px) {
  .fig__kopf { gap: 7px; padding: 12px 14px 0; font-size: .62rem; letter-spacing: .09em; white-space: nowrap; }
  .fig__kopf b { letter-spacing: .09em; }
  .fig__kopf > span:not(.fig__punkt) { letter-spacing: .06em; }
}

.fig__buehne { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* Fußzeile: benennt, was die Zeichnung zeigt, in normaler Sprache. */
.fig__fuss {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 0 18px 16px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted, #59627F);
}
.fig__fuss b { color: var(--navy, #280F91); font-weight: 600; }

/* --------------------------------------------------------------------------
   3 · Gemeinsames Zeichen-Vokabular
   -------------------------------------------------------------------------- */
.fig .flaeche      { fill: #FFFFFF; }
.fig .kante        { fill: none; stroke: rgba(40, 15, 145, .16); stroke-width: 1.4; }
.fig .kante-fein   { fill: none; stroke: rgba(40, 15, 145, .10); stroke-width: 1; }
.fig .voll-royal   { fill: #5271FF; }
.fig .voll-navy    { fill: #280F91; }
.fig .voll-cyan    { fill: #27E6FF; }
.fig .voll-blass   { fill: rgba(82, 113, 255, .14); }
.fig .voll-grau    { fill: rgba(40, 15, 145, .07); }
.fig .strich-royal { fill: none; stroke: #5271FF; stroke-width: 2; stroke-linecap: round; }
.fig .strich-weiss { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fig .schrift      { font-family: Poppins, system-ui, sans-serif; fill: #280F91; font-weight: 600; }
.fig .schrift-hell { font-family: Poppins, system-ui, sans-serif; fill: #59627F; font-weight: 500; }
.fig .schrift-weiss{ font-family: Poppins, system-ui, sans-serif; fill: #FFFFFF; font-weight: 600; }

/* --------------------------------------------------------------------------
   4 · Bewegung
   --------------------------------------------------------------------------
   Alles läuft erst, wenn die Figur im Bild ist. site.js setzt dafür die
   Klasse "in" auf das .reveal-Element; die Figur hängt sich daran.

   Zwei Fälle sind möglich, und beide kommen vor: die Figur steht innerhalb
   eines .reveal-Elements, oder die Figur IST das .reveal-Element. Der
   Nachfahren-Doppelpunkt trifft sich selbst nicht, deshalb steht jede Regel
   zweimal da. Ich schreibe das lieber doppelt hin, als mich später zu
   wundern, warum eine Zeichnung leer bleibt.
   -------------------------------------------------------------------------- */

/* 4.1 Linie, die sich zeichnet */
.fig .zeichnet {
  stroke-dasharray: var(--laenge, 400);
  stroke-dashoffset: var(--laenge, 400);
}
.reveal.in .fig .zeichnet,
.fig.reveal.in .zeichnet {
  animation: fig-zeichnen 1.5s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--takt, 0s);
}
@keyframes fig-zeichnen { to { stroke-dashoffset: 0; } }

/* 4.2 Element, das aufgeht */
.fig .taucht-auf { opacity: 0; transform: translateY(9px); }
.reveal.in .fig .taucht-auf,
.fig.reveal.in .taucht-auf {
  animation: fig-auf .8s cubic-bezier(.22, 1, .36, 1) forwards;
  animation-delay: var(--takt, 0s);
}
@keyframes fig-auf { to { opacity: 1; transform: none; } }

/* 4.3 Dauerlauf: Impuls entlang einer Leitung */
.reveal.in .fig .impuls,
.fig.reveal.in .impuls {
  animation: fig-impuls 3.2s cubic-bezier(.5, 0, .5, 1) infinite;
  animation-delay: var(--takt, 0s);
}
@keyframes fig-impuls {
  0%   { opacity: 0; offset-distance: 0%; }
  12%  { opacity: 1; }
  76%  { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

/* 4.4 Dauerlauf: langsames Atmen für Markierungen */
.reveal.in .fig .atmet,
.fig.reveal.in .atmet {
  transform-box: fill-box;
  transform-origin: center;
  animation: fig-atmen 3.4s ease-in-out infinite;
  animation-delay: var(--takt, 0s);
}
@keyframes fig-atmen {
  0%, 100% { transform: scale(1);    opacity: .9; }
  50%      { transform: scale(1.14); opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .fig .zeichnet { stroke-dashoffset: 0; }
  .fig .taucht-auf { opacity: 1; transform: none; }
  .reveal.in .fig .zeichnet,
  .reveal.in .fig .taucht-auf,
  .reveal.in .fig .impuls,
  .reveal.in .fig .atmet,
  .fig.reveal.in .zeichnet,
  .fig.reveal.in .taucht-auf,
  .fig.reveal.in .impuls,
  .fig.reveal.in .atmet { animation: none; }
}

/* --------------------------------------------------------------------------
   5 · Bedienbare Figuren
   --------------------------------------------------------------------------
   Manche Zeichnungen haben Schalter. Sie sind echte <button>, damit sie mit
   der Tastatur erreichbar sind und ein Screenreader sie ansagt.
   -------------------------------------------------------------------------- */
.fig__schalter {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 16px;
}
.fig__schalter button {
  appearance: none;
  min-height: 34px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(40, 15, 145, .14);
  background: #FFFFFF;
  color: var(--muted, #59627F);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .4s cubic-bezier(.22, 1, .36, 1),
    color .4s cubic-bezier(.22, 1, .36, 1),
    border-color .4s cubic-bezier(.22, 1, .36, 1),
    transform .4s cubic-bezier(.22, 1, .36, 1);
}
.fig__schalter button:hover { border-color: rgba(82, 113, 255, .42); color: var(--navy, #280F91); }
.fig__schalter button:active { transform: scale(.97); }
.fig__schalter button[aria-pressed="true"] {
  background: var(--royal, #5271FF);
  border-color: var(--royal, #5271FF);
  color: #FFFFFF;
}
.fig__schalter button:focus-visible { outline: 3px solid var(--royal, #5271FF); outline-offset: 2px; }

/* Die Ebenen der schaltbaren Zeichnung liegen übereinander. */
.fig__ebene { opacity: 0; visibility: hidden; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
.fig__ebene.ist-an { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   6 · Die einzelnen Zeichnungen
   --------------------------------------------------------------------------
   Alles, was nur eine Figur betrifft, steht hier unten. Oben bleibt das
   gemeinsame Gerüst, damit die nächste Zeichnung nichts umbauen muss.
   -------------------------------------------------------------------------- */

/* 6.1 Video & Drohne — der Schnittplan
   Der Abspielkopf läuft die Zeitachse ab und beginnt wieder von vorn. Er
   verschiebt sich nur, es wird nichts neu berechnet. Im Ruhezustand steht
   er am Anfang der ersten Spur. */
.fig--schnitt .sp-kopf { transform: translateX(88px); }
.reveal.in .fig--schnitt .sp-kopf,
.fig--schnitt.reveal.in .sp-kopf {
  animation: schnitt-lauf 7s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes schnitt-lauf {
  0%        { transform: translateX(88px);  opacity: 0; }
  6%        { opacity: 1; }
  94%       { opacity: 1; }
  100%      { transform: translateX(536px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.in .fig--schnitt .sp-kopf,
  .fig--schnitt.reveal.in .sp-kopf { animation: none; }
}

/* --------------------------------------------------------------------------
   7 · Das Hebelband der Übersichtsseite
   --------------------------------------------------------------------------
   Der Kopf von leistungen.html ist mittig gesetzt, dort passt die
   zweispaltige Variante aus Abschnitt 1 nicht. Stattdessen liegt unter der
   Überschrift ein Band aus sechs Karten: eine Schiene, sechs Anschlüsse,
   sechs Zeichnungen. Jede Karte springt zu ihrem Abschnitt weiter unten.

   Bewusst als HTML-Raster und nicht als eine einzige breite Zeichnung. Eine
   1160 Pixel breite SVG-Datei wäre auf dem Telefon unlesbar klein; ein
   Raster bricht dagegen von sechs auf drei, auf zwei und auf eine Spalte um.
   -------------------------------------------------------------------------- */
.hebel-band {
  --hb-luft: clamp(10px, 1.1vw, 16px);
  position: relative;
  margin-top: clamp(52px, 6vw, 92px);
}

/* Die Schiene über den Karten. Sie beginnt in der Mitte der ersten und endet
   in der Mitte der letzten Spalte; bei sechs gleich breiten Spalten ist das
   genau ein Zwölftel der Restbreite. */
.hebel-band__schiene {
  position: absolute;
  top: 0;
  left:  calc((100% - 5 * var(--hb-luft)) / 12);
  right: calc((100% - 5 * var(--hb-luft)) / 12);
  height: 1px;
  background: rgba(40, 15, 145, .14);
  pointer-events: none;
}

/* Der Punkt, der die Schiene entlangläuft. Der Wagen ist so breit wie die
   Schiene, deshalb entspricht translateX(100%) genau ihrer Länge. Bewegt
   wird nur transform, es wird nichts neu berechnet. */
.hebel-band__wagen {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.reveal.in .hebel-band__wagen,
.hebel-band.reveal.in .hebel-band__wagen {
  animation: hb-lauf 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
}
.hebel-band__wagen i {
  position: absolute;
  top: -3.5px; left: -3.5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cyan, #27E6FF);
  display: block;
}
@keyframes hb-lauf {
  0%   { transform: translateX(0);    opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.hebel-band__raster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--hb-luft);
  padding-top: 38px;
}

/* --- Die einzelne Karte ------------------------------------------------- */
.hebel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: #FFFFFF;
  text-align: left;
  text-decoration: none;
  box-shadow:
    0 0 0 1px rgba(40, 15, 145, .07),
    0 2px 4px -2px rgba(40, 15, 145, .06),
    0 28px 54px -40px rgba(40, 15, 145, .42);
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}

/* Anschluss nach oben: Stichleitung und Punkt auf der Schiene. */
.hebel::before {
  content: "";
  position: absolute;
  left: 50%; top: -38px;
  width: 1px; height: 38px;
  background: rgba(40, 15, 145, .14);
}
.hebel::after {
  content: "";
  position: absolute;
  left: 50%; top: -38px;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--royal, #5271FF);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.hebel:hover, .hebel:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(82, 113, 255, .22),
    0 2px 4px -2px rgba(40, 15, 145, .08),
    0 40px 70px -42px rgba(40, 15, 145, .5);
}
.hebel:hover::after, .hebel:focus-visible::after { transform: scale(1.5); }
.hebel:focus-visible { outline: 2px solid var(--royal, #5271FF); outline-offset: 3px; }

.hebel__nr {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--royal, #5271FF);
}

/* Bühne: die Zeichnung steht nicht nackt auf der Karte, sondern in einer
   eigenen, leicht abgesetzten Fläche mit Millimeterpapier. Zwei Gehäuse
   ineinander, wie bei den großen Figuren auch. */
.hebel__buehne {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 12px 0 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F6FF 100%);
  box-shadow: inset 0 0 0 1px rgba(40, 15, 145, .08);
  transition: box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}
.hebel__buehne::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(40, 15, 145, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 15, 145, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 74% at 50% 45%, #000, transparent 80%);
  mask-image: radial-gradient(80% 74% at 50% 45%, #000, transparent 80%);
}
.hebel:hover .hebel__buehne { box-shadow: inset 0 0 0 1px rgba(82, 113, 255, .22); }

.hebel__bild {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  padding: 11px 13px;
}

.hebel__titel {
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--navy, #280F91);
}
.hebel__zeile {
  margin-top: 7px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted, #59627F);
}

/* Der Pfeil sitzt unten und rückt beim Überfahren eine Spur nach rechts. */
.hebel__pfeil {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--royal, #5271FF);
}
.hebel__pfeil svg {
  width: 14px; height: 14px;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.hebel:hover .hebel__pfeil svg { transform: translateX(4px); }

/* Zeichen-Vokabular auch innerhalb der Karten. */
.hebel .flaeche      { fill: #FFFFFF; }
.hebel .kante        { fill: none; stroke: rgba(40, 15, 145, .16); stroke-width: 1.4; }
.hebel .kante-fein   { fill: none; stroke: rgba(40, 15, 145, .10); stroke-width: 1; }
.hebel .voll-royal   { fill: #5271FF; }
.hebel .voll-cyan    { fill: #27E6FF; }
.hebel .voll-blass   { fill: rgba(82, 113, 255, .14); }
.hebel .voll-grau    { fill: rgba(40, 15, 145, .07); }
.hebel .strich-royal { fill: none; stroke: #5271FF; stroke-width: 2; stroke-linecap: round; }
.hebel .strich-weiss { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Die sechste Stufe der Staffelung fehlte bisher. */
.reveal[data-d="6"] { transition-delay: .48s; }

/* --- Umbruch ------------------------------------------------------------ */
@media (max-width: 1120px) {
  .hebel-band__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(16px, 2vw, 24px); }
  .hebel-band__schiene, .hebel-band__wagen { display: none; }
  .hebel::before, .hebel::after { display: none; }
  .hebel-band__raster { padding-top: 0; }
}
@media (max-width: 760px) {
  .hebel-band__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Auf dem Telefon steht die Zeichnung links und der Text rechts. Untereinander
   wären sechs volle Karten eine sehr lange Strecke; nebeneinander bleibt die
   Übersicht in einem Blick lesbar. Feste Rasterplätze statt Flexumbruch,
   damit Titel und Zeile nicht nebeneinander rutschen. */
@media (max-width: 430px) {
  .hebel-band__raster { grid-template-columns: 1fr; row-gap: 10px; }
  .hebel {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px;
  }
  .hebel__nr     { grid-column: 1 / -1; grid-row: 1; }
  .hebel__buehne { grid-column: 1; grid-row: 2 / 4; width: 88px; margin: 6px 0 0; }
  .hebel__titel  { grid-column: 2; grid-row: 2; align-self: end; }
  .hebel__zeile  { grid-column: 2; grid-row: 3; align-self: start; margin-top: 4px; }
  .hebel__titel br { display: none; }
  .hebel__pfeil  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.in .hebel-band__wagen,
  .hebel-band.reveal.in .hebel-band__wagen { animation: none; }
}

/* 6.2 Genossenschaften — die beiden Arbeitsbereiche
   Die Zeichnung steht zwischen Einleitung und Häkchenliste. Sie zeigt, was
   der Absatz behauptet, damit die Liste darunter nur noch bestätigt. */
.fig--wg { margin: 26px 0 4px; }
.fig--wg + .wg-hebel__liste { margin-top: 24px; }