/* =========================================================
   Leistungen — eigene Seite (normaler Scroll, kein Fullpage)
   Nutzt die bestehenden Tokens aus base.css:
   --bg --text --muted --accent --line --font-display --container
   ========================================================= */

.page-services { min-height: 100vh; }
.services-main { position: relative; }

/* --- Header: CTA im Fluss (siehe ueber-uns.css) --- */

.page-services .header-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  padding-left: clamp(0.75rem, 2.5vw, 4rem);
}
.page-services .header-links--right { flex: none; }
.page-services .header-links--right ul { padding-left: 0; min-width: max-content; }
.page-services .header-links a { white-space: nowrap; }
.page-services .header-cta {
  position: static;
  transform: none;
  flex: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .page-services .header-right { display: none; }
}

/* --- Hero --- */

/* --- Hero + Roadmap links, Säule rechts --- */

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 21vw, 290px);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(8rem, 17vh, 11rem) 0 0;
}

.svc-hero { padding: 0 0 clamp(3rem, 7vh, 5rem); }
.svc-hero h1 { max-width: 22ch; margin-bottom: 1.4rem; text-wrap: pretty; }

.svc-lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: rgb(244 243 239 / 0.78);
  max-width: 56ch;
  margin: 0;
}

/* --- Roadmap ------------------------------------------------------------
   Fünf Schritte auf einer Linie. Beim Herunterscrollen fällt je Schritt ein
   Würfel ein, leuchtet kurz auf (.flash) und bleibt gedimmt an (.on); der
   Text wird daneben eingeblendet. Beim Hochscrollen läuft alles zurück.
   Kein filter/overflow auf .tc — sonst flacht Safari preserve-3d ab.
   ---------------------------------------------------------------------- */

.road-section { padding: 0 0 clamp(4rem, 10vh, 7rem); }
.road-grid { display: contents; }
.road-section .section-head { max-width: 46ch; margin: 0 0 clamp(2rem, 5vh, 3rem); }
.road-section .section-head h2 { text-wrap: pretty; }

.road-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(130px, 17vw, 220px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.road {
  --slot: clamp(84px, 9vw, 116px);
  position: relative;
}

/* Säule rechts: aus ihr löst sich je Schritt der oberste Würfel */
.pillar {
  position: sticky;
  top: 16vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}
.pillar__stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 1rem 0;
}
.pillar__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(22vw, 290px);
  height: min(22vw, 290px);
  max-width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgb(200 168 120 / 0.16), rgb(200 168 120 / 0.05) 44%, transparent 72%);
  filter: blur(14px);
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.pillar__stack {
  --s: clamp(56px, 6.2vw, 84px);
  position: relative;
  width: calc(var(--s) * 1.85);
  height: calc(var(--s) * 5.35);
  perspective: 1600px;
  perspective-origin: 50% 50%;
}
/* Die Säule ist EIN starrer 3D-Körper: gemeinsame Kamera, gemeinsame Rotation,
   Würfel exakt um ihre Kantenlänge gestapelt — so liegen die Flächen deckungsgleich. */
.tcol {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform-style: preserve-3d;
  transform: translateY(calc(var(--gone, 0) * var(--s) * -0.457));
  transition: transform 0.6s cubic-bezier(.22, 1, .36, 1);
}
.tspin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-38deg);
  animation: tspin 26s linear infinite;
}
.tslot { position: absolute; inset: 0; transform-style: preserve-3d; }
.tslot[data-tslot="0"] { transform: translateY(calc(var(--s) * -2)); }
.tslot[data-tslot="1"] { transform: translateY(calc(var(--s) * -1)); }
.tslot[data-tslot="3"] { transform: translateY(var(--s)); }
.tslot[data-tslot="4"] { transform: translateY(calc(var(--s) * 2)); }
.tspin .tc { animation: none; transform: none; }
.tslot .tcf { transition: opacity 0.3s ease; }
.tslot.gone .tcf { opacity: 0; }
.pillar__caption {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgb(154 151 143 / 0.65);
  text-align: center;
}

/* Flugwürfel: fliegt von der Säule an seinen Platz in der Roadmap */
.flycube {
  --s: clamp(56px, 6.2vw, 84px);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 40;
  opacity: 0;
  perspective: 900px;
  pointer-events: none;
}
.tcf.is-lit { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 30px rgb(200 168 120 / .40); }
.flycube .tcf--front.is-lit { background: linear-gradient(128deg, rgb(255 255 255 / .20), rgb(226 200 158 / .16)); }
.flycube .tcf--right.is-lit { background: linear-gradient(96deg, rgb(255 255 255 / .12), rgb(226 200 158 / .38)); }
.flycube .tcf--top.is-lit { background: linear-gradient(146deg, rgb(255 255 255 / .42), rgb(226 200 158 / .22)); }
.flycube .tcf--back.is-lit { background: linear-gradient(128deg, rgb(255 255 255 / .13), rgb(226 200 158 / .11)); }
.flycube .tcf--left.is-lit { background: linear-gradient(96deg, rgb(255 255 255 / .22), rgb(255 255 255 / .08)); }
.flycube .tcf--bottom.is-lit { background: linear-gradient(146deg, rgb(226 200 158 / .20), rgb(255 255 255 / .06)); }
.road__line,
.road__progress {
  position: absolute;
  left: calc(var(--slot) / 2);
  top: clamp(38px, 4vw, 52px);
  width: 1px;
}
.road__line { bottom: clamp(38px, 4vw, 52px); background: var(--line); }
.road__progress {
  height: 0;
  background: linear-gradient(to bottom, rgb(200 168 120 / .85), rgb(200 168 120 / .25));
  transition: height 0.7s cubic-bezier(.22, 1, .36, 1);
}

