/* =========================================================================
   REVENTRUM · Stylesheet (Final / Full Fidelity)
   -------------------------------------------------------------------------
   Dark, premium B2B-SaaS im Stil von Stripe / Linear / Apple.
   Tokens, Typo-Skala und Komponenten 1:1 aus dem "Revenue System
   Design System". Ruhig, typografisch, viel Weißraum.
   Motion: Reveal-on-Scroll (einmalig) + genau EIN atmendes Element.
   Deploy: statische Dateien (Netlify).
   ========================================================================= */

/* ---- Design Tokens (kanonisch) ---------------------------------------- */
:root{
  --deep:#03060c;
  --base:#05080f;
  --panel:#0b111b;
  --panel2:#0d1420;

  --ink:#f2f6fd;
  --soft:#96a3bb;
  --faint:#59647c;
  --dim:#2b3449;

  --brand:#3d78ff;
  --brand-hover:#2f62e6;
  --brand-300:#93b6ff;

  --cyan:#5ad6ff;   /* LÖSUNG / Fokus / ausgerichtet */
  --warm:#ff9a5a;   /* PROBLEM / Engpass / Leck */
  --warm2:#ffb27a;

  --line:rgba(122,152,204,.12);
  --line2:rgba(128,166,224,.22);
  --line3:rgba(140,180,240,.40);

  --font:'Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'Roboto Mono',ui-monospace,monospace;

  --container:1180px;
  --e:cubic-bezier(.2,.8,.24,1);
  --film:cubic-bezier(.16,.84,.3,1);
  --dur:.18s;
}

/* ---- Reset / Base ------------------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--base);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.6;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Sehr weiche globale Aura im Hintergrund */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% -6%,rgba(61,120,255,.10),transparent 60%),
    radial-gradient(50% 40% at 92% 8%,rgba(90,214,255,.05),transparent 60%);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p{margin:0;}

/* Optionaler Grid-Hintergrund für Legal/Doc-Seiten */
body.doc::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:
    linear-gradient(rgba(122,152,204,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,152,204,.045) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% -10%,#000,transparent 78%);
          mask-image:radial-gradient(circle at 50% -10%,#000,transparent 78%);
}

/* ---- Layout ------------------------------------------------------------ */
.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;position:relative;z-index:1;}
.section{padding:clamp(64px,9vw,120px) 0;position:relative;}
.section--dark{background:var(--deep);}
.section--panel{background:linear-gradient(180deg,var(--base),var(--deep));}
.section .aura{
  position:absolute;top:0;left:50%;width:min(1100px,120vw);height:640px;
  transform:translateX(-50%);pointer-events:none;z-index:0;
  background:radial-gradient(42% 46% at 50% 40%,
    rgba(61,120,255,.10),rgba(87,211,255,.03) 46%,transparent 72%);
}
.stack > * + *{margin-top:20px;}

.grid{display:grid;gap:22px;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--split{grid-template-columns:1.05fr 1fr;align-items:center;gap:56px;}
@media(max-width:860px){
  .grid--2,.grid--3,.grid--split{grid-template-columns:1fr;gap:20px;}
}

/* ---- Typografie -------------------------------------------------------- */
.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
  display:inline-flex;align-items:center;gap:10px;margin-bottom:20px;
}
.kicker::before{
  content:"";height:6px;width:6px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 10px 1px var(--cyan);
}
.kicker--center{justify-content:center;}
h1,.h1{
  font-size:clamp(2.1rem,4.4vw,3.35rem);font-weight:700;
  letter-spacing:-.04em;line-height:1.06;text-wrap:balance;max-width:20ch;
}
h2,.h2{
  font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:700;
  letter-spacing:-.035em;line-height:1.08;text-wrap:balance;
}
h3,.h3{font-size:1.15rem;font-weight:600;letter-spacing:-.02em;color:var(--ink);}
.statement{
  font-size:clamp(1.4rem,2.5vw,2rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.12;text-wrap:balance;
}
.lead{
  font-size:clamp(1.02rem,1.4vw,1.18rem);font-weight:400;color:var(--soft);
  line-height:1.6;text-wrap:pretty;max-width:54ch;
}
p{color:var(--soft);}
.ink{color:var(--ink);font-weight:600;}
.cyan{color:var(--cyan);}
.warm{color:var(--warm2);}
.muted{color:var(--faint);}
.small{font-size:13.5px;}
ul{color:var(--soft);padding-left:1.15em;margin:0;}
ul li + li{margin-top:11px;}
/* Die Fließtext-Listen-Regel darf Navigations-/Komponenten-Listen nicht verschieben */
.nav-links li + li,
.nav-mobile li + li,
.footer-col ul li + li,
.footer-social li + li,
.footer-legal-links li + li,
.hp-list li + li{margin-top:0;}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:999px;font-weight:600;border:1px solid transparent;
  font-family:var(--font);cursor:pointer;line-height:1;
  transition:background var(--dur) var(--e),box-shadow var(--dur) var(--e),
             transform var(--dur) var(--e),border-color var(--dur) var(--e),color var(--dur) var(--e);
}
.btn--primary{
  background:var(--brand);color:#fff;padding:16px 28px;font-size:15.5px;
  box-shadow:0 8px 30px -10px rgba(61,120,255,.6);
}
.btn--primary:hover{
  background:var(--brand-hover);
  box-shadow:0 12px 40px -10px rgba(61,120,255,.75);transform:translateY(-1px);
}
.btn--secondary{
  background:rgba(11,17,27,.55);color:var(--ink);border:1px solid var(--line2);
  padding:14px 26px;font-size:15px;
}
.btn--secondary:hover{
  border-color:rgba(90,214,255,.5);color:#eafaff;
  background:rgba(11,26,36,.55);box-shadow:0 0 34px -14px rgba(90,214,255,.55);
  transform:translateY(-1px);
}
.btn--sm{padding:10px 18px;font-size:13.5px;}
.btn--lg{padding:17px 32px;font-size:16px;box-shadow:0 10px 36px -10px rgba(61,120,255,.7);}
.btn .arrow{transition:transform var(--dur) var(--e);}
.btn:hover .arrow{transform:translateX(3px);}

