/* =========================================================================
   Provels – Marketing-Website  ·  eigenständig, kein gemeinsamer Code mit der App
   Designsprache bewusst wie die Software: Weiß + Navy (#0A2540) + Blau (#2563EB).
   ========================================================================= */

/* Lokale Schriftarten – selbst gehostet, kein Google-CDN (keine Drittübertragung der IP). */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-700.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/jakarta-600.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/jakarta-700.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/jakarta-800.woff2') format('woff2'); }

:root{
  --navy-900:#0A2540;
  --navy-800:#0E2E4F;
  --navy-700:#13396180;
  --blue-600:#2563EB;
  --blue-500:#3B82F6;
  --blue-400:#60A5FA;
  --blue-300:#93C0F9;

  --ink:#0A2540;
  --text:#334155;
  --text-soft:#64748B;
  --muted:#94A3B8;

  --bg:#FFFFFF;
  --bg-tint:#F4F8FE;
  --bg-tint-2:#EEF4FC;
  --surface:#FFFFFF;
  --border:#E2E9F3;
  --border-strong:#CCD9EA;

  --ok:#16A34A; --ok-bg:#E7F6EC;
  --warn:#B45309; --warn-bg:#FCF1DF;
  --info:#2563EB; --info-bg:#E7EFFD;

  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(10,37,64,.06), 0 2px 8px rgba(10,37,64,.04);
  --shadow-md:0 10px 30px rgba(10,37,64,.10), 0 2px 8px rgba(10,37,64,.05);
  --shadow-lg:0 30px 70px rgba(10,37,64,.22), 0 8px 24px rgba(10,37,64,.12);

  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);

  --font-body:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head:"Plus Jakarta Sans", var(--font-body);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ font-family:var(--font-head); color:var(--ink); margin:0; line-height:1.12;
  letter-spacing:-.02em; font-weight:800; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ----------------------------- Buttons ----------------------------- */
.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-body);
  font-weight:600; font-size:.97rem; border-radius:11px; padding:12px 20px; cursor:pointer;
  border:1px solid transparent; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, color .18s, border-color .18s; white-space:nowrap; }
.btn-sm{ padding:9px 16px; font-size:.9rem; }
.btn-lg{ padding:15px 28px; font-size:1.04rem; border-radius:13px; }
.btn-block{ display:flex; width:100%; justify-content:center; }
.btn-primary{ background:var(--blue-600); color:#fff; box-shadow:0 8px 22px rgba(37,99,235,.32); }
.btn-primary:hover{ background:#1D4FD8; transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,.42); }
.btn-ghost-light{ background:rgba(255,255,255,.07); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--bg-tint); border-color:var(--blue-400); }

/* ----------------------------- Nav ----------------------------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .3s, box-shadow .3s, border-color .3s;
  border-bottom:1px solid transparent; }
.nav-inner{ display:flex; align-items:center; gap:24px; height:72px; }
.nav.scrolled{ background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--border); box-shadow:0 1px 0 rgba(10,37,64,.03); }

.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-head); font-weight:800;
  font-size:1.18rem; color:#fff; letter-spacing:-.02em; transition:color .3s; }
.nav.scrolled .brand{ color:var(--ink); }
.brand-mark{ display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(150deg, var(--blue-500), var(--navy-900)); color:#fff;
  box-shadow:0 6px 16px rgba(37,99,235,.35); flex:0 0 auto; }
.brand-soft{ color:inherit; }

.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{ position:relative; font-size:.96rem; font-weight:500; color:rgba(255,255,255,.82); transition:color .2s; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px;
  background:currentColor; opacity:.7; transform:scaleX(0); transform-origin:center; transition:transform .25s var(--ease); }
.nav-links a:hover{ color:#fff; }
.nav-links a:hover::after{ transform:scaleX(1); }
.nav.scrolled .nav-links a{ color:var(--text); }
.nav.scrolled .nav-links a:hover{ color:var(--blue-600); }
.nav-cta{ margin-left:6px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }
.nav.scrolled .nav-toggle span{ background:var(--ink); }

/* ----------------------------- Hero ----------------------------- */
.hero{ position:relative; overflow:hidden; background:linear-gradient(165deg, #0B2748 0%, #0A2540 55%, #081D34 100%);
  color:#fff; padding:150px 0 96px; }
.hero-bg{ position:absolute; inset:0; pointer-events:none; }
.hero-grid{ position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:54px 54px; mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 72%); }
.hero-glow{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; }
.hero-glow-a{ width:540px; height:540px; top:-160px; right:-120px;
  background:radial-gradient(circle, rgba(37,99,235,.55), transparent 65%); animation:floaty 14s var(--ease) infinite alternate; }
.hero-glow-b{ width:460px; height:460px; bottom:-180px; left:-100px;
  background:radial-gradient(circle, rgba(59,130,246,.32), transparent 65%); animation:floaty 18s var(--ease) infinite alternate-reverse; }
@keyframes floaty{ from{ transform:translate(0,0); } to{ transform:translate(-40px,30px); } }

.hero-inner{ position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.hero-copy{ max-width:620px; }

/* Zentrierter, minimaler Hero (ohne Produktbild) */
.hero-inner-center{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:18px 0; }
.hero-inner-center .hero-copy{ max-width:780px; }
.hero-inner-center .lead{ margin-left:auto; margin-right:auto; }
.hero-inner-center .hero-actions{ justify-content:center; }
.hero-inner-center .hero-chips{ justify-content:center; }

.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:.82rem; font-weight:600;
  letter-spacing:.02em; color:var(--blue-300); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); padding:7px 14px; border-radius:100px; margin-bottom:24px; }
.eyebrow-dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-400); box-shadow:0 0 0 4px rgba(96,165,250,.22); }

