/* ============================================================================
   Systemdiagramme — geteilt von Startseite (.b2b-page) und Case Studies
   (.case-page). Beide Seitentypen definieren dieselben Tokens (--ink, --muted,
   --line, --line2, --acid, --bg, --f-sans, --f-mono), deshalb kommt hier keine
   einzige feste Farbe vor: Hell/Dunkel löst sich automatisch auf.

   Die Diagramme sind Linienzeichnungen im Raster der Seite — keine Flächen,
   keine Schatten, keine Rundungen. Sie sollen wie der Rest der Seite wirken.
   ========================================================================== */

.sys-figure {
  margin: clamp(3.5rem, 7vw, 6rem) 0 0;
}

/* Rahmen wie .b2b-proof / .b2b-steps: nur Haarlinien oben und unten.
   overflow-x, damit breite Diagramme auf dem Telefon scrollen statt auf
   Unleserlichkeit zu schrumpfen. */
.sys-figure__frame {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-block: 1px solid var(--line2);
}

.sys-figure__frame:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 4px;
}

.sys-diagram {
  display: block;
  width: 100%;
  min-width: 44rem;
  height: auto;
}

.sys-figure figcaption {
  max-width: 78ch;
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.7;
}

/* Scroll-Hinweis nur dort, wo tatsächlich gescrollt werden muss. */
.sys-figure__hint {
  display: none;
  margin-top: .7rem;
  color: var(--muted);
  font: 400 .58rem var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .sys-figure__hint { display: block; }
}

/* ---------------------------------------------------------------------------
   Diagramm-Primitive
   ------------------------------------------------------------------------- */

.dg-node        { fill: var(--bg); stroke: var(--line2); stroke-width: 1.5; }
.dg-node--key   { stroke: var(--acid); stroke-width: 2; }
.dg-node--soft  { fill: var(--bg); stroke: var(--line2); stroke-width: 1.5; stroke-dasharray: 5 5; }

.dg-flow        { fill: none; stroke: var(--line2); stroke-width: 1.5; }
.dg-flow--back  { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
.dg-arrow       { fill: var(--line2); stroke: none; }
.dg-arrow--back { fill: var(--muted); stroke: none; }

.dg-grid        { stroke: var(--line); stroke-width: 1; }
.dg-axis        { stroke: var(--line2); stroke-width: 1.5; fill: none; }
.dg-dot         { fill: var(--acid); stroke: none; }

.dg-t {
  fill: var(--ink);
  font-family: var(--f-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.dg-t--sm {
  fill: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  font-weight: 700;
}

.dg-m {
  fill: var(--muted);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 400;
}

.dg-m--xs {
  font-size: 12px;
}

.dg-k {
  fill: var(--acid);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
}