/* kc-stil.css – KlimaCraft Stil 2026 (seitenweit). Schriften: Geist, Noto Sans (SIL OFL, Lizenzen in assets/fonts). */
/* ===== Teil A: Hero, Software-Bild, App, Handy, Abschnitt „Probleme“ (aus dem Entwurf vom 18.10.2026) ===== */
@font-face{font-family:'Geist';src:url('../fonts/geist-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Geist';src:url('../fonts/geist-sans-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Noto Sans KC';src:url('../fonts/noto-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Noto Sans KC';src:url('../fonts/noto-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Noto Sans KC';src:url('../fonts/noto-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Noto Sans KC';src:url('../fonts/noto-sans-700.woff2') format('woff2');font-weight:700;font-display:swap}
body.kc26{--kc-kopf:'Geist','Inter',system-ui,sans-serif; --kc-kopf-gew:700; --kc-kopf-ls:-.035em; --kc-kopf-ls2:-.022em;
  --e-ink:#0B1220; --e-ink2:#334155; --e-slate:#5B6573; --e-hell:#94A3B8; --e-line:#E3E8EF;
  --e-akz:#2563EB; --e-akz-d:#1D4ED8; --e-akz-hell:#EFF6FF;
  --e-g1:rgba(37,99,235,.62); --e-g2:rgba(96,165,250,.42); --e-g3:rgba(191,219,254,.55);
  --e-knopf:#2563EB; --e-knopf-h:#1D4ED8; --e-knopf-sch:0 8px 20px -10px rgba(37,99,235,.75);
  --e-wa:#25D366;}
body.kc26 h1,body.kc26 h2,body.kc26 h3,body.kc26 h4{font-family:var(--kc-kopf);letter-spacing:var(--kc-kopf-ls2)}
body.kc26 header{padding:0;background:transparent;transition:background .2s,box-shadow .2s}
body.kc26 .nav{max-width:1240px;border:0;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:18px 26px}
body.kc26 header.scrolled,body.kc26 header.solid{background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);box-shadow:0 1px 0 rgba(15,23,42,.08)}
body.kc26 header.scrolled .nav,body.kc26 header.solid .nav{background:transparent;box-shadow:none;padding:12px 26px}
body.kc26 .navlinks{gap:30px}
body.kc26 .navlinks a{color:var(--e-ink2);font-weight:500}
body.kc26 .navlinks a:hover,body.kc26 .navlinks a.on{color:var(--e-ink)}
body.kc26 .navlinks a::after{display:none}
body.kc26 .nav-cta{gap:10px}
body.kc26 .nav .btn{border-radius:10px;padding:10px 16px;font-size:14.5px;white-space:nowrap}
@media(max-width:700px){
  body.kc26 .nav .btn{padding:9px 13px;font-size:14px}
}
body.kc26.v2 .btn-primary,body.kc26 .btn-primary{background:var(--e-knopf);color:#fff;border-radius:10px;box-shadow:var(--e-knopf-sch)}
body.kc26.v2 .btn-primary:hover,body.kc26 .btn-primary:hover{background:var(--e-knopf-h);transform:translateY(-1px);box-shadow:var(--e-knopf-sch)}
.e-wa-nav{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;
  border:1px solid var(--e-line);background:#fff;color:var(--e-ink);font-size:14.5px;font-weight:600;transition:border-color .15s,background .15s}
.e-wa-nav:hover{border-color:#cbd5e1;background:#f8fafc}
.e-wa-nav svg,.e-btn svg.wa{width:18px;height:18px;color:var(--e-wa);flex:none}
@media(max-width:1000px){
  .e-wa-nav{display:none}
}
.e-wa-float{position:fixed;right:16px;bottom:16px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:var(--e-wa);color:#fff;display:none;place-items:center;box-shadow:0 12px 28px -10px rgba(16,128,64,.7)}
.e-wa-float svg{width:28px;height:28px}
@media(max-width:1000px){
  .e-wa-float{display:grid}
}
.eh{position:relative;isolation:isolate;padding:132px 0 72px;background:#fff;overflow:hidden}
.eh-bg{position:absolute;inset:0 0 var(--eh-bg-unten,0) 0;z-index:-2;pointer-events:none;
  background:radial-gradient(95% 62% at 50% 100%,var(--e-g1) 0%,var(--e-g2) 34%,var(--e-g3) 58%,rgba(255,255,255,0) 80%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%)}
.eh-raster{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(15,23,42,.045) 1px,transparent 1px);
  background-size:72px 72px;background-position:center top;
  -webkit-mask-image:radial-gradient(60% 46% at 50% 6%,#000 0%,transparent 78%);mask-image:radial-gradient(60% 46% at 50% 6%,#000 0%,transparent 78%)}
.eh-in{position:relative;text-align:center;max-width:1000px;margin:0 auto;padding:0 24px}
.eh-pill{display:inline-flex;align-items:center;gap:10px;min-height:32px;padding:4px 6px 4px 12px;border:1px solid var(--e-line);
  border-radius:999px;background:rgba(255,255,255,.8);font-size:13px;font-weight:500;color:var(--e-ink2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 2px rgba(15,23,42,.04);text-decoration:none}
.eh-pill .p-dot{width:7px;height:7px;border-radius:50%;background:var(--e-akz);box-shadow:0 0 0 3px var(--e-akz-hell)}
.eh-pill b{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:999px;background:var(--e-akz-hell);
  color:var(--e-akz-d);font-weight:600}
.eh-pill:hover b{background:#fff;box-shadow:inset 0 0 0 1px var(--e-akz)}
.eh-bread{font-size:13px;color:var(--e-slate);display:flex;gap:8px;justify-content:center;align-items:center;margin-bottom:18px}
.eh-bread a{color:var(--e-slate)}
.eh-bread a:hover{color:var(--e-ink)}
body.kc26 .eh-in h1{font-family:var(--kc-kopf);font-weight:var(--kc-kopf-gew);font-size:clamp(36px,4.6vw,60px);line-height:1.05;
  letter-spacing:var(--kc-kopf-ls);color:var(--e-ink);margin:20px auto 0;max-width:17em;text-wrap:balance}
body.kc26 .eh-in h1 .akz{color:var(--e-akz)}
.eh-lead{margin:18px auto 0;max-width:650px;font-size:clamp(16.5px,1.55vw,19px);line-height:1.6;color:var(--e-slate);text-wrap:pretty}
.eh-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.e-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:10px;
  font-weight:600;font-size:15.5px;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background .15s,transform .15s,box-shadow .15s,border-color .15s}
.e-btn-haupt{background:var(--e-knopf);color:#fff;box-shadow:var(--e-knopf-sch)}
.e-btn-haupt:hover{background:var(--e-knopf-h);transform:translateY(-1px);color:#fff}
.e-btn-neben{background:#fff;color:var(--e-ink);border:1px solid var(--e-line);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.e-btn-neben:hover{border-color:#CBD5E1;background:#F8FAFC;color:var(--e-ink)}
.e-btn .pf{transition:transform .15s}
.e-btn:hover .pf{transform:translateX(2px)}
.e-btn-wa{display:none}
.eh-walink{display:none;margin-top:16px;font-size:14.5px;color:var(--e-slate)}
.eh-walink a{display:inline-flex;align-items:center;gap:7px;color:var(--e-ink2);font-weight:600;border-bottom:1px solid transparent}
.eh-walink a:hover{border-bottom-color:currentColor}
.eh-walink svg{width:17px;height:17px;color:var(--e-wa)}
.eh-walink,.eh-walink{display:block}
.eh-proof{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;flex-wrap:wrap}
.eh-stapel{display:flex;align-items:center}
.eh-stapel span{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-left:-10px;display:grid;place-items:center;
  box-shadow:0 2px 6px -2px rgba(15,23,42,.18)}
.eh-stapel span:first-child{margin-left:0}
.eh-stapel svg{width:17px;height:17px}
.eh-stapel .s1{background:#DBEAFE;color:#1D4ED8}
.eh-stapel .s2{background:#E0F2FE;color:#0369A1}
.eh-stapel .s3{background:#FFEDD5;color:#C2410C}
.eh-stapel .s4{background:#D1FAE5;color:#047857}
.eh-ptxt{text-align:left;font-size:14.5px;line-height:1.4;color:var(--e-ink2)}
.eh-ptxt b{color:var(--e-ink);font-weight:600}
.eh-ptxt small{display:block;font-size:13px;color:var(--e-slate);margin-top:2px}
.eh-checks{display:flex;gap:10px 22px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:14.5px;color:var(--e-ink2)}
.eh-checks span{display:inline-flex;align-items:center;gap:8px}
.eh-checks i{width:20px;height:20px;border-radius:50%;background:#DCFCE7;color:#15803D;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.eh-screen{position:relative;max-width:1232px;margin:52px auto 0;padding:0 24px}
.eh-screen::before{content:"";position:absolute;left:50%;top:-340px;width:min(1680px,150vw);height:900px;transform:translateX(-50%);
  z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--e-g1) 0%,var(--e-g2) 30%,var(--e-g3) 54%,rgba(255,255,255,0) 74%)}
.e-rahmen{position:relative;padding:10px;border-radius:26px;background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 90px -40px rgba(10,27,61,.5)}
.e-fenster{position:relative;border-radius:17px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);height:var(--fenster-h,640px)}
.e-skala{position:absolute;left:0;top:0;transform-origin:0 0;width:var(--vb,1440px)}
.e-fenster::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 92%);z-index:5}
.eh-unterzeile{max-width:760px;margin:22px auto 0;text-align:center;font-size:13px;color:var(--e-slate)}
.kc-app{position:relative;font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;color:#0f172a;background:#fff;display:flex;height:100%}
.kc-app *{box-sizing:border-box}
.kc-app .a-seite{width:236px;flex:none;border-right:1px solid #e8edf3;background:#fbfcfe;padding:18px 14px;display:flex;flex-direction:column;gap:3px}
.kc-app .a-logo{display:flex;align-items:center;gap:10px;padding:4px 8px 16px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.kc-app .a-logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1e40af,#2563eb 55%,#0ea5e9);color:#fff;display:grid;place-items:center}
.kc-app .a-logo i svg{width:17px;height:17px}
.kc-app .a-grp{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;padding:12px 10px 6px}
.kc-app .a-pkt{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:10px;font-size:14px;color:#334155}
.kc-app .a-pkt svg{width:17px;height:17px;color:#64748b;flex:none}
.kc-app .a-pkt b{margin-left:auto;font-size:12px;font-weight:600;color:#64748b}
.kc-app .a-pkt.an{background:#0f172a;color:#fff}
.kc-app .a-pkt.an svg{color:#fff}
.kc-app .a-pkt.an b{color:#cbd5e1}
.kc-app .a-fuss{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid #e8edf3;font-size:13px;color:#334155}
.kc-app .a-fuss span{width:32px;height:32px;border-radius:50%;background:#e0f2fe;color:#0369a1;display:grid;place-items:center;font-weight:600;font-size:12px}
.kc-app .a-fuss small{display:block;color:#94a3b8;font-size:12px}
.kc-app .a-haupt{flex:1;min-width:0;display:flex;flex-direction:column}
.kc-app .a-leiste{height:58px;flex:none;display:flex;align-items:center;gap:14px;padding:0 28px;border-bottom:1px solid #eef2f6}
.kc-app .a-pfad{font-size:13px;color:#64748b}
.kc-app .a-pfad b{color:#0f172a;font-weight:600}
.kc-app .a-such{margin-left:auto;display:flex;align-items:center;gap:8px;width:280px;height:36px;padding:0 12px;border:1px solid #e8edf3;border-radius:10px;color:#94a3b8;font-size:13px}
.kc-app .a-such svg{width:15px;height:15px}
.kc-app .a-glocke{position:relative;width:36px;height:36px;border-radius:10px;border:1px solid #e8edf3;display:grid;place-items:center;color:#64748b}
.kc-app .a-glocke svg{width:16px;height:16px}
.kc-app .a-glocke i{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:#f43f5e;border:2px solid #fff}
.kc-app .a-inhalt{position:relative;flex:1;padding:22px 30px 0;overflow:hidden}
.kc-app.a-schmal .a-seite{display:none}
.kc-app.a-schmal .a-such{display:none}
.kc-app.a-schmal .a-inhalt{padding:18px 18px 0}
.kc-app .a-zeiger{position:absolute;z-index:20;left:0;top:0;width:24px;height:24px;pointer-events:none;opacity:0;
  transition:transform 1.1s cubic-bezier(.45,.05,.25,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.kc-app .a-zeiger.klick::after{content:"";position:absolute;left:-10px;top:-10px;width:24px;height:24px;border-radius:50%;
  border:2px solid #2563eb;animation:aKlick .5s ease-out forwards}
@keyframes aKlick{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}
.kc-app .a-auf{position:absolute;inset:22px 30px 0 30px;z-index:10;visibility:hidden}
.kc-app.a-schmal .a-auf{inset:18px 18px 0 18px}
.kc-app .a-auf.zeigt{visibility:visible}
.kc-app .kd-k.a-hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(15,23,42,.35)}
.kc-app .kd-zahl.zaehlt{font-variant-numeric:tabular-nums}
.kc-app .a-toast{position:absolute;z-index:30;right:28px;top:74px;display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;
  background:#0f172a;color:#fff;font-size:13.5px;box-shadow:0 18px 40px -18px rgba(15,23,42,.6);opacity:0;transform:translateY(-8px);
  transition:opacity .3s,transform .3s}
.kc-app .a-toast.zeigt{opacity:1;transform:none}
.kc-app .a-toast i{width:22px;height:22px;border-radius:50%;background:#10b981;display:grid;place-items:center;font-style:normal;font-size:12px}
.kc-app .a-stand{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;transition:background .3s,color .3s}
.kc-app .a-stand.vorort{background:#eff6ff;color:#1d4ed8}
.kc-app .a-stand.fertig{background:#ecfdf5;color:#047857}
.kc-app .a-stand.ueber{background:#fff1f2;color:#be123c}
.kc-app .a-stand.plan{background:#f1f5f9;color:#475569}
.kc-app .a-stand .pulse{width:7px;height:7px;border-radius:50%;background:currentColor;animation:aPuls 1.4s ease-in-out infinite}
@keyframes aPuls{0%,100%{opacity:1}50%{opacity:.25}}
.e-handy{position:absolute;z-index:6;right:-6px;bottom:-34px;width:262px;border-radius:40px;background:#0b1220;padding:9px;
  box-shadow:0 40px 70px -30px rgba(10,27,61,.6),0 0 0 1px rgba(255,255,255,.06) inset}
.e-handy .h-glas{position:relative;border-radius:32px;background:#fff;overflow:hidden;height:536px;font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;color:#0f172a}
.e-handy .h-insel{position:absolute;top:9px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0b1220;z-index:3}
.e-handy .h-status{display:flex;justify-content:space-between;align-items:center;height:42px;padding:0 22px;font-size:12px;font-weight:600}
.e-handy .h-kopf{padding:4px 16px 12px;border-bottom:1px solid #eef2f6}
.e-handy .h-kopf small{display:block;font-size:11px;color:#64748b}
.e-handy .h-kopf b{display:block;font-size:15px;line-height:1.25;margin-top:2px}
.e-handy .h-off{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:22px;padding:0 9px;border-radius:999px;background:#fffbeb;color:#b45309;font-size:11px;font-weight:600;white-space:nowrap}
.e-handy .h-off i{width:6px;height:6px;border-radius:50%;background:#f59e0b}
.e-handy .h-liste{padding:8px 16px}
.e-handy .h-pkt{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #f1f5f9;font-size:12.5px}
.e-handy .h-pkt .h-box{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #cbd5e1;display:grid;place-items:center;color:#fff;font-size:12px;transition:background .25s,border-color .25s}
.e-handy .h-pkt.ok .h-box{background:#10b981;border-color:#10b981}
.e-handy .h-pkt small{margin-left:auto;color:#64748b;font-size:11px;white-space:nowrap;padding-left:6px}
.e-handy .h-fotos{display:flex;align-items:center;gap:6px;padding:8px 16px 0}
.e-handy .h-fotos em{font-style:normal;font-size:11px;color:#64748b;margin-left:4px;white-space:nowrap}
.e-handy .h-fotos span{width:46px;height:40px;flex:none;border-radius:8px;position:relative;overflow:hidden;display:grid;place-items:center;color:rgba(255,255,255,.85)}
.e-handy .h-fotos span svg{width:17px;height:17px}
.e-handy .h-fotos .f1{background:linear-gradient(150deg,#64748b,#94a3b8)}
.e-handy .h-fotos .f2{background:linear-gradient(150deg,#475569,#7c8ba1)}
.e-handy .h-fotos .f3{background:linear-gradient(150deg,#0369a1,#38bdf8)}
.e-handy .h-unter{margin:10px 16px 0;border:1.5px dashed #cbd5e1;border-radius:12px;height:84px;position:relative}
.e-handy .h-unter small{position:absolute;left:10px;top:6px;font-size:10.5px;color:#94a3b8}
.e-handy .h-unter svg{position:absolute;left:14px;right:14px;top:22px;width:calc(100% - 28px);height:52px}
.e-handy .h-unter path{fill:none;stroke:#0f172a;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.e-handy .h-unter.zeichnet path{transition:stroke-dashoffset 1.4s ease-in-out;stroke-dashoffset:0}
.e-handy .h-knopf{margin:12px 16px 0;height:42px;border-radius:12px;background:#2563eb;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600;transition:transform .15s,background .2s}
.e-handy .h-knopf.drueckt{transform:scale(.97);background:#1d4ed8}
.e-handy .h-knopf.fertig{background:#10b981}
body.kc26 .eh-demo{padding-bottom:190px}
body.kc26 #anfrage.e-anfrage{position:relative;z-index:3;margin-top:-170px;padding-top:0}
body.kc26 #anfrage.e-anfrage .tex{display:none}
body.kc26 #anfrage.e-anfrage .kd-karte{border-radius:20px;border:1px solid rgba(15,23,42,.08);
  box-shadow:0 40px 90px -40px rgba(10,27,61,.45),0 2px 4px rgba(15,23,42,.04);padding:34px 36px}
body.kc26 #anfrage.e-anfrage .kd-schritt h2{font-family:var(--kc-kopf);letter-spacing:var(--kc-kopf-ls2)}
body.kc26 .kd-balken i.an{background:var(--e-akz)}
@media (prefers-reduced-motion:reduce){
  .kc-app *,.e-handy *{animation:none!important;transition:none!important}
}
@media(max-width:1100px){
  .e-handy{right:12px;width:230px}
  .e-handy .h-glas{height:470px}
}
@media(max-width:900px){
  .eh{padding:118px 0 56px}
  .eh-proof{gap:10px}
  .eh-screen{margin-top:44px;padding:0 16px}
  .e-rahmen{padding:6px;border-radius:18px}
  .e-fenster{border-radius:13px}
}
@media(max-width:700px){
  .eh{padding:104px 0 48px}
  .eh-in{padding:0 18px}
  body.kc26 .eh-in h1{font-size:clamp(31px,8.6vw,40px);line-height:1.08;margin-top:18px}
  .eh-lead{font-size:16.5px;margin-top:16px}
  .eh-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .eh-cta .e-btn{width:100%}
  .eh-ptxt{text-align:center}
  .eh-proof{flex-direction:column;gap:10px}
  .eh-pill{font-size:12px}
  .e-handy{position:relative;right:auto;bottom:auto;margin:-120px auto 0;width:236px}
  .e-handy .h-glas{height:480px}
  body.kc26 .eh-demo{padding-bottom:150px}
  body.kc26 #anfrage.e-anfrage{margin-top:-130px}
  body.kc26 #anfrage.e-anfrage .kd-karte{padding:24px 18px}
}
body.kc26 .kc-app h1,body.kc26 .kc-app h2,body.kc26 .kc-app h3,body.kc26 .kc-app h4{font-family:inherit}
@media(max-width:700px){
  .e-handy .h-pkt small{display:none}
  .e-handy .h-fotos em{display:none}
}
.ep{position:relative;padding:112px 0 120px;background:linear-gradient(#fff 0,#F8FAFC 160px,#F8FAFC calc(100% - 160px),#fff 100%);
  border-top:1px solid var(--e-line)}
.ep-in{max-width:1240px;margin:0 auto;padding:0 24px}
.ep-kopf{text-align:center;max-width:840px;margin:0 auto}
.ep-marke{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--e-line);border-radius:999px;
  background:#fff;font-size:13px;font-weight:500;color:var(--e-ink2)}
.ep-marke i{width:7px;height:7px;border-radius:50%;background:#F97316;box-shadow:0 0 0 3px #FFEDD5}
body.kc26 .ep h2{font-family:var(--kc-kopf);font-weight:var(--kc-kopf-gew);font-size:clamp(30px,3.6vw,46px);line-height:1.08;
  letter-spacing:var(--kc-kopf-ls);color:var(--e-ink);margin:18px auto 0;max-width:17em;text-wrap:balance}
.ep-kopf p{margin:18px auto 0;max-width:690px;font-size:17px;line-height:1.65;color:var(--e-slate);text-wrap:pretty}
.ep-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:56px}
.ep-k{position:relative;background:#fff;border:1px solid var(--e-line);border-radius:18px;padding:24px 24px 22px;min-width:0;
  display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(15,23,42,.22)}
.ep-s5{grid-column:span 5}
.ep-s4{grid-column:span 4}
.ep-s3{grid-column:span 3}
.ep-s12{grid-column:span 12}
.ep-kt{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ep-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.ep-ic svg{width:18px;height:18px}
.ep-ic.bl{background:#EFF6FF;color:#2563EB}
.ep-ic.or{background:#FFF7ED;color:#C2410C}
.ep-ic.rot{background:#FEF2F2;color:#DC2626}
.ep-ic.navy{background:#EEF2FF;color:#1E3A8A}
.ep-nr{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--e-hell);letter-spacing:.06em}
body.kc26 .ep-k h3{font-family:var(--kc-kopf);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:var(--e-ink);margin:0}
.ep-k p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--e-slate)}
.ep-bild{margin-top:20px;flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.ep-chat{background:#F8FAFC;border:1px solid #E9EEF4;border-radius:14px;overflow:hidden}
.c-kopf{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#fff;border-bottom:1px solid #EDF1F6}
.c-av{width:30px;height:30px;border-radius:50%;background:#F1F5F9;color:#475569;display:grid;place-items:center;flex:none}
.c-av svg{width:16px;height:16px}
.c-kopf b{display:block;font-size:13px;line-height:1.2;color:var(--e-ink)}
.c-kopf small{display:block;font-size:11.5px;color:var(--e-slate)}
.c-zahl{margin-left:auto;font-size:11px;font-weight:600;color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:999px;padding:2px 8px;white-space:nowrap}
.c-verlauf{padding:12px;display:flex;flex-direction:column;gap:8px}
.c-m{max-width:84%;align-self:flex-start;background:#fff;border:1px solid #E6EBF2;border-radius:12px 12px 12px 4px;padding:7px 10px 5px;
  font-size:13px;line-height:1.4;color:var(--e-ink2);box-shadow:0 1px 1px rgba(15,23,42,.03)}
.c-m b{display:block;font-size:11.5px;color:#2563EB;margin-bottom:1px}
.c-m.c-k b{color:#7C3AED}
.c-m small{display:block;text-align:right;font-size:10.5px;color:var(--e-hell);margin-top:1px}
.c-ich{align-self:flex-end;background:#ECFDF5;border-color:#D1FAE5;border-radius:12px 12px 4px 12px}
.c-sys{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#B91C1C;background:#FEF2F2;
  border:1px solid #FECACA;border-radius:8px;padding:5px 10px;margin-top:2px}
.c-sys svg{width:14px;height:14px}
.ep-papier{background:#F1F5F9;border:1px solid #E6EBF2;border-radius:14px;padding:22px 18px 14px;display:flex;flex-direction:column;align-items:center}
.z-blatt{width:100%;max-width:300px;background:#FFFDF7;border-radius:3px;padding:12px 16px 10px;transform:rotate(-1.6deg);
  box-shadow:0 1px 0 #E7E5E4,0 12px 26px -14px rgba(15,23,42,.38)}
.z-kopf{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:7px;border-bottom:1px solid #E5E7EB;font-size:12.5px}
.z-kopf b{color:#1F2937}
.z-kopf span{color:#6B7280}
.z-z{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #EEF2FF;font-size:12px;color:#4B5563}
.z-z i{font-style:italic;color:#1E40AF;white-space:nowrap}
.z-weg{filter:blur(2px);opacity:.7}
.z-route{display:flex;align-items:center;gap:8px;width:100%;margin-top:18px;font-size:11.5px;color:var(--e-slate)}
.z-route i{flex:1;height:1px;background:repeating-linear-gradient(to right,#CBD5E1 0 4px,transparent 4px 8px)}
.z-route b{font-weight:600;color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:999px;padding:2px 8px;white-space:nowrap}
.ep-buch{background:#fff;border:1px solid #E6EBF2;border-radius:14px;overflow:hidden}
.b-kopf{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid #EDF1F6;background:#F8FAFC;font-size:12.5px}
.b-kopf b{color:var(--e-ink)}
.b-kopf span{color:var(--e-slate)}
.b-z{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid #F1F5F9;font-size:13px;color:var(--e-ink2)}
.b-z span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-z em{font-style:normal;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 8px;white-space:nowrap;flex:none}
.b-z em.ok{color:#15803D;background:#F0FDF4;border:1px solid #BBF7D0}
.b-z em.rot{color:#B91C1C;background:#FEF2F2;border:1px solid #FECACA}
.b-z em.gelb{color:#B45309;background:#FFFBEB;border:1px solid #FDE68A}
.b-fuss{display:flex;align-items:center;gap:6px;padding:9px 12px;font-size:12px;font-weight:600;color:#B91C1C}
.b-fuss svg{width:14px;height:14px}
.ep-insel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:center;padding:30px}
.i-text p{max-width:470px}
.i-zahlen{display:flex;margin-top:22px;border:1px solid var(--e-line);border-radius:12px;overflow:hidden;max-width:470px}
.i-zahlen div{flex:1;padding:12px 14px;border-left:1px solid var(--e-line);min-width:0}
.i-zahlen div:first-child{border-left:0}
.i-zahlen b{display:block;font-family:var(--kc-kopf);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--e-ink)}
.i-zahlen span{display:block;font-size:12.5px;line-height:1.35;color:var(--e-slate);margin-top:2px}
.i-zahlen .hi b{color:#DC2626}
.i-netz{position:relative;width:100%;aspect-ratio:600/360;background:#F8FAFC;border:1px solid #E9EEF4;border-radius:14px;
  background-image:radial-gradient(circle at 50% 50%,rgba(37,99,235,.06),transparent 55%)}
.i-netz>svg{position:absolute;inset:0;width:100%;height:100%}
.i-netz line{stroke:#CBD5E1;stroke-width:1.5;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.i-n{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;
  background:#fff;border:1px solid var(--e-line);border-radius:10px;font-size:12.5px;font-weight:500;color:var(--e-ink2);white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 6px 14px -10px rgba(15,23,42,.25)}
.i-typ{height:22px;min-width:22px;padding:0 5px;border-radius:6px;display:grid;place-items:center;font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff}
.i-typ.x{background:#16A34A}
.i-typ.w{background:#2563EB}
.i-typ.ic{background:#F1F5F9;color:#475569;padding:0}
.i-typ.ic svg{width:13px;height:13px}
.i-mitte{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0B1220;color:#fff;border-radius:14px;padding:11px 18px;
  text-align:center;white-space:nowrap;box-shadow:0 0 0 6px rgba(11,18,32,.06),0 18px 34px -16px rgba(11,18,32,.6)}
.i-mitte b{display:block;font-family:var(--kc-kopf);font-size:16px;line-height:1.2}
.i-mitte small{display:block;font-size:11.5px;color:#CBD5E1;margin-top:2px}
.i-mitte::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none}
.ep-kopfteil{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;margin-top:104px}
body.kc26 .ep-kopfteil h3{font-family:var(--kc-kopf);font-weight:var(--kc-kopf-gew);font-size:clamp(26px,2.7vw,36px);line-height:1.1;
  letter-spacing:var(--kc-kopf-ls);color:var(--e-ink);margin:0;text-wrap:balance}
.ep-kt-text p{margin:18px 0 0;font-size:17px;line-height:1.65;color:var(--e-slate)}
.ep-liste{background:#fff;border:1px solid var(--e-line);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -32px rgba(15,23,42,.3)}
.l-kopf{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid #EDF1F6}
.l-ic{width:30px;height:30px;border-radius:8px;background:#EEF2FF;color:#4338CA;display:grid;place-items:center;flex:none}
.l-ic svg{width:16px;height:16px}
.l-kopf b{font-size:14px;color:var(--e-ink)}
.l-kopf small{margin-left:auto;font-size:12px;color:var(--e-slate)}
.l-z{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid #F1F5F9;font-size:14.5px;line-height:1.35;color:var(--e-ink2)}
.l-z i{position:relative;width:16px;height:16px;border-radius:50%;border:2px solid #F59E0B;flex:none}
.l-z i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(245,158,11,.45);opacity:0}
.l-fuss{display:flex;gap:18px;padding:11px 18px;background:#F8FAFC;font-size:12.5px;color:var(--e-slate)}
.l-fuss b{color:var(--e-ink)}
.ep-cap{margin:12px 0 0;text-align:center;font-size:13.5px;color:var(--e-slate)}
.ep-gross{max-width:880px;margin:96px auto 0;text-align:center;font-family:var(--kc-kopf);font-weight:600;font-size:clamp(22px,2.4vw,30px);
  line-height:1.35;letter-spacing:-.02em;color:var(--e-ink);text-wrap:balance}
.ep-gross span{color:var(--e-slate)}
.ep-wende{position:relative;overflow:hidden;margin-top:72px;background:#0B1220;border-radius:22px;padding:44px 44px 36px;color:#CBD5E1;
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;
  background-image:radial-gradient(55% 120% at 100% 0%,rgba(37,99,235,.32),transparent 62%),radial-gradient(40% 80% at 0% 100%,rgba(14,165,233,.12),transparent 60%)}
body.kc26 .ep-wende h3{font-family:var(--kc-kopf);font-weight:var(--kc-kopf-gew);font-size:clamp(26px,2.7vw,36px);line-height:1.1;
  letter-spacing:var(--kc-kopf-ls);color:#fff;margin:0;text-wrap:balance}
.w-rechts p{margin:0 0 14px;font-size:16px;line-height:1.65;color:#CBD5E1}
.w-rechts p:last-child{margin:0}
.w-rechts b{color:#fff;font-weight:600}
.w-kette{grid-column:1/-1;display:flex;align-items:center;margin-top:14px;padding-top:28px;border-top:1px solid rgba(148,163,184,.18)}
.w-schritt{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px 0 8px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.24);color:#E2E8F0;font-size:13.5px;font-weight:500;white-space:nowrap;flex:none;transition:background .3s,border-color .3s}
.w-schritt .ic{width:24px;height:24px;border-radius:7px;background:rgba(96,165,250,.14);color:#93C5FD;display:grid;place-items:center}
.w-schritt .ic svg{width:14px;height:14px}
.w-linie{position:relative;flex:1;min-width:10px;height:2px;background:rgba(148,163,184,.25);overflow:hidden}
.w-linie::after{content:"";position:absolute;inset:0;background:#60A5FA;transform:scaleX(0);transform-origin:left}
@keyframes ep-rein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ep-blatt{from{opacity:0;transform:translateY(14px) rotate(-5deg)}to{opacity:1;transform:rotate(-1.6deg)}}
@keyframes ep-plopp{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes ep-fluss{to{stroke-dashoffset:-18}}
@keyframes ep-ring{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.6)}}
@keyframes ep-puls{0%{box-shadow:0 0 0 0 rgba(220,38,38,.38)}100%{box-shadow:0 0 0 14px rgba(220,38,38,0)}}
@keyframes ep-mitte{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes ep-knoten{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes ep-schritt{0%,100%{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.24)}
  6%,58%{background:rgba(37,99,235,.2);border-color:rgba(96,165,250,.7)}70%{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.24)}}
@keyframes ep-linie{0%{transform:scaleX(0)}6%,58%{transform:scaleX(1)}70%,100%{transform:scaleX(0);transform-origin:right}}
@media (prefers-reduced-motion:no-preference){
  .ep-an [data-sicht]:not(.sicht) :is(.c-m,.c-sys,.z-blatt,.z-route,.b-z em,.b-fuss,.i-n,.i-mitte,.l-z){opacity:0}
  .ep-an .sicht .c-m{animation:ep-rein .45s cubic-bezier(.2,.8,.2,1) both}
  .ep-an .sicht .c-m:nth-child(1){animation-delay:.25s}
  .ep-an .sicht .c-m:nth-child(2){animation-delay:1.05s}
  .ep-an .sicht .c-m:nth-child(3){animation-delay:1.85s}
  .ep-an .sicht .c-sys{animation:ep-plopp .5s 2.9s both}
  .ep-an .sicht .z-blatt{animation:ep-blatt .7s .2s cubic-bezier(.2,.8,.2,1) both}
  .ep-an .sicht .z-route{animation:ep-rein .5s 1s both}
  .ep-an .sicht .b-z em{animation:ep-plopp .4s both}
  .ep-an .sicht .b-z:nth-child(2) em{animation-delay:.3s}
  .ep-an .sicht .b-z:nth-child(3) em{animation-delay:.75s}
  .ep-an .sicht .b-z:nth-child(4) em{animation-delay:1.2s}
  .ep-an .sicht .b-fuss{animation:ep-rein .4s 1.7s both}
  .ep-an .sicht .i-n{animation:ep-knoten .45s calc(.15s * var(--i)) both}
  .ep-an .sicht .i-mitte{animation:ep-mitte .5s 1.15s both}
  .ep-an .sicht .i-mitte::after{animation:ep-puls 2.2s 1.8s ease-out infinite}
  .ep-an .sicht .i-netz line{animation:ep-fluss 1.1s linear infinite}
  .ep-an .sicht .l-z{animation:ep-rein .45s calc(.2s + .28s * var(--i)) both}
  .ep-an .sicht .l-z i::after{animation:ep-ring 6s calc(2s + 1.2s * var(--i)) ease-out infinite}
  .ep-an .sicht .w-schritt{animation:ep-schritt 9s calc(.9s * var(--i)) infinite}
  .ep-an .sicht .w-linie::after{animation:ep-linie 9s calc(.9s * var(--i) - .45s) infinite}
}
@media(max-width:1100px){
  .ep-s5,.ep-s4{grid-column:span 6}
  .ep-s3{grid-column:span 12}
  .ep-insel{grid-template-columns:1fr}
  .i-text p,.i-zahlen{max-width:none}
  .w-kette{flex-wrap:wrap;gap:10px}
  .w-linie{display:none}
}
@media(max-width:900px){
  .ep{padding:84px 0 92px}
  .ep-kopfteil{grid-template-columns:1fr;gap:28px;margin-top:72px}
  .ep-wende{grid-template-columns:1fr;padding:32px 24px 28px}
}
@media(max-width:700px){
  .ep-in{padding:0 16px}
  .ep-s5,.ep-s4,.ep-s3{grid-column:span 12}
  .ep-raster{margin-top:40px}
  .ep-insel{padding:22px 18px}
  .i-netz{aspect-ratio:auto;display:flex;flex-wrap:wrap;gap:8px;padding:14px;justify-content:center}
  .i-netz>svg{display:none}
  .i-n{position:static;transform:none}
  .i-mitte{position:static;transform:none;order:-1;width:100%;margin-bottom:6px}
  .ep-an .sicht .i-n{animation-name:ep-rein}
  .ep-an .sicht .i-mitte{animation-name:ep-plopp}
  .ep-gross{margin-top:64px}
  .ep-wende{margin-top:56px}
  .w-schritt{font-size:13px}
}


/* =====================================================================
   Teil B: seitenweite Gestaltung „Stil 2026“
   Leitlinie (wie der Hero-Entwurf vom 18.10.2026): weiß und ruhig, dünne
   Rahmen statt Schatten-Wolken, keine Deko-Kreise/Punkte/Wellen, eine
   Akzentfarbe (Blau), dunkle Flächen in Nachtblau mit leisem Leuchten,
   Überschriften in Geist. Gilt nur für Seiten mit body.kc26.
   ===================================================================== */
body.kc26{
  --navy:#0B1220; --navy2:#111A2E; --navy3:#070C17;
  --sky-top:#FFFFFF; --sky-mid:#FFFFFF; --sky-low:#FFFFFF;
  --line:#E3E8EF; --line2:#EEF2F6; --bg2:#F8FAFC; --bg3:#F1F5F9;
  --slate:#5B6573; --slate-l:#94A3B8;
  --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -32px rgba(15,23,42,.30);
  --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(15,23,42,.24);
  --kc-dunkel:#0B1220;
  --kc-glanz:radial-gradient(70% 60% at 50% -12%,rgba(37,99,235,.30),transparent 62%),radial-gradient(45% 55% at 100% 100%,rgba(14,165,233,.10),transparent 60%);
  color:var(--e-ink2);
}
body.kc26 :is(h1,h2,h3,h4){font-family:var(--kc-kopf)}

/* ---------- Deko weg: Wolken, Kreise, Punkteraster, Wellen, Texturen ---------- */
body.kc26 :is(.clouds,.orb,.bgfx,.deco,.vdeco,.tex,.grid-bg){display:none!important}
body.kc26 .bc::before,body.kc26 .ftile::before{display:none}

/* ---------- Abschnitte: mehr Luft, ruhige Flächen ---------- */
body.kc26 .sec{padding:112px 0}
body.kc26 .sx{padding:104px 0}
body.kc26 .sx.tight{padding:80px 0}
body.kc26 .sx.tint,body.kc26 .sx.tint2,body.kc26 #faq{background:#F8FAFC;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
body.kc26 .sx.tint+.sx.tint,body.kc26 .sx.tint2+.sx.tint2{border-top:0}
body.kc26 :is(.sx.dark,.sec.dark,.final){background:var(--kc-dunkel);background-image:var(--kc-glanz);color:#CBD5E1}
body.kc26 :is(.sx.dark,.sec.dark,.final) :is(h2,h3,h4){color:#fff}
body.kc26 :is(.sx.dark,.final) p{color:#A9B4C6}
body.kc26 .final{padding:120px 0}

/* ---------- Abschnittsköpfe ---------- */
body.kc26 :is(.shead,.shead2) h2{font-family:var(--kc-kopf);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
body.kc26 :is(.shead,.shead2) p{font-size:17px;line-height:1.65;color:var(--e-slate);text-wrap:pretty}
body.kc26 :is(.shead.lt,.shead2.lt,.sx.dark .shead,.sx.dark .shead2) h2{color:#fff}
/* Einleitungstext in dunklen Abschnitten hell halten (Runde 1 hatte ihn grau auf Nachtblau) */
body.kc26 :is(.showcase,.szene-sec,.orbit-sec,.final,.sx.dark,.sec.dark) :is(.shead,.shead2) p,body.kc26 :is(.shead.lt,.shead2.lt) p{color:rgba(214,228,252,.85)}
body.kc26 :is(.shead.lt,.shead2.lt,.sx.dark .shead,.sx.dark .shead2) p{color:#A9B4C6}
/* Farbverlauf in Überschriften -> eine ruhige Akzentfarbe */
body.kc26 :is(h1,h2,h3) :is(em,.gr,.hl,.grad){background:none!important;-webkit-text-fill-color:currentColor;color:var(--e-akz)!important;font-style:normal}
body.kc26 :is(.sx.dark,.final,.shead.lt,.shead2.lt,.bc.dark,.bc.warm) :is(h1,h2,h3) :is(em,.gr,.hl,.grad){color:#93C5FD!important}

/* Kleine Überzeile: Pille mit Punkt statt GROSSBUCHSTABEN */
body.kc26 :is(.eb,.eyebrow,.eff-label){display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--e-ink2);box-shadow:none}
body.kc26 :is(.eb,.eyebrow,.eff-label)::before{width:7px;height:7px;background:var(--e-akz);box-shadow:0 0 0 3px var(--e-akz-hell);animation:none}
body.kc26 :is(.eb.dark,.eyebrow.lt,.sx.dark .eb,.sx.dark .eyebrow,.final .eb,.final .eyebrow){background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.24);color:#CBD5E1}
body.kc26 :is(.eb.dark,.eyebrow.lt,.sx.dark .eb,.sx.dark .eyebrow,.final .eb,.final .eyebrow)::before{background:#60A5FA;box-shadow:0 0 0 3px rgba(96,165,250,.18)}
body.kc26 .badge2{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--e-ink2)}

/* ---------- Knöpfe ---------- */
body.kc26 .btn{border-radius:10px;padding:13px 22px;font-size:15px;font-weight:600;gap:8px;line-height:1.2}
body.kc26 .btn.sm{padding:10px 16px;font-size:14px}
body.kc26 :is(.btn-primary,.btn-blue){background:var(--e-knopf);color:#fff;box-shadow:var(--e-knopf-sch);border:0}
body.kc26 :is(.btn-primary,.btn-blue):hover{background:var(--e-knopf-h);color:#fff;transform:translateY(-1px);box-shadow:var(--e-knopf-sch)}
body.kc26 .btn-out{background:#fff;color:var(--e-ink);border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05)}
body.kc26 .btn-out:hover{border-color:#CBD5E1;background:#F8FAFC;color:var(--e-ink);transform:translateY(-1px)}
body.kc26 .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22)}
body.kc26 .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- Karten ---------- */
body.kc26 :is(.bc,.ftile,.pcard,.qitem,.fcard,.bcard){border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(15,23,42,.22)}
body.kc26 :is(.bc,.ftile,.pcard,.qitem):hover{transform:none;box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -26px rgba(15,23,42,.28);border-color:#D5DDE7}
body.kc26 .bc{padding:26px}
body.kc26 .bc h3{font-family:var(--kc-kopf);font-weight:600;font-size:19px;letter-spacing:-.015em;line-height:1.28}
body.kc26 .bc p{font-size:14.5px;line-height:1.6}
body.kc26 .bc .num{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;color:var(--e-hell);opacity:1}
body.kc26 :is(.bc.tint,.ftile.tint){background:#F8FAFC;border-color:var(--line)}
body.kc26 :is(.bc.dark,.bc.warm,.ftile.warm,.ftile.dark){background:var(--kc-dunkel);background-image:radial-gradient(80% 70% at 100% 0%,rgba(37,99,235,.28),transparent 62%);
  border-color:rgba(148,163,184,.16);box-shadow:0 24px 48px -30px rgba(11,18,32,.55)}
body.kc26 :is(.bc.dark,.bc.warm,.ftile.warm,.ftile.dark) h3{color:#fff}
body.kc26 :is(.bc.dark,.bc.warm,.ftile.warm,.ftile.dark) p{color:#A9B4C6}
body.kc26 :is(.bc.dark,.bc.warm) .num{color:rgba(203,213,225,.55)}
body.kc26 :is(.bc.dark,.bc.warm):hover{box-shadow:0 28px 56px -30px rgba(11,18,32,.6);border-color:rgba(148,163,184,.26)}

/* Symbole in Karten: getönte Quadrate wie in der App */
body.kc26 .kico{width:36px;height:36px;border-radius:10px;background:#EFF6FF;color:#2563EB;box-shadow:none;border:0}
body.kc26 .kico svg{width:18px;height:18px}
body.kc26 :is(.bc.dark,.bc.warm,.ftile.warm,.ftile.dark) .kico{background:rgba(96,165,250,.14);color:#93C5FD}
body.kc26 .bento .bc:nth-child(n):hover .kico{background:#DBEAFE;color:#1D4ED8}

/* ---------- Software-Ausschnitte in Abschnitten (vis/mock) ---------- */
body.kc26 .vis{border-radius:18px;background:#F8FAFC;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -34px rgba(15,23,42,.3)}
body.kc26 .vis.dark{background:var(--kc-dunkel);background-image:radial-gradient(80% 70% at 100% 0%,rgba(37,99,235,.25),transparent 62%);border-color:rgba(148,163,184,.16)}
body.kc26 .vis.warm{background:#F8FAFC}
body.kc26 .vis .vhead{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--e-ink2)}
body.kc26 .vis.dark .vhead{color:#CBD5E1}

/* ---------- Häufige Fragen ---------- */
body.kc26 .faq-item{border-radius:14px;border:1px solid var(--line);box-shadow:none;background:#fff}
body.kc26 .faq-item:hover{transform:none;box-shadow:0 10px 26px -20px rgba(15,23,42,.3);border-color:#D5DDE7}
body.kc26 .faq-item.open{border-color:#C7D7EE;box-shadow:0 14px 32px -24px rgba(15,23,42,.32)}
body.kc26 .faq-q{font-family:var(--kc-kopf);font-weight:600;font-size:16.5px;letter-spacing:-.012em;color:var(--e-ink)}
body.kc26 .faq-q .ic{width:28px;height:28px;border-radius:8px;background:#F1F5F9;color:#334155;box-shadow:none}
body.kc26 .faq-item.open .faq-q .ic{background:var(--e-akz);color:#fff;box-shadow:none}
body.kc26 .faq-a p{color:var(--e-slate)}

/* ---------- Kopfbereich der Unterseiten (falls kein neuer Hero greift) ---------- */
body.kc26 .page-hero{background:#fff}
body.kc26 .breadcrumb a{color:var(--e-slate);font-weight:500}
body.kc26 .breadcrumb a:hover{color:var(--e-ink)}

/* ---------- Abschluss-Aufruf ---------- */
body.kc26 .final h2{font-family:var(--kc-kopf);font-weight:700;letter-spacing:-.035em;color:#fff}
body.kc26 .final h2 .gr{background:none;-webkit-text-fill-color:currentColor;color:#93C5FD}
body.kc26 .final .kontaktzeile{color:#94A3B8}
body.kc26 .final .kontaktzeile a{color:#BFDBFE;border-bottom-color:rgba(191,219,254,.4)}

/* ---------- Fuß ---------- */
body.kc26 footer{background:#070C17;color:#94A3B8;border-top:1px solid rgba(148,163,184,.12)}
body.kc26 .fcols h4{font-family:var(--kc-kopf);color:#E2E8F0;font-weight:600;letter-spacing:0}
body.kc26 .fcols a{color:#94A3B8}
body.kc26 .fcols a:hover{color:#fff}
body.kc26 .fbot{color:#64748B;border-top-color:rgba(148,163,184,.12)}

/* ---------- Handy: Leiste unten ---------- */
body.kc26 .sticky-cta{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.kc26 .mobilenav{top:68px;border-radius:0 0 16px 16px}
body.kc26 .mobilenav a{font-weight:500;color:var(--e-ink2)}
body.kc26 .mobilenav .btn{color:#fff}

/* ---------- Tabellen ---------- */
body.kc26 .dtable{border-radius:14px;border:1px solid var(--line);overflow:hidden}

/* ---------- Unterseiten-Hero aus vorhandenen Bildern (Funktions-, Vorlagen-, Themenseiten) ---------- */
body.kc26 .eh-vis{position:relative;max-width:980px;margin:52px auto 0;padding:0 24px}
body.kc26 .eh-vis::before{content:"";position:absolute;left:50%;top:-300px;width:min(1500px,150vw);height:860px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--e-g1) 0%,var(--e-g2) 30%,var(--e-g3) 54%,rgba(255,255,255,0) 74%)}
body.kc26 .eh-vis .e-rahmen{padding:10px}
body.kc26 .eh-vis .e-flaeche{position:relative;border-radius:17px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04)}
body.kc26 .eh-vis .e-leiste{display:flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-bottom:1px solid #EDF1F6;background:#FBFCFE;
  font-size:13px;font-weight:600;color:var(--e-ink)}
body.kc26 .eh-vis .e-leiste .e-logo{width:22px;height:22px;border-radius:6px;background:#2563EB;color:#fff;display:grid;place-items:center}
body.kc26 .eh-vis .e-leiste .e-logo svg{width:13px;height:13px}
body.kc26 .eh-vis .e-leiste small{margin-left:auto;font-size:12px;font-weight:500;color:var(--e-slate)}
body.kc26 .eh-vis .e-inhalt{padding:28px 30px 30px}
/* das vorhandene Bild (.vis) sitzt jetzt flach im Fenster */
body.kc26 .eh-vis .vis{border:0;box-shadow:none;background:transparent;padding:0;border-radius:0;margin:0;max-width:none;transform:none!important}
body.kc26 .eh-vis .vis .vhead{display:none}
body.kc26 .eh-vis .vis .vcap{margin-top:18px;text-align:center;font-size:13.5px;color:var(--e-slate)}
body.kc26 .eh-vis .vis .vcap b{color:var(--e-ink)}
/* Ablauf-Ketten liegen im breiten Fenster quer */
@media(min-width:861px){
  body.kc26 .eh-vis .mvflow.v{flex-direction:row;align-items:stretch;gap:10px}
  body.kc26 .eh-vis .mvflow.v .fn{flex:1 1 0;min-width:0}
  body.kc26 .eh-vis .mvflow.v .fa{transform:none;align-self:center}
}

/* ---------- WhatsApp: ohne Nummer online ausgeblendet (kc-stil.js setzt die Klasse) ---------- */
html.kc-ohne-wa :is(a[data-wa],.eh-walink,.e-wa-nav,.e-wa-float){display:none!important}

/* ---------- Unterseiten-Hero: Fenster je Bildart ---------- */
body.kc26 .eh-vis:is(.e-typ-reihen,.e-typ-hub){max-width:780px}
body.kc26 .eh-vis.e-typ-reihen .e-inhalt>.vis,body.kc26 .eh-vis.e-typ-hub .e-inhalt>.vis{max-width:640px;margin:0 auto}
body.kc26 .eh-vis.e-typ-paar .e-inhalt>.vis{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px 34px;align-items:center}
body.kc26 .eh-vis.e-typ-paar .e-inhalt>.vis>div:not([class]){display:none}
body.kc26 .eh-vis.e-typ-paar .e-inhalt>.vis>.vcap{grid-column:1/-1}
body.kc26 .eh-vis.e-typ-fan .e-inhalt{padding:34px 30px 40px;background:linear-gradient(#F8FAFC,#fff)}
body.kc26 .eh-vis.e-typ-fan .vk-fan{margin:0 auto}
/* dunkle Bilder behalten ihren Grund */
body.kc26 .eh-vis.e-dunkel .e-flaeche{background:var(--kc-dunkel);background-image:radial-gradient(80% 70% at 100% 0%,rgba(37,99,235,.28),transparent 62%);
  box-shadow:0 0 0 1px rgba(148,163,184,.18)}
body.kc26 .eh-vis.e-dunkel .e-leiste{background:rgba(255,255,255,.03);border-bottom-color:rgba(148,163,184,.14);color:#E2E8F0}
body.kc26 .eh-vis.e-dunkel .e-leiste small{color:#94A3B8}
body.kc26 .eh-vis.e-dunkel .vis .vcap{color:#94A3B8}
body.kc26 .eh-vis.e-dunkel .vis .vcap b{color:#fff}
/* Ablauf: hervorgehobener Schritt in Blau statt Pfirsich */
body.kc26 .mvflow .fn.hot{background:#EFF6FF;border-color:#BFDBFE}
body.kc26 .mvflow .fn.hot .fdot{background:#DBEAFE;color:#1D4ED8}
@media(max-width:860px){
  body.kc26 .eh-vis.e-typ-paar .e-inhalt>.vis{grid-template-columns:1fr}
  body.kc26 .eh-vis .e-inhalt{padding:20px 16px 22px}
}
/* Handy-Menü: WhatsApp-Zeile */
body.kc26 .mobilenav .e-wa-mobil{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:12px;border:1px solid var(--line);
  border-radius:10px;font-weight:600;color:var(--e-ink);border-bottom:1px solid var(--line)}
body.kc26 .mobilenav .e-wa-mobil svg{width:18px;height:18px;color:var(--e-wa)}
/* Unterseiten-Hero ohne Bild: weniger Abstand nach unten */
body.kc26 .eh.eh-ohne-bild{padding-bottom:88px}
body.kc26 .eh-unter .eh-checks{margin-top:22px}
/* Hero: Kennzahlen-Zeile (Vergleichsseite) und Zusatzzeilen mit alten Farbangaben */
body.kc26 .eh-in .hstats{display:inline-flex;margin:26px auto 0;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;text-align:left}
body.kc26 .eh-in .hstats .hs{padding:12px 18px;border-left:1px solid var(--line);min-width:0}
body.kc26 .eh-in .hstats .hs:first-child{border-left:0}
body.kc26 .eh-in .hstats b{display:block;font-family:var(--kc-kopf);font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--e-ink)}
body.kc26 .eh-in .hstats b em{font-style:normal;color:var(--e-akz)}
body.kc26 .eh-in .hstats span{display:block;font-size:12.5px;color:var(--e-slate);margin-top:2px}
body.kc26 .eh-in>p[style]{color:var(--e-slate)!important;margin:18px auto 0!important;font-size:14.5px!important}
body.kc26 .eh-in>p[style] :is(b,a){color:var(--e-ink)!important}
@media(max-width:700px){body.kc26 .eh-in .hstats{display:flex;flex-direction:column}body.kc26 .eh-in .hstats .hs{border-left:0;border-top:1px solid var(--line)}body.kc26 .eh-in .hstats .hs:first-child{border-top:0}}

/* ---------- Feinschliff nach erster Durchsicht ---------- */
/* lange Wörter (Dichtheitsprüfungsprotokoll …) brechen sauber statt aus dem Bild zu laufen */
body.kc26 :is(h1,h2,h3){overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
body.kc26 button.e-btn{font-family:inherit;border:0}
body.kc26 button.e-btn.e-btn-neben{border:1px solid var(--e-line)}
body.kc26 .e-btn:focus-visible{outline:2px solid #93C5FD;outline-offset:2px}
body.kc26 .eh-bread{flex-wrap:wrap;row-gap:4px}
/* Seiten mit eigener Leiste unten: WhatsApp-Kreis weicht aus */
body.kc26.kc-vorlage .e-wa-float{display:none}
body.kc26:has(.sticky-cta) .e-wa-float{bottom:88px}


/* =====================================================================
   Teil C: einzelne Abschnitte, die eigene Bilder haben
   ===================================================================== */

/* Startseite – Integrationen: Chips statt Kreise, Mitte als ruhige Karte statt leuchtender Kugel */
body.kc26 .orbit-sec{background:var(--kc-dunkel);background-image:var(--kc-glanz);padding-bottom:0}
body.kc26 .orbit-sec .btn{border-radius:10px!important}
body.kc26 .orbit .ring{border:1px dashed rgba(148,163,184,.22)}
body.kc26 .orbit .ochip{width:auto!important;height:auto!important;min-width:0;padding:8px 13px;border-radius:10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(148,163,184,.26);color:#E2E8F0;font:600 13px/1.25 Inter,system-ui,sans-serif;letter-spacing:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transform:translate(-50%,-50%)}
body.kc26 .orbit .ochip br{display:none}
body.kc26 .orbit .core{width:auto;height:auto;top:80%;border-radius:16px;padding:14px 22px;background:#0B1220;border:1px solid rgba(148,163,184,.28);
  box-shadow:0 0 0 8px rgba(37,99,235,.08),0 24px 60px -20px rgba(37,99,235,.55);display:flex;align-items:center;gap:12px;font-size:inherit;animation:none}
body.kc26 .orbit .core>span{width:34px;height:34px;border-radius:9px;background:#2563EB;color:#fff;display:grid;place-items:center}
body.kc26 .orbit .core>span svg{width:18px;height:18px}
body.kc26 .orbit .core b{display:block;font-family:var(--kc-kopf);font-size:16px;color:#fff;text-align:left;line-height:1.15}
body.kc26 .orbit .core small{display:block;font-size:11.5px;color:#94A3B8;text-align:left}
body.kc26 .checkrow .cgreen{background:rgba(34,197,94,.14);color:#4ADE80}

/* Vorlagen-Übersicht: Blätterfächer mittig im Fenster */
body.kc26 .eh-vis.e-typ-fan{max-width:780px}
body.kc26 .eh-vis.e-typ-fan .vk-fan{width:440px;max-width:100%;height:340px;margin:0 auto;display:block}
@media(max-width:860px){body.kc26 .eh-vis.e-typ-fan{display:none}}

/* Kälteschein-Trainer: Kopf wie die übrigen Seiten (mittig, ohne Kasten) */
body.kc26 #trainer .hero{text-align:center;background:none;box-shadow:none;border:0;padding-top:12px}
body.kc26 #trainer .hero h1{font-size:clamp(34px,4.4vw,54px);letter-spacing:-.035em;line-height:1.06}
body.kc26 #trainer .hero .lead{margin:0 auto;color:var(--e-slate)}
body.kc26 #trainer :is(h1,h2,h3,h4){font-family:var(--kc-kopf)}

/* Kennzahlen-Kästchen in den Software-Ausschnitten (.mkpis .mk): kollidierten schon live mit den Legenden-Punkten (.mk.o/.h/.f) */
body.kc26 .mkpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 12px}
body.kc26 .mkpis .mk{display:block!important;width:auto!important;height:auto!important;padding:9px 10px!important;border:1px solid var(--line)!important;
  border-top:2px solid #CBD5E1!important;border-radius:10px!important;background:#F8FAFC!important;box-shadow:none!important;position:relative;min-width:0}
body.kc26 .mkpis .mk.g{border-top-color:#22C55E!important}
body.kc26 .mkpis .mk.o{border-top-color:#F59E0B!important}
body.kc26 .mkpis .mk.r{border-top-color:#EF4444!important}
body.kc26 .mkpis .mk::before,body.kc26 .mkpis .mk::after{display:none!important}
body.kc26 .mkpis .mk .l{font-size:10px;line-height:1.25;color:var(--e-slate);font-weight:600;white-space:normal}
body.kc26 .mkpis .mk .v{font-family:var(--kc-kopf);font-size:18px;font-weight:700;color:var(--e-ink);margin-top:3px;line-height:1.1}
@media(max-width:560px){body.kc26 .mkpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Handy: Abstände zwischen Abschnitten etwas knapper, Integrations-Bild als Liste */
@media(max-width:700px){
  body.kc26 .sec{padding:76px 0}
  body.kc26 .sx{padding:72px 0}
  body.kc26 .sx.tight{padding:56px 0}
  body.kc26 .final{padding:84px 0}
  body.kc26 .orbit{height:auto!important;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:28px 0 48px;margin-top:18px}
  body.kc26 .orbit .ring{display:none}
  body.kc26 .orbit .ochip{position:static!important;transform:none!important;left:auto!important;top:auto!important}
  body.kc26 .orbit .core{position:static;transform:none;order:-2;margin:0 auto 6px;flex:0 0 auto}
  body.kc26 .orbit::before{content:"";order:-1;flex-basis:100%;height:0}
}


/* =====================================================================
   Teil D: weitere Bausteine der KlimaCraft-Bildschirme (Kachel-Stil)
   Logo, Spalten, Plantafel, Typenschild, Historie, Summen, Bewegungsschleifen
   ===================================================================== */
.kc-app .a-logo{padding:2px 8px 14px}
.kc-app .a-logo img{display:block;height:30px;width:auto}
.kc-app .a-logo-m{display:none;height:22px;width:auto;margin-right:4px}
.kc-app.a-schmal .a-logo-m{display:block}
.kc-app.a-schmal .a-pfad{display:none}

.kc-app .kd-spalte{display:flex;flex-direction:column;gap:16px;min-width:0}
.kc-app .kd-spalte>.kd-k{grid-column:auto}

/* Summenblock unter Positionen */
.kc-app .kd-summe{display:grid;grid-template-columns:1fr auto;gap:6px 24px;margin:14px -2px 0 auto;max-width:300px;padding-top:12px;border-top:1px solid var(--linie);font-size:14px;color:var(--grau)}
.kc-app .kd-summe b{text-align:right;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.kc-app .kd-summe .gross{font-size:16px;color:var(--ink);font-weight:700}

/* Bestand mit Balken */
.kc-app .kd-mini{display:grid;grid-template-columns:62px 90px auto;align-items:center;gap:10px}
.kc-app .kd-mini b{font-weight:600}
.kc-app .kd-mini small{font-size:12px;color:var(--grau)}

/* Typenschild */
.kc-app .kd-typ{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin:0;font-size:14px}
.kc-app .kd-typ dt{color:var(--grau)}
.kc-app .kd-typ dd{margin:0;font-weight:600;color:var(--ink);text-align:right}

/* Historie */
.kc-app .kd-zeit{position:relative;display:flex;flex-direction:column;gap:14px;padding-left:4px}
.kc-app .kd-zeit::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:var(--linie)}
.kc-app .z-pkt{position:relative;display:grid;grid-template-columns:12px 1fr;gap:14px;align-items:start}
.kc-app .z-pkt i{position:relative;z-index:1;width:12px;height:12px;margin-top:4px;border-radius:50%;background:#fff;border:3px solid #94a3b8}
.kc-app .z-pkt.z-neu i{border-color:#2563eb;box-shadow:0 0 0 4px #dbeafe}
.kc-app .z-pkt.z-or i{border-color:#f59e0b}.kc-app .z-pkt.z-gr i{border-color:#10b981}.kc-app .z-pkt.z-rot i{border-color:#f43f5e}
.kc-app .z-pkt small{display:block;font-size:12px;color:var(--grau)}
.kc-app .z-pkt b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-top:1px}
.kc-app .z-pkt span{display:block;font-size:13px;color:var(--grau)}

/* Plantafel */
.kc-app .kd-plan{display:grid;grid-template-columns:150px repeat(10,minmax(0,1fr));grid-auto-rows:58px;row-gap:8px;align-items:stretch}
.kc-app .kd-plan .p-ecke{grid-row:1}
.kc-app .kd-plan>.p-tag{grid-row:1;grid-column:span 2;align-self:end;text-align:center;font-size:13px;font-weight:500;color:var(--grau);padding-bottom:8px;border-bottom:1px solid var(--linie);height:auto}
.kc-app .kd-plan{grid-template-rows:34px}
.kc-app .p-wer{grid-column:1;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink)}
.kc-app .p-wer .kd-av{width:32px;height:32px;font-size:12px}
.kc-app .p-grund{grid-column:2 / -1;border-radius:12px;background:#f8fafc;
  background-image:linear-gradient(to right,transparent calc(20% - 1px),#eef2f6 calc(20% - 1px),#eef2f6 20%,transparent 20%);background-size:100% 100%;
  -webkit-mask:none}
.kc-app .p-blk{position:relative;z-index:1;margin:4px 3px;border-radius:10px;padding:7px 10px;overflow:hidden;min-width:0;border-left:3px solid;
  display:flex;flex-direction:column;justify-content:center;transition:transform .15s,box-shadow .15s}
.kc-app .p-blk:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(15,23,42,.45)}
.kc-app .p-blk b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-app .p-blk small{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.kc-app .p-m{background:#eff6ff;border-color:#3b82f6;color:#1e3a8a}
.kc-app .p-w{background:#ecfdf5;border-color:#10b981;color:#065f46}
.kc-app .p-s{background:#fffbeb;border-color:#f59e0b;color:#92400e}
.kc-app .p-i{background:#f1f5f9;border-color:#94a3b8;color:#334155}
.kc-app .p-kon{z-index:2;background:#fff1f2;border:1.5px dashed #f43f5e;border-left-width:3px;border-left-style:solid;color:#9f1239;margin-top:18px;margin-bottom:-10px;
  box-shadow:0 10px 22px -14px rgba(190,18,60,.6)}
.kc-app .p-leg{margin-top:14px;color:#64748b}

/* ---------------------------------------------------------------- Bewegung (Schleifen) */
.kc-app .a-wech{display:inline-grid;justify-items:end}
.kc-app .a-wech>*{grid-area:1/1}
.kc-app .a-wech .w2{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .kc-app .a-wech .w1{animation:aW1 10s ease infinite}
  .kc-app .a-wech .w2{animation:aW2 10s ease infinite}
  .kc-app .a-toast.a-loop{animation:aToast 10s ease infinite}
  .kc-app .p-blk.a-neu{animation:aNeuBlk 10s ease infinite}
  .kc-app .a-neu-zeile{animation:aNeuZeile 10s ease infinite}
  .kc-app .a-erste td{animation:aZeile 10s ease infinite}
  .kc-app .a-lauf tbody tr:nth-child(1) td{animation:aLauf 12s ease infinite 0s}
  .kc-app .a-lauf tbody tr:nth-child(2) td{animation:aLauf 12s ease infinite 1.5s}
  .kc-app .a-lauf tbody tr:nth-child(3) td{animation:aLauf 12s ease infinite 3s}
  .kc-app .a-lauf tbody tr:nth-child(4) td{animation:aLauf 12s ease infinite 4.5s}
  .kc-app .a-lauf tbody tr:nth-child(5) td{animation:aLauf 12s ease infinite 6s}
  .kc-app .a-lauf tbody tr:nth-child(6) td{animation:aLauf 12s ease infinite 7.5s}
  .kc-app .a-lauf tbody tr:nth-child(7) td{animation:aLauf 12s ease infinite 9s}
  .kc-app .a-lauf tbody tr:nth-child(8) td{animation:aLauf 12s ease infinite 10.5s}
  .kc-app .a-puls-zahl{animation:aPulsZahl 3s ease infinite}
  .kc-app .a-sync .kd-pkt svg{animation:aDreh 10s linear infinite}
  .kc-app .p-kon{animation:aKonflikt 2.4s ease-in-out infinite}
}
@keyframes aW1{0%,38%{opacity:1}44%,92%{opacity:0}100%{opacity:1}}
@keyframes aW2{0%,38%{opacity:0}44%,92%{opacity:1}100%{opacity:0}}
@keyframes aToast{0%,40%{opacity:0;transform:translate(-50%,-8px)}45%,85%{opacity:1;transform:translate(-50%,0)}92%,100%{opacity:0;transform:translate(-50%,-8px)}}
.kc-app .a-toast.a-loop{left:50%;right:auto;top:68px;transform:translate(-50%,0);white-space:nowrap}
@keyframes aNeuBlk{0%,30%{opacity:0;transform:scale(.92)}36%{opacity:1;transform:scale(1.04)}40%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aNeuZeile{0%,30%{opacity:0;transform:translateY(-6px)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes aZeile{0%,38%{background:transparent}42%,60%{background:#ecfdf5}75%,100%{background:transparent}}
@keyframes aLauf{0%,3%{background:transparent}6%,10%{background:#f8fafc}14%,100%{background:transparent}}
@keyframes aPulsZahl{0%,100%{opacity:1}50%{opacity:.6}}
@keyframes aDreh{0%,30%{transform:rotate(0)}44%,100%{transform:rotate(360deg)}}
@keyframes aKonflikt{0%,100%{box-shadow:0 10px 22px -14px rgba(190,18,60,.6)}50%{box-shadow:0 0 0 4px rgba(244,63,94,.18),0 10px 22px -14px rgba(190,18,60,.6)}}
/* Säulen wachsen, sobald das Bild sichtbar wird (kc-stil.js setzt .kd-ani) */
@media (prefers-reduced-motion:no-preference){
  .kc-app .kd-ani .a-wachs .kd-sb{animation:aWachs .9s cubic-bezier(.2,.8,.2,1) backwards}
  .kc-app .kd-ani .a-wachs .kd-saeule:nth-child(2) .kd-sb{animation-delay:.06s}
  .kc-app .kd-ani .a-wachs .kd-saeule:nth-child(3) .kd-sb{animation-delay:.12s}
  .kc-app .kd-ani .a-wachs .kd-saeule:nth-child(4) .kd-sb{animation-delay:.18s}
  .kc-app .kd-ani .a-wachs .kd-saeule:nth-child(5) .kd-sb{animation-delay:.24s}
  .kc-app .kd-ani .a-wachs .kd-saeule:nth-child(6) .kd-sb{animation-delay:.3s}
  .kc-app .kd-ani .kd-spur i{animation:aSpur 1s cubic-bezier(.2,.8,.2,1) backwards .2s}
}
@keyframes aWachs{from{transform:scaleY(0);transform-origin:bottom}to{transform:scaleY(1);transform-origin:bottom}}
@keyframes aSpur{from{width:0}}

/* Startseite – Reiter „Alle Funktionen“: Software-Bild statt Geräte-Fenster */
body.kc26 .show-panel .eh-screen{margin:26px auto 0;padding:0;max-width:none}
body.kc26 .show-panel .eh-screen::before{display:none}
body.kc26 .show-panel .e-rahmen{background:rgba(255,255,255,.06);border-color:rgba(148,163,184,.22);box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}

/* Handy (App-Breite unter 700 px): nachrangige Tabellenspalten aus, Tabelle passt ohne Seitwärtsscrollen */
@container (max-width:700px){
  .kc-app .kd-tab{min-width:0!important}
  .kc-app .kd-tab .kd-mw{display:none}
}
/* Handy: Hinweis oben über der Fensterleiste statt über dem Seitentitel */
.kc-app.a-schmal .a-toast.a-loop{top:8px;left:auto;right:12px;transform:none}
@media (prefers-reduced-motion:no-preference){.kc-app.a-schmal .a-toast.a-loop{animation-name:aToastR}}
@keyframes aToastR{0%,40%{opacity:0;transform:translateY(-8px)}45%,85%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8px)}}


/* =====================================================================
   Teil E: Software-Ausschnitte in den Abschnitten (Funktionsseiten, Startseite)
   Aus der dunklen „Infografik-Kachel“ wird ein KlimaCraft-Fenster wie im Hero:
   Glasrahmen, Fensterleiste mit Logo, Schrift und Bausteine der App.
   ===================================================================== */
body.kc26 .visual{background:rgba(255,255,255,.55);border:1px solid rgba(226,232,240,.9);border-radius:24px;padding:10px;overflow:visible;
  box-shadow:0 30px 70px -40px rgba(10,27,61,.45);
  background-image:radial-gradient(70% 70% at 50% 110%,rgba(96,165,250,.22),transparent 70%)}
body.kc26 .visual::before,body.kc26 .visual::after{display:none!important}
body.kc26 .visual .mock{font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;background:#fff;border-radius:16px;padding:0 18px 16px;
  box-shadow:0 0 0 1px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04)!important;transform:none!important;color:#0f172a;overflow:hidden}
/* Fensterleiste: Zeichen + Titel + Status */
body.kc26 .visual .mock .mh{margin:0 -18px 6px;padding:12px 18px;border-bottom:1px solid #eef2f6;background:#fbfcfe;font-family:inherit;font-weight:600;font-size:14px;color:#0f172a;
  display:flex;align-items:center;gap:10px}
body.kc26 .visual .mock .mh::before{content:"";width:22px;height:22px;flex:none;border-radius:50%;background:url('../img/logo-zeichen.png') center/contain no-repeat}
body.kc26 .visual .mock .mh .chip{margin-left:auto}
/* Zeilen wie Tabellenzeilen der App */
body.kc26 .visual .mrow{font-size:13px;padding:11px 0;border-bottom:1px solid #f1f5f9;color:#334155;align-items:center;gap:12px}
body.kc26 .visual .mrow:last-of-type{border-bottom:0}
body.kc26 .visual .mrow>span:last-child{font-weight:600;color:#0f172a;text-align:right;font-variant-numeric:tabular-nums}
/* Status-Chips wie kd-bd */
body.kc26 .visual .chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:500;letter-spacing:0}
body.kc26 .visual .chip.ok{background:#ecfdf5;color:#047857}
body.kc26 .visual .chip.due{background:#fffbeb;color:#b45309}
body.kc26 .visual .chip.bl{background:#eff6ff;color:#1d4ed8}
/* Listeneinträge wie kd-mz */
body.kc26 .visual .mline{border:0;border-radius:12px;padding:9px 8px;margin:0 -8px;font-size:13px;gap:12px}
body.kc26 .visual .mline:hover{background:#f8fafc}
body.kc26 .visual .mline .ic{width:34px;height:34px;border-radius:10px;background:#eff6ff;color:#1d4ed8}
body.kc26 .visual .mline .ic svg{width:16px;height:16px;color:#1d4ed8}
body.kc26 .visual .mline .tx b{font-size:13.5px;font-weight:600;color:#0f172a}
body.kc26 .visual .mline .tx small{font-size:12px;color:#64748b}
/* Unterschrift */
body.kc26 .visual .sig{margin-top:14px;border:1.5px dashed #93c5fd;background:#f8fbff;border-radius:12px;padding:10px;color:#1d4ed8;font-size:11.5px;font-weight:500}
body.kc26 .visual .sig .sgn{font-family:'Noto Sans KC',sans-serif;font-style:italic;font-weight:600;font-size:19px;color:#0f172a}
/* „Synchronisiert …“ unter dem Fenster */
body.kc26 .visual .syncbar{margin:10px 4px 2px;background:#fff;border:1px solid #e8edf3;color:#334155;border-radius:12px;font-size:12.5px;-webkit-backdrop-filter:none;backdrop-filter:none}
body.kc26 .visual .spin{border-color:#dbeafe;border-top-color:#2563eb}

/* Grafiken in Abschnitten (.vis außerhalb des Kopfbereichs) ebenfalls als Fenster */
body.kc26 section:not(.eh) .vis{background:#fff;border:1px solid #e8edf3;border-radius:18px;padding:0 20px 18px;overflow:hidden;
  box-shadow:0 0 0 8px rgba(255,255,255,.55),0 30px 70px -40px rgba(10,27,61,.45)}
body.kc26 section:not(.eh) .vis .vhead{margin:0 -20px 16px;padding:12px 20px;border-bottom:1px solid #eef2f6;background:#fbfcfe;font-family:'Noto Sans KC',sans-serif;
  font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:#0f172a}
body.kc26 section:not(.eh) .vis .vhead::before{width:20px;height:20px;border-radius:50%;background:url('../img/logo-zeichen.png') center/contain no-repeat}
body.kc26 section:not(.eh) .vis.dark{background:#fff;background-image:none;border-color:#e8edf3}
body.kc26 section:not(.eh) .vis.dark :is(.mvrows .rw,.mvflow .fn){background:#fff;border-color:#e8edf3;color:#0f172a}
body.kc26 section:not(.eh) .vis.dark .vcap{color:#64748b;border-color:#eef2f6}
body.kc26 section:not(.eh) .vis.dark .vcap b{color:#0f172a}

/* Kopfbereich ohne App-Bild: Fensterleiste mit echtem Zeichen statt Schneeflocke */
body.kc26 .eh-vis .e-leiste .e-logo{background:url('../img/logo-zeichen.png') center/contain no-repeat;border-radius:50%}
body.kc26 .eh-vis .e-leiste .e-logo svg{display:none}
/* Startseite, Integrationen: Mitte mit echtem Zeichen */
body.kc26 .orbit .core>span{background:#fff url('../img/logo-zeichen.png') center/26px no-repeat}
body.kc26 .orbit .core>span svg{display:none}


/* =====================================================================
   Teil F: Blog (Übersicht und Beiträge). Aufbau bleibt, nur die Gestaltung.
   ===================================================================== */
/* Beitragskopf: Überschrift links, Titelbild rechts im Glasrahmen */
body.kc26 .page-hero:has(.article){position:relative;background:#fff;padding-bottom:64px}
body.kc26 .page-hero:has(.article)::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(15,23,42,.045) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:radial-gradient(60% 60% at 30% 10%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 30% 10%,#000,transparent 75%)}
body.kc26 .page-hero:has(.article)::after{content:"";position:absolute;right:-10%;bottom:-40%;width:70%;height:110%;pointer-events:none;z-index:0;
  background:radial-gradient(50% 50% at 50% 50%,rgba(96,165,250,.28),rgba(191,219,254,.25) 45%,transparent 72%)}
body.kc26 .page-hero:has(.article) .wrap{position:relative;z-index:1}
body.kc26 .article .acat{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--e-ink2)}
body.kc26 .article .acat::before{width:7px;height:7px;background:var(--e-akz);box-shadow:0 0 0 3px var(--e-akz-hell)}
body.kc26 .page-hero .article h1{font-family:var(--kc-kopf);font-weight:700;letter-spacing:-.035em;color:var(--e-ink);margin-top:14px;text-wrap:balance}
body.kc26 .article .ameta b{color:var(--e-ink)}
body.kc26 .ahgrid .ahero{aspect-ratio:16/9;border-radius:22px;padding:9px;background:rgba(255,255,255,.6);border:1px solid rgba(226,232,240,.95);
  box-shadow:0 40px 80px -44px rgba(10,27,61,.5);overflow:visible}
body.kc26 .ahgrid .ahero img{border-radius:15px;box-shadow:0 0 0 1px rgba(15,23,42,.06)}
/* Inhaltsverzeichnis, Kurzfassung, Kästen */
body.kc26 .tldr{border-radius:18px}
body.kc26 .tldr .tlab{letter-spacing:.02em;text-transform:none;font-size:13px}
body.kc26 .abox{border-radius:14px}
body.kc26 .arail>b,body.kc26 .atoc>b{letter-spacing:.02em;text-transform:none;font-size:13px;color:var(--e-ink)}
body.kc26 .dlist .dli{border-radius:14px}
body.kc26 .article-cta{border-radius:20px}

/* Blog-Übersicht: Karten mit den neuen Titelbildern (16:9, nichts abgeschnitten) */
body.kc26 .bcard{border-radius:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 14px 34px -26px rgba(15,23,42,.22)}
body.kc26 .bcard:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(15,23,42,.05),0 22px 44px -28px rgba(15,23,42,.3);border-color:#D5DDE7}
body.kc26 .bcard .bimg{height:auto;aspect-ratio:16/9;background:#f8fafc;border-bottom:1px solid var(--line2)}
body.kc26 .bcard .bcat{letter-spacing:.02em;text-transform:none;font-size:12.5px;font-weight:600}
body.kc26 .bcard h3{font-family:var(--kc-kopf);font-weight:600;color:var(--e-ink);letter-spacing:-.012em}


/* =====================================================================
   Teil G: dezente Hintergründe (Runde 3) – nur auf Seiten mit body.kc-deko
   Raster wie im Kopfbereich, weich ausgeblendet; Lichtfelder in Blau; Punktfelder in Karten.
   Elemente fügt deko.py ein (aria-hidden), Text bleibt unberührt.
   ===================================================================== */

/* ---------- Abschnitt: Bühne für die Deko ----------
   Größen in px, nicht in %, damit Raster und Licht in kurzen und sehr langen Abschnitten gleich wirken. */
body.kc26.kc-deko .hg26-sec{position:relative;isolation:isolate;overflow-x:clip}
body.kc26.kc-deko .hg26{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit;
  --raster:64px;--linie:rgba(15,23,42,.05);
  --gx:12%;--gy:0px;--gw:780px;--gh:560px;
  --ax:100%;--ay:0px;--aw:820px;--ah:620px;--a1:rgba(59,130,246,.15);--a2:rgba(147,197,253,.11);
  --bx:0%;--by:100%;--bw:700px;--bh:520px;--b1:rgba(14,165,233,.07);
  --cx:0%;--cy:50%;--cw:760px;--ch:620px;--c1:transparent;
  background:
    radial-gradient(var(--aw) var(--ah) at var(--ax) var(--ay),var(--a1) 0%,var(--a2) 36%,transparent 72%),
    radial-gradient(var(--bw) var(--bh) at var(--bx) var(--by),var(--b1) 0%,transparent 70%)}
body.kc26.kc-deko .hg26::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,var(--linie) 1px,transparent 1px),linear-gradient(to bottom,var(--linie) 1px,transparent 1px);
  background-size:var(--raster) var(--raster);background-position:center top;
  -webkit-mask-image:radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy),#000 0%,rgba(0,0,0,.55) 42%,transparent 80%);
          mask-image:radial-gradient(var(--gw) var(--gh) at var(--gx) var(--gy),#000 0%,rgba(0,0,0,.55) 42%,transparent 80%)}
/* drittes Lichtfeld für lange Abschnitte (Standard: aus) */
body.kc26.kc-deko .hg26::after{content:"";position:absolute;inset:0;
  background:radial-gradient(var(--cw) var(--ch) at var(--cx) var(--cy),var(--c1) 0%,transparent 70%)}

/* Lage: Raster dort, wo die Überschrift steht; Licht auf der anderen Seite */
body.kc26.kc-deko .hg26-r{--gx:88%;--ax:0%;--ay:40px;--bx:100%;--by:100%}
body.kc26.kc-deko .hg26-m{--gx:50%;--gw:980px;--gh:560px;--ax:50%;--ay:calc(100% + 60px);--aw:1180px;--ah:640px;
  --bx:50%;--by:-60px;--bw:820px;--bh:420px;--b1:rgba(96,165,250,.10)}
body.kc26.kc-deko .hg26-weit{--gw:1500px;--gh:1300px;--gx:30%}
body.kc26.kc-deko .hg26-lang{--c1:rgba(59,130,246,.10);--cx:0%;--cy:46%}

/* Dunkle Flächen: Raster heller, Licht kräftiger (wie Abschluss und Kopfbereich) */
body.kc26.kc-deko .hg26-dunkel{--raster:56px;--linie:rgba(148,163,184,.085);
  --a1:rgba(37,99,235,.46);--a2:rgba(37,99,235,.16);--b1:rgba(56,189,248,.14)}
body.kc26.kc-deko .hg26-dunkel.hg26-m{--aw:1400px;--ah:760px;--b1:rgba(59,130,246,.20);--bw:1000px;--bh:480px}
body.kc26.kc-deko .hg26-dunkel.hg26-lang{--c1:rgba(37,99,235,.20)}

/* Große dunkle Karten (Preis, „Du hast nicht gegründet“, Zitat, Kopf-Karte) */
body.kc26.kc-deko .hg26-in{--raster:44px;--gx:90%;--gw:620px;--gh:420px;--ax:0%;--ay:0px;--aw:640px;--ah:520px;--bx:100%;--by:100%;--bw:560px;--bh:420px}

/* ---------- Karten ---------- */
body.kc26.kc-deko .hg26-k{isolation:isolate}
body.kc26.kc-deko .hg26-k>.hg26-p{position:absolute;top:0;right:0;left:auto;bottom:auto;z-index:-1;pointer-events:none;
  width:min(62%,290px);height:min(78%,230px);border-top-right-radius:inherit;
  --punkt:rgba(100,116,139,.34);--punkt-an:rgba(37,99,235,.55);--schein:rgba(59,130,246,.14);
  background-image:radial-gradient(circle,var(--punkt) 1.1px,transparent 1.7px);background-size:12px 12px;background-position:right 6px top 6px;
  -webkit-mask-image:radial-gradient(100% 100% at 100% 0%,#000 0%,rgba(0,0,0,.6) 34%,transparent 74%);
          mask-image:radial-gradient(100% 100% at 100% 0%,#000 0%,rgba(0,0,0,.6) 34%,transparent 74%);
  transition:opacity .45s ease}
/* beim Überfahren werden die Punkte blau: zweite Punktebene blendet ein */
body.kc26.kc-deko .hg26-k>.hg26-p::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,var(--punkt-an) 1.1px,transparent 1.7px);background-size:12px 12px;background-position:right 6px top 6px;
  opacity:0;transition:opacity .45s ease}
body.kc26.kc-deko .hg26-k:hover>.hg26-p::after,body.kc26.kc-deko .hg26-k:focus-visible>.hg26-p::after{opacity:1}
body.kc26.kc-deko .hg26-k>.hg26-p::before{content:"";position:absolute;inset:0;
  background:radial-gradient(85% 85% at 100% 0%,var(--schein),transparent 72%);opacity:0;transition:opacity .45s ease}
body.kc26.kc-deko .hg26-k>.hg26-p-dunkel{--punkt:rgba(191,219,254,.24);--punkt-an:rgba(147,197,253,.55);--schein:rgba(96,165,250,.26)}
body.kc26.kc-deko .hg26-k:hover>.hg26-p::before,body.kc26.kc-deko .hg26-k:focus-visible>.hg26-p::before{opacity:1}

/* Karten heben sich beim Überfahren leicht an (wie live), Schatten bleibt ruhig */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  body.kc26.kc-deko .hg26-k:is(.bc,.ftile,.ep-k,.ecard){transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
  body.kc26.kc-deko .hg26-k:is(.bc,.ftile,.ep-k,.ecard):hover{transform:translateY(-3px)}
}
body.kc26.kc-deko .hg26-k:is(.bc,.ftile,.ep-k,.ecard):not(.dark):not(.warm):not(.dk):hover{border-color:#C9D8EE}

/* Große dunkle Karten: Deko liegt innen, Inhalt darüber */
body.kc26.kc-deko .hg26-k>.hg26-in{z-index:-1}

/* ---------- Lichtschein hinter Software-Fenstern in Abschnitten ----------
   Das Fenster bildet bewusst KEINEN eigenen Stapelkontext: sonst läge der Schein über dem Text der Nachbarspalte.
   So malt er auf der negativen Ebene des umgebenden Inhalts – hinter Text und hinter dem Glasrahmen. */
body.kc26.kc-deko .visual.hg26-k{isolation:auto}
body.kc26.kc-deko .visual.hg26-k>.hg26-schein{position:absolute;left:50%;top:50%;width:160%;height:175%;transform:translate(-50%,-50%);
  z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 56%,rgba(59,130,246,.36) 0%,rgba(96,165,250,.24) 34%,rgba(191,219,254,.18) 54%,transparent 74%)}

/* ---------- Handy: kleinere Raster, Licht etwas zurück ---------- */
@media (max-width:760px){
  body.kc26.kc-deko .hg26{--raster:44px;--gw:520px;--gh:440px;--aw:520px;--ah:460px;--bw:460px;--bh:420px;--cw:460px;--ch:460px}
  body.kc26.kc-deko .hg26-m{--gw:560px;--gh:460px;--aw:640px;--ah:520px}
  body.kc26.kc-deko .hg26-dunkel{--raster:40px}
  body.kc26.kc-deko .hg26-k>.hg26-p{width:min(70%,220px);height:min(70%,170px)}
  body.kc26.kc-deko .visual.hg26-k>.hg26-schein{width:120%;height:130%}
}
@media (forced-colors:active){
  body.kc26.kc-deko :is(.hg26,.hg26-p,.hg26-schein){display:none}
}


/* =====================================================================
   Teil H: Feinschliff seitenweit (Runde 4)
   Schriftschnitte wie in der App, Symbolkacheln im App-Stil, Kennzahlen in Geist.
   ===================================================================== */

/* ---------- Schrift: kein 800 mehr – wie Kopfbereich und App (700) ---------- */
body.kc26 :is(h1,h2):not(.kd-h1){font-weight:700}
body.kc26 .usp .txt h2{font-size:clamp(28px,2.7vw,36px);line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
body.kc26 :is(.eff-grid,.szhead,.orbit-sec) h2{font-weight:700}
body.kc26 .mgquote h2.mgq{font-weight:700;letter-spacing:-.025em}
body.kc26 .split .txt h3{font-weight:700}
body.kc26 .morelinks>b{font-weight:600;letter-spacing:.02em}
body.kc26 .bento .bc .nlab{font-weight:600}

/* Kennzahlen: Geist 700, gleich breite Ziffern, Einheit leiser */
body.kc26 :is(.hoodband .hb b,.statcol .st b,.es b,.pgrid .pnum,.flowfoot .cnt,.pcardbox .big,.mvvs .vn b,.cbflow .cbstep>span){
  font-family:var(--kc-kopf);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
body.kc26 .es b .u{font-weight:600;color:#64748B;letter-spacing:0}
body.kc26 .statcol .st b em{font-weight:700}
/* Kälteschein-Trainer: eigene Schrift (Sora) auf Geist umstellen */
body.kc26 .ring .zahl{font-family:var(--kc-kopf);font-weight:700;letter-spacing:-.03em}

/* ---------- Symbolkacheln: wie die Kennzahl-Symbole in KlimaCraft ----------
   ruhige Tönung statt bunter Verläufe, eckiger (12 px), feine Kante, Linien-Symbol 1,8 */
body.kc26 :is(.kico,.fi2,.mic,.eic,.ep-ic,.noico,.vi,.fdot,.l-ic,.mline .ic){
  background:#EFF5FF!important;background-image:none!important;color:#1D4ED8!important;border:1px solid #DCE8FB!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;border-radius:12px!important}
body.kc26 :is(.kico,.fi2,.mic,.eic,.ep-ic,.noico,.vi,.fdot,.l-ic,.mline .ic) svg{stroke-width:1.8}
body.kc26 :is(.kico,.fi2,.mic,.eic){width:42px!important;height:42px!important;display:grid;place-items:center}
body.kc26 :is(.kico,.fi2,.mic,.eic) svg{width:20px!important;height:20px!important}
body.kc26 :is(.vi,.fdot,.ep-ic,.noico,.l-ic){border-radius:9px!important}
/* Töne wie die Kennzahlen der App: blau, himmel, grün, orange – nur wo mehrere nebeneinander stehen */
body.kc26 .eic.g,body.kc26 .ep-ic.gr{background:#ECFDF5!important;color:#047857!important;border-color:#CDEFE0!important}
body.kc26 .eic.c{background:#F0F9FF!important;color:#0369A1!important;border-color:#D3ECFB!important}
body.kc26 .eic.o,body.kc26 .ep-ic.or{background:#FFFBEB!important;color:#B45309!important;border-color:#F8E7BF!important}
body.kc26 .ep-ic.rot{background:#FFF1F2!important;color:#BE123C!important;border-color:#FAD5DB!important}
/* auf dunklen Karten */
body.kc26 :is(.bc.dark,.bc.warm,.ftile.dark,.ftile.warm,.ecard.dk,.sx.dark,.final,.showcase,.casebox,.hoodband) :is(.kico,.fi2,.mic,.eic,.ep-ic,.noico,.vi,.fdot,.l-ic){
  background:rgba(96,165,250,.12)!important;color:#93C5FD!important;border-color:rgba(147,197,253,.20)!important;box-shadow:none!important}
/* Überfahren: Symbol wird kräftiger statt zu hüpfen */
body.kc26 :is(.bc,.ftile,.ecard,.intcard,.modcard):hover :is(.kico,.fi2,.eic){background:#DBEAFE!important;transform:none!important}
body.kc26 :is(.bc.dark,.bc.warm,.ftile.dark,.ftile.warm,.ecard.dk):hover :is(.kico,.fi2,.eic){background:rgba(96,165,250,.2)!important}
body.kc26 .ecard .eic{margin-bottom:16px;transition:background .25s}
/* runde Haken-Symbole (Preise „Null Risiko“) im selben Stil, aber rund */
body.kc26 .riskcard .ri{background:#ECFDF5!important;color:#047857!important;border:1px solid #CDEFE0!important;box-shadow:none!important}
body.kc26 .riskcard .ri svg{width:18px;height:18px}
body.kc26 .sx.snug{padding-top:72px;padding-bottom:72px}


/* =====================================================================
   Teil I: KlimaCraft-Fenster in den Abschnitten (Runde 4)
   Ersetzt die alten Grafik-Kärtchen neben den Texten: echtes App-Fenster in Originalgröße
   (Fensterleiste mit Zeichen und Pfad, darunter Bausteine der App), wo passend mit Handy.
   Bewegung nur per CSS-Schleife (10 s), damit beliebig viele Fenster je Seite laufen können.
   ===================================================================== */
body.kc26 .visual.kf-traeger{padding:10px}
body.kc26 .visual.kf-traeger.kf-mit-handy{padding:10px 10px 10px 10px;margin-bottom:34px}
.kf{position:relative;border-radius:16px;background:#fff;overflow:hidden;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(15,23,42,.08),0 2px 4px rgba(15,23,42,.04);font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;color:#0f172a;text-align:left}
.kf-leiste{display:flex;align-items:center;gap:10px;height:46px;padding:0 14px 0 16px;border-bottom:1px solid #eef2f6;background:#fbfcfe}
.kf-leiste img{width:22px;height:22px;flex:none;border-radius:50%}
.kf-pfad{font-size:12.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.kf-pfad b{color:#0f172a;font-weight:600}
.kf-knopf{margin-left:auto;display:flex;gap:6px;flex:none}
.kf-knopf span{width:30px;height:30px;border-radius:9px;border:1px solid #e8edf3;display:grid;place-items:center;color:#64748b;background:#fff;position:relative}
.kf-knopf svg{width:14px;height:14px}
.kf-knopf .glocke i{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:#f43f5e;border:1.5px solid #fff}
.kf .kc-app.kf-app{display:block;height:auto;background:#fff}
.kf .kf-app .kd{padding:16px 16px 18px}
.kf .kf-app .kd-kopf{margin:0 0 14px}
.kf .kf-app .kd-h1{font-size:19px}
.kf .kf-app .kd-unter{font-size:12.5px;margin-top:4px}
.kf .kf-app .kd-k{border-radius:16px;padding:16px 16px}
.kf .kf-app .kd-kt{margin-bottom:10px}
.kf .kf-app .kd-kt h3{font-size:14.5px}
.kf .kf-app .kd-kt small{font-size:12px}
.kf .kf-app .kd-raster{gap:12px}
.kf .kf-app .kd-mz{padding:8px 10px}
.kf .kf-app .kd-mt b{font-size:13.5px}
.kf .kf-app .kd-mt small{font-size:12px}
.kf .kf-app .kd-mr{font-size:13px}
.kf .kf-app .kd-btn{height:34px;padding:0 12px;font-size:13px;border-radius:10px}
.kf .kf-app .kd-tab td{padding:10px 8px;font-size:13px}
.kf .kf-app .kd-tab th{padding:9px 8px;font-size:12px}
.kf .kf-app .kd-tw{margin:6px -6px 0}
.kf .kf-app .kd-tab{min-width:0!important}
.kf .kf-app .kd-kpi{min-height:0}
.kf .kf-app .kd-zahl{font-size:26px;margin:8px 0 6px}
.kf .kf-app .kd-ic{width:34px;height:34px;border-radius:10px}
.kf .kf-app .kd-ic svg{width:16px;height:16px}
.kf .kf-app .kd-typ{font-size:13px;gap:9px 14px}
.kf .kf-app .kd-zeit{gap:12px}
.kf .kf-app .z-pkt b{font-size:13.5px}
.kf .kf-app .kd-summe{max-width:none;margin:12px 0 0;font-size:13px}
.kf .kf-app .kd-balk{grid-template-columns:minmax(80px,120px) 1fr auto;gap:10px;padding:7px 8px}
.kf .kf-app .kd-balk b{white-space:nowrap}
.kf .kf-app .kd-balk span{font-size:13px}
.kf .kf-app .a-stand{height:24px;font-size:11.5px}
.kf .kf-app .kd-bd{height:22px;font-size:11.5px}
/* kleine Kennzahl-Reihe im Fenster */
.kf-zahlen{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px;margin:0 0 12px}
.kf-zahlen>div{border:1px solid #e8edf3;border-radius:12px;padding:10px 12px;background:#fff}
.kf-zahlen small{display:block;font-size:11.5px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-zahlen b{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums}
.kf-zahlen .bl b{color:#1d4ed8}.kf-zahlen .gr b{color:#047857}.kf-zahlen .or b{color:#b45309}.kf-zahlen .rot b{color:#be123c}
/* Fortschritt / Ablauf (wächst, sobald das Fenster sichtbar wird) */
@media (prefers-reduced-motion:no-preference){.kf .kd-ani .kf-lauf i{animation:aSpur 1.8s cubic-bezier(.2,.8,.2,1) backwards .2s}}
.kf-lauf{height:8px;border-radius:999px;background:#f1f5f9;overflow:hidden;margin:8px 0 4px}
.kf-lauf i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#0ea5e9)}
.kf-kette{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#334155}
.kf-kette span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#f1f5f9;white-space:nowrap}
.kf-kette span.an{background:#0f172a;color:#fff}
.kf-kette em{font-style:normal;color:#94a3b8}
/* Unterschrift im Fenster */
.kf-sig{margin-top:12px;border:1.5px dashed #bfdbfe;border-radius:12px;background:#f8fbff;padding:8px 12px 6px;position:relative;height:74px}
.kf-sig small{font-size:11px;color:#1d4ed8;font-weight:500}
.kf-sig svg{position:absolute;left:16px;right:16px;top:24px;width:calc(100% - 32px);height:42px}
.kf-sig path{fill:none;stroke:#0f172a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Fußzeile im Fenster */
.kf-fuss{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #eef2f6;font-size:12.5px;color:#475569}
.kf-fuss svg{width:15px;height:15px;color:#10b981;flex:none}
/* Hinweis (Toast) im Fenster */
.kf .kf-app{position:relative}
.kf .a-toast.a-loop{top:auto;bottom:14px;left:50%;right:auto;font-size:12.5px;padding:9px 12px;gap:8px;border-radius:12px;max-width:calc(100% - 24px);white-space:nowrap}
.kf .a-toast.a-loop i{width:18px;height:18px;font-size:10px}

/* ---------- Handy neben dem Fenster ----------
   Rechner: Fenster lässt rechts Platz, das Handy steht darin und überlappt nur den Rand.
   Handy (schmal): Handy mittig unter dem Fenster, leicht überlappend. */
.kf-wrap{position:relative;padding-right:150px}
.kf-wrap .e-handy{right:-4px;bottom:-40px;transform:scale(.66);transform-origin:right bottom;z-index:8}
.kf-wrap>.kf{min-height:336px}
.kf-wrap.kf-handy-links{padding-right:0;padding-left:150px}
.kf-wrap.kf-handy-links .e-handy{right:auto;left:-4px;transform-origin:left bottom}
.kf-wrap.kf-nur-handy{display:flex;justify-content:center;padding:6px 0 0}
.kf-wrap.kf-nur-handy .e-handy{position:relative;right:auto;bottom:auto;transform:none}
.kf-wrap .e-handy .h-wech{display:inline-grid}
.kf-wrap .e-handy .h-wech>*{grid-area:1/1}
.kf-wrap .e-handy .h-wech .w2{opacity:0}
.kf-wrap .e-handy .h-sync{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:22px;padding:0 9px;border-radius:999px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:600;white-space:nowrap}
.kf-wrap .e-handy .h-zeit{margin:10px 16px 0;border-radius:14px;background:#0f172a;color:#fff;padding:12px 14px}
.kf-wrap .e-handy .h-zeit small{display:block;font-size:11px;color:#94a3b8}
.kf-wrap .e-handy .h-zeit b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.kf-wrap .e-handy .h-zeit span{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#86efac}
.kf-wrap .e-handy .h-zeit span i{width:6px;height:6px;border-radius:50%;background:#22c55e}
@media (prefers-reduced-motion:no-preference){
  .kf-wrap .e-handy.h-loop .h-pkt .h-box{animation:hBox 10s ease infinite}
  .kf-wrap .e-handy.h-loop .h-pkt:nth-child(2) .h-box{animation-delay:.6s}
  .kf-wrap .e-handy.h-loop .h-pkt:nth-child(3) .h-box{animation-delay:1.2s}
  .kf-wrap .e-handy.h-loop .h-pkt:nth-child(4) .h-box{animation-delay:1.8s}
  .kf-wrap .e-handy.h-loop .h-pkt:nth-child(5) .h-box{animation-delay:2.4s}
  .kf-wrap .e-handy.h-loop .h-unter path{animation:hZug 10s ease-in-out infinite}
  .kf-wrap .e-handy.h-loop .h-knopf{animation:hKnopf 10s ease infinite}
  .kf-wrap .e-handy .h-wech .w1,.kf .a-wech .w1{animation:aW1 10s ease infinite}
  .kf-wrap .e-handy .h-wech .w2,.kf .a-wech .w2{animation:aW2 10s ease infinite}
  .kf-wrap .e-handy .h-zeit b em{animation:hBlink 2s steps(1) infinite}
}
@media (prefers-reduced-motion:reduce){
  .kf-wrap .e-handy.h-loop .h-pkt .h-box{background:#10b981;border-color:#10b981}
  .kf-wrap .e-handy.h-loop .h-unter path{stroke-dashoffset:0}
  .kf-wrap .e-handy .h-wech .w1,.kf .a-wech .w1{opacity:0}
  .kf-wrap .e-handy .h-wech .w2,.kf .a-wech .w2{opacity:1}
}
@keyframes hBox{0%,6%{background:#fff;border-color:#cbd5e1}9%,90%{background:#10b981;border-color:#10b981}96%,100%{background:#fff;border-color:#cbd5e1}}
@keyframes hZug{0%,28%{stroke-dashoffset:420}38%,90%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:420}}
@keyframes hKnopf{0%,39%{background:#2563eb;transform:none}41%{transform:scale(.97);background:#1d4ed8}44%,92%{background:#10b981;transform:none}100%{background:#2563eb}}
@keyframes hBlink{0%{opacity:1}50%{opacity:.25}}
.kf .a-wech{display:inline-grid;justify-items:end}
.kf .a-wech>*{grid-area:1/1}
.kf .a-wech .w2{opacity:0}

/* schmale Spalte / Handy */
@container (max-width:460px){
  .kf .kf-app .kd{padding:12px 12px 14px}
  .kf-zahlen{gap:6px}
  .kf-zahlen>div{padding:8px 9px}
  .kf-zahlen small{font-size:10.5px}
  .kf-zahlen b{font-size:14.5px}
  .kf .kf-app .kd-mw{display:none}
  .kf .a-toast.a-loop{white-space:nowrap;font-size:11.5px;max-width:calc(100% - 20px)}
  .kf .a-toast.a-loop span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .kf .kf-app .kd-k{padding:13px 12px}
}
@media (max-width:760px){
  .kf-wrap,.kf-wrap.kf-handy-links{padding:0;display:flex;flex-direction:column;align-items:center}
  .kf-wrap>.kf{align-self:stretch;min-height:0}
  .kf-wrap .e-handy,.kf-wrap.kf-handy-links .e-handy{position:relative;left:auto;right:auto;bottom:auto;transform:none;zoom:.74;margin-top:-30px}
  body.kc26 .visual.kf-traeger.kf-mit-handy{margin-bottom:0}
  .kf .a-toast.a-loop{white-space:normal}
}


/* =====================================================================
   Teil J: kleine Software-Ausschnitte in Karten, Kennzahl-Kacheln, Integrationen-Blöcke (Runde 4)
   ===================================================================== */
/* ---------- Ausschnitt in einer Karte (wie „Bereiche im Überblick“) ---------- */
body.kc26 .mv26{margin-top:16px;border:1px solid #E6ECF4;border-radius:14px;background:#fff;padding:6px 12px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 24px -18px rgba(15,23,42,.25);font-family:'Noto Sans KC','Noto Sans',system-ui,sans-serif;text-align:left}
body.kc26 .mv26.mv-flach{padding:12px}
body.kc26 .mv26 .mv-z{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #F1F5F9}
body.kc26 .mv26 .mv-z:first-child{border-top:0}
body.kc26 .mv26 .mv-ic{flex:none;width:28px;height:28px;border-radius:8px;background:#EFF5FF;color:#1D4ED8;display:grid;place-items:center}
body.kc26 .mv26 .mv-ic svg{width:14px;height:14px}
body.kc26 .mv26 .mv-t{flex:1;min-width:0}
body.kc26 .mv26 .mv-t b{display:block;font-size:12.5px;font-weight:600;color:#0F172A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kc26 .mv26 .mv-t small{display:block;font-size:11.5px;color:#64748B;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.kc26 .mv26 .mv-st{flex:none;font-style:normal;font-size:11px;font-weight:600;height:22px;padding:0 9px;border-radius:999px;display:inline-flex;align-items:center;white-space:nowrap}
body.kc26 .mv26 .mv-gr{background:#ECFDF5;color:#047857}
body.kc26 .mv26 .mv-bl{background:#EFF6FF;color:#1D4ED8}
body.kc26 .mv26 .mv-or{background:#FFFBEB;color:#B45309}
body.kc26 .mv26 .mv-kette{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
body.kc26 .mv26 .mv-kette span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#F1F5F9;color:#334155;font-size:11.5px;font-weight:500;white-space:nowrap}
body.kc26 .mv26 .mv-kette span.an{background:#0F172A;color:#fff}
body.kc26 .mv26 .mv-kette i{width:10px;height:1.5px;background:#CBD5E1;flex:none}
body.kc26 .mv26 .mv-balk{padding:8px 0 10px}
body.kc26 .mv26 .mv-bk{display:flex;justify-content:space-between;gap:10px;font-size:11.5px;color:#64748B;margin-bottom:7px}
body.kc26 .mv26 .mv-bk b{color:#0F172A;font-weight:600}
body.kc26 .mv26 .mv-spur{height:7px;border-radius:999px;background:#EEF2F7;overflow:hidden}
body.kc26 .mv26 .mv-spur i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3B82F6,#0EA5E9)}
/* auf dunklen Karten */
body.kc26 .mv26.mv-dunkel{background:rgba(255,255,255,.04);border-color:rgba(148,163,184,.18);box-shadow:none}
body.kc26 .mv26.mv-dunkel .mv-z{border-color:rgba(148,163,184,.14)}
body.kc26 .mv26.mv-dunkel .mv-t b,body.kc26 .mv26.mv-dunkel .mv-bk b{color:#F1F5F9}
body.kc26 .mv26.mv-dunkel .mv-t small,body.kc26 .mv26.mv-dunkel .mv-bk{color:#94A3B8}
body.kc26 .mv26.mv-dunkel .mv-ic{background:rgba(96,165,250,.14);color:#93C5FD}
body.kc26 .mv26.mv-dunkel em.mv-bl{background:rgba(96,165,250,.16);color:#BFDBFE}
body.kc26 .mv26.mv-dunkel .mv-spur{background:rgba(148,163,184,.18)}
body.kc26 .mv26.mv-dunkel .mv-kette span{background:rgba(148,163,184,.14);color:#CBD5E1}
body.kc26 .mv26.mv-dunkel .mv-kette span.an{background:#2563EB;color:#fff}
body.kc26 .mv26.mv-dunkel .mv-kette i{background:rgba(148,163,184,.4)}
/* beim Überfahren der Karte: Ausschnitt hebt sich leicht */
@media (hover:hover){
  body.kc26 :is(.ecard,.bc) .mv26{transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
  body.kc26 :is(.ecard,.bc):hover .mv26:not(.mv-dunkel){box-shadow:0 1px 2px rgba(15,23,42,.04),0 18px 30px -18px rgba(37,99,235,.35)}
}
/* Effizienz-Karten: Inhalt oben, Ausschnitt unten bündig */
body.kc26 .eff-cards .ecard{display:flex;flex-direction:column}
body.kc26 .eff-cards .ecard .mv26{margin-top:auto;transform:translateY(0)}
body.kc26 .eff-cards .ecard p{margin-bottom:16px}

/* ---------- Kennzahl-Kacheln (Startseite „Weniger Bürozeit“) wie in der App ---------- */
body.kc26 .eff-stats .es.es26{background:#fff;border:1px solid #E3EAF3;border-radius:18px;padding:18px 20px 20px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
body.kc26 .eff-stats .es.es26::before{display:none}
body.kc26 .es26 .es-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#EFF5FF;color:#1D4ED8;border:1px solid #DCE8FB;margin-bottom:14px}
body.kc26 .es26 .es-ic svg{width:17px;height:17px}
body.kc26 .es26.es-gr .es-ic{background:#ECFDF5;color:#047857;border-color:#CDEFE0}
body.kc26 .eff-stats .es26 b{font-family:var(--kc-kopf);font-weight:700;font-size:40px;color:#1D4ED8;letter-spacing:-.035em;background:none;-webkit-text-fill-color:currentColor}
body.kc26 .eff-stats .es26.es-gr b{color:#047857}
body.kc26 .eff-stats .es26 b .u{color:#64748B;font-size:.48em;font-weight:600;margin-left:2px}
body.kc26 .eff-stats .es26>span:last-child{font-size:13.5px;color:#475569}

/* ---------- Integrationen: Detailblöcke zweispaltig ---------- */
body.kc26 .ig26{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;margin-top:72px!important}
body.kc26 .ig26.ig26-r .ig26-vis{order:-1}
body.kc26 .ig26 .ig26-txt h2{font-family:var(--kc-kopf);font-size:clamp(24px,2.3vw,30px)!important;line-height:1.15;letter-spacing:-.025em;color:var(--e-ink,#0B1220)!important;margin-bottom:16px!important}
body.kc26 .ig26 .ig26-txt .bento{display:grid;grid-template-columns:1fr;gap:12px}
body.kc26 .ig26 .ig26-txt .bc{padding:18px 20px}
body.kc26 .ig26 .ig26-txt .bc h3{font-size:15.5px;margin-top:2px}
body.kc26 .ig26 .ig26-txt .bc p{font-size:14px;line-height:1.62}
body.kc26 .ig26 .ig26-txt .bc .kico{width:34px!important;height:34px!important;border-radius:10px!important;float:left;margin:0 12px 6px 0}
body.kc26 .ig26 .ig26-txt .bc .kico svg{width:16px!important;height:16px!important}
body.kc26 .ig26 .ig26-txt .bc h3{line-height:34px}
body.kc26 .ig26 .ig26-txt .bc p{clear:both}
body.kc26 .ig26-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:72px}
body.kc26 .ig26-karte{position:relative;background:#fff;border:1px solid #E3EAF3;border-radius:20px;padding:26px 26px 22px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
body.kc26 .ig26-karte .kico{margin-bottom:16px}
body.kc26 .ig26-karte h2{font-family:var(--kc-kopf);font-size:21px!important;line-height:1.25;color:var(--e-ink,#0B1220)!important;margin-bottom:10px!important}
body.kc26 .ig26-karte p{font-size:14.5px;line-height:1.65}
body.kc26 .kd-vorschau{flex:none;height:22px;padding:0 9px;border-radius:999px;background:#FFFBEB;color:#B45309;font-size:11px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap}
@media (max-width:900px){
  body.kc26 .ig26{grid-template-columns:1fr;gap:22px;margin-top:56px!important}
  body.kc26 .ig26.ig26-r .ig26-vis{order:0}
  body.kc26 .ig26-duo{grid-template-columns:1fr;margin-top:56px}
}
body.kc26 .mv26.mv-kompakt .mv-ic{display:none}
body.kc26 .mv26.mv-kompakt{padding:4px 12px}
body.kc26 .mv26 .mv-luft{height:10px}
body.kc26 .eff-grid{align-items:center}
body.kc26 .ig26 .ig26-txt .bento>*{grid-column:auto!important}
body.kc26 .ig26 .ig26-txt .bc.mut p{color:#475569}
body.kc26 .ig26-karte p+p{margin-top:10px}
body.kc26 .ig26-karte a,body.kc26 .ig26 .ig26-txt .bc a{color:#2563EB;font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(37,99,235,.35)}


/* WhatsApp vorübergehend aus (Schalter WHATSAPP_AN in bau26.py, 19.10.2026) */
:is(a[data-wa],.eh-walink,.e-wa-nav,.e-wa-float,.e-wa-mobil){display:none!important}