/* ==========================================================================
   Gemeinsame Sektionen der Detailseiten, Version B
   --------------------------------------------------------------------------
   Global im Root-Layout geladen, weil beide Vorlagen sie brauchen
   (usecase-page.jsx für 16 Lösungen, platform-page.jsx für 12 Plattform-
   Seiten). Drei Blöcke, drei Präfixe:

     .bf-   Das Problem heute als dunkle Befund-Tafel
     .sp-   Der Ablauf als Spurenbild (KI-Mitarbeiter · Systeme · Menschen)
     .sy-   Integrationen als Kern mit Kachelwand

   Mobile-Overrides ausschließlich in assets/responsive.css.
   ========================================================================== */

/* ==========================================================================
   1 · Befund-Tafel
   --------------------------------------------------------------------------
   Dunkel, weil das die einzige Stelle der Seite ist, an der es um den Zustand
   VOR chester geht: der Bruch im Rhythmus macht den Unterschied sichtbar,
   bevor ein Wort gelesen ist. Die Kernsätze stehen in Display-Größe, die
   Erläuterung klein darunter, nicht umgekehrt wie vorher.
   ========================================================================== */

.bf { position: relative; background: var(--hero-ink); color: #fff; padding: 104px 0 96px;
  overflow: hidden; isolation: isolate; }
.bf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: .12; z-index: 0; }
.bf-veil { position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(17,8,34,.62) 0%, rgba(17,8,34,.82) 100%); }
.bf-inner { position: relative; z-index: 1; }

