/* =======================================================================
   Viktor Torno — premium interaction layer
   Custom precision cursor · magnetic CTAs · full-bleed film divider ·
   refined scroll choreography. Loaded AFTER site.css.
   Everything here is additive and brand-true: monochrome, hairline,
   sharp, no gradients / glass / 3D.
   ======================================================================= */

/* ----------------------------------------------------------------------
   1 · CUSTOM PRECISION CURSOR  (drafting-style ring + dot)
   Only on fine-pointer, motion-OK devices. Native cursor stays as a
   fallback; we just hide it on the body when ours is active.
   ---------------------------------------------------------------------- */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor [role="button"],
.has-cursor .term-tab,
.has-cursor input,
.has-cursor textarea { cursor: none; }

.vt-cursor,
.vt-cursor__dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 2147483646;
  pointer-events: none;
  will-change: transform;
}

/* outer ring — lags behind, expands over interactive targets */
.vt-cursor {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--vt-ink);
  box-shadow: 0 0 0 1.5px rgba(245,244,240,.45);  /* heller Saum -> auch auf Tinte sichtbar */
  border-radius: 50%;
  transition: width .26s var(--vt-ease), height .26s var(--vt-ease),
              margin .26s var(--vt-ease), border-width .26s var(--vt-ease),
              opacity .3s var(--vt-ease);
}
/* inner dot — tracks the pointer 1:1 */
.vt-cursor__dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--vt-ink);
  box-shadow: 0 0 0 1px rgba(245,244,240,.5);
  border-radius: 50%;
}

/* hovering something clickable → ring blooms, dot shrinks */
.vt-cursor.is-hot {
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-width: 1.5px;
}
.vt-cursor.is-hot ~ .vt-cursor__dot,
body.cursor-hot .vt-cursor__dot { opacity: 0; }

/* a mono "label" can be injected for media triggers (e.g. video tiles) */
.vt-cursor__label {
  position: fixed; top: 0; left: 0; z-index: 2147483646;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-family: var(--vt-font-mono);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--vt-paper); background: var(--vt-ink);
  padding: .5rem .7rem; border-radius: var(--vt-radius-pill);
  opacity: 0; scale: .6;
  transition: opacity .2s var(--vt-ease), scale .2s var(--vt-ease);
  white-space: nowrap;
}
.vt-cursor__label.is-on { opacity: 1; scale: 1; }

/* pressed state */
body.cursor-down .vt-cursor { width: 26px; height: 26px; margin: -13px 0 0 -13px; }

/* Cookie-Consent: solange Banner/Dialog sichtbar sind, native Maus zeigen.
   Der Custom-Cursor (mix-blend) ist über den hoch gestackten Overlays nicht
   zuverlässig sichtbar — daher hier kurz ausblenden und echte Maus an. */
body:has(.ck-bar) .vt-cursor, body:has(.ck-bar) .vt-cursor__dot, body:has(.ck-bar) .vt-cursor__label,
body:has(.ck-modal.is-open) .vt-cursor, body:has(.ck-modal.is-open) .vt-cursor__dot, body:has(.ck-modal.is-open) .vt-cursor__label { display: none !important; }
.has-cursor:has(.ck-bar), .has-cursor:has(.ck-bar) *,
.has-cursor:has(.ck-modal.is-open), .has-cursor:has(.ck-modal.is-open) * { cursor: auto !important; }
.has-cursor:has(.ck-bar) .ck-btn, .has-cursor:has(.ck-bar) .ck-bar__text a, .has-cursor:has(.ck-bar) .ck-switch,
.has-cursor:has(.ck-modal.is-open) .ck-btn, .has-cursor:has(.ck-modal.is-open) .ck-switch, .has-cursor:has(.ck-modal.is-open) .ck-bar__text a { cursor: pointer !important; }

@media (hover: none), (pointer: coarse) {
  .vt-cursor, .vt-cursor__dot, .vt-cursor__label { display: none !important; }
  .has-cursor, .has-cursor * { cursor: auto; }
}

/* ----------------------------------------------------------------------
   2 · MAGNETIC BUTTONS  — JS sets --mx/--my, CSS applies the pull.
   ---------------------------------------------------------------------- */
.btn.is-magnetic {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform .25s var(--vt-ease), background var(--vt-dur-base) var(--vt-ease),
              color var(--vt-dur-base) var(--vt-ease), border-color var(--vt-dur-base) var(--vt-ease);
}
.btn.is-magnetic .arrow {
  transition: transform .25s var(--vt-ease);
  transform: translateX(var(--ax, 0));
}

/* ----------------------------------------------------------------------
   3 · FULL-BLEED FILM DIVIDER  (B&W photography moment)
   On-brand placeholder until a real grainy shot is dropped in via
   --img on .filmstrip__media. Reveals with a clip-wipe on scroll.
   ---------------------------------------------------------------------- */
.filmstrip {
  position: relative;
  background: var(--vt-ink);
  overflow: clip;
  border-top: 1px solid var(--vt-ink);
}
.filmstrip__media {
  position: absolute; inset: 0;
  background-color: #0d0d0d;
  background-image: var(--img, none);
  background-size: cover;
  background-position: center;
  /* B&W, high-contrast, grainy — design-system photography spec */
  filter: grayscale(1) contrast(1.12);
  /* clip-wipe reveal: opens from a thin band to full height */
  clip-path: inset(46% 0 46% 0);
  transition: clip-path 1.1s var(--vt-ease-out);
}
.filmstrip.is-in .filmstrip__media { clip-path: inset(0 0 0 0); }