.textlink{
  display:inline-flex;align-items:center;gap:7px;color:var(--brand-300);
  font-weight:600;font-size:14.5px;transition:color var(--dur) var(--e);
}
.textlink .arrow{transition:transform var(--dur) var(--e);}
.textlink:hover{color:var(--cyan);}
.textlink:hover .arrow{transform:translateX(3px);}

.hint{font-size:13px;color:var(--faint);margin-top:14px;max-width:60ch;line-height:1.5;}

/* ---- Cards / Panels ---------------------------------------------------- */
.card{
  position:relative;border:1px solid var(--line2);border-radius:20px;
  background:linear-gradient(180deg,rgba(13,20,32,.6),rgba(9,15,25,.46));
  box-shadow:inset 0 1px 0 rgba(150,210,255,.06), 0 40px 120px -60px rgba(0,0,0,.9);
  padding:clamp(22px,2.5vw,30px);
  transition:transform var(--dur) var(--e),border-color var(--dur) var(--e);
}
.card--hover:hover{transform:translateY(-3px);border-color:var(--line3);}
.card--cyan{
  border-color:rgba(90,214,255,.34);
  background:radial-gradient(92% 76% at 50% 20%,rgba(48,108,142,.2),transparent 64%),
             linear-gradient(180deg,rgba(13,22,36,.6),rgba(9,16,27,.5));
  box-shadow:0 36px 104px -50px rgba(90,214,255,.5),inset 0 1px 0 rgba(165,225,255,.1);
}
.card--warm{
  border-color:rgba(255,154,90,.32);border-radius:16px;
  background:radial-gradient(120% 96% at 50% 30%,rgba(42,23,11,.4),transparent 66%),
             linear-gradient(180deg,rgba(15,12,10,.5),rgba(10,8,7,.4));
  box-shadow:0 30px 90px -50px rgba(255,154,90,.45);
}
.card .big{
  font-family:var(--mono);font-weight:700;color:var(--warm2);
  font-size:clamp(2.3rem,5.4vw,3.35rem);letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(255,154,90,.35);
}
.card h3 + p{margin-top:10px;}
.step-no{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--cyan);
  text-transform:uppercase;
}

/* ---- Tags / Badges ----------------------------------------------------- */
.tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  padding:4px 9px;border:1px solid var(--line2);border-radius:5px;
  color:var(--faint);white-space:nowrap;
}
.tag--cyan{color:var(--cyan);border-color:rgba(90,214,255,.28);}
.tag--warm{color:var(--warm2);border-color:rgba(255,154,90,.28);}

/* ---- Navigation -------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(5,8,15,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:.2s var(--e);
}
.nav.scrolled{background:rgba(4,7,13,.9);border-bottom-color:var(--line);}
.nav-in{
  max-width:var(--container);margin:0 auto;height:64px;padding:0 24px;
  display:flex;align-items:center;justify-content:flex-start;gap:0;
}
.nav-in .brand-logo{margin-right:auto;}
.brand-logo{font-family:var(--font);font-weight:700;letter-spacing:-.02em;font-size:19px;color:var(--ink);display:inline-flex;align-items:center;}
.brand-logo .dot{color:var(--cyan);}
.brand-logo img{height:35px;width:auto;display:block;}
.footer .brand-logo img{height:38px;}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0;}
.nav-links a{font-size:14px;color:var(--soft);transition:color var(--dur) var(--e);}
.nav-links a:hover{color:var(--ink);}
/* Aktiver Menüpunkt: rein farblich markiert (Cyan), keine Layout-Verschiebung */
.nav a[aria-current="page"]{color:var(--cyan);}
.nav-mobile a[aria-current="page"]{color:var(--cyan);}
.nav-in .nav-desktop.nav-links{}
.langsw{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:999px;
  padding:3px;gap:2px;font-family:var(--mono);}
.nav-in .langsw{margin-left:28px;}
.langsw a{font-size:12px;letter-spacing:.06em;padding:5px 11px;border-radius:999px;color:var(--faint);
  text-transform:uppercase;transition:color var(--dur) var(--e),background var(--dur) var(--e);}
