/* ═══════════════════════════════════════════════════════════════════
   LUCIOUS DESIGN SYSTEM v3 — Dark-Premium
   Handfest · verlässlich · europäisch-modern
   Selbst gehostete Fonts (OFL), kein CDN. Analytics nur nach Consent (consent.js).
   Wiederverwendbar für alle künftigen Landingpages & Funnels.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farb-Tokens */
  --bg: #0b0d10;
  --bg-2: #101319;
  --bg-3: #161b23;
  --surface: rgba(255, 255, 255, .03);
  --surface-2: rgba(255, 255, 255, .055);
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --ink: #f4f3f0;
  --ink-2: #b9bdc4;
  --ink-3: #8b93a0; /* ≥5:1 auf --bg — auch Kleintext (12.5–13.5px) bleibt WCAG-AA-sicher */
  --accent: #e8763a;
  --accent-2: #f0975f;
  --accent-deep: #c2541b;
  --accent-glow: rgba(232, 118, 58, .14);
  --ok: #4cc38a;
  /* Geometrie */
  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--accent-deep); color: #fff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }

h1, h2, h3 { overflow-wrap: break-word; font-weight: 750; letter-spacing: -0.02em; }

/* ── Scroll-Reveal (JS togglet .in) ─────────────────────────────── */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; } .rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; } .rv.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ── Header ─────────────────────────────────────────────────────── */
header.site {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 13, 16, .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
header.site .wrap { display: flex; justify-content: space-between; align-items: center; height: 72px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand .mark {
  width: 36px; height: 36px; flex: none; display: block;
  filter: drop-shadow(0 0 14px rgba(232, 118, 58, .3));
}
.brand .name { color: var(--ink); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand .name small { display: block; font-weight: 450; font-size: 11px; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
nav.main { display: flex; gap: 30px; align-items: center; }
.nav-links { display: flex; gap: 30px; align-items: center; }
nav.main a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 520; transition: color .15s; }
nav.main a:not(.btn):hover { color: var(--ink); }

/* Hamburger — nur ≤860px sichtbar (siehe Mobile-Header) */
.nav-toggle {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center; padding: 0;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.nav-toggle .x { display: none; }
nav.main.open .nav-toggle .x { display: block; }
nav.main.open .nav-toggle .lines { display: none; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff !important; text-decoration: none;
  padding: 14px 28px; border-radius: 12px;
  font-weight: 650; font-size: 15.5px; letter-spacing: .005em;
  border: none; cursor: pointer;
  box-shadow: 0 8px 28px rgba(194, 84, 27, .35), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 12px 36px rgba(194, 84, 27, .45), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.sm { padding: 10px 20px; font-size: 14px; border-radius: 10px; }
.btn.ghost {
  background: var(--surface); color: var(--ink) !important;
  border: 1px solid var(--line-strong); box-shadow: none;
}
.btn.ghost:hover { background: var(--surface-2); border-color: rgba(255,255,255,.28); filter: none; }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }

/* ── Eyebrow / Badge ────────────────────────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
  background: var(--accent-glow);
  border: 1px solid rgba(232, 118, 58, .25);
  padding: 7px 16px; border-radius: 999px;
  margin-bottom: 26px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* ── Hero ───────────────────────────────────────────────────────── */
.hero {
  position: relative; text-align: center;
  padding: 110px 0 0;
  background:
    radial-gradient(900px 480px at 50% -12%, rgba(232, 118, 58, .13), transparent 62%),
    radial-gradient(640px 300px at 12% 8%, rgba(232, 118, 58, .05), transparent 55%),
    var(--bg);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(720px 420px at 50% 0%, rgba(0,0,0,.5), transparent 70%);
  -webkit-mask-image: radial-gradient(720px 420px at 50% 0%, rgba(0,0,0,.5), transparent 70%);
}
.hero .wrap { position: relative; }
.hero h1 {
  font-size: clamp(38px, 6.2vw, 72px); line-height: 1.04; letter-spacing: -0.035em;
  font-weight: 800; max-width: 960px; margin: 0 auto;
}
.hero h1 em { font-style: normal; background: linear-gradient(110deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub {
  margin: 28px auto 0; font-size: clamp(17px, 2vw, 20.5px); color: var(--ink-2);
  max-width: 660px; line-height: 1.65; font-weight: 430;
}
.hero .cta-row { margin-top: 40px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .cta-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); }

/* Stat-Leiste */
.statbar {
  margin-top: 76px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.statbar > div { padding: 30px 14px 36px; text-align: center; }
.statbar > div + div { border-left: 1px solid var(--line); }
.statbar b { display: block; font-size: clamp(21px, 2.4vw, 30px); font-weight: 780; letter-spacing: -0.02em; background: linear-gradient(180deg, var(--ink), #cfd3d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Bewusst NUR direkte Kinder: `.statbar span` traf auch die Hilfs-Spans
   des Ziffern-Rolls INNERHALB des <b> und hat die 30px-Zahl waehrend des
   Laufs auf 13,5px zusammenschrumpfen lassen. */
.statbar > div > span { font-size: 13.5px; color: var(--ink-3); font-weight: 480; }
@media (max-width: 760px) {
  .statbar { grid-template-columns: 1fr 1fr; }
  .statbar > div:nth-child(3) { border-left: none; }
  .statbar > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .statbar > div { padding: 20px 12px; }
}

/* ── Sektionen ──────────────────────────────────────────────────── */
section { padding: 104px 0; position: relative; }
section.tint { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 56px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.12; margin-bottom: 18px; }
h2 em { font-style: normal; background: linear-gradient(110deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: 18px; color: var(--ink-2); font-weight: 430; }

/* ── Karten ─────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: rgba(232, 118, 58, .35); background: var(--surface-2); }
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,118,58,.5), transparent);
  opacity: 0; transition: opacity .25s;
}
.card:hover::before { opacity: 1; }
.card h3 { font-size: 18.5px; margin-bottom: 9px; letter-spacing: -0.015em; }
.card p { color: var(--ink-2); font-size: 15px; line-height: 1.62; }
.card .kpi { color: var(--accent-2); font-weight: 680; }

.icon-chip {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(232,118,58,.16), rgba(232,118,58,.05));
  border: 1px solid rgba(232,118,58,.25);
  display: grid; place-items: center;
}
.icon-chip svg { width: 22px; height: 22px; stroke: var(--accent-2); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.x-chip {
  width: 30px; height: 30px; border-radius: 9px; margin-bottom: 16px;
  background: rgba(214, 69, 69, .12); border: 1px solid rgba(214, 69, 69, .3);
  color: #e07a7a; font-size: 13px; font-weight: 800;
  display: grid; place-items: center;
}

/* ── Prozess / Timeline ─────────────────────────────────────────── */
.steps { counter-reset: step; }
.step { position: relative; padding: 28px 26px; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  background: linear-gradient(110deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 16px;
}
.step .when { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 7px; }
.step b { display: block; font-size: 17.5px; margin-bottom: 8px; letter-spacing: -0.015em; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* ── Marquee (Use-Cases) ────────────────────────────────────────── */
.marquee { overflow: hidden; position: relative; padding: 8px 0; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: scroll 42s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.marquee + .marquee .track { animation-direction: reverse; animation-duration: 50s; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .track { animation: none; flex-wrap: wrap; width: auto; } }
.pill {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 20px;
  font-size: 14px; color: var(--ink-2); font-weight: 500; white-space: nowrap;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ── Preise ─────────────────────────────────────────────────────── */
.price-cards { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 880px) { .price-cards { grid-template-columns: 1.12fr 1fr 1fr; } }
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 30px; display: flex; flex-direction: column; position: relative;
}
.pc-badge {
  position: absolute; top: -13px; left: 26px;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(194, 84, 27, .4);
}
.price-card .btn { margin-top: 22px; justify-content: center; }
.price-card .fine { margin-top: 14px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.price-card.featured {
  background: linear-gradient(165deg, rgba(232,118,58,.13), rgba(232,118,58,.03) 55%), var(--bg-3);
  border-color: rgba(232,118,58,.4);
  box-shadow: 0 24px 70px rgba(194, 84, 27, .16);
}
.price-card .label { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--ink-3); }
.price-card.featured .label { color: var(--accent-2); }
.price-card .value { font-size: clamp(27px, 3vw, 36px); font-weight: 800; letter-spacing: -0.025em; margin: 14px 0 10px; }
.price-card p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; }
.compare {
  margin-top: 26px; padding: 20px 24px; border-radius: var(--radius-sm);
  background: var(--accent-glow); border: 1px solid rgba(232,118,58,.22);
  color: var(--ink-2); font-size: 15px;
}
.compare b { color: var(--ink); }

/* ── Versprechen-Band ───────────────────────────────────────────── */
.promise-band {
  background:
    radial-gradient(720px 320px at 50% 120%, rgba(232,118,58,.16), transparent 60%),
    var(--bg-2);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-align: center;
}
.promise-band blockquote {
  font-size: clamp(22px, 3.1vw, 34px); font-weight: 720; line-height: 1.35;
  letter-spacing: -0.02em; max-width: 880px; margin: 0 auto;
}
.promise-band blockquote em { font-style: normal; background: linear-gradient(110deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Ausfahrt zur Schulung ──────────────────────────────────────────
   Absichtlich das leiseste Element der Seite: kein eigener Hintergrund-
   verlauf, keine Kacheln, kein Preis. Es steht zwischen zwei starken
   Blöcken und darf ihnen die Aufmerksamkeit nicht wegnehmen — es fängt
   nur den Leser auf, der gerade beschlossen hat, dass das Projekt (noch)
   nichts für ihn ist. */
.offramp { padding: 40px 0; }
.offramp-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(232,118,58,.06), transparent 45%);
  padding: 26px 30px;
}
.offramp-kicker {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 9px;
}
.offramp h2 {
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.3; letter-spacing: -0.015em;
  margin-bottom: 7px; max-width: 30ch;
}
.offramp p { color: var(--ink-2); font-size: 15.5px; max-width: 62ch; margin: 0; }
.offramp-cta {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  /* Diese Seite setzt kein globales a{text-decoration:none} — jede Komponente
     hebt die Browser-Unterstreichung selbst auf. Ohne diese Zeile bekommt der
     umrandete Knopf einen Unterstrich und sieht nach Versehen aus. */
  text-decoration: none;
  font-weight: 700; font-size: 16px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 22px;
  transition: border-color .14s ease, transform .14s ease;
}
.offramp-cta:hover { border-color: var(--accent); transform: translateX(2px); }
@media (max-width: 720px) {
  .offramp-inner { padding: 22px; }
  .offramp-cta { width: 100%; justify-content: center; }
}

/* ── FAQ ────────────────────────────────────────────────────────── */
.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 12px;
  transition: border-color .2s;
}
.faq details[open] { border-color: rgba(232,118,58,.3); background: var(--surface-2); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 24px;
  font-weight: 620; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 300; color: var(--accent-2); transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 24px 22px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }

/* ── Kontakt ────────────────────────────────────────────────────── */
.contact-grid { display: grid; gap: 48px; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 5fr 6fr; } }
.contact-side p { color: var(--ink-2); margin-bottom: 16px; max-width: 460px; font-size: 16px; }
.contact-side .direct { margin-top: 28px; font-size: 15.5px; color: var(--ink-2); }
.contact-side .direct a { color: var(--accent-2); font-weight: 620; text-decoration: none; }
.trustlist { list-style: none; margin-top: 28px; display: grid; gap: 13px; }
.trustlist li { padding-left: 32px; position: relative; color: var(--ink-2); font-size: 15px; }
.trustlist li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 21px; height: 21px; border-radius: 7px;
  background: rgba(76, 195, 138, .13); border: 1px solid rgba(76, 195, 138, .3);
  color: var(--ok); font-size: 11px; font-weight: 800;
  display: grid; place-items: center;
}
.form-card {
  background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 38px 34px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
form .row { display: grid; gap: 16px; margin-bottom: 16px; }
@media (min-width: 560px) { form .row.two { grid-template-columns: 1fr 1fr; } }
label { font-weight: 580; font-size: 13.5px; display: block; margin-bottom: 7px; color: var(--ink-2); }
label .opt { font-weight: 400; color: var(--ink-3); }
input, textarea {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line-strong); border-radius: 10px;
  font: inherit; font-size: 15.5px;
  background: rgba(255,255,255,.04); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--ink-3); margin: 18px 0 22px; line-height: 1.6; }
.consent input { width: auto; margin-top: 3px; accent-color: var(--accent); }
.consent a { color: var(--accent-2); }
.form-card .btn { width: 100%; justify-content: center; }
.form-status { margin-top: 16px; font-weight: 600; display: none; font-size: 15px; }
.form-status.ok { color: var(--ok); display: block; }
.form-status.err { color: #e07a7a; display: block; }
/* Honeypot: für Menschen unsichtbar (off-screen, nicht fokussierbar), Bots
   füllen es aus → Submit wird verworfen. KEIN display:none (manche Bots
   überspringen ausgeblendete Felder). */
.hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer.site { background: var(--bg-2); border-top: 1px solid var(--line); padding: 44px 0; font-size: 14px; color: var(--ink-3); }
footer.site .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--ink-3); text-decoration: none; }
footer.site a:hover { color: var(--ink-2); }

/* ── Rechtsseiten ───────────────────────────────────────────────── */
.legal { padding: 72px 0 100px; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.025em; margin-bottom: 28px; }
.legal h2 { font-size: 19px; margin: 32px 0 10px; }
.legal p { max-width: 720px; color: var(--ink-2); }
.legal a { color: var(--accent-2); }
.todo { background: rgba(240, 200, 60, .12); border: 1px solid rgba(240, 200, 60, .3); color: #e6c860; padding: 2px 7px; border-radius: 5px; }

/* ── Nur-Screenreader-Inhalt (a11y) ─────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Skip-Link (a11y) ───────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── Grain-Textur (Enterprise-Finish) ───────────────────────────── */
/* Nur auf Geräten mit feinem Zeiger (Desktop): der bildschirmweite
   mix-blend-mode-Overlay kostet auf Mobil-GPUs Repaint-Budget beim
   Scrollen und ist dort bei 0.35 Opacity ohnehin kaum sichtbar. */
@media (hover: hover) and (pointer: fine) {
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
    opacity: .35; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
/* header.site NICHT hier hineinnehmen: die Regel würde sein position:sticky +
   z-index:100 (Zeile ~66) überschreiben — dann paintet <main> ÜBER dem
   aufgeklappten Mobile-Nav-Panel (gleiches z-index, späteres DOM gewinnt). */
main, footer.site { position: relative; z-index: 2; }

/* ── Hero-Flow-Visual (System-Panel) ────────────────────────────── */
.flow-card {
  margin: 64px auto 0; max-width: 880px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--line-strong);
  border-radius: 20px; padding: 30px 34px;
  box-shadow: 0 40px 110px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  text-align: left;
}
.flow-card .fc-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 24px;
  font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.flow-card .fc-head .dots { display: flex; gap: 6px; margin-right: 8px; }
.flow-card .fc-head .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.flow-card .fc-head .dots i:first-child { background: rgba(232,118,58,.6); }
.flow-row { display: grid; grid-template-columns: 1fr auto 1.1fr auto 1fr; gap: 14px; align-items: center; }
.flow-node {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; padding: 18px 20px;
  min-height: 118px; display: flex; flex-direction: column; justify-content: center;
}
.flow-node .t {
  display: block; font-size: 10.5px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-3); margin-bottom: 8px;
}
.flow-node .v { display: block; font-size: 14px; font-weight: 560; color: var(--ink); line-height: 1.5; }
.flow-node .s { display: block; margin-top: 8px; font-size: 12px; font-weight: 500; color: var(--accent-2); }
.flow-node.core {
  background: linear-gradient(150deg, rgba(232,118,58,.16), rgba(232,118,58,.04));
  border-color: rgba(232,118,58,.4);
  box-shadow: 0 0 38px rgba(232,118,58,.12);
}
.flow-node.core .t { color: var(--accent-2); }
.flow-arr { color: var(--ink-3); font-size: 17px; text-align: center; }
.flow-out { display: grid; gap: 9px; }
.flow-out .mini {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 550; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 9px 13px;
}
.flow-out .mini::before { content: "✓"; color: var(--ok); font-size: 11px; font-weight: 800; }
@media (max-width: 760px) {
  .flow-row { grid-template-columns: 1fr; }
  .flow-arr { transform: rotate(90deg); padding: 2px 0; }
  .flow-card { padding: 24px 22px; }
}

/* ── Prinzipien-Strip ───────────────────────────────────────────── */
.principles { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
@media (min-width: 880px) { .principles { grid-template-columns: 1fr 1fr 1fr; } }
.principle { padding: 34px 32px; position: relative; }
@media (min-width: 880px) { .principle + .principle { border-left: 1px solid var(--line); } }
@media (max-width: 879px) { .principle + .principle { border-top: 1px solid var(--line); } }
.principle .num {
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  background: linear-gradient(110deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 14px;
}
.principle b { display: block; font-size: 17px; margin-bottom: 8px; letter-spacing: -0.015em; }
.principle p { font-size: 14.5px; color: var(--ink-2); }

/* ── Abschluss-CTA-Band ─────────────────────────────────────────── */
.cta-band {
  text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(800px 380px at 50% 130%, rgba(232,118,58,.2), transparent 62%),
    var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 110px 0;
}
.cta-band h2 { font-size: clamp(30px, 4.4vw, 52px); max-width: 820px; margin: 0 auto 18px; }
.cta-band p { color: var(--ink-2); font-size: 17.5px; max-width: 560px; margin: 0 auto 36px; }

/* ── Enterprise-Footer ──────────────────────────────────────────── */
footer.site { padding: 0; }
.footer-main { padding: 64px 0 48px; display: grid; gap: 44px; }
/* Fünf Spalten seit der Leiter-Spalte „Selbst anfangen" (Audit 05.08.2026, C-6).
   Das Raster ist explizit — eine fünfte Spalte ohne diese Zeile wäre in eine
   zweite Reihe gerutscht. Zwischenstufe bei 880–1100 px: die schmalen Listen
   teilen sich zwei Reihen, statt auf ~120 px gequetscht zu werden. */
@media (min-width: 880px) { .footer-main { grid-template-columns: 2fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-main { grid-template-columns: 2fr 1fr 1fr 1fr 1.2fr; } }
.footer-main .fbrand p { margin-top: 16px; font-size: 14px; color: var(--ink-3); max-width: 300px; line-height: 1.65; }
.footer-main h4 { font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.footer-main ul { list-style: none; display: grid; gap: 11px; }
.footer-main a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; transition: color .15s; }
.footer-main a:hover { color: var(--ink); }
.footer-meta {
  border-top: 1px solid var(--line); padding: 22px 0;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-3);
}
/* Cookie-Einstellungen-Link im Footer (Button als Link gestylt) */
.cookie-settings {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
  text-decoration-color: var(--line-strong); transition: color .15s;
}
.cookie-settings:hover { color: var(--ink); text-decoration-color: var(--accent); }
.footer-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.fbadge {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 13px;
}

/* ── Mobile-Header: Hamburger-Drawer statt verschwindender Links ── */
@media (max-width: 860px) {
  nav.main { gap: 10px; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0c0e12; /* opak — bei Transparenz scheint Hero-Text durchs Panel */
    border-bottom: 1px solid var(--line);
    padding: 6px 28px 18px;
    box-shadow: 0 34px 70px rgba(0, 0, 0, .55);
  }
  nav.main.open .nav-links { display: flex; }
  .nav-links a:not(.btn) { display: block; padding: 14px 2px; font-size: 16px; border-bottom: 1px solid var(--line); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links a:not(.btn):last-child { border-bottom: none; }
}
@media (max-width: 560px) {
  .brand .name small { display: none; }
  .brand .name { font-size: 15px; white-space: nowrap; }
  .brand { gap: 10px; }
  .brand .mark { width: 30px; height: 30px; }
  header.site .wrap { height: 62px; padding: 0 18px; }
  nav.main { gap: 8px; }
  nav.main > .btn.sm { padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .nav-toggle { width: 38px; height: 38px; }
  .nav-links { padding: 6px 18px 16px; }
  section { padding: 72px 0; }
  .hero { padding-top: 72px; }
  .hero .cta-row .btn { width: 100%; justify-content: center; }
}

/* ═══ Unterseiten (Leistungen-Cluster) ═══ */
/* Breadcrumb */
.breadcrumb { padding-top: 26px; padding-bottom: 0; font-size: 14px; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-2); }
.breadcrumb span[aria-current] { color: var(--ink); }

/* Kompakter Hero für Unterseiten (kein riesiger Top-Abstand) */
.hero.compact { padding-top: 48px; }
.hero.compact h1 { font-size: clamp(32px, 4.6vw, 52px); }

/* Lesbare Artikel-Textspalte (linksbündig, schmal) */
.article { max-width: 720px; margin: 0 auto; text-align: left; }
.article h2 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; margin: 38px 0 14px; }
.article h2:first-child { margin-top: 0; }
.article p { color: var(--ink-2); line-height: 1.75; font-size: 17px; margin: 0 0 16px; }
.article ul, .article ol { color: var(--ink-2); line-height: 1.75; font-size: 17px; padding-left: 22px; margin: 0 0 16px; }
.article li { margin: 0 0 8px; }

/* Klickbare Karte (ganze Fläche verlinkt) */
a.linkcard { text-decoration: none; color: inherit; display: block; transition: border-color .2s, transform .2s; }
a.linkcard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.card .more, a.linkcard .more { display: inline-block; margin-top: 12px; color: var(--accent-2); font-weight: 600; font-size: 15px; text-decoration: none; }
a.more:hover, .more:hover { color: var(--accent); }

/* "Weiter:"-Verweiszeile zwischen Geschwisterseiten */
.related { text-align: center; color: var(--ink-3); font-size: 15px; }
.related a { color: var(--ink-2); text-decoration: none; }
.related a:hover { color: var(--accent-2); }

/* ═══════════════════════════════════════════════════════════════════
   ELEVATION LAYER v4 — €50k-Finish
   Lebendiges Licht · Pointer-Tiefe · Mikro-Interaktion · Choreografie.
   Pure CSS/Vanilla-JS, kein CDN. Motion respektiert
   prefers-reduced-motion (Sammel-Reset am Ende dieses Blocks).
   ═══════════════════════════════════════════════════════════════════ */

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* — Render-Feinschliff: Inter-Stilsets, Kerning, optische Glättung — */
body {
  font-feature-settings: "cv05" 1, "cv11" 1, "ss03" 1, "calt" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, .value, .statbar b { font-feature-settings: "ss03" 1, "kern" 1; }

/* Anker sauber unter dem Sticky-Header ausrichten */
section[id], [id] { scroll-margin-top: 92px; }

/* Custom Scrollbar (Brand-konsistent statt System-grau) */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); }

/* Präzise, sichtbare Tastatur-Fokus-Ringe */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible { outline-offset: 4px; }

/* — 1 · Scroll-Fortschritt (dünne Lichtkante oben) — */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 300;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  box-shadow: 0 0 14px rgba(232,118,58,.7);
  will-change: transform;
}

/* — 2 · Aurora hinter dem Hero (driftendes Licht) — */
/* Containment in DREI Lagen, damit der Aurora-Shimmer NIE seitlich überläuft —
   auch nicht auf iOS Safari, das `overflow-x:hidden` am <html> unzuverlässig
   clippt. `overflow: clip` erzeugt (anders als hidden) KEINEN Scroll-Container
   und kann daher nicht versehentlich seitlich scrollbar werden.
   1) <html>  2) .hero (der sichtbare Rahmen)  3) .aurora (direkter Eltern-
   Container der driftenden Blobs) — so bleibt der Effekt strikt im Container. */
html { overflow-x: clip; }
.hero { isolation: isolate; overflow: clip; }
.aurora { position: absolute; inset: -25% 0 0; z-index: -1; pointer-events: none; filter: blur(64px); opacity: .55; overflow: clip; }
.aurora i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.aurora i:nth-child(1) { width: 540px; height: 540px; left: 6%;  top: -8%;  background: radial-gradient(circle, rgba(232,118,58,.55), transparent 68%); animation: drift-a 19s ease-in-out infinite; }
.aurora i:nth-child(2) { width: 460px; height: 460px; right: 4%; top: -4%;  background: radial-gradient(circle, rgba(240,151,95,.40), transparent 68%); animation: drift-b 23s ease-in-out infinite; }
.aurora i:nth-child(3) { width: 420px; height: 420px; left: 38%; top: 14%;  background: radial-gradient(circle, rgba(194,84,27,.32),  transparent 70%); animation: drift-c 27s ease-in-out infinite; }
@keyframes drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,30px) scale(1.12); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,40px) scale(1.08); } }
@keyframes drift-c { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-26px) scale(1.15); } }