/* film grain overlay (no image needed — pure CSS noise) + legibility wash */
.filmstrip__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 70% 20%, transparent 30%, rgba(10,10,10,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
/* on-brand placeholder mark: single diagonal hairline + mono tag, shown
   only while no real image is set */
.filmstrip[data-empty] .filmstrip__media::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to top right, transparent calc(50% - .5px), rgba(245,244,240,.14) 50%, transparent calc(50% + .5px));
}

.filmstrip__inner {
  position: relative;
  z-index: 2;
  min-height: clamp(380px, 56vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.filmstrip__meta {
  font-family: var(--vt-font-mono);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245,244,240,.62);
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-bottom: auto;
}
.filmstrip__meta .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(245,244,240,.45); }
.filmstrip__statement {
  font-family: var(--vt-font-display);
  font-weight: var(--vt-wt-light);
  color: var(--vt-paper);
  font-size: clamp(2rem, 5.2vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: var(--vt-track-tight);
  max-width: 20ch;
  margin: 0;
}
.filmstrip__statement em {
  font-style: normal;
  border-bottom: 3px solid var(--vt-signal);
  padding-bottom: .04em;
}
.filmstrip__statement .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px);
}
.filmstrip.is-in .filmstrip__statement .word {
  animation: filmWordUp .8s var(--vt-ease-out) forwards;
  animation-delay: calc(.45s + var(--i, 0) * .06s);
}
@keyframes filmWordUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .filmstrip__media { clip-path: none !important; transition: none; }
  .filmstrip__statement .word { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ----------------------------------------------------------------------
   4 · MICRO-DETAILS
   ---------------------------------------------------------------------- */
/* service cards: hairline corner-tick that draws on hover (precision feel) */
.svc { position: relative; }
.svc::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-top: 1px solid var(--vt-signal);
  border-right: 1px solid var(--vt-signal);
  opacity: 0;
  transition: width .3s var(--vt-ease), height .3s var(--vt-ease), opacity .2s var(--vt-ease);
  pointer-events: none;
}
.svc:hover::after { width: 18px; height: 18px; opacity: 1; }

/* stat numbers get a hairline baseline that wipes in with the counter */
.stat__num { position: relative; }

/* ----------------------------------------------------------------------
   6 · HERO KINETIC WORD  — the one dominant, always-moving highlight.
   Sits inside the green negation box; swaps with a short fade + slide.
   ---------------------------------------------------------------------- */
.rot { display: inline-block; position: relative; }
.rot__w {
  display: inline-block;
  transition: transform .46s var(--vt-ease-out), opacity .46s var(--vt-ease-out);
  will-change: transform, opacity;
}
.rot__w.is-out { transform: translateY(-0.5em); opacity: 0; }
.rot__w.is-pre { transform: translateY(0.55em); opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .rot__w { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ----------------------------------------------------------------------
   7 · RHYTHM BREAK — "Herausforderungen" as a sticky two-column spread.
   The heading pins while the 01–05 rows scroll past it. Pure CSS.
   ---------------------------------------------------------------------- */
@media (min-width: 900px) {
  #herausforderungen {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
  }
  #herausforderungen .section-head {
    position: sticky;
    top: 104px;
    margin: 0;
    align-self: start;
  }
  #herausforderungen .idx-list { margin-top: 0; }
}

/* ----------------------------------------------------------------------
   5 · QUALIFICATION PANEL on the ink section
   Was a stark white card on black — reworked into a dark "spec-sheet":
   transparent ground, light hairlines, white text. Badges keep a small
   light chip so their dark captions stay legible.
   ---------------------------------------------------------------------- */
.ink .qpanel {
  background: rgba(245, 244, 240, 0.035);
  border-color: rgba(245, 244, 240, 0.16);
}
.ink .qpanel > .eyebrow { color: rgba(245, 244, 240, 0.6); }
.ink .qpanel__h { color: var(--vt-paper); }
.ink .qpanel__p { color: rgba(245, 244, 240, 0.62); }

.ink .qpanel__badges {
  border-bottom-color: rgba(245, 244, 240, 0.16);
  gap: 1rem;
}
.ink .qpanel__badges img {
  height: 64px;
  background: var(--vt-paper);
  padding: 10px 16px;
  border-radius: var(--vt-radius-md);
  box-shadow: var(--vt-shadow-sm);
}

.ink .qpanel .qual { border-bottom-color: rgba(245, 244, 240, 0.14); }
.ink .qpanel .qual__title { color: var(--vt-paper); }
.ink .qpanel .qual__issuer { color: rgba(245, 244, 240, 0.52); }
.ink .qpanel .qual__soon {
  color: rgba(245, 244, 240, 0.5);
  border-color: rgba(245, 244, 240, 0.28);
}

.ink .qnorms { border-top-color: rgba(245, 244, 240, 0.16); }
.ink .qnorms__label { color: rgba(245, 244, 240, 0.55); }
.ink .qnorm {
  color: rgba(245, 244, 240, 0.82);
  border-color: rgba(245, 244, 240, 0.22);
}

/* ----------------------------------------------------------------------
   8 · §02 KI-VORTEILE — Apple-style frosted glass on the ink band.
   A faint hairline grid + soft light bloom sits BEHIND the cards so the
   backdrop blur actually refracts something. Cards become floating
   frosted panels. Monochrome, restrained.
   ---------------------------------------------------------------------- */
.greenband { position: relative; overflow: clip; }
.greenband > .container { position: relative; z-index: 1; }

