/* ============ CAPITALYM — Modern Fintech ============ */
:root{
  --teal:#0f3d3e;        /* deep teal */
  --teal-d:#0a2c2d;      /* darker */
  --teal-2:#14504f;      /* panel */
  --mint:#2dd4bf;        /* accent mint */
  --mint-d:#14b8a6;
  --corail:#f5a05a;      /* coral/amber */
  --corail-d:#e8863a;
  --bg:#f7faf9;          /* page bg */
  --bg-2:#eef5f3;        /* soft panel */
  --blanc:#ffffff;
  --encre:#0f2a2b;       /* heading ink */
  --texte:#4b5f5e;       /* body */
  --texte-l:#7d9490;     /* muted */
  --ligne:#e1ebe8;
  --ligne-d:#1d4a4a;
  --rot:#d64545;
  --ff-d:'Space Grotesk',system-ui,sans-serif;
  --ff-b:'Inter',system-ui,sans-serif;
  --mx:1180px;
  --r:16px;
  --r-s:10px;
  --sh:0 20px 50px -20px rgba(15,61,62,.25);
  --sh-s:0 6px 20px -8px rgba(15,61,62,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--ff-b);color:var(--texte);background:var(--bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 2rem}
h1,h2,h3,h4{font-family:var(--ff-d);color:var(--encre);font-weight:700;line-height:1.12;letter-spacing:-.5px}
.logo-svg{display:block}

/* progress + cursor */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--mint),var(--corail));z-index:9999;transition:width .1s}
.cursor{position:fixed;width:28px;height:28px;border:2px solid var(--mint);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;display:none}
@media(hover:hover){.cursor{display:block}}