/* Hero-Raster atmet leicht (langsamer Pan) */
.hero::before { animation: grid-pan 60s linear infinite; }
@keyframes grid-pan { to { background-position: 72px 72px; } }

/* — 3 · Pointer-getrackte Spotlight-Tiefe auf Karten (Signatur-Effekt) — */
/* KEIN overflow:hidden auf .price-card — sonst wird das "Empfohlen"-Badge
   (top:-13px, ragt bewusst über die Karte) abgeschnitten. Das ::after ist
   bereits via border-radius:inherit auf die Kartenform begrenzt. */
.card, .price-card { --mx: 50%; --my: 50%; }
.card::after, .price-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(232,118,58,.13), transparent 60%);
  opacity: 0; transition: opacity .35s ease; z-index: 0;
}
.card:hover::after, .price-card:hover::after { opacity: 1; }
.card > *, .price-card > * { position: relative; z-index: 1; }
.price-card .pc-badge { position: absolute; z-index: 3; }

/* — 4 · Rotierender Lichtrand auf Schlüssel-Flächen (sparsam) — auf Wunsch zurück.
   Der bildschirmweite „Shimmer" kam NICHT von hier (der conic-Rand ist inset:0 auf
   der Karte, kann nie über die Karte hinaus), sondern von der Aurora — die ist via
   overflow:clip gefixt. Der Rand selbst ist sauber auf die 1px-Kante maskiert. */
