/* ==========================================================================
   /plattform/selbstoptimierung, Version B ("so-")
   --------------------------------------------------------------------------
   Eigene Datei wie alle Seiten-Styles, in der Route NACH den globalen
   Stylesheets geladen. Sektionskoepfe (.det-sec-head), Hero-Pills und der
   Abschluss-CTA kommen aus loesungen-detail.css, die dunkle Sektion
   (.hn-ink) aus home-neu.css. Hier steht nur das Eigene dieser Seite.
   Mobile-Overrides ausschliesslich in assets/responsive.css.

   Warum eigene Bausteine: Die Seite lief ueber das Plattform-Template mit
   Problem-Boxen, Ablauf-Akkordeon und Integrations-Hub. Selbstoptimierung
   ist aber weder ein Vierschritt noch eine Frage der Systemanbindung,
   sondern eine Mechanik aus Signalen, Freigabe, Rekonfiguration und
   Versionierung. Jeder Teil bekommt deshalb eine eigene Form.
   ========================================================================== */

/* ---------- Hero: Text links, der Vorschlag als Artefakt rechts ---------- */

.so-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 56px; align-items: start; }
.so-hero-text { min-width: 0; }
.so-hero-text .h-display { font-size: clamp(36px, 3.6vw, 54px); }

.so-karte { min-width: 0; margin-top: 6px; padding: 22px 24px 20px; border-radius: 20px;
  border: 1px solid var(--border-1); background: var(--paper); box-shadow: var(--shadow-md); }
.so-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.so-karte-kick { 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-intel-ink); }
.so-karte-ver { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 100px; background: var(--dept-automate-tile); color: var(--dept-automate-ink);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
.so-karte-proz { margin: 16px 0 0; font-size: 12.5px; font-weight: 700; color: var(--fg-2);
  letter-spacing: .02em; }
.so-karte-h { margin: 6px 0 0; font-family: var(--font-serif); font-size: 23px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.2; color: var(--fg-1); }

.so-karte-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 18px; }
.so-kz { display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 11px;
  border-radius: 12px; background: var(--page-bg-surface); border: 1px solid var(--border-1);
  min-width: 0; }
.so-kz b { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--fg-1);
  letter-spacing: -0.01em; }
.so-kz i { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--fg-2); }
.so-kz.is-gut { background: var(--dept-collab-tile); border-color: var(--dept-collab-tile); }
.so-kz.is-gut b, .so-kz.is-gut i { color: var(--dept-collab-ink); }

.so-karte-gegen { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px;
  align-items: start; margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.so-karte-gegen svg { margin-top: 2px; color: var(--dept-people-ink); }
.so-karte-gegen b { color: var(--fg-1); }

.so-karte-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border-1); }
.so-akt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border-radius: 100px; border: 1px solid var(--border-1); background: var(--paper);
  font-size: 12.5px; font-weight: 700; color: var(--fg-1); }
.so-akt.is-ja { background: var(--dept-collab-ink); border-color: var(--dept-collab-ink); color: #fff; }
.so-karte-fuss { display: flex; align-items: center; gap: 8px; margin: 14px 0 0;
  font-size: 12.5px; font-weight: 600; color: var(--fg-1); }
.so-karte-fuss svg { color: var(--dept-care-ink); flex: 0 0 auto; }

/* ---------- Zulauf: drei Quellen, ein Ziel ---------- */

.so-zulauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.so-quelle { position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 24px 22px 20px; border-radius: 16px; border: 1px solid var(--border-1);
  background: var(--paper); text-decoration: none; min-width: 0;
  transition: border-color .18s var(--ease), transform .18s var(--ease); }
.so-quelle:hover { border-color: var(--dept-automate-ink); transform: translateY(-2px); }
/* Die Speiche nach unten: macht sichtbar, dass die drei in dasselbe Ziel laufen. */
.so-quelle::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 2px;
  height: 18px; background: var(--border-1); }
.so-quelle-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-automate-tile);
  color: var(--dept-automate-ink); }
.so-quelle-t { margin: 4px 0 0; font-family: var(--font-serif); font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.so-quelle-b { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }
.so-quelle-l { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-1);
  font-weight: 600; }
.so-quelle-l span { display: block; font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dept-automate-ink); margin-bottom: 3px; }
.so-quelle-go { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center;
  gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--primary); }

.so-ziel { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px;
  align-items: start; margin-top: 18px; padding: 24px 26px; border-radius: 18px;
  border: 1px solid var(--dept-automate-tile); background: var(--page-bg-surface); }