/* backdrop: blueprint hairline grid + two soft monochrome blooms */
.greenband::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(245,244,240,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,244,240,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% 30%, #000 35%, transparent 80%);
}
.greenband::after {
  content: "";
  position: absolute; z-index: 0; pointer-events: none;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 30% 40%, rgba(245,244,240,0.14), transparent 55%),
    radial-gradient(circle at 72% 66%, rgba(245,244,240,0.08), transparent 55%);
  filter: blur(14px);
}

/* grid: drop the hard hairline gaps — let cards float with real spacing */
.greenband .vgrid {
  background: transparent;
  border: 0;
  gap: clamp(12px, 1.4vw, 18px);
}

/* the frosted glass cards */
.greenband .vben {
  background: rgba(245, 244, 240, 0.055);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(245, 244, 240, 0.14);
  border-radius: 18px;
  box-shadow:
    0 1px 0 rgba(245, 244, 240, 0.22) inset,   /* top light edge */
    0 18px 40px -22px rgba(0, 0, 0, 0.7);      /* soft cast shadow */
  transition: background var(--vt-dur-base) var(--vt-ease),
              border-color var(--vt-dur-base) var(--vt-ease),
              transform var(--vt-dur-base) var(--vt-ease);
}
.greenband .vben:hover {
  background: rgba(245, 244, 240, 0.10);
  border-color: rgba(245, 244, 240, 0.30);
  transform: translateY(-4px);
}

/* glassy icon chip to match */
.greenband .vben__check {
  background: rgba(245, 244, 240, 0.10);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-color: rgba(245, 244, 240, 0.28);
  box-shadow: 0 1px 0 rgba(245, 244, 240, 0.22) inset;
}
.greenband .vben:hover .vben__check {
  background: var(--vt-paper);
  color: var(--vt-ink);
  border-color: var(--vt-paper);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* graceful fallback where backdrop-filter is unsupported */
  .greenband .vben { background: rgba(245, 244, 240, 0.09); }
}

/* ----------------------------------------------------------------------
   9 · §03 KI-LÖSUNGEN — "living" feature cards.
   The three large bento cards each run a small, always-on system that
   demonstrates the service instead of just naming it. Monochrome,
   hairline, with the single signal accent. Pure CSS loops.
   ---------------------------------------------------------------------- */
.svc__demo { width: 100%; }
/* let demo'd cards stack content top→down instead of bottom-anchoring */
.svc:has(.svc__demo) .svc__title { margin-top: 1rem; }

/* --- 01 · KI-Beratung: analysis → go-live roadmap with a travelling dot --- */
.svc--full .svc__demo { grid-column: 1 / -1; margin-top: .5rem; }
.demo--road .road { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 5px; height: 14px; }
.demo--road .road::before { content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 1px; background: var(--vt-mist); }
.road__node {
  position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
  background: var(--vt-paper); border: 1px solid var(--vt-concrete);
  animation: roadPulse 5s var(--vt-ease) infinite;
}
.road__node:nth-of-type(1) { animation-delay: 0s; }
.road__node:nth-of-type(2) { animation-delay: 1s; }
.road__node:nth-of-type(3) { animation-delay: 2s; }
.road__node:nth-of-type(4) { animation-delay: 3s; }
.road__node:nth-of-type(5) { animation-delay: 4s; }
.road__dot {
  position: absolute; z-index: 2; top: 50%; left: 5px;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--vt-signal); box-shadow: 0 0 0 4px rgba(15, 59, 46, 0.16);
  animation: roadTravel 5s var(--vt-ease) infinite;
}
@keyframes roadTravel { 0% { left: 5px; } 80%, 100% { left: calc(100% - 5px); } }
@keyframes roadPulse {
  0%, 6%, 30%, 100% { background: var(--vt-paper); border-color: var(--vt-concrete); transform: scale(1); }
  10% { background: var(--vt-signal); border-color: var(--vt-signal); transform: scale(1.3); }
  22% { background: var(--vt-signal); border-color: var(--vt-signal); transform: scale(1); }
}
.road__labels { display: flex; justify-content: space-between; margin-top: .55rem; font-family: var(--vt-font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-fg-subtle); }
.road__labels span { flex: 1; text-align: center; }
.road__labels span:first-child { text-align: left; }
.road__labels span:last-child { text-align: right; }

/* --- 02 · App-Entwicklung: a mini UI assembling itself, looping --- */
.demo--build { height: 86px; }
.demo--build .winui {
  height: 100%; border: 1px solid var(--vt-border); border-radius: 8px;
  background: var(--vt-paper-pure); padding: 8px;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px;
}
.winui__bar { grid-column: 1 / -1; height: 8px; border-radius: 3px; background: var(--vt-mist); }
.winui__b {
  border-radius: 4px; background: var(--vt-chalk); border: 1px solid var(--vt-mist);
  opacity: 0; transform: translateY(6px) scale(.96);
  animation: buildIn 4.6s var(--vt-ease) infinite;
}
.winui__b--3 { background: rgba(15, 59, 46, 0.10); border-color: rgba(15, 59, 46, 0.34); }
.winui__b--1 { animation-delay: .2s; }
.winui__b--2 { animation-delay: .6s; }
.winui__b--3 { animation-delay: 1s; }
.winui__b--4 { animation-delay: 1.4s; }
@keyframes buildIn {
  0% { opacity: 0; transform: translateY(6px) scale(.96); }
  9%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(6px) scale(.96); }
}