.bf-head { max-width: 880px; margin-bottom: 56px; }
.bf-eyebrow { margin: 0 0 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dept-care-on-dark); }
.bf-h { margin: 0; font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.08; font-size: clamp(30px, 3.2vw, 46px); color: #fff; text-wrap: balance; }
.bf-zaehler { margin: 20px 0 0; font-size: 16px; color: #DDD6FE; }
.bf-zaehler span { font-family: var(--font-mono); font-size: 20px; font-weight: 700;
  color: #fff; margin-right: 4px; }

.bf-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
/* Ziffer und Icon stehen links neben dem Kernsatz, Text und Kennzahl ruecken
   darunter auf dessen Kante ein. */
.bf-item { display: grid; grid-template-columns: 26px 34px minmax(0, 1fr);
  column-gap: 14px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.14);
  min-width: 0; }
.bf-item-n { grid-column: 1; align-self: start; margin-top: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: rgba(255,255,255,.55); }
.bf-item-ic { grid-column: 2; align-self: start; margin-top: 1px;
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14); color: var(--dept-care-on-dark); }
/* Der Kernsatz ist das, was gelesen wird, also traegt er die Groesse. */
.bf-item-b { grid-column: 3; margin: 0; font-family: var(--font-serif); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.22; font-size: clamp(20px, 1.7vw, 25px);
  color: #fff; text-wrap: pretty; }
.bf-item-t { grid-column: 3; margin: 12px 0 0; font-size: 15px; line-height: 1.62;
  color: #DDD6FE; }
.bf-item-stat { grid-column: 3; display: flex; align-items: baseline; gap: 7px;
  margin-top: 12px; }
.bf-item-stat b { font-family: var(--font-mono); font-size: 18px; color: #fff; }
.bf-item-stat i { font-style: normal; font-size: 11.5px; color: #C4B5FD; }

.bf-weiter { margin: 48px 0 0; }
.bf-weiter a { display: inline-flex; align-items: center; gap: 9px; padding: 12px 22px;
  border-radius: 100px; border: 1px solid rgba(255,255,255,.26); color: #fff;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease); }
.bf-weiter a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

/* ==========================================================================
   2 · Spurenbild
   --------------------------------------------------------------------------
   Spalten sind die Schritte, Zeilen die drei Beteiligten. Eine gefuellte
   Zelle heisst: hier fasst dieser Beteiligte an. Eine leere Zelle ist keine
   Luecke, sondern die Aussage (an dieser Stelle muss niemand ran), deshalb
   traegt sie sichtbar die Bahnlinie.
   ========================================================================== */

.sp-tafel { --sp-lbl: 168px;
  border: 1px solid var(--border-1); border-radius: 20px; background: var(--paper);
  overflow: hidden; }

.sp-kopf, .sp-bahn { display: grid;
  grid-template-columns: var(--sp-lbl) repeat(var(--sp-spalten), minmax(0, 1fr)); }
.sp-kopf { background: var(--page-bg-surface); border-bottom: 1px solid var(--border-1); }
.sp-kopf-lbl, .sp-kopf-n { padding: 12px 18px; font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2); }
.sp-kopf-n { border-left: 1px solid var(--border-1); color: var(--fg-1); }

.sp-bahn + .sp-bahn { border-top: 1px solid var(--border-1); }
.sp-bahn-lbl { display: flex; align-items: center; gap: 10px; padding: 20px 18px;
  font-size: 14px; font-weight: 700; color: var(--fg-1);
  background: var(--page-bg-surface); }
.sp-bahn-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; }
.sp-bahn.is-ai .sp-bahn-ic { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.sp-bahn.is-system .sp-bahn-ic { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.sp-bahn.is-human .sp-bahn-ic { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }

.sp-zelle { position: relative; display: flex; align-items: center; min-width: 0;
  padding: 14px 14px; border-left: 1px solid var(--border-1); }
/* Die Bahnlinie laeuft durch jede Zelle, auch durch die leeren. */
.sp-zelle::before { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--border-1); }
.sp-marke { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px;
  width: 100%; padding: 11px 13px; border-radius: 12px; min-width: 0; }
.sp-marke-zeile { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 9px;
  align-items: start; font-size: 12.5px; line-height: 1.4; }
.sp-marke-zeile svg { margin-top: 2px; }
.sp-marke-zeile b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.sp-bahn.is-ai .sp-marke { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.sp-bahn.is-system .sp-marke { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.sp-bahn.is-human .sp-marke { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }

.sp-leer { position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
  margin: 0 auto; background: var(--paper); border: 1px solid var(--border-1); }
/* Leerstelle in der Mensch-Spur: sie traegt die Aussage, also ein Wort. */
.sp-ohne { position: relative; z-index: 1; margin: 0 auto; padding: 6px 12px;
  border-radius: 100px; background: var(--paper); border: 1px dashed var(--border-1);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-2); white-space: nowrap; }

.sp-texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px;
  margin-top: 36px; }
.sp-text { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px;
  padding: 22px 0; border-top: 1px solid var(--border-1); min-width: 0; }
.sp-text-n { margin: 2px 0 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--fg-3); }
.sp-text-t { margin: 0; font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.sp-text-l { margin: 5px 0 0; font-size: 14.5px; font-weight: 700; color: var(--primary); }
.sp-text-b { margin: 9px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--fg-2); }

/* ==========================================================================
   1b · Problem-Band (`.pb-`), nur Plattform-Seiten
   --------------------------------------------------------------------------
   Vier schmale Spalten mit Haarlinien dazwischen, kein Kartenrahmen, keine
   Icons. Der Zustand vor chester ist auf einer Baustein-Seite Kontext, nicht
   der Aufhaenger, und soll deshalb eine Bildschirmhoehe sparen.
   ========================================================================== */

.pb-deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.pb-sp { min-width: 0; padding: 0 26px; border-left: 1px solid var(--border-1); }
.pb-sp:first-child { padding-left: 0; border-left: 0; }
.pb-sp:last-child { padding-right: 0; }
.pb-b { margin: 0; font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--fg-1);
  text-wrap: pretty; }
.pb-t { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

/* ==========================================================================
   2b · Bandbreite (`.bb-`): Ansichten links, ein echtes Exemplar rechts
   --------------------------------------------------------------------------
   Die Form stammt von der Auskunfts-Sektion auf
   /plattform/ki-mitarbeiter-fragen, die als einzige der zwoelf
   Plattform-Seiten mehr gesagt hat als „So macht chester das". Sie ist hier
   aus der Seiten-CSS in die geteilte Datei gewandert, damit sie auf jeder
   Route funktioniert, auch auf den vier Seiten mit eigener Route.
   ========================================================================== */

.bb { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px;
  align-items: start; }

.bb-wahl { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bb-opt { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px;
  align-items: start; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; background: transparent; text-align: left;
  transition: background .16s var(--ease), border-color .16s var(--ease); }
.bb-opt:hover { background: var(--page-bg-surface); }
.bb-opt.is-on { background: var(--paper); border-color: var(--border-1);
  box-shadow: var(--shadow-xs); }
.bb-opt-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--page-bg-surface);
  border: 1px solid var(--border-1); color: var(--fg-2); }
.bb-opt.is-on .bb-opt-ic { background: var(--accent); border-color: transparent; color: var(--primary); }
.bb-opt-txt { min-width: 0; display: block; }
.bb-opt-t { display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.bb-opt-s { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }

/* Die Tafel rechts ist ein Geraet, kein Textkasten: Kopfleiste, Koerper,
   Belegzeile. Sticky, damit sie beim Durchgehen der Ansichten stehen bleibt. */
.bb-tafel { position: sticky; top: 96px; border-radius: 20px; border: 1px solid var(--border-1);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow-md); min-width: 0; }
.bb-tafel-kopf { display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 14px 22px; background: var(--page-bg-surface);
  border-bottom: 1px solid var(--border-1); font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-2); }
.bb-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--dept-collab-ink);
  flex: 0 0 auto; }