.hero h1{ font-size:clamp(2.5rem, 5.2vw, 4.1rem); color:#fff; line-height:1.04; margin-bottom:22px; }
.grad{ background:linear-gradient(100deg, #7FB2FF, #3B82F6 60%, #BCD6FF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.25rem); color:#C7D6EA; line-height:1.6; max-width:560px; }

.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-actions-center{ justify-content:center; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:40px; }
.hero-chips span{ font-size:.8rem; font-weight:500; color:#AFC4DE; padding:6px 13px; border-radius:8px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); }

/* Produkt-Mock */
.hero-mock{ position:relative; }
.mock-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); color:var(--text); }
.mock-main{ padding:8px; }
.mock-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 12px; }
.mock-title{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:1.02rem; }
.mock-live{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-bg); }
.mock-meta{ font-size:.78rem; color:var(--text-soft); }
.mock-row{ display:flex; align-items:center; gap:10px; padding:13px 14px; border-top:1px solid var(--border); }
.mock-name{ flex:1; font-weight:600; color:var(--ink); font-size:.92rem; }
.tier{ font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:7px; }
.tier-1{ background:#FDE9E6; color:#C0392B; }
.tier-2{ background:#FCF1DF; color:#B45309; }
.tier-3{ background:#E7EFFD; color:#2563EB; }
.pill{ font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:100px; }
.pill-ok{ background:var(--ok-bg); color:var(--ok); }
.pill-info{ background:var(--info-bg); color:var(--info); }
.pill-warn{ background:var(--warn-bg); color:var(--warn); }
.mock-foot{ display:flex; align-items:center; gap:8px; padding:14px; margin:8px; border-radius:12px;
  background:var(--bg-tint); font-size:.82rem; font-weight:600; color:var(--ink); }
.mock-foot svg{ color:var(--ok); }
.mock-hash{ margin-left:auto; font-family:ui-monospace, "SF Mono", Menlo, monospace; font-weight:500; color:var(--muted); font-size:.78rem; }

.mock-badge{ position:absolute; bottom:-26px; left:-28px; display:flex; align-items:center; gap:12px;
  padding:14px 18px; transition-delay:.15s; }
.mock-badge-ico{ display:grid; place-items:center; width:42px; height:42px; border-radius:11px;
  background:linear-gradient(150deg, var(--blue-500), var(--navy-900)); color:#fff; flex:0 0 auto; }
.mock-badge-t{ font-family:var(--font-head); font-weight:700; color:var(--ink); font-size:.92rem; }
.mock-badge-s{ font-size:.78rem; color:var(--text-soft); }

/* ----------------------------- Band (Leitplanken) ----------------------------- */
.band{ background:var(--navy-900); }
.band-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.08);
  border-radius:0; }
.band-item{ background:var(--navy-900); padding:34px 30px; }
.band-item h3{ color:#fff; font-size:1.12rem; margin-bottom:8px; }
.band-item h3::before{ content:""; display:block; width:30px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--blue-400),var(--blue-600)); margin-bottom:14px; }
.band-item p{ color:#A9BED8; font-size:.95rem; line-height:1.55; }

/* ----------------------------- Sections ----------------------------- */
.section{ padding:clamp(72px,9vw,118px) 0; }
.section-tint{ background-color:var(--bg-tint); }
/* Millimeterpapier-Raster in den hellen Sektionen ENTFERNT (Nutzer-Wunsch 22.06.) —
   das karierte Raster bleibt jetzt NUR ganz oben im Hero (.hero-grid). */
.sec-head{ max-width:760px; margin-bottom:54px; }
.sec-head.sec-head-light h2{ color:#fff; }
.sec-head-light .sec-sub{ color:#C7D6EA; }   /* heller Untertitel auf dunklem Hintergrund (Kontrast-Fix) */
.sec-eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-600); margin-bottom:14px; }
.sec-head h2{ font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.1; }
.sec-sub{ margin-top:18px; font-size:1.1rem; color:var(--text-soft); line-height:1.6; }

/* Split (Problem) */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:54px; align-items:center; }
.big-text{ font-size:1.22rem; color:var(--ink); line-height:1.55; font-weight:500; }
.big-text strong{ color:var(--blue-600); font-weight:700; }
.muted-text{ margin-top:22px; padding:14px 18px; border-left:3px solid var(--blue-500);
  background:var(--bg-tint); border-radius:0 10px 10px 0; color:var(--text); font-size:1rem; line-height:1.55; }
.pain-list{ list-style:none; margin:0; padding:12px 24px; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md); }
.pain-list li{ display:flex; align-items:center; gap:14px; padding:16px 0; font-size:1.02rem; color:var(--ink);
  font-weight:500; border-bottom:1px solid var(--border); }
