/* =====================================================================
   JPS-iQ GROUP DESIGN SYSTEM 2.0 — LAYER 4 · MARKE (Corporate Design 2027)
   =====================================================================
   Quelle: deploy/standards/design-system-2.0/brand.css
   Ausgeliefert je Business Unit als assets/css/ds-brand.css, geladen als
   LETZTES Stylesheet im Kopf (nach consent.css). Nicht je BU editieren.
   Ausnahme: suite (JPS Finance Suite) bindet diese Schicht nicht ein — das
   Produkt behaelt seine Produktflaechen und wird separat entschieden.

   Was diese Schicht tut — und nur das:
   1. Schrift nach Handbuch: Avenir Next LT Pro, Fallback Avenir Next,
      Segoe UI, Systemschrift. Keine Webfont, kein externer Abruf.
   2. Hell als Grundton. Die dunklen Flaechen der Seiten (Navy-Abschnitte,
      Verlaufskarten, dunkler Fuss, dunkle Formulare) werden zu Weiss,
      Nebel (#F5F8FB) und Planblau (#EAF3FA).
   3. Planblau ist die Markenflaeche: im Kopfbereich (Hero) und im
      Kontaktabschnitt. Sonst nicht.
   4. Das Gradnetz erscheint einmal gross im Hero und klein im Fuss.
      Keine Standortmarken, keine Koordinaten, keine Legende.

   Die Farbwerte sind die bestehenden Tokens (identisch mit dem
   Handbuch): #1A77B3 Corporate Blue, #0B1B2B Ink, #2A3B4D Fliesstext,
   #5A6B7D Sekundaertext, #E2E8EE Linie, #D3E6F4 Linie auf Planblau.
   Diese Schicht fuehrt keine neue Farbe ein.
   ===================================================================== */

:root {
  --ff-sans: "Avenir Next LT Pro", "Avenir Next", "Segoe UI", Roboto,
             "Helvetica Neue", Arial, system-ui, sans-serif;

  --cd-weiss:      #FFFFFF;
  --cd-nebel:      #F5F8FB;
  --cd-planblau:   #EAF3FA;
  --cd-linie:      #E2E8EE;
  --cd-linie-blau: #D3E6F4;

  --cd-gradnetz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-102 -102 204 204' fill='none' stroke='%231A77B3'%3E%3Cg stroke-opacity='.45' vector-effect='non-scaling-stroke'%3E%3Cpath d='M0-100V100M-100 0H100' vector-effect='non-scaling-stroke'/%3E%3Cellipse rx='38.27' ry='100' vector-effect='non-scaling-stroke'/%3E%3Cellipse rx='70.71' ry='100' vector-effect='non-scaling-stroke'/%3E%3Cellipse rx='92.39' ry='100' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M-92.39 -38.27H92.39M-92.39 38.27H92.39M-70.71 -70.71H70.71M-70.71 70.71H70.71M-38.27 -92.39H38.27M-38.27 92.39H38.27' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Ccircle r='100' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   1 · Schrift
   ------------------------------------------------------------------- */
body {
  font-family: var(--ff-sans);
  color: var(--c-ink-2);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--ff-sans); }
/* Deutsche Komposita ("Buchhaltungskapazitaet") brachen in grossen
   Ueberschriften mitten im Wort ohne Trennstrich. */
:lang(de) :is(h1, h2, h3) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }

/* Spectral (Serif) war an vier Stellen gesetzt. Das Handbuch kennt eine
   Schriftfamilie. */
.leader-avatar,
.leader-name,
.trust-chip--text,
.bpo-principle h4 { font-family: var(--ff-sans); }

/* ---------------------------------------------------------------------
   2 · Hinweiszeile oben (vorher Blauverlauf mit weisser Schrift)
   ------------------------------------------------------------------- */