.flow-card, .price-card.featured, .form-card { position: relative; }
.flow-card::before, .price-card.featured::before, .form-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--angle), transparent 55%, rgba(240,151,95,.85), transparent 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin-border 7s linear infinite; pointer-events: none; opacity: .6; z-index: 2;
}
.form-card::before { opacity: .4; }
@keyframes spin-border { to { --angle: 360deg; } }

/* — 5 · Lebendiges Hero-Flow-Visual (Daten fließen sichtbar) — */
.flow-arr { color: var(--accent-2); animation: arr-pulse 2.6s ease-in-out infinite; }
.flow-row > .flow-arr:nth-of-type(4) { animation-delay: .5s; }
@keyframes arr-pulse { 0%,100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); text-shadow: 0 0 12px var(--accent); } }

/* Auf dem Handy stapelt sich der Ablauf senkrecht — die Pfeile muessen
   also nach UNTEN zeigen. Die Drehung steht zwar schon in der 760px-
   Regel weiter oben, war aber wirkungslos: `arr-pulse` setzt `transform`
   in jedem Keyframe, und laufende Animationen schlagen im Cascade jede
   normale Deklaration. Die Drehung muss deshalb IN die Keyframes.
   (rotate(90deg) translateX(...) schiebt entlang der gedrehten Achse,
   der Puls laeuft dadurch ebenfalls nach unten.) */