/* --- 03 · Corporate LLM: tokens stream from docs into the model core --- */
.demo--stream .stream { display: flex; align-items: center; gap: 7px; min-height: 32px; }
.stream__chip {
  font-family: var(--vt-font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vt-fg-muted); border: 1px solid var(--vt-border); border-radius: 999px;
  padding: .26rem .5rem; white-space: nowrap;
}
.stream__chip--ans { color: var(--vt-signal); border-color: var(--vt-signal); }
.stream__wire { position: relative; flex: 1; height: 1px; background: var(--vt-mist); min-width: 26px; }
.stream__wire i {
  position: absolute; top: 50%; left: 0; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--vt-signal); opacity: 0;
  animation: flow 1.9s linear infinite;
}
.stream__wire i:nth-child(2) { animation-delay: .63s; }
.stream__wire i:nth-child(3) { animation-delay: 1.26s; }
.stream__wire--out i:nth-child(2) { animation-delay: .95s; }
@keyframes flow { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.stream__core {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid var(--vt-signal); background: rgba(15, 59, 46, 0.10);
  animation: corePulse 1.9s var(--vt-ease) infinite;
}
@keyframes corePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 59, 46, 0.28); }
  50% { box-shadow: 0 0 0 5px rgba(15, 59, 46, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .road__dot, .road__node, .winui__b, .stream__wire i, .stream__core { animation: none !important; }
  .road__node { background: var(--vt-concrete); }
  .winui__b { opacity: 1; transform: none; }
  .stream__wire i { display: none; }
}

/* --- 04–09 · eigene, themenpassende Mini-Demos (Linienkunst, Bewegung beim Hover) --- */
.demo--ico { margin-top: 1rem; height: 42px; display: flex; align-items: center; }
.demo--ico svg { height: 40px; width: auto; overflow: visible; }
.demo--ico .ln { fill: none; stroke: var(--vt-concrete); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.demo--ico .acc { fill: none; stroke: var(--vt-signal); stroke-width: 1.6; stroke-linecap: round; }
.demo--ico .accf { fill: var(--vt-signal); stroke: none; }
.demo--ico .p-ring, .demo--ico .p-dot, .demo--ico .scan, .demo--ico .tok { transform-box: fill-box; transform-origin: center; }
.demo--phone .p-ring { opacity: 0; }
.demo--cam .rec { opacity: .35; }
.demo--call .r1, .demo--call .r2 { opacity: 0; }
.demo--doc .scan { opacity: 0; }
.demo--flow2 .tok { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .demo--phone .p-dot { animation: phDot 1.8s var(--vt-ease) infinite; }
  .demo--phone .p-ring { animation: phRing 1.8s var(--vt-ease) infinite; }
  @keyframes phDot { 0%,100% { transform: scale(1); } 50% { transform: scale(1.3); } }
  @keyframes phRing { 0% { opacity: .7; transform: scale(.5); } 70% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; } }

  .demo--cam .rec { animation: recBlink 1.1s steps(1) infinite; }
  @keyframes recBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: .25; } }

  .demo--call .r1 { animation: ring 1.6s var(--vt-ease) infinite; }
  .demo--call .r2 { animation: ring 1.6s var(--vt-ease) infinite; animation-delay: .25s; }
  @keyframes ring { 0% { opacity: 0; } 22% { opacity: 1; } 70%,100% { opacity: 0; } }

  .demo--doc .scan { animation: docScan 2s var(--vt-ease) infinite; }
  @keyframes docScan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(13px); } }

  .demo--flow2 .tok { animation: flowTok 2s linear infinite; }
  @keyframes flowTok { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateX(41px); } }

  .demo--web2 .b1 { animation: webIn 2.2s var(--vt-ease) infinite; }
  .demo--web2 .b2 { animation: webIn 2.2s var(--vt-ease) infinite; animation-delay: .2s; }
  .demo--web2 .btn { animation: webIn 2.2s var(--vt-ease) infinite; animation-delay: .45s; }
  @keyframes webIn { 0% { opacity: 0; } 18%,82% { opacity: 1; } 100% { opacity: 0; } }
}

/* ----------------------------------------------------------------------
   10 · HERO — keep the rotating boxed line on ONE line
   ---------------------------------------------------------------------- */
.hero h1 { max-width: 22ch; }
.hero h1 .neg { white-space: nowrap; }
.hero h1 .reveal-line:first-child { overflow: visible; }

/* ----------------------------------------------------------------------
   11 · §01 HERAUSFORDERUNGEN — hover no longer reflows the text.
   The row nudges with transform (no width change) and the description
   column gets more room so no word ever drops on hover.
   ---------------------------------------------------------------------- */
.idx-row {
  transition: background var(--vt-dur-base) var(--vt-ease),
              transform var(--vt-dur-base) var(--vt-ease);
}
.idx-row:hover { padding-left: 0; transform: translateX(10px); }
@media (min-width: 861px) { .idx-row__body { grid-template-columns: minmax(0, 21ch) 1fr; } }

/* ----------------------------------------------------------------------
   12 · §04 ABLAUF — scroll-driven progress. The connector line draws
   itself green and each step's node lights up as you scroll into it.
   Activation class .is-active is toggled by ScrollTrigger (site.js).
   ---------------------------------------------------------------------- */
.flow__step:not(:last-child) .flow__rail::after {
  content: "";
  position: absolute;
  top: 25px; bottom: calc(-25px - clamp(1.9rem, 3.6vw, 3rem));
  left: 50%; margin-left: -0.5px; width: 1px;
  background: var(--vt-signal);
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--vt-ease);
  z-index: 1;
}
.flow__step.is-active:not(:last-child) .flow__rail::after { transform: scaleY(1); }

