/* ==========================================================================
   switchpoint – Stylesheet
   Schriften: Manrope (Headlines, Karten) · Inter (Fließtext) – lokal gehostet
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --bg: #23262d;
  --bg-deep: #0d0e12;
  --tint: #29313d;
  --line: #c9d0d4;
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, .86);
  --text-dim: rgba(255, 255, 255, .58);

  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Layoutraster aus dem Design (1240 px Artboard): Inhalt 16,8 % → 86 %, Linie bei 91,8 % */
  --vw: 100vw;
  --frame: min(var(--vw), 1680px);
  --side: calc((var(--vw) - var(--frame)) / 2);
  --pad-l: calc(var(--side) + var(--frame) * .168);
  --line-r: calc(var(--side) + var(--frame) * .082);
  --pad-r: calc(var(--line-r) + var(--frame) * .058);
  --header-h: 104px;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  }
}
@media (max-width: 900px) {
  :root {
    --pad-l: 26px;
    --line-r: 18px;
    --pad-r: 44px;
    --header-h: 76px;
  }
}

/* ---------- Basis -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 40px;
  scrollbar-gutter: stable;
  background: var(--bg);
}
html.is-intro, html.is-intro body { overflow: hidden; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(.94rem, .88rem + .22vw, 1.06rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, p, ul, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
::selection { background: #fff; color: var(--bg); }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }

.sprite { position: absolute; }
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 200;
  padding: 10px 16px; border-radius: 999px;
  background: #fff; color: var(--bg); font-weight: 600;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wm { fill: currentColor; width: 100%; height: auto; }

.wrap {
  position: relative;
  z-index: 1;
  padding-left: var(--pad-l);
  padding-right: var(--pad-r);
}

.display {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2rem, .9rem + 2.55vw, 3.6rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.lead {
  color: var(--text-soft);
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
  text-wrap: pretty;
}

/* ---------- Intro -------------------------------------------------------- */
.intro { display: none; }
.js .intro {
  display: block;
  position: fixed; inset: 0; z-index: 100;
  overflow: hidden;
  contain: strict;
}
.js .intro.is-done, .no-intro .intro { display: none; }
.intro__dark, .intro__light { position: absolute; inset: 0; }
.intro__dark { background: var(--bg-deep); }
.intro__light {
  background:
    radial-gradient(80vmax 80vmax at 0% 0%, #29313e 0%, rgba(41, 49, 62, 0) 70%),
    radial-gradient(80vmax 80vmax at 100% 100%, #282f3a 0%, rgba(40, 47, 58, 0) 70%),
    var(--bg);
  clip-path: circle(0 at 50% 50%);
  transition: clip-path 1.25s cubic-bezier(.3, .6, .1, 1), opacity .9s var(--ease-io);
}
.intro.is-on .intro__light { clip-path: circle(150vmax at 50% 50%); }
.intro.is-word .intro__dark { display: none; }
.intro.is-dock .intro__light { opacity: 0; }

.intro__glow {
  position: absolute; left: 50%; top: 50%;
  width: 60vmin; height: 60vmin; margin: -30vmin 0 0 -30vmin;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .3), rgba(77, 90, 102, .5) 42%, rgba(41, 49, 62, 0) 74%);
  opacity: 0; transform: scale(.3);
  transition: opacity .5s ease-out, transform 1.4s var(--ease-out);
}
.intro.is-on .intro__glow { opacity: 1; transform: scale(1.5); }
.intro.is-word .intro__glow { opacity: 0; transition: opacity 1s ease; }

.intro__ring {
  position: absolute; left: 50%; top: 50%;
  width: 24vmin; height: 24vmin; margin: -12vmin 0 0 -12vmin;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .7);
  opacity: 0;
}
.intro.is-on .intro__ring { animation: ring 1.5s var(--ease-out) forwards; }
.intro.is-on .intro__ring--2 { animation-delay: .16s; animation-duration: 1.9s; }
@keyframes ring {
  0% { opacity: .9; transform: scale(.5); }
  100% { opacity: 0; transform: scale(9); }
}