.topline {
  background: var(--cd-nebel);
  border-bottom: 1px solid var(--cd-linie);
  color: var(--c-ink-2);
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.topline strong { color: var(--c-ink); font-weight: 600; }
.topline a { color: var(--c-brand-700); text-decoration: underline; text-underline-offset: 3px; }
.topline a:hover { color: var(--c-brand); }

/* ---------------------------------------------------------------------
   3 · Hero — erste Markenflaeche: Planblau, Gradnetz gross, angeschnitten
   ------------------------------------------------------------------- */
.hero {
  background: var(--cd-planblau);
  border-bottom: 1px solid var(--cd-linie-blau);
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -11vw;
  bottom: -19vw;
  width: min(840px, 58vw);
  aspect-ratio: 1;
  background: var(--cd-gradnetz) center / contain no-repeat;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .hero::after { width: 92vw; right: -38vw; bottom: -30vw; opacity: .7; }
}

/* Beweiskarte im Hero: vorher Blauverlauf, jetzt eine ruhige weisse Karte */
.hero-visual {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-blau);
  box-shadow: 0 24px 48px -28px rgba(11, 27, 43, 0.28);
  color: var(--c-ink-2);
}
.hero-visual::before,
.hero-visual::after { display: none; }
.hv-label { color: var(--c-brand); }
.hv-quote { color: var(--c-ink); }
.hv-attrib { color: var(--c-ink-3); }
.hv-attrib strong { color: var(--c-ink); }
.hero-visual__shot-caption { color: var(--c-ink-3); }
.hero-visual__shot { box-shadow: 0 18px 36px -22px rgba(11, 27, 43, 0.35); }

/* Hero mit Foto: das Bild bleibt, die Bildunterschrift wird eine helle
   Tafel statt eines dunklen Verlaufs */
.hero-visual--image { background: var(--cd-nebel); border: 0; }
.hero-visual--image .hv-caption {
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--cd-linie);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -18px rgba(11, 27, 43, 0.35);
  color: var(--c-ink-2);
}
.hero-visual--image .hv-caption .hv-label { color: var(--c-brand); }
.hero-visual--image .hv-caption .hv-quote { color: var(--c-ink); }

/* ---------------------------------------------------------------------
   4 · Abschnitte, die dunkel waren
   Innerhalb von .section--deep zeigten die Tokens auf dunkle Werte
   (ds-tokens.css). Hier zeigen sie wieder auf die hellen — "inherit"
   holt den Wert der Seite, also auch den BU-Akzent aus <html data-bu>.
   ------------------------------------------------------------------- */
.section--deep,
.sec--deep,
.sec--deep2,
.on-dark {
  --c-ink: inherit;
  --c-ink-2: inherit;
  --c-ink-3: inherit;
  --c-line: inherit;
  --c-bg: inherit;
  --c-bg-alt: inherit;
  --bu-accent-text: inherit;
  --c-ok: inherit; --c-warn: inherit; --c-crit: inherit;
  --c-ok-bg: inherit; --c-warn-bg: inherit; --c-crit-bg: inherit;
}
.section--deep,
.sec--deep,
.sec--deep2 {
  background: var(--cd-nebel);
  color: var(--c-ink-2);
}
/* Im Wechsel mit einem Nebel-Abschnitt wird der ehemals dunkle weiss,
   damit drei gleich helle Flaechen nicht zu einer verschmelzen. */
.section--alt + .section--deep,
.section--deep:has(+ .section--alt),
.sec--alt + .sec--deep,
.sec--deep:has(+ .sec--alt) { background: var(--cd-weiss); border-block: 1px solid var(--cd-linie); }

.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: var(--c-ink); }
.section--deep p { color: var(--c-ink-2); }
.section--deep .eyebrow { color: var(--c-brand); }
.section--deep .btn--ghost { color: var(--c-ink); border-color: var(--cd-linie); background: var(--cd-weiss); }
.section--deep .btn--ghost:hover { color: var(--c-brand); border-color: var(--c-brand); }
.section--deep .scroll-hint { color: var(--c-ink-3); }
/* Akzentflaechen der Formen-Schicht (.band, .split__face) tragen weisse
   Schrift auf --bu-surface — die Abschnittsregeln oben duerfen sie nicht
   einfaerben. */
