/* Count on Me | CORE, gemeinsames Stylesheet.
 * Aus index.html herausgeloest, damit Landing, Impressum und
 * Datenschutzerklaerung dieselbe Quelle fuer das Branding nutzen.
 * AUFBAU (dritte Runde, "Gesamtwerk"): Die Seite ist EIN Dokument auf EINEM
 * Grund. Keine abwechselnden Grau/Weiss-Baender, keine Trennlinien zwischen
 * Sektionen: der Rhythmus kommt aus Weissraum und aus EINEM wiederholten
 * Raster (Haarlinien-Gitter, s. u.). Erhoben sind nur drei Elemente, und zwar
 * die, die das PRODUKT zeigen: die Hero-Karte, die IC-Tabelle und das
 * Audit-Log. Alles andere ist Dokument, nicht Kachel. Wer eine Sektion
 * ergaenzt: keinen eigenen Hintergrund, keinen eigenen Rahmen.
 *
 * Palette Stand 2026-09-09, vierte Runde: Blau ist RICHTIG, es war nur zu viel
 * FLAECHE. Navy und Teal tragen Schrift, Zahlen und Akzente, der Akzent ist
 * das Marken-Orange #FF6446. Als
 * HINTERGRUND kommt Blau nur noch an zwei Stellen vor: Footer und Audit-Log.
 * Jede weitere blaue Flaeche ist ein Rueckfall. Erste Runde (weiterhin gueltig):
 * Grund und Flaechen auf Weiss, Orange gedaempft auf Terrakotta #D97757.
 * Navy #002846 traegt jetzt Schrift, Linien und Buttons statt ganzer Baender:
 * dunkel ist nur noch der Footer. Fuer Text auf Hell gibt es abgedunkelte
 * Varianten (--teal-ink, --green-ink, --accent-ink), weil Teal, Gruen und
 * Orange in ihrer Markenhelligkeit auf Weiss unlesbar sind.
 */
  /* SCHRIFT. Das just-experts-Manual schreibt Nimbus Sans vor: Bold 700 fuer
     Ueberschriften und Hervorhebungen, Light 300 fuer Fliesstext. Der Bold-Light-
     Kontrast ist laut Manual das typografische Kernmerkmal der Marke.
     Nimbus ist lizenzpflichtig und auf keinem Besuchergeraet vorinstalliert. Die
     Deklaration hier ist deshalb identisch zu der in `webseite-je`: nur
     `src: local(...)`, keine Webfont-Datei. Wer die Schrift installiert hat, sieht
     sie; alle anderen sehen Arial, was der Office-Regel des Manuals entspricht.
     DAS IST EINE BEWUSSTE ENTSCHEIDUNG, kein Versehen. Fuer echte Nimbus-
     Darstellung im Web muesste die lizenzierte Datei als woff2 selbst gehostet
     werden - das waere ein eigener Vorgang samt Lizenzpruefung. */
  @font-face {
    font-family: "Nimbus Sans"; font-weight: 700; font-style: normal;
    src: local("Nimbus Sans Bold"), local("NimbusSanL-Bol");
  }
  @font-face {
    font-family: "Nimbus Sans"; font-weight: 300; font-style: normal;
    src: local("Nimbus Sans Light"), local("NimbusSanL-Lig");
  }

  :root {
    color-scheme: light;

    --navy: #002846;
    --navy-deep: #001320;
    /* Marken-Orange #FF6446, bestaetigt auch fuer plugnpl.ai. Der dunkle Zwilling
       --accent-ink traegt Schrift auf Weiss (6.12), der Akzent selbst erreicht dort
       nur 2.93 und gehoert an Flaechen, Raender und die Wortmarke. */
    --accent: #FF6446;
    --accent-ink: #A8402A;
    /* Hellblau ist laut Manual SEKUNDAERfarbe: "sparsam eingesetzte
       Differenzierungsfarbe ... nicht fuer Flaechen im Hauptlayout". Es traegt
       hier nur noch: Hero-Hervorhebung, den Engine-Kasten mit dem Namen CORE,
       Links, den Fokusring, die Nutzernamen im Audit-Log und das Licht im
       dunklen Band. Alles Strukturelle - Kicker, Ziffern, Pfeile, Icon-Flaechen -
       traegt Navy. Wer das umdreht, verstoesst gegen die Farbgewichtung des
       Manuals: "Blau traegt die Flaeche." */
    --teal: #2EACE8;
    --teal-ink: #17739F;
    --green: #40AB78;
    /* Eine Spur dunkler als vorher (#2E7D57), damit es auch auf den getoenten
       Gruenden ueber 4.5:1 bleibt: auf Sand kam es sonst nur auf 4.48. */
    --green-ink: #2A7350;
    --sand: #D6D5CE;

    --ground: #FFFFFF;
    --surface: #FFFFFF;
    /* Die vier Gruende der Seite. Der Wechsel zwischen ihnen ist die Vielfalt,
       nicht zusaetzliche Farben - so macht es auch die iDM-Seite, nur dort mit
       Bildflaechen, die wir nicht haben.
       1. --surface  Weiss
       2. --tint-cool blasses Blau
       3. --tint-warm Sand auf 30 Prozent, die Licht-Grau-Flaeche des JE-Manuals
       4. --navy      das dunkle Band (Sicherheit) und der Footer
       Reihenfolge der Abschnitte weiter unten bei den Sektionen. */
    --tint-cool: #EFF5FA;
    --tint-warm: #F3F2F0;
    /* Panels (Audit-Log) nehmen denselben kuehlen Ton, damit nichts auseinander
       laeuft. Sie liegen deshalb immer auf WEISSEN Abschnitten, sonst
       verschwinden sie im Grund. */
    --panel: var(--tint-cool);
    --surface-2: #F6F8FA;
    --ink: #002846;
    --ink-soft: #4A6072;
    /* Eine Spur dunkler als vorher (#5F7480): auf den getoenten Gruenden kam
       das nur auf 4.37 bis 4.45 und fiel damit durch. Jetzt 4.75 und besser. */
    --ink-faint: #5A6E7B;
    --line: #E6EBEF;
    --shadow: 0 1px 2px rgba(0,40,70,.06), 0 12px 32px -12px rgba(0,40,70,.18);

    --hero-ground: var(--surface);
    --hero-ink: var(--ink);
    --hero-soft: var(--ink-soft);
    --hero-line: var(--line);
    --hero-card: var(--surface);

    --maxw: 1120px;
    --r: 14px;
    --step: clamp(3.4rem, 5.5vw, 5.2rem);
    --font: "Nimbus Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Consolas", monospace;
  }

  /* KEIN Dark Mode. Die Seite ist bewusst auf eine helle Fassung festgelegt:
     die gesamte Gestaltungsrichtung lautet weiss, und ein automatischer
     Dark Mode hat genau das ausgehebelt, sobald das System des Betrachters
     auf dunkel stand. color-scheme haelt auch Scrollbalken und Formular-
     elemente hell. Nicht "wieder einbauen", ohne das zu klaeren. */

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  body {
    margin: 0; font-family: var(--font); background: var(--ground);
    /* Light fuer Fliesstext, so will es das Manual. Arial hat keinen Light-
       Schnitt und faellt auf Regular zurueck - genau die Office-Regel. */
    font-weight: 300;
    color: var(--ink); line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.5rem); }
  section { padding-block: var(--step); }
  h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.02em; line-height: 1.08; }
  p { margin: 0; }
  a { color: inherit; }
  .num { font-variant-numeric: tabular-nums; }

  /* Ankerziele duerfen nicht unter der klebenden Kopfzeile landen (68px hoch). */
  [id] { scroll-margin-top: 84px; }

  /* Nur fuer Screenreader sichtbar. Wird gebraucht, wo aus Platzgruenden nur
     ein Symbol steht: der zugaengliche Name darf dabei nicht verloren gehen. */
  .vh {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* Sprungmarke: erstes fokussierbare Element der Seite, sonst muss sich die
     Tastaturbedienung auf jeder Seite durch die ganze Kopfzeile arbeiten. */
  .skip {
    position: absolute; left: .75rem; top: .75rem; z-index: 100;
    transform: translateY(-250%);
    background: var(--navy); color: #fff; text-decoration: none;
    font: 700 .9rem/1 var(--font); padding: .8em 1.2em; border-radius: 999px;
  }
  .skip:focus-visible { transform: translateY(0); }
  .mono { font-family: var(--mono); }

  /* Die Sektionsmarke ist blau: so taucht Blau abschnittsweise auf, ohne
     dass irgendwo eine dunkle Flaeche noetig waere. */
  .eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--navy);
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: .55em;
    font: 700 1.02rem/1 var(--font); letter-spacing: .015em;
    padding: 1.05em 1.75em; border-radius: 999px; border: 1.5px solid transparent;
    cursor: pointer; text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  /* Der Primaerbutton ist NAVY mit weisser Schrift, und zwar OHNE Orange.
     Der Weg dahin, damit ihn niemand zurueckdreht:
     - Weiss auf Orange erreicht 2.93, ein orange gefuellter Button kann also
       gar keine gut lesbare Beschriftung tragen.
     - Navy auf Orange erreicht 5.15 und besteht die Pruefung, wurde aber als
       "orange auf blau, schlecht zu erkennen" zurueckgewiesen.
     - Danach lag das Orange nur noch im Pfeil. Auch das war "farblich
       unguenstig": es ist dieselbe Paarung, nur kleiner.
     Gueltig ist eine Farbpaarung: Weiss auf Navy, 15.09. Kein Orange am Button.
     Das Orange lebt weiter in Wortmarke, Ziffern, Icons und Callout. */
  .btn-primary {
    background: var(--navy); color: #fff;
    box-shadow: 0 8px 20px -10px rgba(0,40,70,.55);
    position: relative; overflow: hidden;
  }
  /* Lichtstreifen, der beim Ueberfahren einmal durchlaeuft. Signalisiert
     Klickbarkeit deutlicher als eine reine Farbaenderung. Liegt hinter der
     Beschriftung und faengt keine Klicks ab. */
  .btn-primary::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.20) 50%, transparent 64%);
    transform: translateX(-130%);
    transition: transform .75s cubic-bezier(.4,0,.2,1);
  }
  .btn-primary:hover::after { transform: translateX(130%); }
  /* Einmaliger Aufmerksamkeitsring, wenn ein Handlungsaufruf ins Bild kommt.
     Bewusst als Ring nach AUSSEN, damit die Beschriftung ruhig bleibt, und
     bewusst in Orange: der liegt hier auf Weiss, nicht auf Blau. */
  @keyframes cta-puls {
    0%   { box-shadow: 0 8px 20px -10px rgba(0,40,70,.55), 0 0 0 0 rgba(255,100,70,.5); }
    70%  { box-shadow: 0 8px 20px -10px rgba(0,40,70,.55), 0 0 0 16px rgba(255,100,70,0); }
    100% { box-shadow: 0 8px 20px -10px rgba(0,40,70,.55), 0 0 0 0 rgba(255,100,70,0); }
  }
  .btn-primary[data-puls] { animation: cta-puls 1.7s ease-out 2; }
  @media (prefers-reduced-motion: reduce) {
    .btn-primary::after { transition: none; }
    .btn-primary[data-puls] { animation: none; }
  }
  .btn-primary:hover { background: color-mix(in srgb, var(--navy) 84%, #000); transform: translateY(-2px); }
  .btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
  .btn-ghost:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px -12px rgba(0,40,70,.45); }
  .btn-arrow { transition: transform .15s ease; }
  .btn:hover .btn-arrow { transform: translateX(3px); }
  /* Fokusring in Navy (15.09 auf Weiss). Teal erreichte hier nur 2.57 und lag
     damit unter den 3:1, die ein Bedienhinweis braucht. Auf dem blauen Footer
     dreht der Ring auf Weiss, sonst waere er dort unsichtbar. */
  /* Gedrueckter Zustand. Ohne den fuehlt sich ein Klick tot an: der Hover hebt an,
     beim Druecken muss es zurueckgehen. */
  .btn:active { transform: translateY(1px); }
  .navtoggle:active, .totop:active { transform: translateY(1px) scale(.97); }
  .team-link:active, .final-alt a:active { transform: translateY(1px); }
  @media (prefers-reduced-motion: reduce) {
    .btn:active, .navtoggle:active, .totop:active, .team-link:active { transform: none; }
  }
  .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
  footer.site a:focus-visible { outline-color: #fff; }

  /* Brand lockup */
  .lockup { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
  .lockup svg { display: block; }
  .wordmark { font-weight: 800; letter-spacing: -.02em; font-size: 1.28rem; white-space: nowrap; }
  /* Das Lockup haengt fest an --navy und --accent, nicht an --ink: das Logo
     soll bei Textfarben-Aenderungen stehen bleiben. Geaendert wurde daran nur
     der Punkt in der Bildmarke. */
  .wm-navy { color: var(--brand-wm, var(--navy)); }
  .wm-pipe { color: var(--ink-faint); font-weight: 400; margin: 0 .28em; }
  .wm-core { color: var(--accent); letter-spacing: .08em; }

  /* Top bar */
  header.top {
    position: sticky; top: 0; z-index: 50;
    /* 95 statt 82 Prozent Deckung: bei 82 schlug der blaue Verlauf des Hero durch
       die Leiste durch und die Kopfzeile wirkte blaustichig, ueber weissen
       Abschnitten dagegen weiss - also uneinheitlich. 95 Prozent entspricht auch
       der just-experts-Seite (bg-background/95). */
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  /* Lesefortschritt: sitzt auf der Unterkante der klebenden Kopfzeile und zeigt,
     wie weit die Seite gelesen ist. Wird von site.js eingehaengt und ueber eine
     CSS-Variable gefuettert, damit pro Scroll-Ereignis nur ein Wert wechselt. */
  .fortschritt {
    position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    transform: scaleX(var(--fortschritt, 0)); transform-origin: 0 50%;
    background: var(--accent); pointer-events: none;
  }
  .top .wrap {
    display: flex; align-items: center; justify-content: space-between;
    height: 68px; gap: 1rem;
    transition: height .25s cubic-bezier(.4,0,.2,1);
  }
  /* Beim Scrollen rueckt die Kopfzeile zusammen und gibt Inhalt frei. */
  .top[data-klein] .wrap { height: 56px; }
  .top .lockup svg { transition: width .25s cubic-bezier(.4,0,.2,1), height .25s cubic-bezier(.4,0,.2,1); }
  .top[data-klein] .lockup svg { width: 28px; height: 28px; }
  .top[data-klein] .wordmark { font-size: 1.12rem; }
  .wordmark { transition: font-size .25s cubic-bezier(.4,0,.2,1); }
  @media (prefers-reduced-motion: reduce) {
    .top .wrap, .top .lockup svg, .wordmark { transition: none; }
  }
  .top .wordmark { --brand-wm: var(--navy); }
  nav.main { display: flex; align-items: center; gap: 1.2rem; }
  .navlinks { display: flex; align-items: center; gap: 1.8rem; }
  /* NUR die Links im Panel, nicht "nav.main a". Die alte Fassung war mit (0,1,2)
     spezifischer als .btn-primary (0,1,0) und hat dem Demo-Button in der Kopfzeile
     Farbe UND Schriftgewicht der Navigationslinks aufgezwungen: die Beschriftung
     stand in --ink-soft auf Navy, also bei etwa 2:1 und praktisch unlesbar.
     Der Button liegt als Geschwister neben .navlinks, dieser Selektor trifft ihn
     also nicht mehr. Hier keine Element-Selektoren mit nav.main davor mehr. */
  .navlinks a { font-size: .9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color .15s; }
  .navlinks a:hover { color: var(--ink); }
  /* Senkrechte Polsterung, damit der Klickbereich der Links die geforderten
     24px erreicht und nicht nur so hoch ist wie die Schrift. */
  .navlinks a.navlink { padding-block: .6rem; position: relative; }
  /* Unterstreichung waechst aus der Mitte, statt einfach da zu sein. */
  .navlinks a.navlink::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 2px;
    background: var(--accent); border-radius: 2px;
    transform: scaleX(0); transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  .navlinks a.navlink:hover::after { transform: scaleX(1); }
  /* "Termin" fuehrt aus der Seite heraus, alle anderen springen innerhalb.
     Gleiche Optik fuer zweierlei Verhalten war der Bruch. */
  .navlinks a.navlink--extern { padding-left: 1.1rem; margin-left: .3rem; }
  .navlinks a.navlink--extern::before {
    content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%;
    width: 1px; height: 1.1em; background: var(--line);
  }
  /* Scrollspy: der Link zum Abschnitt, in dem man gerade steht, traegt die
     Unterstreichung dauerhaft. aria-current macht das auch fuer Screenreader
     hoerbar, die Gestaltung haengt an genau diesem Attribut. */
  .navlinks a.navlink[aria-current] { color: var(--ink); }
  .navlinks a.navlink[aria-current]::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) {
    .navlinks a.navlink::after { transition: none; }
  }
  /* In der 68px hohen Kopfzeile eine Nummer kleiner, sonst sprengt er sie. */
  .top .btn-primary { font-size: .92rem; padding: .78em 1.25em; }
  .top-cta { display: inline-flex; }
  .navtoggle { display: none; }

  /* Hero */
  .hero { background: var(--hero-ground); color: var(--hero-ink); position: relative; overflow: hidden; }
  .hero::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(120% 90% at 82% -8%, rgba(0,40,70,.09), transparent 58%),
      radial-gradient(90% 70% at 100% 108%, rgba(255,100,70,.10), transparent 52%),
      radial-gradient(70% 60% at -10% 30%, rgba(0,40,70,.05), transparent 60%);
    pointer-events: none;
  }
  .hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
  .hero-eyebrow { color: var(--navy); }
  .hero h1 { font-size: clamp(2.3rem,5.2vw,3.65rem); font-weight: 800; color: var(--ink); margin-top: 1.1rem; }
  .hero h1 .hl { color: var(--teal-ink); }
  .hero .lead { margin-top: 1.1rem; font-size: clamp(1.05rem,1.7vw,1.2rem); color: var(--hero-soft); max-width: 34ch; }

  /* IDM-style feature badges */
  .badge-row { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.3rem; }
  /* Die vier Merkmale erscheinen nacheinander statt schlagartig. Bewusst eine
     KEYFRAME-Animation und keine Transition: die Badges stehen ueber dem Falz,
     bekommen .reveal und .is-in im selben Schritt und wuerden mit einer Transition
     gar nicht laufen. Grundzustand ohne .js-anim ist sichtbar. */
  /* Nur die Bewegung wird animiert, NICHT die Sichtbarkeit. Wenn die Animation
     aus irgendeinem Grund nicht laeuft, stehen die Badges einfach 6px tiefer -
     statt unsichtbar zu bleiben. Sichtbaren Inhalt an eine Animation zu haengen
     ist auf dieser Seite verboten, siehe Scroll-Reveal. */
  @keyframes badge-ein {
    from { transform: translateY(7px); }
    to { transform: none; }
  }
  .js-anim .badge-row .badge { animation: badge-ein .45s cubic-bezier(.4,0,.2,1) both; }
  .js-anim .badge-row .badge:nth-child(2) { animation-delay: .09s; }
  .js-anim .badge-row .badge:nth-child(3) { animation-delay: .18s; }
  .js-anim .badge-row .badge:nth-child(4) { animation-delay: .27s; }
  @media (prefers-reduced-motion: reduce) {
    .js-anim .badge-row .badge { animation: none; }
  }
  .badge {
    display: inline-flex; align-items: center; gap: .4em;
    font-size: .76rem; font-weight: 700; letter-spacing: .04em;
    padding: .38em .9em; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink-soft);
    background: var(--surface);
  }
  .badge-ok { color: var(--green-ink); font-size: .7rem; }
  .badge { transition: border-color .18s ease, transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease; }
  .badge:hover {
    border-color: color-mix(in srgb, var(--navy) 45%, var(--line));
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -12px rgba(0,40,70,.5);
  }
  @media (prefers-reduced-motion: reduce) { .badge:hover { transform: none; } }

  .hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
  .hero-note { margin-top: .9rem; font-size: .84rem; color: var(--hero-soft); }

  /* Hero reconciliation card */
  .stmt {
    background: var(--hero-card);
    border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.4rem 1.5rem 1.3rem; box-shadow: var(--shadow);
  }
  .stmt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
  .stmt-title { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hero-soft); }
  .stmt-badge { font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--navy); border: 1px solid var(--line); border-radius: 999px; padding: .25em .7em; }
  .kpi-row { display: flex; align-items: baseline; justify-content: space-between; padding: .62rem 0; border-bottom: 1px dashed var(--hero-line); }
  .kpi-label { font-size: .86rem; color: var(--hero-soft); }
  .kpi-label .code { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); margin-left: .5em; }
  .kpi-val { font-size: 1.18rem; font-weight: 800; color: var(--ink); }
  .kpi-val .unit { font-size: .82rem; font-weight: 600; color: var(--hero-soft); margin-left: .2em; }
  .recon { margin-top: 1.15rem; display: grid; gap: .5rem; }
  /* Steuerung zum erneuten Abspielen des Abgleichs. Wird von site.js eingehaengt
     und erscheint erst, wenn der Ablauf einmal durch ist - vorher waere sie
     sinnlos. Bewusst leise gehalten, der Hero gehoert dem Angebot. */
  .replay {
    margin-top: .9rem; align-self: start;
    display: inline-flex; align-items: center; gap: .45em;
    background: none; border: 0; padding: .25rem 0; cursor: pointer;
    font: 600 .82rem/1 var(--font); color: var(--ink-faint);
    text-decoration: underline; text-underline-offset: .2em;
  }
  .replay:hover { color: var(--ink); }
  .replay svg { transition: transform .4s cubic-bezier(.4,0,.2,1); }
  .replay:hover svg { transform: rotate(-180deg); }
  @media (prefers-reduced-motion: reduce) { .replay svg { transition: none; } }
  .recon-row {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(64,171,120,.10); border: 1px solid rgba(64,171,120,.3);
    border-radius: 10px; padding: .55rem .8rem;
  }
  .recon-l { font-size: .82rem; color: var(--hero-ink); }
  .recon-l .code { font-family: var(--mono); font-size: .7rem; color: var(--ink-faint); }
  .recon-r { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-size: .9rem; color: var(--green-ink); }
  .tick { width: 18px; height: 18px; flex: none; }
  .tick path { stroke: var(--green-ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 26; stroke-dashoffset: 0; }
  @keyframes draw { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }

  /* Der Abgleich in der Hero-Karte laeuft als Ablauf durch: erst zaehlen die
     Kennzahlen hoch, dann haken die drei Pruefzeilen nacheinander ab und stehen
     am Ende alle auf null. Das ist die Aussage der Seite in Bewegung.
     Grundzustand ist wie ueberall FERTIG: ohne JavaScript und bei reduzierter
     Bewegung steht die Karte vollstaendig da, Haken gezeichnet. Erst .js-anim
     nimmt die Zeilen zurueck, damit sie einlaufen koennen. */
  .js-anim .stmt .recon-row { opacity: 0; transform: translateY(6px); }
  .js-anim .stmt .recon-row.is-on {
    opacity: 1; transform: none;
    transition: opacity .35s ease, transform .35s ease;
  }
  .js-anim .stmt .tick path { stroke-dashoffset: 26; }
  .js-anim .stmt .recon-row.is-on .tick path { animation: draw .45s ease .1s forwards; }
  @media (prefers-reduced-motion: reduce) {
    .js-anim .stmt .recon-row { opacity: 1; transform: none; }
    .js-anim .stmt .tick path { stroke-dashoffset: 0; }
    .js-anim .stmt .recon-row.is-on .tick path { animation: none; }
  }

  /* Konturueberschrift, das Erkennungsmerkmal aus den plugnpl.ai-Richtlinien:
     einzelne Woerter einer grossen Headline stehen als Umriss ohne Fuellung.
     Bewusst sparsam, vier Ueberschriften auf der ganzen Seite. Die Strichstaerke
     haengt an em, damit sie mit der Schriftgroesse mitwaechst. */
  .outline {
    color: transparent;
    -webkit-text-stroke: .024em var(--ink);
    text-stroke: .024em var(--ink);
    paint-order: stroke fill;
  }
  /* Wo der Umriss nicht unterstuetzt wird, bleibt die Headline lesbar. */
  @supports not (-webkit-text-stroke: 1px red) {
    .outline { color: var(--ink-soft); }
  }

  /* Bildmarke als Wasserzeichen im Anschnitt: aus den plugnpl.ai-Richtlinien
     (geringe Deckkraft, angeschnitten) und der just-experts-Praxis (3 bis 6
     Prozent, 15 bis 50 Grad gedreht). Hier die eigene CORE-Marke statt einer
     fremden. overflow: clip am Abschnitt, damit der Anschnitt keine
     Querscrollleiste erzeugt. */
  .has-mark { position: relative; overflow: clip; }
  @supports not (overflow: clip) { .has-mark { overflow: hidden; } }
  .wmark {
    position: absolute; z-index: 0; pointer-events: none;
    width: clamp(260px, 34vw, 460px); height: auto;
    color: var(--navy); opacity: .05;
  }
  .wmark--tr { top: -8%; right: -7%; transform: rotate(18deg); }
  .wmark--bl { bottom: -12%; left: -8%; transform: rotate(-24deg); }
  /* Die Drift beim Scrollen setzt site.js ueber die translate-Eigenschaft, NICHT
     ueber transform: sonst wuerde die Drehung oben ueberschrieben. */
  .wmark { will-change: translate; }
  .has-mark > .wrap { position: relative; z-index: 1; }

  /* Scroll-Reveal. Voreinstellung ist SICHTBAR: ohne JavaScript, bei
     reduzierter Bewegung oder wenn das Skript scheitert, steht der Inhalt da.
     Erst site.js setzt .js-anim und blendet gezielt aus, was noch unterhalb
     des Falzes liegt. Was beim Laden schon zu sehen ist, wird nie versteckt. */
  .js-anim .reveal { opacity: 0; transform: translateY(26px); }
  .js-anim .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .62s cubic-bezier(.22,1,.36,1), transform .62s cubic-bezier(.22,1,.36,1);
  }
  /* Richtungen statt einer Bewegung fuer alles: Ueberschriften kommen von links
     herein, Karten von unten, die drei Produkt-Objekte wachsen leicht auf. Das
     macht das Einschweben sichtbar, ohne lauter zu werden. */
  .js-anim .head.reveal, .js-anim .ic-head.reveal { transform: translateX(-24px); }
  .js-anim .head.reveal.is-in, .js-anim .ic-head.reveal.is-in { transform: none; }
  .js-anim .stmt.reveal, .js-anim .ic-table-wrap.reveal, .js-anim .audit-log.reveal {
    transform: translateY(20px) scale(.985);
  }
  .js-anim .stmt.reveal.is-in, .js-anim .ic-table-wrap.reveal.is-in, .js-anim .audit-log.reveal.is-in {
    transform: none;
  }
  /* Zellen der Haarlinien-Raster blenden NUR auf, sie wandern nicht. Die Linien
     dieser Raster entstehen aus 1px Gitterabstand vor der Linienfarbe; sobald
     eine Zelle verschoben ist, klafft die Luecke auf und die Linienfarbe blitzt
     als breites graues Band auf. Gewandert wird deshalb nur ausserhalb der
     Raster - Ueberschriften, Produkt-Objekte, Team. */
  .js-anim .problem-card.reveal, .js-anim .card.reveal, .js-anim .role-card.reveal,
  .js-anim .trust-cell.reveal {
    transform: none;
  }
  .js-anim .team-card.reveal { transform: translateY(30px); }
  @media (prefers-reduced-motion: reduce) {
    .js-anim .reveal, .js-anim .reveal.is-in { opacity: 1; transform: none; transition: none; }
  }

  /* Section heading: eine Groesse fuer alle Sektionen, damit die Seite eine
     Stimme hat statt vier. Der Schlussaufruf darf lauter sein, sonst nichts. */
  .head { max-width: 60ch; margin-bottom: 3rem; }
  .head h1, .head h2 { font-size: clamp(1.8rem,3.6vw,2.5rem); font-weight: 800; margin-top: .7rem; }
  .head p { margin-top: 1rem; font-size: 1.08rem; color: var(--ink-soft); }

  /* DAS Raster. Vier Gruppen, ein Aussehen: keine Kachel, keine Rundung, kein
     Schatten, nur Haarlinien. Die Linien entstehen aus 1px Gitterabstand vor
     einer Linienfarbe, deshalb duerfen die Zellen keine eigene Luecke haben. */
  .problem-grid, .grid, .roles-grid, .trust-grid, .legal-grid {
    --cell-pad-x: min(1.6rem, 3vw);
    display: grid; gap: 1px;
    background: var(--line);
    border-block: 1px solid var(--line);
    margin-inline: calc(-1 * var(--cell-pad-x));
  }
  .problem-card, .card, .role-card, .trust-cell, .legal-item {
    background: var(--surface);
    padding: 1.9rem var(--cell-pad-x);
    transition: background .18s ease;
  }
  /* Hover: die Karte hebt sich, die Ueberschrift faerbt, das Symbol kippt. Der
     Ruhezustand bleibt flach - gehoben wird nur, was gerade angefasst wird. */
  .card, .role-card, .problem-card {
    transition: background .18s ease, transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s ease;
  }
  /* Rasterzellen tragen den Grund IHRES Abschnitts, nicht pauschal Weiss. Die
     Haarlinien entstehen aus dem 1px-Gitterabstand vor der Linienfarbe, die
     Zellen muessen also deckend sein - transparent geht nicht, sonst schlaegt
     die Linienfarbe flaechig durch. Auf dem warmen Abschnitt waren die Zellen
     weiss und deckten den Ton fast vollstaendig zu: die Sektion las sich wie
     eine weisse. */
  #fuer-wen .role-card { background: var(--tint-warm); }
  #fuer-wen .role-card:hover { background: color-mix(in srgb, var(--tint-warm) 55%, #fff); }

  .card:hover, .role-card:hover, .problem-card:hover {
    background: var(--surface-2);
    transform: translateY(-4px);
    box-shadow: 0 18px 34px -24px rgba(0,40,70,.55);
  }
  .card:hover h3, .role-card:hover .role-title, .problem-card:hover h3 { color: var(--navy); }
  .card h3, .role-title, .problem-card h3 { transition: color .18s ease; }
  .problem-card:hover .problem-n { opacity: .5; }
  .problem-n { transition: opacity .22s ease; }
  @media (prefers-reduced-motion: reduce) {
    .card, .role-card, .problem-card { transition: background .18s ease; }
    .card:hover, .role-card:hover, .problem-card:hover { transform: none; }
  }
  .card .ic, .role-icon { transition: transform .25s cubic-bezier(.4,0,.2,1); }
  .card:hover .ic, .role-card:hover .role-icon { transform: scale(1.08) rotate(-3deg); }
  @media (prefers-reduced-motion: reduce) {
    .card .ic, .role-icon { transition: none; }
    .card:hover .ic, .role-card:hover .role-icon { transform: none; }
  }

  /* GRUENDE DER ABSCHNITTE. Bewusst kein simples Hell/Dunkel-Wechselspiel wie
     ganz am Anfang: dort waren es fuenf gleiche Graubaender MIT Trennlinien, das
     wirkte gestueckelt. Hier wechseln vier UNTERSCHIEDLICHE Gruende ohne
     Trennlinien, keine zwei gleichen nebeneinander:
       Hero weiss . Endorsement warm . Problem weiss . Loesung kuehl .
       Leistungen weiss . Konsolidierung warm . Audit weiss . Ablauf kuehl .
       Rollen warm . Sicherheit NAVY . Schluss weiss . Footer NAVY
     Wer eine Sektion einfuegt, haelt die Regel ein: nie zwei gleiche Gruende
     direkt hintereinander, und weiterhin keine Trennlinie zwischen Abschnitten. */
  .endorse { background: var(--tint-warm); }
  .flow-sec { background: var(--tint-cool); }
  .ic-sec { background: var(--tint-warm); }
  .steps-sec { background: var(--tint-cool); }
  #fuer-wen { background: var(--tint-warm); }
  .team-sec { background: var(--tint-cool); }

  /* Endorsement */
  .endorse { padding-block: 2.4rem; }
  /* Die just-experts-Marke wird als FREIGEGEBENE Datei eingesetzt, nicht aus
     Polygon und Schriftzug nachgebaut. Das Brand Manual ist da eindeutig:
     "Ausgangspunkt jeder gestalterischen Anwendung sollen nur die vermassten
     Wortbildmarken sein". Vorher stand hier eine handgesetzte Wortmarke neben
     einer Grafik, deren Data-URI ausserdem abgeschnitten war und nie rendete.
     Anordnung "Reihe", laut Manual fuer breite, flache Platzierungen. Die
     Mindestgroesse dafuer sind 10 Prozent der Originaldatei, also 51px Hoehe -
     beide Einsaetze liegen darueber. */
  .endorse-in { display: flex; align-items: center; justify-content: center; gap: 1.15rem; }
  .endorse-k { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
  .je-reihe { display: block; height: 72px; width: auto; }

  /* Problem section */
  .problem-grid { grid-template-columns: repeat(4, 1fr); }
  .problem-n { font-size: 2rem; font-weight: 800; color: var(--accent); opacity: .25; line-height: 1; }
  .problem-card h3 { font-size: 1rem; font-weight: 800; margin-top: .55rem; color: var(--ink); }
  .problem-card p { font-size: .9rem; color: var(--ink-soft); margin-top: .5rem; line-height: 1.55; }

  /* Solution flow */
  .flow-sec .head h2 { color: var(--ink); }
  .flow-sec .head p { color: var(--ink-soft); }
  .flow-wrap { display: flex; align-items: stretch; gap: 0; margin-top: 2.5rem; flex-wrap: wrap; justify-content: center; }
  .flow-box {
    border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.4rem 1.6rem; min-width: 180px;
  }
  .fb-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
  .fb-items { margin-top: .7rem; display: flex; flex-direction: column; gap: .35rem; }
  .fb-item { font-size: .9rem; color: var(--ink); display: flex; align-items: center; gap: .55em; }
  .fb-item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; }
  .flow-arrow { display: flex; align-items: center; padding: 0 1rem; font-size: 1.5rem; color: var(--navy); }
  /* Ueberfaehrt man eine Station des Ablaufs, treten die anderen zurueck.
     Reine Deckkraft, keine Bewegung, deshalb auch bei reduzierter Bewegung ok. */
  .flow-box, .flow-engine, .flow-out { transition: opacity .25s ease, transform .25s ease; }
  .flow-wrap:hover .flow-box, .flow-wrap:hover .flow-engine, .flow-wrap:hover .flow-out { opacity: .45; }
  .flow-wrap .flow-box:hover, .flow-wrap .flow-engine:hover, .flow-wrap .flow-out:hover { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .flow-wrap .flow-box:hover, .flow-wrap .flow-engine:hover, .flow-wrap .flow-out:hover { transform: translateY(-3px); }
  }
  @media (hover: none) {
    .flow-wrap:hover .flow-box, .flow-wrap:hover .flow-engine, .flow-wrap:hover .flow-out { opacity: 1; }
  }
  .flow-engine {
    background: linear-gradient(135deg, rgba(46,172,232,.14), rgba(46,172,232,.04));
    border: 1px solid rgba(46,172,232,.45); border-radius: var(--r);
    padding: 1.4rem 1.8rem; text-align: center; min-width: 200px;
  }
  .fe-name { font-size: 1.4rem; font-weight: 800; color: var(--teal-ink); letter-spacing: -.02em; }
  .fe-tag { font-size: .75rem; color: var(--ink-soft); margin-top: .25rem; }
  .fe-checks { margin-top: .9rem; display: flex; flex-direction: column; gap: .3rem; text-align: left; }
  .fe-check { font-size: .82rem; color: var(--ink-soft); display: flex; align-items: center; gap: .45em; }
  .fe-check::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: rgba(64,171,120,.2); border: 1.5px solid var(--green); display: flex; align-items: center; justify-content: center; flex: none; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2340AB78' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 L10 18 L20 6'/%3E%3C/svg%3E"); background-size: 8px; background-repeat: no-repeat; background-position: center; }
  .flow-out {
    background: rgba(64,171,120,.1); border: 1px solid rgba(64,171,120,.35);
    border-radius: var(--r); padding: 1.4rem 1.8rem; min-width: 200px;
  }
  .fo-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-ink); }
  .fo-items { margin-top: .7rem; display: flex; flex-direction: column; gap: .35rem; }
  .fo-item { font-size: .9rem; color: var(--ink); display: flex; align-items: center; gap: .55em; }
  .fo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-ink); flex: none; }

  /* Features */
  .grid { grid-template-columns: repeat(2, 1fr); }
  .card .ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--navy); margin-bottom: 1.1rem; }
  .card:nth-child(2) .ic { background: color-mix(in srgb, var(--navy) 10%, transparent); color: var(--navy); }
  .card:nth-child(3) .ic { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }
  .card:nth-child(4) .ic { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-ink); }
  .card h3 { font-size: 1.22rem; font-weight: 800; }
  .card p { margin-top: .6rem; color: var(--ink-soft); font-size: .96rem; }
  .card ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
  .card li { position: relative; padding-left: 1.4em; font-size: .9rem; color: var(--ink-soft); }
  .card li .code { font-family: var(--mono); font-size: .78em; color: var(--ink-faint); }
  .card li::before { content: ""; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 2px; background: var(--navy); }

  /* IC detail / Konsolidierung */
  .ic-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }
  .ic-head { max-width: 100%; margin-bottom: 1.6rem; }
  .ic-head h2 { font-size: clamp(1.8rem,3.6vw,2.5rem); font-weight: 800; margin-top: .7rem; }
  .ic-head p { margin-top: 1rem; font-size: 1.08rem; color: var(--ink-soft); }
  .ic-checks { list-style: none; padding: 0; display: grid; gap: .55rem; margin: 0; }
  .ic-checks li { display: flex; align-items: flex-start; gap: .65em; font-size: .95rem; color: var(--ink-soft); }
  .ic-checks li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: rgba(64,171,120,.12); border: 1.5px solid var(--green); flex: none; margin-top: .1em; background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2340AB78' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 L10 18 L20 6'/%3E%3C/svg%3E"); background-size: 10px; background-repeat: no-repeat; background-position: center; }
  /* overflow-x statt hidden: die Tabelle hat eine Mindestbreite und wurde auf
     schmalen Bildschirmen sonst abgeschnitten, ohne Moeglichkeit zu scrollen. */
  .ic-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; box-shadow: var(--shadow); }
  .ic-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: .88rem; }
  .ic-table th { background: color-mix(in srgb, var(--navy) 7%, transparent); padding: .65rem 1rem; text-align: left; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
  .ic-table td { padding: .65rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; transition: background .18s ease; }
  /* Die Summenzeile hat ihre eigene Farbe und wird nicht ueberschrieben. */
  .ic-table tr:not(.ic-total):hover td { background: color-mix(in srgb, var(--navy) 6%, transparent); }
  .ic-table tr td:first-child { transition: padding-left .18s ease; }
  .ic-table tr:not(.ic-total):hover td:first-child { padding-left: 1.35rem; }
  @media (prefers-reduced-motion: reduce) {
    .ic-table tr:not(.ic-total):hover td:first-child { padding-left: 1rem; }
  }
  .ic-table tr.ic-total td { background: color-mix(in srgb, var(--green) 6%, transparent); font-weight: 700; }
  .ic-pill { display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 700; padding: .22em .65em; border-radius: 999px; }
  .ic-pill.ok { background: rgba(64,171,120,.12); color: var(--green-ink); border: 1px solid rgba(64,171,120,.3); }

  /* Audit section */
  .audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
  .audit-log {
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.2rem 1.4rem;
    font-family: var(--mono); overflow-x: auto;
  }
  .al-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .9rem; }
  .al-title { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
  .al-immutable { font-size: .65rem; padding: .22em .6em; border-radius: 4px; background: rgba(64,171,120,.14); color: var(--green-ink); border: 1px solid rgba(64,171,120,.35); letter-spacing: .06em; }
  .al-row { display: grid; min-width: 34rem; grid-template-columns: 5.5rem 5.5rem 1fr auto; gap: .5rem; padding: .42rem 0; border-top: 1px solid rgba(0,40,70,.10); font-size: .76rem; align-items: baseline; }
  .al-ts { color: var(--ink-soft); }
  .al-user { color: var(--teal-ink); }
  .al-msg { color: var(--ink); }
  .al-val { color: var(--green-ink); font-weight: 700; text-align: right; white-space: nowrap; }
  .al-val.final { color: var(--teal-ink); }

  /* Steps */
  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.5rem; position: relative; }
  .steps::before, .steps::after {
    content: ""; position: absolute; top: 23px; left: calc(50% / 3 + 24px); right: calc(50% / 3 + 24px);
    height: 2px; background: var(--line);
  }
  /* Die zweite Linie liegt in Teal darueber und waechst von links, sobald der
     Abschnitt im Bild ist. Grundzustand ist VOLL, wie ueberall: ohne JavaScript
     steht die Linie einfach da. */
  .steps::after {
    background: var(--navy); transform-origin: 0 50%;
  }
  .js-anim .steps::after { transform: scaleX(0); }
  .js-anim .steps.is-in::after { transform: scaleX(1); transition: transform 1.1s cubic-bezier(.4,0,.2,1) .15s; }
  @media (prefers-reduced-motion: reduce) {
    .js-anim .steps::after, .js-anim .steps.is-in::after { transform: scaleX(1); transition: none; }
  }
  .step-n {
    width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--navy) 8%, transparent);
    border: 2px solid var(--navy); display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 800; color: var(--navy); position: relative; z-index: 1;
    background-color: var(--surface);
  }
  .step-n { transition: background-color .22s ease, color .22s ease, transform .22s cubic-bezier(.4,0,.2,1); }
  .step:hover .step-n { background-color: var(--navy); color: #fff; transform: scale(1.08); }
  @media (prefers-reduced-motion: reduce) { .step:hover .step-n { transform: none; } }
  .step h3 { font-size: 1.1rem; font-weight: 800; margin-top: 1rem; }
  .step p { font-size: .95rem; color: var(--ink-soft); margin-top: .5rem; line-height: 1.6; }

  /* Roles (Fuer wen) */
  .roles-grid { grid-template-columns: repeat(3, 1fr); }
  .role-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: grid; place-items: center; margin-bottom: .9rem;
  }
  .role-title { font-size: 1.08rem; font-weight: 800; color: var(--ink); }
  .role-card p { font-size: .9rem; color: var(--ink-soft); margin-top: .45rem; line-height: 1.55; }

  /* Trust: DER dunkle Abschnitt der Seite. Neben dem Footer die einzige blaue
     Flaeche - mehr waeren der Rueckfall in den Kachelstapel vom Anfang. Die
     Farben hier kommen NICHT aus den --ink-Tokens, die sind fuer hellen Grund
     gerechnet; auf Navy gilt: Weiss 15.09, Teal 5.88, #9FB9C8 7.36. */
  .trust { background: var(--navy); color: #fff; }
  .trust .eyebrow { color: #9FB9C8; }
  .trust h2 { font-size: clamp(1.8rem,3.6vw,2.5rem); color: #fff; font-weight: 800; }
  .trust .lead { margin-top: 1rem; color: #9FB9C8; max-width: 60ch; font-size: 1.08rem; }
  .trust-grid { grid-template-columns: repeat(4, 1fr); margin-top: 2.6rem; }
  /* Hoehere Spezifitaet als die gemeinsame Rasterregel, deshalb .trust davor. */
  .trust .trust-grid { background: rgba(255,255,255,.18); border-block-color: rgba(255,255,255,.18); }
  .trust .trust-cell { background: var(--navy); transition: background .2s ease; }
  .trust .trust-cell:hover { background: color-mix(in srgb, var(--navy) 88%, #fff); }
  .trust-cell .big { transition: transform .22s cubic-bezier(.4,0,.2,1); transform-origin: 0 50%; }
  .trust .trust-cell:hover .big { transform: scale(1.09); }
  @media (prefers-reduced-motion: reduce) { .trust .trust-cell:hover .big { transform: none; } }
  .trust-cell .big { font-size: 1.5rem; font-weight: 800; color: #fff; }
  .trust-cell .lbl { margin-top: .35rem; font-size: .86rem; color: #9FB9C8; }
  .trust-note { margin-top: 1.8rem; font-size: .9rem; color: #9FB9C8; display: inline-flex; align-items: center; gap: .6em; }
  .trust-note .code { font-family: var(--mono); color: #9FB9C8; font-size: .82rem; }
  /* Das Wasserzeichen dreht auf Weiss, sonst verschwindet es im Navy. */
  .trust .wmark { color: #fff; opacity: .07; }
  /* Licht, das dem Zeiger folgt. Uebernommen aus webseite-je, wo derselbe
     Effekt ueber dunklen Abschnitten liegt: auf Hell waere er unsichtbar.
     Wird nur von site.js eingehaengt, wenn ein echter Zeiger da ist und keine
     reduzierte Bewegung gewuenscht wird. */
  .spot {
    position: absolute; left: 0; top: 0; z-index: 0;
    width: 560px; height: 560px; margin: -280px 0 0 -280px;
    border-radius: 50%; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, rgba(46,172,232,.20), rgba(46,172,232,0) 62%);
    transition: opacity .35s ease;
  }
  .trust a:focus-visible { outline-color: #fff; }

  /* Ansprechpartner, Muster von der iDM-Seite: Portrait gross und ungerahmt,
     daneben Name und Funktion. Zwei Abweichungen bewusst:
     - iDM setzt ein Zitat der Geschaeftsfuehrung kursiv darunter. Fuer diese
       beiden liegt keines vor, und einer realen Person eine Aussage zu
       erfinden kommt nicht in Frage. Also nur Name und Funktion.
     - iDM hat keinen Knopf im Abschnitt. Hier steht je ein Buchungslink, weil
       die just-experts-Seite genau den pro Person anbietet und die ganze Seite
       auf Terminbuchung zielt.
     Kein Radius an den Bildern, wie bei iDM: ungerahmte Flaeche. */
  .team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 4vw, 3rem); max-width: 900px; }
  /* Foto links, Text rechts - wie im Personenblock der iDM-Seite. Das Bild
     ueberspannt alle Zeilen der ersten Spalte, deshalb braucht der Text keinen
     eigenen Wrapper im Markup. */
  .team-card {
    display: grid; grid-template-columns: clamp(104px, 14vw, 148px) 1fr;
    /* Die dritte Zeile nimmt den Rest: dadurch bleibt der Text oben beisammen,
       auch wenn das Foto hoeher ist. Ohne das zieht das Foto die Zeilen
       auseinander und Funktion und Link rutschen an den unteren Bildrand. */
    grid-template-rows: auto auto 1fr;
    column-gap: 1.2rem; align-items: start;
  }
  /* Die Portraits sitzen in der Aussenkontur der Bildmarke. Das ist keine freie
     Idee, sondern im Markenmaterial ausdruecklich vorgesehen: das Polygon darf
     als Rahmenform fuer Fotos dienen. Die Punkte sind exakt aus
     just-experts-brand/assets/logo-kompakt umgerechnet (shape1, Bezug
     637.38 x 634.07), nicht nachgezeichnet. */
  .team-bild {
    grid-column: 1; grid-row: 1 / -1;
    display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    background: var(--surface);
    clip-path: polygon(100.00% 38.16%, 76.44% 78.87%, 34.65% 100.00%, 0.00% 57.21%, 12.72% 11.48%, 59.57% 0.00%);
  }
  .team-foto {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
    /* Langsamer Zoom beim Ueberfahren, wie auf der just-experts-Seite. Der
       Rahmen bleibt stehen, nur das Bild darin waechst. */
    transition: transform .7s cubic-bezier(.4,0,.2,1);
  }
  .team-card:hover .team-foto { transform: scale(1.07); }
  .team-card:hover .team-name { color: var(--navy); }
  .team-name { transition: color .2s ease; }
  @media (prefers-reduced-motion: reduce) {
    .team-foto { transition: none; }
    .team-card:hover .team-foto { transform: none; }
  }
  .team-name { grid-column: 2; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
  .team-rolle { grid-column: 2; margin-top: .25rem; font-size: .9rem; color: var(--ink-soft); }
  .team-link {
    grid-column: 2; justify-self: start; margin-top: .7rem;
    display: inline-flex; align-items: center; gap: .5em;
    font-size: .9rem; font-weight: 700; color: var(--ink);
    text-underline-offset: .2em;
  }
  .team-link:hover { text-decoration-thickness: 2px; }
  .team-link:hover .btn-arrow { transform: translateX(3px); }
  @media (max-width: 700px) {
    .team-grid { grid-template-columns: 1fr; }
  }

  /* ABSCHNITTSFORMEN. Vorher hatten sechs Abschnitte dieselbe Komposition:
     Kopf links, Raster darunter. Die Seite wirkte dadurch gleichfoermig, obwohl
     die Gruende wechselten. Vorbild iDM: dort wechseln die FORMEN. Jetzt:
       Hero geteilt . Endorsement zentriert . Problem Kopf+Raster .
       Loesung Schema . Leistungen Kopf+Raster . Konsolidierung Text links /
       Objekt rechts . Audit GESPIEGELT, Objekt links / Text rechts .
       Ablauf ZENTRIERT . Rollen Kopf NEBEN dem Raster . Sicherheit ZENTRIERT
       auf dunkel . Ansprechpartner Kopf+Karten . Schluss zentriert
     Wer einen Abschnitt ergaenzt, waehlt eine Form, die nicht schon zweimal
     direkt daneben steht. */

  /* Audit gespiegelt, damit es sich von der Konsolidierung darueber
     unterscheidet: dort Text links, hier Objekt links. */
  /* Spalten ausdruecklich zuweisen statt ueber order: order aendert hier zwar den
     berechneten Wert, aber nicht die Platzierung (gemessen). */
  @media (min-width: 901px) {
    .audit-grid .head { grid-column: 2; grid-row: 1; }
    .audit-grid .audit-log { grid-column: 1; grid-row: 1; }
  }

  /* Der Ablauf ist eine Abfolge und liest sich mittig besser. */
  .steps-sec .head { margin-left: auto; margin-right: auto; text-align: center; }
  .steps-sec .step { text-align: center; }
  .steps-sec .step-n { margin-left: auto; margin-right: auto; }

  /* Das dunkle Band ist eine Aussage, kein Katalog: zentriert. */
  .trust .head { margin-left: auto; margin-right: auto; text-align: center; }
  .trust .head .lead { margin-left: auto; margin-right: auto; }
  .trust .wrap { text-align: center; }
  .trust-cell { text-align: left; }
  .trust-note { text-align: left; }

  /* Rollen: Kopf NEBEN dem Raster statt darueber. Kein position: sticky - der
     Abschnitt traegt has-mark und damit overflow: clip, das Sticky abwuergt. */
  @media (min-width: 901px) {
    #fuer-wen .wrap {
      display: grid; grid-template-columns: minmax(210px, 290px) 1fr;
      gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
    }
    #fuer-wen .head { margin-bottom: 0; }
    /* In der schmalen Spalte war die Ueberschrift mit 40px viel zu gross und
       zerfiel in Einzelwoerter. */
    #fuer-wen .head h2 { font-size: clamp(1.45rem, 2.1vw, 1.75rem); }
    #fuer-wen .head p { font-size: 1rem; }
    #fuer-wen .roles-grid { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  }

  /* Final CTA */
  .final { text-align: center; }
  .final h2 { font-size: clamp(2rem,4.5vw,3rem); font-weight: 800; }
  .final p { margin: 1.1rem auto 0; max-width: 46ch; color: var(--ink-soft); font-size: 1.1rem; }
  .final .hero-cta { justify-content: center; }
  .final .btn-ghost { border-color: var(--line); color: var(--ink); }
  .final .btn-ghost:hover { border-color: var(--navy); color: var(--ink); }
  .final-alt { margin-top: 1.15rem; font-size: .9rem; color: var(--ink-soft); }
  /* Links im Fliesstext sind unterstrichen: Farbe als einziges Unterscheidungs-
     merkmal ist fuer farbfehlsichtige Leser kein Merkmal. Steuerelemente
     (Navigation, Buttons) bleiben ohne Unterstreichung, die erkennt man an der Form. */
  .final-alt a { color: var(--teal-ink); text-underline-offset: .15em; }
  .final-alt a:hover { text-decoration-thickness: 2px; }

  /* Legal */
  .legal-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; }
  .legal-item .k { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
  .legal-item .v { margin-top: .3rem; color: var(--ink); font-size: .98rem; line-height: 1.5; }
  .legal-item .v a { color: var(--teal-ink); text-underline-offset: .15em; }
  .legal-item .v a:hover { text-decoration-thickness: 2px; }
  .legal-note { margin-top: 2.4rem; max-width: 720px; font-size: .9rem; color: var(--ink-soft); padding-top: 1.5rem; border-top: 1px solid var(--line); }
  @media (max-width: 560px) { .legal-grid { grid-template-columns: 1fr; } }
  .dp { max-width: 760px; }
  .dp h3 { font-size: 1.12rem; font-weight: 800; color: var(--ink); margin-top: 2.1rem; letter-spacing: -.01em; }
  .dp p { margin-top: .7rem; color: var(--ink-soft); font-size: .95rem; line-height: 1.65; }
  .dp ul { margin: .7rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
  .dp li { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; }
  .dp a { color: var(--teal-ink); text-underline-offset: .15em; }
  .dp a:hover { text-decoration-thickness: 2px; }
  .dp strong { color: var(--ink); font-weight: 700; }
  .dp-updated { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-faint); }
  .dp-callout { margin-top: 1.8rem; padding: 1.15rem 1.35rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 0 10px 10px 0; }
  .dp-callout h4 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
  .dp-callout p { margin-top: .55rem; }

  /* Footer */
  /* Der einzige flaechig blaue Abschnitt der Seite. Navy, nicht Navy-Deep:
     er soll als blau gelesen werden, nicht als schwarz. */
  footer.site { background: var(--navy); color: #C7D6DF; padding-block: 3.5rem 2.2rem; }
  .foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.16); }
  /* Im Footer die weisse Reihe-Fassung: laut Farbtabelle die Variante fuer
     blaue und dunkle Untergruende. */
  .je-reihe--foot { height: 64px; }
  .foot-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
  .foot-links a { font-size: .9rem; color: #C7D6DF; text-decoration: none; position: relative; }
  .foot-links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--teal); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
  }
  .foot-links a:hover { color: #fff; }
  .foot-links a:hover::after { transform: scaleX(1); }
  @media (prefers-reduced-motion: reduce) { .foot-links a::after { transition: none; } }
  .foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; font-size: .82rem; color: #9FB9C8; }
  .foot-bottom a { color: #9FB9C8; }

  /* Zurueck nach oben. Erscheint erst, wenn man ein Stueck gescrollt ist, und
     wird von site.js eingehaengt: ohne JavaScript waere der Knopf funktionslos
     und haette auf der Seite nichts verloren. */
  .totop {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
    z-index: 60; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--navy); color: #fff; border: 0;
    box-shadow: 0 10px 24px -12px rgba(0,40,70,.7);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .totop[data-show] { opacity: 1; visibility: visible; transform: none; }
  .totop:hover { background: color-mix(in srgb, var(--navy) 84%, #000); }
  @media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

  /* Responsive */
  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; }
    .stmt { max-width: 460px; }
    .problem-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-wrap { flex-direction: column; align-items: center; }
    .flow-arrow { transform: rotate(90deg); padding: .5rem 0; }
    .grid { grid-template-columns: 1fr; }
    .ic-wrap, .audit-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .steps::before { display: none; }
    .roles-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
  }
  /* Ab hier hat die Kopfzeile keinen Platz mehr fuer alle Links: sie wandern in
     ein aufklappbares Panel. Vorher verschwanden sie einfach, die Seite war auf
     dem Handy also nicht navigierbar. */
  @media (max-width: 860px) {
    /* Gleiche Farbgebung wie der Primaerbutton: die Kopfzeile hat damit EINEN
       Button-Stil statt eines gefuellten und eines hellen mit blauem Symbol. */
    .navtoggle {
      display: grid; place-items: center; flex: none;
      width: 44px; height: 44px; border-radius: 999px;
      border: 0; background: var(--navy);
      color: #fff; cursor: pointer; padding: 0;
      box-shadow: 0 8px 20px -10px rgba(0,40,70,.55);
    }
    .navtoggle:hover { background: color-mix(in srgb, var(--navy) 84%, #000); }
    .navlinks {
      position: absolute; top: calc(100% + .5rem);
      left: clamp(1.15rem, 4vw, 2.5rem); right: clamp(1.15rem, 4vw, 2.5rem);
      display: none; flex-direction: column; align-items: stretch; gap: .15rem;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r); box-shadow: var(--shadow); padding: .45rem;
    }
    .navlinks[data-open] { display: flex; }
    .navlinks a.navlink {
      padding: .85rem 1rem; border-radius: 9px; font-size: 1rem; color: var(--ink);
    }
    .navlinks a.navlink:hover { background: var(--surface-2); }
    /* Im Panel trennt eine Linie oben statt einer Linie links. */
    .navlinks a.navlink--extern { padding-left: 1rem; margin-left: 0; margin-top: .35rem; padding-top: 1.1rem; }
    .navlinks a.navlink--extern::before {
      left: 1rem; right: 1rem; top: 0; translate: none;
      width: auto; height: 1px;
    }
  }
  @media (max-width: 560px) {
    .problem-grid { grid-template-columns: 1fr; }
    .roles-grid { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    /* Die Wortmarke weicht, nicht die Beschriftung des Buttons: ein Pfeil ohne
       Wort sagt niemandem, was passiert. Der Name der Seite steckt weiterhin im
       aria-label des Lockups. */
    .top .wordmark { display: none; }
  }