/* ============================================================
   Startseite V2 — Funnel-Verzahnung
   1) Herausforderungen → klickbar in die Potenzialanalyse
   2) Potenzialrechner (Slider → Std./Jahr)
   3) Einheitliche CTA-Meta „6 Fragen · 60 Sekunden“
   Lädt nach site.css / enhance.css.
   ============================================================ */

/* ---------- 1) Herausforderungen als Funnel-Einstieg ---------- */
a.idx-row { text-decoration: none; color: inherit; grid-template-columns: 5.5rem 1fr auto; }
.idx-row__go {
  align-self: center; justify-self: end;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--vt-font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-signal); white-space: nowrap;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s var(--vt-ease), transform .25s var(--vt-ease);
}
.idx-row__go .lucide { width: 15px; height: 15px; }
.idx-row--cta:hover .idx-row__go, .idx-row--cta:focus-visible .idx-row__go { opacity: 1; transform: none; }
.idx-hint {
  margin: 1.1rem 0 0; display: flex; align-items: center; gap: .6rem;
  font-family: var(--vt-font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vt-fg-subtle);
}
.idx-hint::before { content: ""; width: 26px; height: 1px; background: var(--vt-signal); flex: none; }
@media (max-width: 720px) {
  a.idx-row { grid-template-columns: 3.5rem 1fr; }
  .idx-row__go { display: none; }
}

/* ---------- 3) CTA-Meta ---------- */
.cta-meta {
  margin-top: .9rem;
  font-family: var(--vt-font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vt-fg-subtle);
}
.cta-meta--ink { color: rgba(245,244,240,.5); width: 100%; margin-top: .2rem; }

