/* ==========================================================================
   labs-partner.css — Swiss AI Labs und Swiss AI Partner
   Angelegt 2026-08-26.

   Beide Seiten laufen auf dem GLEICHEN Seitengeruest wie die Haupt-Reiter
   (ki-beratung, ki-dienste, ki-loesungen), nicht auf der Use-Case-Vorlage:

     <main class="subpage-main labs-main saa-usp-scope">
       <section class="hero-scene hero-scene--subpage …">   <- global
       <section class="labs-section …">                     <- hier

   Was diese Datei bewusst NICHT selbst baut, weil es global existiert:
     .hero-scene*            Hero samt Bildbuehne und Verlaeufen (styles.css)
     .saa-signal-label       Eyebrow mit Strichmarke (styles.css)
     .saig-shell             Inhaltsbreite und Seitenrand (_contract.css)
     .page-section--dark     dunkles Band; ist von der globalen
                             Ink-Haertung in styles.css AUSGENOMMEN und
                             wird vom Painter in js/main.js als dunkle
                             Flaeche erkannt. Darum tragen alle dunklen
                             Baender hier diese Klasse — eigene dunkle
                             Hintergruende wuerden schwarzen Text bekommen.

   Abschnittsabstand kommt ebenfalls global:
     :where(.site-main, .subpage-main) > section { padding: --saa-section-y }

   NAMENSKOLLISION: `.partner-carousel*` in styles.css ist der Technologie-
   Logostreifen der Startseite und hat mit dieser Seite nichts zu tun.
   Neue Klassen hier heissen darum `.partner-<abschnitt>` und niemals
   `.partner-carousel…`.

   Schriftgroessen fuer p/li/h2/h3 sind global per !important festgelegt
   (styles.css ~11632). Diese Datei setzt sie NICHT neu — kleinere Meta-Texte
   stehen deshalb in <span>, nicht in <p>.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero-Bildausschnitt: hier bewusst KEINE Regel.

   styles.css erzwingt fuer jedes Hero-Bild `object-position: center` gleich
   mehrfach mit !important (u. a. `main :where(.hero-scene__media img)` und
   `.hero-scene__media img, .saa-hero img, …`). Damit sind auch die dortigen
   Regeln je Bildslot (`[data-asset-slot="beratung.hero"] { 62% top }` und
   Geschwister) seit Langem wirkungslos — sie stehen da, wirken aber nicht.

   Fuer beide Motive hier ist die Mitte ohnehin richtig: das Labs-Bild ist
   symmetrisch um den zentralen Wuerfel aufgebaut, beim Partner-Bild sitzt die
   Personengruppe mittig rechts. Eine Regel mit !important auf ID-Ebene waere
   also Aufwand ohne Gewinn — sie fehlt hier absichtlich, nicht aus Versehen.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Hero fuellt den Bildschirm bis nach unten.

   styles.css (~27261) deckelt jeden Hero auf
     min-height: min(920px, calc(100svh - var(--saa-header-h)))
   Bis rund 1010px Fensterhoehe faellt das nicht auf, weil die zweite Haelfte
   des min() kleiner ist. Darueber greift die feste Obergrenze: bei 1080px
   Fensterhoehe bleiben 84px weisser Streifen unter dem Hero, bei 1200px
   schon 204px.

   Hier faellt die Obergrenze weg — der Hero endet immer exakt am unteren
   Fensterrand. Nur ab 1025px: darunter kuerzt styles.css den Hero absichtlich
   (min-height: 0, kleineres Polster), und davon sollen Labs und Partner nicht
   abweichen.

   Spezifitaet: die zu schlagende Regel ist
   `html body :is(.hero-scene, …):not(#____never____)` (1,1,2). Der Selektor
   hier kommt auf (1,2,2) und laedt zudem spaeter.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
  html body:is(.labs-page, .partner-page) .hero-scene:not(#____never____) {
    min-height: calc(100svh - var(--saa-header-h, 96px)) !important;
  }
}

/* Gegenrichtung: bei mittelhohen Fenstern (781-920px) treibt nicht die
   Mindesthoehe den Hero, sondern sein Inhalt — dreizeilige Ueberschrift, zwei
   Knoepfe und das grosse Polster von 128/104px ergeben zusammen mehr als der
   Bildschirm hoch ist, der Hero ragt dann bis zu 57px darunter. styles.css
   loest dasselbe Problem unterhalb von 780px bereits mit einem kleineren
   Polster; hier wird dieser Gedanke auf das Band darueber ausgedehnt. */
@media (min-width: 1025px) and (min-height: 781px) and (max-height: 920px) {
  html body:is(.labs-page, .partner-page) .hero-scene:not(#____never____) {
    padding-block: 56px !important;
  }
}

/* --------------------------------------------------------------------------
   Gemeinsame Bausteine beider Seiten
   -------------------------------------------------------------------------- */

/* Kopfzeile linksbuendig, Spalte bleibt ueber .saig-shell auf der Seite
   zentriert (unveraendert). Entscheidung Joshua, 04.09.: "zentriert" meint
   die Shell-Position, nicht die Textausrichtung — der Fliesstext selbst
   ist wie auf den uebrigen Haupttabs (z. B. .beratung-section-head)
   linksbuendig. Gilt fuer alle .lp-head-Vorkommen auf Labs und Partner. */
.lp-head {
  margin-inline: 0;
  max-width: 820px;
  text-align: left;
}

.lp-head .saa-signal-label {
  justify-content: flex-start;
}

.lp-head h2 {
  margin: 0;
}

.lp-head p {
  margin: 18px 0 0;
  max-width: 62ch;
}

/* Erste Sektion nach dem Hero: weicher Hintergrund fuer beide Seiten wie
   beim etablierten Muster der uebrigen Haupttabs (z. B.
   .beratung-problem-section). Entscheidung Joshua, 02.09. */
.labs-why-section,
.partner-why-section {
  background: var(--saa-surface-soft);
}

.lp-body {
  margin-top: clamp(36px, 4.4vw, 60px);
}

/* 11.09.: Rückmeldung Joshua zu #produktion ("Zwischen einer guten Demo
   und einer guten Unternehmenslösung liegt Engineering") — das Bild
   wirkte zu nah am Bereich darunter. Zusätzlicher Abstand nur für diese
   Sektion, oben auf den bestehenden .lp-body-Abstand. */
#produktion .lp-body {
  margin-top: clamp(64px, 8vw, 96px);
}

