/* ══ STATION 1 · LEISTUNGEN — Aussehen (06.11.2026) ═══════════════════════
   Drei Leistungen als drei MODULE auf der Platine. Die Erzählung ist
   dieselbe wie überall auf der Seite: das Circuit-Netz schließt das
   Interface an. Im Hero dockt es an Titel und Knöpfe, hier an drei
   Bauteile — und die gehen an, sobald sie angeschlossen sind.

   DREI ENTSCHEIDUNGEN, DIE MAN NICHT „AUFRÄUMEN" SOLL
     · KEINE NUMMERN 01/02/03. Die Reihenfolge trägt keine Information;
       die Marke oben im Modul sagt stattdessen, WOFÜR es da ist
       (Auftritt · Werkzeug · Entlastung). Das ist der Satz, den man
       sich merkt.
     · KEIN ICON-KARTENRASTER. Die Module hängen an einer gemeinsamen
       Busleitung (`.ls-reihe::before`) und tragen Pin-Leisten oben und
       unten — sie lesen sich als Teile EINES Boards, nicht als drei
       schwebende Kacheln.
     · DER EINE MOMENT ist das Einschalten: nach der Ankunft der Station
       zünden die drei LEDs nacheinander. Sonst bewegt sich hier nichts
       von selbst. Hover hellt Pins und LED auf — nur mit Zeiger.

   Farbe: keine. Silber, Weiß, Schwarz aus :root (--ink, --ink-dim,
   --haze, --linie, --linie-hell) — wie die ganze Seite seit 15.08.

   Handy (≤ 720 px) steht in engine/mobil/mobil.css, Abschnitt
   „Leistungen" — dort gilt „Liste statt Bühne", und dieses Blatt wird
   wie alle Modul-Blätter überstimmt, nicht umgebaut.
──────────────────────────────────────────────────────────────────────── */

.leistungen {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12svh, 9rem) 0 clamp(4rem, 10svh, 7rem);
  /* KEIN eigener Hintergrund: den Grund trägt `.grund` hinter der Seite,
     und das Netz soll zwischen den Modulen sichtbar bleiben. */
}

/* ── Kopf ──────────────────────────────────────────────────────────────
   Dieselbe Gestalt wie Modelle und Ablauf: Kicker mit zwei Linien,
   ruhige Überschrift, eine Zeile darunter. Werte 1:1 aus ablauf.css,
   damit drei Stationen hintereinander dieselbe Stimme haben. */
.ls-kopf {
  position: relative;
  z-index: 2;
  max-width: 46rem;
  margin: 0 auto clamp(2.4rem, 6svh, 4.2rem);
  padding: 0 1.5rem;
  text-align: center;
}
.ls-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 0 0 1.1rem;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--haze);
}
.ls-kicker::before, .ls-kicker::after {
  content: '';
  width: clamp(2rem, 7vw, 4.5rem);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--haze));
}
.ls-kicker::after { scale: -1 1; }

.ls-kopf h2 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink);
}
.ls-sub {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* ── Die Reihe und ihr Bus ─────────────────────────────────────────────
   `ol`, weil es eine aufgezählte Menge ist — die Zahlen zeigt sie nicht
   (list-style: none), siehe Kopf. */
.ls-reihe {
  --ls-rand: 1.25rem;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  max-width: min(92vw, 1120px);
  margin: 0 auto;
  padding: 0 var(--ls-rand);
  list-style: none;
}
/* DIE BUSLEITUNG: eine Haarlinie auf Höhe der Markenzeile, über die
   ganze Reihe. Sie liegt HINTER den Modulen (z-index −1 im Stapel der
   Reihe) und ist deshalb nur in den Fugen zu sehen — dort verbindet sie
   die Bauteile. Endet weich, damit sie nicht wie ein Rahmen wirkt. */
.ls-reihe::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: 2.05rem;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--linie-hell) 8%,
    var(--linie-hell) 92%,
    transparent);
  pointer-events: none;
}

/* ── Das Modul ─────────────────────────────────────────────────────────
   Deckend genug, dass ein Netzstrang dahinter den Text nie stört (das
   Netz hält ohnehin Keep-out um jedes Modul), durchscheinend genug, dass
   es auf der Platine liegt und nicht davor klebt. */
.ls-modul {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.35rem 1.5rem 1.15rem;
  border: 1px solid var(--linie);
  border-top-color: var(--linie-hell);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 42%),
    rgba(9, 9, 12, .78);
  box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .9);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

/* DIE PINS: zwei Leisten aus kurzen Strichen, oben und unten über die
   Kante hinaus — die Beine des Bauteils. Gemalt, nicht gebaut: ein
   wiederholter Verlauf statt zwanzig Elementen. */
.ls-modul::before,
.ls-modul::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    var(--linie-hell) 0 5px,
    transparent 5px 13px);
  opacity: .7;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
  pointer-events: none;
}
.ls-modul::before { top: -5px; }
.ls-modul::after  { bottom: -5px; }

/* Die Markenzeile: Rolle links, LED rechts. Space Mono, weil das hier
   eine BESCHRIFTUNG ist (wie der Aufdruck auf einem Bauteil), dieselbe
   Schrift wie die Kicker auf dem Handy und die Nummern im Wizard. */
