/* ================================================================
   ueberuns-kapitel.css — das Kapitelmuster der Über-uns-Unterseiten
   ================================================================

   Getragen von `/ueberuns/infrastruktur` (14.08.) und `/ueberuns/werte`
   (14.08.). Entstanden ist es für die Infrastruktur-Seite; als die
   Werte-Seite dasselbe Muster brauchte, ist daraus eine gemeinsame Datei
   geworden statt einer zweiten Kopie. Drei Fassungen desselben Rasters
   sind genau die Drift, vor der das Projekt-README warnt — die Fusszeile
   hat sie am 12.08. schon einmal vorgeführt (acht Fassungen, eine
   Vorlage).

   WARUM EIGENE DATEI UND NICHT site.css
     site.css liegt auf 24 Seiten. Das hier gilt zweien. Dieselbe
     Aufteilung, die `ueberuns-exp.css` für die Hub-Seite schon hat.

   WOHER DIE FARBEN KOMMEN
     Ausschliesslich aus den Tokens von site.css. Kein einziger Hexwert —
     sonst hätten diese Seiten als einzige eine zweite Farbtabelle, und
     die nächste Akzentänderung (zuletzt 05.08.) fasst sie nicht mit an.

     Für Strichzeichnungen ist `--accent` (#3f7fdf) richtig: Grafik
     braucht 3.0:1, Text 4.5:1. Blauer TEXT nimmt darum `--accent-text`.

   BEWEGUNG
     `prefers-reduced-motion` ist bereits global in site.css abgeräumt
     (`*{transition:none!important;animation:none!important}`). Jeder
     unsichtbare Anfangszustand hängt deshalb an einer Klasse, die
     `ueberuns-kapitel.js` nur setzt, wenn es wirklich animiert
     (`.zeichnet`, `.klart-auf`). Steht der blasse Zustand im
     Grundzustand, braucht das Element JavaScript, um überhaupt zu
     erscheinen — und bei abgeschalteter Bewegung bliebe es für immer
     weg. Genau das ist am 14.08. beim Aufmacherbild aufgefallen.
   ================================================================ */

/* ---------------- Aufmacher ---------------- */

/* Kein unterer Strich: direkt darunter folgt Bild oder Kennzahlenband,
   und eine Linie dazwischen zerschneidet den Zusammenhang, den beide
   gemeinsam herstellen. */
.about-sub-hero.kap-kopf { border-bottom: 0; }
.kap-kopf .lede { max-width: 640px; }

/* ---------------- Aufmacherbild ---------------- */

.kap-bild-block { padding: 0 0 clamp(40px, 5vw, 72px); }

.kap-bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  aspect-ratio: 2 / 1;
}
.kap-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Ruhiges Ankommen statt Aufblitzen: das Bild sitzt eine Spur zu gross
   und fährt auf seine Grösse zurück, während es aufklart. Kein Federn —
   ein Foto hat keinen Schwung, den es ausleben könnte (Apple:
   Überschwingen nur, wo eine Geste Schwung mitbrachte).

   Der unsichtbare Anfang hängt an `.klart-auf`, nicht am Grundzustand.
   Siehe Kopf dieser Datei. */
.kap-bild.klart-auf img {
  transform: scale(1.06);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              opacity .8s ease-out;
}
.kap-bild.klart-auf.ist-da img { transform: none; opacity: 1; }

/* Bildunterschrift IN das Bild, unten links, auf einem dunklen Verlauf:
   als eigene Zeile darunter wäre sie ein zweiter Absatz, der mit dem
   Aufmacher um die Aufmerksamkeit streitet. */
.kap-bild__fuss {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 42px 22px 16px;
  background: linear-gradient(to top, rgba(20, 24, 28, 0.72), rgba(20, 24, 28, 0));
  color: #fff;
  font-size: 13.5px; line-height: 1.4;
}
.kap-bild__ort { font-weight: 500; letter-spacing: -0.005em; }
/* Die Quelle steht bewusst nicht in Grau: auf dem Verlauf fällt jedes
   Grau unter die Lesbarkeitsschwelle. Weiss mit Transparenz behält den
   Abstand zur Hauptzeile und bleibt lesbar (Apple: Vibrancy statt
   flachem Grau auf durchscheinendem Grund). */
.kap-bild__quelle { font-family: var(--tq-mono); font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.72); }

/* ---------------- Kennzahlenband ---------------- */