/* Hero — persönliche Signatur-Zeile (ruhig, links unter den CTAs) */
.hero__sig {
  display: flex; align-items: center; gap: .85rem;
  margin-top: 1.7rem; padding-top: 1.35rem;
  border-top: 1px solid var(--vt-divider);
  max-width: 430px;
}
.hero__sig-photo {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; object-fit: cover;
  filter: grayscale(1); background: var(--vt-chalk);
  border: 1px solid var(--vt-border);
  transition: filter .3s var(--vt-ease);
}
.hero__sig:hover .hero__sig-photo { filter: grayscale(0); }
.hero__sig-id { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.hero__sig-name { font-weight: 600; font-size: var(--vt-size-sm); letter-spacing: -.01em; color: var(--vt-ink); }
.hero__sig-role { font-family: var(--vt-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-fg-muted); line-height: 1.5; }

/* Hero — Meta (Dortmund + Koordinaten) sauber rechtsbündig */
.hero__meta { text-align: right; white-space: normal; }

/* Hero — Headline auf großen Screens etwas zurücknehmen, damit die geboxte
   erste Zeile (längstes Wort „antwortet") nicht über die Spalte ins Terminal läuft.
   Greift erst ab ~1363px (vorher regelt 5.4vw, da passt es bereits). */
.hero h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
@media (min-width: 961px) {
  /* +38px ≈ 1cm Abstand: Terminal sitzt unter dem Meta-Block, nicht direkt daran */
  .hero__panel { margin-top: calc(0.98 * clamp(2.5rem, 5.4vw, 4.4rem) + 4px - 49.5px + 38px); }
}

/* ============================================================
   V2-Paket: Bereichs-Verbesserungen
   ============================================================ */

/* §02 Vorteile — Zahl statt Behauptung */
.vben__stat {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .9rem;
  font-family: var(--vt-font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: #4FBE86;
}
.vben__stat::before { content: ""; width: 18px; height: 1px; background: #4FBE86; flex: none; }

/* §04 Ablauf — Zeitachse */
.flow__week {
  flex: none; margin-left: auto; margin-right: 1rem;
  font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-fg-subtle);
  border: 1px solid var(--vt-mist); border-radius: 999px; padding: .28rem .7rem;
  white-space: nowrap; align-self: center;
  transition: color .3s var(--vt-ease), border-color .3s var(--vt-ease);
}
@media (max-width: 640px) { .flow__week { display: none; } }

/* §04 Ablauf — Schiene füllt sich beim Scrollen
   (keine Transition auf node/rail: enhance.js toggelt Klassen pro Frame,
   was laufende Transitions endlos neu starten würde — Endwert muss sofort stehen) */
.flow__step .flow__rail::before { transition: none !important; }
.flow__step .flow__node { transition: none !important; }
.flow__step.is-passed .flow__node { background: var(--vt-signal); color: var(--vt-paper); border-color: var(--vt-signal); box-shadow: 0 0 0 4px var(--vt-signal-tint); }
.flow__step.is-passed .flow__rail::before { background: var(--vt-signal); }
.flow__step.is-passed .flow__week { color: var(--vt-signal); border-color: var(--vt-signal); }

/* §05 Ergebnisse — Vorher gedämpft, Lösung markiert, leere Video-Slots aus */
.case__block:has(.case__label--sol) { border-left: 2px solid var(--vt-signal); padding-left: .95rem; }
.case__block:not(:has(.case__label--sol)) .case__text { color: var(--vt-fg-subtle); }
.case:not(.has-video) .case__video { display: none; }

/* Kunden-Logos — monochrom, Farbe bei Hover */
.logos__cell img { filter: grayscale(1); opacity: .8; transition: filter .25s var(--vt-ease), opacity .25s var(--vt-ease), transform .3s var(--vt-ease); }
.logos__cell:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
   V2-Paket: Effekte & Bewegung
   ============================================================ */

/* Seitenübergänge: bewusst entfernt — löste im Preview "Transition was skipped"-Fehler aus */

/* Hairlines zeichnen sich beim Scrollen */
.fx-lines .section--rule { border-top-color: transparent !important; position: relative; }
.fx-lines .section--rule::before {
  content: ""; position: absolute; top: -1px; left: var(--vt-gutter); right: var(--vt-gutter);
  height: 1px; background: var(--vt-border);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--vt-ease);
}
.fx-lines .section--rule.is-line::before { transform: scaleX(1); }

/* Eyebrow-Strich wächst beim Reveal */
.eyebrow.r::before { width: 0; transition: width .5s var(--vt-ease) .15s; }
.eyebrow.r.is-in::before { width: 28px; }

/* Marquee — weiche Kanten */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Bento — Nummern kippen auf Grün */
.svc__num { transition: color .25s var(--vt-ease); }
.svc:hover .svc__num { color: var(--vt-signal); }

/* FAQ — offene Frage bekommt grüne Hairline */
.faq__item { transition: border-color .3s var(--vt-ease); }
.faq__item.is-open { border-bottom-color: var(--vt-signal); }

@media (prefers-reduced-motion: reduce) {
  .fx-lines .section--rule::before { transform: scaleX(1); transition: none; }
  .eyebrow.r::before { width: 28px; transition: none; }
}

/* ============================================================
   V2-Paket: moderne Basics
   ============================================================ */

/* Skip-Link (A11y-Standard) */
.skip-link {
  position: fixed; top: -60px; left: var(--vt-gutter); z-index: 200;
  font-family: var(--vt-font-mono); font-size: 12px; letter-spacing: .06em;
  background: var(--vt-ink); color: var(--vt-paper);
  padding: .65rem 1rem; border-radius: 4px;
  transition: top .2s var(--vt-ease);
}
.skip-link:focus-visible { top: 12px; }

/* Back-to-top — mono, hairline, erscheint nach dem Hero */
.totop {
  position: fixed; left: 22px; bottom: 92px; z-index: 90;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vt-ink); background: rgba(245,244,240,.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
  border: 1px solid var(--vt-border); border-radius: 999px;
  padding: .55rem .95rem; cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s var(--vt-ease), transform .3s var(--vt-ease), background .2s var(--vt-ease), color .2s var(--vt-ease);
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: var(--vt-ink); color: var(--vt-paper); }
.totop:active { transform: scale(.96); }
.totop .lucide { width: 14px; height: 14px; }
@media (max-width: 720px) { .totop span { display: none; } .totop { padding: .55rem .65rem; } }
@media (max-width: 560px) { .totop { left: 16px; bottom: 82px; } }

/* Scrollbar — schmal und tintig (Chromium/Safari) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--vt-paper); }
::-webkit-scrollbar-thumb { background: var(--vt-fog); border-radius: 999px; border: 2px solid var(--vt-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--vt-steel); }

/* ============================================================
   V2-Paket: Feinschliff-Runde 2 (Design + Effekte)
   ============================================================ */

/* 1) Nav schrumpft beim Scrollen */
.nav__inner { transition: padding .25s var(--vt-ease); }
.brand img { transition: height .25s var(--vt-ease); }
.nav.is-scrolled .nav__inner { padding-top: .45rem; padding-bottom: .45rem; }
.nav.is-scrolled .brand img { height: 24px; }
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(10,10,10,.08); }