.step {
  display: grid;
  grid-template-columns: var(--slot) minmax(0, 1fr);
  column-gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
  padding: clamp(1.8rem, 4vh, 3rem) 0;
}
.step__slot {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(100px, 10.5vw, 138px);
  background: var(--bg, #0b0b0d);
}

@keyframes tspin {
  from { transform: rotateX(-24deg) rotateY(-38deg); }
  to { transform: rotateX(-24deg) rotateY(322deg); }
}

.tw {
  --s: clamp(58px, 6.2vw, 80px);
  perspective: 900px;
  opacity: 0;
  transform: translateY(-46px) scale(.7);
  transition:
    opacity 0.55s cubic-bezier(.2, .9, .3, 1),
    transform 0.65s cubic-bezier(.2, 1.05, .3, 1);
}
.step.on .tw { opacity: 1; transform: none; }

.tc {
  position: relative;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
  transform: rotateX(-24deg) rotateY(-38deg);
  animation: tspin 26s linear infinite;
}

.tcf { position: absolute; inset: 0; }
.tcf--front {
  transform: translateZ(calc(var(--s) / 2));
  background: linear-gradient(128deg, rgb(255 255 255 / .075), rgb(200 168 120 / .05));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .26), inset 0 1px 0 rgb(255 255 255 / .50);
}
.tcf--right {
  transform: rotateY(90deg) translateZ(calc(var(--s) / 2));
  background: linear-gradient(96deg, rgb(255 255 255 / .05), rgb(226 200 158 / .13));
  box-shadow: inset 0 0 0 1px rgb(240 218 180 / .26);
}
.tcf--top {
  transform: rotateX(90deg) translateZ(calc(var(--s) / 2));
  background: linear-gradient(146deg, rgb(255 255 255 / .17), rgb(226 200 158 / .07));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .34);
}
.tcf--back {
  transform: rotateY(180deg) translateZ(calc(var(--s) / 2));
  background: linear-gradient(128deg, rgb(255 255 255 / .05), rgb(200 168 120 / .035));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
}
.tcf--left {
  transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));
  background: linear-gradient(96deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .20);
}
.tcf--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));
  background: linear-gradient(146deg, rgb(226 200 158 / .07), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px rgb(226 200 158 / .18);
}

.lit {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.step.on .lit { opacity: .45; }
.step.flash .lit { opacity: 1; transition: opacity 0.18s ease; }

.tcf--front .lit {
  background: linear-gradient(128deg, rgb(255 255 255 / .20), rgb(226 200 158 / .16));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), inset 0 1px 0 rgb(255 255 255 / .95), 0 0 30px rgb(200 168 120 / .40);
}
.tcf--right .lit {
  background: linear-gradient(96deg, rgb(255 255 255 / .12), rgb(226 200 158 / .38));
  box-shadow: inset 0 0 0 1px rgb(240 218 180 / .60);
}
.tcf--top .lit {
  background: linear-gradient(146deg, rgb(255 255 255 / .42), rgb(226 200 158 / .22));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .70);
}
.tcf--back .lit {
  background: linear-gradient(128deg, rgb(255 255 255 / .13), rgb(226 200 158 / .11));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .38), inset 0 1px 0 rgb(226 200 158 / .55);
}
.tcf--left .lit {
  background: linear-gradient(96deg, rgb(255 255 255 / .22), rgb(255 255 255 / .08));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .45), inset 0 1px 0 rgb(255 255 255 / .70);
}
.tcf--bottom .lit {
  background: linear-gradient(146deg, rgb(226 200 158 / .20), rgb(255 255 255 / .06));
  box-shadow: inset 0 0 0 1px rgb(226 200 158 / .42);
}

/* Text je Schritt */
.txt {
  padding-top: clamp(0.6rem, 1.5vw, 1.2rem);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(.22, 1, .36, 1) 0.12s,
    transform 0.6s cubic-bezier(.22, 1, .36, 1) 0.12s;
}
.step.on .txt { opacity: 1; transform: none; }