/* Steht das Band direkt unter dem Aufmacher, braucht es eigenen Abstand
   nach oben. Folgt vorher ein Bild (Infrastruktur), bringt dessen Block
   den Abstand schon mit — dann greift diese Regel nicht.

   Als Geschwisterregel statt als zweite Klasse: welcher Fall vorliegt,
   steht bereits im Markup. Eine Klasse `--ohne-bild` waere dieselbe
   Auskunft ein zweites Mal, und die zweite laeuft irgendwann der ersten
   davon. */
.kap-kopf + .kap-zahlen-block { padding-top: clamp(28px, 4vw, 44px); }

.kap-zahlen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kap-zahl { background: var(--bg); padding: clamp(20px, 2.4vw, 28px); }
.kap-zahl__wert {
  display: block;
  font-size: clamp(24px, 2.9vw, 34px);
  line-height: 1.05;
  font-weight: 500;
  /* Grosse Schrift will engeren Satz — bei gleichbleibendem Wert sehen
     grosse Buchstaben zu weit auseinander aus. */
  letter-spacing: -0.03em;
  color: var(--accent-text, #1c4f9e);
  font-variant-numeric: tabular-nums;
}
.kap-zahl__wert .einheit { font-size: 0.55em; font-weight: 400; letter-spacing: 0; margin-left: 4px; color: var(--text-muted); }
.kap-zahl__text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* ---------------- Kapitel ---------------- */

.kap-band { padding: clamp(48px, 6vw, 84px) 0 clamp(32px, 4vw, 56px); }

.kap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
  padding: clamp(40px, 5vw, 68px) 0;
  border-top: 1px solid var(--border);
}
.kap:first-of-type { border-top: 0; padding-top: 0; }

/* Das Bild bleibt stehen, während der Text daneben läuft — es gehört zum
   ganzen Kapitel, nicht zu dessen erster Zeile. */
.kap__bild { position: sticky; top: 104px; }
.kap__bild svg { width: 100%; height: auto; display: block; overflow: visible; }