.bb-koerper { padding: 26px 24px 22px; }
.bb-frage { margin: 0; font-family: var(--font-serif); font-size: 21px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.28; color: var(--fg-1); }
.bb-antwort { margin-top: 18px; padding: 18px 20px; border-radius: 14px;
  background: var(--violet-50); border: 1px solid var(--dept-intel-tile); }
.bb-antwort-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dept-intel-ink); }
.bb-antwort-text { margin: 0; font-size: 15px; line-height: 1.62; color: var(--fg-1); }

.bb-koerper.is-kennzahl { text-align: left; }
.bb-kz-frage { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--fg-2); }
.bb-kz-wert { margin: 10px 0 0; font-family: var(--font-serif); font-size: clamp(38px, 4vw, 54px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--fg-1); }
.bb-kz-label { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--primary); }
.bb-kz-satz { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border-1);
  font-size: 15px; line-height: 1.62; color: var(--fg-2); }

.bb-beleg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0;
  padding: 16px 24px 20px; border-top: 1px solid var(--border-1); }
.bb-beleg span { padding: 5px 11px; border-radius: 100px; background: var(--page-bg-surface);
  border: 1px solid var(--border-1); font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; color: var(--fg-2); }

/* Eigene Regel statt `.so-note`: die liegt in pages/selbstoptimierung.css und
   wird auf keiner Plattform-Route geladen. */
.bb-fuss { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px;
  align-items: start; margin: 32px 0 0; padding: 20px 24px; border-radius: 16px;
  border: 1px solid var(--border-1); background: var(--page-bg-surface);
  font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.bb-fuss svg { margin-top: 3px; color: var(--primary); }

/* Weg aus der Ansicht heraus zur Nachbarseite. */
.bb-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 24px; border-top: 1px solid var(--border-1); background: var(--page-bg-surface);
  font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none;
  transition: background .16s var(--ease); }
.bb-cta:hover { background: var(--accent); }

/* ==========================================================================
   2c · Daueraufsicht (`.da-`)
   --------------------------------------------------------------------------
   Links drei schmale Angaben zum Takt, rechts der Befund als das Ding selbst:
   Kennung, Prozess, Aussage, Zahlen, Datengrundlage, Weg zum Vorschlag. Die
   Karte ist bewusst dieselbe Bildsprache wie die Vorschlagskarte auf
   /plattform/selbstoptimierung, weil das eine aus dem anderen entsteht.
   ========================================================================== */