.langsw a:hover{color:var(--ink);}
.langsw a.active{background:rgba(90,214,255,.14);color:var(--cyan);}
.nav-cta{display:flex;align-items:center;gap:14px;}
.nav-in .nav-cta{margin-left:18px;}
.langsw--mobile{margin-top:14px;justify-content:center;width:max-content;}
.nav-toggle{display:none;}
@media(max-width:860px){
  .nav-desktop{display:none;}
  .nav-toggle{display:block;position:relative;}
  .nav-toggle > summary{
    list-style:none;cursor:pointer;color:var(--ink);font-family:var(--mono);
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    border:1px solid var(--line2);border-radius:999px;padding:9px 15px;
  }
  .nav-toggle > summary::-webkit-details-marker{display:none;}
  .nav-mobile{
    list-style:none;margin:0;padding:18px 22px;position:absolute;right:0;top:48px;
    width:250px;background:rgba(6,10,18,.98);border:1px solid var(--line2);
    border-radius:16px;display:grid;gap:16px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
  }
  .nav-mobile a{color:var(--soft);font-size:15px;}
  .nav-mobile .btn{width:100%;}
}

/* ---- Hero -------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(34px,4.5vw,60px) 0 clamp(48px,6vw,84px);}
.hero .aura{
  position:absolute;top:-6%;left:50%;transform:translateX(-50%);
  width:min(1100px,120vw);height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(40% 44% at 42% 46%,
    rgba(61,120,255,.15),rgba(87,211,255,.05) 46%,transparent 70%);
}
.hero .wrap{position:relative;z-index:1;}
.hero .lead{margin-top:22px;}
.hero .cta-row{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;}

/* Credential-Strip im Hero (füllt den Raum mit Substanz statt Leere) */
.hero-meta{
  display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:34px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);
}
.hero-meta i{font-style:normal;display:inline-flex;align-items:center;gap:20px;}
.hero-meta i::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 8px 1px var(--cyan);
}

/* ---- FUNNEL / LEAK SVG ------------------------------------------------- */
.funnel-fig{margin:0;position:relative;}
/* Breite, zentrierte Variante: Grafik unter dem Text, gut lesbar */
.funnel-fig--wide{max-width:1000px;margin:clamp(36px,5vw,64px) auto 0;}
.funnel-svg{width:100%;height:auto;display:block;overflow:visible;}
.funnel-caption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:18px;text-align:center;
}
/* Achsen-/Stufen-Labels */
.fx-stage{font-family:var(--mono);font-size:12px;fill:var(--soft);letter-spacing:.02em;}
.fx-axis{font-family:var(--mono);font-size:11px;fill:var(--faint);letter-spacing:.08em;}
.fx-leaklabel{font-family:var(--mono);font-size:11px;fill:var(--warm2);letter-spacing:.02em;}
.fx-leakval{font-family:var(--mono);font-size:10px;fill:var(--warm);letter-spacing:.04em;}
/* Beam (verbleibendes ARR) — ohne JS voll sichtbar, mit JS animiert */
.beam-area{opacity:1;transition:opacity 1s ease .55s;}
.beam-line{
  fill:none;stroke:var(--cyan);stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.7s var(--film);
  filter:drop-shadow(0 0 6px rgba(90,214,255,.4));
}
.leak-stream{opacity:1;transform:none;
  transition:opacity .55s var(--e),transform .55s var(--e);}
/* Startzustand nur wenn JS aktiv ist */
.js .beam-area{opacity:0;}
.js .beam-line{stroke-dashoffset:1;}
.js .leak-stream{opacity:0;transform:translateY(-8px);}
.js .funnel-fig.in .beam-line{stroke-dashoffset:0;}
.js .funnel-fig.in .beam-area{opacity:1;}
.js .funnel-fig.in .leak-stream{opacity:1;transform:translateY(0);}
.funnel-fig.in .leak-stream.l1{transition-delay:.55s;}
.funnel-fig.in .leak-stream.l2{transition-delay:.75s;}
.funnel-fig.in .leak-stream.l3{transition-delay:.95s;}
.funnel-fig.in .leak-stream.l4{transition-delay:1.15s;}
.funnel-fig.in .leak-stream.l5{transition-delay:1.35s;}
/* Endpunkt-Node (das EINE atmende Element) */
.endnode-glow{transform-box:fill-box;transform-origin:center;animation:breathe 4.2s var(--e) infinite;}
.endnode-num{
  font-family:var(--mono);font-weight:700;fill:var(--cyan);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.endnode-label{font-family:var(--mono);font-size:11px;fill:var(--cyan);letter-spacing:.08em;}
@keyframes breathe{0%,100%{opacity:.5;}50%{opacity:1;}}

/* ---- Trust / Logos / Testimonials -------------------------------------- */
.logo-strip{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:center;margin-top:36px;}
.logo-ph{
  height:38px;min-width:128px;flex:0 0 auto;border:1px solid var(--line2);
  border-radius:9px;background:rgba(11,17,27,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);
}
/* Logo-Wand: echte Kundenlogos (weiß auf transparent), einheitliche Höhe */
.logo-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px;}
@media(max-width:720px){.logo-wall{grid-template-columns:repeat(2,1fr);}}
.logo-cell{display:flex;align-items:center;justify-content:center;height:66px;padding:0 22px;
  border:1px solid var(--line);border-radius:12px;background:rgba(11,17,27,.35);}
