/* =====================================================================
   JPS-iQ GROUP DESIGN SYSTEM 2.0 — LAYER 2 · SHARED EXPERIENCE
   =====================================================================
   Quelle: deploy/standards/design-system-2.0/experience.css
   Ausgeliefert je Business Unit als assets/css/ds-experience.css,
   geladen NACH styles.css. Nicht je BU editieren.
   Spezifikation: deploy/standards/GROUP-DESIGN-SYSTEM-2.0.md

   Diese Datei bringt die Abschnittstypen, die es bisher nicht gab.
   Sie ersetzt nichts Bestehendes: alle Klassen sind neu (Praefix sec-,
   chain-, arch-, proof-, router-, mq-). Eine Seite kann Stueck fuer
   Stueck umgestellt werden, ohne dass die alte Fassung bricht.

   Leitregel: NICHT JEDE INFORMATION IN EINE KARTE. Eine Karte sagt
   "hiervon gibt es mehrere, sie sind gleichrangig und man ueberfliegt
   sie". Alles andere braucht einen anderen Abschnittstyp.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Abschnittsgeruest
   ------------------------------------------------------------------- */
.sec { padding: var(--s-9) 0; }
.sec--tight { padding: var(--s-7) 0; }
.sec--alt   { background: var(--c-bg-alt); }
.sec--deep  { background: var(--c-bg-deep); color: var(--c-ink); }
.sec__inner { width: min(100% - 2rem, var(--max-w)); margin-inline: auto; }
.sec__narrow { max-width: var(--measure); }

/* Einleitung eines Abschnitts: die Ueberschrift braucht mehr Breite als
   der Fliesstext darunter, sonst bricht sie bei grosser Schrift in drei
   Zeilen und der Abschnitt beginnt mit einer Treppe. */
.sec__intro { max-width: 46rem; margin-bottom: var(--s-7); }
.sec__intro h2 {
  font-size: var(--fs-2xl); line-height: 1.18; letter-spacing: -.015em;
  margin: 0 0 var(--s-4); text-wrap: balance;
}
.sec__intro .lead, .sec__intro p { max-width: var(--measure); }

.sec__k {
  font-family: var(--ff-mono);
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bu-accent-text); margin: 0 0 var(--s-3);
  display: block;
}

/* ---------------------------------------------------------------------
   1 · STATEMENT — eine Aussage, sonst nichts
   Fuer den Moment, an dem eine Seite eine Position bezieht. Kein
   Rahmen, keine Karte, viel Luft. Wirkt nur, wenn er selten ist:
   hoechstens einmal je Seite.
   ------------------------------------------------------------------- */
.sec--statement .sec__inner { max-width: 24ch; }
.statement {
  font-size: var(--fs-3xl); line-height: 1.15; letter-spacing: -.02em;
  font-weight: 600; margin: 0; text-wrap: balance;
  max-width: 20ch;
}
.statement em { font-style: normal; color: var(--bu-accent-text); }
.statement + .statement__sub {
  margin: var(--s-5) 0 0; max-width: var(--measure);
  font-size: var(--fs-md); color: var(--c-ink-2);
}

/* ---------------------------------------------------------------------
   2 · MANAGEMENT QUESTION — die Frage, die jemand wirklich stellt
   Aus dem FinanceOS-Stand uebernommen und verallgemeinert. Die
   Ueberschrift ist eine Frage in der Sprache des Lesers, nicht eine
   Leistungsbeschreibung in unserer.
   ------------------------------------------------------------------- */
.mq { border-top: 2px solid var(--bu-accent); padding-top: var(--s-5); }
.mq + .mq { margin-top: var(--s-8); }
.mq__q {
  font-size: var(--fs-xl); line-height: 1.28; letter-spacing: -.015em;
  font-weight: 600; margin: 0 0 var(--s-4); max-width: 32ch; text-wrap: balance;
}
.mq__head { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
            align-items: baseline; justify-content: space-between; }
.mq__body {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-top: var(--s-5);
}
.mq__body h4 {
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 0 0 var(--s-2); font-family: var(--ff-mono);
  font-weight: 500;
}
.mq__body p { margin: 0; color: var(--c-ink-2); }

/* ---------------------------------------------------------------------
   3 · CHAIN — ein Ablauf als Kette, nicht als Kartenreihe
   Ereignis → Wirkung → Entscheidung. Die Verbindung ist die Aussage;
   deshalb Pfeile statt Abstand und keine Rahmen um die Glieder.
   ------------------------------------------------------------------- */
.chain {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  counter-reset: chain;
}
.chain__node {
  position: relative; padding: var(--s-4) 0 0;
  border-top: 1px solid var(--c-line); min-width: 0;
}
.chain__node::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 1.75rem;
  height: 2px; background: var(--bu-accent);
}
.chain__node--own { border-top-color: var(--bu-accent); }
.chain__node--own::before { width: 100%; }
.chain__k {
  display: block; font-family: var(--ff-mono); font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
  margin-bottom: var(--s-2);
}
.chain__node strong { font-weight: 600; font-size: var(--fs-sm); line-height: 1.4;
                      display: block; overflow-wrap: break-word; }