.intro__stage {
  position: absolute; left: 50%; top: 50%;
  width: var(--B, 1200px);
  aspect-ratio: 553.65 / 78.94;
  margin-left: calc(var(--B, 1200px) / -2);
  margin-top: calc(var(--B, 1200px) * 78.94 / 553.65 / -2);
  transform-origin: 71.03% 53%;
  opacity: 0;
}
.intro__logo { width: 100%; height: 100%; overflow: visible; }
.il-pill {
  fill: #59616c;
  transform-box: fill-box; transform-origin: center;
  transition: fill .35s ease, transform .22s ease;
}
.il-knob {
  fill: var(--bg-deep);
  transform: translateX(-25.8px);
  transition: transform .62s var(--spring), fill .5s ease;
}
.intro.is-press .il-pill { transform: scale(.965); }
.intro.is-press .il-knob { transform: translateX(-27.4px); }
.intro.is-on .il-pill { fill: #fff; transform: none; }
.intro.is-on .il-knob { transform: none; fill: var(--tint); }
.intro.is-dock .il-knob { fill: var(--bg); }

.il-l {
  fill: #fff;
  opacity: 0;
  transition: opacity .55s ease, transform .95s var(--ease-out);
  transition-delay: calc(var(--o) * 60ms);
}
.il-l--left { transform: translateX(46px); }
.il-l--right { transform: translateX(-46px); }
.intro.is-word .il-l { opacity: 1; transform: none; }

.intro__tagline {
  position: absolute; left: 0; right: 0; top: var(--tag-top, 60%);
  text-align: center;
  font-size: clamp(.82rem, .7rem + .55vw, 1.2rem);
  letter-spacing: .075em;
  color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s ease, transform .9s var(--ease-out);
}
.intro__tagline i, .footer__tagline i { font-style: normal; padding: 0 .35em; opacity: .9; }
.intro.is-tag .intro__tagline { opacity: 1; transform: none; }
.intro.is-dock .intro__tagline { opacity: 0; transform: translateY(-8px); transition-duration: .3s; }

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center;
  padding-left: var(--pad-l); padding-right: var(--pad-r);
  transition: height .5s var(--ease-out), background-color .4s ease, transform .5s var(--ease-out);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(35, 38, 45, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(201, 208, 212, .16);
  opacity: 0; transition: opacity .4s ease;
}
.is-scrolled .site-header { height: calc(var(--header-h) * .7); }
.is-scrolled .site-header::before { opacity: 1; }

.brand {
  display: block;
  width: clamp(132px, 9.2vw + 40px, 196px);
  color: #fff;
}
.js .brand { visibility: hidden; }
.js.is-docked .brand { visibility: visible; }

/* ---------- Linien ------------------------------------------------------- */
main { position: relative; }
.lines {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.line {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  stroke-opacity: .78;
}
.spark {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: clamp(20px, 3vw, 44px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85));
  offset-anchor: 100% 50%; offset-rotate: auto; offset-distance: 0%;
  opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
  will-change: offset-distance, opacity;
}
.spark::after {
  content: ""; position: absolute; right: -3px; top: -2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, .75), 0 0 30px 9px rgba(170, 205, 255, .4);
}
.lines__fill { opacity: 0; transition: opacity 2.4s ease .3s; }
.is-ready #fillHero, .is-ready #glowHeroL { opacity: 1; }
#fillClarity { transition: opacity .5s linear; }
html:not(.js) .lines__fill { opacity: 1; }

/* ---------- Reveal-System ------------------------------------------------ */
.js [data-reveal] {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity .9s ease, transform 1.2s var(--ease-out), filter .9s ease;
  transition-delay: var(--d, 0s);
}
.js .is-in [data-reveal] { opacity: 1; transform: none; filter: none; }

.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .18em; margin-bottom: -.18em; }
.w > span { display: inline-block; }
.js [data-split] .w > span {
  transform: translateY(118%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--wi) * 55ms + .05s);
}
.js .is-in [data-split] .w > span { transform: none; }