.flow__node { transition: background var(--vt-dur-base) var(--vt-ease), color var(--vt-dur-base), border-color var(--vt-dur-base), transform var(--vt-dur-base) var(--vt-ease); }
.flow__step.is-active .flow__node {
  background: var(--vt-signal); color: var(--vt-paper); border-color: var(--vt-signal);
  transform: scale(1.06);
}
.flow__step.is-active .flow__icon { color: var(--vt-signal); }
.flow__step.is-active .flow__arrow { color: var(--vt-signal); }

@media (prefers-reduced-motion: reduce) {
  .flow__step:not(:last-child) .flow__rail::after { transition: none; }
}

/* §04 extra life: focus-follows-scroll dimming + a moving "you are here"
   pulse on the current node. Guarded so non-JS / reduced motion shows all
   steps at full opacity. */
.is-ready:not(.no-anim) .flow__step {
  transition: opacity .5s var(--vt-ease), transform var(--vt-dur-base) var(--vt-ease);
}
.is-ready:not(.no-anim) .flow__step:not(.is-active) { opacity: 0.42; }
.is-ready:not(.no-anim) .flow__step.is-active { opacity: 1; }

.flow__node { position: relative; }
.flow__step.is-current .flow__node::after {
  content: "";
  position: absolute; inset: -7px;
  border-radius: 50%;
  border: 1px solid var(--vt-signal);
  animation: flowPulse 1.9s var(--vt-ease-out) infinite;
  pointer-events: none;
}
@keyframes flowPulse {
  0% { transform: scale(.62); opacity: .85; }
  100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .flow__step.is-current .flow__node::after { animation: none; opacity: 0; }
}

/* §04 — data packet: a small document glyph rides down the connector
   when a step activates (the brief travelling through the pipeline) */
.flow__packet {
  position: absolute; z-index: 3; left: 50%; top: 22px;
  width: 17px; height: 17px; margin-left: -8.5px;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(10, 10, 10, 0.2));
}
.flow__packet svg { width: 100%; height: 100%; display: block; }
.flow__step:last-child .flow__packet { display: none; }
.flow__step.is-active .flow__packet {
  animation: flowPacket .78s var(--vt-ease) .12s 1;
}
@keyframes flowPacket {
  0% { top: 22px; opacity: 0; transform: scale(.7); }
  16% { opacity: 1; transform: scale(1); }
  84% { opacity: 1; }
  100% { top: calc(100% + clamp(1.9rem, 3.6vw, 3rem) - 25px); opacity: 0; transform: scale(.9); }
}
@media (prefers-reduced-motion: reduce) {
  .flow__packet { display: none !important; }
}

/* ----------------------------------------------------------------------
   13 · §05 ERGEBNISSE — "live readout": a scan line sweeps each card,
   the Lösung block wipes in (B), and the metric bars fill in a cascade.
   ---------------------------------------------------------------------- */
.case { overflow: hidden; }
.case::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 4;
  background: var(--vt-signal); opacity: 0; pointer-events: none;
}
.case.is-in::before { animation: caseScan 1.15s var(--vt-ease) .1s 1; }
@keyframes caseScan {
  0% { top: 0; opacity: 0; }
  12% { opacity: .7; }
  88% { opacity: .7; }
  100% { top: 100%; opacity: 0; }
}

/* Lösung block wipes in left→right (B, folded into the scan moment) */
.is-ready:not(.no-anim) .case__story .case__block:nth-child(2) {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .85s var(--vt-ease) .4s;
}
.is-ready:not(.no-anim) .case.is-in .case__story .case__block:nth-child(2) {
  clip-path: inset(0 0 0 0);
}

/* metric fill bars cascade as the numbers count up */
.case__metric { position: relative; overflow: hidden; }
.case__metric::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--vt-signal); transform: scaleX(0); transform-origin: left;
}
.case.is-in .case__metric::after { animation: metricFill .9s var(--vt-ease) forwards; }
.case.is-in .case__metric:nth-child(1)::after { animation-delay: .15s; }
.case.is-in .case__metric:nth-child(2)::after { animation-delay: .30s; }
.case.is-in .case__metric:nth-child(3)::after { animation-delay: .45s; }
.case.is-in .case__metric:nth-child(4)::after { animation-delay: .60s; }
@keyframes metricFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .case::before { display: none; }
  .case__story .case__block:nth-child(2) { clip-path: none !important; }
  .case__metric::after { transform: scaleX(1); }
}

/* ----------------------------------------------------------------------
   14 · §06 STIMMEN — drifting quote wall. Two rows scroll in opposite
   directions and pause on hover. Edges fade out via a mask.
   ---------------------------------------------------------------------- */