.kap__nr {
  font-family: var(--tq-mono);
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.14em;
  color: var(--accent-text, #1c4f9e);
}
.kap h2 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--text);
  max-width: 16ch;
  text-wrap: balance;
}
.kap h2 em { font-style: normal; color: var(--accent-text, #1c4f9e); }
.kap__lauf {
  margin: 18px 0 0;
  max-width: 56ch;
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.62;
  color: var(--text-body);
}

/* ---------------- Beleg-Karte ---------------- *
   Der Unterschied zwischen einer Werteseite und einer Werbeseite ist die
   Frage «woran sieht man das». Diese Karte beantwortet sie mit einem
   Datum und einer Tat. Sie steht bewusst NICHT im Fliesstext: eine Tat
   mit Datum ist ein Beleg, kein Argument, und sie soll auch beim
   Überfliegen als solcher erkennbar sein.

   Balken links statt Rahmen rundum: ein Rahmen macht daraus einen
   zweiten Kasten neben den Aufklapp-Zeilen; der Balken hängt sie an den
   Text an, zu dem sie gehört. */
.kap-beleg {
  margin: 22px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--bg-alt);
  max-width: 56ch;
}
.kap-beleg__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  font-family: var(--tq-mono);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
}
.kap-beleg__datum { color: var(--accent-text, #1c4f9e); }
.kap-beleg p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.kap-beleg p + p { margin-top: 8px; }
.kap-beleg strong { font-weight: 500; color: var(--text); }

/* ---------------- Aufklapp-Zeilen ---------------- */

.kap-liste { margin-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--border); }
.kap-zeile { border-bottom: 1px solid var(--border); }

.kap-zeile__knopf {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 17px 2px;
  background: none; border: 0;
  font: 500 15.5px/1.35 var(--tq-ui);
  letter-spacing: -0.008em;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  /* Rückmeldung sitzt auf dem Druck, nicht auf dem Loslassen. */
  transition: color .15s ease;
}
.kap-zeile__knopf:hover { color: var(--accent-text, #1c4f9e); }
.kap-zeile__knopf:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.kap-zeile__knopf:active { color: var(--accent-text, #1c4f9e); }
.kap-zeile__titel { flex: 1 1 auto; }

/* Das Zeichen ist ein Plus, das zum Minus wird: zwei Striche, von denen
   sich einer wegdreht. Ein Zeichentausch (+ gegen −) spränge; die
   Drehung zeigt, dass es dieselbe Sache in zwei Zuständen ist. */
.kap-zeile__zeichen { flex: 0 0 auto; width: 18px; height: 18px; position: relative; color: var(--accent); }
.kap-zeile__zeichen::before,
.kap-zeile__zeichen::after {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1.5px; margin-top: -0.75px;
  background: currentColor; border-radius: 1px;
  transition: transform .34s cubic-bezier(0.32, 0.72, 0, 1);
}
.kap-zeile__knopf[aria-expanded="false"] .kap-zeile__zeichen::after { transform: rotate(90deg); }
.kap-zeile__knopf[aria-expanded="true"]  .kap-zeile__zeichen::after { transform: rotate(0deg); }

/* Aufklappen über `grid-template-rows: 0fr -> 1fr`. Eine feste
   `max-height` wäre geraten und bei längerem Text entweder abgeschnitten
   oder träge; das Raster misst selbst. */
.kap-zeile__huelle {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(0.32, 0.72, 0, 1);
}
.kap-zeile.ist-offen .kap-zeile__huelle { grid-template-rows: 1fr; }
.kap-zeile__inhalt { overflow: hidden; }
.kap-zeile__inhalt > div { padding: 0 0 20px; }
.kap-zeile__inhalt p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text-muted); max-width: 54ch; }
.kap-zeile__inhalt p + p { margin-top: 10px; }
.kap-zeile__inhalt strong { color: var(--text-body); font-weight: 500; }
.kap-zeile__inhalt .mono { font-family: var(--tq-mono); font-size: 0.92em; color: var(--text-body); }

/* ---------------- Negativliste ---------------- *
   «Was wir nicht tun». Der stärkste Abschnitt einer Werteseite, weil
   niemand ihn abschreiben kann, ohne es auch zu tun.

   Die Kreuze sind Grafik, kein Text: `aria-hidden` am Zeichen, damit
   eine Vorlesehilfe nicht vor jeder Zeile «Kreuz» sagt — die Überschrift
   des Abschnitts trägt die Verneinung bereits. */
.kap-nicht {
  margin: clamp(40px, 5vw, 68px) 0 0;
  padding: clamp(30px, 4vw, 48px) clamp(24px, 3vw, 44px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
}
.kap-nicht h2 {
  margin: 14px 0 0;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.1; letter-spacing: -0.02em; font-weight: 500;
  color: var(--text);
}
.kap-nicht h2 em { font-style: normal; color: var(--accent-text, #1c4f9e); }
.kap-nicht__lauf { margin: 14px 0 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.kap-nicht__liste {
  list-style: none;
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.kap-nicht__liste li {
  background: var(--bg-alt);
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 4px;
}
.kap-nicht__x {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  color: var(--text-faint);
}
.kap-nicht__liste b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.008em; color: var(--text); }
.kap-nicht__liste span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* ---------------- Schlusskasten ---------------- */

.kap-schluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-alt);
}
.kap-schluss h3 { margin: 0 0 6px; font-size: clamp(19px, 2vw, 23px); font-weight: 500; letter-spacing: -0.02em; }
.kap-schluss p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); max-width: 46ch; }
.kap-schluss__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
/* Der Pfeil ist groesser als die Schrift daneben — sonst wirkt er wie ein
   Satzzeichen statt wie eine Richtung. Steht hier statt inline, damit die
   Rumpfdateien ohne einen einzigen `style` auskommen. */
.kap-schluss__pfeil { font-size: 18px; line-height: 1; }
.kap-schluss .btn-hell {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 16px 24px;
  border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px; font-weight: 500; letter-spacing: -0.01em;
  transition: border-color .15s, color .15s;
}
.kap-schluss .btn-hell:hover { border-color: var(--text-faint); color: var(--accent-text, #1c4f9e); }

/* ---------------- Strichzeichnungen ---------------- */

.kap-svg { color: var(--accent); }
.kap-svg .fl { fill: var(--accent-soft); }
/* Ausstanzung: liegt zwischen zwei Formen und nimmt der unteren die
   Linien weg, damit die obere davor steht statt darin. Bleibt bewusst
   aus der Einblend-Regel heraus — sonst schienen während des Zeichnens
   die Linien darunter durch. */
.kap-svg .stanz { fill: var(--bg); }
.kap-svg .li { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kap-svg .li--zart { stroke: var(--marke-blau-3, #8bb2ea); }
.kap-svg .li--weg { stroke: var(--text-faint); }
.kap-svg .pu { fill: currentColor; }

/* Zeichnen: `pathLength="1"` normiert jede Linie auf die Länge 1 — sonst
   bräuchte jede Form ihren eigenen Dash-Wert, und die kurze wäre fertig,
   bevor die lange begonnen hat. */
.kap-svg.zeichnet .li { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(0.33, 1, 0.68, 1); }
.kap-svg.zeichnet .fl,
.kap-svg.zeichnet .pu { opacity: 0; transition: opacity .5s ease-out .45s; }
.kap-svg.zeichnet.ist-da .li { stroke-dashoffset: 0; }
.kap-svg.zeichnet.ist-da .fl,
.kap-svg.zeichnet.ist-da .pu { opacity: 1; }
/* Gestaffelt, damit die Zeichnung entsteht statt auf einen Schlag da zu
   sein — die Reihenfolge erzählt, was zuerst kommt. */
.kap-svg.zeichnet .li[data-nach="1"] { transition-delay: .10s; }
.kap-svg.zeichnet .li[data-nach="2"] { transition-delay: .20s; }
.kap-svg.zeichnet .li[data-nach="3"] { transition-delay: .30s; }
.kap-svg.zeichnet .li[data-nach="4"] { transition-delay: .40s; }
.kap-svg.zeichnet .li[data-nach="5"] { transition-delay: .50s; }
/* Der Streichstrich kommt zuletzt und langsamer: er ist die Pointe der
   Zeichnung «lieber streichen als behaupten», und eine Pointe, die
   gleichzeitig mit dem Aufbau kommt, ist keine. */
.kap-svg.zeichnet .li--weg { transition-duration: .55s; transition-delay: 1.05s; }

/* Der Punkt, der lebt: einziger Dauerläufer dieser Seiten. Bewusst
   langsam und klein — er soll im Augenwinkel sagen «es misst gerade»,
   nicht die Aufmerksamkeit halten. Bei abgeschalteter Bewegung bleibt er
   stehen (site.css schaltet `animation` global ab) und ist immer noch
   ein Punkt. */
@keyframes kap-puls {
  0%, 100% { opacity: .30; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.35); }
}
.kap-svg .pulst { transform-box: fill-box; transform-origin: center; animation: kap-puls 2.6s ease-in-out infinite; }
.kap-svg .pulst--2 { animation-delay: .5s; }
.kap-svg .pulst--3 { animation-delay: 1s; }

/* Der Wächter, der im Kreis geht: dieselbe Überlegung wie beim Punkt —
   sehr langsam, damit er nicht zieht. 12 s pro Umlauf liegt weit über
   der Frequenz, die als Flackern wahrgenommen wird.

   DREHPUNKT IST DIE MITTE DER ZEICHNUNG, nicht die des Elements. Mit
   `transform-box: fill-box` dreht sich jede Form um ihr eigenes
   Kästchen — Bogen und Pfeilspitze liefen dann auseinander, statt
   zusammen zu kreisen (14.08. beim kopflosen Rendern gesehen). Darum
   `view-box` und der feste Mittelpunkt des 240er-Rasters. Gedreht wird
   die Gruppe, nicht die einzelne Linie. */
@keyframes kap-kreis { to { transform: rotate(360deg); } }
.kap-svg .kreist {
  transform-box: view-box;
  transform-origin: 120px 120px;
  animation: kap-kreis 12s linear infinite;
}

/* ---------------- schmale Fenster ---------------- */

@media (max-width: 900px) {
  .kap-zahlen { grid-template-columns: repeat(2, 1fr); }
  .kap { grid-template-columns: 1fr; gap: 28px; }
  /* Auf dem Telefon steht das Bild über dem Text und darf nicht kleben:
     eine haftende Grafik, die den halben Bildschirm belegt, lässt den
     Text durch ein Guckloch laufen. */
  .kap__bild { position: static; max-width: 220px; }
  .kap h2 { max-width: 100%; }
  .kap-nicht__liste { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .kap-zahlen { grid-template-columns: 1fr; }
  .kap-bild { aspect-ratio: 4 / 3; }
  .kap-bild__fuss { padding: 36px 16px 14px; }
  .kap-schluss { flex-direction: column; align-items: flex-start; }
  .kap-schluss__knoepfe { width: 100%; }
  .kap-schluss__knoepfe > a { flex: 1 1 auto; justify-content: center; }
}