.ls-marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.15rem;
  font: 400 .68rem/1 'Space Mono', ui-monospace, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.ls-led {
  width: 7px; height: 7px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--ink);
  /* Licht, das ein Bauteil abgibt — keine Deko-Aura: ein enger Kern und
     ein Schein, der nach unten fällt wie auf einer Platine. */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .06), 0 2px 10px rgba(255, 255, 255, .55);
  transition: box-shadow .35s var(--ease);
}

.ls-modul h3 {
  margin: 0;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}
.ls-satz {
  margin: .7rem 0 0;
  font-size: clamp(.86rem, 1vw, .93rem);
  line-height: 1.55;
  color: var(--ink-dim);
  text-wrap: pretty;
}

/* Die Beispiele: Haarlinien statt Spiegelstriche, ein kleines Lötauge
   vorne. Konkrete Dinge, keine Adjektive — sie beantworten „was heißt
   das für meinen Betrieb?". */
.ls-liste {
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--linie);
}
.ls-liste li {
  position: relative;
  padding: .62rem 0 .62rem 1.15rem;
  border-top: 1px solid var(--linie);
  font-size: .86rem;
  line-height: 1.4;
  color: var(--ink);
}
.ls-liste li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(.62rem + .7em - 3px);
  width: 6px; height: 6px;
  border: 1px solid var(--haze);
  border-radius: 50%;
  opacity: .8;
}

/* Preis und Weg sitzen immer UNTEN, in allen drei Modulen auf derselben
   Linie — egal, wie lang die Sätze darüber laufen. */
.ls-preis {
  margin: auto 0 0;
  padding-top: 1.1rem;
  font-family: 'Clash Display', 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  letter-spacing: .005em;
  color: var(--ink);
}
.ls-weg {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  align-self: flex-start;
  min-height: 44px;
  margin-top: .2rem;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  text-decoration: none;
  touch-action: manipulation;
}
.ls-weg span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.ls-weg i {
  font-style: normal;
  transition: translate .35s var(--ease);
}
.ls-weg:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.ls-fuss {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  margin: clamp(1.8rem, 4.5svh, 3rem) auto 0;
  padding: 0 1.5rem;
  text-align: center;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* ── Zeiger: das Modul unter der Hand wird „bestromt" ──────────────── */
@media (hover: hover) and (pointer: fine) {
  .ls-modul:hover {
    border-color: var(--linie-hell);
    box-shadow: 0 28px 56px -26px rgba(0, 0, 0, .95);
  }
  .ls-modul:hover::before,
  .ls-modul:hover::after { opacity: 1; filter: brightness(1.9); }
  .ls-modul:hover .ls-led {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .1), 0 2px 16px rgba(255, 255, 255, .85);
  }
  .ls-weg:hover span { background-size: 0 1px; background-position: 100% 100%; }
  .ls-weg:hover i { translate: 4px 0; }
}

/* ── Der Moment: einschalten ───────────────────────────────────────────
   Im Stationsmodus trägt die Station beim Ankommen 760 ms lang `kommt`
   (index.html, Regie). Solange sind die LEDs dunkel; fällt die Klasse,
   wechselt die Animation von `none` auf `ls-an` — das startet sie neu,
   bei JEDER Ankunft. Ohne Stationsmodus (Tablet, Handy) läuft sie
   einmal beim Laden; der Grundzustand ist „an", es kann also nichts
   dunkel hängen bleiben. */
.leistungen.kommt .ls-led { animation: none; opacity: .18; box-shadow: none; }
.leistungen:not(.kommt) .ls-led { animation: ls-an .5s var(--ease) backwards; }
.ls-modul:nth-child(2) .ls-led { animation-delay: .14s; }
.ls-modul:nth-child(3) .ls-led { animation-delay: .28s; }
@keyframes ls-an {
  0%   { opacity: .18; box-shadow: none; }
  35%  { opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 2px 22px rgba(255, 255, 255, 1); }
  100% { opacity: 1; }
}

/* ── Tablet (721–960 px): kein Stationsmodus, genug Breite für zwei
   Spalten IM Modul. Drei schmale Säulen nebeneinander brächen hier jede
   Zeile zweimal um; untereinander mit Text links und Liste rechts liest
   sich jedes Modul in einem Blick. */
@media (max-width: 960px) {
  .ls-reihe {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    max-width: 760px;
  }
  .ls-reihe::before { display: none; }
  .ls-modul {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* Die dritte Zeile (der Satz) ist die FLEXIBLE: die Liste rechts
       spannt über Zeile 2 und 3, und ihre Überhöhe soll unter dem Satz
       landen, nicht zwischen Titel und Satz. */
    grid-template-rows: auto auto 1fr auto;
    column-gap: 2rem;
    align-items: start;
  }
  /* Die Markenzeile über BEIDE Spalten — sonst säße die LED mitten im
     Modul am Ende der linken Spalte (Screenshot 820 px, 06.11.). */
  .ls-marke { grid-column: 1 / -1; grid-row: 1; }
  .ls-modul h3 { grid-column: 1; grid-row: 2; }
  .ls-satz { grid-column: 1; grid-row: 3; }
  .ls-liste { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
  .ls-preis { grid-column: 1; grid-row: 4; margin-top: 0; }
  .ls-weg { grid-column: 2; grid-row: 4; justify-self: start; align-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .leistungen .ls-led,
  .leistungen.kommt .ls-led { animation: none; opacity: 1; }
  .ls-modul, .ls-modul::before, .ls-modul::after, .ls-led, .ls-weg span, .ls-weg i { transition: none; }
}