/* stil26.css – erzeugt aus style.css (Stand Paket Z2) für die Seiten im Stil 2026. Unterschiede: Überschriften-Schrift über var(--kc-kopf) (Geist), Orange -> Blau. Blog-Beiträge nutzen weiter style.css. */ /* Selbstgehostete Schriften (DSGVO – kein Google-Server) */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff') format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff') format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff') format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff') format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* ============================================================ KlimaCraft – Website Design-System Farbwelt: Heller Himmel-Look + dunkle Navy-Akzentsektionen Schriften: Sora (Headlines) / Inter (Fließtext) ============================================================ */ :root{ /* Blau-Palette (Marke) */ --navy:#0F182B; --navy2:#141F39; --navy3:#0D1424; --blue:#2563EB; --blue-d:#1D4ED8; --blue-br:#3B82F6; --sky:#60A5FA; --sky-l:#BFDBFE; --cyan:#22D3EE; --ice:#67E8F9; --ice2:#A5F3FC; /* Himmel-Verlauf (Hero) */ --sky-top:#C9E4FF; --sky-mid:#E4F1FF; --sky-low:#F7FBFF; /* CTA – einzige Warmfarbe */ --warm:#4589F7; --warm-d:#3275E0; /* Neutral */ --ink:#0B1220; --slate:#5B6573; --slate-l:#8B95A6; --line:#E4E9F2; --line2:#EEF2FB; --bg:#FFFFFF; --bg2:#F5F8FF; --bg3:#EAF1FE; /* Status */ --green:#16A34A; --greenbg:#E7F7EE; --red:#DC2626; --redbg:#FEECEC; --amber:#D97706; --amberbg:#FFF4E5; --r:18px; --shadow:0 24px 60px -22px rgba(13,38,84,.28); --shadow-sm:0 10px 30px -14px rgba(13,38,84,.20); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4{font-family:var(--kc-kopf);letter-spacing:-.022em;line-height:1.14} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 26px} html,body{overflow-x:clip} .sec{padding:96px 0} .sec.tight{padding:70px 0} /* ---------- Eyebrow / Section Heads ---------- */ .eyebrow{font-size:13px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);margin-bottom:15px;display:flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:26px;height:2px;background:var(--cyan)} .eyebrow.c{justify-content:center}.eyebrow.c::before{display:none} .eyebrow.lt{color:var(--ice)} .shead{max-width:760px;margin-bottom:54px} .shead.center{margin:0 auto 56px;text-align:center} .shead h2{font-size:38px;font-weight:800;color:var(--navy);margin-bottom:16px} .shead p{font-size:18px;color:var(--slate)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;padding:15px 27px;border-radius:13px;cursor:pointer;border:none;transition:.18s;font-family:inherit} .btn-primary{background:var(--warm);color:#fff;box-shadow:0 12px 28px -10px rgba(69,137,247,.6)} .btn-primary:hover{background:var(--warm-d);transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(69,137,247,.7)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 12px 26px -10px rgba(37,99,235,.5)} .btn-blue:hover{background:var(--blue-d);transform:translateY(-2px)} .btn-ghost{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.32)} .btn-ghost:hover{background:rgba(255,255,255,.18)} .btn-out{background:#fff;border:1.5px solid var(--line);color:var(--navy)} .btn-out:hover{border-color:var(--blue);color:var(--blue)} .btn.sm{padding:11px 20px;font-size:14.5px} /* ---------- Header / Navigation (Floating-Pill, Premium) ---------- */ header{position:fixed;top:0;left:0;right:0;z-index:60;transition:.25s;padding:16px 0;background:transparent} header.scrolled{padding:10px 0} .nav{display:flex;align-items:center;justify-content:space-between;gap:20px; background:rgba(255,255,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid rgba(228,233,242,.95);border-radius:60px;padding:9px 9px 9px 22px; box-shadow:0 10px 34px -16px rgba(13,38,84,.22);transition:.25s} header.scrolled .nav,header.solid .nav{background:rgba(255,255,255,.94);box-shadow:0 14px 40px -16px rgba(13,38,84,.3)} .nav .btn{border-radius:32px} .logo{font-family:var(--kc-kopf);font-weight:800;font-size:21px;display:flex;align-items:center;gap:10px;color:var(--navy)} .logo .mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:var(--shadow-sm)} .navlinks{display:flex;gap:28px;font-size:15px;font-weight:500;color:var(--ink)} .navlinks a{position:relative;padding:4px 0} .navlinks a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--cyan);transition:right .22s ease} .navlinks a:hover::after{right:0} .navlinks a:hover,.navlinks a.on{color:var(--blue)} .navlinks a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--cyan)} .nav-cta{display:flex;align-items:center;gap:16px} .nav-cta .login{font-size:15px;font-weight:600;color:var(--navy)} .nav-cta .login:hover{color:var(--blue)} .burger{display:none;background:none;border:none;font-size:26px;color:var(--navy);cursor:pointer} .mobilenav{display:none;position:fixed;top:84px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:59;padding:18px 26px;flex-direction:column;gap:4px} .mobilenav.open{display:flex} .mobilenav a{padding:12px 4px;font-weight:600;font-size:16px;border-bottom:1px solid var(--line2)} .mobilenav .btn{margin-top:12px;justify-content:center} /* ---------- Hero (Himmel-Look) ---------- */ .hero{position:relative;padding:160px 0 0;overflow:visible; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 46%,#fff 100%)} /* weiche Wolken */ .hero .clouds{position:absolute;inset:0;pointer-events:none; background: radial-gradient(340px 120px at 12% 16%,rgba(255,255,255,.95),transparent 70%), radial-gradient(460px 150px at 78% 10%,rgba(255,255,255,.9),transparent 70%), radial-gradient(280px 100px at 40% 26%,rgba(255,255,255,.75),transparent 70%), radial-gradient(520px 170px at 95% 38%,rgba(255,255,255,.8),transparent 70%), radial-gradient(300px 110px at 5% 48%,rgba(255,255,255,.7),transparent 70%); animation:drift 60s linear infinite alternate} @keyframes drift{from{transform:translateX(-14px)}to{transform:translateX(14px)}} .hero .glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(720px 420px at 70% 0%,rgba(103,232,249,.16),transparent 60%)} .hero .wrap{position:relative;z-index:2;text-align:center;max-width:1180px} .hero .badgeline{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:30px;padding:7px 16px;font-size:13.5px;font-weight:600;color:var(--blue);box-shadow:var(--shadow-sm);margin-bottom:22px} .hero h1{font-size:54px;font-weight:800;color:var(--navy);max-width:900px;margin:0 auto 20px} .hero h1 .hl{background:linear-gradient(115deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.lead{font-size:19px;color:var(--slate);max-width:660px;margin:0 auto 32px} .hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px} .trustline{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;font-size:13.5px;color:var(--slate)} .trustline span{display:flex;align-items:center;gap:7px} .trustline .dot{width:6px;height:6px;border-radius:50%;background:var(--blue)} /* Hero Produkt-Screenshot – ragt in die nächste Sektion hinein (saasi-Stil) */ .hero-shot{position:relative;max-width:980px;margin:60px auto -170px;z-index:5} .appwin{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--line);position:relative; transform:perspective(1400px) rotateX(6deg) scale(.98);transition:transform .9s cubic-bezier(.2,.7,.2,1)} .appwin.flat{transform:perspective(1400px) rotateX(0) scale(1)} .win-top{background:#fff;border-bottom:1px solid var(--line);padding:10px 14px;display:flex;align-items:center;gap:7px} .win-top i{width:11px;height:11px;border-radius:50%} .win-top .r{background:#FF5F57}.win-top .y{background:#FEBC2E}.win-top .g{background:#28C840} .win-top .ttl{margin-left:10px;font-size:12px;color:#8893a6;font-weight:600} .app{display:grid;grid-template-columns:150px 1fr;text-align:left} .appbar{background:var(--line2);padding:12px 0;border-right:1px solid var(--line)} .appbar .brand{display:flex;align-items:center;gap:7px;font-family:var(--kc-kopf);font-weight:800;font-size:13px;color:var(--navy);padding:0 12px 12px} .appbar .brand .s{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,var(--blue),var(--cyan))} .appbar a{display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:11.5px;color:#56627a;font-weight:500} .appbar a .di{width:15px;text-align:center;opacity:.8} .appbar a.on{background:#fff;color:var(--blue);font-weight:700;box-shadow:inset 3px 0 0 var(--blue)} .appmain{padding:16px;background:var(--bg2)} .qrow{display:flex;gap:7px;margin-bottom:12px} .qbtn{flex:1;background:#fff;border:1px solid var(--line);border-radius:9px;padding:8px;font-size:10.5px;font-weight:600;color:#48566e;text-align:center} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px;border-top:3px solid var(--blue);position:relative; opacity:0;transform:translateY(14px);transition:.5s} .kpi.in{opacity:1;transform:none} .kpi.r{border-top-color:var(--red)}.kpi.g{border-top-color:var(--green)}.kpi.b{border-top-color:var(--blue)}.kpi.o{border-top-color:var(--warm)} .kpi .l{font-size:9px;color:#7a8699;font-weight:600;line-height:1.3} .kpi .v{font-family:var(--kc-kopf);font-weight:800;font-size:20px;color:var(--navy);margin-top:5px} .kpi .v small{font-size:11px} .kpi .tr{position:absolute;top:9px;right:9px;font-size:8px;font-weight:700;padding:2px 5px;border-radius:10px} .tr.up{background:var(--greenbg);color:var(--green)}.tr.down{background:var(--redbg);color:var(--red)}.tr.bl{background:var(--bg3);color:var(--blue)}.tr.am{background:var(--amberbg);color:var(--amber)} .mtable{background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:9px;padding:10px 12px} .mtable .th{font-size:9px;color:#9aa6ba;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;display:flex;justify-content:space-between} .mtable .tr2{display:flex;justify-content:space-between;font-size:11px;color:var(--navy);padding:4px 0} .mtable .tr2 b{font-weight:700} .live{display:inline-flex;align-items:center;gap:5px;font-size:9px;color:var(--green);font-weight:700} .live .pd{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}} /* Floating Cards über dem Screenshot */ .float{position:absolute;background:#fff;border-radius:13px;box-shadow:var(--shadow);padding:11px 15px;display:flex;align-items:center;gap:11px;border:1px solid var(--line);z-index:5; opacity:0;transition:.7s cubic-bezier(.2,.7,.2,1)} .float .fic{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;display:grid;place-items:center;font-size:16px} .float b{font-size:12.5px;color:var(--navy);display:block;font-family:var(--kc-kopf)} .float small{font-size:10.5px;color:var(--slate)} .float.f1{top:112px;left:-150px;transform:translateX(-40px)} .float.f2{bottom:-48px;right:-56px;transform:translateX(40px)} .float.in{opacity:1;transform:translateX(0)} /* ---------- Partner-Band (zentriert: Text oben, Logos in einer Reihe darunter) ---------- */ .partners{background:linear-gradient(165deg,#0A101D,#141F39);padding:250px 0 54px;text-align:center;position:relative} .partners::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 260px at 50% 0,rgba(103,232,249,.1),transparent 60%);pointer-events:none} .partners .wrap{position:relative;z-index:1} .partners .ptxt{font-size:13px;font-weight:600;color:rgba(191,209,238,.75);letter-spacing:.09em;text-transform:uppercase;margin-bottom:28px} .partners .plogos{display:flex;gap:52px;align-items:center;justify-content:center;flex-wrap:wrap} .partners .lg{font-family:var(--kc-kopf);font-weight:700;color:#4E6390;font-size:18px;transition:.2s} .partners .lg:hover{color:var(--ice)} /* ---------- Problem-Sektion ---------- */ .problems{background:var(--bg2)} .pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm);transition:.2s} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pcard .pi{width:48px;height:48px;border-radius:13px;background:var(--redbg);display:grid;place-items:center;font-size:23px;margin-bottom:17px} .pcard h3{font-size:17px;color:var(--navy);margin-bottom:9px} .pcard p{font-size:14px;color:var(--slate)} .pturn{text-align:center;margin-top:46px;font-size:21px;color:var(--navy);font-weight:600} .pturn b{color:var(--blue)} /* ---------- Feature-Explorer (Photovate-Stil) ---------- */ .explorer{display:grid;grid-template-columns:340px 1fr;gap:34px;align-items:stretch} .tablist{display:flex;flex-direction:column;gap:8px} .tab{text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.18s;display:flex;gap:13px;align-items:flex-start;position:relative;overflow:hidden;font-family:inherit} .tab:hover{border-color:var(--sky)} .tab .ti{flex:none;width:38px;height:38px;border-radius:10px;background:var(--bg3);color:var(--blue);display:grid;place-items:center;font-size:18px;transition:.18s} .tab b{font-family:var(--kc-kopf);font-size:15px;color:var(--navy);display:block;margin-bottom:2px} .tab span{font-size:12.5px;color:var(--slate)} .tab.on{border-color:var(--blue);background:linear-gradient(180deg,#fff,var(--bg2));box-shadow:var(--shadow-sm)} .tab.on .ti{background:var(--blue);color:#fff} .tab .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--cyan);width:0} .tab.on .prog{animation:fill 8s linear forwards} @keyframes fill{from{width:0}to{width:100%}} .panelbox{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);overflow:hidden;position:relative;min-height:440px} .panel{display:none;animation:fadeUp .5s ease} .panel.on{display:grid;grid-template-columns:1fr 1fr} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .panel .ptext{padding:34px} .panel .ptext .badge{display:inline-block;font-size:11px;font-weight:700;color:var(--blue);background:var(--bg3);padding:5px 11px;border-radius:20px;margin-bottom:14px} .panel .ptext h3{font-size:24px;color:var(--navy);margin-bottom:12px} .panel .ptext p{font-size:15px;color:var(--slate);margin-bottom:16px} .panel .ptext ul{list-style:none;display:flex;flex-direction:column;gap:9px} .panel .ptext li{font-size:14px;display:flex;gap:9px;align-items:flex-start} .panel .ptext li::before{content:"✓";color:var(--blue);font-weight:800} .panel .plink{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;font-weight:700;color:var(--blue)} .panel .plink:hover{gap:10px} .pvis{background:linear-gradient(160deg,var(--navy),var(--navy2));padding:26px;display:grid;place-items:center;position:relative;overflow:hidden} .pvis::before{content:"";position:absolute;inset:0;background:radial-gradient(360px 200px at 80% 0,rgba(103,232,249,.18),transparent 60%)} /* Mini-Mockups (in Panels & Visuals) */ .mock{background:#fff;border-radius:13px;padding:15px;width:100%;position:relative;z-index:1;box-shadow:0 20px 40px -18px rgba(0,0,0,.45)} .mock .mh{display:flex;justify-content:space-between;align-items:center;font-family:var(--kc-kopf);font-weight:700;font-size:13px;color:var(--navy);margin-bottom:12px} .chip{font-size:9px;font-weight:700;padding:3px 8px;border-radius:20px} .chip.ok{background:var(--greenbg);color:var(--green)}.chip.due{background:var(--amberbg);color:var(--amber)}.chip.bl{background:var(--bg3);color:var(--blue)} .mrow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed var(--line);font-size:11.5px} .mrow span:first-child{color:var(--slate)}.mrow span:last-child{color:var(--navy);font-weight:600} .mrow:last-child{border-bottom:none} .mline{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;font-size:11px} .mline .ic{width:26px;height:26px;border-radius:7px;background:var(--bg3);display:grid;place-items:center;font-size:13px} .mline .tx{flex:1}.mline .tx b{display:block;color:var(--navy);font-size:11.5px}.mline .tx small{color:var(--slate);font-size:10px} .mkpis{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:8px} .mk{border:1px solid var(--line);border-radius:9px;padding:9px;border-top:3px solid var(--blue)} .mk.g{border-top-color:var(--green)}.mk.o{border-top-color:var(--warm)}.mk.r{border-top-color:var(--red)} .mk .l{font-size:8px;color:#7a8699;font-weight:600} .mk .v{font-family:var(--kc-kopf);font-weight:800;font-size:16px;color:var(--navy);margin-top:3px} .sig{margin-top:11px;border:1.5px dashed var(--blue);border-radius:9px;padding:9px;text-align:center;color:var(--blue);font-size:10px;font-weight:600} .sig .sgn{font-family:var(--kc-kopf);font-size:18px;color:var(--navy);font-style:italic;margin-top:2px} .barfill{height:7px;border-radius:6px;background:var(--bg3);overflow:hidden;margin-top:5px} .barfill i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:6px} /* ---------- Effizienz / ROI (saastainable-Stil) ---------- */ .roi{background:#fff} .roi-grid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center} .roi-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px} .stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:left} .stat b{font-family:var(--kc-kopf);font-size:38px;font-weight:800;color:var(--blue);display:block;line-height:1.1} .stat b small{font-size:20px} .stat b span{font-size:inherit;color:inherit;display:inline;margin:0} .stat > span{font-size:14px;color:var(--slate);display:block;margin-top:6px} .ulist{list-style:none;display:flex;flex-direction:column;gap:13px} .ulist li{display:flex;gap:12px;align-items:flex-start;font-size:15px} .ulist .ck{flex:none;width:24px;height:24px;border-radius:7px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px;margin-top:1px} /* ---------- USP-Zweispalter ---------- */ .usp{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center} .usp.rev .txt{order:2} .usp+.usp{margin-top:100px} .badge2{display:inline-flex;align-items:center;gap:8px;background:var(--bg3);color:var(--blue);font-weight:700;font-size:13px;padding:7px 14px;border-radius:30px;margin-bottom:18px} .usp h2{font-size:34px;color:var(--navy);margin-bottom:16px} .usp p{font-size:16.5px;color:var(--slate);margin-bottom:18px} .law{background:var(--amberbg);border:1px solid #FDE3BC;border-left:4px solid var(--warm);border-radius:12px;padding:16px 18px;margin-top:22px;font-size:14px;color:#7A4A12} .law b{color:var(--warm-d)} .visual{background:linear-gradient(160deg,var(--navy),var(--navy2));border-radius:22px;padding:30px;box-shadow:var(--shadow);position:relative;overflow:hidden} .visual::before{content:"";position:absolute;inset:0;background:radial-gradient(380px 200px at 80% 0,rgba(103,232,249,.18),transparent 60%)} .syncbar{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:9px 13px;margin-top:13px;color:#cfe0ff;font-size:11.5px;position:relative;z-index:1} .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:var(--ice);border-radius:50%;animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* ---------- Automatik-Kette (dunkle Akzentsektion) ---------- */ .chain{background:linear-gradient(160deg,var(--navy3),var(--navy2));color:#fff} .chain .shead h2{color:#fff} .chain .shead p{color:rgba(214,228,252,.85)} .chain-wrap{display:flex;flex-direction:column;gap:13px;max-width:900px;margin:0 auto} .step{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px 22px;transition:opacity .4s ease-out,transform .4s ease-out} .step.in{opacity:1;transform:none} .step .num{width:56px;height:56px;border-radius:15px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-family:var(--kc-kopf);font-weight:800;font-size:21px} .step h3{font-size:18px;margin-bottom:3px} .step p{font-size:14px;color:rgba(214,228,252,.8)} .step .auto{font-size:12px;font-weight:700;color:var(--ice);background:rgba(103,232,249,.12);padding:6px 12px;border-radius:20px;white-space:nowrap} .step .auto.manual{color:#C9DDFD;background:rgba(69,137,247,.16)} .chain-foot{text-align:center;margin-top:36px;font-size:18px} .chain-foot b{color:var(--ice)} /* ---------- Integrationen ---------- */ .integrations{background:var(--bg2)} .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .icard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm);display:flex;gap:16px;align-items:flex-start;transition:.2s} .icard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .icard .ilogo{flex:none;width:52px;height:52px;border-radius:13px;background:var(--bg3);display:grid;place-items:center;font-family:var(--kc-kopf);font-weight:800;font-size:13px;color:var(--blue);text-align:center;line-height:1.1;padding:4px} .icard h3{font-size:16px;color:var(--navy);margin-bottom:5px} .icard p{font-size:13.5px;color:var(--slate)} /* ---------- Kundenstimmen ---------- */ .proof .pq{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)} .qcard .stars{color:var(--warm);font-size:15px;margin-bottom:12px} .qcard p{font-size:15px;margin-bottom:18px} .qcard .who{display:flex;align-items:center;gap:11px} .qcard .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--kc-kopf)} .qcard .who b{font-size:14px;color:var(--navy);display:block} .qcard .who small{font-size:12.5px;color:var(--slate)} /* Sektion vorbereitet, aber noch ausgeblendet: Klasse "prelaunch-hidden" entfernen, sobald echte Kundenstimmen da sind. */ .prelaunch-hidden{display:none !important} /* ---------- Pricing ---------- */ .price-hero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;border-radius:26px;padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;box-shadow:var(--shadow);position:relative;overflow:hidden} .price-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 85% 10%,rgba(103,232,249,.16),transparent 60%)} .price-hero>div{position:relative;z-index:1} .price-hero h2{font-size:31px;margin-bottom:14px} .price-hero p{color:rgba(214,228,252,.86);font-size:16px;margin-bottom:18px} .price-hero ul{list-style:none;display:flex;flex-direction:column;gap:11px} .price-hero li{display:flex;gap:10px;font-size:14.5px} .price-hero li .ck{color:var(--ice);font-weight:800} .pcardbox{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:30px;text-align:center} .pcardbox .tag{font-size:13px;color:var(--ice);font-weight:700} .pcardbox .big{font-family:var(--kc-kopf);font-size:44px;font-weight:800;margin:6px 0} .pcardbox .big small{font-size:16px;font-weight:600} .pcardbox .sub{font-size:13px;color:rgba(214,228,252,.75);margin-bottom:20px} .pcardbox .btn{width:100%;justify-content:center} /* Vergleichstabelle */ .ctable{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)} .crow{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-bottom:1px solid var(--line)} .crow:last-child{border-bottom:none} .crow>div{padding:17px 20px;font-size:14px} .crow .cl{font-weight:600;color:var(--navy);background:var(--bg2)} .crow.h>div{background:var(--navy);color:#fff;font-family:var(--kc-kopf);font-weight:700} .crow.h .kc{background:var(--blue)} .crow .gen{color:var(--slate)} .crow .kc{background:#F2F7FF;border-left:2px solid var(--cyan)} .crow .kc b{color:var(--blue)} /* Feature-Aufzählung Preisseite */ .allfeat{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px} .allfeat div{display:flex;gap:9px;font-size:14px;align-items:flex-start} .allfeat div::before{content:"✓";color:var(--blue);font-weight:800} /* ---------- FAQ ---------- */ .faq-item{border-bottom:1px solid var(--line)} .faq-q{width:100%;text-align:left;background:none;border:none;padding:22px 0;font-family:var(--kc-kopf);font-weight:600;font-size:17px;color:var(--navy);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px} .faq-q .ic{flex:none;width:27px;height:27px;border-radius:8px;background:var(--bg3);color:var(--blue);display:grid;place-items:center;font-size:18px;transition:.2s} .faq-item.open .faq-q .ic{background:var(--blue);color:#fff;transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq-a p{padding:0 0 22px;font-size:15px;color:var(--slate);max-width:780px} /* ---------- Finaler CTA ---------- */ .final{text-align:center;color:#fff;background:radial-gradient(620px 300px at 50% -10%,rgba(103,232,249,.18),transparent 60%),linear-gradient(160deg,var(--navy3),var(--navy2))} .final h2{font-size:42px;margin-bottom:16px} .final p{font-size:18px;color:rgba(214,228,252,.88);max-width:580px;margin:0 auto 28px} .final .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- Footer ---------- */ footer{background:#0A101E;color:#9fb0cc;padding:56px 0 30px;font-size:14px} .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;margin-bottom:38px} .fcols .logo{color:#fff;margin-bottom:12px} .fcols .logo .mk{box-shadow:none} .fcols p{font-size:13.5px;max-width:250px} .fcols h4{color:#fff;font-size:13px;font-weight:700;margin-bottom:14px} .fcols a{display:block;margin-bottom:9px;font-size:13.5px} .fcols a:hover{color:var(--ice)} /* Fliesstext-Link im Footer-Claim (B-02: Zielbegriff zeigt auf die Startseite) */ .fcols p a{display:inline;margin:0;font-size:inherit;color:#c9d8f2;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(201,216,242,.45)} .fcols p a:hover{color:var(--ice);text-decoration-color:currentColor} .fbot{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:#7d8eaa} /* ---------- Unterseiten: Page-Hero ---------- */ .page-hero{position:relative;padding:150px 0 60px;overflow:hidden; background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 55%,#fff 100%)} .page-hero .clouds{position:absolute;inset:0;pointer-events:none; background: radial-gradient(320px 110px at 15% 22%,rgba(255,255,255,.9),transparent 70%), radial-gradient(420px 140px at 82% 14%,rgba(255,255,255,.85),transparent 70%)} .page-hero .wrap{position:relative;z-index:2} .page-hero h1{font-size:44px;font-weight:800;color:var(--navy);max-width:820px;margin-bottom:16px} .page-hero p.lead{font-size:18px;color:var(--slate);max-width:660px} .page-hero .actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px} .breadcrumb{font-size:13px;color:var(--slate);margin-bottom:18px;display:flex;gap:8px;align-items:center} .breadcrumb a{color:var(--blue);font-weight:600} .breadcrumb span{opacity:.6} /* ---------- Funktionen-Übersicht ---------- */ .featovw{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column} .fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--sky)} .fcard .fi{width:54px;height:54px;border-radius:15px;background:linear-gradient(160deg,var(--bg3),#DDEBFD);display:grid;place-items:center;margin-bottom:18px;color:var(--blue);border:1px solid #D6E5FB;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:.25s} .fcard .fi svg{width:26px;height:26px;display:block} .fcard:hover .fi{background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;border-color:transparent;box-shadow:0 10px 22px -8px rgba(37,99,235,.5);transform:scale(1.06)} .fcard h3{font-size:18px;color:var(--navy);margin-bottom:9px} .fcard p{font-size:14px;color:var(--slate);flex:1} .fcard .plink{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:700;color:var(--blue)} .fcard .plink:hover{gap:10px} .fcard.soon{opacity:.75} .fcard .soon-tag{display:inline-block;font-size:10.5px;font-weight:700;color:var(--amber);background:var(--amberbg);padding:3px 9px;border-radius:20px;margin-top:16px;align-self:flex-start} /* ---------- Feature-Detailseite ---------- */ .fdetail .usp+.usp{margin-top:90px} .fchecks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px} .fcheck{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:18px 20px} .fcheck b{font-family:var(--kc-kopf);font-size:15px;color:var(--navy);display:block;margin-bottom:5px} .fcheck span{font-size:13.5px;color:var(--slate)} /* ---------- Blog ---------- */ .bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .bcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column} .bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .bcard .bimg{height:170px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;font-size:44px;position:relative} .bcard .bimg.alt1{background:linear-gradient(135deg,var(--blue),var(--cyan))} .bcard .bimg.alt2{background:linear-gradient(135deg,var(--navy2),#155e9e)} .bcard .bbody{padding:22px;display:flex;flex-direction:column;flex:1} .bcard .bcat{font-size:11px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px} .bcard h3{font-size:17.5px;color:var(--navy);margin-bottom:9px;line-height:1.35} .bcard p{font-size:13.5px;color:var(--slate);flex:1} .bcard .bmeta{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;color:var(--slate)} .bcard .bav{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700} /* Blog-Artikel */ .article{max-width:760px;margin:0 auto} .article .acat{font-size:12px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px} .article h1{font-size:40px;color:var(--navy);margin-bottom:20px} .article .ameta{display:flex;align-items:center;gap:12px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:36px} .article .bav{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;color:#fff;font-weight:700;font-family:var(--kc-kopf)} .article .ameta b{font-size:14.5px;color:var(--navy);display:block} .article .ameta small{font-size:13px;color:var(--slate)} /* Autorenfoto im Avatar-Kreis (Fallback: OT-Kürzel auf Gradient) */ .article .bav{position:relative;overflow:hidden;flex-shrink:0} .article .bav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%} /* Dezentes LinkedIn-Glyph neben dem Autorennamen */ .liin{display:inline-flex;vertical-align:-1px;margin-left:4px;color:#8A94A6;transition:color .15s} .liin:hover{color:var(--blue)} .article h2{font-size:27px;color:var(--navy);margin:42px 0 14px} .article h3{font-size:20px;color:var(--navy);margin:32px 0 10px} .article p{font-size:16.5px;color:#2A3342;margin-bottom:18px} .article ul,.article ol{margin:0 0 18px 22px;font-size:16.5px;color:#2A3342} .article li{margin-bottom:8px} .article .ahero{border-radius:var(--r);height:320px;background:linear-gradient(135deg,var(--navy),var(--blue));display:grid;place-items:center;font-size:70px;margin-bottom:36px;box-shadow:var(--shadow)} .article .abox{background:var(--bg2);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:12px;padding:18px 22px;margin:26px 0;font-size:15px} .article .abox b{color:var(--navy)} .article-cta{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;border-radius:var(--r);padding:34px;margin:46px 0;text-align:center} .article-cta h3{color:#fff;font-size:22px;margin:0 0 10px} .article-cta p{color:rgba(214,228,252,.85);font-size:15px;margin-bottom:20px} /* ---------- Rechtsseiten ---------- */ .legal{max-width:760px;margin:0 auto} .legal h1{font-size:36px;color:var(--navy);margin-bottom:26px} .legal h2{font-size:22px;color:var(--navy);margin:34px 0 10px} .legal h3{font-size:17px;color:var(--navy);margin:24px 0 8px} .legal h4{font-size:15px;color:var(--navy);margin:16px 0 6px} .legal p,.legal li{font-size:15px;color:#2A3342;margin-bottom:12px} .legal ul{margin-left:22px} .legal .placeholder{background:var(--amberbg);border:1px dashed var(--amber);border-radius:8px;padding:2px 8px;color:var(--amber);font-weight:600;font-size:14px} /* ---------- Utilities ---------- */ /* 14.10.2026: Einblenden nur, wenn main.js laeuft (html.rv) - sonst bleibt nichts unsichtbar. Kuerzer und frueher als vorher (0,6 s, 22 px), Ausloesen steuert main.js. */ .reveal{transition:opacity .4s ease-out,transform .4s ease-out} .rv .reveal:not(.in),.rv .step:not(.in){opacity:0;transform:translateY(14px)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .rv .reveal:not(.in),.rv .step:not(.in){opacity:1;transform:none} .reveal,.step{transition:none} } .center{text-align:center} .mt-40{margin-top:40px} .sticky-cta{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:12px 18px;display:none;z-index:50;box-shadow:0 -8px 24px -12px rgba(0,0,0,.2)} .sticky-cta .btn{width:100%;justify-content:center} /* ---------- Responsive ---------- */ @media(max-width:960px){ .hero h1{font-size:38px} .hero{padding-top:130px} .usp,.usp.rev .txt,.price-hero,.explorer,.panel.on,.roi-grid{grid-template-columns:1fr} .usp.rev .txt{order:0} .pgrid,.igrid,.proof .pq,.featovw,.bloggrid,.allfeat{grid-template-columns:1fr 1fr} .partners .wrap{grid-template-columns:1fr;gap:20px;text-align:center} .partners .plogos{justify-content:center} .navlinks,.nav-cta .login{display:none} .fcols{grid-template-columns:1fr 1fr;gap:26px} .fcols>div:first-child{grid-column:1/-1} .burger{display:block} .shead h2,.final h2{font-size:30px} .page-hero h1{font-size:34px} .article h1{font-size:31px} .pvis{order:-1} .float.f1{left:6px}.float.f2{right:6px} } @media(max-width:560px){ .nav{gap:10px;padding:7px 7px 7px 14px} .nav-cta{gap:10px} .logo{font-size:17px;gap:7px} .logoimg{height:28px} .nav .btn.sm{padding:9px 14px;font-size:13px} .fcols{grid-template-columns:1fr 1fr;gap:22px} .pgrid,.igrid,.proof .pq,.featovw,.bloggrid,.kpis,.fchecks,.allfeat,.roi-stats{grid-template-columns:1fr} .kpis{grid-template-columns:1fr 1fr} .step{grid-template-columns:46px 1fr} .step .auto{grid-column:2;justify-self:start} .crow{font-size:12px} .sec{padding:64px 0} .price-hero{padding:32px} .hero h1{font-size:31px} .float{display:none} } /* ============================================================ V2-Komponenten (Redesign nach Feedback Juli 2026) ============================================================ */ /* ---------- Logo-Bild von klimacraft.de ---------- */ .logoimg{height:36px;width:auto;display:block} footer .logoimg{height:32px;filter:brightness(0) invert(1)} /* ---------- Bento-Grid (Problem-Sektion, saasi-Stil) ---------- */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px} .bcell{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;overflow:hidden;transition:.2s} .bcell:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .bcell.c2{grid-column:span 2} .bcell.c3{grid-column:span 3} .bcell h3{font-size:18.5px;color:var(--navy)} .bcell>p{font-size:14px;color:var(--slate)} .bcell .bviz{margin-top:auto;border-radius:16px;padding:16px;background:var(--bg2);border:1px solid var(--line)} .bcell.t-red .bviz{background:#F2F6FE;border-color:#D1E0F9} .bcell.t-blue .bviz{background:var(--bg3);border-color:#D6E5FB} .bcell.t-amber .bviz{background:var(--amberbg);border-color:#F5E3C2} .bcell.t-paper .bviz{background:#FFFCF2;border-color:#EFE6C9} /* WhatsApp-Chat-Mockup */ .chat{display:flex;flex-direction:column;gap:8px} .msg{max-width:88%;padding:8px 12px;border-radius:13px;font-size:12px;line-height:1.45;background:#fff;border:1px solid var(--line);align-self:flex-start;border-top-left-radius:4px;box-shadow:0 2px 6px -3px rgba(13,38,84,.15)} .msg.out{background:#DCF6C8;border-color:#C8E8B0;align-self:flex-end;border-radius:13px;border-top-right-radius:4px} .msg .who{font-size:10px;font-weight:700;color:var(--blue);display:block;margin-bottom:1px} .msg small{display:block;font-size:9px;color:#98A5B8;text-align:right;margin-top:2px} .msg.missed{border:1.5px dashed var(--red);background:#FFF8F7;color:var(--red);font-weight:600} /* Zettel-Mockup */ .paper{background:#FFFDF4;border:1px solid #EBE2C4;border-radius:6px;padding:14px 16px;transform:rotate(-1.6deg);box-shadow:0 6px 14px -8px rgba(120,100,40,.35);font-size:12px;color:#5E5638} .paper .pline{border-bottom:1px dashed #DDD2AC;padding:5px 0;display:flex;justify-content:space-between} .paper .pline:last-child{border-bottom:none} .paper .scrawl{font-style:italic;font-weight:600} .paper .smudge{color:#B9AD82;text-decoration:line-through} /* Tool-Chaos-Chips */ .tools{display:flex;flex-wrap:wrap;gap:9px} .toolchip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--slate);box-shadow:0 2px 6px -3px rgba(13,38,84,.15)} .toolchip i{font-style:normal;font-size:14px} .toolchip.warn{border-color:#D1E0F9;color:var(--red)} /* Doku-Warnung-Mockup */ .docwarn{display:flex;flex-direction:column;gap:8px} .docrow{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:600;color:var(--navy)} .docrow .st{font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px} .st.ok{background:var(--greenbg);color:var(--green)} .st.miss{background:var(--redbg);color:var(--red)} .st.unk{background:var(--amberbg);color:var(--amber)} /* ---------- "Mit der Branche gebaut"-Band ---------- */ .builtwith{background:linear-gradient(120deg,var(--navy3),var(--navy2) 60%,#123B78);color:#fff;position:relative;overflow:hidden} .builtwith::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 320px at 85% 15%,rgba(103,232,249,.16),transparent 60%)} .builtwith .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center} .builtwith h2{font-size:36px;margin-bottom:18px} .builtwith h2 em{font-style:normal;color:var(--ice)} .builtwith p{font-size:16.5px;color:rgba(220,232,252,.9);margin-bottom:14px} .proofchips{display:flex;flex-direction:column;gap:14px} .proofchip{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px 20px;backdrop-filter:blur(4px)} .proofchip .pic{flex:none;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-size:19px} .proofchip b{font-family:var(--kc-kopf);font-size:15.5px;display:block;margin-bottom:3px} .proofchip span{font-size:13.5px;color:rgba(214,228,252,.8)} /* ---------- Dunkle Feature-Show (saasi "Full Solution") ---------- */ .showcase{background:linear-gradient(165deg,#0A101D,#10192D 70%,#141F39);color:#fff;overflow:hidden} .showcase .shead h2{color:#fff} .showcase .shead p{color:rgba(214,228,252,.85)} .pillrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px} .pill-btn{padding:14px 28px;border-radius:32px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:15px;cursor:pointer;font-family:var(--kc-kopf);transition:.18s} .pill-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)} .pill-btn.on{background:var(--warm);border-color:var(--warm);box-shadow:0 10px 26px -10px rgba(69,137,247,.65)} .show-panel{display:none} .show-panel.on{display:block;animation:fadeUp .45s ease} .show-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:24px;flex-wrap:wrap} .show-cap h3{font-size:23px} .show-cap p{color:rgba(214,228,252,.85);font-size:15px;max-width:600px;margin-top:8px} .show-cap a{color:var(--ice);font-weight:700;font-size:14.5px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .show-cap a:hover{gap:10px} .showcase .appwin{transform:none;box-shadow:0 40px 90px -30px rgba(0,0,0,.65)} .showcase .app{grid-template-columns:170px 1fr} .showcase .appmain{min-height:330px} /* ---------- Runde Checks (saasi-Stil Listen) ---------- */ .icklist{display:flex;flex-direction:column;gap:24px} .ick{display:flex;gap:16px} .ick .ring{flex:none;width:36px;height:36px;border-radius:50%;border:2px solid var(--green);color:var(--green);display:grid;place-items:center;font-size:15px;font-weight:800;margin-top:2px} .ick.blue .ring{border-color:var(--blue);color:var(--blue)} .ick b{font-family:var(--kc-kopf);font-size:17px;color:var(--navy);display:block;margin-bottom:5px} .ick span{font-size:14.5px;color:var(--slate)} /* ---------- Moderner Workflow (statt alter Kette) ---------- */ .flowintro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:44px} .flowintro h2{font-size:36px;color:var(--navy)} .flowintro h2 em{font-style:normal;background:linear-gradient(115deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent} .flowintro p{font-size:16.5px;color:var(--slate)} .flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .fstep{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow-sm);position:relative;transition:.2s} .fstep:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .fstep .fnum{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-family:var(--kc-kopf);font-weight:800;font-size:17px;display:grid;place-items:center;margin-bottom:16px} .fstep .tagchip{position:absolute;top:22px;right:22px;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px} .tagchip.du{background:#E6EFFE;color:var(--warm-d)} .tagchip.auto{background:var(--greenbg);color:var(--green)} .fstep h3{font-size:16.5px;color:var(--navy);margin-bottom:7px;padding-right:86px} .fstep p{font-size:13.5px;color:var(--slate)} .flowfoot{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;color:var(--navy);font-weight:600;text-align:center;flex-wrap:wrap} .flowfoot .cnt{font-family:var(--kc-kopf);font-weight:800;font-size:22px;color:var(--blue)} /* ---------- Effizienz-Sektion (saastainable-Stil) ---------- */ .eff-label{display:inline-block;border:1.5px solid var(--line);border-radius:30px;padding:7px 16px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--navy);background:#fff;margin-bottom:20px} .eff-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:start} .eff-grid h2{font-size:38px;color:var(--navy);margin-bottom:16px} .eff-grid .etext{font-size:16.5px;color:var(--slate);max-width:520px} .eff-stats{display:flex;gap:64px;margin-top:64px;flex-wrap:wrap} .eff-stats .es b{font-family:var(--kc-kopf);font-size:46px;font-weight:800;color:var(--navy);display:block;line-height:1.05} .eff-stats .es b span{font-size:inherit;color:inherit;display:inline;margin:0;max-width:none} .eff-stats .es b .u{font-size:24px} .eff-stats .es > span{font-size:14px;color:var(--slate);max-width:210px;display:block;margin-top:9px} .eff-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px} .ecard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;transition:.2s} .ecard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)} .ecard .eic{width:50px;height:50px;border-radius:13px;display:grid;place-items:center;font-size:23px;margin-bottom:18px} .eic.b{background:var(--bg3)} .eic.g{background:var(--greenbg)} .eic.c{background:#E0F9FE} .eic.o{background:var(--amberbg)} .ecard h3{font-size:16.5px;color:var(--navy);margin-bottom:7px} .ecard p{font-size:13.5px;color:var(--slate)} /* ---------- Integrationen: Orbit (saasi-Stil, unten angeschnitten) ---------- */ .orbit-sec{background:linear-gradient(165deg,#0A101D,#10192D);color:#fff;text-align:center;overflow:hidden;padding-bottom:0} .orbit-sec h2{font-size:38px;margin-bottom:18px} .orbit-sec .shead{margin-bottom:10px} .checkrow{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-bottom:28px} .checkrow span{display:flex;gap:9px;align-items:center;font-size:14.5px;color:rgba(220,232,252,.9);font-weight:500} .cgreen{flex:none;width:21px;height:21px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center} .orbit{position:relative;height:400px;margin-top:26px} .orbit .ring{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.11);border-radius:50%;pointer-events:none} .orbit-sec .wrap>.reveal{position:relative;z-index:3} .ring.r1{width:460px;height:460px} .ring.r2{width:720px;height:720px} .ring.r3{width:980px;height:980px} .orbit .core{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-size:58px;box-shadow:0 0 90px rgba(34,211,238,.4);z-index:2} .ochip{position:absolute;width:70px;height:70px;border-radius:50%;background:#141F39;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-family:var(--kc-kopf);font-weight:800;font-size:11px;line-height:1.15;color:#fff;text-align:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.6);animation:bob 6s ease-in-out infinite;padding:6px} .ochip:nth-child(odd){animation-delay:1.2s} .ochip:nth-child(3n){animation-delay:2.4s} /* ---------- Integrationen-Unterseite ---------- */ .filterbar{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:32px;padding:6px;width:max-content;max-width:100%;margin:0 auto 40px;box-shadow:var(--shadow-sm)} .fpill{padding:10px 20px;border-radius:26px;font-size:14px;font-weight:600;color:var(--slate);cursor:pointer;border:none;background:none;font-family:inherit;transition:.15s} .fpill:hover{color:var(--blue)} .fpill.on{background:var(--blue);color:#fff} .intgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .intcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow-sm);transition:.2s} .intcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .intcard .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px dashed var(--line)} .intcard .idn{display:flex;align-items:center;gap:12px} .intcard .idn b{font-family:var(--kc-kopf);font-size:16.5px;color:var(--navy)} .intcard .cat{font-size:10px;font-weight:700;padding:4px 11px;border-radius:20px;background:var(--bg2);border:1px solid var(--line);color:var(--slate);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap} .intcard p{font-size:13.5px;color:var(--slate)} .intcard .stlabel{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px} .stlabel.live{background:var(--greenbg);color:var(--green)} .stlabel.plan{background:var(--amberbg);color:var(--amber)} /* Praxis-Kasten (Integrationen: Webhook/API-Kundenbeispiel) */ .casebox{margin-top:46px;background:linear-gradient(140deg,#0F182B,#123B7A);border-radius:26px;padding:46px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)} .casebox::after{content:'';position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,238,.22),transparent 70%);pointer-events:none} .cbtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:20px;background:rgba(34,211,238,.14);color:var(--cyan);border:1px solid rgba(34,211,238,.35);margin-bottom:18px} .casebox h3{font-family:var(--kc-kopf);font-size:26px;line-height:1.25;margin-bottom:14px;color:#fff} .casebox p{font-size:15px;color:rgba(255,255,255,.82);line-height:1.75;max-width:560px} .casebox p+p{margin-top:12px} .casebox p a{color:var(--cyan);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(34,211,238,.4)} .cbgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;position:relative;z-index:1} .cbflow{display:flex;flex-direction:column;gap:8px} .cbstep{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 18px;font-size:14px;font-weight:600;text-align:left;color:#fff} .cbstep small{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.6);margin-top:2px} .cbstep span{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));display:grid;place-items:center;font-family:var(--kc-kopf);font-weight:800;font-size:13px;color:#fff} .cbarrow{text-align:center;color:rgba(255,255,255,.38);font-size:13px;line-height:1;margin:-2px 0} @media(max-width:860px){.cbgrid{grid-template-columns:1fr;gap:28px}.casebox{padding:32px 24px}.casebox h3{font-size:22px}} /* ---------- Hero-Dashboard PRO (Test-Variante, Rollback: _backup_hero_v1) ---------- */ .appwin.pro .win-top{padding:9px 14px} .appwin.pro .urlpill{margin:0 auto;display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:4px 14px;font-size:11px;font-weight:600;color:#66738a} .appwin.pro .urlpill svg{width:10px;height:10px;color:#8a96ab} .appwin.pro .app{grid-template-columns:166px 1fr} .appwin.pro .appbar{display:flex;flex-direction:column;padding:14px 0 10px} .appwin.pro .appbar .brand{padding:0 14px 14px} .appwin.pro .appbar a{padding:7.5px 14px;font-size:11.5px} .appwin.pro .appbar a .di{width:15px;height:15px;display:inline-flex;opacity:1;color:#8a96ab} .appwin.pro .appbar a .di svg{width:14px;height:14px} .appwin.pro .appbar a.on .di{color:var(--blue)} .appwin.pro .nbdg{margin-left:auto;background:var(--blue);color:#fff;font-size:8.5px;font-weight:800;min-width:15px;height:15px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px} .appwin.pro .nbdg.o{background:var(--warm)} .appwin.pro .abuser{margin-top:auto;display:flex;align-items:center;gap:8px;padding:10px 14px 2px;border-top:1px solid var(--line)} .appwin.pro .abuser .uav{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center} .appwin.pro .abuser b{display:block;font-size:10.5px;color:var(--navy);line-height:1.2} .appwin.pro .abuser small{font-size:9px;color:#8a96ab} .appwin.pro .appmain{padding:14px 16px 16px} .appwin.pro .ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px} .appwin.pro .pgreet b{font-family:var(--kc-kopf);font-size:14.5px;color:var(--navy);display:block;line-height:1.2} .appwin.pro .pgreet small{font-size:10px;color:#7a8699} .appwin.pro .ptools{display:flex;align-items:center;gap:8px} .appwin.pro .psearch{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:10.5px;color:#8a96ab;font-weight:500} .appwin.pro .psearch svg{width:11px;height:11px} .appwin.pro .pico{position:relative;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:#66738a} .appwin.pro .pico svg{width:13px;height:13px} .appwin.pro .pico .bdg{position:absolute;top:-4px;right:-4px;background:var(--warm);color:#fff;font-size:7.5px;font-weight:800;width:13px;height:13px;border-radius:50%;display:grid;place-items:center;font-style:normal;border:1.5px solid #fff} .appwin.pro .pavatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center} .appwin.pro .qrow{margin-bottom:10px} .appwin.pro .qbtn{display:flex;align-items:center;justify-content:center;gap:5px;padding:6.5px 8px} .appwin.pro .qbtn i{font-style:normal;color:var(--blue);font-weight:800} .appwin.pro .kpis{grid-template-columns:repeat(4,1fr);gap:9px} .appwin.pro .kpi{border-top:none;padding:10px 11px 8px;overflow:hidden} .appwin.pro .kpi .v{margin-top:3px;font-size:19px} .appwin.pro .pill{display:inline-block;margin-top:4px;font-size:8px;font-weight:700;padding:2.5px 7px;border-radius:10px} .appwin.pro .pill.up{background:var(--greenbg);color:var(--green)} .appwin.pro .pill.bl{background:#E8F0FE;color:var(--blue)} .appwin.pro .pill.am{background:var(--amberbg);color:var(--amber)} .appwin.pro .spark{position:absolute;right:8px;top:10px;width:44px;height:16px;opacity:.9} .appwin.pro .kpi.b .spark{color:var(--blue)}.appwin.pro .kpi.g .spark{color:var(--green)}.appwin.pro .kpi.o .spark{color:var(--warm)} .appwin.pro .prow2{display:grid;grid-template-columns:1.45fr 1fr;gap:9px;margin-top:9px} .appwin.pro .pcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px} .appwin.pro .pch{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px} .appwin.pro .pch b{font-size:10.5px;color:var(--navy);font-weight:700} .appwin.pro .pperiod{font-size:8.5px;color:#9aa6ba;font-weight:600} .appwin.pro .chart{width:100%;height:74px;display:block} .appwin.pro .pmonths{display:flex;justify-content:space-between;padding:3px 2px 0;font-size:8px;color:#9aa6ba;font-weight:600} .appwin.pro .pmonths .cur{color:var(--blue);font-weight:800} .appwin.pro .pteam{display:flex;flex-direction:column;gap:6px} .appwin.pro .tm{display:flex;align-items:center;gap:8px} .appwin.pro .tav{flex:none;width:22px;height:22px;border-radius:50%;color:#fff;font-size:8px;font-weight:800;display:grid;place-items:center} .appwin.pro .tav.t1{background:#2563EB}.appwin.pro .tav.t2{background:#16A34A}.appwin.pro .tav.t3{background:#4589F7} .appwin.pro .tm b{display:block;font-size:10px;color:var(--navy);line-height:1.25} .appwin.pro .tm small{font-size:8.5px;color:#8a96ab;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px} .appwin.pro .tm>div{min-width:0;flex:1} .appwin.pro .tst{flex:none;font-size:8px;font-weight:700;padding:2.5px 7px;border-radius:10px} .appwin.pro .tst.ok{background:var(--greenbg);color:var(--green)} .appwin.pro .tst.way{background:#E8F0FE;color:var(--blue)} .appwin.pro .mtable .tr2{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center} .appwin.pro .pstat{font-size:8px;font-weight:700;padding:2.5px 7px;border-radius:10px} .appwin.pro .pstat.run{background:#E8F0FE;color:var(--blue)} .appwin.pro .pstat.ok2{background:var(--greenbg);color:var(--green)} @media(max-width:860px){ .appwin.pro .kpis{grid-template-columns:1fr 1fr} .appwin.pro .prow2{grid-template-columns:1fr} .appwin.pro .psearch{display:none} .appwin.pro .ptop{margin-bottom:9px} } @media(max-width:640px){ .appwin.pro .app{grid-template-columns:1fr} .appwin.pro .appbar{display:none} .appwin.pro .qrow{flex-wrap:wrap} .appwin.pro .qbtn{flex:1 1 40%} .appwin.pro .mtable .tr2{grid-template-columns:1fr auto} .appwin.pro .mtable .pstat{display:none} } /* ---------- V2 Responsive ---------- */ @media(max-width:960px){ .bento{grid-template-columns:1fr 1fr} .bcell.c2,.bcell.c3{grid-column:span 1} .builtwith .wrap,.eff-grid,.flowintro{grid-template-columns:1fr} .flow{grid-template-columns:1fr 1fr} .intgrid{grid-template-columns:1fr 1fr} .hero-shot{margin-bottom:-110px} .partners{padding-top:170px} .eff-stats{gap:36px;margin-top:40px} .orbit{height:300px} .ring.r1{width:340px;height:340px}.ring.r2{width:540px;height:540px}.ring.r3{width:760px;height:760px} .showcase .app{grid-template-columns:1fr} .showcase .appbar{display:none} } @media(max-width:560px){ .bento,.flow,.intgrid,.eff-cards{grid-template-columns:1fr} .hero-shot{margin-bottom:-70px} .partners{padding-top:120px} .pill-btn{padding:11px 18px;font-size:13.5px} .eff-stats .es b{font-size:36px} .orbit{height:230px} .fstep h3{padding-right:0;padding-top:26px} } /* ---------- Fix: Integrationen-Kacheln auf Mobil (Grid-Overflow) ---------- */ @media(max-width:560px){ .intgrid{grid-template-columns:1fr} .intcard{min-width:0} .intcard .top{flex-wrap:wrap;gap:8px} .intcard .cat{white-space:normal} .intcard p{overflow-wrap:anywhere} .blogo{min-width:0;max-width:100%} } /* ---------- Integrationen: zwei Kacheln je Reihe (16.10.2026) ---------- Drei Spalten liessen bei rund 360 px Kachelbreite keinen Platz fuer Logo, Name und Kategorie-Chip in einer Zeile: der Chip ragte rechts aus der Kachel und wurde von overflow:hidden abgeschnitten ("GROSSHA", "BUCHHALTUN"), der Name brach um ("IDS-/Connect", "DATEV-/Export"). Jetzt zwei Spalten (Grundregel oben), und die Kopfzeile darf umbrechen: wird es eng, rutscht der Chip in eine eigene Zeile statt aus der Kachel. Die Kachel selbst darf nicht breiter werden als ihre Spalte (min-width:0). */ .intcard{min-width:0} .intcard .top{flex-wrap:wrap;row-gap:10px;min-width:0} .intcard .idn{min-width:0;flex:1 1 auto} .intcard .idn b{min-width:0;overflow-wrap:anywhere} .intcard .cat{flex:none} @media(max-width:760px){.intgrid{grid-template-columns:1fr}} /* unter 760 px wird eine Kachel schmaler als 300 px: eine je Reihe */ /* ---------- Fix: Vergleichstabelle (.ctable/.crow) auf Mobil scrollbar ---------- */ @media(max-width:560px){ .ctable{overflow-x:auto;-webkit-overflow-scrolling:touch} .crow{min-width:500px} } /* ---------- Preisseite V2 (Sales) ---------- */ .hoodband{background:linear-gradient(165deg,#0A101D,#141F39);color:#fff;border-radius:24px;padding:40px 46px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;box-shadow:var(--shadow);position:relative;overflow:hidden} .hoodband::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 88% 0,rgba(103,232,249,.15),transparent 60%)} .hoodband .hb{position:relative;z-index:1} .hoodband .hb b{font-family:var(--kc-kopf);font-size:34px;font-weight:800;display:block;line-height:1.1;color:var(--ice)} .hoodband .hb span{font-size:13.5px;color:rgba(214,228,252,.85);display:block;margin-top:6px;max-width:180px} .modgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .modcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow-sm);transition:.2s} .modcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .modcard .mic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;background:var(--bg3)} .modcard h3{font-size:17px;color:var(--navy);margin-bottom:4px} .modcard .msub{font-size:12.5px;color:var(--blue);font-weight:700;margin-bottom:14px} .modcard ul{list-style:none;display:flex;flex-direction:column;gap:8px} .modcard li{font-size:13.5px;color:#3A4557;display:flex;gap:8px;align-items:flex-start} .modcard li::before{content:"✓";color:var(--blue);font-weight:800} .roibox{background:linear-gradient(120deg,var(--bg2),var(--bg3));border:1px solid #D6E5FB;border-radius:24px;padding:44px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} .roibox h2{font-size:30px;color:var(--navy);margin-bottom:12px} .roibox p{font-size:15.5px;color:var(--slate)} .roicalc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--shadow-sm)} .roicalc .rrow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14.5px} .roicalc .rrow span:first-child{color:var(--slate)} .roicalc .rrow span:last-child{font-weight:700;color:var(--navy)} .roicalc .rrow.step{font-size:13px;padding:7px 0} .roicalc .rrow.step span:first-child{color:var(--slate-l)} .roicalc .rrow.step span:last-child{font-weight:600;color:var(--slate)} .roicalc .rrow.total{border-bottom:none;border-top:2px solid var(--navy);margin-top:6px;padding-top:14px} .roicalc .rrow.total span:last-child{font-family:var(--kc-kopf);font-size:20px;color:var(--green)} .riskband{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .riskcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;text-align:center;box-shadow:var(--shadow-sm)} .riskcard .ri{width:52px;height:52px;border-radius:50%;background:var(--greenbg);color:var(--green);display:grid;place-items:center;font-size:23px;margin:0 auto 14px} .riskcard b{font-family:var(--kc-kopf);font-size:15.5px;color:var(--navy);display:block;margin-bottom:6px} .riskcard span{font-size:13.5px;color:var(--slate)} @media(max-width:960px){.modgrid{grid-template-columns:1fr 1fr}.roibox{grid-template-columns:1fr;padding:30px}.riskband{grid-template-columns:1fr}.hoodband{padding:28px}.hoodband .hb b{font-size:26px}} @media(max-width:560px){.modgrid{grid-template-columns:1fr}} /* ---------- SEO-Ausbau: Datenfluss-Block, Mehr-zum-Thema, Datentabellen ---------- */ .flownext{background:linear-gradient(120deg,var(--bg2),var(--bg3));border:1px solid #D6E5FB;border-radius:20px;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .flownext .ft{max-width:640px} .flownext .ft b{font-family:var(--kc-kopf);font-size:19px;color:var(--navy);display:block;margin-bottom:6px} .flownext .ft span{font-size:14.5px;color:var(--slate)} .flownext .chainmini{font-size:11.5px;color:var(--slate-l);letter-spacing:.03em;margin-top:12px;display:block} .flownext .chainmini b{display:inline;font-size:11.5px;color:var(--blue);font-family:'Inter',sans-serif} .morelinks{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 28px;margin-top:26px} .morelinks>b{font-family:var(--kc-kopf);font-size:15px;color:var(--navy);display:block;margin-bottom:12px} .morelinks a{display:flex;gap:9px;align-items:flex-start;padding:7px 0;font-size:14.5px;color:var(--blue);font-weight:600} .morelinks a::before{content:"→";flex:none} .morelinks a:hover{text-decoration:underline} .dtable{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)} .dtable th{background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-family:var(--kc-kopf);font-size:13px;font-weight:700} .dtable td{padding:12px 16px;border-bottom:1px solid var(--line);color:#2A3342} .dtable tr:last-child td{border-bottom:none} .dtable td:first-child{font-weight:600;color:var(--navy)} .dtable .hl-row td{background:#F2F7FF} .dtable-note{font-size:12.5px;color:var(--slate-l);margin-top:-12px;margin-bottom:20px} /* Responsive: Tabellen scrollen horizontal im eigenen Rahmen statt die Seite zu sprengen */ .tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:22px 0;padding-bottom:4px} .tbl-scroll .dtable{margin:0} @media (max-width:640px){ .tbl-scroll .dtable{min-width:520px} .tbl-scroll{border:1px solid var(--line);border-radius:14px} } /* ---------- Vorlagen-Downloads & GWP-Rechner ---------- */ .dlbox{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;border-radius:20px;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;box-shadow:var(--shadow);position:relative;overflow:hidden} .dlbox::before{content:"";position:absolute;inset:0;background:radial-gradient(380px 200px at 85% 0,rgba(103,232,249,.16),transparent 60%)} .dlbox>*{position:relative;z-index:1} .dlbox .dt b{font-family:var(--kc-kopf);font-size:20px;display:block;margin-bottom:6px} .dlbox .dt span{font-size:14px;color:rgba(214,228,252,.85)} .dlbox .dbtns{display:flex;gap:12px;flex-wrap:wrap} .calc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow-sm)} .calc label{display:block;font-size:13.5px;font-weight:700;color:var(--navy);margin:16px 0 6px} .calc select,.calc input[type=number],.gwpcalc input#gwp{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:15.5px;font-family:inherit;color:var(--ink);background:#fff} .calc select:focus,.calc input:focus{outline:none;border-color:var(--blue)} .calc .chkrow{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px} .calc .chkrow label{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;margin:0;cursor:pointer} .calc input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)} .calcres{margin-top:26px;border-radius:16px;padding:26px;background:var(--bg2);border:1px solid var(--line)} .calcres.ok{background:var(--greenbg);border-color:#BFE8CF} .calcres.warn{background:var(--amberbg);border-color:#F5E3C2} .calcres .big{font-family:var(--kc-kopf);font-size:30px;font-weight:800;color:var(--navy)} .calcres .rrow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed rgba(0,0,0,.09);font-size:14.5px} .calcres .rrow:last-child{border-bottom:none} .calcres .rrow span:first-child{color:var(--slate)} .calcres .rrow span:last-child{font-weight:700;color:var(--navy);text-align:right} /* ---------- Integrations-Wortmarken (professionelle Logo-Badges) ---------- Typografische Wortmarken im Markenlook – sobald offizielle Logo-Dateien (Partner-/Pressematerial) vorliegen: einfach in .blogo einsetzen. */ .blogo{flex:none;height:56px;min-width:104px;padding:0 18px;border-radius:13px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--kc-kopf);font-weight:800;font-size:17px;letter-spacing:.01em;box-shadow:0 3px 10px -4px rgba(13,38,84,.14);transition:.2s} .icard:hover .blogo{box-shadow:0 8px 18px -6px rgba(13,38,84,.22);transform:translateY(-1px)} .blogo svg{width:22px;height:22px;flex:none} .blogo-datev{color:#89B22B} .blogo-datanorm span:first-child{color:var(--navy)} .blogo-datanorm span:last-child{color:var(--blue)} .blogo-ids .idsbox{background:var(--blue);color:#fff;border-radius:7px;padding:3px 8px;font-size:14px} .blogo-ids small{font-family:'Inter',sans-serif;font-weight:600;font-size:12px;color:var(--slate);letter-spacing:.02em} .blogo-gaeb{color:#3A4557;letter-spacing:.12em} .blogo-xr{color:var(--navy);font-size:14.5px;gap:9px} .blogo-xr svg{color:var(--blue)} .blogo-outlook{color:#0F6CBD;font-size:15.5px} .blogo-outlook svg{color:#0F6CBD} .blogo-api{color:var(--slate);letter-spacing:.1em} /* ---------- Blog-Cover (SVG-Illustrationen im Pro-UI-Stil) ---------- */ .bcard .bimg{overflow:hidden;padding:0} .bcard .bimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .article .ahero{overflow:hidden;padding:0} .article .ahero img{width:100%;height:100%;object-fit:cover;display:block} /* SVG-Icons in Mock-/Chip-Kacheln (statt Emojis) */ .mline .ic svg{width:14px;height:14px;color:var(--blue)} .fic svg{width:17px;height:17px} .proofchip .pic svg{width:19px;height:19px} .eic svg{width:20px;height:20px} /* Hinweis-Box (z. B. Zertifikats-Umstellung A1–E) */ .article .noticebox{background:#FFF7ED;border:1px solid #FED7AA;border-left:4px solid var(--warm);border-radius:12px;padding:18px 22px;margin:26px 0;font-size:15px;line-height:1.65} .article .noticebox b{color:var(--navy)} .article .noticebox a{color:var(--blue);font-weight:600} /* ---------- 05.08.2026: Kopfnavigation hat jetzt 5 Punkte (Kontakt kam dazu). Zwischen 961 und 1100 px wird es sonst eng, bevor der Burger greift. ---------- */ @media(min-width:961px) and (max-width:1100px){ .navlinks{gap:20px;font-size:14.5px} .nav-cta{gap:12px} } /* ---------- 05.08.2026 (Teil 2): Zweitweg unter dem finalen CTA. Kleine Kontaktzeile auf den 17 Angebots-/Übersichtsseiten, damit nicht nur "Demo buchen" als Handlung angeboten wird. ---------- */ .final .kontaktzeile{font-size:14.5px;color:rgba(214,228,252,.72);margin:20px auto 0;max-width:560px} .final .kontaktzeile a{color:var(--ice);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(103,232,249,.45)} .final .kontaktzeile a:hover{border-bottom-color:var(--ice)} /* ============================================================ KLIMACRAFT DESIGN v2 — additive Ebene Greift nur unter body.v2 (aktuell: Startseite). Bestehende Regeln bleiben unangetastet, damit die übrigen Seiten unverändert ausgeliefert werden. ============================================================ */ body.v2{--r-lg:28px} /* ---------- Eyebrow als Pille ---------- */ body.v2 .eb{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--slate);border:1px solid var(--line);border-radius:100px; padding:8px 16px 8px 13px;background:#fff;margin-bottom:18px} body.v2 .eb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--warm);animation:ebpulse 2.6s infinite} body.v2 .eb.dark{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)} body.v2 .eb.dark::before{background:var(--ice)} @keyframes ebpulse{0%{box-shadow:0 0 0 0 rgba(69,137,247,.45)}70%{box-shadow:0 0 0 9px rgba(69,137,247,0)}100%{box-shadow:0 0 0 0 rgba(69,137,247,0)}} /* ---------- Bewegter Hintergrund ---------- */ body.v2 .bgfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} body.v2 .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:orbdrift 26s ease-in-out infinite} body.v2 .orb.a{width:520px;height:520px;background:radial-gradient(circle,#BFDBFE,transparent 68%);top:-160px;left:-120px} body.v2 .orb.b{width:440px;height:440px;background:radial-gradient(circle,#A5F3FC,transparent 68%);top:180px;right:-140px;animation-delay:-9s} body.v2 .orb.c{width:360px;height:360px;background:radial-gradient(circle,#CEE0FD,transparent 70%);bottom:-140px;left:38%;animation-delay:-17s} body.v2 .orb.dk{background:radial-gradient(circle,rgba(37,99,235,.5),transparent 68%)} body.v2 .orb.dk2{background:radial-gradient(circle,rgba(34,211,238,.32),transparent 68%)} @keyframes orbdrift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(42px,-34px) scale(1.09)}66%{transform:translate(-30px,26px) scale(.95)}} body.v2 .grid-bg{position:absolute;inset:0; background-image:linear-gradient(rgba(10,27,61,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,27,61,.045) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 80% 62% at 50% 40%,#000 38%,transparent 100%); mask-image:radial-gradient(ellipse 80% 62% at 50% 40%,#000 38%,transparent 100%)} body.v2 .grid-bg.lt{background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)} @media (prefers-reduced-motion:reduce){ body.v2 .orb,body.v2 .eb::before{animation:none} } /* ---------- Bento-Karten ---------- */ body.v2 .bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} body.v2 .bc{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px;background:#fff;border:1px solid var(--line); transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s;isolation:isolate} body.v2 .bc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.10),transparent 62%)} body.v2 .bc:hover{transform:translateY(-6px);box-shadow:0 34px 70px -30px rgba(10,27,61,.34);border-color:#CBD9F5} body.v2 .bc:hover::before{opacity:1} body.v2 .bc h3{font-size:21px;font-weight:700;color:var(--navy);margin-bottom:11px;letter-spacing:-.02em;line-height:1.22} body.v2 .bc p{font-size:14.6px;color:var(--slate);line-height:1.62} body.v2 .bc .num{position:absolute;top:22px;right:24px;font-family:var(--kc-kopf);font-size:12px;font-weight:700;color:var(--slate-l);opacity:.55} body.v2 .bc.dark{background:linear-gradient(160deg,#141F39 0%,#0D1424 100%);border-color:rgba(255,255,255,.09)} body.v2 .bc.dark h3{color:#fff} body.v2 .bc.dark p{color:rgba(255,255,255,.66)} body.v2 .bc.dark .num{color:rgba(255,255,255,.4)} body.v2 .bc.dark::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(103,232,249,.16),transparent 62%)} body.v2 .bc.dark:hover{border-color:rgba(103,232,249,.34);box-shadow:0 34px 70px -30px rgba(6,18,42,.7)} body.v2 .bc.warm{background:linear-gradient(155deg,#5795F8 0%,#3275E0 100%);border-color:rgba(255,255,255,.2)} body.v2 .bc.warm h3{color:#fff} body.v2 .bc.warm p{color:rgba(255,255,255,.9)} body.v2 .bc.warm .num{color:rgba(255,255,255,.55)} body.v2 .bc.warm::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 60%)} body.v2 .bc.warm:hover{box-shadow:0 34px 70px -30px rgba(50,117,224,.6);border-color:rgba(255,255,255,.4)} body.v2 .bc .deco{position:absolute;right:-30px;top:-30px;width:180px;height:180px;opacity:.5;transition:.6s;pointer-events:none} body.v2 .bc:hover .deco{opacity:.9;transform:scale(1.12) rotate(6deg)} body.v2 .bc .deco.dots{background-image:radial-gradient(rgba(10,27,61,.16) 1.4px,transparent 1.4px);background-size:13px 13px} body.v2 .bc.dark .deco.dots{background-image:radial-gradient(rgba(103,232,249,.3) 1.4px,transparent 1.4px)} body.v2 .bc.warm .deco.dots{background-image:radial-gradient(rgba(255,255,255,.4) 1.4px,transparent 1.4px)} body.v2 .bc .deco.rings{border-radius:50%;border:1.5px solid rgba(255,255,255,.16);box-shadow:0 0 0 22px rgba(255,255,255,.06),0 0 0 46px rgba(255,255,255,.04)} body.v2 .bc .deco.wave{background:repeating-linear-gradient(120deg,rgba(255,255,255,.09) 0 2px,transparent 2px 13px)} body.v2 .mini{margin-top:20px} body.v2 .sumbar{display:flex;align-items:center;gap:16px;margin-top:22px;padding-top:16px; border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:rgba(255,255,255,.62);flex-wrap:wrap} body.v2 .sumbar b{font-family:var(--kc-kopf);font-size:19px;color:#fff;font-weight:700;margin-right:5px} body.v2 .sumbar .sep{width:1px;height:16px;background:rgba(255,255,255,.16)} body.v2 .sumbar .hi{margin-left:auto;color:var(--ice);font-weight:600} /* ---------- Mikro-Grafiken in den Kacheln ---------- */ body.v2 .chat{display:flex;flex-direction:column;gap:7px} body.v2 .msg{max-width:84%;padding:8px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;background:#EEF2F9;color:#2A3342} body.v2 .msg.me{align-self:flex-end;background:#DCF3D6;color:#1E3A1B} body.v2 .msg small{display:block;font-size:9.5px;color:var(--slate-l);margin-top:2px} body.v2 .msg.warnmsg{background:#E3EDFE;color:#164694;font-weight:600;max-width:100%} body.v2 .bc:hover .msg.warnmsg{animation:msgshake .5s} @keyframes msgshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}} body.v2 .zettel{background:#FFFDF5;border:1px solid #EADFAE;border-radius:9px;padding:13px 14px;transform:rotate(-1.4deg); box-shadow:0 8px 20px -10px rgba(0,0,0,.3);transition:.5s} body.v2 .bc:hover .zettel{transform:rotate(.6deg) translateY(-3px)} body.v2 .zettel b{font-size:12.5px;color:#3A3320;display:block;margin-bottom:7px;border-bottom:1px dashed #D8CB98;padding-bottom:5px} body.v2 .zl{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:#5C5433;padding:3px 0} body.v2 .zl i{font-style:italic;color:#9A8C4E} body.v2 .zl.blur{filter:blur(2.2px);opacity:.65} body.v2 .fglist{display:flex;flex-direction:column;gap:7px} body.v2 .fgi{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22); border-radius:10px;padding:8px 11px;font-size:12.5px;color:#fff;font-weight:500;transition:.35s} body.v2 .fgi span{margin-left:auto;font-size:11px;font-weight:700;background:rgba(255,255,255,.9);color:#1651B1;border-radius:20px;padding:2px 8px;white-space:nowrap} body.v2 .fgi.ok span{background:rgba(255,255,255,.25);color:#fff} body.v2 .bc:hover .fgi.miss{background:rgba(255,255,255,.28);border-color:#fff} body.v2 .isles{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px} body.v2 .isle{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13); border-radius:12px;padding:9px 13px;font-size:12.5px;color:rgba(255,255,255,.82);font-weight:500;transition:.35s} body.v2 .isle em{font-style:normal;font-size:15px} body.v2 .bc:hover .isle{background:rgba(255,255,255,.11);border-color:rgba(103,232,249,.34);transform:translateY(-2px)} body.v2 .bc:hover .isle:nth-child(2){transition-delay:.04s} body.v2 .bc:hover .isle:nth-child(3){transition-delay:.08s} body.v2 .bc:hover .isle:nth-child(4){transition-delay:.12s} body.v2 .bc:hover .isle:nth-child(5){transition-delay:.16s} body.v2 .bc:hover .isle:nth-child(6){transition-delay:.2s} body.v2 .isle.you{background:rgba(69,137,247,.2);border-color:rgba(69,137,247,.5);color:#B3CFFC} body.v2 .tl{position:relative;padding-left:20px} body.v2 .tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--sky-l),#CEE0FD)} body.v2 .tli{position:relative;padding:6px 0;font-size:12.5px;color:var(--slate)} body.v2 .tli::before{content:"";position:absolute;left:-19px;top:12px;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--sky)} body.v2 .tli:last-child::before{border-color:var(--warm);background:var(--warm)} body.v2 .tli b{color:var(--navy);font-weight:650;display:block} body.v2 .tli small{display:block;font-size:11px;color:var(--slate-l)} /* ---------- Abschnittsköpfe ---------- */ body.v2 .shead2{max-width:760px;margin-bottom:44px} body.v2 .shead2 h2{font-size:clamp(29px,2.9vw,43px);font-weight:800;color:var(--navy);margin:0 0 14px;letter-spacing:-.03em;line-height:1.08} body.v2 .shead2 p{font-size:17px;color:var(--slate)} body.v2 .shead2.c{margin-left:auto;margin-right:auto;text-align:center} body.v2 .shead2.lt h2{color:#fff} body.v2 .shead2.lt p{color:rgba(255,255,255,.68)} /* ---------- HERO v2 (zweispaltig) ---------- */ body.v2 .hero{padding:128px 0 60px;overflow:hidden; background:linear-gradient(180deg,#EEF5FF 0%,#F7FBFF 58%,#fff 100%)} body.v2 .hero .wrap{position:relative;z-index:2;text-align:left;max-width:1200px} body.v2 .hgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center} body.v2 .hero h1{font-size:clamp(34px,3.25vw,47px);font-weight:800;color:var(--navy);max-width:none;margin:0 0 20px;letter-spacing:-.032em;line-height:1.08} body.v2 .hero h1 .nb{white-space:nowrap} body.v2 .hero h1 .hl{display:block;background:linear-gradient(96deg,var(--blue) 0%,#4F86F7 45%,var(--cyan) 100%); -webkit-background-clip:text;background-clip:text;color:transparent} body.v2 .hero p.lead{font-size:17.5px;color:#3A4657;max-width:560px;margin:0 0 28px} body.v2 .hero p.lead b{color:var(--navy);font-weight:650} body.v2 .hero .actions{justify-content:flex-start;margin-bottom:20px} body.v2 .trustline{justify-content:flex-start;gap:18px;flex-wrap:nowrap;white-space:nowrap;font-size:12.8px} body.v2 .trustline .dot{background:var(--green)} body.v2 .hero-shot{max-width:none;z-index:5;width:1020px;transform:scale(.63);transform-origin:left center;margin:0 -377px 0 0} @media(max-width:1240px){body.v2 .hero-shot{transform:scale(.54);margin-right:-470px}} /* App-Fenster v2 */ body.v2 .appwin.pro{border-radius:16px;overflow:hidden;background:#0E1629;border:0; box-shadow:0 50px 100px -40px rgba(10,27,61,.5),0 0 0 1px rgba(255,255,255,.07); transform:perspective(1600px) rotateY(-5.5deg) rotateX(2deg) scale(.965); transition:.6s cubic-bezier(.2,.8,.2,1)} body.v2 .appwin.pro:hover{transform:perspective(1600px) rotateY(-2deg) rotateX(.5deg) scale(.985) translateY(-6px)} body.v2 .appwin.pro .win-top{background:linear-gradient(180deg,#15203B,#10192E);border-bottom:1px solid rgba(255,255,255,.07);padding:11px 14px} body.v2 .appwin.pro .urlpill{background:rgba(255,255,255,.07);border:0;color:rgba(255,255,255,.62)} body.v2 .appwin.pro .urlpill svg{color:rgba(255,255,255,.5)} body.v2 .appwin.pro .app{grid-template-columns:196px minmax(0,1fr);min-height:558px} body.v2 .appwin.pro .appbar{background:linear-gradient(180deg,#0F182B,#0D1424);border-right:1px solid rgba(255,255,255,.06);padding:13px 9px} body.v2 .appwin.pro .appmain{background:linear-gradient(180deg,#F7FAFF,#EEF4FE);padding:13px} body.v2 .hero-shot .float{display:none} /* ---------- v2: bestehende Abschnittsköpfe auf die neue Handschrift ---------- */ body.v2 .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--slate);border:1px solid var(--line);border-radius:100px; padding:8px 16px 8px 13px;background:#fff;margin-bottom:18px} body.v2 .eyebrow::before{content:"";width:7px;height:7px;background:var(--warm);border-radius:50%;animation:ebpulse 2.6s infinite} body.v2 .eyebrow.c{justify-content:center} body.v2 .eyebrow.c::before{display:block} body.v2 .eyebrow.lt{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)} body.v2 .eyebrow.lt::before{background:var(--ice)} body.v2 .shead h2,body.v2 .sechead h2{letter-spacing:-.03em;line-height:1.08} body.v2 .sec{position:relative} /* ---------- v2: Buttons ---------- */ body.v2 .btn{transition:.28s cubic-bezier(.2,.8,.2,1)} body.v2 .btn-primary{background:linear-gradient(180deg,var(--warm) 0%,var(--warm-d) 100%); box-shadow:0 14px 30px -10px rgba(50,117,224,.55)} body.v2 .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(50,117,224,.68)} body.v2 .btn-out:hover,body.v2 .btn-ghost:hover{transform:translateY(-2px)} body.v2 .btn-blue:hover{transform:translateY(-2px)} /* ---------- v2: Karten allgemein aufwerten ---------- */ body.v2 .fcheck,body.v2 .ick,body.v2 .abox,body.v2 .dlbox,body.v2 .flownext,body.v2 .article-cta{ transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s} body.v2 .fcheck:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(10,27,61,.3)} /* ---------- v2: dunkle Abschnitte bekommen Tiefe ---------- */ body.v2 .showcase,body.v2 .sec.final,body.v2 .orbit-sec{position:relative;overflow:hidden} body.v2 .showcase .bgfx .orb,body.v2 .sec.final .bgfx .orb{filter:blur(90px);opacity:.42} /* ---------- v2: Ein-Klick-Kette als Ablauf statt Raster ---------- */ body.v2 .flow{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;position:relative} body.v2 .fstep{position:relative;z-index:1;border-radius:22px;padding:22px;background:#fff;border:1px solid var(--line); overflow:hidden;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s} body.v2 .fstep::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.10),transparent 62%)} body.v2 .fstep:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(10,27,61,.34);border-color:#CBD9F5} body.v2 .fstep:hover::before{opacity:1} body.v2 .fstep h3{font-size:17px;margin:12px 0 7px;color:var(--navy);letter-spacing:-.02em} body.v2 .fstep p{font-size:13.8px;color:var(--slate);line-height:1.58} body.v2 .fstep .fnum{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:var(--kc-kopf); font-weight:700;font-size:15px;color:#fff;background:linear-gradient(140deg,var(--blue),var(--sky))} /* „Du“-Schritte: warm hervorgehoben */ body.v2 .fstep.mine{background:linear-gradient(158deg,#EFF5FE 0%,#DFEBFE 100%);border-color:#C1D8FC} body.v2 .fstep.mine .fnum{background:linear-gradient(140deg,var(--warm),#82B0FA)} body.v2 .fstep.mine::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.6),transparent 62%)} body.v2 .fstep.mine:hover{border-color:var(--warm);box-shadow:0 30px 60px -28px rgba(50,117,224,.4)} /* „Automatisch“-Schritte: dunkel */ body.v2 .fstep.auto{background:linear-gradient(160deg,#141F39,#0D1424);border-color:rgba(255,255,255,.09)} body.v2 .fstep.auto h3{color:#fff} body.v2 .fstep.auto p{color:rgba(255,255,255,.66)} body.v2 .fstep.auto::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(103,232,249,.16),transparent 62%)} body.v2 .fstep.auto:hover{border-color:rgba(103,232,249,.34);box-shadow:0 30px 60px -28px rgba(6,18,42,.7)} body.v2 .fstep .tagchip{position:absolute;top:20px;right:20px;font-size:10.5px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;border-radius:20px;padding:4px 10px} body.v2 .fstep .tagchip.du{background:rgba(50,117,224,.14);color:var(--warm-d)} body.v2 .fstep .tagchip.auto{background:rgba(103,232,249,.14);color:var(--ice)} body.v2 .flowfoot{margin-top:34px;text-align:center;font-size:17px;color:var(--slate);font-weight:500} body.v2 .flowfoot .cnt{font-family:var(--kc-kopf);font-size:26px;font-weight:800;color:var(--navy);vertical-align:-2px} body.v2 .flowfoot .cnt.w{color:var(--warm-d)} @media(max-width:900px){body.v2 .flow::before{display:none}} /* --- v2: Pflichten-Abschnitt --- */ body.v2 #pflichten .phead{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:start;margin-bottom:36px} body.v2 #pflichten .phead h2{margin:0;font-size:clamp(29px,2.9vw,43px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.08} body.v2 #pflichten .phead p{margin:5px 0 0;font-size:16.5px;color:#3A4557;line-height:1.72} body.v2 .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} body.v2 .pcard{position:relative;background:#fff;border:1px solid rgba(10,27,61,.08);border-radius:var(--r-lg,20px);padding:26px 24px 24px;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s;box-shadow:0 2px 10px -4px rgba(10,27,61,.10)} body.v2 .pcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .38s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--pc,#2563EB) 14%,transparent),transparent 62%)} body.v2 .pcard:hover::before{opacity:1} body.v2 .pcard::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--pc,#2563EB);opacity:.9;transition:height .35s} body.v2 .pcard:hover{transform:translateY(-6px);box-shadow:0 34px 66px -30px rgba(10,27,61,.32);border-color:rgba(37,99,235,.22)} body.v2 .pcard:hover::after{height:5px} body.v2 .pcard .pnum{position:absolute;right:15px;top:12px;font-family:var(--kc-kopf),sans-serif;font-weight:800;font-size:70px;line-height:1;letter-spacing:-.05em;color:var(--pc,#2563EB);opacity:.10;pointer-events:none;transition:opacity .35s,transform .35s} body.v2 .pcard:hover .pnum{opacity:.16;transform:translateY(-3px)} body.v2 .pcard .ptag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--pc,#2563EB);margin-bottom:12px} body.v2 .pcard .ptag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc,#2563EB)} body.v2 .pcard h3{font-size:17.5px;line-height:1.32;letter-spacing:-.018em;margin:0 0 10px;color:var(--navy)} body.v2 .pcard p{margin:0;font-size:14.6px;line-height:1.68;color:#48546A} body.v2 .pcard p a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(37,99,235,.28)} body.v2 .pcard p a:hover{border-bottom-color:var(--blue)} body.v2 .pcard p b{color:var(--navy)} body.v2 .agrenz{position:relative;margin-top:20px;border-radius:var(--r-lg,20px);padding:26px 28px;background:linear-gradient(150deg,#F3F8FF 0%,#EFF6FF 55%,#F7FAFF 100%);border:1px solid rgba(37,99,235,.14);overflow:hidden} body.v2 .agrenz::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue),var(--cyan))} body.v2 .agrenz .alabel{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--blue);margin-bottom:10px} body.v2 .agrenz p{margin:0;font-size:15.6px;line-height:1.74;color:#33405A} body.v2 .agrenz p b{color:var(--navy)} body.v2 .pnote{margin-top:16px;font-size:14.5px;line-height:1.7;color:var(--slate-l);text-align:center} @media(max-width:960px){ body.v2 #pflichten .phead{grid-template-columns:1fr;gap:18px;align-items:start} body.v2 .pgrid{grid-template-columns:1fr} } /* --- v2: USP-Deepdives (#nachweis) --- */ body.v2 #nachweis{background:linear-gradient(180deg,#fff 0%,#F7FAFF 42%,#F4F8FF 100%);position:relative;overflow:hidden} body.v2 .usp{gap:64px} body.v2 .usp+.usp{margin-top:108px} body.v2 .badge2{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.02em; color:var(--blue);background:#fff;border:1px solid rgba(37,99,235,.16); box-shadow:0 3px 12px -4px rgba(10,27,61,.14);padding:8px 15px;border-radius:100px;margin-bottom:20px} body.v2 .usp h2{font-size:clamp(27px,2.55vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:15px} body.v2 .usp p{font-size:16.5px;line-height:1.72;color:#3A4557} body.v2 .icklist{gap:20px} body.v2 .ick .ring{width:32px;height:32px;border:none;background:linear-gradient(155deg,#DCFCE7,#BBF7D0);color:#15803D; box-shadow:0 3px 10px -3px rgba(21,128,61,.34);font-size:14px} body.v2 .ick.blue .ring{background:linear-gradient(155deg,#DBEAFE,#BFDBFE);color:#1D4ED8;box-shadow:0 3px 10px -3px rgba(29,78,216,.32)} body.v2 .ick b{font-size:16.5px;letter-spacing:-.015em} body.v2 .ick span{font-size:14.6px;line-height:1.68;color:#4A5668} body.v2 .visual{border-radius:26px;padding:34px; background:linear-gradient(158deg,#172443 0%,#10182C 46%,#0B111F 100%); box-shadow:0 44px 90px -40px rgba(7,19,44,.75),0 0 0 1px rgba(255,255,255,.06) inset; transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s} body.v2 .visual::before{background: radial-gradient(460px 260px at 82% -6%,rgba(103,232,249,.24),transparent 62%), radial-gradient(420px 300px at 8% 106%,rgba(37,99,235,.30),transparent 66%)} body.v2 .visual::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 30%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 30%,transparent 100%)} body.v2 .visual:hover{transform:translateY(-7px);box-shadow:0 56px 110px -42px rgba(7,19,44,.82),0 0 0 1px rgba(255,255,255,.10) inset} body.v2 .visual .mock{border-radius:15px;padding:17px;box-shadow:0 26px 54px -22px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.5) inset !important;transition:transform .5s cubic-bezier(.2,.7,.3,1)} body.v2 .visual:hover .mock{transform:translateY(-3px) scale(1.012)} body.v2 .visual .mrow{font-size:12px;padding:9px 0} body.v2 .visual .syncbar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);border-radius:12px;backdrop-filter:blur(8px)} @media(max-width:960px){body.v2 .usp{gap:34px}body.v2 .usp+.usp{margin-top:64px}body.v2 .visual{padding:24px}} /* --- v2: Effizienz-Abschnitt --- */ body.v2 .eff-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#F4F8FF 0%,#fff 55%)} body.v2 .eff-grid{grid-template-columns:1.02fr 1.08fr;gap:52px} body.v2 .eff-label{border:1px solid rgba(10,27,61,.10);box-shadow:0 3px 12px -4px rgba(10,27,61,.14); font-size:11.5px;letter-spacing:.14em;color:var(--navy);display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 13px} body.v2 .eff-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);animation:ebpulse 2.6s infinite} body.v2 .eff-grid h2{font-size:clamp(29px,2.9vw,42px);font-weight:800;letter-spacing:-.032em;line-height:1.08;margin-bottom:15px} body.v2 .eff-grid .etext{font-size:16.5px;line-height:1.72;color:#3A4557} body.v2 .eff-stats{gap:16px;margin-top:36px;display:grid;grid-template-columns:1fr 1fr} body.v2 .eff-stats .es{position:relative;background:#fff;border:1px solid rgba(10,27,61,.08);border-radius:18px; padding:22px 22px 20px;overflow:hidden;box-shadow:0 2px 10px -4px rgba(10,27,61,.10); transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s} body.v2 .eff-stats .es::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--cyan))} body.v2 .eff-stats .es:last-child::before{background:linear-gradient(90deg,var(--warm),#9DC1FB)} body.v2 .eff-stats .es:hover{transform:translateY(-5px);box-shadow:0 28px 56px -26px rgba(10,27,61,.30)} body.v2 .eff-stats .es b{font-size:clamp(38px,3.6vw,50px);letter-spacing:-.045em; background:linear-gradient(135deg,var(--navy) 12%,var(--blue) 96%);-webkit-background-clip:text;background-clip:text;color:transparent} body.v2 .eff-stats .es:last-child b{background:linear-gradient(135deg,var(--navy) 12%,var(--warm) 96%);-webkit-background-clip:text;background-clip:text} body.v2 .eff-stats .es b .u{font-size:.5em;letter-spacing:0} body.v2 .eff-stats .es > span{font-size:13.6px;line-height:1.6;color:#4A5668;max-width:none;margin-top:8px} body.v2 .eff-cards{grid-template-columns:repeat(2,1fr);gap:16px;align-content:start} body.v2 .ecard{position:relative;border-radius:20px;padding:26px 24px;overflow:hidden;isolation:isolate; border:1px solid rgba(10,27,61,.08);box-shadow:0 2px 10px -4px rgba(10,27,61,.10); transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s} body.v2 .ecard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .38s; background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.12),transparent 62%)} body.v2 .ecard:hover{transform:translateY(-6px);box-shadow:0 34px 66px -30px rgba(10,27,61,.32);border-color:rgba(37,99,235,.22)} body.v2 .ecard:hover::before{opacity:1} body.v2 .ecard .eic{width:46px;height:46px;border-radius:14px;margin-bottom:16px;color:#fff; box-shadow:0 8px 20px -8px rgba(10,27,61,.45);transition:transform .38s} body.v2 .ecard:hover .eic{transform:translateY(-2px) rotate(-4deg)} body.v2 .eic svg{width:21px;height:21px} body.v2 .eic.b{background:linear-gradient(150deg,#3B82F6,#1D4ED8)} body.v2 .eic.g{background:linear-gradient(150deg,#34D399,#059669)} body.v2 .eic.c{background:linear-gradient(150deg,#22D3EE,#0891B2)} body.v2 .eic.o{background:linear-gradient(150deg,#639CF8,#3275E0)} body.v2 .ecard h3{font-size:17px;letter-spacing:-.018em;margin-bottom:8px;line-height:1.3} body.v2 .ecard p{font-size:14.2px;line-height:1.66;color:#4A5668} /* Karte 1 dunkel, Karte 4 warm getönt – bricht das gleichförmige Raster */ body.v2 .ecard.dk{background:linear-gradient(160deg,#141F39 0%,#0D1424 100%);border-color:rgba(255,255,255,.08); box-shadow:0 24px 54px -26px rgba(8,22,52,.60)} body.v2 .ecard.dk::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(103,232,249,.16),transparent 62%)} body.v2 .ecard.dk h3{color:#fff} body.v2 .ecard.dk p{color:rgba(255,255,255,.66)} body.v2 .ecard.tn{background:linear-gradient(158deg,#F0F5FE 0%,#E1ECFE 100%);border-color:#C8DCFD} body.v2 .ecard.tn::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(69,137,247,.16),transparent 62%)} body.v2 .ecard.wide{grid-column:span 2} body.v2 .effnote{font-size:12.5px;line-height:1.7;color:var(--slate-l);margin-top:34px;max-width:900px} @media(max-width:960px){ body.v2 .eff-grid{grid-template-columns:1fr;gap:34px} body.v2 .eff-stats{grid-template-columns:1fr 1fr} body.v2 .eff-cards{grid-template-columns:1fr} body.v2 .ecard.wide{grid-column:span 1} } /* --- v2: FAQ als Karten --- */ body.v2 #faq{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#F5F9FF 100%)} body.v2 .faq-item{border-bottom:none;background:#fff;border:1px solid rgba(10,27,61,.08);border-radius:16px; margin-bottom:10px;overflow:hidden;box-shadow:0 2px 8px -4px rgba(10,27,61,.10); transition:border-color .3s,box-shadow .3s,transform .3s} body.v2 .faq-item:hover{border-color:rgba(37,99,235,.24);box-shadow:0 16px 34px -18px rgba(10,27,61,.24);transform:translateY(-2px)} body.v2 .faq-item.open{border-color:rgba(37,99,235,.28);box-shadow:0 22px 46px -22px rgba(10,27,61,.28); background:linear-gradient(160deg,#FBFDFF 0%,#F4F9FF 100%)} body.v2 .faq-q{padding:19px 22px;font-size:16.5px;font-weight:700;letter-spacing:-.012em} body.v2 .faq-q .ic{width:30px;height:30px;border-radius:10px;background:#EEF4FF;font-size:19px; transition:transform .3s cubic-bezier(.2,.7,.3,1),background .3s,color .3s} body.v2 .faq-item.open .faq-q .ic{background:linear-gradient(150deg,#3B82F6,#1D4ED8);box-shadow:0 6px 16px -6px rgba(29,78,216,.55)} body.v2 .faq-a p{padding:0 22px 21px;font-size:15px;line-height:1.72;color:#4A5668} /* --- v2: Finaler CTA --- */ body.v2 .sec.final{padding:112px 0 116px; background:radial-gradient(760px 380px at 50% -14%,rgba(103,232,249,.20),transparent 62%), radial-gradient(600px 320px at 50% 118%,rgba(37,99,235,.26),transparent 64%), linear-gradient(160deg,var(--navy3),var(--navy2))} body.v2 .sec.final::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(ellipse 72% 66% at 50% 46%,#000 24%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 72% 66% at 50% 46%,#000 24%,transparent 100%)} body.v2 .final h2{font-size:clamp(32px,3.5vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin-bottom:18px} body.v2 .final h2 .gr{background:linear-gradient(105deg,var(--ice) 4%,#7DD3FC 48%,#93C5FD 96%); -webkit-background-clip:text;background-clip:text;color:transparent} body.v2 .final p{font-size:17.5px;line-height:1.66;max-width:600px} body.v2 .final .actions{gap:15px;margin-top:4px} body.v2 .final .kontaktzeile{margin-top:24px} /* --- v2: Partner-Band als schlanker Streifen (kein Hero-Überhang mehr) --- */ body.v2 .partners{padding:30px 0 30px;background:linear-gradient(100deg,#0A101D 0%,#141F39 52%,#0F182B 100%);overflow:hidden} body.v2 .partners::before{background:radial-gradient(700px 160px at 50% 50%,rgba(103,232,249,.13),transparent 68%)} body.v2 .partners .ptxt{margin-bottom:0;font-size:12px;letter-spacing:.15em;color:rgba(191,209,238,.62); display:flex;align-items:center;justify-content:center;gap:20px} body.v2 .partners .ptxt::before,body.v2 .partners .ptxt::after{content:"";height:1px;width:min(140px,12vw);flex:none} body.v2 .partners .ptxt::before{background:linear-gradient(90deg,transparent,rgba(103,232,249,.45))} body.v2 .partners .ptxt::after{background:linear-gradient(90deg,rgba(103,232,249,.45),transparent)} body.v2 .partners .plogos{margin-top:26px} @media(max-width:700px){body.v2 .partners .ptxt{font-size:11px;gap:12px;letter-spacing:.1em}body.v2 .partners .ptxt::before,body.v2 .partners .ptxt::after{width:34px}} body.v2 .orbit-sec h2{font-size:clamp(28px,2.9vw,42px);font-weight:800;letter-spacing:-.032em;line-height:1.1} /* --- v2: Hero auf Tablet/Handy --- */ @media(max-width:1024px){ body.v2 .hero{padding:96px 0 40px} body.v2 .hgrid{grid-template-columns:minmax(0,1fr);gap:34px} body.v2 .hero-shot{width:1020px;transform:scale(.60);transform-origin:top left;margin:0;height:365px} body.v2 .appwin.pro{transform:none} } @media(max-width:700px){ body.v2 .hero{padding:84px 0 32px} body.v2 .eb{font-size:11px;letter-spacing:.02em;padding:7px 13px 7px 11px;max-width:100%} body.v2 .hero h1{font-size:clamp(29px,7.4vw,36px)} body.v2 .hero h1 .nb{white-space:normal} body.v2 .hero .lead{font-size:15.5px} body.v2 .hero .actions .btn{width:100%;justify-content:center} body.v2 .trustline{flex-wrap:wrap;white-space:normal;gap:10px 16px;font-size:12.4px} /* Handy: Sidebar raus, Dashboard einspaltig – sonst ist nichts lesbar */ body.v2 .hero-shot{width:660px;transform:scale(.50);height:399px} body.v2 .hero-shot .appbar{display:none} body.v2 .hero-shot .appwin.pro .app{grid-template-columns:minmax(0,1fr);min-height:0} } @media(max-width:420px){ body.v2 .hero-shot{transform:scale(.455);height:363px} } /* --- v2: Spaltenbreiten der Bento-/Flow-Raster als Klassen (statt inline) --- */ body.v2 .sp3{grid-column:span 3} body.v2 .sp4{grid-column:span 4} body.v2 .sp5{grid-column:span 5} body.v2 .sp8{grid-column:span 8} @media(max-width:1024px){ body.v2 .bento,body.v2 .flow{grid-template-columns:repeat(6,1fr)} body.v2 .sp3,body.v2 .sp4,body.v2 .sp5{grid-column:span 3} body.v2 .sp8{grid-column:span 6} } @media(max-width:700px){ body.v2 .bento,body.v2 .flow{grid-template-columns:1fr;gap:14px} body.v2 .sp3,body.v2 .sp4,body.v2 .sp5,body.v2 .sp8{grid-column:span 1} } @media(max-width:560px){ body.v2 .eff-stats{grid-template-columns:1fr;gap:12px} body.v2 .pgrid{gap:14px} } /* ========================================================= v2 – Unterseiten: page-hero im Stil der neuen Startseite ========================================================= */ body.v2 .page-hero{padding:140px 0 58px; background:linear-gradient(180deg,#EDF4FF 0%,#F6FAFF 56%,#fff 100%)} body.v2 .page-hero .clouds{overflow:hidden; background: radial-gradient(300px 110px at 16% 20%,rgba(255,255,255,.85),transparent 72%), radial-gradient(400px 130px at 84% 12%,rgba(255,255,255,.8),transparent 72%)} body.v2 .page-hero .clouds::before{content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(10,27,61,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(10,27,61,.055) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse 74% 78% at 50% 36%,#000 26%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 74% 78% at 50% 36%,#000 26%,transparent 100%)} body.v2 .page-hero .clouds::after{content:"";position:absolute; width:560px;height:460px;right:-140px;top:-130px;border-radius:50%; background:radial-gradient(circle,rgba(165,243,252,.55),transparent 68%);filter:blur(70px); animation:orbdrift 26s ease-in-out infinite} body.v2 .page-hero h1{font-size:clamp(31px,3.15vw,45px);letter-spacing:-.032em;line-height:1.08;margin-bottom:16px;max-width:900px} body.v2 .page-hero p.lead{font-size:17.5px;line-height:1.66;color:#3A4557;max-width:690px} body.v2 .page-hero .actions{margin-top:28px;gap:15px} body.v2 .breadcrumb{font-size:12.5px;margin-bottom:20px;color:var(--slate-l)} body.v2 .breadcrumb a{text-decoration:none} body.v2 .breadcrumb a:hover{text-decoration:underline} @media(max-width:700px){ body.v2 .page-hero{padding:100px 0 40px} body.v2 .page-hero h1{font-size:clamp(27px,7vw,34px)} body.v2 .page-hero p.lead{font-size:15.8px} body.v2 .page-hero .actions .btn{width:100%;justify-content:center} } /* --- v2: Artikel-Bausteine (Blog, Vorlagen, Vergleich) --- */ body.v2 .article .acat{font-size:11.5px;letter-spacing:.13em;display:inline-flex;align-items:center;gap:8px} body.v2 .article .acat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warm)} body.v2 .article h1{letter-spacing:-.03em;line-height:1.1} body.v2 .article h2{letter-spacing:-.025em;line-height:1.2;margin:46px 0 14px} body.v2 .article h3{letter-spacing:-.02em;line-height:1.3} body.v2 .article p{line-height:1.72} body.v2 .article .ahero{border-radius:22px;box-shadow:0 30px 64px -30px rgba(10,27,61,.45)} body.v2 .article .abox{background:linear-gradient(150deg,#F5F9FF 0%,#EFF6FF 100%);border:1px solid rgba(37,99,235,.14); border-left:none;border-radius:16px;padding:22px 26px;position:relative;overflow:hidden;line-height:1.72} body.v2 .article .abox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--blue),var(--cyan))} body.v2 .dtable{border-radius:16px;box-shadow:0 2px 12px -4px rgba(10,27,61,.14),0 0 0 1px rgba(10,27,61,.06)} body.v2 .dtable th{background:linear-gradient(150deg,#172443,#0F182B);font-size:12.5px;letter-spacing:.02em;padding:14px 16px} body.v2 .dtable td{border-bottom-color:rgba(10,27,61,.07)} body.v2 .dtable tbody tr{transition:background .2s} body.v2 .dtable tbody tr:hover td{background:#F7FAFF} body.v2 .dtable .hl-row td{background:#EEF5FF} body.v2 .dlbox{border-radius:24px; background:linear-gradient(158deg,#172443 0%,#10182C 48%,#0B111F 100%); box-shadow:0 40px 80px -38px rgba(7,19,44,.7),0 0 0 1px rgba(255,255,255,.06) inset} body.v2 .article-cta{border-radius:24px; background:radial-gradient(560px 260px at 50% -10%,rgba(103,232,249,.16),transparent 62%),linear-gradient(158deg,#172443,#0F182B); box-shadow:0 40px 80px -38px rgba(7,19,44,.7),0 0 0 1px rgba(255,255,255,.06) inset} body.v2 .morelinks{border-radius:18px;border-color:rgba(10,27,61,.08);box-shadow:0 2px 10px -4px rgba(10,27,61,.10); transition:box-shadow .3s,border-color .3s} body.v2 .morelinks:hover{border-color:rgba(37,99,235,.2);box-shadow:0 20px 42px -22px rgba(10,27,61,.24)} body.v2 .morelinks a{text-decoration:none;transition:transform .2s} body.v2 .morelinks a:hover{transform:translateX(3px);text-decoration:none} body.v2 .price-hero{border-radius:26px; background:linear-gradient(158deg,#172443 0%,#10182C 48%,#0B111F 100%); box-shadow:0 44px 90px -40px rgba(7,19,44,.72),0 0 0 1px rgba(255,255,255,.06) inset} body.v2 .price-hero h2{letter-spacing:-.028em;line-height:1.12} /* --- v2: Tabellen im Artikel dürfen etwas breiter als die Textspalte sein --- */ @media(min-width:1120px){ body.v2 .article .tbl-scroll{margin-left:-52px;margin-right:-52px;padding-left:52px;padding-right:52px} body.v2 .article .tbl-scroll::-webkit-scrollbar{height:8px} body.v2 .article .tbl-scroll::-webkit-scrollbar-thumb{background:rgba(10,27,61,.18);border-radius:8px} } /* --- v2: Häkchenliste mit Negativ-Marker (z. B. „Was nicht enthalten ist“) --- */ body.v2 .ick.neg .ring{background:linear-gradient(155deg,#F1F5F9,#E2E8F0);color:#64748B; box-shadow:0 3px 10px -3px rgba(100,116,139,.28);font-size:13px} body.v2 .ick.neg b{color:var(--navy)} /* ========================================================================= v3 – Visuelles Baukastensystem für alle Unterseiten Bildsprache der Startseite: Kacheln in verschiedenen Größen, Farbe, Hintergrundgrafiken und erklärende Mikro-Grafiken statt Fließtext. Alle Regeln hängen an body.v2. ========================================================================= */ /* ---------- 1. Sektions-Hüllen ---------- */ body.v2 .sx{position:relative;overflow:hidden;padding:92px 0} body.v2 .sx>.wrap{position:relative;z-index:2} body.v2 .sx.tight{padding:66px 0} body.v2 .sx.snug{padding:52px 0} body.v2 .sx.tint{background:linear-gradient(180deg,#F4F9FF 0%,#FFF 100%)} body.v2 .sx.tint2{background:linear-gradient(180deg,#FFF 0%,#F1F7FF 52%,#FFF 100%)} body.v2 .sx.ice{background:linear-gradient(150deg,#EAF4FF 0%,#F7FBFF 58%,#F3F7FE 100%)} body.v2 .sx.paper{background:linear-gradient(180deg,#FFFBF6 0%,#FFF 100%)} body.v2 .sx.dark{background:linear-gradient(158deg,#172443 0%,#10182C 52%,#0B111F 100%);color:#fff} body.v2 .sx.dark h2,body.v2 .sx.dark h3,body.v2 .sx.dark h4{color:#fff} body.v2 .sx.dark>.wrap>p{color:rgba(255,255,255,.72)} body.v2 .sx.dark .shead2 h2{color:#fff} body.v2 .sx.dark .shead2 p{color:rgba(255,255,255,.7)} /* ---------- 2. Hintergrund-Texturen ---------- */ body.v2 .tex{position:absolute;inset:0;pointer-events:none;z-index:0} body.v2 .tex.grid{background-image:linear-gradient(rgba(10,27,61,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,27,61,.05) 1px,transparent 1px); background-size:54px 54px; -webkit-mask-image:radial-gradient(ellipse 78% 70% at 50% 34%,#000 26%,transparent 100%); mask-image:radial-gradient(ellipse 78% 70% at 50% 34%,#000 26%,transparent 100%)} body.v2 .tex.grid.lt{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)} body.v2 .tex.dots{background-image:radial-gradient(rgba(10,27,61,.11) 1.3px,transparent 1.3px);background-size:24px 24px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 82% 16%,#000 8%,transparent 78%); mask-image:radial-gradient(ellipse 70% 60% at 82% 16%,#000 8%,transparent 78%)} body.v2 .tex.dots.lt{background-image:radial-gradient(rgba(103,232,249,.22) 1.3px,transparent 1.3px)} body.v2 .tex.hatch{background:repeating-linear-gradient(135deg,rgba(10,27,61,.05) 0 1.5px,transparent 1.5px 13px); -webkit-mask-image:linear-gradient(205deg,#000,transparent 62%);mask-image:linear-gradient(205deg,#000,transparent 62%)} body.v2 .tex.hatch.lt{background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1.5px,transparent 1.5px 13px)} body.v2 .tex.rings{background:repeating-radial-gradient(circle at 88% 8%,transparent 0 62px,rgba(10,27,61,.052) 62px 63.4px); -webkit-mask-image:radial-gradient(ellipse 76% 92% at 86% 10%,#000 12%,transparent 82%); mask-image:radial-gradient(ellipse 76% 92% at 86% 10%,#000 12%,transparent 82%)} body.v2 .tex.rings.lt{background:repeating-radial-gradient(circle at 88% 8%,transparent 0 62px,rgba(103,232,249,.1) 62px 63.4px)} body.v2 .tex.rings.l{background:repeating-radial-gradient(circle at 8% 92%,transparent 0 58px,rgba(69,137,247,.09) 58px 59.4px); -webkit-mask-image:radial-gradient(ellipse 70% 86% at 8% 92%,#000 14%,transparent 84%); mask-image:radial-gradient(ellipse 70% 86% at 8% 92%,#000 14%,transparent 84%)} body.v2 .tex.beam{background:linear-gradient(112deg,transparent 32%,rgba(37,99,235,.055) 46%,rgba(34,211,238,.05) 56%,transparent 70%)} body.v2 .tex.beam.lt{background:linear-gradient(112deg,transparent 30%,rgba(103,232,249,.09) 48%,transparent 68%)} /* ---------- 3. Kopfzeile mit Kennzahlen-Spalte ---------- */ body.v2 .headrow{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;margin-bottom:46px} body.v2 .headrow .shead2{margin-bottom:0;max-width:none} body.v2 .statcol{border-top:1px solid var(--line)} body.v2 .statcol .st{padding:15px 0;border-bottom:1px solid var(--line)} body.v2 .statcol .st b{display:block;font-family:var(--kc-kopf);font-size:33px;font-weight:800;color:var(--navy);letter-spacing:-.035em;line-height:1} body.v2 .statcol .st b em{font-style:normal;color:var(--warm)} body.v2 .statcol .st b i{font-style:normal;font-size:18px;font-weight:700;color:var(--slate-l);margin-left:4px} body.v2 .statcol .st span{display:block;font-size:13.8px;color:var(--navy);margin-top:6px;font-weight:650;line-height:1.35} body.v2 .statcol .st small{display:block;font-size:11.8px;color:var(--slate-l);margin-top:4px;line-height:1.45} body.v2 .statcol.lt{border-color:rgba(255,255,255,.15)} body.v2 .statcol.lt .st{border-color:rgba(255,255,255,.15)} body.v2 .statcol.lt .st b{color:#fff} body.v2 .statcol.lt .st b em{color:var(--ice)} body.v2 .statcol.lt .st span{color:rgba(255,255,255,.9)} body.v2 .statcol.lt .st small{color:rgba(255,255,255,.5)} /* ---------- 4. Zweispalter Text + Grafik ---------- */ body.v2 .split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center} body.v2 .split.w6{grid-template-columns:1.12fr .88fr} body.v2 .split.w4{grid-template-columns:.88fr 1.12fr} body.v2 .split+.split{margin-top:86px} body.v2 .split.rev>.vis{order:-1} body.v2 .split .txt>h3{font-size:clamp(23px,2.25vw,31px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1.14;margin:0 0 14px} body.v2 .split .txt>p{font-size:16px;color:var(--slate);line-height:1.7;margin-bottom:14px} body.v2 .split .txt>p:last-child{margin-bottom:0} body.v2 .sx.dark .split .txt>p{color:rgba(255,255,255,.7)} /* Grafik-Rahmen */ body.v2 .vis{position:relative;border-radius:26px;padding:26px;background:linear-gradient(160deg,#F7FBFF,#EAF3FF); border:1px solid #DCE7F8;box-shadow:0 30px 64px -34px rgba(10,27,61,.3);overflow:hidden;isolation:isolate} body.v2 .vis.dark{background:linear-gradient(160deg,#172443,#0B111F);border-color:rgba(255,255,255,.1); box-shadow:0 34px 74px -34px rgba(6,18,42,.72)} body.v2 .vis.warm{background:linear-gradient(155deg,#EFF5FE,#DBE8FD);border-color:#C3D7F8; box-shadow:0 30px 64px -34px rgba(50,117,224,.35)} body.v2 .vis.plain{background:#fff;border-color:var(--line)} body.v2 .vis.flat{box-shadow:0 12px 30px -20px rgba(10,27,61,.28)} body.v2 .vis .vhead{display:flex;align-items:center;gap:10px;margin-bottom:18px;font-size:11.5px;font-weight:750; letter-spacing:.11em;text-transform:uppercase;color:var(--slate-l)} body.v2 .vis .vhead::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none} body.v2 .vis.dark .vhead{color:rgba(255,255,255,.55)} body.v2 .vis.dark .vhead::before{background:var(--ice)} body.v2 .vis.warm .vhead{color:#2153A3} body.v2 .vis.warm .vhead::before{background:var(--warm-d)} body.v2 .vis .vcap{margin-top:16px;padding-top:13px;border-top:1px solid rgba(10,27,61,.09); font-size:12.5px;color:var(--slate);line-height:1.55} body.v2 .vis .vcap b{color:var(--navy);font-weight:700} body.v2 .vis.dark .vcap{border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.6)} body.v2 .vis.dark .vcap b{color:#fff} body.v2 .vis.warm .vcap{border-color:rgba(46,95,174,.18);color:#284C86} body.v2 .vis.warm .vcap b{color:#143A76} body.v2 .vis .vdeco{position:absolute;right:-40px;bottom:-40px;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.1),transparent 68%);pointer-events:none;z-index:-1} body.v2 .vis.dark .vdeco{background:radial-gradient(circle,rgba(103,232,249,.16),transparent 68%)} body.v2 .vis.warm .vdeco{background:radial-gradient(circle,rgba(255,255,255,.5),transparent 68%)} /* ---------- 5. Bento-Erweiterungen ---------- */ body.v2 .sp2{grid-column:span 2} body.v2 .sp6{grid-column:span 6} body.v2 .sp7{grid-column:span 7} body.v2 .sp9{grid-column:span 9} body.v2 .sp12{grid-column:span 12} body.v2 .bento.g12{grid-template-columns:repeat(12,1fr)} body.v2 .bc.tint{background:linear-gradient(158deg,#F3F8FF,#E7F1FF);border-color:#D8E6FA} body.v2 .bc.ice{background:linear-gradient(158deg,#EFFBFF,#DFF6FC);border-color:#C6EDF6} body.v2 .bc.paper{background:linear-gradient(158deg,#FFFDF6,#FFF8E9);border-color:#F0E5C6} body.v2 .bc.soft{background:linear-gradient(158deg,#F3F7FE,#E5EFFE);border-color:#CEDEF7} body.v2 .bc.tall{display:flex;flex-direction:column} body.v2 .bc.tall .viz{margin-top:auto} body.v2 .bc>.viz{margin-top:20px} body.v2 .bc .nlab{display:inline-flex;align-items:center;justify-content:center;font-family:var(--kc-kopf); font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--blue);background:#E8F0FE; border-radius:9px;padding:5px 10px;margin-bottom:14px} body.v2 .bc.dark .nlab{color:var(--ice);background:rgba(103,232,249,.13)} body.v2 .bc.warm .nlab{color:#fff;background:rgba(255,255,255,.22)} body.v2 .bc.ice .nlab{color:#0E7490;background:rgba(14,116,144,.1)} body.v2 .bc.paper .nlab{color:#92722A;background:rgba(146,114,42,.1)} body.v2 .bc.soft .nlab{color:#1651B1;background:rgba(22,81,177,.1)} body.v2 .bc .kico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:15px; background:linear-gradient(155deg,#EAF2FF,#D9E9FE);color:var(--blue);border:1px solid #D3E3FB;transition:.35s} body.v2 .bc .kico svg{width:23px;height:23px} body.v2 .bc:hover .kico{background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;border-color:transparent; transform:scale(1.07);box-shadow:0 12px 24px -10px rgba(37,99,235,.55)} body.v2 .bc.dark .kico{background:rgba(103,232,249,.1);color:var(--ice);border-color:rgba(103,232,249,.2)} body.v2 .bc.dark:hover .kico{background:linear-gradient(140deg,var(--cyan),var(--blue));color:#070C15} body.v2 .bc.warm .kico{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)} body.v2 .bc.warm:hover .kico{background:#fff;color:var(--warm-d)} body.v2 .bc .blink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13.6px;font-weight:700;color:var(--blue);transition:gap .25s} body.v2 .bc:hover .blink{gap:11px} body.v2 .bc.dark .blink{color:var(--ice)} body.v2 .bc.warm .blink{color:#fff} body.v2 a.bc{display:block;text-decoration:none} body.v2 a.bc:hover{text-decoration:none} body.v2 .bc .tagline{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--slate-l);margin-bottom:9px} body.v2 .bc.dark .tagline{color:rgba(255,255,255,.45)} body.v2 .bc.warm .tagline{color:rgba(255,255,255,.7)} /* ---------- 6. Mikro-Grafik: Balken ---------- */ body.v2 .mvbar{display:flex;flex-direction:column;gap:13px} body.v2 .mvb .lb{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12.4px;color:var(--slate);margin-bottom:6px} body.v2 .mvb .lb i{font-style:normal;font-weight:600} body.v2 .mvb .lb b{font-family:var(--kc-kopf);font-size:13.5px;color:var(--navy);font-weight:700;white-space:nowrap} body.v2 .mvb .tr{height:10px;border-radius:6px;background:rgba(10,27,61,.075);overflow:hidden} body.v2 .mvb .tr i{display:block;height:100%;width:var(--w,50%);border-radius:6px; background:linear-gradient(90deg,var(--blue),var(--cyan))} body.v2 .mvb.o .tr i{background:linear-gradient(90deg,#639CF8,var(--warm-d))} body.v2 .mvb.g .tr i{background:linear-gradient(90deg,#4ADE80,var(--green))} body.v2 .mvb.r .tr i{background:linear-gradient(90deg,#F87171,var(--red))} body.v2 .mvb.mut .tr i{background:linear-gradient(90deg,#CBD5E1,#94A3B8)} body.v2 .reveal .mvb .tr i{transform:scaleX(0);transform-origin:left} body.v2 .reveal.in .mvb .tr i{transform:scaleX(1);transition:transform 1.05s cubic-bezier(.2,.8,.2,1) var(--d,.15s)} body.v2 .vis.dark .mvb .lb{color:rgba(255,255,255,.6)} body.v2 .vis.dark .mvb .lb b,body.v2 .bc.dark .mvb .lb b{color:#fff} body.v2 .vis.dark .mvb .tr,body.v2 .bc.dark .mvb .tr{background:rgba(255,255,255,.1)} body.v2 .bc.dark .mvb .lb{color:rgba(255,255,255,.6)} body.v2 .bc.warm .mvb .lb{color:rgba(255,255,255,.8)} body.v2 .bc.warm .mvb .lb b{color:#fff} body.v2 .bc.warm .mvb .tr{background:rgba(255,255,255,.22)} body.v2 .bc.warm .mvb .tr i{background:#fff} /* ---------- 7. Mikro-Grafik: Säulen ---------- */ body.v2 .mvcol{display:flex;align-items:flex-end;gap:9px;height:150px;padding-top:22px} body.v2 .mvc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;min-width:0} body.v2 .mvc u{display:block;height:var(--h,50%);border-radius:7px 7px 3px 3px;text-decoration:none; background:linear-gradient(180deg,#93C5FD,#3B82F6);transform-origin:bottom} body.v2 .mvc.o u{background:linear-gradient(180deg,#7FAEFA,var(--warm-d))} body.v2 .mvc.g u{background:linear-gradient(180deg,#6EE7B7,var(--green))} body.v2 .mvc.mut u{background:linear-gradient(180deg,#E2E8F0,#CBD5E1)} body.v2 .mvc b{position:absolute;top:-20px;left:0;right:0;text-align:center;font-family:var(--kc-kopf); font-size:12px;font-weight:750;color:var(--navy);white-space:nowrap} body.v2 .mvc i{display:block;text-align:center;font-style:normal;font-size:10.5px;color:var(--slate-l);margin-top:7px;font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} body.v2 .mvc.o b{color:var(--warm-d)} body.v2 .reveal .mvc u{transform:scaleY(0)} body.v2 .reveal.in .mvc u{transform:scaleY(1);transition:transform .9s cubic-bezier(.2,.8,.2,1) var(--d,.1s)} body.v2 .vis.dark .mvc b,body.v2 .bc.dark .mvc b{color:#fff} body.v2 .vis.dark .mvc i,body.v2 .bc.dark .mvc i{color:rgba(255,255,255,.5)} /* ---------- 8. Mikro-Grafik: Ring / Donut ---------- */ body.v2 .mvrings{display:flex;gap:22px;flex-wrap:wrap;justify-content:center} body.v2 .mvring{width:var(--s,118px);height:var(--s,118px);border-radius:50%;display:grid;place-items:center;position:relative;flex:none; background:conic-gradient(var(--c,var(--blue)) calc(var(--p,60)*1%),rgba(10,27,61,.08) 0)} body.v2 .mvring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:#fff} body.v2 .vis.dark .mvring::after,body.v2 .bc.dark .mvring::after{background:#10182C} body.v2 .vis.dark .mvring,body.v2 .bc.dark .mvring{background:conic-gradient(var(--c,var(--ice)) calc(var(--p,60)*1%),rgba(255,255,255,.12) 0)} body.v2 .mvring span{position:relative;z-index:2;text-align:center;font-family:var(--kc-kopf);font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1} body.v2 .mvring span small{display:block;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;color:var(--slate-l);margin-top:5px;letter-spacing:0} body.v2 .vis.dark .mvring span,body.v2 .bc.dark .mvring span{color:#fff} body.v2 .vis.dark .mvring span small,body.v2 .bc.dark .mvring span small{color:rgba(255,255,255,.55)} body.v2 .mvrw{display:flex;flex-direction:column;align-items:center;gap:10px} body.v2 .mvrw>em{font-style:normal;font-size:12.4px;font-weight:650;color:var(--slate);text-align:center;line-height:1.4;max-width:150px} body.v2 .vis.dark .mvrw>em{color:rgba(255,255,255,.62)} /* ---------- 9. Mikro-Grafik: gestapelter Balken ---------- */ body.v2 .mvstack{display:flex;height:52px;border-radius:12px;overflow:hidden;gap:2px;background:transparent} body.v2 .mvstack .sg{flex:var(--f,1);display:grid;place-items:center;font-family:var(--kc-kopf);font-size:12.5px;font-weight:750;color:#fff; min-width:0;padding:0 4px;text-align:center;line-height:1.15} body.v2 .mvstack .sg.b1{background:linear-gradient(160deg,#3B82F6,#1D4ED8)} body.v2 .mvstack .sg.b2{background:linear-gradient(160deg,#38BDF8,#0EA5E9)} body.v2 .mvstack .sg.b3{background:linear-gradient(160deg,#67E8F9,#22D3EE);color:#083344} body.v2 .mvstack .sg.b4{background:linear-gradient(160deg,#639CF8,#3275E0)} body.v2 .mvstack .sg.b5{background:linear-gradient(160deg,#E2E8F0,#CBD5E1);color:#475569} body.v2 .mvleg{display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:14px} body.v2 .mvleg span{display:inline-flex;align-items:center;gap:7px;font-size:12.2px;color:var(--slate);font-weight:600} body.v2 .mvleg span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--lc,var(--blue));flex:none} body.v2 .vis.dark .mvleg span,body.v2 .bc.dark .mvleg span{color:rgba(255,255,255,.66)} /* ---------- 10. Mikro-Grafik: Ablaufkette ---------- */ body.v2 .mvflow{display:flex;align-items:stretch;gap:0;flex-wrap:wrap} body.v2 .mvflow .fn{flex:1;min-width:96px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 12px;text-align:center; position:relative;z-index:2;box-shadow:0 8px 20px -14px rgba(10,27,61,.3)} body.v2 .mvflow .fn b{display:block;font-family:var(--kc-kopf);font-size:12.5px;font-weight:750;color:var(--navy);line-height:1.25} body.v2 .mvflow .fn small{display:block;font-size:10.5px;color:var(--slate-l);margin-top:4px;line-height:1.35} body.v2 .mvflow .fn .fdot{width:26px;height:26px;border-radius:9px;margin:0 auto 8px;display:grid;place-items:center; background:linear-gradient(150deg,#E8F0FE,#D6E6FD);color:var(--blue)} body.v2 .mvflow .fn .fdot svg{width:14px;height:14px} body.v2 .mvflow .fn.hot{border-color:rgba(69,137,247,.4);background:linear-gradient(160deg,#F3F7FE,#E4EEFE)} body.v2 .mvflow .fn.hot .fdot{background:linear-gradient(150deg,#D5E4FD,#BCD4FC);color:var(--warm-d)} body.v2 .mvflow .fa{flex:0 0 26px;display:grid;place-items:center;color:#B7C6DE} body.v2 .mvflow .fa svg{width:15px;height:15px} body.v2 .vis.dark .mvflow .fn,body.v2 .bc.dark .mvflow .fn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);box-shadow:none} body.v2 .vis.dark .mvflow .fn b,body.v2 .bc.dark .mvflow .fn b{color:#fff} body.v2 .vis.dark .mvflow .fn small,body.v2 .bc.dark .mvflow .fn small{color:rgba(255,255,255,.5)} body.v2 .vis.dark .mvflow .fn .fdot,body.v2 .bc.dark .mvflow .fn .fdot{background:rgba(103,232,249,.13);color:var(--ice)} body.v2 .vis.dark .mvflow .fa,body.v2 .bc.dark .mvflow .fa{color:rgba(103,232,249,.5)} /* ---------- 11. Mikro-Grafik: Nabe mit Satelliten ---------- */ body.v2 .mvhub{position:relative;min-height:290px;padding:8px} body.v2 .mvhub .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:50%; background:linear-gradient(150deg,var(--blue),#1E3A8A);color:#fff;display:grid;place-items:center;text-align:center; box-shadow:0 22px 46px -16px rgba(37,99,235,.62);z-index:4} body.v2 .mvhub .core b{font-family:var(--kc-kopf);font-size:13.5px;font-weight:800;line-height:1.2;padding:0 12px;display:block} body.v2 .mvhub .core small{display:block;font-size:9.5px;font-weight:600;color:rgba(255,255,255,.66);margin-top:4px;letter-spacing:.06em;text-transform:uppercase} body.v2 .mvhub .rr{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;z-index:1} body.v2 .mvhub .rr.r1{width:190px;height:190px;border:1px dashed rgba(10,27,61,.18)} body.v2 .mvhub .rr.r2{width:290px;height:290px;border:1px solid rgba(10,27,61,.08)} body.v2 .vis.dark .mvhub .rr.r1{border-color:rgba(103,232,249,.28)} body.v2 .vis.dark .mvhub .rr.r2{border-color:rgba(255,255,255,.1)} body.v2 .mvhub .sat{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);border-radius:11px; padding:7px 11px;font-size:11.6px;font-weight:650;color:var(--navy);white-space:nowrap;z-index:3; box-shadow:0 12px 26px -14px rgba(10,27,61,.38);display:inline-flex;align-items:center;gap:7px;transition:.35s} body.v2 .mvhub .sat em{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none} body.v2 .mvhub .sat.o em{background:var(--warm)} body.v2 .mvhub .sat.c em{background:var(--cyan)} body.v2 .mvhub .sat.g em{background:var(--green)} body.v2 .vis:hover .mvhub .sat,body.v2 .bc:hover .mvhub .sat{border-color:#CBD9F5} body.v2 .vis.dark .mvhub .sat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none} body.v2 .vis.dark:hover .mvhub .sat{border-color:rgba(103,232,249,.4)} /* ---------- 12. Mikro-Grafik: Wochenraster / Kalender ---------- */ body.v2 .mvcal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} body.v2 .mvcal .cd{aspect-ratio:1;border-radius:8px;background:rgba(10,27,61,.05);display:grid;place-items:center; font-size:10.5px;font-weight:650;color:var(--slate-l)} body.v2 .mvcal .cd.a{background:linear-gradient(155deg,#DBEAFE,#BFDBFE);color:#1D4ED8} body.v2 .mvcal .cd.b{background:linear-gradient(155deg,#3B82F6,#1D4ED8);color:#fff} body.v2 .mvcal .cd.o{background:linear-gradient(155deg,#639CF8,#3275E0);color:#fff} body.v2 .mvcal .cd.g{background:linear-gradient(155deg,#86EFAC,#16A34A);color:#fff} body.v2 .mvcal .hd{aspect-ratio:auto;background:none;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-l);padding-bottom:2px} body.v2 .vis.dark .mvcal .cd,body.v2 .bc.dark .mvcal .cd{background:rgba(255,255,255,.08);color:rgba(255,255,255,.45)} body.v2 .vis.dark .mvcal .hd,body.v2 .bc.dark .mvcal .hd{background:none} /* ---------- 13. Mikro-Grafik: Zeitstrahl ---------- */ body.v2 .mvtl{position:relative;padding:26px 0 4px} body.v2 .mvtl::before{content:"";position:absolute;left:0;right:0;top:34px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--sky-l),var(--cyan),#CEE0FD)} body.v2 .mvtl .tls{display:flex;justify-content:space-between;gap:8px} body.v2 .mvtl .tp{flex:1;text-align:center;position:relative;min-width:0} body.v2 .mvtl .tp::before{content:"";display:block;width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid var(--sky); margin:0 auto 12px;position:relative;z-index:2} body.v2 .mvtl .tp.now::before{border-color:var(--warm);background:var(--warm);box-shadow:0 0 0 5px rgba(69,137,247,.18)} body.v2 .mvtl .tp.done::before{border-color:var(--green);background:var(--green)} body.v2 .mvtl .tp b{display:block;font-family:var(--kc-kopf);font-size:12px;font-weight:750;color:var(--navy);line-height:1.25} body.v2 .mvtl .tp small{display:block;font-size:10.4px;color:var(--slate-l);margin-top:3px;line-height:1.3} body.v2 .vis.dark .mvtl .tp b{color:#fff} body.v2 .vis.dark .mvtl .tp small{color:rgba(255,255,255,.5)} body.v2 .vis.dark .mvtl .tp::before{background:#10182C} /* ---------- 14. Mikro-Grafik: Gegenüberstellung zweier Zahlen ---------- */ body.v2 .mvvs{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center} body.v2 .mvvs .vn{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 16px;text-align:center; box-shadow:0 10px 26px -18px rgba(10,27,61,.35)} body.v2 .mvvs .vn b{display:block;font-family:var(--kc-kopf);font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.035em;line-height:1} body.v2 .mvvs .vn span{display:block;font-size:11.8px;color:var(--slate);margin-top:8px;font-weight:600;line-height:1.35} body.v2 .mvvs .vn.bad b{color:var(--red)} body.v2 .mvvs .vn.good b{color:var(--green)} body.v2 .mvvs .vn.hot{background:linear-gradient(155deg,#5795F8,#3275E0);border-color:transparent} body.v2 .mvvs .vn.hot b,body.v2 .mvvs .vn.hot span{color:#fff} body.v2 .mvvs .vs{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none; background:linear-gradient(150deg,#141F39,#0D1424);color:#fff;font-family:var(--kc-kopf);font-size:13px;font-weight:800; box-shadow:0 10px 22px -12px rgba(10,27,61,.6)} body.v2 .vis.dark .mvvs .vn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);box-shadow:none} body.v2 .vis.dark .mvvs .vn b{color:#fff} body.v2 .vis.dark .mvvs .vn span{color:rgba(255,255,255,.6)} body.v2 .vis.dark .mvvs .vs{background:var(--ice);color:#0C1323} /* ---------- 15. Mikro-Grafik: Statuszeilen ---------- */ body.v2 .mvrows{display:flex;flex-direction:column;gap:8px} body.v2 .mvrows .rw{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:11px; padding:10px 13px;font-size:12.6px;color:var(--navy);font-weight:600;transition:.3s} body.v2 .mvrows .rw .ri{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none; background:#EEF3FB;color:var(--slate)} body.v2 .mvrows .rw .ri svg{width:12px;height:12px} body.v2 .mvrows .rw>span:not(.ri){margin-left:auto;font-size:10.5px;font-weight:750;padding:3px 9px;border-radius:20px;white-space:nowrap;flex:none} body.v2 .mvrows .rw>div{flex:1;min-width:0} body.v2 .mvrows .rw>div>span{display:block;line-height:1.3} body.v2 .mvrows .rw .ri{margin-left:0} body.v2 .mvrows .rw .ok{background:var(--greenbg);color:var(--green)} body.v2 .mvrows .rw .warn{background:var(--amberbg);color:var(--amber)} body.v2 .mvrows .rw .bad{background:var(--redbg);color:var(--red)} body.v2 .mvrows .rw .info{background:#E8F0FE;color:var(--blue)} body.v2 .mvrows .rw .neut{background:#F1F5F9;color:#64748B} body.v2 .mvrows .rw em{font-style:normal;font-size:11px;color:var(--slate-l);font-weight:500;display:block} body.v2 .mvrows .rw.hot{border-color:rgba(69,137,247,.35);background:linear-gradient(160deg,#F3F8FF,#E9F1FE)} body.v2 .vis:hover .mvrows .rw,body.v2 .bc:hover .mvrows .rw{border-color:#D6E3F8} body.v2 .vis.dark .mvrows .rw,body.v2 .bc.dark .mvrows .rw{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff} body.v2 .vis.dark .mvrows .rw .ri,body.v2 .bc.dark .mvrows .rw .ri{background:rgba(255,255,255,.1);color:var(--ice)} body.v2 .vis.dark .mvrows .rw em,body.v2 .bc.dark .mvrows .rw em{color:rgba(255,255,255,.45)} body.v2 .bc.warm .mvrows .rw{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.24);color:#fff} body.v2 .bc.warm .mvrows .rw .ri{background:rgba(255,255,255,.22);color:#fff} /* ---------- 16. Mikro-Grafik: Dokument / PDF ---------- */ body.v2 .mvdoc{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 17px; box-shadow:0 16px 34px -20px rgba(10,27,61,.4)} body.v2 .mvdoc .dh{display:flex;align-items:center;gap:9px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line)} body.v2 .mvdoc .dh b{font-family:var(--kc-kopf);font-size:12.5px;color:var(--navy);font-weight:750} body.v2 .mvdoc .dh span{margin-left:auto;font-size:9.5px;font-weight:750;background:var(--greenbg);color:var(--green);padding:3px 8px;border-radius:20px} body.v2 .mvdoc .dl{height:7px;border-radius:4px;background:rgba(10,27,61,.07);margin-bottom:7px;width:var(--w,100%)} body.v2 .mvdoc .dl.acc{background:linear-gradient(90deg,rgba(37,99,235,.28),rgba(34,211,238,.2))} body.v2 .mvdoc .dsig{margin-top:13px;padding-top:11px;border-top:1px dashed var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:10px} body.v2 .mvdoc .dsig small{font-size:9.5px;color:var(--slate-l)} body.v2 .mvdoc .scrib{width:78px;height:26px;color:var(--navy)} body.v2 .mvdoc .stamp{position:absolute;right:-10px;top:-12px;background:linear-gradient(150deg,#5795F8,#3275E0);color:#fff; font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:8px; transform:rotate(4deg);box-shadow:0 10px 22px -10px rgba(50,117,224,.7)} body.v2 .mvdoc.stack::before,body.v2 .mvdoc.stack::after{content:"";position:absolute;inset:0;border-radius:12px;background:#fff; border:1px solid var(--line);z-index:-1} body.v2 .mvdoc.stack::before{transform:rotate(-2.6deg) translateY(5px)} body.v2 .mvdoc.stack::after{transform:rotate(2deg) translateY(9px);opacity:.65} /* ---------- 17. Mikro-Grafik: Halbkreis-Anzeige ---------- */ body.v2 .mvgauge{position:relative;width:100%;max-width:230px;margin:0 auto;aspect-ratio:2/1.12;overflow:hidden} body.v2 .mvgauge .gw{position:absolute;inset:0;border-radius:50% 50% 0 0 / 100% 100% 0 0; background:conic-gradient(from 270deg,var(--c,var(--blue)) calc(var(--p,50)*0.5%),rgba(10,27,61,.08) 0 50%,transparent 0)} body.v2 .mvgauge .gw::after{content:"";position:absolute;left:18%;right:18%;bottom:0;top:36%;border-radius:50% 50% 0 0 / 100% 100% 0 0;background:#fff} body.v2 .vis.dark .mvgauge .gw::after{background:#10182C} body.v2 .mvgauge .gv{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--kc-kopf);font-size:26px; font-weight:800;color:var(--navy);letter-spacing:-.03em;z-index:2} body.v2 .mvgauge .gv small{display:block;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:600;color:var(--slate-l);letter-spacing:0;margin-top:2px} body.v2 .vis.dark .mvgauge .gv{color:#fff} body.v2 .vis.dark .mvgauge .gv small{color:rgba(255,255,255,.55)} /* ---------- 18. Mikro-Grafik: Treppe / Stufen ---------- */ body.v2 .mvsteps{display:flex;align-items:flex-end;gap:6px;height:132px} body.v2 .mvsteps .sp{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%} body.v2 .mvsteps .sp u{display:block;height:var(--h,40%);border-radius:8px 8px 4px 4px;text-decoration:none; background:linear-gradient(180deg,rgba(37,99,235,.18),rgba(37,99,235,.5));border-top:3px solid var(--blue)} body.v2 .mvsteps .sp.hot u{background:linear-gradient(180deg,rgba(69,137,247,.2),rgba(69,137,247,.55));border-top-color:var(--warm-d)} body.v2 .mvsteps .sp b{position:absolute;left:0;right:0;top:calc(100% - var(--h,40%) - 22px);text-align:center; font-family:var(--kc-kopf);font-size:11.5px;font-weight:750;color:var(--navy)} body.v2 .mvsteps .sp i{display:block;text-align:center;font-style:normal;font-size:10px;color:var(--slate-l);margin-top:6px;font-weight:600} /* ---------- 19. Mikro-Grafik: Gerät / Tablet ---------- */ body.v2 .mvpad{background:linear-gradient(160deg,#1E293B,#0F172A);border-radius:18px;padding:9px; box-shadow:0 26px 54px -26px rgba(10,27,61,.6)} body.v2 .mvpad .scr{background:#fff;border-radius:11px;padding:13px;min-height:150px} body.v2 .mvpad .pbar{display:flex;align-items:center;gap:7px;padding-bottom:9px;margin-bottom:10px;border-bottom:1px solid var(--line)} body.v2 .mvpad .pbar b{font-family:var(--kc-kopf);font-size:11.5px;color:var(--navy);font-weight:750} body.v2 .mvpad .pbar .off{margin-left:auto;font-size:9px;font-weight:750;background:var(--amberbg);color:var(--amber); padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:5px} body.v2 .mvpad .pbar .off::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)} body.v2 .mvpad .pbar .on2{margin-left:auto;font-size:9px;font-weight:750;background:var(--greenbg);color:var(--green);padding:3px 8px;border-radius:20px} /* ---------- 20. Mikro-Grafik: Karte / konzentrische Ringe ---------- */ body.v2 .mvmap{position:relative;min-height:210px;display:grid;place-items:center} body.v2 .mvmap .mr{position:absolute;border-radius:50%;border:1px solid rgba(37,99,235,.16); background:radial-gradient(circle,rgba(37,99,235,.045),transparent 70%)} body.v2 .mvmap .mr.m1{width:96px;height:96px} body.v2 .mvmap .mr.m2{width:158px;height:158px} body.v2 .mvmap .mr.m3{width:216px;height:216px;border-style:dashed} body.v2 .mvmap .mc{position:relative;z-index:3;width:44px;height:44px;border-radius:50%; background:linear-gradient(150deg,var(--warm),var(--warm-d));display:grid;place-items:center;color:#fff; box-shadow:0 12px 26px -10px rgba(50,117,224,.65)} body.v2 .mvmap .mc svg{width:20px;height:20px} body.v2 .mvmap .mp{position:absolute;z-index:2;width:11px;height:11px;border-radius:50%;background:var(--blue); border:2px solid #fff;box-shadow:0 4px 10px -3px rgba(10,27,61,.5)} /* ---------- 21. Kennzahlen-Band ---------- */ body.v2 .statband{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-radius:22px;overflow:hidden; border:1px solid var(--line);background:#fff;box-shadow:0 20px 46px -28px rgba(10,27,61,.3)} body.v2 .statband.c3{grid-template-columns:repeat(3,1fr)} body.v2 .statband.c2{grid-template-columns:repeat(2,1fr)} body.v2 .statband .sb{padding:26px 24px;border-right:1px solid var(--line);position:relative;overflow:hidden} body.v2 .statband .sb:last-child{border-right:none} body.v2 .statband .sb b{display:block;font-family:var(--kc-kopf);font-size:clamp(28px,2.6vw,38px);font-weight:800; color:var(--navy);letter-spacing:-.035em;line-height:1} body.v2 .statband .sb b em{font-style:normal;color:var(--warm)} body.v2 .statband .sb span{display:block;font-size:13.4px;color:var(--slate);margin-top:8px;font-weight:600;line-height:1.4} body.v2 .statband .sb::after{content:"";position:absolute;right:-24px;top:-24px;width:90px;height:90px;border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.08),transparent 68%)} body.v2 .statband.dk{background:linear-gradient(150deg,#172443,#0B111F);border-color:rgba(255,255,255,.1)} body.v2 .statband.dk .sb{border-color:rgba(255,255,255,.11)} body.v2 .statband.dk .sb b{color:#fff} body.v2 .statband.dk .sb b em{color:var(--ice)} body.v2 .statband.dk .sb span{color:rgba(255,255,255,.62)} body.v2 .statband.dk .sb::after{background:radial-gradient(circle,rgba(103,232,249,.14),transparent 68%)} /* ---------- 22. Visueller Vergleich (statt Tabelle) ---------- */ body.v2 .vsg{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#fff; box-shadow:0 24px 56px -32px rgba(10,27,61,.32)} body.v2 .vsg .vhd{display:grid;grid-template-columns:1fr 1fr 1fr;background:linear-gradient(150deg,#172443,#0F182B)} body.v2 .vsg .vhd>div{padding:16px 20px;font-size:12.4px;font-weight:750;color:rgba(255,255,255,.72);letter-spacing:.02em; border-right:1px solid rgba(255,255,255,.1)} body.v2 .vsg .vhd>div:last-child{border-right:none} body.v2 .vsg .vhd>div.me{color:#fff;background:linear-gradient(150deg,rgba(37,99,235,.42),rgba(34,211,238,.2))} body.v2 .vsg .vr{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--line2)} body.v2 .vsg .vr:first-of-type{border-top:none} body.v2 .vsg .vr>div{padding:17px 20px;border-right:1px solid var(--line2);font-size:13.8px;color:var(--slate);line-height:1.6} body.v2 .vsg .vr>div:last-child{border-right:none} body.v2 .vsg .vr .vl{font-family:var(--kc-kopf);font-weight:700;color:var(--navy);font-size:14.2px;display:flex;align-items:flex-start;gap:10px} body.v2 .vsg .vr .vl .vi{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,#EAF2FF,#D9E9FE);color:var(--blue);margin-top:-2px} body.v2 .vsg .vr .vl .vi svg{width:15px;height:15px} body.v2 .vsg .vr .gen{background:#FAFBFD;color:var(--slate-l)} body.v2 .vsg .vr .me{background:linear-gradient(160deg,#F5F9FF,#EDF5FF);color:#25334A} body.v2 .vsg .vr .me b{color:var(--navy);font-weight:700} body.v2 .vsg .vr:hover .me{background:linear-gradient(160deg,#EFF6FF,#E4EFFE)} body.v2 .vsg .vtag{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;border-radius:20px;padding:3px 9px;margin-bottom:8px} body.v2 .vsg .vtag.no{background:#F1F5F9;color:#64748B} body.v2 .vsg .vtag.yes{background:#E8F0FE;color:var(--blue)} body.v2 .vsg .vtag.plus{background:linear-gradient(150deg,#E1ECFE,#D0E1FD);color:#1651B1} /* ---------- 23. Merkmal-Chips ---------- */ body.v2 .chips{display:flex;flex-wrap:wrap;gap:9px} body.v2 .chips .cp{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line); border-radius:100px;padding:8px 15px;font-size:13px;font-weight:600;color:var(--navy);transition:.3s; box-shadow:0 4px 12px -8px rgba(10,27,61,.3)} body.v2 .chips .cp:hover{border-color:#C7D9F6;transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(10,27,61,.35)} body.v2 .chips .cp svg{width:14px;height:14px;color:var(--blue)} body.v2 .chips .cp em{font-style:normal;width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none} body.v2 .chips .cp.o em{background:var(--warm)} body.v2 .chips .cp.g em{background:var(--green)} body.v2 .chips .cp.mut{color:var(--slate-l);background:#F8FAFD} body.v2 .chips .cp.mut em{background:#CBD5E1} body.v2 .sx.dark .chips .cp{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none} body.v2 .sx.dark .chips .cp:hover{border-color:rgba(103,232,249,.4);background:rgba(255,255,255,.11)} /* ---------- 24. Grafik-Beschriftung ---------- */ body.v2 .anno{position:absolute;background:#0F182B;color:#fff;font-size:11px;font-weight:650;border-radius:9px; padding:7px 11px;line-height:1.35;max-width:180px;z-index:5;box-shadow:0 14px 28px -14px rgba(10,27,61,.6)} body.v2 .anno::after{content:"";position:absolute;width:9px;height:9px;background:#0F182B;transform:rotate(45deg)} body.v2 .anno.dn::after{left:22px;bottom:-4px} body.v2 .anno.up::after{left:22px;top:-4px} body.v2 .anno.lf::after{left:-4px;top:14px} body.v2 .anno.rt::after{right:-4px;top:14px} body.v2 .anno.warm{background:var(--warm-d)} body.v2 .anno.warm::after{background:var(--warm-d)} /* ---------- 25. Feature-Kacheln (Übersicht) ---------- */ body.v2 .ftiles{display:grid;grid-template-columns:repeat(12,1fr);gap:16px} body.v2 .ftile{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:24px;background:#fff; border:1px solid var(--line);text-decoration:none;display:flex;flex-direction:column;isolation:isolate; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s} body.v2 .ftile::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s; background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.1),transparent 62%)} body.v2 .ftile:hover{transform:translateY(-6px);box-shadow:0 34px 70px -30px rgba(10,27,61,.34);border-color:#CBD9F5;text-decoration:none} body.v2 .ftile:hover::before{opacity:1} body.v2 .ftile h3{font-size:18.5px;font-weight:750;color:var(--navy);margin:0 0 9px;letter-spacing:-.022em;line-height:1.24} body.v2 .ftile p{font-size:14px;color:var(--slate);line-height:1.6;flex:1;margin:0} body.v2 .ftile .fi2{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:15px; background:linear-gradient(155deg,#EAF2FF,#D9E9FE);color:var(--blue);border:1px solid #D3E3FB;transition:.35s} body.v2 .ftile .fi2 svg{width:23px;height:23px} body.v2 .ftile:hover .fi2{background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;border-color:transparent; transform:scale(1.07);box-shadow:0 12px 24px -10px rgba(37,99,235,.55)} body.v2 .ftile .plink2{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13.6px;font-weight:700;color:var(--blue);transition:gap .25s} body.v2 .ftile:hover .plink2{gap:11px} body.v2 .ftile .deco{position:absolute;right:-30px;top:-30px;width:170px;height:170px;opacity:.45;transition:.6s;pointer-events:none;z-index:-1} body.v2 .ftile:hover .deco{opacity:.85;transform:scale(1.1) rotate(6deg)} body.v2 .ftile .deco.dots{background-image:radial-gradient(rgba(10,27,61,.14) 1.4px,transparent 1.4px);background-size:13px 13px} body.v2 .ftile.dark{background:linear-gradient(160deg,#141F39,#0D1424);border-color:rgba(255,255,255,.09)} body.v2 .ftile.dark h3{color:#fff} body.v2 .ftile.dark p{color:rgba(255,255,255,.66)} body.v2 .ftile.dark .plink2{color:var(--ice)} body.v2 .ftile.dark .fi2{background:rgba(103,232,249,.1);color:var(--ice);border-color:rgba(103,232,249,.2)} body.v2 .ftile.dark:hover .fi2{background:linear-gradient(140deg,var(--cyan),var(--blue));color:#070C15} body.v2 .ftile.dark::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(103,232,249,.16),transparent 62%)} body.v2 .ftile.dark:hover{border-color:rgba(103,232,249,.34)} body.v2 .ftile.dark .deco.dots{background-image:radial-gradient(rgba(103,232,249,.28) 1.4px,transparent 1.4px)} body.v2 .ftile.warm{background:linear-gradient(155deg,#5795F8,#3275E0);border-color:rgba(255,255,255,.2)} body.v2 .ftile.warm h3{color:#fff} body.v2 .ftile.warm p{color:rgba(255,255,255,.9)} body.v2 .ftile.warm .plink2{color:#fff} body.v2 .ftile.warm .fi2{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.3)} body.v2 .ftile.warm:hover .fi2{background:#fff;color:var(--warm-d)} body.v2 .ftile.warm::before{background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.22),transparent 60%)} body.v2 .ftile.warm .deco.dots{background-image:radial-gradient(rgba(255,255,255,.4) 1.4px,transparent 1.4px)} body.v2 .ftile.tint{background:linear-gradient(158deg,#F3F8FF,#E7F1FF);border-color:#D8E6FA} body.v2 .ftile.ice{background:linear-gradient(158deg,#EFFBFF,#DFF6FC);border-color:#C6EDF6} /* ---------- 26. Hero mit Grafik (Unterseiten) ---------- */ body.v2 .page-hero.ph2 .phg{display:grid;grid-template-columns:1.04fr .96fr;gap:48px;align-items:center} body.v2 .page-hero.ph2 h1{max-width:none} body.v2 .page-hero.ph2 p.lead{max-width:none} body.v2 .page-hero .hstats{display:flex;flex-wrap:wrap;gap:0;margin-top:30px;border-top:1px solid rgba(10,27,61,.1)} body.v2 .page-hero .hstats .hs{padding:16px 26px 0 0;margin-right:26px;border-right:1px solid rgba(10,27,61,.1)} body.v2 .page-hero .hstats .hs:last-child{border-right:none;margin-right:0;padding-right:0} body.v2 .page-hero .hstats .hs b{display:block;font-family:var(--kc-kopf);font-size:25px;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1} body.v2 .page-hero .hstats .hs b em{font-style:normal;color:var(--warm)} body.v2 .page-hero .hstats .hs span{display:block;font-size:12.4px;color:var(--slate);margin-top:5px;font-weight:600} body.v2 .page-hero .hnote{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:13px;color:var(--slate); background:rgba(255,255,255,.7);border:1px solid rgba(10,27,61,.08);border-radius:100px;padding:8px 16px;backdrop-filter:blur(4px)} body.v2 .page-hero .hnote svg{width:15px;height:15px;color:var(--green);flex:none} /* ---------- 27. Inhaltsverzeichnis als Kacheln ---------- */ body.v2 .tocg{display:grid;grid-template-columns:repeat(2,1fr);gap:11px} body.v2 .tocg a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:13px; padding:13px 16px;font-size:14px;font-weight:650;color:var(--navy);text-decoration:none;transition:.3s;line-height:1.35} body.v2 .tocg a:hover{border-color:#C7D9F6;transform:translateX(3px);box-shadow:0 12px 26px -18px rgba(10,27,61,.35);text-decoration:none} body.v2 .tocg a i{font-style:normal;font-family:var(--kc-kopf);font-size:11.5px;font-weight:800;color:var(--blue); background:#E8F0FE;border-radius:8px;padding:4px 8px;flex:none} /* ---------- 28. Responsive ---------- */ @media(max-width:1024px){ body.v2 .sp6,body.v2 .sp7,body.v2 .sp9{grid-column:span 6} body.v2 .sp2{grid-column:span 3} body.v2 .sp12{grid-column:span 6} body.v2 .bento.g12,body.v2 .ftiles{grid-template-columns:repeat(6,1fr)} body.v2 .headrow{grid-template-columns:1fr;gap:34px;align-items:start} body.v2 .split,body.v2 .split.w6,body.v2 .split.w4{grid-template-columns:1fr;gap:34px} body.v2 .split.rev>.vis{order:0} body.v2 .split+.split{margin-top:56px} body.v2 .page-hero.ph2 .phg{grid-template-columns:1fr;gap:38px} body.v2 .statband{grid-template-columns:repeat(2,1fr)} body.v2 .statband .sb:nth-child(2n){border-right:none} body.v2 .statband .sb:nth-child(-n+2){border-bottom:1px solid var(--line)} body.v2 .statband.dk .sb:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.11)} body.v2 .statband.c3{grid-template-columns:1fr} body.v2 .statband.c3 .sb{border-right:none;border-bottom:1px solid var(--line)} body.v2 .statband.c3 .sb:last-child{border-bottom:none} } @media(max-width:700px){ body.v2 .sx{padding:64px 0} body.v2 .sx.tight{padding:52px 0} body.v2 .sp2,body.v2 .sp6,body.v2 .sp7,body.v2 .sp9,body.v2 .sp12{grid-column:span 1} body.v2 .bento.g12,body.v2 .ftiles{grid-template-columns:1fr;gap:14px} body.v2 .vis{padding:20px;border-radius:20px} body.v2 .vsg .vhd,body.v2 .vsg .vr{grid-template-columns:1fr} body.v2 .vsg .vhd>div{border-right:none;padding:11px 17px} body.v2 .vsg .vhd>div:not(.me){display:none} body.v2 .vsg .vr>div{border-right:none;padding:14px 17px} body.v2 .vsg .vr .gen::before{content:attr(data-l);display:block;font-size:10px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:#94A3B8;margin-bottom:6px;line-height:1.4} body.v2 .vsg .vr .me::before{content:attr(data-l);display:block;font-size:10px;font-weight:800;letter-spacing:.08em; text-transform:uppercase;color:var(--blue);margin-bottom:6px;line-height:1.4} body.v2 .mvhub{min-height:0;padding:0;display:flex;flex-direction:column;gap:9px} body.v2 .mvhub .rr{display:none} body.v2 .mvhub .core{position:static;transform:none;width:100%;height:auto;border-radius:16px;padding:16px 14px} body.v2 .mvhub .sat{position:static!important;transform:none;justify-content:flex-start;width:100%;left:auto!important;top:auto!important} body.v2 .mvflow{flex-direction:column;gap:0} body.v2 .mvflow .fa{flex:0 0 22px;transform:rotate(90deg)} body.v2 .mvflow .fn{width:100%} body.v2 .mvtl .tls{flex-direction:column;gap:14px;text-align:left} body.v2 .mvtl::before{left:6px;right:auto;top:34px;bottom:14px;width:2px;height:auto; background:linear-gradient(180deg,var(--sky-l),var(--cyan),#CEE0FD)} body.v2 .mvtl .tp{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center} body.v2 .mvtl .tp::before{margin:0} body.v2 .mvtl .tp b,body.v2 .mvtl .tp small{grid-column:2} body.v2 .mvtl .tp small{margin-top:0} body.v2 .mvvs{grid-template-columns:1fr;gap:10px} body.v2 .mvvs .vs{margin:0 auto} body.v2 .statband,body.v2 .statband.c3,body.v2 .statband.c2{grid-template-columns:1fr} body.v2 .statband .sb{border-right:none;border-bottom:1px solid var(--line)} body.v2 .statband .sb:last-child{border-bottom:none} body.v2 .statband.dk .sb{border-bottom-color:rgba(255,255,255,.11)} body.v2 .tocg{grid-template-columns:1fr} body.v2 .page-hero .hstats .hs{padding-right:18px;margin-right:18px} body.v2 .page-hero .hstats .hs b{font-size:21px} body.v2 .anno{position:static;display:block;margin-top:12px;max-width:none} body.v2 .anno::after{display:none} body.v2 .mvcol{height:130px} body.v2 .mvstack{height:44px} body.v2 .mvstack .sg{font-size:11px} } @media(prefers-reduced-motion:reduce){ body.v2 .reveal.in .mvb .tr i,body.v2 .reveal.in .mvc u{transition:none} } /* ---------- 29. v3-Ergänzungen: Akzentwort, dunkle Kacheln, Feinschliff ---------- */ body.v2 .shead2 h2 em,body.v2 .page-hero h1 em,body.v2 .split .txt>h3 em{font-style:normal; background:linear-gradient(112deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent} body.v2 .sx.dark .shead2 h2 em,body.v2 .vis.dark h3 em{background:none;-webkit-text-fill-color:currentColor;color:var(--ice)} body.v2 .ftile .viz{margin-top:18px} body.v2 .ftile.dark .mvrows .rw{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff} body.v2 .ftile.dark .mvrows .rw .ri{background:rgba(255,255,255,.1);color:var(--ice)} body.v2 .ftile.dark .mvrows .rw em{color:rgba(255,255,255,.45)} body.v2 .ftile.dark .mvb .lb{color:rgba(255,255,255,.6)} body.v2 .ftile.dark .mvb .lb b{color:#fff} body.v2 .ftile.dark .mvb .tr{background:rgba(255,255,255,.1)} body.v2 .ftile.dark .mvflow .fn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);box-shadow:none} body.v2 .ftile.dark .mvflow .fn b{color:#fff} body.v2 .ftile.dark .mvflow .fn small{color:rgba(255,255,255,.5)} body.v2 .ftile.dark .mvflow .fn .fdot{background:rgba(103,232,249,.13);color:var(--ice)} body.v2 .ftile.dark .mvflow .fa{color:rgba(103,232,249,.5)} body.v2 .ftile.dark .mvcal .cd{background:rgba(255,255,255,.08);color:rgba(255,255,255,.45)} body.v2 .ftile.warm .mvrows .rw{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.26);color:#fff} body.v2 .ftile.warm .mvrows .rw .ri{background:rgba(255,255,255,.22);color:#fff} body.v2 .ftile.warm .mvrows .rw>span.ok{background:rgba(255,255,255,.9);color:#1651B1} body.v2 .ftile.warm .mvrows .rw em{color:rgba(255,255,255,.7)} body.v2 .page-hero.ph2 p.lead{font-size:16.4px} body.v2 .page-hero.ph2 .actions{margin-top:24px} body.v2 .sx .shead2{margin-bottom:40px} body.v2 .sx .shead2 h2{font-size:clamp(28px,2.75vw,41px)} body.v2 .mini-lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--slate-l);margin-bottom:10px} body.v2 .ftile.dark .mini-lab,body.v2 .bc.dark .mini-lab{color:rgba(255,255,255,.42)} body.v2 .ftile.warm .mini-lab,body.v2 .bc.warm .mini-lab{color:rgba(255,255,255,.72)} /* ---------- 30. Negativ-Kachel („nicht enthalten“) ---------- */ body.v2 .nooff{display:flex;align-items:center;gap:10px;margin-bottom:15px} body.v2 .nooff .noico{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none; background:linear-gradient(155deg,#F1F5F9,#E2E8F0);color:#64748B;border:1px solid #E2E8F0} body.v2 .nooff .noico svg{width:15px;height:15px} body.v2 .nooff .nolab{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#94A3B8} body.v2 .sx.paper .bc{background:linear-gradient(158deg,#fff,#FDFBF6);border-color:#EDE6D8} body.v2 .sx.paper .bc:hover{border-color:#E0D5BF;box-shadow:0 34px 70px -30px rgba(120,100,60,.3)} body.v2 .sx.paper .bc::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(217,119,6,.07),transparent 62%)} /* ---------- 31. Korrekturen v3 ---------- */ body.v2 .shead h2 em,body.v2 .shead2 h2 em{font-style:normal} body.v2 .shead h2 em{background:linear-gradient(112deg,var(--blue),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent} body.v2 .shead.lt h2 em,body.v2 .sx.dark .shead h2 em{background:none;-webkit-text-fill-color:currentColor;color:var(--ice)} body.v2 .vsg .vtx{display:block} body.v2 .vsg .vtag{margin-bottom:7px} body.v2 .sx.paper{background:linear-gradient(180deg,#FFFCF8 0%,#FFF 62%)} body.v2 .sx.paper .tex.hatch{background:repeating-linear-gradient(135deg,rgba(146,114,42,.05) 0 1.5px,transparent 1.5px 15px); -webkit-mask-image:radial-gradient(ellipse 90% 76% at 50% 6%,#000 4%,transparent 76%); mask-image:radial-gradient(ellipse 90% 76% at 50% 6%,#000 4%,transparent 76%)} body.v2 .mvflow.v{flex-direction:column;gap:0} body.v2 .mvflow.v .fn{width:100%} body.v2 .mvflow.v .fa{flex:0 0 20px;transform:rotate(90deg)} body.v2 .mvcol .mvc u{border-radius:8px 8px 4px 4px} /* ---------- 32. Helle Bausteine in dunklen Sektionen ---------- */ body.v2 .sx.dark .shead h2,body.v2 .shead.lt h2{color:#fff} body.v2 .sx.dark .shead p,body.v2 .shead.lt p{color:rgba(255,255,255,.7)} body.v2 .sx.dark .shead2 h2{color:#fff} body.v2 .sx.dark .icklist .ick b,body.v2 .sx.dark .ulist b{color:#fff} body.v2 .sx.dark .icklist .ick span,body.v2 .sx.dark .ulist li{color:rgba(255,255,255,.7)} body.v2 .sx.dark .fcheck{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} body.v2 .sx.dark .fcheck b{color:#fff} body.v2 .sx.dark .fcheck span{color:rgba(255,255,255,.66)} body.v2 .sx.dark a{color:var(--ice)} body.v2 .sx.dark .btn-primary{color:#fff} body.v2 .bc .kico.neg{background:linear-gradient(155deg,#F1F5F9,#E2E8F0);color:#64748B;border-color:#E2E8F0} body.v2 .bc:hover .kico.neg{background:linear-gradient(150deg,#94A3B8,#64748B);color:#fff;box-shadow:0 12px 24px -10px rgba(100,116,139,.5)} body.v2 .bc.dark .kico.neg{background:rgba(255,255,255,.09);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.14)} body.v2 .bc.dark:hover .kico.neg{background:rgba(255,255,255,.2);color:#fff} /* Abschnittskoepfe der alten Bauart bekommen die neue Handschrift */ body.v2 .sx .shead{max-width:800px;margin-bottom:42px} body.v2 .sx .shead h2{font-size:clamp(28px,2.75vw,41px);letter-spacing:-.03em;line-height:1.1} body.v2 .sx .shead p{font-size:17px;line-height:1.65} body.v2 .prosa{max-width:820px} body.v2 .prosa+.bento{margin-top:34px} body.v2 .usp+.bento{margin-top:44px} /* ---------- 33. „Mehr zum Thema“ als Kachelraster + Datenfluss-Block ---------- */ body.v2 .morelinks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:26px 28px 28px; background:linear-gradient(160deg,#FBFDFF,#F4F9FF);border-color:rgba(10,27,61,.08)} body.v2 .morelinks>b{grid-column:1/-1;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--slate-l);margin-bottom:4px} body.v2 .morelinks a{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line); border-radius:12px;padding:12px 15px;font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35; box-shadow:0 3px 10px -7px rgba(10,27,61,.3);transition:.28s} body.v2 .morelinks a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none;transition:.28s} body.v2 .morelinks a:hover{border-color:#C7D9F6;transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(10,27,61,.4);color:var(--blue)} body.v2 .morelinks a:hover::before{background:var(--warm);box-shadow:0 0 0 4px rgba(69,137,247,.16)} body.v2 .flownext{position:relative;overflow:hidden} body.v2 .flownext::after{content:"";position:absolute;right:-50px;top:-50px;width:210px;height:210px;border-radius:50%; background:radial-gradient(circle,rgba(37,99,235,.1),transparent 68%);pointer-events:none} body.v2 .flownext .chainmini{background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 15px; display:inline-block;margin-top:14px;font-size:11.5px;letter-spacing:.02em} @media(max-width:700px){body.v2 .morelinks{grid-template-columns:1fr}} /* ---------- 34. Bestehende Karten auf das neue Niveau ---------- */ body.v2 .intcard{border-radius:22px;padding:24px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s; position:relative;overflow:hidden;isolation:isolate} body.v2 .intcard::after{content:"";position:absolute;right:-34px;top:-34px;width:150px;height:150px;z-index:-1;opacity:.4;transition:.5s; background-image:radial-gradient(rgba(10,27,61,.13) 1.3px,transparent 1.3px);background-size:13px 13px} body.v2 .intcard:hover{transform:translateY(-6px);box-shadow:0 32px 66px -30px rgba(10,27,61,.32);border-color:#CBD9F5} body.v2 .intcard:hover::after{opacity:.85;transform:scale(1.1) rotate(6deg)} body.v2 .modcard{border-radius:24px;padding:28px;position:relative;overflow:hidden;isolation:isolate; transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s} body.v2 .modcard::after{content:"";position:absolute;right:-34px;top:-34px;width:160px;height:160px;z-index:-1;opacity:.4;transition:.5s; background-image:radial-gradient(rgba(10,27,61,.12) 1.3px,transparent 1.3px);background-size:13px 13px} body.v2 .modcard:hover{transform:translateY(-6px);box-shadow:0 32px 66px -30px rgba(10,27,61,.32);border-color:#CBD9F5} body.v2 .modcard:hover::after{opacity:.85;transform:scale(1.1) rotate(6deg)} body.v2 .modcard .mic{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:0; background:linear-gradient(155deg,#EAF2FF,#D9E9FE);color:var(--blue);border:1px solid #D3E3FB;margin-bottom:16px;transition:.35s} body.v2 .modcard .mic svg{width:24px;height:24px} body.v2 .modcard:hover .mic{background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;border-color:transparent; transform:scale(1.07);box-shadow:0 12px 24px -10px rgba(37,99,235,.55)} body.v2 .bcard{border-radius:22px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s} body.v2 .bcard:hover{transform:translateY(-6px);box-shadow:0 32px 66px -30px rgba(10,27,61,.32);border-color:#CBD9F5} body.v2 .filterbar .fpill{border-radius:100px;transition:.28s} body.v2 .filterbar .fpill:hover{border-color:#C7D9F6;transform:translateY(-1px)} body.v2 .bc p+p{margin-top:11px} body.v2 .bc.mut{background:linear-gradient(158deg,#FAFBFD,#F3F6FA);border-color:#E6EBF2} body.v2 .bc.mut h3{color:#475569} body.v2 .bc.mut p{color:#7A8698} body.v2 .bc.mut .kico{background:linear-gradient(155deg,#F1F5F9,#E4EAF1);color:#8896AA;border-color:#E4EAF1} body.v2 .bc.mut:hover .kico{background:linear-gradient(150deg,#94A3B8,#64748B);color:#fff;box-shadow:0 12px 24px -10px rgba(100,116,139,.45)} body.v2 .bc.mut::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(100,116,139,.08),transparent 62%)} /* ---------- 35. Mikro-Matrix (Anbietervergleich auf einen Blick) ---------- */ body.v2 .mvmx{display:grid;grid-template-columns:1fr repeat(var(--n,8),15px);gap:9px 7px;align-items:center} body.v2 .mvmx .mxl{font-size:11.4px;font-weight:600;color:var(--slate);line-height:1.3;text-align:right;padding-right:5px} body.v2 .mvmx i{width:15px;height:15px;border-radius:50%;display:block;position:relative} body.v2 .mvmx i.o{border:1.6px solid rgba(10,27,61,.2);background:transparent} body.v2 .mvmx i.h{border:1.6px solid var(--blue);background:linear-gradient(90deg,var(--blue) 50%,transparent 50%)} body.v2 .mvmx i.f{background:linear-gradient(150deg,var(--blue),#1D4ED8);box-shadow:0 3px 8px -3px rgba(37,99,235,.6)} body.v2 .mvmx .me i.f{background:linear-gradient(150deg,#639CF8,var(--warm-d));box-shadow:0 3px 8px -3px rgba(50,117,224,.6)} body.v2 .mvmx .me i.h{border-color:var(--warm);background:linear-gradient(90deg,var(--warm) 50%,transparent 50%)} body.v2 .mvmx .me{position:relative} body.v2 .mvmx .me::before{content:"";position:absolute;left:-5px;right:-5px;top:-6px;bottom:-6px;border-radius:8px; background:rgba(69,137,247,.1);border:1px solid rgba(69,137,247,.22);z-index:-1} body.v2 .vis.dark .mvmx .mxl{color:rgba(255,255,255,.66)} body.v2 .vis.dark .mvmx i.o{border-color:rgba(255,255,255,.24)} body.v2 .vis.dark .mvmx i.h{border-color:var(--ice);background:linear-gradient(90deg,var(--ice) 50%,transparent 50%)} body.v2 .vis.dark .mvmx i.f{background:linear-gradient(150deg,var(--ice),var(--cyan));box-shadow:0 3px 8px -3px rgba(103,232,249,.5)} body.v2 .mxleg{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:11.4px;color:var(--slate);font-weight:600} body.v2 .mxleg span{display:inline-flex;align-items:center;gap:7px} body.v2 .mxleg i{width:13px;height:13px;border-radius:50%;display:block} body.v2 .vis.dark .mxleg{color:rgba(255,255,255,.6)} @media(max-width:700px){body.v2 .mvmx{grid-template-columns:1fr repeat(var(--n,8),12px);gap:8px 5px} body.v2 .mvmx i{width:12px;height:12px} body.v2 .mvmx .mxl{font-size:10.4px}} body.v2 .mvmx .me{position:relative;z-index:1} body.v2 .mvmx .me::before{z-index:0} body.v2 .mvmx .me i{position:relative;z-index:2} body.v2 .vis.dark .mvmx .me::before{background:rgba(69,137,247,.14);border-color:rgba(69,137,247,.3)} body.v2 .vis.dark .mvmx .me i.f{background:linear-gradient(150deg,#639CF8,var(--warm-d));box-shadow:0 3px 8px -3px rgba(50,117,224,.6)} body.v2 .vis.dark .mvmx .me i.h{border-color:var(--warm);background:linear-gradient(90deg,var(--warm) 50%,transparent 50%)} /* ---------- 36. Listen in Kacheln ---------- */ body.v2 .bc ul.klist,body.v2 .bc ol.klist{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px} body.v2 .bc ul.klist li,body.v2 .bc ol.klist li{position:relative;padding-left:20px;font-size:13.8px;color:var(--slate);line-height:1.55} body.v2 .bc ul.klist li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%; background:linear-gradient(150deg,var(--blue),var(--cyan))} body.v2 .bc ol.klist{counter-reset:kl} body.v2 .bc ol.klist li{counter-increment:kl} body.v2 .bc ol.klist li::before{content:counter(kl) ".";position:absolute;left:0;top:0;font-size:12px;font-weight:800;color:var(--blue)} body.v2 .bc.dark ul.klist li,body.v2 .bc.dark ol.klist li{color:rgba(255,255,255,.68)} body.v2 .bc.dark ul.klist li::before{background:var(--ice)} body.v2 .bc.dark ol.klist li::before{color:var(--ice)} body.v2 .bc.warm ul.klist li{color:rgba(255,255,255,.9)} body.v2 .bc.warm ul.klist li::before{background:#fff} body.v2 .bc.mut ul.klist li{color:#7A8698} body.v2 .bc.mut ul.klist li::before{background:#94A3B8} body.v2 .bc>p+ul.klist,body.v2 .bc>p+ol.klist{margin-top:10px} /* ========================================================================= 37. Blog-Artikel: Kopf mit Bild, Kurzfassung, Inhaltsverzeichnis, Rhythmus ========================================================================= */ body.v2 .page-hero .article.wide{max-width:1200px} body.v2 .ahgrid{display:grid;grid-template-columns:1.06fr .94fr;gap:46px;align-items:center} body.v2 .ahgrid .ahero{margin-bottom:0;height:auto;aspect-ratio:16/10.4} body.v2 .page-hero .article h1{font-size:clamp(30px,3vw,43px);letter-spacing:-.032em;line-height:1.1} body.v2 .page-hero .article .ameta{border-bottom:none;padding-bottom:0;margin-bottom:0} body.v2 .page-hero .article .acat{margin-bottom:0} /* Kurzfassung */ body.v2 .artwrap>.tldr{max-width:760px;margin-left:auto;margin-right:auto} body.v2 .tldr{position:relative;overflow:hidden;border-radius:22px;padding:26px 30px 26px 30px;margin:0 0 30px; background:linear-gradient(158deg,#172443 0%,#10182C 52%,#0B111F 100%);color:rgba(255,255,255,.82); box-shadow:0 34px 74px -38px rgba(7,19,44,.7),0 0 0 1px rgba(255,255,255,.06) inset;font-size:16px;line-height:1.68} body.v2 .tldr::after{content:"";position:absolute;right:-56px;top:-56px;width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,rgba(103,232,249,.18),transparent 68%);pointer-events:none} body.v2 .tldr .tlab{display:inline-flex;align-items:center;gap:9px;font-size:10.8px;font-weight:800;letter-spacing:.13em; text-transform:uppercase;color:var(--ice);margin-bottom:12px} body.v2 .tldr .tlab svg{width:15px;height:15px} body.v2 .tldr p{margin:0;font-size:16px;color:rgba(255,255,255,.84);line-height:1.68} body.v2 .tldr b{color:#fff} body.v2 .tldr a{color:var(--ice)} /* Inhaltsverzeichnis */ body.v2 .atoc{border:1px solid var(--line);border-radius:20px;padding:24px 26px;margin:0 0 36px; background:linear-gradient(160deg,#FBFDFF,#F3F8FF);box-shadow:0 2px 10px -4px rgba(10,27,61,.1)} body.v2 .atoc>b{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--slate-l);margin-bottom:14px} body.v2 .atoc .tocg{grid-template-columns:repeat(2,1fr)} body.v2 .atoc .tocg a{font-size:13.4px;padding:11px 14px} @media(max-width:820px){body.v2 .atoc .tocg{grid-template-columns:1fr}} /* H2-Rhythmus im Artikel */ body.v2 .article>h2{position:relative;padding-top:26px;margin-top:52px} body.v2 .article>h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;border-radius:3px; background:linear-gradient(90deg,var(--blue),var(--cyan))} body.v2 .article>h2:first-of-type{margin-top:34px} body.v2 .article .abox{position:relative;padding-left:58px} body.v2 .article .abox::after{content:"";position:absolute;left:22px;top:22px;width:22px;height:22px;border-radius:7px; background:linear-gradient(150deg,var(--blue),var(--cyan)); -webkit-mask:url("data:image/svg+xml;utf8,") center/20px no-repeat; mask:url("data:image/svg+xml;utf8,") center/20px no-repeat} body.v2 .article .bento{margin:26px 0 30px} body.v2 .article .bento .bc h3{font-size:18px} body.v2 .article .bento .bc p{font-size:14.4px} body.v2 .article-cta h3{font-size:24px;letter-spacing:-.02em} @media(max-width:1024px){ body.v2 .ahgrid{grid-template-columns:1fr;gap:30px} body.v2 .ahgrid .ahero{order:-1} } @media(max-width:700px){ body.v2 .tldr{padding:22px;border-radius:18px;font-size:15.2px} body.v2 .tldr p{font-size:15.2px} body.v2 .atoc{padding:20px} body.v2 .article>h2{padding-top:22px;margin-top:40px} } /* ---------- 38. Definitionsliste & Abhakliste ---------- */ body.v2 .dlist{display:flex;flex-direction:column;gap:10px;margin:22px 0 26px} body.v2 .dli{display:flex;gap:14px;align-items:flex-start;background:linear-gradient(160deg,#FBFDFF,#F4F9FF); border:1px solid var(--line);border-radius:15px;padding:16px 18px;transition:.32s} body.v2 .dli:hover{border-color:#C7D9F6;transform:translateX(3px);box-shadow:0 14px 30px -20px rgba(10,27,61,.35)} body.v2 .dli .di{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center; background:linear-gradient(155deg,#EAF2FF,#D9E9FE);color:var(--blue);border:1px solid #D3E3FB;transition:.32s} body.v2 .dli .di svg{width:17px;height:17px} body.v2 .dli:hover .di{background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;border-color:transparent} body.v2 .dli b{display:block;font-family:var(--kc-kopf);font-size:15px;font-weight:700;color:var(--navy); margin-bottom:4px;line-height:1.32;letter-spacing:-.012em} body.v2 .dli>div>span{display:block;font-size:14.6px;color:var(--slate);line-height:1.62} body.v2 .sx.dark .dli{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} body.v2 .sx.dark .dli b{color:#fff} body.v2 .sx.dark .dli>div>span{color:rgba(255,255,255,.68)} body.v2 .sx.dark .dli .di{background:rgba(103,232,249,.11);color:var(--ice);border-color:rgba(103,232,249,.2)} body.v2 .cklist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0 26px} body.v2 .cki{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line); border-radius:13px;padding:14px 16px;font-size:14.4px;color:#2A3342;line-height:1.55;transition:.3s} body.v2 .cki:hover{border-color:#C7D9F6;box-shadow:0 14px 30px -20px rgba(10,27,61,.35)} body.v2 .cki .ckb{width:19px;height:19px;border-radius:6px;flex:none;margin-top:1px;border:1.8px solid #C3D3EC; background:#fff;position:relative;transition:.3s} body.v2 .cki:hover .ckb{border-color:var(--blue)} body.v2 .cki .ckb::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:10px;border:solid #fff; border-width:0 2.2px 2.2px 0;transform:rotate(42deg);opacity:0;transition:.3s} body.v2 .cki b{color:var(--navy);font-weight:700} @media(max-width:820px){body.v2 .cklist{grid-template-columns:1fr}} /* ---------- 39. Artikel: Inhaltsverzeichnis (Karte bzw. mitlaufende Randspalte) ---------- */ body.v2 .arail{border:1px solid var(--line);border-radius:20px;padding:22px 24px;margin:0 auto 34px;max-width:760px; background:linear-gradient(160deg,#FBFDFF,#F3F8FF);box-shadow:0 2px 10px -4px rgba(10,27,61,.1)} body.v2 .arail>b{display:block;font-size:10.8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--slate-l);margin-bottom:14px} body.v2 .arail ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px;counter-reset:tc} body.v2 .arail li{counter-increment:tc;margin:0} body.v2 .arail a{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line);border-radius:12px; padding:11px 14px;font-size:13.2px;font-weight:650;color:var(--navy);text-decoration:none;line-height:1.35;transition:.28s} body.v2 .arail a::before{content:counter(tc,decimal-leading-zero);font-family:var(--kc-kopf);font-size:11px;font-weight:800; color:var(--blue);background:#E8F0FE;border-radius:8px;padding:4px 8px;flex:none} body.v2 .arail a:hover{border-color:#C7D9F6;transform:translateX(3px);box-shadow:0 12px 26px -18px rgba(10,27,61,.35);text-decoration:none} @media(max-width:820px){body.v2 .arail ol{grid-template-columns:1fr}} @media(min-width:1320px){ body.v2 .artwrap{display:grid;grid-template-columns:238px minmax(0,760px);gap:0 46px;justify-content:center;align-items:start} body.v2 .artwrap>.article{margin:0} body.v2 .artwrap>.tldr{grid-column:1/-1;max-width:1044px;margin-bottom:34px} body.v2 .arail{position:sticky;top:108px;align-self:start;max-height:calc(100vh - 150px);overflow:auto; background:none;border:none;box-shadow:none;padding:2px 8px 2px 4px;margin:0;max-width:none} body.v2 .arail ol{display:block;border-left:2px solid var(--line)} body.v2 .arail a{display:block;padding:8px 0 8px 15px;margin-left:-2px;border:none;border-left:2px solid transparent; background:none;border-radius:0;font-size:12.8px;color:var(--slate);font-weight:600;box-shadow:none} body.v2 .arail a::before{display:none} body.v2 .arail a:hover{color:var(--navy);border-left-color:#C7D9F6;transform:none;box-shadow:none} body.v2 .arail a.akt{color:var(--blue);border-left-color:var(--blue);background:linear-gradient(90deg,rgba(37,99,235,.07),transparent)} body.v2 .arail::-webkit-scrollbar{width:5px} body.v2 .arail::-webkit-scrollbar-thumb{background:rgba(10,27,61,.16);border-radius:6px} } body.v2 .intcard,body.v2 .modcard{position:relative;isolation:isolate} body.v2 .intcard::before,body.v2 .modcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s; background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.09),transparent 62%)} body.v2 .intcard:hover::before,body.v2 .modcard:hover::before{opacity:1} /* Fix: Buttons in Info-Spalten erbten die Linkfarbe (Text war unsichtbar) */ body.v2 a.btn.btn-blue,body.v2 a.btn.btn-primary{color:#fff} body.v2 a.btn.btn-out,body.v2 a.btn.btn-ghost{font-weight:700} /* ---------- 40. Farbrhythmus der Kachel-Symbole (blau · cyan · warm · grün) ---------- */ body.v2 .bento .bc:nth-child(4n+2) .kico,body.v2 .dlist .dli:nth-child(4n+2) .di{ background:linear-gradient(155deg,#EFFBFF,#D8F3FB);color:#0E7490;border-color:#C6EDF6} body.v2 .bento .bc:nth-child(4n+2):hover .kico,body.v2 .dlist .dli:nth-child(4n+2):hover .di{ background:linear-gradient(140deg,#22D3EE,#0891B2);color:#fff;border-color:transparent; box-shadow:0 12px 24px -10px rgba(8,145,178,.5)} body.v2 .bento .bc:nth-child(4n+3) .kico,body.v2 .dlist .dli:nth-child(4n+3) .di{ background:linear-gradient(155deg,#EFF5FE,#DAE7FD);color:#1353BB;border-color:#CDDEF9} body.v2 .bento .bc:nth-child(4n+3):hover .kico,body.v2 .dlist .dli:nth-child(4n+3):hover .di{ background:linear-gradient(140deg,#639CF8,#3275E0);color:#fff;border-color:transparent; box-shadow:0 12px 24px -10px rgba(50,117,224,.5)} body.v2 .bento .bc:nth-child(4n+4) .kico,body.v2 .dlist .dli:nth-child(4n+4) .di{ background:linear-gradient(155deg,#EDFBF3,#DCF5E7);color:#15803D;border-color:#C7EDD8} body.v2 .bento .bc:nth-child(4n+4):hover .kico,body.v2 .dlist .dli:nth-child(4n+4):hover .di{ background:linear-gradient(140deg,#34D399,#15803D);color:#fff;border-color:transparent; box-shadow:0 12px 24px -10px rgba(21,128,61,.45)} /* Negativ-Symbole bleiben immer neutral */ body.v2 .bento .bc .kico.neg{background:linear-gradient(155deg,#F1F5F9,#E2E8F0)!important;color:#64748B!important;border-color:#E2E8F0!important} body.v2 .bento .bc:hover .kico.neg{background:linear-gradient(150deg,#94A3B8,#64748B)!important;color:#fff!important} /* In dunklen Kacheln bleibt es beim Eisblau */ body.v2 .bento .bc.dark .kico,body.v2 .bento .bc.warm .kico{background:rgba(255,255,255,.1);color:var(--ice);border-color:rgba(255,255,255,.16)} body.v2 .bento .bc.warm .kico{color:#fff;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3)} /* Artikel ohne Kurzfassungs-Karte: erster Absatz wird zum Lead */ body.v2 .artwrap>.arail:first-child+.article>p:first-of-type{font-size:18.4px;line-height:1.72;color:#22304A} /* ---------- 41. Abschluss-Weißraum: der letzte Block braucht Luft vor dem dunklen CTA ---------- */ body.v2 .sx.snug{padding:66px 0 92px} body.v2 .flownext+.morelinks{margin-top:30px} body.v2 .article .morelinks{margin-bottom:14px} @media(max-width:700px){ body.v2 .sx.snug{padding:46px 0 64px} } /* Kompaktes Fünfer-Raster für Bereichs-Kacheln */ body.v2 .ftiles.g10{grid-template-columns:repeat(5,1fr)} body.v2 .ftiles.g10 .ftile{grid-column:span 1;padding:20px} body.v2 .ftiles.g10 .ftile h3{font-size:16.4px;margin-bottom:7px} body.v2 .ftiles.g10 .ftile p{font-size:13.2px;line-height:1.5} body.v2 .ftiles.g10 .ftile .fi2{width:40px;height:40px;border-radius:12px;margin-bottom:12px} body.v2 .ftiles.g10 .ftile .fi2 svg{width:20px;height:20px} body.v2 .ftiles.g10 .ftile .plink2{margin-top:12px;font-size:12.8px} @media(max-width:1024px){body.v2 .ftiles.g10{grid-template-columns:repeat(3,1fr)}} @media(max-width:700px){body.v2 .ftiles.g10{grid-template-columns:repeat(2,1fr)} body.v2 .ftiles.g10 .ftile{padding:16px} body.v2 .ftiles.g10 .ftile h3{font-size:15px}} /* ============================================================ Vergleichsseite: Tabelle, Verkettung, Belegkasten Ergänzt am 26.08.2026 ============================================================ */ /* ---------- Zeichen in der Vergleichstabelle ---------- */ body.v2 .mk{width:15px;height:15px;border-radius:50%;display:inline-block;position:relative;vertical-align:-2px} body.v2 .mk.o{border:1.6px solid rgba(10,27,61,.22);background:transparent} body.v2 .mk.h{border:1.6px solid var(--blue);background:linear-gradient(90deg,var(--blue) 50%,transparent 50%)} body.v2 .mk.f{background:linear-gradient(150deg,var(--blue),#1D4ED8);box-shadow:0 3px 8px -3px rgba(37,99,235,.6)} body.v2 .mk.f.us{background:linear-gradient(150deg,var(--cyan),var(--blue));box-shadow:0 4px 12px -3px rgba(34,211,238,.8); width:17px;height:17px;vertical-align:-3px} /* ---------- Die eigene Spalte hervorheben ---------- */ body.v2 .vs-tab{position:relative} body.v2 .vs-tab th,body.v2 .vs-tab td{text-align:center} body.v2 .vs-tab th:first-child,body.v2 .vs-tab td:first-child{text-align:left} body.v2 .vs-tab th:last-child{ background:linear-gradient(150deg,var(--blue) 0%,#1D4ED8 100%); font-size:14.5px;letter-spacing:-.01em;position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} body.v2 .vs-tab td:last-child{ background:linear-gradient(180deg,rgba(37,99,235,.085),rgba(34,211,238,.06)); box-shadow:inset 2px 0 0 var(--blue),inset -2px 0 0 var(--blue)} body.v2 .vs-tab tr:last-child td:last-child{box-shadow:inset 2px 0 0 var(--blue),inset -2px 0 0 var(--blue),inset 0 -2px 0 var(--blue)} /* Zeile, in der nur wir voll erfüllen */ body.v2 .vs-tab tr.solo td{background:#F6FAFF} body.v2 .vs-tab tr.solo td:first-child{position:relative;padding-left:30px} body.v2 .vs-tab tr.solo td:first-child::before{ content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%); width:6px;height:6px;border-radius:50%;background:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.22)} body.v2 .vs-tab tr.solo td:last-child{background:linear-gradient(180deg,rgba(34,211,238,.17),rgba(37,99,235,.12))} /* Legende unter der Tabelle */ body.v2 .mklegende{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;margin:14px 0 4px; font-size:12.8px;color:var(--slate)} body.v2 .mklegende span{display:inline-flex;align-items:center;gap:8px} /* ---------- Verkettung: Nabe mit Speichen ---------- */ body.v2 .kette{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;align-items:stretch} body.v2 .knode{grid-column:span 4;position:relative;background:#fff;border:1px solid var(--line); border-radius:16px;padding:18px 18px 16px;transition:.24s;overflow:hidden} body.v2 .knode:hover{transform:translateY(-4px);box-shadow:0 26px 54px -26px rgba(10,27,61,.3);border-color:#CBD9F5} body.v2 .knode .kn{display:flex;align-items:center;gap:10px;margin-bottom:10px} body.v2 .knode .kn i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none; background:linear-gradient(150deg,#EAF2FF,#DCE9FF);color:var(--blue);border:1px solid #D3E2FB} body.v2 .knode .kn i svg{width:16px;height:16px} body.v2 .knode:hover .kn i{background:linear-gradient(140deg,var(--blue),var(--cyan));color:#fff;border-color:transparent} body.v2 .knode .kn b{font-family:var(--kc-kopf);font-size:16.5px;font-weight:750;color:var(--navy);letter-spacing:-.02em} body.v2 .knode ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px} body.v2 .knode ul li{font-size:13.4px;color:var(--slate);line-height:1.5;padding-left:16px;position:relative} body.v2 .knode ul li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:1.5px;background:var(--sky)} body.v2 .knode.hub{grid-column:span 12;background:linear-gradient(155deg,#141F39,#0D1424);border-color:rgba(255,255,255,.1)} body.v2 .knode.hub .kn b{color:#fff} body.v2 .knode.hub .kn i{background:rgba(103,232,249,.12);color:var(--ice);border-color:rgba(103,232,249,.22)} body.v2 .knode.hub p{font-size:14.6px;color:#A9C6E8;line-height:1.62;margin:0} body.v2 .knode.hub p b{color:var(--ice)} /* ---------- Ablaufkette mit Pfeilen ---------- */ body.v2 .autokette{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:22px 0 6px} body.v2 .autokette .ak{flex:1 1 168px;background:#fff;border:1px solid var(--line);border-radius:14px; padding:15px 15px 13px;position:relative;transition:.22s} body.v2 .autokette .ak:hover{transform:translateY(-4px);box-shadow:0 22px 46px -24px rgba(10,27,61,.3);border-color:#CBD9F5} body.v2 .autokette .ak .aki{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:9px; background:linear-gradient(150deg,#EAF2FF,#DCE9FF);color:var(--blue);border:1px solid #D3E2FB} body.v2 .autokette .ak .aki svg{width:15px;height:15px} body.v2 .autokette .ak b{display:block;font-family:var(--kc-kopf);font-size:13.6px;font-weight:750;color:var(--navy); line-height:1.28;margin-bottom:5px} body.v2 .autokette .ak span{display:block;font-size:12.4px;color:var(--slate);line-height:1.48} body.v2 .autokette .ak::after{content:"→";position:absolute;right:-15px;top:50%;transform:translateY(-50%); font-size:17px;color:var(--sky);font-weight:700;z-index:2} body.v2 .autokette .ak:last-child::after{display:none} body.v2 .autokette .ak.ziel{background:linear-gradient(150deg,#141F39,#0D1424);border-color:transparent} body.v2 .autokette .ak.ziel b{color:#fff} body.v2 .autokette .ak.ziel span{color:#A9C6E8} body.v2 .autokette .ak.ziel .aki{background:rgba(103,232,249,.13);color:var(--ice);border-color:rgba(103,232,249,.24)} @media(max-width:900px){ body.v2 .knode{grid-column:span 6} body.v2 .autokette .ak::after{display:none} } @media(max-width:640px){ body.v2 .knode{grid-column:span 12} } /* ===== Auswahlkriterium: vier Fragen (11.09.2026) ===== */ body.v2 .qlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px} body.v2 .qitem{background:#fff;border:1px solid rgba(10,27,61,.09);border-radius:18px;padding:26px 28px; box-shadow:0 1px 2px rgba(10,27,61,.04),0 10px 30px -18px rgba(10,27,61,.22);position:relative;overflow:hidden} body.v2 .qitem::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--blue),var(--cyan))} body.v2 .qitem h3{font-family:var(--kc-kopf);font-weight:700;font-size:clamp(17px,1.25vw,20px); line-height:1.3;color:var(--navy);margin:0 0 12px;letter-spacing:-.01em;overflow-wrap:anywhere;hyphens:auto} body.v2 .qitem p{font-size:15px;line-height:1.62;color:#41506B;margin:0 0 10px} body.v2 .qitem p:last-child{margin-bottom:0} body.v2 .qitem b{color:var(--navy);font-weight:650} body.v2 .qitem a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.28)} body.v2 .qitem a:hover{border-bottom-color:var(--blue)} @media(max-width:900px){body.v2 .qlist{grid-template-columns:1fr;gap:14px} body.v2 .qitem{padding:22px 20px}} /* ===== Textueberlaeufe auf den Funktionsseiten (11.09.2026) ===== */ /* gestapelter Balken: Beschriftung darf umbrechen und trennen, statt abgeschnitten zu werden */ body.v2 .mvstack{height:auto;min-height:52px} body.v2 .mvstack .sg{overflow-wrap:anywhere;hyphens:auto;font-size:clamp(10.5px,.78vw,12.5px);padding:8px 5px} @media(max-width:640px){body.v2 .mvstack{flex-wrap:wrap;height:auto} body.v2 .mvstack .sg{flex:1 1 46%;min-height:44px;border-radius:10px}} /* lange deutsche Komposita in Karten-, Zeilen- und Abschnittsueberschriften */ body.v2 .bc h3,body.v2 .ftile h3,body.v2 .qitem h3,body.v2 .bento h3, body.v2 .mvrows .ri,body.v2 .mvrw>em,body.v2 .vhead,body.v2 .vcap, body.v2 .sx h2,body.v2 .shead h2,body.v2 .usp .txt h2{overflow-wrap:anywhere;hyphens:auto} body.v2 .ick b,body.v2 .ick span,body.v2 .icklist b{overflow-wrap:anywhere;hyphens:auto} /* Zeilenbeschriftungen in .mvrows/.rw brechen auf schmalen Schirmen */ body.v2 .rw span,body.v2 .mvrows span,body.v2 .rw b,body.v2 .rw em{overflow-wrap:anywhere;hyphens:auto} @media(max-width:480px){body.v2 .rw{align-items:flex-start} body.v2 .rw span{line-height:1.35}} /* ============================================================ INNERER SCHMERZ + ZUKUNFTSSZENE (11.09.2026) Lange Fliesstexte im Erzaehlton. Bewusst schmale Spalte, damit die Zeilen lesbar bleiben (max. ~75 Zeichen). ============================================================ */ body.v2 .ip-sec{background:linear-gradient(180deg,#FFFFFF,var(--bg2) 52%,#FFFFFF);position:relative;overflow:hidden} body.v2 .ipwrap{position:relative;z-index:2;max-width:860px;margin:0 auto} body.v2 .ipwrap .eyebrow{margin-bottom:18px} body.v2 .iph2{font-family:var(--kc-kopf);font-weight:800;letter-spacing:-.02em; font-size:clamp(26px,3.1vw,42px);line-height:1.14;color:var(--navy);margin:0 0 26px; overflow-wrap:anywhere;hyphens:auto} body.v2 .iptext p{font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.74;color:#41506B;margin:0 0 18px} body.v2 .iptext p.big{font-size:clamp(17px,1.32vw,21px);line-height:1.56;color:var(--navy); font-weight:650;margin-top:28px} body.v2 .mirror{list-style:none;margin:22px 0 4px;padding:0;display:grid;gap:9px} body.v2 .mirror li{position:relative;padding:14px 18px 14px 46px;background:#fff; border:1px solid rgba(10,27,61,.09);border-radius:13px; font-size:15.2px;line-height:1.5;color:var(--navy); box-shadow:0 1px 2px rgba(10,27,61,.035);overflow-wrap:anywhere;hyphens:auto} body.v2 .mirror li::before{content:"";position:absolute;left:19px;top:19px;width:9px;height:9px; border-radius:50%;background:var(--warm);box-shadow:0 0 0 4px rgba(69,137,247,.14)} body.v2 .ipturn{margin:38px 0 0;padding:30px 32px;border-radius:20px; background:linear-gradient(180deg,#F2F7FF,#E9F2FF); border:1px solid #D7E5FB;border-left:4px solid var(--blue); box-shadow:0 20px 48px -30px rgba(13,38,84,.4)} body.v2 .ipturn h3{font-family:var(--kc-kopf);font-weight:700;letter-spacing:-.01em; font-size:clamp(19px,1.7vw,26px);line-height:1.26;color:var(--navy);margin:0 0 16px; overflow-wrap:anywhere;hyphens:auto} body.v2 .ipturn p{font-size:clamp(15px,1.08vw,17px);line-height:1.72;color:#3A4A66;margin:0 0 14px} body.v2 .ipturn p:last-child{margin-bottom:0} body.v2 .ipturn p b{color:var(--navy);font-weight:750} body.v2 .ipclose{margin:32px 0 0;font-size:clamp(15px,1.08vw,17px);line-height:1.72;color:#41506B} body.v2 .ipclose b{color:var(--navy);font-weight:650} body.v2 .szene-sec{background:linear-gradient(120deg,var(--navy3),var(--navy2) 58%,#123B78); color:#fff;position:relative;overflow:hidden} body.v2 .szene-sec::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(680px 340px at 78% 12%,rgba(103,232,249,.15),transparent 62%)} body.v2 .szwrap{position:relative;z-index:2;max-width:800px;margin:0 auto} body.v2 .szwrap h2{font-family:var(--kc-kopf);font-weight:800;letter-spacing:-.02em; font-size:clamp(30px,3.6vw,50px);line-height:1.08;color:#fff;margin:0 0 28px; overflow-wrap:anywhere;hyphens:auto} body.v2 .sztext p{font-size:clamp(15.5px,1.14vw,18px);line-height:1.78; color:rgba(220,232,252,.9);margin:0 0 20px} body.v2 .sztext b{color:var(--ice);font-weight:700} body.v2 .sztext p.szfin{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14); font-size:clamp(17px,1.4vw,22px);line-height:1.52;color:#fff;font-weight:600} @media(max-width:720px){ body.v2 .ipturn{padding:24px 20px} body.v2 .mirror li{padding:13px 15px 13px 42px;font-size:14.6px} body.v2 .mirror li::before{left:17px;top:18px} } /* ===== Gedankenzeilen auf funktionen.html (11.09.2026) ===== */ body.v2 .gedanken{display:grid;gap:12px;margin-top:36px} body.v2 .gk{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.28fr); background:#fff;border:1px solid rgba(10,27,61,.09);border-radius:16px;overflow:hidden; box-shadow:0 1px 2px rgba(10,27,61,.04),0 10px 30px -22px rgba(10,27,61,.22)} body.v2 .gk .gl{position:relative;padding:20px 22px 20px 28px; background:linear-gradient(180deg,#F4F8FF,#EBF2FE); font-family:var(--kc-kopf);font-weight:650; font-size:clamp(14.6px,1.12vw,17px);line-height:1.38;color:var(--navy); display:flex;align-items:center;overflow-wrap:anywhere;hyphens:auto} body.v2 .gk .gl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--warm)} body.v2 .gk .gp{padding:20px 24px;font-size:14.8px;line-height:1.62;color:#41506B; display:flex;flex-direction:column;justify-content:center;overflow-wrap:anywhere;hyphens:auto} body.v2 .gk .gp b{color:var(--navy);font-weight:700} @media(max-width:820px){ body.v2 .gk{grid-template-columns:1fr} body.v2 .gk .gl{padding:16px 18px 16px 22px} body.v2 .gk .gp{padding:16px 18px;border-top:1px solid rgba(10,27,61,.07)} } /* ===== Szenenblock auf den Funktionsseiten (11.09.2026) ===== */ body.v2 .ksz-sec{padding-top:34px;padding-bottom:0} body.v2 .ksz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); border-radius:20px;overflow:hidden;border:1px solid rgba(10,27,61,.10); box-shadow:0 18px 46px -30px rgba(13,38,84,.45)} body.v2 .kszl{padding:30px 32px;background:linear-gradient(165deg,#141F39,#0D1424);position:relative} body.v2 .kszl::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(360px 200px at 88% 8%,rgba(103,232,249,.14),transparent 65%)} body.v2 .kszt{position:relative;z-index:1;display:inline-block;font-family:var(--kc-kopf); font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--ice);margin-bottom:14px} body.v2 .kszl p{position:relative;z-index:1;margin:0;font-size:clamp(15px,1.08vw,17px); line-height:1.72;color:rgba(220,232,252,.92);overflow-wrap:anywhere;hyphens:auto} body.v2 .kszr{padding:30px 32px;background:#fff} body.v2 .kszlab{display:inline-block;font-family:var(--kc-kopf);font-size:11.5px; font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:14px} body.v2 .kszr p{margin:0;font-size:clamp(15px,1.08vw,17px);line-height:1.72;color:#41506B; overflow-wrap:anywhere;hyphens:auto} body.v2 .kszr p b{color:var(--navy);font-weight:700} @media(max-width:820px){ body.v2 .ksz{grid-template-columns:1fr} body.v2 .kszl,body.v2 .kszr{padding:24px 20px} } /* ===== Wer dahintersteht (11.09.2026) ===== */ body.v2 #entwickler{background:linear-gradient(180deg,#FFFFFF 0%,#F6FAFF 60%,#FFFFFF 100%)} body.v2 .macher{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:48px;align-items:start} body.v2 .mkcard{background:#fff;border:1px solid rgba(10,27,61,.09);border-radius:22px; padding:28px 24px;text-align:center;box-shadow:0 22px 54px -36px rgba(13,38,84,.5)} body.v2 .mkcard img{width:132px;height:132px;border-radius:50%;object-fit:cover;display:block; margin:0 auto 16px;border:3px solid #fff;box-shadow:0 12px 28px -14px rgba(13,38,84,.5)} body.v2 .mkcard>b{display:block;font-family:var(--kc-kopf);font-weight:700; font-size:18px;color:var(--navy);letter-spacing:-.01em} body.v2 .mkcard>span{display:block;font-size:13.5px;color:var(--slate);margin-top:4px} body.v2 .mkmeta{margin-top:16px;padding-top:16px;border-top:1px solid rgba(10,27,61,.08);display:grid;gap:5px} body.v2 .mkmeta span{font-size:12.5px;color:var(--slate-l)} body.v2 .mkruf{display:block;margin-top:16px;padding-top:16px;border-top:1px solid rgba(10,27,61,.08); font-family:var(--kc-kopf);font-weight:700;font-size:17px;color:var(--blue);text-decoration:none} body.v2 .mkruf:hover{color:var(--blue-d)} body.v2 .mkruf small{display:block;font-family:'Inter',system-ui,sans-serif;font-weight:400; font-size:12px;color:var(--slate-l);margin-top:4px} body.v2 .mktext h2{font-family:var(--kc-kopf);font-weight:800;letter-spacing:-.02em; font-size:clamp(25px,2.7vw,38px);line-height:1.14;color:var(--navy);margin:0 0 24px; overflow-wrap:anywhere;hyphens:auto} body.v2 .mktext p{font-size:clamp(15px,1.08vw,17px);line-height:1.76;color:#41506B;margin:0 0 17px} body.v2 .mktext p b{color:var(--navy);font-weight:700} body.v2 .mktext p.mkfin{margin-top:26px;padding:22px 24px;border-radius:16px; background:linear-gradient(180deg,#F2F7FF,#E9F2FF);border-left:4px solid var(--blue); font-size:clamp(15.5px,1.18vw,18px);line-height:1.62;color:var(--navy);font-weight:600} @media(max-width:900px){ body.v2 .macher{grid-template-columns:1fr;gap:26px} body.v2 .mkcard{display:grid;grid-template-columns:92px minmax(0,1fr); grid-template-rows:1fr 1fr auto auto;column-gap:18px;row-gap:0; text-align:left;padding:20px} body.v2 .mkcard img{width:92px;height:92px;margin:0;grid-column:1;grid-row:1/span 2;align-self:center} body.v2 .mkcard>b{grid-column:2;grid-row:1;align-self:end} body.v2 .mkcard>span{grid-column:2;grid-row:2;align-self:start;margin-top:3px} body.v2 .mkmeta{grid-column:1/-1;grid-row:3;margin-top:16px;padding-top:16px} body.v2 .mkruf{grid-column:1/-1;grid-row:4;margin-top:14px;padding-top:14px} } /* ===== weitere Spaltenbreiten fuer das Bento (11.09.2026) ===== */ body.v2 .sp6{grid-column:span 6} body.v2 .sp7{grid-column:span 7} @media(max-width:1024px){body.v2 .sp6,body.v2 .sp7{grid-column:span 6}} @media(max-width:700px){body.v2 .sp6,body.v2 .sp7{grid-column:span 1}} /* ===== Szene v2: Kopf, zwei Beats mit Grafik, Schlusssatz (11.09.2026) ===== */ body.v2 .szhead{max-width:880px;margin:0 auto 40px;text-align:center} body.v2 .szhead .eyebrow{justify-content:center} body.v2 .szhead h2{font-family:var(--kc-kopf);font-weight:800;letter-spacing:-.02em; font-size:clamp(30px,3.8vw,52px);line-height:1.06;color:#fff;margin:0 0 18px; overflow-wrap:anywhere;hyphens:auto} body.v2 .szlead{font-size:clamp(16px,1.3vw,20px);line-height:1.6;color:rgba(220,232,252,.9);margin:0} body.v2 .szgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px} body.v2 .szbeat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12); border-radius:20px;padding:28px 28px 24px; transition:border-color .35s,transform .35s,box-shadow .35s} body.v2 .szbeat:hover{border-color:rgba(103,232,249,.34);transform:translateY(-4px); box-shadow:0 34px 70px -32px rgba(6,18,42,.8)} body.v2 .szq{display:block;font-family:var(--kc-kopf);font-weight:700; font-size:clamp(17px,1.5vw,22px);line-height:1.3;color:var(--ice);margin-bottom:14px; overflow-wrap:anywhere;hyphens:auto} body.v2 .szbeat p{font-size:15px;line-height:1.72;color:rgba(220,232,252,.86);margin:0 0 20px} body.v2 .szvis{display:grid;gap:8px} body.v2 .szrow{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 13px; transition:background .3s,border-color .3s} body.v2 .szbeat:hover .szrow{background:rgba(255,255,255,.09);border-color:rgba(103,232,249,.24)} body.v2 .szrow b{display:block;font-size:13px;color:#fff;font-weight:650;overflow-wrap:anywhere} body.v2 .szrow small{display:block;font-size:11.5px;color:rgba(214,228,252,.72);overflow-wrap:anywhere} body.v2 .szav{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center; font-size:11.5px;font-weight:700;color:#fff;font-family:var(--kc-kopf)} body.v2 .szav.a{background:linear-gradient(135deg,#2563EB,#22D3EE)} body.v2 .szav.b{background:linear-gradient(135deg,#16A34A,#67E8F9)} body.v2 .szav.c{background:linear-gradient(135deg,#4589F7,#3275E0)} body.v2 .szt{margin-left:auto;font-family:var(--kc-kopf);font-size:12px; font-weight:700;color:var(--ice);flex:none} body.v2 .szvis.szcalc{gap:7px} body.v2 .szc{display:flex;align-items:baseline;gap:10px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:10px 13px} body.v2 .szc>span{flex:none;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase; color:rgba(214,228,252,.62);min-width:104px} body.v2 .szc b{font-size:13.5px;color:#fff;font-weight:650;overflow-wrap:anywhere} body.v2 .szc.two{gap:8px;background:none;border:none;padding:0} body.v2 .szc.two i{flex:1;font-style:normal;text-align:center;font-size:12px;padding:9px 6px; border-radius:10px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.2); color:rgba(214,228,252,.8);overflow-wrap:anywhere} body.v2 .szc.res{background:rgba(103,232,249,.13);border-color:rgba(103,232,249,.42)} body.v2 .szc.res b{color:var(--ice)} body.v2 p.szfin{max-width:840px;margin:40px auto 0;text-align:center; font-family:var(--kc-kopf);font-weight:650; font-size:clamp(18px,1.7vw,26px);line-height:1.42;color:#fff; padding-top:34px;border-top:1px solid rgba(255,255,255,.14)} @media(max-width:900px){body.v2 .szgrid{grid-template-columns:1fr;gap:16px}} @media(max-width:560px){ body.v2 .szbeat{padding:22px 18px} body.v2 .szc{flex-direction:column;align-items:flex-start;gap:3px} body.v2 .szc>span{min-width:0} } /* ===== Innerer Schmerz v2: zwei Spalten + Zettelstapel (11.09.2026) ===== */ body.v2 .ipgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:52px;align-items:start;max-width:1120px;margin:0 auto} body.v2 .ipgrid .iptext{max-width:none} body.v2 .kopfvis{position:relative;display:grid;gap:13px;padding-top:46px} body.v2 .knote{position:relative;background:linear-gradient(180deg,#FFFDF5,#FFF8E4); border:1px solid #EADFAE;border-radius:10px;padding:15px 18px 15px 34px; font-family:var(--kc-kopf);font-weight:600;font-size:14.5px;line-height:1.38; color:#3A3320;box-shadow:0 12px 28px -18px rgba(70,60,20,.6); transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s; overflow-wrap:anywhere;hyphens:auto} body.v2 .knote i{position:absolute;left:14px;top:50%;margin-top:-4px;width:8px;height:8px; border-radius:50%;background:var(--warm);box-shadow:0 1px 3px rgba(14,53,116,.45)} body.v2 .knote.n1{transform:rotate(-1.8deg)} body.v2 .knote.n2{transform:rotate(1.2deg)} body.v2 .knote.n3{transform:rotate(-.8deg)} body.v2 .knote.n4{transform:rotate(1.7deg)} body.v2 .knote.n5{transform:rotate(-1.3deg)} body.v2 .kopfvis:hover .knote{box-shadow:0 18px 38px -20px rgba(70,60,20,.7)} body.v2 .kopfvis:hover .knote.n1{transform:rotate(-2.6deg) translateX(-5px)} body.v2 .kopfvis:hover .knote.n2{transform:rotate(2deg) translateX(6px)} body.v2 .kopfvis:hover .knote.n3{transform:rotate(-1.4deg) translateX(-4px)} body.v2 .kopfvis:hover .knote.n4{transform:rotate(2.5deg) translateX(5px)} body.v2 .kopfvis:hover .knote.n5{transform:rotate(-2deg) translateX(-3px)} body.v2 .kcap{margin-top:8px;text-align:center;font-size:13px;color:var(--slate-l);font-style:italic} body.v2 .ip-sec .ipturn{max-width:1120px;margin:44px auto 0} @media(max-width:960px){ body.v2 .ipgrid{grid-template-columns:1fr;gap:32px} body.v2 .kopfvis{padding-top:0} } /* Ueberschriften laufen nicht mehr unter die Bento-Nummer */ body.v2 .bc h3{padding-right:36px} /* ===== Bento: volle Breite + Kurzantwort-Zeile (11.09.2026) ===== */ body.v2 .sp12{grid-column:span 12} @media(max-width:1024px){body.v2 .sp12{grid-column:span 6}} @media(max-width:700px){body.v2 .sp12{grid-column:span 1}} body.v2 .bc .kurz{font-family:var(--kc-kopf);font-weight:700;font-size:15px; line-height:1.4;color:var(--blue);margin-bottom:12px;overflow-wrap:anywhere;hyphens:auto} body.v2 .bc.dark .kurz{color:var(--ice)} body.v2 .bc.warm .kurz{color:#fff} body.v2 .bc p a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.3)} body.v2 .bc p a:hover{border-bottom-color:var(--blue)} body.v2 .bc.dark p a{color:var(--ice);border-bottom-color:rgba(103,232,249,.4)} body.v2 .bc.warm p a{color:#fff;border-bottom-color:rgba(255,255,255,.5)} body.v2 .bc p+p{margin-top:11px} /* ===== Verweis auf die Ueber-uns-Seite (11.09.2026) ===== */ body.v2 .mkmore{margin:20px 0 0} body.v2 .mkmore a{display:inline-flex;align-items:center;gap:8px;font-family:var(--kc-kopf); font-weight:700;font-size:15px;color:var(--blue);text-decoration:none; padding:11px 18px;border:1.5px solid rgba(37,99,235,.28);border-radius:12px; background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s} body.v2 .mkmore a:hover{border-color:var(--blue);box-shadow:0 14px 30px -18px rgba(37,99,235,.7);transform:translateY(-2px)} /* ===== Zusammengelegter Abschnitt: Zitat + mit der Branche gebaut (11.09.2026) ===== */ body.v2 .mitgebaut{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); gap:46px;align-items:center;margin-bottom:44px} body.v2 .mgquote{position:relative;overflow:hidden;border-radius:22px;padding:34px 34px 30px; background:linear-gradient(160deg,#141F39,#0D1424);color:#fff; box-shadow:0 26px 62px -34px rgba(6,18,42,.85)} body.v2 .mgquote::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(430px 250px at 86% 6%,rgba(103,232,249,.17),transparent 62%)} body.v2 .mgquote>*{position:relative;z-index:1} body.v2 .mgquote .eyebrow{margin-bottom:18px} body.v2 .mgquote .mgq{margin:0;font-family:var(--kc-kopf);font-weight:800; letter-spacing:-.02em;font-size:clamp(21px,2.1vw,30px);line-height:1.2;color:#fff; overflow-wrap:anywhere;hyphens:auto} body.v2 .mgwho{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px; border-top:1px solid rgba(255,255,255,.14)} body.v2 .mgwho img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none; border:2px solid rgba(255,255,255,.25)} body.v2 .mgwho b{display:block;font-family:var(--kc-kopf);font-weight:700; font-size:15.5px;color:#fff} body.v2 .mgwho span{display:block;font-size:12.5px;color:rgba(214,228,252,.75)} body.v2 .mgtext p{font-size:clamp(15px,1.1vw,17.5px);line-height:1.74;color:#41506B;margin:0 0 20px} body.v2 .mgtext p i{font-style:normal;font-weight:700;color:var(--navy)} body.v2 .mgtext p.mgziel{padding:20px 24px;border-radius:14px; background:linear-gradient(180deg,#F2F7FF,#E9F2FF);border-left:4px solid var(--blue); font-weight:600;color:var(--navy);font-size:clamp(15.5px,1.18vw,18px);line-height:1.56} body.v2 .mgtext .mkmore{margin:0} @media(max-width:900px){ body.v2 .mitgebaut{grid-template-columns:1fr;gap:28px;margin-bottom:32px} body.v2 .mgquote{padding:26px 22px 24px} } body.v2 .ipbig{max-width:1120px;margin:34px auto 0;font-size:clamp(17px,1.32vw,21px); line-height:1.56;color:var(--navy);font-weight:650} /* ===== Scharniersatz im zusammengefuehrten Problemabschnitt (11.09.2026) ===== */ body.v2 .iph3{font-family:var(--kc-kopf);font-weight:800;letter-spacing:-.02em; font-size:clamp(22px,2.5vw,34px);line-height:1.16;color:var(--navy);margin:0 0 20px; overflow-wrap:anywhere;hyphens:auto} /* ===== Kaufknopf am Ende des Plan-Abschnitts ===== */ body.v2 .planCta{display:flex;align-items:center;gap:18px;flex-wrap:wrap; margin-top:36px;padding-top:28px;border-top:1px solid rgba(10,27,61,.09)} body.v2 .planCta span{font-size:14.6px;line-height:1.55;color:var(--slate);max-width:46ch} @media(max-width:560px){body.v2 .planCta{gap:12px} body.v2 .planCta .btn{width:100%;justify-content:center}} body.v2 .pcard p+p{margin-top:11px} /* ===== Bestandsliste in Schritt 4 des Plans (11.09.2026) ===== */ body.v2 .fltitel{display:block;font-size:11px;font-weight:800;letter-spacing:.12em; text-transform:uppercase;color:var(--slate-l);margin-bottom:10px} body.v2 .fertigliste{display:flex;flex-wrap:wrap;gap:8px} body.v2 .fertigliste span{display:inline-flex;align-items:center;gap:7px; background:#F3F8FF;border:1px solid rgba(37,99,235,.18);border-radius:11px; padding:9px 13px;font-size:12.8px;font-weight:600;color:var(--navy); transition:background .28s,border-color .28s,transform .28s; overflow-wrap:anywhere;hyphens:auto} body.v2 .fertigliste span::before{content:"\2713";color:var(--green);font-weight:800;font-size:12.5px;flex:none} body.v2 .bc:hover .fertigliste span{background:#EAF2FF;border-color:rgba(37,99,235,.32);transform:translateY(-1px)} /* ============================================================ NEU 2026-09-11 — Grafik-Bausteine fuer die Beitraege Brandschutzklappen-Wartung, Gaswarnanlage, Inbetriebnahme ============================================================ */ /* --- Figur-Rahmen fuer Inline-SVG --- */ body.v2 .svgfig{margin:26px 0 8px} body.v2 .svgfig svg{display:block;width:100%;height:auto; background:linear-gradient(160deg,#FBFDFF 0%,#F4F8FF 100%); border:1px solid var(--line);border-radius:16px} body.v2 .figcap{font-size:12.6px;line-height:1.55;color:var(--slate-l); margin:9px 2px 26px;padding-left:13px;border-left:2px solid var(--cyan)} body.v2 .figcap b{color:var(--slate)} /* --- Zwei-Straenge-Vergleich --- */ body.v2 .zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 10px} body.v2 .zsp{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px 21px;position:relative;overflow:hidden} body.v2 .zsp::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--blue)} body.v2 .zsp.b::before{background:var(--warm)} body.v2 .zsp h4{font-family:var(--kc-kopf);font-size:15.5px;line-height:1.3;color:var(--navy);margin:0 0 3px} body.v2 .zsp .zlab{display:block;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue);margin-bottom:7px} body.v2 .zsp.b .zlab{color:var(--warm-d)} body.v2 .zrow{display:flex;gap:10px;padding:9px 0;border-top:1px solid var(--line2);font-size:13.6px;line-height:1.5} body.v2 .zrow:first-of-type{border-top:0;padding-top:13px} body.v2 .zrow b{flex:0 0 82px;color:var(--slate-l);font-weight:600;font-size:12.3px;text-transform:uppercase;letter-spacing:.03em;padding-top:1px} body.v2 .zrow span{color:var(--slate);flex:1} body.v2 .zfoot{text-align:center;font-family:var(--kc-kopf);font-size:14px;font-weight:600; color:var(--navy);background:var(--bg3);border-radius:12px;padding:13px 16px;margin:2px 0 6px} /* --- Vier-Felder-Matrix --- */ body.v2 .quad{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 8px} body.v2 .qc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 18px} body.v2 .qc.off{background:var(--bg2);opacity:.72} body.v2 .qc h5{font-family:var(--kc-kopf);font-size:14.6px;color:var(--navy);margin:0 0 7px;display:flex;align-items:center;gap:8px} body.v2 .qc h5 i{width:22px;height:22px;border-radius:7px;background:var(--bg3);color:var(--blue); font:700 11.5px/22px var(--kc-kopf);text-align:center;font-style:normal;flex:none} body.v2 .qc.off h5 i{background:#EDF0F6;color:var(--slate-l)} body.v2 .qc p{font-size:13.3px;line-height:1.55;color:var(--slate);margin:0 0 9px} body.v2 .qc .qex{font-size:12.7px;color:var(--navy);background:var(--bg2);border-radius:9px;padding:8px 11px;margin:0} body.v2 .qc .qex b{color:var(--blue-d)} /* --- Entscheidungsbaum als Textkette --- */ body.v2 .ebaum{margin:24px 0 8px;border:1px solid var(--line);border-radius:16px;overflow:hidden} body.v2 .ebq{background:var(--navy);color:#fff;padding:14px 19px;font-family:var(--kc-kopf);font-size:14.4px;font-weight:600} body.v2 .ebbody{padding:4px 19px 16px;background:#fff} body.v2 .ebrow{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line2)} body.v2 .ebrow:last-child{border-bottom:0} body.v2 .ebk{flex:0 0 58px;font:700 11.5px/1 var(--kc-kopf);letter-spacing:.05em;text-transform:uppercase; padding:6px 0 0;color:var(--slate-l)} body.v2 .ebk.ja{color:var(--green)} body.v2 .ebk.nein{color:var(--red)} body.v2 .ebt{flex:1;font-size:13.7px;line-height:1.58;color:var(--slate)} body.v2 .ebt b{color:var(--navy)} body.v2 .ebres{display:inline-block;margin-top:6px;font-size:12.9px;font-weight:600; background:var(--greenbg);color:#136B36;border-radius:8px;padding:6px 11px} body.v2 .ebres.warn{background:var(--amberbg);color:#093985} body.v2 .ebres.stop{background:var(--redbg);color:#9B1C1C} /* --- Nummerierte Ablaufschritte --- */ body.v2 .schritte{margin:24px 0 10px;counter-reset:sch} body.v2 .schritt{display:flex;gap:16px;padding:17px 0;border-top:1px solid var(--line2)} body.v2 .schritt:first-child{border-top:0} body.v2 .schritt::before{counter-increment:sch;content:counter(sch,decimal-leading-zero); flex:0 0 40px;height:40px;border-radius:12px;background:var(--navy);color:#fff; font:700 14px/40px var(--kc-kopf);text-align:center} body.v2 .schritt>div{flex:1;min-width:0} body.v2 .schritt h4{font-family:var(--kc-kopf);font-size:15.4px;color:var(--navy);margin:6px 0 6px} body.v2 .schritt p{font-size:14px;line-height:1.62;color:var(--slate);margin:0 0 8px} body.v2 .schritt p:last-child{margin-bottom:0} body.v2 .sreg{display:inline-flex;align-items:center;gap:6px;font-size:11.6px;font-weight:700; letter-spacing:.04em;border-radius:7px;padding:4px 9px;margin:0 6px 6px 0} body.v2 .sreg.en{background:#E8F0FE;color:#1A48B8} body.v2 .sreg.bs{background:#F1F0FB;color:#5B4BA8} body.v2 .sreg.fg{background:#E6FBFD;color:#0B6E80} /* --- Alarm-/Schwellenleiste --- */ body.v2 .ampel{margin:24px 0 8px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px 21px} body.v2 .ambar{position:relative;height:22px;border-radius:11px;margin:34px 0 40px; background:linear-gradient(90deg,#16A34A 0%,#65B93B 18%,#D97706 42%,#3275E0 62%,#DC2626 100%)} body.v2 .ammark{position:absolute;top:-32px;transform:translateX(-50%);text-align:center;width:110px} body.v2 .ammark b{display:block;font:700 12.6px/1.2 var(--kc-kopf);color:var(--navy)} body.v2 .ammark span{display:block;font-size:10.8px;color:var(--slate-l);line-height:1.3;margin-top:2px} body.v2 .ammark::after{content:"";position:absolute;left:50%;bottom:-13px;width:2px;height:13px;background:var(--navy);opacity:.45} body.v2 .amrow{display:flex;gap:11px;padding:9px 0;border-top:1px solid var(--line2);font-size:13.4px;line-height:1.55} body.v2 .amrow b{flex:0 0 74px;color:var(--navy);font-family:var(--kc-kopf);font-size:13px} body.v2 .amrow span{color:var(--slate);flex:1} /* --- Kennzahlkacheln im Artikel --- */ body.v2 .kz{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:22px 0 8px} body.v2 .kz>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px 16px} body.v2 .kz b{display:block;font:700 21px/1.1 var(--kc-kopf);color:var(--navy);letter-spacing:-.4px} body.v2 .kz span{display:block;font-size:12.2px;color:var(--slate-l);margin-top:6px;line-height:1.4} /* --- Merksatz-Box --- */ body.v2 .merk{border-left:3px solid var(--warm);background:#F4F8FF;border-radius:0 13px 13px 0; padding:16px 20px;margin:22px 0;font-size:14.4px;line-height:1.65;color:var(--slate)} body.v2 .merk b{color:var(--navy)} body.v2 .merk.blau{border-left-color:var(--cyan);background:#F1FCFE} @media(max-width:760px){ body.v2 .zwei,body.v2 .quad{grid-template-columns:1fr} body.v2 .kz{grid-template-columns:repeat(2,1fr)} body.v2 .zrow{flex-direction:column;gap:3px} body.v2 .zrow b{flex:none} body.v2 .schritt{gap:12px} body.v2 .schritt::before{flex-basis:32px;height:32px;line-height:32px;font-size:12px} body.v2 .ammark{width:80px} body.v2 .ammark b{font-size:11.4px} body.v2 .ammark span{font-size:10px} body.v2 .amrow{flex-direction:column;gap:2px} body.v2 .amrow b{flex:none} body.v2 .ebrow{flex-direction:column;gap:4px} body.v2 .ebk{flex:none;padding:0} } /* Lange Fachbegriffe in Artikel-Ueberschriften umbrechen lassen (Handy) */ @media(max-width:760px){ body.v2 .artwrap .article h2, body.v2 .artwrap .article h3, body.v2 .article h2, body.v2 .article h3{overflow-wrap:break-word;hyphens:auto} } /* Alarmleiste: Marken schmaler, Skala 0-50 % */ body.v2 .ammark{width:94px} @media(max-width:760px){body.v2 .ammark{width:52px}body.v2 .ammark span{display:none}body.v2 .ammark b{font-size:11.6px}} /* ============================================================ Mobil-Nachbesserungen 21.09.2026 Drei Befunde, alle am iPhone-Raster (390 px) nachgemessen. ============================================================ */ /* 1. Unterseiten mit gezeichneter Hero-Grafik: die kostet auf dem Handy nur Weg, weil sie nichts zeigt, was es nicht auch im Text gibt. Auf dem Desktop bleibt sie, dort steht sie ohnehin daneben. NACHTRAG 21.09.2026 abends: auf den Vorlagenseiten steht dort jetzt die echte Dokumentvorschau (.dvp). Die wird gezeigt - siehe Abschnitt 29. Die Regel hier greift nur noch fuer die restlichen Deko-Grafiken, zum Beispiel auf der Kaelteschein-Seite. */ @media(max-width:700px){ body.v2 .page-hero.ph2 .phg>.vis:not(.dvp){display:none} body.v2 .page-hero.ph2 .phg:not(.phg-dvp){gap:0} body.v2 .page-hero.ph2:not(.ph-dvp){padding-bottom:22px} } /* 2. Der Screenshot-Nachbau war auf dem Handy nur gut halb so breit. Grund: body.v2 .appwin.pro .app setzt eine feste erste Spalte (196px) fuer die Seitenleiste. Die Seitenleiste wird mobil zwar ausgeblendet, die Spalte blieb aber stehen - der Inhalt sass in 196 von 338 Punkten, die restlichen 142 blieben leer. Gemessen am 21.09.2026: appmain 196 px breit bei 338 px Inhalt. */ @media(max-width:960px){ body.v2 .showcase .appwin.pro .app{grid-template-columns:minmax(0,1fr)} } @media(max-width:640px){ body.v2 .appwin.pro .app{grid-template-columns:minmax(0,1fr)} } /* 3. Die Hero-Grafik stand mobil nicht mittig. Sie ist 660 px breit und wird herunterskaliert, der Ursprung liegt oben links - der Rest der Breite blieb rechts als Luecke stehen (bei 390 px: 38 px). Der linke Aussenabstand rechnet die Luecke jetzt zur Haelfte vor das Bild. Prozente im Aussenabstand beziehen sich auf den umgebenden Block, nicht auf die eigenen 660 px - deshalb geht das. */ @media(max-width:1024px){ body.v2 .hero-shot{margin-left:calc((100% - 1020px*.60)/2)} } @media(max-width:700px){ body.v2 .hero-shot{margin-left:calc((100% - 660px*.50)/2)} } @media(max-width:420px){ body.v2 .hero-shot{margin-left:calc((100% - 660px*.455)/2)} } /* 4. Schwebe-Effekte nur dort, wo es einen Zeiger gibt. Auf einem Touchgeraet loest die erste Beruehrung sonst den Hover-Zustand aus statt den Klick - man muss zweimal tippen und haelt den Knopf fuer kaputt. Betrifft die Funktions-Kacheln in der dunklen Sektion. */ @media(hover:none){ .pill-btn:hover{background:rgba(255,255,255,.06);transform:none} .pill-btn.on:hover{background:var(--warm)} } .pill-btn:active{background:rgba(255,255,255,.22)} /* ============================================================ 29. Echte Dokumentvorschau auf den Vorlagenseiten ------------------------------------------------------------ 21.09.2026. Vorher stand im Hero rechts eine gezeichnete Andeutung eines Blattes. Die hat nicht gezeigt, was im PDF steht, und war auf dem Handy deshalb ausgeblendet. Jetzt stehen dort die echten Seiten des ausgelieferten PDF. Die Ausblende-Regel von heute morgen (.page-hero.ph2 .phg>.vis{display:none} bei <=700px) steht weiter unten und nimmt .dvp ausdruecklich aus. ============================================================ */ /* ---- Karte ---- */ body.v2 .dvp{padding:20px 20px 18px} body.v2 .dvp .vhead{margin-bottom:12px} body.v2 .dvp-rahmen{position:relative} /* Die Bahn: alle Seiten nebeneinander, eine pro Sichtfenster. scroll-snap macht daraus auf dem Handy ein Wischen, das an der naechsten Seite einrastet. */ body.v2 .dvp-bahn{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:zoom-in; border-radius:12px;background:#F4F7FD;max-height:min(58vh,470px)} body.v2 .dvp-bahn::-webkit-scrollbar{display:none} body.v2 .dvp-blatt{flex:0 0 100%;margin:0;scroll-snap-align:start;overflow:hidden; display:flex;align-items:flex-start;justify-content:center} /* Ein A4-Blatt ist hoeher als der Platz im Kopfbereich. Statt den Kopfbereich aufzublaehen wird der untere Rand weich ausgeblendet - der Rest steht in der Vollbildansicht. Der Verlauf kommt nur, wenn wirklich abgeschnitten wird; das entscheidet das Skript, weil es von der Bildbreite abhaengt und CSS das nicht rechnen kann. */ body.v2 .dvp.dvp-beschnitten .dvp-rahmen::after{content:"";position:absolute; left:0;right:0;bottom:0;height:88px;pointer-events:none;border-radius:0 0 12px 12px; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%)} body.v2 .dvp-blatt img{display:block;width:100%;height:auto;border-radius:12px; border:1px solid var(--line);background:#fff; box-shadow:0 18px 40px -26px rgba(13,38,84,.45)} /* Lupen-Knopf unten rechts auf dem Blatt */ body.v2 .dvp-gross{position:absolute;right:10px;bottom:10px;z-index:2; display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);cursor:pointer; font:inherit;font-size:12.5px;font-weight:700;color:var(--navy); background:rgba(255,255,255,.94); border-radius:100px;padding:8px 14px; box-shadow:0 10px 24px -14px rgba(13,38,84,.5);transition:.18s} body.v2 .dvp-gross svg{width:14px;height:14px} @media(hover:hover){ body.v2 .dvp-gross:hover{background:#fff;border-color:#C7D9F6;transform:translateY(-1px)} } body.v2 .dvp-gross:active{transform:translateY(0)} /* Blaetter-Leiste. Ohne JavaScript bleibt sie weg, dann steht nur Seite 1 da - das ist immer noch mehr als vorher. */ body.v2 .dvp-leiste{display:none;align-items:center;justify-content:center;gap:14px;margin-top:12px} body.v2 .dvp.dvp-bereit .dvp-leiste{display:flex} body.v2 .dvp.dvp-einblatt .dvp-leiste{display:none} body.v2 .dvp-pfeil{width:34px;height:34px;border-radius:50%;border:1px solid var(--line); background:#fff;color:var(--navy);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;transition:.18s;padding:0} body.v2 .dvp-pfeil svg{width:16px;height:16px} body.v2 .dvp-pfeil:disabled{opacity:.3;cursor:default} @media(hover:hover){ body.v2 .dvp-pfeil:not(:disabled):hover{border-color:#C7D9F6;background:var(--bg2)} } body.v2 .dvp-zahl{font-size:12.5px;font-weight:700;color:var(--slate); letter-spacing:.02em;min-width:74px;text-align:center} /* ---- Vollbild ---- */ body.dvl-offen{overflow:hidden} .dvl{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column; background:rgba(8,18,38,.93);backdrop-filter:blur(3px)} .dvl[hidden]{display:none} .dvl-kopf{flex:none;display:flex;align-items:center;gap:14px; padding:14px 16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.12)} .dvl-titel{font-family:var(--kc-kopf);font-weight:700;font-size:15px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .dvl-zahl{font-size:12.5px;font-weight:700;color:rgba(214,228,252,.8);flex:none} .dvl-zu{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:inline-flex; align-items:center;justify-content:center;padding:0} .dvl-zu svg{width:17px;height:17px} .dvl-rollen{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:16px 14px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain} .dvl-seite img{display:block;width:100%;max-width:820px;margin:0 auto;height:auto; border-radius:10px;background:#fff;box-shadow:0 20px 50px -28px rgba(0,0,0,.9)} .dvl-fuss{flex:none;padding:12px 14px calc(12px + env(safe-area-inset-bottom)); background:#fff;border-top:1px solid var(--line)} .dvl-knoepfe{display:flex;gap:10px;max-width:820px;margin:0 auto} .dvl-knoepfe .btn{flex:1;justify-content:center;text-align:center;line-height:1.25} /* ---- Dauerhafte Knopfleiste am unteren Rand (schmal) ---- */ .dvs{position:fixed;left:0;right:0;bottom:0;z-index:55; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);border-top:1px solid var(--line); box-shadow:0 -10px 28px -18px rgba(13,38,84,.55); transform:translateY(105%);transition:transform .25s ease; backdrop-filter:saturate(1.2) blur(6px)} .dvs.an{transform:none} .dvs .dvl-knoepfe{gap:8px} .dvs .btn{font-size:14px;padding:12px 10px} @media(min-width:861px){ .dvs{display:none} } /* ---- Grossbildschirm ---- Die Karte oben ausrichten, nicht mittig: mittig zentriert waere sie hoeher als die Textspalte und schoebe sich unter die feste Kopfleiste. Gemessen am 21.09.2026 bei 1440x900. */ @media(min-width:1025px){ body.v2 .page-hero.ph2 .phg.phg-dvp{align-items:start} } /* ---- Einleitung auf dem Handy kuerzen ---- Gemessen am 21.09.2026: die Einleitungen sind 6 bis 11 Zeilen lang, die Vorschau begann dadurch erst bei 523 bis 679 Punkten - also erst auf dem zweiten Bildschirm. Fuenf Zeilen plus "weiterlesen" holen sie auf den ersten. Der Text bleibt vollstaendig im Quelltext, nur die Anzeige ist gekuerzt. Rueckgaengig: diese drei Regeln weg. */ body.v2 .dvp-mehr{display:none} @media(max-width:700px){ body.v2 .page-hero.ph2.ph-dvp p.lead.dvp-kurz{display:-webkit-box;-webkit-line-clamp:5; -webkit-box-orient:vertical;overflow:hidden;margin-bottom:0} body.v2 .dvp-mehr{display:inline-block;margin-top:9px;background:none;border:none;padding:0; font:inherit;font-size:14.5px;font-weight:700;color:var(--blue);cursor:pointer; text-decoration:underline;text-underline-offset:3px} } /* ---- Schmal: Vorschau wird wieder eingeblendet ---- */ @media(max-width:700px){ body.v2 .page-hero.ph2 .phg>.vis.dvp{display:block} body.v2 .page-hero.ph2 .phg.phg-dvp{gap:26px} body.v2 .dvp{padding:14px 14px 12px;border-radius:16px} body.v2 .dvp .vhead{margin-bottom:10px} body.v2 .dvp .vcap{margin-top:12px;padding-top:11px;font-size:12.5px} body.v2 .dvp-gross{font-size:12px;padding:7px 12px;right:8px;bottom:8px} /* Beide Knoepfe nebeneinander: uebereinander frassen sie ein Drittel des Bildschirms und verdrangen das Dokument. */ .dvl-knoepfe{flex-direction:row;gap:8px} .dvl-knoepfe .btn{font-size:13.5px;padding:12px 8px} } /* ===== Verweise im Fliesstext des Artikels sichtbar machen ===== Bisher liefen sie in Textfarbe ohne Unterstreichung: anklickbar, aber nicht erkennbar. Gleiche Schreibweise wie .noticebox a, die es auf denselben Seiten schon gibt. */ body.v2 .article p a:not(.btn), body.v2 .article .abox a:not(.btn), body.v2 .article .dli a:not(.btn), body.v2 .article .dtable-note a:not(.btn), body.v2 .article table a:not(.btn), body.v2 .article > ul li a:not(.btn), body.v2 .article > ol li a:not(.btn){color:var(--blue);font-weight:600} body.v2 .article p a:not(.btn):hover, body.v2 .article .abox a:not(.btn):hover, body.v2 .article .dli a:not(.btn):hover, body.v2 .article .dtable-note a:not(.btn):hover, body.v2 .article table a:not(.btn):hover, body.v2 .article > ul li a:not(.btn):hover, body.v2 .article > ol li a:not(.btn):hover{text-decoration:underline} /* Im dunklen CTA-Kasten bleibt der Verweis weiss - Blau auf Navy waere nicht lesbar. Gefunden auf blog-vdi-6022-hygieneinspektion. */ body.v2 .article .article-cta p a:not(.btn){color:#fff;font-weight:700;text-decoration:underline} /* ===== Ablaufgrafik Wartungsvertraege (funktion-wartung) ===== Die Grafik ist ein Inline-SVG, kein Bild: nichts nachzuladen. Auf schmalen Schirmen wird der Kasten seitlich scrollbar, statt die Beschriftungen unleserlich zu stauchen. */ body.v2 .wvgrafik{margin:46px 0 4px;background:#fff;border:1px solid var(--line); border-radius:var(--r);padding:26px 22px;overflow-x:auto;box-shadow:0 18px 40px -28px rgba(10,27,61,.28)} body.v2 .wvgrafik svg{display:block;width:100%;min-width:720px;height:auto} @media (max-width:640px){body.v2 .wvgrafik{padding:18px 14px}} /* ===== Vorlagen: Querverweis, Danke-Ansicht, Uebersicht (29.09.2026) ===== Inhalte kommen aus vorlagen.json (paket.*), gebaut von _NICHT_HOCHLADEN/vorlagen_bausteine.py. Keine Zahl hier von Hand. */ /* Querverweis direkt unter dem Download-Kasten */ body.v2 .kc-qv{margin-top:30px} body.v2 .kc-qv h2{font-size:24px;line-height:1.2;color:var(--navy);margin:0 0 6px;letter-spacing:-.02em} body.v2 .kc-qv .kc-qv-sub{color:var(--slate);margin:0 0 18px;font-size:15.5px} body.v2 .kc-qv-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} body.v2 .kc-qv-karte{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:14px; align-items:flex-start;text-decoration:none;transition:border-color .15s,box-shadow .15s} body.v2 .kc-qv-karte:hover{border-color:var(--sky);box-shadow:0 10px 26px -18px rgba(10,27,61,.35)} body.v2 .kc-qv-karte img{width:58px;height:auto;border-radius:3px;box-shadow:0 4px 12px rgba(12,26,59,.16);flex:none;background:#fff} body.v2 .kc-qv-karte small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--slate-l);margin-bottom:3px} body.v2 .kc-qv-karte b{display:block;font-size:15px;line-height:1.3;color:var(--navy);margin-bottom:4px} body.v2 .kc-qv-karte span{display:block;font-size:13.5px;color:var(--slate);line-height:1.45} body.v2 .kc-qv-paket{margin-top:14px;background:var(--navy);border-radius:16px;padding:18px 22px;display:flex;align-items:center;gap:18px;color:#fff} body.v2 .kc-qv-paket b{display:block;font-size:17px;line-height:1.3} body.v2 .kc-qv-paket span{color:#A9B7D0;font-size:14px} body.v2 .kc-qv-paket .btn{margin-left:auto;white-space:nowrap} @media (max-width:860px){body.v2 .kc-qv-raster{grid-template-columns:1fr}} @media (max-width:640px){body.v2 .kc-qv-paket{flex-direction:column;align-items:flex-start} body.v2 .kc-qv-paket .btn{margin-left:0;width:100%;justify-content:center}} /* Danke-Ansicht nach dem Klick auf "PDF herunterladen". Der Download laeuft ueber den Klick selbst - die Ansicht legt sich nur darueber. Kein Seitenwechsel, damit Safari den Download nicht als "von selbst gestartet" behandelt. */ .kc-dk{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px; background:rgba(10,27,61,.55);opacity:0;transition:opacity .18s} .kc-dk.an{opacity:1} .kc-dk-box{background:#fff;border-radius:20px;max-width:880px;width:100%;max-height:calc(100vh - 40px);overflow:auto; padding:26px 28px 24px;box-shadow:0 30px 80px rgba(10,27,61,.35);position:relative} .kc-dk-zu{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line); background:#fff;cursor:pointer;display:grid;place-items:center;color:var(--navy)} .kc-dk-kopf{display:flex;gap:14px;align-items:center;margin:0 44px 14px 0} .kc-dk-haken{width:44px;height:44px;border-radius:50%;background:#E8F7EE;color:#16A34A;display:grid;place-items:center;flex:none} .kc-dk h2{font-size:22px;line-height:1.2;color:var(--navy);margin:0} .kc-dk p.kc-dk-sub{color:var(--slate);font-size:14.5px;margin:2px 0 0} .kc-dk-pers{display:flex;gap:14px;align-items:center;justify-content:space-between;background:var(--bg2,#F5F8FD);border:1px solid var(--sky-l); border-radius:14px;padding:14px 16px;margin:6px 0 18px} .kc-dk-pers b{color:var(--navy);display:block} .kc-dk-pers span{color:var(--slate);font-size:13.5px} .kc-dk h3{font-size:16px;color:var(--navy);margin:0 0 10px} .kc-dk .kc-qv-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .kc-dk-fuss{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap} .kc-dk-fuss a.kc-dk-alle{font-weight:600;color:var(--blue)} .kc-dk-fuss small{color:var(--slate-l);margin-left:auto} @media (max-width:760px){.kc-dk-box{padding:22px 18px 18px}.kc-dk .kc-qv-raster{grid-template-columns:1fr} .kc-dk-pers{flex-direction:column;align-items:flex-start}.kc-dk-pers .btn{width:100%;justify-content:center} .kc-dk-fuss small{margin-left:0}} /* Uebersicht /vorlagen/ */ .vk-hero{padding:128px 0 34px;background:linear-gradient(180deg,#EEF5FF 0%,#F7FBFF 70%,#fff 100%)} .vk-hero .breadcrumb{font-size:13px;color:var(--slate);margin-bottom:18px} .vk-hgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center} .vk-hero h1{font-size:clamp(30px,3.4vw,46px);line-height:1.08;font-weight:800;letter-spacing:-.03em;color:var(--navy);margin:0 0 16px} .vk-hero h1 .hl{background:linear-gradient(96deg,var(--blue) 0%,#4F86F7 45%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent} .vk-hero p.lead{font-size:17.5px;color:#3A4657;max-width:640px;margin:0 0 24px} .vk-hero .actions{display:flex;gap:12px;flex-wrap:wrap} .vk-fakten{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--slate)} .vk-fakten span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green,#16a34a);margin-right:8px;vertical-align:1px} .vk-fan{position:relative;height:330px} .vk-fan img{position:absolute;width:210px;border-radius:4px;box-shadow:0 18px 40px rgba(12,26,59,.2);background:#fff} .vk-fan img:nth-child(1){left:20px;top:40px;transform:rotate(-8deg)} .vk-fan img:nth-child(2){left:120px;top:10px;transform:rotate(1deg);z-index:2} .vk-fan img:nth-child(3){left:220px;top:48px;transform:rotate(9deg)} .vk-fan .vk-logo{position:absolute;z-index:3;left:150px;top:250px;background:#fff;border-radius:12px;padding:10px 14px; box-shadow:0 12px 30px rgba(12,26,59,.19);font-weight:700;font-size:13px;color:var(--navy);display:flex;gap:8px;align-items:center} .vk-fan .vk-logo i{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--blue),var(--cyan));display:block} .vk-main{padding:26px 0 150px} .vk-gruppen{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px} .vk-gruppen .vk-gruppe:nth-child(3){grid-column:1/-1} .vk-gruppe{margin-bottom:34px} .vk-gkopf{display:flex;align-items:center;gap:14px;margin-bottom:14px} .vk-gkopf b{display:block;font-size:19px;color:var(--navy);font-weight:700} .vk-gkopf small{font-size:13.5px;color:var(--slate)} .vk-nr{width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex:none} .vk-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media (min-width:961px){.vk-gruppen .vk-gruppe:nth-child(-n+2) .vk-raster{grid-template-columns:repeat(2,1fr)}} .vk-karte{background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(12,26,59,.06),0 8px 24px rgba(12,26,59,.05)} .vk-karte.an{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12),0 8px 24px rgba(12,26,59,.08)} .vk-bild{background:#F2F6FC;height:170px;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:16px 16px 0} .vk-bild img{width:78%;height:auto;box-shadow:0 6px 18px rgba(12,26,59,.15);border-radius:3px} .vk-text{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1} .vk-text h3{font-size:15.5px;line-height:1.3;color:var(--navy);margin:0 0 6px} .vk-text h3 a{color:inherit;text-decoration:none} .vk-text p{font-size:13.5px;line-height:1.5;color:#4A5568;margin:0 0 14px;flex:1} .vk-hat{font-size:12px;font-weight:700;color:#16A34A;margin:-4px 0 10px} .vk-akt{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #EDF1F7;padding-top:12px} .vk-pdf{font-size:13px;font-weight:600;color:var(--blue)} .vk-wahl{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;user-select:none} .vk-wahl input{position:absolute;opacity:0;width:1px;height:1px} .vk-box{width:20px;height:20px;border-radius:6px;border:1.5px solid #B9C6DB;display:grid;place-items:center;font-size:13px;color:#fff} .vk-karte.an .vk-box{background:var(--blue);border-color:var(--blue)} .vk-wahl input:focus-visible + .vk-box{outline:2px solid var(--blue);outline-offset:2px} .vk-leiste{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);color:#fff;box-shadow:0 -10px 30px rgba(10,27,61,.25); transform:translateY(110%);transition:transform .2s} .vk-leiste.an{transform:none} .vk-leiste .wrap{display:flex;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px} .vk-leiste .vk-zahl{font-weight:700;font-size:16px} .vk-leiste small{display:block;font-size:12.5px;color:#A9B7D0;font-weight:400} .vk-leiste .vk-sp{flex:1} .vk-leiste .vk-alle{color:#BFDBFE;font-size:13.5px;font-weight:600;white-space:nowrap;background:none;border:0;cursor:pointer} @media (max-width:960px){.vk-gruppen{grid-template-columns:1fr}.vk-hgrid{grid-template-columns:1fr}.vk-fan{display:none}.vk-raster{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){ .vk-hero{padding-top:108px} .vk-hero p.lead{font-size:15.5px} .vk-hero .actions .btn{flex:1 1 100%;justify-content:center;text-align:center} .vk-fakten{flex-direction:column;gap:6px} .vk-raster,.vk-gruppen .vk-gruppe .vk-raster{grid-template-columns:1fr;gap:12px} .vk-karte{flex-direction:row} .vk-bild{width:104px;height:auto;flex:none;padding:12px 0 0 12px} .vk-bild img{width:100%} .vk-text{padding:12px 14px} .vk-text p{display:none} .vk-akt{border-top:0;padding-top:4px;flex-direction:column;align-items:flex-start;gap:8px} .vk-leiste .wrap{flex-wrap:wrap;gap:8px 14px} .vk-leiste .vk-alle{display:none} .vk-leiste .btn{flex:1 1 100%;justify-content:center} } /* ---- Hinweis-Banner auf das Nachschlagewerk "Kältemittel-Verbote und Pflichten" (30.09.2026) Variante von .dlbox: Deckblatt links, Text, Download rechts. Genutzt in Blogbeiträgen und auf /vorlagen/. */ .dlbox.pdfhinweis{flex-wrap:nowrap;align-items:center;gap:22px;padding:22px 26px;margin:30px 0;border-radius:18px} .pdfhinweis .ph-bild{flex:none;width:76px;height:auto;border-radius:4px;background:#fff;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transform:rotate(-3deg)} .pdfhinweis .dt{flex:1;min-width:0} .pdfhinweis .dt small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ice);margin-bottom:5px} .dlbox.pdfhinweis .dt b{font-size:18px;line-height:1.3;margin-bottom:5px} .dlbox.pdfhinweis .dt span{display:block;font-size:14px;line-height:1.5} .pdfhinweis .dbtns{flex:none} .pdfhinweis .btn{white-space:nowrap} @media(max-width:700px){ .dlbox.pdfhinweis{flex-wrap:wrap;gap:14px 16px;padding:18px} .pdfhinweis .ph-bild{width:56px;align-self:flex-start;margin-top:4px} .pdfhinweis .dt small{font-size:11px;letter-spacing:.07em} .dlbox.pdfhinweis .dt span{font-size:13.5px} .pdfhinweis .dt{flex:1 1 calc(100% - 80px)} .dlbox.pdfhinweis .dt b{font-size:16px} .pdfhinweis .dbtns{flex:1 1 100%} .pdfhinweis .btn{width:100%;justify-content:center} } /* ---- Kältemittel-Check (/kaeltemittel-check) und GWP-Rechner oben (30.09.2026) ---- */ .kmc-hero{padding-bottom:26px} .kmc-hero h1{max-width:900px} .kmc-hero .lead{max-width:820px} .kmc-fakten{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font-size:14px;color:var(--slate)} .kmc-fakten span::before{content:"✓ ";color:var(--green);font-weight:700} .kmc{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-sm);padding:26px;margin-top:6px} .kmc-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px} .kmc-tabs button{border:1px solid var(--line);background:var(--bg2);color:var(--navy);font-weight:600;font-size:15px;padding:10px 16px;border-radius:12px;cursor:pointer} .kmc-tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)} .kmc-tabs .kmc-sp{flex:1} .kmc-tabs a{align-self:center;font-size:14px} .kmc-drop{border:2px dashed #C7D9F6;border-radius:16px;padding:26px;text-align:center;background:var(--bg2);transition:background .15s,border-color .15s} .kmc-drop.ueber{background:var(--bg3);border-color:var(--blue)} .kmc-drop b{display:block;font-family:var(--kc-kopf);color:var(--navy);font-size:17px;margin-bottom:6px} .kmc-drop p{font-size:14px;color:var(--slate);margin:6px 0 14px} .kmc-drop input[type=file]{position:absolute;left:-9999px} .kmc-opt{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;font-size:14px;color:var(--slate)} .kmc-opt label{display:flex;gap:7px;align-items:center;cursor:pointer} .kmc-meldung{margin:14px 0 0;padding:12px 16px;border-radius:12px;font-size:14px;line-height:1.55;background:var(--bg2);border-left:4px solid var(--blue)} .kmc-meldung.ok{background:var(--greenbg);border-left-color:var(--green)} .kmc-meldung.fehler{background:var(--redbg);border-left-color:var(--red)} .kmc-map{margin-top:14px;padding:16px;border:1px solid var(--line);border-radius:14px} .kmc-mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;margin:10px 0 14px} .kmc-mapgrid label{font-size:13px;color:var(--slate);display:flex;flex-direction:column;gap:4px} .kmc-mapgrid select{padding:8px;border:1px solid var(--line);border-radius:8px;font-size:14px} .kmc-edleiste{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px} .kmc-edleiste .kmc-sp{flex:1} .kmc-chip{border:1px solid var(--line);background:#fff;color:var(--navy);font-size:13px;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer} .kmc-chip.on{background:var(--bg3);border-color:#C7D9F6;color:var(--blue-d)} .kmc-chip i{font-style:normal;background:var(--bg2);border-radius:999px;padding:1px 7px;margin-left:5px;font-size:12px;color:var(--slate)} .kmc-btn2{border:1px solid var(--line);background:#fff;color:var(--navy);font-size:14px;font-weight:600;padding:9px 14px;border-radius:10px;cursor:pointer} .kmc-btn2:hover{border-color:#C7D9F6;background:var(--bg2)} .kmc-tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px} .kmc-ed{width:100%;border-collapse:collapse;font-size:14px;min-width:960px} .kmc-ed th{background:var(--bg2);color:var(--navy);font-size:12px;font-weight:700;text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap} .kmc-ed td{padding:6px 6px;border-bottom:1px solid var(--line2);vertical-align:middle} .kmc-ed input:not([type=checkbox]),.kmc-ed select{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;color:var(--ink);min-width:0} .kmc-ed input:focus,.kmc-ed select:focus{outline:2px solid var(--sky-l);border-color:var(--blue)} .kmc-ed td:nth-child(1){width:15%}.kmc-ed td:nth-child(2){width:21%}.kmc-ed td:nth-child(3){width:12%}.kmc-ed td:nth-child(4){width:8%}.kmc-ed td:nth-child(5){width:15%}.kmc-ed td:nth-child(9){width:13%} .kmc-ed .kmc-cb{text-align:center} .kmc-ed .kmc-cb input{width:18px;height:18px;accent-color:var(--blue)} .kmc-geschaetzt select{border-color:#F4C27A;background:var(--amberbg)} .kmc-geschaetzt small{display:block;font-size:11px;color:var(--amber);margin-top:2px} .kmc-x{border:0;background:none;color:var(--slate-l);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:8px} .kmc-x:hover{color:var(--red);background:var(--redbg)} .kmc-leer{text-align:center;color:var(--slate);padding:22px!important;font-size:14px} .kmc-seiten{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:10px;font-size:13px;color:var(--slate)} .kmc-seiten button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 11px;font-size:16px;cursor:pointer} .kmc-seiten button:disabled{opacity:.4;cursor:default} .kmc-erg{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)} .kmc-erg h2{font-size:24px;margin:0 0 6px} .kmc-erg .kmc-stand{font-size:13px;color:var(--slate);margin-bottom:16px} .kmc-sum{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:18px} .kmc-k{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px} .kmc-k b{display:block;font-family:var(--kc-kopf);font-size:28px;color:var(--navy);line-height:1.1} .kmc-k span{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-top:4px} .kmc-k small{display:block;font-size:12px;color:var(--slate);margin-top:3px;line-height:1.35} .kmc-k.blau{background:var(--bg3);border-color:#C7D9F6} .kmc-k.rot{background:var(--redbg);border-color:#F5C2C2}.kmc-k.rot b{color:var(--red)} .kmc-k.gelb{background:var(--amberbg);border-color:#F4D7A6}.kmc-k.gelb b{color:var(--amber)} .kmc-res{width:100%;border-collapse:collapse;font-size:14px} .kmc-res th{background:var(--navy);color:#fff;font-size:12px;text-align:left;padding:10px;white-space:nowrap} .kmc-res td{padding:10px;border-bottom:1px solid var(--line2);vertical-align:top;line-height:1.45} .kmc-res td small{display:block;font-size:12px;color:var(--slate)} .kmc-res tr.kmc-r{cursor:pointer} .kmc-res tr.kmc-r:hover td{background:#FAFCFF} .kmc-res tr.kmc-weg td{background:var(--bg2);font-size:13px} .kmc-res tr.kmc-weg ul{margin:0;padding-left:18px} .kmc-res tr.kmc-weg li{margin:3px 0} .kmc-ampel{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:1px} .kmc-ampel.rot{background:var(--red)}.kmc-ampel.gelb{background:var(--amber)}.kmc-ampel.gruen{background:var(--green)} .kmc-rot{color:var(--red);font-weight:700} .kmc-grau{color:var(--slate-l)} .kmc-hin{display:inline-block;background:var(--amberbg);color:var(--amber);font-weight:700;border-radius:999px;font-size:12px;padding:1px 8px;margin-right:6px} .kmc-mehr{border:0;background:none;color:var(--blue-d);font-size:13px;font-weight:600;cursor:pointer;padding:0} .kmc-aktion{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px} .kmc-aktion .kmc-sp{flex:1} .kmc-aktion select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px} .kmc-klein{font-size:12.5px;color:var(--slate);margin-top:14px;line-height:1.55} .kmc-regel{width:100%} @media(max-width:1024px){.kmc-sum{grid-template-columns:repeat(3,1fr)}} @media(max-width:760px){ .kmc{padding:16px;border-radius:18px} .kmc-sum{grid-template-columns:repeat(2,1fr)} .kmc-k b{font-size:24px} .kmc-tw{border:0;overflow:visible} .kmc-ed{min-width:0} .kmc-ed thead{display:none} .kmc-ed tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px;position:relative} .kmc-ed td{border:0;padding:0;width:auto!important} .kmc-ed td::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;color:var(--slate);margin-bottom:3px} .kmc-ed td:nth-child(2){grid-column:1/-1;order:-1;padding-right:34px} .kmc-ed .kmc-cb{text-align:left;display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:8px;align-items:center} .kmc-ed .kmc-cb::before{margin:0} .kmc-ed .kmc-del{position:absolute;top:6px;right:6px} .kmc-ed .kmc-del::before{display:none} .kmc-ed .kmc-leer{grid-column:1/-1} .kmc-res thead{display:none} .kmc-res tr.kmc-r{display:block;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:10px} .kmc-res tr.kmc-r td{display:block;border:0;padding:4px 0} .kmc-res tr.kmc-r td::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;color:var(--slate)} .kmc-res tr.kmc-r td:first-child::before{display:none} .kmc-res tr.kmc-weg{display:block} .kmc-res tr.kmc-weg[hidden]{display:none} .kmc-res tr.kmc-weg td{display:block;border-radius:0 0 14px 14px} .kmc-tabs button{flex:1 1 auto} } @media print{ #hd,.mobilenav,footer,.sticky-cta,.kmc-tabs,.kmc-panel,.kmc-aktion,.kmc-hero .kmc-fakten,.kmc-nach,.kmc-mehr,.dlbox,.article-cta{display:none!important} .kmc{box-shadow:none;border:0;padding:0} .kmc-erg{border:0;margin:0;padding:0} .kmc-res tr.kmc-weg[hidden]{display:table-row!important} .kmc-res th{background:#eee!important;color:#000!important} body{background:#fff} } /* GWP-Rechner im Kopf von /blog-gwp-kaeltemittel */ .gwpkopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,470px);gap:34px;align-items:start} .gwpkopf .calc{padding:24px;margin:0} .gwpkopf .calc h2{font-size:19px;margin:0 0 4px} .gwpkopf .calc label{margin:12px 0 5px} .gwpkopf .calcres{margin-top:18px;padding:18px} .gwpkopf .calcres .big{font-size:26px} .gwpkopf .chkrow{gap:10px 18px;margin-top:12px} .calc .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .calc .rweg{font-size:12.5px;color:var(--slate);margin-top:10px} .calc .rweg li{margin:2px 0} .calc .mehranl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bg3);font-size:14px} .calc .mehranl a{font-weight:700;white-space:nowrap} @media(max-width:960px){.gwpkopf{grid-template-columns:1fr}.gwpkopf .ahero{display:none}} @media(max-width:560px){.calc .row2{grid-template-columns:1fr}} body.v2 .ahgrid.gwpkopf{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,470px)} @media(max-width:1024px){body.v2 .ahgrid.gwpkopf{grid-template-columns:1fr}} .gwpkopf .calc h2{margin-top:0!important} .gwpkopf .calc h2::before,.gwpkopf .calc h2::after{display:none!important} .gwpkopf > div:first-child{padding-top:34px} @media(max-width:960px){.gwpkopf > div:first-child{padding-top:0}} /* ===== GWP-Rechner in voller Breite + Werkzeug-Banner (30.09.2026) ===== */ .calc.gwpcalc{margin:34px 0 0;padding:30px 32px;border-radius:22px} .gwpcalc .gc-kopf{display:flex;align-items:baseline;gap:4px 18px;flex-wrap:wrap;margin-bottom:4px} .gwpcalc .gc-kopf p{margin:0;font-size:14.5px;color:var(--slate)} body.v2 .gwpcalc h2.gc-titel{font-size:22px;line-height:1.25;margin:0!important;padding:0} body.v2 .gwpcalc h2.gc-titel::before,body.v2 .gwpcalc h2.gc-titel::after{display:none!important} .gwpcalc .gc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start} .gwpcalc .gc-ein>label,.gwpcalc .gc-ein .row2 label{margin:14px 0 6px} .gwpcalc .chkrow{margin-top:18px;gap:12px 22px} .gwpcalc .gc-aus .calcres{margin-top:16px} .calcres.leer{display:flex;align-items:center;justify-content:center;min-height:230px;background:var(--bg2);border:1.5px dashed #C9D6EA;text-align:center} .calcres .gc-platz b{display:block;font-family:var(--kc-kopf);font-size:17px;color:var(--navy);margin-bottom:4px} .calcres .gc-platz span{font-size:14px;color:var(--slate)} .gwpcalc .gc-gwphin{display:block;font-size:12px;line-height:1.45;color:var(--slate);margin-top:6px;min-height:17px} .gwpcalc .gc-gwphin.geaendert{color:#104CAD} .gwpcalc .gc-zurueck{background:none;border:0;padding:0;font:inherit;color:var(--blue);text-decoration:underline;cursor:pointer} .gwpcalc input#gwp:disabled{background:var(--bg2);color:var(--slate-l)} .calcres .gc-hinw{font-size:13px;line-height:1.5;margin:10px 0 0;padding:8px 11px;border-radius:9px;background:#FFF7E6;color:#7C4A03} .gwpcalc .gc-quelle{font-size:11.5px;color:var(--slate-l);margin:16px 0 0;line-height:1.5} .gwpcalc .gc-check{margin-top:26px} body.v2 .ahgrid.gwpgrid{align-items:center} @media(max-width:960px){body.v2 .ahgrid.gwpgrid .ahero{display:none}} @media(max-width:860px){.gwpcalc .gc-grid{grid-template-columns:1fr;gap:0}.calc.gwpcalc{padding:22px 18px;margin-top:22px}.calcres.leer{min-height:110px}.gwpcalc .gc-kopf{display:block}} .dlbox.werkzeughinweis{flex-wrap:nowrap;align-items:center;gap:22px;padding:22px 26px;margin:30px 0;border-radius:18px;background:linear-gradient(120deg,#2563EB 0%,#1D4ED8 26%,#192747 62%,#0F182B 100%)} .dlbox.werkzeughinweis::before{background:radial-gradient(420px 220px at 92% 0,rgba(103,232,249,.25),transparent 62%)} .werkzeughinweis .wh-bild{flex:none;width:68px;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.35));transform:rotate(-3deg)} .werkzeughinweis .dt{flex:1;min-width:0} .werkzeughinweis .dt small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ice);margin-bottom:5px} .dlbox.werkzeughinweis .dt b{font-size:18px;line-height:1.3;margin-bottom:5px} .dlbox.werkzeughinweis .dt span{display:block;font-size:14px;line-height:1.55;color:rgba(226,236,253,.9)} .werkzeughinweis .dbtns{flex:none} .werkzeughinweis .btn{white-space:nowrap} .dlbox.werkzeughinweis.kompakt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 22px;margin:0;padding:24px 26px} .werkzeughinweis.kompakt .wh-bild{grid-row:1 / span 2;align-self:start;width:74px} .werkzeughinweis.kompakt .dt b{font-size:19px} .werkzeughinweis.kompakt .dbtns{grid-column:2} @media(max-width:760px){ .dlbox.werkzeughinweis{flex-wrap:wrap;gap:14px 16px;padding:18px} .werkzeughinweis .wh-bild{width:52px;align-self:flex-start;margin-top:2px} .werkzeughinweis .dt{flex:1 1 calc(100% - 70px)} .dlbox.werkzeughinweis .dt b{font-size:16px} .dlbox.werkzeughinweis .dt span{font-size:13.5px} .werkzeughinweis .dbtns{flex:1 1 100%} .werkzeughinweis .btn{width:100%;justify-content:center} .dlbox.werkzeughinweis.kompakt{padding:18px;gap:12px 14px} .werkzeughinweis.kompakt .wh-bild{width:52px;grid-row:auto} .werkzeughinweis.kompakt .dbtns{grid-column:1 / -1} } /* ===== Kältemittel-Check: Bearbeiten nach Import, Seiten, Bericht (30.09.2026) ===== */ .kmc-tabs button{display:inline-flex;align-items:center;gap:8px} .kmc-tabs .kmc-tn{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--navy);font-size:12px;font-weight:800;border:1px solid var(--line)} .kmc-tabs button.on .kmc-tn{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)} .kmc-tabs button small{font-weight:500;font-size:12px;opacity:.75} .kmc-ih{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:var(--bg3);border:1px solid #C7D9F6;font-size:14px;line-height:1.55;color:var(--navy)} .kmc-ih b{display:block;margin-bottom:2px} .kmc-ih-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .kmc-ih-knoepfe button,.kmc-ih-knoepfe a{border:1px solid #C7D9F6;background:#fff;color:var(--blue-d);font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;cursor:pointer;text-decoration:none} .kmc-ih-knoepfe button:hover,.kmc-ih-knoepfe a:hover{border-color:var(--blue)} @keyframes kmcHl{0%{background:#FFF3C4}100%{background:transparent}} .kmc-ed tr.kmc-hl td{animation:kmcHl 2.6s ease-out} .kmc-ed tr.kmc-hl{outline:2px solid var(--blue);outline-offset:-2px} /* Ergebnisliste: mehr Luft, Seiten, Häkchen "im Bericht" */ .kmc-res td{padding:14px 12px;border-bottom:1px solid var(--line)} .kmc-res th{padding:11px 12px} .kmc-res td b{color:var(--navy)} .kmc-res td small{margin-top:3px} .kmc-res .kmc-imb{width:54px;text-align:center;padding-left:8px;padding-right:4px} .kmc-res th.kmc-imb{font-size:10.5px;line-height:1.2;white-space:normal} .kmc-res .kmc-imb input{width:18px;height:18px;accent-color:var(--blue);cursor:pointer} .kmc-res tr.kmc-aus td:not(.kmc-imb){opacity:.42} .kmc-res .kmc-akt{white-space:nowrap;text-align:right} .kmc-res .kmc-akt button{display:inline-block;margin-left:10px} .kmc-edit{border:1px solid var(--line);background:#fff;color:var(--navy);font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:8px;cursor:pointer} .kmc-edit:hover{border-color:var(--blue);color:var(--blue-d)} .kmc-resfuss{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-top:14px} .kmc-resfuss .kmc-seiten{margin:0;justify-content:flex-start} .kmc-sortlabel{font-size:14px;color:var(--slate)} .kmc-sortlabel select{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px;margin-left:6px} .kmc-seiten span{font-variant-numeric:tabular-nums} /* Bericht per E-Mail */ .kmc-bericht{margin-top:26px;border-radius:20px;overflow:hidden;border:1px solid #C7D9F6;background:var(--bg2)} .kmc-b-kopf{display:flex;align-items:center;gap:20px;padding:22px 24px;background:linear-gradient(135deg,#1D4ED8 0%,#192747 52%,#0F182B 100%);color:#fff} .kmc-b-bild{flex:none;width:54px;height:auto;transform:rotate(-3deg);filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))} .kmc-b-text{flex:1;min-width:0} .kmc-b-text small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ice);margin-bottom:4px} .kmc-b-text b{display:block;font-family:var(--kc-kopf);font-size:19px;line-height:1.3;margin-bottom:4px} .kmc-b-text>span{display:block;font-size:14px;line-height:1.5;color:rgba(226,236,253,.9)} .kmc-b-kopf .btn{flex:none;white-space:nowrap} .kmc-b-form{padding:22px 24px 24px} .kmc-b-teil{border:0;margin:0 0 20px;padding:0} .kmc-b-teil legend{display:flex;align-items:center;gap:10px;font-family:var(--kc-kopf);font-weight:700;font-size:16px;color:var(--navy);margin-bottom:12px;padding:0} .kmc-b-teil legend span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px} .kmc-b-gruppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .kmc-b-gruppen label{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .15s,box-shadow .15s} .kmc-b-gruppen label:hover{border-color:#C7D9F6} .kmc-b-gruppen label:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset} .kmc-b-gruppen input{width:18px;height:18px;accent-color:var(--blue);flex:none} .kmc-b-gruppen span{flex:1;min-width:0} .kmc-b-gruppen b{display:block;font-size:14px;color:var(--navy)} .kmc-b-gruppen small{display:block;font-size:12px;color:var(--slate)} .kmc-b-gruppen i{font-style:normal;font-weight:800;font-family:var(--kc-kopf);color:var(--navy);font-size:17px;font-variant-numeric:tabular-nums} .kmc-b-hinw{font-size:13px;color:var(--slate);margin:10px 0 6px} .kmc-b-opt{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--navy);cursor:pointer;margin:6px 0 0} .kmc-b-opt input,.kmc-b-einw input{width:18px;height:18px;accent-color:var(--blue);flex:none;margin-top:2px} .kmc-b-anzahl{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#fff;border:1px dashed #C7D9F6;font-size:14px;color:var(--navy)} .kmc-b-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px} .kmc-b-grid label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:700;color:var(--navy)} .kmc-b-grid label.breit{grid-column:1/-1} .kmc-b-grid small{font-weight:500;color:var(--slate)} .kmc-b-grid input{padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;font-family:inherit;color:var(--ink);background:#fff} .kmc-b-grid input:focus{outline:none;border-color:var(--blue)} .kmc-b-web{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .kmc-b-einw{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--slate);cursor:pointer} .kmc-b-einw b{color:var(--navy)} .kmc-b-daten{font-size:12.5px;color:var(--slate);margin:10px 0 0;line-height:1.55} .kmc-b-senden{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center} .kmc-b-senden span{font-size:13px;color:var(--slate)} .kmc-b-senden .btn:disabled{opacity:.55;cursor:default} .kmc-b-status:empty{display:none} .kmc-b-status{margin-top:14px;padding:13px 16px;border-radius:12px;font-size:14px;line-height:1.55;background:#fff;border-left:4px solid var(--blue)} .kmc-b-status.fehler{background:var(--redbg);border-left-color:var(--red)} .kmc-b-status.erfolg{background:var(--greenbg);border-left-color:var(--green)} .kmc-note-mitte{max-width:860px;margin:22px auto 0;text-align:center;font-size:13px;color:var(--slate);line-height:1.6} .kmc-vorlage-link{font-weight:700;color:var(--blue)} @media(max-width:1024px){.kmc-b-gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){ .kmc-b-kopf{flex-wrap:wrap;padding:18px} .kmc-b-bild{width:44px;align-self:flex-start} .kmc-b-text{flex:1 1 calc(100% - 64px)} .kmc-b-kopf .btn{flex:1 1 100%;justify-content:center} .kmc-b-form{padding:18px} .kmc-b-gruppen,.kmc-b-grid{grid-template-columns:1fr} .kmc-tabs button small{display:none} .kmc-res tr.kmc-r{position:relative;padding:12px 14px} .kmc-res tr.kmc-r td.kmc-imb{position:absolute;top:10px;right:10px;width:auto;padding:0} .kmc-res tr.kmc-r td.kmc-imb{display:flex;align-items:center;gap:6px} .kmc-res tr.kmc-r td.kmc-imb::before{display:block;font-size:10.5px;font-weight:600;color:var(--slate);order:-1} .kmc-res tr.kmc-r td:nth-child(2)::before{display:none} .kmc-res tr.kmc-r td:nth-child(2){padding-right:96px} .kmc-res .kmc-akt{text-align:left;white-space:normal;padding-top:8px!important} .kmc-res .kmc-akt::before{display:none!important} .kmc-res .kmc-akt button{margin:0 12px 0 0} .kmc-resfuss{flex-direction:column;align-items:stretch} .kmc-resfuss .kmc-seiten{justify-content:space-between} } @media print{.kmc-bericht,.kmc-resfuss,.kmc-imb,.kmc-edit{display:none!important}} body.v2 .dlbox.werkzeughinweis{background:linear-gradient(120deg,#2563EB 0%,#1D4ED8 24%,#172443 60%,#0F182B 100%)} /* ---- Checklisten abhakbar (30.09.2026) ---- Vorher zeigte nur :hover den Haken. Jetzt setzt main.js .erledigt. */ body.v2 .cki{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent} body.v2 .cki:focus-visible{outline:2px solid var(--blue);outline-offset:2px} body.v2 .cki.erledigt{background:#F3F8FF;border-color:#BFD4F5} body.v2 .cki.erledigt .ckb{border-color:var(--blue);background:linear-gradient(150deg,var(--blue),var(--cyan))} body.v2 .cki.erledigt .ckb::after{opacity:1} body.v2 .cki.erledigt>div{color:#5B6678} body.v2 .cki.erledigt b{color:#3E4A5E} body.v2 .ckfuss{display:flex;align-items:center;gap:14px;margin:-12px 0 26px;font-size:13.5px;color:#6B7385} body.v2 .ckfuss.fertig .ckzahl{color:#15803D;font-weight:600} body.v2 .ckreset{background:none;border:0;padding:0;font:inherit;color:var(--blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.v2 .ckreset[hidden]{display:none} @media print{body.v2 .ckfuss{display:none}} /* ---- Kältemittel-Check auf dem Handy (30.09.2026) ---- Ergebnis und Bericht ganz oben (#kmcKurz), Liste und Ergebnis zeigen je eine Anlage; blättern per Knopf, Schieberegler oder Wischen. */ .kmc-kurz{display:none} @media(max-width:760px){ .kmc-kurz:not([hidden]){display:block;margin:6px 0 16px;padding:16px;border-radius:16px;background:linear-gradient(150deg,#0F182B 0%,#172443 100%);color:#fff;box-shadow:0 18px 40px -24px rgba(10,27,61,.6)} .kmc-kurz-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px} .kmc-kurz-kopf b{font-family:var(--kc-kopf);font-size:17px;font-weight:700} .kmc-kurz-kopf span{font-size:12px;color:#93B4E6;white-space:nowrap} .kmc-kurz-z{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px} .kmc-kz{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:10px 12px} .kmc-kz b{display:block;font-family:var(--kc-kopf);font-size:22px;line-height:1.15;color:#fff} .kmc-kz.rot b{color:#FCA5A5}.kmc-kz.gelb b{color:#FCD34D}.kmc-kz.blau b{color:#93C5FD} .kmc-kz span{display:block;font-size:12px;line-height:1.35;color:#C9D8F2} .kmc-kurz .kmc-kurz-btn{width:100%;justify-content:center;text-align:center} .kmc-kurz-links{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:13px} .kmc-kurz-links a{color:#BFDBFE;font-weight:600;text-decoration:none} .kmc-mit-kurz .kmc-sum{display:none} .kmc-ed tr{margin-bottom:0} .kmc-res tr.kmc-r{margin-top:0} #kmcSeiten,#kmcResSeiten{display:block;margin-top:12px} .kmc-blatt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%} .kmc-blatt button{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:14px;color:var(--navy);cursor:pointer} .kmc-blatt button:disabled{opacity:.35;cursor:default} .kmc-bl-pos{text-align:center;font-size:13.5px;color:var(--slate)} .kmc-bl-pos b{color:var(--navy);font-size:15px} .kmc-bl-eins{display:block;text-align:center;font-size:13px;color:var(--slate)} .kmc-rng{display:block;width:100%;margin:12px 0 0;accent-color:var(--blue)} .kmc-wischtipp{margin:4px 0 0;text-align:center;font-size:11.5px;color:#8B95A6} .kmc-edleiste{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px} .kmc-edleiste::-webkit-scrollbar{display:none} .kmc-edleiste>*{flex:0 0 auto} .kmc-edleiste .kmc-sp{display:none} .kmc-stand{font-size:12px} .kmc-rein-l>tr{animation:kmcReinL .22s ease-out} .kmc-rein-r>tr{animation:kmcReinR .22s ease-out} } @keyframes kmcReinL{from{opacity:.25;transform:translateX(28px)}to{opacity:1;transform:none}} @keyframes kmcReinR{from{opacity:.25;transform:translateX(-28px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.kmc-rein-l>tr,.kmc-rein-r>tr{animation:none}} @media(max-width:760px){.kmc-ih .kmc-ih-lang,.kmc-mit-kurz .kmc-ih-erg{display:none}.kmc-ih .kmc-ih-knoepfe{margin-top:8px}} /* Sprungziele im Check nicht unter der festen Kopfleiste verstecken */ #kmc,#kmcKurz,#kmcPanelListe,#kmcErg,#kmcBericht,#kmcBerichtForm,#kmcResKopf,.kmc-tw{scroll-margin-top:92px} /* ---- Kurzvergleich /vergleich-branchensoftware (01.10.2026) ---- */ .vgtab td{vertical-align:top;line-height:1.45} .vgtab td:first-child{font-weight:600;color:var(--navy)} .vgtab th:last-child,.vgtab td.vg-kc{background:#F2F7FF} .vgtab th:last-child{background:var(--blue)} .vg-ja{display:inline-block;font-weight:800;color:#15803D;margin-right:4px} .vg-teil{display:inline-block;font-size:11.5px;font-weight:700;color:#104CAD;background:#FEF3C7;border-radius:6px;padding:1px 7px;margin-right:4px} .vg-nein{display:inline-block;font-weight:700;color:#94A3B8;margin-right:4px} .vg-quelle{font-size:12.5px;color:#6B7385;line-height:1.55;margin:12px 0 0} @media(max-width:760px){.vgtab{min-width:640px}} /* Antwortkasten auch außerhalb von Beiträgen (vorher ungestylt, z. B. /vergleich-branchensoftware) */ body.v2 .sx .wrap > .abox{position:relative;background:linear-gradient(150deg,#F5F9FF 0%,#EFF6FF 100%);border:1px solid rgba(37,99,235,.14);border-radius:16px;padding:22px 26px 22px 30px;font-size:16px;line-height:1.7;color:#2A3342} body.v2 .sx .wrap > .abox::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue);border-radius:16px 0 0 16px} body.v2 .sx .wrap > .abox .alabel{display:block;font-size:11.5px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--blue);margin-bottom:8px} body.v2 .sx .wrap > .abox p{margin:0} body.v2 .sx .wrap > .abox b{color:var(--navy)} body.v2 .sx .wrap > .abox p + p{margin-top:12px} @media(max-width:760px){ .tbl-scroll .vgtab{min-width:0} .vgtab,.vgtab tbody,.vgtab tr,.vgtab td{display:block;width:100%} .vgtab{background:transparent;box-shadow:none;border-radius:0} .vgtab tr.vg-kopf{display:none} .vgtab tr{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden} .vgtab td{border:0;padding:8px 14px;display:flex;gap:10px;align-items:baseline;font-size:14px} .vgtab td:first-child{display:block;background:var(--navy);color:#fff;font-family:var(--kc-kopf);font-size:13.5px;padding:10px 14px} .vgtab td[data-l]::before{content:attr(data-l);flex:0 0 108px;font-size:11px;line-height:1.3;font-weight:700;color:#6B7385;text-transform:uppercase;letter-spacing:.03em} .vgtab td.vg-kc{background:#F2F7FF;font-weight:600} } /* ---------- Handy und Tablet: ruhige Darstellung (14.10.2026, nachmittags) ---------- Olivers iPhone: Antippen einer Funktions-Kachel brauchte Sekunden, Bloecke erschienen beim Scrollen spaet und schlagartig. Auf der Startseite liefen ununterbrochen 41 Endlos- Animationen: 22 Leuchtkugeln mit Weichzeichner (filter:blur 70/90 px), 18 pulsierende Punkte (box-shadow - wird bei jedem Bild neu gemalt) und ein Drehkreis. Gemessen in Chromes Handy-Nachbildung (390 px, Prozessor 4-fach gedrosselt; das iPhone selbst konnte nicht gemessen werden): beim Scrollen Haupt-Thread zu 75 % belegt, 30 Bilder je Sekunde, Antippen bis zum naechsten Bild 270-390 ms. Mit diesem Block und ohne Verstecken (main.js): 20 %, 60 Bilder je Sekunde, 170-220 ms. Auf Geraeten ohne Zeiger deshalb: Kugeln stehen still und kommen ohne Filter aus - der Verlauf bildet das weichgezeichnete Ergebnis nach (berechnet; im Bildvergleich mit dem alten Stand hoechstens 9 von 255 Helligkeitsstufen, meist unter 3; ihre Deckkraft behalten die Kugeln). Die Punkte leuchten, pulsieren aber nicht. Am Rechner bleibt alles, wie es war. Werte: _NICHT_HOCHLADEN/messung_handy_2026-10-14/. */ @media (hover:none){ body.v2 .orb{filter:none;animation:none} body.v2 .orb.a{background:radial-gradient(circle closest-side,rgba(191,219,254,0.649),rgba(191,219,254,0.644) 4.5%,rgba(191,219,254,0.627) 8.9%,rgba(191,219,254,0.601) 13.1%,rgba(191,219,254,0.561) 18.1%,rgba(191,219,254,0.519) 22.3%,rgba(191,219,254,0.473) 26.5%,rgba(191,219,254,0.283) 42.1%,rgba(191,219,254,0.204) 49%,rgba(191,219,254,0.137) 55.9%,rgba(191,219,254,0.086) 62.6%,rgba(191,219,254,0.046) 70%,rgba(191,219,254,0.021) 78%,rgba(191,219,254,0.007) 86.9%,rgba(191,219,254,0));transform:scale(1.554)} body.v2 .orb.b{background:radial-gradient(circle closest-side,rgba(165,243,252,0.586),rgba(165,243,252,0.583) 3.8%,rgba(165,243,252,0.571) 7.6%,rgba(165,243,252,0.548) 11.9%,rgba(165,243,252,0.514) 16.5%,rgba(165,243,252,0.44) 24.4%,rgba(165,243,252,0.249) 41.2%,rgba(165,243,252,0.19) 46.9%,rgba(165,243,252,0.127) 53.9%,rgba(165,243,252,0.078) 61%,rgba(165,243,252,0.043) 68.3%,rgba(165,243,252,0.019) 76.7%,rgba(165,243,252,0.007) 85.9%,rgba(165,243,252,0));transform:scale(1.677)} body.v2 .orb.c{background:radial-gradient(circle closest-side,rgba(206,224,253,0.513),rgba(206,224,253,0.509) 4.1%,rgba(206,224,253,0.497) 8%,rgba(206,224,253,0.479) 11.5%,rgba(206,224,253,0.453) 15.7%,rgba(206,224,253,0.39) 23.1%,rgba(206,224,253,0.235) 38.5%,rgba(206,224,253,0.173) 45%,rgba(206,224,253,0.113) 52.7%,rgba(206,224,253,0.07) 59.8%,rgba(206,224,253,0.038) 67.5%,rgba(206,224,253,0.017) 76%,rgba(206,224,253,0.006) 85.5%,rgba(206,224,253,0));transform:scale(1.878)} body.v2 .orb.dk.a{background:radial-gradient(circle closest-side,rgba(37,99,235,0.325),rgba(37,99,235,0.322) 4.7%,rgba(37,99,235,0.313) 9.3%,rgba(37,99,235,0.301) 13.7%,rgba(37,99,235,0.281) 18.9%,rgba(37,99,235,0.236) 27.6%,rgba(37,99,235,0.102) 51.2%,rgba(37,99,235,0.069) 58.1%,rgba(37,99,235,0.044) 64.9%,rgba(37,99,235,0.025) 72.1%,rgba(37,99,235,0.012) 79.6%,rgba(37,99,235,0.005) 87.6%,rgba(37,99,235,0));transform:scale(1.488)} body.v2 .orb.dk2.b{background:radial-gradient(circle closest-side,rgba(34,211,238,0.188),rgba(34,211,238,0.181) 9.1%,rgba(34,211,238,0.164) 18.2%,rgba(34,211,238,0.141) 26.5%,rgba(34,211,238,0.061) 50.9%,rgba(34,211,238,0.028) 64.7%,rgba(34,211,238,0.009) 79.4%,rgba(34,211,238,0));transform:scale(1.545)} body.v2 .showcase .bgfx .orb,body.v2 .sec.final .bgfx .orb{filter:none} body.v2 .showcase .bgfx .orb.dk.a,body.v2 .sec.final .bgfx .orb.dk.a{background:radial-gradient(circle closest-side,rgba(37,99,235,0.276),rgba(37,99,235,0.267) 8.3%,rgba(37,99,235,0.241) 17.4%,rgba(37,99,235,0.208) 25%,rgba(37,99,235,0.091) 48.1%,rgba(37,99,235,0.061) 55.6%,rgba(37,99,235,0.04) 62.3%,rgba(37,99,235,0.023) 69.9%,rgba(37,99,235,0.011) 78%,rgba(37,99,235,0));transform:scale(1.662)} body.v2 .showcase .bgfx .orb.dk2.b,body.v2 .sec.final .bgfx .orb.dk2.b{background:radial-gradient(circle closest-side,rgba(34,211,238,0.153),rgba(34,211,238,0.148) 8.4%,rgba(34,211,238,0.135) 17%,rgba(34,211,238,0.052) 48.7%,rgba(34,211,238,0.024) 62.8%,rgba(34,211,238,0.008) 78.3%,rgba(34,211,238,0));transform:scale(1.736)} body.v2 .page-hero .clouds::after{filter:none;animation:none;background:radial-gradient(circle closest-side,rgba(165,243,252,0.354),rgba(165,243,252,0.351) 4.4%,rgba(165,243,252,0.343) 8.8%,rgba(165,243,252,0.329) 13.5%,rgba(165,243,252,0.309) 18.2%,rgba(165,243,252,0.262) 26.8%,rgba(165,243,252,0.112) 50.6%,rgba(165,243,252,0.076) 57.7%,rgba(165,243,252,0.048) 64.7%,rgba(165,243,252,0.028) 71.4%,rgba(165,243,252,0.013) 79.2%,rgba(165,243,252,0.005) 87.8%,rgba(165,243,252,0));transform:scale(1.674)} .live .pd,body.v2 .eb::before,body.v2 .eyebrow::before,body.v2 .eff-label::before{animation:none} }