/* ==========================================================================
   /unternehmen: Version B ("un-" = Unternehmen neu)
   --------------------------------------------------------------------------
   Bisher brauchte die Seite kein eigenes Stylesheet, sie lieh sich alles aus
   site.css und loesungen-detail.css. Mit der Team-Sektion kommt der erste
   Baustein dazu, den es global nicht gibt.

   Warum nicht .co-founder weiterbenutzt: Die zwei grossen Gruender-Karten
   trugen Portrait, Rolle, vier Bullets und einen LinkedIn-Fuss. Auf einer
   Unternehmensseite liest sich das als Leistungsschau von zwei Personen,
   nicht als Team. Hier steht deshalb eine Reihe gleich grosser Karten:
   Bild, Name, Funktion. Die Gruender stehen vorn und sind Teil der Reihe,
   nicht daneben.

   Ohne Foto rendert die Karte ein Monogramm in einer der Abteilungsfarben
   (--dept-*), damit eine halb befuellte Reihe nicht nach Luecke aussieht.

   Responsive-Overrides fuer Mobile liegen wie ueberall in
   assets/responsive.css, hier steht nur der Breakpoint, der direkt an
   diesem Baustein haengt.
   ========================================================================== */

.un-team {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}

.un-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 20px 24px;
  border: 1px solid var(--border-1);
  border-radius: 20px;
  background: var(--paper);
}

/* Portrait und Monogramm teilen sich Groesse und Rahmen, damit eine Reihe
   aus beidem ruhig bleibt. */
.un-face {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(220 20% 96%);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 12%, transparent);
}

.un-face img { width: 100%; height: 100%; object-fit: cover; display: block; }

.un-mono {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--un-tone, var(--primary));
  background: color-mix(in oklab, var(--un-tone, var(--primary)) 12%, white);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--un-tone, var(--primary)) 14%, transparent);
}

.un-person h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg-1);
}

.un-person-role {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--primary);
  margin: -6px 0 0;
}

/* Eine Zeile pro Person, wofuer sie steht, als Chip im Ton der Person.
   Zwei Fassungen sind vorher durchgefallen: eine Trennlinie ueber die ganze
   Karte (zerschnitt sie in zwei Haelften) und eine kursive Serife (kommt
   sonst nirgends auf der Seite vor und wirkte deshalb fremd). Der Chip ist
   die Form, die das Design ohnehin kennt, siehe .ln-jump-chip und .pn-dept. */
.un-person-tagline { margin: 4px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.005em; color: var(--fg-2); text-wrap: balance; }

/* Drei Spalten geben bei sechs Personen zwei volle Reihen. Darunter zwei
   Spalten, damit die Karten nicht auf Briefmarkengroesse schrumpfen. */
@media (max-width: 860px) {
  .un-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Rhythmus der Seite (2026-09)
   --------------------------------------------------------------------------
   Nach dem Team kamen dreimal hintereinander dieselbe .cap-grid: Wertlogik,
   Vision, Prinzipien, je drei bis vier gleich aussehende Kacheln mit Icon.
   Und davor drei Absaetze Fliesstext ohne Form. Eine Unternehmensseite, die
   von oben bis unten gleich aussieht, wird nicht gelesen, sondern gescrollt.

   Jede Sektion hat jetzt ihre eigene Gestalt:
   Weg (Schritte auf einer Linie) . Team (Karten) . Kette (dunkel) .
   Split (stehende Ueberschrift, laufende Zeilen) . Kreuz (2x2 ohne Kasten).
   ========================================================================== */

/* ---------- 01 Der Weg: drei Schritte untereinander ---------- */

/* Erst standen die drei nebeneinander. Bei drei Spalten bleiben pro Schritt
   rund 300px, die Ueberschrift bricht auf vier Zeilen und der Absatz auf
   sieben: von aussen sieht das gequetscht aus, egal wieviel Abstand
   dazwischen steht. Untereinander bekommt jeder Schritt die volle Textbreite,
   und die Achse laeuft senkrecht durch die Ziffern. */

/* Drei Spalten pro Schritt statt einer Textsaeule: Ziffer, Ueberschrift,
   Fliesstext. Untereinander in 840px Breite blieb links und rechts ein
   Drittel der Seite leer, und fuenf Schritte wurden zu einer sehr langen
   Strecke. Nebeneinander gelesen ist jeder Schritt eine Zeile, die Reihe
   passt auf eine Bildschirmhoehe. */

.un-weg { max-width: 1160px; margin: 0 auto; border-top: 1px solid var(--border-1); }

.un-schritt { position: relative; display: grid;
  grid-template-columns: 44px minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0 40px; align-items: start; padding: 30px 0;
  border-bottom: 1px solid var(--border-1); }

.un-schritt-num { position: relative; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--border-1); font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--primary); }