.logo-cell img{max-height:26px;max-width:100%;width:auto;opacity:.6;
  transition:opacity var(--dur) var(--e);}
.logo-cell:hover img{opacity:1;}
.testimonial{border-left:2px solid rgba(90,214,255,.45);padding:4px 0 4px 22px;}
.testimonial blockquote{margin:0;color:var(--ink);font-size:16.5px;line-height:1.5;font-weight:500;}
.testimonial .who{margin-top:14px;color:var(--faint);font-size:12.5px;font-family:var(--mono);letter-spacing:.03em;}

/* ---- Quote author (avatar + meta) ------------------------------------- */
.quote-author{display:flex;align-items:center;gap:12px;margin-top:16px;}
.qa-avatar{
  flex:0 0 auto;height:52px;width:52px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:rgba(90,214,255,.10);border:1px solid rgba(90,214,255,.32);
  color:var(--cyan);font-size:15px;font-weight:700;letter-spacing:.04em;
  font-family:var(--mono);text-transform:uppercase;
}
.qa-avatar img{height:100%;width:100%;border-radius:50%;object-fit:cover;display:block;}
.qa-meta{display:flex;flex-direction:column;line-height:1.35;}
.qa-meta b{color:var(--ink);font-size:14px;font-weight:600;}
.qa-meta span{color:var(--faint);font-size:12px;}

/* ---- Case cards -------------------------------------------------------- */
.case-card{display:flex;flex-direction:column;}
.case-metric{
  color:var(--cyan);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,3.2vw,2.6rem);display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
}
.cm-unit{color:var(--faint);font-size:13px;font-weight:500;letter-spacing:.02em;font-family:var(--mono);text-transform:uppercase;}
.case-company{margin-top:8px;color:var(--ink);font-size:15px;font-weight:600;}
.case-checks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.case-checks li{position:relative;padding-left:26px;color:var(--muted);font-size:14px;line-height:1.45;}
.case-checks li::before{
  content:"";position:absolute;left:0;top:2px;height:16px;width:16px;border-radius:50%;
  background:rgba(90,214,255,.12);border:1px solid rgba(90,214,255,.4);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ad6ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:10px 10px;
}
.case-quote{margin-top:auto;padding-top:20px;}
.case-quote blockquote{margin:0;color:var(--ink);font-size:15px;line-height:1.5;font-weight:500;font-style:italic;}

/* ---- Case Studies page --------------------------------------------------- */
.cs-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.cs-logo{height:30px;width:auto;opacity:.85;}
.cs-summary{font-style:italic;color:var(--ink);max-width:70ch;}
.cs-facts{color:var(--soft);font-size:14.5px;line-height:1.7;max-width:70ch;}
.cs-facts b{color:var(--ink);font-weight:600;}
.cs-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;}
.cs-label::before{content:"";height:6px;width:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px 1px var(--cyan);}
.cs-label--warm::before{background:var(--warm);box-shadow:0 0 10px 1px rgba(255,154,90,.6);}
.cs-block{margin-top:clamp(34px,4vw,52px);}

/* Stat-Kacheln (Ergebnisse als große Zahlen) */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px;}
.stat{border:1px solid var(--line2);border-radius:16px;padding:22px 20px;
  background:linear-gradient(180deg,rgba(13,20,32,.6),rgba(9,15,25,.46));
  box-shadow:inset 0 1px 0 rgba(150,210,255,.06);}
.stat-num{display:block;font-weight:800;color:var(--cyan);font-size:clamp(1.7rem,2.8vw,2.3rem);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;}
.stat-label{display:block;margin-top:9px;color:var(--soft);font-size:13px;line-height:1.4;}
@media(max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr);}}

/* Problem-/Ergebnis-Listen mit Punkt-Markern */
.dot-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:13px;}
.dot-list li{position:relative;padding-left:24px;color:var(--soft);font-size:15px;line-height:1.5;}
.dot-list li b{color:var(--ink);font-weight:600;}
.dot-list li::before{content:"";position:absolute;left:0;top:8px;height:7px;width:7px;border-radius:50%;}
.dot-list--warm li::before{background:var(--warm);box-shadow:0 0 8px rgba(255,154,90,.5);}
.dot-list--cyan li::before{background:var(--cyan);box-shadow:0 0 8px rgba(90,214,255,.5);}

/* Ansatz-Karten (Lab / Build / Advisory) */
.approach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px;align-items:start;}
@media(max-width:900px){.approach-grid{grid-template-columns:1fr;}}
.approach h4{font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);
  margin:18px 0 8px;}