.pain-list li:last-child{ border-bottom:0; }
.pain-list .x{ display:inline-grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:50%;
  background:#FDECEA; color:#C0392B; font-size:.78rem; font-weight:800; }

/* „Warum jetzt": Problem vs. Gefahr (zwei klare Karten) */
.why-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.why-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:30px 28px; box-shadow:var(--shadow-sm); }
.why-card-danger{ background:linear-gradient(180deg, #FFF8F7, #fff); border-color:#F3D6D1; }
.why-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--border); }
.why-card-danger .why-head{ border-bottom-color:#F3D6D1; }
.why-ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:13px; flex:0 0 auto; }
.why-ico svg{ width:24px; height:24px; }
.why-ico-problem{ background:linear-gradient(150deg, #EAF1FE, #DCE8FC); color:var(--blue-600); }
.why-ico-danger{ background:#FDECEA; color:#C0392B; }
.why-head h3{ font-size:1.18rem; }
.why-head p{ font-size:.9rem; color:var(--text-soft); margin-top:3px; }
.why-list{ list-style:none; margin:0; padding:0; }
.why-list li{ position:relative; padding:11px 0 11px 26px; color:var(--text); font-size:.98rem; line-height:1.5;
  border-bottom:1px solid var(--border); }
.why-list li:last-child{ border-bottom:0; }
.why-list li::before{ content:""; position:absolute; left:3px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--blue-500); }
.why-card-danger .why-list li{ border-bottom-color:#F3D6D1; }
.why-list-danger li::before{ background:#C0392B; border-radius:2px; transform:rotate(45deg); }

/* Cards (4 / 3) */
.cards-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cards-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.feature::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--blue-500), var(--blue-600)); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease); }
.feature:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.feature:hover::before{ transform:scaleX(1); }
.feature-ico{ display:grid; place-items:center; width:54px; height:54px; border-radius:15px;
  background:linear-gradient(150deg, var(--blue-500), var(--navy-900)); color:#fff; margin-bottom:22px;
  box-shadow:0 8px 18px rgba(37,99,235,.28); }
