/* Hertlein Consulting – Website
   Farben aus dem Logo: #9e44ea (hell) bis #3c05a0 (dunkel)
   Schriften lokal gehostet (kein Google-Fonts-Abruf) */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('assets/fonts/space-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('assets/fonts/space-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #0d0d0d;
  --bg-2: #141414;
  --bg-band: rgba(31, 31, 31, 0.35);
  --line: #2a2a2a;
  --line-strong: #333333;
  --text: #fafafa;
  --muted: #a6a6a6;
  --muted-2: #6f6f6f;

  --brand: #9e44ea;
  --brand-dark: #3c05a0;
  --brand-mid: #6d1fd0;
  --brand-light: #b57bff;
  --brand-tint: rgba(158, 68, 234, 0.18);
  --brand-glow: rgba(158, 68, 234, 0.32);
  --warn: #ff3366;

  --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', 'Segoe UI', Arial, sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --container: 1200px;
  --section: 80px;
  --header-h: 76px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--brand-light); text-decoration: none; transition: color .2s ease; }
a:hover { color: #d2a9ff; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: -0.02em; line-height: 1.12; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 4px; }

.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.section { padding-block: var(--section); }
.section--band { background: var(--bg-band); }
.section-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 48px; }
.section-head p { max-width: 640px; color: var(--muted); font-size: 17px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-light); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-light)); border-radius: 2px; }
.section-head .eyebrow::after { content: ""; width: 18px; height: 2px; background: linear-gradient(90deg, var(--brand-light), var(--brand)); border-radius: 2px; }
h2 { font-size: clamp(30px, 4vw, 40px); }
h3 { font-size: 18px; font-weight: 700; }
.accent { color: var(--brand-light); }
.gradient-text { background: linear-gradient(90deg, #d2a9ff 0%, var(--brand-light) 45%, var(--brand) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons */
.btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: transform .35s var(--ease), background .2s ease, box-shadow .35s ease, border-color .2s ease; will-change: transform; backface-visibility: hidden; font-family: var(--font-body); white-space: nowrap; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: linear-gradient(180deg, var(--brand), var(--brand-mid)); color: #fff; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); transition: left .6s var(--ease); }
.btn--primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 34px rgba(158,68,234,.45); }
.btn--primary:hover::after { left: 130%; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--text); border-color: var(--brand-light); transform: translateY(-2px); }
.btn--lg { padding: 18px 36px; font-size: 17px; box-shadow: 0 0 40px var(--brand-glow); }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: rgba(13,13,13,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease; }
.header.is-scrolled { background: rgba(13,13,13,0.9); border-bottom-color: #1f1f1f; }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); transition: height .3s var(--ease); }
.header.is-scrolled .header__inner { height: 64px; }
.logo { display: inline-flex; }
.logo img { height: 34px; width: auto; transition: height .3s var(--ease); }
.header.is-scrolled .logo img { height: 30px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { position: relative; color: var(--text); font-weight: 500; font-size: 15px; padding: 6px 2px; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-light)); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a:hover, .nav a.is-active { color: #fff; }
.header__cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: transparent; color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease), opacity .2s ease; }
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--brand-mid), var(--brand-light)); transition: width .1s linear; }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: 112px 96px; text-align: center; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .55; will-change: transform; animation: drift 22s ease-in-out infinite alternate; }
.orb--1 { width: 620px; height: 620px; left: 8%; top: -220px; background: radial-gradient(circle, rgba(158,68,234,.75), rgba(158,68,234,0) 65%); }
.orb--2 { width: 520px; height: 520px; right: 4%; top: 40px; background: radial-gradient(circle, rgba(109,31,208,.7), rgba(109,31,208,0) 65%); animation-duration: 28s; animation-delay: -8s; }
.orb--3 { width: 420px; height: 420px; left: 40%; bottom: -260px; background: radial-gradient(circle, rgba(181,123,255,.5), rgba(181,123,255,0) 65%); animation-duration: 19s; animation-delay: -14s; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,0) 60%, var(--bg) 100%); }
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(60px, 40px, 0) scale(1.08); }
  100% { transform: translate3d(-40px, 70px, 0) scale(.96); }
}
.hero .container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.hero .container > * { animation: rise .9s var(--ease) both; }
.hero .container > :nth-child(1) { animation-delay: .05s; }
.hero .container > :nth-child(2) { animation-delay: .15s; }
.hero .container > :nth-child(3) { animation-delay: .28s; }
.hero .container > :nth-child(4) { animation-delay: .42s; }
.hero .container > :nth-child(5) { animation-delay: .56s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero h1 { font-size: clamp(36px, 5.4vw, 66px); max-width: 1000px; }
.hero__lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 720px; }
.hero__points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 1120px; text-align: left; padding-top: 12px; }
.point { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.06); background: rgba(20,20,20,.55); backdrop-filter: blur(6px); transition: border-color .25s ease, transform .25s var(--ease); }
.point:hover { border-color: rgba(158,68,234,.45); transform: translateY(-3px); }
.point strong { display: block; font-size: 16px; margin-bottom: 4px; line-height: 1.3; }
.point span { font-size: 14px; color: var(--muted); }
.icon-circle { width: 40px; height: 40px; border-radius: 999px; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--brand-light); transition: background .25s ease, transform .25s var(--ease); }
.icon-circle svg { width: 20px; height: 20px; }
.card:hover .icon-circle, .point:hover .icon-circle { background: rgba(158,68,234,.3); transform: scale(1.06); }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 12px; }
.hero__note { font-size: 14px; color: var(--muted); }
.hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-top: 8px; }
.hero__scroll i { width: 1px; height: 36px; background: linear-gradient(180deg, var(--brand-light), transparent); animation: scrollHint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes scrollHint { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(12px); opacity: 0; } }

