/* Website von Arkven. Die Seite erzählt in dieser Reihenfolge:
   1. Probleme, die das QM heute bindet, und ihre Lösung (verkauft wird die Lösung, keine App).
   2. Das Besondere: ein compliant und auditierbarer QM-Kern, um den Kunden ERP, CRM und weitere
      Prozesse bauen, damit Qualität von Anfang an fest eingebaut ist.
   3. Drei Versprechen: per Chat bauen ohne IT, sicherer Betrieb garantiert, im Chat mit allen Prozessen arbeiten.
   4. Sicherheit im Einzelnen, dann der Abschluss.
   Ein dunkles, ruhiges Blau. Grün, Gelb und Rot nur für Prüfergebnisse. */
:root{
  --ink:#0b1a33; --text:#46566e; --muted:#7b8aa0;
  --blue:#1f56c8; --blue-deep:#1744a6; --blue-2:#3a74e0; --blue-soft:#eaf0fc; --blue-pale:#f5f8fe; --blue-line:#c9d8f5;
  --line:#e3e8f0; --bg:#ffffff;
  --navy:#0b2350; --navy-2:#12305f; --night-line:rgb(255 255 255 / .1);
  --ok:#0e7a55; --ok-soft:#e5f6ee; --warn:#a15c07; --warn-soft:#fdf1da; --stop:#b42318; --stop-soft:#fdecea;
  --grad:linear-gradient(120deg,#1744a6 0%,#2560d6 55%,#3a74e0 100%);
  --shadow:0 1px 2px rgb(11 26 51 / .04),0 14px 36px -18px rgb(11 26 51 / .22);
  --shadow-lg:0 2px 4px rgb(11 26 51 / .04),0 44px 90px -40px rgb(15 52 131 / .5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 Inter,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--ink);font-weight:600}
h1{font-size:clamp(40px,5.8vw,72px);line-height:1.04;letter-spacing:-.045em}
h2{font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-.035em}
h3{font-size:22px;line-height:1.25;letter-spacing:-.02em}
h4{font-size:17px;line-height:1.35;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
section{position:relative;padding:128px 0}
.head{max-width:760px}
.head.center{margin:0 auto;text-align:center}
.head p{margin-top:20px;font-size:19px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.eyebrow::before{content:"";width:20px;height:2px;border-radius:2px;background:var(--grad)}
.btn{display:inline-flex;align-items:center;gap:8px;height:50px;padding:0 24px;border-radius:12px;font-weight:600;font-size:16px;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn svg{width:16px;height:16px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-blue{background:var(--grad);color:#fff;box-shadow:0 10px 28px -10px rgb(15 52 131 / .75)}
.btn-blue:hover{transform:translateY(-1px);box-shadow:0 16px 36px -12px rgb(15 52 131 / .85)}
.btn-line{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--blue-line);background:var(--blue-pale)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{transform:translateY(-1px)}
.btn-ghost{border:1px solid rgb(255 255 255 / .35);color:#fff}
.btn-ghost:hover{background:rgb(255 255 255 / .1)}
.pale{background:var(--blue-pale)}
.tag{flex-shrink:0;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:7px;white-space:nowrap}
.ok{background:var(--ok-soft);color:var(--ok)} .warn{background:var(--warn-soft);color:var(--warn)} .ask{background:var(--blue-soft);color:var(--blue)} .stop{background:var(--stop-soft);color:var(--stop)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgb(255 255 255 / .85);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:36px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.logo svg{width:30px;height:30px}
.links{display:flex;gap:30px;font-size:15px;font-weight:500}
.links a{position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.links a:hover::after{transform:scaleX(1)}
.nav .btn{margin-left:auto;height:42px;font-size:15px;padding:0 18px;border-radius:10px}

/* ---------- Einstieg ---------- */
.hero{padding:76px 0 112px;overflow:hidden;text-align:center;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;inset:-30% -10% auto;height:120%;z-index:-2;pointer-events:none;filter:blur(64px);opacity:.55}
.hero::before{background:radial-gradient(36% 42% at 22% 26%,rgb(23 69 168 / .42),transparent 70%),radial-gradient(32% 38% at 78% 20%,rgb(44 98 209 / .36),transparent 70%);animation:driftA 24s ease-in-out infinite alternate}
.hero::after{background:radial-gradient(28% 34% at 52% 4%,rgb(96 140 230 / .4),transparent 70%),radial-gradient(24% 30% at 10% 60%,rgb(15 52 131 / .25),transparent 70%);animation:driftB 30s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate3d(3%,2%,0) scale(1.12)}}
@keyframes driftB{to{transform:translate3d(-4%,-3%,0) scale(1.08)}}
.dots{position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,rgb(11 26 51 / .1) 1px,transparent 0);background-size:28px 28px;mask-image:radial-gradient(ellipse 65% 50% at 50% 30%,#000 25%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 65% 50% at 50% 30%,#000 25%,transparent 75%)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);background:rgb(255 255 255 / .8);border:1px solid var(--line);box-shadow:var(--shadow)}
.pill i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.pill i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);animation:breathe 1.6s ease-out infinite}
@keyframes breathe{to{transform:scale(3);opacity:0}}
.hero h1{margin:28px auto 0;max-width:960px}
.hero .lead{font-size:clamp(18px,1.8vw,21px);max-width:700px;margin:26px auto 36px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* Das Produkt im Bild: links der QM-Kern und die eigenen Lösungen, in der Mitte eine Prüfung, rechts der Chat */
.shot{max-width:1120px;margin:72px auto 0;padding:12px;border-radius:24px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,rgb(23 69 168 / .55),rgb(44 98 209 / .2) 45%,var(--line)) border-box;border:1px solid transparent;box-shadow:var(--shadow-lg);text-align:left}
.win{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.win-top{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--blue-pale);font-size:13px;color:var(--muted)}
.win-top i{width:10px;height:10px;border-radius:50%;background:#d5dce8}
.win-top span{margin-left:12px}
.win-body{display:grid;grid-template-columns:210px 1fr 300px;min-height:440px}
.side{border-right:1px solid var(--line);padding:16px 12px;background:#fbfcfe}
.side h5{display:flex;justify-content:space-between;align-items:center;margin:4px 8px 8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side h5 em{font-style:normal;letter-spacing:0;text-transform:none;font-size:11px;color:var(--ok);background:var(--ok-soft);padding:2px 7px;border-radius:6px}
.side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:14px;color:var(--ink)}
.side a i{width:8px;height:8px;border-radius:3px;background:var(--blue-line)}
.side a.on{background:var(--blue-soft);color:var(--blue-deep);font-weight:600}
.side a.on i{background:var(--blue)}
.side .gap{height:18px}
.side .own i{background:#cfd6e2}
.main{padding:22px 26px;display:flex;flex-direction:column}
.main .mh{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.main .mh b{display:block;font-size:17px;color:var(--ink);font-weight:600}
.main .mh small{font-size:13px;color:var(--muted)}
.res{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.res small{display:block;font-size:13px;color:var(--muted)}
.js .main .res{opacity:0;animation:pop .5s cubic-bezier(.16,1,.3,1) forwards}
.main .res:nth-of-type(2){animation-delay:.4s}.main .res:nth-of-type(3){animation-delay:.6s}.main .res:nth-of-type(4){animation-delay:.8s}.main .res:nth-of-type(5){animation-delay:1s}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.main .foot{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px}
.go{background:var(--grad);color:#fff;font-weight:600;padding:9px 16px;border-radius:9px;font-size:14px;box-shadow:0 8px 20px -10px rgb(15 52 131 / .8)}
.chat{border-left:1px solid var(--line);background:linear-gradient(180deg,#f7f9fe,#fff);padding:16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.chat h5{margin:0 0 4px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.msg{padding:11px 13px;border-radius:14px;line-height:1.5}
.msg.me{align-self:flex-end;max-width:88%;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.msg.ai{background:#fff;border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:4px}
.msg.ai small{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
.msg .act{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:#fff;background:var(--grad);padding:6px 12px;border-radius:8px}
.typing{display:inline-flex;gap:4px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);width:max-content}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.js .chat .step{display:none}
.chat .step.show{display:block;animation:pop .45s cubic-bezier(.16,1,.3,1)}
.chat .typing.show{display:inline-flex}

/* ---------- Probleme und Lösungen ---------- */
.probs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:64px}
.prob{display:flex;flex-direction:column;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .35s,box-shadow .35s,border-color .35s}
.prob:hover{transform:translateY(-4px);border-color:var(--blue-line);box-shadow:var(--shadow-lg)}
.prob .pt{padding:30px 30px 24px}
.prob .lbl{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.prob h3{margin-top:10px}
.prob .sol{margin-top:auto;padding:22px 30px 26px;background:var(--blue-pale);border-top:1px solid var(--line)}
.prob .sol .lbl{color:var(--blue)}
.prob .sol p{margin-top:8px;color:var(--ink);font-size:16px}
.prob .out{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;color:var(--blue-deep);font-size:15.5px}
.prob .out svg{width:20px;height:20px}
.prob .for{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.prob .for span{font-size:12.5px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--blue-pale);border:1px solid var(--blue-line);color:var(--blue-deep)}

/* ---------- Der QM-Kern ---------- */
.core .split{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:center}
.core p.big{margin-top:20px;font-size:19px}
.points{margin-top:28px;display:grid;gap:16px}
.points div{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:16.5px}
.points svg{width:24px;height:24px;color:var(--blue);margin-top:1px}
.points b{display:block;color:var(--ink);font-weight:600}
.orbit{width:100%;height:auto;display:block;overflow:visible}
.orbit .r1{fill:none;stroke:var(--blue-line);stroke-width:1.5;stroke-dasharray:5 9;animation:spin 40s linear infinite;transform-origin:300px 300px}
.orbit .r2{fill:rgb(23 69 168 / .04);stroke:var(--blue-line);stroke-width:1.5}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit .spoke{stroke:var(--blue-line);stroke-width:1.2}
.orbit .pulse{stroke:#5b86e0;stroke-width:3;stroke-linecap:round;stroke-dasharray:10 300;animation:inward 3s linear infinite}
@keyframes inward{from{stroke-dashoffset:310}to{stroke-dashoffset:0}}
.orbit .own rect{fill:#fff;stroke:var(--line);filter:drop-shadow(0 8px 14px rgb(11 26 51 / .08))}
.orbit .own text{font:600 16px Inter,sans-serif;fill:var(--ink)}
.orbit .kern rect{fill:#fff;stroke:var(--blue-line)}
.orbit .kern text{font:600 13.5px Inter,sans-serif;fill:var(--blue-deep)}
.orbit .heart{fill:url(#coreGrad);filter:drop-shadow(0 18px 30px rgb(15 52 131 / .45))}
.orbit .halo{fill:url(#haloGrad);animation:halo 3.2s ease-in-out infinite;transform-origin:300px 300px}
@keyframes halo{50%{opacity:.45;transform:scale(1.1)}}
.orbit .t1{font:700 22px Inter,sans-serif;fill:#fff}
.orbit .t2{font:500 13px Inter,sans-serif;fill:#c9d6f2}

/* ---------- Drei Versprechen ---------- */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.card{display:flex;flex-direction:column;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card .ct{padding:28px 28px 0}
.card .num{font-size:13px;font-weight:600;color:var(--blue)}
.card h3{margin:8px 0 8px}
.card p{font-size:15.5px}
.card .cv{margin:24px 20px 20px;padding:18px;border-radius:16px;background:var(--blue-pale);border:1px solid var(--line);flex:1;display:flex;flex-direction:column;gap:10px;font-size:14px}
.bubble{padding:11px 13px;border-radius:14px 14px 4px 14px;background:var(--ink);color:#fff;margin-left:24px}
.bubble.a{margin:0 24px 0 0;border-radius:14px 14px 14px 4px;background:#fff;color:var(--ink);border:1px solid var(--line)}
.bubble.a b{display:block;font-size:12px;color:var(--blue);margin-bottom:2px}
.bubble.a .go{display:inline-block;margin-top:10px;font-size:13px;padding:6px 12px}
.env{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.env .d{width:10px;height:10px;border-radius:50%}
.env small{display:block;color:var(--muted);font-size:12.5px}
.env svg{width:20px;height:20px;color:var(--ok)}
.guar{margin-top:4px;padding:12px 14px;border-radius:12px;background:var(--ink);color:#fff;font-weight:600;display:flex;align-items:center;gap:10px}
.guar svg{width:20px;height:20px;color:#9fbcf5}
.rights{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px dashed var(--blue-line);color:var(--text);font-size:13px}
.rights svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}

/* ---------- Sicherheit, dunkel ---------- */
.dark{background:var(--navy);color:#a7b7cf;overflow:hidden;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 400px at 50% 0%,rgb(23 69 168 / .55),transparent 70%),radial-gradient(500px 360px at 100% 100%,rgb(44 98 209 / .22),transparent 70%)}
.dark::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;background-image:linear-gradient(rgb(255 255 255 / .045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .045) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 70% 55% at 50% 20%,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 20%,#000,transparent 80%)}
.dark h2,.dark h4{color:#fff}
.dark .eyebrow{color:#9fbcf5}
.dark .head p{color:#a7b7cf}
/* Der Eisberg: über dem Wasser Ihre Lösung, darunter alles, was sie sicher macht */
.icesplit{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;margin-top:56px}
.ice{width:100%;height:auto;display:block;overflow:visible}
.ice .top{fill:url(#iceTop);stroke:#c9d6f2}
.ice .deep{fill:url(#iceDeep)}
.ice .wave{animation:wave 6s ease-in-out infinite alternate}
@keyframes wave{to{transform:translateX(-46px)}}
.ice .lbl{font:600 15px Inter,sans-serif;fill:#dbe5fa}
.ice .lbl tspan.dim{fill:#8fa6cf;font-weight:500}
.ice .chipt{font:600 16px Inter,sans-serif;fill:#0b1a33}
.ice .glow{animation:glow 3.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.3}}
.control{display:grid;gap:14px}
.control div{padding:24px 26px;border-radius:18px;background:linear-gradient(180deg,rgb(255 255 255 / .07),rgb(255 255 255 / .02));border:1px solid var(--night-line)}
.control b{display:block;font-size:19px;color:#fff;font-weight:600;letter-spacing:-.01em}
.control span{display:block;margin-top:4px;font-size:15px}

/* ---------- Branchenbeispiele ---------- */
.tabs{display:flex;gap:6px;padding:6px;border-radius:16px;background:var(--blue-pale);border:1px solid var(--line);width:max-content;max-width:100%;margin:40px auto 0;flex-wrap:wrap;justify-content:center}
.tabs button{height:44px;padding:0 20px;border-radius:11px;font-weight:600;font-size:15.5px;color:var(--text);transition:all .25s}
.tabs button:hover{color:var(--blue)}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:0 8px 20px -10px rgb(11 26 51 / .8)}
/* Jede Karte belegt fünf Zeilen des gemeinsamen Rasters (subgrid): Kopf, Aufgabe, Prüfpunkte,
   Besonderheit, Ergebnis. So stehen die Teile in allen drei Karten auf derselben Höhe. */
.bx{display:grid;grid-template-columns:repeat(3,1fr);column-gap:20px;row-gap:0;margin-top:48px}
.bx[hidden]{display:none}
.bx.show .ex{animation:pop .55s cubic-bezier(.16,1,.3,1) both}
.bx.show .ex:nth-child(2){animation-delay:.08s}.bx.show .ex:nth-child(3){animation-delay:.16s}
.ex{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:28px 26px 24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s,box-shadow .35s,border-color .35s}
.ex:hover{transform:translateY(-4px);border-color:var(--blue-line);box-shadow:var(--shadow-lg)}
.ex .eh{display:flex;align-items:center;gap:14px}
.ex .eic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad);box-shadow:0 12px 26px -12px rgb(15 52 131 / .8);flex-shrink:0}
.ex .eic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ex h3{font-size:21px}
.ex .who{font-size:14px;color:var(--muted)}
.ex .task{margin:18px 0 14px;font-size:15.5px;color:var(--ink)}
.ex ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;align-content:start;font-size:15px}
.ex .own{align-self:start}
.ex .res-line{align-self:end}
.ex li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.ex li svg{width:20px;height:20px;color:var(--blue);margin-top:2px}
.ex .own{margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--blue-soft);border:1px solid var(--blue-line);font-size:14.5px;color:var(--ink)}
.ex .own b{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.ex .res-line{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;color:var(--muted)}

/* ---------- Abschluss ---------- */
.final{padding:120px 0}
.final-box{position:relative;overflow:hidden;isolation:isolate;border-radius:32px;padding:96px 48px;text-align:center;background:var(--grad);color:#dfe8fb}
.final-box::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(500px 300px at 20% 0%,rgb(255 255 255 / .2),transparent 70%),radial-gradient(500px 300px at 90% 100%,rgb(6 22 51 / .45),transparent 70%)}
.final-box::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.45;background-image:radial-gradient(circle at 1px 1px,rgb(255 255 255 / .35) 1px,transparent 0);background-size:26px 26px;mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 40%,#000,transparent 80%)}
.final-box h2{color:#fff;max-width:820px;margin:0 auto}
.final-box p{max-width:620px;margin:20px auto 36px;font-size:19px}

/* Kontaktformular im Abschluss: eine weiße Karte auf dem blauen Feld */
.lead{max-width:760px;margin:0 auto;padding:28px;border-radius:22px;background:#fff;color:var(--text);text-align:left;display:grid;gap:16px;box-shadow:0 30px 60px -30px rgb(6 22 51 / .55)}
.lead .f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.lead label small{font-weight:400;color:var(--muted)}
.lead input,.lead select,.lead textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);background:var(--blue-pale);transition:border-color .2s,box-shadow .2s,background .2s}
.lead textarea{resize:vertical;min-height:110px;line-height:1.55}
.lead input:focus,.lead select:focus,.lead textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgb(31 86 200 / .12)}
.lead .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead .send{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:4px}
.lead .send span{flex:1;min-width:240px;font-size:13px;color:var(--muted);line-height:1.5}
.lead .send a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.lead button:disabled{opacity:.6;cursor:wait}
.lead .status{margin:0;font-size:15px;font-weight:500;min-height:1px}
.lead .status.good{color:var(--ok)} .lead .status.bad{color:var(--stop)}
.lead.done label,.lead.done .send{display:none}
.lead.done .status{font-size:18px;text-align:center;padding:24px 0}
@media (max-width:640px){.lead{padding:20px}.lead .f2{grid-template-columns:1fr}}

/* ---------- Rechtliche Seiten: gleicher Kopf, ruhiger Text ---------- */
.legal-hero{padding:72px 0 64px;text-align:center;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line)}
.legal-hero h1{font-size:clamp(36px,5vw,56px);margin-top:20px}
.legal-hero p{max-width:640px;margin:18px auto 0;font-size:18px}
.legal{max-width:820px;margin:0 auto;padding:72px 24px 120px}
.legal .facts{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px;padding:32px;border-radius:22px;background:var(--blue-pale);border:1px solid var(--line);margin-bottom:56px}
.legal .facts h2{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.legal .facts p{margin:0;font-size:15.5px;line-height:1.7}
.legal .facts b{color:var(--ink);font-size:17px}
.legal section.part{padding:36px 0;border-top:1px solid var(--line)}
.legal section.part:first-of-type{border-top:0;padding-top:0}
.legal .part h2{display:flex;align-items:center;gap:14px;font-size:21px;letter-spacing:-.015em;margin:0}
.legal .part h2 .n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue-soft);color:var(--blue-deep);font-size:13px;font-weight:700;flex-shrink:0}
.legal .part .body{margin-top:14px;font-size:15.5px;line-height:1.75;display:grid;gap:12px}
.legal .part.numbered .body{padding-left:44px}
.legal ul{margin:0;padding-left:20px;display:grid;gap:6px}
.legal a{color:var(--blue);font-weight:500}
.legal a:hover{text-decoration:underline}
.legal .box{padding:16px 18px;border-radius:14px;background:var(--blue-pale);border:1px solid var(--line)}
.legal .stand{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@media (max-width:640px){.legal .facts{grid-template-columns:1fr;padding:22px}.legal .part.numbered .body{padding-left:0}.legal{padding:48px 16px 88px}}

footer{border-top:1px solid var(--line);padding:56px 0 32px;font-size:14.5px;background:var(--blue-pale)}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.fcols p{margin-top:14px;max-width:300px}
.fcols h5{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcols a:hover{color:var(--blue)}
.fbase{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}

/* Einblenden nur mit Skript, sonst bliebe die Seite ohne Skript leer */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s!important}.d2{transition-delay:.16s!important}.d3{transition-delay:.24s!important}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width:1000px){
  section{padding:88px 0}
  .links{display:none}
  .win-body{grid-template-columns:1fr}
  .side{display:none}
  .chat{border-left:0;border-top:1px solid var(--line)}
  .core .split{grid-template-columns:1fr;gap:40px}
  .three,.icesplit,.bx{grid-template-columns:1fr}
  .bx{row-gap:20px}
  .ex{display:flex;flex-direction:column;grid-row:auto}
  .icesplit{gap:40px}
  .fcols{grid-template-columns:1fr 1fr}
  .fcols>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  body{font-size:16px}
  .hero{padding:40px 0 72px}
  .shot{margin-top:48px;padding:6px;border-radius:18px}
  .main{padding:18px}
  .probs{grid-template-columns:1fr}
  .prob .pt,.prob .sol{padding-left:22px;padding-right:22px}
  .final-box{padding:64px 20px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .main .res{opacity:1;transform:none}
  .js .chat .step{display:block}
  .chat .typing{display:none!important}
}