.so-ziel-ic { width: 48px; height: 48px; border-radius: 14px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-automate-ink); color: #fff; }
.so-ziel-t { margin: 2px 0 6px; font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.so-ziel-b { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-2); max-width: 88ch; }

/* ---------- Signale: Zeilen statt Karten ---------- */

.so-signale { border-top: 1px solid var(--border-1); }
.so-signal { display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto;
  gap: 16px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--border-1); }
.so-signal-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--fg-3); }
.so-signal-ic { width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-intel-tile);
  color: var(--dept-intel-ink); }
.so-signal-body { min-width: 0; }
.so-signal-t { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--fg-1); }
.so-signal-b { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.so-signal-befund { justify-self: end; padding: 7px 13px; border-radius: 100px;
  background: var(--page-bg-surface); border: 1px solid var(--border-1);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--fg-1);
  white-space: nowrap; }

/* ---------- Gabelung: Befund, Freigabe, zwei Ergebnisse ---------- */

.so-gabel { max-width: 1000px; margin: 0 auto; }
.so-gabel-start, .so-gabel-tor { position: relative; display: grid;
  grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: center;
  max-width: 560px; margin: 0 auto; padding: 18px 22px; border-radius: 16px;
  border: 1px solid var(--border-1); background: var(--paper); }
.so-gabel-start::after, .so-gabel-tor::after { content: ""; position: absolute; left: 50%;
  bottom: -22px; width: 2px; height: 22px; background: var(--border-1); }
.so-gabel-tor { margin-top: 22px; border-color: var(--dept-collab-tile);
  background: linear-gradient(180deg, var(--dept-collab-tile) 0%, var(--paper) 70%); }
.so-gabel-ic { width: 46px; height: 46px; border-radius: 13px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-intel-tile);
  color: var(--dept-intel-ink); }
.so-tor-ring { width: 46px; height: 46px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-collab-ink); color: #fff; }
.so-gabel-t, .so-tor-t { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg-1); }
.so-gabel-b, .so-tor-b { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.so-tor-b { color: var(--dept-collab-ink); font-weight: 600; }

.so-gabel-aus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
  margin-top: 22px; }
.so-aus { position: relative; padding: 24px 24px 22px; border-radius: 18px;
  border: 1px solid var(--border-1); background: var(--paper); min-width: 0; }
.so-aus::before { content: ""; position: absolute; left: 50%; top: -22px; width: 2px;
  height: 22px; background: var(--border-1); }
.so-aus-kick { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dept-collab-ink); }
.so-aus.is-reko .so-aus-kick { color: var(--dept-intel-ink); }
.so-aus-t { margin: 0; font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.25; color: var(--fg-1); }
.so-aus-b { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.so-aus-liste { list-style: none; margin: 18px 0 0; padding: 16px 0 0; display: flex;
  flex-direction: column; gap: 10px; border-top: 1px solid var(--border-1); }
.so-aus-liste li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--fg-1); }
.so-aus-liste li svg { margin-top: 2px; color: var(--dept-collab-ink); }
.so-aus.is-reko .so-aus-liste li svg { color: var(--dept-intel-ink); }

/* ---------- Rekonfiguration: Vorher und Nachher ---------- */

.so-diffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.so-diff { padding: 24px 24px 20px; border-radius: 18px; border: 1px solid var(--border-1);
  background: var(--paper); min-width: 0; }
.so-diff-name { display: flex; align-items: center; gap: 11px; margin: 0 0 16px;
  font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--fg-1); }
.so-diff-ic { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--primary); }
.so-diff-paar { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 12px; align-items: stretch; }
.so-diff-zeile { min-width: 0; padding: 13px 14px; border-radius: 12px;
  background: var(--page-bg-surface); border: 1px solid var(--border-1); }
.so-diff-zeile.is-neu { background: var(--dept-collab-tile); border-color: var(--dept-collab-tile); }
.so-diff-lbl { display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px; }
.so-diff-zeile.is-neu .so-diff-lbl { color: var(--dept-collab-ink); }
.so-diff-wert { margin: 0; font-size: 13.5px; line-height: 1.5; font-weight: 600; color: var(--fg-1); }
.so-diff-pfeil { align-self: center; display: inline-flex; align-items: center;
  justify-content: center; color: var(--fg-3); }
.so-diff-antrag { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px;
  align-items: start; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border-1);
  font-size: 13px; line-height: 1.5; color: var(--fg-2); }
.so-diff-antrag svg { margin-top: 2px; color: var(--dept-intel-ink); }
.so-diff-antrag b { color: var(--fg-1); }

