/* Warum AI Værk (/warum-ai-vaerk, /why-ai-vaerk, /varfor-ai-vaerk).
   Aufbau A "Randtitel" (Justus, 02.10.2026): ein Manifest auf Papier. Der
   Leitsatz gross, dann je Absatz eine Zeile im Raster: Titel am Rand, Absatz
   in Lesebreite (rund 62 Zeichen), in jeder zweiten Zeile das Paarbild rechts.
   Unter 1080 px (Tablet, Telefon) steht der Titel ueber dem Absatz und das
   Bild darunter. Nur Tokens, keine eigenen Farben; der Auftritt kommt aus
   dem Reveal-System (jede Zeile ist ein Block der .shell, site.js). */

.wa-sec { padding-top: 0; }

/* Leitsatz: dieselbe Sprache wie Titel und Unterzeile im Kopf, umgekehrt
   gewichtet (Einleitung in Stein, die Mission in Tinte), eine Stufe unter
   der H1, damit der Kopf mit Glow-Wort und Zeichnung fuehrt. Er ist ein Satz
   wie eine Ueberschrift, darum bewusst balance statt pretty. */
.wa-leit {
  font-family: var(--font-brand);
  font-weight: 560;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ink);
  max-width: 19ch;
  text-wrap: balance;
  padding-bottom: clamp(48px, 7vw, 96px);
}
.wa-leit-pre { display: block; color: var(--stone); }

.wa-row {
  display: grid;
  grid-template-columns: minmax(150px, 184px) minmax(0, 29em) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 60px);
  align-items: start;
  padding-block: clamp(32px, 3.6vw, 48px);
  border-top: 1px solid var(--hairline);
}

/* Randtitel: dezent, eine Stufe ueber dem Fliesstext, auf die erste
   Textzeile ausgerichtet (17 px Text bei 1.7 Zeilenhoehe). */
.wa-title {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  padding-top: 3px;
  color: var(--ink);
}
.wa-text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Paarbild (jede zweite Zeile): ein SVG mit zwei gleich breiten Haelften;
   die Unterschriften stehen in zwei gleichen Spalten genau unter ihnen.
   Gleicher Takt mit und ohne Bild (Justus, 03.10.2026): jede Zeichnung
   hat dieselbe feste Hoehe (--wa-pair-h), die Breite folgt ihrer viewBox,
   und das Bild bleibt neben dem Absatz niedriger als der Text, so dass die
   Zeile so hoch ist wie ohne Bild. Die Unterschriften nehmen die Breite
   der Zeichnung an, statt sie zu bestimmen (width 0, min-width 100 %). */
.wa-sec { --wa-pair-h: 164px; }
.wa-pair {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  justify-self: end;
  align-self: center;
}
.wa-pair svg { display: block; height: var(--wa-pair-h); width: auto; max-width: 100%; }
.wa-pair-caps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 0;
  min-width: 100%;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--stone);
}
.wa-pair-caps > span { padding-inline: 4px; }
.wa-pair-caps > span:last-child { color: var(--ink-soft); }

/* Kopf: die Zeichnung tritt hinter H1 und Text zurueck, schmaler als auf
   den Service-Seiten (.prog-head-art in pages.css: 540 px). */
@media (min-width: 901px) {
  .page-warum .prog-head-art { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); }
}
.page-warum .prog-hero-art { max-width: 360px; }

/* Tablet und Telefon: Titel ueber dem Absatz, das Bild darunter. Die
   Abstaende innerhalb der Zeile sind gleich (Titel, Absatz, Bild). */
@media (max-width: 1080px) {
  .wa-sec { --wa-pair-h: 148px; }
  .wa-row {
    grid-template-columns: minmax(0, 34em);
    row-gap: 12px;
  }
  .wa-title { padding-top: 0; font-size: 17px; }
  .wa-pair { justify-self: start; align-self: start; margin-top: 12px; }
  /* Unterschriften immer zwei Zeilen hoch: jedes Bild gleich hoch, ob eine
     Unterschrift umbricht oder nicht. */
  .wa-pair-caps { min-height: 2.8em; }
}
@media (max-width: 900px) {
  .page-warum .prog-hero-art { max-width: 320px; }
}
@media (max-width: 600px) {
  .wa-sec { --wa-pair-h: 132px; }
  .page-warum .prog-hero-art { max-width: 280px; }
}