.section--deep :is(.band, .split__face) :is(p, h2, h3, h4) { color: inherit; }
.section--deep .feature-bullets li,
.cta-final .feature-bullets li { color: var(--c-ink-2) !important; }
.section--deep .feature-bullets li::before,
.cta-final .feature-bullets li::before { background: var(--c-brand) !important; }

/* Kennzahlen und Pull-Quotes der Formen-Schicht auf hellem Grund */
.sec--deep .figure, .on-dark .figure { border-top-color: var(--bu-accent); }
.sec--deep .figure__n, .on-dark .figure__n { color: var(--bu-accent-text); }
.sec--deep .figure__l, .on-dark .figure__l { color: var(--c-ink); }
.sec--deep .figure__s, .on-dark .figure__s { color: var(--c-ink-3); }
.sec--deep .pull, .on-dark .pull { border-left-color: var(--bu-accent); }
.sec--deep .pull__q, .on-dark .pull__q { color: var(--c-ink); }
.sec--deep .ledger, .on-dark .ledger { border-top-color: var(--cd-linie); }
.sec--deep .ledger__row, .on-dark .ledger__row { border-bottom-color: var(--cd-linie); }
.sec--deep .ledger__k, .on-dark .ledger__k { color: var(--c-ink); }
.sec--deep .ledger__v, .on-dark .ledger__v { color: var(--c-ink-2); }
.sec--deep .ledger__t, .on-dark .ledger__t { color: var(--bu-accent-text); border-left-color: var(--bu-accent); }
.sec--deep .ledger__row:hover, .on-dark .ledger__row:hover { background: var(--cd-planblau); }
.sec--deep .stripe::before, .on-dark .stripe::before { background: var(--bu-accent); }

/* Methode: die Schritte standen als Glas auf Navy */
.method-step {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
}
.method-step .num { color: var(--c-brand); }
.method-step h3 { color: var(--c-ink); }
.method-step p { color: var(--c-ink-2); }

/* ---------------------------------------------------------------------
   5 · Kontakt — zweite Markenflaeche: Planblau, ohne zweites Gradnetz
   ------------------------------------------------------------------- */