.feature-ico svg{ width:26px; height:26px; }
.feature h3{ font-size:1.18rem; margin-bottom:11px; }
.feature p{ font-size:.96rem; color:var(--text-soft); line-height:1.6; }

/* Flow */
.flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.flow-step{ position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 22px; box-shadow:var(--shadow-sm); }
.flow-num{ display:grid; place-items:center; width:40px; height:40px; border-radius:11px; font-family:var(--font-head);
  font-weight:800; color:#fff; background:linear-gradient(150deg, var(--blue-500), var(--navy-900)); margin-bottom:16px;
  box-shadow:0 6px 16px rgba(37,99,235,.3); }
.flow-step h4{ font-size:1.05rem; margin-bottom:8px; }
.flow-step p{ font-size:.9rem; color:var(--text-soft); line-height:1.55; }

/* Stufen */
.stufe{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:30px 28px;
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.stufe:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.stufe-feat{ border:1.5px solid var(--blue-500); box-shadow:0 18px 44px rgba(37,99,235,.16); position:relative; }
.stufe-feat::after{ content:"Häufig gewählt"; position:absolute; top:-12px; right:22px; font-size:.7rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--blue-600); padding:5px 12px; border-radius:100px; }
.stufe-top{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; }
.stufe-n{ font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--ink); }
.stufe-tag{ font-size:.82rem; font-weight:600; color:var(--blue-600); background:var(--info-bg); padding:4px 11px; border-radius:100px; }
.stufe-desc{ font-size:.98rem; color:var(--text); line-height:1.6; }
.stufe-for{ margin-top:18px; padding-top:16px; border-top:1px solid var(--border); font-size:.86rem; color:var(--text-soft); }

/* Frameworks */
.frame-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.frame{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-sm); padding:22px 20px;
  transition:transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.frame:hover{ transform:translateY(-4px); border-color:var(--blue-400); box-shadow:var(--shadow-sm); }
.frame b{ display:block; font-family:var(--font-head); font-size:1.08rem; color:var(--ink); margin-bottom:6px; }
.frame span{ font-size:.86rem; color:var(--text-soft); line-height:1.45; }

/* Differenzierung (dark) */
.section-dark{ background:linear-gradient(165deg,#0B2748,#081D34); }
.vs{ display:grid; grid-template-columns:1fr 1.7fr 1fr; gap:22px; align-items:center; }
.vs-col{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); padding:26px 22px; }
.vs-mid{ background:#fff; border-color:#fff; box-shadow:var(--shadow-lg); padding:44px 38px; border-radius:calc(var(--radius) + 4px); margin:-8px 0; }
.vs-label{ font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:#AFC4DE; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.12); }
.vs-label-accent{ color:var(--ink); border-bottom-color:var(--border); }
.vs-mid .vs-label{ font-size:1.22rem; }
.vs-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.vs-col li{ font-size:.96rem; color:#9FB6D2; display:flex; gap:9px; align-items:flex-start; }
.vs-mid li{ color:var(--text); font-weight:500; font-size:1.02rem; }
.vs-mid .ok{ color:var(--ok); font-weight:800; flex:0 0 auto; }

/* Steuerung (Management-USP, dark) */
.steer{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.steer-points{ display:flex; flex-direction:column; gap:24px; }
.steer-item{ display:flex; gap:16px; align-items:flex-start; }
.steer-ico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); color:var(--blue-300); }
.steer-ico svg{ width:22px; height:22px; }
.steer-item h4{ color:#fff; font-size:1.1rem; margin-bottom:6px; }
.steer-item p{ color:#A9BED8; font-size:.96rem; line-height:1.55; }

.cockpit-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:24px 24px 22px; }
.cockpit-head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-head);
  font-weight:700; color:var(--ink); font-size:1.02rem; margin-bottom:20px; }
.cockpit-head span{ font-size:.7rem; font-weight:600; color:var(--text-soft); background:var(--bg-tint-2); padding:4px 10px; border-radius:100px; }
.cockpit-note{ margin-top:14px; text-align:center; font-size:.74rem; color:var(--muted); }
.cockpit-top{ display:flex; gap:22px; align-items:center; margin-bottom:20px; }
@property --p{ syntax:"<number>"; inherits:false; initial-value:86; }
.gauge{ position:relative; width:108px; height:108px; flex:0 0 auto; border-radius:50%;
  background:conic-gradient(var(--blue-600) calc(var(--p) * 1%), var(--bg-tint-2) 0); }
.gauge.fill{ animation:gaugeFill 1.2s var(--ease) forwards; }
@keyframes gaugeFill{ from{ --p:0; } to{ --p:86; } }
.gauge-in{ position:absolute; inset:11px; background:#fff; border-radius:50%; display:grid; place-content:center; text-align:center; }
.gauge-in b{ font-family:var(--font-head); font-size:1.4rem; color:var(--ink); display:block; line-height:1; }
.gauge-in span{ font-size:.66rem; color:var(--text-soft); }
.cockpit-kpis{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cockpit-kpis div{ background:var(--bg-tint); border-radius:10px; padding:13px 6px; text-align:center; }
.cockpit-kpis b{ font-family:var(--font-head); font-size:1.32rem; color:var(--ink); display:block; line-height:1.1; }
.cockpit-kpis span{ font-size:.72rem; color:var(--text-soft); }
.cockpit-trend{ display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--border); }
.ct-label{ font-size:.82rem; color:var(--text-soft); white-space:nowrap; }
.ct-bars{ flex:1; display:flex; align-items:flex-end; gap:6px; height:38px; }
.ct-bars i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(var(--blue-400), var(--blue-600)); }
.ct-down{ font-size:.78rem; font-weight:600; color:var(--ok); white-space:nowrap; }

/* Trust */
.trust{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-sm); }
.trust h4{ font-size:1.06rem; margin-bottom:10px; }
.trust h4::before{ content:""; display:block; width:26px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-600)); margin-bottom:13px; }
.trust p{ font-size:.92rem; color:var(--text-soft); line-height:1.58; }
.trust .soft{ color:var(--muted); }