/* 2) Hero — Stat-Hairlines ziehen sich auf */
.fx-lines .stat { border-left-color: transparent; transition: border-color .5s var(--vt-ease); }
.fx-lines .stat-strip.is-line .stat { border-left-color: var(--vt-border); }
.fx-lines .stat-strip.is-line .stat:nth-child(2) { transition-delay: .1s; }
.fx-lines .stat-strip.is-line .stat:nth-child(3) { transition-delay: .2s; }
.fx-lines .stat-strip.is-line .stat:nth-child(4) { transition-delay: .3s; }

/* 4) §02 — Running-Meta-Strip auf dem Ink-Band */
.metastrip {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  font-family: var(--vt-font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,244,240,.45);
  border-bottom: 1px solid rgba(245,244,240,.14);
  padding-bottom: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.metastrip i { font-style: normal; color: #4FBE86; }

/* 5) Bento — Icon zeichnet sich bei Hover neu */
.svc:hover .svc__icon svg * { stroke-dasharray: 64; animation: svcDraw .7s var(--vt-ease) forwards; }
@keyframes svcDraw { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }

/* 6) Ablauf — wanderndes Paket (ersetzt die Einzel-Pakete) */
.flow { position: relative; }
.flow-stage { position: relative; }
.flow.has-traveler .flow__packet { display: none; }
.flow__traveler {
  position: absolute; top: 0; left: 0; width: 26px; height: 26px;
  z-index: 3; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(10,10,10,.18));
}
.flow__traveler svg { width: 100%; height: 100%; display: block; }

/* 7) Ergebnisse — Lösung-Marker zeichnet sich */
.case__block.solmark { border-left: 0 !important; position: relative; padding-left: .95rem; }
.case__block.solmark::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--vt-signal);
  transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--vt-ease) .15s;
}
.case__block.solmark.is-draw::before { transform: scaleY(1); }

/* 8) Rechner — Slider-Nudge */
.calc__range.nudge { animation: calcNudge .9s var(--vt-ease) .5s 2; }
@keyframes calcNudge { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(6px); } 65% { transform: translateX(-4px); } }

/* 9) Stimmen — das eine Serif-Pull-Quote der Seite */
.pullquote { margin: clamp(2rem, 4vw, 3.2rem) 0 .5rem; max-width: 56rem; padding: 0; border: 0; }
.pullquote p {
  font-family: var(--vt-font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.45rem, 2.9vw, 2.25rem); line-height: 1.28; letter-spacing: -.01em;
  color: var(--vt-ink); margin: 0 0 1.1rem; text-wrap: pretty;
}
.pullquote cite {
  font-style: normal; font-family: var(--vt-font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vt-fg-muted);
  display: inline-flex; align-items: center; gap: .7rem;
}
.pullquote cite::before { content: ""; width: 26px; height: 1px; background: var(--vt-signal); }

/* 10) Team — Porträts monochrom, Farbe bei Hover */
.member__photo img { filter: grayscale(1); transition: filter .3s var(--vt-ease); }
.member:hover .member__photo img { filter: grayscale(0); }

/* 13) Footer — Wasserzeichen + Meta-Zeile */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: ""; position: absolute; right: -3%; bottom: -12%;
  width: clamp(280px, 30vw, 460px); aspect-ratio: 1;
  background: url('assets/logo-vt-transparent.png') no-repeat center / contain;
  opacity: .05; pointer-events: none;
}
.footer .container { position: relative; }
.footer__metastrip {
  font-family: var(--vt-font-mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vt-fg-subtle);
  border-bottom: 1px solid var(--vt-divider);
  padding-bottom: 1.1rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
}

@media (prefers-reduced-motion: reduce) {
  .fx-lines .stat { border-left-color: var(--vt-border); transition: none; }
  .svc:hover .svc__icon svg * { animation: none; stroke-dasharray: none; }
  .flow__traveler { display: none; }
  .case__block.solmark::before { transform: scaleY(1); transition: none; }
  .calc__range.nudge { animation: none; }
}