.approach h4:first-of-type{margin-top:6px;}
.approach .a-title{font-size:17px;font-weight:600;color:var(--ink);}
.approach .a-step{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.approach ul{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:8px;}
.approach ul li{position:relative;padding-left:16px;color:var(--soft);font-size:13.5px;line-height:1.5;}
.approach ul li::before{content:"";position:absolute;left:0;top:8px;height:5px;width:5px;border-radius:50%;background:rgba(90,214,255,.6);}
.approach ul li b{color:var(--ink);font-weight:600;}

/* großes Zitat mit Foto */
.cs-quote{display:flex;gap:22px;align-items:flex-start;margin-top:26px;
  border-left:2px solid rgba(90,214,255,.45);padding:6px 0 6px 24px;}
.cs-quote blockquote{margin:0;color:var(--ink);font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;font-weight:500;}
.cs-quote .cs-author{display:flex;align-items:center;gap:13px;margin-top:18px;}
.cs-quote .cs-author img{height:52px;width:52px;border-radius:50%;object-fit:cover;border:1px solid rgba(90,214,255,.32);}
.cs-quote .cs-author b{display:block;color:var(--ink);font-size:15px;}
.cs-quote .cs-author span{color:var(--faint);font-size:13px;}
.cs-honest{margin-top:16px;color:var(--faint);font-size:14px;line-height:1.6;max-width:70ch;}
.cs-honest b{color:var(--soft);}

/* ---- Steps ------------------------------------------------------------- */
.step-icon{
  height:46px;width:46px;border-radius:12px;border:1px solid var(--line2);
  background:rgba(90,214,255,.06);margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;color:var(--cyan);
  font-family:var(--mono);font-weight:600;font-size:15px;
}

/* ---- Fit / Nicht-Fit --------------------------------------------------- */
.fit-col h3{margin-bottom:16px;display:flex;align-items:center;gap:13px;}
.fit-badge{flex:0 0 auto;height:32px;width:32px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid;}
.fit-badge svg{height:17px;width:17px;}
.fit-col--good .fit-badge{border-color:rgba(90,214,255,.42);background:rgba(90,214,255,.12);}
.fit-col--bad .fit-badge{border-color:rgba(255,154,90,.42);background:rgba(255,154,90,.12);}
.fit-col--good{border-top:2px solid rgba(90,214,255,.5);}
.fit-col--bad{border-top:2px solid rgba(255,154,90,.4);}
.fit-col ul{list-style:none;padding:0;}
.fit-col li{position:relative;padding-left:28px;}
.fit-col--good li::before,.fit-col--bad li::before{
  content:"";position:absolute;left:0;top:3px;height:16px;width:16px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.fit-col--good li::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ad6ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.fit-col--bad li::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff9a5a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
}

/* ---- Team -------------------------------------------------------------- */
.member-photo{
  aspect-ratio:4/5;border-radius:14px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(13,20,32,.6),rgba(9,15,25,.5));
  margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim);
}
.member .role{color:var(--cyan);font-family:var(--mono);font-size:12px;letter-spacing:.08em;margin-top:5px;}
.member p{margin-top:12px;font-size:14px;}
.member-photo{overflow:hidden;}
.member-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;}
.member-photo .initials{font-family:var(--mono);font-weight:700;font-size:clamp(26px,2.4vw,32px);letter-spacing:.02em;color:#cfe8ff;}
/* Team als 2x2 mit horizontalen Karten (Foto links, Text rechts) */
.member--h{display:flex;gap:22px;align-items:flex-start;}
.member--h .member-photo{flex:0 0 150px;width:150px;aspect-ratio:4/5;margin-bottom:0;}
.member--h .m-body{flex:1;min-width:0;}
.member--h .m-body p{font-size:14px;}
@media(max-width:560px){
  .member--h{flex-direction:column;}
  .member--h .member-photo{width:150px;flex:0 0 auto;}
}

/* ---- FAQ (natives details/summary) ------------------------------------ */
.faq{max-width:780px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:17px;font-weight:600;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-family:var(--mono);color:var(--cyan);font-size:22px;line-height:1;
  transition:transform var(--dur) var(--e);
}
.faq details[open] summary::after{content:"–";}
.faq details p{padding:0 0 22px;max-width:64ch;}

/* ---- Formular ---------------------------------------------------------- */
.form{max-width:640px;display:grid;gap:20px;}
.field{display:grid;gap:8px;}
.field label{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.input,.select,.textarea{
  width:100%;background:rgba(5,9,16,.72);border:1px solid var(--line2);
  border-radius:12px;padding:14px 16px;color:var(--ink);
  font-family:var(--font);font-size:15px;outline:none;
  transition:border-color .15s var(--e),box-shadow .15s var(--e);
}
.textarea{min-height:150px;resize:vertical;}
.input:focus,.select:focus,.textarea:focus{
  border-color:var(--cyan);box-shadow:0 0 0 3px rgba(90,214,255,.16);
}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.field-help{font-family:var(--mono);font-size:11px;color:var(--faint);}

/* ---- Finale / zentrierte Sektion --------------------------------------- */
.finale{text-align:center;position:relative;z-index:1;}
.finale .h2{margin:0 auto;max-width:24ch;}
.finale .lead{margin:22px auto 32px;}

/* ---- Section-Header / Doc ---------------------------------------------- */
.section-head{max-width:60ch;margin-bottom:48px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .lead{margin-left:auto;margin-right:auto;}
.section-head .lead{margin-top:16px;}

/* Anker-Sprünge nicht unter der Sticky-Nav verstecken */
html{scroll-padding-top:84px;}

/* Legal-Layout: sticky Inhalts-/Info-Spalte links, Text rechts */
.legal{display:grid;grid-template-columns:240px 1fr;gap:clamp(30px,4vw,56px);align-items:start;}
@media(max-width:860px){.legal{grid-template-columns:1fr;gap:26px;}}
.legal-aside{position:sticky;top:88px;}
@media(max-width:860px){.legal-aside{position:static;top:auto;}}
.toc-title{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;padding-left:14px;}
.legal-toc{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);}
.legal-toc li + li{margin-top:0;}
.legal-toc a{display:block;padding:8px 14px;font-size:13.5px;color:var(--soft);border-left:2px solid transparent;margin-left:-1px;transition:color var(--dur) var(--e),border-color var(--dur) var(--e);}
.legal-toc a:hover{color:var(--ink);border-left-color:var(--line3);}

/* Eingesetzte Dienste als Karten */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:6px 0 18px;}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr;}}
.svc{border:1px solid var(--line2);border-radius:12px;padding:13px 15px;
  background:linear-gradient(180deg,rgba(13,20,32,.5),rgba(9,15,25,.4));}