/* ---------- Regelwerk ---------- */

.so-regeln { border-radius: 20px; border: 1px solid var(--border-1); background: var(--paper);
  overflow: hidden; }
.so-rw-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border-1); background: var(--page-bg-surface); }
.so-rw-tab { display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 16px 20px; border: 0; border-right: 1px solid var(--border-1);
  background: transparent; cursor: pointer; text-align: left; min-width: 0;
  border-bottom: 3px solid transparent; transition: background .15s var(--ease); }
.so-rw-tab:last-child { border-right: 0; }
.so-rw-tab.is-on { background: var(--paper); border-bottom-color: var(--dept-automate-ink); }
.so-rw-lbl { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.so-rw-tab.is-on .so-rw-lbl { color: var(--dept-automate-ink); }
.so-rw-sub { font-size: 12.5px; line-height: 1.4; color: var(--fg-2); }

.so-rw-kopf, .so-rw-zeile { display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px; align-items: center; padding: 14px 22px; }
.so-rw-kopf { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
  border-bottom: 1px solid var(--border-1); }
.so-rw-zeile + .so-rw-zeile { border-top: 1px solid var(--border-1); }
.so-rw-ebene { font-size: 14.5px; font-weight: 700; color: var(--fg-1); }
.so-rw-darf { display: inline-flex; align-items: center; gap: 7px; justify-self: start;
  padding: 6px 12px; border-radius: 100px; font-size: 13px; font-weight: 700; }
.so-rw-darf.is-vorschlag { background: var(--dept-intel-tile); color: var(--dept-intel-ink); }
.so-rw-darf.is-selbst { background: var(--dept-automate-tile); color: var(--dept-automate-ink); }
.so-rw-darf.is-gesperrt { background: var(--dept-care-tile); color: var(--dept-care-ink); }
.so-rw-wer { font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }

.so-grenzen { margin-top: 20px; padding: 22px 26px; border-radius: 18px;
  border: 1px solid var(--border-1); background: var(--page-bg-surface); }
.so-grenzen-t { display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--fg-1); }
.so-grenzen-t svg { color: var(--dept-care-ink); }
.so-grenzen ul { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.so-grenzen li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px;
  align-items: start; font-size: 14.5px; line-height: 1.5; color: var(--fg-1); font-weight: 600; }
.so-grenzen li svg { margin-top: 2px; color: var(--primary); }

/* ---------- Drei Wege aus der Freigabe ---------- */

.so-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.so-weg { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px;
  border-radius: 18px; border: 1px solid var(--border-1); background: var(--paper); min-width: 0; }
.so-weg-ic { width: 42px; height: 42px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.so-weg.is-ja .so-weg-ic { background: var(--dept-collab-tile); color: var(--dept-collab-ink); }
.so-weg.is-nein .so-weg-ic { background: var(--dept-care-tile); color: var(--dept-care-ink); }
.so-weg-t { margin: 2px 0 0; font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.so-weg-b { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }

/* ---------- Version: vier Stationen auf einer Schiene ---------- */

.so-ver { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.so-ver-schritt { position: relative; padding: 22px 20px 18px; border-radius: 16px;
  border: 1px solid var(--border-1); background: var(--paper); min-width: 0; }
.so-ver-schritt + .so-ver-schritt::before { content: ""; position: absolute; left: -17px;
  top: 40px; width: 17px; height: 2px; background: var(--border-1); }
.so-ver-ic { width: 38px; height: 38px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--dept-intel-tile);
  color: var(--dept-intel-ink); }
.so-ver-t { margin: 12px 0 0; font-family: var(--font-serif); font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fg-1); }
.so-ver-b { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg-2); }
.so-ver-n { position: absolute; top: 20px; right: 20px; font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--fg-3); }

.so-ausgang { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  margin-top: 18px; }
.so-ausgang-k { padding: 22px 24px; border-radius: 16px; border: 1px solid var(--border-1);
  background: var(--page-bg-surface); min-width: 0; }
.so-ausgang-k.is-gut { border-color: var(--dept-collab-tile); }
.so-ausgang-t { display: flex; align-items: center; gap: 9px; margin: 0 0 8px;
  font-size: 16px; font-weight: 700; color: var(--fg-1); }
.so-ausgang-k.is-gut .so-ausgang-t svg { color: var(--dept-collab-ink); }
.so-ausgang-k:not(.is-gut) .so-ausgang-t svg { color: var(--dept-people-ink); }
.so-ausgang-b { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }

/* ---------- Notizzeile, mehrfach benutzt ---------- */

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