.twall {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.twall__row { overflow: hidden; }
.twall__track {
  display: flex; gap: 1.5rem; width: max-content; align-items: stretch;
  animation: twallScroll 64s linear infinite;
}
.twall__row--rev .twall__track { animation-direction: reverse; }
.twall:hover .twall__track { animation-play-state: paused; }
@keyframes twallScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.twall .tcard { width: 360px; flex: none; }
.twall .tcard__quote { -webkit-line-clamp: 5; }
.twall .tcard__more { display: none !important; }

@media (max-width: 640px) {
  .twall .tcard { width: 290px; }
  /* Stimmen-Karten auf Mobil schneller durchlaufen */
  .twall__track { animation-duration: 30s; }
}

@media (prefers-reduced-motion: reduce) {
  .twall { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .twall__track { animation: none; flex-wrap: wrap; width: auto; }
  .twall__dupe { display: none; }
  .twall .tcard { width: auto; flex: 1 1 280px; }
}

/* ----------------------------------------------------------------------
   15 · KUNDENLOGOS — monochrome wall with a travelling spotlight.
   Logos rest desaturated + dimmed; a light wave sweeps column by column
   waking each briefly to full. Hover reveals instantly. No marquee.
   ---------------------------------------------------------------------- */
.logos__cell img {
  filter: grayscale(1);
  opacity: .58;
  animation: logoSweep 6.5s linear infinite;
}
/* column-staggered delays create a left→right sweep across the 5 columns */
.logos__cell:nth-child(5n + 1) img { animation-delay: 0s; }
.logos__cell:nth-child(5n + 2) img { animation-delay: .42s; }
.logos__cell:nth-child(5n + 3) img { animation-delay: .84s; }
.logos__cell:nth-child(5n + 4) img { animation-delay: 1.26s; }
.logos__cell:nth-child(5n + 5) img { animation-delay: 1.68s; }
@keyframes logoSweep {
  0%, 16%, 100% { filter: grayscale(1); opacity: .58; }
  7% { filter: grayscale(0); opacity: 1; }
}
/* hover wins instantly: stop the sweep and show the logo at full */
.logos__cell:hover img {
  animation: none;
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-2px);
}
/* the "+ viele weitere" cell pulses with the wave too */
.logos__cell--more span { transition: color var(--vt-dur-base) var(--vt-ease); }
.logos__cell--more:hover span { color: var(--vt-ink); }

@media (max-width: 1024px) {
  /* mobile grid is 3 columns — re-base the sweep delays to 3 */
  .logos__cell img { animation-duration: 5.5s; }
  .logos__cell:nth-child(3n + 1) img { animation-delay: 0s; }
  .logos__cell:nth-child(3n + 2) img { animation-delay: .5s; }
  .logos__cell:nth-child(3n + 3) img { animation-delay: 1s; }
}

@media (prefers-reduced-motion: reduce) {
  .logos__cell img { animation: none; filter: grayscale(1); opacity: .72; }
  .logos__cell:hover img { filter: grayscale(0); opacity: 1; }
}

/* ----------------------------------------------------------------------
   16 · §07 TEAM — (A) handwritten signature draws itself in as each
   member enters; (C) a lamp light follows the cursor ONLY in this
   section, brightening the dark wall and the portraits beneath it.
   ---------------------------------------------------------------------- */
/* A — signature wipe */
.is-ready:not(.no-anim) .member__sig {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--vt-ease);
}
.is-ready:not(.no-anim) .member.is-in .member__sig { clip-path: inset(0 0 0 0); }
.member.is-in:nth-child(1) .member__sig { transition-delay: .25s; }
.member.is-in:nth-child(2) .member__sig { transition-delay: .45s; }
.member.is-in:nth-child(3) .member__sig { transition-delay: .65s; }
@media (prefers-reduced-motion: reduce) { .member__sig { clip-path: none !important; } }

/* C — lamp light (scoped to the dark founder + team sections) */
#team, #ueber-viktor { position: relative; isolation: isolate; }
.team-light {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0; transition: opacity .35s var(--vt-ease);
  mix-blend-mode: screen;
}
.team-light.on { opacity: 1; }
.team-light::before {            /* soft light beam */
  content: ""; position: absolute;
  left: var(--lx, 50%); top: var(--ly, 50%);
  width: 460px; height: 460px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,.07) 34%, rgba(255,255,255,0) 68%);
}
.team-light::after {             /* bright bulb at the cursor */
  content: ""; position: absolute;
  left: var(--lx, 50%); top: var(--ly, 50%);
  width: 16px; height: 16px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,255,255,.45) 55%, transparent 75%);
}
/* portraits rest a touch darker so the lamp reveal reads; hover brightens */
#team .member__photo img { filter: grayscale(1) contrast(1.03) brightness(.74); }
#team .member:hover .member__photo img { filter: grayscale(0) brightness(1.08); }
/* hide the global precision cursor while the lamp is active */
body.in-lightzone .vt-cursor, body.in-lightzone .vt-cursor__dot { opacity: 0 !important; }

/* ----------------------------------------------------------------------
   17 · ÜBER DEN GRÜNDER — (A) stat baselines fill + numbers count up,
   (B) qualification dossier lists in row by row, (C) headline underline
   draws itself. All gated so non-JS / reduced motion shows everything.
   ---------------------------------------------------------------------- */
/* C — headline underline draws left→right */
.is-ready:not(.no-anim) #ueber-viktor .founder__h em::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--vt-ease) .15s;
}
.is-ready:not(.no-anim) #ueber-viktor .founder__h.is-in em::after { transform: scaleX(1); }

/* A — stat baselines draw in a cascade (numbers count via [data-count]) */
#ueber-viktor .founder__stats .fstat { position: relative; }
.is-ready:not(.no-anim) #ueber-viktor .founder__stats .fstat::after {
  content: ""; position: absolute; left: 0; right: 1.2rem; bottom: 0; height: 2px;
  background: #4FBE86; transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--vt-ease);
}
.is-ready:not(.no-anim) #ueber-viktor .founder__stats.is-in .fstat::after { transform: scaleX(1); }
#ueber-viktor .founder__stats.is-in .fstat:nth-child(1)::after { transition-delay: .10s; }
#ueber-viktor .founder__stats.is-in .fstat:nth-child(2)::after { transition-delay: .25s; }
#ueber-viktor .founder__stats.is-in .fstat:nth-child(3)::after { transition-delay: .40s; }
#ueber-viktor .founder__stats.is-in .fstat:nth-child(4)::after { transition-delay: .55s; }