.svc b{color:var(--ink);font-weight:600;font-size:14px;}
.svc span{display:block;color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.03em;margin-top:4px;}

/* Fakten-Liste in der Betreiber-Karte */
.facts{margin:0;}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.facts dd{margin:3px 0 15px;color:var(--ink);font-size:14px;line-height:1.55;}
.facts dd:last-child{margin-bottom:0;}
.facts a{color:var(--brand-300);}
.facts a:hover{color:var(--cyan);}

/* Ihre Rechte als Häkchen-Liste */
.rights{list-style:none;padding:0;margin:2px 0 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;}
@media(max-width:560px){.rights{grid-template-columns:1fr;}}
.rights li + li{margin-top:0;}
.rights li{position:relative;padding-left:24px;color:var(--soft);}
.rights li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:700;}

/* Legal / Doc-Prosa */
.doc-body{max-width:760px;}
.doc-body h2{font-size:1.35rem;margin-top:44px;margin-bottom:14px;letter-spacing:-.02em;}
.doc-body h2:first-of-type{margin-top:0;}
.doc-body p{margin-bottom:14px;line-height:1.7;}
.doc-body ul{margin:0 0 16px;}
.doc-body a{color:var(--brand-300);}
.doc-body a:hover{color:var(--cyan);}
.doc-meta{
  border:1px solid var(--line2);border-radius:14px;padding:20px 22px;margin:8px 0 20px;
  background:linear-gradient(180deg,rgba(13,20,32,.5),rgba(9,15,25,.4));
}
.doc-meta p{margin:0;line-height:1.6;color:var(--soft);}
.doc-meta .lbl{color:var(--faint);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px;}
.doc-stamp{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:32px;}

/* ---- Footer ------------------------------------------------------------ */
.footer{background:var(--deep);border-top:1px solid var(--line);padding:64px 0 36px;position:relative;z-index:1;}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;}
.footer-brand{max-width:440px;}
.footer-brand .brand-logo{margin-bottom:22px;}
.footer-tag{color:var(--soft);font-size:14.5px;line-height:1.6;margin:0;}
.footer-h{color:var(--ink);font-size:15px;font-weight:600;margin:0 0 18px;}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.footer-col a{font-size:14px;color:var(--soft);transition:color var(--dur) var(--e);}
.footer-col a:hover{color:var(--ink);}
.footer-social a{display:inline-flex;align-items:center;gap:11px;}
.footer-social svg{height:18px;width:18px;flex:0 0 auto;color:var(--soft);transition:color var(--dur) var(--e);}
.footer-social a:hover svg{color:var(--cyan);}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:52px;padding-top:28px;border-top:1px solid var(--line);}
.footer-copy{color:var(--faint);font-size:12.5px;font-family:var(--mono);letter-spacing:.02em;margin:0;}
.footer-legal-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
.footer-legal-links a{color:var(--faint);font-size:13px;transition:color var(--dur) var(--e);}
.footer-legal-links a:hover{color:var(--ink);}
@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .footer-brand{grid-column:1 / -1;}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* Founder-Card (Homepage "Über Reventrum") */
.founder-card{display:flex;align-items:center;gap:20px;}
.founder-card img{height:140px;width:114px;object-fit:cover;border-radius:16px;border:1px solid var(--line2);flex:0 0 auto;}
.founder-card figcaption{display:flex;flex-direction:column;gap:4px;}
.founder-card figcaption b{color:var(--ink);font-size:16px;font-weight:600;}
.founder-card figcaption .fc-role{color:var(--cyan);font-size:13px;font-weight:500;}
.founder-card figcaption .fc-note{color:var(--faint);font-size:13px;line-height:1.5;margin-top:2px;}

/* ---- Utility ----------------------------------------------------------- */
.center{text-align:center;}
.mt-s{margin-top:16px;}
.mt-m{margin-top:28px;}
.mt-l{margin-top:44px;}

/* ---- Hero Startseite (zweispaltig, große Typo) ------------------------- */
.hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;}
.hero h1 .accent{color:var(--cyan);}
.hero-grid{display:grid;grid-template-columns:1.02fr .82fr;gap:clamp(32px,4vw,56px);align-items:center;}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px;}}
/* Subheadline enger an die Headline, Tick kleinerer Zeilenabstand (stärkerer Kontrast) */
.hero-copy .lead{margin-top:15px;max-width:42ch;font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.5;}
.hero-sub{margin-top:14px;max-width:46ch;font-size:14.5px;color:var(--soft);line-height:1.58;}

