/* PROCESS — .db-process   (about, corporate-events, landing = 4)
   Numbered steps joined by a connector line: vertical on mobile, horizontal
   from 861px. The connector is a ::before on every step but the first. */
.db-process { background: var(--sand); }
.db-process .db-process__inner { display: flex; flex-direction: column; gap: 32px; padding-block: 40px; }
.db-process__title { font-size: clamp(1.5rem, 7vw, 5rem); text-align: center; line-height: 1.1; }
/* The step gap drives the connector geometry at both breakpoints, so it lives in
   a variable rather than being written twice. */
.db-process { --db-step-gap: 48px; }

/* MOBILE IS A RAIL, not a vertical stack [Figma 368:4481]: a row of FIXED 320px
   steps, 48px apart, inside a 360px frame — 1424px of content, so it is meant to
   be dragged. Same construction as .db-rail elsewhere in the theme: overflow-x
   plus scroll-snap gives drag, swipe, trackpad and keyboard for free, with no
   JavaScript. */
.db-process .db-process__steps {
	display: flex;
	flex-direction: row;
	gap: var(--db-step-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	align-items: flex-start;
}

.db-process .db-process__steps::-webkit-scrollbar { display: none; }

.db-process__step {
	position: relative;
	flex: 0 0 320px;
	scroll-snap-align: start;
	display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}

/* One connector rule for both breakpoints. With step width W, gap G and a 60px
   ring, the line spans ring-edge to ring-edge less 40px of breathing space:
     left  = -50% - G + 30 + 40
     width = W + G - 60 - 80
   Desktop (G=72) resolves to x=253 w=217 at 1440 — Figma [368:643] says exactly
   that. Mobile (G=48, W=320) gives 228 against Figma's 217. */
.db-process__step:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 30px;
	left: calc(-50% - var(--db-step-gap) + 70px);
	width: calc(100% + var(--db-step-gap) - 140px);
	border-top: 1px solid var(--line);
}
/* Figma [368:616] — a 60px ring holding a small "Schritt N" label in the BODY
   font at 10px, not a big display-font numeral. The pattern's default was a
   76px circle with a 24px number, which is a different device entirely. */
/* Scoped to .db-process: a bare `.db-process__num` loses its font-size to the
   global paragraph rules, which land later. Everything else on the single class
   applied fine, which is what made it look like the size was simply ignored.

   `background: transparent`, not sand: the ring used an opaque fill to mask the
   connector running underneath it, which turned into a visible grey disc on the
   cream sections. The connector now stops 40px short of each ring (see the
   geometry below), so there is nothing to mask — and Figma's ring is a stroke
   with no fill. */
.db-process .db-process__num {
	width: 60px; height: 60px; flex: 0 0 60px; border-radius: 50%;
	border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
	font-family: var(--font-body); font-weight: 300; font-size: 10px; line-height: 20px;
	color: var(--muted); background: transparent; z-index: 1;
}
/* [368:619] 24px/32px, uppercase display — inherited from the global h3 rule */
.db-process__step h3 { font-size: 1.5rem; line-height: 1.3333; }
.db-process__step p { font-size: 16px; line-height: 1.75; color: var(--muted); }
@media (min-width: 861px) {
	.db-process .db-process__inner { padding-block: 60px 120px; gap: 60px; }
	.db-process__title { font-size: 5rem; }
	/* Desktop fits all four, so the rail stops scrolling and the steps share the
	   width. overflow must go back to visible or the connectors get clipped. */
	.db-process { --db-step-gap: 72px; }
	.db-process .db-process__steps { overflow-x: visible; }
	.db-process__step { flex: 1 1 0; padding-inline: 0; }

}