@media (max-width: 760px) {
  .flow-arr { animation-name: arr-pulse-down; }
}
@keyframes arr-pulse-down {
  0%,100% { opacity: .35; transform: rotate(90deg) translateX(0); }
  50% { opacity: 1; transform: rotate(90deg) translateX(3px); text-shadow: 0 0 12px var(--accent); }
}
/* (Core-Sheen-Sweep ENTFERNT — gehörte zum „Shimmer", der raus sollte.) */
.flow-out .mini::before { animation: tick-glow 3s ease-in-out infinite; }
.flow-out .mini:nth-child(2)::before { animation-delay: .4s; }
.flow-out .mini:nth-child(3)::before { animation-delay: .8s; }
@keyframes tick-glow { 0%,100% { text-shadow: none; } 50% { text-shadow: 0 0 9px rgba(76,195,138,.8); } }

/* — 6 · Buttons: Glanz-Sweep + magnetischer Versatz (JS setzt --tx/--ty) — */
.btn { position: relative; overflow: hidden; --tx: 0px; --ty: 0px; transform: translate(var(--tx), var(--ty)); }
.btn:hover { transform: translate(var(--tx), calc(var(--ty) - 2px)); }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .65s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.btn:hover::after { left: 150%; }
.btn.ghost::after { display: none; }

/* — 7 · Navigation: animierter Aktiv-/Hover-Unterstrich (Scrollspy) — */
nav.main a:not(.btn) { position: relative; }
nav.main a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  transition: right .28s cubic-bezier(.2,.7,.2,1);
}
nav.main a:not(.btn):hover::after, nav.main a.active::after { right: 0; }
nav.main a.active:not(.btn) { color: var(--ink); }

/* — 8 · Schwebende CTA (erscheint nach dem Hero, weicht am Kontakt) — */
.float-cta {
  position: fixed; right: 22px; bottom: 22px; z-index: 250;
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.float-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.float-cta .btn { box-shadow: 0 14px 40px rgba(194,84,27,.5), inset 0 1px 0 rgba(255,255,255,.18); }
@media (max-width: 560px) { .float-cta { right: 14px; left: 14px; bottom: 14px; } .float-cta .btn { width: 100%; justify-content: center; } }

/* — Statbar: feiner Hover-Lift + Akzentkante beim aktiven Wert — */
.statbar > div { transition: background .25s ease; position: relative; }
.statbar > div::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); transition: width .3s ease;
}
.statbar > div:hover { background: rgba(255,255,255,.02); }
.statbar > div:hover::before { width: 46px; }

/* — Sektionsköpfe: optische Präzision (Kicker-Linie) — */
.sec-head.center .eyebrow { margin-left: auto; margin-right: auto; }

/* — Tiefere, weichere Karten-Schatten beim Hover (Material-Lift) — */
.card:hover { box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.price-card.featured:hover { box-shadow: 0 30px 80px rgba(194,84,27,.22); }

/* — Mobile-Typografie: H1 sauber im Bild halten (kein Überlauf) — */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(25px, 7vw, 44px); letter-spacing: -0.035em; line-height: 1.1; }
  .hero h1 br { display: none; }
  .hero .sub { font-size: 16.5px; }
  .aurora { filter: blur(48px); opacity: .45; }
}

/* ═══════════════════════════════════════════════════════════════════
   ENTERPRISE-SECTIONS v4 — Vertrauen, Vergleich, Qualifikation
   ═══════════════════════════════════════════════════════════════════ */

/* — Integrations-Strip ("Arbeitet mit deinen Programmen") — */
.works { text-align: center; padding: 60px 0; }
.works .works-label { font-size: 13.5px; letter-spacing: .03em; color: var(--ink-3); margin-bottom: 24px; }
.works .works-label b { color: var(--ink-2); font-weight: 650; }
.works-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 860px; margin: 0 auto; }
.works .chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px; border-radius: 11px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-2);
  font-size: 14.5px; font-weight: 560; transition: border-color .2s, color .2s, transform .2s, background .2s;
}
.works .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .65; transition: opacity .2s; }
.works .chip:hover { border-color: rgba(232,118,58,.4); color: var(--ink); transform: translateY(-2px); background: var(--surface-2); }
.works .chip:hover::before { opacity: 1; }