/* Bild + Text nebeneinander, nach EDITORIAL-LAYOUT-SPEC.md (Handover
   10.09.): Textspalte 54-58%, Bildspalte 40-44% mit fester Maximalbreite
   pro Breakpoint (520/460/400/340px) -- eine reine 1fr/1fr-Teilung wie
   zuvor liess das Bild zu breit werden. Ohne Modifier steht das Bild
   rechts; .lp-split--media-first dreht Spaltenbreiten UND Reihenfolge,
   statt nur mit order zu spiegeln -- sonst würde die schmale Bildspalte
   beim Linkswechsel plötzlich zur breiten Textspalte.
   align-items: start (09.09., Rückmeldung Joshua) -- bei unterschiedlich
   langem Text pro Sektion sass das Bild sonst mal neben dem ersten Satz,
   mal neben der Bildmitte; mit "start" liegt die Bildoberkante immer auf
   Höhe der Überschrift. */
.lp-split {
  align-items: start;
  display: grid;
  gap: clamp(48px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
}

.lp-split--media-first {
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.35fr);
}

/* 11.09.: Rückmeldung Joshua zu #delivery ("Was Swiss AI in die
   Partnerschaft einbringt") — der Abstand zwischen Bild- und Textspalte
   wirkte zu breit. Nur für diese Sektion auf die Hälfte reduziert, statt
   den allgemeinen .lp-split-Wert sitéweit anzufassen. */
#delivery .lp-split {
  gap: clamp(24px, 2.5vw, 36px);
}

.lp-split--media-first .lp-split__media {
  order: -1;
}

.lp-split__media {
  justify-self: end;
  max-width: 520px;
  width: 100%;
}

.lp-split--media-first .lp-split__media {
  justify-self: start;
}

@media (max-width: 1199px) {
  .lp-split__media {
    max-width: 460px;
  }
}

@media (max-width: 1023px) {
  .lp-split__media {
    max-width: 400px;
  }
}

/* Ab hier einspaltig, immer Text vor Bild (EDITORIAL-LAYOUT-SPEC.md) --
   .lp-split--media-first muss deshalb Spalten UND Reihenfolge zurücksetzen. */
@media (max-width: 767px) {
  .lp-split,
  .lp-split--media-first {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-split--media-first .lp-split__media {
    order: 0;
  }

  .lp-split__media,
  .lp-split--media-first .lp-split__media {
    justify-self: stretch;
    margin-inline: auto;
    max-width: 340px;
    width: min(100%, calc(100vw - 40px));
  }
}

.lp-split__copy > * + * {
  margin-top: 18px;
}

.lp-split__copy p {
  max-width: var(--saig-measure);
}

/* Bildrahmen. height:auto ist Pflicht — das width/height-Attributpaar im
   Markup würde sonst das Seitenverhältnis erzwingen (bekannte Falle).
   12.09.: sichtbarer Rahmen (border) entfernt (Rückmeldung Joshua) -- siehe
   dieselbe Änderung an .saa-figure in styles.css. */
.lp-figure {
  border-radius: 16px;
  margin: 0;
  overflow: hidden;
}

.lp-figure img {
  aspect-ratio: 16 / 9;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.lp-figure--wide {
  margin-top: clamp(36px, 4.4vw, 56px);
}

/* 09.09.: volle Spaltenbreite wirkte neben dem Fliesstext zu dominant
   (Rückmeldung Joshua). Auf 62% der Spalte begrenzt und zentriert --
   spiegelt dieselbe Regel wie .saa-figure--wide in styles.css. Nur ab
   768px, auf Mobil bleibt die volle Spaltenbreite (siehe dort). */
@media (min-width: 768px) {
  .lp-figure--wide {
    margin-inline: auto;
    max-width: 62%;
  }
}

/* Einspaltiger Textblock. Ersetzt seit 26.08. die meisten Bild-Text-Spalten:
   die Bestandsseiten (ki-beratung, ki-dienste, wissen) fuehren je genau EIN
   Inhaltsbild, den Hero. Labs und Partner halten sich daran und zeigen je ein
   zweites Bild an der Stelle, an der es wirklich etwas erklaert. */
.lp-prose {
  margin-inline: 0;
  max-width: var(--saig-measure);
}

.lp-prose > * + * {
  margin-top: 18px;
}

/* 05.09.2026: war zentriert. Damit standen in einer Sektion drei
   Ausrichtungen nebeneinander — Kopf linksbündig bei x 73, Kartenreihe
   zentriert bei x 153, Schlussabsatz zentriert. Jetzt alles linksbündig. */
.lp-prose--tight {
  margin-top: clamp(24px, 2.6vw, 34px);
}

/* Merksatz am Ende eines Abschnitts. Bis 07.09. eine freistehende fette
   Zeile über einem Strich — das las sich wie ein versehentlich zentrierter
   Absatz. Jetzt ein abgegrenzter Block mit rotem Anschlag links, in
   derselben Sprache wie die übrigen Bauteile: dünner Rahmen, kein
   Farbgrund, damit er nicht lauter wird als der Abschnitt selbst. */
.lp-claim {
  border: 1px solid var(--saa-border);
  border-left: 3px solid #ff2d28;
  border-radius: 12px;
  margin-top: clamp(32px, 4vw, 52px);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px);
  text-align: left;
}

.lp-claim strong {
  display: block;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 600;
  line-height: 1.3;
}

.lp-claim span {
  color: var(--saa-text-muted);
  display: block;
  font-size: 15px;
  margin-top: 10px;
}

.page-section--dark .lp-claim {
  border-color: rgba(255, 255, 255, 0.16);
  border-left-color: #ff2d28;
}

.page-section--dark .lp-claim span {
  color: rgba(239, 241, 243, 0.72);
}

/* Mobiles Polster enger: der linke rote Anschlag trägt die Bedeutung,
   nicht das Innenpolster (Teil B3, 08.09.). */
@media (max-width: 640px) {
  .lp-claim {
    padding: 18px 12px;
  }
}

/* Karten: breit und gestapelt statt schmale Spalten. */
.lp-stack {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

.lp-card {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 34px);
  position: relative;
}

.lp-card h3 {
  margin: 0;
}

.lp-card > p {
  margin: 14px 0 0;
  max-width: var(--saig-measure);
}

.lp-card__lead {
  color: var(--saa-red);
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
}

.page-section--dark .lp-card {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}

.page-section--dark .lp-card__lead {
  color: #ff544e; /* #d91e18 erreicht auf #050b12 nur 3.7:1 */
}

/* Abschluss-Aufruf.
   Der Abschnitt traegt `page-section--dark`. Das hat zwei Gruende:
   1. Die globale Ink-Haertung (styles.css ~15523) laesst diese Klasse aus —
      ohne sie faerbt sie Titel und Text schwarz und der Aufruf ist unlesbar.
   2. styles.css ~5960 setzt fuer die Klasse `background-color: #06111d
      !important`. Ein eigenes helles Band waere dagegen nicht durchsetzbar,
      ohne die Spezifitaet auf ID-Ebene zu treiben. Der Abschluss ist darum
      bewusst ein volles dunkles Band statt eines Panels auf hellem Grund —
      wie die Abschlussbaender der uebrigen Hauptseiten auch. */
.lp-cta__panel {
  margin-inline: auto;
  max-width: 900px;
  text-align: center;
}

.lp-cta__panel .saa-signal-label {
  justify-content: center;
}

.lp-cta__panel h2 {
  margin: 0 auto;
  max-width: 30ch;
}

.lp-cta__panel > p {
  margin: 20px auto 0;
  max-width: 60ch;
}

.lp-cta__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: clamp(26px, 3vw, 36px);
}