/* ---------- Karten ------------------------------------------------------- */
.card {
  --r: clamp(30px, 3.3vw, 46px);
  position: relative;
  display: block;
  padding: clamp(28px, 2.8vw, 40px) clamp(26px, 2.5vw, 36px);
  border-radius: var(--r);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.06rem, .95rem + .42vw, 1.32rem);
  line-height: 1.48;
  letter-spacing: -.005em;
  background: radial-gradient(240px circle at var(--px, 50%) var(--py, -40%), rgba(255, 255, 255, .075), transparent 70%);
  isolation: isolate;
}
.card p { position: relative; text-wrap: pretty; }
.card__outline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.card__outline rect { fill: none; rx: var(--r); ry: var(--r); }
.card__stroke {
  stroke: var(--line); stroke-width: 1; stroke-opacity: .85;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.card__spark {
  stroke: #fff; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: .09 .91; stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .9));
  transition: opacity .5s ease;
}
.js .card__stroke { stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s var(--ease-io); transition-delay: var(--d, 0s); }
.js .is-in .card__stroke { stroke-dashoffset: 0; }
.js .card p {
  opacity: 0; transform: translateY(18px); filter: blur(5px);
  transition: opacity .9s ease, transform 1.2s var(--ease-out), filter .9s ease;
  transition-delay: calc(var(--d, 0s) + .25s);
}
.js .is-in .card p { opacity: 1; transform: none; filter: none; }
@media (hover: hover) {
  .card:hover .card__spark { opacity: 1; animation: spark 3.2s linear infinite; }
}
@keyframes spark { to { stroke-dashoffset: 0; } }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(150px, 15vw + 40px, 250px);
  padding-bottom: clamp(84px, 8.5vw, 150px);
}
.hero__row {
  display: flex; align-items: flex-start;
  gap: clamp(28px, 4.6vw, 80px);
  margin-top: clamp(34px, 3.6vw, 62px);
  padding-left: 12.4%;
}
.hero__text { flex: 0 1 25em; max-width: 25em; margin-top: clamp(14px, 2vw, 30px); }
.hero__card { flex: 0 0 auto; width: clamp(250px, 21.5vw, 340px); }

/* ---------- Leistungen --------------------------------------------------- */
.services {
  position: relative; z-index: 1;
  padding: clamp(72px, 7vw, 124px) calc(var(--pad-r) - var(--frame) * .01) clamp(76px, 7.4vw, 130px) calc(var(--pad-l) - var(--frame) * .052);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 56px clamp(18px, 2.2vw, 40px);
}
.service {
  text-align: center;
  font-size: .93em;
  line-height: 1.68;
  color: var(--text-soft);
  hyphens: auto;
  hyphenate-limit-chars: 14 6 6;
}
.service > p, .service__list, .service__title { transition: opacity .9s ease, transform 1.1s var(--ease-out); }
.js .service > p, .js .service__list, .js .service__title { opacity: 0; transform: translateY(18px); }
.js .is-in .service > p, .js .is-in .service__list, .js .is-in .service__title { opacity: 1; transform: none; }
.js .is-in .service__title { transition-delay: calc(var(--i) * .13s + .3s); }
.js .is-in .service > p { transition-delay: calc(var(--i) * .13s + .4s); }
.js .is-in .service__list { transition-delay: calc(var(--i) * .13s + .5s); }
.service__title {
  margin: 26px 0 12px;
  font-size: .86em; font-weight: 600; letter-spacing: .045em; text-transform: uppercase;
  color: #fff;
}
.service__list li::before { content: "·"; font-weight: 900; margin-right: .4em; }
.service > p, .service__list { max-width: 17.5em; margin-inline: auto; text-wrap: balance; }