/* — Founder-Panel ("Wer das baut") — */
.founder-card {
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  border: 1px solid var(--line-strong); border-radius: 20px; padding: 44px 48px;
  box-shadow: 0 34px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.founder-avatar {
  width: 108px; height: 108px; border-radius: 26px; flex: none; display: grid; place-items: center;
  font-size: 40px; font-weight: 800; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(150deg, var(--accent-deep), var(--accent-2));
  box-shadow: 0 14px 40px rgba(194,84,27,.42), inset 0 1px 0 rgba(255,255,255,.28);
}
.founder-card .role { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; color: var(--accent-2); margin-bottom: 14px; display: block; }
.founder-card blockquote { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.5; font-weight: 580; letter-spacing: -.01em; }
.founder-card blockquote em { font-style: normal; background: linear-gradient(110deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.founder-card .sig { margin-top: 22px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.founder-card .sig b { font-size: 16px; font-weight: 700; color: var(--ink); }
.founder-card .sig span { font-size: 14px; color: var(--ink-3); }
@media (max-width: 720px) {
  .founder-card { grid-template-columns: 1fr; gap: 24px; padding: 32px 26px; text-align: center; }
  .founder-avatar { margin: 0 auto; width: 88px; height: 88px; font-size: 33px; }
  .founder-card .sig { justify-content: center; }
}

/* — Vergleichs-Tabelle ("Einstellen oder bauen lassen?") — */
.ctable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.ctable { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 14.5px; }
.ctable th, .ctable td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ctable thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 700; background: rgba(255,255,255,.02); }
.ctable td:first-child, .ctable th:first-child { color: var(--ink-2); font-weight: 600; }
.ctable tbody td:first-child { color: var(--ink); font-weight: 560; }
.ctable .col-us { position: relative; }
.ctable thead .col-us { color: var(--accent-2); }
.ctable th.col-us, .ctable td.col-us { background: linear-gradient(180deg, rgba(232,118,58,.10), rgba(232,118,58,.04)); }
.ctable thead .col-us { border-top: 2px solid var(--accent); }
.ctable tbody tr:last-child td { border-bottom: none; }
.ctable .yes { color: var(--ok); font-weight: 680; }
.ctable .no { color: #e07a7a; font-weight: 560; }
.ctable .mut { color: var(--ink-3); }
.ctable-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
/* Wisch-Hinweis: nur auf Mobile, wo die Tabelle (min-width 680px) horizontal
   scrollt — sonst übersehen Nutzer die rechte Spalte (= unsere Stärke). */
.ctable-hint { display: none; }
@media (max-width: 760px) {
  .ctable-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }
  .ctable-hint .swipe { color: var(--accent-2); font-weight: 700; animation: swipe-nudge 1.8s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .ctable-hint .swipe { animation: none; } }
@keyframes swipe-nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* — Qualifikation ("Passt das zu dir?") — */
.fit-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.fit-col { border-radius: var(--radius); padding: 34px 32px; border: 1px solid var(--line); background: var(--surface); }
.fit-col.yes { border-color: rgba(76,195,138,.32); background: linear-gradient(165deg, rgba(76,195,138,.07), transparent 60%), var(--surface); }
.fit-col.no { border-color: rgba(214,69,69,.26); background: linear-gradient(165deg, rgba(214,69,69,.05), transparent 60%), var(--surface); }
.fit-col h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; margin-bottom: 22px; }
.fit-col h3 .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; font-weight: 800; flex: none; }
.fit-col.yes h3 .ic { background: rgba(76,195,138,.14); border: 1px solid rgba(76,195,138,.32); color: var(--ok); }
.fit-col.no h3 .ic { background: rgba(214,69,69,.12); border: 1px solid rgba(214,69,69,.3); color: #e07a7a; }
.fit-col ul { list-style: none; display: grid; gap: 14px; }
.fit-col li { padding-left: 30px; position: relative; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.fit-col li::before { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.fit-col.yes li::before { content: "✓"; background: rgba(76,195,138,.13); border: 1px solid rgba(76,195,138,.3); color: var(--ok); }
.fit-col.no li::before { content: "✕"; background: rgba(214,69,69,.1); border: 1px solid rgba(214,69,69,.28); color: #e07a7a; }

/* — Ressourcen-Band (kostenlose Lead-Assets) — futuristisch, on-brand.
   Glow per box-shadow statt mask-composite (das brach auf iOS). overflow:clip
   hält den Glow strikt im Band → kein Seitwärts-Scroll. */
.res-band {
  position: relative; overflow: clip; padding: 92px 0;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(232,118,58,.07), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.res-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; filter: blur(72px); opacity: .5; }
.res-glow i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.res-glow i:nth-child(1) { width: 360px; height: 360px; left: 6%;  top: -12%;   background: radial-gradient(circle, rgba(232,118,58,.5),  transparent 68%); animation: drift-a 21s ease-in-out infinite; }
.res-glow i:nth-child(2) { width: 320px; height: 320px; right: 5%; bottom: -16%; background: radial-gradient(circle, rgba(240,151,95,.34), transparent 70%); animation: drift-b 25s ease-in-out infinite; }
.res-band .wrap { position: relative; z-index: 1; }
.res-grid { display: grid; gap: 20px; margin-top: 46px; }
@media (min-width: 760px) { .res-grid { grid-template-columns: 1fr 1fr; } }
.res-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  padding: 34px 30px 30px; border-radius: var(--radius); text-decoration: none; color: var(--ink);
  background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid var(--line-strong); overflow: hidden;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .32s, box-shadow .32s;
}
.res-card::after {
  content: ""; position: absolute; top: -40%; right: -30%; width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(232,118,58,.16), transparent 62%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.res-card:hover { transform: translateY(-5px); border-color: rgba(240,151,95,.4); box-shadow: 0 24px 60px -22px rgba(232,118,58,.5); }
.res-card:hover::after { opacity: 1; }
.res-card > * { position: relative; z-index: 1; }
.res-tag {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2);
  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(240,151,95,.3); background: rgba(232,118,58,.08); margin-bottom: 22px;
}
.res-card .icon-chip { margin-bottom: 18px; }
.res-card h3 { font-size: 21px; line-height: 1.3; margin-bottom: 12px; }
.res-card p { color: var(--ink-2); font-size: 15px; line-height: 1.65; margin-bottom: 24px; }
.res-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-weight: 650; font-size: 15px; }
.res-cta .arr, .res-all .arr { transition: transform .25s; }
.res-card:hover .res-cta .arr, .res-all a:hover .arr { transform: translateX(4px); }
.res-all { text-align: center; margin-top: 30px; }
.res-all a { color: var(--ink-2); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.res-all a:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   MOTION-SYSTEM v5 — vier Bewegungs-Idiome
   Abgeleitet aus der Bewegungssprache moderner Handwerks-/Beratungsseiten
   und auf unser Angebot zugeschnitten. Grundsatz: Bewegung muss ein
   Argument tragen, sonst ist sie Deko. Jedes Idiom hier trägt eines:

     A) Sticky-Split   — die Diagnose bleibt stehen, die Belege ziehen vorbei
     B) Ablauf-Lauf    — der Ablauf wird abgespielt, nicht behauptet
     C) Ziffern-Roll   — die Zahl entsteht vor den Augen, statt dazustehen
     D) Fortschritt    — die Strecke wird sichtbar, nicht nur aufgezählt

   Alles läuft ausschliesslich auf transform/opacity (Compositor), jedes
   Idiom hat einen Aus-Schalter unter prefers-reduced-motion ganz unten.
   ═══════════════════════════════════════════════════════════════════ */

/* ── A · Sticky-Split ────────────────────────────────────────────────
   Linke Spalte bleibt am Header kleben (top = Headerhöhe + Luft), rechts
   scrollt der Belegstapel daran vorbei. Ab 900px flach — auf dem Handy
   ist ein sticky-Element in einer 1-Spalten-Strecke nur im Weg. */
.split { display: grid; gap: 26px; }
@media (min-width: 900px) {
  .split { grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; }
  .split-stick { position: sticky; top: 96px; }
}
.split-stick .sec-head { margin-bottom: 28px; max-width: none; }

/* Zähler: tickt hoch, während der Leser den Stapel durchgeht. */
.split-meter { border-top: 1px solid var(--line); padding-top: 20px; }
.split-meter .sm-label {
  display: block; font-size: 12px; font-weight: 650; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.split-meter .sm-rail {
  height: 3px; border-radius: 3px; background: var(--line); overflow: hidden;
}
.split-meter .sm-rail i {
  display: block; height: 100%; width: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  transform: scaleX(var(--p, 0)); transform-origin: left;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 14px rgba(232,118,58,.5);
}
.split-meter .sm-count { display: block; margin-top: 11px; font-size: 13.5px; color: var(--ink-3); }
.split-meter .sm-count b { color: var(--accent-2); font-weight: 750; font-variant-numeric: tabular-nums; }

.split-stack { display: grid; gap: 16px; }
.pcard { padding: 26px 26px 26px 28px; }
.pcard .pc-num {
  display: block; font-size: 11.5px; font-weight: 750; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
/* Icon rechts oben — nimmt der Karte keine Leseweite weg. */
.pcard .pc-ic {
  position: absolute; top: 22px; right: 22px;
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.pcard .pc-ic svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s ease; }
.pcard:hover .pc-ic { border-color: rgba(232,118,58,.35); background: var(--accent-glow); transform: translateY(-2px); }
.pcard:hover .pc-ic svg { stroke: var(--accent-2); }
.pcard h3 { padding-right: 54px; }
/* Gelesene Karte bekommt eine ruhige Kante links — der Stapel zeigt,
   wie weit man ist, ohne zu blinken.
   Als inset-Schatten, NICHT als Pseudo-Element an .pc-num: die Regel
   `.card > * { position: relative }` weiter oben macht jedes direkte
   Kind zum eigenen Bezugsrahmen — ein dort aufgehaengtes absolutes
   Element haette sich an der 14px hohen Nummernzeile ausgerichtet
   statt an der Karte und waere unsichtbar geblieben. */
.pcard { box-shadow: inset 0 0 0 0 rgba(232,118,58,0); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .5s cubic-bezier(.2,.7,.2,1); }
.pcard.seen { box-shadow: inset 2px 0 0 0 rgba(232,118,58,.8); }

/* ── B · Ablauf-Lauf (die Simulation) ────────────────────────────────
   Zwei Panels, zwei Idiome: senkrechte Abarbeitung (Checkliste) und
   waagerechte Weitergabe (Pipeline). Beide starten erst im Sichtfeld,
   halten an, sobald sie es verlassen, und laufen danach erneut. */
.runs { display: grid; gap: 18px; margin-bottom: 54px; }
@media (min-width: 940px) { .runs { grid-template-columns: 1fr 1fr; gap: 20px; } }

.run-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 22px 22px 24px;
  box-shadow: 0 26px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07);
  /* Spalte, damit die Bildunterschriften beider Panels auf einer Linie
     stehen — die beiden Abläufe sind unterschiedlich lang. */
  display: flex; flex-direction: column;
}
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rp-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-2); }
.rp-live {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}
.rp-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 9px rgba(76,195,138,.85); animation: rp-beat 1.9s ease-in-out infinite; }
@keyframes rp-beat { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* --- B1 Checkliste: Schiene links, Punkt wandert mit ---
   Die Schiene haengt bewusst an .rp-run (Schiene + Liste), NICHT an
   .rp-body: das Body zentriert seinen Inhalt, die Schiene wuerde sich
   sonst ueber die volle Panelhoehe spannen und neben den Schritten stehen. */
.rp-body { position: relative; }
.rp-run { position: relative; }
.rp-rail { position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: var(--line); border-radius: 2px; }
.rp-rail i {
  position: absolute; left: 0; top: 0; width: 100%; border-radius: 2px;
  height: var(--fill, 0%);
  background: linear-gradient(180deg, var(--accent-deep), var(--accent-2));
  transition: height .5s cubic-bezier(.3,.8,.3,1);
}
.rp-rail i::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px;
  transform: translate(-50%, 50%); border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px var(--accent);
}
.rp-steps { list-style: none; display: grid; gap: 7px; padding-left: 26px; }
.rp-steps li {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  opacity: .34; transition: opacity .4s ease, background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.rp-steps li.active { opacity: 1; background: var(--accent-glow); border-color: rgba(232,118,58,.32); transform: translateX(3px); }
.rp-steps li.done { opacity: 1; background: rgba(255,255,255,.035); border-color: var(--line); transform: none; }
.rp-steps .rs-t { grid-column: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.rp-steps .rs-m { grid-column: 1; font-size: 11.5px; color: var(--ink-3); }
.rp-steps .rs-b {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ok); background: rgba(76,195,138,.12); border: 1px solid rgba(76,195,138,.3);
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
  opacity: 0; transform: scale(.82); transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.4,.4,1);
}
.rp-steps li.done .rs-b { opacity: 1; transform: none; }
.rp-steps li.active .rs-b { content: none; }