/* Cards */
.card { background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 24px; transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
@media (hover: hover) {
  .card:hover { transform: translateY(-5px); border-color: rgba(158,68,234,.5); box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 0 1px rgba(158,68,234,.12); }
}
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

/* Testimonials */
.quote { display: flex; flex-direction: column; gap: 16px; }
.pill { display: inline-flex; align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-light); font-size: 13px; font-weight: 600; }
.quote p { font-size: 15px; }
.quote__who { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.avatar { width: 40px; height: 40px; border-radius: 999px; border: 1px dashed #555; flex-shrink: 0; }
.quote__who strong { display: block; font-size: 14px; }
.quote__who span { font-size: 13px; color: var(--muted); }

/* Why direct */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; margin-bottom: 40px; }
.why > .reveal:first-child { position: sticky; top: calc(var(--header-h) + 32px); padding-top: 8px; }
.why h2 { margin-block: 14px 18px; }
.why p { color: var(--muted); font-size: 17px; }
.budget { display: flex; flex-direction: column; gap: 26px; padding: 32px; }
.budget__label { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.budget__row { display: flex; flex-direction: column; gap: 10px; }
.budget__meta { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; gap: 12px; flex-wrap: wrap; }
.budget__meta span:last-child { color: var(--muted); }
.budget__meta .accent { font-weight: 600; }
.bar { display: flex; height: 40px; border-radius: var(--radius-sm); overflow: hidden; gap: 3px; }
.bar div { display: flex; align-items: center; padding-left: 14px; font-size: 13px; font-weight: 600; white-space: nowrap; transform: scaleX(0); transform-origin: left; color: transparent; transition: transform 1s var(--ease), color .3s ease .8s; }
.bar__work { flex: 7; background: #2a2a2a; }
.bar__fee { flex: 3; background: var(--warn); transition-delay: .35s, 1.1s; }
.bar__full { flex: 1; background: linear-gradient(90deg, var(--brand-mid), var(--brand)); transition-delay: .5s, 1.2s; }
.is-visible .bar div { transform: scaleX(1); }
.is-visible .bar__work { color: var(--muted); }
.is-visible .bar__fee, .is-visible .bar__full { color: #fff; }
.check { display: flex; gap: 14px; align-items: flex-start; }
.check .icon-circle { width: 28px; height: 28px; }
.check .icon-circle svg { width: 15px; height: 15px; }
.check p { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* Services */
.service { display: flex; flex-direction: column; gap: 14px; padding: 28px; position: relative; overflow: hidden; }
.service::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 0%, rgba(158,68,234,.16), transparent 55%); opacity: 0; transition: opacity .35s ease; }
.service:hover::before { opacity: 1; }
.service > * { position: relative; }
.service .icon-circle { width: 44px; height: 44px; }
.service .icon-circle svg { width: 22px; height: 22px; }
.service p { font-size: 14px; color: var(--muted); }

/* Team */
.member { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 20px; }
.member__photo { width: 120px; height: 120px; border-radius: 999px; border: 1px dashed #555; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--muted); object-fit: cover; }
.member span { font-size: 13px; color: var(--brand-light); }

/* Process */
.steps { position: relative; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.step__num { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; background: linear-gradient(90deg, var(--brand-light), var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step h3 { font-size: 20px; }
.step p { font-size: 14px; color: var(--muted); }
.step__line { height: 2px; width: 100%; background: linear-gradient(90deg, var(--brand), transparent); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .2s; border-radius: 2px; }
.is-visible .step__line { transform: scaleX(1); }

/* CTA */
.cta { position: relative; overflow: hidden; text-align: center; padding-block: 120px; isolation: isolate; }
.cta::before { content: ""; position: absolute; inset: -20%; z-index: -1; background: radial-gradient(ellipse 40% 50% at 50% 50%, var(--brand-glow), transparent 70%); animation: pulse 6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }
.cta .container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.cta h2 { font-size: clamp(32px, 4.6vw, 50px); max-width: 900px; }
.cta p { color: var(--muted); font-size: 18px; max-width: 620px; }
.cta__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; font-size: 15px; color: var(--muted); padding-top: 4px; }
.cta__contact a { color: var(--muted); }
.cta__contact a:hover { color: var(--brand-light); }

/* Contact form */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; }
.contact h2 { margin-block: 14px 18px; }
.contact__intro { color: var(--muted); font-size: 17px; margin-bottom: 32px; }
.contact__rows { display: flex; flex-direction: column; gap: 18px; }
.contact__row { display: flex; gap: 14px; align-items: flex-start; }
.contact__row small { display: block; font-size: 13px; color: var(--muted); }
.contact__row span { font-size: 16px; font-weight: 500; }
.form { display: flex; flex-direction: column; gap: 16px; padding: 32px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field textarea { width: 100%; background: #0d0d0d; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 16px; padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand-light); box-shadow: 0 0 0 3px var(--brand-tint); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.consent input { margin-top: 3px; accent-color: var(--brand); width: 18px; height: 18px; flex-shrink: 0; }
.form__hint { font-size: 13px; color: var(--muted-2); }

/* FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.faq h2 { font-size: clamp(30px, 4vw, 44px); margin-block: 14px 18px; }
.faq > div > p { color: var(--muted); font-size: 17px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item { padding: 0; overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; font-family: var(--font-body); font-weight: 600; font-size: 16px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex-shrink: 0; color: var(--brand-light); transition: transform .3s var(--ease); }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item p { padding: 0 24px 22px; font-size: 14px; color: var(--muted); animation: fadeDown .35s var(--ease); }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Mobile action bar */
.mobile-bar { display: none; }

/* Footer */
.footer { border-top: 1px solid #1f1f1f; padding: 56px 0 36px; }
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand { max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.footer__brand img { height: 30px; width: auto; }
.footer__brand p { font-size: 14px; color: var(--muted); }
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer__col strong { margin-bottom: 4px; }
.footer__col a, .footer__col span { color: var(--muted); }
.footer__col a:hover { color: var(--brand-light); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid #1f1f1f; font-size: 13px; color: var(--muted-2); }
.footer__bottom a { color: var(--muted-2); }
.footer__bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }

/* Legal pages */
.legal { padding-block: 72px; max-width: 760px; }
.legal h1 { font-size: clamp(32px, 4.5vw, 44px); margin-bottom: 24px; }
.legal h2 { font-size: 22px; margin-top: 36px; margin-bottom: 10px; }
.legal p { color: var(--muted); margin-bottom: 12px; }
.placeholder { color: var(--brand-light); background: var(--brand-tint); padding: 2px 6px; border-radius: 4px; }

/* Reveal animation (staggered per sibling via --d from script.js) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero .container > *, .bar div, .step__line { opacity: 1; transform: none; transition: none; animation: none; color: inherit; }
  .orb, .cta::before, .marquee__track, .hero__scroll i { animation: none; }
  .is-visible .bar__work { color: var(--muted); } .is-visible .bar__fee, .is-visible .bar__full { color: #fff; }
  .bar div { color: inherit; }
}

/* Responsive */
@media (max-width: 1024px) {
  :root { --section: 72px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__points { grid-template-columns: 1fr; max-width: 560px; }
  .why, .contact, .faq { grid-template-columns: 1fr; gap: 40px; }
  .nav { gap: 20px; }
}

@media (max-width: 720px) {
  :root { --section: 56px; --header-h: 64px; --radius: 12px; }
  body { padding-bottom: 76px; }
  .container { width: min(var(--container), 100% - 32px); }
  .section-head { margin-bottom: 28px; gap: 10px; }
  .section-head p { font-size: 15px; }
  h2 { font-size: clamp(26px, 7.4vw, 32px); }

  /* Header */
  .logo img { height: 28px; }
  .header.is-scrolled .header__inner { height: 60px; }
  .header.is-scrolled .logo img { height: 26px; }
  .nav { display: flex; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(13,13,13,.97); padding: 12px 20px 24px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .3s var(--ease); z-index: 40; }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 16px 4px; border-bottom: 1px solid #1f1f1f; font-size: 18px; font-family: var(--font-display); font-weight: 700; }
  .nav a::after { display: none; }
  .nav-toggle { display: inline-flex; }
  .header__cta .btn { display: none; }

  /* Hero */
  .hero { padding-block: 56px 44px; text-align: left; }
  .hero .container { align-items: flex-start; gap: 22px; }
  .hero h1 { font-size: clamp(34px, 9.6vw, 44px); line-height: 1.08; }
  .hero__lead { font-size: 16px; }
  .hero__points { gap: 8px; padding-top: 0; }
  .point { padding: 12px 14px; gap: 12px; align-items: center; }
  .point strong { font-size: 15px; margin-bottom: 0; }
  .point span { display: none; }
  .point .icon-circle { width: 34px; height: 34px; }
  .point .icon-circle svg { width: 18px; height: 18px; }
  .hero__cta { width: 100%; align-items: stretch; text-align: center; }
  .hero__note { font-size: 13px; }
  .hero__scroll { display: none; }
  .orb { filter: blur(50px); opacity: .5; }
  .orb--1 { width: 360px; height: 360px; left: -120px; top: -140px; }
  .orb--2 { width: 300px; height: 300px; right: -100px; top: 120px; }
  .orb--3 { display: none; }

  /* Grids */
  .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 20px; }
  .why { gap: 28px; margin-bottom: 28px; }
  .why p { font-size: 15px; }
  .budget { padding: 20px; gap: 20px; }
  .bar { height: 36px; }
  .bar div { padding-left: 10px; font-size: 12px; }
  .check h3 { font-size: 16px; }
  .service { padding: 22px; }
  .marquee { margin-top: 28px; }

  /* Team: 2 Spalten */
  #ueber-uns .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .member { padding: 16px 12px; gap: 10px; }
  .member__photo { width: 84px; height: 84px; }
  .member h3 { font-size: 15px; }

  /* Ablauf: Nummer links, Text rechts */
  .step { display: grid; grid-template-columns: 52px 1fr; gap: 4px 14px; padding: 20px; align-items: start; }
  .step__num { grid-row: 1 / span 3; font-size: 28px; }
  .step h3 { font-size: 17px; }
  .step__line { display: none; }

  .cta { padding-block: 72px; }
  .cta p { font-size: 16px; }
  .btn--lg { width: 100%; padding: 16px 24px; font-size: 16px; }

  .contact { gap: 28px; }
  .contact__intro { font-size: 15px; margin-bottom: 20px; }
  .form { padding: 20px; gap: 14px; }
  .form__grid { grid-template-columns: 1fr; gap: 14px; }
  .field textarea { min-height: 110px; }

  .faq { gap: 24px; }
  .faq__item summary { padding: 16px 18px; font-size: 15px; }
  .faq__item p { padding: 0 18px 18px; }

  /* Fixe Aktionsleiste unten */
  .mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 56px 1fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(13,13,13,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #1f1f1f; transform: translateY(0); transition: transform .3s var(--ease); }
  .mobile-bar.is-hidden { transform: translateY(110%); }
  .mobile-bar .btn { padding: 14px 16px; }
  .mobile-bar .btn--ghost { padding: 0; width: 56px; }
  .mobile-bar .btn--ghost svg { width: 20px; height: 20px; }
  .mobile-bar .btn:hover svg { transform: none; }

  .footer { padding: 40px 0 28px; }
  .footer__top { gap: 28px; }
  .footer__cols { gap: 28px 40px; }
  .footer__bottom { margin-top: 28px; flex-direction: column; }
}

/* =========================================================
   Launch-Erweiterungen: Motion, Kunden, Über uns, Consent
   ========================================================= */

.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--brand); color: #fff; font-weight: 600; transition: top .2s ease; }
.skip-link:focus { top: 12px; color: #fff; }

/* Headline: Wörter steigen gestaffelt auf */
.hero .container > h1.split { animation: none; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; transform: translateY(105%); animation: wordUp .9s var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 45ms); }
@keyframes wordUp { to { transform: none; } }

/* Schaltkreis-Linien (Logo-Motiv) */
.circuit { position: absolute; width: min(28vw, 400px); height: auto; top: 50%; margin-top: -260px; opacity: .55; will-change: transform; }
.circuit--left { left: 0; mask-image: linear-gradient(90deg, #000 45%, transparent 95%); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent 95%); }
.circuit--right { right: 0; mask-image: linear-gradient(270deg, #000 45%, transparent 95%); -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent 95%); }
.circuit__base path, .circuit__base circle { stroke: rgba(181,123,255,.22); stroke-width: 1.5; }
.circuit__base circle { fill: #0d0d0d; }
.circuit__base path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 2.4s var(--ease) .3s forwards; }
.circuit__pulse path { stroke: var(--brand-light); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 100; opacity: 0; animation: packet 4.8s linear infinite; filter: drop-shadow(0 0 6px rgba(181,123,255,.9)); }
.circuit__pulse path:nth-child(2) { animation-delay: 1.2s; animation-duration: 5.6s; }
.circuit__pulse path:nth-child(3) { animation-delay: 2.4s; animation-duration: 4.2s; }
.circuit__pulse path:nth-child(4) { animation-delay: 3.3s; animation-duration: 6.2s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes packet { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* Kunden-Laufband */
.clients { padding-block: 56px 64px; border-block: 1px solid #1a1a1a; background: linear-gradient(180deg, rgba(20,20,20,.6), rgba(13,13,13,0)); }
.clients__head { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 32px; }
.clients__title { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.marquee__toggle { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s ease, color .2s ease; }
.marquee__toggle:hover { color: var(--text); border-color: var(--brand-light); }
.marquee__toggle svg { width: 12px; height: 12px; }
.marquee__toggle .i-play { display: none; }
.marquee__toggle[aria-pressed="true"] .i-play { display: block; }
.marquee__toggle[aria-pressed="true"] .i-pause { display: none; }
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; align-items: center; width: max-content; margin: 0; padding: 0; list-style: none; animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee:hover .marquee__track, .marquee.is-paused .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { flex-shrink: 0; padding-inline: 36px; height: 64px; display: flex; align-items: center; justify-content: center; }
.marquee__item img { height: var(--logo-h, 34px); width: auto; max-width: 190px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .3s ease, transform .3s var(--ease); }
.marquee__item:hover img { opacity: 1; transform: scale(1.06); }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: #fff; opacity: .55; white-space: nowrap; transition: opacity .3s ease; }
.marquee__item:hover .logo-word { opacity: 1; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* Spotlight-Karten: Licht folgt dem Cursor */
.spotlight { position: relative; isolation: isolate; }
.spotlight::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(158,68,234,.16), transparent 62%); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.spotlight:hover::after { opacity: 1; }

/* Leistungen: Nummer */
.service__top { display: flex; align-items: center; justify-content: space-between; }
.service__num { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #3a3a3a; transition: color .3s ease; }
.service:hover .service__num { color: var(--brand-light); }

/* Über uns */
.about { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.about__text { display: flex; flex-direction: column; gap: 18px; }
.about__text p { color: var(--muted); font-size: 17px; }
.about__facts { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.about__facts li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.about__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand-light); box-shadow: 0 0 0 4px var(--brand-tint); flex-shrink: 0; }
.person { display: flex; gap: 24px; align-items: flex-start; padding: 32px; }
.person__avatar { position: relative; width: 96px; height: 96px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--brand), var(--brand-dark)); font-family: var(--font-display); font-weight: 700; font-size: 30px; color: #fff; }
.person__avatar::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 1px solid rgba(181,123,255,.35); animation: ring 3.2s ease-in-out infinite; }
@keyframes ring { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.08); opacity: .3; } }
.person__body { display: flex; flex-direction: column; gap: 6px; }
.person__label { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-light); }
.person h3 { font-size: 24px; }
.person__role { color: var(--muted); font-size: 14px; margin-top: -2px; }
.person p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.person__links { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.person__links a { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 500; font-size: 15px; }
.person__links a:hover { color: var(--brand-light); }
.person__links svg { width: 18px; height: 18px; color: var(--brand-light); }

/* Ablauf: Fortschrittsschiene */
.steps__rail { position: absolute; left: 0; right: 0; top: -22px; height: 2px; background: #222; border-radius: 2px; overflow: hidden; }
.steps__fill { display: block; height: 100%; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: left; background: linear-gradient(90deg, var(--brand-mid), var(--brand-light)); box-shadow: 0 0 12px rgba(181,123,255,.7); }

/* Überschriften: weicher Clip-Reveal */
.js .section-head.reveal h2, .js .why .reveal h2, .js .about__text.reveal h2 { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease) .1s; }
.js .section-head.reveal.is-visible h2, .js .why .reveal.is-visible h2, .js .about__text.reveal.is-visible h2 { clip-path: inset(-10% -2% -20% -2%); }

.count { font-weight: inherit; font-variant-numeric: tabular-nums; }

/* =========================================================
   Cookie-Consent
   ========================================================= */
.cc-banner { position: fixed; z-index: 90; left: 24px; bottom: 24px; width: min(460px, calc(100% - 32px)); background: rgba(20,20,20,.97); border: 1px solid var(--line-strong); border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(20px); opacity: 0; transition: transform .45s var(--ease), opacity .35s ease; }
.cc-banner.is-open { transform: none; opacity: 1; }
.cc-banner h2 { font-size: 20px; margin-bottom: 10px; }
.cc-banner p { font-size: 14px; line-height: 1.55; color: var(--muted); }
.cc-banner p a { color: var(--brand-light); text-decoration: underline; text-underline-offset: 2px; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.cc-actions .cc-btn--wide { grid-column: 1 / -1; }
.cc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border-radius: var(--radius-sm); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.cc-btn:active { transform: translateY(1px); }
.cc-btn--choice { background: var(--brand); color: #fff; }
.cc-btn--choice:hover { background: #8a33d8; }
.cc-btn--ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.cc-btn--ghost:hover { border-color: var(--brand-light); }
.cc-links { display: flex; gap: 16px; margin-top: 14px; font-size: 12px; }
.cc-links a { color: var(--muted); }

.cc-modal { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.cc-modal.is-open { opacity: 1; pointer-events: auto; }
.cc-dialog { width: min(620px, 100%); max-height: min(86vh, 760px); overflow: auto; background: #141414; border: 1px solid var(--line-strong); border-radius: 16px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.6); transform: translateY(16px) scale(.98); transition: transform .4s var(--ease); }
.cc-modal.is-open .cc-dialog { transform: none; }
.cc-dialog h2 { font-size: 24px; margin-bottom: 8px; }
.cc-dialog > p { font-size: 14px; color: var(--muted); }
.cc-cats { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.cc-cat { border: 1px solid var(--line-strong); border-radius: 12px; background: #0f0f0f; }
.cc-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; }
.cc-cat__head strong { font-size: 16px; }
.cc-cat__head small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; font-weight: 400; }
.cc-cat details { border-top: 1px solid var(--line); }
.cc-cat summary { cursor: pointer; padding: 10px 18px; font-size: 13px; color: var(--brand-light); list-style: none; }
.cc-cat summary::-webkit-details-marker { display: none; }
.cc-cat summary::after { content: " +"; }
.cc-cat details[open] summary::after { content: " –"; }
.cc-service { padding: 4px 18px 14px; font-size: 13px; color: var(--muted); }
.cc-service + .cc-service { border-top: 1px dashed var(--line); padding-top: 12px; }
.cc-service b { color: var(--text); font-weight: 600; }
.cc-service dl { display: grid; grid-template-columns: 120px 1fr; gap: 4px 12px; margin: 8px 0 0; }
.cc-service dt { color: var(--muted-2); }
.cc-service dd { margin: 0; }
.cc-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.cc-switch span { position: absolute; inset: 0; border-radius: 999px; background: #333; transition: background .2s ease; }
.cc-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; transition: transform .25s var(--ease); }
.cc-switch input:checked + span { background: var(--brand); }
.cc-switch input:checked + span::after { transform: translateX(20px); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + span { opacity: .6; }
.cc-switch input:focus-visible + span { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.cc-dialog .cc-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; }
.cc-reopen { background: none; border: 0; padding: 0; font: inherit; color: var(--muted-2); cursor: pointer; }
.cc-reopen:hover { color: var(--brand-light); }
.legal .cc-reopen { color: var(--brand-light); text-decoration: underline; }
body.cc-visible .mobile-bar { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none; animation: none; }
  .circuit__base path { animation: none; stroke-dashoffset: 0; }
  .circuit__pulse { display: none; }
  .person__avatar::before { animation: none; }
  .js .section-head.reveal h2, .js .why .reveal h2, .js .about__text.reveal h2 { clip-path: none; transition: none; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee__item[aria-hidden="true"] { display: none; }
  .cc-banner, .cc-dialog { transition: none; }
}

@media (max-width: 1024px) {
  .about { grid-template-columns: 1fr; gap: 40px; }
  .circuit { opacity: .3; }
  .steps__rail { display: none; }
}

@media (max-width: 720px) {
  .circuit { display: none; }
  .clients { padding-block: 40px 44px; }
  .clients__head { margin-bottom: 22px; }
  .clients__title { font-size: 12px; }
  .marquee__item { padding-inline: 24px; height: 52px; }
  .marquee__item img { height: calc(var(--logo-h, 34px) * .82); max-width: 150px; }
  .logo-word { font-size: 16px; }
  .person { flex-direction: column; padding: 22px; gap: 18px; }
  .person__avatar { width: 72px; height: 72px; font-size: 24px; }
  .about__text p { font-size: 15px; }
  .cc-banner { left: 8px; right: 8px; width: auto; padding: 20px; border-radius: 14px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .cc-dialog { padding: 20px; }
  .cc-dialog .cc-actions { grid-template-columns: 1fr; }
  .cc-service dl { grid-template-columns: 1fr; }
}

/* Logo-Höhen (optisch ausgeglichen, ohne Inline-Styles wegen CSP) */
.lh-21 { --logo-h: 21px; }
.lh-25 { --logo-h: 25px; }
.lh-29 { --logo-h: 29px; }
.lh-31 { --logo-h: 31px; }
.lh-34 { --logo-h: 34px; }
.lh-35 { --logo-h: 35px; }
.lh-44 { --logo-h: 44px; }
.lh-49 { --logo-h: 49px; }
.lh-50 { --logo-h: 50px; }

/* Consent: versteckte Elemente wirklich entfernen, Dienst-Schalter */
.cc-banner[hidden], .cc-modal[hidden] { display: none !important; }
.cc-service__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc-switch--sm { width: 40px; height: 24px; }
.cc-switch--sm span::after { width: 18px; height: 18px; }
.cc-switch--sm input:checked + span::after { transform: translateX(16px); }
.cc-switch input:indeterminate + span { background: #6d1fd0; }
.cc-switch input:indeterminate + span::after { transform: translateX(10px); }
p.consent { display: block; }

/* =========================================================
   Footer-Logo, Foto-Karte, Kostenrechner
   ========================================================= */
.footer__brand img { align-self: flex-start; height: 30px; width: auto; max-width: 100%; object-fit: contain; }
.lh-33 { --logo-h: 33px; }

/* Ansprechpartner mit Foto */
.person { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.person__photo { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; background: #1a1a1a; }
.person__photo picture, .person__photo img { display: block; width: 100%; height: 100%; }
.person__photo img { object-fit: cover; object-position: 50% 8%; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.is-visible .person__photo img { transform: scale(1); }
.person:hover .person__photo img { transform: scale(1.03); }
.person__photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 100% 0%, rgba(158,68,234,.28), transparent 55%); mix-blend-mode: soft-light; pointer-events: none; }
.person__photo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,20,20,0) 55%, #141414 100%); pointer-events: none; }
.person__body { position: relative; z-index: 2; padding: 0 32px 32px; margin-top: -36px; }

/* Kostenrechner */
.calc { gap: 16px; padding: 26px 28px; }
.calc__head { display: flex; flex-direction: column; gap: 6px; }
.calc__head h3 { font-size: 22px; line-height: 1.25; }
.calc__inputs { display: flex; flex-direction: column; gap: 10px; }
.calc__field { display: flex; flex-direction: column; gap: 8px; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; color: var(--muted); }
.calc__label output { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.calc input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-mid), var(--brand-light)) 0 0 / var(--fill, 50%) 100% no-repeat, #2a2a2a; outline: none; cursor: pointer; }
.calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 4px solid var(--brand); box-shadow: 0 0 0 4px rgba(158,68,234,.2); transition: transform .15s ease, box-shadow .2s ease; }
.calc input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 999px; background: #fff; border: 4px solid var(--brand); box-shadow: 0 0 0 4px rgba(158,68,234,.2); }
.calc input[type="range"]:hover::-webkit-slider-thumb, .calc input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(158,68,234,.25); }
.calc input[type="range"]:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 6px; }

.bar--live { position: relative; }
.bar--live div { position: relative; overflow: hidden; min-width: 0; white-space: nowrap; transform: none; clip-path: inset(0 100% 0 0); transition-property: clip-path, flex-grow; transition-duration: 1s, .6s; transition-timing-function: var(--ease); transition-delay: 0s, 0s; }
.is-visible .bar--live div { transform: none; clip-path: inset(0 0 0 0); }
.bar--live .bar__work { color: var(--muted); }
.bar--live .bar__fee { color: #fff; transition-delay: .35s, 0s; }
.bar--live .bar__full { color: #fff; transition-delay: .5s, 0s; }
.why .calc__note { font-size: 12px; line-height: 1.5; color: var(--muted-2); }
.bar--live div::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); opacity: 0; }
.is-visible .bar--live div::after { animation: barShine 3.2s ease-in-out 1.6s infinite; opacity: 1; }
.is-visible .bar--live .bar__fee::after { animation-delay: 1.9s; }
.is-visible .bar--live .bar__full::after { animation-delay: 2.2s; }
@keyframes barShine { 0% { left: -40%; } 55%, 100% { left: 130%; } }
.bar--live.is-updating div { filter: brightness(1.15); }

.calc__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.calc__results div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calc__results small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.calc__results strong { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__warn { color: #ff5c85; }
.calc__note { font-size: 12px; line-height: 1.5; color: var(--muted-2); }

@media (prefers-reduced-motion: reduce) {
  .person__photo img { transform: none; transition: none; }
  .bar--live div { transition: none; clip-path: none; }
  .bar--live div::after { display: none; }
}

@media (max-width: 720px) {
  .person { padding: 0; }
  .person__photo { aspect-ratio: 4 / 5; }
  .person__body { padding: 0 20px 24px; margin-top: -28px; }
  .calc__head h3 { font-size: 19px; }
  .calc__results { grid-template-columns: 1fr; gap: 10px; }
  .calc__results div { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .calc__results strong { font-size: 19px; }
}
.lh-22 { --logo-h: 22px; }
.lh-30 { --logo-h: 30px; }
.lh-36 { --logo-h: 36px; }
.lh-38 { --logo-h: 38px; }
.lh-40 { --logo-h: 40px; }

/* Kompaktere Rechner-Karte */
.calc .calc__head h3 { font-size: 20px; }
.calc .calc__field { gap: 4px; }
.calc .bar { height: 34px; }
.calc .budget__row { gap: 8px; }
.calc .calc__results { padding-top: 14px; }
@media (max-width: 1024px) { .why > .reveal:first-child { position: static; padding-top: 0; } }
@media (max-width: 720px) { .calc { padding: 20px; } }

/* Anruf-Button im Header */
.btn--call { gap: 8px; padding: 12px 16px; color: var(--text); }
.btn--call svg { width: 18px; height: 18px; color: var(--brand-light); transition: transform .35s var(--ease); }
.btn--call:hover svg { transform: rotate(-12deg) scale(1.08); }
.btn--call:hover { border-color: var(--brand-light); background: rgba(158,68,234,.1); }
.btn--call__num { font-variant-numeric: tabular-nums; }
.header.is-scrolled .btn--call { padding-block: 10px; }
@media (max-width: 1180px) { .btn--call__num { display: none; } .btn--call { padding: 12px; } }
@media (max-width: 720px) { .header__cta .btn--call { display: none; } }

/* =========================================================
   Motion-Paket: Bento, Ablauf, Scroll-Headline, Icons,
   Körnung, Seitenübergänge, Formular, Newsletter
   ========================================================= */
body { overflow-x: clip; }

/* ---------- Leistungen: Bento-Grid ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.bento__item { display: flex; flex-direction: column; gap: 18px; padding: 22px; overflow: hidden; }
.bento--security { grid-column: span 2; grid-row: span 2; }
.bento--admin { grid-column: span 2; }
.bento--pm { grid-column: span 3; }
.bento__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 138px; padding: 14px; border-radius: 10px; border: 1px solid #1f1f1f; background: radial-gradient(80% 90% at 50% 40%, rgba(158,68,234,.13), transparent 70%), #101010; overflow: hidden; transition: border-color .35s ease; }
.bento__visual::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 16px 16px; mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 75%); pointer-events: none; }
.bento__item:hover .bento__visual { border-color: rgba(181,123,255,.35); }
.bento--security .bento__visual { flex: 1; min-height: 300px; }
.bento__body h3 { font-size: 20px; margin: 4px 0 6px; }
.bento__body p { font-size: 14px; color: var(--muted); }
.bento__body .service__num { display: block; }
.viz { position: relative; width: 100%; height: auto; overflow: visible; }
.viz--shield { max-width: 250px; }
.viz--rack { max-width: 360px; }
.viz--road, .viz--chat, .viz--list { max-width: 210px; }
.viz--timeline { max-width: 620px; }

/* Security: Schild mit Scan-Strahl */
.viz__shield { stroke: var(--brand-light); stroke-width: 2.5; stroke-linejoin: round; }
.viz__shield-fill { fill: rgba(158,68,234,.1); }
.viz__lines { stroke: rgba(181,123,255,.14); stroke-width: 1; }
.viz__scan { animation: vizScan 3.4s cubic-bezier(.45,0,.55,1) infinite; }
.viz__check { stroke: #fff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-visible .viz__check { animation: vizDraw 1s var(--ease) .7s forwards; }
.viz__ring { stroke: rgba(181,123,255,.3); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vizRing 3.4s ease-out infinite; }
.viz__ring--2 { animation-delay: 1.7s; }

/* Administration: Server-Rack */
.viz__unit > rect:first-child { fill: #171717; stroke: #2e2e2e; stroke-width: 1.5; }
.viz__led { fill: #3a3a3a; }
.viz__led--a { animation: vizLed 1.3s steps(1) infinite; }
.viz__led--b { animation: vizLed 2.1s steps(1) .4s infinite; }
.viz__led--c { animation: vizLed .9s steps(1) .2s infinite; }
.viz__bar { fill: var(--brand); transform-box: fill-box; transform-origin: left center; }
.viz__bar--a { animation: vizBar 2.6s ease-in-out infinite; }
.viz__bar--b { animation: vizBar 3.3s ease-in-out .5s infinite; }
.viz__bar--c { animation: vizBar 2.2s ease-in-out 1s infinite; }

/* Strategie: Roadmap */
.viz__road-base { stroke: #2c2c2c; stroke-width: 3; stroke-dasharray: 6 8; stroke-linecap: round; }
.viz__road { stroke: var(--brand-light); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: vizRoad 4.2s ease-in-out infinite; }
.viz__node { fill: #141414; stroke: var(--brand-light); stroke-width: 2.5; }
.viz__target { stroke: rgba(181,123,255,.45); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vizRing 2.1s ease-out infinite; }

/* Support: Chat */
.viz__bubble { fill: #1a1a1a; stroke: #333; stroke-width: 1.5; }
.viz__dot { fill: var(--brand-light); transform-box: fill-box; transform-origin: center; animation: vizBounce 1.2s ease-in-out infinite; }
.viz__dot--2 { animation-delay: .15s; }
.viz__dot--3 { animation-delay: .3s; }
.viz__reply rect { fill: rgba(158,68,234,.2); stroke: var(--brand-light); stroke-width: 1.5; }
.viz__reply path { stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.viz__reply { animation: vizReply 4.4s ease-in-out infinite; }

/* Projektmanagement: Timeline */
.viz__track { stroke: #2a2a2a; stroke-width: 4; stroke-linecap: round; }
.viz__fill { stroke: var(--brand-light); stroke-width: 4; stroke-linecap: round; transform-box: view-box; transform-origin: 30px 38px; animation: vizFill 6s ease-in-out infinite; }
.viz__ms circle { fill: #141414; stroke: #3a3a3a; stroke-width: 2.5; }
.viz__ms text { fill: var(--muted); font-family: var(--font-body); font-size: 15px; font-weight: 500; text-anchor: middle; }
.viz__ms--1 circle { animation: vizMs1 6s ease-in-out infinite; }
.viz__ms--2 circle { animation: vizMs2 6s ease-in-out infinite; }
.viz__ms--3 circle { animation: vizMs3 6s ease-in-out infinite; }
.viz__ms--4 circle { animation: vizMs4 6s ease-in-out infinite; }

/* Compliance: Checkliste */
.viz__row rect { fill: #171717; stroke: #3a3a3a; stroke-width: 1.5; }
.viz__row line { stroke: #2a2a2a; stroke-width: 7; stroke-linecap: round; }
.viz__tick { stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.viz__row--1 .viz__tick { animation: vizTick1 4.8s ease-in-out infinite; }
.viz__row--2 .viz__tick { animation: vizTick2 4.8s ease-in-out infinite; }
.viz__row--3 .viz__tick { animation: vizTick3 4.8s ease-in-out infinite; }

/* Animationen erst laufen lassen, wenn die Kachel sichtbar ist */
.bento__item:not(.is-visible) .viz * { animation-play-state: paused !important; }

@keyframes vizDraw { to { stroke-dashoffset: 0; } }
@keyframes vizScan { 0% { transform: translateY(0); } 100% { transform: translateY(270px); } }
@keyframes vizRing { 0% { transform: scale(.72); opacity: .9; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes vizLed { 0%, 100% { fill: #3a3a3a; } 50% { fill: #b57bff; } }
@keyframes vizBar { 0% { transform: scaleX(.25); } 50% { transform: scaleX(.95); } 100% { transform: scaleX(.25); } }
@keyframes vizRoad { 0% { stroke-dashoffset: 1; opacity: 1; } 60%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vizBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes vizReply { 0%, 38% { opacity: 0; transform: translateY(8px); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes vizFill { 0% { transform: scaleX(0); opacity: 1; } 80%, 94% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes vizMs1 { 0%, 95% { fill: #9e44ea; stroke: #d2a9ff; } 100% { fill: #141414; stroke: #3a3a3a; } }
@keyframes vizMs2 { 0%, 26% { fill: #141414; stroke: #3a3a3a; } 28%, 95% { fill: #9e44ea; stroke: #d2a9ff; } 100% { fill: #141414; stroke: #3a3a3a; } }
@keyframes vizMs3 { 0%, 52% { fill: #141414; stroke: #3a3a3a; } 54%, 95% { fill: #9e44ea; stroke: #d2a9ff; } 100% { fill: #141414; stroke: #3a3a3a; } }
@keyframes vizMs4 { 0%, 79% { fill: #141414; stroke: #3a3a3a; } 81%, 95% { fill: #9e44ea; stroke: #d2a9ff; } 100% { fill: #141414; stroke: #3a3a3a; } }
@keyframes vizTick1 { 0% { stroke-dashoffset: 1; opacity: 1; } 12%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vizTick2 { 0%, 28% { stroke-dashoffset: 1; opacity: 1; } 40%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vizTick3 { 0%, 56% { stroke-dashoffset: 1; opacity: 1; } 68%, 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ---------- Ablauf: beim Scrollen fixiert ---------- */
.steps__list { list-style: none; margin: 0; padding: 0; }
.ablauf.is-scrolly { padding-block: 0; }
.ablauf.is-scrolly .ablauf__pin { height: 250vh; }
.ablauf.is-scrolly .ablauf__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 24px) 48px; }
.ablauf.is-scrolly .ablauf__sticky > .container { width: min(var(--container), 100% - 48px); }
.ablauf.is-scrolly .step { opacity: .32; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--ease), border-color .45s ease, box-shadow .45s ease; }
.ablauf.is-scrolly .step.is-done { opacity: .78; transform: none; }
.ablauf.is-scrolly .step.is-active { opacity: 1; transform: translateY(-8px); border-color: rgba(181,123,255,.6); box-shadow: 0 0 0 1px rgba(181,123,255,.2), 0 22px 60px rgba(158,68,234,.22); }
.ablauf.is-scrolly .step.is-active .step__num { filter: drop-shadow(0 0 14px rgba(181,123,255,.8)); }
.ablauf.is-scrolly .steps__fill { transition: transform .15s linear; }

/* ---------- Scroll-Headline ---------- */
.js .why .reveal h2.scrub { clip-path: none !important; }
.scrub .sw { color: #3b3b3b; transition: color .35s ease; }
.scrub .sw.is-lit { color: var(--text); }

/* ---------- Icons zeichnen sich ---------- */
.js .icon-circle svg [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .25s; }
.js .is-visible .icon-circle svg [data-draw], .js .icon-circle.is-drawn svg [data-draw] { stroke-dashoffset: 0; }
.card:hover .icon-circle svg [data-draw], .point:hover .icon-circle svg [data-draw] { animation: iconRedraw .9s var(--ease); }
@keyframes iconRedraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- Film-Körnung ---------- */
body::after { content: ""; position: fixed; inset: 0; z-index: 85; pointer-events: none; background-image: url("assets/noise.png"); background-size: 128px 128px; opacity: .045; }

/* ---------- Seitenübergänge ---------- */
/* Sanftes Einblenden der Unterseiten (ersetzt View Transitions: in Edge fehleranfällig) */
.legal, .status-page { animation: vtIn .45s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Formular: schwebende Labels, Erfolg ---------- */
.field--float { position: relative; display: block; }
.field--float input, .field--float textarea { padding: 22px 14px 8px; }
.field--float textarea { padding-top: 28px; }
.field--float label { position: absolute; left: 15px; top: 15px; font-size: 15px; font-weight: 500; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform .22s var(--ease), color .22s ease; }
.field--float input:focus + label, .field--float input:not(:placeholder-shown) + label,
.field--float textarea:focus + label, .field--float textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); color: var(--brand-light); }
.field--float input:not(:focus):not(:placeholder-shown):invalid { border-color: rgba(255,92,133,.7); }
.field--float input:not(:focus):not(:placeholder-shown):valid, .field--float textarea:not(:focus):not(:placeholder-shown):valid { border-color: rgba(181,123,255,.35); }
.form { position: relative; }
.form__success { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--bg-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; text-align: center; opacity: 0; transition: opacity .35s ease; }
.form__success[hidden] { display: none; }
.form.is-sent .form__success { opacity: 1; }
.form__success-icon { width: 68px; height: 68px; }
.form__success-icon circle { fill: none; stroke: var(--brand); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.form__success-icon path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.form.is-sent .form__success-icon circle { animation: vizDraw .7s var(--ease) .1s forwards; }
.form.is-sent .form__success-icon path { animation: vizDraw .5s var(--ease) .65s forwards; }
.form__success h3 { font-size: 22px; }
.form__success p { color: var(--muted); font-size: 15px; max-width: 380px; }

/* ---------- Newsletter ---------- */
.newsletter__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: 40px; background: radial-gradient(120% 140% at 0% 0%, rgba(158,68,234,.2), transparent 55%), var(--bg-2); }
.newsletter__text h2 { font-size: clamp(26px, 3vw, 34px); margin: 12px 0; }
.newsletter__text p { color: var(--muted); font-size: 16px; }
.newsletter__form { display: flex; flex-direction: column; gap: 14px; }
.newsletter__topics { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter__topics legend { font-size: 14px; font-weight: 600; margin-bottom: 10px; padding: 0; }
.chip { position: relative; display: inline-flex; cursor: pointer; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.chip span::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: #3a3a3a; transition: background .2s ease, box-shadow .2s ease; }
.chip input:checked + span { color: var(--text); border-color: rgba(181,123,255,.6); background: rgba(158,68,234,.14); }
.chip input:checked + span::before { background: var(--brand-light); box-shadow: 0 0 0 4px rgba(181,123,255,.2); }
.chip input:focus-visible + span { outline: 2px solid var(--brand-light); outline-offset: 2px; }
.newsletter__row { display: flex; gap: 10px; align-items: stretch; }
.newsletter__row .field { flex: 1; min-width: 0; }
.newsletter__row .btn { flex-shrink: 0; }
.newsletter__legal { font-size: 12px; line-height: 1.5; color: var(--muted-2); }
.newsletter__status { font-size: 14px; line-height: 1.5; min-height: 1.5em; }
.newsletter__status.is-ok { color: var(--brand-light); }
.newsletter__status.is-error { color: #ff5c85; }
.newsletter__form.is-loading button[type="submit"] { opacity: .7; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .viz * { animation: none !important; }
  .viz__check, .viz__road, .viz__tick { stroke-dashoffset: 0; }
  .viz__fill { transform: none; }
  .viz__reply { opacity: 1; }
  .scrub .sw { color: var(--text); }
  .js .icon-circle svg [data-draw] { stroke-dashoffset: 0; transition: none; }
  body::after { display: none; }
  .legal, .status-page { animation: none; }
  .form__success-icon circle, .form__success-icon path { stroke-dashoffset: 0; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento--security { grid-column: span 2; grid-row: auto; }
  .bento--security .bento__visual { min-height: 230px; }
  .bento--admin, .bento--pm, .bento--compliance { grid-column: span 2; }
  .newsletter__card { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; gap: 12px; }
  .bento__item, .bento--security, .bento--admin, .bento--pm, .bento--compliance { grid-column: auto; }
  .bento__item { padding: 18px; }
  .bento__visual { min-height: 120px; }
  .bento--security .bento__visual { min-height: 200px; }
  .viz--timeline text { display: none; }
  .newsletter__card { padding: 24px 20px; }
  .newsletter__row { flex-direction: column; }
  .newsletter__row .btn { width: 100%; }
  .form__success { padding: 20px; }
}

/* Status-Seiten (Newsletter) */
.status-page { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding-block: 96px; max-width: 640px; }
.status-page h1 { font-size: clamp(30px, 4vw, 40px); }
.status-page p { color: var(--muted); font-size: 17px; }
.status__icon { width: 72px; height: 72px; }
.status__icon circle { fill: none; stroke: var(--brand); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; animation: vizDraw .8s var(--ease) .1s forwards; }
.status__icon path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: vizDraw .5s var(--ease) .7s forwards; }
.status__icon--muted circle { stroke: #555; }
@media (prefers-reduced-motion: reduce) { .status__icon circle, .status__icon path { animation: none; stroke-dashoffset: 0; } }

/* Feinschliff: größeres Schild, kräftigere Ablauf-Karten im fixierten Modus */
.viz--shield { max-width: 340px; }
.ablauf.is-scrolly .section-head { margin-bottom: 64px; }
.ablauf.is-scrolly .step { padding: 34px 30px; min-height: 280px; gap: 16px; }
.ablauf.is-scrolly .step__num { font-size: 48px; }
.ablauf.is-scrolly .step h3 { font-size: 24px; }
.ablauf.is-scrolly .step p { font-size: 16px; }
.ablauf.is-scrolly .steps__rail { top: -30px; }
@media (max-width: 720px) { .viz--shield { max-width: 210px; } .bento--security .bento__visual { min-height: 0; } }
/* Nach dem Zeichnen: Strichmuster entfernen (verhindert Lücken an Icon-Linien) */
.js .icon-circle.is-drawn-done svg [data-draw] { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
.card:hover .icon-circle.is-drawn-done svg [data-draw], .point:hover .icon-circle.is-drawn-done svg [data-draw] { stroke-dasharray: 1; }


/* =========================================================
   Review-Korrekturen (Barrierefreiheit, Kontraste, Tablet-Menü)
   ========================================================= */
:root { --muted-2: #8a8a8a; }
:focus-visible { border-radius: 0; }
.faq__item summary:focus-visible { outline-offset: -4px; }
.cc-reopen[hidden] { display: none !important; }
.nav a { white-space: nowrap; }
.legal p a, .consent a, .newsletter__legal a, .form__hint a { text-decoration: underline; text-underline-offset: 2px; }
.scrub .sw { color: #666; }
.bar__fee { background: #d6194f; }
.ablauf.is-scrolly .step { opacity: .55; }
.service__num { color: #6a6a6a; }
.field--float input:focus + label, .field--float input:not(:placeholder-shown) + label,
.field--float textarea:focus + label, .field--float textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.85); }
.form__hint.is-warn { color: var(--text); }
.status__note { color: var(--muted); font-size: 15px; min-height: 1.5em; }

/* Headline: statisch aufgeteilt, Verzögerung per Klasse (CSP-konform) */
.split .w0 > span { --i: 0; } .split .w1 > span { --i: 1; } .split .w2 > span { --i: 2; }
.split .w3 > span { --i: 3; } .split .w4 > span { --i: 4; } .split .w5 > span { --i: 5; }
.split .w6 > span { --i: 6; } .split .w7 > span { --i: 7; } .split .w8 > span { --i: 8; }

/* Burger-Menü schon bis 900 px (Tablet hochkant) */
@media (max-width: 900px) {
  .nav { display: flex; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; background: rgba(13,13,13,.97); padding: 12px 20px 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s; z-index: 40; }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .nav a { padding: 16px 4px; border-bottom: 1px solid #1f1f1f; font-size: 18px; font-family: var(--font-display); font-weight: 700; }
  .nav a::after { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 720px) {
  .nav { visibility: hidden; }
  .nav.is-open { visibility: visible; }
}

/* =========================================================
   Performance: günstigere Effekte, Animationen außer Sicht pausieren
   ========================================================= */
/* Leiterbahn-Impulse: statt drop-shadow-Filter (teuer pro Frame) breiterer, halbtransparenter Strich */
.circuit__pulse path { filter: none; stroke-width: 3; stroke: rgba(210,169,255,.95); }
/* Lichtflächen: kein Blur-Filter, weicher Verlauf übernimmt das */
.orb { filter: none; }
.orb--1 { background: radial-gradient(circle, rgba(158,68,234,.6), rgba(158,68,234,.18) 38%, rgba(158,68,234,0) 70%); }
.orb--2 { background: radial-gradient(circle, rgba(109,31,208,.55), rgba(109,31,208,.16) 38%, rgba(109,31,208,0) 70%); }
.orb--3 { background: radial-gradient(circle, rgba(181,123,255,.4), rgba(181,123,255,.12) 38%, rgba(181,123,255,0) 70%); }
/* Außerhalb des Sichtbereichs alles anhalten */
.is-offscreen *, .is-offscreen::before, .is-offscreen::after { animation-play-state: paused !important; }
.is-offscreen .marquee__track { animation-play-state: paused !important; }

/* Rechtsseiten im neuen Design: Kopfbereich, Inhaltsverzeichnis, Abschnitte */
.page-hero { position: relative; overflow: hidden; padding: 72px 0 52px; border-bottom: 1px solid #1f1f1f; isolation: isolate; }
.page-hero::before { content: ""; position: absolute; z-index: -1; width: 720px; height: 720px; left: -160px; top: -420px; background: radial-gradient(circle, rgba(158,68,234,.42), rgba(158,68,234,0) 65%); pointer-events: none; }
.page-hero::after { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -120px; top: -300px; background: radial-gradient(circle, rgba(109,31,208,.38), rgba(109,31,208,0) 65%); pointer-events: none; }
.page-hero__inner > * { max-width: 820px; }
.page-hero__inner > .eyebrow, .page-hero__inner > .page-hero__meta { max-width: none; }
.page-hero h1 { font-size: clamp(30px, 8.2vw, 60px); margin: 16px 0 16px; overflow-wrap: anywhere; padding-bottom: .08em; background: linear-gradient(180deg, #fff 30%, #c9a6ff 130%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.page-hero__lead { color: var(--muted); font-size: 17px; max-width: 64ch; }
.page-hero__meta { display: inline-flex; margin-top: 22px; padding: 6px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13px; color: var(--muted); background: rgba(31,31,31,.5); }

.legal-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; padding-block: 56px 96px; align-items: start; }
.legal-wrap--single { grid-template-columns: minmax(0, 760px); }
.legal-wrap .legal { padding-block: 0; max-width: 760px; width: 100%; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; padding: 20px 18px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 14px; }
.legal-toc strong { display: block; margin-bottom: 12px; font-family: var(--font-display); font-size: 15px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 2px; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; padding: 6px 8px; border-radius: 6px; color: var(--muted); line-height: 1.35; transition: background .2s ease, color .2s ease; }
.legal-toc a::before { content: counter(toc); flex: none; min-width: 20px; color: var(--brand-light); font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: #fff; background: var(--brand-tint); }

.legal-wrap .legal h2 { position: relative; margin-top: 44px; padding-top: 28px; font-size: clamp(20px, 2.4vw, 24px); border-top: 1px solid #1f1f1f; }
.legal-wrap .legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-wrap .legal p { font-size: 16px; line-height: 1.7; }
.legal-wrap .legal p a { color: var(--brand-light); }
.footer a[aria-current="page"] { color: var(--brand-light); }

@media (max-width: 1024px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 28px; padding-block: 40px 72px; }
  .legal-toc { position: static; max-height: none; }
  .legal-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
}
@media (max-width: 720px) {
  .page-hero { padding: 48px 0 36px; }
  .legal-toc ol { grid-template-columns: 1fr; }
}