.lp-btn {
  align-items: center;
  border-radius: var(--saa-cta-radius-final, 6px);
  display: inline-flex;
  font-size: 15px;
  font-weight: 600;
  gap: 10px;
  justify-content: center;
  min-height: var(--saa-cta-h, 52px);
  padding-inline: var(--saa-cta-px, 24px);
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.lp-btn--primary {
  background: var(--saa-red);
  color: #fff;
}

.lp-btn--primary:hover {
  background: #b91813;
}

.lp-btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #f7f9fb;
}

.lp-btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.62);
}

.lp-cta__note {
  color: rgba(239, 241, 243, 0.72);
  display: block;
  font-size: 14px;
  margin-top: 18px;
}

/* Querverweis zwischen Labs und Partner. */
.lp-crosslink {
  border-top: 1px solid var(--saa-border);
  padding-block: clamp(30px, 3.4vw, 44px) !important;
  text-align: center;
}

.lp-crosslink a {
  align-items: center;
  color: var(--saa-red);
  display: inline-flex;
  font-weight: 600;
  gap: 8px;
  min-height: var(--saig-tap);
  text-decoration: none;
}

.lp-crosslink a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Swiss AI Labs
   -------------------------------------------------------------------------- */

/* Die fuenf Ebenen aus LABS-02-WHY. Bewusst KEINE Nummern: die Reihenfolge
   traegt die Anordnung, der rote Anschlag markiert den Anfang. */
.labs-layers {
  counter-reset: none;
  display: grid;
  gap: 0;
  margin-top: clamp(30px, 3.6vw, 44px);
}

.labs-layers > div {
  align-items: baseline;
  border-left: 2px solid var(--saa-border);
  display: grid;
  gap: 4px 22px;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  padding: 18px 0 18px 24px;
}

.labs-layers > div:first-child {
  border-left-color: var(--saa-red);
}

.labs-layers strong {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
}