.da { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 36px;
  align-items: start; }

.da-takte { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.da-takt { padding: 20px 0; border-top: 1px solid var(--border-1); min-width: 0; }
.da-takt:first-child { border-top: 0; padding-top: 0; }
.da-takt-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-automate-tile);
  color: var(--dept-automate-ink); }
.da-takt-t { margin: 12px 0 0; font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.da-takt-b { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

.da-befund { padding: 24px 26px 22px; border-radius: 20px; border: 1px solid var(--border-1);
  background: var(--paper); box-shadow: var(--shadow-md); min-width: 0; }
.da-befund-kopf { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.da-befund-kennung { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--dept-automate-ink); }
.da-befund-proz { font-size: 12.5px; font-weight: 700; color: var(--fg-2); }
.da-befund-h { margin: 16px 0 0; font-family: var(--font-serif); font-size: 23px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.22; color: var(--fg-1); }
.da-befund-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 18px; }
.da-zahl { display: flex; flex-direction: column; gap: 3px; padding: 12px 13px; border-radius: 12px;
  background: var(--page-bg-surface); border: 1px solid var(--border-1); min-width: 0; }
.da-zahl b { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--fg-1); }
.da-zahl i { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--fg-2); }
.da-zahl.is-gut { background: var(--dept-people-tile); border-color: var(--dept-people-tile); }
.da-zahl.is-gut b, .da-zahl.is-gut i { color: var(--dept-people-ink); }
.da-befund-basis { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 10px;
  align-items: start; margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--fg-2); }
.da-befund-basis svg { margin-top: 2px; color: var(--primary); }
.da-befund-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  padding: 11px 18px; border-radius: 100px; background: var(--accent); color: var(--primary);
  font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .16s var(--ease); }
.da-befund-cta:hover { background: var(--primary); color: #fff; }

/* ==========================================================================
   3 · Integrations-Kern mit Kachelwand
   --------------------------------------------------------------------------
   Vorher: ein blasser Kern links und drei Reihen gleich aussehender Pillen
   rechts, mit grossen Loechern am Zeilenende. Jetzt traegt der Kern Gewicht
   (dunkel, wie der Rest der Marke), und die Systeme stehen als gleich grosse
   Kacheln in einem Raster, das keine Luecken laesst. Das Monogramm und der
   Ton je Name geben der Wand Varianz, ohne fremde Logos zu zeigen.
   ========================================================================== */

.sy { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 44px; align-items: start; }

.sy-kern { position: relative; padding: 26px 24px 22px; border-radius: 20px;
  background: var(--hero-ink); color: #fff; position: sticky; top: 96px; }
/* Anschluss zur Kachelwand: die Systeme haengen sichtbar an chester. */
.sy-kern::after { content: ""; position: absolute; top: 64px; left: 100%; width: 44px;
  height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.5), var(--border-1)); }