/* --- B2 Pipeline: Strecke oben, Stationen darunter --- */
.rp-pipe { padding-top: 4px; }
.rp-track { position: relative; height: 2px; background: var(--line); border-radius: 2px; margin: 6px 26px 20px; }
.rp-track i {
  position: absolute; left: 0; top: 0; height: 100%; width: var(--fill, 0%); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  transition: width .55s cubic-bezier(.3,.8,.3,1);
}
.rp-track i::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 9px; height: 9px;
  transform: translate(50%, -50%); border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px var(--accent);
}
.rp-stages { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rp-stages li {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  padding: 12px 11px; border-radius: 11px; min-height: 104px;
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  opacity: .34; transition: opacity .4s ease, background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.rp-stages li.active { opacity: 1; background: var(--accent-glow); border-color: rgba(232,118,58,.32); transform: translateY(-3px); }
.rp-stages li.done { opacity: 1; background: rgba(255,255,255,.035); border-color: var(--line); transform: none; }
.rp-stages .rg-ic {
  width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  transition: border-color .3s ease, background .3s ease;
}
.rp-stages .rg-ic svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-3); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.rp-stages li.done .rg-ic { border-color: rgba(76,195,138,.3); }
.rp-stages li.done .rg-ic svg { stroke: var(--ok); }
.rp-stages li.active .rg-ic { border-color: rgba(232,118,58,.4); background: var(--accent-glow); }
.rp-stages li.active .rg-ic svg { stroke: var(--accent-2); }
.rp-stages .rg-t { font-size: 12.5px; font-weight: 620; color: var(--ink); line-height: 1.32; }
.rp-stages .rg-s { font-size: 11px; color: var(--ink-3); line-height: 1.3; }
@media (max-width: 520px) {
  .rp-stages { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rp-track { margin: 6px 0 16px; }
}

/* --- B3 Abbau: der Stapel schrumpft, der Zaehler zaehlt runter --- */
.rp-count { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.rp-count .rc-n {
  font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--accent-2); font-variant-numeric: tabular-nums;
  min-width: 2.2ch; text-align: right;
  transition: color .45s ease;
}
.rp-count.empty .rc-n { color: var(--ok); }
.rp-count .rc-l { font-size: 12px; color: var(--ink-3); line-height: 1.45; }
.rp-count .rc-l b { color: var(--ink-2); font-weight: 600; }
.rp-queue { list-style: none; display: grid; gap: 7px; }
.rp-queue li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  opacity: .34; transition: opacity .4s ease, background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.2,.7,.2,1);
}
.rp-queue li.active { opacity: 1; background: var(--accent-glow); border-color: rgba(232,118,58,.32); transform: translateX(3px); }
/* Abgearbeitet heisst hier: durchgestrichen und zurueckgenommen — der
   Stapel soll sichtbar leichter werden, nicht nur abgehakt. */
.rp-queue li.done { opacity: .5; background: transparent; border-color: var(--line); transform: none; }
.rp-queue li.done .rq-t { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); color: var(--ink-3); }
.rp-queue .rq-t { font-size: 13px; font-weight: 550; color: var(--ink); line-height: 1.4; transition: color .4s ease; }
.rp-queue .rq-n {
  flex: none; font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 9px; transition: color .4s ease, border-color .4s ease;
}
.rp-queue li.done .rq-n { color: var(--ok); border-color: rgba(76,195,138,.3); }

/* --- B4 Aufbau: der Dialog waechst Zeile fuer Zeile --- */
.rp-chat { list-style: none; display: grid; gap: 8px; }
.rp-chat li {
  position: relative; padding: 10px 13px; border-radius: 11px;
  font-size: 13px; line-height: 1.5; max-width: 92%;
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.rp-chat li.active, .rp-chat li.done { opacity: 1; transform: none; }
.rp-chat .rh-w {
  display: block; font-size: 10px; font-weight: 750; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 4px;
}
.rp-chat li.q { justify-self: start; background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--ink-2); }
.rp-chat li.q .rh-w { color: var(--ink-3); }
.rp-chat li.a { justify-self: end; background: var(--accent-glow); border: 1px solid rgba(232,118,58,.3); color: var(--ink); }
.rp-chat li.a .rh-w { color: var(--accent-2); }

/* Abschlusszeile — erscheint erst, wenn der Lauf durch ist.

   Bewusst KEIN Flex-Container: Textknoten und <b> waeren zwei getrennte
   Flex-Items geworden — mit einer Luecke mitten im Satz und einem Umbruch
   an der falschen Stelle. Haengender Einzug statt Flex haelt den Satz
   zusammen. */
.rp-done {
  display: block; position: relative; margin-top: 16px; padding-left: 20px;
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.run-panel.complete .rp-done { opacity: 1; transform: none; }
.rp-done b { color: var(--ink); font-weight: 650; }
.rp-check { position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800; }
.rp-cap { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.62; }
/* Im 2x2-Raster sind die vier Ablaeufe unterschiedlich lang, die Panels
   aber gleich hoch. Ohne Zentrierung sammelt sich die ueberschuessige Hoehe
   als Loch zwischen Lauf und Bildunterschrift. Der Lauf sitzt deshalb
   mittig im verfuegbaren Raum — die Unterschriften bleiben auf einer Linie. */
.rp-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 18px; }