.cta-final {
  background: var(--cd-planblau);
  border: 1px solid var(--cd-linie-blau);
  color: var(--c-ink-2);
}
.section--deep:has(> .cta-final) {
  background: var(--cd-planblau);
  border-block: 1px solid var(--cd-linie-blau);
}
.section--deep > .cta-final { background: transparent; border: 0; }
.cta-final::before { display: none; }
.cta-final h2 { color: var(--c-ink); }
.cta-final p { color: var(--c-ink-2); }
.cta-final .eyebrow { color: var(--c-brand) !important; }
.cta-final .btn--ghost,
.cta-final .btn--ghost:hover { background: var(--cd-weiss); }
.cta-final .btn--ghost { color: var(--c-ink); border-color: var(--cd-linie-blau); }
.cta-final .btn--ghost:hover { color: var(--c-brand); border-color: var(--c-brand); }
.cta-final .beta-step__dot { background: var(--cd-weiss); border-color: var(--cd-linie-blau); color: var(--c-ink-3); }
.cta-final .beta-step--active .beta-step__dot { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.cta-final .beta-step__text span { color: var(--c-ink-3) !important; }
.cta-final .beta-step__text strong { color: var(--c-ink) !important; }

/* Gespraechsbox (NetSuite) und Artikel-Abschluss: dieselbe Rolle wie der
   Kontaktabschnitt, deshalb dieselbe Flaeche */
.talk__inner,
.article-cta {
  background: var(--cd-planblau);
  border: 1px solid var(--cd-linie-blau);
  color: var(--c-ink-2);
}
.article-cta h2, .talk__head h2 { color: var(--c-ink); }
.article-cta p, .talk__head p { color: var(--c-ink-2); }
.talk__head .eyebrow { color: var(--c-brand); }
.talk__aside p, .talk__aside li { color: var(--c-ink-2); }
.talk__aside li::before { background: var(--c-brand); }
.talk__alt { border-top-color: var(--cd-linie-blau); color: var(--c-ink-3); }
.talk__alt a { color: var(--c-brand-700); }

/* ---------------------------------------------------------------------
   6 · Zwischen-Aufforderung: vorher ein dunkles Band, jetzt eine ruhige
   Zeile zwischen Haarlinien
   ------------------------------------------------------------------- */
.mid-cta {
  background: var(--cd-weiss);
  border-block: 1px solid var(--cd-linie);
  color: var(--c-ink);
}
.mid-cta-text { color: var(--c-ink); }
.mid-cta .btn--primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.mid-cta .btn--primary:hover { background: var(--c-brand-700); border-color: var(--c-brand-700); color: #fff; }

/* ---------------------------------------------------------------------
   7 · Hervorgehobene Bloecke und Kacheln
   ------------------------------------------------------------------- */
.feature-block {
  background: var(--cd-nebel);
  border: 1px solid var(--cd-linie);
  color: var(--c-ink-2);
}
.feature-block h2, .feature-block h3 { color: var(--c-ink); }
.feature-block p { color: var(--c-ink-2); }
.feature-badge { color: var(--c-brand-700); background: var(--cd-planblau); }
.feature-bullets li { color: var(--c-ink-2); }
.feature-metrics { background: var(--cd-weiss); border-color: var(--cd-linie); }
.feature-metrics span { color: var(--c-ink-3); }
.feature-metrics strong { color: var(--c-ink); }
.feature-block__shot { box-shadow: 0 18px 36px -22px rgba(11, 27, 43, 0.35); }
.feature-block__shot figcaption { color: var(--c-ink-3); }

.trust-claim--hi {
  background: var(--cd-planblau);
  border-color: var(--cd-linie-blau);
  color: var(--c-ink-2);
}
.trust-claim--hi strong { color: var(--c-brand-700); }
.trust-claim--hi span { color: var(--c-ink-2); }

.industry--hi,
.product-tile--bundle {
  background: var(--cd-planblau);
  border-color: var(--cd-linie-blau);
  color: var(--c-ink-2);
}
.industry--hi h4, .product-tile--bundle h3 { color: var(--c-ink); }
.industry--hi p, .product-tile--bundle p { color: var(--c-ink-2); }
.product-tile--bundle .product-tile__cta,
.product-tile--bundle .product-tile__cta--primary { color: var(--c-brand-700); border-top-color: var(--cd-linie-blau); }
.product-tile__sub { border-top-color: var(--cd-linie-blau); color: var(--c-ink-3); }
.product-tile__sub a { color: var(--c-brand-700); }
.product-tile__sub a:hover { color: var(--c-brand); }

.split-list .tag.mono { background: var(--cd-weiss); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.event-card__eyebrow { background: var(--cd-planblau); color: var(--c-brand-800); }

/* Initialen-Avatare: Planblau statt Blauverlauf */
.leader-avatar {
  background: var(--cd-planblau);
  color: var(--c-brand-700);
  box-shadow: inset 0 0 0 1px var(--cd-linie-blau);
}

/* Lead-Magnet (NetSuite) */
.magnet__eyebrow { color: var(--c-brand-700); border-color: var(--cd-linie-blau); }
.magnet__body p { color: var(--c-ink-2); }
.magnet__bullets li { color: var(--c-ink-2); }
.magnet__paper { box-shadow: 0 24px 48px -26px rgba(11, 27, 43, 0.35); }

.entity-proof { color: var(--c-brand-700); border-bottom-color: var(--cd-linie-blau); }
.entity-proof:hover, .entity-proof:focus-visible { color: var(--c-brand); border-bottom-color: var(--c-brand); }

/* ---------------------------------------------------------------------
   8 · Formulare: helle Felder statt Glas auf Navy
   ------------------------------------------------------------------- */
.lead-form {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
}
.talk .lead-form, .as-gate .lead-form { background: var(--cd-weiss); border: 1px solid var(--cd-linie-blau); }
.lead-form__field label { color: var(--c-ink-2); }
.lead-form__opt { color: var(--c-ink-3); }
.lead-form__field input,
.lead-form__field select,
.lead-form__field textarea {
  background-color: var(--cd-weiss);
  border: 1px solid #C9D3DD;
  color: var(--c-ink);
}
.lead-form__field input::placeholder,
.lead-form__field textarea::placeholder { color: var(--c-ink-3); opacity: .8; }
.lead-form__field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-3) 50%),
    linear-gradient(135deg, var(--c-ink-3) 50%, transparent 50%);
}
.lead-form__field input:focus,
.lead-form__field select:focus,
.lead-form__field textarea:focus { background-color: var(--cd-weiss); border-color: var(--c-brand); box-shadow: 0 0 0 3px rgba(26, 119, 179, 0.18); }
.lead-form__field input:user-invalid,
.lead-form__field select:user-invalid,
.lead-form__field textarea:user-invalid { border-color: var(--c-crit); }
.lead-form__consent { color: var(--c-ink-2); }
.lead-form__consent a { color: var(--c-brand-700); border-bottom-color: var(--cd-linie-blau); }
.lead-form__consent a:hover { color: var(--c-brand); border-color: var(--c-brand); }
.lead-form__notice { color: var(--c-ink-3); }
.lead-form__status { color: var(--c-ink-2); }
.lead-form.is-sent .lead-form__status { background: var(--cd-planblau); border-color: var(--cd-linie-blau); color: var(--c-ink); }