/* Die Achse verbindet die Ziffern und endet beim letzten Schritt. */
.un-schritt::before { content: ''; position: absolute; top: 74px; bottom: -1px; left: 22px;
  width: 1px; background: var(--border-1); }
.un-schritt:last-child::before { display: none; }

.un-schritt-kicker { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); margin: 4px 0 10px; }

.un-schritt h3 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(21px, 1.8vw, 25px);
  line-height: 1.2; letter-spacing: -0.022em; margin: 0; color: var(--fg-1); text-wrap: balance; }

.un-schritt-body { margin: 0; padding-top: 20px; font-size: 16px; line-height: 1.62; color: var(--fg-2); }
.un-schritt-body p { margin: 0; }

/* ---------- Nur in der Variante "fusion-plus" ---------- */

/* Gegenueberstellung der beiden Lager: zwei Listen nebeneinander, getrennt
   durch eine Haarlinie, ohne Kartenrahmen. */

/* Eine hervorgehobene Zeile, der Satz der Sektion. */

/* Faktenzeile zum Abschluss, im Ton der Metazeilen der Seite. */

@media (max-width: 700px) {
}

/* Einblenden beim Scrollen. `.is-armed` setzt der Effekt in
   unternehmen-neu.jsx; ohne JavaScript greift nichts davon und die Schritte
   stehen sofort. */
.un-weg.is-armed .un-schritt { opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.un-weg.is-armed .un-schritt.is-in { opacity: 1; transform: none; }

/* Der Fliesstext kommt eine Spur nach der Ueberschrift, damit die Zeile von
   links nach rechts aufgeht statt als Block zu erscheinen. */
.un-weg.is-armed .un-schritt-body { opacity: 0; transform: translateY(10px);
  transition: opacity .5s ease .12s, transform .5s cubic-bezier(.22,.61,.36,1) .12s; }
.un-weg.is-armed .un-schritt.is-in .un-schritt-body { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .un-weg.is-armed .un-schritt,
  .un-weg.is-armed .un-schritt-body { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .un-schritt { grid-template-columns: 44px minmax(0, 1fr); gap: 0 28px; }
  .un-schritt-body { grid-column: 2; padding-top: 12px; }
  .un-schritt h3 { max-width: 30ch; }
}

@media (max-width: 700px) {
  .un-schritt { grid-template-columns: 36px 1fr; gap: 0 18px; padding: 26px 0; }
  .un-schritt-num { width: 36px; height: 36px; font-size: 11.5px; }
  .un-schritt::before { top: 62px; left: 18px; }
  .un-schritt h3 { max-width: none; }
}

/* ---------- 02 Die Kette: wie aus Arbeit ein Preis wird ---------- */

/* Erst waren das drei gerundete Kaesten mit Pfeilen dazwischen, auf dunklem
   Grund also drei fast unsichtbare Rahmen um ungleich lange Texte. Jetzt
   traegt die Typografie die Reihenfolge: Haarlinie als Trenner, Label in
   Mono, der Begriff gross in der Serifenschrift, darunter ein Satz. */

.un-kette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1020px; margin: 60px auto 0; text-align: left; }

.un-glied { padding: 4px 40px; border-left: 1px solid rgba(196,181,253,.28); }
.un-glied:first-child { padding-left: 0; border-left: 0; }
.un-glied:last-child { padding-right: 0; }

.un-glied-lbl { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #A78BFA; margin: 0 0 14px; }

/* Einzeilig: der laengste Begriff ("Uebernommene Arbeit") muss in eine
   Spalte passen, sonst steht eine Ueberschrift zweizeilig neben zwei
   einzeiligen und die drei Absaetze starten auf verschiedenen Hoehen. */
.un-glied h3 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(21px, 2.1vw, 26px);
  line-height: 1.15; letter-spacing: -0.022em; margin: 0 0 14px; color: #fff; white-space: nowrap; }

@media (max-width: 860px) { .un-glied h3 { font-size: 26px; white-space: normal; } }

.un-glied p { margin: 0; font-size: 15px; line-height: 1.65; color: #DDD6FE; }

.un-kette-note { max-width: 1020px; margin: 46px auto 0; padding-top: 26px;
  border-top: 1px solid rgba(196,181,253,.2); display: flex; align-items: center; gap: 12px;
  justify-content: center; font-size: 14.5px; color: #EDE9FE; }
.un-kette-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .un-kette { grid-template-columns: 1fr; }
  .un-glied { padding: 26px 0; border-left: 0; border-top: 1px solid rgba(196,181,253,.22); }
  .un-glied:first-child { padding-top: 0; border-top: 0; }
}

/* ---------- 03 Split: stehende Ueberschrift, laufende Zeilen ---------- */

.un-split { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 72px; max-width: 1100px; margin: 0 auto; align-items: start; }

.un-split-kopf { position: sticky; top: 110px; }
/* Eigene Groesse statt .h-section (clamp bis 56px): in einer halbbreiten
   Spalte bricht eine 56px-Serifenzeile in fuenf ausgefranste Zeilen und
   ueberfaehrt die Liste rechts. Hier traegt die Ueberschrift die Sektion,
   nicht die Seite, sie darf deutlich kleiner sein. */
.un-split-kopf h2 { margin: 14px 0 18px; font-size: clamp(28px, 2.7vw, 36px); line-height: 1.16; }
.un-split-kopf .lead { margin: 0; font-size: 17px; }

.un-zeile { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--border-1); }
.un-zeile:last-child { border-bottom: 1px solid var(--border-1); }

.un-zeile-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--primary); padding-top: 4px; }