/* Icons: runde Striche + Punkte, wachsen aus einem Punkt heraus */
.icon {
  width: clamp(84px, 7.6vw, 118px); height: auto; margin-inline: auto;
  overflow: visible;
  --t0: calc(var(--i) * .13s + .1s);
}
.ic-bar {
  fill: none; stroke: #fff; stroke-width: 25; stroke-linecap: round;
  stroke-dasharray: 1 3;
}
.ic-dot { fill: #fff; transform-box: fill-box; transform-origin: center; }
.ic-idle, .ic-spin { transform-box: view-box; transform-origin: 50px 59.55px; }

.js .ic-bar {
  stroke-dasharray: .001 3; opacity: 0;
  transition: stroke-dasharray .95s var(--ease-out), opacity .01s linear;
  transition-delay: var(--t, var(--t0)), var(--t, var(--t0));
}
.js .is-in .ic-bar { stroke-dasharray: 1 3; opacity: 1; }
.js .ic-dot {
  transform: scale(0);
  transition: transform .9s var(--spring);
  transition-delay: var(--t, var(--t0));
}
.js .is-in .ic-dot { transform: none; }

/* Startups: Balken wächst, Punkt „startet“ aus der Balkenspitze */
.js .icon--startups .ic-dot { transform: translate(-22.6px, 17.6px) scale(0); --t: calc(var(--t0) + .32s); }
.js .is-in .icon--startups .ic-dot { transform: none; }
/* Unternehmen: zwei Balken nacheinander, Punkt fällt ein */
.icon--unternehmen .ic-bar--2 { --t: calc(var(--t0) + .14s); }
.js .icon--unternehmen .ic-dot { transform: translateY(-30px) scale(0); --t: calc(var(--t0) + .36s); }
.js .is-in .icon--unternehmen .ic-dot { transform: none; }
/* Vermögen: Punkt, dann wachsende Säulen */
.icon--vermoegen .ic-bar--1 { --t: calc(var(--t0) + .16s); }
.icon--vermoegen .ic-bar--2 { --t: calc(var(--t0) + .32s); }
/* Konflikte: Kreuz entfaltet sich aus der Mitte und dreht ein */
.js .icon--konflikte .ic-spin { transform: rotate(-135deg) scale(.6); transition: transform 1.25s var(--spring); transition-delay: var(--t0); }
.js .is-in .icon--konflikte .ic-spin { transform: none; }

/* Leerlauf + Hover */
.is-in .icon--startups .ic-idle { animation: drift 5.5s ease-in-out 2.2s infinite; }
.is-in .icon--unternehmen .ic-idle { animation: bob 4.6s ease-in-out 2.6s infinite; }
@keyframes drift { 0%, 100% { transform: none; } 50% { transform: translate(2.6px, -2.1px); } }
@keyframes bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3.5px); } }
@media (hover: hover) {
  .service:hover .icon--startups .ic-dot { animation: launch 1s var(--ease-out); }
  .service:hover .icon--unternehmen .ic-bar { animation: regrow .9s var(--ease-out); }
  .service:hover .icon--unternehmen .ic-bar--2 { animation-delay: .1s; }
  .service:hover .icon--unternehmen .ic-dot { animation: hop .8s var(--ease-out) .1s; }
  .service:hover .icon--vermoegen .ic-bar { animation: regrow .9s var(--ease-out); }
  .service:hover .icon--vermoegen .ic-bar--2 { animation-delay: .12s; }
  .service:hover .icon--vermoegen .ic-dot { animation: hop .7s var(--ease-out); }
  .service:hover .icon--konflikte .ic-spin { animation: turn 1s var(--spring); }
}
@keyframes launch { 0% { transform: none; } 35% { transform: translate(9px, -7.2px) scale(.92); } 100% { transform: none; } }
@keyframes regrow { 0% { stroke-dasharray: .001 3; } 100% { stroke-dasharray: 1 3; } }
@keyframes hop { 0%, 100% { transform: none; } 40% { transform: translateY(-9px); } }
@keyframes turn { from { transform: rotate(0); } to { transform: rotate(90deg); } }

/* ---------- Ansatz ------------------------------------------------------- */
.clarity {
  position: relative;
  padding-top: clamp(72px, 7.2vw, 128px);
  padding-bottom: clamp(84px, 8vw, 140px);
}
.clarity .display, .cta .display { padding-left: 2.1%; }
.clarity__row {
  display: flex; align-items: flex-start;
  gap: clamp(30px, 5.6vw, 96px);
  margin-top: clamp(40px, 5.2vw, 88px);
  padding-left: 2.1%;
}
.clarity__card { flex: 0 0 auto; width: clamp(250px, 21.5vw, 340px); }
.clarity__text { flex: 0 1 31em; display: grid; gap: 1.5em; margin-top: clamp(8px, 1.8vw, 30px); }