/* ICP-Chips: dichter unter der Subheadline, etwas heller */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line3);border-radius:999px;
  padding:8px 15px 8px 13px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  text-transform:uppercase;color:#d0dbee;background:rgba(15,24,38,.5);}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 8px 1px var(--cyan);}

/* Mini-Garantie: zweite Zeile klar hervorgehoben */
.hint .hint-strong{color:var(--cyan);}

/* Garantie-Zeile */
.guarantee{display:flex;gap:13px;align-items:flex-start;margin-top:24px;max-width:52ch;
  border:1px solid rgba(90,214,255,.28);border-radius:14px;padding:16px 18px;
  background:radial-gradient(120% 100% at 0% 0%,rgba(48,108,142,.16),transparent 70%),rgba(11,17,27,.4);}
.guarantee .g-ic{flex:0 0 auto;width:23px;height:23px;border-radius:50%;border:1px solid rgba(90,214,255,.5);
  color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px;}
.guarantee p{color:var(--ink);font-size:14px;line-height:1.5;}
.guarantee b{color:var(--cyan);font-weight:600;}

/* Hero-Visual: Mini-Flow Lab -> Build -> Advisory */
.hero-visual{position:relative;}
.hero-flow{display:grid;gap:11px;}
.flow-node{position:relative;border:1px solid var(--line2);border-radius:16px;padding:16px 18px;
  background:linear-gradient(180deg,rgba(13,20,32,.6),rgba(9,15,25,.5));}
.flow-node .fn-step{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;}
.flow-node .fn-title{font-weight:600;color:var(--ink);margin-top:5px;font-size:15px;}
.flow-node .fn-desc{font-size:12.5px;color:var(--soft);margin-top:6px;line-height:1.45;}
.flow-node--active{border-color:rgba(90,214,255,.5);
  background:radial-gradient(100% 100% at 50% 0%,rgba(48,108,142,.28),transparent 70%),linear-gradient(180deg,rgba(13,22,36,.7),rgba(9,16,27,.5));
  box-shadow:0 26px 74px -42px rgba(90,214,255,.6),inset 0 1px 0 rgba(165,225,255,.12);}
.flow-node--active .fn-step{color:var(--cyan);}
.flow-badge{position:absolute;top:14px;right:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);border:1px solid rgba(90,214,255,.4);border-radius:999px;padding:3px 8px;}
.flow-arrow{justify-self:center;color:var(--faint);font-size:15px;line-height:.6;}

/* Hero-Panel: "Unser Revenue System in 3 Schritten" (nur Titel, verbunden) */
.hero-panel{
  border:1px solid var(--line2);border-radius:20px;padding:26px 28px;
  background:linear-gradient(180deg,rgba(13,20,32,.6),rgba(9,15,25,.5));
  box-shadow:inset 0 1px 0 rgba(150,210,255,.06),0 40px 120px -60px rgba(0,0,0,.9);
}
.hero-panel .hp-title{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:24px;display:flex;align-items:center;gap:10px;
}
.hero-panel .hp-title::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 10px 1px var(--cyan);
}
.hero-rail{position:relative;display:grid;gap:22px;}
.hero-rail::before{
  content:"";position:absolute;left:17px;top:18px;bottom:18px;width:1px;
  background:linear-gradient(180deg,rgba(90,214,255,.55),var(--line2));
}
.rail-step{display:flex;align-items:center;gap:15px;position:relative;z-index:1;}
.rail-step .rs-dot{
  flex:0 0 auto;width:35px;height:35px;border-radius:10px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;color:var(--soft);background:rgba(5,9,16,.85);
}
.rail-step .rs-title{font-weight:600;color:var(--ink);font-size:15px;letter-spacing:-.01em;}
.rail-step .rs-paren{color:var(--faint);font-weight:400;}
/* Step 01 nur über den Dot hervorheben (kein Rahmen, kein faded Hintergrund) */
.rail-step--active .rs-dot{
  border-color:rgba(90,214,255,.7);color:var(--cyan);background:rgba(48,108,142,.32);
  box-shadow:0 0 30px 0 rgba(90,214,255,.9);
}
.rail-step--active .rs-title{color:#eafaff;}
.hero-panel .hp-foot{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);
}
.hero-panel .hp-foot b{color:var(--cyan);font-weight:500;}
/* Einfache Liste im Panel (nicht-sequenziell: Prinzipien, Fakten) */
.hp-list{display:grid;gap:15px;margin:0;padding:0;}
.hp-list li{list-style:none;display:flex;gap:12px;align-items:flex-start;color:var(--ink);font-size:15px;font-weight:500;line-height:1.4;}
.hp-list li::before{content:"";margin-top:8px;width:6px;height:6px;border-radius:50%;flex:0 0 auto;
  background:var(--cyan);box-shadow:0 0 8px 1px var(--cyan);}
.hp-list li .cyan{font-family:var(--mono);font-size:13.5px;}

