/* ============================================================
   Service 03 · Vernetzen — page-local LAYOUT only.
   Signature: a network grid — a central hub tile surrounded by
   partner "nodes". Accent: amber. All values are tokens.
   ============================================================ */

.svc--connect { --accent: var(--amber); }
.ve-accent { color: var(--accent); }
.ve-accent.kb-eyebrow::before { background: var(--accent); }

/* ---- Hero -------------------------------------------------- */
.ve-hero__h1 { font: var(--type-display); font-size: clamp(2.3rem, 5vw, 3.8rem); letter-spacing: var(--tracking-tight); color: var(--ink); margin-top: var(--space-4); max-width: 20ch; }
.ve-hero__sub { font: var(--type-body-lg); color: var(--text-body); max-width: 54ch; margin-top: var(--space-5); }

/* ---- Signature: hub + nodes -------------------------------- */
.ve-net { background: var(--surface-sunken); }
.ve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
/* hub spans the leftmost column across two rows, anchoring the network */
.ve-hub { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4);
  background: var(--ink); color: var(--gray-0); padding: var(--space-7); box-shadow: var(--shadow-md);
  border-left: var(--bw-4) solid var(--accent); }
.ve-hub .kb-tilemark { width: 64px; }
.ve-hub__label { font: var(--type-h3); color: var(--gray-0); }

.ve-node { position: relative; background: var(--surface-card); padding: var(--space-6); border: var(--bw) solid var(--border-soft);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-2) var(--ease-snap), box-shadow var(--dur-2) var(--ease-out); }
.ve-node::before { content: ""; position: absolute; top: 0; left: 0; width: var(--bw-4); height: 100%; background: var(--accent);
  transform: scaleY(0); transform-origin: top; transition: transform var(--dur-2) var(--ease-snap); }
.ve-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ve-node:hover::before { transform: scaleY(1); }
.ve-node__disc { font: var(--type-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--accent); }
/* Three of the four nodes carry a partner logo instead of a typeset
   name (marks from website/partner-logos.css); the fourth is a role,
   not a company, and keeps its text heading. So the name is a fixed
   band that all four share: same height, vertically centred, which
   keeps the disc → name → body rhythm identical across the 2×2 block.
   The logos run in their original colours for trademark reasons, so
   the band is what ties the four nodes together — the shared height
   and baseline are doing the work that a uniform ink weight used to.
   Do not filter or dim the marks to even them out. */
.ve-node__name { --ve-node-name-h: clamp(1.75rem, 3vw, 2.25rem);
  --partner-logo-h: var(--ve-node-name-h);
  font: var(--type-h4); color: var(--text-strong); margin-top: var(--space-2);
  display: flex; align-items: center; min-height: var(--ve-node-name-h); }
.ve-node__body { font: var(--type-small); color: var(--text-muted); margin-top: var(--space-3); }

/* ---- Matching steps ---------------------------------------- */
.ve-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); counter-reset: ve; }
.ve-mstep { border-top: var(--bw-2) solid var(--accent); padding-top: var(--space-4); }
.ve-mstep__num { font: var(--type-mono); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--accent); }
.ve-mstep__title { font: var(--type-h4); color: var(--text-strong); margin-top: var(--space-2); }
.ve-mstep__text { font: var(--type-body); color: var(--text-body); margin-top: var(--space-2); }

/* ---- CTA (ink) — bg + grid from .kb-grid-texture--dark ------ */
.ve-cta { color: var(--text-on-dark); }
.ve-cta__quote { font: var(--type-h4); font-style: italic; color: var(--amber-soft); max-width: 34ch; }
.ve-cta__h2 { font: var(--type-h1); color: var(--gray-0); max-width: 22ch; margin-top: var(--space-4); }

@media (max-width: 900px) {
  .ve-grid { grid-template-columns: 1fr; }
  .ve-hub { grid-row: auto; }
  .ve-steps { grid-template-columns: 1fr; }
}