.un-zeile h3 { font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1.25;
  letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg-1); }

.un-zeile p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-1); }

@media (max-width: 900px) {
  .un-split { grid-template-columns: 1fr; gap: 36px; }
  .un-split-kopf { position: static; }
}

/* ---------- 04 Kreuz: vier Saetze, getrennt durch Haarlinien ---------- */

.un-kreuz { display: grid; grid-template-columns: 1fr 1fr; max-width: 1000px; margin: 0 auto;
  border-top: 1px solid var(--border-1); }

.un-satz { padding: 34px 40px; border-bottom: 1px solid var(--border-1); }
.un-satz:nth-child(odd) { border-right: 1px solid var(--border-1); padding-left: 0; }
.un-satz:nth-child(even) { padding-right: 0; }

.un-satz-ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--accent); color: var(--primary); margin-bottom: 16px; }

.un-satz h3 { font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1.25;
  letter-spacing: -0.02em; margin: 0 0 10px; color: var(--fg-1); text-wrap: balance; }

.un-satz p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-1); }

@media (max-width: 760px) {
  .un-kreuz { grid-template-columns: 1fr; }
  .un-satz, .un-satz:nth-child(odd), .un-satz:nth-child(even) { padding: 28px 0; border-right: 0; }
}

/* ---------- Partner ----------
   Zwei Bausteine: die Partner selbst (Logo, Art, Satz, Link auf ihre Seite)
   und darunter die Einladung, einer zu werden. Solange kein Partner
   eingetragen ist, rendert nur die Einladung. */

/* Feste Spaltenzahl statt auto-fit: bei vier Partnern ergab auto-fit eine
   Reihe aus drei Karten und eine einzelne darunter. */
.un-partner { display: grid; grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
  gap: 18px; max-width: 1100px; margin: 0 auto 40px; align-items: stretch; }

.un-partner-karte { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px;
  border: 1px solid var(--border-1); border-radius: 20px; background: var(--paper);
  text-decoration: none; color: inherit; }
.un-partner-karte:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-1)); }

/* Logos kommen in unterschiedlichen Formaten, deshalb eine feste Buehne mit
   begrenzter Hoehe statt fester Breite. */
/* Die Buehne ist hoch genug, dass auch ein fast quadratisches Logo (ISO)
   Groesse bekommt; die Breite deckelt die sehr breiten (Dietrich Spohr),
   damit keines die anderen erschlaegt. Keine Opacity, keine Graustufe: die
   Logos stehen so, wie ihre Eigentuemer sie fuehren. */
.un-partner-logo { display: flex; align-items: center; height: 60px; }
/* Zwei der vier Logos tragen viel Weissraum in der Bilddatei und wirken
   dadurch bei gleicher Buehnenhoehe kleiner als die anderen. `--logo-skala`
   gleicht das je Partner aus, statt die Dateien zu beschneiden. */
.un-partner-logo img { max-height: calc(100% * var(--logo-skala, 1));
  max-width: calc(180px * var(--logo-skala, 1)); object-fit: contain; }
/* Solange kein Logo vorliegt, traegt die Karte den Namen als Wortmarke. */
.un-partner-logo b { font-family: var(--font-serif); font-weight: 700; font-size: 19px;
  line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-1); }

.un-partner-satz { font-size: 14.5px; line-height: 1.55; color: var(--fg-1); }
.un-partner-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--primary); }

/* Einladung: ein Block, ein Weg. Zwei Karten mit je eigenem CTA waren eine
   zweite Kontaktstrecke fuer dieselbe Anfrage. */
.un-werden { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; max-width: 1100px; margin: 0 auto; padding: 30px 32px;
  border: 1px solid var(--border-1); border-radius: 20px; background: var(--paper); }
.un-werden h3 { font-family: var(--font-serif); font-weight: 700; font-size: 21px; line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 8px; color: var(--fg-1); }
.un-werden p { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.un-werden-cta { flex: 0 0 auto; }

@media (max-width: 1000px) {
  .un-partner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  .un-partner { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .un-werden { padding: 26px 22px; }
}