/* B — qualification rows list in sequentially */
.is-ready:not(.no-anim) #ueber-viktor .qpanel .qual {
  opacity: 0; transform: translateX(-12px);
  transition: opacity .5s var(--vt-ease), transform .5s var(--vt-ease);
}
.is-ready:not(.no-anim) #ueber-viktor .qpanel.is-in .qual { opacity: 1; transform: none; }
#ueber-viktor .qpanel.is-in .qual:nth-child(1) { transition-delay: .06s; }
#ueber-viktor .qpanel.is-in .qual:nth-child(2) { transition-delay: .14s; }
#ueber-viktor .qpanel.is-in .qual:nth-child(3) { transition-delay: .22s; }
#ueber-viktor .qpanel.is-in .qual:nth-child(4) { transition-delay: .30s; }
#ueber-viktor .qpanel.is-in .qual:nth-child(5) { transition-delay: .38s; }
#ueber-viktor .qpanel.is-in .qual:nth-child(6) { transition-delay: .46s; }
#ueber-viktor .qpanel.is-in .qual:nth-child(7) { transition-delay: .54s; }
/* norm chips pop in after the list */
.is-ready:not(.no-anim) #ueber-viktor .qpanel .qnorm {
  opacity: 0; transform: translateY(6px) scale(.96);
  transition: opacity .45s var(--vt-ease), transform .45s var(--vt-ease);
}
.is-ready:not(.no-anim) #ueber-viktor .qpanel.is-in .qnorm { opacity: 1; transform: none; }
#ueber-viktor .qpanel.is-in .qnorm:nth-child(1) { transition-delay: .60s; }
#ueber-viktor .qpanel.is-in .qnorm:nth-child(2) { transition-delay: .68s; }
#ueber-viktor .qpanel.is-in .qnorm:nth-child(3) { transition-delay: .76s; }
#ueber-viktor .qpanel.is-in .qnorm:nth-child(4) { transition-delay: .84s; }

@media (prefers-reduced-motion: reduce) {
  #ueber-viktor .founder__h em::after { transform: none !important; }
  #ueber-viktor .founder__stats .fstat::after { transform: scaleX(1) !important; }
  #ueber-viktor .qpanel .qual,
  #ueber-viktor .qpanel .qnorm { opacity: 1 !important; transform: none !important; }
}

/* ----------------------------------------------------------------------
   18 · §08 FAQ — open item gets a green accent bar that draws down, the
   question turns ink/bolder, the answer fades up; hover lifts question.
   ---------------------------------------------------------------------- */
.faq__item { position: relative; }
.faq__item::before {
  content: ""; position: absolute; left: -12px; top: 0; bottom: 0; width: 2px;
  background: var(--vt-signal); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--vt-ease);
}
.faq__item.is-open::before { transform: scaleY(1); }
.faq__item.is-open .faq__q { color: var(--vt-ink); font-weight: 600; }
.faq__q { transition: color var(--vt-dur-base) var(--vt-ease); }
.faq__q:hover { color: var(--vt-ink); }
.faq__q:hover .faq__icon::before { transform: translateY(-50%) scale(1.14); }
.faq__q:hover .faq__icon::after { transform: translateX(-50%) scale(1.14); }
/* keep the open (minus) state correct even on hover */
.faq__item.is-open .faq__icon::after { transform: translateX(-50%) scaleY(0) !important; }
.faq__a-inner {
  opacity: 0; transform: translateY(-5px);
  transition: opacity .4s var(--vt-ease) .05s, transform .4s var(--vt-ease) .05s;
}
.faq__item.is-open .faq__a-inner { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .faq__item::before { transition: none; }
  .faq__a-inner { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------
   19 · WENDEPUNKT — bolder/slower underline draw + a confident "pop"
   on "du sie nutzt" when the statement locks into view.
   ---------------------------------------------------------------------- */
.verdict__you { display: inline-block; }
.verdict__you::before {
  height: .16em;
  transition: transform 1.1s var(--vt-ease) .25s;
}
.verdict.is-in .verdict__you { animation: verdictPop .7s var(--vt-ease) .25s both; }
@keyframes verdictPop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-2px) scale(1.035); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .verdict.is-in .verdict__you { animation: none; }
}

/* ----------------------------------------------------------------------
   20 · §08 FAQ — oversized poster headline
   ---------------------------------------------------------------------- */
#faq .faq__big {
  font-size: clamp(3.6rem, 15vw, 12rem);
  line-height: .84;
  letter-spacing: -.05em;
  font-weight: 500;
  margin: .2rem 0 0;
}
#faq .faq__dot { color: var(--vt-signal); }

/* ----------------------------------------------------------------------
   21 · Remove the hairline between Team and Über-Gründer (one black block)
   ---------------------------------------------------------------------- */
#ueber-viktor.ink { border-top: 0; }

/* ----------------------------------------------------------------------
   22 · FILM GRAIN — a fine static noise layer over the whole page.
   Subtle, monochrome, on-brand (grainy B&W DNA). Pointer-events none so
   it never blocks interaction; sits below the custom cursor.
   ---------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-0.4'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-0.4'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: .16;
  mix-blend-mode: overlay;
}

/* ----------------------------------------------------------------------
   23 · KONTAKT — live booking terminal (#1) + animated expect steps (#3)
   ---------------------------------------------------------------------- */