/* Preise */
.price-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.price-card{ position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 30px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.price-tag{ display:inline-flex; align-self:flex-start; align-items:center; font-size:.7rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--blue-600); background:var(--info-bg);
  border-radius:999px; padding:5px 12px; margin-bottom:18px; }
.price-card h3{ font-size:1.32rem; margin-bottom:6px; }
.price-basis{ font-size:.84rem; font-weight:600; color:var(--muted); letter-spacing:.01em; margin-bottom:18px; }
.price-lead{ font-size:1rem; color:var(--text); line-height:1.55; margin-bottom:22px; }
.price-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.price-list li{ position:relative; padding-left:30px; font-size:.93rem; color:var(--text-soft); line-height:1.5; }
.price-list strong{ color:var(--ink); font-weight:600; }
.price-list li::before{ content:""; position:absolute; left:0; top:0; width:19px; height:19px;
  border-radius:50%; background:var(--info-bg); }
.price-list li::after{ content:""; position:absolute; left:6.5px; top:4px; width:5px; height:9px;
  border:solid var(--blue-600); border-width:0 2px 2px 0; transform:rotate(45deg); }

/* Hervorgehobene Pilot-Karte (dunkel, mit CTA) */
.price-cta{ background:linear-gradient(165deg,#0E3052,#0A2540); border-color:transparent; }
.price-cta .price-tag{ color:#fff; background:rgba(255,255,255,.14); }
.price-cta h3{ color:#fff; }
.price-cta .price-basis{ color:var(--blue-300); }
.price-cta .price-lead{ color:#DCE7F5; }
.price-cta .price-list li{ color:#B9CBE3; }
.price-cta .price-list strong{ color:#fff; }
.price-cta .price-list li::before{ background:rgba(255,255,255,.14); }
.price-cta .price-list li::after{ border-color:var(--blue-300); }
.price-cta .price-list{ margin-bottom:26px; }
.price-cta .btn{ margin-top:auto; }

/* CTA */
.cta{ position:relative; overflow:hidden; background:linear-gradient(165deg,#0B2748,#081D34); color:#fff;
  padding:clamp(72px,9vw,110px) 0; text-align:center; }
.cta-bg{ position:absolute; inset:0; pointer-events:none; }
.cta-bg .hero-glow-a{ top:-200px; left:50%; transform:translateX(-50%); right:auto; }
.cta-inner{ position:relative; max-width:680px; }
.cta h2{ color:#fff; font-size:clamp(2rem,4vw,3rem); }
.cta p{ margin:18px auto 0; color:#C7D6EA; font-size:1.12rem; max-width:540px; }

/* Footer */
.footer{ background:var(--navy-900); color:#A9BED8; padding:64px 0 30px; }
.footer-inner{ display:grid; grid-template-columns:1.4fr 2fr; gap:48px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
.brand-light{ color:#fff; }
.footer-tag{ margin-top:16px; color:#8FA8C6; font-size:.95rem; max-width:300px; line-height:1.55; }
.footer-origin{ color:var(--blue-300); font-weight:600; letter-spacing:.02em; }
.footer-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.footer-cols h5{ font-family:var(--font-head); color:#fff; font-size:.92rem; margin-bottom:14px; font-weight:700; }
.footer-cols a{ display:block; color:#A9BED8; font-size:.92rem; padding:5px 0; transition:color .2s; }
.footer-cols a:hover{ color:#fff; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 18px; padding-top:24px; font-size:.85rem; color:#7C95B4; }
.footer-mark{ font-family:var(--font-head); letter-spacing:.04em; }

/* ----------------------------- Modal (Demo-/Kontaktformular) ----------------------------- */
.modal{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(8,22,40,.55); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .25s var(--ease); }
.modal-card{ position:relative; width:100%; max-width:440px; background:#fff; border-radius:20px;
  box-shadow:var(--shadow-lg); padding:34px 32px 28px; opacity:0; transform:translateY(16px) scale(.98);
  transition:opacity .28s var(--ease), transform .28s var(--ease); max-height:calc(100vh - 48px); overflow:auto; }
.modal.open .modal-backdrop{ opacity:1; }
.modal.open .modal-card{ opacity:1; transform:none; }
.modal-x{ position:absolute; top:14px; right:14px; display:grid; place-items:center; width:36px; height:36px;
  border:0; border-radius:10px; background:var(--bg-tint); color:var(--text-soft); cursor:pointer; transition:background .2s, color .2s; }
.modal-x:hover{ background:var(--bg-tint-2); color:var(--ink); }

.modal-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:700;
  letter-spacing:.04em; color:var(--blue-600); margin-bottom:12px; }
.modal-eyebrow .eyebrow-dot{ background:var(--blue-500); box-shadow:0 0 0 4px rgba(37,99,235,.14); }
.modal-card h3{ font-size:1.5rem; }
.modal-sub{ margin-top:8px; color:var(--text-soft); font-size:.96rem; }
#leadForm{ margin-top:22px; }

.m-field{ margin-bottom:14px; }
.m-field label{ display:block; font-size:.86rem; font-weight:600; color:var(--ink); margin-bottom:6px; }
.m-field .opt{ color:var(--muted); font-weight:500; }
.m-field input, .m-field textarea{ width:100%; font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  background:#fff; border:1px solid var(--border-strong); border-radius:11px; padding:12px 14px; transition:border-color .18s, box-shadow .18s; }
.m-field textarea{ resize:vertical; min-height:54px; }
.m-field input:focus, .m-field textarea:focus{ outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.m-field input.err, .m-field textarea.err{ border-color:#DC2626; box-shadow:0 0 0 3px rgba(220,38,38,.13); }
#leadForm .btn{ margin-top:6px; }
.m-hint{ text-align:center; margin-top:14px; font-size:.86rem; color:var(--text-soft); }
.m-hint a{ color:var(--blue-600); font-weight:600; }

.modal-success{ text-align:center; padding:14px 0 4px; }
.ms-ico{ display:grid; place-items:center; width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:var(--ok-bg); color:var(--ok); }
.modal-success h3{ font-size:1.5rem; }
.modal-success p{ margin:10px 0 22px; color:var(--text-soft); }

/* ----------------------------- Reveal ----------------------------- */
/* Verstecken NUR, wenn JS aktiv ist (script.js setzt html.js). Fehlt/erroriert das Skript,
   bleiben alle Abschnitte sofort sichtbar – die Seite wird nie leer. */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
/* Einblenden MUSS die Versteck-Regel schlagen: html.js .reveal.in = Spezifität (0,3,1) > html.js .reveal (0,2,1). */
html.js .reveal.in{ opacity:1; transform:none; }
.reveal.in{ opacity:1; transform:none; }

/* ----------------------------- Interaktive Kästchen (Hover-Leben) ----------------------------- */
/* Helle Karten ohne eigenen Hover bekommen ein einheitliches Anheben. */
.flow-step, .trust, .price-card, .why-card{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.flow-step:hover, .trust:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.price-card:hover, .why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* Icons/Nummern „poppen" beim Überfahren der Karte. */
.feature-ico, .flow-num{ transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.feature:hover .feature-ico{ transform:scale(1.08) rotate(-3deg); }
.flow-step:hover .flow-num{ transform:scale(1.12); }

/* Diese Karten tragen .reveal (setzt im „in"-Zustand transform:none) — daher die Hover-Anhebung
   HIER erneut definieren, damit sie den Reveal-Zustand sicher überschreibt. */
.feature:hover{ transform:translateY(-6px); }
.stufe:hover{ transform:translateY(-6px); border-color:var(--blue-400); }
.frame:hover{ transform:translateY(-4px); }

/* Management-Punkte lebendig (der „Warum Provels"-Vergleich bleibt bewusst ruhig). */
.steer-item{ transition:transform .2s var(--ease); }
.steer-item:hover{ transform:translateX(5px); }
.steer-ico{ transition:background .2s, color .2s, border-color .2s; }
.steer-item:hover .steer-ico{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.32); }

/* Problem-Panel hebt sich; das ✕-Badge dreht sich keck. */
.pain-list, .cockpit-card{ transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.pain-list:hover, .cockpit-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pain-list .x{ transition:transform .2s var(--ease); }
.pain-list li:hover .x{ transform:scale(1.15) rotate(90deg); }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width:1020px){
  .hero-inner{ grid-template-columns:1fr; gap:64px; }
  .hero-copy{ max-width:none; }
  .hero-mock{ max-width:520px; }
  .cards-4{ grid-template-columns:repeat(2,1fr); }
  .frame-grid{ grid-template-columns:repeat(2,1fr); }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .cards-3,.price-wrap{ grid-template-columns:1fr; }
  .vs{ grid-template-columns:1fr; }
  .steer{ grid-template-columns:1fr; gap:36px; }
  .split{ grid-template-columns:1fr; gap:32px; }
  .why-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links.open{ display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0;
    background:#fff; border-bottom:1px solid var(--border); padding:8px 0; box-shadow:var(--shadow-md); }
  .nav-links.open a{ color:var(--ink); padding:14px 28px; }
  .hero{ padding:120px 0 72px; }
  .band-inner{ grid-template-columns:1fr; }
  .cards-4{ grid-template-columns:1fr; }
  .frame-grid{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:1fr; }
  .mock-badge{ left:0; bottom:-20px; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
}

/* ----------------------------- Rechtsseiten (Impressum/Datenschutz/AVV) ----------------------------- */
.legal-top{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border); }
.legal-top .nav-inner{ height:68px; }
.legal-top .brand{ color:var(--ink); }
.legal-wrap{ max-width:820px; margin:0 auto; padding:116px 28px 90px; }
.legal-eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--blue-600); margin-bottom:12px; }
.legal-wrap h1{ font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:6px; }
.legal-updated{ color:var(--text-soft); font-size:.92rem; }
.legal-draft{ margin:22px 0 38px; padding:14px 18px; border-left:3px solid var(--warn);
  background:var(--warn-bg); border-radius:0 10px 10px 0; color:#7A4A08; font-size:.92rem; line-height:1.55; }
.legal-wrap h2{ font-size:1.22rem; margin:36px 0 10px; }
.legal-wrap p{ color:var(--text); line-height:1.7; margin:0 0 12px; }
.legal-wrap ul{ margin:0 0 12px; padding-left:22px; }
.legal-wrap li{ color:var(--text); line-height:1.7; margin-bottom:6px; }
.legal-wrap a{ color:var(--blue-600); }
.legal-ph{ color:var(--muted); }
.legal-back{ display:inline-flex; align-items:center; gap:7px; margin-top:42px; color:var(--blue-600);
  font-weight:600; font-size:.95rem; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}