/* top bar */
.top{background:var(--teal);color:#bfe0d9;font-size:.8rem}
.top-in{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}
.top a{color:#bfe0d9}.top a:hover{color:var(--mint)}
.top-r{display:flex;gap:1.6rem;align-items:center}
.de-flag{display:inline-flex;flex-direction:column;width:16px;height:11px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.de-flag i{flex:1}.de-flag i:nth-child(1){background:#000}.de-flag i:nth-child(2){background:#dd0000}.de-flag i:nth-child(3){background:#ffce00}
@media(max-width:860px){.top-r span:nth-child(3){display:none}}
@media(max-width:620px){.top{display:none}}

/* header */
.head{position:sticky;top:0;z-index:900;background:rgba(247,250,249,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--ligne);transition:box-shadow .3s}
.head.scrolled{box-shadow:0 6px 24px -18px rgba(15,61,62,.4)}
.head-in{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.brand .logo-svg{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:2rem}
.nav>a,.nav-dd>a{font-size:.9rem;font-weight:500;color:var(--encre);position:relative;padding:.3rem 0}
.nav>a::after,.nav-dd>a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--mint);transition:width .3s;border-radius:2px}
.nav>a:hover::after,.nav-dd:hover>a::after{width:100%}
.nav-dd{position:relative}
.dd{position:absolute;top:calc(100% + .6rem);left:50%;transform:translateX(-50%) translateY(8px);background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-s);box-shadow:var(--sh);padding:.5rem;min-width:220px;opacity:0;visibility:hidden;transition:.25s}
.nav-dd:hover .dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd a{display:block;padding:.6rem .9rem;font-size:.88rem;border-radius:8px;color:var(--texte);transition:.2s}
.dd a:hover{background:var(--bg-2);color:var(--teal);padding-left:1.2rem}
.head-cta{display:flex;align-items:center;gap:1rem}
.burg{display:none;background:none;border:none;font-size:1.5rem;color:var(--teal);cursor:pointer}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.7rem;border-radius:var(--r-s);font-family:var(--ff-b);font-size:.9rem;font-weight:600;cursor:pointer;border:2px solid transparent;transition:.3s}
.b-mint{background:var(--mint);color:var(--teal)}.b-mint:hover{background:var(--mint-d);transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(45,212,191,.6)}
.b-corail{background:var(--corail);color:#3a2410}.b-corail:hover{background:var(--corail-d);transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(245,160,90,.6)}
.b-teal{background:var(--teal);color:#fff}.b-teal:hover{background:var(--teal-2);transform:translateY(-2px)}
.b-line{background:transparent;border-color:var(--teal);color:var(--teal)}.b-line:hover{background:var(--teal);color:#fff}
.b-line-w{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}.b-line-w:hover{background:#fff;color:var(--teal);border-color:#fff}
.b-p{padding:.7rem 1.3rem}
.b-xl{padding:1.05rem 2.2rem;font-size:.95rem}

/* mobile nav */
/* visibility keeps the closed drawer from creating horizontal scroll overflow */
.mob{position:fixed;top:0;right:0;width:84%;max-width:360px;height:100vh;background:var(--teal);z-index:950;padding:5rem 2rem 2rem;transform:translateX(100%);visibility:hidden;transition:transform .4s cubic-bezier(.7,0,.2,1),visibility .4s;overflow-y:auto}
.mob.open{transform:translateX(0);visibility:visible}
.mob a{display:block;color:#d7e9e4;padding:.9rem 0;font-size:1.05rem;border-bottom:1px solid var(--ligne-d)}
.mob a:hover{color:var(--mint);padding-left:.5rem}
.mob-f{margin-top:2rem;color:var(--texte-l);font-size:.85rem}
.mob-f-l{color:var(--mint);text-transform:uppercase;letter-spacing:1.5px;font-size:.72rem;margin-bottom:.6rem}
.mob-f a{border:none;padding:.3rem 0;font-size:.9rem}
.mclose{position:absolute;top:1.4rem;right:1.6rem;background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer}
.ovl{position:fixed;inset:0;background:rgba(10,44,45,.5);z-index:940;opacity:0;visibility:hidden;transition:.3s}
.ovl.open{opacity:1;visibility:visible}

/* pflicht bar */
.pflicht{background:var(--bg-2);border-bottom:1px solid var(--ligne)}
.pflicht-in{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0}
.pflicht-tag{flex:none;background:var(--teal);color:var(--mint);font-size:.68rem;font-weight:700;letter-spacing:1.2px;padding:.3rem .6rem;border-radius:6px;margin-top:.15rem}
.pflicht p{font-size:.78rem;color:var(--texte);line-height:1.65}
.pflicht strong{color:var(--encre)}

/* hero */
.hero{position:relative;background:var(--bg);overflow:hidden;padding:5rem 0 5.5rem}
.hero::before{content:"";position:absolute;top:-25%;right:-8%;width:52%;height:130%;background:radial-gradient(circle,rgba(45,212,191,.13),transparent 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center;position:relative;z-index:2}
/* inline-block, not inline-flex: as flex items the star, the <b> and the trailing
   text became separate columns that broke apart on narrow screens */
.hero-badge{display:inline-block;background:var(--blanc);border:1px solid var(--ligne);border-radius:40px;padding:.45rem 1rem;font-size:.78rem;font-weight:600;line-height:1.5;color:var(--teal);margin-bottom:1.6rem;box-shadow:var(--sh-s)}
.hero-badge b{color:var(--corail-d)}
.hero h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.04;margin-bottom:1.4rem;color:var(--encre)}
.hero h1 em{font-style:normal;color:var(--mint-d);position:relative}
.hero-lead{font-size:1.12rem;color:var(--texte);max-width:30rem;margin-bottom:2.2rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.5rem}
.hero-trust{display:flex;gap:2.2rem;flex-wrap:wrap}
.hero-trust div{display:flex;flex-direction:column}
.hero-trust b{font-family:var(--ff-d);font-size:1.9rem;color:var(--teal);font-weight:700}
.hero-trust span{font-size:.78rem;color:var(--texte-l)}
.hero-vis{position:relative;height:420px}
.hero-card{position:absolute;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);box-shadow:var(--sh);padding:1.1rem 1.3rem;display:flex;align-items:center;gap:.9rem}
.hero-card img{width:46px;height:46px;object-fit:cover;border-radius:11px;flex:none}
.hc-ico{flex:none;width:46px;height:46px;border-radius:13px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--mint-d)}
.hc-ico svg{width:23px;height:23px}
.hero-card .hc-l{font-size:.72rem;color:var(--texte-l)}
.hero-card .hc-v{font-family:var(--ff-d);font-weight:700;color:var(--teal);font-size:1.1rem}
.hero-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(300px,72%);aspect-ratio:3/4;object-fit:cover;border-radius:22px;border:6px solid var(--blanc);box-shadow:0 28px 60px -22px rgba(15,61,62,.45)}
.hc1{top:8%;left:0}.hc2{top:0;right:6%}.hc3{bottom:10%;right:0}.hc4{bottom:0;left:8%}
.hero-blob{position:absolute;top:50%;left:50%;width:320px;height:320px;background:radial-gradient(circle,rgba(45,212,191,.16),transparent 70%);border-radius:50%;transform:translate(-50%,-50%)}

/* sections */
.sec{padding:5.5rem 0}
.sec-bg{background:var(--bg)}
.sec-panel{background:var(--bg-2)}
.sec-teal{background:var(--teal);color:#cfe3de}
.sec-teal h2,.sec-teal h3{color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.74rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--mint-d);margin-bottom:1rem}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--corail);border-radius:2px}
.sec-teal .eyebrow{color:var(--mint)}
.sec-head{max-width:46rem;margin-bottom:3rem}
.sec-head.ctr{margin:0 auto 3.5rem;text-align:center}
.sec-head.ctr .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(2rem,3.6vw,2.8rem);margin-bottom:1rem}
.sec-head p{font-size:1.05rem;color:var(--texte)}
.sec-teal .sec-head p{color:#a9c7c1}

/* products */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.prod{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:2.2rem 1.8rem;transition:.35s;position:relative;overflow:hidden}
.prod:hover{transform:translateY(-6px);box-shadow:var(--sh);border-color:var(--mint)}
.prod-ico{width:84px;height:84px;border-radius:20px;background:var(--bg-2);overflow:hidden;margin-bottom:1.4rem;box-shadow:var(--sh-s)}
.prod-ico img{width:100%;height:100%;object-fit:cover}
.prod h3{font-size:1.4rem;margin-bottom:.5rem}
.prod-rate{display:inline-block;font-family:var(--ff-d);font-size:.74rem;font-weight:700;color:var(--corail-d);background:#fdf0e6;padding:.25rem .7rem;border-radius:20px;margin-bottom:.9rem}
.prod p{font-size:.92rem;margin-bottom:1.3rem}
.prod-link{font-size:.85rem;font-weight:600;color:var(--teal);display:inline-flex;align-items:center;gap:.4rem;transition:gap .25s}
.prod-link:hover{gap:.75rem;color:var(--mint-d)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:s}
.step{position:relative;padding:2rem 1.4rem;border-radius:var(--r);background:var(--teal-2);border:1px solid var(--ligne-d)}
.step::before{counter-increment:s;content:counter(s);font-family:var(--ff-d);font-size:1.3rem;font-weight:700;color:var(--teal);background:var(--mint);width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.step h3{font-size:1.2rem;margin-bottom:.5rem}
.step p{font-size:.88rem;color:#a9c7c1}

/* features */
.feats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem 3rem}
.feat{display:flex;gap:1.2rem;align-items:flex-start;padding:1.2rem 0;border-bottom:1px solid var(--ligne)}
.feat-ico{flex:none;width:52px;height:52px;border-radius:15px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;color:var(--mint-d)}
.feat-ico svg{width:26px;height:26px}
.feat h3{font-size:1.2rem;margin-bottom:.3rem}
.feat p{font-size:.9rem}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center}
.split-vis{position:relative;background:var(--teal);border-radius:var(--r);min-height:360px;overflow:hidden;box-shadow:var(--sh)}
.split-vis::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(200deg,rgba(15,61,62,.55),rgba(15,61,62,.1) 58%),radial-gradient(circle at 72% 28%,rgba(45,212,191,.26),transparent 62%)}
.split-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chk{list-style:none;margin:1.5rem 0}
.chk li{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem 0;font-size:.94rem}
.chk li::before{content:"";flex:none;width:22px;height:22px;border-radius:7px;background:var(--mint);margin-top:.1rem;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/15px no-repeat}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat b{display:block;font-family:var(--ff-d);font-size:3rem;color:var(--mint);font-weight:700;line-height:1}
.stat span{font-size:.85rem;color:#a9c7c1}

/* FAQ */
.faq{max-width:52rem;margin:0 auto}
.faq-i{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-s);margin-bottom:.8rem;overflow:hidden;transition:.25s}
.faq-i.open{border-color:var(--mint);box-shadow:var(--sh-s)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 1.5rem;cursor:pointer;font-family:var(--ff-d);font-size:1.1rem;font-weight:600;color:var(--encre)}
.faq-q span{flex:none;width:24px;height:24px;position:relative;transition:transform .3s}
.faq-i.open .faq-q span{transform:rotate(45deg)}
.faq-q span::before,.faq-q span::after{content:"";position:absolute;background:var(--mint-d);border-radius:2px}
.faq-q span::before{top:50%;left:3px;right:3px;height:2px;transform:translateY(-50%)}
.faq-q span::after{left:50%;top:3px;bottom:3px;width:2px;transform:translateX(-50%)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s}
.faq-a p{padding:0 1.5rem 1.3rem;font-size:.92rem;color:var(--texte)}

/* calculator */
.calc{background:var(--teal-2);border:1px solid var(--ligne-d);border-radius:var(--r);padding:2.5rem}
.calc-row{margin-bottom:1.8rem}
.calc-row label{display:flex;justify-content:space-between;font-size:.85rem;color:#cfe3de;margin-bottom:.7rem;font-weight:500}
.calc-row label b{color:var(--mint);font-family:var(--ff-d);font-size:1.15rem}
input[type=range]{width:100%;-webkit-appearance:none;height:5px;border-radius:5px;background:var(--teal-d);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--mint);cursor:pointer;border:3px solid var(--teal-2);box-shadow:0 2px 8px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--mint);cursor:pointer;border:3px solid var(--teal-2)}
.calc-out{background:var(--teal-d);border-radius:var(--r-s);padding:1.8rem;text-align:center;margin-top:1.5rem}
.calc-out .big{font-family:var(--ff-d);font-size:3rem;color:var(--mint);font-weight:700;line-height:1}
.calc-out .sm{font-size:.8rem;color:#8fb0aa;margin-top:.4rem}

/* CTA */
.cta{position:relative;background:var(--teal);color:#fff;text-align:center;padding:5rem 0;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(45,212,191,.22),transparent 60%)}
.cta-in{position:relative;z-index:2;max-width:40rem;margin:0 auto}
.cta h2{color:#fff;font-size:clamp(2rem,4vw,3rem);margin-bottom:1rem}
.cta p{color:#a9c7c1;margin-bottom:2rem;font-size:1.05rem}

/* forms */
.form-wrap{display:grid;grid-template-columns:1.4fr .9fr;gap:3rem;align-items:start}
.form-card{background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r);padding:2.5rem;box-shadow:var(--sh-s)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld{margin-bottom:1.1rem}
.feld label{display:block;font-size:.82rem;font-weight:600;color:var(--encre);margin-bottom:.4rem}
.feld input,.feld select,.feld textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--ligne);border-radius:var(--r-s);font-family:var(--ff-b);font-size:.92rem;color:var(--encre);background:var(--bg);transition:.25s}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;border-color:var(--mint);background:#fff;box-shadow:0 0 0 3px rgba(45,212,191,.15)}
.feld textarea{resize:vertical;min-height:110px}
/* Block, not flex: the label mixes text nodes with an inline <a>, and as flex
   items those become separate columns that collapse into slivers on mobile. */
.consent{display:block;position:relative;padding-left:1.75rem;margin-bottom:.9rem;font-size:.8rem;color:var(--texte);line-height:1.55}
.consent input{position:absolute;left:0;top:.2rem;margin:0;width:17px;height:17px;accent-color:var(--mint-d)}
.consent a{color:var(--mint-d);text-decoration:underline}
.form-err{color:var(--rot);font-size:.82rem;margin-top:.5rem;display:none}
.box-note{background:var(--bg-2);border-left:3px solid var(--mint);border-radius:var(--r-s);padding:1.3rem 1.5rem;font-size:.86rem;color:var(--texte);line-height:1.6}
.box-note strong{color:var(--encre)}
.box-dark{background:var(--teal);color:#cfe3de;border-radius:var(--r);padding:1.6rem;font-size:.88rem;line-height:1.9}
.box-dark strong{color:#fff}
.box-dark a{color:var(--mint)}
.ex-card{background:var(--teal);color:#cfe3de;border-radius:var(--r);padding:1.8rem;margin-top:1.3rem}
.ex-card .ex-t{display:flex;justify-content:space-between;align-items:center;font-family:var(--ff-d);font-size:1.2rem;color:#fff;margin-bottom:1rem;font-weight:700}
.ex-tag{background:var(--mint);color:var(--teal);font-size:.66rem;font-weight:700;letter-spacing:.8px;padding:.25rem .55rem;border-radius:5px}
.ex-row{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--ligne-d);font-size:.86rem}
.ex-row:last-child{border:none}
.ex-row span:first-child{color:#a9c7c1}
.ex-row b{color:var(--mint)}

/* contact */
.kgrid{display:grid;grid-template-columns:1fr;gap:1rem}
.kl{display:flex;gap:1rem;align-items:flex-start;padding:1.3rem;background:var(--blanc);border:1px solid var(--ligne);border-radius:var(--r-s)}
.kic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--bg-2);display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.kl-l{font-size:.72rem;text-transform:uppercase;letter-spacing:1.3px;color:var(--texte-l);margin-bottom:.2rem}
.kl-v{font-weight:600;color:var(--encre)}
.kl-v a{color:var(--encre)}
.kl-s{font-size:.82rem;color:var(--texte)}

/* prose / legal */
.prose{max-width:50rem;margin:0 auto}
.prose h2{font-size:1.6rem;margin:2.2rem 0 .8rem}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem;font-family:var(--ff-b);font-weight:700;color:var(--encre)}
.prose p,.prose li{font-size:.92rem;color:var(--texte);margin-bottom:.8rem}
.prose ul{padding-left:1.3rem;margin-bottom:1rem}
.page-hero{background:var(--teal);color:#fff;padding:3.5rem 0;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-40%;right:-5%;width:42%;height:180%;background:radial-gradient(circle,rgba(45,212,191,.16),transparent 62%)}
.page-hero .wrap{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4vw,3.1rem)}
.page-hero p{color:#a9c7c1;max-width:38rem;margin-top:.6rem}
.crumb{font-size:.78rem;color:var(--mint);margin-bottom:.8rem}
.crumb a{color:#8fb0aa}

/* danke */
.danke{text-align:center;max-width:36rem;margin:0 auto;padding:4rem 0}
.danke-ico{width:100%;max-width:380px;height:230px;object-fit:cover;border-radius:20px;margin:0 auto 1.8rem;box-shadow:var(--sh)}
.danke h1{font-size:2.6rem;margin-bottom:1rem}
.danke p{margin-bottom:2rem}

/* footer */
.foot{background:var(--teal-d);color:#8fb0aa;padding:4rem 0 1.5rem;font-size:.88rem}
.foot .logo-svg{height:48px;margin-bottom:1rem}
.foot-t{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--ligne-d)}
.foot-dev{max-width:22rem;line-height:1.7;margin-bottom:1.2rem}
.foot-k span{display:block;margin-bottom:.4rem}
.foot-k a{color:#bfe0d9}.foot-k a:hover{color:var(--mint)}
.foot-kt{color:#fff;font-family:var(--ff-d);font-size:1.05rem;margin-bottom:1rem;font-weight:600}
.foot-li{list-style:none}
.foot-li li{margin-bottom:.6rem}
.foot-li a:hover{color:var(--mint);padding-left:.3rem;transition:.2s}
.foot-li.mt2{margin-top:1.2rem}
.foot-reg{font-size:.8rem;line-height:1.8;color:#7fa39c}
.foot-reg strong{color:#bfe0d9}
.foot-b{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.5rem;font-size:.8rem;color:#5e817b}

/* cookie */
.cookie{position:fixed;bottom:1.2rem;left:1.2rem;right:1.2rem;max-width:var(--mx);margin:0 auto;background:var(--teal);color:#cfe3de;border:1px solid var(--ligne-d);border-radius:var(--r);box-shadow:var(--sh);padding:1.3rem 1.6rem;z-index:970;display:none}
.cookie.show{display:block}
.cookie-in{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:space-between}
.cookie-t{font-size:.84rem;max-width:44rem;color:#a9c7c1}
.cookie-t a{color:var(--mint);text-decoration:underline}
.cookie-b{display:flex;gap:.7rem}

/* Grid items default to min-width:auto, so a child that cannot shrink below its
   min-content widens the whole track and pushes the section past the viewport.
   This is what made the forms, contact cards and example boxes overflow on mobile. */
.hero-grid>*,.split>*,.form-wrap>*,.prods>*,.feats>*,.steps>*,.stats>*,.kgrid>*,.foot-t>*{min-width:0}
.ex-row>*,.feat>*,.kl>*{min-width:0}

/* reveal */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s,transform .8s}

/* responsive */
@media(max-width:980px){
  .nav{display:none}.burg{display:block}
  .hero-grid,.split,.form-wrap{grid-template-columns:1fr;gap:2.5rem}
  /* The hero visual is absolutely composed on desktop; below this width it
     becomes a normal flow block so the cards can never overlap or clip. */
  .hero-vis{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;justify-items:center;align-items:start}
  .hero-blob{display:none}
  .hero-main{position:static;transform:none;grid-column:1/-1;max-width:300px;margin:0 auto}
  .hero-card{position:static;inset:auto;width:100%;padding:.9rem 1.1rem}
  .hero{padding:3.5rem 0 4rem}
  .prods,.feats{grid-template-columns:repeat(2,1fr)}
  .steps,.stats{grid-template-columns:repeat(2,1fr)}
  .foot-t{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .head-cta .btn{display:none}
  .brand .logo-svg{height:38px}
  .wrap{padding:0 1.3rem}
  .sec{padding:3.5rem 0}
  .grid2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .prods,.feats,.steps,.stats,.foot-t{grid-template-columns:1fr}
  .hero-vis{grid-template-columns:1fr}
  .hero-trust{gap:1.3rem}
  .foot-b{flex-direction:column}
  /* desktop card padding eats ~80px of a 375px screen */
  .form-card,.calc{padding:1.5rem 1.3rem}
  .ex-card,.box-dark{padding:1.3rem}
  .prod{padding:1.6rem 1.4rem}
  .step{padding:1.5rem 1.3rem}
  .faq-q{padding:1.1rem 1.1rem;font-size:1rem}
  .faq-a p{padding:0 1.1rem 1.1rem}
  .kl{padding:1.1rem}
  .foot-t{gap:1.8rem}
  .sec-head{margin-bottom:2.2rem}
  .sec-head.ctr{margin-bottom:2.2rem}
  .cta{padding:3.5rem 0}
  .ex-row{gap:.9rem}
  .ex-row span:first-child{flex:1 1 auto}
  .ex-row b{flex:none;text-align:right}
  /* stack the § 6a PAngV badge so the mandatory text gets the full width */
  .pflicht-in{flex-direction:column;gap:.5rem;padding:.85rem 0}
  .pflicht-tag{align-self:flex-start;margin-top:0}
  .pflicht p{font-size:.73rem;line-height:1.55}
  .prose h2{font-size:1.32rem}
  .page-hero{padding:2.6rem 0}
  .danke{padding:2.5rem 0}
  .danke h1{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}