/* ---- System-Build-Diagramm (People/Process/Platform -> Revenue OS) ----- */
.build-fig{margin:clamp(34px,4.5vw,56px) auto 0;max-width:780px;}
.build-svg{width:100%;height:auto;display:block;overflow:visible;}
.build-caption{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:16px;text-align:center;}
.bl-rect{fill:rgba(13,20,32,.62);stroke:rgba(128,166,224,.22);stroke-width:1;}
.bl-dot{fill:var(--cyan);}
.bl-title{font-family:var(--font);font-weight:600;fill:var(--ink);font-size:16px;}
.bl-sub{font-family:var(--mono);fill:var(--faint);font-size:11px;letter-spacing:.02em;}
.connector{fill:none;stroke:var(--cyan);stroke-width:2;stroke-linecap:round;opacity:.72;
  filter:drop-shadow(0 0 5px rgba(90,214,255,.4));stroke-dasharray:1;stroke-dashoffset:0;}
.core-glow{transform-box:fill-box;transform-origin:center;animation:breathe 4.2s var(--e) infinite;}
.core-ring{fill:rgba(48,108,142,.30);stroke:rgba(90,214,255,.6);stroke-width:1.5;}
.core-label{font-family:var(--mono);font-weight:700;fill:var(--cyan);font-size:15px;letter-spacing:-.01em;}
.core-os{font-family:var(--mono);font-weight:700;fill:#eafaff;font-size:13px;letter-spacing:.06em;}
.core-name{font-family:var(--mono);fill:var(--soft);font-size:12px;letter-spacing:.04em;}

/* no-JS: alles im Endzustand; nur mit JS Start-Zustand + Reveal */
.bl{opacity:1;transform:none;}
.core-node{opacity:1;transform:none;transform-box:fill-box;transform-origin:center;}
.js .bl{opacity:0;transform:translateX(-12px);transition:opacity .6s var(--film),transform .6s var(--film);}
.js .build-fig.in .bl{opacity:1;transform:none;}
.js .build-fig.in .bl2{transition-delay:.12s;}
.js .build-fig.in .bl3{transition-delay:.24s;}
.js .connector{stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--film);}
.js .build-fig.in .connector{stroke-dashoffset:0;}
.js .build-fig.in .c1{transition-delay:.34s;}
.js .build-fig.in .c2{transition-delay:.49s;}
.js .build-fig.in .c3{transition-delay:.64s;}
.js .core-node{opacity:0;transform:scale(.82);transition:opacity .6s var(--film),transform .6s var(--film);}
.js .build-fig.in .core-node{opacity:1;transform:none;transition-delay:.78s;}

/* Prozentwerte in der Funnel-Grafik hervorheben */
.fx-dim{fill:var(--faint);}
.fx-num{fill:var(--warm2);font-weight:500;}
.fx-ytitle{font-family:var(--mono);font-size:11px;fill:var(--faint);letter-spacing:.14em;text-transform:uppercase;}
.funnel-cta{display:flex;justify-content:center;margin-top:20px;}

/* Mini-Flow unter den Step-Cards */
.mini-flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:30px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;color:var(--soft);}
.mini-flow .mf{display:inline-flex;align-items:center;gap:9px;}
.mini-flow .mf .i{color:var(--cyan);}
.mini-flow .mf-sep{color:var(--faint);}

/* Entry-Card (Stufe 1 stärker) + Badge */
.card--entry{border-color:rgba(90,214,255,.55);
  box-shadow:0 44px 116px -44px rgba(90,214,255,.65),inset 0 1px 0 rgba(165,225,255,.16);}
.card__badge{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cyan);border:1px solid rgba(90,214,255,.45);border-radius:999px;padding:3px 9px;}

/* Nummerierte Schritte (klein) */
.nsteps{display:grid;gap:16px;margin-top:6px;}
.nstep{display:flex;gap:14px;align-items:flex-start;}
.nstep .n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);
  color:var(--cyan);font-family:var(--mono);font-size:13px;display:flex;align-items:center;justify-content:center;}
.nstep p{color:var(--soft);font-size:14.5px;line-height:1.45;}
.nstep b{color:var(--ink);}

/* Start-Schritte (3 große Karten) */
.start-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:860px){.start-steps{grid-template-columns:1fr;}}
.start-step .sn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;}
.start-step h3{margin-top:12px;}
.start-step p{margin-top:8px;font-size:14px;}

/* ---- Motion / Reveal --------------------------------------------------- */
/* Ohne JS: Inhalte sofort sichtbar. Mit JS (html.js): erst versteckt, dann Reveal. */
.reveal{opacity:1;transform:none;}
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--film),transform .8s var(--film);}
.js .reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.06s;}
.reveal.d2{transition-delay:.13s;}
.reveal.d3{transition-delay:.20s;}
.reveal.d4{transition-delay:.27s;}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto;}
  .reveal,.js .reveal{opacity:1!important;transform:none!important;transition:none;}
  .beam-line,.js .beam-line{stroke-dashoffset:0!important;transition:none;}
  .beam-area,.js .beam-area{opacity:1!important;transition:none;}
  .leak-stream,.js .leak-stream{opacity:1!important;transform:none!important;transition:none;}
  .bl,.js .bl{opacity:1!important;transform:none!important;transition:none;}
  .connector,.js .connector{stroke-dashoffset:0!important;transition:none;}
  .core-node,.js .core-node{opacity:1!important;transform:none!important;transition:none;}
}