/*
Theme Name: Finanzen 2026 v2
Description: Modernes FinTech-Theme (Tailwind, three.js, Motion) fuer finanzen-2026.de
Version: 2.0
Text Domain: f2026
*/
:root{--bg:#06142b;--bg2:#0a1f3d;--cyan:#5fe3f5;--gold:#d9bf8a;--text:#e8eef8;--mut:#9fb2cc;--line:rgba(255,255,255,.12);--glass:rgba(255,255,255,.055)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;color:var(--text);background:radial-gradient(1100px 520px at 85% -8%,rgba(40,100,190,.28),transparent),radial-gradient(900px 480px at -10% 30%,rgba(95,227,245,.08),transparent),var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
a:hover{color:#9cf0fb}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:24px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,.28)}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 14px;border-radius:8px;z-index:100}.skip:focus{left:8px}
/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(6,20,43,.78);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.logo img{height:46px;width:auto;mix-blend-mode:lighten}
.nav-link{color:var(--text);text-decoration:none;font-weight:500;padding:8px 4px;border-bottom:2px solid transparent}
.nav-link:hover,.nav-link[aria-current=page]{color:var(--cyan);border-color:var(--cyan)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 26px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s}
.btn-primary{background:linear-gradient(135deg,#5fe3f5,#8af0fb);color:#04202b;box-shadow:0 0 34px rgba(95,227,245,.35)}
.btn-primary:hover{transform:translateY(-2px);color:#04202b;box-shadow:0 0 46px rgba(95,227,245,.55)}
.btn-ghost{border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.04)}
.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-gold{background:linear-gradient(135deg,#d9bf8a,#f0dcae);color:#2a1f06;box-shadow:0 0 30px rgba(217,191,138,.3)}
.btn-gold:hover{transform:translateY(-2px);color:#2a1f06}
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:.82rem;color:var(--mut)}
.chip b{color:var(--gold);font-weight:600}
/* Hero */
.hero-img{border-radius:28px;box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--line)}
#hero3d{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity 1.2s}#hero3d.is-live{opacity:1}
.grad-text{background:linear-gradient(120deg,#5fe3f5,#d9bf8a);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Karten */
.card-link{display:block;text-decoration:none;color:var(--text);transition:transform .25s,border-color .25s,box-shadow .25s}
.card-link:hover{transform:translateY(-6px);border-color:rgba(95,227,245,.55);box-shadow:0 26px 60px rgba(0,0,0,.45),0 0 40px rgba(95,227,245,.12);color:var(--text)}
.card-img{aspect-ratio:16/9;width:100%;object-fit:cover;border-radius:20px 20px 0 0}
.tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:700}
/* Artikel */
.crumbs{font-size:.85rem;color:var(--mut)}.crumbs a{color:var(--mut);text-decoration:none}.crumbs a:hover{color:var(--cyan)}
.prose-f{font-size:1.06rem;color:#d3deee}
.prose-f>*:first-child{margin-top:0}
.prose-f h2{font-size:1.65rem;line-height:1.25;margin:2.4em 0 .7em;color:#fff;scroll-margin-top:90px}
.prose-f h3{font-size:1.2rem;margin:1.8em 0 .5em;color:#fff}
.prose-f p,.prose-f li{color:#d3deee}
.prose-f ul,.prose-f ol{padding-left:1.3em}.prose-f li{margin:.35em 0}
.prose-f a{text-decoration:underline;text-underline-offset:3px}
.prose-f strong{color:#fff}
.prose-f figure{margin:2.2em 0}
.prose-f figure img{border-radius:22px;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.4);width:100%}
.prose-f figcaption{font-size:.82rem;color:var(--mut);margin-top:.6em;text-align:center}
.stand{color:var(--mut);font-size:.88rem}
.toc a{display:block;color:var(--mut);text-decoration:none;padding:6px 0 6px 14px;border-left:2px solid var(--line);font-size:.92rem;line-height:1.35}
.toc a:hover{color:var(--cyan);border-color:var(--cyan)}
#read-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#5fe3f5,#d9bf8a);transform-origin:0 50%;transform:scaleX(0);z-index:60}
/* Rechner */
.calc{padding:28px;margin:26px 0;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.calc label{display:block;font-size:.9rem;color:var(--mut);margin-top:12px}
.calc input[type=number],.calc select{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.28);color:var(--text);font-size:1rem}
.calc .out{background:linear-gradient(160deg,rgba(95,227,245,.12),rgba(95,227,245,.03));border:1px solid var(--line);border-radius:18px;padding:22px}
.calc .big{font-size:2.2rem;font-weight:800;color:var(--cyan);line-height:1.15}
.calc .row{display:flex;justify-content:space-between;gap:14px;color:var(--mut);margin-top:10px;font-size:.92rem}.calc .row b{color:var(--text);text-align:right;white-space:nowrap}
.calc label.chk{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:.85rem}.calc label.chk input{margin-top:3px}
.calc-note{color:var(--mut);font-size:.85rem}
/* Tabellen und Partnerboxen */
table.cmp{width:100%;border-collapse:separate;border-spacing:0;margin:1.4em 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;font-size:.95rem}
.cmp th,.cmp td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.cmp tr:last-child td{border-bottom:0}
.cmp th{background:rgba(255,255,255,.06);color:var(--gold);font-weight:600}
.partner{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:1em 0 1.6em}
.partner-card{padding:20px;display:flex;flex-direction:column;gap:12px}
.partner-card h3{margin:0;font-size:1.05rem}
.ad-tag{font-size:.68rem;color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-left:8px;white-space:nowrap}
.ad-note{color:var(--mut);font-size:.85rem}
.go{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#d9bf8a,#f0dcae);color:#2a1f06;padding:10px 18px;border-radius:999px;text-decoration:none;font-weight:700;white-space:nowrap}
.go:hover{filter:brightness(1.07);color:#2a1f06}
.prose-f a.go{text-decoration:none}
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;transform:translateY(110%);transition:transform .35s}
.cta-bar.show{transform:none}
/* Footer */
.site-footer{border-top:1px solid var(--line);background:rgba(3,10,24,.6);color:var(--mut);font-size:.92rem}
.site-footer a{color:var(--text);text-decoration:none}.site-footer a:hover{color:var(--cyan)}
.legal{max-width:880px;font-size:.82rem}
/* Cookie-Banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:780px;margin:auto;padding:18px 22px;z-index:99;background:#0a1f3d;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.cookie-banner p{margin:0;flex:1 1 320px;font-size:.9rem;color:var(--text)}
.cookie-banner button{background:var(--cyan);color:#04202b;border:0;border-radius:999px;padding:9px 20px;font-weight:700;cursor:pointer;margin-right:8px}
.cookie-banner button[data-v=denied]{background:transparent;color:var(--text);border:1px solid var(--line)}
@media(max-width:800px){.calc{grid-template-columns:1fr}.prose-f h2{font-size:1.4rem}.cmp{font-size:.88rem}.cmp th,.cmp td{padding:10px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Hub-Kartenraster fuer Seiteninhalte */
.grid-cards{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:1.6em 0}
.prose-f a.card-link{text-decoration:none}
.prose-f .card-link h3{margin:0 0 .4em;color:#fff;font-size:1.1rem}
.prose-f .card-link p{margin:0;font-size:.94rem;color:var(--mut)}
.prose-f .card-link .pad{padding:22px}
.prose-f .card-link .more{display:inline-block;margin-top:12px;font-weight:600;color:var(--cyan);font-size:.92rem}