/* ============================================================
   VCI Design — Leistungen
   Nur auf der Startseite.

   Zwei gleichwertige Haelften an einer Naht. Hier stand zuvor
   eine Liste nummerierter Zeilen, links der Name, rechts Text,
   Stichworte und ein Grundsatz, wie ein Datenblatt. Nach dem
   Statement darueber brach damit alles zugleich ab: der Grad fiel
   von ueber 280 auf 28 Pixel, die Achse sprang von der Mitte nach
   links, und dazwischen lagen fast 300 Pixel leerer Raum.

   Jetzt fuehrt eine Linie durch: das Lot faellt aus der Mitte der
   Cyan-Linie unter "Sie schon", laeuft durch das Label und wird
   zur Naht zwischen den Disziplinen. Seitenachse und Linie des
   Statements tragen also bis in diese Sektion hinein.

   Die Leitprinzipien gelten weiter: keine Karten, kein Schatten,
   kein Radius, keine Flaechen. Gegliedert wird ueber Achse,
   Spiegelung und Schriftgrad.
   ============================================================ */

.leistungen {
  /* Bezug fuer das Lot, das nach oben aus der Sektion hinausragt. */
  position: relative;
}

/* --- Das Lot ---------------------------------------------------
   Beginnt genau unter "Sie schon". Das Statement endet mit
   --space-xxl Innenabstand unter dem Link, und derselbe Token
   verschiebt das Lot hier nach oben. Solange beide Seiten an
   diesem einen Token haengen, treffen sie sich, egal wie breit das
   Fenster ist. Nachgemessen, siehe Commit.

   Es endet --space-m ueber dem Label. Das Label sitzt nach dem
   Innenabstand dieser Sektion, also ebenfalls --space-xxl unter
   ihrer Oberkante.

   2 Pixel wie jede duenne Linie der Seite, .hero__rule,
   .cta__strich und die Naht darunter. Unter der schweren Linie des
   Statements haengt es wie ein Lot am Balken, daher der Name.

   Die Hoehe steht fest, animiert wird nur scaleY. Eine animierte
   height waere Layout in jedem Frame.
   --------------------------------------------------------------- */
.leistungen__lot {
  position: absolute;
  left: 50%;
  top: calc(var(--space-xxl) * -1);
  width: 2px;
  height: calc(var(--space-xxl) * 2 - var(--space-m));
  margin-left: -1px;
  background-color: var(--color-accent);
  transform-origin: top center;
}

/* Dieselbe Etikettform wie "Arbeiten" und "Ueber uns" auf dieser
   Seite, nur mittig: es steht auf der Achse, die das Lot vorgibt. */
.leistungen__label {
  font-family: var(--font-text);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  line-height: var(--leading-text);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-fg-muted);
}

/* --- Feld und Naht --------------------------------------------- */
.leistungen__feld {
  position: relative;
  margin-top: var(--space-xl);
}

.leistungen__naht {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background-color: var(--color-accent);
  transform-origin: top center;
}

/* Kein Spaltenabstand. Den Abstand zur Naht traegt jede Haelfte
   selbst als Innenabstand, und das ist Absicht: so liegt die
   Kante jeder Haelfte genau auf der Naht, und genau dort wird
   beim Oeffnen beschnitten. Die Inhalte treten dadurch aus der
   Naht heraus und nicht aus einem unsichtbaren Rand daneben. */
.leistungen__paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.leistung--links {
  padding-right: var(--space-xl);
  text-align: right;
}

.leistung--rechts {
  padding-left: var(--space-xl);
  text-align: left;
}

/* --- Beschnitt an der Naht --------------------------------------
   Jede Haelfte wird genau an einer Kante beschnitten, der zur Naht,
   und an keiner anderen. Deshalb clip-path mit einseitigem inset
   und nicht overflow: overflow schnitte alle vier Seiten, und auf
   schmaleren Schreibtischen reicht die aeussere Zeile bis an den
   Rand, wo der Ueberhang der kursiven Buchstaben verloren ginge.

   Die negativen Werte stehen fuer "praktisch unbegrenzt" nach
   aussen. Der Beschnitt selbst bewegt sich nie, animiert wird
   allein das transform der Zeilen darin, die Projektregel bleibt
   also unberuehrt.

   Nur ab 769px, wo die Haelften nebeneinanderstehen. Mobil gibt es
   keine Naht zwischen ihnen und nichts zu beschneiden.
   --------------------------------------------------------------- */
@media (min-width: 769px) {
  .leistung--links {
    clip-path: inset(-100vh 0 -100vh -100vw);
  }

  .leistung--rechts {
    clip-path: inset(-100vh -100vw -100vh 0);
  }
}

/* --- Name ------------------------------------------------------
   display-medium und bewusst nicht display-large: die groesste
   Stufe gehoert der Hero-Headline allein, dieselbe Regel wie beim
   CTA-Abschluss. Beide Namen stehen auf exakt derselben Stufe.
   --------------------------------------------------------------- */
.leistung__name {
  font-size: var(--text-display-medium);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
}

.leistung__zeile {
  display: block;
}

/* Das & in der kursiven Playfair. Deren Ampersand ist eine eigene
   Zeichnung und keine schraeggestellte Kopie, und es ist genau das
   Zeichen, das diese Sektion zusammenhaelt. Die kursive Datei wird
   auf jeder Seite vorgeladen und stand bis hierher ungenutzt. */
.leistung__und {
  font-style: italic;
  font-weight: var(--weight-regular);
}

/* --- Der Satz --------------------------------------------------
   Je drei Woerter, dieselbe Bauform bei beiden: Partizip, Komma,
   kurzer Nachsatz. Kursiv und in der textfaehigen Variante der
   Markenfarbe, 5,07:1 auf dem Seitengrund. Reines Cyan bliebe hier
   bei 1,50:1 und ist als Textfarbe ausgeschlossen.
   --------------------------------------------------------------- */
.leistung__satz {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--text-heading-large);
  font-style: italic;
  font-weight: var(--weight-regular);
  line-height: var(--leading-heading);
  color: var(--color-accent-ink);
  text-wrap: balance;
}

.leistung__stichworte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-l);
  font-size: var(--text-small);
  color: var(--color-fg-muted);
}

.leistung--links .leistung__stichworte {
  justify-content: flex-end;
}

/* Nur mobil, siehe unten. */
.leistung__verbindung {
  display: none;
}

/* --- Mobil ------------------------------------------------------
   Die Haelften stehen untereinander, beide mittig, auf der Achse,
   die das Lot vorgibt. Die Naht zwischen zwei Spalten gibt es hier
   nicht, an ihre Stelle tritt ein Stueck Lot zwischen den beiden
   Disziplinen. Breakpoint deckungsgleich mit tokens.css.
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .leistungen__naht {
    display: none;
  }

  .leistungen__paar {
    grid-template-columns: minmax(0, 1fr);
  }

  .leistung--links,
  .leistung--rechts {
    padding-inline: 0;
    text-align: center;
  }

  .leistung--links .leistung__stichworte,
  .leistung--rechts .leistung__stichworte {
    justify-content: center;
  }

  .leistung__verbindung {
    display: block;
    width: 2px;
    height: var(--space-xl);
    margin: var(--space-l) auto;
    background-color: var(--color-accent);
    transform-origin: top center;
  }
}