.bookterm {
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  max-width: 440px;
  border: 1px solid rgba(245, 244, 240, 0.16);
  border-radius: 12px;
  background: rgba(245, 244, 240, 0.03);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  overflow: hidden;
  font-family: var(--vt-font-mono);
}
.bookterm__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem .9rem; border-bottom: 1px solid rgba(245, 244, 240, 0.12);
}
.bookterm__id { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 244, 240, 0.6); }
.bookterm__status { display: flex; align-items: center; gap: .4rem; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #4FBE86; }
.bookterm__pulse { width: 6px; height: 6px; border-radius: 50%; background: #4FBE86; position: relative; }
.bookterm__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #4FBE86; animation: termPulse 1.8s ease-out infinite; }
.bookterm__body { padding: .85rem .9rem 1rem; min-height: 128px; display: flex; flex-direction: column; gap: .55rem; }
.bookterm__line {
  display: flex; align-items: baseline; gap: .6rem; font-size: 11.5px; color: rgba(245, 244, 240, 0.62);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--vt-ease), transform .3s var(--vt-ease);
}
.bookterm__line.show { opacity: 1; transform: none; }
.bookterm__line .t { color: rgba(245, 244, 240, 0.32); font-size: 10px; flex: none; }
.bookterm__line b { color: var(--vt-paper); font-weight: 500; }
.bookterm__line .ok {
  color: #4FBE86; display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 4px; margin-left: .25rem;
  background: rgba(79, 190, 134, 0.16); border: 1px solid rgba(79, 190, 134, 0.4);
  font-size: 9px;
}

/* #3 — expect steps: top progress line draws + numbers light up in sequence */
.expect__grid { position: relative; }
.is-ready:not(.no-anim) .expect__grid::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: #4FBE86; transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--vt-ease);
}
.is-ready:not(.no-anim) .expect.is-in .expect__grid::after { transform: scaleX(1); }
.expect__num { transition: color .45s var(--vt-ease); }
.is-ready:not(.no-anim) .expect__step .expect__num { color: rgba(245, 244, 240, 0.38); }
.is-ready:not(.no-anim) .expect.is-in .expect__step:nth-child(1) .expect__num { color: #4FBE86; transition-delay: .15s; }
.is-ready:not(.no-anim) .expect.is-in .expect__step:nth-child(2) .expect__num { color: #4FBE86; transition-delay: .45s; }
.is-ready:not(.no-anim) .expect.is-in .expect__step:nth-child(3) .expect__num { color: #4FBE86; transition-delay: .75s; }
@media (prefers-reduced-motion: reduce) {
  .expect__grid::after { transform: scaleX(1) !important; }
  .expect__step .expect__num { color: #2E9E70 !important; }
}

/* ======================================================================
   24 · MOBILE FIXES — corrections scoped to phone/tablet widths only.
   ====================================================================== */

/* (1) §03 BENTO — the live "demo" animation belongs UNDER the text on
   EVERY width: number → title → description → motion. (Feature cards 02 & 03
   rendered the demo above the title; reorder so the motion sits last.) */
.svc--feature { display: flex; flex-direction: column; }
.svc--feature .svc__top   { order: 0; }
.svc--feature .svc__title { order: 1; margin-top: 0; }
.svc--feature .svc__desc  { order: 2; }
.svc--feature .svc__demo  { order: 3; margin-top: .6rem; }
/* on wide cards pin the motion to the bottom edge so the row aligns */
@media (min-width: 861px) {
  .svc--feature .svc__demo { margin-top: auto; padding-top: 1.2rem; }
}

/* (2) MOBILE MENU — shrink type + spacing so all 10 entries fit on one
   screen (item 01 no longer hides behind the logo, no scroll needed). */
@media (max-width: 600px) {
  .mobile-menu { padding-top: 88px; padding-bottom: 24px; gap: 0; }
  .mobile-menu a {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
    padding: .5rem 0;
  }
  .mobile-menu a .mm-num { font-size: 11px; margin-right: .7rem; }
}

/* (3) §01 HERAUSFORDERUNGEN — stack title over description so every row
   is uniform full width (desktop two-column rule was leaking to mobile). */
@media (max-width: 860px) {
  .idx-row__body {
    grid-template-columns: 1fr;
    gap: .55rem;
  }
}

/* (4) §04 ABLAUF — pull the connector line clear of the number circles so
   it no longer runs into the digits (gap above + below each node). */
@media (max-width: 860px) {
  .flow__step:not(:last-child) .flow__rail::before,
  .flow__step:not(:last-child) .flow__rail::after {
    top: 58px;
    bottom: calc(8px - clamp(1.9rem, 3.6vw, 3rem));
  }
}

/* (5) KUNDENLOGOS — drop the two empty filler tiles on mobile and let the
   "+ viele weitere" cell become one clean full-width bar at the bottom. */
@media (max-width: 860px) {
  .logos__cell--filler { display: none !important; }
  .logos__cell--more { grid-column: 1 / -1; }
}

/* (6) ÜBER DEN GRÜNDER — the stat block was inheriting the light-section
   treatment on the dark band (white numbers on a pale box). Keep it dark
   so the whole section reads as one uniform colour. */
@media (max-width: 520px) {
  #ueber-viktor.ink .founder__stats {
    background: transparent;
    gap: 0;
    border-top: 1px solid rgba(245, 244, 240, .2);
  }
  #ueber-viktor.ink .fstat {
    background: transparent;
    border-left: 1px solid rgba(245, 244, 240, .16);
    border-top: 1px solid rgba(245, 244, 240, .16);
    padding: 1.2rem 1rem;
  }
  #ueber-viktor.ink .fstat:nth-child(odd) { border-left: 0; padding-left: 0; }
  #ueber-viktor.ink .fstat:nth-child(-n+2) { border-top: 0; }
}