/* ---------- Kontakt / Schalter ------------------------------------------- */
.cta {
  position: relative;
  padding-top: clamp(72px, 6.6vw, 118px);
  padding-bottom: clamp(88px, 8.4vw, 150px);
  overflow: hidden; overflow: clip;
}
.cta__row {
  display: flex; align-items: center;
  gap: clamp(30px, 4.6vw, 80px);
  margin-top: clamp(40px, 5.4vw, 92px);
  padding-left: 2.1%;
}
.cta__lead { flex: 0 1 33em; display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 36px); }
.cta__lead .lead { max-width: 25em; }
.cta__card { flex: 0 0 auto; width: clamp(264px, 22.5vw, 356px); font-size: clamp(1rem, .9rem + .4vw, 1.26rem); padding-right: clamp(54px, 5vw, 70px); }
.cta__arrow {
  position: absolute; right: clamp(20px, 2vw, 30px); bottom: clamp(22px, 2.2vw, 32px);
  width: 24px; height: 24px;
  fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s var(--ease-out), opacity .6s ease;
}
@media (hover: hover) { .cta__card:hover .cta__arrow { transform: translateX(6px); } }

.switch {
  flex: 0 0 auto;
  width: clamp(74px, 6vw, 96px);
  margin: -4px 0 0 -6px;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
.switch svg { width: 100%; height: auto; overflow: visible; }
.switch__pill { fill: #fff; transition: fill .4s ease, filter .6s ease; }
.switch__knob { fill: var(--tint); transition: transform .62s var(--spring), fill .5s ease; }
.switch:active .switch__pill { transform: scale(.97); transform-box: fill-box; transform-origin: center; }

/* Aus-Zustand (nur mit JS): alles gedimmt, bis der Schalter umgelegt wird.
   Ein Schatten liegt über dem Bereich; beim Umlegen öffnet sich vom Schalter
   aus ein weicher Lichtkreis und gibt den Verlauf aus dem Design frei.      */
@property --hole { syntax: "<length>"; inherits: false; initial-value: -160px; }
.cta__shade, .cta__glow { position: absolute; inset: 0; pointer-events: none; display: none; }
.js .cta__shade {
  display: block;
  background: rgba(10, 11, 14, .56);
  -webkit-mask-image: radial-gradient(circle at var(--sx, 30%) var(--sy, 60%), transparent var(--hole), #000 calc(var(--hole) + 160px));
  mask-image: radial-gradient(circle at var(--sx, 30%) var(--sy, 60%), transparent var(--hole), #000 calc(var(--hole) + 160px));
  transition: --hole 1.7s cubic-bezier(.3, .6, .1, 1);
}
.js .cta.is-on .cta__shade { --hole: 170vmax; }
.js .cta__glow {
  display: block;
  background: radial-gradient(circle at var(--sx, 30%) var(--sy, 60%), rgba(77, 90, 102, .36) 0, rgba(41, 49, 62, .5) 20vmax, transparent 48vmax);
  opacity: 0; transform: scale(.9); transform-origin: var(--sx, 30%) var(--sy, 60%);
  transition: opacity 1.2s ease, transform 1.8s var(--ease-out);
}
.js .cta.is-on .cta__glow { opacity: 1; transform: none; }
.cta__ring {
  position: absolute; left: var(--sx, 30%); top: var(--sy, 60%);
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  opacity: 0; pointer-events: none;
}
.cta.is-on .cta__ring { animation: ring 1.6s var(--ease-out); }

.js .cta .switch__pill { fill: #5b636e; }
.js .cta .switch__knob { transform: translateX(-25.8px); fill: #15171b; }
.js .cta.is-on .switch__pill { fill: #fff; filter: drop-shadow(0 0 14px rgba(255, 255, 255, .45)); }
.js .cta.is-on .switch__knob { transform: none; fill: var(--tint); }

.js .cta .display, .js .cta .lead, .js .cta__card { transition: color 1s ease, opacity 1s ease; }
.js .cta:not(.is-on) .display { color: rgba(255, 255, 255, .3); }
.js .cta:not(.is-on) .lead { color: rgba(255, 255, 255, .34); }
.js .cta:not(.is-on) .cta__card { opacity: .3; }
.js .cta:not(.is-on) .cta__arrow { opacity: 0; transform: translateX(-10px); }
.js .cta.is-on .display .w > span { animation: flash 1.3s ease both; animation-delay: calc(var(--wi) * 70ms + .1s); }
@keyframes flash { 0% { text-shadow: 0 0 0 transparent; } 30% { text-shadow: 0 0 26px rgba(255, 255, 255, .75); } 100% { text-shadow: 0 0 0 transparent; } }
.js .cta.is-on .cta__card .card__spark { opacity: 1; animation: spark 3.6s linear .5s infinite; }

/* ---------- Footer ------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 2;
  background: var(--tint);
  padding: clamp(44px, 4.6vw, 72px) var(--pad-r) 0 var(--pad-l);
  font-size: .93em;
}
.footer__main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px clamp(28px, 4vw, 72px);
  padding-bottom: clamp(36px, 3.8vw, 60px);
}
.footer__brand { display: grid; gap: 12px; flex: 0 0 auto; width: clamp(150px, 12vw, 190px); }
.footer__tagline { font-size: .66rem; letter-spacing: .055em; white-space: nowrap; color: var(--text-soft); text-align: center; }
.footer__contact { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px clamp(18px, 2.6vw, 44px); }
.footer__contact a {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  color: var(--text-soft);
  transition: color .3s ease;
}
.chip {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(201, 208, 212, .5);
  transition: background-color .35s ease, border-color .35s ease, transform .6s var(--spring);
}
.chip svg {
  width: 20px; height: 20px;
  fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .35s ease;
}
.chip svg .solid { fill: #fff; stroke: none; transition: fill .35s ease; }
@media (hover: hover) {
  .footer__contact a:hover { color: #fff; }
  .footer__contact a:hover .chip { background: #fff; border-color: #fff; transform: scale(1.08) rotate(-6deg); }
  .footer__contact a:hover .chip svg { stroke: var(--tint); }
  .footer__contact a:hover .chip svg .solid { fill: var(--tint); }
}
.footer__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding: 20px 0 calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(201, 208, 212, .2);
  font-size: .9em;
  color: var(--text-dim);
}
.footer__legal a { color: var(--text-soft); padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: background-size .5s var(--ease-out), color .3s ease; }
.footer__legal a:hover { color: #fff; background-size: 100% 1px; }
.js .site-footer .footer__main > *, .js .site-footer .footer__bar { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform 1.1s var(--ease-out); }
.js .site-footer.is-in .footer__main > *, .js .site-footer.is-in .footer__bar { opacity: 1; transform: none; }
.js .site-footer.is-in .footer__contact { transition-delay: .12s; }
.js .site-footer.is-in .footer__bar { transition-delay: .24s; }

/* ---------- Unterseiten (Impressum, Datenschutz, 404) -------------------- */
.page { min-height: 100svh; display: flex; flex-direction: column; }
.page .site-header { position: relative; }
.page .brand, .js .page .brand { visibility: visible; }
.page__main { flex: 1; padding: clamp(36px, 6vw, 96px) var(--pad-r) clamp(72px, 9vw, 140px) var(--pad-l); }
.page__main .display { margin-bottom: .7em; }
.page__main p { max-width: 38em; color: var(--text-soft); }
.page__main p + p { margin-top: 1em; }
.page__back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2.4em; color: #fff; }
.page__back svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.page__back:hover svg { transform: translateX(-5px); }
.page .site-footer { padding-top: 0; }
.page .footer__bar { border-top: 0; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 1180px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 24px; }
  .services { padding-left: var(--pad-l); padding-right: var(--pad-r); }
  .icon { --t0: calc(var(--i) * .1s + .1s); }
}
@media (max-width: 1040px) {
  .hero__row { padding-left: 6%; }
  .footer__main { flex-direction: column; align-items: flex-start; }
  .footer__contact { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .hero__row, .clarity__row, .cta__row { flex-direction: column; align-items: stretch; padding-left: 0; }
  .clarity .display, .cta .display { padding-left: 0; }
  .hero__text, .clarity__text { max-width: 33em; flex-basis: auto; margin-top: 0; }
  .hero__card, .clarity__card, .cta__card { width: min(100%, 360px); }
  .hero__card { align-self: flex-end; }
  .cta__lead { flex-basis: auto; }
  .hero { padding-bottom: 96px; }
}
@media (max-width: 620px) {
  .services__grid { grid-template-columns: 1fr; gap: 60px; }
  .hero__card, .clarity__card, .cta__card { width: 100%; }
  .cta__lead { flex-direction: column; }
  .footer__contact { flex-direction: column; gap: 4px; }
  .footer__bar { flex-direction: column; }
  .footer__brand { width: 168px; }
}

/* ---------- Reduzierte Bewegung ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important;
  }
  .spark { display: none; }
}