/* ---------- 2) Potenzialrechner ---------- */
.calc__frame {
  display: grid; grid-template-columns: 1.08fr .92fr;
  border: 1px solid var(--vt-border); background: var(--vt-paper-pure);
}
@media (max-width: 880px) { .calc__frame { grid-template-columns: 1fr; } }
.calc__left { padding: clamp(1.8rem, 3.5vw, 3rem); }
.calc__lead { color: var(--vt-fg-muted); font-size: var(--vt-size-md); line-height: 1.6; max-width: 46ch; margin: 0 0 2rem; }
.calc__val { font-family: var(--vt-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--vt-fg-muted); }
.calc__val b { color: var(--vt-signal); font-size: 1.25rem; font-weight: 600; letter-spacing: 0; margin-right: .25rem; }
.calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px; margin: 1.4rem 0 .7rem;
  background: linear-gradient(to right, var(--vt-signal) var(--calc-fill, 27%), var(--vt-mist) var(--calc-fill, 27%));
  outline: none; cursor: pointer;
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vt-signal); border: 3px solid var(--vt-paper-pure);
  box-shadow: 0 0 0 1px var(--vt-border); cursor: grab;
}
.calc__range::-webkit-slider-thumb:active { cursor: grabbing; }
.calc__range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vt-signal); border: 3px solid var(--vt-paper-pure);
  box-shadow: 0 0 0 1px var(--vt-border); cursor: grab;
}
.calc__range:focus-visible { outline: 2px solid var(--vt-ink); outline-offset: 4px; }
.calc__scale { display: flex; justify-content: space-between; font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--vt-fg-subtle); }

.calc__right {
  padding: clamp(1.8rem, 3.5vw, 3rem);
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .35rem;
  background: var(--vt-ink); color: var(--vt-paper);
  border-left: 1px solid var(--vt-border);
}
@media (max-width: 880px) { .calc__right { border-left: 0; border-top: 1px solid var(--vt-border); } }
.calc__k {
  font-family: var(--vt-font-display); font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.03em;
  color: #4FBE86; font-variant-numeric: tabular-nums;
}
.calc__u { font-size: var(--vt-size-md); font-weight: 600; color: var(--vt-paper); }
.calc__note { font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .06em; color: rgba(245,244,240,.45); text-transform: uppercase; }
.calc__cta { margin-top: 1.5rem; }
.calc__meta { font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(245,244,240,.5); margin-top: .55rem; }

/* ============================================================
   §06 Stimmen — ganzen Text per Klick lesen
   ============================================================ */
.twall .tcard { cursor: pointer; transition: background var(--vt-dur-base) var(--vt-ease), border-color var(--vt-dur-base) var(--vt-ease); }
.twall .tcard:hover { background: var(--vt-paper-pure); border-color: var(--vt-ink); }
.twall .tcard:focus-visible { outline: 2px solid var(--vt-ink); outline-offset: 2px; }
.tcard__readmore {
  appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .15rem;
  font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vt-signal);
}
.tcard__readmore svg, .tcard__readmore .lucide { width: 13px; height: 13px; }

.tmodal {
  position: fixed; inset: 0; z-index: 120;
  display: none; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(10,10,10,.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.tmodal.is-open { display: flex; }
.tmodal__panel {
  position: relative;
  width: min(620px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--vt-paper-pure); border: 1px solid var(--vt-ink);
  padding: clamp(2rem, 4vw, 3rem);
  animation: tmodalIn .28s var(--vt-ease);
}
@keyframes tmodalIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tmodal__eyebrow {
  font-family: var(--vt-font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--vt-fg-subtle);
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.3rem;
}
.tmodal__eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--vt-signal); }
.tmodal__quote { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--vt-fg); text-wrap: pretty; margin: 0; }
.tmodal__who { display: flex; align-items: center; gap: .9rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--vt-divider); }
.tmodal__who img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); flex: none; }
.tmodal__name { font-weight: 600; font-size: var(--vt-size-md); }
.tmodal__role { font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vt-fg-muted); margin-top: 2px; }
.tmodal__close {
  position: absolute; top: .7rem; right: .7rem;
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--vt-ink);
  transition: color var(--vt-dur-fast) var(--vt-ease);
}
.tmodal__close:hover { color: var(--vt-signal); }
.tmodal__close svg, .tmodal__close .lucide { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .tmodal__panel { animation: none; } }