/* ---------------------------------------------------------------------
   4 · ARCHITECTURE — geschichtete Baender statt Kaestchen-Diagramm
   Aus dem FinanceOS-Flow verallgemeinert: WO passiert es · WAS machen
   wir damit · WAS kommt heraus. Jedes Band traegt eine Beschriftung,
   die eine Frage beantwortet.
   ------------------------------------------------------------------- */
.arch { display: grid; gap: 2px; background: var(--c-line);
        border: 1px solid var(--c-line); border-radius: var(--radius-sm);
        overflow: hidden; }
.arch__band { background: var(--c-bg); padding: var(--s-5); min-width: 0; }
.arch__band--accent { background: var(--c-bg-alt); }
.arch__k {
  display: block; font-family: var(--ff-mono); font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--c-ink-3);
  margin-bottom: var(--s-3);
}
.arch__row { display: grid; gap: var(--s-3);
             grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.arch__item { min-width: 0; }
.arch__item strong { display: block; font-size: var(--fs-sm); font-weight: 600; }
.arch__item span  { display: block; font-size: var(--fs-sm); color: var(--c-ink-3);
                    margin-top: var(--s-1); }

/* ---------------------------------------------------------------------
   5 · STRUCTURE — Begriff und Erklaerung, als Liste
   Fuer Kriterien, Leistungsumfaenge, Definitionen. Karten waeren hier
   falsch: die Eintraege sind nicht gleichrangig-scanbar, sie werden
   gelesen.
   ------------------------------------------------------------------- */
.structure { display: grid; gap: 0; margin: 0; }
.structure > div {
  display: grid; gap: var(--s-2) var(--s-6);
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  padding: var(--s-4) 0; border-top: 1px solid var(--c-line);
}
.structure > div:last-child { border-bottom: 1px solid var(--c-line); }
.structure dt { font-weight: 600; min-width: 0; }
.structure dd { margin: 0; color: var(--c-ink-2); min-width: 0; }
@media (max-width: 640px) {
  .structure > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   6 · PROOF — Belege, sichtbar nach Art getrennt
   Die Art des Belegs steht im Text, nicht nur in der Farbe: ein
   Screenshot in Graustufen, ein Screenreader und ein farbenblinder
   Leser muessen dieselbe Unterscheidung bekommen.
   Regeln: deploy/standards/GROUP-DESIGN-SYSTEM-2.0.md, Abschnitt Proof.
   ------------------------------------------------------------------- */
.proof {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: .06em;
  text-transform: uppercase; padding: .2em .55em; border-radius: 3px;
  border: 1px solid currentColor; white-space: nowrap; font-weight: 500;
}
.proof::before { content: ""; width: .45em; height: .45em; flex: none; }

/* belegt und nachpruefbar — gefuellt */
.proof--outcome     { color: var(--c-ok); background: var(--c-ok-bg); border-color: transparent; }
.proof--outcome::before  { background: currentColor; border-radius: 50%; }
.proof--delivery    { color: var(--c-ok); background: var(--c-ok-bg); border-color: transparent; }
.proof--delivery::before { background: currentColor; }

/* Aussage eines Dritten — Zitatzeichen */
.proof--statement   { color: var(--c-ink-2); background: var(--c-bg-alt); border-color: transparent; }
.proof--statement::before { content: "\201C"; width: auto; height: auto;
                            font-size: 1.15em; line-height: 0; transform: translateY(.18em); }

/* Eigenschaft des Produkts oder der Architektur — Umriss */
.proof--product      { color: var(--bu-accent-text); }
.proof--product::before { background: currentColor; border-radius: 50%; }
.proof--architecture { color: var(--bu-accent-text); }
.proof--architecture::before { background: currentColor; }

/* zugesagt, aber noch nicht belegt — gestrichelt */
.proof--capability  { color: var(--c-warn); border-style: dashed; }
.proof--capability::before { background: currentColor; border-radius: 50%; }
.proof--example     { color: var(--c-ink-3); border-style: dashed; }
.proof--example::before { background: currentColor; }

/* Herkunft und Status */
.proof--partner     { color: var(--c-ink-2); }
.proof--partner::before { background: currentColor; transform: rotate(45deg); }
.proof--experience  { color: var(--c-ink-2); }
.proof--experience::before { background: currentColor; border-radius: 50%;
                             box-shadow: inset 0 0 0 1px var(--c-bg); }

.proof-note {
  font-size: var(--fs-sm); color: var(--c-ink-3); margin: var(--s-4) 0 0;
  max-width: var(--measure);
}

/* ---------------------------------------------------------------------
   7 · ROUTER — Problem in der Sprache des Besuchers → passendes Angebot
   Das Kernstueck der Gruppenseite. Kein Kartenraster: jede Zeile ist
   eine Aussage ueber eine Situation, und die Zeilen sind NICHT
   gleichrangig-scanbar, sondern werden gelesen bis eine passt.
   ------------------------------------------------------------------- */
.router { display: grid; gap: 0; }
.router__row {
  display: grid; gap: var(--s-3) var(--s-6);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  padding: var(--s-5) 0; border-top: 1px solid var(--c-line);
  transition: background var(--dur) var(--ease);
}
.router__row:last-child { border-bottom: 1px solid var(--c-line); }
.router__q {
  margin: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.4;
  letter-spacing: -.005em; min-width: 0; text-wrap: pretty;
}
.router__q::before {
  content: "\201E"; color: var(--bu-accent-text); margin-right: .1em;
}
.router__q::after { content: "\201C"; color: var(--bu-accent-text); }
.router__to { min-width: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.router__why { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.router__links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.router__link {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  color: var(--bu-accent-text);
  border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  padding-bottom: 1px;
}
.router__link:hover { border-bottom-color: currentColor; }
.router__link[data-bu-target]::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%; flex: none;
  background: var(--target-accent, var(--bu-accent));
}
@media (max-width: 720px) {
  .router__row { grid-template-columns: minmax(0, 1fr); }
}

/* Punktfarbe je Zielangebot — dieselbe Familie wie in tokens.css */
[data-bu-target="suite"]     { --target-accent: #0E7C86; }
[data-bu-target="netsuite"]  { --target-accent: #1B4F8F; }
[data-bu-target="microsoft"] { --target-accent: #4257A8; }
[data-bu-target="sap"]       { --target-accent: #27406E; }
[data-bu-target="zoho"]      { --target-accent: #1F7A5A; }
[data-bu-target="odoo"]      { --target-accent: #3E8B62; }
[data-bu-target="weclapp"]   { --target-accent: #2E7D6E; }
[data-bu-target="bpo"]       { --target-accent: #9A6B2F; }
[data-bu-target="opcon"]     { --target-accent: #7A5C3A; }
[data-bu-target="group"]     { --target-accent: #1A77B3; }

/* ---------------------------------------------------------------------
   8 · RELATED — die naechste sinnvolle Faehigkeit, nicht Cross-Selling
   Nur einsetzen, wenn ein fachlicher Zusammenhang besteht. Der Text
   muss den Zusammenhang benennen; "koennte Sie auch interessieren"
   ist kein Zusammenhang.
   ------------------------------------------------------------------- */
.related {
  border-left: 3px solid var(--bu-accent); padding: var(--s-4) 0 var(--s-4) var(--s-5);
  max-width: var(--measure); margin: var(--s-7) 0 0;
}
.related__k {
  font-family: var(--ff-mono); font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-ink-3); display: block;
  margin-bottom: var(--s-2);
}
.related p { margin: 0 0 var(--s-3); color: var(--c-ink-2); }

/* ---------------------------------------------------------------------
   9 · CONVERSION — der naechste Schritt, passend zur Kaufphase
   Kein gruppenweites "Book a demo". Die Klasse bestimmt die Sprache,
   das data-cta-kind die Messung.
   ------------------------------------------------------------------- */
.next { display: grid; gap: var(--s-5); }
.next__row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.next__hint { font-size: var(--fs-sm); color: var(--c-ink-3); margin: 0;
              max-width: var(--measure); }

/* ---------------------------------------------------------------------
   Ueberschriftengroesse unabhaengig von der Ebene
   ---------------------------------------------------------------------
   Die Gliederungsebene gehoert dem Dokument, die Groesse dem Layout.
   Solange beides am selben Element haengt, muss man zwischen richtiger
   Gliederung und richtiger Optik waehlen — und die Optik gewinnt immer.

   Befund vom 02.09.2026: 326 Stellen ueberspringen eine Ebene (h4 oder
   h5 direkt nach h2), weil die kleinere Schrift gebraucht wurde. Fuer
   einen Screenreader-Nutzer, der ueber Ebenen navigiert, ist jede dieser
   Stellen eine fehlende Tuer.

   Mit diesen Klassen wird aus <h4>Titel</h4> ein
   <h3 class="h-sm">Titel</h3>: richtige Ebene, gleiche Groesse.
   ------------------------------------------------------------------- */
.h-xl { font-size: var(--fs-2xl); letter-spacing: -.02em; }
.h-lg { font-size: var(--fs-xl); }
.h-md { font-size: var(--fs-lg); }
.h-sm { font-size: var(--fs-md); }
.h-xs { font-size: var(--fs-base); }

/* ---------------------------------------------------------------------
   Hilfsklassen
   ------------------------------------------------------------------- */
.u-measure { max-width: var(--measure); }
.u-accent  { color: var(--bu-accent-text); }
.u-scroll-x { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  .router__row { transition: none; }
}

/* GROUP-DESIGN-SYSTEM 2.0 — Ende Layer 2 */