.sy-kern-mark { width: 40px; height: 40px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(255,255,255,.12);
  color: #C4B5FD; }
.sy-kern-name { margin: 14px 0 0; font-family: var(--font-serif); font-size: 24px;
  font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.sy-kern-sub { margin: 6px 0 16px; font-size: 13.5px; line-height: 1.5; color: #DDD6FE; }
.sy-proto { display: flex; flex-wrap: wrap; gap: 6px; }
.sy-proto span { padding: 5px 10px; border-radius: 100px; background: rgba(255,255,255,.1);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #EDE9FE; }
.sy-kern-zahl { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: 12.5px; color: #C4B5FD; }
.sy-kern-zahl b { font-family: var(--font-mono); font-size: 15px; color: #fff; }

.sy-lanes { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.sy-lane { min-width: 0; }
.sy-lane-t { display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--fg-1); }
.sy-lane-t svg { color: var(--primary); }
.sy-lane-n { padding: 2px 9px; border-radius: 100px;
  background: var(--page-bg-surface); border: 1px solid var(--border-1);
  font-size: 11px; color: var(--fg-2); letter-spacing: .04em; }
/* Die Kopfzeile laeuft als Haarlinie aus, damit die Kachelwand darunter
   eine Kante bekommt statt frei zu schweben. */
.sy-lane-linie { flex: 1; height: 1px; background: var(--border-1); }

.sy-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.sy-kachel { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px;
  align-items: center; padding: 11px 14px 11px 11px; border-radius: 12px;
  border: 1px solid var(--border-1); background: var(--paper); min-width: 0;
  transition: border-color .16s var(--ease), transform .16s var(--ease); }
.sy-kachel:hover { transform: translateY(-1px); }
.sy-mono { width: 34px; height: 34px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; font-style: normal;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.sy-kachel-t { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: var(--fg-1);
  min-width: 0; overflow-wrap: anywhere; }

.sy-kachel.is-collab .sy-mono { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }
.sy-kachel.is-collab:hover { border-color: var(--dept-collab-ink); }
.sy-kachel.is-intel .sy-mono { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.sy-kachel.is-intel:hover { border-color: var(--dept-intel-ink); }
.sy-kachel.is-automate .sy-mono { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.sy-kachel.is-automate:hover { border-color: var(--dept-automate-ink); }
.sy-kachel.is-flow .sy-mono { background: var(--dept-flow-tile); color: var(--dept-flow-ink); }
.sy-kachel.is-flow:hover { border-color: var(--dept-flow-ink); }
.sy-kachel.is-people .sy-mono { background: var(--dept-people-tile); color: var(--dept-people-ink); }
.sy-kachel.is-people:hover { border-color: var(--dept-people-ink); }
.sy-kachel.is-care .sy-mono { background: var(--dept-care-tile); color: var(--dept-care-ink); }
.sy-kachel.is-care:hover { border-color: var(--dept-care-ink); }

.sy-note { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px;
  align-items: start; margin-top: 32px; padding: 20px 24px; border-radius: 16px;
  border: 1px solid var(--border-1); background: var(--paper);
  font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.sy-note svg { margin-top: 3px; color: var(--primary); }
.sy-note a { color: var(--primary); font-weight: 700; text-decoration: none; }
.sy-note a:hover { text-decoration: underline; }

/* ==========================================================================
   4 · „Wer die Arbeit übernimmt" auf den Lösungsseiten (`.ucr-`)
   --------------------------------------------------------------------------
   Kein Teil des Schalters: die Sektion stand in einem Drei-Spalten-Raster,
   13 der 16 Lösungen tragen aber genau eine Rolle. Die Karte füllte dann ein
   Drittel und daneben lagen zwei Drittel leere Fläche. Querformat statt
   Hochformat, und das Raster füllt sich mit jeder weiteren Rolle auf.
   ========================================================================== */

/* `min(360px, 100%)` statt 360px: bei 375 Viewport bleiben im Container rund
   327px, eine harte Mindestbreite von 360 schiebt die Seite sonst um die
   Differenz nach rechts. */
.ucr-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px; }
.ucr-karte { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px;
  align-items: center; padding: 22px 26px; border-radius: 18px;
  border: 1px solid var(--border-1); background: var(--paper); text-decoration: none;
  min-width: 0; transition: border-color .16s var(--ease), transform .16s var(--ease); }
.ucr-karte:hover { border-color: var(--primary); transform: translateY(-2px); }
.ucr-ic { width: 56px; height: 56px; border-radius: 16px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.ucr-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ucr-name { font-family: var(--font-serif); font-size: 21px; font-weight: 700;
  letter-spacing: -0.015em; color: var(--fg-1); }
.ucr-meta { font-size: 13.5px; font-weight: 700; color: var(--primary); }
.ucr-task { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }
.ucr-go { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 18px; border-radius: 100px; border: 1px solid var(--border-1);
  font-size: 14px; font-weight: 700; color: var(--primary); }
.ucr-karte:hover .ucr-go { border-color: var(--primary); }