.txt__step {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: rgb(154 151 143 / 0.8);
  margin: 0 0 0.5rem;
}
.txt h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
.txt p { color: rgb(244 243 239 / 0.80); max-width: 52ch; margin: 0 0 0.6rem; }
.txt__effect {
  color: var(--muted) !important;
  font-size: 0.9rem;
  margin: 0 !important;
}
.txt__effect span { color: var(--accent); }

.svc-text { color: var(--muted); }

/* --- Vergleich: zwei Funnel --- */

.svc-compare { padding-bottom: clamp(4.5rem, 11vh, 8rem); }
.svc-compare .section-head {
  max-width: 46ch;
  margin: 0 0 clamp(2.5rem, 6vh, 3.5rem);
}
.svc-compare .section-head h2 { text-wrap: pretty; }

.funnels {
  display: grid;
  /* min(320px, 100%): bei 320 px Bildschirm ist der Container 280 px breit, eine 320-px-Spalte lief
     40 px über den Rand (WebKit, Mobil-Check 04.10.2026) */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.funnel {
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  border-radius: 14px;
}
.funnel--before {
  background: rgb(255 255 255 / 0.02);
  border: 1px solid var(--line);
}
.funnel--after {
  background: linear-gradient(150deg, rgb(200 168 120 / 0.07), rgb(200 168 120 / 0.02) 60%, transparent);
  border: 1px solid rgb(200 168 120 / 0.32);
  box-shadow: 0 0 60px rgb(200 168 120 / 0.06);
}

.funnel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.4rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--line);
}
.funnel--after .funnel__head { border-bottom-color: rgb(200 168 120 / 0.22); }

.funnel__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.2;
  margin: 0;
}
.funnel--before .funnel__head h3 { color: rgb(244 243 239 / 0.72); }
.funnel--after .funnel__head h3 { color: var(--text); }

.funnel__tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(154 151 143 / 0.7);
}
.funnel--after .funnel__tag { color: var(--accent); }

/* Balken */
.funnel__steps { display: grid; gap: 0.9rem; }

.fstep__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.funnel--after .fstep__row { color: rgb(244 243 239 / 0.75); }
.fstep--accent .fstep__row { color: var(--accent); }
.fstep--accent .fstep__row span { font-weight: 500; }

.fstep__track {
  display: block;
  height: 10px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.06);
}
.funnel--after .fstep__track { background: rgb(200 168 120 / 0.10); }

.fstep__bar {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: 99px;
  background: rgb(255 255 255 / 0.14);
  transform: scaleX(.35);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.funnel--before .fstep__bar--end { background: rgb(255 255 255 / 0.22); }
.funnel--after .fstep__bar { background: rgb(200 168 120 / 0.55); }
.funnel--after .fstep__bar--end {
  background: var(--accent);
  box-shadow: 0 0 16px rgb(200 168 120 / 0.5);
}
[data-reveal].is-visible .fstep__bar { transform: scaleX(1); }

/* Aufzählung unter den Balken */
.funnel__list {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 1.4rem 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.65rem;
  font-size: 0.94rem;
  color: var(--muted);
}
.funnel--after .funnel__list {
  border-top-color: rgb(200 168 120 / 0.22);
  color: rgb(244 243 239 / 0.82);
}
.funnel__list li { display: flex; gap: 0.7rem; }
.funnel__mark { color: rgb(154 151 143 / 0.55); }
.funnel--after .funnel__mark { color: var(--accent); }

.svc-note {
  font-size: 0.8rem;
  color: rgb(154 151 143 / 0.65);
  margin: 1.4rem 0 0;
}

/* --- Kontakt --- */

.svc-contact {
  padding: clamp(4rem, 10vh, 7rem) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.svc-contact h2 { text-wrap: pretty; }
.svc-contact .svc-text { max-width: 50ch; margin: 0 auto 2.2rem; }

.page-services .site-footer { border-top: 1px solid var(--line); }

/* --- Scroll-Reveal --- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(.22, 1, .36, 1),
    transform 0.8s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --- Mobil --- */

@media (max-width: 900px) {
  .svc-hero { padding-top: clamp(7rem, 16vh, 10rem); }
  /* minmax(0, …): 1fr hielt die Spalte auf der min-content-Breite des längsten Worts fest
     („Mandantenkontakt.“ 331 px bei 304 px Platz, Seite 7 px breiter als 344 px). */
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  .pillar { display: none; }
  .road { --slot: clamp(52px, 13vw, 68px); }
  .tw { --s: clamp(36px, 9vw, 48px); }
}

/* Schmale Handys und Display-Zoom (320–400 px): lange Komposita in Überschriften trennen
   statt über den Rand laufen lassen (Mobil-Check 04.10.2026). */
@media (max-width: 400px) {
  .services-main h1,
  .services-main h2 { -webkit-hyphens: auto; hyphens: auto; }
}



@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fstep__bar { transform: scaleX(1); transition: none; }
  .tw, .txt { opacity: 1; transform: none; transition: none; }
  .tc, .tspin { animation: none; }
}