/* investabzug.de – Look wie wärmepumpe-pv.de: Creme, Dunkelgrün, Orange, runde Karten, Outfit */
:root{--cream:#F3F5F7;--sand:#E3E8EE;--sand2:#CBD3DD;--green:#16304D;--green-dk:#0D1C2E;--orange:#2F6DB5;--yellow:#FFC72C;--yellow-dk:#E8AD00;--orange-dk:#255A97;--ink:#14202E;--muted:#5A6878;--line:#D5DBE3;--white:#fff;--warn:#F7EBD6;--r:24px;--r-s:14px;--font:'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--font);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}a{color:inherit}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.02em;line-height:1.12;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.9rem)}h2{font-size:clamp(1.7rem,1.1rem + 2.2vw,2.9rem)}h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
.wrap{width:min(100% - 2rem,1200px);margin-inline:auto}.wrap-n{width:min(100% - 2rem,860px);margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:99;border-radius:8px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.center{text-align:center}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}.small{font-size:.88rem}.muted{color:var(--muted)}
/* Kopf */
.head{padding:22px 0 10px;text-align:center;position:relative}
.logo{font-weight:700;font-size:1.7rem;letter-spacing:-.04em;text-decoration:none;color:var(--green)}.logo b{color:var(--orange);font-weight:700}
.sticker{position:fixed;left:14px;top:14px;z-index:60;width:96px;height:96px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:700;font-size:.74rem;line-height:1.15;letter-spacing:.04em;text-transform:uppercase;transform:rotate(-14deg);box-shadow:0 10px 24px -8px rgba(168,100,28,.5);transition:transform .2s}
.sticker:hover{transform:rotate(-6deg) scale(1.05)}
@media(max-width:640px){.sticker{width:74px;height:74px;font-size:.62rem;left:8px;top:8px}.head{padding-left:70px;padding-right:12px;text-align:left}}
/* Hero + Funnel */
.hero{padding:10px 0 40px}
.herocard{background:var(--sand);border-radius:var(--r);padding:clamp(1.6rem,1rem + 3vw,3.4rem) clamp(1rem,.5rem + 3vw,3rem);text-align:center}
.herocard h1{max-width:22ch;margin:0 auto .45em}
.checks{list-style:none;padding:0;margin:0 auto 1.6rem;display:grid;gap:.4rem;max-width:560px;text-align:left;font-size:.98rem}
.checks li{display:flex;gap:.6rem;align-items:flex-start}.checks svg{flex:0 0 auto;margin-top:.22rem;color:var(--orange)}
.funnel{max-width:820px;margin:0 auto}
.progress{display:flex;gap:.4rem;max-width:520px;margin:0 auto 1.4rem}.progress span{flex:1;height:4px;border-radius:99px;background:var(--sand2);transition:background .25s}.progress span.is-done{background:var(--green)}
.counter{font-size:.86rem;color:var(--muted);margin:0 0 .5rem}
.step{display:none;border:0;padding:0;margin:0;min-inline-size:0}.step.is-active{display:block;animation:in .3s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q{font-size:clamp(1.2rem,1rem + .8vw,1.55rem);font-weight:600;color:#3A4655;margin:0 0 .3rem}
.hint{font-size:.92rem;color:var(--muted);margin:0 auto 1.3rem;max-width:560px}
.tiles{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.tile{position:relative;flex:1 1 170px;max-width:210px}
.tile input{position:absolute;opacity:0;width:0;height:0}
.tile span.box{display:flex;flex-direction:column;align-items:center;gap:.5rem;height:100%;padding:1.2rem .8rem;background:var(--cream);border:2px solid transparent;border-radius:var(--r-s);cursor:pointer;transition:.18s;font-weight:600;color:#414E5D;text-align:center}
.tile span.box:hover{border-color:var(--sand2);transform:translateY(-2px)}
.tile input:checked+span.box{border-color:var(--orange);background:#fff;box-shadow:0 10px 24px -14px rgba(168,100,28,.45)}
.tile input:focus-visible+span.box{outline:3px solid var(--orange);outline-offset:2px}
.tile .big{font-size:1.5rem;font-weight:700;color:var(--green);letter-spacing:-.03em;line-height:1}
.tile small{display:block;font-weight:400;color:var(--muted);font-size:.8rem;line-height:1.35}
.tile svg{width:44px;height:44px;color:var(--green)}
.nav2{display:flex;gap:.7rem;justify-content:center;margin-top:1.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;font:600 1rem var(--font);padding:.95rem 1.7rem;border-radius:999px;text-decoration:none;background:var(--orange);color:#fff;transition:.18s}
.btn:hover{background:var(--orange-dk)}.btn:active{transform:scale(.98)}
.btn--ghost{background:transparent;color:var(--green);border:2px solid var(--green)}.btn--ghost:hover{background:var(--green);color:#fff}
.btn--dark{background:var(--green);color:#fff}.btn--dark:hover{background:var(--green-dk)}
.btn--lg{padding:1.1rem 2.1rem;font-size:1.08rem}
.result{max-width:560px;margin:0 auto}
.result__label{font-size:.95rem;color:var(--muted);margin:0 0 .2rem}
.result__num{font-size:clamp(3rem,2rem + 4vw,4.8rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--green);margin:0}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.4rem 0 1.1rem;text-align:left}
.minis div{background:var(--cream);border-radius:var(--r-s);padding:.8rem 1rem}.minis span{display:block;font-size:.76rem;color:var(--muted);line-height:1.3}.minis b{font-size:1.25rem;font-weight:600}
.warn{background:var(--warn);border-radius:var(--r-s);padding:.7rem 1rem;font-size:.9rem;color:#6B4310;margin:0 0 1rem}
.fine{font-size:.84rem;color:var(--muted);line-height:1.55}
.foot-note{display:flex;gap:.5rem;justify-content:center;align-items:center;color:var(--muted);font-size:.86rem;margin-top:1.6rem}.foot-note svg{color:var(--green)}
/* Band */
.band{padding:46px 0}.band .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;text-align:center}
.band .num{font-size:clamp(2.4rem,1.6rem + 3vw,4rem);font-weight:700;letter-spacing:-.04em;color:var(--green);line-height:1}.band p{color:var(--muted);margin-top:.4rem}
/* Sektionen */
.sec{padding:clamp(3.2rem,2rem + 5vw,6.5rem) 0}.sec--sand{background:var(--sand)}
.sec--dark{background:var(--green-dk);color:#E6ECF3}.sec--dark h2,.sec--dark h3{color:#fff}.sec--dark p{color:#C7D3E1}
.hd{max-width:760px;margin:0 auto 2.6rem;text-align:center}.hd .lead{color:var(--muted);font-size:1.15rem}.sec--dark .hd .lead{color:#C7D3E1}
.cols2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.6rem}
.sec--dark .three .item{background:rgba(255,255,255,.06);border-radius:var(--r-s);padding:1.2rem 1.3rem}
.three .item b{display:block;color:var(--orange);font-weight:700;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.three .item h3{margin-bottom:.4rem;font-size:1.15rem}.three .item p{font-size:.95rem;margin:0}
/* Schritte (zwei Spalten wie das Vorbild) */
.steps{display:grid;grid-template-columns:1fr 1fr;border-radius:var(--r);overflow:hidden}
.steps__l{background:linear-gradient(160deg,var(--green),var(--green-dk));color:#fff;padding:clamp(1.6rem,1rem + 3vw,3.6rem);display:flex;flex-direction:column;justify-content:center;gap:1rem}
.steps__l h3{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.3rem);font-weight:500;margin:0}.steps__l p{color:#C7D3E1;margin:0}
.steps__r{background:var(--sand2);padding:clamp(1.4rem,1rem + 2vw,3rem);display:grid;gap:1.6rem;align-content:center}
.stp{display:grid;grid-template-columns:3.4rem 1fr;gap:1rem;align-items:start}.stp i{font-style:normal;font-size:2rem;font-weight:300;color:var(--green);letter-spacing:-.04em;line-height:1}
.stp h4{margin:0 0 .25rem;font-size:1.15rem;font-weight:600}.stp p{margin:0;color:#475463;font-size:.98rem}
/* Rechner */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.calc__in{background:var(--sand);border-radius:var(--r);padding:clamp(1.3rem,1rem + 2vw,2.4rem);display:grid;gap:1.1rem;align-content:start}
.calc__in label{display:block;font-weight:600;font-size:.95rem;margin-bottom:.35rem}
.calc__in output{color:var(--orange);font-weight:700;margin-left:.4rem}
.calc__in input[type=number]{width:100%;padding:.85rem 1rem;border:2px solid transparent;border-radius:var(--r-s);font:inherit;background:var(--cream)}.calc__in input[type=number]:focus{outline:none;border-color:var(--orange)}
.calc__in input[type=range]{width:100%;accent-color:var(--orange)}
.calc__in .chk{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.92rem}.calc__in .chk input{margin-top:.3rem;accent-color:var(--orange)}
.calc__out{background:var(--green);color:#fff;border-radius:var(--r);padding:clamp(1.3rem,1rem + 2vw,2.4rem)}
.calc__out .result__label{color:#AEBBCB}.calc__out .result__num{color:#fff}
.line{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.97rem}.line b{font-weight:600}
.line.total{border:0;margin-top:.4rem;font-size:1.05rem}.line.total b{color:var(--orange);font-size:1.3rem}
.calc__out .fine{color:#AEBBCB;margin-top:.8rem}
.chartcard{background:#fff;border-radius:var(--r);padding:1.2rem 1.4rem;margin-top:1.2rem}.legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.84rem;color:var(--muted);margin-top:.5rem}.legend i{display:inline-block;width:11px;height:11px;margin-right:.4rem;border-radius:3px}
/* Vergleich */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.vs>div{border-radius:var(--r);padding:clamp(1.3rem,1rem + 2vw,2.2rem)}
.vs .no{background:var(--sand)}.vs .yes{background:var(--green);color:#fff}.vs .yes h3{color:#fff}
.vs ul{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.7rem}.vs li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}.vs li svg{flex:0 0 auto;margin-top:.2rem}.vs .no svg{color:#98A2AF}.vs .yes svg{color:var(--orange)}
/* FAQ */
.faq details{background:var(--white);border-radius:var(--r-s);margin-bottom:.7rem;padding:0 1.3rem}.faq summary{cursor:pointer;list-style:none;font-weight:600;padding:1.1rem 0;display:flex;justify-content:space-between;gap:1rem}.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--orange);font-size:1.5rem;line-height:1;font-weight:400}.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 1.2rem;color:#43505F}
/* Fuß */
.foot{background:var(--green-dk);color:#AEBBCB;padding:3rem 0 5.5rem}
.foot .logo{color:#fff}.foot .logo b{color:var(--yellow)}.foot a{color:#E6ECF3;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}.foot ul{list-style:none;padding:0;margin:.4rem 0 0;display:grid;gap:.4rem}.foot h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#8396AB;margin:0}
.foot .bar{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12);font-size:.84rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}
.legal{padding:2rem 0 4rem}.legal h1{font-size:2.2rem}.legal h2{font-size:1.3rem;margin-top:1.6em}.legal .entwurf{background:var(--warn);border-radius:var(--r-s);padding:.9rem 1.1rem;margin:1rem 0 1.4rem;font-size:.92rem}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(13,28,46,.96);color:#fff;padding:.7rem 1rem;display:none;align-items:center;justify-content:space-between;gap:1rem}.sticky p{margin:0;font-size:.9rem}.sticky b{display:block}
@media(max-width:860px){.cols2,.calc,.vs,.steps{grid-template-columns:1fr}.three{grid-template-columns:1fr}.band .grid3{gap:.6rem}.sticky{display:flex}.foot{padding-bottom:6rem}}
@media(max-width:560px){.minis{grid-template-columns:1fr}.tile{max-width:none;flex:1 1 100%}.herocard{padding-inline:1rem}}

/* ruhiger */
.herocard h1{font-size:clamp(1.9rem,1.1rem + 2.8vw,3.1rem);max-width:20ch}
.sub{max-width:520px;margin:0 auto 1.8rem;color:var(--muted);font-size:1.05rem}
.sec{padding:clamp(3rem,2rem + 4vw,5.5rem) 0}
.three3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,1rem + 3vw,3.5rem);max-width:1000px;margin:0 auto}
.three3 b{display:block;color:var(--orange);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.three3 h3{font-weight:500;font-size:1.3rem;margin-bottom:.4rem}.three3 p{color:var(--muted);font-size:1rem}
.sec--sand .hd{margin-bottom:2rem}
@media(max-width:860px){.three3{grid-template-columns:1fr}}

/* Ratgeber */
.topnav{position:absolute;right:1.2rem;top:30px;display:none;gap:1.4rem;font-weight:500;font-size:.95rem}.topnav a{text-decoration:none;color:var(--green)}.topnav a:hover{color:var(--orange)}
@media(min-width:900px){.topnav{display:flex}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}.cards--s{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rcard{display:flex;flex-direction:column;gap:.5rem;background:var(--sand);border-radius:var(--r-s);padding:1.3rem 1.4rem;text-decoration:none;color:var(--ink);transition:.18s}.rcard:hover{background:#fff;transform:translateY(-2px)}
.rcard h3{margin:0;font-size:1.15rem}.rcard p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.5}.rcard span{margin-top:auto;color:var(--orange);font-weight:600;font-size:.9rem}
.article{padding:1rem 0 4rem}.article h1{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem);margin-bottom:.6rem}.article h2{font-size:1.5rem;margin-top:2.2rem}
.article p,.article li{font-size:1.04rem}.article ul,.article ol{padding-left:1.3rem}.article li{margin-bottom:.5rem}
.crumbs{font-size:.88rem;color:var(--muted)}.crumbs a{color:var(--green)}
.answer{background:var(--sand);border-left:4px solid var(--orange);border-radius:var(--r-s);padding:1.1rem 1.3rem;margin:1.2rem 0 1rem;font-size:1.08rem}
.tbl{width:100%;border-collapse:collapse;margin:1rem 0;font-size:.95rem;background:#fff;border-radius:var(--r-s);overflow:hidden}.tbl th,.tbl td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--line)}.tbl th{background:var(--sand);font-weight:600}
@media(max-width:620px){.tbl{display:block;overflow-x:auto}}
.ctabox{background:var(--green);color:#fff;border-radius:var(--r);padding:1.6rem 1.8rem;margin:2.4rem 0;text-align:center}.ctabox h2{color:#fff;margin-top:0}.ctabox p{color:#C7D3E1}
.herocard h1{font-size:clamp(1.7rem,1rem + 2.5vw,2.8rem);max-width:24ch}

/* seriöser: Marineblau + gedämpftes Messing, Buttons in Blau */
.btn{background:var(--green);color:#fff}.btn:hover{background:var(--green-dk)}
.btn--ghost{background:transparent;color:var(--green);border:2px solid var(--green)}.btn--ghost:hover{background:var(--green);color:#fff}
.sec--dark .btn,.steps__l .btn,.calc__out .btn,.ctabox .btn{background:#E0A94F;color:#0D1C2E}.sec--dark .btn:hover,.steps__l .btn:hover,.calc__out .btn:hover,.ctabox .btn:hover{background:#EDBB68}
.tile input:checked+span.box{box-shadow:0 10px 24px -14px rgba(22,48,77,.5)}
.calc__in input[type=range]{accent-color:var(--green)}
.logo{color:var(--green)}.logo b{color:var(--orange)}
.eyebrow,.three3 b{color:var(--orange)}
.line.total b{color:#E0A94F}
.result__num{color:var(--green)}
.checks svg{color:var(--orange)}
.faq summary::after{color:var(--orange)}
.rcard span{color:var(--orange)}
.progress span.is-done{background:var(--green)}

/* Blau + Gelb */
.btn,.sec--dark .btn,.steps__l .btn,.calc__out .btn,.ctabox .btn{background:var(--yellow);color:#0D1C2E}
.btn:hover,.sec--dark .btn:hover,.steps__l .btn:hover,.calc__out .btn:hover,.ctabox .btn:hover{background:var(--yellow-dk);color:#0D1C2E}
.btn--ghost{background:transparent;color:var(--green);border:2px solid var(--green)}.btn--ghost:hover{background:var(--green);color:#fff}
.tile input:checked+span.box{border-color:var(--yellow);box-shadow:0 10px 24px -14px rgba(22,48,77,.45)}
.tile input:focus-visible+span.box{outline:3px solid var(--yellow)}
.answer{border-left-color:var(--yellow)}
.eyebrow{color:var(--orange)}.eyebrow::before{content:"";display:inline-block;width:1.4rem;height:3px;background:var(--yellow);margin-right:.5rem;vertical-align:middle}
.three3 b{color:var(--orange)}
.line.total b{color:var(--yellow)}
.calc__in output{color:var(--orange)}
.calc__in .chk input,.calc__in input[type=range]{accent-color:var(--green)}
.faq summary::after{color:var(--orange)}.rcard span{color:var(--orange)}.logo b{color:var(--orange)}.checks svg{color:var(--orange)}
.progress span.is-done{background:var(--orange)}

/* Logo: "Invest" immer gelb */
.logo b,.foot .logo b{color:var(--yellow-dk)}