/* Health-Check-Auswahl (NetSuite) */
.hc-choice__legend { color: var(--c-brand-700); }
.hc-choice__hint { color: var(--c-ink-3); }
.hc-opt__box { background: var(--cd-weiss); border-color: var(--cd-linie); }
.hc-opt__box strong { color: var(--c-ink); }
.hc-opt__box span { color: var(--c-ink-3); }
.hc-opt__box:hover { background: var(--cd-planblau); border-color: var(--cd-linie-blau); }
.hc-opt input:checked + .hc-opt__box { background: var(--cd-planblau); border-color: var(--c-brand); box-shadow: inset 0 0 0 1px var(--c-brand); }
.hc-opt input:checked + .hc-opt__box::after { background: var(--c-brand); color: #fff; }
.hc-opt input:focus-visible + .hc-opt__box { outline-color: var(--c-brand); }
.hc-tier { background: var(--cd-weiss); border-color: var(--cd-linie); color: var(--c-ink-2); }
.hc-tier.is-one, .hc-tier.is-few { color: var(--c-ink); border-color: var(--c-brand); }
.hc-tier.is-many { color: var(--c-ink); background: var(--c-crit-bg); border-color: var(--c-crit); }
.hc-choice--areas.is-missing .hc-choice__legend { color: var(--c-crit); }
.hc-choice--areas.is-missing .hc-tier { border-color: var(--c-crit); }

/* Assessment: naechster Schritt und Ergebnis-Gate */
.as-next,
.as-gate {
  background: var(--cd-planblau);
  border: 1px solid var(--cd-linie-blau);
  color: var(--c-ink-2);
}
.as-next p, .as-next__lead, .as-gate p, .as-gate__lead { color: var(--c-ink-2); }
.as-next__eyebrow, .as-gate__eyebrow { color: var(--c-brand); }
.as-next__h, .as-gate__h { color: var(--c-ink); }
.as-next .btn--ghost { color: var(--c-ink); border-color: var(--cd-linie-blau); background: var(--cd-weiss); }
.as-next .btn--ghost:hover { color: var(--c-brand); border-color: var(--c-brand); background: var(--cd-weiss); }

/* ---------------------------------------------------------------------
   9 · Fuss: Nebel statt Navy, das Gradnetz klein als Signet
   ------------------------------------------------------------------- */
.site-footer {
  background: var(--cd-nebel);
  border-top: 1px solid var(--cd-linie);
  color: var(--c-ink-2);
  margin-top: 0;
}
.footer-grid h5 { color: var(--c-ink); }
.footer-grid a { color: var(--c-ink-2); }
.footer-grid a:hover { color: var(--c-brand); }
.footer-brand p { color: var(--c-ink-3); }
.footer-entities { color: var(--c-ink-3); }
.footer-entities strong { color: var(--c-ink); }
.footer-legal { border-top-color: var(--cd-linie); color: var(--c-ink-3); }
.footer-legal a { color: var(--c-ink-2); }
.footer-legal a:hover { color: var(--c-brand); }
.footer-legal > :first-child::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 0.6rem;
  vertical-align: -3px;
  background: var(--cd-gradnetz) center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   10 · Consent-Banner: hell, beide Schaltflaechen gleich erreichbar
   (html davor: consent.css wird in einigen Seiten erst danach geladen)
   ------------------------------------------------------------------- */
html .jps-consent-banner {
  background: var(--cd-weiss);
  color: var(--c-ink-2);
  border-top: 3px solid var(--c-brand);
  box-shadow: 0 -10px 30px rgba(11, 27, 43, 0.14);
}
html .jps-consent-text { color: var(--c-ink-2); }
html .jps-consent-link { color: var(--c-brand-700); }
html .jps-consent-link:hover,
html .jps-consent-link:focus-visible { color: var(--c-brand); }
html .jps-consent-btn:focus-visible { outline-color: var(--c-brand); }
html .jps-consent-btn--reject { background: var(--cd-weiss); color: var(--c-ink); border-color: #B8C4D0; }
html .jps-consent-btn--reject:hover,
html .jps-consent-btn--reject:focus-visible { background: var(--cd-nebel); border-color: var(--c-ink-3); }

/* ---------------------------------------------------------------------
   11 · Seitenbezogene Reste (Stilbloecke einzelner Seiten)
   ------------------------------------------------------------------- */
/* NetSuite-Startseite: Hinweiszeile, Kennzahlenkacheln, Schrittfolge */
.announce { background: var(--cd-nebel); color: var(--c-ink-2); border-bottom: 1px solid var(--cd-linie); }
.announce-row a { color: var(--c-brand-700); }
.announce-close { color: var(--c-ink-3); }
.announce-close:hover { color: var(--c-ink); }
.stat-tile { background: var(--cd-planblau); border: 1px solid var(--cd-linie-blau); }
.stat-tile strong { color: var(--c-brand-700); font-family: var(--ff-sans); }
.stat-tile span { color: var(--c-ink-2); }
/* Bestandsfehler: "1fr 1fr" liess lange Woerter die Kacheln auf dem
   Telefon ueber den Rand schieben (Seite 418 statt 390 px breit). */
.stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-tile strong { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.stepper b { color: var(--c-ink); }
.stepper i { color: var(--c-ink-3); }
.why-cluster-label { color: var(--c-ink-3); }
.fork-path__badge { font-family: var(--ff-sans); }
/* Lupenhinweis auf Produktbildern */
.zoom-hint { background: rgba(255, 255, 255, 0.95); color: var(--c-ink); box-shadow: 0 4px 12px -6px rgba(11, 27, 43, 0.4); }