/* ── C · Ziffern-Roll ────────────────────────────────────────────────
   Jede Ziffer ist ein 1ch-Schacht mit weicher Ober-/Unterkante; der
   Streifen darin fährt auf die Zielziffer. Der Geisterzwilling (.odo-g)
   steht unsichtbar daneben und hält die Breite — ohne ihn springt beim
   Start das ganze Layout, weil "0" schmaler ist als "18.000–35.000".

   Bewusst KEIN Flex-Layout im Roll-Zwilling: als Flex-Items verlieren
   Textstuecke ihre Rand-Leerzeichen ("6–10 Wochen" wird zu "6–10Wochen")
   und die Laufweite zwischen den Zeichen faellt weg. Der Zwilling laeuft
   deshalb im normalen Inline-Fluss mit fest gesetzter Zeilenhoehe —
   damit Geist und Zwilling exakt dieselbe Zeilenmetrik haben. */
.odo-w { --odo-lh: 1.2; position: relative; display: inline-block; white-space: pre; line-height: var(--odo-lh); }
.odo-g { visibility: hidden; }
.odo-r { position: absolute; left: 0; top: 0; white-space: pre; line-height: var(--odo-lh); }
.odo-d {
  display: inline-block; width: 1ch; height: calc(1em * var(--odo-lh));
  overflow: hidden; vertical-align: top;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 24%, #000 76%, transparent);
}
.odo-d > span {
  display: block; text-align: center;
  transform: translateY(calc(var(--n, 0) * -1em * var(--odo-lh)));
  transition: transform 1.15s cubic-bezier(.16,.84,.28,1);
  transition-delay: calc(var(--k, 0) * 55ms);
}
.odo-d > span > span { display: block; height: calc(1em * var(--odo-lh)); }
.odo-w.pre .odo-d > span { transform: none; }
/* Der Farbverlauf der Statbar wuerde ueber die verdeckten Ziffern
   mitgeclippt (background-clip:text sieht auch ausgeblendete Glyphen).
   Beim Roll deshalb auf Volltonfarbe — optisch praktisch identisch. */
.statbar b:has(.odo-w) { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }

/* ── D · Fortschritts-Schiene unter den vier Schritten ───────────────
   Füllt sich mit dem Scroll durch die Sektion (JS setzt --p). */
.steps-rail { position: relative; height: 2px; background: var(--line); border-radius: 2px; margin: 0 0 26px; overflow: hidden; }
.steps-rail i {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--accent-deep), var(--accent-2));
  box-shadow: 0 0 14px rgba(232,118,58,.45);
}
/* Die Schrittnummern 01–04 waren unsichtbar — und zwar schon vor diesem
   Umbau: `.card::before` (die Hover-Haarlinie) und `.step::before` (der
   Zaehler) sind DASSELBE Pseudo-Element. `.step::before` hat nur `content`
   ueberschrieben; `position:absolute; height:1px; opacity:0` von `.card`
   blieben stehen und haben die Ziffer in eine 1px hohe, durchsichtige Box
   gesperrt. Hier werden diese Eigenschaften zurueckgesetzt — die Schritt-
   karten verzichten dafuer bewusst auf die Haarlinie.

   Nur die Positionierung wird zurueckgesetzt — NICHT `background`: das ist
   bei `.step::before` der Farbverlauf der Ziffer selbst (background-clip:
   text), ihn zu loeschen macht die Ziffer transparent statt sichtbar. */
.step::before {
  position: static; height: auto; opacity: 1;
  transition: filter .4s ease;
}
/* Erreichter Schritt leuchtet — die Schiene oben bekommt damit eine
   Entsprechung in den Karten selbst. */
.step.reached::before { filter: drop-shadow(0 0 10px rgba(232,118,58,.5)); }

/* ── Gestaffelte Enthüllung ohne Klassen-Zählerei ────────────────────
   Bisher musste jede Karte ihr .d1/.d2/.d3 von Hand tragen; JS setzt
   jetzt --i pro Kind eines [data-stagger]. Die .dN-Klassen bleiben
   gültig (sie gewinnen, weil sie später in der Datei stehen). */
[data-stagger] > .rv { transition-delay: calc(var(--i, 0) * 70ms); }

/* ── Buttons: cursorfolgendes Licht + weicher Ring ───────────────────
   JS setzt --bx/--by (Zeigerposition im Button). */
/* Das Licht liegt bewusst als BACKGROUND-Ebene im Button, nicht als
   ::before. Ein positioniertes Pseudo-Element hätte sich über den
   Beschriftungs-Textknoten gelegt (der ist kein Element und lässt sich
   nicht per z-index darüber heben) — die Schrift wäre milchig geworden.
   Hintergründe malen immer unter dem Text. */
@property --bo { syntax: '<number>'; inherits: false; initial-value: 0; }
.btn:not(.ghost) {
  background:
    radial-gradient(190px circle at var(--bx, 50%) var(--by, 50%),
      rgba(255,255,255,calc(var(--bo) * .40)), rgba(255,255,255,calc(var(--bo) * .12)) 45%, transparent 72%),
    linear-gradient(135deg, var(--accent-deep), var(--accent));
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, --bo .45s ease;
}
.btn:not(.ghost):hover { --bo: 1; }
.btn.ghost {
  box-shadow: 0 0 0 0 rgba(232,118,58,.28), 0 0 0 14px rgba(232,118,58,0);
  transition: transform .15s ease, box-shadow .45s ease, background .25s ease, border-color .25s ease;
}
.btn.ghost:hover { box-shadow: 0 0 0 4px rgba(232,118,58,.22), 0 0 0 16px rgba(232,118,58,0); }
.btn.ghost:active { box-shadow: 0 0 0 0 rgba(232,118,58,.28); transition: box-shadow 0s; }

/* ── Garantie-Siegel (inline SVG, Motion-Graphic) ────────────────────
   Aufbau von aussen nach innen: Zahnkranz (dreht), Bahn + Fortschritts-
   bogen (zeichnet sich beim Sichtbarwerden), Umlauftext (dreht langsam
   gegen den Zahnkranz), Kern mit Haken und Zahl.
   Alle Laufzustaenden haengen an .rv.in — keine eigene JS-Logik. */
/* Zwei Vertrauens-Marken nebeneinander: links das Garantie-Siegel (rund,
   dreht), rechts das Qualifikations-Abzeichen (Wappen, zeichnet sich).
   Bewusst zwei verschiedene Formen und zwei verschiedene Bewegungen —
   zwei gleich aussehende Marken lesen sich als Deko, zwei verschiedene
   als zwei Aussagen. */
.trust-marks {
  display: grid; gap: 30px 44px; max-width: 780px; margin: 0 auto 40px;
  text-align: center;
}
@media (min-width: 720px) { .trust-marks { grid-template-columns: 1fr 1fr; } }
.trust-mark { display: flex; flex-direction: column; align-items: center; }
.cta-band .tm-cap {
  margin: 16px auto 0; max-width: 330px; font-size: 14px; line-height: 1.6;
  color: var(--ink-3);
}
.cta-band .tm-cap b { color: var(--ink-2); font-weight: 650; }

/* Nachweis-Liste unter dem Wappen: klein und neutral benannt. Die Titel
   stehen bewusst gekuerzt („Ads · Displaywerbung" statt „Google Ads-
   Zertifizierung fuer Displaywerbung") — ausgeschrieben dominieren vier
   Werbe-Zertifikate den Abschluss einer Seite, die Buero-Automatisierung
   verkauft, und lassen uns wie eine Werbeagentur aussehen. */
.cred-list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; margin: 16px auto 0; max-width: 320px;
}
.cred-list li {
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}

.guarantee-seal { width: clamp(168px, 19vw, 200px); margin: 0 auto; }
.guarantee-seal svg { width: 100%; height: auto; display: block; overflow: visible; }

.gs-glow { fill: rgba(232,118,58,.10); filter: blur(14px); transform-origin: 110px 110px; }
.trust-mark.in .gs-glow { animation: gs-breathe 4.5s ease-in-out infinite; }
@keyframes gs-breathe { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }

/* Zahnkranz: ein einziger gestrichelter Kreis ergibt die Zaehne. */
.gs-ticks { transform-origin: 110px 110px; }
.gs-ticks circle {
  fill: none; stroke: rgba(232,118,58,.34); stroke-width: 7;
  stroke-dasharray: 2 13; stroke-linecap: round;
}
.trust-mark.in .gs-ticks { animation: gs-spin 26s linear infinite; }
@keyframes gs-spin { to { transform: rotate(360deg); } }