.labs-layers span {
  color: var(--saa-text-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* Vier Architekturformen aus LABS-04-SOVEREIGNTY. */
.labs-arch {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.labs-arch article {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 16px;
  border-top: 3px solid var(--saa-red);
  padding: clamp(22px, 2.4vw, 30px);
}

.labs-arch h3 {
  margin: 0 0 12px;
}

.labs-arch p {
  margin: 0;
}

/* Kriterienliste unter den Architekturformen. */
.labs-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: clamp(26px, 3vw, 36px) 0 0;
  padding: 0;
}

.labs-criteria li {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 999px;
  color: var(--saa-text-muted);
  font-size: 15px !important;
  padding: 9px 18px;
}

/* Die sieben Produktionsebenen aus LABS-05-PRODUCTION. */
.labs-ops {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.labs-ops article {
  border-top: 1px solid var(--saa-border);
  padding-top: 20px;
}

.labs-ops h3 {
  margin: 0 0 10px;
}

.labs-ops p {
  margin: 0;
}

.page-section--dark .labs-ops article {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* Agency neben Labs, LABS-06. Zwei Spalten, gleiches Gewicht. */
.labs-duo {
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.labs-duo article {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: clamp(26px, 2.8vw, 36px);
}

.labs-duo article + article {
  border-top: 3px solid #ff544e;
}

.labs-duo h3 {
  margin: 0;
}

.labs-duo__role {
  color: #ff544e;
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  margin-top: 8px;
  text-transform: uppercase;
}

.labs-duo ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.labs-duo li {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px 0;
}

.labs-duo__question {
  display: block;
  font-style: italic;
  margin-top: 18px;
}

/* Leitsatz LABS-07. Grosse Aussage, kein Kartenraster. */
.labs-principle {
  margin-inline: auto;
  max-width: 900px;
  text-align: center;
}

.labs-principle__pair {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(28px, 3.2vw, 40px);
  text-align: left;
}

.labs-principle__pair div {
  border-top: 3px solid var(--saa-border);
  padding-top: 18px;
}

.labs-principle__pair div:last-child {
  border-top-color: var(--saa-red);
}

.labs-principle__pair strong {
  display: block;
  font-size: clamp(17px, 1.4vw, 20px);
  margin-bottom: 8px;
}

.labs-principle__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: clamp(26px, 3vw, 34px) 0 0;
  padding: 0;
}

.labs-principle__list li {
  border-bottom: 2px solid rgba(217, 30, 24, .32);
  font-size: 15px !important;
  padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Swiss AI Partner
   -------------------------------------------------------------------------- */

/* Sie bringen / Swiss AI bringt / Gemeinsam entsteht (PARTNER-02). */
.partner-triad {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(32px, 3.6vw, 46px);
}

.partner-triad article {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 16px;
  padding: clamp(24px, 2.6vw, 32px);
}

.partner-triad article:last-child {
  border-color: rgba(217, 30, 24, .38);
}

.partner-triad h3 {
  margin: 0 0 12px;
}

.partner-triad p {
  margin: 0;
}

/* Fit-Kriterien (PARTNER-03). Breit und gestapelt, kein Fuenferraster. */
.partner-fit {
  display: grid;
  gap: 0;
}

.partner-fit > article {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: grid;
  gap: 6px 32px;
  grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
  padding: clamp(18px, 2vw, 26px) 0;
}

.partner-fit > article:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.partner-fit h3 {
  margin: 0;
}

.partner-fit p {
  margin: 0;
}

/* Kooperationsmodelle (PARTNER-04). */
.partner-models {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
}

.partner-models article {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 16px;
  display: grid;
  gap: 8px 40px;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  padding: clamp(24px, 2.6vw, 34px);
}

.partner-models article:hover {
  border-color: rgba(217, 30, 24, .45);
}

.partner-models h3 {
  margin: 0;
}

.partner-models__claim {
  color: var(--saa-red);
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
}

.partner-models p {
  margin: 0;
}

.partner-models p + p {
  margin-top: 12px;
}

/* Was Swiss AI einbringt (PARTNER-05, dunkles Band). */
.partner-delivery {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.partner-delivery article {
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  padding: 4px 0 4px 22px;
}

.partner-delivery article:first-child {
  border-left-color: #ff544e;
}

.partner-delivery h3 {
  margin: 0 0 10px;
}

.partner-delivery p {
  margin: 0;
}

/* Ihre Rolle (PARTNER-06). Ohne Bildspalte zweispaltig und mittig. */
.partner-role__list {
  column-gap: clamp(24px, 3vw, 48px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin-inline: auto;
  max-width: 1000px;
  padding: 0;
}

.partner-role__list li {
  border-top: 1px solid var(--saa-border);
  padding: 15px 0 15px 26px;
  position: relative;
}

.partner-role__list li:last-child {
  border-bottom: 1px solid var(--saa-border);
}

.partner-role__list li::before {
  background: var(--saa-red);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 4px;
  position: absolute;
  top: 25px;
  width: 6px;
}

/* Der Weg zur Partnerschaft (PARTNER-07). Stationen an einer Linie,
   ohne Nummernkreise: die Linie traegt die Reihenfolge. */
.partner-journey {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(34px, 4vw, 48px);
  position: relative;
}

.partner-journey article {
  border-top: 2px solid var(--saa-border);
  padding-top: 22px;
  position: relative;
}

.partner-journey article::before {
  background: var(--saa-surface);
  border: 2px solid var(--saa-red);
  border-radius: 50%;
  content: "";
  height: 11px;
  left: 0;
  position: absolute;
  top: -6px;
  width: 11px;
}

.partner-journey h3 {
  margin: 0 0 10px;
}

.partner-journey p {
  margin: 0;
}

/* Qualität vor Quantität (PARTNER-08) — die Ergebniskette.

   06.09.2026 neu gebaut. Vorher: vier gleich grosse Karten mit Haken-Symbol
   nebeneinander. Das war genau das, was die Gestaltungsregeln des Projekts
   ausschliessen — ein gleichförmiges Kartenraster mit Symbol-Kacheln — und es
   stellte die vier Begriffe nebeneinander, obwohl sie aufeinander aufbauen:
   aus Gesprächen werden Projekte, daraus Betreuung, daraus Wiederholung.

   Jetzt eine Kette an einer durchgehenden Spur. Die Spur färbt sich rot ein,
   sobald der Abschnitt ins Bild kommt — dieselbe Sprache wie die Spur von
   .saa-stack und der Partnerweg weiter oben auf dieser Seite. Zeiger und
   Tastatur heben ein Glied hervor, ohne die anderen unlesbar zu machen.

   Ohne JavaScript steht die Kette vollständig und farbig da: Ausgangswert von
   --partner-chain-fill ist 100%. Das Skript setzt ihn beim Laden auf 0 zurück
   und zählt ihn erst beim Hereinscrollen hoch. */
.partner-chain {
  --partner-chain-fill: 100%;
  --partner-chain-dot: 13px;
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  position: relative;
}

/* Die Spur liegt auf Höhe der Punkte, nicht am oberen Rand — also eine halbe
   Punkthöhe von oben, minus die halbe Spurdicke. */
.partner-chain::before,
.partner-chain::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--partner-chain-dot) / 2 - 1px);
  height: 2px;
  border-radius: 2px;
}

.partner-chain::before {
  right: 0;
  background: var(--saa-border);
}

.partner-chain::after {
  width: var(--partner-chain-fill);
  max-width: 100%;
  background: #ff2d28;
  transition: width 1.1s cubic-bezier(.16, 1, .3, 1);
}

.partner-chain__link {
  padding-top: calc(var(--partner-chain-dot) + 16px);
  position: relative;
}

/* Der Punkt sitzt auf der Spur. Bewusst ohne Nummer und ohne Symbol-Kachel. */
.partner-chain__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--partner-chain-dot);
  height: var(--partner-chain-dot);
  border-radius: 50%;
  background: #ff2d28;
  border: 2px solid #ff2d28;
  box-sizing: border-box;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

/* Wie bei der Spur ist der Ausgangszustand der fertige. Erst das Skript
   nimmt die Punkte zurück (--armed) und zündet sie einzeln wieder an. */
.partner-chain--armed .partner-chain__link::before {
  background: var(--saa-surface);
  border-color: var(--saa-border);
}

.partner-chain--armed .partner-chain__link.is-lit::before {
  background: #ff2d28;
  border-color: #ff2d28;
}

.partner-chain__term {
  color: var(--saa-text);
  display: block;
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 500;
  line-height: 1.3;
  transition: color .3s ease;
}

/* Mit JavaScript wird der Begriff zum Knopf, damit ihn auch die Tastatur
   erreicht. styles.css gibt jedem <button> im Hauptbereich Weiss, einen
   1px-Rahmen und 16px/400 mit — gemessen, nicht vermutet. Deshalb der Reset
   auf der ID-Stufe mit !important, dem Muster von .saa-stack__toggle folgend. */
html body .partner-chain--interactive .partner-chain__term:not(#____never____) {
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: inherit !important;
  font-size: clamp(17px, 1.45vw, 21px) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  width: 100%;
}

/* Die Hervorhebung färbt Punkt und Begriff des aktiven Glieds. Die Textfarbe
   kommt bei aktivem JavaScript aus labs-partner.js: der Farb-Anstreicher in
   main.js schreibt jedem Textknoten seine Wunschfarbe inline mit !important
   hinein und gewinnt gegen jede Regel hier — gemessen, nicht vermutet. Diese
   Regel bleibt für den Fall ohne JavaScript stehen. */
html body .partner-chain__link.is-active .partner-chain__term:not(#____never____) {
  color: var(--saa-red) !important;
  -webkit-text-fill-color: var(--saa-red) !important;
}

.partner-chain__term:focus-visible {
  outline: 2px solid var(--saa-red);
  outline-offset: 4px;
}

.partner-chain__link.is-active::before {
  transform: scale(1.35);
}

@media (hover: hover) and (pointer: fine) {
  html body .partner-chain__term:hover:not(#____never____) {
    color: var(--saa-red) !important;
    -webkit-text-fill-color: var(--saa-red) !important;
  }
}

/* Hochkant: dieselbe Kette, nur senkrecht — die Spur läuft dann links neben
   den Begriffen, wie bei .saa-stack. */
@media (max-width: 900px) {
  .partner-chain {
    gap: clamp(18px, 4vw, 26px);
    grid-template-columns: minmax(0, 1fr);
  }

  .partner-chain::before,
  .partner-chain::after {
    left: calc(var(--partner-chain-dot) / 2 - 1px);
    right: auto;
    top: calc(var(--partner-chain-dot) / 2);
    width: 2px;
    height: auto;
    bottom: 0;
  }

  .partner-chain::after {
    bottom: auto;
    height: var(--partner-chain-fill);
    max-width: none;
    transition: height 1.1s cubic-bezier(.16, 1, .3, 1);
  }

  .partner-chain__link {
    padding: 0 0 0 calc(var(--partner-chain-dot) + 18px);
  }

  .partner-chain__link::before {
    top: .28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-chain::after,
  .partner-chain__link::before,
  .partner-chain__term {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Umbrueche. Vier Stufen gemaess _contract.css: 1024, 768, 560.
   -------------------------------------------------------------------------- */

/* 10.09.: .lp-split kollabiert jetzt erst unter 768px (EDITORIAL-LAYOUT-SPEC.md
   -- zweispaltig bleibt bis Tablet 768px, nur die Bildbreite schrumpft
   gestuft, siehe oben); die übrigen Kartenraster hier bleiben beim alten
   1024px-Umbruch, den regelt dieser Block weiterhin. */
@media (max-width: 1024px) {
  .labs-duo,
  .labs-principle__pair,
  .partner-triad,
  .partner-journey {
    grid-template-columns: minmax(0, 1fr);
  }

  .partner-journey article {
    border-top: 0;
    border-left: 2px solid var(--saa-border);
    padding: 2px 0 2px 24px;
  }

  .partner-journey article::before {
    left: -6px;
    top: 4px;
  }

  .partner-models article,
  .partner-fit > article {
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .labs-arch,
  .labs-ops,
  .partner-delivery,
  .partner-role__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .labs-layers > div {
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-cta__actions .lp-btn {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .lp-card,
  .labs-arch article,
  .partner-triad article,
  .partner-models article {
    border-radius: 12px;
    padding: 22px 18px;
  }

  .lp-cta__panel {
    border-radius: 16px;
    padding: 32px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn,
  .partner-models article {
    transition: none;
  }
}

/* ==========================================================================
   INTERAKTION (26.08.2026)

   Die Seiten waren vollstaendig statisch, waehrend der Rest der Site
   Bewegung fuehrt (Scroll-Reveal auf den Use-Case-Seiten, Karussell auf der
   Startseite, Typewriter im Beratungs-Hero). Hier wird dieselbe Sprache
   fortgesetzt, nicht eine neue erfunden:

     Einblenden   fade + 18px Anstieg, .6s ease  — wie use-case-single.css
     Hover        translateY(-2px) + roter Rahmen — wie .ucd-btn / .bento-card
     Fokus        3px roter Umriss, 3px Abstand  — wie .ucd-*:focus-visible

   Grundsatz wie dort: Standard ist SICHTBAR. Nur `.is-in` spielt die
   Animation, und nur wenn <html> die Gate-Klasse `lp-ready` traegt. Faellt
   JavaScript aus, steht schlicht alles da.
   Steuerung: js/labs-partner.js
   ========================================================================== */

/* Der Anstieg laeuft ueber die eigenstaendige `translate`-Eigenschaft, NICHT
   ueber `transform`. Grund: die Animation traegt `fill-mode: both` und haelt
   ihren Endwert dauerhaft; da CSS-Animationen Uebergaenge schlagen, blieb der
   Hover-Lift (`transform: translateY(-2px)`) danach wirkungslos — die Karten
   reagierten nach dem Einblenden nicht mehr. `translate` und `transform`
   sind getrennte Eigenschaften und ueberlagern sich sauber. */
@keyframes lp-rise {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html.lp-ready .lp-reveal {
    opacity: 0;
  }

  html.lp-ready .lp-reveal.is-in {
    /* 400ms statt vormals 600ms: UX-Richtwert fuer komplexe Uebergaenge
       ist <=400ms, ease-out-Kurve statt linearem "ease" wirkt zackiger
       beim Einblenden. Joshua, 03.09. */
    animation: lp-rise .4s cubic-bezier(0.16, 1, 0.3, 1) both;
    /* --lp-i setzt js/labs-partner.js je Kind eines Rasters (0-7). */
    animation-delay: calc(var(--lp-i, 0) * 70ms);
  }
}

/* --- Karten reagieren auf Zeiger und Tastatur ---------------------------- */

.lp-card,
.labs-arch article,
.partner-triad article,
.partner-models article {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

@media (hover: hover) {
  .labs-arch article:hover,
  .partner-triad article:hover,
  .partner-models article:hover {
    border-color: rgba(217, 30, 24, .55);
    box-shadow: 0 12px 30px rgba(30, 41, 59, .09);
    transform: translateY(-2px);
  }

  .page-section--dark .lp-card:hover {
    border-color: rgba(255, 84, 78, .5);
    background: rgba(255, 255, 255, .07);
  }

  .labs-criteria li:hover,
  .labs-principle__list li:hover {
    border-color: rgba(217, 30, 24, .5);
    color: var(--saa-text);
  }
}

.labs-criteria li {
  transition: border-color .2s ease, color .2s ease;
}

:is(.labs-main, .partner-main) :is(a, button):focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--saa-red);
  outline-offset: 3px;
}

.page-section--dark :is(a, button):focus-visible {
  outline-color: #ff544e;
}

/* --- Ausklappkarten (Labs, Engineering-Bereiche) ------------------------- */

.lp-stack--collapsible .lp-card {
  padding-block: clamp(18px, 2vw, 24px);
}

.lp-card--collapsible h3 {
  margin: 0;
}

/* styles.css setzt fuer JEDEN <button> im Hauptbereich
   `background: var(--saa-surface) !important; color: var(--saa-text)
   !important` (Selektor `body main :where(button:not(.theme-toggle)…)`).
   Auf dem dunklen Band ergab das eine weisse Flaeche, auf der der Painter
   den Text hell einfaerbte — der Titel war unsichtbar. Der Selektor hier
   liegt auf ID-Ebene und schlaegt die Regel, ohne styles.css anzufassen. */
html body main .lp-card__toggle:not(#____never____) {
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

.lp-card__toggle {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 16px;
  justify-content: space-between;
  /* Tippziel aus _contract.css — der Knopf ist ein eigenstaendiges
     Bedienelement, kein Fliesstext-Link. */
  min-height: var(--saig-tap, 44px);
  padding: 6px 0;
  text-align: left;
  width: 100%;
}

.lp-card__chevron {
  color: #ff544e;
  flex: 0 0 auto;
  font-size: 26px;
  transition: transform .25s ease;
}

.lp-card--collapsible.is-open .lp-card__chevron {
  transform: rotate(180deg);
}

/* Hoehe animieren ohne feste Werte: 0fr -> 1fr auf einer Rasterzeile. */
.lp-card__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease, opacity .28s ease;
  opacity: 0;
}

.lp-card__panel > p {
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

.lp-card--collapsible.is-open .lp-card__panel {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-card__panel,
  .lp-card__chevron {
    transition: none;
  }
}

/* --- Stationslinie des Partnerwegs zeichnet sich mit -------------------- */

.lp-journey--armed article::before {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .3s ease, transform .3s ease;
}

.lp-journey--armed article.is-reached::before {
  opacity: 1;
  transform: none;
}

/* Der rote Abschnitt der Linie waechst von links nach rechts (ab 1025px)
   bzw. von oben nach unten (darunter, wo die Stationen untereinander
   stehen). Umgesetzt als zweite Linie ueber der grauen. */
.partner-journey article {
  position: relative;
}

.partner-journey article::after {
  background: var(--saa-red);
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: -2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s ease;
}

.partner-journey article.is-reached::after {
  transform: scaleX(1);
}

@media (max-width: 1024px) {
  .partner-journey article::after {
    bottom: 0;
    height: auto;
    left: -2px;
    right: auto;
    top: 0;
    width: 2px;
    transform: scaleY(0);
    transform-origin: center top;
  }

  .partner-journey article.is-reached::after {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .partner-journey article::after,
  .lp-journey--armed article::before {
    transition: none;
  }
}

/* --- Modelle, deren Wortlaut noch aussteht (Entscheid 27.08.) -------------
   Sichtbar unfertig, nicht kaputt: gestrichelter Rahmen, gedaempfte Marke,
   Hinweiszeile statt Text. So faellt beim Durchsehen sofort auf, dass hier
   noch etwas fehlt — und niemand haelt es fuer den fertigen Stand.
   Der Build fuer r5 warnt zusaetzlich, solange diese Klasse vorkommt. */
.partner-models article.partner-models--offen {
  background: repeating-linear-gradient(
      135deg, rgba(217, 30, 24, .035) 0 10px, transparent 10px 20px), var(--saa-surface);
  border-style: dashed;
  border-color: rgba(217, 30, 24, .42);
}

.partner-models__claim--offen {
  color: var(--saa-text-muted);
  font-style: italic;
  font-weight: 500;
}

.partner-models__offen-hinweis {
  color: var(--saa-text-muted) !important;
  font-style: italic;
}

/* ==========================================================================
   Labs-Hero: staerkerer Abdunkler auf der Textseite (27.08.2026)

   Das Oekosystem-Motiv hat seinen Schwerpunkt — Wuerfel mit Schweizer Schild —
   genau in der Bildmitte. Der Standard-Verlauf von styles.css (~18473) laeuft
   dort schon auf 42 % Deckung aus, und die dreizeilige Ueberschrift reicht bis
   rund 63 % der Breite: „die im Unternehmen" lag mitten auf dem roten Schild
   und war nicht mehr zu lesen.

   Darum hier nur fuer Labs eine laengere Rampe: bis 46 % praktisch deckend,
   bei 72 % noch gut die Haelfte, danach frei. Rechts bleibt das Motiv sichtbar,
   links steht der Text auf ruhigem Grund.

   Spezifitaet: die zu schlagende Regel ist
   `body:is(…) main > .hero-scene > .hero-scene__media::after` (0,2,4) mit
   !important. `:not(#____never____)` hebt hier auf ID-Ebene.
   ========================================================================== */
html body.labs-page main > .hero-scene > .hero-scene__media:not(#____never____)::after {
  background:
    linear-gradient(90deg,
      rgba(7, 17, 28, .985) 0%,
      rgba(7, 17, 28, .94) 46%,
      rgba(7, 17, 28, .55) 72%,
      rgba(7, 17, 28, .10) 100%),
    linear-gradient(180deg,
      rgba(7, 17, 28, .30) 0%,
      rgba(7, 17, 28, .06) 46%,
      rgba(7, 17, 28, .58) 100%) !important;
}

/* Auf schmalen Viewports steht der Text unter bzw. auf dem Bild in ganzer
   Breite — dort deckt ein gleichmaessiger Verlauf besser als eine Rampe. */
@media (max-width: 1024px) {
  html body.labs-page main > .hero-scene > .hero-scene__media:not(#____never____)::after {
    background:
      linear-gradient(180deg,
        rgba(7, 17, 28, .55) 0%,
        rgba(7, 17, 28, .72) 55%,
        rgba(7, 17, 28, .92) 100%) !important;
  }
}


/* ==========================================================================
   HERO-TYPEWRITER (27.08.)
   Labs und Partner laden css/hero-unify.css NICHT — das Stylesheet greift
   global in jeden Hero ein und beide Seiten wurden ohne es gebaut. Die
   Typewriter-Darstellung (Block 12 dort) ist deshalb hier portiert und auf
   .labs-page/.partner-page eingegrenzt. js/typewriter.js bleibt gemeinsam.

   Reservierter Slot: das Skript misst das laengste Wort und setzt eine inline
   min-width. Zusammen mit nowrap bleibt die Zeile stabil, statt bei jedem
   Wortwechsel neu umzubrechen — genau der Sprung, wegen dem frueher die H1
   von ki-beratung verkleinert wurde. Contract: _intern/HERO.md.
   ========================================================================== */
html body:is(.labs-page, .partner-page) .hero-typewriter:not(#____never____) {
  display: inline-block !important;
  text-align: left !important;
  white-space: nowrap !important;
}

html body:is(.labs-page, .partner-page) .hero-typewriter:not(#____never____)::after {
  content: "|";
  margin-left: 2px;
  color: rgba(239, 241, 243, .85);
  font-weight: 400;
  animation: lpCaretBlink 1s steps(1) infinite;
}

/* Statisch (ein einziges Wort oder prefers-reduced-motion): kein Blinken. */
html body:is(.labs-page, .partner-page) .hero-typewriter.is-typewriter-static:not(#____never____)::after {
  animation: none;
}

@keyframes lpCaretBlink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html body:is(.labs-page, .partner-page) .hero-typewriter:not(#____never____)::after {
    animation: none;
  }
}

/* Unterhalb 1024px setzt styles.css (12280/11678) die Titelzeilen auf
   display:inline — dadurch wandert der Umbruch mit der Wortlaenge und der
   Titel springt zwischen zwei und drei Zeilen. Hier wieder stapeln. */
@media (max-width: 1024px) {
  html body:is(.labs-page, .partner-page) .hero-scene__title .hero-title-line:not(#____never____) {
    display: block !important;
  }
  html body:is(.labs-page, .partner-page) .hero-scene__title .hero-title-line + .hero-title-line::before {
    content: "" !important;
    display: none !important;
  }
}

/* ==========================================================================
   „Technologie folgt der Aufgabe" (labs.html) — neu aufgebaut 05.09.2026
   Hier steht nur, was zu dieser Sektion gehört: das zweispaltige Raster und
   die Gegenüberstellung der beiden Fragen.

   Der Schichtenstapel daneben ist ein gemeinsames Bauteil und liegt in
   styles.css unter .saa-stack — er wird auch auf der Academy verwendet.
   ========================================================================== */

.tfa {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}

.tfa__ask {
  display: grid;
  gap: 22px;
  align-content: start;
}

.tfa-ask {
  margin: 0;
  padding-left: 18px;
  border-left: 2px solid var(--saa-border);
}

.tfa-ask__label {
  display: block;
  font: 600 12px/1 Inter, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--saa-text-soft);
  margin-bottom: 8px;
}

.tfa-ask__q {
  display: block;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.34;
}

/* Die verworfene Frage tritt zurück, ohne unlesbar zu werden. Kein
   durchgestrichener Text — das liest sich als Fehler, nicht als Haltung. */
.tfa-ask--off {
  opacity: .62;
}

.tfa-ask--on {
  border-left-color: #ff2d28;
}

.tfa-ask--on .tfa-ask__q {
  color: var(--saa-text);
  font-weight: 500;
}

.tfa__lead {
  margin: 0 0 18px;
  font: 600 12px/1 Inter, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--saa-text-soft);
}

.tfa__close {
  grid-column: 1 / -1;
  margin: clamp(10px, 1.6vw, 20px) 0 0;
  max-width: 74ch;
}

@media (max-width: 900px) {
  .tfa {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 5vw, 38px);
  }
}

/* ==========================================================================
   Pionierpartner-Seite (pionierpartner.html, angelegt 2026-09-14)

   Dritte Seite auf demselben Gerüst. Sie trägt zusätzlich `partner-page`,
   damit Hero-Höhe, Fokusring und die Bausteine oben (.partner-triad,
   .partner-fit, .partner-role__list, .partner-journey, .lp-cta__panel)
   unverändert greifen. Hier steht nur, was die Seite anders braucht.
   ========================================================================== */

/* Hero: zweiter Absatz (Branchenfokus) und Hinweiszeile unter den Knöpfen. */
.pionierpartner-page .pp-hero__focus {
  margin-top: 14px;
}

.pionierpartner-page .pp-hero__note {
  color: rgba(239, 241, 243, 0.72);
  margin-top: 20px;
  max-width: 60ch;
}

/* Kurzer Grundsatz direkt nach dem Hero: weiss, damit die weiche
   Ausgangslage-Sektion (.partner-why-section) danach absetzt. */
.pp-lead-section {
  background: var(--saa-surface);
}

.pp-lead {
  max-width: 820px;
}

.pp-lead h2 {
  margin: 0;
}

.pp-lead p {
  margin: 18px 0 0;
  max-width: 62ch;
}

/* .partner-fit ist für das dunkle Band gebaut (weisse Trennlinien). Auf
   hellem Grund dieselbe Zeilenform mit der hellen Linienfarbe. */
.pp-rows--light > article,
.pp-rows--light > article:last-child {
  border-color: var(--saa-border);
}

/* Zwei Textspalten unter einer vollbreiten Überschrift (Geeignet, Ihr
   Beitrag, Kompetenzpartner). Beide Spalten beginnen auf derselben Linie —
   Rückmeldung Joshua 14.09.; der frühere Split setzte die rechte Spalte
   neben die Überschrift, sodass ihr Text tiefer oder höher anfing. */
.pp-cols {
  align-items: start;
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-cols .lp-prose > p:first-child {
  margin-top: 0;
}

.pp-cols .pp-role__list {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0;
}

/* Die Liste hat oben eine Trennlinie; die Spalte daneben beginnt mit Text.
   Damit die erste Zeile links und rechts auf einer Linie liegt, bekommt das
   erste Listenglied keine obere Linie und kein oberes Polster. */
.pp-cols .pp-role__list li:first-child {
  border-top: 0;
  padding-top: 0;
}

.pp-cols .pp-role__list li:first-child::before {
  top: 10px;
}

@media (max-width: 767px) {
  .pp-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pp-role__list strong {
  font-weight: 600;
}

/* Vier Stationen statt sechs: ab 1025px vierspaltig nebeneinander. */
@media (min-width: 1025px) {
  .pp-journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pp-rahmen__notes {
  margin-top: clamp(28px, 3vw, 40px);
}

/* Kontakt-Panel: Kernsatz, Hinweis und Kontaktzeile unter dem Knopf. */
.pp-cta__lead {
  margin-top: 18px;
}

.pp-cta__hint {
  color: rgba(239, 241, 243, 0.72);
  margin: 24px auto 0;
  max-width: 60ch;
}

.pp-cta__contacts {
  margin-top: 12px;
}

.pp-cta__contacts a {
  color: #f7f9fb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Geisterknopf auf dem dunklen Band des Kompetenzpartner-Abschnitts. */
.pionierpartner-page #kompetenzpartner .lp-cta__actions {
  justify-content: flex-start;
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Zwei Zugänge auf partner.html (#zugaenge, 14.09.2026) und der
   Pionierpartner-Verweis auf labs.html (#pionierpartner).

   Zwei breite Felder nebeneinander, kein Symbol, kein Nummernkreis; unter
   768px untereinander. Der Link ist ein roter Textlink mit Pfeil, wie
   .v2-about-section__link auf der Startseite.
   -------------------------------------------------------------------------- */
.partner-ways-section {
  background: var(--saa-surface-soft);
}

.partner-ways {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(32px, 3.6vw, 46px);
}

.partner-ways article {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 32px);
}

.partner-ways article:first-child {
  border-color: rgba(217, 30, 24, .38);
}

.partner-ways h3 {
  margin: 0 0 12px;
}

.partner-ways p {
  flex: 1 1 auto;
  margin: 0;
}

.partner-ways__link {
  align-items: center;
  color: var(--saa-red);
  display: inline-flex;
  font-weight: 600;
  gap: 6px;
  margin-top: 20px;
  text-decoration: none;
}

.partner-ways__link .material-symbols-outlined {
  font-size: 20px;
}

.partner-ways__link:hover {
  text-decoration: underline;
}

.labs-pionier-section {
  background: var(--saa-surface-soft);
}

@media (max-width: 767px) {
  .partner-ways {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .partner-ways article {
    border-radius: 12px;
    padding: 22px 18px;
  }
}

/* --- Pionierpartner: die vier Bewegungsbausteine (14.09.2026, Rückmeldung
   Joshua «zu tot») ---------------------------------------------------- */

/* Frage-Umschlag in der Ausgangslage: beide Fragen stehen zunächst gleich,
   beim Hereinscrollen tritt die verworfene zurück und die rote Kante der
   gültigen zieht sich auf. Ohne Beobachter (lp-ready fehlt) ist der
   Endzustand sofort da. */
.pp-ask .tfa__ask {
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.lp-ready .pp-ask .tfa-ask--off {
  opacity: 1;
  transition: opacity .6s ease .35s;
}

.lp-ready .pp-ask.is-in .tfa-ask--off {
  opacity: .62;
}

.lp-ready .pp-ask .tfa-ask--on {
  border-left-color: var(--saa-border);
  transition: border-left-color .5s ease .7s;
}

.lp-ready .pp-ask.is-in .tfa-ask--on {
  border-left-color: #ff2d28;
}

/* Entscheid-Kette unter dem Ablauf: drei Glieder, auf dem dunklen Band. */
.pp-entscheid {
  margin-top: clamp(34px, 4vw, 48px);
}

.pp-entscheid .tfa__lead {
  color: rgba(239, 241, 243, 0.72);
}

.pp-chain {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-section--dark .pp-chain::before {
  background: rgba(255, 255, 255, 0.18);
}

.page-section--dark .pp-chain.partner-chain--armed .partner-chain__link::before {
  background: #050b12;
  border-color: rgba(255, 255, 255, 0.32);
}

.page-section--dark .pp-chain.partner-chain--armed .partner-chain__link.is-lit::before {
  background: #ff2d28;
  border-color: #ff2d28;
}

@media (max-width: 900px) {
  .pp-chain {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Pionierpartner, Umbau 16.09.2026 nach dem Content-Handoff (neun
   Sektionen). Ergänzt die .pp-*-Regeln oben; nicht mehr genutzte Regeln
   (Frage-Umschlag, Klapp-Karten) bleiben harmlos stehen.
   ========================================================================== */

/* Eyebrow im Hero: eigene Klasse, weil .saa-signal-label im Hero global
   ausgeblendet wird. Rot auf dem dunklen Bild, wie die Rubriken der Site. */
html body.pionierpartner-page .pp-hero__eyebrow:not(#____never____) {
  color: #ff544e !important;
  -webkit-text-fill-color: #ff544e !important;
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  margin: 0 0 18px;
  text-transform: uppercase !important;
}

/* Drei Vorteile als Mini-Kacheln unter der Subheadline. */
.pp-hero__benefits {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  max-width: 820px;
  padding: 0;
}

.pp-hero__benefits li {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 14px 16px;
}

.pp-hero__benefits strong {
  color: #f7f9fb;
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.pp-hero__benefits span {
  color: rgba(239, 241, 243, 0.78);
  display: block;
  font-size: 14px;
  line-height: 1.5;
}

html body.pionierpartner-page .hero-scene__actions:not(#____never____) {
  margin-top: clamp(24px, 2.8vw, 32px);
}

/* Dreiklang mit Listen (Sektion 02 und 06). */
.pp-triad ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.pp-triad li {
  padding-left: 16px;
  position: relative;
}

.pp-triad li + li {
  margin-top: 6px;
}

.pp-triad li::before {
  background: var(--saa-red);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 0;
  position: absolute;
  top: .62em;
  width: 6px;
}

.pp-triad p + ul {
  margin-top: 10px;
}

/* Sechs Glieder in der Kette: enger, auf dem hellen Grund. */
.pp-chain--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.pionierpartner-page #modell .pp-entscheid {
  margin-top: clamp(34px, 4vw, 48px);
}

/* Nutzen-Kacheln (Sektion 03): 2 x 2 auf dem dunklen Band, Basis .partner-delivery. */
.pp-tiles {
  gap: clamp(20px, 2.6vw, 36px) clamp(24px, 3vw, 48px);
}

/* Use-Case-Kacheln (Sektion 04): sechs Kacheln, zwei Spalten, Produktname
   als kleine rote Marke über dem Titel. */
.pp-usecases {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pp-usecases article {
  background: var(--saa-surface);
  border: 1px solid var(--saa-border);
  border-radius: 16px;
  padding: clamp(22px, 2.4vw, 30px);
}

.pp-usecases article:hover {
  border-color: rgba(217, 30, 24, .45);
}

.pp-usecases h3 {
  margin: 0;
}

.pp-usecases p {
  margin: 12px 0 0;
}

.pp-usecase__product {
  color: var(--saa-red);
  display: block;
  font: 600 12px/1 Inter, sans-serif;
  letter-spacing: .1em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* Sektion 07: zwei Listen mit Kleinüberschrift, dunkles Band. */
.pp-lead-label {
  color: rgba(239, 241, 243, 0.72);
  margin-bottom: 14px;
}

.pp-cols .pp-role__list li:first-child {
  border-top: 1px solid var(--saa-border);
  padding-top: 15px;
}

.pp-cols .pp-role__list li:first-child::before {
  top: 25px;
}

.pp-claim__link {
  color: #ff544e;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Journey: zweiter Absatz (Ergebnis / Entscheid) mit Abstand. */
.pp-journey p + p {
  margin-top: 10px;
}

@media (max-width: 1024px) {
  .pp-chain--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pp-chain--6 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .pp-usecases {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .pp-hero__benefits {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .pp-hero__benefits li {
    padding: 12px 14px;
  }
}

/* 320 px: «Entwicklungspartnerschaft.» ist breiter als die Spalte. Unter
   400 px dürfen die Überschriften dieser Seite trennen (lang="de-CH"). */
/* styles.css setzt «html body main :where(h1…) { hyphens:none !important;
   overflow-wrap:normal !important }» — darum ID-Stufe und !important. */
@media (max-width: 400px) {
  html body.pionierpartner-page main :is(h2, h3, h2 .saa-sentence):not(#____never____) {
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    overflow-wrap: anywhere !important;
  }
}