.gs-base { fill: none; stroke: var(--line); stroke-width: 2; }
/* Fortschrittsbogen: Umfang 2*pi*94 = 590,6 — der Wert MUSS zum Radius
   passen, sonst bleibt ein Rest stehen oder der Bogen springt. */
.gs-arc {
  fill: none; stroke: url(#gs-grad); stroke-width: 3; stroke-linecap: round;
  --dash: 590.6;
  stroke-dasharray: 590.6; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 110px 110px;
}
.trust-mark.in .gs-arc { animation: gs-draw 1.7s cubic-bezier(.2,.8,.2,1) .2s backwards; }
/* `from` + backwards statt `to` + forwards: der ENDZUSTAND ist der
   Normalzustand im Regelwerk, die Animation nur der Weg dorthin. Laeuft
   sie nie (kein JS, kein IntersectionObserver, Druckansicht), steht die
   Marke trotzdem fertig da statt als leerer Ring. */
@keyframes gs-draw { from { stroke-dashoffset: var(--dash, 590.6); } }

.gs-label { transform-origin: 110px 110px; }
.gs-label text {
  fill: var(--ink-3); font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.trust-mark.in .gs-label { animation: gs-spin 44s linear infinite reverse; }

.gs-core { fill: url(#gs-core-g); stroke: rgba(232,118,58,.3); stroke-width: 1; }

.gs-check {
  fill: none; stroke: var(--ok); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 56; stroke-dashoffset: 0;
}
.trust-mark.in .gs-check { animation: gs-draw2 .7s cubic-bezier(.2,.8,.2,1) 1.1s backwards; }
@keyframes gs-draw2 { from { stroke-dashoffset: 56; } }

.gs-num, .gs-sub { text-anchor: middle; font-family: inherit; }
.gs-num {
  fill: var(--ink); font-size: 37px; font-weight: 800; letter-spacing: -0.03em;
  transform-origin: 110px 112px;
}
.trust-mark.in .gs-num { animation: gs-pop .7s cubic-bezier(.2,1.5,.4,1) .95s backwards; }
@keyframes gs-pop { from { opacity: 0; transform: scale(.7); } }
.gs-sub {
  fill: var(--accent-2); font-size: 11.5px; font-weight: 750; letter-spacing: .2em;
}
.trust-mark.in .gs-sub { animation: gs-fade .6s ease 1.25s backwards; }
@keyframes gs-fade { from { opacity: 0; } }


/* ── Qualifikations-Abzeichen (Wappen) ───────────────────────────────
   Andere Bewegung als das Siegel: das Siegel DREHT dauerhaft, das Wappen
   ZEICHNET sich einmal und kommt zur Ruhe — nur der Stern atmet weiter.
   So lesen sich die beiden Marken als zwei Aussagen, nicht als Muster. */
.cred-badge { width: clamp(150px, 17vw, 178px); margin: 0 auto; }
.cred-badge svg { width: 100%; height: auto; display: block; overflow: visible; }

.cb-plate { fill: url(#cb-fill); }
.cb-base  { fill: none; stroke: var(--line); stroke-width: 2; }
/* Umriss zeichnet sich. Die Strichlaenge ist bewusst GROSSZUEGIG ueber
   der echten Pfadlaenge (~590): zu gross ist harmlos (der Pfad bleibt
   vollstaendig im „aus"-Abschnitt und damit unsichtbar), zu klein wuerde
   einen Rest stehen lassen, der nie wegzeichnet. */
.cb-edge {
  fill: none; stroke: url(#cb-stroke); stroke-width: 2.5; stroke-linejoin: round;
  --dash: 660;
  stroke-dasharray: 660; stroke-dashoffset: 0;
}
.trust-mark.in .cb-edge { animation: gs-draw 1.6s cubic-bezier(.2,.8,.2,1) .2s backwards; }

.cb-star { fill: url(#cb-stroke); transform-origin: 100px 63px; }
.trust-mark.in .cb-star { animation: cb-star-in .8s cubic-bezier(.2,1.5,.4,1) .85s backwards, cb-star-beat 4.5s ease-in-out 1.65s infinite; }
@keyframes cb-star-in { from { opacity: 0; transform: scale(.4) rotate(-40deg); } }
@keyframes cb-star-beat { 0%,100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }

.cb-rule {
  stroke: rgba(232,118,58,.4); stroke-width: 1.5; stroke-linecap: round;
  transform-origin: 100px 99px;
}
.trust-mark.in .cb-rule { animation: cb-rule-in .6s cubic-bezier(.2,.8,.2,1) 1.05s backwards; }
@keyframes cb-rule-in { from { transform: scaleX(0); } }

.cb-kicker, .cb-name, .cb-sub { text-anchor: middle; font-family: inherit; }
.cb-kicker { fill: var(--ink-3); font-size: 11px; font-weight: 750; letter-spacing: .22em; }
.cb-name   { fill: var(--ink);   font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
/* 14px, nicht 15: auf Hoehe y=167 ist das Wappen nur noch rund 110
   Einheiten breit — bei 15px stiess "AI Essentials" beidseitig an die
   Kante. */
.cb-sub    { fill: var(--accent-2); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.trust-mark.in .cb-kicker { animation: gs-fade .5s ease 1.15s backwards; }
.trust-mark.in .cb-name   { animation: gs-fade .5s ease 1.3s backwards; }
.trust-mark.in .cb-sub    { animation: gs-fade .5s ease 1.45s backwards; }

/* — Reduced-Motion: alle neuen Bewegungen still — */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .aurora i, .hero::before,
  .flow-arr, .flow-out .mini::before, .res-glow i,
  .flow-card::before, .price-card.featured::before, .form-card::before,
  .rp-live i,
  .btn::after { animation: none !important; transition: none !important; }
  .float-cta { transition: opacity .2s ease; }
  .btn { transform: none !important; }
  /* A–D: Endzustand sofort, ohne Weg dorthin. Nichts darf unsichtbar
     bleiben — sonst kostet Rücksichtnahme den Leser den Inhalt. */
  .split-stick { position: static; }
  .split-meter .sm-rail i, .steps-rail i { transition: none; }
  .pcard .pc-num::before { opacity: .75; transform: none; transition: none; }
  .rp-steps li, .rp-stages li, .rp-queue li, .rp-chat li { opacity: 1; transform: none; transition: none; }
  .rp-queue li.done { opacity: .5; }
  .rp-steps .rs-b { opacity: 1; transform: none; transition: none; }
  .rp-rail i, .rp-track i { transition: none; }
  .rp-done { opacity: 1; transform: none; transition: none; }
  .odo-w .odo-g { visibility: visible; }
  .odo-w .odo-r { display: none; }
  [data-stagger] > .rv { transition-delay: 0s !important; }
  .btn:not(.ghost) { --bo: 0 !important; }
  /* Siegel: kein Drehen, kein Zeichnen — aber vollstaendig sichtbar.
     Ein „stilles" Siegel darf nicht als leerer Ring enden. */
  .gs-ticks, .gs-label, .gs-glow { animation: none !important; }
  .gs-arc, .gs-check { animation: none !important; stroke-dashoffset: 0 !important; }
  .gs-num, .gs-sub { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* Wappen: Umriss vollstaendig, Stern und Schrift sichtbar, nichts dreht. */
  .cb-edge { animation: none !important; stroke-dashoffset: 0 !important; }
  .cb-star { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cb-rule { animation: none !important; transform: scaleX(1) !important; }
  .cb-kicker, .cb-name, .cb-sub { animation: none !important; opacity: 1 !important; }
}

/* ── Erklärvideo (Startseite, #video) ─────────────────────────────── */
.video-sec { padding-top: 24px; }
.vid-frame { position: relative; max-width: 1040px; margin: 0 auto; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--bg-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(232, 118, 58, .06), 0 0 90px var(--accent-glow); }
.vid-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--bg); }
.vid-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }
.vid-sound { display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 12px; border: none; cursor: pointer; white-space: nowrap;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent)); color: #fff; font: 650 15px/1 'Inter', sans-serif;
  box-shadow: 0 8px 28px rgba(194, 84, 27, .35), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .15s ease, filter .15s ease; }
.vid-sound:hover { transform: translateY(-2px); filter: brightness(1.07); }
.vid-sound[hidden] { display: none; }
.vid-note { text-align: center; font-size: 13.5px; color: var(--ink-3); }
@media (max-width: 760px) {
  .video-sec { padding-top: 8px; }
  .vid-sound { padding: 11px 16px; font-size: 14px; }
}